:root{
  --red:#E53935;
  --text:#0B0B0B;
  --muted:#666;
  --bg:#fff;
  --line:#eee;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#fff;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif}
a{color:var(--text)}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.section{padding:26px 0}
.lead{font-size:1.1rem;color:#222}
.small{font-size:.9rem}
.sub{color:var(--muted)}
.tag,.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#111;color:#fff;font-size:12px;font-weight:800}
.badge{background:var(--red)}
.btn{display:inline-block;border:1px solid var(--text);padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:800}
.btn-primary{background:var(--red);border-color:var(--red);color:#fff}
.btn-ghost{background:#fff;}

.header{position:sticky;top:0;background:rgba(255,255,255,.85);/* backdrop-filter removed */-webkit-/* backdrop-filter removed */border-bottom:1px solid var(--line);z-index:30}
.nav{display:flex;align-items:center;gap:10px;height:64px}
.brand-img img{height:36px}
.navlinks{margin-left:auto;display:none;gap:14px}
.navlinks a{color:#0B0B0B;text-decoration:none}
.navlinks a:hover{color:var(--red)}
.menu-btn{background:transparent;border:none;cursor:pointer;width:42px;height:42px}
.menu-btn .bar{display:block;width:24px;height:2px;background:#000;position:relative}
.menu-btn .bar:before,.menu-btn .bar:after{content:"";position:absolute;left:0;width:24px;height:2px;background:#000}
.menu-btn .bar:before{top:-7px}.menu-btn .bar:after{top:7px}

.drawer{z-index:10000}
.drawer .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .2s}
.drawer .panel{position:fixed;inset:0 35% 0 0;max-width:420px;background:#fff;transform:translateX(-102%);transition:transform .2s, box-shadow .2s;padding:20px 18px;display:flex;flex-direction:column;gap:8px;box-shadow:8px 0 24px rgba(0,0,0,.12)}
.drawer .panel a{padding:12px;border-radius:10px;text-decoration:none;color:#0B0B0B}
.drawer .panel a:hover{background:#FFF5F5;color:var(--red)}
.drawer.on .backdrop{opacity:1;pointer-events:auto}
.drawer.on .panel{transform:none}
body.no-scroll{overflow:hidden;height:100vh}

@media(min-width:980px){.menu-btn{display:none}.navlinks{display:flex}.drawer{display:none}}

.ticker{border-bottom:1px solid var(--line);background:#fafafa}
.ticker .wrap{display:flex;gap:16px;overflow:auto;white-space:nowrap;scrollbar-width:none}
.ticker .wrap::-webkit-scrollbar{display:none}
.ticker .num{font-weight:900}

.countdown .inner{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0}

.grid2{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:980px){.grid2{grid-template-columns:1fr 1fr}}

.card,.btn,.kpi{transition:transform .15s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.08)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.reveal{opacity:0;transform:translateY(10px);transition:opacity .4s ease, transform .4s ease}
.reveal.on{opacity:1;transform:none}

.hero{padding:28px 0 18px}
.hero h1{font-size:clamp(28px,7vw,48px);margin:8px 0 10px}
.hero p{max-width:760px}

.impact{background:linear-gradient(180deg,#FFF7F7,#FFFFFF);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0}
.impact .grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:820px){.impact .grid{grid-template-columns:repeat(3,1fr)}}
.kpi{display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.05);padding:18px;min-height:120px}
.kpi .num{font-size:clamp(28px,6vw,44px);font-weight:900;color:var(--red);line-height:1}
.kpi .label{font-weight:700;margin-top:6px}
.kpi .sub{font-size:12px;color:var(--muted);margin-top:2px}

.spotlight{padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.spot-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:980px){.spot-grid{grid-template-columns: 1.2fr 1fr}}
.spot-card{border:1px solid var(--line);border-radius:16px;padding:16px;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.05)}
.spot-img{aspect-ratio:16/10;background:#f5f5f7;border:1px dashed #ddd;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#999}
.spot-meta{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0}
.meta-badge{background:#111;color:#fff;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800}
.meta-badge.red{background:var(--red)}

.finisher{padding:32px 0;background:linear-gradient(180deg,#FFF7F7,#FFFFFF);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fin-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:980px){.fin-grid{grid-template-columns:1fr 1fr}}
.fin-img{aspect-ratio:4/3;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 22px rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;color:#bbb;font-weight:800}
.fin-list{margin:6px 0 0}.fin-list li{list-style:none;padding-left:24px;position:relative}
.fin-list li:before{content:"✔";position:absolute;left:0;color:#16A34A}

.footer{border-top:1px solid var(--line);margin-top:20px}
.footer .wrap{padding:18px 0}

/* v14: scroll animations + header shadow */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .45s ease, transform .45s ease}
.reveal.on{opacity:1;transform:none}
.reveal.del-1{transition-delay:.06s}.reveal.del-2{transition-delay:.12s}.reveal.del-3{transition-delay:.18s}

.header.scrolled{box-shadow:0 10px 24px rgba(0,0,0,.06)}
.brand-img img{height:38px;width:auto}
@media(min-width:980px){.brand-img img{height:40px}}

/* --- v14 minimal patch: logo right + solid menu background --- */

/* Push brand/logo to the right without changing HTML */
.nav { display:flex; align-items:center; gap:10px; height:64px; position:relative; }
.brand-img { margin-left:auto; } /* moves logo to far right */

/* Ensure the mobile menu has a solid white panel and an opaque backdrop */
.drawer .panel {
  background: #fff !important;
  box-shadow: 8px 0 24px rgba(0,0,0,.12);
}
.drawer .backdrop {
  background: rgba(0,0,0,.55) !important;
}

/* Stronger menu background fix */
.drawer {
  /* backdrop-filter removed */
}
.drawer .panel {
  background-color: #fff !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.2);
  border-right: 1px solid rgba(0,0,0,0.05);
}
.drawer .backdrop {
  background: rgba(0,0,0,0.65) !important;
  /* backdrop-filter removed */
}

/* --- Force solid background for mobile menu (ultra-specific) --- */
#drawer, .drawer{z-index:1000}
#drawer .panel, .drawer .panel, .drawer > nav, .drawer > .menu, .drawer > .menu-panel,
.mobile-menu, .mobile-nav, .nav-menu, .nav .menu-sheet, .menu-sheet {
  background:#ffffff !important;
  position:fixed !important;
  top:0; bottom:0; left:0;
  max-width:420px; width:min(88%,420px);
  overflow:auto;
  box-shadow:8px 0 24px rgba(0,0,0,.18);
}
#drawer .backdrop, .drawer .backdrop, .menu-backdrop, .mobile-nav-backdrop {
  position:fixed !important;
  inset:0 !important;
  background:rgba(0,0,0,.65) !important;
}
/* If links list is the panel itself */
.drawer ul, .mobile-menu ul, .nav-menu ul {
  background:#ffffff !important;
  padding:10px 16px;
  margin:0;
  list-style:none;
}
/* Ensure links are legible and not purple */
.drawer a, .mobile-menu a, .nav-menu a { color:#0B0B0B !important; }

/* --- Overlay stacking fix --- */
.drawer, #drawer { position: fixed !important; inset: 0 !important; z-index: 99999 !important; }
.drawer .panel, #drawer .panel { z-index: 100000 !important; }
.drawer .backdrop, #drawer .backdrop { z-index: 99998 !important; }

/* --- Clickability + no-blur fix --- */
/* Drawer should not block clicks when closed */
.drawer, #drawer { position: fixed !important; inset: 0 !important; z-index: 99999 !important;
  pointer-events: none; /* don't intercept when closed */
}
.drawer .backdrop, #drawer .backdrop {
  position: fixed !important; inset: 0 !important;
  background: rgba(0,0,0,.65) !important;
  opacity: 0; transition: opacity .2s ease;
  /* remove blurry look */
  /* backdrop-filter removed */
}
.drawer .panel, #drawer .panel {
  position: fixed !important; top:0; bottom:0; left:0;
  max-width: 420px; width: min(88%,420px);
  background: #fff !important; transform: translateX(-102%);
  transition: transform .22s ease; box-shadow: 8px 0 24px rgba(0,0,0,.18);
}
/* When open */
.drawer.on, #drawer.on { pointer-events: auto; }
.drawer.on .backdrop, #drawer.on .backdrop { opacity: 1; }
.drawer.on .panel, #drawer.on .panel { transform: none; }


/* --- Safari stacking/blur fix --- */
/* Keep header subtle normally */
.header{ z-index: 100; }
/* When menu is open, turn off header blur and drop its stacking so drawer sits on top */
body.menu-open .header{
  /* backdrop-filter removed */
  -webkit-/* backdrop-filter removed */
  background: #ffffff !important;
  z-index: 1 !important;
}

/* Ensure drawer always paints above everything */
#drawer, .drawer{
  position: fixed !important;
  inset: 0 !important;
  z-index: 100000 !important;
}
#drawer .panel, .drawer .panel{ z-index: 100001 !important; }
#drawer .backdrop, .drawer .backdrop{ z-index: 100000 !important; }


/* === Fail-safe full-screen mobile menu (independent of header/backdrop filters) === */
#tb-sheet {
  position: fixed !important;
  inset: 0 !important;
  background: #ffffff !important;
  z-index: 2147483000 !important; /* max-ish */
  display: none;
}
#tb-sheet.on { display: block; }
#tb-sheet .tb-backdrop {
  position: absolute; inset:0; background: rgba(0,0,0,.55);
  opacity: 0; transition: opacity .2s ease;
}
#tb-sheet.on .tb-backdrop { opacity: 1; }
#tb-sheet .tb-panel {
  position: absolute; top:0; bottom:0; left:0;
  width: min(88%, 420px); max-width: 420px;
  background: #fff; transform: translateX(-102%);
  transition: transform .22s ease;
  padding: 20px 16px; box-shadow: 10px 0 28px rgba(0,0,0,.18);
}
#tb-sheet.on .tb-panel { transform: none; }
#tb-sheet nav a {
  display:block; padding:14px 12px; margin:2px 0;
  color:#0B0B0B; text-decoration:none; border-radius:10px;
}
#tb-sheet nav a:active { background:#f4f4f4; }
.tb-menu-open { overflow:hidden !important; }
.menu-btn { position: relative; z-index: 2147483600; } /* ensure button stays clickable */


/* === Mobile header clarity: remove blur and sharpen logo === */
@media (max-width: 768px){
  .header{
    background: rgba(255,255,255,0.98) !important;
    /* backdrop-filter removed */
    -webkit-/* backdrop-filter removed */
    filter: none !important;
  }
}

/* Ensure logo renders crisp and is not affected by any transforms */
.brand-img, .brand-img img, .brand img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  filter: none !important;
}

/* --- Emergency unblur fallback --- */
.reveal { opacity: 1 !important; transform: none !important; /* no blur */ }


/* === Comfortable page gutters (Apple-like edge spacing) === */
:root{
  --page-gutter: clamp(16px, 4.5vw, 40px);  /* small on phones, wider on desktops */
  --content-max: 1200px;                    /* keep line-length readable */
}

/* Apply to common wrappers without changing your content */
header .inner,
.topbar .inner,
.hero .inner,
main,
.section-inner,
.section .inner,
.container,
.content,
.grid-wrap,
footer .inner{
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
  box-sizing: border-box;
}

/* Keep the stat band and CTA rows aligned with the same gutters */
.band, .cta-row{
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
  box-sizing: border-box;
}

/* Make headings breathe a touch more on small screens */
@media (max-width: 480px){
  h1{ letter-spacing: -0.01em; line-height: 1.15; }
  h2{ line-height: 1.2; }
}

/* Ensure the injected sheet menu still spans edge-to-edge */
#tb-sheet{ padding: 0 !important; }
#tb-sheet .tb-panel{ padding-left: 16px; padding-right: 16px; }


/* Join the movement block */
.join-block { margin-top: 28px; }
.join-block .cta-row { display:flex; gap:12px; flex-wrap:wrap; margin: 12px 0 4px; }
.join-block .mini { color:#555; font-size:.98rem; margin:.25rem 0; }
.join-block h2 { margin-top: 8px; }



/* ===== Our Story Visual Layout Enhancements ===== */
:root { --tb-red:#E53935; --ink:#111; --muted:#666; --soft:#f9f9f9; --card:#fff; --ring:rgba(0,0,0,.06); }

.hero-visual{ background:linear-gradient(180deg,#fff 0%, #fff 60%, #fde2e1 100%); }
.hero-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.hero-copy{ max-width:720px; }
.hero-art{ flex:0 0 140px; opacity:.18; }
.hero-paw{ width:140px; height:140px; fill:var(--tb-red); }

/* Grid */
.grid{ display:grid; gap:24px; }
.grid.two{ grid-template-columns:1fr 1fr; }
.grid.three{ grid-template-columns:1fr; }
@media (min-width: 880px){
  .story-intro.grid{ grid-template-columns: 1.2fr .8fr; align-items:start; }
  .grid.three{ grid-template-columns: repeat(3, 1fr); }
}

/* Cards and visuals */
.card{ background:var(--card); border-radius:16px; box-shadow:0 1px 1px var(--ring), 0 8px 24px var(--ring); padding:20px; }
.story-card .card-head{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.year-chip{ display:inline-block; background:var(--tb-red); color:#fff; font-weight:700; letter-spacing:.02em; padding:6px 10px; border-radius:999px; font-size:.9rem; }
.card-grid{ grid-template-columns:1fr; }
@media (min-width: 880px){ .card-grid{ grid-template-columns:1fr 1fr; gap:24px; } }

.beat header{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.beat h3{ margin:0; font-size:1.05rem; }

.values .value .icon{ font-size:28px; line-height:1; margin-bottom:8px; }

/* Pull quote */
.pull{ font-size:1.2rem; line-height:1.45; border-left:4px solid var(--tb-red); padding:12px 0 12px 14px; margin:16px 0 4px; color:#333; }

/* CTA panel */
.cta-panel{ margin-top:8px; }
.cta-panel-inner{ background:#111; color:#fff; border-radius:16px; padding:24px; background-image: radial-gradient(1200px 400px at 70% -20%, rgba(229,57,53,.25), transparent); }
.cta-panel .btn-primary{ background:#fff; color:#111; }
.cta-panel .btn-outline{ border-color:#fff; color:#fff; }
.cta-panel .mini{ color:#f1f1f1; opacity:.9; }
.cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; }

/* Caption and placeholder */
.media.framed{ display:flex; flex-direction:column; gap:8px; }
.ph-img{ background:linear-gradient(135deg,#fafafa,#f2f2f2); border:1px solid #eee; border-radius:14px; height:220px; display:flex; align-items:center; justify-content:center; color:#999; font-size:.95rem; }
.caption{ color:var(--muted); font-size:.9rem; }

/* Paw divider */
.paw-divider{ display:flex; justify-content:center; padding:8px 0 0; opacity:.7; }
.paw-divider svg{ width:88px; height:24px; fill:var(--tb-red); }

/* Founder quote big */
.founder-quote.big{ font-size:1.25rem; border-left:6px solid var(--tb-red); padding-left:16px; }
.founder-quote.big span{ display:block; margin-top:10px; color:var(--muted); }

/* Typographic niceties */
.drop::first-letter{ font-size:2.4rem; line-height:1; font-weight:700; color:var(--tb-red); margin-right:4px; float:left; }
.story-page p{ max-width:65ch; }

/* Reveal (no blur) */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .45s ease, transform .45s ease; }
.reveal.show{ opacity:1; transform:translateY(0); }