/* Pupbles website — shared styles (used by index.html and the Grown-ups /
   Partnership / Contact pages). */
:root {
  --sky:#bfe3ff; --lav:#cdb9f0; --pink:#ffc7de; --mint:#bdeecd;
  --cream:#fff8ea; --cream2:#fffcf4; --ink:#5b4a7a; --ink-soft:#7a6a9e;
  --accent:#ffb347; --accent-deep:#f59b2e; --accent-ink:#7a4d12;
  --shadow:0 14px 40px rgba(107,91,143,.18);
  --ring:0 0 0 4px rgba(255,179,71,.30);
  --font-display:"Fredoka","Trebuchet MS",sans-serif;
  --font-body:"Nunito","Segoe UI",sans-serif;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }
body {
  margin:0; color:var(--ink); font-family:var(--font-body); line-height:1.65;
  background:
    radial-gradient(1200px 520px at 80% -8%, #d7ecff 0%, rgba(215,236,255,0) 60%),
    radial-gradient(1000px 480px at 5% 4%, #f3e4fb 0%, rgba(243,228,251,0) 55%),
    linear-gradient(180deg, #eaf5ff 0%, var(--cream) 26%, var(--cream) 100%);
  min-height:100vh; overflow-x:hidden;
}
h1,h2,h3,.wordmark,.btn,.tab,.eyebrow { font-family:var(--font-display); }
a { color:var(--accent-deep); }

/* floating bubble ambience */
.bubbles { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.bubbles b {
  position:absolute; bottom:-8vh; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.98) 0%, rgba(214,236,255,.55) 46%, rgba(205,185,240,.34) 78%, rgba(205,185,240,.16) 100%);
  border:1.5px solid rgba(255,255,255,.9);
  box-shadow:inset 7px -7px 15px rgba(150,195,240,.4), inset -5px 5px 12px rgba(255,255,255,.85), 0 6px 16px rgba(107,91,143,.12);
  animation:rise linear infinite;
}
.bubbles b::after { content:""; position:absolute; top:16%; left:20%; width:26%; height:26%;
  border-radius:50%; background:rgba(255,255,255,.9); filter:blur(1px); }
@keyframes rise { to { transform:translateY(-118vh) translateX(24px); opacity:0; } }

.wrap { max-width:1080px; margin:0 auto; padding:0 clamp(16px,4vw,28px); position:relative; z-index:1; }
.narrow { max-width:760px; }

/* header */
header { position:sticky; top:0; z-index:20;
  background:rgba(255,252,244,.82); backdrop-filter:blur(10px); border-bottom:2px solid #fff; }
.bar { display:flex; align-items:center; gap:16px; padding:12px 0; }
.wordmark { display:flex; align-items:center; gap:8px; font-size:clamp(22px,3vw,28px);
  font-weight:700; color:var(--ink); text-decoration:none; letter-spacing:.3px; }
.wordmark span { font-size:1.3em; }
nav.top { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
nav.top a { font-family:var(--font-display); font-weight:600; color:var(--ink-soft);
  text-decoration:none; padding:8px 16px; border-radius:999px; font-size:15px; transition:.15s; }
nav.top a:hover { color:var(--ink); background:rgba(205,185,240,.22); }
nav.top a[aria-current="page"] { color:var(--accent-ink); background:#fff3d9; }

.btn { display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:none;
  font-family:var(--font-display); font-weight:700; font-size:16px; padding:12px 26px; border-radius:999px; text-decoration:none;
  background:linear-gradient(180deg,#ffd98a,var(--accent)); color:var(--accent-ink);
  border:3px solid #fff; box-shadow:0 8px 20px rgba(255,179,71,.42); transition:transform .12s, box-shadow .12s; }
.btn:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 12px 26px rgba(255,179,71,.5); }
.btn:active { transform:scale(.97); }
.btn.ghost { background:var(--cream2); color:var(--ink); box-shadow:var(--shadow); border:3px solid #fff; }
.btn.small { padding:9px 18px; font-size:14px; }
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:999px; }

/* hero (home) */
.hero { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(20px,4vw,48px);
  align-items:center; padding:clamp(28px,6vh,64px) 0 clamp(20px,4vh,40px); }
.eyebrow { display:inline-block; font-weight:600; color:var(--accent-deep);
  background:#fff3d9; padding:5px 16px; border-radius:999px; font-size:14px; letter-spacing:.4px; }
.hero h1 { font-size:clamp(38px,6.4vw,68px); line-height:1.02; margin:14px 0 10px; color:var(--ink); text-shadow:0 2px 0 #fff; }
/* "Pupbles" wordmark — candy-pastel per-letter colors matching the garden banner,
   each letter with a white outline (like a puffy sticker). */
.hero h1 em { font-style:normal; filter:drop-shadow(0 3px 2px rgba(107,91,143,.18)); }
.hero h1 em span { -webkit-text-stroke:6px #fff; paint-order:stroke fill; }
.hero h1 em span:nth-child(1),
.hero h1 em span:nth-child(4),
.hero h1 em span:nth-child(7) { color:#7aa8e8; }   /* P b s — soft blue */
.hero h1 em span:nth-child(2),
.hero h1 em span:nth-child(5) { color:#f4cf62; }   /* u l — pastel yellow */
.hero h1 em span:nth-child(3),
.hero h1 em span:nth-child(6) { color:#ec93cf; }   /* p e — soft pink */
.hero p.lead { font-size:clamp(17px,2.2vw,21px); color:var(--ink-soft); max-width:44ch; margin:0 0 22px; }
.hero .cta { display:flex; gap:12px; flex-wrap:wrap; }
.hero-art { position:relative; }
.hero-art .art-frame { position:relative; }
.hero-art .cta { justify-content:center; margin-top:34px; }
.hero-art .frame { border-radius:36px; overflow:hidden; border:6px solid #fff; box-shadow:var(--shadow);
  aspect-ratio:16/12; background:#e8dcf5 center/cover no-repeat; }
.hero-art .badge { position:absolute; bottom:-14px; left:50%; transform:translateX(-50%);
  background:var(--cream2); border:3px solid #fff; border-radius:999px; padding:8px 20px;
  font-family:var(--font-display); font-weight:600; color:var(--ink); box-shadow:var(--shadow); white-space:nowrap; }

/* tabs */
.tabsec { padding:clamp(28px,5vh,52px) 0 60px; }
.tablist { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:26px; }
.tab { cursor:pointer; border:3px solid #fff; background:var(--cream2); color:var(--ink-soft);
  font-weight:600; font-size:clamp(14px,1.8vw,17px); padding:11px 22px; border-radius:999px;
  box-shadow:0 6px 16px rgba(107,91,143,.1); transition:.15s; display:flex; align-items:center; gap:8px; }
.tab:hover { color:var(--ink); transform:translateY(-1px); }
.tab[aria-selected="true"] { color:var(--accent-ink); background:#fff3d9; border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(255,179,71,.3), 0 6px 16px rgba(107,91,143,.12); }
.tab .pill { font-size:11px; font-weight:700; background:var(--pink); color:#a23c68;
  padding:2px 9px; border-radius:999px; letter-spacing:.3px; }
.panel { display:none; animation:pop .35s ease-out; }
.panel.active { display:block; }
@keyframes pop { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* cards / page content */
.pagehead { text-align:center; padding:clamp(30px,7vh,64px) 0 6px; }
.pagehead .eyebrow { margin-bottom:8px; }
.pagehead h1 { font-size:clamp(32px,5.4vw,52px); margin:6px 0; color:var(--ink); }
.pagewrap { padding-bottom:60px; }
.card { background:var(--cream2); border:4px solid #fff; border-radius:32px; box-shadow:var(--shadow); padding:clamp(22px,4vw,44px); }
.card + .card { margin-top:20px; }
.card h2 { font-size:clamp(26px,3.6vw,38px); margin:0 0 6px; color:var(--ink); }
.card h3 { font-size:clamp(19px,2.4vw,24px); margin:22px 0 6px; color:var(--ink); }
.card p { font-size:clamp(16px,1.9vw,19px); color:var(--ink-soft); margin:0 0 14px; }
.card p:last-child { margin-bottom:0; }
.card .lede { font-size:clamp(18px,2.3vw,22px); color:var(--ink); font-weight:600; }
.center { text-align:center; }
.meet-img { width:100%; display:block; border-radius:22px; border:4px solid #fff;
  box-shadow:var(--shadow); margin:0 0 20px; }

/* videos */
.comingsoon { text-align:center; padding:clamp(24px,5vw,56px) 20px; }
.comingsoon .emoji { font-size:56px; display:block; margin-bottom:8px; filter:drop-shadow(0 6px 8px rgba(107,91,143,.15)); }
.comingsoon h3 { font-size:clamp(22px,3vw,30px); color:var(--ink); margin:6px 0; }
.video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; }
.video-grid .v { border-radius:20px; overflow:hidden; border:4px solid #fff; box-shadow:var(--shadow); background:#000; }
.video-grid .v .fr { aspect-ratio:16/9; }
.video-grid .v iframe { width:100%; height:100%; border:0; display:block; }
.video-grid .v video { width:100%; display:block; background:#000; max-height:70vh; }
.video-grid .v .cap { background:var(--cream2); color:var(--ink); font-weight:600; padding:10px 14px; font-family:var(--font-display); }

/* coloring */
.color-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
.color-card { display:flex; flex-direction:column; background:#fff; border:4px solid #fff; border-radius:24px;
  overflow:hidden; box-shadow:var(--shadow); transition:transform .14s; }
.color-card:hover { transform:translateY(-3px); }
.color-card .thumb { aspect-ratio:3/4; background:repeating-linear-gradient(45deg,#fff 0 14px,#fdf3ff 14px 28px);
  display:grid; place-items:center; color:#cbb8ea; font-size:60px; border-bottom:3px dashed #eadcf7; }
.color-card .thumb img { width:100%; height:100%; object-fit:cover; }
.color-card .meta { padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.color-card .meta b { font-family:var(--font-display); color:var(--ink); font-size:17px; }

/* grown-ups list */
.safe-list { list-style:none; margin:6px 0 0; padding:0; display:grid; gap:10px; }
.safe-list li { display:flex; gap:12px; align-items:flex-start; font-size:clamp(15px,1.9vw,18px); color:var(--ink-soft); }
.safe-list li::before { content:"🫧"; font-size:1.1em; line-height:1.4; }
.safe-list li b { color:var(--ink); }

footer { text-align:center; padding:34px 20px 48px; color:var(--ink-soft); font-size:14px; position:relative; z-index:1; }
footer .paw { font-size:22px; }
footer a { color:var(--ink-soft); text-decoration:none; margin:0 8px; }
footer a:hover { color:var(--ink); }

@media (max-width:820px) {
  .hero { grid-template-columns:1fr; text-align:center; }
  .hero .cta { justify-content:center; }
  .hero p.lead { margin-left:auto; margin-right:auto; }
  .hero-art { order:-1; max-width:460px; margin:0 auto; width:100%; }
  nav.top { gap:2px; }
  nav.top a { padding:7px 11px; font-size:14px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .bubbles b { animation:none; display:none; }
  .panel { animation:none; }
  .btn:hover, .color-card:hover { transform:none; }
}