/* ============================================
   PENNY'S ARK · GLOBAL STYLES
   Shared layout, navigation, and core components.
   ============================================ */

/* tokens.css is enqueued separately (handle: pa-tokens, a dependency of
   pa-global), so it always loads before this file. The previous
   @import url('tokens.css') triggered a second, render-blocking fetch of
   tokens.css and is therefore removed. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

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

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(1200px 600px at 80% -20%, rgba(228,178,91,0.14), transparent 60%),
              radial-gradient(900px 500px at -10% 90%, rgba(138,171,120,0.14), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

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

.container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(72px, 10vw, 120px); }

.eyebrow {
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green-l);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--gold); border-radius: 2px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: var(--slab);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: all .22s ease;
  border: 0;
}
.btn-primary, .btn-donate {
  background: var(--yellow);
  color: var(--green-d);
  box-shadow: 0 4px 14px rgba(228,178,91,0.36);
}
.btn-primary:hover, .btn-donate:hover {
  background: var(--gold);
  color: var(--green-d);
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(228,178,91,0.46);
}
.btn-dark { background: var(--ink); color: var(--paper); }
.btn-dark:hover { background: var(--green-d); }
.btn-light {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.7);
  backdrop-filter: blur(6px);
}
.btn-light:hover { background: #fff; color: var(--green-d); }
.btn-ghost { background: transparent; color: var(--green); border: 1.5px solid var(--green); }
.btn-ghost:hover { background: var(--green); color: var(--paper-w); }

/* TOP BAR */
.topbar {
  background: var(--gold);
  color: var(--green-d);
  padding: 10px var(--gutter);
  font-family: var(--sans);
  position: relative;
  z-index: 52;
  border-bottom: 1px solid rgba(31,43,29,0.08);
}
.topbar-inner { display: flex; align-items: center; gap: 18px; max-width: var(--maxw); margin: 0 auto; flex-wrap: wrap; }
.topbar-eyebrow {
  font-family: var(--slab);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--green-d);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.topbar-eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--green-d); border-radius: 50%; }
.topbar-text { font-size: 13px; color: var(--green-d); opacity: 0.85; flex: 1; line-height: 1.4; }
.topbar-form { display: flex; gap: 6px; flex-shrink: 0; }
.topbar-form input {
  padding: 8px 14px;
  font: 500 13px var(--sans);
  color: var(--green-d);
  background: #fff;
  border: 1.5px solid rgba(31,43,29,0.14);
  border-radius: 999px;
  outline: 0;
  width: 220px;
  transition: border-color .2s ease;
}
.topbar-form input:focus { border-color: var(--green-d); }
.topbar-form button {
  padding: 8px 18px;
  font: 700 11px var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-w);
  background: var(--green-d);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease;
}
.topbar-form button:hover { background: var(--green); }
@media (max-width: 980px) { .topbar-text { display: none; } .topbar-form input { width: 160px; } }

/* NAV */
nav.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
nav.topnav.scrolled {
  background: var(--green-d);
  border-bottom-color: rgba(255,255,255,0.10);
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}
nav.topnav.scrolled .brand-name { color: #fff; }
nav.topnav.scrolled .brand-name small { color: var(--rose-soft); }
nav.topnav.scrolled .brand .mark { filter: brightness(0) invert(1); }
nav.topnav.scrolled .nav-links .nav-item > a { color: var(--paper-w); }
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 .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); }
nav.topnav.scrolled .hamburger span { background: var(--paper-w); }

.nav-row { display: flex; align-items: center; gap: 36px; padding: 24px var(--gutter); max-width: var(--maxw); margin: 0 auto; transition: padding .3s ease, gap .3s ease; }
.brand { display: flex; align-items: center; gap: 18px; transition: gap .3s ease; flex-shrink: 0; }
.brand .mark { width: 100px; height: 100px; flex: 0 0 100px; object-fit: contain; transition: width .3s ease, height .3s ease, flex-basis .3s ease; }
.brand .mark.mark-light { filter: brightness(0) invert(1); }
.brand-name { font-family: var(--slab); font-weight: 800; font-size: 32px; letter-spacing: -0.01em; color: var(--green-d); line-height: 1; transition: font-size .3s ease; white-space: nowrap; }
.brand-name small { display: block; font: 600 11px/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: var(--green-l); margin-top: 7px; transition: font-size .3s ease, margin-top .3s ease; white-space: nowrap; }

nav.topnav.scrolled .nav-row { padding: 14px var(--gutter); gap: 32px; }
nav.topnav.scrolled .brand { gap: 14px; }
nav.topnav.scrolled .brand .mark { width: 46px; height: 46px; flex: 0 0 46px; }
nav.topnav.scrolled .brand-name { font-size: 22px; }
nav.topnav.scrolled .brand-name small { font-size: 9px; margin-top: 5px; }

.nav-links { display: flex; gap: 28px; flex: 1; margin-left: 8px; flex-wrap: nowrap; }
.nav-links .nav-item { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; }
.nav-links .nav-item > 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;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
nav.topnav.scrolled .nav-links .nav-item > a { font-size: 13px; }
.nav-links .nav-item > 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 .nav-item:hover > a::after, .nav-links .nav-item.active > a::after { right: 0; }
.nav-links .nav-item.current > a { color: var(--red); }
.nav-links .nav-item.current > a::after { right: 0; background: var(--red); }
.nav-links .nav-item .caret { font-size: 0.65em; opacity: 0.55; margin-left: 0; letter-spacing: 0; transition: transform .2s ease; display: inline-block; line-height: 1; }
.nav-links .nav-item.active .caret { transform: rotate(180deg); }

/* MEGA MENU */
.mega-menu { position: absolute; top: 100%; left: 0; right: 0; background: #FBF6E7; border-bottom: 1px solid var(--line-soft); box-shadow: 0 18px 40px rgba(42,51,38,0.10); z-index: 49; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, visibility .22s; }
.mega-menu.active { opacity: 1; visibility: visible; pointer-events: auto; animation: megaIn .22s ease; }
@keyframes megaIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.mega-inner { max-width: var(--maxw); margin: 0 auto; padding: 32px var(--gutter) 40px; }
.mega-eyebrow { font-family: var(--slab); font-style: italic; font-weight: 600; font-size: 13px; letter-spacing: 0.04em; color: var(--gold-d); margin-bottom: 18px; }
.mega-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 36px; }
.mega-col h4 { font-family: var(--slab); font-weight: 800; font-size: 15px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--green-d); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1.5px solid var(--line-soft); }
.mega-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.mega-link { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; font-family: var(--slab); font-size: 15px; color: var(--ink); text-decoration: none; transition: background .15s ease, color .15s ease; }
.mega-link:hover { background: var(--paper-2); color: var(--green-d); }
.mega-link-paw { color: var(--gold-d); opacity: 0.45; transition: opacity .15s ease, color .15s ease; flex-shrink: 0; }
.mega-link:hover .mega-link-paw { opacity: 1; color: var(--green); }

.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-cta .btn { padding: 16px 28px; font-size: 14px; transition: padding .3s ease, font-size .3s ease; }
nav.topnav.scrolled .nav-cta .btn { padding: 12px 20px; font-size: 12px; }

.hamburger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.hamburger span { width: 24px; height: 2px; background: var(--green-d); border-radius: 2px; }
@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; }
  .mega-menu { display: none; }
}


/* DEV PANEL */
.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; }
.dev-panel-toggle:hover { background: var(--green-d); }
.dev-pct { font-family: var(--slab); font-weight: 800; font-size: 15px; color: var(--gold); }
.dev-label { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; color: rgba(244,236,214,0.7); }
.dev-arrow { font-size: 14px; color: var(--gold-l); margin-left: auto; }
.dev-panel-body { position: absolute; bottom: calc(100% + 12px); right: 0; width: 380px; max-width: calc(100vw - 48px); background: var(--paper); border: 1.5px solid var(--ink); border-radius: var(--r-md); box-shadow: 0 18px 50px rgba(0,0,0,0.25); max-height: 70vh; overflow-y: auto; animation: devIn .22s ease; }
@keyframes devIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.dev-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 18px 20px; background: var(--paper-2); font-size: 12px; color: var(--ink-2); border-bottom: 1px solid var(--line-soft); }
.dev-summary strong { font-family: var(--slab); font-weight: 800; font-size: 18px; color: var(--green-d); display: block; margin-bottom: 2px; }
.dev-bar { height: 6px; background: var(--paper-2); position: relative; overflow: hidden; }
.dev-bar-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--yellow)); transition: width .4s ease; }
.dev-list { padding: 8px 14px 18px; }
.dev-section { margin-top: 10px; }
.dev-section-head { display: flex; align-items: center; gap: 9px; font-family: var(--slab); font-weight: 800; font-size: 12px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--green-d); padding: 8px 6px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.dev-link { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink); padding: 4px 6px; border-radius: 5px; }

/* PAW TRAIL */
#page { position: relative; }
.paw-track { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
.paw-step { position: absolute; width: 104px; height: 104px; background: var(--green-ll); -webkit-mask: url('../images/paw-only.svg') no-repeat center/contain; mask: url('../images/paw-only.svg') no-repeat center/contain; opacity: 0; transform: translate(-50%, -50%) rotate(var(--rot,0deg)) scale(0.45); transition: opacity 1100ms ease, transform 1100ms cubic-bezier(.2, .8, .2, 1); will-change: opacity, transform; }
.paw-step.in { opacity: 0.34; transform: translate(-50%, -50%) rotate(var(--rot,0deg)) scale(1); }
#page > section, #page > footer { position: relative; z-index: 1; }

/* ACCENT FONTS */
.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, .adopt-heading-accent, .foster-heading-accent {
  font-family: var(--serif-accent);
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
  font-style: italic;
  font-weight: 700;
  letter-spacing: -0.005em;
}
/* Heading-accent colour. The page-prefixed accent classes carry the Fraunces
   italic above, but the green/gold colour lived on a separate `.accent` class
   that the form-heading markup never uses, so adopt/foster accents rendered as
   flat dark text. Give them the site's light-green accent pop, matching the
   homepage section headings (e.g. .wr-work .heading h2 span). */
.adopt-heading-accent, .foster-heading-accent { color: var(--green-l); }

/* ANIMATIONS */
.r-up { opacity: 0; transform: translateY(28px); transition: opacity 0.75s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: opacity, transform; }
.r-up.in { opacity: 1; transform: translateY(0); }

/* FOOTER */
footer { background: var(--green-d); color: #cfc8b3; padding: 80px var(--gutter) 32px; position: relative; z-index: 1; }
footer .container { max-width: var(--maxw); }
footer .grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.12); }
@media (max-width: 820px) { footer .grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 540px) { footer .grid { grid-template-columns: 1fr; } }
footer .brand-block .brand-name { color: #fff; }
footer .brand-block .brand-name small { color: #9e9783; }
footer .brand-block p { font-size: 14px; line-height: 1.6; margin: 18px 0 0; max-width: 38ch; color: #a8a18d; }
footer h4 { font: 700 11px/1 var(--sans); letter-spacing: 0.24em; text-transform: uppercase; color: #fff; margin: 0 0 22px; }
footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
footer ul a { font-size: 14px; color: #cfc8b3; }
footer ul a:hover { color: #fff; }
footer .social { display: flex; gap: 10px; margin-top: 6px; }
footer .social a { width: 38px; height: 38px; border: 1.5px solid rgba(255,255,255,0.25); display: inline-flex; align-items: center; justify-content: center; color: #cfc8b3; border-radius: 50%; transition: all .2s ease; }
footer .social a:hover { border-color: var(--gold); color: var(--gold); background: rgba(228,178,91,0.12); }
footer .legal { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; font-size: 12px; color: #7e7965; flex-wrap: wrap; gap: 12px; }
footer .legal a:hover { color: #fff; }
footer .legal .links { display: flex; gap: 22px; }

/* ============================================
   MIGRATED FROM INLINE <style> BLOCKS
   Added by tools/css-consolidate.py — rules that appeared
   in 2+ HTML files and weren't already in global.css.
   ============================================ */

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

html,body{margin:0;padding:0}

html{scroll-behavior:smooth}

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

body::before{content:"";position:fixed;inset:0;background:radial-gradient(1200px 600px at 80% -20%,rgba(228,178,91,0.14),transparent 60%),radial-gradient(900px 500px at -10% 90%,rgba(138,171,120,0.14),transparent 60%);pointer-events:none;z-index:0}

img{display:block;max-width:100%}

a{color:inherit;text-decoration:none}

button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit}

.container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}

.eyebrow{font:600 12px/1 var(--sans);letter-spacing:0.22em;text-transform:uppercase;color:var(--green-l);display:inline-flex;align-items:center;gap:10px}

.eyebrow::before{content:"";width:24px;height:2px;background:var(--gold);border-radius:2px}

.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 28px;font-family:var(--slab);font-weight:700;font-size:13px;letter-spacing:0.16em;text-transform:uppercase;border-radius:999px;transition:all .22s ease;border:0}

.btn-primary,.btn-donate{background:var(--yellow);color:var(--green-d);box-shadow:0 4px 14px rgba(228,178,91,0.36)}

.btn-primary:hover,.btn-donate:hover{background:var(--gold);color:var(--green-d);transform:translateY(-1px);box-shadow:0 6px 22px rgba(228,178,91,0.46)}

.btn-light{background:rgba(255,255,255,0.08);color:#fff;border:1.5px solid rgba(255,255,255,0.7);backdrop-filter:blur(6px)}

.btn-light:hover{background:#fff;color:var(--green-d)}

.btn-ghost{background:transparent;color:var(--green);border:1.5px solid var(--green)}

.btn-ghost:hover{background:var(--green);color:#fbf6e7}

.btn .arr{transition:transform .18s ease}

.btn:hover .arr{transform:translateX(4px)}

/* TOP BAR */
.topbar{background:var(--gold);color:var(--green-d);padding:10px var(--gutter);font-family:var(--sans);position:relative;z-index:52;border-bottom:1px solid rgba(31,43,29,0.08)}

.topbar-inner{display:flex;align-items:center;gap:18px;max-width:var(--maxw);margin:0 auto;flex-wrap:wrap}

.topbar-eyebrow{font-family:var(--slab);font-weight:700;font-size:13px;letter-spacing:0.04em;color:var(--green-d);white-space:nowrap;display:inline-flex;align-items:center;gap:8px}

.topbar-eyebrow::before{content:"";width:7px;height:7px;background:var(--green-d);border-radius:50%}

.topbar-text{font-size:13px;color:var(--green-d);opacity:0.85;flex:1;line-height:1.4}

.topbar-form{display:flex;gap:6px;flex-shrink:0}

.topbar-form input{padding:8px 14px;font:500 13px var(--sans);color:var(--green-d);background:#fff;border:1.5px solid rgba(31,43,29,0.14);border-radius:999px;outline:0;width:220px;transition:border-color .2s ease}

.topbar-form input::placeholder{color:rgba(31,43,29,0.5)}

.topbar-form input:focus{border-color:var(--green-d)}

.topbar-form button{padding:8px 18px;font:700 11px var(--sans);letter-spacing:0.16em;text-transform:uppercase;color:#fbf6e7;background:var(--green-d);border-radius:999px;cursor:pointer;transition:background .2s ease}

.topbar-form button:hover{background:var(--green)}

@media (max-width:980px){.topbar-text{display:none}.topbar-form input{width:160px}}

@media (max-width:560px){.topbar-inner{gap:10px}.topbar-eyebrow{font-size:12px}.topbar-form{flex:1}.topbar-form input{flex:1;width:auto;min-width:0}}

/* NAV */
nav.topnav{position:sticky;top:0;z-index:50;background:#FBF6E7;backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}

nav.topnav.scrolled{background:var(--green-d);border-bottom-color:rgba(255,255,255,0.10);box-shadow:0 4px 18px rgba(0,0,0,0.18)}

nav.topnav.scrolled .brand-name{color:#fff}

nav.topnav.scrolled .brand-name small{color:#d8a4a0}

nav.topnav.scrolled .brand .mark{filter:brightness(0) invert(1)}

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

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 .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)}

nav.topnav.scrolled .hamburger span{background:#fbf6e7}

.nav-row{display:flex;align-items:center;gap:36px;padding:24px var(--gutter);max-width:var(--maxw);margin:0 auto;transition:padding .3s ease,gap .3s ease}

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

.brand .mark{width:100px;height:100px;flex:0 0 100px;object-fit:contain;transition:width .3s ease,height .3s ease,flex-basis .3s ease}

.brand .mark.mark-light{filter:brightness(0) invert(1)}

footer .brand .mark{width:64px;height:64px;flex:0 0 64px}

.brand-name{font-family:var(--slab);font-weight:800;font-size:32px;letter-spacing:-0.01em;color:var(--green-d);line-height:1;transition:font-size .3s ease;white-space:nowrap}

.brand-name small{display:block;font:600 11px/1 var(--sans);letter-spacing:0.24em;text-transform:uppercase;color:var(--green-l);margin-top:7px;transition:font-size .3s ease,margin-top .3s ease;white-space:nowrap}

nav.topnav.scrolled .nav-row{padding:14px var(--gutter);gap:32px}

nav.topnav.scrolled .brand{gap:14px}

nav.topnav.scrolled .brand .mark{width:46px;height:46px;flex:0 0 46px}

nav.topnav.scrolled .brand-name{font-size:22px}

nav.topnav.scrolled .brand-name small{font-size:9px;margin-top:5px}

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

.nav-links .nav-item{position:relative;display:inline-flex;align-items:center;flex-shrink:0}

.nav-links .nav-item > 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;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}

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

.nav-links .nav-item > 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 .nav-item:hover > a::after,.nav-links .nav-item.active > a::after{right:0}

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

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

.nav-links .nav-item .caret{font-size:0.65em;opacity:0.55;margin-left:0;letter-spacing:0;transition:transform .2s ease;display:inline-block;line-height:1}

.nav-links .nav-item.active .caret{transform:rotate(180deg)}

.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;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,visibility .22s}
.mega-menu.active{opacity:1;visibility:visible;pointer-events:auto;animation:megaIn .22s ease}

@keyframes megaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

.mega-inner{max-width:var(--maxw);margin:0 auto;padding:32px var(--gutter) 40px}

.mega-eyebrow{font-family:var(--slab);font-style:italic;font-weight:600;font-size:13px;letter-spacing:0.04em;color:var(--gold-d);margin-bottom:18px}

.mega-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:36px}

.mega-col h4{font-family:var(--slab);font-weight:800;font-size:15px;letter-spacing:0.10em;text-transform:uppercase;color:var(--green-d);margin:0 0 14px;padding-bottom:10px;border-bottom:1.5px solid var(--line-soft)}

.mega-col ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}

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

.mega-link:hover{background:var(--paper-2);color:var(--green-d)}

.mega-link-dot{width:10px;height:10px;border-radius:50%;flex:0 0 10px;background:var(--muted);box-shadow:inset 0 0 0 1px rgba(0,0,0,0.1)}

.mega-link.status-done .mega-link-dot{background:#5a8b3e}

.mega-link.status-in-progress .mega-link-dot{background:var(--gold)}

.mega-link.status-not-started .mega-link-dot{background:var(--paper-3);box-shadow:inset 0 0 0 1.5px var(--muted)}

.mega-link.status-blocked .mega-link-dot{background:var(--red)}

.mega-link.status-not-started .mega-link-label{color:var(--ink-2);opacity:0.75}

.mega-link.status-blocked .mega-link-label{color:var(--ink-2);opacity:0.75}

.nav-cta{display:flex;align-items:center;gap:10px}

.nav-cta .btn{padding:16px 28px;font-size:14px;transition:padding .3s ease,font-size .3s ease}

nav.topnav.scrolled .nav-cta .btn{padding:12px 20px;font-size:12px}

.hamburger{display:none}

@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}
  .mega-menu{display:none}
}

/* DEV PANEL */
.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);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}

.dev-panel-toggle:hover{background:var(--green-d)}

.dev-pct{font-family:var(--slab);font-weight:800;font-size:15px;color:var(--gold)}

.dev-label{text-transform:uppercase;letter-spacing:0.12em;font-size:11px;color:rgba(244,236,214,0.7)}

.dev-arrow{font-size:14px;color:var(--gold-l);margin-left:auto}

.dev-panel-body{position:absolute;bottom:calc(100% + 12px);right:0;width:380px;max-width:calc(100vw - 48px);background:var(--paper);border:1.5px solid var(--ink);border-radius:var(--r-md);box-shadow:0 18px 50px rgba(0,0,0,0.25);max-height:70vh;overflow-y:auto;animation:devIn .22s ease}

@keyframes devIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.dev-summary{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;padding:18px 20px;background:var(--paper-2);font-size:12px;color:var(--ink-2);border-bottom:1px solid var(--line-soft)}

.dev-summary strong{font-family:var(--slab);font-weight:800;font-size:18px;color:var(--green-d);display:block;margin-bottom:2px}

.dev-bar{height:6px;background:var(--paper-2);position:relative;overflow:hidden}

.dev-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--yellow));transition:width .4s ease}

.dev-list{padding:8px 14px 18px}

.dev-section{margin-top:10px}

.dev-section-head{display:flex;align-items:center;gap:9px;font-family:var(--slab);font-weight:800;font-size:12px;letter-spacing:0.10em;text-transform:uppercase;color:var(--green-d);padding:8px 6px;border-bottom:1px solid var(--line-soft);margin-bottom:6px}

.dev-section-head.status-in-progress .mega-link-dot{background:var(--gold)}

.dev-section-head.status-not-started .mega-link-dot{background:var(--paper-3);box-shadow:inset 0 0 0 1.5px var(--muted)}

.dev-section-head.status-blocked .mega-link-dot{background:var(--red)}

.dev-section-head.status-done .mega-link-dot{background:#5a8b3e}

.dev-group{padding:4px 0 8px}

.dev-group-title{font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:0.10em;text-transform:uppercase;color:var(--muted);margin:8px 6px 4px}

.dev-link{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink);padding:4px 6px;border-radius:5px}

.dev-link.status-not-started{color:var(--ink-2);opacity:0.7}

.dev-link.status-blocked{color:var(--ink-2);opacity:0.7}

.dev-link.status-done .mega-link-dot{background:#5a8b3e}

.dev-link.status-in-progress .mega-link-dot{background:var(--gold)}

.dev-link.status-not-started .mega-link-dot{background:var(--paper-3);box-shadow:inset 0 0 0 1.5px var(--muted)}

.dev-link.status-blocked .mega-link-dot{background:var(--red)}

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

/* PAW TRAIL */
#page{position:relative}

.paw-track{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}

.paw-step{position:absolute;width:104px;height:104px;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;transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(0.45);transition:opacity 1100ms ease,transform 1100ms cubic-bezier(.2,.8,.2,1);will-change:opacity,transform}

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

@media (prefers-reduced-motion:reduce){.paw-step{transition:opacity 200ms ease}.paw-step.in{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1)}}

#page > section,#page > footer{position:relative;z-index:1}

.where-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-top:8px}

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

.where-card{background:var(--paper);padding:28px 26px;border-radius:var(--r-lg);border:1px solid rgba(52,74,48,0.08);box-shadow:0 1px 6px rgba(42,51,38,0.04)}

.where-card h3{font-family:var(--slab);font-weight:800;font-size:22px;letter-spacing:-0.01em;margin:0 0 8px;color:var(--green-d)}

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

.where-grid .where-card:nth-child(1) .pin::before{background:var(--red);box-shadow:0 0 0 3px rgba(112,22,30,0.18)}

.where-grid .where-card:nth-child(2) .pin{color:var(--gold-d)}

.where-grid .where-card:nth-child(2) .pin::before{background:var(--gold);box-shadow:0 0 0 3px rgba(228,178,91,0.22)}

/* .apply-frame / .apply-meta moved to the M9 form-component block at end of file. */

.faq-list{display:grid;gap:14px}

.faq-item{background:var(--paper);border-radius:var(--r-md);border:1px solid var(--line-soft);overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}

.faq-item.open{border-color:var(--gold);box-shadow:0 4px 14px rgba(228,178,91,0.16)}

.faq-q{width:100%;padding:22px 28px;text-align:left;display:flex;justify-content:space-between;align-items:center;gap:18px;font-family:var(--slab);font-weight:700;font-size:18px;color:var(--green-d);background:transparent;letter-spacing:-0.005em}

.faq-q:hover{background:var(--paper-2)}

.faq-toggle{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--paper-2);display:inline-flex;align-items:center;justify-content:center;color:var(--green);font-family:var(--slab);font-weight:800;font-size:18px;line-height:1;transition:transform .25s ease,background .2s ease}

.faq-item.open .faq-toggle{background:var(--gold);color:var(--green-d);transform:rotate(45deg)}

.faq-a{padding:0 28px 24px;font-size:16px;color:var(--ink-2);line-height:1.7}

.faq-a p{margin:0 0 12px}

.faq-a p:last-child{margin-bottom:0}

/* FOOTER (shared) */
footer{background:var(--green-d);color:#cfc8b3;padding:80px var(--gutter) 32px;position:relative;z-index:1}

footer .container{max-width:var(--maxw)}

footer .grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px;padding-bottom:56px;border-bottom:1px solid rgba(255,255,255,0.12)}

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

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

footer .brand-block .brand-name{color:#fff}

footer .brand-block .brand-name small{color:#9e9783}

footer .brand-block p{font-size:14px;line-height:1.6;margin:18px 0 0;max-width:38ch;color:#a8a18d}

footer h4{font:700 11px/1 var(--sans);letter-spacing:0.24em;text-transform:uppercase;color:#fff;margin:0 0 22px}

footer ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}

footer ul a{font-size:14px;color:#cfc8b3}

footer ul a:hover{color:#fff}

footer .social{display:flex;gap:10px;margin-top:6px}

footer .social a{width:38px;height:38px;border:1.5px solid rgba(255,255,255,0.25);display:inline-flex;align-items:center;justify-content:center;color:#cfc8b3;border-radius:50%;transition:all .2s ease}

footer .social a:hover{border-color:var(--gold);color:var(--gold);background:rgba(228,178,91,0.12)}

footer .legal{display:flex;justify-content:space-between;align-items:center;padding-top:28px;font-size:12px;color:#7e7965;flex-wrap:wrap;gap:12px}

footer .legal a:hover{color:#fff}

footer .legal .links{display:flex;gap:22px}

/* ANIMATIONS */
.r-up{opacity:0;transform:translateY(28px);transition:opacity 0.75s cubic-bezier(0.2,0.8,0.2,1),transform 0.75s cubic-bezier(0.2,0.8,0.2,1);will-change:opacity,transform}

.r-up.in{opacity:1;transform:translateY(0)}

@keyframes kb-slow{from{transform:scale(1.0)}to{transform:scale(1.06)}}

@keyframes cta-pulse{0%,100%{box-shadow:0 4px 14px rgba(228,178,91,0.36)}50%{box-shadow:0 6px 26px rgba(228,178,91,0.55),0 0 0 6px rgba(228,178,91,0.10)}}

.nav-links .nav-item:nth-child(1):hover > a,.nav-links .nav-item:nth-child(1).active > a{color:var(--green-l)}

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

.nav-links .nav-item.current > a{color:var(--green-l)}

.nav-links .nav-item.current > a::after{right:0;background:var(--green-l)}

/* ============================================
   WHY ROMANIA — page-specific styles
   ============================================ */
.wr-heading-accent{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}

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

.wr-hero-bg{position:absolute;inset:0}

.wr-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;filter:saturate(0.92) contrast(1.05) brightness(0.86)}

.wr-hero-bg::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%);}

.wr-hero-content{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:clamp(80px,12vh,140px) var(--gutter) clamp(70px,10vh,110px);color:#fbf6e7;display:flex;flex-direction:column;justify-content:center;min-height:clamp(620px,82vh,820px)}

.wr-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);align-self:flex-start}

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

.wr-hero h1{font-family:var(--slab);font-weight:800;font-size:clamp(40px,6vw,86px);line-height:1.0;letter-spacing:-0.025em;margin:0 0 26px;max-width:18ch;text-wrap:balance;color:#fbf6e7}

.wr-hero h1 span{color:var(--gold-l)}

.wr-hero p.lede{font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz' 144,'SOFT' 80;font-style:italic;font-weight:500;font-size:clamp(20px,2.2vw,28px);max-width:36ch;margin:0 0 36px;color:rgba(251,246,231,0.95);line-height:1.4;letter-spacing:-0.005em}

/* Reality narrative on cream */
.wr-reality{padding:clamp(90px,12vw,160px) var(--gutter);background:var(--paper)}

.wr-reality .container{max-width:820px}

.wr-reality .heading{margin-bottom:36px;text-align:center}

.wr-reality h2{font-family:var(--slab);font-weight:800;font-size:clamp(34px,4.4vw,56px);line-height:1.1;letter-spacing:-0.02em;margin:18px 0 0;color:var(--green-d);text-wrap:balance}

.wr-reality h2 span{color:var(--green-l)}

.wr-reality .body{font-size:18px;line-height:1.85;color:var(--ink-2)}

.wr-reality .body p{margin:0 0 22px}

.wr-reality .body strong{color:var(--green-d);font-weight:600}

/* Two souls — green-d gradient pull-quote */
.wr-twosouls{background:linear-gradient(160deg,var(--green-d) 0%,var(--green) 100%);color:var(--paper);padding:clamp(80px,11vw,140px) var(--gutter);position:relative;overflow:hidden}

.wr-twosouls::after{content:"";position:absolute;top:-40px;right:-60px;width:280px;height:280px;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.18;pointer-events:none;transform:rotate(18deg)}

.wr-twosouls .container{max-width:920px;text-align:center;position:relative;z-index:1}

.ss-footnote p{font-size:14px;color:var(--ink-2);margin:0;line-height:1.6}

.ss-footnote strong{color:var(--green-d);font-family:var(--slab);font-weight:800}

.wr-twosouls .ornament{width:54px;height:54px;margin:0 auto 28px;border-radius:50%;background:var(--gold);display:flex;align-items:center;justify-content:center;color:var(--green-d);box-shadow:0 4px 18px rgba(228,178,91,0.4)}

.wr-twosouls .ornament svg{display:block}

.wr-twosouls .eyebrow{color:var(--gold-l);justify-content:center;margin-bottom:28px}

.wr-twosouls .eyebrow::before{background:var(--gold)}

.wr-twosouls blockquote{font-family:var(--slab);font-weight:600;font-size:clamp(24px,3.4vw,40px);line-height:1.3;letter-spacing:-0.015em;margin:0 0 24px;color:#fbf6e7;text-wrap:balance}

.wr-twosouls blockquote em{color:var(--gold-l);font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz' 144,'SOFT' 100;font-style:italic;font-weight:600}

.wr-twosouls .attribution{font:600 12px/1.4 var(--sans);letter-spacing:0.22em;text-transform:uppercase;color:rgba(228,178,91,0.85);margin-bottom:16px}

.wr-twosouls .attribution::before{content:"— "}

.wr-twosouls .source-line{font-size:14px;color:rgba(251,246,231,0.65);font-style:italic;line-height:1.5;max-width:46ch;margin:0 auto}

/* ---- Parent override: remove the indigo left bar on every blockquote ----
   The Monolith parent base.css sets blockquote{border-left:4px solid var(--color-accent)}
   (#6366f1), which leaks a blue side-line onto every quote across the site. The
   Penny's Ark quote styles never use a left bar. (.prose blockquote keeps its own
   gold bar via higher specificity in template-styles.css, so blog quotes are
   unaffected.) */
blockquote { border-left: 0; padding-left: 0; }

/* ---- Default-template pages (the legal pages: Privacy, Terms) ----
   page.php renders the title in .page-header and the body in
   .page-content.prose (prose styling comes from template-styles.css, now
   enqueued for default pages). Give the page title a sensible size and the
   page some breathing room. */
.page-default .container { max-width: 860px; }
.page-default { padding: clamp(40px,6vw,72px) 0 clamp(56px,9vw,104px); }
.page-default .page-header { margin: 0 0 28px; padding-bottom: 18px; border-bottom: 1px solid var(--line, #d8d2c4); }
.page-default .page-title { font-family: var(--slab); font-weight: 800; font-size: clamp(32px,4.5vw,48px); line-height: 1.05; letter-spacing: -0.02em; color: var(--green-d); margin: 0; }

/* Footer legal line: make Privacy / Terms read as links, set apart from the
   charity copyright text. */
.footer-legal a { color: #e9e2cd; text-decoration: underline; text-underline-offset: 3px; margin-left: 16px; }
.footer-legal a:hover { color: #fff; }

/* Christa story on leaf */
.wr-christa{padding:clamp(80px,11vw,140px) var(--gutter);background:var(--paper-2);color:var(--green-d);position:relative;overflow:hidden}

.wr-christa::before{content:"";position:absolute;bottom:-40px;left:-50px;width:280px;height:280px;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.16;pointer-events:none;transform:rotate(-18deg)}

.wr-christa .container{max-width:980px;position:relative;z-index:1}

.wr-christa .heading{text-align:center;margin-bottom:36px}

.wr-christa .heading .eyebrow{color:var(--green-d);justify-content:center}

.wr-christa .heading .eyebrow::before{background:var(--gold)}

.wr-christa h2{font-family:var(--slab);font-weight:800;font-size:clamp(28px,3.8vw,48px);line-height:1.15;letter-spacing:-0.02em;margin:18px 0 0;color:var(--green-d);text-wrap:balance}

.wr-christa h2 span{color:var(--gold-d)}

.wr-christa .body{font-size:17px;line-height:1.8;color:var(--green-d)}

.wr-christa .body p{margin:0 0 18px}

.wr-christa .body p:last-child{margin-bottom:0}

.wr-christa .pullquote{margin-top:32px;padding:24px 28px;background:rgba(251,246,231,0.65);border-radius:var(--r-md);font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz' 144,'SOFT' 100;font-style:italic;font-weight:600;font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--green-d)}

.wr-christa .pullquote .src{display:block;margin-top:10px;font:600 10px/1.4 var(--sans);font-style:normal;letter-spacing:0.20em;text-transform:uppercase;color:var(--green-d);opacity:0.65}

/* What we do — white with arrival photo + steps */
.wr-work{padding:clamp(80px,11vw,140px) var(--gutter);background:#fff;position:relative;overflow:hidden}

.wr-work::before{content:"";position:absolute;top:-30px;right:-50px;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.16;pointer-events:none;transform:rotate(14deg)}

.wr-work .container{max-width:1180px;position:relative;z-index:1}

.wr-work .heading{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:48px}

@media (max-width:820px){.wr-work .heading{grid-template-columns:1fr;gap:18px}}

.wr-work .heading h2{font-family:var(--slab);font-weight:800;font-size:clamp(32px,4vw,52px);line-height:1.1;letter-spacing:-0.02em;margin:14px 0 0;color:var(--green-d)}

.wr-work .heading h2 span{color:var(--green-l)}

.wr-work .heading p{font-size:17px;color:var(--ink-2);max-width:46ch;margin:0;line-height:1.65}

.wr-work-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}

@media (max-width:820px){.wr-work-grid{grid-template-columns:1fr}}

.wr-work-photo{aspect-ratio:4/5;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-3);box-shadow:var(--shadow)}

.wr-work-photo img{width:100%;height:100%;object-fit:cover;display:block}

.wr-work-steps{display:grid;gap:18px}

.wr-step{padding:22px 24px;background:var(--paper);border-radius:var(--r-md);border:1px solid rgba(52,74,48,0.10);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}

.wr-step .num{font-family:var(--slab);font-weight:800;font-size:32px;line-height:1;letter-spacing:-0.02em;color:var(--gold-d);min-width:48px}

.wr-step h3{font-family:var(--slab);font-weight:800;font-size:19px;letter-spacing:-0.005em;margin:0 0 6px;color:var(--green-d)}

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

.wr-work-grid .wr-step:nth-child(1) .num{color:var(--red)}

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

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

.wr-work-grid .wr-step:nth-child(4) .num{color:var(--green)}

/* Numbers / scale on paper */
.wr-numbers{padding:clamp(70px,9vw,110px) var(--gutter);background:var(--paper)}

.wr-numbers .container{max-width:1140px}

.wr-numbers .heading{text-align:center;margin-bottom:40px}

.wr-numbers .heading h2{font-family:var(--slab);font-weight:800;font-size:clamp(28px,3.6vw,44px);line-height:1.1;letter-spacing:-0.02em;margin:14px 0 18px;color:var(--green-d);text-wrap:balance}

.wr-numbers .heading h2 span{color:var(--green-l)}

.wr-numbers .heading p{font-size:16px;color:var(--ink-2);max-width:60ch;margin:0 auto;line-height:1.6}

.wr-numbers-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}

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

.wr-num-card{padding:28px 24px;background:#fff;border:1px solid rgba(52,74,48,0.10);border-radius:var(--r-md);text-align:left;box-shadow:0 1px 6px rgba(42,51,38,0.04)}

.wr-num-card .big{font-family:var(--slab);font-weight:800;font-size:clamp(36px,4.4vw,52px);line-height:1;letter-spacing:-0.025em;margin-bottom:10px}

.wr-num-card .lbl{font-size:14px;color:var(--ink-2);line-height:1.5}

.wr-num-card .pending{display:inline-block;margin-top:10px;padding:4px 10px;background:rgba(228,178,91,0.18);border:1px dashed var(--gold);border-radius:999px;font:600 9px/1.3 var(--sans);letter-spacing:0.14em;text-transform:uppercase;color:var(--gold-d)}

.wr-numbers-grid .wr-num-card:nth-child(1) .big{color:var(--red)}

.wr-numbers-grid .wr-num-card:nth-child(2) .big{color:var(--gold-d)}

.wr-numbers-grid .wr-num-card:nth-child(3) .big{color:var(--blue-d)}

.wr-numbers-grid .wr-num-card:nth-child(4) .big{color:var(--green)}

/* CTA gold band */
.wr-cta{padding:clamp(70px,9vw,110px) var(--gutter);background:var(--gold);position:relative;overflow:hidden}

.wr-cta::before{content:"";position:absolute;top:-30px;right:-50px;width:240px;height:240px;background:var(--green);-webkit-mask:url('../images/paw-only.svg') no-repeat center/contain;mask:url('../images/paw-only.svg') no-repeat center/contain;opacity:0.16;pointer-events:none;transform:rotate(16deg)}

.wr-cta .container{max-width:980px;text-align:center;position:relative;z-index:1}

.wr-cta .eyebrow{color:var(--green-d);justify-content:center}

.wr-cta .eyebrow::before{background:var(--green)}

.wr-cta h2{font-family:var(--slab);font-weight:800;font-size:clamp(28px,3.6vw,44px);line-height:1.1;letter-spacing:-0.02em;margin:18px 0 18px;color:var(--green-d);text-wrap:balance}

.wr-cta h2 span{color:var(--brown-d);font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz' 144,'SOFT' 100;font-style:italic;font-weight:700;letter-spacing:-0.005em}

.wr-cta p{font-size:17px;color:var(--green-d);max-width:54ch;margin:0 auto 32px;line-height:1.65}

.wr-cta-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}

.wr-cta-actions .btn-secondary{background:transparent;color:var(--green-d);border:1.5px solid var(--green-d);font-family:var(--slab);font-weight:700;font-size:13px;letter-spacing:0.16em;text-transform:uppercase;padding:16px 28px;border-radius:999px;display:inline-flex;align-items:center;gap:10px;transition:all .22s ease}

.wr-cta-actions .btn-secondary:hover{background:var(--green-d);color:#fbf6e7}

/* CTA — homepage Newsletter style (fur bg + gold rounded card + buttons) */
.section{padding-block:clamp(72px,10vw,120px)}

.newsletter::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,43,29,0.30) 0%,rgba(31,43,29,0.15) 50%,rgba(31,43,29,0.30) 100%);z-index:-1}

.newsletter .eyebrow{color:var(--green-d)}

.newsletter .eyebrow::before{background:var(--green-d)}

.newsletter-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(40px,6vw,72px);align-items:center}

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

.newsletter h2{font-family:var(--slab);font-weight:800;font-size:clamp(34px,4.6vw,52px);line-height:1.05;letter-spacing:-0.02em;margin:14px 0 18px;max-width:14ch;color:var(--green-d)}

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

@media (max-width:720px){.newsletter form{grid-template-columns:1fr;border-radius:var(--r-lg)}}

.newsletter input{border:0;outline:0;background:transparent;padding:18px 22px;font-family:var(--sans);font-size:15px;color:var(--ink);border-radius:999px}

@media (max-width:720px){.newsletter input{background:var(--paper);border-radius:var(--r-md)}}

.newsletter input::placeholder{color:var(--muted)}

.newsletter input:focus{background:var(--paper);box-shadow:0 0 0 1.5px var(--gold)}

.newsletter button[type="submit"]:hover{background:var(--green-d);transform:translateY(-1px);box-shadow:0 6px 20px rgba(52,74,48,0.22)}

.newsletter-actions{display:flex;flex-direction:column;gap:12px;align-self:center}

@media (max-width:540px){.newsletter-actions{align-items:stretch}}

.newsletter-actions .btn,.newsletter-actions .btn-secondary{justify-content:center;text-align:center}

/* Primary button on gold card needs strong contrast — match homepage newsletter submit (green pill) */
.newsletter-actions .btn-primary{background:var(--green);color:#fbf6e7;box-shadow:0 4px 14px rgba(52,74,48,0.20)}

.newsletter-actions .btn-primary:hover{background:var(--green-d);color:#fbf6e7;transform:translateY(-1px);box-shadow:0 6px 22px rgba(31,43,29,0.32)}

.newsletter-actions .btn-secondary{background:transparent;color:var(--green-d);border:1.5px solid var(--green-d);font-family:var(--slab);font-weight:700;font-size:13px;letter-spacing:0.16em;text-transform:uppercase;padding:16px 28px;border-radius:999px;display:inline-flex;align-items:center;gap:10px;transition:all .22s ease}

.newsletter-actions .btn-secondary:hover{background:var(--green-d);color:#fbf6e7;border-color:var(--green-d)}

/* CTA — homepage Newsletter style */
.section{padding-block:clamp(72px,10vw,120px)}

.newsletter-actions .btn-primary{background:var(--green);color:#fbf6e7;box-shadow:0 4px 14px rgba(52,74,48,0.20)}

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

.wr-hero-bg img{animation:kb-slow 26s ease-in-out infinite alternate;will-change:transform}

@media (prefers-reduced-motion:reduce){
  .r-up{transition:opacity 0.3s ease;transform:none !important}
  .r-up.in{transform:none !important}
  .wr-hero-bg img{animation:none !important}
  html{scroll-behavior:auto}
}

/* Christa story on leaf */
.wr-christa{padding:clamp(80px,11vw,140px) var(--gutter);background:var(--leaf);color:var(--green-d);position:relative;overflow:hidden}

.wr-christa::before{content:"";position:absolute;bottom:-40px;left:-50px;width:280px;height:280px;background:var(--green-d);-webkit-mask:url('../images/paw-only.svg') no-repeat center/contain;mask:url('../images/paw-only.svg') no-repeat center/contain;opacity:0.20;pointer-events:none;transform:rotate(-18deg)}

.wr-christa .pullquote{margin-top:32px;padding:24px 28px;background:rgba(251,246,231,0.65);border-radius:var(--r-md);border-left:4px solid var(--gold-d);font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz' 144,'SOFT' 100;font-style:italic;font-weight:600;font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--green-d)}

.newsletter .container{background:var(--gold);border-radius:var(--r-xl);padding:clamp(40px,5vw,72px);border:1px solid rgba(176,122,20,0.20);box-shadow:0 8px 32px rgba(228,178,91,0.22)}

.newsletter-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(40px,6vw,72px);align-items:center}

.newsletter h2{font-family:var(--slab);font-weight:800;font-size:clamp(34px,4.6vw,52px);line-height:1.05;letter-spacing:-0.02em;margin:14px 0 18px;max-width:18ch;color:var(--green-d)}

.newsletter h2 span{color:#fff;font-style:italic;font-weight:700;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);font-family:'Fraunces',Georgia,'Times New Roman',serif;font-variation-settings:'opsz' 144,'SOFT' 100;letter-spacing:-0.005em}

.topbar{background:var(--gold);color:var(--green-d);padding:10px var(--gutter);font-family:var(--sans);position:relative;z-index:52;border-bottom:1px solid rgba(31,43,29,0.08)}

nav.topnav{position:sticky;top:0;z-index:50;background:#FBF6E7;backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);transition:background .35s ease,border-color .35s ease,box-shadow .35s ease}

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 .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)}

@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}.mega-menu{display:none}}

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

#page{position:relative}

footer{background:var(--green-d);color:#cfc8b3;padding:80px var(--gutter) 32px;position:relative;z-index:1}

.r-up{opacity:0;transform:translateY(28px);transition:opacity 0.75s cubic-bezier(0.2,0.8,0.2,1),transform 0.75s cubic-bezier(0.2,0.8,0.2,1);will-change:opacity,transform}

.section{padding-block:clamp(72px,10vw,120px)}

.slab{font-family:var(--slab);font-weight:800;letter-spacing:-0.015em;line-height:1.02}

.btn-dark{background:var(--ink);color:var(--paper)}

.btn-dark:hover{background:var(--green-d)}

/* TOP BAR — "Stay in the Story" newsletter capture above main nav */
.topbar{background:var(--gold);color:var(--green-d);padding:10px var(--gutter);font-family:var(--sans);position:relative;z-index:52;border-bottom:1px solid rgba(31,43,29,0.08)}

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

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

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

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

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

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

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

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

@media (prefers-reduced-motion:reduce){
  .paw-step{transition:opacity 200ms ease}
  .paw-step.in{transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1)}
}

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

/* CTA pulse on hero primary button */
@keyframes cta-pulse{0%,100%{box-shadow:0 4px 14px rgba(228,178,91,0.36)}50%{box-shadow:0 6px 26px rgba(228,178,91,0.55),0 0 0 6px rgba(228,178,91,0.10)}}

.nav-links .nav-item.current > a{color:var(--blue-d)}

.nav-links .nav-item.current > a::after{right:0;background:var(--blue-d)}

/* Hero */
.gi-hero-zone{background:var(--gold);padding:clamp(16px,2vw,28px) clamp(16px,2vw,28px) 0;position:relative}

.gi-hero-bg{position:absolute;inset:0}

.gi-hero-bg::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%);}

.gi-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);align-self:flex-start}

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

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

.gi-hero h1 span{color:var(--gold-l)}

.gi-hero p.lede{font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz' 144,'SOFT' 80;font-style:italic;font-weight:500;font-size:clamp(20px,2.2vw,28px);max-width:36ch;margin:0 0 18px;color:rgba(251,246,231,0.95);line-height:1.4;letter-spacing:-0.005em}

.gi-hero p.attrib{font:600 12px/1.4 var(--sans);letter-spacing:0.20em;text-transform:uppercase;color:rgba(228,178,91,0.85);margin:0}

/* Intro */
.gi-intro{padding:clamp(70px,9vw,110px) var(--gutter);background:var(--gold);position:relative;overflow:hidden}

.gi-intro::before{content:"";position:absolute;top:-30px;right:-50px;width:240px;height:240px;background:var(--green-d);-webkit-mask:url('../images/paw-only.svg') no-repeat center/contain;mask:url('../images/paw-only.svg') no-repeat center/contain;opacity:0.10;pointer-events:none;transform:rotate(14deg);z-index:0}

.gi-intro .container{max-width:780px;text-align:center;position:relative;z-index:1}

.gi-intro .eyebrow{color:var(--green-d)}

.gi-intro .eyebrow::before{background:var(--green-d)}

.gi-intro h2{font-family:var(--slab);font-weight:800;font-size:clamp(30px,4vw,48px);line-height:1.15;letter-spacing:-0.02em;margin:18px 0 24px;color:var(--green-d);text-wrap:balance}

.gi-intro h2 span{color:#fff;text-shadow:0 0 24px rgba(255,255,255,0.55),0 0 48px rgba(255,255,255,0.30),0 2px 4px rgba(176,122,20,0.20)}

.gi-intro p{font-size:18px;line-height:1.75;color:var(--green-d);margin:0 0 16px}

/* Card grid sections */
.gi-section{padding:clamp(70px,9vw,110px) var(--gutter)}

.gi-section.bg-white{background:#fff;position:relative;overflow:hidden}

.gi-section.bg-white::before{content:"";position:absolute;top:-30px;right:-50px;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.16;pointer-events:none;transform:rotate(14deg)}

.gi-section.bg-leaf{background:linear-gradient(160deg,var(--green-d) 0%,var(--leaf) 100%);color:var(--paper);position:relative;overflow:hidden}

.gi-section.bg-leaf::after{content:"";position:absolute;bottom:-40px;left:-50px;width:280px;height:280px;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.20;pointer-events:none;transform:rotate(-18deg)}

.gi-section.bg-paper{background:var(--paper)}

.gi-section .container{max-width:1200px;position:relative;z-index:1}

.gi-section .heading{text-align:center;margin-bottom:40px}

.gi-section .heading h2{font-family:var(--slab);font-weight:800;font-size:clamp(28px,3.6vw,44px);line-height:1.1;letter-spacing:-0.02em;margin:14px 0 14px;text-wrap:balance}

.gi-section.bg-leaf .heading h2{color:#fbf6e7}

.gi-section.bg-leaf .heading h2 span{color:var(--gold-l)}

.gi-section.bg-leaf .heading .eyebrow{color:var(--gold-l);justify-content:center}

.gi-section.bg-leaf .heading .eyebrow::before{background:var(--gold)}

.gi-section.bg-white .heading h2,.gi-section.bg-paper .heading h2{color:var(--green-d)}

.gi-section.bg-white .heading h2 span,.gi-section.bg-paper .heading h2 span{color:var(--green-l)}

.gi-section .heading p{font-size:16px;color:var(--ink-2);max-width:54ch;margin:0 auto;line-height:1.6}

.gi-section.bg-leaf .heading p{color:rgba(251,246,231,0.85)}

/* Card grids */
.gi-grid{display:grid;gap:18px}

.gi-grid.cols-4{grid-template-columns:repeat(4,1fr)}

.gi-grid.cols-2{grid-template-columns:repeat(2,1fr);max-width:880px;margin:0 auto}

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

@media (max-width:560px){.gi-grid.cols-4,.gi-grid.cols-2{grid-template-columns:1fr}}

.gi-card{position:relative;background:var(--paper);border-radius:var(--r-lg);overflow:hidden;border:1px solid rgba(52,74,48,0.10);box-shadow:0 1px 6px rgba(42,51,38,0.05);display:flex;flex-direction:column;transition:all .25s ease;text-decoration:none;color:inherit}

.gi-section.bg-leaf .gi-card{background:#fff}

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

.gi-card.disabled{cursor:not-allowed;opacity:0.78}

.gi-card.disabled:hover{transform:none;box-shadow:0 1px 6px rgba(42,51,38,0.05);border-color:rgba(52,74,48,0.10)}

.gi-card .photo{aspect-ratio:16/10;overflow:hidden;background:var(--paper-3);position:relative}

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

.gi-card:hover:not(.disabled) .photo img{transform:scale(1.04)}

.gi-card .photo.placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--paper) 0%,var(--paper-2) 100%);padding:18px;position:relative}

.gi-card .photo .icon-circle{width:96px;height:96px;border:1.5px solid var(--gold);border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--green);box-shadow:0 4px 14px rgba(228,178,91,0.18);transition:all .25s ease}

.gi-card:hover:not(.disabled) .photo .icon-circle{background:var(--gold);color:var(--green-d);border-color:var(--gold);transform:translateY(-2px);box-shadow:0 6px 18px rgba(228,178,91,0.32)}

/* Per-icon accent — system 5-palette across the 6 icon cards */
.gi-section.bg-leaf .gi-grid > a:nth-child(1) .icon-circle,
.gi-section.bg-leaf .gi-grid > div:nth-child(1) .icon-circle{color:var(--red)}

.gi-section.bg-leaf .gi-grid > a:nth-child(2) .icon-circle,
.gi-section.bg-leaf .gi-grid > div:nth-child(2) .icon-circle{color:var(--gold-d)}

.gi-section.bg-leaf .gi-grid > a:nth-child(3) .icon-circle,
.gi-section.bg-leaf .gi-grid > div:nth-child(3) .icon-circle{color:var(--blue-d)}

.gi-section.bg-leaf .gi-grid > a:nth-child(4) .icon-circle,
.gi-section.bg-leaf .gi-grid > div:nth-child(4) .icon-circle{color:var(--green)}

.gi-section.bg-paper .gi-grid > a:nth-child(1) .icon-circle,
.gi-section.bg-paper .gi-grid > div:nth-child(1) .icon-circle{color:var(--brown-d)}

.gi-section.bg-paper .gi-grid > a:nth-child(2) .icon-circle,
.gi-section.bg-paper .gi-grid > div:nth-child(2) .icon-circle{color:var(--green)}

.gi-card .status-badge{position:absolute;top:14px;right:14px;padding:6px 12px;background:rgba(255,255,255,0.92);backdrop-filter:blur(4px);font:700 10px/1 var(--sans);letter-spacing:0.18em;text-transform:uppercase;border-radius:999px;display:inline-flex;align-items:center;gap:8px}

.gi-card .status-badge::before{content:"";width:8px;height:8px;border-radius:50%}

.gi-card .status-badge.done{color:var(--green-d)}

.gi-card .status-badge.done::before{background:#5a8b3e}

.gi-card .status-badge.in-progress{color:var(--green-d)}

.gi-card .status-badge.in-progress::before{background:var(--gold)}

.gi-card .status-badge.not-started{color:var(--muted)}

.gi-card .status-badge.not-started::before{background:var(--paper-3);box-shadow:inset 0 0 0 1.5px var(--muted)}

.gi-card .status-badge.blocked{color:var(--red)}

.gi-card .status-badge.blocked::before{background:var(--red)}

.gi-card .status-badge.external{color:var(--blue-d)}

.gi-card .status-badge.external::before{background:var(--blue-d)}

.gi-card .body{padding:24px 24px 22px;display:flex;flex-direction:column;flex:1}

.gi-card h3{font-family:var(--slab);font-weight:800;font-size:22px;letter-spacing:-0.01em;margin:0 0 8px;color:var(--green-d)}

.gi-card p{font-size:14.5px;color:var(--ink-2);line-height:1.6;margin:0 0 14px}

.gi-card .meta{margin-top:auto;font:700 11px/1.4 var(--sans);letter-spacing:0.18em;text-transform:uppercase;color:var(--green-d);display:inline-flex;align-items:center;gap:8px}

.gi-card.disabled .meta{color:var(--muted)}

/* Pillar-style cards (Time, talent, or a will — matches homepage Pillars) */
.gi-pillars{background:#fff}

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

.gi-pillar-head{margin-bottom:clamp(36px,5vw,60px);max-width:1080px;text-align:left}

.gi-pillar-head .eyebrow{margin-bottom:18px}

.gi-pillar-head h2{font-family:var(--slab);font-weight:800;font-size:clamp(44px,6.2vw,78px);line-height:1.02;letter-spacing:-0.025em;margin:0;color:var(--green-d);text-wrap:balance;max-width:22ch}

.gi-pillar-head h2 span{color:var(--green-l)}

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

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

.gi-pillar-grid.cols-2{grid-template-columns:repeat(2,1fr);max-width:880px;margin:0 auto}

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

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

/* Niche section uses a 2-card sub-set with a different accent pair */
.gi-niche .gi-pillar{background:#fff}

.gi-niche .gi-pillar-grid > .gi-pillar:nth-child(1) .gi-pillar-icon,
.gi-niche .gi-pillar-grid > .gi-pillar:nth-child(1) h3{color:var(--brown-d)}

.gi-niche .gi-pillar-grid > .gi-pillar:nth-child(2) .gi-pillar-icon,
.gi-niche .gi-pillar-grid > .gi-pillar:nth-child(2) h3{color:var(--green)}

.gi-niche .gi-pillar-grid > .gi-pillar:nth-child(1):hover .gi-pillar-icon,
.gi-niche .gi-pillar-grid > .gi-pillar:nth-child(2):hover .gi-pillar-icon{color:var(--green-d)}

.gi-pillar{position:relative;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;text-decoration:none;color:inherit}

.gi-section.bg-leaf .gi-pillar{background:#fff}

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

.gi-pillar.disabled{cursor:default}

.gi-pillar .gi-pillar-icon{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);color:var(--green);align-self:flex-start;transition:all .25s ease}

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

/* Per-card accent: icon stroke + heading colour follow the homepage sequence */
.gi-pillar-grid > .gi-pillar:nth-child(1) .gi-pillar-icon,
.gi-pillar-grid > .gi-pillar:nth-child(1) h3{color:var(--red)}

.gi-pillar-grid > .gi-pillar:nth-child(2) .gi-pillar-icon,
.gi-pillar-grid > .gi-pillar:nth-child(2) h3{color:var(--gold-d)}

.gi-pillar-grid > .gi-pillar:nth-child(3) .gi-pillar-icon,
.gi-pillar-grid > .gi-pillar:nth-child(3) h3{color:var(--blue-d)}

.gi-pillar-grid > .gi-pillar:nth-child(4) .gi-pillar-icon,
.gi-pillar-grid > .gi-pillar:nth-child(4) h3{color:var(--green)}

.gi-pillar-grid > .gi-pillar:nth-child(1):hover .gi-pillar-icon,
.gi-pillar-grid > .gi-pillar:nth-child(2):hover .gi-pillar-icon,
.gi-pillar-grid > .gi-pillar:nth-child(3):hover .gi-pillar-icon,
.gi-pillar-grid > .gi-pillar:nth-child(4):hover .gi-pillar-icon{color:var(--green-d)}

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

.gi-pillar h3{font-family:var(--slab);font-weight:800;font-size:clamp(26px,2.4vw,32px);line-height:1.1;margin:14px 0 12px;letter-spacing:-0.02em}

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

.gi-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:10px 16px;border-radius:999px;background:var(--yellow);box-shadow:0 3px 10px rgba(228,178,91,0.32);transition:all .2s ease}

.gi-pillar:hover:not(.disabled) .arrow-link{background:var(--gold);box-shadow:0 4px 14px rgba(228,178,91,0.42)}

.gi-pillar.disabled .arrow-link{background:var(--paper-2);box-shadow:none;color:var(--muted)}

/* Dog-style cards (The four big ones — matches homepage Dogs grid) */
.gi-dogs{position:relative;overflow:hidden}

.gi-dogs-head{margin-bottom:clamp(36px,5vw,60px);max-width:1080px;text-align:left}

.gi-dogs-head .eyebrow{margin-bottom:18px}

.gi-dogs-head h2{font-family:var(--slab);font-weight:800;font-size:clamp(44px,6.2vw,78px);line-height:1.02;letter-spacing:-0.025em;margin:0;color:var(--green-d);text-wrap:balance;max-width:22ch}

.gi-dogs-head h2 span{color:var(--green-l)}

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

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

.gi-dog-grid.cols-3{grid-template-columns:repeat(3,1fr)}

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

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

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

/* Featured donation card — magazine-style horizontal split */
.gi-featured{display:grid;grid-template-columns:1.05fr 1fr;gap:0;background:var(--paper-2);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit;border:1px solid transparent;transition:all .25s ease;margin-bottom:clamp(28px,3vw,40px);box-shadow:0 1px 6px rgba(42,51,38,0.04)}

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

@media (max-width:820px){.gi-featured{grid-template-columns:1fr}}

.gi-featured .featured-photo{aspect-ratio:4/3;overflow:hidden;position:relative;background:var(--paper-3)}

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

.gi-featured:hover .featured-photo img{transform:scale(1.04)}

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

.gi-featured .featured-body{padding:clamp(32px,4vw,56px);display:flex;flex-direction:column;justify-content:center}

.gi-featured .featured-eyebrow{font:600 12px/1 var(--sans);letter-spacing:0.22em;text-transform:uppercase;color:var(--green-l);display:inline-flex;align-items:center;gap:10px;margin-bottom:18px}

.gi-featured .featured-eyebrow::before{content:"";width:24px;height:2px;background:var(--gold);border-radius:2px}

.gi-featured h3{font-family:var(--slab);font-weight:800;font-size:clamp(36px,4vw,52px);line-height:1.05;letter-spacing:-0.02em;margin:0 0 16px;color:var(--green-d)}

.gi-featured p{font-size:16px;color:var(--ink-2);line-height:1.65;margin:0 0 28px;max-width:44ch}

.gi-featured .featured-cta{font:700 12px/1 var(--sans);letter-spacing:0.18em;text-transform:uppercase;color:var(--green-d);background:var(--yellow);padding:16px 26px;border-radius:999px;display:inline-flex;align-items:center;gap:10px;align-self:flex-start;transition:all .2s ease;box-shadow:0 4px 14px rgba(228,178,91,0.36)}

.gi-featured:hover .featured-cta{background:var(--gold);transform:translateY(-1px);box-shadow:0 6px 22px rgba(228,178,91,0.46)}

.gi-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;text-decoration:none;color:inherit}

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

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

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

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

.gi-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}

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

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

.gi-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:10px 16px;border-radius:999px;background:var(--yellow);box-shadow:0 3px 10px rgba(228,178,91,0.32);transition:all .2s ease}

.gi-dog:hover .meet{background:var(--gold);color:var(--green-d);box-shadow:0 4px 14px rgba(228,178,91,0.42)}

/* Newsletter band — matches homepage Newsletter exactly */
.section{padding-block:clamp(72px,10vw,120px)}

.newsletter{background:#3a2516 url('../images/mission-fur-new.jpg') center center/cover no-repeat;position:relative;isolation:isolate}

.newsletter form{display:grid;grid-template-columns:1fr 1fr;gap:8px;background:var(--paper-2);padding:8px;border-radius:24px}

.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;cursor:pointer;border:0}

.gi-hero-bg img{animation:kb-slow 26s ease-in-out infinite alternate;will-change:transform}

@media (prefers-reduced-motion:reduce){
  .r-up{transition:opacity 0.3s ease;transform:none !important}
  .r-up.in{transform:none !important}
  .gi-hero-bg img{animation:none !important}
  html{scroll-behavior:auto}
}

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

.news-card:hover .photo img{transform:scale(1.04)}

.cost-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:48px}

@media (max-width:1024px){.cost-grid{grid-template-columns:repeat(3,1fr)}}

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

.newsletter{background:#3a2516 url('../images/external/pexels/pexels-photo-5005875-a5aa425b.jpeg') center center/cover no-repeat;position:relative;isolation:isolate}


/* Hero h1 — force light colour on every hero variant (some per-page CSS
   forgot to set this explicitly; parent .hero-content has color #fff but
   some browsers/themes don't inherit through to nested h1 reliably) */
.hero h1,
.hero-content h1,
.hero-inner h1,
[class*="-hero"] h1,
[class*="-hero-content"] h1 {
  color: var(--paper, #fbf6e7);
}

/* Narrow mobile — shrink brand + tighten spacing so the hamburger
   and donate button always fit. Placed at end of file so it wins the
   cascade over the unminified+minified duplicates earlier. */
@media (max-width: 600px) {
  .nav-row { gap: 12px !important; padding: 14px 16px !important; }
  .brand .mark { width: 32px !important; height: 32px !important; }
  .brand-name { font-size: 18px !important; }
  .brand-name small { display: none !important; }
  .nav-cta { gap: 6px !important; }
  .nav-cta .btn { padding: 10px 16px !important; font-size: 12px !important; letter-spacing: 0.08em !important; }
  .nav-cta .btn svg { display: none !important; }
  .hamburger { padding: 6px !important; }
  nav.topnav.scrolled .brand-name { font-size: 16px !important; }
}

/* ===== Brand refresh 2026-05-26: nav cream-at-top + dogs-on-scroll ===== */
nav.topnav:not(.scrolled){ background: var(--paper); }
.brand .mark-dogs{ display:none; }
nav.topnav.scrolled .brand .mark{ display:none; }
nav.topnav.scrolled .brand .mark-dogs{ display:inline-block; height:74px; width:auto; }

/* homepage refresh 2026-05-27 */
nav.topnav:not(.scrolled){ background:var(--paper-3); }
.topbar{ background:var(--leaf); }

/* ===== Site-wide hero flush 2026-05-28 ====================================
   All page heroes drop their rounded-corner inset and go edge-to-edge,
   matching the homepage hero. Each per-page CSS file (adopt.css, etc.)
   loads AFTER global.css, so without !important the per-page hero
   declarations win the cascade. Same precedent as the mobile-nav
   override at the bottom of this file. */
.wr-hero,
.os-hero,
.dogs-hero,
.adopt-hero,
.contact-hero,
.donate-hero,
.foster-hero,
.gi-hero,
.news-hero,
.sanctuary-hero,
.sponsor-hero,
.vu-hero,
.vs-hero,
.ways-hero{
  margin: 0 !important;
  border-radius: 0 !important;
}

/* ============================================================
   M8 LAYOUT B — mega menu, mission section, hero mobile,
   nav drawer with X close. (Matt 2026-05-28, theme 0.3.29)
   These overrides win against the earlier .mega-menu rules
   in this file because they appear later in source order.
   ============================================================ */

/* ----- Hide the gold newsletter topbar above the nav (home-preview-v2 spec) ----- */
.topbar{ display:none !important; }

/* ----- Nav chrome — paper background, ink text, gold pill donate ----- */
nav.topnav, nav.topnav.scrolled{ background:var(--paper-w) !important; border-bottom:1px solid rgba(42,51,38,0.13) !important; box-shadow:0 2px 14px rgba(40,40,30,0.06) !important; }
nav.topnav .brand-name, nav.topnav.scrolled .brand-name{ color:var(--ink) !important; }
nav.topnav .brand-name small{ color:var(--green-d) !important; opacity:.7 !important; }
nav.topnav .nav-links a, nav.topnav.scrolled .nav-links a{ color:var(--ink) !important; }
nav.topnav .nav-links a::after, nav.topnav.scrolled .nav-links a::after{ background:var(--gold) !important; height:3px !important; }
nav.topnav .nav-links a:hover, nav.topnav .nav-links a:focus-visible,
nav.topnav .nav-links .current-menu-item>a, nav.topnav .nav-links .current_page_item>a,
nav.topnav .nav-links .current-menu-ancestor>a, nav.topnav .nav-links .current_page_parent>a,
nav.topnav .nav-links .nav-item.current>a{ color:var(--gold-d) !important; }
nav.topnav .nav-cta .btn-donate, nav.topnav.scrolled .nav-cta .btn-donate{ background:var(--gold) !important; background-image:none !important; color:var(--green-d) !important; border-radius:999px !important; box-shadow:0 4px 16px rgba(228,178,91,0.34) !important; }
nav.topnav .nav-cta .btn-donate:hover{ background:var(--gold-d) !important; color:var(--paper-w) !important; }
/* Launch-day fix (v0.7.23): this Layout B block keeps the nav paper/cream even
   when .scrolled, but the older rule `nav.topnav.scrolled .hamburger span
   { background:var(--paper-w) }` still fired — cream lines on a cream nav =
   the burger "disappeared" on scroll on mobile. Pin it dark in all states. */
nav.topnav .hamburger span, nav.topnav.scrolled .hamburger span{ background:var(--green-d) !important; }
nav.topnav .brand .mark, nav.topnav.scrolled .brand .mark{ display:inline-block !important; width:56px !important; height:56px !important; flex:0 0 56px !important; filter:none !important; }
nav.topnav .brand .mark-dogs{ display:none !important; }
nav.topnav .nav-row, nav.topnav.scrolled .nav-row{ padding:16px var(--gutter) !important; gap:34px !important; }
nav.topnav .brand, nav.topnav.scrolled .brand{ gap:14px !important; }
nav.topnav .brand-name, nav.topnav.scrolled .brand-name{ font-size:24px !important; }
nav.topnav .brand-name small, nav.topnav.scrolled .brand-name small{ font-size:10px !important; margin-top:5px !important; }
nav.topnav .nav-links .nav-item > a, nav.topnav.scrolled .nav-links .nav-item > a{ font-size:15px !important; }
nav.topnav .nav-cta .btn, nav.topnav.scrolled .nav-cta .btn{ padding:12px 22px !important; font-size:13.5px !important; }


/* ----- Mega menu shell ----- */
.mega-menu{ background:var(--paper-w) !important; border-top:1px solid rgba(42,51,38,0.08) !important; border-bottom:1px solid rgba(42,51,38,0.10) !important; box-shadow:0 22px 44px rgba(31,43,29,0.18) !important; }
.mega-inner{ display:block !important; grid-template-columns:none !important; grid-template-rows:none !important; padding:32px var(--gutter) 36px !important; max-width:var(--maxw) !important; margin:0 auto !important; }
.mega-inner::after{ display:none !important; content:none !important; }

.mega-eyebrow{
  display:flex !important; align-items:baseline !important; justify-content:space-between !important; gap:18px !important;
  margin:0 0 18px !important; padding:0 2px 9px !important;
  border-bottom:1px solid rgba(42,51,38,0.10) !important;
  font-family:'Fraunces', Georgia, serif !important;
  font-style:italic !important; font-weight:600 !important; font-size:13px !important;
  letter-spacing:0.08em !important; text-transform:uppercase !important;
  color:var(--gold-d) !important;
}
.mega-eyebrow .count{
  font-family:'Inter', sans-serif;
  font-style:normal; font-weight:600;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#8a8470;
}

.mega-cols{ display:grid !important; grid-template-columns:1.4fr 1fr !important; gap:36px !important; align-items:start !important; }

/* ----- Photo tiles (left column) ----- */
.mega-tiles{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:14px !important; }
.mega-tile{
  position:relative; display:block;
  aspect-ratio:5/4;
  border-radius:12px; overflow:hidden;
  text-decoration:none !important; color:inherit;
  isolation:isolate;
  box-shadow:0 4px 14px rgba(40,40,30,.14);
  transition:transform .25s ease, box-shadow .25s ease;
}
.mega-tile:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(40,40,30,.22); }
.mega-tile .img{ position:absolute; inset:0; background-size:cover; background-position:center; transition:transform .55s ease; z-index:0; }
.mega-tile:hover .img{ transform:scale(1.04); }
.mega-tile .band{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:52px 20px 16px;
  background:linear-gradient(180deg, rgba(30,58,42,0) 0%, rgba(30,58,42,.50) 32%, rgba(30,58,42,.93) 65%, var(--green-d) 82%, var(--green-d) 100%);
  color:var(--paper-w);
}
.mega-tile .h{
  font-family:'Fraunces', Georgia, serif;
  font-weight:600; line-height:1.12; margin:0; padding-right:32px;
  font-size:22px; color:var(--paper-w);
}
.mega-tile .h em{ font-style:italic; color:var(--gold-l); font-weight:500; }
.mega-tile .d{
  font-family:'Lora', Georgia, serif;
  font-style:italic; font-size:12.5px; line-height:1.4;
  color:rgba(251,246,231,.92);
  margin:5px 0 0; padding-right:38px; max-width:24ch;
}
.mega-tile .ar{
  position:absolute; right:14px; bottom:14px;
  width:30px; height:30px; border-radius:50%;
  background:var(--yellow); color:var(--green-d);
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px;
  box-shadow:0 3px 10px rgba(30,58,42,.28);
  transition:background .2s ease, transform .25s ease;
  z-index:2;
}
.mega-tile:hover .ar{ background:var(--gold); transform:translateX(2px); }

/* ----- Text list (right column) ----- */
.mega-list-col{ display:flex; flex-direction:column; align-self:start; }
.mega-list{ display:flex; flex-direction:column; }
.mega-list a, .mega-list .mega-link{
  display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important;
  padding:11px 4px !important; border-bottom:1px solid rgba(42,51,38,.08) !important;
  text-decoration:none !important; color:var(--ink) !important;
  font-family:'Fraunces', Georgia, serif !important;
  font-weight:500 !important; font-size:18px !important; line-height:1.2 !important;
  letter-spacing:0 !important;
  background:transparent !important; border-radius:0 !important;
  transition:color .2s ease, padding .2s ease;
}
.mega-list a:first-child, .mega-list .mega-link:first-child{ border-top:1px solid rgba(42,51,38,.08) !important; }
.mega-list a:hover, .mega-list .mega-link:hover{ color:var(--green-d) !important; padding-left:10px !important; background:transparent !important; }
.mega-list .label{ display:flex; flex-direction:column; }
.mega-list .desc{
  font-family:'Lora', Georgia, serif;
  font-style:italic; font-size:11.5px;
  color:#8a8470; font-weight:400; margin-top:2px;
}
.mega-list .ar{
  width:30px; height:30px; border-radius:50%;
  background:var(--yellow); color:var(--green-d);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:16px; font-weight:700;
  opacity:.85; flex-shrink:0;
  box-shadow:0 2px 6px rgba(30,58,42,.18);
  transition:transform .18s ease, filter .18s ease, opacity .18s ease;
}
/* Subtle interactivity cue: the circle grows + lightens a touch on hover
   (desktop only; touch has no hover). No slide, no colour change. */
.mega-list a:hover .ar, .mega-list .mega-link:hover .ar{ transform:scale(1.12); filter:brightness(1.08); }

.mega-seeall{
  margin-top:16px; align-self:flex-start;
  font-family:'Inter', sans-serif;
  font-weight:700; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--green); text-decoration:none;
  padding:6px 0;
}
.mega-seeall:hover{ color:var(--green-d); }

/* ----- Newsletter strip inside mega menu ----- */
.mega-newsletter{
  margin-top:28px; padding:22px 26px;
  background:var(--paper-2); border-radius:14px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.mega-newsletter .nl-text{ flex:1; min-width:240px; }
.mega-newsletter .nl-text .eye{
  font-family:'Inter', sans-serif;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-d); font-weight:700; margin-bottom:4px;
}
.mega-newsletter .nl-text .h{
  font-family:'Fraunces', Georgia, serif;
  font-style:italic; color:var(--ink); font-size:18px;
}
.mega-newsletter form{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.mega-newsletter input{
  font-family:'Inter', sans-serif;
  font-size:13px; padding:11px 18px;
  border:1px solid rgba(42,51,38,.18);
  border-radius:999px; background:#fff;
  min-width:240px;
}
.mega-newsletter input:focus{ outline:0; border-color:var(--green); }
.mega-newsletter button{
  background:var(--yellow); color:var(--green-d);
  border:0;
  font-family:'Inter', sans-serif;
  font-weight:700; font-size:12px; letter-spacing:.10em; text-transform:uppercase;
  padding:11px 22px; border-radius:999px;
  cursor:pointer;
  transition:background .2s ease;
}
.mega-newsletter button:hover{ background:var(--gold); }

/* ----- Wide variant: 1 tile + 2-column list (Get Involved) ----- */
.mega-cols.cols-wide{ grid-template-columns:1fr 1.7fr !important; }
.mega-cols.cols-wide .mega-tiles{ grid-template-columns:1fr !important; }
.mega-cols.cols-wide .mega-tiles .mega-tile{ aspect-ratio:5/4 !important; }
.mega-cols.cols-wide .mega-list{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:0 28px !important; }
.mega-cols.cols-wide .mega-list a:first-child,
.mega-cols.cols-wide .mega-list a:nth-child(2){ border-top:1px solid rgba(42,51,38,.08) !important; }

/* ----- Nav caret rotates when item active / hovered ----- */
nav.topnav .nav-links a .caret{ color:var(--ink) !important; opacity:.5 !important; display:inline-block !important; transition:transform .22s ease, opacity .2s ease, color .2s ease !important; }
nav.topnav .nav-links .nav-item.active > a .caret{ transform:rotate(180deg) !important; opacity:1 !important; color:var(--gold-d) !important; }

/* ----- Nav close (X) button — hidden on desktop, shown in mobile drawer ----- */
.nav-close{ display:none; }

/* ============================================================
   MISSION section — dog-house photo + Option 5 layout
   (paw + eyebrow + huge italic + body + CTA)
   ============================================================ */
.mission{ padding:clamp(100px,12vw,160px) var(--gutter) !important; isolation:isolate !important; }
.mission::before{
  background:url('../images/mission-dog-house.jpg') center 40%/cover no-repeat !important;
  filter:saturate(1.05) contrast(1.02) !important;
}
.mission::after{
  background:linear-gradient(180deg,
    rgba(30,58,42,.55) 0%,
    rgba(30,58,42,.42) 50%,
    rgba(30,58,42,.62) 100%) !important;
}
.mission .container{ position:relative !important; z-index:1 !important; }
.mission .ornament{
  width:54px !important; height:54px !important; margin:0 auto 22px !important;
  background:var(--gold) !important;
  color:var(--green-d) !important;
  box-shadow:0 6px 22px rgba(30,58,42,.30), 0 0 0 6px rgba(228,178,91,.18) !important;
}
.mission .mission-eye{
  font-family:'Inter', sans-serif !important;
  font-size:11px !important; font-weight:700 !important;
  letter-spacing:.22em !important; text-transform:uppercase !important;
  color:var(--gold-l) !important;
  margin:0 0 18px !important;
}
.mission .mission-pull{
  font-family:'Fraunces', Georgia, serif !important;
  font-style:italic !important; font-weight:500 !important;
  font-size:clamp(48px, 7vw, 92px) !important;
  line-height:1 !important;
  color:var(--gold-l) !important;
  letter-spacing:-.02em !important;
  margin:0 0 28px !important;
  text-shadow:0 2px 18px rgba(0,0,0,.5) !important;
  text-wrap:balance !important;
}
.mission .mission-body{
  font-family:var(--slab) !important;
  font-weight:500 !important;
  font-size:clamp(17px, 1.6vw, 20px) !important;
  line-height:1.55 !important;
  color:rgba(251,246,231,.94) !important;
  margin:0 auto 30px !important;
  max-width:52ch !important;
  text-shadow:0 1px 6px rgba(0,0,0,.35) !important;
}
.mission .mission-cta{
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  background:var(--gold) !important; color:var(--green-d) !important;
  text-decoration:none !important;
  font-family:'Inter', sans-serif !important;
  font-weight:700 !important; font-size:13.5px !important;
  letter-spacing:.06em !important;
  padding:14px 24px !important; border-radius:999px !important;
  box-shadow:0 6px 22px rgba(228,178,91,.34) !important;
  transition:background .2s ease, transform .25s ease, color .2s ease !important;
}
.mission .mission-cta:hover{
  background:var(--gold-d) !important; color:var(--paper-w) !important;
  transform:translateY(-2px) !important;
}
.mission .mission-cta svg{ width:14px !important; height:14px !important; }

/* ============================================================
   MOBILE — hero stack, mission sizing, mobile mega menu accordion,
   nav drawer with scroll lock + X close button.
   ============================================================ */
@media (max-width:980px){
  /* Hero: image at top, text on cream below */
  .hero{
    position:relative !important;
    display:flex !important; flex-direction:column !important;
    min-height:0 !important; height:auto !important;
    background:var(--paper) !important;
    margin:0 !important; border-radius:0 !important;
    overflow:hidden !important;
  }
  .hero-slide{
    position:relative !important; inset:auto !important;
    width:100% !important; aspect-ratio:4/3 !important;
    height:auto !important;
    flex:0 0 auto !important; order:1 !important;
    display:none !important;
    opacity:1 !important; visibility:visible !important;
    transform:none !important;
  }
  .hero-slide.active{ display:block !important; }
  .hero-slide img{
    position:absolute !important; inset:0 !important;
    width:100% !important; height:100% !important;
    object-fit:cover !important;
    object-position:center 30% !important;
  }
  .hero-content{
    position:static !important; inset:auto !important;
    padding:0 !important; max-width:100% !important;
    background:var(--paper) !important; color:var(--ink) !important;
    order:2 !important; flex:1 1 auto !important;
  }
  .hero-inner{
    position:static !important; padding:0 !important;
    background:transparent !important; color:var(--ink) !important;
    max-width:100% !important; text-align:left !important;
  }
  .hero-inner .hero-eyebrow{ display:none !important; }
  .hero-inner h1{
    position:absolute !important;
    top:37.5vw !important; left:0 !important; right:0 !important;
    transform:translateY(-50%) !important;
    margin:0 !important; padding:0 24px !important;
    background:transparent !important; text-align:center !important;
    color:var(--paper-w) !important;
    font-size:clamp(26px, 7vw, 36px) !important;
    line-height:1.1 !important;
    text-shadow:0 2px 14px rgba(0,0,0,.6), 0 1px 4px rgba(0,0,0,.5) !important;
    z-index:3 !important;
    word-break:normal !important; overflow-wrap:break-word !important;
  }
  .hero-inner h1 .hl{ color:var(--gold-l) !important; font-size:1.06em !important; }
  .hero-inner p.sub{
    margin:0 !important; padding:22px 22px 16px !important;
    background:var(--paper) !important; color:#4a4a3d !important;
    font-size:14.5px !important; line-height:1.5 !important;
  }
  .hero-actions{
    margin:0 !important; padding:0 22px 22px !important;
    background:var(--paper) !important;
    flex-direction:row !important; flex-wrap:wrap !important;
    gap:10px !important; align-items:center !important; width:100% !important;
  }
  .hero-actions .btn{ width:auto !important; flex:0 0 auto !important; padding:12px 20px !important; font-size:13px !important; }
  .hero-actions .btn-light{ background:transparent !important; border:1.5px solid var(--green-d) !important; color:var(--green-d) !important; }
  .hero-actions .btn-light:hover{ background:var(--green-d) !important; color:var(--paper-w) !important; }

  /* Slide counter + colour-changing bars on a pill at the bottom of the image */
  .hero-dots{
    position:absolute !important;
    inset:auto !important;
    top:calc(75vw - 42px) !important;
    left:50% !important; right:auto !important; bottom:auto !important;
    transform:translateX(-50%) !important;
    margin:0 !important; padding:6px 14px !important;
    background:rgba(0,0,0,.32) !important;
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    border-radius:999px !important;
    display:inline-flex !important; align-items:center !important;
    gap:10px !important; flex-wrap:nowrap !important;
    color:var(--paper-w) !important;
    z-index:3 !important; width:auto !important;
  }
  .hero-dots [data-pa-hero-counter]{
    position:static !important;
    margin:0 !important; padding:0 !important;
    background:transparent !important;
    backdrop-filter:none;
    border-radius:0 !important;
    font-size:11px !important; letter-spacing:.18em !important; font-weight:700 !important;
    color:var(--paper-w) !important; white-space:nowrap !important;
  }
  .hero-dot{
    width:18px !important; height:3px !important; border-radius:2px !important;
    background:rgba(251,246,231,.40) !important; border:0 !important; padding:0 !important;
    transition:background .25s ease, width .25s ease !important;
  }
  .hero-dot.active{ background:var(--paper-w) !important; width:24px !important; }
  .hero-controls{ display:none !important; }

  /* Mission mobile sizing */
  .mission{ padding:clamp(70px,16vw,110px) var(--gutter) !important; }
  .mission .ornament{ margin:0 auto 18px !important; }
  .mission .mission-eye{ margin-bottom:14px !important; }
  .mission .mission-pull{ font-size:clamp(38px, 11vw, 60px) !important; margin-bottom:20px !important; }
  .mission .mission-body{ font-size:15.5px !important; margin-bottom:24px !important; }
  .mission::before{ background-position:center 30% !important; }

  /* Mobile mega menu (reparented as accordion under each nav-item by site.js) */
  .mega-menu{
    position:static !important;
    background:transparent !important; border:0 !important; box-shadow:none !important;
    opacity:1 !important; visibility:hidden !important; pointer-events:none !important;
    display:none !important; animation:none !important; transform:none !important;
  }
  .nav-item.active > .mega-menu, .nav-item.active .mega-menu, .mega-menu.active{
    display:block !important; visibility:visible !important; pointer-events:auto !important;
  }
  .mega-inner{ padding:6px 0 18px !important; }
  .mega-inner::after{ display:none !important; }
  .mega-eyebrow{ display:none !important; }
  .mega-cols, .mega-cols.cols-wide{ grid-template-columns:1fr !important; gap:14px !important; }
  .mega-tiles{ grid-template-columns:1fr 1fr !important; gap:10px !important; }
  .mega-cols.cols-wide .mega-tiles{ grid-template-columns:1fr !important; }
  .mega-tile{ aspect-ratio:5/4 !important; text-transform:none !important; letter-spacing:0 !important; }
  .mega-tile .band{ padding:42px 16px 14px !important; text-transform:none !important; }
  .mega-tile .h{ font-size:18px !important; padding-right:24px !important; text-transform:none !important; letter-spacing:0 !important; }
  .mega-tile .d{ font-size:11.5px !important; padding-right:30px !important; text-transform:none !important; letter-spacing:0 !important; }
  .mega-tile .ar{ width:26px !important; height:26px !important; font-size:13px !important; right:10px !important; bottom:10px !important; }
  .mega-cols.cols-wide .mega-list{ grid-template-columns:1fr !important; gap:0 !important; }
  .mega-list a, .mega-list .mega-link{ font-size:16px !important; padding:10px 4px !important; text-transform:none !important; letter-spacing:0 !important; }
  .mega-list .label, .mega-list .desc{ text-transform:none !important; letter-spacing:0 !important; }
  .mega-list .desc{ font-size:11px !important; }
  .mega-list .ar{ width:28px !important; height:28px !important; font-size:14px !important; }
  .mega-newsletter{
    flex-direction:column !important; align-items:stretch !important;
    padding:16px 18px !important; gap:12px !important; margin-top:18px !important;
  }
  .mega-newsletter form{ flex-direction:column !important; gap:8px !important; width:100% !important; }
  .mega-newsletter input{ width:100% !important; min-width:0 !important; }
  .mega-newsletter button{ width:100% !important; }

  /* Nav drawer — stack vertically, drawer scrolls internally, page locks behind */
  body.nav-mobile-open{ overflow:hidden !important; }
  .nav-links{
    flex-direction:column !important; align-items:stretch !important;
    gap:0 !important; padding:8px var(--gutter) 24px !important;
    max-height:calc(100vh - 88px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }
  .nav-item{ display:block !important; width:100% !important; border-bottom:1px solid rgba(42,51,38,.10) !important; }
  .nav-item:last-child{ border-bottom:0 !important; }
  .nav-item > a{
    display:flex !important; align-items:center !important; justify-content:space-between !important;
    width:100% !important; padding:14px 0 !important;
    font-size:18px !important; font-family:'Fraunces', Georgia, serif !important;
    font-weight:500 !important; letter-spacing:0 !important; text-transform:none !important;
  }
  .nav-item > a::after{ display:none !important; }
  .nav-item > a .caret{ margin-left:auto !important; font-size:14px !important; }

  /* X close button — shown sticky at the top-left of the open drawer */
  .nav-close{
    display:flex !important;
    position:sticky !important; top:0 !important;
    align-self:flex-start !important;
    background:var(--paper-2) !important; color:var(--green-d) !important;
    border:0 !important;
    width:42px !important; height:42px !important; border-radius:50% !important;
    align-items:center !important; justify-content:center !important;
    cursor:pointer !important;
    margin:0 0 6px -4px !important;
    box-shadow:0 4px 14px rgba(30,58,42,.18) !important;
    z-index:10 !important;
  }
  .nav-close:hover{ background:var(--gold) !important; color:var(--green-d) !important; }
}

/* ============================================================
   M9 — Help photo cards, dark green News journal, slim
   Newsletter form (lime button), Trust strip cleanup.
   (Matt 2026-05-28, theme 0.3.30)
   ============================================================ */

/* ----- Help section: cream background, photo cards (option 1) ----- */
.help{ background:var(--paper) !important; }
.help-grid{ gap:18px !important; }
.help-card{
  position:relative !important; display:block !important;
  aspect-ratio:5/4 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:14px !important;
  overflow:hidden !important;
  text-decoration:none !important; color:inherit !important;
  isolation:isolate !important;
  background:transparent !important;
  min-height:0 !important;
  box-shadow:0 6px 22px rgba(40,40,30,.14) !important;
  transition:transform .25s ease, box-shadow .25s ease !important;
}
.help-card:hover{ transform:translateY(-3px) !important; box-shadow:0 18px 38px rgba(40,40,30,.22) !important; border-color:transparent !important; }
.help-card .img{
  position:absolute !important; inset:0 !important;
  background-size:cover !important; background-position:center !important;
  transition:transform .55s ease !important; z-index:0 !important;
}
.help-card:hover .img{ transform:scale(1.04) !important; }
.help-card .band{
  position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important;
  padding:74px 24px 22px !important;
  background:linear-gradient(180deg, rgba(30,58,42,0) 0%, rgba(30,58,42,.45) 30%, rgba(30,58,42,.92) 65%, var(--green-d) 82%, var(--green-d) 100%) !important;
  color:var(--paper-w) !important;
  z-index:1 !important;
}
.help-card .num{
  font-family:'Inter',sans-serif !important;
  font-size:10.5px !important; letter-spacing:.18em !important; text-transform:uppercase !important;
  color:var(--gold-l) !important; font-weight:700 !important;
  background:transparent !important; padding:0 !important; border-radius:0 !important;
  margin-bottom:8px !important;
  display:block !important; align-self:auto !important;
}
.help-card h3{
  font-family:'Fraunces', Georgia, serif !important;
  font-weight:600 !important; font-size:26px !important;
  line-height:1.08 !important; margin:0 0 8px !important;
  padding-right:48px !important;
  color:var(--paper-w) !important;
  letter-spacing:0 !important;
}
.help-card h3 em{ font-style:italic !important; color:var(--gold-l) !important; font-weight:500 !important; }
.help-card p{
  font-family:'Lora', Georgia, serif !important;
  font-style:italic !important;
  font-size:13px !important; line-height:1.5 !important;
  margin:0 !important; padding-right:54px !important;
  max-width:34ch !important;
  color:rgba(251,246,231,.92) !important;
}
.help-card .arrow-link{
  position:absolute !important; right:18px !important; bottom:18px !important;
  width:36px !important; height:36px !important; border-radius:50% !important;
  background:var(--yellow) !important; color:var(--green-d) !important;
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  padding:0 !important; gap:0 !important; margin-top:0 !important;
  box-shadow:0 4px 12px rgba(30,58,42,.30) !important;
  transition:background .2s ease, transform .25s ease !important;
  z-index:2 !important;
}
.help-card .arrow-link::after{ content:"\203A"; font-size:18px; font-weight:700; }
.help-card .arrow-link svg{ display:none !important; }
.help-card:hover .arrow-link{ background:var(--gold) !important; transform:translateX(3px) !important; color:var(--green-d) !important; }

/* ----- News section: full-bleed dark green journal panel ----- */
section[data-screen-label="News"]{
  background:var(--green-d) !important;
  padding:clamp(72px, 9vw, 110px) var(--gutter) !important;
  position:relative !important; isolation:isolate !important; overflow:hidden !important;
}
section[data-screen-label="News"] .container{
  position:relative !important; background:transparent !important;
  border-radius:0 !important; padding:0 !important;
  max-width:var(--maxw) !important; margin:0 auto !important; z-index:1 !important;
}
section[data-screen-label="News"]::before{
  content:"" !important; position:absolute !important;
  left:-90px !important; bottom:-90px !important;
  width:480px !important; height:480px !important;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 710 671'><path fill='%23efcd86' fill-opacity='0.08' d='M353 60l11-22c62-85 158-8 196 58 14 26 26 55 26 85 7 0 14-3 21-2 76 6 105 107 97 170-6 49-43 100-88 120-3 1-16 5-16 6 19 45 12 97-18 135-42 54-137 77-196 39-12-8-22-19-34-27-2 0-23 19-28 22-32 23-63 26-102 20-93-13-154-99-118-190 0-1-16-6-19-8-43-22-62-137-18-217 19-33 56-62 96-50 1-32 11-62 27-89 32-54 106-122 171-80 16 10 29 28 35 47ZM268 40c-24 3-56 32-71 50-41 51-53 114-13 169 29 40 80 45 114 9 41-44 39-114 26-168-7-30-18-65-56-60ZM425 40c-32 4-41 52-46 77-8 46-8 97 19 137 35 53 100 50 131-4 25-44 26-83 2-128-18-33-65-88-106-82ZM97 220c-42 6-59 83-57 117 3 53 56 122 114 100 47-17 52-76 38-117-12-33-53-107-95-100ZM600 220c-41 6-85 90-90 127-10 76 58 126 119 71 36-32 46-78 36-124-6-29-28-78-65-74ZM161 459c-70 88 4 180 107 171 47-4 66-70 113-35 20 15 32 32 60 35 118 11 181-105 89-189-14-13-30-23-42-36-26-29-33-63-68-85-41-26-94-26-134 2-32 22-39 54-63 81-19 21-43 34-61 56Z'/></svg>") center/contain no-repeat !important;
  transform:rotate(-14deg) !important;
  z-index:0 !important; pointer-events:none !important;
}
section[data-screen-label="News"] .news-head{
  position:relative !important; z-index:1 !important;
  display:flex !important; align-items:flex-end !important; justify-content:space-between !important;
  gap:30px !important; flex-wrap:wrap !important;
  margin:0 0 38px !important;
}
section[data-screen-label="News"] .news-head > div:first-child{ flex:1 !important; min-width:320px !important; }
section[data-screen-label="News"] .news-head .eyebrow{
  font-family:'Inter',sans-serif !important;
  font-size:10px !important; letter-spacing:.22em !important; text-transform:uppercase !important;
  color:var(--gold-l) !important; font-weight:700 !important;
  margin-bottom:12px !important;
  display:flex !important; align-items:center !important; gap:10px !important;
}
section[data-screen-label="News"] .news-head .eyebrow::before{
  content:"" !important; width:32px !important; height:2px !important;
  background:var(--gold) !important; display:inline-block !important;
}
section[data-screen-label="News"] .news-head h2{
  font-family:var(--slab) !important;
  font-weight:800 !important; font-size:clamp(40px,5vw,68px) !important;
  line-height:1 !important; letter-spacing:-.02em !important;
  margin:0 0 8px !important;
  color:var(--paper-w) !important;
}
section[data-screen-label="News"] .news-head h2 span{
  font-family:'Fraunces',Georgia,serif !important;
  font-style:italic !important; font-weight:500 !important;
  color:var(--gold-l) !important;
}
section[data-screen-label="News"] .news-head p{
  font-family:'Lora',Georgia,serif !important;
  font-style:italic !important; font-size:16px !important; line-height:1.45 !important;
  color:rgba(251,246,231,.84) !important;
  margin:0 !important; max-width:46ch !important;
}
section[data-screen-label="News"] .news-head::after{
  content:"All journal entries \203A";
  font-family:'Inter',sans-serif;
  font-weight:700; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-l);
  padding-bottom:6px;
  border-bottom:1px solid var(--gold);
  white-space:nowrap;
}
section[data-screen-label="News"] .news-grid{
  position:relative !important; z-index:1 !important;
  display:grid !important; grid-template-columns:repeat(4,1fr) !important; gap:18px !important;
}
section[data-screen-label="News"] .news-card{
  background:var(--paper-w) !important;
  border-radius:14px !important; overflow:hidden !important;
  display:flex !important; flex-direction:column !important;
  text-decoration:none !important; color:inherit !important;
  padding:0 !important; border:0 !important;
  box-shadow:0 4px 14px rgba(0,0,0,.18) !important;
  transition:transform .25s ease, box-shadow .25s ease !important;
}
section[data-screen-label="News"] .news-card:hover{ transform:translateY(-4px) !important; box-shadow:0 18px 36px rgba(0,0,0,.32) !important; }
section[data-screen-label="News"] .news-card:first-of-type{ grid-column:span 2 !important; grid-row:span 2 !important; }
section[data-screen-label="News"] .news-card .photo{
  aspect-ratio:5/4 !important; overflow:hidden !important;
  padding:0 !important; margin:0 !important; border-radius:0 !important; position:relative !important;
}
section[data-screen-label="News"] .news-card .photo img{
  width:100% !important; height:100% !important;
  object-fit:cover !important; object-position:center !important;
  display:block !important; border-radius:0 !important;
  transition:transform .55s ease !important;
}
section[data-screen-label="News"] .news-card:hover .photo img{ transform:scale(1.04) !important; }
/* Fade the card's cream body up INTO the bottom of every news photo, so the
   image dissolves into the writing area instead of sitting on a hard edge. */
section[data-screen-label="News"] .news-card .photo::after{
  content:"" !important; position:absolute !important; inset:0 !important;
  background:linear-gradient(0deg, var(--paper-w) 0%, rgba(251,246,231,.55) 14%, rgba(251,246,231,0) 32%) !important;
  pointer-events:none !important; z-index:1 !important;
}
/* Featured card uses a slightly tighter fade since the photo is taller */
section[data-screen-label="News"] .news-card:first-of-type .photo::after{
  background:linear-gradient(0deg, var(--paper-w) 0%, rgba(251,246,231,.55) 10%, rgba(251,246,231,0) 24%) !important;
}
section[data-screen-label="News"] .news-card:first-of-type .photo{
  aspect-ratio:auto !important;
  flex:1 1 auto !important;
  min-height:380px !important;
}
section[data-screen-label="News"] .news-card .news-tag{
  font-family:'Inter',sans-serif !important;
  font-size:10px !important; letter-spacing:.18em !important; text-transform:uppercase !important;
  color:var(--gold-d) !important; font-weight:700 !important;
  display:flex !important; justify-content:space-between !important; align-items:center !important;
  padding:20px 22px 0 !important; background:transparent !important;
}
section[data-screen-label="News"] .news-card .news-tag .date{
  color:#8a8470 !important;
  font-family:'Lora',Georgia,serif !important;
  font-style:italic !important; font-weight:400 !important;
  letter-spacing:0 !important; text-transform:none !important;
  font-size:11.5px !important;
}
section[data-screen-label="News"] .news-card h3{
  font-family:var(--slab), 'Roboto Slab', Georgia, serif !important;
  font-weight:800 !important; font-size:22px !important;
  line-height:1.14 !important; letter-spacing:-.015em !important;
  margin:10px 0 10px !important; padding:0 22px !important;
  color:var(--green-d) !important;
}
section[data-screen-label="News"] .news-card h3 em{
  font-family:'Fraunces', Georgia, serif !important;
  font-style:italic !important; color:var(--green) !important; font-weight:500 !important;
}
section[data-screen-label="News"] .news-card p{
  display:-webkit-box !important;
  font-family:'Lora',Georgia,serif !important;
  font-style:italic !important; font-size:13.5px !important; line-height:1.5 !important;
  color:var(--ink-2) !important;
  margin:0 0 16px !important; padding:0 22px !important;
  -webkit-line-clamp:2 !important;
  -webkit-box-orient:vertical !important;
  overflow:hidden !important;
}
section[data-screen-label="News"] .news-card .read{
  background:var(--yellow) !important; color:var(--green-d) !important;
  font-family:'Inter',sans-serif !important;
  font-size:11px !important; font-weight:700 !important;
  letter-spacing:.10em !important; text-transform:uppercase !important;
  padding:9px 16px !important; border-radius:999px !important;
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  align-self:flex-end !important;
  margin:0 22px 22px !important; margin-top:auto !important;
  box-shadow:0 4px 14px rgba(228,178,91,.30) !important;
  transition:background .2s ease, transform .25s ease, gap .2s ease !important;
}
section[data-screen-label="News"] .news-card:hover .read{ background:var(--gold) !important; gap:10px !important; transform:translateY(-1px) !important; color:var(--green-d) !important; }
section[data-screen-label="News"] .news-card .read svg{ width:12px !important; height:12px !important; }
section[data-screen-label="News"] .news-card:first-of-type .news-tag{ padding:26px 30px 0 !important; font-size:11px !important; }
section[data-screen-label="News"] .news-card:first-of-type .news-tag .date{ font-size:12.5px !important; }
section[data-screen-label="News"] .news-card:first-of-type h3{ font-size:32px !important; line-height:1.08 !important; padding:0 30px !important; margin:12px 0 14px !important; }
section[data-screen-label="News"] .news-card:first-of-type p{ font-size:15.5px !important; line-height:1.55 !important; padding:0 30px !important; margin:0 0 18px !important; -webkit-line-clamp:3 !important; }
section[data-screen-label="News"] .news-card:first-of-type .read{
  padding:11px 20px !important;
  margin:0 30px 30px !important; margin-top:auto !important;
  font-size:12px !important;
  letter-spacing:.12em !important;
}
section[data-screen-label="News"] .news-cta{ display:none !important; }

/* ----- Newsletter form — slim input row, lime green Sign up button ----- */
.newsletter form{ padding:5px !important; gap:5px !important; }
.newsletter input{
  padding:9px 16px !important;
  font-size:13.5px !important;
}
.newsletter button[type="submit"]{
  padding:8px 20px !important;
  font-size:11.5px !important;
  letter-spacing:.14em !important;
  white-space:nowrap !important;
  background:var(--leaf) !important;
  color:var(--green-d) !important;
}
.newsletter button[type="submit"]:hover{
  background:var(--green-ll) !important;
  color:var(--green-d) !important;
}

/* ----- Trust strip cleanup ----- */
.trust{
  background:var(--gold) !important;
  padding:22px var(--gutter) !important;
  font-size:14.5px !important;
  font-family:var(--slab) !important;
  font-weight:500 !important;
}
.trust .container{
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:18px !important; flex-wrap:wrap !important;
}
.trust .trust-paw{
  width:22px !important; height:22px !important;
  margin:0 !important;
  opacity:.9 !important;
  color:var(--green-d) !important;
  flex-shrink:0 !important;
}
.trust .sep{
  display:inline-block !important;
  width:6px !important; height:6px !important; border-radius:50% !important;
  background:var(--green-d) !important; opacity:.45 !important;
  margin:0 !important;
  font-size:0 !important;
}
.trust strong{ font-weight:700 !important; color:var(--green-d) !important; }

@media (max-width:980px){
  section[data-screen-label="News"] .news-grid{ grid-template-columns:repeat(2,1fr) !important; }
  section[data-screen-label="News"] .news-card:first-of-type{ grid-column:span 2 !important; grid-row:auto !important; }
  section[data-screen-label="News"] .news-card:first-of-type .photo{ aspect-ratio:16/10 !important; min-height:0 !important; flex:0 0 auto !important; }
  section[data-screen-label="News"] .news-head::after{ display:none !important; }
}

/* ============================================================
   M9 — ASM form component (adopt, foster, sponsor)
   Used by templates/page-adopt.php and templates/page-foster.php.
   Submits via pennysark-theme/assets/js/asm-form.js to the
   /wp-json/pennysark/v1/asm-form proxy. Iframe stays as
   <details data-pa-asm-fallback> when the proxy can't reach ASM.
   ============================================================ */
.apply-frame{
  background:var(--paper-w);
  border:0;
  border-radius:18px;
  padding:40px 44px;
  max-width:780px;
  margin:0 auto;
  box-shadow:0 10px 30px rgba(40,40,30,.10);
  position:relative;
}
.apply-frame .frame-eye{
  display:flex; align-items:center; gap:10px;
  font-family:'Inter', sans-serif;
  font-weight:700; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--green); margin-bottom:18px;
}
.apply-frame .frame-eye .dot{ width:8px; height:8px; border-radius:50%; background:var(--green); }
.pa-asm-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pa-asm-form .full{ grid-column:1 / -1; }
.pa-asm-form label{
  display:flex; flex-direction:column; gap:6px;
  font-family:'Inter', sans-serif;
  font-weight:600; font-size:11px;
  letter-spacing:.10em; text-transform:uppercase;
  color:var(--green-d);
}
.pa-asm-form input,
.pa-asm-form textarea,
.pa-asm-form select{
  border:1px solid rgba(42,51,38,.18);
  background:var(--paper);
  border-radius:10px;
  padding:12px 14px;
  font-family:var(--slab);
  font-size:14.5px;
  color:var(--ink);
  font-weight:400;
  letter-spacing:0;
  text-transform:none;
  font-style:normal;
}
.pa-asm-form textarea{ min-height:120px; resize:vertical; }
.pa-asm-form input:focus,
.pa-asm-form textarea:focus,
.pa-asm-form select:focus{
  outline:0;
  border-color:var(--gold);
  background:var(--paper-w);
}
/* Honeypot: visible to bots, invisible to humans + screen readers. */
.pa-asm-form .pa-asm-honeypot{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.pa-asm-form-actions{ display:flex; justify-content:center; margin-top:24px; }
.pa-asm-form button.is-busy{ opacity:.6; cursor:wait; }
.apply-frame .form-note{
  font-family:'Lora', Georgia, serif;
  font-style:italic; font-size:12.5px; line-height:1.5;
  color:#8a8470;
  margin:16px 0 0;
  text-align:center;
}

/* Fallback <details> with the raw ASM iframe inside. */
.form-fallback{ max-width:780px; margin:20px auto 0; }
.form-fallback summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Inter', sans-serif;
  font-weight:700; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-d);
  padding:10px 0;
  border-bottom:1.5px solid var(--green-d);
}
.form-fallback summary::-webkit-details-marker{ display:none; }
.form-fallback summary::after{
  content:"+"; font-family:'Fraunces', serif;
  font-style:italic; font-weight:500; font-size:18px; line-height:1;
}
.form-fallback[open] summary::after{ content:"\00D7"; font-style:normal; }
.form-fallback .iframe-wrap{
  margin-top:18px;
  background:var(--paper-w);
  border-radius:14px;
  padding:8px;
  box-shadow:0 4px 16px rgba(40,40,30,.10);
}
.form-fallback iframe{
  width:100%; min-height:600px; border:0; display:block; border-radius:10px;
}

/* Status messages injected by asm-form.js (.is-success / .is-error). */
.pa-asm-status{
  margin:14px 0 0;
  font-family:'Lora', Georgia, serif;
  font-style:italic; font-size:13.5px; line-height:1.5;
}
.pa-asm-status.is-success{ color:var(--green-d); }
.pa-asm-status.is-error{ color:var(--gold-d); }

@media (max-width:980px){
  .apply-frame{ padding:28px 22px; }
  .pa-asm-form{ grid-template-columns:1fr; }
}

/* ============================================================
   M10 — Multi-step wizard (adopt + foster ASM proxy forms)
   Companion to the M9 form-component block above. The form's
   own .pa-asm-form / .apply-frame styles are unchanged; this
   adds the progress indicator, step containers, and the
   checkbox-group control for ASM multi-select fields like
   typeoffoster_2107 and gdprcontactoptin_2010.
   ============================================================ */
.pa-wizard-progress{ margin:0 0 32px; }
.pa-wizard-progress ol{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:8px; position:relative;
}
.pa-wizard-progress li{
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  font-family:'Inter', sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.10em; text-transform:uppercase;
  color:#8a8470; padding-top:12px;
  border-top:2px solid rgba(42,51,38,.16);
  transition:color .2s ease, border-color .2s ease;
}
.pa-wizard-progress li .num{
  font-family:'Fraunces', serif; font-style:italic;
  font-size:18px; font-weight:500; line-height:1; color:inherit;
}
.pa-wizard-progress li.is-current{ color:var(--gold-d); border-top-color:var(--gold); }
.pa-wizard-progress li.is-done{ color:var(--green); border-top-color:var(--green); }
.pa-wizard-progress li.is-done .num::after{ content:" \2713"; }

.pa-wizard-step{ border:0; padding:0; margin:0; min-width:0; }
.pa-wizard-step[hidden]{ display:none; }
.pa-wizard-step legend{
  font-family:var(--slab); font-weight:800; font-size:22px;
  color:var(--green-d); margin:0 0 6px; padding:0; letter-spacing:-0.01em;
}
.pa-wizard-step .step-lede{
  font-family:'Lora', Georgia, serif; font-style:italic;
  font-size:14px; color:var(--ink-2); margin:0 0 22px; line-height:1.5;
}

.pa-wizard-nav{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:28px; gap:12px;
}
.pa-wizard-nav .btn-back{
  background:transparent; border:0; padding:8px 0;
  font-family:'Inter', sans-serif; font-weight:700; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--green-d); cursor:pointer;
}
.pa-wizard-nav .btn-back[disabled]{ opacity:0; pointer-events:none; }
.pa-wizard-nav .step-count{
  font-family:'Lora', Georgia, serif; font-style:italic;
  font-size:13px; color:#8a8470;
}

.pa-wizard-step .pa-asm-form{ gap:14px 16px; }
.pa-asm-form label.req-mark::after{
  content:" *"; color:var(--gold-d); font-weight:700;
}

/* Checkbox-group (typeoffoster, gdprcontactoptin) */
.pa-checkgroup{
  border:1px solid rgba(42,51,38,.18); border-radius:10px;
  padding:14px 16px; background:var(--paper);
  display:flex; flex-direction:column; gap:8px;
}
.pa-checkgroup .legend{
  font-family:'Inter', sans-serif; font-weight:600; font-size:11px;
  letter-spacing:.10em; text-transform:uppercase; color:var(--green-d);
  margin-bottom:4px;
}
.pa-checkgroup label{
  flex-direction:row; align-items:center; gap:10px;
  font-family:var(--slab); font-size:14.5px; color:var(--ink);
  font-weight:400; letter-spacing:0; text-transform:none;
}
.pa-checkgroup input[type="checkbox"]{
  width:18px; height:18px; padding:0; margin:0;
  accent-color:var(--green); cursor:pointer;
}

@media (max-width:680px){
  .pa-wizard-progress ol{ grid-template-columns:repeat(2, 1fr); gap:6px 8px; }
  .pa-wizard-progress li{ font-size:10px; }
}

/* ============================================================
   M11 — Wizard layout fix (patch over M9 + M10)
   Reason: when .pa-asm-form is also .pa-wizard, the form contains
   <fieldset class="pa-wizard-step">s rather than labels directly.
   The form's `display:grid` from M9 was putting each whole fieldset
   in a grid cell, not the fields inside it. Each fieldset has to
   become the grid container instead, and the ::after asterisk for
   required fields was rendering below the input (third flex item)
   instead of next to the label text — fixed by switching req-mark
   labels to a 2x2 grid.
   ============================================================ */
.pa-asm-form.pa-wizard{
  display:block;
}
.pa-asm-form.pa-wizard .pa-wizard-step{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 16px;
  align-items:start;
}
.pa-asm-form.pa-wizard .pa-wizard-step[hidden]{
  display:none;
}
.pa-asm-form.pa-wizard .pa-wizard-step > legend,
.pa-asm-form.pa-wizard .pa-wizard-step > .step-lede,
.pa-asm-form.pa-wizard .pa-wizard-step > .pa-wizard-nav,
.pa-asm-form.pa-wizard .pa-wizard-step > .pa-checkgroup,
.pa-asm-form.pa-wizard .pa-wizard-step > .pa-asm-honeypot,
.pa-asm-form.pa-wizard .pa-wizard-step > label.full,
.pa-asm-form.pa-wizard .pa-wizard-step > input[type="hidden"]{
  grid-column:1 / -1;
}

/* req-mark asterisk: position via grid so it sits next to the
   label text on row 1, while the input fills row 2 across both
   columns. */
.pa-asm-form label.req-mark{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  column-gap:6px;
  row-gap:6px;
  align-items:start;
}
.pa-asm-form label.req-mark::after{
  content:"*";
  grid-column:2;
  grid-row:1;
  color:var(--gold-d);
  font-weight:700;
  justify-self:start;
  margin:0;
}
.pa-asm-form label.req-mark > input,
.pa-asm-form label.req-mark > textarea,
.pa-asm-form label.req-mark > select{
  grid-column:1 / -1;
  grid-row:2;
}

@media (max-width:680px){
  .pa-asm-form.pa-wizard .pa-wizard-step{
    grid-template-columns:1fr;
  }
}

/* ============================================================
   NEWSLETTER unification (2026-05-30) — one source for every
   .newsletter subscribe box, matching the contact-page design:
   flat cream section, gold rounded panel, paw watermark, cream
   pill form (name + email), dark-green Subscribe button.
   !important is used to defeat the older furry-photo background
   and lime-button overrides earlier in this file.
   ============================================================ */
.newsletter{background:var(--paper) !important;isolation:auto !important}
.newsletter::before{content:none !important}
.newsletter .container{background:var(--gold) !important;border-radius:var(--r-xl) !important;padding:clamp(40px,5vw,72px) !important;border:1px solid rgba(176,122,20,0.20) !important;box-shadow:0 8px 32px rgba(232,176,74,0.22) !important;position:relative !important;overflow:hidden !important;max-width:var(--maxw);margin:0 auto}
.newsletter .container::before{content:"" !important;position:absolute;top:-40px;right:-50px;width:260px;height:260px;background:var(--green-d);-webkit-mask:url('../images/paw-only.svg') no-repeat center/contain;mask:url('../images/paw-only.svg') no-repeat center/contain;opacity:0.10;pointer-events:none;transform:rotate(18deg);z-index:0}
.newsletter .container > *{position:relative;z-index:1}
.newsletter-grid{grid-template-columns:1fr 1.2fr !important;align-items:center}
@media (max-width:820px){.newsletter-grid{grid-template-columns:1fr !important}}
.newsletter .eyebrow{color:var(--green-d) !important}
.newsletter .eyebrow::before{background:var(--green-d) !important}
.newsletter h2{color:var(--green-d) !important}
.newsletter h2 span{color:#fff !important;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);font-family:'Fraunces',Georgia,serif}
.newsletter p{color:var(--green-d) !important;opacity:0.85}
.newsletter form{display:grid !important;grid-template-columns:1fr 1fr !important;gap:8px !important;background:var(--paper-2) !important;padding:8px !important;border-radius:24px !important}
.newsletter-thanks{text-align:center;padding:clamp(8px,2vw,28px)}
.newsletter-thanks h2{font-family:var(--slab);font-weight:800;font-size:clamp(30px,4vw,48px);line-height:1.05;color:var(--green-d);margin:0 auto 10px;max-width:none}
.newsletter-thanks p{font-size:18px;color:var(--ink-2);max-width:42ch;margin:0 auto;line-height:1.6}
@media (max-width:720px){.newsletter form{grid-template-columns:1fr !important;border-radius:var(--r-lg) !important}}
.newsletter input{padding:18px 22px !important;font-size:15px !important;background:transparent !important;border:0 !important;color:var(--ink) !important;border-radius:999px}
.newsletter input:focus{background:var(--paper) !important;box-shadow:0 0 0 1.5px var(--gold) !important}
.newsletter button[type="submit"]{background:var(--green) !important;color:#fbf6e7 !important;padding:14px 28px !important;font-size:13px !important;letter-spacing:0.16em !important;border-radius:999px !important;white-space:nowrap !important}
.newsletter button[type="submit"]:hover{background:var(--green-d) !important;color:#fbf6e7 !important;transform:translateY(-1px)}

/* ============================================================
   MOBILE CHROME a11y + readability floor (2026-05-30)
   Site-wide chrome only: nav, header buttons, topbar, footer.
   Lifts tap targets to 44x44 (WCAG) and small text to 14px on
   phones. Targets the existing chrome variants explicitly so
   we never override a per-page btn re-style.
   ============================================================ */
@media (max-width: 640px){
  /* Hamburger: 36x28 -> 44x44 tap target.
     !important required to override the .hamburger{padding:6px !important}
     rule at the <=600px block earlier in this file. */
  nav.topnav .hamburger{min-width:44px !important;min-height:44px !important;justify-content:center;align-items:center;box-sizing:border-box}

  /* Mobile drawer nav links: ensure each link is a 44px tap target */
  nav.topnav .nav-links a{min-height:44px;display:flex;align-items:center}

  /* Header donate button on mobile: lift font-size off the
     12-13.5px floor flagged in the audit. Applies to header
     chrome only (.nav-cta scope), not page-level buttons.
     !important required to win over the earlier 12px / 13.5px
     forced rules in this file (see lines ~1335 and ~1404). */
  nav.topnav .nav-cta .btn,
  nav.topnav .nav-cta .btn-primary,
  nav.topnav .nav-cta .btn-donate,
  nav.topnav.scrolled .nav-cta .btn,
  nav.topnav.scrolled .nav-cta .btn-donate{font-size:14px !important;min-height:44px !important}

  /* Topbar microcopy floor */
  .topbar-eyebrow{font-size:14px}
  .topbar-text{font-size:14px}

  /* Footer: links + small text + tap-target padding */
  footer ul a{font-size:14px;display:inline-block;padding:8px 0;min-height:44px;line-height:1.4}
  footer .legal{font-size:13px}
  footer .legal a{padding:6px 0;display:inline-block}
}

/* ============================================================
   MOBILE NAV DRAWER — close (X) position + tap accordions
   (fix 2026-05-31: X was top-left with no rule; megas opened
   on hover causing layout shift. Appended last so it wins the
   cascade over the duplicated .mega-menu{display:none} blocks.)
   ============================================================ */

/* Bottom signup is for the mobile drawer only — never on desktop.
   (Legacy .nav-close X button removed; the hamburger morphs to an X instead.) */
.nav-mobile-newsletter { display: none; }

@media (max-width: 980px) {
  /* Full-screen drawer: fills from below the bar to the viewport bottom,
     so no page content shows behind it. (top:100% already sits it under
     the sticky bar, so the burger stays tappable above to close.) */
  .nav-links.open {
    /* Only as tall as its content (ends just under the signup box), but
       never taller than the screen — then it scrolls inside instead. */
    max-height: calc(100vh - 100%);
    max-height: calc(100dvh - 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--paper-w);
    /* Kill the desktop .nav-links { margin-left: 8px } that, on an absolutely
       positioned drawer, shifts it right and leaves a gap on the left. */
    margin-left: 0;
    /* Parent monolith nav.css sets justify-content:flex-end on .nav-links
       (for desktop right-alignment); in this column layout that packs the
       menu to the bottom. Force top alignment. */
    justify-content: flex-start;
  }

  /* Lock the page behind the open drawer so it can't scroll. */
  body.nav-mobile-open { overflow: hidden; }

  /* Hamburger morphs into an X while the drawer is open. */
  .hamburger span { transition: transform .25s ease, opacity .2s ease; transform-origin: center; }
  body.nav-mobile-open .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-mobile-open .hamburger span:nth-child(2) { opacity: 0; }
  body.nav-mobile-open .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Sub-menus collapsed by default; revealed only when the parent
     item is tapped open (.active). No hover, so no layout-shift jank. */
  .nav-links.open .nav-item.has-mega .mega-menu { display: none; }
  .nav-links.open .nav-item.has-mega.active .mega-menu {
    display: block;
    position: static;
    inset: auto;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: transparent;
    box-shadow: none;
    border: 0;
    animation: none;
  }
  .nav-links.open .nav-item.has-mega.active .mega-inner { padding: 2px 0 8px 14px; }
  .nav-links.open .nav-item.has-mega.active .mega-cols { display: block; }
  .nav-links.open .nav-item.has-mega.active .mega-col { margin-bottom: 10px; }
  .nav-links.open .nav-item.has-mega.active .mega-col h4 { margin: 0 0 6px; }

  /* Plain text menu on mobile: drop the promo image tiles, the per-section
     signup form, and the section eyebrow. Leave just the link list. */
  /* !important needed: the base .mega-tiles rule forces display:grid !important,
     so a plain display:none here is ignored. */
  .nav-links.open .nav-item.has-mega.active .mega-tiles,
  .nav-links.open .nav-item.has-mega.active .mega-newsletter,
  .nav-links.open .nav-item.has-mega.active .mega-eyebrow,
  .nav-links.open .nav-item.has-mega.active .mega-list .desc { display: none !important; }
  .nav-links.open .nav-item.has-mega.active .mega-list-col { width: 100%; }

  /* Sub-links keep their yellow circle arrows, but lose the divider lines
     AND every animated gold underline — both under the expanded section
     header and the one that slides out under each sub-link / circle. */
  .nav-links.open .nav-item.has-mega.active > a::after,
  .nav-links.open .nav-item.has-mega.active .mega-menu a::after {
    display: none !important;
    content: none !important;
  }
  .nav-links.open .nav-item.has-mega.active .mega-list a,
  .nav-links.open .nav-item.has-mega.active .mega-seeall { border-bottom: 0 !important; }

  /* One newsletter signup, pinned to the very bottom of the drawer. */
  .nav-links .nav-mobile-newsletter {
    display: block;
    order: 99;                 /* keep it last even after mega reparenting */
    margin-top: 18px;          /* sit directly below the last menu item */
    background: var(--gold);
    border-radius: 14px;
    padding: 18px 16px;
    box-shadow: 0 6px 20px rgba(228,178,91,0.30);
  }
  .nav-links .nav-mobile-newsletter .eye {
    font-family: var(--slab);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--green-d);
    margin-bottom: 10px;
  }
  .nav-links .nav-mobile-newsletter form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .nav-links .nav-mobile-newsletter input[type="email"],
  .nav-links .nav-mobile-newsletter button { grid-column: 1 / -1; }
  .nav-links .nav-mobile-newsletter input {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    font: 500 14px var(--sans);
    color: var(--green-d);
    background: #fff;
    border: 1.5px solid rgba(31,43,29,0.16);
    border-radius: 999px;
    outline: 0;
  }
  .nav-links .nav-mobile-newsletter button {
    flex-shrink: 0;
    padding: 11px 18px;
    font: 700 11px var(--sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fbf6e7;
    background: var(--green-d);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
  }
}

/* === FULLY FLUID NAV ===========================================================
   Logo, menu words, gaps and padding all scale continuously with viewport, so
   the nav never overflows at any in-between width (no stepped breakpoints to
   fall through). Everything is at its minimum at the ~1040px hamburger point
   and grows gently with width. These override the earlier brand-refresh
   !important block, hence the matching nav.topnav specificity + !important. */
nav.topnav .brand .mark, nav.topnav.scrolled .brand .mark {
  width: clamp(52px, 5.4vw, 80px) !important;
  height: clamp(52px, 5.4vw, 80px) !important;
  flex: 0 0 auto !important;
}
nav.topnav.scrolled .brand .mark {
  width: clamp(44px, 3.4vw, 52px) !important;
  height: clamp(44px, 3.4vw, 52px) !important;
}
nav.topnav .brand-name { font-size: clamp(22px, 2.2vw, 32px) !important; }
nav.topnav .nav-row, nav.topnav.scrolled .nav-row {
  padding: 16px clamp(18px, 2.6vw, 44px) !important;
  gap: clamp(14px, 1.6vw, 34px) !important;
}
nav.topnav .nav-links { gap: clamp(10px, 1.4vw, 28px) !important; margin-left: 0 !important; }
nav.topnav .nav-links .nav-item > a {
  font-size: clamp(12.5px, calc(0.55vw + 6px), 16px) !important;
  letter-spacing: 0.04em !important;
}
nav.topnav .nav-cta .btn {
  padding: clamp(10px, 1vw, 16px) clamp(15px, 1.8vw, 28px) !important;
  font-size: clamp(12px, 0.7vw, 14px) !important;
}

/* Hide the charity-number subtitle under the brand on narrower screens. */
@media (max-width: 1200px) { nav.topnav .brand-name small { display: none; } }

/* Below ~1040px the desktop nav can't fit the 7 items + Donate readably, so the
   mobile drawer takes over. Donate + menu icon are right-aligned on mobile. */
@media (max-width: 1040px) {
  nav.topnav .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0 !important; background: var(--paper); padding: 14px var(--gutter) 24px; border-bottom: 1px solid var(--line-soft); }
  nav.topnav .nav-links.open { display: flex; }
  nav.topnav .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
  nav.topnav .hamburger { display: inline-flex; }
  nav.topnav .mega-menu { display: none; }
  nav.topnav .nav-cta { margin-left: auto; }
}

/* "Photo coming soon" placeholder for dogs with no published ASM photo.
   Shows the Penny's Ark logo mark on a soft cream tile instead of a broken
   image. Used by .dogs-card, .single-animal-photo and the shortcode cards. */
.dogs-card .photo,
.single-animal-photo,
.local-dog-card .photo,
.sponsor-dog .photo { position: relative; }
.dog-photo-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  text-align: center;
  background: var(--paper-2, #f3ecdd);
}
/* !important needed: page CSS (.dogs-card .photo img, .single-animal-photo img)
   loads after global.css at equal specificity and would stretch this to fill. */
.dog-photo-ph img {
  width: auto !important;
  height: 72px !important;
  max-width: 76% !important;
  object-fit: contain !important;
  opacity: 1;
  transition: none !important;
}
.dog-photo-ph::after {
  content: "Photo coming soon";
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted, #9a917d);
}



/* Honeypot — hide the bot-trap field on any form (contact form isn't .pa-asm-form). */
.pa-asm-honeypot{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

/* Thank-you page (shown after a contact submission redirects to /contact/thank-you/). */
.pa-thankyou{min-height:62vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:clamp(60px,10vw,120px) var(--gutter,24px);background:var(--paper-2,#f3ecdd)}
.pa-thankyou-inner{max-width:620px;margin:0 auto}
.pa-thankyou-mark{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:999px;background:var(--green,#2f4a39);color:#fff;margin-bottom:22px}
.pa-thankyou-eyebrow{display:inline-block;font-family:'Inter',sans-serif;font-weight:700;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d,#b8852f);margin-bottom:14px}
.pa-thankyou h1{font-family:var(--slab,'Zilla Slab',serif);font-weight:800;font-size:clamp(34px,5vw,56px);line-height:1.04;letter-spacing:-.02em;color:var(--green-d,#26392d);margin:0 0 18px}
.pa-thankyou h1 span{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;color:var(--green,#2f4a39)}
.pa-thankyou p{font-size:1.05rem;line-height:1.65;color:var(--ink-2,#4a4a40);margin:0 auto 28px;max-width:48ch}
.pa-thankyou p a{color:var(--green,#2f4a39);font-weight:600}
.pa-thankyou-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.pa-ty-btn{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-family:'Inter',sans-serif;font-weight:700;font-size:13.5px;letter-spacing:.06em;text-decoration:none;transition:background .2s ease,color .2s ease,transform .25s ease}
.pa-ty-btn-primary{background:var(--gold,#c79a3b);color:var(--green-d,#26392d);box-shadow:0 6px 22px rgba(228,178,91,.34)}
.pa-ty-btn-primary:hover{background:var(--gold-d,#b8852f);color:#fff;transform:translateY(-2px)}
.pa-ty-btn-light{background:transparent;color:var(--green-d,#26392d);border:1.5px solid var(--green-d,#26392d)}
.pa-ty-btn-light:hover{background:var(--green-d,#26392d);color:#fff}