/* catadoption_pune — shared stylesheet (v3 design system)
   Palette LOCKED July 4 (brunch-exact) · Martel headings + Hind body
   Rule: colour blocks punctuate; text-dense content lives in quiet white zones. */

:root{
  --peri:#8c78f4;
  --peri-glass:rgba(140,120,244,0.88);
  --yellow:#f0c840;
  --sage:#74ac84;
  --sky:#94d0e4;
  --butter:#f8f8a8;
  --ink:#141118;
  --white:#ffffff;
  --font-head:'Martel',serif;
  --font-body:'Hind',sans-serif;
  --head-track:-0.01em;
  --line:rgba(20,17,24,0.12);
  --ease:cubic-bezier(0.16,1,0.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body);color:var(--ink);background:var(--white);line-height:1.65;overflow-x:hidden;}
h1,h2,h3{font-family:var(--font-head);letter-spacing:var(--head-track);line-height:1.18;font-weight:700;}
img{display:block;max-width:100%;}
a{color:inherit;}

/* ---------- nav ---------- */
.nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 6vw;flex-wrap:wrap;}
.nav--over{position:absolute;top:0;left:0;right:0;z-index:20;}
.nav--solid{position:static;background:var(--white);border-bottom:1px solid var(--line);}
.brand{display:flex;align-items:center;gap:0.6rem;font-family:var(--font-head);font-weight:800;font-size:1.02rem;text-decoration:none;}
.brand img{width:34px;height:34px;border-radius:50%;}
.nav nav{display:flex;align-items:center;gap:1.3rem;font-weight:600;font-size:0.9rem;flex-wrap:wrap;}
.nav nav a{text-decoration:none;padding:0.2rem 0;min-height:auto;}
.nav nav a:hover{text-decoration:underline;text-underline-offset:4px;}
.nav .pill{background:var(--butter);border-radius:40px;padding:0.4rem 1rem;min-height:36px;display:inline-flex;align-items:center;}
.nav .pill:hover{text-decoration:none;transform:translateY(-1px);}

/* ---------- scenes: sticky photo layers (index) ---------- */
.scene{position:relative;}
.pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;}
.pin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:center center;will-change:transform;}

.pin--hero{background:var(--sage);}
.pin--hero img{left:auto;right:0;width:62%;}
.hero-copy{position:relative;z-index:2;align-self:center;padding:0 6vw;max-width:46%;}
.eyebrow{font-size:0.78rem;font-weight:600;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink);opacity:0.75;margin-bottom:1rem;}
.hero-copy h1{font-size:clamp(2.4rem,5.6vw,4.6rem);color:var(--white);margin-bottom:1rem;text-shadow:0 1px 24px rgba(20,17,24,0.12);}
.hero-copy p{color:var(--ink);font-size:clamp(1rem,1.4vw,1.15rem);max-width:34ch;}

.pin--yellow{background:var(--yellow);}
.pin--yellow img{left:auto;right:0;width:70%;}
.pin--sky{background:var(--sky);}
.pin--sky img{width:78%;left:auto;right:0;}

/* content that slides over the pinned photo */
.over{position:relative;z-index:2;}
/* runway spacers: positive-only scroll pacing (the pinned photo shows through).
   Tune inline heights on real devices — NEVER negative vh margins (mobile collision bug, July 4). */
.runway{pointer-events:none;}
.band{padding:clamp(3rem,8vh,6rem) 6vw;}
.band--peri{background:var(--peri);color:var(--ink);}
.band--peri .band-inner{max-width:820px;margin:0 auto;text-align:center;}
.band h2{font-size:clamp(1.7rem,3.4vw,2.8rem);margin-bottom:1rem;}
.band p{font-size:clamp(1rem,1.3vw,1.15rem);max-width:60ch;margin:0 auto;}

/* translucent panel crossing the photo */
.glass{background:var(--peri-glass);color:var(--ink);width:min(560px,88%);margin-left:6vw;padding:clamp(2rem,5vh,3.5rem);}
.glass h2{font-size:clamp(1.6rem,3vw,2.4rem);margin-bottom:2rem;}
.step{padding:1.1rem 0;border-bottom:1px solid rgba(20,17,24,0.18);}
.step:last-child{border-bottom:none;}
.step h3{font-size:clamp(1.15rem,1.9vw,1.5rem);margin-bottom:0.2rem;}
.step p{font-size:0.95rem;opacity:0.85;max-width:none;margin:0;}

/* white breathing strip */
.strip{background:var(--white);padding:clamp(4rem,12vh,7rem) 6vw;text-align:center;}
.strip h2{font-size:clamp(1.6rem,3.6vw,3rem);max-width:22ch;margin:0 auto;}
.strip h2 em{font-style:normal;color:var(--peri);}

/* CTA band */
.cta{background:var(--peri);text-align:center;padding:clamp(4rem,12vh,7rem) 6vw;}
.cta h2{font-size:clamp(1.7rem,3.4vw,2.8rem);color:var(--ink);max-width:24ch;margin:0 auto 1rem;}
.cta .promise{max-width:44ch;margin:0 auto 2rem;font-size:1.05rem;}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0.85rem 2.4rem;border-radius:60px;background:var(--butter);color:var(--ink);font-family:var(--font-body);font-weight:600;font-size:1rem;letter-spacing:0.06em;text-transform:uppercase;text-decoration:none;transition:transform 0.25s var(--ease),box-shadow 0.25s var(--ease);}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(20,17,24,0.22);}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px;}
.cta .alt{display:block;margin-top:1.4rem;font-size:0.9rem;}
.cta .alt a{color:var(--ink);}

/* ---------- interior pages ---------- */
.page-hero{padding:clamp(2.6rem,7vh,4.5rem) 6vw;}
.page-hero--peri{background:var(--peri);}
.page-hero--sage{background:var(--sage);}
.page-hero--sky{background:var(--sky);}
.page-hero--butter{background:var(--butter);}
.page-hero .crumb{font-size:0.78rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;opacity:0.7;margin-bottom:0.7rem;}
.page-hero .crumb a{text-decoration:none;}
.page-hero .crumb a:hover{text-decoration:underline;}
.page-hero h1{font-size:clamp(2rem,4.6vw,3.4rem);}
.page-hero .sub{max-width:58ch;margin-top:0.6rem;font-size:clamp(1rem,1.3vw,1.15rem);}
.badge{display:inline-block;background:rgba(255,255,255,0.5);border-radius:30px;padding:0.3rem 0.9rem;font-size:0.8rem;font-weight:600;margin-top:1rem;}

.prose{max-width:740px;margin:0 auto;padding:clamp(2.5rem,6vh,4rem) 6vw 4.5rem;}
.prose h2{font-size:clamp(1.35rem,2.6vw,1.9rem);margin:2.2rem 0 0.8rem;}
.prose h2:first-child{margin-top:0;}
.prose p{margin-bottom:1rem;}
.prose .lead{font-size:1.12rem;}
.prose a{text-decoration-color:var(--peri);text-decoration-thickness:2px;text-underline-offset:3px;}
.prose .btn{margin-top:1rem;}

/* accordion (learn) */
.acc{border:1px solid var(--line);border-radius:14px;margin-bottom:0.9rem;background:var(--white);}
.acc summary{cursor:pointer;font-family:var(--font-head);font-weight:700;font-size:1.05rem;padding:1rem 1.2rem;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:52px;}
.acc summary::-webkit-details-marker{display:none;}
.acc summary::after{content:"+";font-family:var(--font-body);font-weight:600;font-size:1.3rem;color:var(--peri);flex-shrink:0;}
.acc[open] summary::after{content:"–";}
.acc .acc-body{padding:0 1.2rem 1.2rem;}

/* resource cards */
.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem;max-width:1020px;margin:0 auto;padding:clamp(2.5rem,6vh,4rem) 6vw 4.5rem;}
.res-card{border:1px solid var(--line);border-radius:16px;padding:1.4rem;background:var(--white);}
.res-card--warn{background:var(--butter);border-color:transparent;}
.res-card--form{background:var(--sage);border-color:transparent;}
.res-card h2{font-size:1.12rem;margin-bottom:0.7rem;}
.res-card ul{list-style:none;}
.res-card li{padding:0.3rem 0;border-bottom:1px dashed var(--line);font-size:0.95rem;}
.res-card li:last-child{border-bottom:none;}
.res-card p{font-size:0.95rem;margin-bottom:0.6rem;}
.res-card a{text-decoration-color:var(--peri);text-decoration-thickness:2px;text-underline-offset:3px;}

/* article template */
.art-meta{font-size:0.85rem;opacity:0.7;margin-bottom:0.7rem;}
.disclosure{background:var(--butter);border-radius:14px;padding:1rem 1.2rem;font-size:0.9rem;margin:1.5rem 0;}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(255,255,255,0.75);padding:2.6rem 6vw;text-align:center;font-size:0.85rem;}
footer strong{font-family:var(--font-head);color:var(--white);font-size:1rem;display:block;margin-bottom:0.4rem;}
.foot-links{display:flex;justify-content:center;flex-wrap:wrap;gap:0.4rem 1.3rem;margin:0.9rem 0 0.6rem;}
.foot-links a{color:rgba(255,255,255,0.85);text-underline-offset:3px;}
.trust{font-size:0.8rem;opacity:0.65;margin-top:0.7rem;}

/* fade-rise reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.7s var(--ease),transform 0.7s var(--ease);}
.reveal.in{opacity:1;transform:none;}

/* ---------- mobile ---------- */
@media(max-width:768px){
  .pin{height:72vh;height:72svh;}
  .pin--hero img,.pin--yellow img,.pin--sky img{width:100%;opacity:0.92;}
  .hero-copy{max-width:100%;padding:0 7vw;}
  .hero-copy h1{color:var(--white);text-shadow:0 2px 20px rgba(20,17,24,0.45);}
  .hero-copy p{color:var(--white);text-shadow:0 1px 12px rgba(20,17,24,0.45);}
  .glass{width:100%;margin:0;}
  .nav{padding:0.8rem 5vw;}
  .nav nav{gap:0.9rem;font-size:0.85rem;}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
}