/* Bayou Sticker Co. — Sticker Shop
   Scene: a pegboard of vinyl stickers on warm cream stock under shop lights.
   One hot magenta is the only chromatic voice — it does every interactive job.
   Everything is die-cut: white keyline, hard drop shadow, slight rotation. */

:root{
  --oat:#F7F2E9;
  --paper:#FFFFFF;
  --ink:#111111;
  --ink-2:rgba(17,17,17,.68);
  --ink-3:rgba(17,17,17,.46);
  --magenta:#FF2E95;
  --mist:#E8E5E0;

  --font:'Inter',system-ui,sans-serif;
  --page:1200px;
  --pad:clamp(20px,5vw,64px);

  /* die-cut card shadow: deep and diffuse, plus a tight contact shadow */
  --lift:0 32px 80px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.08);
}

*,*::before,*::after{ box-sizing:border-box; }

/* height:auto is required: the width/height attributes on every <img> would
   otherwise beat aspect-ratio and render images at their intrinsic height. */
img{ max-width:100%; height:auto; }

body{
  margin:0; background:var(--oat); color:var(--ink);
  font-family:var(--font); font-size:clamp(16px,1.05vw,18px); line-height:1.55;
  letter-spacing:-.002em;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ margin:0; line-height:.94; letter-spacing:-.035em; }
h1,h2{ font-weight:900; font-style:italic; }   /* the signature: display always leans */
h3{ font-weight:800; letter-spacing:-.02em; line-height:1.1; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--magenta); outline-offset:3px; }

.label{ font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--magenta); margin:0 0 14px; }

/* ---- buttons: always a full pill, magenta or outlined, never anything else */
.btn{
  display:inline-block; cursor:pointer; text-decoration:none; text-align:center;
  background:var(--magenta); color:#fff; border:2px solid var(--magenta);
  border-radius:99px; padding:12px 24px;
  font-family:var(--font); font-weight:700; font-size:15px; letter-spacing:-.01em;
  transition:transform .16s cubic-bezier(.2,.8,.3,1.2), background .16s ease, color .16s ease;
}
.btn:hover{ transform:translateY(-3px) rotate(-1.2deg); }
.btn-lg{ padding:16px 32px; font-size:17px; }
.btn-wide{ display:block; width:100%; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--oat); }

/* ---- nav */
.nav{
  max-width:var(--page); margin:0 auto; padding:20px var(--pad);
  display:flex; align-items:center; gap:22px;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:19px; letter-spacing:-.035em; text-decoration:none; }
.dot{ width:16px; height:16px; border-radius:50%; background:var(--magenta); box-shadow:0 0 0 4px var(--paper), 0 2px 6px rgba(0,0,0,.18); }
.links{ display:flex; gap:26px; margin-left:auto; }
.links a{ font-size:15px; font-weight:600; text-decoration:none; color:var(--ink-2); }
.links a:hover{ color:var(--magenta); }
@media (max-width:860px){ .links{ display:none; } .nav .btn{ margin-left:auto; } }

/* ---- hero */
.hero{ position:relative; max-width:var(--page); margin:0 auto; padding:clamp(30px,5vw,64px) var(--pad) clamp(48px,6vw,80px); }
.eyebrow{ font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--ink-3); margin:0 0 20px; }
.hero h1{ font-size:clamp(52px,10.5vw,132px); margin-bottom:28px; }
.hero h1 em{ font-style:italic; color:var(--magenta); }
.hero .lede{ font-size:clamp(17px,1.5vw,21px); color:var(--ink-2); max-width:44ch; margin:0 0 32px; }
.hero-btns{ display:flex; flex-wrap:wrap; gap:12px; }

/* scattered stickers, die-cut: white keyline + hard shadow + rotation */
.hero-stickers{ position:absolute; inset:0; pointer-events:none; }
.stk{ position:absolute; display:block; width:clamp(64px,9vw,124px); filter:drop-shadow(0 10px 20px rgba(0,0,0,.24)); }
.stk svg{ width:100%; height:auto; display:block; }
.stk--1{ top:12%; right:6%;  transform:rotate(-12deg); }
.stk--2{ top:44%; right:15%; transform:rotate(7deg); }
.stk--3{ top:68%; right:4%;  transform:rotate(-20deg); }
.stk--4{ top:22%; right:30%; transform:rotate(14deg); }
@media (max-width:900px){ .hero-stickers{ display:none; } }
@media (prefers-reduced-motion:no-preference){
  .stk{ transition:transform .4s cubic-bezier(.2,.8,.3,1.2); }
  .hero:hover .stk{ transform:rotate(0deg); }   /* they straighten as you approach */
}

/* ---- scrolling band */
.band{ background:var(--ink); overflow:hidden; padding:15px 0; }
.band-track{ display:flex; align-items:center; gap:22px; white-space:nowrap; width:max-content; }
.band span{ font-weight:900; font-style:italic; font-size:clamp(19px,2.4vw,29px); letter-spacing:-.03em; color:var(--oat); }
.band i{ width:11px; height:11px; border-radius:50%; background:var(--magenta); flex:none; }
@media (prefers-reduced-motion:no-preference){
  .band-track{ animation:march 26s linear infinite; }
}
@keyframes march{ to{ transform:translateX(-50%); } }

/* ---- sections */
.section{ max-width:var(--page); margin:0 auto; padding:clamp(56px,7vw,104px) var(--pad); }
.section--ink{ max-width:none; background:var(--ink); color:var(--oat); }
.section--ink > *{ max-width:var(--page); margin-inline:auto; }
.head{ max-width:46ch; margin-bottom:clamp(30px,4vw,50px); }
.head h2{ font-size:clamp(34px,5vw,68px); }
.head .sub{ color:var(--ink-2); margin:18px 0 0; font-size:17px; }
.section--ink .head .sub{ color:rgba(247,242,233,.7); }

/* ---- product cards: 44px radius, deep lift, art panel on top */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:22px; }
.card{
  background:var(--paper); border-radius:44px; padding:22px 26px 30px;
  box-shadow:var(--lift);
  transition:transform .2s cubic-bezier(.2,.8,.3,1.2);
}
.card:hover{ transform:translateY(-6px) rotate(-.8deg); }
.art{ border-radius:26px; margin-bottom:22px; padding:20px; background:var(--oat); }
.art svg{ width:100%; height:auto; display:block; }
.art--b{ background:#FFE9F4; } .art--c{ background:#F1ECFF; }
.art--d{ background:#FFF6D6; } .art--e{ background:#E9F7F1; } .art--f{ background:#FFE9F4; }
.card h3{ font-size:23px; margin-bottom:10px; }
.card p{ margin:0 0 12px; color:var(--ink-2); font-size:16px; }
.from{ margin:0 !important; font-weight:700; font-size:14px !important; color:var(--magenta) !important; }

/* ---- steps */
.steps{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:32px 28px; }
.num{
  display:grid; place-items:center; width:52px; height:52px; margin-bottom:20px;
  border-radius:50%; background:var(--magenta); color:#fff;
  font-weight:900; font-style:italic; font-size:24px;
}
.steps h3{ font-size:24px; margin-bottom:11px; }
.steps p{ margin:0; color:rgba(247,242,233,.7); font-size:16px; }

/* ---- quote form */
.quote-wrap{
  background:var(--paper); border-radius:44px; padding:clamp(28px,4vw,52px);
  box-shadow:var(--lift);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start;
}
@media (max-width:880px){ .quote-wrap{ grid-template-columns:1fr; } }
.quote-wrap .head{ margin-bottom:0; }
.form label{ display:block; margin-bottom:14px; }
.form span{ display:block; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:7px; }
.form input,.form select,.form textarea{
  width:100%; font-family:var(--font); font-size:16px; color:var(--ink);
  background:var(--oat); border:2px solid var(--mist); border-radius:99px; padding:13px 18px;
}
.form textarea{ border-radius:26px; resize:vertical; }
.form input:focus,.form select:focus,.form textarea:focus{ border-color:var(--magenta); outline:none; }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .form .row{ grid-template-columns:1fr; } }
.sent{ margin:14px 0 0; font-size:15px; font-weight:600; color:var(--magenta); text-align:center; }

/* ---- footer */
.foot{ max-width:var(--page); margin:0 auto; padding:clamp(40px,5vw,72px) var(--pad); color:var(--ink-2); font-size:16px; }
.foot p{ margin:0 0 8px; }
.foot-mark{ font-weight:900; font-style:italic; font-size:30px; letter-spacing:-.035em; color:var(--ink); }
.fine{ margin-top:22px; font-size:13px; color:var(--ink-3); line-height:1.7; max-width:62ch; }

/* ---- demo tag */
.demo-tag{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:flex; flex-direction:column; gap:1px;
  background:var(--magenta); color:#fff;
  padding:11px 18px; border-radius:99px; text-decoration:none; text-align:center;
  font-size:11px; letter-spacing:.04em; line-height:1.5;
  box-shadow:0 10px 26px rgba(255,46,149,.4);
}
.demo-tag span{ opacity:.78; text-transform:uppercase; font-size:9.5px; letter-spacing:.13em; }
.demo-tag strong{ font-weight:800; font-size:12px; }
.demo-tag:hover{ background:var(--ink); }


/* ---- photographed product, cropped square inside the same die-cut frame */
.art--photo{ padding:0; overflow:hidden; background:var(--oat); }
.art--photo img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }