:root {
  --cream:#f4eddd;
  --paper:#fffaf0;
  --ink:#17263e;
  --coral:#f05b48;
  --blue:#84b9d7;
  --yellow:#f3c94f;
  --green:#8db49a;
  --line:rgba(23,38,62,.18);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:inherit; text-decoration:none; }
.skip-link { position:fixed; left:1rem; top:-4rem; z-index:99; background:var(--ink); color:white; padding:.75rem 1rem; }
.skip-link:focus { top:1rem; }

.site-header { height:90px; padding:0 4.5vw; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); position:absolute; inset:0 0 auto; z-index:10; }
.brand { display:flex; align-items:baseline; font-family:Georgia,"Times New Roman",serif; font-size:1.55rem; font-weight:700; letter-spacing:-.06em; }
.brand i { color:var(--coral); font-weight:400; padding:0 .22em; }
.brand b { color:var(--coral); }
.status { display:flex; align-items:center; gap:.65rem; text-transform:uppercase; letter-spacing:.13em; font-size:.7rem; font-weight:800; }
.status span { width:9px; height:9px; background:var(--coral); border-radius:50%; box-shadow:0 0 0 5px rgba(240,91,72,.16); animation:pulse 2s ease-out infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 10px rgba(240,91,72,0); } }

.hero { min-height:100svh; position:relative; overflow:hidden; display:grid; grid-template-columns:1.03fr .97fr; align-items:center; padding:145px 4.5vw 90px; }
.hero-copy { position:relative; z-index:4; max-width:760px; }
.eyebrow { display:flex; align-items:center; gap:.7rem; margin:0 0 1.4rem; text-transform:uppercase; letter-spacing:.17em; font-size:.7rem; font-weight:800; }
.eyebrow > span { width:30px; height:2px; background:var(--coral); }
.eyebrow.light > span { background:var(--yellow); }
h1,h2 { margin:0; font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-.058em; line-height:.87; }
h1 { font-size:clamp(4.8rem,8.7vw,9rem); }
h1 em,h2 em { color:var(--coral); font-weight:400; }
.intro { width:min(570px,90%); margin:2rem 0 2.2rem; font-size:clamp(1rem,1.45vw,1.24rem); line-height:1.7; }
.button { min-width:230px; display:inline-flex; justify-content:space-between; align-items:center; gap:2rem; padding:1.1rem 1.25rem; background:var(--ink); color:white; font-size:.75rem; font-weight:800; text-transform:uppercase; letter-spacing:.1em; transition:transform .2s,box-shadow .2s; }
.button:hover { transform:translateY(-3px); box-shadow:6px 7px 0 rgba(23,38,62,.16); }
.button.coral { background:var(--coral); }

.product-playground { position:relative; height:min(650px,58vw); min-height:500px; }
.sun { width:min(34vw,490px); aspect-ratio:1; position:absolute; border-radius:50%; right:4%; top:5%; background:repeating-conic-gradient(var(--yellow) 0 8deg,#ffda68 8deg 16deg); opacity:.88; }
.dog-mark { position:absolute; width:42%; aspect-ratio:1; top:26%; left:29%; border-radius:46% 46% 48% 48%; background:var(--ink); z-index:2; box-shadow:12px 15px 0 rgba(23,38,62,.16); }
.dog-mark .ear { position:absolute; top:-25%; width:42%; height:62%; background:var(--ink); z-index:-1; }
.dog-mark .ear.left { left:-13%; border-radius:90% 10% 35% 65%; transform:rotate(-26deg); }
.dog-mark .ear.right { right:-13%; border-radius:10% 90% 65% 35%; transform:rotate(26deg); }
.dog-mark .eye { position:absolute; top:35%; width:9%; aspect-ratio:1; border-radius:50%; background:var(--paper); }
.dog-mark .eye.left { left:28%; }
.dog-mark .eye.right { right:28%; }
.dog-mark .snout { position:absolute; left:31%; right:31%; top:56%; height:28%; border-radius:50%; background:var(--paper); color:var(--coral); display:flex; justify-content:center; padding-top:5%; font-size:1.3rem; }
.product-card { position:absolute; z-index:3; width:175px; height:220px; padding:1rem; border:8px solid var(--paper); box-shadow:8px 10px 0 rgba(23,38,62,.15); }
.product-card .number { width:29px; aspect-ratio:1; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:white; font-size:.62rem; font-weight:800; }
.product-card p { position:absolute; left:1rem; bottom:.8rem; margin:0; color:white; font-family:Georgia,"Times New Roman",serif; font-size:1.25rem; line-height:1.02; }
.product-card p strong { color:var(--yellow); font-weight:400; }
.card-bowl { left:1%; top:2%; background:var(--coral); transform:rotate(-8deg); }
.card-care { right:0; top:20%; background:var(--blue); transform:rotate(7deg); }
.card-play { left:7%; bottom:0; background:var(--green); transform:rotate(5deg); }
.bowl { position:absolute; left:30px; right:30px; top:57px; height:72px; border:7px solid var(--paper); border-radius:50% 50% 43% 43%; }
.bowl::after { content:""; position:absolute; inset:17px 19px; border:5px solid var(--paper); border-radius:50%; }
.bowl i:first-child { position:absolute; left:32px; top:-1px; width:8px; height:59px; background:var(--paper); border-radius:8px; transform:rotate(-35deg); }
.bowl i:last-child { position:absolute; right:29px; top:0; width:8px; height:58px; background:var(--paper); border-radius:8px; transform:rotate(38deg); }
.bottle { position:absolute; width:63px; height:87px; left:50%; top:50px; transform:translateX(-50%); border:6px solid var(--paper); border-radius:9px 9px 16px 16px; }
.bottle::before { content:""; position:absolute; width:33px; height:20px; left:9px; top:-25px; border:6px solid var(--paper); border-bottom:0; border-radius:5px 5px 0 0; }
.bottle::after { content:"W+W"; position:absolute; left:7px; right:7px; top:30px; padding:6px 0; background:var(--paper); color:var(--ink); text-align:center; font-size:.57rem; font-weight:900; }
.ball { position:absolute; width:83px; aspect-ratio:1; border:6px solid var(--paper); border-radius:50%; top:48px; left:50%; transform:translateX(-50%); }
.ball i { position:absolute; width:15px; aspect-ratio:1; border-radius:50%; background:var(--paper); }
.ball i:nth-child(1) { left:18px; top:15px; }.ball i:nth-child(2) { right:15px; top:34px; }.ball i:nth-child(3) { left:27px; bottom:10px; }
.sticker { position:absolute; right:3%; bottom:2%; width:125px; aspect-ratio:1; border-radius:50%; background:var(--coral); color:white; z-index:4; display:grid; place-items:center; text-align:center; font-family:Georgia,"Times New Roman",serif; font-size:1.05rem; transform:rotate(9deg); border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); }
.sticker::after { content:""; position:absolute; inset:8px; border:1px dashed white; border-radius:50%; }
.ticker { position:absolute; inset:auto 0 0; background:var(--coral); color:white; overflow:hidden; transform:rotate(-1deg) scale(1.015); z-index:5; }
.ticker div { width:max-content; display:flex; align-items:center; gap:2rem; padding:.75rem 0; font-size:.72rem; font-weight:800; letter-spacing:.15em; animation:marquee 26s linear infinite; }
@keyframes marquee { to { transform:translateX(-50%); } }

.coming { background:var(--paper); padding:9rem 4.5vw 10rem; }
.coming-heading { margin-bottom:5rem; }
.coming h2,.manifesto h2,.closing h2 { font-size:clamp(4rem,7vw,7.2rem); }
.category-list { border-top:1px solid var(--ink); }
.category-list article { min-height:150px; display:grid; grid-template-columns:55px 1.25fr 1fr 45px; align-items:center; gap:2rem; border-bottom:1px solid var(--ink); transition:padding .25s,background .25s; }
.category-list article:hover { padding:0 1.2rem; background:var(--cream); }
.category-list article > span { align-self:start; padding-top:1.7rem; font-size:.66rem; font-weight:800; color:var(--coral); }
.category-title small { display:block; margin-bottom:.55rem; text-transform:uppercase; letter-spacing:.15em; font-weight:800; font-size:.62rem; color:#707681; }
.category-title h3 { margin:0; font:400 clamp(1.8rem,3vw,3.2rem)/1 Georgia,"Times New Roman",serif; letter-spacing:-.04em; }
.category-list article p { max-width:350px; line-height:1.65; font-size:.9rem; }
.category-list article > b { font-size:1.4rem; color:var(--coral); }

.manifesto { min-height:760px; display:grid; grid-template-columns:.9fr 1.1fr; background:var(--ink); color:white; overflow:hidden; }
.manifesto-mark { display:flex; align-items:center; justify-content:center; min-height:650px; background:var(--blue); color:var(--ink); transform:rotate(-4deg) scale(1.1); font:400 clamp(5rem,12vw,12rem)/1 Georgia,"Times New Roman",serif; }
.manifesto-mark span { color:var(--coral); font-size:.58em; margin:0 .08em; }
.manifesto-copy { padding:8rem 8vw; align-self:center; }
.manifesto h2 em { color:var(--yellow); }
.manifesto-copy > p:not(.eyebrow) { max-width:630px; font-size:1.08rem; line-height:1.85; color:#e5e9ef; margin:2.2rem 0; }
.manifesto-copy .note { border-top:1px solid rgba(255,255,255,.22); padding-top:1.6rem; color:var(--yellow)!important; font-family:Georgia,"Times New Roman",serif; font-size:1.3rem!important; line-height:1.45!important; }

.closing { min-height:720px; padding:9rem 5vw; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:var(--yellow); }
.closing .eyebrow { justify-content:center; }
.closing > p:not(.eyebrow) { margin:2rem 0; font-size:1.05rem; }
.closing small { display:block; max-width:460px; margin-top:1rem; font-size:.67rem; opacity:.65; }
footer { padding:2.3rem 4.5vw; background:var(--coral); color:white; display:flex; justify-content:space-between; align-items:center; gap:2rem; font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; }
.footer-brand { text-transform:none; letter-spacing:-.06em; font-size:1.35rem; }
.footer-brand i,.footer-brand b { color:var(--yellow); }

@media (max-width:950px) {
  .hero { grid-template-columns:1fr; gap:2rem; padding-top:140px; }
  .product-playground { height:610px; }
  .sun { width:480px; }
  .category-list article { grid-template-columns:40px 1fr 1fr 30px; }
  .manifesto { grid-template-columns:1fr; }
  .manifesto-mark { min-height:420px; }
}

@media (max-width:620px) {
  .site-header { height:76px; padding:0 1.25rem; }
  .brand { font-size:1.3rem; }
  .hero { padding:120px 1.25rem 72px; }
  h1 { font-size:4.2rem; }
  .product-playground { height:470px; min-height:0; margin-top:1rem; }
  .sun { width:330px; right:-10%; }
  .dog-mark { width:48%; left:27%; top:28%; }
  .product-card { width:125px; height:165px; border-width:6px; padding:.65rem; }
  .product-card p { font-size:.95rem; left:.7rem; bottom:.6rem; }
  .card-bowl { left:-3%; }.card-care { right:-2%; }.card-play { left:2%; }
  .bowl { left:21px; right:21px; top:44px; height:51px; border-width:5px; }.bowl::after { inset:11px 13px; border-width:3px; }.bowl i:first-child,.bowl i:last-child { height:40px; width:5px; }
  .bottle { top:40px; width:46px; height:61px; border-width:4px; }.bottle::before { width:24px; height:14px; left:7px; top:-17px; border-width:4px; }.bottle::after { top:20px; left:4px; right:4px; padding:4px 0; }
  .ball { width:60px; top:36px; border-width:4px; }.ball i { width:10px; }.ball i:nth-child(1) { left:13px; top:10px; }.ball i:nth-child(2) { right:10px; top:23px; }.ball i:nth-child(3) { left:20px; bottom:7px; }
  .sticker { width:90px; font-size:.78rem; right:0; }
  .coming { padding:6rem 1.25rem; }
  .coming h2,.manifesto h2,.closing h2 { font-size:3.55rem; }
  .coming-heading { margin-bottom:3rem; }
  .category-list article { grid-template-columns:28px 1fr 25px; gap:1rem; padding:1.5rem 0; }
  .category-list article:hover { padding:1.5rem .5rem; }
  .category-list article > span { padding-top:.5rem; }
  .category-list article p { grid-column:2/4; margin:0; }
  .category-title h3 { font-size:2rem; }
  .manifesto-mark { min-height:300px; font-size:6rem; }
  .manifesto-copy { padding:6rem 1.25rem; }
  .closing { min-height:650px; padding:6rem 1.25rem; }
  footer { flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}