/* ============================================================
   THE YOU MATTER GUY - Jonathan Chiaramonte
   High-energy: bold color, kinetic type, motion everywhere.
   ============================================================ */

:root{
  /* base */
  --ink:#120E0A;
  --brown:#2A2018;
  --brown-2:#3B2E22;
  --brown-3:#544233;
  --gold:#C5A55A;
  --gold-bright:#F0D28A;
  --gold-deep:#9C7C34;
  --cream:#FBF6EA;
  --cream-2:#F1E7D2;
  --paper:#FFFDF7;
  --muted:#6E6152;

  /* joy accents */
  --flare:#FF6B35;
  --teal:#17B8A6;
  --pink:#EC4E86;
  --sun:#FFC93C;
  --violet:#9B6BF5;

  --line:rgba(42,32,24,.14);
  --shadow:0 18px 44px -22px rgba(18,14,10,.45);
  --shadow-lg:0 34px 70px -30px rgba(18,14,10,.6);
  --shadow-pop:0 10px 0 rgba(18,14,10,.9);
  --r:16px;
  --wrap:1180px;
  --display:"Archivo Black","Arial Black",Impact,sans-serif;
  --fun:"Bungee","Archivo Black",Impact,sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
/* clip (not hidden) so rotated marquees + hero blobs can't create a sideways
   scrollbar, while position:sticky on the header keeps working */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  color:var(--brown);
  background:var(--paper);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.02;letter-spacing:-.015em;margin:0}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
:focus-visible{outline:3px solid var(--flare);outline-offset:3px;border-radius:6px}

.wrap{width:min(100% - 2.5rem, var(--wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - 2.5rem, 840px);margin-inline:auto}
.section{padding:clamp(3.5rem,8vw,6.5rem) 0;position:relative}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Scroll progress ---------- */
.progress{
  position:fixed;top:0;left:0;height:4px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--gold),var(--flare),var(--pink));
  transition:width .1s linear;
}

/* ---------- Type helpers ---------- */
.eyebrow{
  font-family:var(--body);font-weight:800;font-size:.74rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--flare);margin:0 0 1rem;
}
.eyebrow--light{color:var(--sun)}
.h-xl{font-size:clamp(2.6rem,7.4vw,5.2rem);text-transform:uppercase}
.h-lg{font-size:clamp(2.1rem,5vw,3.5rem);text-transform:uppercase}
.lede{font-size:clamp(1.06rem,1.7vw,1.3rem);line-height:1.6;color:var(--brown-3)}
.section--brown .lede,.section--ink .lede{color:rgba(251,246,234,.82)}

/* gradient text */
.grad{
  background:linear-gradient(100deg,var(--gold-bright),var(--flare) 55%,var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.grad-warm{
  background:linear-gradient(100deg,var(--flare),var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* outlined kinetic text */
.outline{
  color:transparent;-webkit-text-stroke:2px var(--gold);
}

.rule{height:6px;width:80px;border-radius:99px;margin:1.4rem 0;
  background:linear-gradient(90deg,var(--gold),var(--flare));}
.rule--center{margin-inline:auto}

/* ---------- Buttons ----------
   Deliberately plain. Square-ish 4px radius, solid fill, a single colour
   change on hover. No pill radius, no gradient shine sweep, no scale bounce,
   no pulsing halo - that stack reads as template decoration rather than a
   real product button. Press state is a 1px nudge, nothing more. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--body);font-weight:700;font-size:.92rem;letter-spacing:.03em;
  text-transform:uppercase;
  padding:.9rem 1.6rem;border-radius:4px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;line-height:1;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn:active{transform:translateY(1px)}

.btn--gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn--gold:hover{background:var(--gold-bright);border-color:var(--gold-bright)}
.btn--flare{background:var(--flare);border-color:var(--flare);color:#fff}
.btn--flare:hover{background:#E8551F;border-color:#E8551F}
.btn--dark{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.btn--dark:hover{background:var(--brown-2);border-color:var(--brown-2)}
.btn--ghost{background:transparent;border-color:var(--brown);color:var(--brown)}
.btn--ghost:hover{background:var(--brown);color:var(--cream)}
.btn--ghost-light{background:transparent;border-color:rgba(251,246,234,.45);color:var(--cream)}
.btn--ghost-light:hover{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.btn--lg{padding:1.05rem 2rem;font-size:.96rem}
.btn--block{width:100%}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;background:rgba(18,14,10,.92);
  backdrop-filter:saturate(150%) blur(12px);border-bottom:2px solid rgba(197,165,90,.3);
}
.header__inner{display:flex;align-items:center;gap:1.25rem;min-height:76px;position:relative}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto}
.logo__mark{
  width:44px;height:44px;flex:none;border-radius:12px;
  background:linear-gradient(145deg,var(--gold-bright),var(--flare));
  display:grid;place-items:center;font-family:var(--display);font-size:.95rem;color:var(--ink);
  letter-spacing:-.03em;transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.logo:hover .logo__mark{transform:rotate(-10deg) scale(1.08)}
.logo__text{display:flex;flex-direction:column;line-height:1}
.logo__text b{font-family:var(--display);font-size:1rem;color:var(--cream);text-transform:uppercase;font-weight:400}
.logo__text span{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:.3rem;font-weight:700}

.nav{display:flex;align-items:center;gap:.2rem}
/* :not(.btn) - otherwise these leak onto the header CTA and squash it */
.nav a:not(.btn){
  position:relative;text-decoration:none;color:rgba(251,246,234,.8);font-weight:700;font-size:.9rem;
  padding:.55rem .8rem;border-radius:8px;transition:color .16s ease;
}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:.8rem;right:.8rem;bottom:.3rem;height:3px;border-radius:3px;
  background:linear-gradient(90deg,var(--gold),var(--flare));
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.nav a:not(.btn):hover{color:var(--cream)}
.nav a:not(.btn):hover::after{transform:scaleX(1)}
.nav a:not(.btn)[aria-current="page"]{color:var(--sun)}
.nav a:not(.btn)[aria-current="page"]::after{transform:scaleX(1)}
.header__cta{margin-left:.7rem}
.nav-toggle{
  display:none;background:none;border:2px solid rgba(197,165,90,.5);color:var(--cream);
  border-radius:10px;padding:.55rem .7rem;cursor:pointer;font:inherit;
}
.nav-toggle i{display:block;width:20px;height:2.5px;background:currentColor;margin:4px 0;border-radius:2px;transition:transform .25s ease,opacity .2s ease}
.nav-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:960px){
  .nav-toggle{display:block}
  .nav{
    position:absolute;top:100%;left:-1.25rem;right:-1.25rem;background:var(--ink);flex-direction:column;
    align-items:stretch;gap:0;padding:.6rem 1.25rem 1.4rem;border-bottom:2px solid rgba(197,165,90,.3);
    display:none;
  }
  .nav.is-open{display:flex;animation:dropIn .3s ease both}
  .nav a:not(.btn){padding:.9rem .4rem;border-bottom:1px solid rgba(251,246,234,.08)}
  .header__cta{margin:1rem 0 0}
}
@keyframes dropIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* ---------- HERO ---------- */
.hero{
  position:relative;overflow:hidden;background:var(--ink);color:var(--cream);
  padding:clamp(3rem,8vw,6rem) 0 clamp(4rem,8vw,6rem);
}
/* drifting aurora blobs */
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;z-index:0}
.blob--1{width:46vw;height:46vw;background:var(--gold);top:-14%;left:-8%;animation:drift1 17s ease-in-out infinite alternate}
.blob--2{width:38vw;height:38vw;background:var(--flare);bottom:-18%;right:-6%;opacity:.38;animation:drift2 21s ease-in-out infinite alternate}
.blob--3{width:28vw;height:28vw;background:var(--teal);top:38%;right:26%;opacity:.24;animation:drift3 25s ease-in-out infinite alternate}
@keyframes drift1{to{transform:translate(9vw,7vh) scale(1.18)}}
@keyframes drift2{to{transform:translate(-11vw,-6vh) scale(1.13)}}
@keyframes drift3{to{transform:translate(6vw,-9vh) scale(.85)}}

/* floating confetti */
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.confetti i{
  position:absolute;display:block;width:11px;height:11px;border-radius:3px;opacity:.75;
  animation:rise linear infinite;
}
@keyframes rise{
  0%{transform:translateY(110%) rotate(0deg);opacity:0}
  10%{opacity:.8}
  90%{opacity:.8}
  100%{transform:translateY(-140%) rotate(540deg);opacity:0}
}

.hero__inner{
  position:relative;z-index:3;max-width:900px;margin-inline:auto;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}

/* secondary tagline, given a real job at the top of the hero */
.welcome{
  display:inline-flex;align-items:center;gap:.65rem;margin:0 0 1.5rem;
  font-size:clamp(.6rem,1.4vw,.72rem);font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sun);background:rgba(197,165,90,.1);border:2px solid rgba(197,165,90,.42);
  padding:.62rem 1.25rem;border-radius:99px;
  animation:popIn .6s cubic-bezier(.34,1.56,.64,1) both;
}
.welcome::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--sun);flex:none;
  animation:blink 2.4s ease-in-out infinite;
}
@keyframes blink{50%{opacity:.25}}

/* inline roles - one line, middot separated */
.hero__kicker{
  margin:0 0 1.4rem;font-size:clamp(.6rem,1.5vw,.78rem);font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.hero__kicker i{font-style:normal;color:var(--flare);margin:0 .3em}

@keyframes popIn{from{opacity:0;transform:scale(.7)}}

/* "CHIARAMONTE" renders at a MEASURED 8.17em of advance in Archivo Black
   (11 wide caps at -.02em tracking). So font-size must stay under
   container-width / 8.17. The container is min(100vw - 2.5rem, 900px).
   6rem cap  -> 784px of text inside a 900px column (116px headroom)
   9.5vw     -> keeps every width from 280px up inside its box
   1.6rem    -> floor for absurdly narrow screens (Galaxy Fold outer, 280px)
   Verified by measuring rendered text width at 280/320/375/480/768/1024/1440/1920.
   Re-measure if you change the family, tracking, or the 900px column. */
.hero h1{
  font-size:clamp(1.6rem,9.5vw,6rem);text-transform:uppercase;color:var(--cream);
  line-height:.92;letter-spacing:-.02em;max-width:100%;
}
.hero h1 span{display:block;animation:slideUp .7s cubic-bezier(.22,1,.36,1) both}
.hero h1 span:nth-child(1){animation-delay:.12s}
.hero h1 span:nth-child(2){animation-delay:.26s}
@keyframes slideUp{from{opacity:0;transform:translateY(40px)}}

/* the three words as ONE bold line, the way the brand writes them */
.hero__tagline{
  font-family:var(--display);text-transform:uppercase;letter-spacing:-.01em;
  font-size:clamp(1rem,3.5vw,2.1rem);margin:1.5rem 0 0;
  background:linear-gradient(100deg,var(--gold-bright),var(--flare) 60%,var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:popIn .6s cubic-bezier(.34,1.56,.64,1) .4s both;
}

.hero__sub{
  font-size:clamp(1rem,1.5vw,1.12rem);color:rgba(251,246,234,.8);
  max-width:56ch;margin:1.35rem auto 2.2rem;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}

/* You Matter Experience lockup - flat gold card with a printed-poster feel */
.emblem{
  position:relative;aspect-ratio:1/1;max-width:400px;margin-inline:auto;
  display:grid;place-items:center;text-align:center;padding:2rem;color:var(--ink);
  border-radius:24px;box-shadow:var(--shadow-lg);
  background:linear-gradient(150deg,var(--gold-bright) 0%,var(--gold) 48%,var(--gold-deep) 100%);
}
.emblem::before{
  content:"";position:absolute;inset:14px;border:3px solid rgba(18,14,10,.26);border-radius:16px;
}
/* fine diagonal hatch so it reads as a designed panel, not a wireframe box */
.emblem::after{
  content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;opacity:.55;
  background-image:repeating-linear-gradient(135deg,rgba(18,14,10,.055) 0 2px,transparent 2px 10px);
}
.emblem__inner{position:relative;z-index:3;padding:1rem}
.emblem__line{font-family:var(--display);font-size:clamp(2rem,5.5vw,3.2rem);text-transform:uppercase;line-height:.92}
.emblem__u{margin-top:.85rem;font-size:.62rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:rgba(18,14,10,.75)}
.emblem__badge{
  position:absolute;z-index:4;bottom:-17px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--sun);font-size:.6rem;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;padding:.62rem 1.15rem;border-radius:99px;white-space:nowrap;
  border:2px solid var(--sun);
}

/* sticker */
.sticker{
  position:absolute;z-index:5;font-family:var(--fun);font-size:.72rem;text-transform:uppercase;
  background:var(--ink);color:var(--sun);padding:.75rem 1.05rem;border-radius:14px;
  border:2px solid var(--sun);box-shadow:var(--shadow);
  animation:wiggle 3.5s ease-in-out infinite;
}
.sticker--tr{top:2%;right:-2%;transform:rotate(8deg)}
.sticker--bl{bottom:2%;left:-3%;transform:rotate(-7deg);background:var(--pink);color:#fff;border-color:#fff}
@keyframes wiggle{
  0%,100%{rotate:0deg;translate:0 0}
  50%{rotate:-4deg;translate:0 -7px}
}

@media (max-width:880px){
  .emblem{max-width:300px;margin-top:1.5rem}
}

/* ---------- MARQUEE ---------- */
.marquee{
  overflow:hidden;white-space:nowrap;position:relative;
  padding:.95rem 0;border-block:3px solid var(--ink);
}
.marquee--gold{background:var(--gold);color:var(--ink);transform:rotate(-1.6deg);margin:2.5rem 0}
.marquee--flare{background:var(--flare);color:#fff;border-color:#fff;transform:rotate(1.4deg);margin:-3.2rem 0 2.5rem}
.marquee--ink{background:var(--ink);color:var(--sun);border-color:var(--gold)}
.marquee__track{display:inline-flex;gap:2.2rem;align-items:center;will-change:transform;animation:scroll 26s linear infinite}
.marquee--flare .marquee__track{animation-duration:32s;animation-direction:reverse}
.marquee__track span{font-family:var(--fun);font-size:clamp(1rem,2.2vw,1.5rem);text-transform:uppercase;letter-spacing:.02em}
.marquee__track span.dot{color:currentColor;opacity:.55}
@keyframes scroll{to{transform:translateX(-50%)}}
.marquee-stack{position:relative;z-index:4;padding:1.5rem 0}

/* ---------- STATS ---------- */
.stats{background:var(--ink);color:var(--cream);padding:clamp(2.5rem,5vw,3.5rem) 0;position:relative;overflow:hidden}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;text-align:center;position:relative;z-index:2}
.stat b{
  display:block;font-family:var(--display);font-size:clamp(1.9rem,5vw,3.4rem);line-height:1;
  background:linear-gradient(160deg,var(--gold-bright),var(--flare));
  -webkit-background-clip:text;background-clip:text;color:transparent;font-weight:400;
}
.stat span{display:block;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(251,246,234,.68);margin-top:.6rem;font-weight:700}
@media (max-width:720px){.stats__grid{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}}

/* ---------- Sections ---------- */
.section--cream{background:var(--cream)}
.section--brown{background:var(--brown);color:var(--cream)}
.section--ink{background:var(--ink);color:var(--cream)}
.sec-head{max-width:64ch;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head.center{margin-inline:auto}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
@media (max-width:880px){.split{grid-template-columns:1fr}}

/* ---------- Cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:1.4rem}
.card{
  position:relative;background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);
  padding:2rem 1.6rem 1.8rem;overflow:hidden;box-shadow:var(--shadow-pop);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:var(--gold)}
.card:nth-child(6n+2)::before{background:var(--flare)}
.card:nth-child(6n+3)::before{background:var(--teal)}
.card:nth-child(6n+4)::before{background:var(--pink)}
.card:nth-child(6n+5)::before{background:var(--sun)}
.card:nth-child(6n+6)::before{background:var(--violet)}
.card:hover{transform:translate(-3px,-6px) rotate(-.6deg);box-shadow:0 16px 0 rgba(18,14,10,.9)}
.card__num{
  font-family:var(--fun);font-size:1.5rem;color:var(--ink);opacity:.16;
  position:absolute;top:1.1rem;right:1.2rem;line-height:1;
}
.card h3{font-size:1.22rem;text-transform:uppercase;margin-bottom:.7rem;color:var(--ink);padding-right:2.5rem}
.card p{color:var(--muted);font-size:.97rem;margin:0}

/* ---------- Banner ---------- */
.banner{
  background:linear-gradient(120deg,var(--gold) 0%,var(--sun) 45%,var(--flare) 100%);
  color:var(--ink);text-align:center;padding:clamp(3rem,7vw,5.5rem) 0;position:relative;overflow:hidden;
}
.banner::before{content:"";position:absolute;inset:16px;border:3px dashed rgba(18,14,10,.28);border-radius:20px;pointer-events:none}
.banner h2{font-size:clamp(2rem,6vw,4rem);text-transform:uppercase;position:relative}
.banner p{margin:1.1rem 0 0;font-family:var(--fun);letter-spacing:.06em;text-transform:uppercase;font-size:clamp(.72rem,1.6vw,.95rem);position:relative}

/* ---------- Program rows ---------- */
.program{
  display:grid;grid-template-columns:96px minmax(0,1fr);gap:1.6rem;
  padding:2.3rem 0;border-top:3px solid var(--line);
}
.program:first-of-type{border-top:0;padding-top:0}
.program__idx{
  font-family:var(--fun);font-size:2.7rem;line-height:1;
  background:linear-gradient(160deg,var(--gold),var(--flare));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.program:nth-of-type(2) .program__idx{background:linear-gradient(160deg,var(--flare),var(--pink));-webkit-background-clip:text;background-clip:text}
.program:nth-of-type(3) .program__idx{background:linear-gradient(160deg,var(--teal),var(--gold));-webkit-background-clip:text;background-clip:text}
.program:nth-of-type(4) .program__idx{background:linear-gradient(160deg,var(--pink),var(--violet));-webkit-background-clip:text;background-clip:text}
.program:nth-of-type(5) .program__idx{background:linear-gradient(160deg,var(--sun),var(--flare));-webkit-background-clip:text;background-clip:text}
.program:nth-of-type(6) .program__idx{background:linear-gradient(160deg,var(--violet),var(--teal));-webkit-background-clip:text;background-clip:text}
.program h3{font-size:clamp(1.35rem,2.8vw,1.9rem);text-transform:uppercase;margin-bottom:.6rem;color:var(--ink)}
.program__for{
  display:inline-block;margin-top:1rem;font-size:.7rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);background:var(--sun);
  padding:.48rem .9rem;border-radius:99px;border:2px solid var(--ink);
}
@media (max-width:640px){.program{grid-template-columns:1fr;gap:.5rem}.program__idx{font-size:2.1rem}}

/* ---------- Lists / steps ---------- */
.ticks{list-style:none;padding:0;margin:1.25rem 0 0;display:grid;gap:.75rem}
.ticks li{position:relative;padding-left:2rem;color:var(--brown-3)}
.ticks li::before{
  content:"";position:absolute;left:0;top:.5em;width:13px;height:13px;border-radius:50%;
  background:var(--flare);box-shadow:0 0 0 4px rgba(255,107,53,.22);
}
.section--brown .ticks li,.section--ink .ticks li{color:rgba(251,246,234,.84)}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1.9rem;counter-reset:step}
.step{position:relative;padding-top:3.2rem}
.step::before{
  counter-increment:step;content:counter(step);position:absolute;top:0;left:0;
  width:46px;height:46px;border-radius:14px;background:var(--gold);color:var(--ink);
  display:grid;place-items:center;font-family:var(--fun);font-size:1.1rem;
  transform:rotate(-6deg);transition:transform .25s cubic-bezier(.34,1.56,.64,1);
}
.step:nth-child(2)::before{background:var(--flare);color:#fff}
.step:nth-child(3)::before{background:var(--teal);color:#04241F}
.step:nth-child(4)::before{background:var(--pink);color:#fff}
.step:hover::before{transform:rotate(6deg) scale(1.1)}
.step h3{font-size:1.08rem;text-transform:uppercase;margin-bottom:.5rem}
.step p{font-size:.95rem;color:var(--muted);margin:0}
.section--brown .step p,.section--ink .step p{color:rgba(251,246,234,.76)}

/* ---------- SHOP ---------- */
.shop-note{
  background:var(--cream-2);border:3px solid var(--ink);border-radius:var(--r);
  padding:1.15rem 1.35rem;font-size:.95rem;color:var(--brown-3);margin-bottom:2.5rem;
  box-shadow:var(--shadow-pop);
}
.shop-note b{color:var(--ink)}
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.8rem}
.product{
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-pop);display:flex;flex-direction:column;
  transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
.product:hover{transform:translate(-3px,-6px);box-shadow:0 16px 0 rgba(18,14,10,.9)}
.product__media{
  position:relative;background:linear-gradient(150deg,var(--cream) 0%,var(--cream-2) 100%);
  border-bottom:3px solid var(--ink);overflow:hidden;
}
.product__media img{width:100%;aspect-ratio:1/1;object-fit:contain;padding:1rem;transition:transform .5s ease}
.product:hover .product__media img{transform:scale(1.06) rotate(-1deg)}
.product__flag{
  position:absolute;top:12px;left:12px;z-index:2;font-family:var(--fun);font-size:.6rem;
  text-transform:uppercase;letter-spacing:.04em;padding:.5rem .8rem;border-radius:10px;
  background:var(--flare);color:#fff;border:2px solid var(--ink);transform:rotate(-4deg);
}
.product__flag--gold{background:var(--gold);color:var(--ink)}
.product__body{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.product__body h3{font-size:1.2rem;text-transform:uppercase;margin-bottom:.5rem;color:var(--ink)}
.product__body p{font-size:.94rem;color:var(--muted)}
.product__price{
  font-family:var(--fun);font-size:1.5rem;margin:1rem 0 .4rem;
  background:linear-gradient(120deg,var(--flare),var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.product__meta{font-size:.8rem;color:var(--muted);margin-bottom:1.2rem}
.product .btn{margin-top:auto}
.product__sold{
  display:flex;align-items:center;gap:.5rem;margin-top:.9rem;font-size:.78rem;color:var(--muted);
  justify-content:center;text-align:center;
}

/* ---------- Forms ---------- */
.forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:1.9rem;align-items:start}
.form-card{
  background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);
  padding:clamp(1.5rem,3vw,2.3rem);box-shadow:var(--shadow-pop);position:relative;
}
.form-card h2{font-size:1.4rem;text-transform:uppercase;margin-bottom:.5rem;color:var(--ink)}
.form-intro{font-size:.95rem;color:var(--muted);margin-bottom:1.5rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
@media (max-width:520px){.form-row{grid-template-columns:1fr}}
.form-card label{display:block;font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--brown-3);margin-bottom:1rem}
.form-card input,.form-card select,.form-card textarea{
  display:block;width:100%;margin-top:.45rem;padding:.85rem .95rem;border:2px solid var(--line);
  border-radius:11px;background:var(--paper);font:inherit;font-size:1rem;color:var(--brown);
  font-weight:400;letter-spacing:normal;text-transform:none;transition:border-color .18s ease,box-shadow .18s ease;
}
.form-card textarea{resize:vertical;min-height:120px}
.form-card input:focus,.form-card select:focus,.form-card textarea:focus{
  border-color:var(--flare);outline:none;box-shadow:0 0 0 4px rgba(255,107,53,.2);
}
.form-note{font-size:.84rem;color:var(--muted);margin-top:.9rem;text-align:center}
.hp-field{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}

/* ---------- Contact rail ---------- */
.contact-rail{display:grid;gap:1rem}
.contact-item{
  display:flex;gap:1rem;align-items:center;background:var(--paper);border:3px solid var(--ink);
  border-radius:var(--r);padding:1.2rem 1.3rem;text-decoration:none;box-shadow:var(--shadow-pop);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease;
}
.contact-item:hover{transform:translate(-3px,-5px);box-shadow:0 14px 0 rgba(18,14,10,.9)}
.ci-ico{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;color:var(--ink)}
.contact-item:nth-child(1) .ci-ico{background:var(--gold)}
.contact-item:nth-child(2) .ci-ico{background:var(--pink);color:#fff}
.contact-item:nth-child(3) .ci-ico{background:var(--teal)}
.contact-item b{display:block;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.contact-item span{display:block;font-weight:700;color:var(--ink);margin-top:.2rem;word-break:break-word}

/* ---------- Page head ---------- */
.page-head{background:var(--ink);color:var(--cream);padding:clamp(3rem,6vw,5rem) 0;position:relative;overflow:hidden}
.page-head > .wrap{position:relative;z-index:3}
.page-head h1{font-size:clamp(2.3rem,7vw,4.4rem);text-transform:uppercase;color:var(--cream)}
.page-head p{color:rgba(251,246,234,.82);max-width:58ch;margin:1.3rem 0 0;font-size:clamp(1rem,1.6vw,1.18rem)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:rgba(251,246,234,.72);padding:clamp(2.75rem,5vw,4rem) 0 2rem;font-size:.94rem}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:2rem;padding-bottom:2.25rem;border-bottom:2px solid rgba(251,246,234,.12)}
@media (max-width:760px){.footer__grid{grid-template-columns:1fr;gap:2rem}}
.footer__grid h4{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sun);margin-bottom:1rem;font-family:var(--body);font-weight:800}
.footer__links{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.footer__links a{text-decoration:none;color:rgba(251,246,234,.72);transition:color .16s ease,transform .16s ease;display:inline-block}
.footer__links a:hover{color:var(--sun);transform:translateX(4px)}
.socials{display:flex;gap:.6rem;margin-top:1.2rem}
.socials a{
  width:46px;height:46px;border-radius:13px;border:2px solid rgba(197,165,90,.4);display:grid;place-items:center;
  color:var(--gold);transition:background .2s ease,color .2s ease,transform .25s cubic-bezier(.34,1.56,.64,1);
}
.socials a:hover{background:var(--flare);color:#fff;border-color:var(--flare);transform:translateY(-4px) rotate(-8deg)}
.footer__bottom{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;padding-top:1.5rem;font-size:.83rem;color:rgba(251,246,234,.5)}
.footer__bottom a{color:rgba(251,246,234,.65)}

/* ---------- Reveal ----------
   Hidden ONLY when html.js is set by the inline head script. If JS never
   runs (blocked, failed, disabled) the content simply renders visible. */
.reveal{transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0s)}
html.js .reveal{opacity:0;transform:translateY(28px)}
html.js .reveal--left{transform:translateX(-36px)}
html.js .reveal--right{transform:translateX(36px)}
html.js .reveal--zoom{transform:scale(.9)}
html.js .reveal.is-in{opacity:1;transform:none}

/* ---------- Confetti burst canvas ---------- */
.burst{position:fixed;inset:0;pointer-events:none;z-index:999}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  /* must out-specify `html.js .reveal` above, or reduced-motion users
     would be left looking at permanently invisible content */
  html.js .reveal,html.js .reveal--left,html.js .reveal--right,html.js .reveal--zoom{opacity:1;transform:none}
  .marquee__track{animation:none}
  .blob{animation:none}
  .confetti{display:none}
  .marquee--gold,.marquee--flare{transform:none;margin:2rem 0}
}