:root{
  --pond:#173a36; --pond-deep:#0e2826; --pond-mid:#1f4a45; --pond-lo:#2a5a54;
  --paper:#f5f0de; --paper-soft:#e1e8da; --mute:#b9c9b9;
  --gold:#efd497; --gold-deep:#dfc38c; --button:#eddfb8; --button-ink:#243f37;
  --maple:#c8662c; --moss:#6f8a55;
  --line:#f5f0de22;
  --shadow:0 24px 60px -28px #04141399;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--pond);color:var(--paper);
  font-family:var(--sans);font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.wordmark,.foot-mark{font-family:var(--serif);font-weight:400;letter-spacing:-.02em}
h2{font-size:clamp(1.9rem,4.2vw,2.8rem);line-height:1.12;margin:0 0 .6rem;text-wrap:balance}
h3{font-size:1.3rem;margin:0 0 .35rem}
p{margin:0 0 1rem}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
.wrap{width:min(1120px,calc(100% - 2.5rem));margin-inline:auto}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:6px}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--paper);color:var(--pond);padding:.6rem 1rem;border-radius:8px;z-index:20;text-decoration:none}
.skip:focus{top:1rem}
.eyebrow{font-size:.74rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:0 0 1rem}
.center{text-align:center}
.mute{color:var(--mute)}
.sub{text-align:center;color:var(--paper-soft);opacity:.85;max-width:36rem;margin:0 auto 2.4rem}

/* ---------- header ---------- */
.site-head{position:absolute;inset:0 0 auto;z-index:5}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.3rem 0}
.wordmark{font-size:1.55rem;letter-spacing:.02em;text-decoration:none;text-shadow:0 1px 18px #193c3a}
.studio-link{font-size:.9rem;text-decoration:none;color:#f5f0dec9;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;text-shadow:0 1px 12px #193c3a}
.studio-link strong{color:var(--paper);font-weight:700}
.studio-link:hover{color:var(--paper);border-bottom-color:var(--gold)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(100svh,860px);display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 50%;z-index:-2;animation:breathe 28s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.045)}}
.hero-veil{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,#0a1c1c55 0%,transparent 22%),
  linear-gradient(90deg,#0e2826f0 0%,#0e2826c4 32%,#0e282640 60%,transparent 78%),
  linear-gradient(0deg,var(--pond) 0%,transparent 26%)}
.hero-copy{padding:8rem 0 clamp(3rem,7vw,5.5rem)}
.hero-copy > *{max-width:34rem}
h1{font-size:clamp(2.7rem,6.6vw,4.9rem);line-height:1.02;letter-spacing:-.035em;margin:0 0 1.3rem;text-shadow:0 2px 24px #0c282a}
.lead{font-size:clamp(1.05rem,1.8vw,1.2rem);color:var(--paper-soft);margin-bottom:2rem}

/* ---------- store buttons ---------- */
.stores{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:.9rem}
.store{
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  background:var(--button);color:var(--button-ink);text-decoration:none;
  padding:.72rem 1.2rem;border-radius:999px;min-width:12.8rem;
  box-shadow:0 8px 35px #092a2740;transition:transform .2s ease,background .2s ease;
}
.store-glyph{width:24px;height:24px;fill:currentColor;flex:none}
.store-text{display:flex;flex-direction:column;line-height:1.1}
.store-text small{font-size:.64rem;letter-spacing:.07em;text-transform:uppercase;opacity:.75}
.store-text b{font-family:var(--serif);font-size:1.15rem;font-weight:400}
.stores:not(.pending) .store:hover{transform:translateY(-2px);background:#f8ebc8}
.pending .store{background:#f5f0de14;color:#f5f0deb8;border:1px solid #f5f0de33;box-shadow:none;cursor:default;backdrop-filter:blur(12px)}
.pending .store .soon{
  position:absolute;top:-.6rem;right:-.3rem;
  background:var(--gold);color:var(--button-ink);font-style:normal;font-weight:700;
  font-size:.6rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.2rem .55rem;border-radius:999px;
}
.stores:not(.pending) .soon{display:none}
.stores-note{font-size:.88rem;color:var(--mute);margin:0}
.center-stores{justify-content:center}

/* ---------- toy ---------- */
.toy{padding:clamp(3.5rem,8vw,6rem) 0 clamp(3rem,6vw,4.5rem);text-align:center}
.toy-box{max-width:52rem;margin-inline:auto}
.toy-pond{width:100%;height:auto;aspect-ratio:2/1;display:block;border-radius:26px;cursor:pointer;touch-action:manipulation;
  background:radial-gradient(ellipse at 30% 20%,#4f8a82 0%,#2c6760 45%,#1a4843 100%);
  box-shadow:var(--shadow),inset 0 0 0 1px #f5f0de1c}
.toy-say{margin:1.1rem 0 0;min-height:1.7em;font-family:var(--serif);font-size:1.15rem;color:var(--paper-soft);transition:opacity .8s}
.toy-say.fade{opacity:0}

/* ---------- moments ---------- */
.moments{padding:clamp(3rem,7vw,5.5rem) 0;background:linear-gradient(180deg,var(--pond),var(--pond-mid))}
.moments h2,.inside h2{text-align:center}
.moment-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.moment{margin:0;background:#0e28265c;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.moment img{aspect-ratio:4/3;object-fit:cover;width:100%}
.moment:nth-child(1) img{object-position:62% 60%}
.moment:nth-child(2) img{object-position:40% 70%}
.moment:nth-child(3) img{object-position:48% 72%}
.moment figcaption{padding:1.3rem 1.4rem 1.5rem}
.moment p{color:var(--paper-soft);opacity:.85;margin:0;font-size:.97rem}

/* ---------- keepers ---------- */
.keepers{padding:clamp(3.5rem,8vw,6rem) 0;background:var(--pond-mid)}
.keepers-row{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.keepers-copy p{color:var(--paper-soft)}
.keepers-copy .mute{color:var(--mute);font-size:.95rem}
.keeper-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.keeper-cards li{text-align:center;background:radial-gradient(circle at 50% 42%,#f5f0de1f,transparent 68%);border-radius:24px;padding:.4rem .4rem 1rem}
.keeper-cards img{width:100%;max-width:190px;margin:0 auto;filter:drop-shadow(0 16px 20px #04141466);animation:float 7s ease-in-out infinite}
.keeper-cards li:nth-child(2) img{animation-delay:-2.3s}
.keeper-cards li:nth-child(3) img{animation-delay:-4.6s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.keeper-cards span{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}

/* ---------- inside ---------- */
.inside{padding:clamp(3.5rem,8vw,6rem) 0;background:linear-gradient(180deg,var(--pond-mid),var(--pond))}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;margin-top:2.4rem}
.card{background:#f5f0de0d;border:1px solid var(--line);border-radius:20px;padding:1.6rem 1.7rem}
.card h3{color:var(--gold)}
.card p{color:var(--paper-soft);opacity:.88;margin:0;font-size:.98rem}

/* ---------- well band ---------- */
.well-band{padding:clamp(3rem,7vw,5.5rem) 0}
.well-row{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.phone-land{border-radius:26px;padding:9px;background:#0a1e1d;box-shadow:var(--shadow),inset 0 0 0 1px #f5f0de1f}
.phone-land img{border-radius:18px;width:100%}
.promises{list-style:none;margin:1.2rem 0 0;padding:0}
.promises li{padding:.8rem 0;border-top:1px solid var(--line);color:var(--paper-soft)}
.promises li:last-child{border-bottom:1px solid var(--line)}
.promises b{color:var(--paper);font-weight:600}

/* ---------- cta ---------- */
.cta{padding:clamp(3rem,7vw,5rem) 0 clamp(3.5rem,8vw,6rem);text-align:center;background:
  radial-gradient(ellipse at 50% 120%,#2f6a62 0%,transparent 60%),var(--pond)}
.cta h2{margin-bottom:1.8rem}

/* ---------- footer ---------- */
.site-foot{background:var(--pond-deep);padding:2.4rem 0 1.8rem;font-size:.92rem}
.foot-row{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;flex-wrap:wrap}
.foot-mark{font-size:1.35rem;margin:0 0 .2rem}
.foot-by{color:var(--mute);margin:0}
.foot-by a{text-decoration-color:var(--gold)}
.foot-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.foot-links a{text-decoration:none;color:var(--paper-soft);border-bottom:1px solid transparent}
.foot-links a:hover{border-bottom-color:var(--gold)}
.foot-small{width:min(1120px,calc(100% - 2.5rem));margin:1.8rem auto 0;color:#b9c9b988;font-size:.76rem}

/* ---------- 404 ---------- */
.lost{min-height:100svh;display:grid;place-content:center;text-align:center;padding:2rem}
.lost h1{font-size:clamp(2.4rem,7vw,3.6rem)}
.lost p{color:var(--paper-soft)}
.lost a{color:var(--gold)}

/* ---------- small screens ---------- */
@media (max-width:860px){
  .moment-list{grid-template-columns:1fr;max-width:34rem;margin-inline:auto}
  .keepers-row,.well-row{grid-template-columns:1fr}
  .keepers-copy{text-align:center}
  .well-copy h2{text-align:center}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero{min-height:0;flex-direction:column;align-items:stretch}
  .hero-art{position:relative;height:auto;aspect-ratio:4/3;object-position:22% 50%}
  .hero-veil{background:linear-gradient(180deg,#0a1c1c66 0%,transparent 25%,transparent 55%,var(--pond) 100%);height:calc(100vw * .75)}
  .hero-copy{padding:0 0 3rem;margin-top:-2.5rem}
  .cards{grid-template-columns:1fr}
  .keeper-cards{gap:.4rem}
  .keeper-cards span{font-size:.6rem;letter-spacing:.12em}
  .store{min-width:0;flex:1 1 12rem}
  .toy-pond{aspect-ratio:4/3;border-radius:20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}