@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@600;700;800;900&display=swap');
:root{--blue:#20a4f3;--navy:#17202a;--yellow:#ffd83d;--pink:#ff78a8;--purple:#9b7cff;--mint:#65e6c2;--cream:#fff9e9;--white:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--navy);font-family:Nunito,sans-serif;background:var(--cream);overflow-x:hidden}
a{text-decoration:none;color:inherit}.nav{position:sticky;top:0;z-index:30;background:#fff;border-bottom:4px solid var(--navy);box-shadow:0 4px 0 rgba(23,32,42,.12)}
.nav-inner{max-width:1160px;margin:auto;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:15px}.brand{display:flex;align-items:center;gap:10px;font:800 1.15rem 'Baloo 2';letter-spacing:.2px}.brand img{width:50px;height:50px;border-radius:50%;object-fit:cover}
.links{display:flex;gap:7px;flex-wrap:wrap}.links a{padding:10px 14px;border-radius:16px;font-weight:900}.links a:hover,.links a.active{background:var(--yellow);box-shadow:3px 3px 0 var(--navy)}
.container{max-width:1160px;margin:auto;padding:0 20px}.hero{position:relative;padding:75px 0 70px;background:linear-gradient(145deg,#b9f0ff 0%,#e6fbff 42%,#fff4a7 100%);border-bottom:5px solid var(--navy)}
.hero:before,.hero:after{content:"";position:absolute;font-size:5rem;opacity:.8}.hero:before{content:"★";left:4%;top:12%;color:var(--pink);transform:rotate(-15deg)}.hero:after{content:"✦";right:7%;bottom:10%;color:var(--purple);transform:rotate(20deg)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:55px}.bubble{display:inline-block;background:#fff;border:3px solid var(--navy);border-radius:999px;padding:8px 14px;font-weight:900;box-shadow:4px 4px 0 var(--navy);transform:rotate(-2deg)}
h1,h2,h3{font-family:'Baloo 2',cursive;margin:0}h1{font-size:clamp(3.2rem,7vw,6rem);line-height:.88;letter-spacing:-2px;margin:20px 0 18px}h2{font-size:clamp(2.4rem,5vw,4rem);line-height:.95}h3{font-size:1.65rem}
.lead{font-size:1.2rem;line-height:1.7;max-width:650px}.buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;justify-content:center;border:3px solid var(--navy);padding:12px 18px;border-radius:17px;font-weight:900;cursor:pointer;box-shadow:5px 5px 0 var(--navy);transition:.12s}.btn:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--navy)}.primary{background:var(--yellow)}.pink{background:var(--pink)}.white{background:#fff}
.logo-wrap{text-align:center}.logo-wrap img{width:min(100%,480px);filter:drop-shadow(10px 15px 0 rgba(23,32,42,.16));transform:rotate(2deg)}
.section{padding:78px 0}.section-title{text-align:center;margin-bottom:38px}.section-title p{max-width:650px;margin:14px auto 0;line-height:1.7;color:#56606d}
.fun-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.fun-card{background:#fff;border:3px solid var(--navy);border-radius:27px;padding:28px;box-shadow:8px 8px 0 var(--navy);position:relative}.fun-card:nth-child(2){transform:rotate(1.2deg);background:#fff0f6}.fun-card:nth-child(3){transform:rotate(-1.2deg);background:#effcff}.sticker{font-size:3.2rem;display:block;margin-bottom:15px}.fun-card p{line-height:1.65;color:#56606d}
.strip{background:var(--purple);color:#fff;border-top:5px solid var(--navy);border-bottom:5px solid var(--navy);overflow:hidden}.marquee{padding:18px 0;font:900 1.35rem 'Baloo 2';white-space:nowrap;text-align:center;letter-spacing:.8px}.marquee span{margin:0 18px;color:#fff}.marquee .y{color:var(--yellow)}.marquee .p{color:#ffb8d0}
.cta{background:var(--mint);border:3px solid var(--navy);border-radius:30px;padding:38px;box-shadow:9px 9px 0 var(--navy);display:flex;align-items:center;justify-content:space-between;gap:25px}.cta p{max-width:650px;line-height:1.65}
.footer{background:var(--navy);color:#fff;padding:32px 0}.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer small{color:#c8d0da}
.shop-hero{padding:58px 0 48px;text-align:center;background:linear-gradient(135deg,#ffe6f0,#fff,#dff8ff);border-bottom:5px solid var(--navy)}
.shop-hero .lead{margin:15px auto}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;align-items:stretch}.product{background:#fff;border:3px solid var(--navy);border-radius:27px;overflow:hidden;box-shadow:8px 8px 0 var(--navy);transition:.15s;display:flex;flex-direction:column;height:100%}.product:hover{transform:translateY(-5px) rotate(-.5deg)}
.product-art{height:215px;display:grid;place-items:center;background:repeating-linear-gradient(0deg,#fff 0 28px,#d8f0ff 29px 31px);border-bottom:3px solid var(--navy)}.item{font-size:6rem;filter:drop-shadow(5px 6px 0 rgba(23,32,42,.2))}.product-body{padding:22px;display:flex;flex-direction:column;flex:1}.product-body p{color:#596573;line-height:1.55}.price{font:900 1.35rem 'Baloo 2'}.buy{width:100%;margin-top:14px}.tag{display:inline-block;padding:5px 10px;border:2px solid var(--navy);border-radius:999px;background:var(--yellow);font-size:.75rem;font-weight:900;align-self:flex-start}
.product-body .price{margin-top:auto}
.story{padding:82px 0}.story-card{background:#fff;border:3px solid var(--navy);border-radius:32px;padding:45px;box-shadow:10px 10px 0 var(--navy);max-width:900px;margin:auto;text-align:center}.story-card h1{font-size:clamp(3rem,7vw,5.5rem)}.story-card p{font-size:1.18rem;line-height:1.85;color:#596573}.doodles{font-size:3rem;letter-spacing:20px;margin-bottom:15px}
@media(max-width:850px){.hero-grid{grid-template-columns:1fr;text-align:center}.lead{margin-left:auto;margin-right:auto}.fun-grid,.products{grid-template-columns:1fr 1fr}.hero:before{left:1%}}
@media(max-width:560px){.links{gap:2px}.links a{padding:8px 9px;font-size:.9rem}.hero{padding:50px 0}.fun-grid,.products{grid-template-columns:1fr}.section{padding:55px 0}.cta{padding:28px;flex-direction:column;align-items:flex-start}.logo-wrap img{max-width:330px}}

/* Branded product artwork */
.product-art{position:relative;overflow:hidden}
.item-label{position:absolute;z-index:2;background:#fff;border:3px solid var(--navy);border-radius:10px;padding:5px 9px;font:900 .82rem Nunito,sans-serif;letter-spacing:-.2px;box-shadow:3px 3px 0 var(--navy);transform:rotate(-4deg)}
.pencil-art .item-label{background:var(--yellow);transform:rotate(-8deg)}
.eraser-art .item-label{background:var(--pink);transform:rotate(5deg)}
.notebook-art .item-label{background:#fff;transform:rotate(-2deg)}
.pouch-art .item-label{background:var(--mint);transform:rotate(3deg)}
.cap-art .item-label{background:var(--yellow);transform:rotate(-5deg)}
.sticker-art .item-label{background:#fff}

/* ===== Integrated sr-brand product illustrations ===== */
.product-art{background:linear-gradient(145deg,#eaf9ff,#fff9dd);position:relative}
.product-art .item,.product-art .item-label{display:none}
.brand-object{position:relative;filter:drop-shadow(6px 8px 0 rgba(23,32,42,.16))}
.brand-print{position:absolute;z-index:5;font:900 .9rem 'Nunito',sans-serif;color:#17202a;white-space:nowrap;letter-spacing:-.5px}
.pencil-object{width:82%;height:58px;background:linear-gradient(#ffe95d,#ffc400);border:4px solid var(--navy);border-radius:8px 0 0 8px;transform:rotate(-17deg)}
.pencil-object:before{content:"";position:absolute;left:-58px;top:-4px;border-top:29px solid transparent;border-bottom:29px solid transparent;border-right:58px solid #f3c18d;filter:drop-shadow(-4px 0 0 var(--navy))}
.pencil-object:after{content:"";position:absolute;right:-25px;top:-4px;width:25px;height:58px;background:#ff7fa8;border:4px solid var(--navy);border-left:0;border-radius:0 8px 8px 0}
.pencil-object .brand-print{left:25%;top:14px;transform:none}
.eraser-object{width:72%;height:98px;background:linear-gradient(145deg,#ff9ab8,#f25585);border:4px solid var(--navy);border-radius:23px;transform:rotate(-9deg)}
.eraser-object:after{content:"";position:absolute;left:12px;bottom:9px;width:35%;height:15px;border-radius:50%;background:rgba(255,255,255,.3)}
.eraser-object .brand-print{left:18%;top:34px;transform:rotate(9deg);font-size:1.05rem}
.notebook-object{width:138px;height:178px;background:#fffef9;border:4px solid var(--navy);border-radius:8px;transform:rotate(-6deg);background-image:repeating-linear-gradient(0deg,transparent 0 22px,#91cbea 23px 25px)}
.notebook-object:before{content:"";position:absolute;left:18px;top:0;bottom:0;border-left:4px solid #ff6d7d}
.notebook-object .brand-print{top:67px;left:15px;background:#ffd83d;border:3px solid var(--navy);border-radius:9px;padding:5px 7px;transform:rotate(6deg);font-size:.75rem}
.pouch-object{width:210px;height:112px;background:linear-gradient(145deg,#67e6c2,#27bb99);border:4px solid var(--navy);border-radius:18px 18px 28px 28px;transform:rotate(4deg)}
.pouch-object:before{content:"";position:absolute;left:9px;right:9px;top:12px;border-top:4px dashed var(--navy)}
.pouch-object .brand-print{left:40px;top:52px;font-size:1.1rem;transform:rotate(-4deg)}
.cap-object{width:190px;height:105px;background:#ffd83d;border:4px solid var(--navy);border-radius:95px 95px 20px 20px;transform:rotate(-6deg)}
.cap-object:before{content:"";position:absolute;right:-70px;bottom:-18px;width:110px;height:38px;background:#ffd83d;border:4px solid var(--navy);border-left:0;border-radius:0 80px 40px 0;transform:rotate(-5deg);z-index:-1}
.cap-object .brand-print{left:33px;top:47px;transform:rotate(6deg);font-size:1rem}
.sticker-sheet{width:175px;height:155px;background:#fff;border:4px solid var(--navy);border-radius:18px;transform:rotate(5deg);display:flex;align-items:center;justify-content:center}
.mini-pencil{position:absolute;width:100px;height:25px;background:#ffd83d;border:3px solid var(--navy);border-radius:5px;transform:rotate(-25deg);top:25px;left:16px}
.mini-pencil:before{content:"";position:absolute;left:-23px;top:-3px;border-top:12px solid transparent;border-bottom:12px solid transparent;border-right:23px solid #f3c18d}
.mini-eraser{position:absolute;width:75px;height:45px;background:#ff78a8;border:3px solid var(--navy);border-radius:11px;right:13px;bottom:24px;transform:rotate(-12deg)}
.sticker-brand{position:absolute;left:22px;bottom:30px;background:#fff;border:3px solid var(--navy);border-radius:10px;padding:4px 6px;font:900 .72rem 'Nunito';transform:rotate(8deg)}


/* ==========================================================
   Integrated sr-brand.com product illustrations
   Inspired by the bold pencil + eraser logo.
   The brand name is part of each product design.
   ========================================================== */
.product-art.branded{
  background:
    repeating-linear-gradient(0deg,#fffdf6 0 27px,#b8e1fb 28px 30px);
  position:relative;
  min-height:230px;
  isolation:isolate;
}
.product-art.branded::before{
  content:"";
  position:absolute;
  left:22px; right:22px; bottom:18px;
  height:10px;
  background:rgba(23,32,42,.13);
  border-radius:50%;
  filter:blur(2px);
  z-index:-1;
}
.logo-product{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  min-height:230px;
}
.logo-product .brand-print{
  font:900 clamp(.72rem,2vw,1rem) Nunito,sans-serif;
  letter-spacing:-.5px;
  color:#17202a;
  white-space:nowrap;
}

/* Pencil */
.pencil-product{
  width:82%;
  height:54px;
  background:linear-gradient(180deg,#ffe76c 0%,#ffd21c 52%,#f2b900 100%);
  border:4px solid var(--navy);
  border-radius:9px 10px 10px 9px;
  transform:rotate(-18deg);
  box-shadow:5px 6px 0 rgba(23,32,42,.18);
  display:flex;
  align-items:center;
  justify-content:center;
}
.pencil-product::before{
  content:"";
  position:absolute;
  left:-44px;
  border-top:27px solid transparent;
  border-bottom:27px solid transparent;
  border-right:46px solid #eec39d;
}
.pencil-product::after{
  content:"";
  position:absolute;
  left:-52px;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-right:18px solid var(--navy);
  filter:drop-shadow(0 0 0 var(--navy));
}
.pencil-product .brand-print{
  transform:rotate(0deg);
}

/* Eraser */
.eraser-product{
  width:72%;
  height:100px;
  background:linear-gradient(145deg,#ffb2ca,#ff789e 55%,#e95279);
  border:4px solid var(--navy);
  border-radius:28px;
  transform:rotate(-9deg);
  box-shadow:7px 8px 0 rgba(23,32,42,.18), inset 9px 8px 0 rgba(255,255,255,.23);
  display:flex;
  align-items:center;
  justify-content:center;
}
.eraser-product .brand-print{font-size:1.15rem}

/* Notebook */
.notebook-product{
  width:66%;
  height:150px;
  background:
    repeating-linear-gradient(0deg,transparent 0 22px,#a7daf7 23px 25px),
    #fff;
  border:4px solid var(--navy);
  border-radius:8px 18px 18px 8px;
  transform:rotate(4deg);
  box-shadow:8px 8px 0 rgba(23,32,42,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.notebook-product::before{
  content:"";
  position:absolute;
  left:16px; top:0; bottom:0;
  width:3px;
  background:#ff668a;
}
.notebook-product::after{
  content:"sr-brand.com";
  background:var(--yellow);
  border:3px solid var(--navy);
  border-radius:10px;
  padding:7px 10px;
  font:900 .9rem Nunito,sans-serif;
  box-shadow:3px 3px 0 var(--navy);
}

/* Pencil pouch */
.pouch-product{
  width:76%;
  height:100px;
  background:linear-gradient(135deg,#72ead0,#36cda8);
  border:4px solid var(--navy);
  border-radius:20px 20px 28px 28px;
  transform:rotate(-3deg);
  box-shadow:7px 8px 0 rgba(23,32,42,.18);
  display:flex;
  align-items:center;
  justify-content:center;
}
.pouch-product::before{
  content:"";
  position:absolute;
  top:14px; left:9%; right:9%;
  height:9px;
  border:3px solid var(--navy);
  border-radius:999px;
  background:#fff7b0;
}
.pouch-product .brand-print{
  margin-top:25px;
  background:#fff;
  border:3px solid var(--navy);
  border-radius:9px;
  padding:5px 8px;
}

/* Cap */
.cap-product{
  width:70%;
  height:125px;
  position:relative;
  transform:rotate(-5deg);
}
.cap-product::before{
  content:"";
  position:absolute;
  width:150px;
  height:100px;
  left:28px;
  top:8px;
  background:linear-gradient(145deg,#ffe765,#ffd21c);
  border:4px solid var(--navy);
  border-radius:90px 90px 25px 25px;
  box-shadow:6px 7px 0 rgba(23,32,42,.18);
}
.cap-product::after{
  content:"";
  position:absolute;
  width:125px;
  height:42px;
  left:125px;
  top:78px;
  background:#f2b900;
  border:4px solid var(--navy);
  border-left:0;
  border-radius:0 45px 45px 0;
}
.cap-product .brand-print{
  position:absolute;
  z-index:2;
  left:51px;
  top:44px;
  background:#fff;
  border:3px solid var(--navy);
  border-radius:9px;
  padding:6px 8px;
  transform:rotate(4deg);
}

/* Sticker pack */
.sticker-product{
  width:150px;
  height:150px;
  border-radius:50%;
  background:var(--blue);
  border:5px solid var(--navy);
  box-shadow:8px 8px 0 rgba(23,32,42,.18);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sticker-product::before{
  content:"✏️";
  position:absolute;
  font-size:3.1rem;
  transform:rotate(-28deg);
  left:17px;
  top:48px;
}
.sticker-product::after{
  content:"";
  width:82px;
  height:54px;
  background:var(--pink);
  border:4px solid var(--navy);
  border-radius:18px;
  transform:rotate(-14deg);
}
.sticker-product .brand-print{
  position:absolute;
  z-index:3;
  font-size:.72rem;
  background:#fff;
  border:2px solid var(--navy);
  border-radius:8px;
  padding:3px 5px;
  transform:rotate(-8deg);
}

/* Keep the illustrations readable on small screens */
@media(max-width:560px){
  .pencil-product{width:74%}
  .eraser-product{width:68%}
  .pouch-product{width:70%}
  .cap-product{transform:scale(.88) rotate(-5deg)}
}

/* Product artwork taken directly from the Shop Our Products reference design */
.reference-art{padding:0;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.reference-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

.reference-art{padding:10px;background:#fff}
.reference-art img{width:100%;height:100%;object-fit:contain;object-position:center}

/* Clean product artwork: centered, fully visible, no image borders */
.reference-art{padding:8px;background:#fff;border-bottom:3px solid var(--navy)}
.reference-art img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}

/* Hover to zoom in on product images so shoppers can see the details */
.reference-art{cursor:zoom-in}
.reference-art img{transition:transform .35s ease}
.product:hover .reference-art img{transform:scale(1.75)}