/* Art direction and responsive refinements, kept separate from the first release. */
.round-arrow{width:25px;height:25px;right:17px;bottom:17px;position:absolute}
.hero-product-disc{background:rgba(7,23,18,.55);backdrop-filter:blur(8px)}

.pour-sequence{--open:0;--fall:0;--lift:0;--outro:0;--clip:100%;--cup-x:0vw;--cup-y:0vh;--cup-angle:0deg;--cup-scale:1;--noodle-y:0vh;--noodle-angle:0deg;--copy-y:0px;--outro-y:40px;--ring-angle:0deg;--note-opacity:1;height:240svh;position:relative;background:#071712;color:#f0efe6}
.pour-sticky{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 67% 42%,#164b33 0,#0b3023 31%,#071712 70%)}
.pour-sticky:before{content:"";position:absolute;width:min(74vw,1100px);aspect-ratio:1;border:1px solid rgba(214,253,56,.18);border-radius:50%;left:44%;top:45%;transform:translate(-10%,-50%) rotate(var(--ring-angle)) scaleY(.76);box-shadow:0 0 0 90px rgba(214,253,56,.025),0 0 0 210px rgba(214,253,56,.018);pointer-events:none}
.pour-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 70% 72%,rgba(238,130,32,.3),transparent 38%);opacity:var(--fall)}
.pour-copy{position:absolute;z-index:5;left:clamp(24px,5vw,88px);top:29%;width:44%;opacity:calc(1 - var(--outro));transform:translateY(var(--copy-y))}
.pour-copy .eyebrow{color:#d6fd38}
.pour-copy h2{font-size:clamp(110px,11.7vw,225px);margin:22px 0 27px;white-space:nowrap}
.pour-copy h2 em{color:#d6fd38}
.pour-copy>p:last-child{font-size:clamp(16px,1.4vw,21px);line-height:1.5;max-width:330px;color:#c2d2c6}
.pour-visual{position:absolute;z-index:3;width:min(58vw,870px);height:92%;left:46%;top:4%;pointer-events:none}
.pour-cup{position:absolute;z-index:2;inset:3% 0 auto;width:100%;height:88%;object-fit:contain;filter:drop-shadow(0 38px 40px rgba(0,0,0,.64));transform:translate(var(--cup-x),var(--cup-y)) rotate(var(--cup-angle)) scale(var(--cup-scale));transform-origin:center 45%;will-change:transform,opacity}
.pour-cup-closed{opacity:calc(1 - var(--open))}.pour-cup-open{opacity:var(--open)}
.pour-noodles{position:absolute;z-index:4;left:39%;top:34%;width:76%;height:105%;object-fit:contain;object-position:top;clip-path:inset(0 0 var(--clip) 0);opacity:var(--fall);transform:translateY(var(--noodle-y)) rotate(var(--noodle-angle));filter:drop-shadow(0 14px 18px rgba(0,0,0,.38));will-change:clip-path,opacity,transform}
.pour-outro{position:absolute;z-index:5;left:clamp(24px,5vw,88px);bottom:12%;opacity:var(--outro);transform:translateY(var(--outro-y));pointer-events:none}
.pour-outro p{font:800 clamp(52px,6.3vw,118px)/.87 var(--display);letter-spacing:-.02em;margin:0}
.pour-outro strong{color:#d6fd38;font-weight:800}
.pour-scroll-note{position:absolute;left:clamp(24px,5vw,88px);bottom:31px;z-index:6;font-size:10px;letter-spacing:.2em;font-weight:800;opacity:var(--note-opacity)}
.pour-scroll-note span{margin-left:20px;font-size:18px}

.difference h2{white-space:normal;font-size:clamp(98px,10.5vw,190px)}
.difference h2 span,.difference h2 em{white-space:nowrap}
.protein-stage{transform:none!important}
.protein-number{display:flex;align-items:flex-start;white-space:nowrap;letter-spacing:-.07em}
.protein-number sup{position:relative;top:.04em;margin-left:.08em;letter-spacing:0}
.protein-caption{font:800 13px/1.2 var(--body);letter-spacing:.16em;right:13%;bottom:10%;transform:none;white-space:nowrap;border:0;border-top:1px solid var(--ink);border-radius:0;padding:10px 0 0}

.quality{background:#eeeae0;color:#071712;position:relative;overflow:hidden}
.quality:before{content:"QUALITY";position:absolute;font:900 31vw/.7 var(--display);top:-3%;right:-6%;color:rgba(7,23,18,.035);white-space:nowrap;pointer-events:none}
.quality-intro{display:grid;grid-template-columns:1.4fr .6fr;align-items:end;column-gap:8%;position:relative;z-index:1;margin-bottom:70px}
.quality-intro .eyebrow{grid-column:1/-1;color:#287653;margin-bottom:20px}
.quality h2{font-size:clamp(90px,9.3vw,190px);margin:0}
.quality h2 em{color:#277a53}
.quality-intro>p:last-child{font-size:17px;line-height:1.6;max-width:350px;margin:0 0 5px}
.quality-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid rgba(7,23,18,.45);border-left:1px solid rgba(7,23,18,.45)}
.quality-cell{display:flex;flex-direction:column;justify-content:space-between;min-height:210px;padding:23px 27px;border-right:1px solid rgba(7,23,18,.45);border-bottom:1px solid rgba(7,23,18,.45);transition:background .3s,color .3s}
.quality-cell:hover{background:#d6fd38}
.quality-kicker{font-size:10px;letter-spacing:.17em;font-weight:800;line-height:1.4;color:#536459}
.quality-cell strong{font:800 clamp(52px,5.7vw,110px)/.8 var(--display);letter-spacing:-.03em;margin:28px 0 12px;white-space:nowrap}
.quality-cell strong small{font-size:.42em;vertical-align:top;letter-spacing:0;margin-left:.06em}
.quality-cell>span:last-child{font-size:11px;letter-spacing:.14em;font-weight:800;line-height:1.4}
.quality-lead{background:#d6fd38}
.quality-disclosure{position:relative;z-index:1;max-width:950px;font-size:12px;line-height:1.65;color:#4c5b50;margin:24px 0 0}

@media(max-width:1100px){
  .pour-copy h2{font-size:11vw}
  .quality-intro{grid-template-columns:1fr .65fr}
  .quality-cell{min-height:180px}
}
@media(max-width:760px){
  .hero{height:100svh;min-height:690px;max-height:920px}
  .hero-copy{top:23%;left:24px;right:24px;width:auto}
  .hero h1{font-size:clamp(70px,16vw,115px);line-height:.84}
  .hero h1 span:last-child{font-size:.73em}
  .hero-intro{font-size:13px;line-height:1.42;max-width:245px}
  .hero-product{height:44%;width:88%;right:-4%;bottom:6%;transform:rotate(4deg)}
  .hero-product img{object-position:center bottom}
  .hero-product-disc{right:8%;top:1%;width:66px;height:66px;font-size:32px}
  .hero-product-disc span{font-size:17px}.hero-product-disc small{font-size:5px}
  .round-link{bottom:-100px;left:0;width:78px;height:78px;font-size:8px;transform:rotate(-9deg)}
  .round-arrow{width:17px;height:17px;right:12px;bottom:11px}
  .hero-bottom{bottom:17px}
  .hero-bottom span:last-child{font-size:8px}

  .pour-sequence{height:225svh}
  .pour-sticky{min-height:0;height:100svh;background:radial-gradient(circle at 54% 53%,#16543a,#08281e 55%,#071712)}
  .pour-sticky:before{width:108vw;left:8%;top:55%}
  .pour-copy{top:11%;left:24px;right:24px;width:auto;opacity:calc(1 - var(--outro))}
  .pour-copy h2{font-size:clamp(84px,17vw,140px);margin:14px 0 10px}
  .pour-copy>p:last-child{font-size:14px;max-width:240px}
  .pour-visual{width:103%;height:68%;left:8%;top:32%}
  .pour-cup{height:83%;inset:2% 0 auto}
  .pour-noodles{left:36%;top:30%;width:85%;height:102%}
  .pour-outro{left:24px;right:24px;bottom:15%}
  .pour-outro p{font-size:clamp(58px,13vw,95px)}
  .pour-scroll-note{left:24px;bottom:21px}

  .difference h2{font-size:clamp(74px,20vw,115px);line-height:.76;white-space:normal;margin:20px 0 30px}
  .difference h2 span,.difference h2 em{display:block;white-space:normal}
  .difference h2 br{display:none}
  .difference-head>p:last-child{max-width:300px;line-height:1.5}
  .protein-stage{height:350px;min-height:0;overflow:visible;margin:20px 0 0}
  .protein-ring{width:min(82vw,330px);height:min(82vw,330px);box-shadow:0 0 0 15px rgba(7,23,18,.07),0 0 0 35px rgba(7,23,18,.05)}
  .protein-number{font-size:clamp(190px,50vw,260px);letter-spacing:-.07em;transform:translateY(-12px)}
  .protein-number sup{font-size:.28em;top:.04em}
  .protein-caption{position:absolute;left:50%;right:auto;bottom:15%;transform:translateX(-50%);font-size:10px;text-align:center;letter-spacing:.1em;width:max-content}
  .difference-bottom{margin-top:20px}

  .quality{padding:85px 24px}
  .quality-intro{display:block;margin-bottom:45px}
  .quality h2{font-size:clamp(78px,15.5vw,120px);margin:15px 0 25px}
  .quality-intro>p:last-child{font-size:15px;max-width:340px}
  .quality-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quality-cell{min-height:157px;padding:16px 14px}
  .quality-cell strong{font-size:clamp(39px,10vw,65px);margin:16px 0 10px}
  .quality-kicker,.quality-cell>span:last-child{font-size:8px;letter-spacing:.08em}
  .quality-lead{grid-column:1/-1;min-height:195px;padding:20px}
  .quality-lead strong{font-size:100px}
  .quality-disclosure{font-size:11px;margin-top:22px}

  .flavor-selector{grid-template-columns:1fr}
  .flavor-tab{border-right:0;border-bottom:1px solid var(--line);font-size:41px;padding:14px 18px;display:flex;justify-content:space-between}
  .flavor-tab:last-child{border-bottom:0}
  .flavor-tab b{display:block;font-size:19px;opacity:.75}
  .flavor-details h3{font-size:clamp(58px,13vw,80px)}
}
@media(max-width:390px){
  .hero h1{font-size:16.5vw}
  .hero-product{height:42%;bottom:6%}
  .pour-copy h2{font-size:17vw}
  .difference h2{font-size:19.5vw}
  .quality-cell strong{font-size:10vw}
}
@media(prefers-reduced-motion:reduce){
  .pour-sequence{height:auto}
  .pour-sticky{position:relative;height:800px}
  .pour-cup-closed{opacity:0}.pour-cup-open{opacity:1}
  .pour-noodles{display:none}
  .pour-outro{opacity:1;transform:none}
  .pour-copy{opacity:1;transform:none}
}