/* ============================================================
   Paw & Page — storefront design system
   Warm editorial. Heartfelt for memorial, cheerful for puppy.
   ============================================================ */
:root{
  --paper:#fbf8f3; --cream:#fffdf9; --ink:#322f2a; --muted:#7c756b;
  --sage:#7c9885; --sage-deep:#4f6b58; --sage-soft:#eaf0ea;
  --clay:#c2724e; --clay-deep:#a3573a; --clay-soft:#f7e9e1;
  --gold:#c89a4d; --gold-soft:#f5ecd8;
  --slate:#8497a6; --slate-soft:#e9eef2;
  --line:#ece4d7; --line-strong:#ddd3c2;
  --shadow:0 10px 30px -12px rgba(70,55,40,.18);
  --shadow-lg:0 24px 60px -20px rgba(70,55,40,.30);
  --radius:18px; --maxw:1140px;
  --display:'Fraunces',Georgia,serif;
  --body:'Nunito Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; line-height:1.12; letter-spacing:-.012em; margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
.eyebrow{font-family:var(--body); font-weight:800; font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--clay)}
.section{padding:84px 0}
.section--tight{padding:56px 0}
.center{text-align:center}
.lede{font-size:1.18rem; color:var(--muted); max-width:60ch}
.center .lede{margin-left:auto; margin-right:auto}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--body); font-weight:800;
  font-size:15px; padding:13px 24px; border-radius:999px; border:1.5px solid transparent;
  cursor:pointer; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, background .18s; white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn--primary{background:var(--clay); color:#fff; box-shadow:0 8px 20px -8px rgba(162,87,58,.7)}
.btn--primary:hover{background:var(--clay-deep); transform:translateY(-2px); box-shadow:0 14px 26px -10px rgba(162,87,58,.8)}
.btn--sage{background:var(--sage-deep); color:#fff; box-shadow:0 8px 20px -10px rgba(79,107,88,.7)}
.btn--sage:hover{transform:translateY(-2px); background:#435c4b}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--ink); transform:translateY(-2px)}
.btn--block{width:100%; justify-content:center}
.btn--lg{padding:16px 30px; font-size:16px}

/* header */
.hdr{position:sticky; top:0; z-index:40; background:rgba(251,248,243,.82); backdrop-filter:blur(12px); border-bottom:1px solid var(--line)}
.hdr__in{display:flex; align-items:center; gap:24px; height:72px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; font-family:var(--display); font-weight:600; font-size:1.32rem; color:var(--ink); letter-spacing:-.02em}
.brand__mark{width:38px; height:38px; flex:none}
.nav{display:flex; gap:26px; margin-left:8px}
.nav a{text-decoration:none; color:var(--ink); font-weight:700; font-size:15px; opacity:.82; transition:opacity .15s}
.nav a:hover{opacity:1; color:var(--clay-deep)}
.hdr__cta{margin-left:auto; display:flex; align-items:center; gap:14px}
.burger{display:none; background:none; border:0; cursor:pointer; padding:8px}
.burger span{display:block; width:24px; height:2.4px; background:var(--ink); border-radius:2px; margin:5px 0; transition:.25s}

/* hero */
.hero{position:relative; overflow:hidden; padding:64px 0 40px}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center}
.hero h1{font-size:clamp(2.4rem,5.4vw,3.9rem); margin:18px 0 0}
.hero h1 em{font-style:italic; color:var(--clay)}
.hero p.lede{margin:20px 0 28px}
.hero__cta{display:flex; gap:14px; flex-wrap:wrap}
.hero__trust{display:flex; gap:22px; margin-top:26px; flex-wrap:wrap; color:var(--muted); font-size:14px; font-weight:700}
.hero__trust span{display:inline-flex; align-items:center; gap:8px}
.hero__trust svg{width:17px;height:17px;color:var(--sage-deep)}
.hero__art{position:relative; height:420px}
.float-card{position:absolute; width:208px; border-radius:14px; box-shadow:var(--shadow-lg); animation:float 7s ease-in-out infinite}
.float-card:nth-child(1){left:6%; top:10%; animation-delay:0s; transform:rotate(-5deg)}
.float-card:nth-child(2){right:4%; top:0; animation-delay:1.4s; transform:rotate(4deg); width:196px}
.float-card:nth-child(3){left:24%; bottom:0; animation-delay:.7s; transform:rotate(2deg); width:200px}
.float-card:nth-child(4){right:14%; bottom:6%; animation-delay:2.1s; transform:rotate(-3deg); width:172px}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--r,0))}50%{transform:translateY(-14px) rotate(var(--r,0))}}
.hero__art .float-card:nth-child(1){--r:-5deg}
.hero__art .float-card:nth-child(2){--r:4deg}
.hero__art .float-card:nth-child(3){--r:2deg}
.hero__art .float-card:nth-child(4){--r:-3deg}
.hero__blob{position:absolute; width:460px; height:460px; background:radial-gradient(circle,var(--sage-soft),transparent 68%); right:-60px; top:-40px; z-index:-1}

/* value strip */
.values{background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.values__grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px}
.value{display:flex; gap:13px; align-items:flex-start}
.value__ic{width:42px;height:42px;border-radius:12px;background:var(--sage-soft);display:grid;place-items:center;flex:none;color:var(--sage-deep)}
.value__ic svg{width:22px;height:22px}
.value h4{font-size:1.02rem; margin-bottom:2px}
.value p{margin:0; font-size:14px; color:var(--muted)}

/* collections */
.colls{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:40px}
.coll{position:relative; border-radius:var(--radius); overflow:hidden; padding:38px; min-height:260px; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; text-decoration:none; box-shadow:var(--shadow); transition:transform .25s}
.coll:hover{transform:translateY(-4px)}
.coll--memorial{background:linear-gradient(150deg,#5b6f7e,#42525d)}
.coll--puppy{background:linear-gradient(150deg,#c2724e,#a3573a)}
.coll__art{position:absolute; inset:0; opacity:.22}
.coll .eyebrow{color:rgba(255,255,255,.85)}
.coll h3{font-size:1.7rem; margin:8px 0 6px; color:#fff}
.coll p{margin:0 0 4px; color:rgba(255,255,255,.9); font-size:15px}
.coll__link{margin-top:14px; font-weight:800; font-size:14px; display:inline-flex; gap:7px; align-items:center}

/* product grid */
.tabs{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:30px 0 36px}
.tab{font-family:var(--body); font-weight:800; font-size:14px; padding:9px 18px; border-radius:999px; border:1.5px solid var(--line-strong); background:transparent; color:var(--ink); cursor:pointer; transition:.18s}
.tab:hover{border-color:var(--ink)}
.tab.is-active{background:var(--ink); color:#fff; border-color:var(--ink)}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.card{background:var(--cream); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .22s, box-shadow .22s; cursor:pointer}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg)}
.card__media{position:relative; aspect-ratio:4/3; background:var(--sage-soft); overflow:hidden}
.card__media svg{width:100%;height:100%}
.card__media img{width:100%;height:100%;object-fit:cover;display:block}
.card__badge{position:absolute; top:12px; left:12px; background:var(--ink); color:#fff; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:5px 11px; border-radius:999px}
.card__badge--gold{background:var(--gold)}
.card__badge--clay{background:var(--clay)}
.card__body{padding:18px 18px 20px; display:flex; flex-direction:column; flex:1}
.card__coll{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:5px}
.card__title{font-size:1.16rem; margin-bottom:7px}
.card__blurb{font-size:14px; color:var(--muted); margin:0 0 16px; flex:1}
.card__foot{display:flex; align-items:center; justify-content:space-between}
.price{font-family:var(--display); font-weight:600; font-size:1.3rem}
.price s{color:var(--muted); font-size:.95rem; font-weight:400; margin-right:7px; font-family:var(--body)}
.card__cta{font-weight:800; font-size:13.5px; color:var(--clay-deep); display:inline-flex; align-items:center; gap:6px}

/* how it works */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:40px}
.step{text-align:center; padding:0 10px}
.step__n{width:54px;height:54px;border-radius:50%;background:var(--gold-soft);color:var(--clay-deep);font-family:var(--display);font-weight:600;font-size:1.4rem;display:grid;place-items:center;margin:0 auto 16px}
.step h4{font-size:1.18rem; margin-bottom:8px}
.step p{margin:0; color:var(--muted); font-size:15px}

/* lead magnet / email */
.lead{background:linear-gradient(150deg,var(--sage-deep),#3f5749); color:#fff; border-radius:24px; padding:54px; text-align:center; position:relative; overflow:hidden}
.lead h2{font-size:clamp(1.7rem,3.5vw,2.4rem); color:#fff}
.lead p{color:rgba(255,255,255,.88); max-width:50ch; margin:14px auto 26px}
.lead__form{display:flex; gap:10px; max-width:440px; margin:0 auto; flex-wrap:wrap}
.lead__form input{flex:1; min-width:200px; padding:15px 18px; border-radius:999px; border:0; font-family:var(--body); font-size:15px}
.lead__ok{margin-top:16px; font-weight:800; color:#dff3e6}
.lead__paw{position:absolute; opacity:.12; color:#fff}

/* FAQ */
.faq{max-width:760px; margin:34px auto 0}
.q{border-bottom:1px solid var(--line-strong)}
.q__btn{width:100%; text-align:left; background:none; border:0; padding:22px 4px; font-family:var(--display); font-weight:600; font-size:1.16rem; color:var(--ink); cursor:pointer; display:flex; justify-content:space-between; gap:16px; align-items:center}
.q__btn svg{width:20px;height:20px;flex:none;transition:transform .25s;color:var(--clay)}
.q.open .q__btn svg{transform:rotate(45deg)}
.q__a{max-height:0; overflow:hidden; transition:max-height .3s ease}
.q__a p{margin:0; padding:0 4px 22px; color:var(--muted)}

/* footer */
.ft{background:#2c2924; color:#cfc7ba; padding:60px 0 34px; margin-top:20px}
.ft__grid{display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px}
.ft__brand .brand{color:#fff}
.ft p{font-size:14px; line-height:1.7}
.ft h5{font-family:var(--body); font-weight:800; font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:#8c8475; margin:0 0 14px}
.ft a{display:block; text-decoration:none; color:#cfc7ba; font-size:14.5px; padding:5px 0; opacity:.85}
.ft a:hover{opacity:1; color:#fff}
.ft__bar{border-top:1px solid #443f38; margin-top:42px; padding-top:22px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; color:#8c8475}
.ft__secure{display:inline-flex; align-items:center; gap:8px}
.ft__secure svg{width:16px;height:16px}

/* modal */
.modal{position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center; padding:22px}
.modal.open{display:flex}
.modal__bg{position:absolute; inset:0; background:rgba(44,38,30,.55); backdrop-filter:blur(3px)}
.modal__panel{position:relative; background:var(--cream); border-radius:22px; max-width:860px; width:100%; max-height:90vh; overflow:auto; box-shadow:var(--shadow-lg); display:grid; grid-template-columns:1fr 1fr}
.modal__media{background:var(--sage-soft)}
.modal__media svg{width:100%;height:100%;min-height:320px}
.modal__media img{width:100%;height:100%;object-fit:cover;min-height:320px;display:block}
.modal__body{padding:34px}
.modal__close{position:absolute; top:14px; right:14px; z-index:2; width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.9);cursor:pointer;font-size:20px;line-height:1;box-shadow:var(--shadow)}
.modal__coll{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.modal__body h3{font-size:1.7rem; margin:6px 0 10px}
.modal__price{font-family:var(--display);font-weight:600;font-size:1.7rem;margin:6px 0 18px}
.modal__price s{color:var(--muted);font-size:1.05rem;font-weight:400;margin-right:9px;font-family:var(--body)}
.includes{list-style:none;padding:0;margin:0 0 24px}
.includes li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;font-size:15px}
.includes svg{width:18px;height:18px;color:var(--sage-deep);flex:none;margin-top:3px}
.modal__note{font-size:13px;color:var(--muted);margin-top:14px;display:flex;gap:8px;align-items:center}
.modal__note svg{width:15px;height:15px;flex:none}

/* toast */
.toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:13px 22px; border-radius:999px; font-weight:700; font-size:14px; opacity:0; pointer-events:none; transition:.3s; z-index:90; box-shadow:var(--shadow-lg)}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* reveal */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* responsive */
@media (max-width:900px){
  .hero__grid{grid-template-columns:1fr; gap:10px}
  .hero__art{height:340px; order:-1; margin-bottom:10px}
  .values__grid{grid-template-columns:1fr 1fr; gap:22px}
  .grid{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr; gap:34px}
  .ft__grid{grid-template-columns:1fr 1fr}
  .modal__panel{grid-template-columns:1fr}
  .modal__media{min-height:220px}
}
@media (max-width:640px){
  body{font-size:16px}
  .section{padding:60px 0}
  .nav{display:none}
  .burger{display:block}
  .hdr__cta .btn--ghost{display:none}
  .colls{grid-template-columns:1fr}
  .values__grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .lead{padding:38px 24px}
  .ft__grid{grid-template-columns:1fr}
  .hero__art{height:300px}
  .float-card{width:160px!important}
  /* mobile nav drawer */
  .nav.open{display:flex; position:absolute; top:72px; left:0; right:0; flex-direction:column; background:var(--cream); padding:18px 24px; gap:6px; border-bottom:1px solid var(--line); box-shadow:var(--shadow)}
  .nav.open a{padding:10px 0; font-size:17px}
}