/* Section 01 responsive artwork integration.
 * Images are ONLY the decorative media. All text, actions and UI are real HTML.
 * Breakpoints: >=1600 desktop, 901–1599 laptop, 481–900 tablet, <=480 mobile.
 * Adjust media URLs inside <picture> when moving to WordPress. */
.s1-hero{
  display:block;
  isolation:isolate;
  position:relative;
  background:#fffbf8;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:1916 / 821;
  overflow:hidden;
}
.s1-hero__media{position:absolute;inset:0;z-index:0;pointer-events:none}
.s1-hero__picture,.s1-hero__photo{display:block;width:100%;height:100%}
.s1-hero__photo{object-fit:cover;object-position:center;max-width:none}
.s1-hero__content{
  position:absolute;
  top:4.5%;
  left:clamp(24px,4.55vw,72px);
  width:45%;
  height:auto;
  padding:0;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.s1-hero__title{font-family:'Inter Display','Inter',Arial,sans-serif}
.s1-hero__description{max-width:90%;line-height:1.37;margin-block:12px 15px}
.s1-hero__features{
  z-index:3;
  position:absolute;
  left:clamp(24px,4.55vw,72px);
  bottom:4.1%;
  width:45%;
  display:grid;
  grid-template-columns:1.24fr .97fr .98fr 1.06fr;
  padding:0;
  gap:9px;
  margin:0;
  background:transparent;
}
.s1-hero__decorations{position:absolute;inset:0;z-index:1;pointer-events:none}
.s1-sticker--new{left:43.5%;top:7%;width:clamp(80px,10.1vw,154px);font-size:clamp(20px,2.65vw,40px)}
.s1-handdrawn--ticks{left:51%;top:32%}
.s1-handdrawn--motto{right:2%;top:17%;font-size:clamp(16px,2.05vw,30px)}
/* Laptop: keep text and imagery in their respective halves. */
@media (min-width:901px) and (max-width:1199px){
  .s1-hero__content{top:4.5%;width:47%}
  .s1-hero__title{font-size:5.5vw}
  .s1-hero__description{font-size:1.33vw}
  .s1-hero__features{width:46%;bottom:3.4%}
  .s1-feature{font-size:1.08vw}
  .s1-sticker--new{left:42%;top:6.5%}
  .s1-handdrawn--motto{top:18%}
}
/* Tablet and mobile: the type flows ABOVE the media, not on top of products. */
@media (max-width:900px){
  .s1-hero{display:flex;flex-direction:column;aspect-ratio:auto;height:auto;min-height:0;max-height:none;overflow:hidden}
  .s1-hero__content{position:relative;left:auto;top:auto;order:0;width:100%;height:auto;padding:31px 5% 0;z-index:3}
  .s1-hero__title{font-size:clamp(42px,6.55vw,62px)}
  .s1-hero__description{max-width:560px;font-size:clamp(14px,1.85vw,17px);margin:18px 0 18px}
  .s1-hero__media{position:relative;inset:auto;order:1;width:100%;height:auto;aspect-ratio:768 / 720;margin-top:-90px;z-index:1;flex:0 0 auto}
  .s1-hero__photo{object-fit:fill}
  .s1-hero__features{position:relative;left:auto;bottom:auto;order:2;margin:0;padding:17px 5% 23px;width:100%;max-width:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;background:#fffefb}
  .s1-feature{font-size:clamp(10px,1.55vw,14px);gap:7px}
  .s1-feature svg{width:30px;height:30px}
  .s1-sticker--new{left:13%;top:26%;width:clamp(74px,13vw,125px);font-size:clamp(20px,3vw,30px)}
  .s1-handdrawn--ticks{left:26%;top:48%}
  .s1-handdrawn--motto{right:5%;top:28%;font-size:clamp(17px,2.5vw,25px)}
}
@media (min-width:481px) and (max-width:700px){
 .s1-hero__media{margin-top:-50px}
 .s1-hero__title{font-size:clamp(42px,7.3vw,52px)}
}
@media (max-width:480px){
  .s1-hero__content{padding:25px 18px 0}
  .s1-hero__eyebrow{font-size:clamp(11px,3vw,14px);margin-bottom:10px}
  .s1-hero__title{font-size:clamp(32px,8.7vw,44px);line-height:.91}
  .s1-hero__description{font-size:clamp(12px,3.35vw,15px);margin:16px 0 14px;max-width:95%}
  .s1-hero__cta{height:48px;font-size:16px}
  .s1-hero__media{aspect-ratio:390 / 680;margin-top:-218px;z-index:1}
  .s1-hero__features{padding:17px 17px 22px;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}
  .s1-feature{font-size:clamp(10px,3vw,13px);gap:7px}
  .s1-feature svg{width:30px;height:30px}
  .s1-sticker--new{left:4%;top:51%;width:clamp(66px,18vw,90px);font-size:clamp(17px,4.5vw,25px)}
  .s1-handdrawn--ticks{left:23%;top:66%;transform:scale(.60)}
  .s1-handdrawn--motto{right:3%;top:49%;font-size:clamp(12px,3.35vw,18px)}
}
@media (max-width:360px){
  .s1-hero__content{padding:23px 14px 0}
  .s1-hero__title{font-size:8.5vw}
  .s1-hero__media{margin-top:-185px}
}
@media (prefers-reduced-motion:reduce){.s1-hero__cta{transition:none}}