/* Classic Supps — Creatine landing. Style: editorial, oversized type, B&W halftone photos + Classic red. */
:root{
  --red:#D8171F;
  --red-deep:#9E0E15;
  --ink:#0A0A0A;
  --ink-2:#161616;
  --paper:#F3F1EC;
  --paper-2:#E8E5DE;
  --mute:#7A7873;
  --line:rgba(10,10,10,.14);
  --line-d:rgba(243,241,236,.18);
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --gut:clamp(16px,3.2vw,48px);
  --f-head:"Archivo",system-ui,sans-serif;
  --f-serif:"Instrument Serif",Georgia,serif;
  --f-script:"Yellowtail",cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--f-head);font-size:16px;line-height:1.55;font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* grain overlay */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ---------- type ---------- */
.display{font-weight:900;font-variation-settings:"wdth" 62;text-transform:uppercase;letter-spacing:-.02em;line-height:.86}
.h2{font-weight:900;font-variation-settings:"wdth" 70;text-transform:uppercase;letter-spacing:-.015em;line-height:.9;font-size:clamp(2.2rem,5.6vw,5.2rem)}
.h3{font-weight:800;font-variation-settings:"wdth" 80;text-transform:uppercase;letter-spacing:-.005em;line-height:1;font-size:clamp(1.15rem,1.7vw,1.6rem)}
.tag{font-family:var(--f-serif);font-size:clamp(1.1rem,1.5vw,1.45rem);color:var(--mute);letter-spacing:.005em}
.dark .tag{color:#a6a39c}
.micro{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;font-variation-settings:"wdth" 110}
.lede{font-size:clamp(1rem,1.2vw,1.18rem);max-width:46ch;color:#3a3936}
.dark .lede{color:#c9c6bf}
.red{color:var(--red)}
.script{font-family:var(--f-script);text-transform:none;letter-spacing:0;font-weight:400}

.wrap{padding-inline:var(--gut);max-width:1600px;margin-inline:auto}
section{position:relative}
.dark{background:var(--ink);color:var(--paper)}
.sect{padding-block:clamp(64px,9vw,140px)}
.rule{border:0;border-top:1px solid var(--line)}
.dark .rule{border-color:var(--line-d)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.7em;padding:1.05em 1.5em;background:var(--ink);color:var(--paper);font-weight:700;font-variation-settings:"wdth" 110;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;transition:transform 160ms var(--ease-out),background-color 160ms var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn .arr{display:grid;place-items:center;width:1.9em;height:1.9em;background:var(--red);color:#fff;font-size:1em;transition:transform 200ms var(--ease-out)}
.btn.red{background:var(--red)}
.btn.red .arr{background:var(--ink)}
.btn.light{background:var(--paper);color:var(--ink)}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--red-deep)}
  .btn.light:hover{background:#fff}
  .btn:hover .arr{transform:translateX(3px)}
}
.btn[disabled]{opacity:.5;pointer-events:none}

/* ---------- announcement + nav ---------- */
.bar{background:var(--red);color:#fff;text-align:center;padding:.55em var(--gut)}
.nav{position:sticky;top:0;z-index:60;background:rgba(243,241,236,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.logo{font-family:var(--f-script);font-size:2rem;line-height:1;color:var(--red);letter-spacing:.01em}
.nav ul{display:flex;gap:clamp(18px,3vw,44px);list-style:none}
.nav ul a{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;font-variation-settings:"wdth" 110;transition:color 150ms var(--ease-out)}
@media (hover:hover){.nav ul a:hover{color:var(--red)}}
.nav .btn{padding:.8em 1.1em}

/* ---------- hero ---------- */
.hero{padding-top:clamp(20px,3vw,40px);overflow:hidden}
.hero-top{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:start;margin-bottom:clamp(8px,2vw,24px)}
.hero-top .tag{max-width:26ch;font-size:clamp(1.25rem,2.1vw,2rem);color:var(--ink);line-height:1.08}
.hero-top .meta{justify-self:end;text-align:right;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;line-height:1.7;color:var(--mute)}
.spark{width:44px;height:44px;color:var(--red)}
.hero h1{font-size:clamp(2.6rem,15.2vw,19rem);white-space:nowrap;margin-left:-.02em;position:relative;z-index:2}
.hero-stage{position:relative;margin-top:clamp(10px,1.6vw,24px);display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(10px,1.4vw,20px)}
.hero-photo{position:relative;height:clamp(460px,52vw,760px);overflow:hidden;background:var(--ink)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:62% 40%}
.hero-side{display:grid;min-height:0}
.hero-side .hero-prod{position:relative;right:auto;bottom:auto;width:100%;height:100%;min-height:0;box-shadow:none;overflow:hidden}
.hero-side .hero-prod img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:50% 50%}
.hero-side .hero-prod .btn{position:absolute;left:clamp(14px,1.6vw,24px);bottom:clamp(14px,1.6vw,24px)}
.ph{filter:grayscale(1) contrast(1.25) brightness(.95)}
.tint{position:absolute;inset:0;background:var(--red);mix-blend-mode:multiply;opacity:.0}
.halftone{position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.55;
  background-image:radial-gradient(circle at center,rgba(0,0,0,.65) 0 .8px,transparent 1.3px);background-size:4px 4px}
.hero-chip{background:var(--red);color:#fff;padding:clamp(18px,2.2vw,32px)}
.hero-chip p{font-size:.95rem;line-height:1.4;margin-bottom:18px}
.hero-chip .micro{display:block;margin-bottom:10px;opacity:.85}
.hero-prod{position:absolute;right:var(--gut);bottom:0;width:clamp(220px,30vw,440px);z-index:3;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.hero-prod img{width:100%;aspect-ratio:4/5;object-fit:cover}
.hero-prod figcaption{position:absolute;left:0;top:0;transform:translateY(-100%);background:var(--ink);color:var(--paper);padding:.5em .8em}

/* marquee */
.marquee{background:var(--red);color:#fff;overflow:hidden;white-space:nowrap;padding:.9em 0;border-block:1px solid var(--ink)}
.marquee .track{display:inline-flex;gap:2.2em;animation:slide 38s linear infinite}
.marquee span{display:inline-flex;align-items:center;gap:2.2em;font-weight:800;font-variation-settings:"wdth" 80;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem}
.marquee svg{width:16px;height:16px}
@keyframes slide{to{transform:translateX(-50%)}}

/* page order: spec strip + product/gallery first, then the hero statement */
main{display:flex;flex-direction:column}
main>.marquee{order:-2}
main>.buy{order:-1}

/* ---------- product module ---------- */
.buy{padding-block:clamp(40px,6vw,90px)}
.buy-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,72px);align-items:start}
.gallery{display:grid;grid-template-columns:84px 1fr;gap:12px;position:sticky;top:84px}
.thumbs{display:flex;flex-direction:column;gap:10px}
.thumbs button{border:1px solid transparent;opacity:.55;transition:opacity 160ms var(--ease-out),border-color 160ms var(--ease-out);aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.thumbs button img{width:100%;height:100%;object-fit:cover}
.thumbs button[aria-current="true"]{opacity:1;border-color:var(--red)}
.main-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--paper-2)}
.main-img img{width:100%;height:100%;object-fit:cover;transition:opacity 200ms var(--ease-out)}
.main-img .badge{position:absolute;left:14px;top:14px;background:var(--ink);color:var(--paper);padding:.5em .8em}
.info h2{font-size:clamp(2.6rem,5.4vw,5rem)}
.info .sub{margin:14px 0 22px;font-family:var(--f-serif);font-size:1.5rem;color:#3a3936;line-height:1.2}
.price-row{display:flex;align-items:baseline;gap:14px;padding-block:18px;border-block:1px solid var(--line);margin-block:22px}
.price{font-weight:900;font-variation-settings:"wdth" 70;font-size:3rem;line-height:1}
.per{color:var(--mute);font-size:.9rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chips li{list-style:none;border:1px solid var(--ink);padding:.45em .8em;border-radius:99px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;font-variation-settings:"wdth" 105}
.buy-cta{display:flex;flex-direction:column;gap:12px}
.buy-cta .btn{justify-content:space-between;width:100%;padding:1.2em 1.4em;font-size:.9rem}
.micro-note{font-size:.78rem;color:var(--mute)}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.trust div{font-size:.78rem;line-height:1.35}
.trust b{display:block;font-weight:800;font-variation-settings:"wdth" 85;text-transform:uppercase;font-size:.9rem;margin-bottom:3px}
.notify{display:none;gap:8px}
.notify input{flex:1;padding:1em;border:1px solid var(--ink);background:transparent;font:inherit;min-width:0}
[data-stock="out"] .in-stock{display:none}
[data-stock="out"] .notify{display:flex}

/* ---------- about ---------- */
.about .grid{display:grid;grid-template-columns:1fr 1.3fr;gap:clamp(24px,5vw,90px);align-items:end}
.about h2{margin-bottom:28px}
.about .big{font-size:clamp(2.4rem,6.6vw,6.4rem)}
.about-photo{position:relative;aspect-ratio:3/2;overflow:hidden;margin-top:36px}
.about-photo img{width:100%;height:100%;object-fit:cover}
.about-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:30px}
.about-cols p{font-size:.95rem;color:#3a3936}
.stamp{position:absolute;right:16px;bottom:16px;background:var(--red);color:#fff;padding:.8em 1em;z-index:3}

/* ---------- timeline cards ---------- */
.timeline{background:#ECEAE4}
.tl-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:clamp(30px,4vw,60px);flex-wrap:wrap}
.tl-head .h2{text-align:right;max-width:none}
.cards4{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.4vw,20px)}
.card{background:var(--ink);color:var(--paper);padding:clamp(20px,2.4vw,36px);min-height:220px;display:flex;flex-direction:row;align-items:center;gap:clamp(18px,2.6vw,40px);position:relative;overflow:hidden}
.card:nth-child(2),.card:nth-child(3){background:#d9d6cf;color:var(--ink)}
.card .ico{flex:none;width:clamp(84px,9vw,132px);aspect-ratio:1;display:grid;place-items:center;background:var(--red);color:#fff;transition:transform 300ms var(--ease-out)}
.card .ico svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.card:nth-child(2) .ico,.card:nth-child(3) .ico{background:var(--ink)}
@media (hover:hover){.card:hover .ico{transform:rotate(-6deg) scale(1.05)}}
.card .when{font-family:var(--f-serif);font-size:1.4rem;opacity:.7}
.card h3{margin:6px 0 8px;font-size:clamp(1.3rem,2vw,1.9rem)}
.card p{font-size:.95rem;opacity:.85;max-width:34ch}
.foot{font-size:.75rem;color:var(--mute);margin-top:18px;max-width:80ch}

/* ---------- mechanism / pillars (dark) ---------- */
.mech .head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,90px);align-items:end;margin-bottom:clamp(30px,4vw,60px)}
.mech .head .h2 span{color:var(--red)}
.bars{display:grid;gap:16px;max-width:560px}
.bar-row .lab{display:flex;justify-content:space-between;margin-bottom:6px;font-size:.78rem}
.track-b{height:34px;background:#242424;position:relative;overflow:hidden}
.track-b i{position:absolute;inset:0 auto 0 0;background:var(--red);transform-origin:left;transform:scaleX(var(--w));transition:transform 1100ms var(--ease-out)}
.track-b i.dim{background:#6b6a66}
.pillars{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(10px,1.4vw,20px);margin-top:clamp(30px,4vw,60px)}
.pillar{position:relative;overflow:hidden;min-height:clamp(420px,46vw,640px);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(18px,2vw,30px);background:#111}
.pillar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 700ms var(--ease-out)}
.pillar::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.05) 62%)}
.pillar>*:not(img){position:relative;z-index:2}
.pillar .num{font-weight:900;font-variation-settings:"wdth" 62;font-size:clamp(3rem,7vw,7rem);line-height:.8;color:rgba(255,255,255,.18);margin-bottom:14px}
.pillar p{font-size:.9rem;color:#d6d3cc;max-width:38ch;margin-top:10px}
@media (hover:hover){.pillar:hover img{transform:scale(1.04)}}

/* ---------- why classic 01 02 03 ---------- */
.why .head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,56px)}
.why .head .h2{text-align:right;max-width:11ch}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,40px)}
.why-item .n{font-weight:900;font-variation-settings:"wdth" 62;font-size:clamp(5rem,12vw,11rem);line-height:.82;color:#cfccc5;margin-bottom:22px}
.why-item .h3{margin-bottom:10px}
.why-item p{font-size:.92rem;color:#3a3936;max-width:34ch;margin-bottom:20px}
.why-item .pic{aspect-ratio:4/3;overflow:hidden}
.why-item .pic img{width:100%;height:100%;object-fit:cover}

/* ---------- label ---------- */
.label .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);align-items:center}
.label .pic{position:relative;aspect-ratio:4/5;overflow:hidden}
.label .pic img{width:100%;height:100%;object-fit:cover}
.free{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 28px}
.free li{list-style:none;padding:.5em .85em;background:var(--red);color:#fff;font-weight:800;font-variation-settings:"wdth" 85;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
.facts{background:var(--paper);color:var(--ink);border:2px solid var(--ink);padding:14px 16px;max-width:460px;font-size:.84rem}
.facts h4{font-weight:900;font-variation-settings:"wdth" 80;font-size:1.7rem;line-height:1;padding-bottom:6px;border-bottom:8px solid var(--ink);text-transform:none}
.facts .r{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--ink);gap:12px}
.facts .r.h{font-size:.72rem;font-weight:700;border-bottom-width:4px}
.facts small{display:block;margin-top:8px;font-size:.7rem;line-height:1.4;color:#444}

/* ---------- numbers ---------- */
.nums{position:relative;color:#fff;overflow:hidden;padding-block:clamp(44px,5.5vw,84px)}
.nums>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.nums::before{content:"";position:absolute;inset:0;background:rgba(10,10,10,.62);z-index:1}
.nums .wrap{position:relative;z-index:2}
.nums-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,20px)}
.nums-grid>div{background:rgba(243,241,236,.1);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);padding:clamp(14px,1.6vw,22px);min-height:0;display:flex;flex-direction:column;gap:14px}
.nums-grid .big{font-weight:900;font-variation-settings:"wdth" 62;font-size:clamp(3rem,6.2vw,6rem);line-height:.8}
.nums-grid .big sup{font-size:.35em;vertical-align:top;margin-left:.1em;color:var(--red)}
.nums-grid p{font-size:.85rem;max-width:22ch;color:#e8e5de}
.nums .head{margin-bottom:clamp(18px,2.4vw,32px);display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap}
.nums .head .h2{max-width:none;font-size:clamp(2rem,4.2vw,3.8rem)}

/* ---------- how to use ---------- */
.use .head{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,56px)}
.use .head .h2{text-align:right;max-width:10ch}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px)}
.step{background:var(--paper-2);display:flex;flex-direction:column}
.step .pic{aspect-ratio:4/5;overflow:hidden}
.step .pic img{width:100%;height:100%;object-fit:cover}
.step .body{padding:clamp(16px,2vw,26px)}
.step .k{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.step .k b{font-weight:900;font-variation-settings:"wdth" 62;font-size:3rem;line-height:.8;color:var(--red)}
.step p{font-size:.9rem;color:#3a3936}
.use-extra{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,20px);margin-top:clamp(10px,1.4vw,20px)}
.box{padding:clamp(20px,2.4vw,36px)}
.box.load{background:var(--red);color:#fff}
.box.mist{background:var(--ink);color:var(--paper)}
.box h3{margin:8px 0 12px}
.box li{margin-left:1.1em;margin-bottom:8px;font-size:.92rem}
.box p{font-size:.95rem;max-width:46ch}

/* ---------- compare ---------- */
.cmp table{width:100%;border-collapse:collapse;margin-top:clamp(26px,3vw,44px)}
.cmp th,.cmp td{text-align:left;padding:18px 14px;border-bottom:1px solid var(--line-d);vertical-align:top;font-size:.95rem}
.cmp th{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#a6a39c;font-weight:600;font-variation-settings:"wdth" 110}
.cmp th.us{color:var(--red)}
.cmp td:first-child{font-weight:800;font-variation-settings:"wdth" 80;text-transform:uppercase;width:20%}
.cmp td.us{color:#fff;font-weight:600}
.cmp td.us::before{content:"✓ ";color:var(--red);font-weight:900}
.cmp td:last-child{color:#a6a39c}

/* ---------- evidence ---------- */
.ev .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px);margin-top:clamp(26px,3vw,44px)}
.ev article{border:1px solid var(--ink);padding:clamp(18px,2vw,28px);display:flex;flex-direction:column;gap:14px;transition:background-color 200ms var(--ease-out),color 200ms var(--ease-out)}
@media (hover:hover){.ev article:hover{background:var(--ink);color:var(--paper)}}
.ev .yr{font-weight:900;font-variation-settings:"wdth" 62;font-size:3.6rem;line-height:.8;color:var(--red)}
.ev blockquote{font-family:var(--f-serif);font-size:1.35rem;line-height:1.2}
.ev cite{font-size:.78rem;font-style:normal;opacity:.7;line-height:1.4}
.ev a.doi{font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700;margin-top:auto;text-decoration:underline;text-underline-offset:3px}

/* ---------- FAQ ---------- */
.faq .grid{display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(24px,5vw,90px)}
.faq h2{position:sticky;top:96px;align-self:start}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font-weight:800;font-variation-settings:"wdth" 80;text-transform:uppercase;font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.1}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:34px;height:34px;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:1.3rem;transition:transform 200ms var(--ease-out),background-color 200ms var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--red)}
.faq .ans{padding:0 54px 24px 0;color:#3a3936;max-width:62ch;font-size:.97rem}

/* ---------- closing ---------- */
.close{overflow:hidden;padding-top:clamp(70px,9vw,130px)}
.close .row{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,5vw,80px);align-items:end;position:relative;z-index:2}
.close .h2{font-size:clamp(2.6rem,6.4vw,6.4rem)}
.close .lede{margin:22px 0 28px}
.close .pic{aspect-ratio:4/5;max-height:620px;overflow:hidden;justify-self:end;width:100%;max-width:520px}
.close .pic img{width:100%;height:100%;object-fit:cover}
.mega{font-size:clamp(5rem,23.5vw,25rem);line-height:.78;white-space:nowrap;margin:clamp(30px,5vw,70px) 0 -.12em -.02em;color:var(--red);font-family:var(--f-script);text-transform:none;letter-spacing:0;font-weight:400}
.legal{background:var(--ink);color:#a6a39c;padding-block:30px 100px;font-size:.78rem;line-height:1.6;border-top:1px solid var(--line-d)}
.legal .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.legal b{color:var(--paper);font-weight:700}
.legal a{text-decoration:underline;text-underline-offset:3px}

/* ---------- sticky buy ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink);color:var(--paper);transform:translateY(110%);transition:transform 300ms var(--ease-out)}
.sticky.on{transform:none}
.sticky .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.sticky .nm{font-weight:800;font-variation-settings:"wdth" 80;text-transform:uppercase;font-size:1rem}
.sticky .nm small{display:block;font-weight:500;font-size:.72rem;color:#a6a39c;text-transform:none;letter-spacing:0}
.sticky .pr{font-weight:900;font-variation-settings:"wdth" 70;font-size:1.6rem}

/* ---------- mascot ---------- */
.logo{display:inline-flex;align-items:center;gap:10px}
.logo-mascot{width:40px;height:40px;border-radius:50%;object-fit:cover;object-position:50% 55%;border:2px solid var(--red);background:#EEE5D8}
.step .pic.m{aspect-ratio:1/1;background:#EEE5D8}
.step .pic.m img{object-fit:contain}
.mini{border-radius:14px;border:2px solid currentColor;background:#EEE5D8}
.box.load{display:grid;grid-template-columns:1fr auto;gap:0 24px;align-items:center}
.box.load>*:not(.mini){grid-column:1}
.box.load .mini{grid-column:2;grid-row:1/span 3;width:clamp(120px,14vw,200px);border-color:#fff;transform:rotate(3deg)}
.head-m{display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.head-m .mini{width:clamp(110px,14vw,200px);border-color:var(--red);transform:rotate(-3deg)}
.cmp .head-m .mini{border-color:var(--paper)}
.faq-side{position:sticky;top:96px;align-self:start}
.faq-side h2{position:static}
.faq-side .mini{width:clamp(150px,16vw,240px);margin-top:28px;border-color:var(--ink);transform:rotate(-3deg)}
.close .pic.sq{aspect-ratio:1/1;max-height:none;border-radius:6px}
@media (hover:hover){.mini{transition:transform 300ms var(--ease-out)}.mini:hover{transform:rotate(0) scale(1.04)!important}}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity 700ms var(--ease-out),transform 700ms var(--ease-out);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .nav ul{display:none}
  .buy-grid,.about .grid,.label .grid,.faq .grid,.close .row,.mech .head,.use-extra{grid-template-columns:1fr}
  .gallery{position:static;grid-template-columns:1fr}
  .buy-grid>*,.about .grid>*,.label .grid>*,.faq .grid>*,.close .row>*,.mech .head>*{min-width:0}
  .buy-grid,.about .grid,.label .grid,.faq .grid,.close .row,.mech .head,.use-extra{grid-template-columns:minmax(0,1fr)}
  .thumbs{flex-direction:row;order:2;overflow-x:auto}.thumbs button{width:72px;flex:none}
  .nums-grid{grid-template-columns:1fr 1fr}
  .cards4{grid-template-columns:1fr}
  .card{min-height:0;padding:18px;gap:16px}
  .card .ico{width:72px}
  .pillars,.trio,.steps,.ev .grid{grid-template-columns:1fr}
  .pillar{min-height:380px}
  .hero-top{grid-template-columns:1fr auto}.hero-top .meta{display:none}
  .hero-stage{grid-template-columns:1fr}
  .hero-photo{height:min(62vw,300px)}
  .hero{padding-top:14px}
  .hero-top .tag{font-size:1rem}
  .marquee{padding:.6em 0}
  .buy{padding-block:20px 40px}
  .gallery{margin-bottom:6px}
  .hero-side .hero-prod{display:none}
  .faq-side{position:static}
  .box.load{grid-template-columns:1fr}
  .box.load .mini{grid-column:1;grid-row:auto;margin-top:16px}
  .legal .cols{grid-template-columns:1fr}
  .tl-head .h2,.why .head .h2,.use .head .h2{text-align:left}
  .cmp .scroll{overflow-x:auto}
  .cmp table{min-width:640px}
  .close .pic{justify-self:start}
}
@media (max-width:560px){
  .cards4,.nums-grid{grid-template-columns:1fr}
  .card,.nums-grid>div{min-height:240px}
  .trust{grid-template-columns:1fr}
  .about-cols{grid-template-columns:1fr}
  .sticky .nm small{display:none}
}
@media (prefers-reduced-motion:reduce){
  .rv{transform:none;transition:opacity 400ms linear}
  .marquee .track{animation:none}
  .track-b i{transition:none}
  html{scroll-behavior:auto}
}