:root { --ink:#11100e; --cream:#fff7df; --paper:#fffbef; --red:#f3192c; --yellow:#ffd914; --muted:#6e665a; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
.announcement { background:var(--ink); color:white; padding:10px 20px; text-align:center; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.site-header { min-height:86px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:32px; max-width:1320px; margin:0 auto; padding:14px 36px; border-bottom:2px solid var(--ink); }
.brand { display:flex; align-items:center; width:max-content; font-weight:1000; letter-spacing:-.04em; }
.brand img { width:54px; height:54px; object-fit:contain; margin-right:10px; }
.brand span { font-size:25px; font-style:italic; }
.brand small { background:var(--yellow); font-size:9px; letter-spacing:.14em; margin-left:8px; padding:5px 7px; transform:skew(-8deg); }
nav { display:flex; align-items:center; gap:34px; font-size:13px; font-weight:800; }
nav a { position:relative; }
nav a::after { content:''; position:absolute; left:0; right:100%; bottom:-5px; height:3px; background:var(--red); transition:right .2s ease; }
nav a:hover::after, nav a:focus-visible::after { right:0; }
.nav-cta { justify-self:end; background:var(--yellow); border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink); padding:12px 18px; font-size:12px; font-weight:900; text-transform:uppercase; }
.hero { min-height:650px; max-width:1320px; margin:0 auto; padding:58px 36px 68px; display:grid; grid-template-columns:minmax(0,.92fr) minmax(460px,1.08fr); align-items:center; gap:50px; overflow:hidden; }
.eyebrow { margin:0 0 18px; color:var(--red); font-size:12px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
h1 { margin:0; max-width:680px; font-size:clamp(68px,8vw,116px); line-height:.82; letter-spacing:-.085em; font-weight:1000; text-transform:uppercase; }
h1 span { color:var(--red); text-shadow:4px 4px 0 var(--yellow); }
.hero-intro { max-width:590px; margin:30px 0 0; color:#4f493f; font-size:18px; line-height:1.65; }
.hero-actions { display:flex; align-items:center; gap:28px; margin-top:32px; }
.button { display:inline-flex; align-items:center; gap:14px; padding:17px 21px; border:2px solid var(--ink); font-size:13px; font-weight:900; text-transform:uppercase; letter-spacing:.04em; }
.button-primary { background:var(--red); color:white; box-shadow:6px 6px 0 var(--ink); transition:transform .2s ease,box-shadow .2s ease; }
.button-primary:hover { transform:translate(3px,3px); box-shadow:3px 3px 0 var(--ink); }
.text-link { font-size:13px; font-weight:900; border-bottom:2px solid var(--ink); padding-bottom:4px; }
.proof-row { display:flex; flex-wrap:wrap; gap:20px; margin-top:42px; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.proof-row span::before { content:'✓'; display:inline-grid; place-items:center; width:20px; height:20px; margin-right:7px; color:white; background:var(--ink); border-radius:50%; }
.hero-art { min-height:530px; position:relative; display:grid; place-items:center; isolation:isolate; }
.hero-art::before { content:''; position:absolute; width:82%; aspect-ratio:1; border-radius:50%; background:var(--yellow); border:5px solid var(--ink); box-shadow:18px 18px 0 var(--red); z-index:-2; }
.hero-image-wrap { width:min(100%,570px); filter:drop-shadow(0 22px 15px rgba(0,0,0,.18)); }
.hero-image-wrap img { width:100%; height:auto; display:block; }
.burst { position:absolute; background:var(--red); z-index:-3; transform:rotate(18deg); }
.burst-one { width:120px; height:440px; left:8%; }
.burst-two { width:440px; height:100px; top:18%; }
.handmade-stamp { position:absolute; right:1%; bottom:5%; width:126px; height:126px; display:grid; place-content:center; text-align:center; border-radius:50%; background:var(--ink); color:white; border:5px solid var(--yellow); transform:rotate(9deg); text-transform:uppercase; }
.handmade-stamp strong { color:var(--yellow); font-size:28px; line-height:1; }
.handmade-stamp span { font-size:10px; font-weight:900; line-height:1.25; letter-spacing:.09em; margin-top:5px; }
.ticker { overflow:hidden; background:var(--yellow); border-block:3px solid var(--ink); padding:17px 0; transform:rotate(-1deg) scale(1.02); }
.ticker-track { display:flex; width:max-content; animation:ticker-scroll 24s linear infinite; will-change:transform; }
.ticker-group { display:flex; flex:0 0 max(calc(100vw + 260px),1040px); align-items:center; justify-content:space-around; gap:26px; padding:0 26px; white-space:nowrap; font-weight:1000; font-style:italic; font-size:22px; letter-spacing:.03em; }
.ticker i { color:var(--red); font-style:normal; }
@keyframes ticker-scroll { to { transform:translateX(-50%); } }
.section { max-width:1320px; margin:0 auto; padding:110px 36px; }
.section-heading { display:grid; grid-template-columns:1fr 1.3fr; column-gap:40px; margin-bottom:56px; }
.section-heading .eyebrow { grid-column:1; }
h2 { margin:0; font-size:clamp(48px,6vw,82px); line-height:.92; letter-spacing:-.06em; text-transform:uppercase; }
h2 span { color:var(--red); }
.section-heading h2 { grid-column:1; }
.section-heading > p:last-child { grid-column:2; grid-row:2; align-self:end; max-width:480px; margin:0; color:var(--muted); font-size:17px; line-height:1.65; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.product-card { min-height:430px; position:relative; overflow:hidden; padding:26px; border:3px solid var(--ink); box-shadow:8px 8px 0 var(--ink); display:flex; flex-direction:column; justify-content:flex-end; }
.card-red { background:var(--red); color:white; }
.card-yellow { background:var(--yellow); }
.card-dark { background:var(--ink); color:white; }
.card-number { position:absolute; top:22px; left:24px; font-size:12px; font-weight:900; letter-spacing:.15em; }
.card-kicker { margin:0 0 10px; font-size:10px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; opacity:.72; }
.product-card h3 { margin:0 0 12px; max-width:290px; font-size:30px; line-height:.96; letter-spacing:-.04em; text-transform:uppercase; }
.product-card > p:last-child { margin:0; max-width:330px; font-size:14px; line-height:1.55; opacity:.82; }
.toy-mark { position:absolute; top:55px; right:20px; display:grid; place-items:center; width:245px; height:210px; transform:rotate(-8deg); }
.toy-mark-rope i { position:absolute; display:block; width:190px; height:26px; border:4px solid var(--ink); border-radius:30px; background:var(--yellow); }
.toy-mark-rope i:nth-child(2) { transform:rotate(45deg); background:white; }
.toy-mark-rope i:nth-child(3) { transform:rotate(-45deg); background:var(--yellow); }
.toy-mark-drop { border:5px solid var(--ink); background:var(--paper); color:var(--red); font-size:66px; font-weight:1000; letter-spacing:-.09em; clip-path:polygon(8% 15%,93% 0,100% 78%,18% 100%,0 55%); }
.toy-mark-more { color:var(--yellow); border:5px solid var(--yellow); border-radius:50%; font-size:140px; font-weight:300; line-height:1; }
.story-section { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:center; background:var(--cream); max-width:none; padding-inline:max(36px,calc((100vw - 1248px)/2)); }
.story-art { position:relative; }
.photo-frame { min-height:570px; display:grid; place-items:center; background:var(--yellow); border:4px solid var(--ink); box-shadow:-18px 18px 0 var(--red); overflow:hidden; }
.photo-frame img { width:90%; height:90%; object-fit:contain; filter:drop-shadow(0 18px 10px rgba(0,0,0,.18)); }
.story-tag { position:absolute; right:-30px; bottom:30px; background:var(--ink); color:white; border:4px solid var(--yellow); padding:16px 20px; font-size:11px; font-weight:900; line-height:1.25; letter-spacing:.1em; transform:rotate(-5deg); }
.story-copy .lead { margin:30px 0 18px; font-size:21px; line-height:1.5; font-weight:700; }
.story-copy > p:not(.eyebrow,.lead) { color:var(--muted); font-size:16px; line-height:1.7; }
.button-outline { margin-top:22px; background:transparent; box-shadow:5px 5px 0 var(--ink); }
.impact-section { display:grid; grid-template-columns:.85fr 1.15fr; gap:100px; }
.impact-heading { position:sticky; top:30px; align-self:start; }
.impact-copy { border-left:3px solid var(--ink); padding-left:56px; }
.impact-lead { margin:0 0 14px; font-size:30px; line-height:1.25; font-weight:900; }
.impact-copy > p:nth-child(2) { color:var(--muted); font-size:16px; line-height:1.7; max-width:620px; }
.impact-steps { margin-top:50px; }
.impact-steps div { display:grid; grid-template-columns:64px 1fr; align-items:center; gap:18px; padding:22px 0; border-top:2px solid var(--ink); }
.impact-steps div:last-child { border-bottom:2px solid var(--ink); }
.impact-steps strong { color:var(--red); font-size:24px; }
.impact-steps span { font-weight:900; text-transform:uppercase; letter-spacing:.02em; }
.values-section { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; padding-top:0; }
.value { padding:42px; background:var(--ink); color:white; border-right:1px solid #48443d; }
.value > span { display:grid; place-items:center; width:56px; height:56px; margin-bottom:40px; background:var(--yellow); color:var(--ink); border-radius:50%; font-size:25px; font-weight:900; }
.value h3 { margin:0 0 12px; font-size:22px; text-transform:uppercase; }
.value p { margin:0; color:#c9c1b3; line-height:1.6; font-size:14px; }
.follow-section { min-height:570px; display:grid; grid-template-columns:1.05fr .95fr; align-items:center; overflow:hidden; background:var(--red); color:white; padding:60px max(36px,calc((100vw - 1248px)/2)); }
.follow-section h2 { color:white; font-size:clamp(54px,7vw,96px); }
.follow-section .eyebrow { color:var(--yellow); }
.follow-section p:not(.eyebrow) { max-width:540px; font-size:17px; line-height:1.6; }
.follow-section img { width:min(100%,520px); justify-self:end; filter:drop-shadow(20px 24px 0 var(--yellow)); transform:rotate(4deg); }
.button-light { margin-top:18px; background:white; color:var(--ink); box-shadow:6px 6px 0 var(--yellow); }
footer { position:relative; max-width:1320px; margin:0 auto; padding:72px 36px 30px; display:grid; grid-template-columns:260px 1fr auto; gap:60px; align-items:start; }
.footer-brand img { width:210px; height:210px; object-fit:contain; }
.footer-copy p { margin:0 0 9px; line-height:1.5; }
.footer-copy strong { font-size:20px; text-transform:uppercase; }
.footer-copy .safety { max-width:570px; margin-top:25px; color:var(--muted); font-size:11px; }
.footer-links { display:flex; flex-direction:column; gap:14px; font-size:13px; font-weight:900; text-transform:uppercase; }
.copyright { grid-column:1/-1; border-top:2px solid var(--ink); margin:10px 0 0; padding-top:22px; font-size:11px; color:var(--muted); }
@media (max-width:900px) { .site-header { grid-template-columns:1fr auto; padding-inline:22px; } nav { display:none; } .hero { grid-template-columns:1fr; padding:44px 24px 70px; gap:36px; text-align:center; } .hero-copy { display:flex; flex-direction:column; align-items:center; } .hero-intro { max-width:650px; } .hero-art { min-height:460px; order:-1; } .hero-image-wrap { width:min(86vw,480px); } }
@media (max-width:560px) { .announcement { font-size:9px; } .site-header { min-height:72px; } .brand img { width:44px; height:44px; } .brand span { font-size:21px; } .brand small { display:none; } .nav-cta { padding:10px 12px; font-size:9px; box-shadow:3px 3px 0 var(--ink); } h1 { font-size:clamp(54px,19vw,82px); } .hero-intro { font-size:16px; } .hero-actions { flex-direction:column; gap:20px; } .proof-row { justify-content:center; gap:14px; } .hero-art { min-height:350px; } .handmade-stamp { width:105px; height:105px; right:-1%; } }
@media (max-width:900px) {
  .section { padding:82px 24px; }
  .section-heading { grid-template-columns:1fr; }
  .section-heading .eyebrow,.section-heading h2,.section-heading > p:last-child { grid-column:1; grid-row:auto; }
  .section-heading > p:last-child { margin-top:22px; }
  .product-grid { grid-template-columns:1fr; }
  .product-card { min-height:360px; }
  .story-section { grid-template-columns:1fr; gap:70px; padding-inline:24px; }
  .photo-frame { min-height:480px; }
  .story-tag { right:10px; }
  .impact-section { grid-template-columns:1fr; gap:48px; }
  .impact-heading { position:static; }
  .impact-copy { padding-left:30px; }
  .values-section { grid-template-columns:1fr; }
  .value { border-right:0; border-bottom:1px solid #48443d; }
  .follow-section { grid-template-columns:1fr; gap:48px; padding-inline:24px; text-align:center; }
  .follow-section p { margin-inline:auto; }
  .follow-section img { justify-self:center; width:min(80vw,430px); }
  footer { grid-template-columns:190px 1fr; gap:36px; padding-inline:24px; }
  .footer-brand img { width:170px; height:170px; }
  .footer-links { grid-column:1/-1; flex-direction:row; flex-wrap:wrap; }
}
@media (max-width:560px) {
  .section { padding:68px 18px; }
  h2 { font-size:46px; }
  .product-card { min-height:390px; padding:22px; }
  .toy-mark { width:210px; height:180px; }
  .photo-frame { min-height:380px; }
  .story-section { padding-inline:18px; }
  .story-tag { font-size:9px; }
  .impact-copy { padding-left:18px; }
  .impact-lead { font-size:24px; }
  .impact-steps div { grid-template-columns:50px 1fr; }
  .impact-steps span { font-size:13px; }
  .value { padding:34px 28px; }
  .follow-section { padding:60px 18px; }
  .follow-section h2 { font-size:47px; }
  footer { grid-template-columns:1fr; text-align:center; padding-inline:18px; }
  .footer-brand { margin:auto; }
  .footer-links { grid-column:1; justify-content:center; }
  .copyright { grid-column:1; }
}
:focus-visible { outline:3px solid var(--red); outline-offset:4px; }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none!important; } }
