/* AYOYO PRODUCTS HOMEPAGE
   Adapted to follow the visual format of the provided Yo-Chi homepage:
   split hero, scrolling rectangular feature cards, illustrated story,
   irregular full-width image slider, large flavour products and circular
   descriptions, six proof points, social mosaic and spacious footer.
   The product images are original, editable SVG illustrations.
   Brand information and listed products taken from the supplied Ayoyo website; product art is illustrative.
*/
:root{--ink:#36332e;--pink:#a4c639;--blue:#74c3cd;--yellow:#f2ce2f;--cream:#faf9f9;--paper:#fff;--lilac:#c4b1d8;--green:#b5ce9b;--max-width:1440px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:45px}body{margin:0;overflow-x:hidden;background:var(--cream);color:var(--ink);font-family:Manjari,'Trebuchet MS',Arial,sans-serif;font-weight:400}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font-family:inherit;cursor:pointer}img{max-width:100%;display:block}section{position:relative}section .wrapper{max-width:1110px}.wrapper{width:calc(100% - 64px);max-width:var(--max-width);margin:0 auto;position:relative}.grid-box{display:grid;gap:0;position:relative}.grid-box.row-2{grid-template-columns:1fr 1fr}.grid-box.row-3{grid-template-columns:repeat(3,minmax(0,1fr))}.row{position:relative;min-width:0}.title-text{font-weight:800;letter-spacing:-.035em}.underlined{position:relative;display:inline;isolation:isolate;white-space:nowrap}.underlined b{font-weight:900}.underlined:after{content:"";display:block;position:absolute;height:.22em;left:-.025em;right:-.025em;bottom:.07em;background:rgba(242,206,47,.66);z-index:-1;transform:rotate(-1.5deg)}
/* Floating header / wave */
.header{position:absolute;z-index:60;left:0;right:0;top:36px}.header-inner{display:flex;justify-content:space-between;align-items:center;min-height:66px}.brand-mark{display:inline-flex;flex-direction:column;align-items:flex-start;font-family:Arial,sans-serif;font-size:28px;line-height:.92;font-weight:950;letter-spacing:-2px;color:var(--ink)}.brand-mark .brand-dot{color:#e69b88}.brand-mark small{font-size:12px;letter-spacing:6px;font-weight:900;margin-top:4px}.burger-menu{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:53px;height:53px;border:0;border-radius:50%;background:rgba(255,255,255,.86);transition:transform .25s}.burger-menu:hover{transform:scale(1.1)}.burger-menu span{display:block;width:23px;height:2.5px;background:var(--ink);border-radius:8px}.burger-menu span:nth-child(2){width:17px}.menu-shade{position:fixed;inset:0;background:rgba(33,27,24,.38);z-index:98}.menu-shade[hidden]{display:none}.menuPanel{position:fixed;right:0;top:0;width:min(520px,100%);height:100dvh;z-index:99;background:rgba(255,255,255,.985);padding:48px 55px;transform:translateX(105%);transition:transform .55s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:-15px 0 50px rgba(40,25,20,.08);overflow-y:auto}.menuPanel.open{transform:translateX(0)}body.menu-open{overflow:hidden}#close{position:absolute;top:24px;right:36px;font-size:47px;font-weight:300;line-height:1;border:0;background:none;color:var(--ink)}.menu-brand{align-items:center;margin-bottom:45px}.main-menu{list-style:none;padding:0;margin:0}.main-menu .menu-item{font-size:30px;line-height:1.5;font-weight:700;margin:7px 0}.main-menu a{transition:color .2s}.main-menu a:hover,.main-menu a:focus-visible{color:var(--blue)}.menu-tiny{font-size:11px;letter-spacing:3px;font-weight:800;margin:35px 0 0;color:#b3aaa1}
/* 1. Hero – original composition: oversized headline / floating tall dessert cup */
.home-banner{height:790px;min-height:680px;max-height:900px;background:white;position:relative}.home-banner-slider{height:100%;position:relative}.hero-slide{position:absolute;inset:0;background:#fff;opacity:0;visibility:hidden;transition:opacity 1.0s,visibility 1s}.hero-slide.is-active{visibility:visible;opacity:1;z-index:1}.home-banner .wrapper,.home-banner .grid-box{height:100%;width:calc(100% - 100px)}.home-banner .grid-box{align-items:center}.hero-copy{z-index:3;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-top:60px}.home-banner .title-text{font-size:clamp(53px,5.4vw,88px);font-weight:800;line-height:1.04;max-width:630px;margin:0 0 22px;letter-spacing:-.056em;color:var(--ink)}.hero-eyebrow{font-size:13px;letter-spacing:3px;color:#9b8275;font-weight:800;margin:0 0 30px;max-width:430px;line-height:1.7}.text-link{font-weight:900;text-decoration:underline;text-underline-offset:5px;font-size:18px;transition:color .25s}.text-link:hover{color:#e4947f}.hero-product{height:100%;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}/* Smooth Yo-Chi-inspired floating — keyframes are explicitly defined, and only active hero puddings move. */
@keyframes ayoyoHeroFloat { 0%,100% {transform:translate3d(0,0,0)} 50% {transform:translate3d(0,-20px,0)} }
.hero-slide.is-active .hero-product {animation:ayoyoHeroFloat 3.8s ease-in-out infinite;will-change:transform;}.hero-product img{position:relative;width:auto;max-height:85%;height:590px;max-width:108%;object-fit:contain;filter:drop-shadow(0 22px 18px rgba(91,54,39,.07));transition:transform .7s;will-change:transform}.hero-slide.is-active .hero-product img{animation:popIn .7s both}.hero-slide:nth-child(1) .hero-product img{rotate:-4deg;}.hero-slide:nth-child(2) .hero-product img{rotate:3deg;}.hero-slide:nth-child(3) .hero-product img{rotate:-3deg;}.hero-circle{width:590px;height:590px;border:9px dashed #e6c6b8;border-radius:43% 57% 55% 45% / 58% 45% 55% 42%;position:absolute;right:4%;top:12%;opacity:.7;animation:spin 35s linear infinite;pointer-events:none}.circle-peach{border-color:#EFC5B9}.circle-lime{border-color:#d4e5a7}.hero-pagination{position:absolute;z-index:5;bottom:45px;left:50%;display:flex;gap:12px;transform:translateX(-50%)}.hero-dot{width:10px;height:10px;background:#d8d3cd;border:0;border-radius:50%;padding:0;transition:width .2s,background .2s}.hero-dot.active{background:var(--ink);width:28px;border-radius:8px}.scroll-cue{position:absolute;z-index:4;left:50%;bottom:-45px;transform:translateX(-50%);font-family:Arial,sans-serif;font-size:70px;font-weight:100;color:var(--ink);animation:bob 2s linear infinite}.wave{width:100%;height:94px;position:relative;background:var(--cream);z-index:2}.wave.flip{background:radial-gradient(ellipse 75px 30px at 50% 0,white 99%,transparent 101%) repeat-x;background-size:150px 95px;background-color:var(--cream)}
/* 2. Horizontal feature slider */
.home-menu-slider{padding:75px 0 100px;background:var(--cream)}.home-menu-slider>.wrapper>.title-text{text-align:right;font-size:36px;line-height:1.05;margin:0 35px 55px;color:var(--ink)}.home-menu-slider>.wrapper .underlined:after{background:rgba(0,183,206,.35)}.little-arrow{color:var(--ink);font-family:Georgia,serif;font-size:70px;vertical-align:middle;margin-left:20px}.menu-slider{padding:0 18px}.menu-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:10px 5vw 35px;scroll-behavior:smooth}.menu-track::-webkit-scrollbar,.flavor-track::-webkit-scrollbar{display:none}.menu-card{position:relative;flex:0 0 440px;height:308px;overflow:hidden;border-radius:26px;display:block;scroll-snap-align:center;box-shadow:0 18px 50px rgba(80,59,49,.06);isolation:isolate}.menu-card:nth-child(even){flex-basis:545px;border-radius:40% 60% 38% 62% / 24% 20% 25% 27%}.menu-card img{position:absolute;width:290px;height:360px;object-fit:contain;right:-25px;bottom:-100px;transition:transform .35s;filter:drop-shadow(5px 8px 7px rgba(50,34,34,.06));z-index:-1}.menu-card:hover img{transform:translate(-8px,-8px) rotate(5deg)}.menu-card .text-box{position:absolute;left:32px;top:29px;max-width:55%;z-index:1}.menu-card .title-text{font-size:40px;line-height:1.05;margin:0 0 11px;letter-spacing:-1.5px}.menu-card .underlined:after{background:rgba(255,255,255,.38)}.menu-card p{font-size:20px;line-height:1.25;margin:15px 0 0;max-width:260px}.menu-card.dark{color:#fff}.peach-tile{background:#ffccbd}.lilac-tile{background:#b0a0c6}.mint-tile{background:#7faf9d}.coral-tile{background:#ef9d93}.chocolate-tile{background:#816558}.butter-tile{background:#f5d77b}.slider-nav{display:flex;justify-content:flex-end;gap:12px}.round-arrow{border:1.5px solid var(--ink);width:46px;height:46px;display:grid;place-items:center;background:transparent;color:var(--ink);border-radius:50%;font-family:Arial,sans-serif;font-size:25px;transition:background .2s,color .2s,transform .2s}.round-arrow:hover{background:var(--ink);color:white;transform:scale(1.06)}
/* 3. Brand story */
.share-the-chi{padding:85px 0 90px;margin-bottom:0;background:var(--cream)}.share-the-chi .grid-box{align-items:center}.share-thee-chi-img{width:105%;max-width:560px;margin-left:-10px;height:auto}.share-the-chi .content{display:block;padding-left:18px}.share-the-chi .content p{font-size:25px;line-height:1.8;letter-spacing:.15px;text-align:right;margin:0;color:var(--ink)}.share-the-chi .content strong{font-weight:900;font-size:29px}
/* 4. Slideshow: full-width expressive visuals with bottom copy */
.slider-info-home-section{margin:0 auto;max-width:1440px;padding:0 28px 60px}.info-home-slider{height:min(630px,47vw);min-height:410px;position:relative;overflow:hidden;border-radius:29% 19% 18% 24% / 10% 15% 13% 10%;background:#ead7cf}.info-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .65s,visibility .65s;overflow:hidden}.info-slide.is-active{opacity:1;visibility:visible}.scene-rose{background:radial-gradient(circle at 40% 10%,#fff0e9 0,#ecc5bf 55%,#ecada9 100%)}.scene-cream{background:radial-gradient(circle at 40% 25%,#ffedbd,#e5bb79)}.scene-green{background:radial-gradient(circle at 45% 40%,#e9eed6,#a2bd91)}.scene-cocoa{background:radial-gradient(circle at 45% 40%,#e1c1ae,#8b685f)}.info-slide img{width:490px;height:570px;max-height:115%;object-fit:contain;position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);filter:drop-shadow(0 16px 12px rgba(74,55,45,.13))}.info-slide:before,.info-slide:after{content:"";position:absolute;border:6px solid rgba(255,255,255,.48);width:420px;height:420px;border-radius:50%;left:calc(50% - 210px);top:8%;z-index:0}.info-slide:after{width:550px;height:550px;left:calc(50% - 275px);top:-2%;border-style:dotted;opacity:.5}.info-slide .content{position:absolute;left:5%;right:5%;bottom:6%;text-align:center;z-index:3}.info-slide .title-text{font-size:clamp(38px,4.6vw,65px);line-height:1.1;letter-spacing:-.045em;max-width:980px;margin:0 auto;color:white;text-shadow:0 2px 23px rgba(60,40,35,.22)}.info-slide .underlined:after{background:rgba(242,206,47,.85)}.arrow-box{position:absolute;z-index:4;display:flex;justify-content:space-between;left:5%;right:5%;top:47%;transform:translateY(-50%)}.arrow-box button{border:0;border-radius:50%;height:50px;width:50px;font-size:26px;background:#fff9;color:var(--ink);transition:transform .2s}.arrow-box button:hover{transform:scale(1.1);background:white}
/* 5. Large puddings with circular description */
.wthats-section{background:linear-gradient(180deg,#fffaf6,#fff1ec 80%,#FCF1EA);margin-top:45px;padding:65px 0 0;overflow:hidden}.wthats-section>.wave{position:absolute;top:-10px;left:0;height:75px;background:radial-gradient(ellipse 80px 30px at 50% 0,var(--cream) 99%,transparent 101%) repeat-x;background-size:160px 80px}.wthats-title{text-align:center;font-size:50px;line-height:1.1;margin:75px auto 12px;font-weight:900;letter-spacing:-2px}.wthats-title:after{content:"↘";font-family:Georgia,serif;font-size:76px;position:absolute;margin:-12px 0 0 20px;animation:bob 2s linear infinite}.product-disclaimer{text-align:center;font-size:13px;letter-spacing:.4px;color:#877972;margin:0}.whats-home-slider{padding-top:10px}.flavor-track{display:flex;gap:20px;padding:0 calc(50vw - 210px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth;align-items:stretch}.flavor-slide{position:relative;flex:0 0 420px;height:790px;scroll-snap-align:center;cursor:pointer;outline-offset:-10px}.yogurt-preview{width:100%;height:100%;position:relative}.image-yogurt-info{position:absolute;inset:0 0 auto;height:600px;background-repeat:no-repeat;background-size:105% auto;background-position:center top;z-index:2;transition:transform .5s,filter .5s;transform:scale(.78) translateY(70px);filter:saturate(.85)}.flavor-slide.is-active .image-yogurt-info{transform:scale(1) translateY(0);filter:none}.circle-yogurt-info{width:395px;height:350px;position:absolute;bottom:55px;left:12px;border-radius:58% 42% 39% 61% / 45% 61% 39% 55%;background:white;box-shadow:0 10px 35px rgba(48,35,31,.1);z-index:1;opacity:.25;transform:translateY(36px) scale(.88);transition:opacity .55s,transform .55s;border:1px solid rgba(255,255,255,.8);animation:wobble 9s linear infinite}.flavor-slide.is-active .circle-yogurt-info{opacity:1;transform:translateY(0) scale(1)}.circle-yogurt-info-name{font-size:29px;line-height:1.2;font-weight:900;position:absolute;top:210px;width:100%;text-align:center;padding:0 40px;margin:0;color:var(--ink)}.circle-yogurt-info-description{position:absolute;top:252px;width:100%;text-align:center;padding:0 55px;margin:0;font-size:18px;line-height:1.25}.flavor-controls{display:flex;gap:20px;justify-content:center;align-items:center;padding-bottom:75px}.flavor-controls span{font-weight:900;font-size:14px;letter-spacing:2px;min-width:68px;text-align:center}
/* 6. Values grid / oversized decorative product */
.info-home-section{background:linear-gradient(180deg,#FCF1EA 20%,white 100%);padding:135px 0 150px;overflow:hidden}.info-home-section:before{content:"";display:block;position:absolute;width:460px;height:420px;border:8px dashed #EFC5B9;border-radius:50%;left:-70px;top:25%;animation:spin 40s linear infinite;opacity:.6}.section-kicker{text-align:center;margin:0 auto 75px;position:relative;font-size:18px;letter-spacing:2.8px}.info-home-section .grid-box.row-2{grid-template-columns:57% 43%}.info-home-section .grid-box.row-3{gap:35px 4px}.info-home-section .row{min-width:0}.info-home-section .grid-box.row-3 .row{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0}.icon-info-home{display:block;width:112px;height:112px;object-fit:contain;transition:transform .4s}.icon-info-home:hover{transform:rotate(-12deg) scale(1.09)}.text-info-home{text-align:center;color:var(--pink);font-size:22px;font-weight:900;line-height:1.3;margin:14px 0 32px}.info-home-image{position:absolute;height:auto;width:560px;max-width:none;top:-120px;left:-10px;filter:drop-shadow(0 15px 18px #e7b9af35)}.no-pointer{pointer-events:none}
/* 7. Instagram-like visual grid, no embed/tracking */
.instagram-section{padding:60px 0 0;background:white}.instagram-section .wrapper{text-align:center;padding-bottom:28px}.gallery-title{font-size:37px;font-weight:900;letter-spacing:-1.5px;margin:0}.gallery-title span{color:var(--pink)}.instagram-section p{font-size:18px;margin:10px 0;color:#6e6661}.gallery-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;width:100%;overflow:hidden}.gallery-card{aspect-ratio:1/1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}.gallery-card img{height:100%;width:100%;object-fit:contain;padding:9%;transition:transform .55s cubic-bezier(.2,.8,.2,1)}.gallery-card:hover img{transform:scale(1.13) rotate(-4deg)}.gallery-card span{position:absolute;bottom:16px;left:17px;font-size:16px;font-weight:900;letter-spacing:.3px;background:#fff9;border-radius:50px;padding:8px 14px}.g1{background:#f6d3b3}.g2{background:#E7BBAF}.g3{background:#b9a396}.g4{background:#ffe2a9}.g5{background:#c7bae0}.g6{background:#c7d6b8}.g7{background:#f8e8be}.g8{background:#c6ad9b}
/* Footer — split supporting copy / navigation columns */
footer{background:#eee9e3;padding:85px 0 28px}.grid-box-footer{display:grid;grid-template-columns:1fr 1fr;gap:70px}.footer-brand{margin:0 0 35px}.desc-footer p{font-size:17px;line-height:1.85;max-width:350px;margin:0 0 20px}.footer-contact-link{display:inline-block;margin-top:12px;text-decoration:underline;text-underline-offset:4px;font-weight:900;font-size:17px}.demo-warning{display:block;color:#806c63;margin-top:9px;font-size:11px;letter-spacing:.4px}.menu-footer .menu{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;list-style:none;margin:0;padding:0}.menu-footer .menu-item{font-size:21px;font-weight:900}.menu-footer a:hover{color:#cc8a79}.social-footer{font-size:15px;font-weight:800;color:#e59480;margin-top:45px;letter-spacing:3px}.cop{border-top:1px solid #d2cbc4;margin-top:40px;padding-top:24px}.year{font-size:14px;line-height:1.75;color:#635c57}.footer-sep{padding:0 12px}
/* Subtle original-style motion */
@keyframes spin{to{transform:rotate(360deg)}}@keyframes wobble{0%,100%{border-radius:58% 42% 39% 61% / 45% 61% 39% 55%}50%{border-radius:49% 51% 59% 41% / 59% 43% 57% 41%}}@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}@keyframes popIn{from{opacity:.25;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
/* Tablet */
@media(max-width:1000px){.home-banner{height:710px}.home-banner .wrapper,.home-banner .grid-box{width:calc(100% - 70px)}.home-banner .title-text{font-size:clamp(46px,6vw,68px)}.hero-product img{max-width:115%;height:520px}.hero-slide:nth-child(1) .hero-product img{rotate:-4deg;}.hero-slide:nth-child(2) .hero-product img{rotate:3deg;}.hero-slide:nth-child(3) .hero-product img{rotate:-3deg;}.hero-circle{width:440px;height:440px;right:3%;top:20%}.share-the-chi .content p{font-size:22px;line-height:1.6}.info-home-section .grid-box.row-2{grid-template-columns:60% 40%}.info-home-image{width:490px;left:-45px;top:-35px}.gallery-grid{grid-template-columns:repeat(4,1fr)}.gallery-card span{font-size:12px}.menu-card{flex-basis:360px}.menu-card:nth-child(even){flex-basis:430px}}
/* Mobile */
@media(max-width:690px){.wrapper{width:calc(100% - 36px)}.header{top:17px}.header-inner{min-height:46px}.brand-mark{font-size:24px}.brand-mark small{font-size:10px}.burger-menu{width:47px;height:47px}.menuPanel{padding:35px 22px}.menu-brand{margin-bottom:30px}.main-menu .menu-item{font-size:26px}.grid-box.row-2{grid-template-columns:1fr}.home-banner{height:770px;min-height:0;max-height:none}.home-banner .wrapper,.home-banner .grid-box{width:calc(100% - 30px);height:100%}.home-banner .grid-box{grid-template-columns:1fr;grid-template-rows:49% 51%}.hero-copy{align-items:center;text-align:center;justify-content:flex-end;padding:67px 10px 0}.home-banner .title-text{font-size:clamp(41px,9.9vw,57px);line-height:.99;max-width:460px;margin:0 0 10px}.underlined{white-space:normal}.hero-eyebrow{font-size:10px;line-height:1.35;letter-spacing:1.4px;margin:8px 0 10px}.text-link{font-size:15px}.hero-product{height:100%;align-items:flex-start}.hero-product img{width:100%;height:370px;max-height:107%;max-width:365px;object-fit:contain;margin-top:-5px}.hero-slide:nth-child(1) .hero-product img{rotate:-4deg;}.hero-slide:nth-child(2) .hero-product img{rotate:3deg;}.hero-slide:nth-child(3) .hero-product img{rotate:-3deg;}.hero-circle{width:340px;height:340px;top:54%;right:calc(50% - 170px);border-width:6px}.hero-pagination{bottom:29px}.scroll-cue{bottom:-39px;font-size:64px}.wave{height:60px}.wave.flip{background-size:100px 60px}.home-menu-slider{padding:60px 0 65px}.home-menu-slider>.wrapper>.title-text{font-size:25px;line-height:1.1;margin:0 0 23px}.little-arrow{font-size:45px;margin-left:8px}.menu-track{padding:8px 18px 20px;gap:14px}.menu-card,.menu-card:nth-child(even){flex-basis:300px;height:248px;border-radius:24px}.menu-card:nth-child(even){border-radius:25% 18% 30% 17%}.menu-card .text-box{left:22px;top:25px}.menu-card .title-text{font-size:31px}.menu-card p{font-size:16px}.menu-card img{width:240px;right:-38px;bottom:-88px}.slider-nav{margin-top:12px}.share-the-chi{padding:45px 0 80px}.share-the-chi .grid-box{grid-template-columns:1fr}.share-thee-chi-img{width:90%;max-width:460px;margin:0 auto}.share-the-chi .content{padding:15px 15px 0}.share-the-chi .content p{font-size:21px;line-height:1.65;text-align:center}.share-the-chi .content strong{font-size:24px}.slider-info-home-section{padding:0 14px 35px}.info-home-slider{height:470px;min-height:0;border-radius:26% 18% 18% 30% / 12% 10% 12% 14%}.info-slide img{width:355px;height:450px;top:42%}.info-slide:before,.info-slide:after{width:320px;height:320px;left:calc(50% - 160px);top:10%}.info-slide:after{width:380px;height:350px;left:calc(50% - 190px);top:7%}.info-slide .title-text{font-size:39px;line-height:1.05}.info-slide .content{bottom:8%}.arrow-box{left:10px;right:10px}.arrow-box button{height:39px;width:39px;font-size:23px}.wthats-section{margin-top:30px;padding-top:25px}.wthats-title{font-size:38px;margin-top:65px}.wthats-title:after{font-size:45px;margin:0 0 0 12px}.product-disclaimer{font-size:11px;margin:6px 25px}.flavor-track{gap:10px;padding:0 calc(50vw - 150px)}.flavor-slide{flex-basis:300px;height:610px}.image-yogurt-info{height:440px;background-size:109% auto}.circle-yogurt-info{width:296px;height:272px;left:1px;bottom:42px}.circle-yogurt-info-name{font-size:23px;top:157px;padding:0 21px}.circle-yogurt-info-description{font-size:15px;top:195px;padding:0 27px}.flavor-controls{padding-bottom:45px}.info-home-section{padding:70px 0 110px}.info-home-section .grid-box.row-2{grid-template-columns:1fr}.section-kicker{font-size:13px;letter-spacing:2px;margin-bottom:40px}.info-home-section .grid-box.row-3{grid-template-columns:repeat(2,1fr);gap:17px 10px}.icon-info-home{height:78px;width:78px}.text-info-home{font-size:17px;margin:5px 0 18px}.info-home-section .no-pointer{height:430px}.info-home-image{width:410px;max-width:120%;top:-15px;left:50%;transform:translateX(-50%)}.gallery-title{font-size:29px}.instagram-section p{font-size:15px}.gallery-grid{grid-template-columns:repeat(2,1fr)}.gallery-card span{font-size:12px;bottom:9px;left:8px;padding:6px 9px}footer{padding:65px 0 25px}.grid-box-footer{grid-template-columns:1fr;gap:60px}.desc-footer p{font-size:16px}.menu-footer .menu-item{font-size:17px}.social-footer{font-size:12px}.year{font-size:12px}.footer-sep{padding:0 7px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.menu-track,.flavor-track{scroll-behavior:auto}}

/* Ayoyo refinements — original visual section format preserved */
:root{--ayoyo:#a4c639;--ayoyo-deep:#53682c;--soft-lime:#f1f7e1}
.brand-mark{letter-spacing:-1.5px}.brand-mark small{letter-spacing:3px}.brand-dot{color:#98ba32!important;font-size:.68em;margin-left:4px;vertical-align:14%}
.brand-mark:focus-visible,.catalog-card:focus-visible,.view-range:focus-visible,.gallery-card:focus-visible,.dialog-close:focus-visible{outline:3px solid #719626;outline-offset:4px}
.hero-eyebrow{color:#984B3B}.hero-slide:nth-child(1) .underlined::after{background:#dcebbb}.share-the-chi .content strong{color:#984B3B}
.wthats-section{background:linear-gradient(180deg,#fffbf7,#f8f9ed 84%,#f1f5e5)}.info-home-section{background:#fffdf9}.info-home-section:before{border-color:#dce6bd}
.text-info-home{color:#984B3B}.footer-contact-link:hover{color:#984B3B}.social-footer{color:#984B3B}.footer-brand{margin-bottom:30px}
.product-disclaimer{max-width:600px;margin:8px auto 12px;line-height:1.6;color:#605a50}.circle-yogurt-info{background:#fffdf7}
.circle-yogurt-info-name{top:201px}.circle-yogurt-info-description{top:250px;max-height:40px}
.view-range{position:absolute;bottom:19px;left:50%;transform:translateX(-50%);border:0;border-radius:30px;padding:9px 18px;background:var(--ayoyo-deep);color:white;font:800 13px Manjari,'Trebuchet MS',Arial,sans-serif;white-space:nowrap;cursor:pointer;transition:background .2s}.view-range:hover{background:#84a63c}
.pudding-more{display:flex;justify-content:center;padding:0 20px 45px}.catalogue-link{text-decoration:underline;text-underline-offset:6px;font-weight:900;color:#984B3B;font-size:18px}
.catalogue-section{background:#fffdf7;padding:100px 0 115px}.catalog-eyebrow{text-align:center;letter-spacing:3px;font-size:13px;font-weight:900;color:#984B3B;margin:0 0 13px}.catalogue-title{text-align:center;font-size:clamp(40px,5.6vw,76px);letter-spacing:-2.8px;line-height:1.04;margin:0 0 19px}.catalogue-title .underlined::after{background:#e7efd0}.catalogue-description{text-align:center;max-width:660px;margin:0 auto 48px;line-height:1.65;color:#665f53;font-size:17px}.catalog-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.catalog-card{display:flex;flex-direction:column;text-align:left;background:white;border:1px solid #edeade;box-shadow:0 11px 36px rgba(69,57,34,.05);padding:0;border-radius:22px;cursor:pointer;overflow:hidden;transition:transform .25s,box-shadow .25s;color:var(--ink);font-family:inherit}.catalog-card:hover{transform:translateY(-6px);box-shadow:0 17px 48px rgba(69,57,34,.13)}.catalog-art{height:255px;width:100%;display:block;overflow:hidden;background:#f3e3aa}.catalog-card:nth-child(3n+2) .catalog-art{background:#F4E4DC}.catalog-card:nth-child(3n+3) .catalog-art{background:#e3edf3}.catalog-art img{height:100%;width:100%;object-fit:contain;transition:transform .35s}.catalog-card:hover .catalog-art img{transform:scale(1.07) rotate(-2deg)}.catalog-meta{padding:19px 19px 22px;display:flex;flex-direction:column;align-items:flex-start;gap:7px;flex:1}.catalog-best{font-size:10px;letter-spacing:1px;font-weight:900;border-radius:30px;padding:6px 9px;color:#6e3d00;background:#ffe8b2}.catalog-name{font-weight:950;font-size:21px;line-height:1.15;letter-spacing:-.6px}.catalog-count{font-size:13px;font-weight:800;color:#984B3B;margin-top:auto;padding-top:7px}.catalog-count span{font-size:17px}
.partner-statement{margin:20px 15px 0;max-width:700px;line-height:1.7;font-size:15px;color:#5b5b4c}
.gallery-card{border:0;padding:0;cursor:pointer;font-family:inherit}.gallery-card:focus-visible{z-index:2}
.desc-footer a:not(.brand-mark){text-underline-offset:3px}.desc-footer a:not(.brand-mark):hover{color:#984B3B}.desc-footer p strong{font-weight:900}
.product-dialog{width:min(960px,calc(100vw - 28px));max-height:min(830px,calc(100dvh - 32px));border:0;border-radius:24px;background:#fffdf8;box-shadow:0 20px 100px #1d281e55;padding:34px 35px 28px;color:var(--ink)}.product-dialog::backdrop{background:rgba(24,37,29,.65);backdrop-filter:blur(5px)}.dialog-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-bottom:1px solid #dfe7ca;padding-bottom:22px}.dialog-eyebrow{color:#984B3B;font-size:12px;font-weight:900;letter-spacing:2px;margin:0 0 11px}.dialog-head h2{font-size:clamp(29px,4.4vw,48px);line-height:1.08;letter-spacing:-1.3px;margin:0 0 9px}.dialog-head p#dialog-count{font-size:13px;color:#696a5d;margin:0}.dialog-close{flex-shrink:0;border:0;background:#eff3e5;border-radius:50%;height:45px;width:45px;font-size:32px;line-height:1;cursor:pointer}.dialog-close:hover{background:#dfeaba}.dialog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:24px 0;max-height:55vh;overflow-y:auto}.detail-product{background:white;border:1px solid #ece8da;border-radius:18px;overflow:hidden;min-width:0}.detail-product-art{display:block;height:172px;overflow:hidden;background:linear-gradient(125deg,#f0f5e5,#f8e8da)}.detail-product-art img{width:100%;height:100%;object-fit:contain}.detail-product h3{font-size:16px;line-height:1.3;padding:13px 14px 17px;margin:0}.dialog-foot{border-top:1px solid #dfe7ca;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:20px}.dialog-foot p{font-size:11px;color:#807e72;margin:0;max-width:410px;line-height:1.5}.dialog-enquire{background:#a4c639;border-radius:40px;color:#984B3B;text-decoration:none;padding:12px 17px;font-weight:900;font-size:13px;white-space:nowrap}.dialog-enquire:hover{background:#badb61}
@media(max-width:1000px){.catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.catalog-art{height:230px}.catalog-name{font-size:19px}}
@media(max-width:690px){.brand-mark{font-size:24px}.brand-mark small{font-size:9px;letter-spacing:2px}.circle-yogurt-info-name{top:150px}.circle-yogurt-info-description{top:189px;font-size:13px}.view-range{bottom:14px;font-size:11px;padding:7px 13px}.catalogue-section{padding:66px 0 78px}.catalogue-title{letter-spacing:-1.4px}.catalogue-description{font-size:14px;margin:0 auto 30px}.catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.catalog-art{height:170px}.catalog-meta{padding:12px 12px 15px}.catalog-name{font-size:16px}.catalog-count{font-size:11px}.product-dialog{padding:19px 17px;max-height:calc(100dvh - 20px);border-radius:18px}.dialog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.detail-product-art{height:115px}.detail-product h3{font-size:12px}.dialog-foot{flex-direction:column;align-items:stretch;gap:12px}.dialog-foot p{font-size:10px}.dialog-enquire{text-align:center}.partner-statement{font-size:14px}.gallery-card span{font-size:11px}}
@media(max-width:370px){.catalog-grid{grid-template-columns:1fr 1fr}.catalog-art{height:138px}.catalog-name{font-size:14px}.dialog-grid{grid-template-columns:1fr 1fr}}


/* Official Ayoyo brand logo supplied by the company. */
.brand-mark.brand-logo{display:inline-flex;flex-direction:row;align-items:center;justify-content:flex-start;line-height:1;min-height:0;letter-spacing:normal;flex-shrink:0}
.brand-logo img{display:block;width:176px;height:auto;max-width:100%;object-fit:contain}
.brand-logo.menu-brand{justify-content:center;margin-bottom:37px}
.brand-logo.menu-brand img{width:225px}
.brand-logo.footer-brand img{width:177px}
@media(max-width:690px){
  .brand-logo img{width:142px}
  .brand-logo.menu-brand img{width:195px}
  .brand-logo.footer-brand img{width:165px}
}


/* New Ayoyo corporate copy and contact sections, sourced from AyoyoProducts_website.pdf. */
.story-heading{margin:0 0 24px;text-align:right;font-size:clamp(24px,2.3vw,34px);font-weight:950;letter-spacing:-1px;line-height:1.15}
.story-heading span{display:block;color:#984B3B}.share-the-chi .content p{font-size:19px;line-height:1.62;text-align:left;margin:0 0 15px}.share-the-chi .content strong{font-size:inherit;color:#984B3B}
.editorial-kicker{font-size:12px;letter-spacing:2.8px;font-weight:950;color:#984B3B;margin:0 0 16px}
.editorial-heading{font-size:clamp(42px,5vw,74px);line-height:.98;letter-spacing:-3px;margin:0 0 34px;font-weight:950}
.editorial-heading .underlined:after{background:#e6f0c3}
.ayoyo-about{padding:115px 0;background:#f7f6ef;overflow:hidden}
.about-columns{display:grid;grid-template-columns:1fr .95fr;gap:65px;align-items:center}
.about-copy p:not(.editorial-kicker){font-size:17px;line-height:1.73;margin:0 0 21px;color:#55554c}.about-copy strong{color:#984B3B}
.about-photo{margin:0;align-self:stretch;display:flex;flex-direction:column;gap:10px}.about-photo img{width:100%;height:720px;object-fit:cover;object-position:center center;border-radius:120px 26px 100px 28px}
.about-photo figcaption,.cert-photo figcaption{font-size:12px;color:#6d6c61;letter-spacing:.3px}
.ayoyo-proof{background:#fff;padding:92px 0}.ayoyo-proof .wrapper{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px}
.proof-panel{background:#f4f7e8;padding:34px 26px 31px;border-radius:38px 12px 26px 12px;border:1px solid #e1e9c8}
.proof-panel:nth-child(2){background:#fff1e5;border-color:#f2ddca}
.proof-panel:nth-child(3){background:#f4eefa;border-color:#e8dcee}
.proof-panel h2{font-size:clamp(20px,1.7vw,25px);line-height:1.23;letter-spacing:-.5px;margin:0 0 29px}
.proof-panel p{font-size:15px;line-height:1.7;margin:0;color:#55534c}
.info-home-section .section-kicker{max-width:870px;line-height:1.45;font-size:18px}
.info-home-section .text-info-home{font-size:20px;max-width:205px}
.quality-details{padding:35px 0 0}.quality-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.quality-list article{background:#fff;border:1px solid #e5e9d9;border-radius:16px;padding:25px 22px;min-height:255px}
.quality-number{display:block;font-size:12px;letter-spacing:2px;color:#984B3B;font-weight:950;margin-bottom:26px}
.quality-list h3{font-size:23px;letter-spacing:-.5px;line-height:1.1;margin:0 0 12px}
.quality-list p{font-size:14px;line-height:1.67;color:#5d5d52;margin:0}
.quality-list .quality-aim{background:#e7efd2}
.ayoyo-certifications{background:#fbf7ef;padding:95px 0 105px}.cert-columns{display:grid;grid-template-columns:.75fr 1.25fr;gap:80px;align-items:center}
.cert-columns>div>p:not(.editorial-kicker){font-size:17px;line-height:1.7;color:#56544c}
.cert-enquire{display:inline-block;border-bottom:2px solid currentColor;padding:11px 0;font-size:15px;font-weight:900;margin-top:12px}
.cert-photo{margin:0}.cert-photo img{width:100%;border-radius:14px;box-shadow:0 18px 55px rgba(77,64,42,.08);border:1px solid #f0e6d9}
.cert-photo figcaption{margin-top:10px}
.ayoyo-contact{background:#f3f5e7;padding:105px 0 115px}.contact-intro{max-width:800px;margin-bottom:48px}.contact-intro>p:last-child{font-size:18px;line-height:1.7}
.contact-columns{display:grid;grid-template-columns:1.45fr .78fr;gap:85px}
.enquiry-form{background:#fff;padding:40px;border-radius:26px;box-shadow:0 14px 45px rgba(76,92,39,.05)}
.enquiry-form label{display:block;color:#984B3B;font-size:14px;font-weight:850;margin-bottom:19px}
.enquiry-form label span{color:#bc684a}
.contact-input-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}
.enquiry-form input,.enquiry-form textarea{display:block;margin-top:8px;width:100%;font:inherit;resize:vertical;border-radius:9px;border:1px solid #cbd4b7;background:#fafcf6;padding:14px 15px;outline:none;transition:border-color .2s,box-shadow .2s}
.enquiry-form input:focus,.enquiry-form textarea:focus{border-color:#72933f;box-shadow:0 0 0 3px #cfe4ae66}
.enquiry-submit{background:#7f9a4c;color:white;border:0;padding:17px 23px;border-radius:45px;font-size:14px;font-weight:950;letter-spacing:.4px;display:flex;gap:20px;justify-content:space-between;align-items:center;transition:transform .2s,background .2s}
.enquiry-submit:hover{background:#526f27;transform:translateY(-2px)}
.form-note{font-size:12px;color:#6a6b5f;line-height:1.5;margin:18px 0 0}
.contact-details{padding-top:10px}.contact-details h3{font-size:26px;line-height:1.2;letter-spacing:-.5px;margin:0 0 20px}.contact-details h3:not(:first-child){margin-top:47px}
.contact-details a{display:block;margin:0 0 10px;font-size:18px;line-height:1.5;text-decoration:underline;text-underline-offset:3px}.contact-details p{font-size:16px;line-height:1.65;margin:0 0 14px;color:#535849}
.contact-details strong{font-weight:900;color:#373b30}
@media(max-width:1000px){.about-columns{gap:30px}.about-photo img{height:680px}.cert-columns{gap:30px}.contact-columns{gap:40px}.quality-list{grid-template-columns:repeat(2,minmax(0,1fr))}.ayoyo-proof .wrapper{gap:12px}.proof-panel{padding:26px 18px}.proof-panel h2{font-size:20px}}
@media(max-width:690px){.story-heading{text-align:center;font-size:26px}.share-the-chi .content p{font-size:16px;line-height:1.65;text-align:left}.ayoyo-about{padding:75px 0}.about-columns,.cert-columns,.contact-columns{grid-template-columns:1fr;gap:32px}.editorial-heading{font-size:47px;letter-spacing:-1.5px}.about-copy p:not(.editorial-kicker){font-size:15px;line-height:1.7}.about-photo img{height:470px;border-radius:70px 14px 60px 12px}.ayoyo-proof{padding:65px 0}.ayoyo-proof .wrapper{grid-template-columns:1fr;gap:13px}.proof-panel{padding:27px}.proof-panel h2{font-size:22px;margin:0 0 15px}.proof-panel p{font-size:14px}.info-home-section .section-kicker{font-size:14px}.quality-details{padding:5px 0 0}.quality-list{grid-template-columns:1fr;gap:10px}.quality-list article{min-height:0;padding:25px}.quality-number{margin-bottom:14px}.quality-list h3{font-size:21px}.ayoyo-certifications{padding:70px 0}.cert-columns>div>p:not(.editorial-kicker){font-size:15px}.ayoyo-contact{padding:70px 0 82px}.contact-intro{margin-bottom:26px}.contact-intro>p:last-child{font-size:15px}.contact-columns{gap:45px}.contact-input-grid{grid-template-columns:1fr}.enquiry-form{padding:23px 18px}.enquiry-submit{width:100%;font-size:12px;padding:16px}.contact-details h3{font-size:24px}.contact-details a{font-size:16px}}

/* ================================================================
   AYOYO — STRATEGIC CORPORATE NAVIGATION & CONTENT FLOW (2026)
   Inspired by FMCG information architecture: immediate product discovery,
   discoverable credibility, and a business-enquiry path.
   ================================================================ */
:root{--brand-forest:#415622;--brand-leaf:#91b337;--warm-paper:#faf9f4}
html{scroll-padding-top:98px}
:focus-visible{outline:3px solid #c46a29;outline-offset:4px}
.skip-link{position:fixed;z-index:300;left:12px;top:-70px;background:#fff;border:2px solid var(--brand-forest);color:var(--ink);font-weight:800;padding:12px 20px;border-radius:10px}
.skip-link:focus{top:10px}
.strategic-header{position:fixed;top:0;left:0;right:0;z-index:80;background:rgba(255,255,255,.96);box-shadow:0 1px 0 rgba(53,62,38,.13);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:box-shadow .25s}
.strategic-header.has-scrolled{box-shadow:0 5px 35px rgba(31,46,25,.09)}
.strategic-header .header-inner{min-height:93px;gap:22px}
.strategic-header .brand-logo img{width:160px}
.desktop-primary{display:flex;align-items:center;gap:clamp(16px,2.1vw,36px);margin-left:auto}
.desktop-primary a{font:750 14px/1.2 Arial,sans-serif;white-space:nowrap;color:#984B3B;padding:13px 0;position:relative}
.desktop-primary a:after{content:"";position:absolute;left:0;right:0;bottom:4px;background:#8dab48;height:2px;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.desktop-primary a:hover:after,.desktop-primary a:focus-visible:after{transform:scaleX(1)}
.header-actions{display:flex;align-items:center;gap:13px}
.header-enquiry{display:inline-flex;align-items:center;gap:11px;border-radius:999px;padding:13px 20px;background:#415a2c;color:#fff;font:800 13px/1.2 Arial,sans-serif;white-space:nowrap;transition:background .2s,transform .2s}
.header-enquiry:hover{background:#658331;transform:translateY(-1px)}
.header-enquiry span{font-size:19px;line-height:.8}
.strategic-header .burger-menu{width:auto;height:47px;display:flex;flex-direction:row;gap:13px;padding:0 16px;border-radius:999px;background:#f1f4e9;border:1px solid #dbe4d0;color:#984B3B;transform:none}
.strategic-header .burger-menu:hover{background:#e6efdc;transform:none}
.burger-text{font:800 13px Arial,sans-serif}
.burger-lines{display:flex;flex-direction:column;gap:6px;align-items:end}
.strategic-header .burger-menu .burger-lines i{display:block;height:2px;width:21px;background:#34452b;border-radius:2px}
.strategic-header .burger-menu .burger-lines i+ i{width:16px}
.menu-shade{z-index:120;background:rgba(25,30,18,.48);backdrop-filter:blur(3px)}
.strategic-menu{z-index:125;width:min(820px,100vw);padding:0;background:#fafaf5;display:block;text-align:left;overflow-y:auto;overflow-x:hidden;align-items:unset;justify-content:unset;box-shadow:-20px 0 65px rgba(14,22,17,.14);border-radius:0}
.menu-topbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 47px;border-bottom:1px solid #e7e6de;background:white;position:sticky;top:0;z-index:3}
.menu-identity{display:block}.menu-identity img{width:140px;height:auto}
.strategic-menu #close{position:static;font-size:13px;font-weight:800;display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid #d4dfc7;background:#f2f5e9;border-radius:25px;color:#984B3B}
.strategic-menu #close span:first-child{font-size:26px;font-weight:400;line-height:.65}
.menu-body{padding:40px 48px 20px}
.menu-intro .eyebrow{font:900 12px Arial,sans-serif;letter-spacing:2.2px;color:#984B3B}
.menu-intro h2{font-size:clamp(34px,4.7vw,57px);letter-spacing:-2.3px;line-height:1.05;margin:13px 0 12px;max-width:660px}
.menu-intro h2 em{font-style:normal;color:#984B3B}
.menu-intro p{max-width:580px;font-size:16px;line-height:1.5;color:#984B3B;margin:0 0 32px}
.menu-groups{display:grid;grid-template-columns:1fr 1fr;gap:24px 49px}
.menu-group{border-top:1px solid #d2d9c3;padding:19px 0 0}
.menu-group h3{font:900 12px/1.3 Arial,sans-serif;letter-spacing:1.1px;color:#984B3B;margin:0 0 13px}
.menu-group a,.menu-category-link{background:transparent;border:0;display:flex;justify-content:space-between;align-items:center;width:100%;padding:10px 0;text-align:left;gap:16px;font:760 clamp(16px,1.8vw,20px)/1.35 Arial,sans-serif;color:#984B3B;transition:color .2s,transform .2s;cursor:pointer}
.menu-group a:hover,.menu-category-link:hover{color:#984B3B;transform:translateX(4px)}
.menu-group a span,.menu-category-link span{font-weight:400;font-size:19px;color:#98b26d}
.menu-bottom{display:flex;align-items:end;gap:20px;padding:0 48px 34px;justify-content:space-between}
.menu-highlight{background:#fbf8f2;border-radius:25px 9px 22px 9px;padding:22px 28px;min-width:52%;margin-top:15px}
.menu-highlight>span{font:800 10px Arial,sans-serif;letter-spacing:1.4px;color:#984B3B}
.menu-highlight strong{display:block;font-size:26px;line-height:1.12;letter-spacing:-.6px;margin:12px 0;color:#984B3B}
.menu-highlight a{font-weight:900;font-size:13px;border-bottom:1.5px solid #48632b;padding-bottom:3px}
.menu-smallprint{font:800 10px/1.8 Arial,sans-serif;letter-spacing:1.2px;text-align:right;color:#848c76}
/* Make product discovery the first meaningful scroll action. */
.home-banner{height:min(760px,90vh);min-height:640px}.home-banner .title-text{max-width:690px}
.home-banner .hero-copy{padding-top:78px}
.home-banner .hero-eyebrow{color:#984B3B;letter-spacing:1.6px;max-width:540px;text-transform:uppercase}
.hero-secondary-link{position:absolute;right:max(42px,calc((100vw - 1440px)/2 + 48px));bottom:43px;z-index:5;font:800 13px Arial,sans-serif;text-decoration:underline;text-underline-offset:5px;color:#984B3B}
.hero-secondary-link:hover{color:#984B3B}
.trust-strip{background:#edf2df;border-top:1px solid #dae6c8;border-bottom:1px solid #dae6c8;padding:32px 0}
.trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.trust-grid>div{padding:6px 28px 7px;display:flex;flex-direction:column;gap:9px;border-left:1px solid #c8d7b7}
.trust-grid>div:first-child{border-left:0;padding-left:0}
.trust-grid strong{font-size:clamp(18px,2vw,25px);font-weight:900;line-height:1.12;color:#984B3B;letter-spacing:-.5px}
.trust-grid span{font:600 12px/1.5 Arial,sans-serif;color:#984B3B}
.wthats-section{padding-top:90px}
.wthats-title{font-size:clamp(32px,5vw,72px)}
.catalogue-section{background:#fafaf5}
.catalogue-title{margin-bottom:20px}
.catalog-controls{display:flex;flex-wrap:wrap;gap:9px;margin:30px 0 11px}
.filter-chip{border:1px solid #c9d9b5;background:#fff;border-radius:30px;padding:12px 19px;font:800 13px/1.2 Arial,sans-serif;color:#984B3B;transition:background .2s,color .2s,border .2s}
.filter-chip:hover{background:#e7eecf}.filter-chip.active{background:#48692b;color:white;border-color:#48692b}
.filter-chip span{font-size:11px;opacity:.78;margin-left:7px}
.catalog-result{color:#7b8072;font:650 12px/1.4 Arial,sans-serif;margin:0 0 22px}
.catalog-card[hidden]{display:none !important}
.home-menu-slider{padding:70px 0 80px;background:#eff2e5}
.home-menu-slider>.wrapper>.title-text{font-size:25px;text-align:left;margin-bottom:28px}
.menu-card{height:245px;flex-basis:340px;border-radius:22px}
.menu-card:nth-child(even){flex-basis:370px;border-radius:34px}
.menu-card .title-text{font-size:32px;line-height:1.1}
.menu-card p{font-size:16px}.menu-card img{width:260px;height:300px;right:-55px;bottom:-100px}
.ayoyo-proof{padding:90px 0 80px;background:white}
.proof-intro{grid-column:1/-1;text-align:center;max-width:760px;margin:0 auto 30px}
.proof-intro h2{font-size:clamp(33px,4.5vw,58px);letter-spacing:-2px;line-height:1.04;margin:11px 0 12px}
.proof-intro>p:last-child{font-size:16px;color:#69715e;margin:0}
.proof-panel{border-radius:22px;min-height:285px;display:flex;flex-direction:column;justify-content:space-between}
.proof-panel h2{font-size:clamp(22px,2vw,29px);max-width:270px;line-height:1.13}
.proof-panel p{font-size:15px}
.ayoyo-about{background:#f7f7f0;padding:90px 0}
.about-photo img{height:560px;border-radius:27px 100px 25px 90px}
.info-home-section{padding-top:90px}
.manufacturing-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;margin:20px 0 48px}
.manufacturing-intro h2{font-size:clamp(33px,4.5vw,61px);line-height:1.05;letter-spacing:-2px;margin:0 0 25px}
.manufacturing-intro p{font-size:18px;line-height:1.65;color:#59604e;max-width:540px;margin:0 0 29px}
.manufacturing-intro img{height:360px;width:100%;object-fit:cover;border-radius:90px 18px 90px 18px}
.quality-details{padding-top:4px}
.quality-list article{min-height:220px}
.ayoyo-certifications{padding:83px 0}
#site-footer{scroll-margin-top:75px}
@media(max-width:1150px){.desktop-primary{gap:15px}.desktop-primary a{font-size:12px}.header-enquiry{font-size:12px;padding:12px}.strategic-header .brand-logo img{width:145px}}
@media(max-width:950px){.desktop-primary{display:none}.strategic-header .header-inner{min-height:78px}.strategic-header .brand-logo img{width:139px}.header-actions{margin-left:auto}.trust-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 0}.trust-grid>div:nth-child(3){border-left:0;padding-left:0}}
@media(max-width:690px){
 html{scroll-padding-top:76px}.wrapper{width:calc(100% - 36px)}
 .strategic-header .header-inner{min-height:73px;gap:10px}.strategic-header .brand-logo img{width:123px}
 .header-enquiry{font-size:11px;padding:10px 12px}.header-enquiry span{font-size:14px}
 .header-actions{gap:8px}.strategic-header .burger-menu{width:42px;height:42px;min-width:42px;justify-content:center;padding:0;border-radius:50%}
 .burger-text{display:none}.burger-lines{gap:5px}.strategic-header .burger-menu .burger-lines i{width:19px;height:2px}.strategic-header .burger-menu .burger-lines i+ i{width:14px}
 .strategic-menu{width:100vw}.menu-topbar{padding:12px 20px}.menu-identity img{width:116px}.menu-body{padding:26px 23px 15px}
 .menu-intro h2{font-size:37px;letter-spacing:-1px;margin-top:9px}.menu-intro p{font-size:13px;margin:0 0 18px}
 .menu-groups{grid-template-columns:1fr;gap:9px}.menu-group{padding:13px 0 1px}.menu-group h3{font-size:10px;margin-bottom:8px}
 .menu-group a,.menu-category-link{font-size:16px;padding:8px 0}.menu-bottom{padding:10px 23px 28px;display:block}
 .menu-highlight{padding:18px 22px;margin-top:6px;min-width:0}.menu-highlight strong{font-size:23px}.menu-smallprint{text-align:left;margin-top:17px}
 .home-banner{height:700px;min-height:680px}.home-banner .wrapper,.home-banner .grid-box{width:calc(100% - 42px)}
 .home-banner .hero-copy{padding-top:93px}.home-banner .title-text{font-size:clamp(40px,10vw,58px);line-height:1.04}.home-banner .hero-eyebrow{font-size:10px;letter-spacing:1px;line-height:1.5}
 .hero-secondary-link{left:18px;right:18px;bottom:28px;text-align:center;font-size:12px}.scroll-cue{display:none}
 .trust-strip{padding:24px 0}.trust-grid{gap:20px 0}.trust-grid>div{padding:0 9px 0 15px;gap:5px}.trust-grid>div:first-child,.trust-grid>div:nth-child(3){padding-left:0}
 .trust-grid strong{font-size:18px}.trust-grid span{font-size:10px}
 .wthats-section{padding-top:55px}.wthats-title{font-size:38px;line-height:1.06;padding:0 20px}
 .catalog-controls{gap:7px}.filter-chip{padding:10px 13px;font-size:11px}.catalog-result{font-size:11px}
 .home-menu-slider{padding:55px 0}.home-menu-slider>.wrapper>.title-text{font-size:19px;margin:0 0 22px}
 .menu-card{flex-basis:250px;height:235px}.menu-card:nth-child(even){flex-basis:265px}.menu-card .title-text{font-size:27px}.menu-card p{font-size:14px}
 .proof-intro{margin-bottom:10px}.proof-intro h2{font-size:36px}.proof-panel{min-height:0}
 .about-photo img{height:420px;border-radius:65px 12px 50px 12px}
 .manufacturing-intro{grid-template-columns:1fr;gap:22px;margin:15px 0 29px}.manufacturing-intro h2{font-size:37px;margin:0 0 18px}.manufacturing-intro p{font-size:15px;margin:0 0 22px}
 .manufacturing-intro img{height:270px;border-radius:50px 12px 50px 12px}
}
@media(prefers-reduced-motion:reduce){.strategic-menu,.hero-slide,.hero-slide *{animation:none !important;transition:none !important}}

/* Header/menu finishing details */
.strategic-header .burger-menu span.burger-text,.strategic-header .burger-menu span.burger-lines{width:auto;height:auto;background:transparent;border-radius:0}
.strategic-header .burger-menu span.burger-lines{display:flex;align-items:flex-end;flex-direction:column;justify-content:center;gap:5px}
.enquiry-label-short{display:none}
@media(max-width:690px){.enquiry-label-long{display:none}.enquiry-label-short{display:inline}.header-enquiry{gap:5px}.hero-secondary-link{display:none}}
@media(max-width:690px){.strategic-header .burger-menu .burger-text{display:none}}
/* Prevent carousel artwork and offscreen drawer transitions from widening mobile viewports. */
html{overflow-x:clip}


/* ========== Requested minimalist refinements (2026-10-16) ========== */
/* Freeze circular decoration only. Original circles remain in place; slider still works. */
/* Restored circular animation as requested. */
.hero-circle{animation:spin 35s linear infinite !important;}
/* Ayoyo hero animation — inspired by the fluid four-circle motion from the user’s Dribbble reference. */
/* The original spinning/popping background is replaced; text, product imagery and sliders are unchanged. */
.hero-circle{
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  opacity:1;
  animation:none !important;
  transform:none;
  overflow:visible;
  pointer-events:none;
  will-change:auto;
}
.hero-circle::before,.hero-circle::after{content:none !important;animation:none !important;background:none !important;}
.hero-circle .ayoyo-blob-svg{display:block;width:100%;height:100%;overflow:visible;transform:translateZ(0);backface-visibility:hidden;contain:layout paint;}
.hero-circle .ayoyo-goo-bubbles{fill:var(--ayoyo-blob-color);opacity:.89;will-change:transform;}
.hero-slide:nth-child(1) .hero-circle{--ayoyo-blob-color:#BD6856;}
.hero-slide:nth-child(2) .hero-circle{--ayoyo-blob-color:#f3c43f;}
.hero-slide:nth-child(3) .hero-circle{--ayoyo-blob-color:#b3ca87;}
/* Small deformations make the goo separation look organic rather than mechanically rotating. */
.ayoyo-blob-svg circle{transform-box:fill-box;transform-origin:center;will-change:transform;backface-visibility:hidden;}
.ayoyo-blob-core{animation:ayoyoBlobBreathe 5.8s ease-in-out infinite;}
.ayoyo-blob-one{animation:ayoyoBlobMoveOne 5.8s ease-in-out infinite;}
.ayoyo-blob-two{animation:ayoyoBlobMoveTwo 5.8s ease-in-out infinite;}
.ayoyo-blob-three{animation:ayoyoBlobMoveThree 5.8s ease-in-out infinite;}
@keyframes ayoyoBlobBreathe {
  0%,100%{transform:translate(0,0) scale(1);}
  27%{transform:translate(-4px,5px) scale(1.045,.97);}
  55%{transform:translate(3px,-4px) scale(.98,1.04);}
  79%{transform:translate(-2px,3px) scale(1.03,.985);}
}
@keyframes ayoyoBlobMoveOne {
  0%,11%,100%{transform:translate(0,0) scale(1);}
  30%{transform:translate(47px,-28px) scale(.94);}
  53%,59%{transform:translate(120px,-92px) scale(.58);}
  79%{transform:translate(38px,-21px) scale(.92);}
  89%{transform:translate(-9px,5px) scale(1.035);}
}
@keyframes ayoyoBlobMoveTwo {
  0%,18%,100%{transform:translate(0,0) scale(1);}
  35%{transform:translate(-42px,-8px) scale(.9);}
  60%,67%{transform:translate(-115px,-63px) scale(.57);}
  83%{transform:translate(-30px,-7px) scale(.94);}
  93%{transform:translate(8px,2px) scale(1.025);}
}
@keyframes ayoyoBlobMoveThree {
  0%,7%,100%{transform:translate(0,0) scale(1);}
  28%{transform:translate(9px,43px) scale(.92);}
  50%,57%{transform:translate(52px,99px) scale(.6);}
  77%{transform:translate(13px,29px) scale(.9);}
  90%{transform:translate(-4px,-8px) scale(1.03);}
}
/* No unnecessary background animation when a hero slide is hidden. */
.hero-slide:not(.is-active) .ayoyo-blob-svg circle{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){
  .ayoyo-blob-svg circle{animation:none !important;}
}

.circle-yogurt-info{animation:wobble 9s linear infinite !important;}

/* Two small cameo appearances: Yomi at product discovery and at business enquiries. */
.catalogue-section .wrapper { position:relative; }
.yomi-product-cameo { position:absolute;z-index:1;top:-48px;right:-25px;width:185px;pointer-events:none;transform:rotate(5deg); }
.yomi-product-cameo img { width:100%;height:auto;filter:drop-shadow(0 5px 9px rgba(54,58,78,.05)); }
.catalogue-section .catalog-eyebrow,.catalogue-section .catalogue-title,.catalogue-section .catalogue-description { position:relative;z-index:2; }
.ayoyo-contact>.wrapper { position:relative; }
.yomi-contact-wave { position:absolute;z-index:1;right:8px;top:-54px;width:238px;pointer-events:none; }
.yomi-contact-wave img { width:100%;height:auto;display:block; }
.yomi-wave-message { position:absolute;top:49%;left:84%;transform:translate(-50%,-50%);font-size:16px;color:#344b64;font-weight:900; }
.contact-intro { position:relative;z-index:2; }

/* Individual thumbnails of ORIGINAL, unaltered official PDFs. */
.cert-gallery { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;align-self:center; }
.cert-card { background:#fffdfb;border:1px solid #ece9e1;display:flex;flex-direction:column;min-width:0;border-radius:13px;overflow:hidden;box-shadow:0 8px 24px rgba(53,43,31,.05);transition:box-shadow .2s,transform .2s; }
.cert-card:hover,.cert-card:focus-visible { transform:translateY(-3px);box-shadow:0 12px 30px rgba(53,43,31,.12);outline-offset:2px; }
.cert-card img { width:100%;height:170px;object-fit:contain;background:#fff;display:block;padding:8px 11px; }
.cert-card-details { display:flex;flex-direction:column;gap:4px;padding:9px 10px 12px;border-top:1px solid #f0eee8; }
.cert-card-details strong { font-size:12px;line-height:1.25;color:#984B3B;font-weight:900; }
.cert-card-details small { font-size:10px;line-height:1.2;color:#76766e; }
.cert-scope-note { color:#6b685d;font-size:12px;line-height:1.5;grid-column:2; margin:-4px 0 0; }
@media(min-width:691px) {.cert-columns { gap:50px;grid-template-columns:.72fr 1.28fr; } }
@media(max-width:1100px){.yomi-product-cameo { width:140px;right:-4px;top:-28px; }.yomi-contact-wave{width:175px;top:-30px;}.yomi-wave-message{font-size:12px;}}
@media(max-width:950px){.cert-gallery {grid-template-columns:repeat(2,minmax(0,1fr));}.cert-scope-note{grid-column:1/-1;}.yomi-product-cameo {width:112px;right:0;top:-25px;}}
@media(max-width:690px){
 .yomi-product-cameo {width:98px;top:-35px;right:-8px;opacity:.9;}
 .catalogue-section .catalogue-title {padding:0 26px;}
 .yomi-contact-wave { width:142px;right:0;top:4px; }
 .yomi-wave-message {font-size:10px;}
 .contact-intro {padding-right:60px;min-height:110px;}
 .contact-intro .editorial-heading {font-size:39px;}
 .cert-gallery {grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
 .cert-card img {height:145px;padding:7px;}
 .cert-card-details strong{font-size:11px;}.cert-card-details small{font-size:9px;}
}
@media(max-width:330px){.yomi-product-cameo{width:78px;top:-23px;}.yomi-contact-wave{width:112px;top:13px;}.contact-intro{padding-right:44px;}.contact-intro .editorial-heading{font-size:35px;}}

/* Keep the mobile catalogue heading uncluttered; Yomi still greets mobile visitors at contact. */
@media(max-width:690px){.yomi-product-cameo{display:none}}

/* Requested refinement: remove only the graphic highlight bars beneath heading text. */
.underlined::after { content: none !important; display: none !important; }

/* Minimal styles for official catalogue details and new contact fields (all original layout retained). */
.official-catalogue-link{display:inline-flex;margin:10px 0 22px;color:inherit;font-size:0.91rem;font-weight:700;text-decoration:underline;text-underline-offset:4px}
.catalogue-pack{font-size:.82rem;line-height:1.45;color:#984B3B;margin:.45rem 0 0}
.catalogue-barcode{display:block;font-size:.72rem;line-height:1.5;color:#984B3B;margin-top:.25rem;overflow-wrap:anywhere}
.contact-fax{font-size:.86rem;line-height:1.55}
#puddings .image-yogurt-info{background-size:contain;background-repeat:no-repeat;background-position:center}


/* ================================================================
   Light-cream refinement + restored hero styling + moving ribbon
   ================================================================ */
:root{
  --cream:#fbf8f1;
  --paper:#fffdf8;
  --lilac:#e9e1f1;
  --green:#dbe7c8;
  --blue:#d8edf1;
  --yellow:#f7e8b7;
}
body{background:var(--cream)}
.underlined:after{background:rgba(244,224,143,.78)}
.home-banner{background:#fbf8f1;height:800px;min-height:690px;max-height:920px}
.hero-slide{background:#fbf8f1;overflow:hidden}
.hero-slide:nth-child(1){background:radial-gradient(circle at 103% 20%, rgba(189,104,86,.38) 0 68px, transparent 69px),radial-gradient(circle at 77% 68%, rgba(251,239,198,.42) 0 230px, transparent 231px),#fbf8f1}
.hero-slide:nth-child(2){background:radial-gradient(circle at 101% 18%, rgba(250,219,164,.92) 0 68px, transparent 69px),radial-gradient(circle at 78% 68%, rgba(255,240,189,.52) 0 235px, transparent 236px),#fbf8f1}
.hero-slide:nth-child(3){background:radial-gradient(circle at 101% 19%, rgba(212,232,194,.95) 0 68px, transparent 69px),radial-gradient(circle at 78% 68%, rgba(222,240,209,.54) 0 235px, transparent 236px),#fbf8f1}
.hero-slide::before{content:"";position:absolute;left:56%;top:17%;width:205px;height:205px;border-radius:50%;opacity:.18;background-image:radial-gradient(circle, rgba(112,136,79,.28) 0 1.6px, transparent 1.7px);background-size:22px 22px;z-index:0}
.hero-slide:nth-child(1)::before{background-image:radial-gradient(circle, rgba(189,104,86,.64) 0 1.6px, transparent 1.7px)}
.hero-slide:nth-child(2)::before{background-image:radial-gradient(circle, rgba(233,181,79,.75) 0 1.6px, transparent 1.7px)}
.hero-slide:nth-child(3)::before{background-image:radial-gradient(circle, rgba(146,181,118,.78) 0 1.6px, transparent 1.7px)}
.hero-copy{padding-top:82px}
.home-banner .title-text{font-size:clamp(62px,7vw,118px);line-height:.95;max-width:720px;letter-spacing:-.07em;color:#36332e;margin:0 0 34px}
.hero-eyebrow{font-size:13px;letter-spacing:3.2px;color:#984B3B;font-weight:900;margin:0 0 54px;max-width:720px;line-height:1.8;text-transform:uppercase}
.text-link{font-size:19px;font-weight:950;color:#36332e;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:10px}
.text-link:hover{color:#984B3B}
.hero-product{z-index:2}
.hero-product img{filter:drop-shadow(0 24px 18px rgba(91,54,39,.08))}
.hero-circle{right:3%;top:11%;opacity:.9;border-width:10px}
.hero-pagination{bottom:36px;left:98px;transform:none;gap:14px}
.hero-dot{width:20px;height:20px;background:#d7d0c8;border-radius:999px}
.hero-dot.active{width:58px;background:#4a473f;border-radius:999px}
.scroll-cue{display:none}
.hero-secondary-link{bottom:36px;right:max(36px,calc((100vw - 1440px)/2 + 48px));font:900 14px/1.2 Arial,sans-serif;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:9px;color:#984B3B}
.hero-secondary-link:hover{color:#984B3B}

/* keep navigation as-is but calm the rest with lighter cream and pastel pops */
.home-menu-slider,.share-the-chi,.slider-info-home-section,.catalogue-section,.instagram-section,.footer{background:var(--cream)}
.ayoyo-about,.ayoyo-certifications{background:#f8f5ec}
.ayoyo-proof{background:#fffdf8}
.ayoyo-contact{background:#fffdf9}
.proof-panel{background:#f3f7ea;border-color:#dde6c8}
.proof-panel:nth-child(2){background:#fdf2e9;border-color:#f0dfd0}
.proof-panel:nth-child(3){background:#f5eef7;border-color:#eadff0}
.menu-card{box-shadow:0 15px 34px rgba(80,59,49,.05)}
.peach-tile{background:#ffd7cc}.lilac-tile{background:#d4c6e1}.mint-tile{background:#b7d8cb}.coral-tile{background:#EFC5B9}.chocolate-tile{background:#9b7c70}.butter-tile{background:#f6e2a2}

.ayoyo-joy-ribbon{overflow:hidden;background:#415a2c;border-top:1px solid #35481f;border-bottom:1px solid #35481f;color:#f8f3e8;height:46px;display:flex;align-items:center;position:relative;z-index:5}
.ayoyo-joy-ribbon .joy-ribbon-track{display:flex;width:max-content;white-space:nowrap;animation:ayoyoRibbonTravel 32s linear infinite}
.ayoyo-joy-ribbon .joy-ribbon-group{display:flex;align-items:center;gap:26px;padding-right:26px;flex-shrink:0}
.ayoyo-joy-ribbon span{font:900 12px/1.2 Arial,sans-serif;letter-spacing:1.8px;text-transform:uppercase}
.ayoyo-joy-ribbon i{font-size:18px;font-style:normal;color:#e6d8a4}
@keyframes ayoyoRibbonTravel{to{transform:translateX(-50%)}}

@media(max-width:980px){
  .home-banner .wrapper,.home-banner .grid-box{width:calc(100% - 60px)}
  .home-banner .title-text{font-size:clamp(54px,8vw,92px)}
  .hero-pagination{left:50%;transform:translateX(-50%)}
  .hero-secondary-link{right:24px;bottom:30px;font-size:12px}
}
@media(max-width:690px){
  .home-banner{height:760px;min-height:700px}
  .home-banner .wrapper,.home-banner .grid-box{width:calc(100% - 34px)}
  .home-banner .grid-box{grid-template-columns:1fr;grid-template-rows:50% 50%}
  .hero-copy{align-items:flex-start;justify-content:flex-end;padding-top:108px;padding-bottom:14px}
  .home-banner .title-text{font-size:clamp(45px,14vw,74px);max-width:420px;margin-bottom:20px}
  .hero-eyebrow{font-size:11px;letter-spacing:2.3px;max-width:360px;margin-bottom:24px}
  .text-link{font-size:16px;text-underline-offset:7px}
  .hero-slide::before{left:auto;right:18px;top:55%;width:118px;height:118px;opacity:.24}
  .hero-circle{top:49%;right:0;width:360px;height:360px;border-width:7px}
  .hero-pagination{bottom:18px;gap:10px}
  .hero-dot{width:14px;height:14px}.hero-dot.active{width:40px}
  .hero-secondary-link{position:static;display:block;width:calc(100% - 34px);margin:14px auto 0;text-align:right;font-size:12px}
  .ayoyo-joy-ribbon{height:40px}.ayoyo-joy-ribbon span{font-size:10px;letter-spacing:1.2px}.ayoyo-joy-ribbon .joy-ribbon-group{gap:18px;padding-right:18px}
}

/* Ayoyo 20 October 2026: gentle bottom transition and reference-matched pale-yellow collection. */
/* Product collection backdrop only; all product tiles, typography and interaction stay intact. */
.catalogue-section{background:var(--cream);}
/* Replace the stark white waves and the grey footer edge with warm, low-contrast scallops. */
.wave.flip{
  height:82px;
  background-color:#fefbf7;
  background-image:radial-gradient(ellipse 160px 42px at 50% 0px,#fffdf9 98%,transparent 100%);
  background-position:0 0;
  background-size:320px 82px;
  background-repeat:repeat-x;
}
footer#site-footer{background:#fefbf7;}
@media(max-width:690px){
  .wave.flip{height:62px;background-size:180px 62px;
    background-image:radial-gradient(ellipse 90px 32px at 50% 0px,#fffdf9 98%,transparent 100%);}
}

/* October 2026 — requested refinements: yellow on selected product card art only,
   and a hero-matching liquid blob replacing the manufacturing spinning ring. */
.catalogue-section { background: var(--cream); }
.catalog-art { background: #f3e3aa; }
.info-home-section::before { content: none !important; display: none !important; animation: none !important; }
.info-home-section { isolation: isolate; }
.info-home-section > .wrapper { position: relative; z-index: 1; }
.manufacturing-liquid-blob {
  position: absolute;
  z-index: 0;
  top: 8%;
  left: -180px;
  width: min(540px, 52vw);
  aspect-ratio: 1;
  display: block;
  pointer-events: none;
  opacity: .73;
}
.manufacturing-liquid-blob .ayoyo-blob-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  backface-visibility: hidden;
}
.manufacturing-liquid-blob .ayoyo-goo-bubbles {
  fill: #bed79b;
  opacity: .80;
}
@media(max-width:950px) {
  .manufacturing-liquid-blob { left: -160px; top: 7%; width: 470px; opacity: .57; }
}
@media(max-width:690px) {
  .manufacturing-liquid-blob { left: -175px; top: 4%; width: 370px; opacity: .42; }
}


/* Ayoyo footer — mist grey reference colour, seamless soft scallops, transparent logo. */
:root { --ayoyo-footer-mist: #ede9e4; }
footer#site-footer { background: var(--ayoyo-footer-mist); }
.wave.flip {
  background-color: var(--ayoyo-footer-mist);
  background-image: radial-gradient(ellipse 160px 42px at 50% 0px, #fffdf9 98%, transparent 100%);
  background-position: 0 0;
  background-repeat: repeat-x;
  background-size: 320px 82px;
}
#site-footer .footer-brand,
#site-footer .footer-brand img { background: transparent; }
@media (max-width:690px) {
  .wave.flip {
    background-image: radial-gradient(ellipse 90px 32px at 50% 0px, #fffdf9 98%, transparent 100%);
    background-size: 180px 62px;
  }
}


/* Ayoyo site refinement — 20 October 2026.
   All NON-HERO section layers in exact reference cream RGB(251,248,242).
   Leave hero CSS, navigation, coloured product cards and gray footer untouched. */
html,body{background-color:#fbf8f2}
.trust-strip,.wthats-section,.catalogue-section,
.home-menu-slider,.share-the-chi,.slider-info-home-section,
.ayoyo-proof,.ayoyo-about,.info-home-section,
.ayoyo-certifications,.ayoyo-contact,.instagram-section{
 background-color:#fbf8f2!important;
 background-image:none!important;
}
/* Remove previous specialty section ombre, not product tile colours. */
.wthats-section {background:#fbf8f2!important;}
.wthats-section>.wave{background:#fbf8f2!important;}
/* Footer retains #EDE9E4, with a smaller cream-on-mist scallop boundary. */
footer#site-footer {background-color:#ede9e4!important;}
.wave.flip{
 height:31px!important;
 background-color:#ede9e4!important;
 background-image:radial-gradient(ellipse 63px 23px at 50% 0,#fbf8f2 99%,transparent 101%)!important;
 background-position:0 0!important;
 background-repeat:repeat-x!important;
 background-size:126px 31px!important;
}
@media(max-width:690px){
 .wave.flip{
  height:25px!important;
  background-image:radial-gradient(ellipse 45px 19px at 50% 0,#fbf8f2 99%,transparent 101%)!important;
  background-size:90px 25px!important;
 }
}
/* The 3 consecutive editorial sections now have one consistent liquid-blob
   visual language with alternating muted pink, warm yellow, sage green. */
.ayoyo-about,.ayoyo-certifications{isolation:isolate;overflow:hidden;}
.ayoyo-about > .wrapper,.ayoyo-certifications > .wrapper{position:relative;z-index:2;}
.section-liquid-blob{
 position:absolute;z-index:0;pointer-events:none;display:block;
 width:min(540px,46vw);aspect-ratio:1;opacity:.64;
}
.section-liquid-blob .ayoyo-blob-svg{
 display:block;width:100%;height:100%;overflow:visible;
 transform:translateZ(0);backface-visibility:hidden;
}
.section-liquid-blob .ayoyo-goo-bubbles{opacity:.9;}
.section-liquid-blob--about{left:-185px;top:11%;}
.section-liquid-blob--about .ayoyo-goo-bubbles{fill:#BD6856;}
.section-liquid-blob--certifications{left:-185px;top:11%;}
.section-liquid-blob--certifications .ayoyo-goo-bubbles{fill:#b3ca87;}
/* Middle editorial section becomes the yellow accent to complete pink/yellow/green. */
.manufacturing-liquid-blob .ayoyo-goo-bubbles{fill:#f1cd70;opacity:.8;}
@media(max-width:950px){
 .section-liquid-blob{width:430px;opacity:.54;}
 .section-liquid-blob--about{left:-190px;top:7%;}
 .section-liquid-blob--certifications{left:-190px;top:7%;}
}
@media(max-width:690px){
 .section-liquid-blob{width:320px;opacity:.35;}
 .section-liquid-blob--about{left:-170px;top:8%;}
 .section-liquid-blob--certifications{left:-170px;top:8%;}
}


/* 2026-10-20: Requested background colours only.
   First reference #FFFDF9: pudding speciality & beyond-products sections.
   Second reference #F8F5ED: footer. Keep the small scallop silhouette. */
.wthats-section,
.home-menu-slider {
  background-color: #FFFDF9 !important;
  background-image: none !important;
}
.wthats-section > .wave {
  background-color: #FFFDF9 !important;
}
footer#site-footer {
  background-color: #F8F5ED !important;
}
.wave.flip {
  background-color: #F8F5ED !important;
}


/* October 20 — targeted fixes only: statistics-to-pudding seam and contact section. */
/* The legacy margin and decorative wave used the old cream, leaving a band
   extending below the statistics strip's bottom border. */
.wthats-section{margin-top:0!important;}
.wthats-section>.wave{display:none!important;}
/* 'Let's Work Together' uses the user-selected warm white. */
.ayoyo-contact{background-color:#FFFDF9!important;background-image:none!important;}

/* Requested: remove only the arrow beside PUDDING IS OUR SPECIALITY. */
.wthats-title::after{content:none!important;display:none!important;}


/* 21 October 2026 — Three-colour card palette.
   Requested scope: cards and their details below the hero, not section backgrounds,
   hero graphics/animation, navigation, footer, text, products or behavior.
   Only shades of the actual hero blob colours:
   Strawberry pink #BD6856 · Mango yellow #F3C43F · Honey melon green #B3CA87.
   Softer solid tints of those same hues keep backgrounds calm against cream. */
:root{
  --ayoyo-card-pink:#BD6856;
  --ayoyo-card-yellow:#F3C43F;
  --ayoyo-card-green:#B3CA87;
  --ayoyo-pink-soft:#EFC5B9;
  --ayoyo-yellow-soft:#F6D473;
  --ayoyo-green-soft:#C8D8A7;
}

/* Go Beyond the Products: six cards, repeating pink → yellow → green. */
.home-menu-slider .peach-tile,
.home-menu-slider .coral-tile{background:#EFC5B9;}
.home-menu-slider .lilac-tile,
.home-menu-slider .chocolate-tile{background:#F6D473;}
.home-menu-slider .mint-tile,
.home-menu-slider .butter-tile{background:#C8D8A7;}
/* Pastels need dark text, including the cards previously classed as dark. */
.home-menu-slider .menu-card,
.home-menu-slider .menu-card.dark{color:#984B3B;}

/* Product collection: replace unrelated blue/peach/cream colours with three
   hero-derived solids. Leave the cream catalogue section background unchanged. */
.catalogue-section .catalog-card .catalog-art{background:#F6D473;}
.catalogue-section .catalog-card:nth-child(3n + 2) .catalog-art{background:#EFC5B9;}
.catalogue-section .catalog-card:nth-child(3n + 3) .catalog-art{background:#C8D8A7;}
.catalogue-section .catalog-best{background:#F9E09C;color:#493C21;}

/* Pudding product carousel: the round information cards are now soft versions
   of the same three tones, keeping the original photos and all interactions. */
#puddings .flavor-slide:nth-child(3n + 1) .circle-yogurt-info{background:#F7E9E2;border-color:#EFC5B9;}
#puddings .flavor-slide:nth-child(3n + 2) .circle-yogurt-info{background:#FBECC1;border-color:#F6D473;}
#puddings .flavor-slide:nth-child(3n + 3) .circle-yogurt-info{background:#E8EED7;border-color:#C8D8A7;}

/* Why Partner With Ayoyo: remove the unrelated lilac and orange panels. */
.ayoyo-proof .proof-panel:nth-child(3n + 1){background:#F7E9E2;border-color:#EFC5B9;}
.ayoyo-proof .proof-panel:nth-child(3n + 2){background:#FAE7B2;border-color:#F6D473;}
.ayoyo-proof .proof-panel:nth-child(3n + 3){background:#E2EACE;border-color:#C8D8A7;}

/* Quality-management cards: more subtle fills for comfortable reading. */
.quality-list article:nth-child(3n + 1){background:#F7E9E2;border-color:#EFC5B9;}
.quality-list article:nth-child(3n + 2){background:#FBECC1;border-color:#F6D473;}
.quality-list article:nth-child(3n + 3){background:#E8EED7;border-color:#C8D8A7;}
.quality-list article.quality-aim{background:#E8EED7;border-color:#C8D8A7;}

/* Certification and catalogue detail cards: faint variants (no fourth accent
   colour), leaving certificate thumbnails and readable content untouched. */
.ayoyo-certifications .cert-card:nth-child(3n + 1){background:#F8EEE8;border-color:#EFC5B9;}
.ayoyo-certifications .cert-card:nth-child(3n + 2){background:#FDF2D4;border-color:#F6D473;}
.ayoyo-certifications .cert-card:nth-child(3n + 3){background:#F0F3E2;border-color:#C8D8A7;}
.product-dialog .detail-product:nth-child(3n + 1) .detail-product-art{background:#F7E9E2;}
.product-dialog .detail-product:nth-child(3n + 2) .detail-product-art{background:#FBECC1;}
.product-dialog .detail-product:nth-child(3n + 3) .detail-product-art{background:#E8EED7;}



/* ============================================================
   AYOYO — restrained October 21 palette inspired by Yeo's.
   Brand colours: wine #802D20 · sage-grey #C4CAC3 · coral #C96148.
   Canvas matches unchanged hero's cream base #FBF8F1.
   Original graphics, photos, blobs, layout and animations unchanged.
   ============================================================ */
:root {
  --ayoyo-canvas: #FBF8F1;
  --ayoyo-wine: #802D20;
  --ayoyo-sage: #C4CAC3;
  --ayoyo-coral: #C96148;
  --ayoyo-card-canvas: #F0F1EC;
  --cream: #FBF8F1;
  --paper: #FBF8F1;
}
html,body{background-color:var(--ayoyo-canvas)!important;}
/* One calm background throughout all non-hero content. Do not alter
   hero flavour backdrops, original products or animated blob colours. */
.trust-strip,.wthats-section,.catalogue-section,.home-menu-slider,
.share-the-chi,.slider-info-home-section,.ayoyo-proof,.ayoyo-about,
.info-home-section,.ayoyo-certifications,.ayoyo-contact,.instagram-section,
.wthats-section > .wave{
  background-color:var(--ayoyo-canvas)!important;
  background-image:none!important;
}
/* Preserve the previous clean join below the statistics section. */
.wthats-section{margin-top:0!important;}
.wthats-section > .wave{display:none!important;}

/* Navigation: same cream as the hero, no changes to layout or graphics. */
.strategic-header,
.strategic-header.has-scrolled,
.menuPanel{background:var(--ayoyo-canvas)!important;}
.desktop-primary a,
.strategic-header .burger-text,
.strategic-header .burger-lines i{color:var(--ayoyo-wine);}
.strategic-header .burger-lines i{background:var(--ayoyo-wine)!important;}
.desktop-primary a:after{background:var(--ayoyo-coral);}
/* Navigation drawer keeps its original text, links and structure. */
.menu-highlight{background:var(--ayoyo-sage)!important;}
.menu-highlight strong,.main-menu a,.main-menu .menu-item{color:var(--ayoyo-wine)!important;}
.menu-highlight>span,.menu-smallprint{color:var(--ayoyo-wine)!important;}
.main-menu a:hover,.main-menu a:focus-visible{color:var(--ayoyo-coral)!important;}

/* A consistent heading system in warm burgundy. Bold highlights inherit it;
   this changes text colour only, not the hero artwork or layout. */
h1,h2,h3,h4,h5,h6,
.title-text,.wthats-title,.catalogue-title,.editorial-heading,
.proof-intro h2,.manufacturing-intro h2,.gallery-title,
.circle-yogurt-info-name,.catalog-name,.quality-list h3,
.catalogue-title b,.editorial-heading b,
.home-banner .title-text,
.home-banner .title-text b,
.hero-slide:nth-child(2) .title-text b,
.hero-slide:nth-child(3) .title-text b,
.story-heading,.story-heading span,
.menu-card .title-text,.menu-card .title-text b{
  color:var(--ayoyo-wine)!important;
}
/* Restrain subhead accents without recolouring decorative graphics. */
.editorial-kicker,.section-kicker,.catalog-eyebrow,.quality-number,
.catalog-count,.catalogue-count,.hero-eyebrow,
.menu-highlight>span,.menu-tiny{color:var(--ayoyo-coral)!important;}
.underlined:after{background:rgba(201,97,72,.14);}
/* Keep arrow removed from 'PUDDING IS OUR SPECIALITY'. */
.wthats-title::after{content:none!important;display:none!important;}

/* Buttons use the same sage grey, with dark burgundy lettering. The
   navigation logo, 3 hero blobs and moving product imagery remain original. */
.header-enquiry,
.strategic-header .burger-menu,
.enquiry-submit,
.view-range,
.dialog-enquire,
.filter-chip.active,
.round-arrow,
.flavor-controls button,
.slider-nav button,
.dialog-close,
#product-dialog .dialog-close{
  background:var(--ayoyo-sage)!important;
  border-color:var(--ayoyo-sage)!important;
  color:var(--ayoyo-wine)!important;
}
.header-enquiry:hover,
.strategic-header .burger-menu:hover,
.enquiry-submit:hover,.view-range:hover,.dialog-enquire:hover,
.filter-chip.active:hover,.round-arrow:hover,
.flavor-controls button:hover,.slider-nav button:hover{
  background:#B6BFB5!important;
  color:var(--ayoyo-wine)!important;
}
.filter-chip{background:var(--ayoyo-canvas)!important;border-color:#C4CAC3!important;color:var(--ayoyo-wine)!important;}
.filter-chip:hover{background:#E9EBE6!important;}
.filter-chip.active{background:var(--ayoyo-sage)!important;}
.catalogue-link,.official-catalogue-link,.cert-enquire,
.footer-contact-link{color:var(--ayoyo-wine)!important;}
.catalogue-link:hover,.official-catalogue-link:hover,.cert-enquire:hover,
.footer-contact-link:hover{color:var(--ayoyo-coral)!important;}

/* PRODUCT COLLECTION: the same neutral colour behind EVERY product photo.
   No more repeating bright pink/yellow/green cards. */
.catalogue-section .catalog-card{background:var(--ayoyo-canvas)!important;border:1px solid #D9DCD5!important;box-shadow:0 6px 24px rgba(71,58,49,.035);}
.catalogue-section .catalog-card .catalog-art,
.catalogue-section .catalog-card:nth-child(3n + 2) .catalog-art,
.catalogue-section .catalog-card:nth-child(3n + 3) .catalog-art{
  background:var(--ayoyo-card-canvas)!important;
  background-image:none!important;
}
.catalogue-section .catalog-best{background:var(--ayoyo-sage)!important;color:var(--ayoyo-wine)!important;}
.catalogue-section .catalog-count{color:var(--ayoyo-coral)!important;}

/* The 'GO BEYOND THE PRODUCTS' cards now use one colour: sage grey.
   Their existing photos, silhouettes and card animations stay untouched. */
.home-menu-slider .menu-card,
.home-menu-slider .peach-tile,.home-menu-slider .lilac-tile,
.home-menu-slider .mint-tile,.home-menu-slider .coral-tile,
.home-menu-slider .chocolate-tile,.home-menu-slider .butter-tile{
  background:var(--ayoyo-sage)!important;
  color:var(--ayoyo-wine)!important;
}
.home-menu-slider .menu-card p{color:var(--ayoyo-wine)!important;}

/* Muted supporting cards. White/cream product photography remains untouched. */
#puddings .flavor-slide .circle-yogurt-info,
#puddings .flavor-slide:nth-child(3n + 1) .circle-yogurt-info,
#puddings .flavor-slide:nth-child(3n + 2) .circle-yogurt-info,
#puddings .flavor-slide:nth-child(3n + 3) .circle-yogurt-info{
  background:var(--ayoyo-card-canvas)!important;
  border-color:#D4D9D0!important;
}
.ayoyo-proof .proof-panel,
.ayoyo-proof .proof-panel:nth-child(2),
.ayoyo-proof .proof-panel:nth-child(3),
.ayoyo-proof .proof-panel:nth-child(3n + 1),
.ayoyo-proof .proof-panel:nth-child(3n + 2),
.ayoyo-proof .proof-panel:nth-child(3n + 3){
  background:var(--ayoyo-card-canvas)!important;
  border-color:#D4D9D0!important;
}
.quality-list article,
.quality-list article:nth-child(3n + 1),
.quality-list article:nth-child(3n + 2),
.quality-list article:nth-child(3n + 3),
.quality-list article.quality-aim{
  background:var(--ayoyo-card-canvas)!important;
  border-color:#D4D9D0!important;
}
.ayoyo-certifications .cert-card,
.ayoyo-certifications .cert-card:nth-child(3n + 1),
.ayoyo-certifications .cert-card:nth-child(3n + 2),
.ayoyo-certifications .cert-card:nth-child(3n + 3){
  background:var(--ayoyo-canvas)!important;
  border-color:#D4D9D0!important;
}
.product-dialog .detail-product,
.product-dialog .detail-product-art,
.product-dialog .detail-product:nth-child(3n + 1) .detail-product-art,
.product-dialog .detail-product:nth-child(3n + 2) .detail-product-art,
.product-dialog .detail-product:nth-child(3n + 3) .detail-product-art{
  background:var(--ayoyo-card-canvas)!important;
  background-image:none!important;
}
.enquiry-form,.enquiry-form input,.enquiry-form textarea{
  background:var(--ayoyo-canvas)!important;
  border-color:#D4D9D0!important;
}
.enquiry-form label span{color:var(--ayoyo-coral)!important;}

/* Keep the continuously moving ribbon, use only the requested palette. */
.ayoyo-joy-ribbon{background:var(--ayoyo-sage)!important;border-color:#B7C0B6!important;color:var(--ayoyo-wine)!important;}
.ayoyo-joy-ribbon i{color:var(--ayoyo-coral)!important;}

/* Footer: same sage grey as buttons, with the existing small scallop shape.
   The transparent footer logo is not changed or reprocessed. */
footer#site-footer{background:var(--ayoyo-sage)!important;color:var(--ayoyo-wine);}
.wave.flip{
  background-color:var(--ayoyo-sage)!important;
  background-image:radial-gradient(ellipse 63px 23px at 50% 0, var(--ayoyo-canvas) 99%,transparent 101%)!important;
}
#site-footer h2,#site-footer h3,#site-footer h4,
#site-footer .menu-footer,#site-footer .desc-footer,
#site-footer .year,#site-footer .social-footer{color:var(--ayoyo-wine)!important;}
@media(max-width:690px){
  .wave.flip{
    background-color:var(--ayoyo-sage)!important;
    background-image:radial-gradient(ellipse 45px 19px at 50% 0,var(--ayoyo-canvas) 99%,transparent 101%)!important;
  }
}


/* ===============================================================
   AYOYO 22 OCT 2026 — REFERENCE-BASED CHRISTMAS COLOUR REFINEMENT
   Original graphics, photos, text, layouts, motion and hero SVGs
   are not changed. The hero's only change is its background fill.
   Colours: screenshot cream #FEFBF4; berry #BD3150;
   cheerful blue #2A87C5; golden-yellow #FFCE92.
   Product well: softened yellow #FFEDD3.
   =============================================================== */
:root{
  --reference-cream:#FEFBF4;
  --reference-berry:#BA304C;
  --reference-berry-dark:#A82842;
  --reference-blue:#2688C3;
  --reference-blue-accessible:#1A6EA2;
  --reference-gold:#F5B84A;
  --reference-soft-yellow:#FFEDD3;
  --reference-soft-blue:#EAF4FA;
  --reference-soft-rose:#F7E9E2;
  --cream:#FEFBF4;
  --paper:#FEFBF4;
  --ayoyo-canvas:#FEFBF4;
  --ayoyo-card-canvas:#FFEDD3;
  --ayoyo-wine:#BA304C;
  --ayoyo-sage:#FEFBF4;
  --ayoyo-coral:#BA304C;
}
/* All major PAGE-LAYER backdrops share one warm cream, including the
   footer, the top navigation and the full-width hero slider. */
html,body,
.home-banner,
.trust-strip,.wthats-section,.catalogue-section,.home-menu-slider,
.share-the-chi,.slider-info-home-section,.ayoyo-proof,.ayoyo-about,
.info-home-section,.ayoyo-certifications,.ayoyo-contact,.instagram-section,
.home-menu-slider,.quality-details,.wthats-section>.wave,
.strategic-header,.strategic-header.has-scrolled,.menuPanel,
footer#site-footer{
  background-color:var(--reference-cream)!important;
  background-image:none!important;
}
/* Hero: change ONLY the plain background, never SVG blob colour,
   shape, filter, spark decorations, products, typography or movement. */
.home-banner .hero-slide,
.home-banner .hero-slide:nth-child(1),
.home-banner .hero-slide:nth-child(2),
.home-banner .hero-slide:nth-child(3){
  background:var(--reference-cream)!important;
}
/* Keep the existing narrow footer scallop edge, now tone-on-tone. */
.wave.flip{
  background-color:var(--reference-cream)!important;
  background-image:radial-gradient(ellipse 63px 23px at 50% 0,var(--reference-cream) 99%,transparent 101%)!important;
}
/* Page text: cranberry-coloured large headings from the handwritten
   reference, rather than the former wine/olive mix. No change to art. */
h1,h2,h3,h4,h5,h6,.title-text,.wthats-title,.catalogue-title,
.editorial-heading,.story-heading,.story-heading span,.proof-intro h2,
.manufacturing-intro h2,.gallery-title,.catalog-name,.quality-list h3,
.circle-yogurt-info-name,.menu-card .title-text,.menu-card .title-text b,
.home-banner .title-text,.home-banner .title-text b,
.hero-slide:nth-child(2) .title-text b,
.hero-slide:nth-child(3) .title-text b,
#site-footer h2,#site-footer h3,#site-footer h4{
  color:var(--reference-berry-dark)!important;
}
body{color:#473F3A;}
.editorial-kicker,.section-kicker,.catalog-eyebrow,.quality-number,
.catalog-count,.catalogue-count,.hero-eyebrow,.menu-highlight>span,.menu-tiny{
  color:var(--reference-berry)!important;
}
.underlined:after{background:rgba(245,184,74,.25)!important;}
/* Navigation background matches every other layer; leave the
   original official Ayoyo logo and burger graphic untouched. */
.desktop-primary a,.strategic-header .burger-text{color:var(--reference-berry-dark)!important;}
.strategic-header .burger-lines i{background:var(--reference-berry-dark)!important;}
.desktop-primary a:after{background:var(--reference-gold)!important;}
.menu-highlight{background:var(--reference-soft-yellow)!important;}
.menu-highlight strong,.main-menu a,.main-menu .menu-item{
  color:var(--reference-berry-dark)!important;
}
.main-menu a:hover,.main-menu a:focus-visible{color:var(--reference-blue-accessible)!important;}

/* Bold, recognisable blue buttons echo the three blue reference tiles.
   Cream text stays legible. The shape and button behavior stay intact. */
.header-enquiry,.strategic-header .burger-menu,.enquiry-submit,
.view-range,.dialog-enquire,.filter-chip.active,.round-arrow,
.flavor-controls button,.slider-nav button,.dialog-close,
#product-dialog .dialog-close{
  background:var(--reference-blue-accessible)!important;
  border-color:var(--reference-blue-accessible)!important;
  color:var(--reference-cream)!important;
}
.header-enquiry:hover,.strategic-header .burger-menu:hover,
.enquiry-submit:hover,.view-range:hover,.dialog-enquire:hover,
.filter-chip.active:hover,.round-arrow:hover,
.flavor-controls button:hover,.slider-nav button:hover{
  background:#165F8A!important;
  border-color:#165F8A!important;
  color:var(--reference-cream)!important;
}
/* Burger's existing tiny stroke artwork keeps its original shape;
   switch only stroke fill for contrast on the blue button. */
.strategic-header .burger-lines i{background:var(--reference-cream)!important;}
.strategic-header .burger-text{color:var(--reference-cream)!important;}
.filter-chip{background:var(--reference-cream)!important;border-color:#E8C9B3!important;color:var(--reference-berry-dark)!important;}
.filter-chip:hover{background:var(--reference-soft-yellow)!important;}
.filter-chip.active{background:var(--reference-blue-accessible)!important;color:var(--reference-cream)!important;}
.catalogue-link,.official-catalogue-link,.cert-enquire,.footer-contact-link{
  color:var(--reference-berry-dark)!important;
}
.catalogue-link:hover,.official-catalogue-link:hover,.cert-enquire:hover,.footer-contact-link:hover{
  color:var(--reference-blue-accessible)!important;
}
/* Product catalogue: same creamy section background as hero.
   All INNER IMAGE-CARD WELLS use the reference yellow, lightened. */
.catalogue-section .catalog-card{
  background:var(--reference-cream)!important;
  border-color:#F0DFD0!important;
  box-shadow:0 5px 25px rgba(147,89,64,.045);
}
.catalogue-section .catalog-card .catalog-art,
.catalogue-section .catalog-card:nth-child(3n + 1) .catalog-art,
.catalogue-section .catalog-card:nth-child(3n + 2) .catalog-art,
.catalogue-section .catalog-card:nth-child(3n + 3) .catalog-art{
  background:var(--reference-soft-yellow)!important;
  background-image:none!important;
}
.catalogue-section .catalog-best{background:var(--reference-berry)!important;color:var(--reference-cream)!important;}
.catalogue-section .catalog-count{color:var(--reference-blue-accessible)!important;}
/* "Go Beyond the Products": restrained cream/golden fill, with only
   a few quiet powder-blue alternatives rather than six saturated hues. */
.home-menu-slider .menu-card,
.home-menu-slider .peach-tile,.home-menu-slider .lilac-tile,
.home-menu-slider .mint-tile,.home-menu-slider .coral-tile,
.home-menu-slider .chocolate-tile,.home-menu-slider .butter-tile{
  background:var(--reference-soft-yellow)!important;
  color:var(--reference-berry-dark)!important;
}
.home-menu-slider .menu-card:nth-child(3n + 2){background:var(--reference-soft-blue)!important;}
.home-menu-slider .menu-card p{color:#604D44!important;}
/* Rounded pudding information and corporate content cards: tonal
   pale-yellow/pale-blue panels, not bright mixed colour blocks. */
#puddings .flavor-slide .circle-yogurt-info,
#puddings .flavor-slide:nth-child(3n + 1) .circle-yogurt-info,
#puddings .flavor-slide:nth-child(3n + 2) .circle-yogurt-info,
#puddings .flavor-slide:nth-child(3n + 3) .circle-yogurt-info{
  background:var(--reference-soft-yellow)!important;
  border-color:#F3D4AD!important;
}
.ayoyo-proof .proof-panel,.ayoyo-proof .proof-panel:nth-child(2),
.ayoyo-proof .proof-panel:nth-child(3),
.ayoyo-proof .proof-panel:nth-child(3n + 1),
.ayoyo-proof .proof-panel:nth-child(3n + 2),
.ayoyo-proof .proof-panel:nth-child(3n + 3),
.quality-list article,.quality-list article:nth-child(3n + 1),
.quality-list article:nth-child(3n + 2),.quality-list article:nth-child(3n + 3),
.quality-list article.quality-aim{
  background:var(--reference-soft-yellow)!important;
  border-color:#EFD9BC!important;
}
.ayoyo-proof .proof-panel:nth-child(3n + 2),
.quality-list article:nth-child(3n + 2):not(.quality-aim){
  background:var(--reference-soft-blue)!important;
  border-color:#CDE4F1!important;
}
.ayoyo-certifications .cert-card,
.ayoyo-certifications .cert-card:nth-child(3n + 1),
.ayoyo-certifications .cert-card:nth-child(3n + 2),
.ayoyo-certifications .cert-card:nth-child(3n + 3){
  background:var(--reference-cream)!important;
  border-color:#EEDBCB!important;
}
.product-dialog .detail-product,
.product-dialog .detail-product-art,
.product-dialog .detail-product:nth-child(3n + 1) .detail-product-art,
.product-dialog .detail-product:nth-child(3n + 2) .detail-product-art,
.product-dialog .detail-product:nth-child(3n + 3) .detail-product-art{
  background:var(--reference-soft-yellow)!important;
  background-image:none!important;
}
.enquiry-form,.enquiry-form input,.enquiry-form textarea{
  background:var(--reference-cream)!important;
  border-color:#EDDCCD!important;
}
.enquiry-form label span{color:var(--reference-berry)!important;}
/* A small confident cranberry strip like the red reference sign.
   All scrolling text, copy, spacing and animation remain unchanged. */
.ayoyo-joy-ribbon{
  background:var(--reference-berry)!important;
  border-color:var(--reference-berry-dark)!important;
  color:var(--reference-cream)!important;
}
.ayoyo-joy-ribbon i{color:#FFD798!important;}
/* Statistics: border accents pick up the reference's warm yellow. */
.trust-strip{border-top-color:#F3E0CB!important;border-bottom-color:#F3E0CB!important;}
.trust-grid>div{border-left-color:#F1DEC8!important;}
.trust-grid strong{color:var(--reference-berry-dark)!important;}
/* Warm cream footer, still separated by the previous small scallop geometry. */
footer#site-footer{color:#473F3A!important;}
#site-footer .menu-footer,#site-footer .desc-footer,
#site-footer .year,#site-footer .social-footer{color:#473F3A!important;}
@media(max-width:690px){
  .wave.flip{
    background-color:var(--reference-cream)!important;
    background-image:radial-gradient(ellipse 45px 19px at 50% 0,var(--reference-cream) 99%,transparent 101%)!important;
  }
}


/* =====================================================================
   22 Oct follow-up — pastel palette based on the supplied ISLEMATE board.
   Explicitly KEEP the previous warm cream canvas and all hero graphic
   elements, including live SVG goo blobs, decorative dots and circles.
   Palette: pink #BD6856, blue #5FA0FF, yellow #FFDD71, brown #71492B.
   ===================================================================== */
:root{
  --islemate-pink:#BD6856;
  --islemate-blue:#5FA0FF;
  --islemate-gold:#FFDD71;
  --islemate-cocoa:#71492B;
  --islemate-light-yellow:#FFF2CD;
  --islemate-soft-blue:#E8F4FF;
  --islemate-soft-pink:#FCEAF1;
  --reference-soft-yellow:#FFF2CD;
  --reference-soft-blue:#E8F4FF;
  --reference-berry:#BD6856;
  --reference-berry-dark:#71492B;
  --reference-blue:#5FA0FF;
  --reference-blue-accessible:#4378C6;
  --reference-gold:#FFDD71;
  --reference-cream:#FEFBF4;
  --ayoyo-canvas:#FEFBF4;
  --ayoyo-card-canvas:#FFF2CD;
  --ayoyo-wine:#71492B;
  --ayoyo-coral:#BD6856;
}

/* Restore exactly the original hero scene decorations: soft pastel circle,
   coloured rounded corner circle, dotted details. These were visually lost
   when a previous colour-only rule overwrote all slide backgrounds. */
.home-banner .hero-slide:nth-child(1){
  background:
    radial-gradient(circle at 103% 20%,rgba(189,104,86,.38) 0 68px,transparent 69px),
    radial-gradient(circle at 77% 68%,rgba(251,239,198,.42) 0 230px,transparent 231px),
    #FEFBF4!important;
}
.home-banner .hero-slide:nth-child(2){
  background:
    radial-gradient(circle at 101% 18%,rgba(250,219,164,.92) 0 68px,transparent 69px),
    radial-gradient(circle at 78% 68%,rgba(255,240,189,.52) 0 235px,transparent 236px),
    #FEFBF4!important;
}
.home-banner .hero-slide:nth-child(3){
  background:
    radial-gradient(circle at 101% 19%,rgba(212,232,194,.95) 0 68px,transparent 69px),
    radial-gradient(circle at 78% 68%,rgba(222,240,209,.54) 0 235px,transparent 236px),
    #FEFBF4!important;
}
/* Preserve the original art layer, hero circles, moving goo and floating
   pudding images; no new pseudo elements or animations are introduced. */

/* Cream section backgrounds deliberately unchanged. Rich brown for large
   headings like the lettering in the new mood board, not solid cranberry. */
h1,h2,h3,h4,h5,h6,.title-text,.wthats-title,.catalogue-title,
.editorial-heading,.story-heading,.story-heading span,.proof-intro h2,
.manufacturing-intro h2,.gallery-title,.catalog-name,.quality-list h3,
.circle-yogurt-info-name,.menu-card .title-text,.menu-card .title-text b,
.home-banner .title-text,.home-banner .title-text b,
.hero-slide:nth-child(2) .title-text b,.hero-slide:nth-child(3) .title-text b,
#site-footer h2,#site-footer h3,#site-footer h4{
  color:var(--islemate-cocoa)!important;
}
body{color:#594C41;}
.editorial-kicker,.section-kicker,.catalog-eyebrow,.quality-number,
.catalog-count,.catalogue-count,.hero-eyebrow,.menu-highlight>span,.menu-tiny{
  color:#BD6856!important;
}
/* The heading underline and thin rules use the same golden hue. */
.underlined:after{background:rgba(255,221,113,.44)!important;}
.desktop-primary a,.strategic-header .burger-text{color:var(--islemate-cocoa)!important;}
.strategic-header .burger-lines i{background:var(--islemate-cocoa)!important;}
.desktop-primary a:after{background:var(--islemate-pink)!important;}
.menu-highlight{background:var(--islemate-light-yellow)!important;}
.menu-highlight strong,.main-menu a,.main-menu .menu-item{color:var(--islemate-cocoa)!important;}
.main-menu a:hover,.main-menu a:focus-visible{color:#4279B8!important;}

/* Blue from the reference for actions, tuned a shade deeper for readable
   white text. All original button sizes, borders and behaviours preserved. */
.header-enquiry,.strategic-header .burger-menu,.enquiry-submit,
.view-range,.dialog-enquire,.filter-chip.active,.round-arrow,
.flavor-controls button,.slider-nav button,.dialog-close,
#product-dialog .dialog-close{
  background:#4378C6!important;
  border-color:#4378C6!important;
  color:#FFFCF5!important;
}
.header-enquiry:hover,.strategic-header .burger-menu:hover,
.enquiry-submit:hover,.view-range:hover,.dialog-enquire:hover,
.round-arrow:hover,.flavor-controls button:hover,.slider-nav button:hover,
.filter-chip.active:hover{
  background:#3264B4!important;
  border-color:#3264B4!important;
}
.filter-chip{background:#FEFBF4!important;border-color:#E8D7B7!important;color:var(--islemate-cocoa)!important;}
.filter-chip:hover{background:var(--islemate-light-yellow)!important;}
.catalogue-link,.official-catalogue-link,.cert-enquire,.footer-contact-link{color:var(--islemate-cocoa)!important;}
.catalogue-link:hover,.official-catalogue-link:hover,.cert-enquire:hover,.footer-contact-link:hover{color:#BD6856!important;}

/* The specifically requested change: EVERY image well in the product
   collection uses the same solid, lighter reference yellow. Not the entire
   section or the card artwork. */
.catalogue-section .catalog-card .catalog-art,
.catalogue-section .catalog-card:nth-child(3n + 1) .catalog-art,
.catalogue-section .catalog-card:nth-child(3n + 2) .catalog-art,
.catalogue-section .catalog-card:nth-child(3n + 3) .catalog-art{
  background:var(--islemate-light-yellow)!important;
  background-image:none!important;
}
.catalogue-section .catalog-card{background:#FFFCF6!important;border-color:#EFDFCB!important;}
.catalogue-section .catalog-best{background:var(--islemate-pink)!important;color:#FFF9F3!important;}
.catalogue-section .catalog-count{color:#BD6856!important;}

/* Elsewhere reference pink / blue / yellow appear as gentle alternating
   card washes, not giant saturated colour blocks. Shapes/images unchanged. */
.home-menu-slider .menu-card,
.home-menu-slider .peach-tile,.home-menu-slider .lilac-tile,
.home-menu-slider .mint-tile,.home-menu-slider .coral-tile,
.home-menu-slider .chocolate-tile,.home-menu-slider .butter-tile{
  background:#FFF1D3!important;
  color:var(--islemate-cocoa)!important;
}
.home-menu-slider .menu-card:nth-child(3n + 2){background:#EAF5FF!important;}
.home-menu-slider .menu-card:nth-child(3n + 3){background:#F8EEE8!important;}
.home-menu-slider .menu-card p{color:#664C44!important;}
#puddings .flavor-slide .circle-yogurt-info,
#puddings .flavor-slide:nth-child(3n + 1) .circle-yogurt-info,
#puddings .flavor-slide:nth-child(3n + 2) .circle-yogurt-info,
#puddings .flavor-slide:nth-child(3n + 3) .circle-yogurt-info{
  background:#FFF3D8!important;
  border-color:#F1DCAC!important;
}
.ayoyo-proof .proof-panel,.ayoyo-proof .proof-panel:nth-child(2),
.ayoyo-proof .proof-panel:nth-child(3),
.ayoyo-proof .proof-panel:nth-child(3n + 1),
.ayoyo-proof .proof-panel:nth-child(3n + 2),
.ayoyo-proof .proof-panel:nth-child(3n + 3),
.quality-list article,.quality-list article:nth-child(3n + 1),
.quality-list article:nth-child(3n + 2),
.quality-list article:nth-child(3n + 3),.quality-list article.quality-aim{
  background:#FFF4DC!important;
  border-color:#EFDEBC!important;
}
.ayoyo-proof .proof-panel:nth-child(3n + 2),
.quality-list article:nth-child(3n + 2):not(.quality-aim){
  background:#EDF6FF!important;
  border-color:#D6E8FA!important;
}
.ayoyo-proof .proof-panel:nth-child(3n + 3),
.quality-list article:nth-child(3n + 3):not(.quality-aim){
  background:#F8EEE8!important;
  border-color:#EDDDD5!important;
}
.ayoyo-certifications .cert-card,
.ayoyo-certifications .cert-card:nth-child(3n + 1),
.ayoyo-certifications .cert-card:nth-child(3n + 2),
.ayoyo-certifications .cert-card:nth-child(3n + 3){
  background:#FFFCF6!important;
  border-color:#F0DFCD!important;
}
.product-dialog .detail-product,
.product-dialog .detail-product-art,
.product-dialog .detail-product:nth-child(3n + 1) .detail-product-art,
.product-dialog .detail-product:nth-child(3n + 2) .detail-product-art,
.product-dialog .detail-product:nth-child(3n + 3) .detail-product-art{
  background:#FFF3D8!important;background-image:none!important;
}
.enquiry-form,.enquiry-form input,.enquiry-form textarea{
  background:#FFFCF7!important;border-color:#EFDEC5!important;
}
.enquiry-form label span{color:#BD6856!important;}
/* Reference pink creates a single bright branding moment in the ribbon.
   Other large surfaces remain calm cream. */
.ayoyo-joy-ribbon{background:var(--islemate-pink)!important;border-color:#A55444!important;color:#FFF9F3!important;}
.ayoyo-joy-ribbon i{color:var(--islemate-gold)!important;}
.trust-strip{border-color:#F0E4CF!important;}
.trust-grid>div{border-left-color:#F0E4CF!important;}
.trust-grid strong{color:var(--islemate-cocoa)!important;}
#site-footer,.wave.flip{background-color:var(--reference-cream)!important;}
#site-footer .menu-footer,#site-footer .desc-footer,
#site-footer .year,#site-footer .social-footer{color:#594C41!important;}



/* Hamburger menu only — requested pink labels and light-blue Close. */
.strategic-menu .menu-intro h2 em,
.strategic-menu .menu-intro .eyebrow,
.strategic-menu .menu-group h3,
.strategic-menu .menu-highlight > span {
  color: #BD6856 !important;
}
.strategic-menu .menu-group a:hover,
.strategic-menu .menu-category-link:hover,
.strategic-menu .menu-highlight a:hover {
  color: #BD6856 !important;
}
.strategic-menu .menu-highlight a {
  border-bottom-color: #BD6856 !important;
}
.strategic-menu #close {
  background: #EAF4FF !important;
  border-color: #C7E4FF !important;
  color: #5FA0FF !important;
}
.strategic-menu #close:hover,
.strategic-menu #close:focus-visible {
  background: #DCEEFF !important;
  border-color: #A9D5FF !important;
  color: #5FA0FF !important;
}

/* Requested: only the hamburger button Menu lettering becomes pale yellow. */
.strategic-header .burger-menu .burger-text{color:#FFF2CD!important;}

/* Requested: bold words in the Growing With Goodness body text only. */
.ayoyo-about .about-copy p strong{color:#71492B!important;}

/* Hamburger strokes now match existing pale-yellow Menu text; no other styling changes. */
.strategic-header .burger-menu .burger-lines i{background:#FFF2CD!important;}

/* Only the Our Aim quality card: pink face, cream copy, soft-yellow heading. */
.quality-list article.quality-aim {
  background: #BD6856 !important;
  background-image: none !important;
  border-color: #BD6856 !important;
}
.quality-list article.quality-aim .quality-number,
.quality-list article.quality-aim p {
  color: #FEFBF4 !important;
}
.quality-list article.quality-aim h3 {
  color: #FFF2CD !important;
}


/* Requested only: Why Partner With Ayoyo's three cards read yellow, blue, pink, left to right. */
.ayoyo-proof .proof-panel:nth-of-type(1){background:#FFF4DC!important;border-color:#EFDEBC!important;}
.ayoyo-proof .proof-panel:nth-of-type(2){background:#EDF6FF!important;border-color:#D6E8FA!important;}
.ayoyo-proof .proof-panel:nth-of-type(3){background:#F8EEE8!important;border-color:#EDDDD5!important;}

/* Requested: product collection modal only — pink label and X-button focus ring. */
#product-dialog .dialog-eyebrow{color:#BD6856!important;}
#product-dialog .dialog-close:focus-visible{outline-color:#BD6856!important;}


/* Explore Ayoyo: illustration-free cards with a slow, understated animated sheen.
   Restricted to the Go Beyond the Products carousel; all other graphics untouched. */
.home-menu-slider .menu-card {
  transition: transform .42s cubic-bezier(.2,.8,.2,1), box-shadow .42s ease;
}
.home-menu-slider .menu-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 33%, rgba(255,255,255,.07) 44%, rgba(255,255,255,.33) 51%, rgba(255,255,255,.08) 58%, transparent 70%);
  background-size: 240% 100%;
  animation: ayoyoExploreShimmer 7.8s linear infinite;
}
.home-menu-slider .menu-card:nth-child(2n)::after {animation-delay:-2.3s}
.home-menu-slider .menu-card:nth-child(3n)::after {animation-delay:-4.6s}
.home-menu-slider .menu-card:hover,
.home-menu-slider .menu-card:focus-visible {
  transform: translateY(-7px);
  box-shadow: 0 22px 40px rgba(80,59,49,.13);
}
@keyframes ayoyoExploreShimmer {
  0%,16% {background-position: 160% 50%}
  72%,100% {background-position: -160% 50%}
}
@media(prefers-reduced-motion:reduce) {
  .home-menu-slider .menu-card::after {animation:none; background-position:55% 50%}
  .home-menu-slider .menu-card {transition:none}
}


/* Go Beyond the Products: a little less empty space below the card copy. */
.home-menu-slider .menu-card { height: 205px; }
@media (max-width: 690px) {
  .home-menu-slider .menu-card { height: 195px; }
}

/* Quality Management section: match cards 02, 03 and 05 to the existing light-yellow cards.
   Excludes Our Aim; no other section or card is affected. */
.quality-list article:nth-child(2):not(.quality-aim),
.quality-list article:nth-child(3):not(.quality-aim),
.quality-list article:nth-child(5):not(.quality-aim) {
  background: #FFF4DC !important;
  border-color: #EFDEBC !important;
}

/* 22 Oct: only the footer's background changed to the existing light yellow.
   Match the scalloped divider's base so the transition remains seamless. */
footer#site-footer{background-color:#FFF4DC!important;}
.wave.flip{background-color:#FFF4DC!important;}


/* Requested 22 Oct: Go Beyond the Products — alternating light yellow and Our Aim pink. */
.home-menu-slider .menu-card:nth-child(2n + 1) {
  background: #FFF4DC !important;
  color: #71492B !important;
}
.home-menu-slider .menu-card:nth-child(2n) {
  background: #BD6856 !important;
  color: #FEFBF4 !important;
}
.home-menu-slider .menu-card:nth-child(2n) .title-text,
.home-menu-slider .menu-card:nth-child(2n) .title-text b {
  color: #FFF2CD !important;
}
.home-menu-slider .menu-card:nth-child(2n) .text-box p {
  color: #FEFBF4 !important;
}

/* Why Partner with Ayoyo — Factory-direct, Halal & MeSTI, Experience (left to right). */
.ayoyo-proof .wrapper > article.proof-panel:nth-of-type(1),
.ayoyo-proof .wrapper > article.proof-panel:nth-of-type(3) {
  background: #FFF4DC !important;
  border-color: #EFDEBC !important;
}
.ayoyo-proof .wrapper > article.proof-panel:nth-of-type(2) {
  background: #BD6856 !important;
  border-color: #BD6856 !important;
}
.ayoyo-proof .wrapper > article.proof-panel:nth-of-type(2) h2 {
  color: #FFF2CD !important;
}
.ayoyo-proof .wrapper > article.proof-panel:nth-of-type(2) p {
  color: #FEFBF4 !important;
}


/* Requested update: dark terracotta replaces blue-filled buttons only.
   All non-button colours, card styling and animated graphics are preserved. */
.header-enquiry,
.strategic-header .burger-menu,
.enquiry-submit,
.view-range,
.dialog-enquire,
.filter-chip.active,
.round-arrow,
.flavor-controls button,
.slider-nav button,
.dialog-close,
#product-dialog .dialog-close,
.strategic-menu #close {
  background: #984B3B !important;
  border-color: #984B3B !important;
  color: #FEFBF4 !important;
}
.header-enquiry:hover,
.strategic-header .burger-menu:hover,
.enquiry-submit:hover,
.view-range:hover,
.dialog-enquire:hover,
.filter-chip.active:hover,
.round-arrow:hover,
.flavor-controls button:hover,
.slider-nav button:hover,
.dialog-close:hover,
#product-dialog .dialog-close:hover,
.strategic-menu #close:hover,
.strategic-menu #close:focus-visible {
  background: #7D3A2C !important;
  border-color: #7D3A2C !important;
  color: #FEFBF4 !important;
}

/* Catalogue status remains light terracotta; quality subtitle uses its original body-text colour. */
#catalog-result {
  color: #BD6856 !important;
}


/* More to discover: official PDF catalogue as the sole, gently animated CTA. */
.catalogue-section .catalogue-description {
  margin-bottom: 24px;
}
.catalogue-section .official-catalogue-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  max-width: calc(100% - 12px);
  min-height: 56px;
  margin: 20px auto 8px;
  padding: 17px 28px;
  background: #984B3B;
  border: 1px solid #984B3B;
  border-radius: 999px;
  color: #FEFBF4 !important;
  box-shadow: 0 5px 16px rgba(152,75,59,.12);
  font: 800 clamp(14px, 1.2vw, 17px)/1.3 Arial, sans-serif;
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  transition: background-color .25s ease, box-shadow .25s ease, transform .25s ease;
  animation: ayoyoCatalogueCTA 4s ease-in-out infinite;
}
.catalogue-section .official-catalogue-link:hover,
.catalogue-section .official-catalogue-link:focus-visible {
  animation: none;
  background: #7D3A2C;
  border-color: #7D3A2C;
  color: #FEFBF4 !important;
  box-shadow: 0 9px 22px rgba(152,75,59,.2);
  transform: translateY(-2px);
}
@keyframes ayoyoCatalogueCTA {
  0%, 100% { transform: translateY(0); box-shadow: 0 5px 16px rgba(152,75,59,.12), 0 0 0 0 rgba(189,104,86,.18); }
  50% { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(152,75,59,.18), 0 0 0 7px rgba(189,104,86,.02); }
}
@media(max-width:690px){
  .catalogue-section .official-catalogue-link { width: fit-content; max-width: 100%; min-height: 52px; padding: 16px 20px; }
}
@media(prefers-reduced-motion:reduce){
  .catalogue-section .official-catalogue-link { animation: none; }
}


/* A single integrated terracotta wave. Its animated edge IS the curved finishing edge. */
.pudding-transition-section{
  position:relative;
  height:calc(42.5vh + 130px);
  background:var(--cream);
  overflow:hidden;
}
.pudding-transition-section .transition-sticky{
  position:absolute;
  inset:0;
  height:100%;
  overflow:hidden;
  background:transparent;
}
.pudding-transition-section .transition-wave-svg{
  display:block;
  width:100%;
  height:100%;
  overflow:hidden;
  pointer-events:none;
}
@media(max-width:690px){
  .pudding-transition-section{height:calc(40vh + 115px)}
}


/* Footer-only refinement: retain the existing light yellow fill and scalloped boundary. */
footer#site-footer { padding: 28px 0 30px !important; min-height: 0; }
#site-footer .ayoyo-short-footer { display: flex; align-items: center; justify-content: center; text-align: center; }
#site-footer .ayoyo-short-footer p { margin: 0; color: #BD6856; font-size: 14px; font-weight: 600; line-height: 1.6; letter-spacing: .01em; }
#site-footer .ayoyo-short-footer .footer-rights { margin-left: .35em; }
@media(max-width: 690px) {
  footer#site-footer { padding: 22px 0 24px !important; }
  #site-footer .ayoyo-short-footer p { font-size: 12px; }
}


/* 22 Oct 2026 — Mobile-only layout refinement. Desktop layout intentionally unchanged. */
@media screen and (max-width:690px) {
  /* Keep the hero artwork and movement intact; only align its copy. */
  .home-banner .hero-copy { align-items:center !important; text-align:center !important; padding-left:8px; padding-right:8px; }
  .home-banner .hero-copy .title-text,
  .home-banner .hero-copy .hero-eyebrow { text-align:center; margin-left:auto; margin-right:auto; }
  .home-banner .hero-copy > .text-link { align-self:center; margin-left:auto; margin-right:auto; text-align:center; }
  .home-banner .hero-secondary-link { text-align:center !important; }

  /* Readable, centred trust statistics on narrow displays. */
  .trust-grid > div { text-align:center; align-items:center; justify-content:center; padding-left:9px !important; padding-right:9px !important; }
  .trust-grid strong,.trust-grid span { text-align:center; }
  .wthats-title { text-align:center; padding-left:14px; padding-right:14px; }
  .product-disclaimer { text-align:center; padding-left:18px; padding-right:18px; line-height:1.6; }
  .flavor-slide .circle-yogurt-info,
  .flavor-slide .circle-yogurt-info h3,
  .flavor-slide .circle-yogurt-info p { text-align:center; }

  /* Product catalogue call-to-action and animated feature cards. */
  .catalogue-section .wrapper,
  .catalogue-section .catalogue-title,
  .catalogue-section .catalogue-description { text-align:center; }
  .home-menu-slider > .wrapper > .title-text { text-align:center !important; margin-left:auto; margin-right:auto; padding:0 8px; line-height:1.2; }
  .home-menu-slider .menu-card .text-box { left:14px; right:14px; width:auto; max-width:none; text-align:center; }
  .home-menu-slider .menu-card .title-text { text-align:center; font-size:clamp(22px,7vw,27px); overflow-wrap:break-word; }
  .home-menu-slider .menu-card p { text-align:center; margin-left:auto; margin-right:auto; }
  .home-menu-slider .slider-nav { justify-content:center; }

  /* Why Partner cards and company story. */
  .ayoyo-proof .proof-intro,
  .ayoyo-proof .proof-panel,
  .ayoyo-proof .proof-panel h2,
  .ayoyo-proof .proof-panel p { text-align:center; }
  .ayoyo-about .about-copy,
  .ayoyo-about .editorial-kicker,
  .ayoyo-about .editorial-heading,
  .ayoyo-about .about-copy p:not(.editorial-kicker),
  .ayoyo-about .about-photo figcaption { text-align:center; }
  .ayoyo-about .about-copy p:not(.editorial-kicker) { text-wrap:pretty; }

  /* Manufacturing introduction and individual quality/aim cards. */
  .info-home-section .wrapper,
  .info-home-section .section-kicker,
  .info-home-section .manufacturing-intro,
  .info-home-section .manufacturing-intro h2,
  .info-home-section .manufacturing-intro p,
  .info-home-section .quality-list article,
  .info-home-section .quality-list h3,
  .info-home-section .quality-list p,
  .info-home-section .quality-number { text-align:center; }
  .info-home-section .manufacturing-intro p { margin-left:auto; margin-right:auto; }
  .info-home-section .quality-list article { padding-left:20px; padding-right:20px; }

  /* Certification copy, labels, and contact details. Leave form-entry text left-aligned. */
  .ayoyo-certifications .cert-columns,
  .ayoyo-certifications .cert-columns > div,
  .ayoyo-certifications .cert-columns h2,
  .ayoyo-certifications .cert-columns p,
  .ayoyo-certifications .cert-card-details,
  .ayoyo-certifications .cert-photo figcaption { text-align:center; }
  .ayoyo-contact .contact-intro,
  .ayoyo-contact .contact-intro h2,
  .ayoyo-contact .contact-intro p,
  .ayoyo-contact .contact-details,
  .ayoyo-contact .contact-details h3,
  .ayoyo-contact .contact-details p,
  .ayoyo-contact .contact-details a { text-align:center; }
  .ayoyo-contact .contact-intro { padding-right:0; padding-top:82px; margin-left:auto; margin-right:auto; }
  .ayoyo-contact .contact-intro .editorial-heading { font-size:clamp(31px,9.4vw,40px); }
  .ayoyo-contact .contact-details a { overflow-wrap:anywhere; }
  .ayoyo-contact .enquiry-form label,
  .ayoyo-contact .enquiry-status,
  .ayoyo-contact .enquiry-form .form-note { text-align:center; }
  .ayoyo-contact .enquiry-form input,
  .ayoyo-contact .enquiry-form textarea { text-align:left; }

  /* The product details dialog should also be readable on a phone. */
  .product-dialog .dialog-head > div,
  .product-dialog .detail-product,
  .product-dialog .detail-product h3,
  .product-dialog .dialog-foot p { text-align:center; }
  .product-dialog .dialog-head > div { min-width:0; padding-right:30px; }
  .product-dialog .detail-product { overflow-wrap:anywhere; }

  /* Centre the mobile navigation panel's copy without affecting its controls. */
  .strategic-menu .menu-intro,
  .strategic-menu .menu-group,
  .strategic-menu .menu-group h3,
  .strategic-menu .menu-highlight,
  .strategic-menu .menu-smallprint { text-align:center; }
}
@media screen and (max-width:359px) {
  /* Smaller phones: prevent headings and form/button labels colliding. */
  .home-menu-slider > .wrapper > .title-text { font-size:18px; }
  .home-menu-slider .menu-card .title-text { font-size:22px; }
  .ayoyo-proof .proof-panel { padding-left:19px; padding-right:19px; }
  .ayoyo-contact .contact-intro .editorial-heading { font-size:30px; }
  .ayoyo-certifications .cert-gallery { grid-template-columns:1fr; }
  .ayoyo-certifications .cert-card img { height:190px; }
}


/* Mobile-only refinement (22 Oct): side gutters, quality card spacing,
   Yomi above the contact heading, centred enquiry button text.
   All desktop styles and page assets remain untouched. */
@media screen and (max-width: 690px) {
  /* Six extra pixels at each side compared with the previous 18px gutters. */
  .ayoyo-proof > .wrapper,
  .info-home-section > .wrapper,
  .ayoyo-about > .wrapper,
  .ayoyo-certifications > .wrapper,
  .ayoyo-contact > .wrapper,
  .catalogue-section > .wrapper,
  .home-menu-slider > .wrapper {
    width: calc(100% - 48px);
  }

  /* Why Partner: align headings and paragraphs together at the centre. */
  .ayoyo-proof .proof-panel {
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 25px 21px;
    text-align: center;
  }
  .ayoyo-proof .proof-panel h2 {
    margin: 0;
    max-width: 100%;
    text-align: center;
  }
  .ayoyo-proof .proof-panel p {
    margin: 0;
    width: 100%;
    text-align: center;
  }

  /* Quality Management, Premium Materials, Our Aim etc.: let content,
     not an old desktop minimum height, determine each card's height. */
  .info-home-section .quality-list article {
    min-height: 0 !important;
    height: auto !important;
    padding: 22px 20px 25px;
    text-align: center;
  }
  .info-home-section .quality-list .quality-number {
    display: block;
    margin: 0 0 14px;
    text-align: center;
  }
  .info-home-section .quality-list h3 {
    margin: 0 0 18px;
    text-align: center;
  }
  .info-home-section .quality-list p {
    margin: 0;
    text-align: center;
  }

  /* Mascot is already the first element of the contact wrapper:
     make it flow naturally above the intro rather than floating at right. */
  .ayoyo-contact .yomi-contact-wave {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: 144px;
    max-width: 45%;
    margin: 0 auto 9px;
    display: block;
  }
  .ayoyo-contact .contact-intro {
    padding-top: 0 !important;
    padding-right: 0 !important;
    min-height: 0;
    text-align: center;
  }

  /* Prevent the compose-email label from sitting against one side. */
  .ayoyo-contact .enquiry-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
    padding-left: 14px;
    padding-right: 14px;
  }
}
@media screen and (max-width:359px) {
  .ayoyo-contact .yomi-contact-wave { width: 124px; }
  .ayoyo-proof .proof-panel { padding: 23px 16px; }
  .info-home-section .quality-list article { padding: 21px 16px 24px; }
}


/* Mobile-only final polish: modestly wider page gutters and centred open-menu links.
   No styles at desktop widths are modified. */
@media screen and (max-width: 690px) {
  /* Increase the previous 24px side gutters to 30px. */
  .ayoyo-proof > .wrapper,
  .info-home-section > .wrapper,
  .ayoyo-about > .wrapper,
  .ayoyo-certifications > .wrapper,
  .ayoyo-contact > .wrapper,
  .catalogue-section > .wrapper,
  .home-menu-slider > .wrapper,
  .home-banner .wrapper,
  .home-banner .grid-box {
    width: calc(100% - 60px);
  }

  /* Apply the same subtle additional side breathing room in the drawer. */
  .strategic-menu .menu-body { padding-left: 30px; padding-right: 30px; }
  .strategic-menu .menu-topbar { padding-left: 30px; padding-right: 30px; }
  .strategic-menu .menu-bottom { padding-left: 30px; padding-right: 30px; }

  /* Drawer links are flex containers with desktop left-aligned contents;
     centre the actual labels, not only the enclosing group. */
  .strategic-menu .menu-intro,
  .strategic-menu .menu-intro h2,
  .strategic-menu .menu-intro p,
  .strategic-menu .menu-group,
  .strategic-menu .menu-group h3,
  .strategic-menu .menu-group a,
  .strategic-menu .menu-category-link,
  .strategic-menu .menu-highlight,
  .strategic-menu .menu-smallprint {
    text-align: center;
  }
  .strategic-menu .menu-intro h2,
  .strategic-menu .menu-intro p { margin-left: auto; margin-right: auto; }
  .strategic-menu .menu-group a,
  .strategic-menu .menu-category-link {
    justify-content: center;
    align-items: center;
    width: 100%;
  }
}


/* iPhone/mobile only — let partner and quality cards grow with their text.
   Desktop styles, card colours, and all other sections remain unchanged. */
@media screen and (max-width: 690px) {
  .ayoyo-proof .wrapper,
  .info-home-section .quality-list {
    grid-auto-rows: max-content !important;
    align-items: start;
  }

  .ayoyo-proof .proof-panel {
    box-sizing: border-box;
    height: auto !important;
    min-height: max-content !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start !important;
    align-items: center;
    gap: 16px;
    padding: 28px 22px 30px;
  }
  .ayoyo-proof .proof-panel > h2,
  .ayoyo-proof .proof-panel > p {
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
    margin: 0;
    text-align: center;
    overflow-wrap: break-word;
  }
  .ayoyo-proof .proof-panel > h2 { line-height: 1.2; }
  .ayoyo-proof .proof-panel > p { line-height: 1.65; }

  .info-home-section .quality-list article {
    box-sizing: border-box;
    height: auto !important;
    min-height: max-content !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 28px 21px 30px;
  }
  .info-home-section .quality-list article > .quality-number,
  .info-home-section .quality-list article > h3,
  .info-home-section .quality-list article > p {
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
    text-align: center;
    overflow-wrap: break-word;
  }
  .info-home-section .quality-list article > .quality-number { margin: 0 0 15px; }
  .info-home-section .quality-list article > h3 { margin: 0 0 15px; line-height: 1.22; }
  .info-home-section .quality-list article > p { margin: 0; line-height: 1.65; }
}
@media screen and (max-width: 359px) {
  .ayoyo-proof .proof-panel { padding: 26px 18px 29px; }
  .info-home-section .quality-list article { padding: 26px 18px 29px; }
}


/* Catalogue CTA: same subtle sheen as the Go Beyond the Products cards.
   Applies identically on mobile and desktop without changing CTA layout or its existing float. */
.catalogue-section .official-catalogue-link {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.catalogue-section .official-catalogue-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 33%, rgba(255,255,255,.07) 44%, rgba(255,255,255,.33) 51%, rgba(255,255,255,.08) 58%, transparent 70%);
  background-size: 240% 100%;
  animation: ayoyoExploreShimmer 7.8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .catalogue-section .official-catalogue-link::after {
    animation: none;
    background: none;
  }
}


/* Halal and MeSTI logos beside the existing hero CTA on all three slides. */
.home-banner .hero-cta-with-logos {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 100%;
}
.home-banner .hero-compliance-logos {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 9px;
}
.home-banner .hero-compliance-logos img {
  display: block;
  width: auto;
  height: 39px;
  max-width: none;
  object-fit: contain;
}
@media (max-width: 690px) {
  .home-banner .hero-cta-with-logos {
    align-self: center;
    justify-content: center;
    gap: 8px;
  }
  .home-banner .hero-compliance-logos { gap: 6px; }
  .home-banner .hero-compliance-logos img { height: 27px; }
}


/* Only the two compliance logos: slightly larger on desktop;
   centred below each hero CTA link on mobile. All other styles are unchanged. */
.home-banner .hero-compliance-logos img {
  height: 45px;
}
@media (max-width: 690px) {
  .home-banner .hero-cta-with-logos {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 10px;
  }
  .home-banner .hero-compliance-logos {
    justify-content: center;
    gap: 10px;
  }
  .home-banner .hero-compliance-logos img {
    height: 34px;
  }
}

/* Mobile only: position Halal and MeSTI logos ABOVE the existing hero CTA text. */
@media screen and (max-width: 690px) {
  .home-banner .hero-cta-with-logos > .hero-compliance-logos {
    order: -1;
  }
}


/* Mobile-only: gently raise the logos and CTA together to tighten vertical spacing. */
@media screen and (max-width: 690px) {
  .home-banner .hero-cta-with-logos {
    transform: translateY(-12px);
  }
}

/* Requested 2026-10-23: only the two newly supplied Mango and Lychee
   photographs in the Pudding Is Our Speciality carousel. The two new
   images are made slightly bigger again and lowered a bit more so they
   sit more naturally against the existing round graphic. No card,
   layout, animation or other image settings have been changed. */
#puddings .flavor-slide[data-flavour="0"] .image-yogurt-info,
#puddings .flavor-slide[data-flavour="1"] .image-yogurt-info,
#puddings .flavor-slide[data-flavour="2"] .image-yogurt-info,
#puddings .flavor-slide[data-flavour="3"] .image-yogurt-info,
#puddings .flavor-slide[data-flavour="4"] .image-yogurt-info,
#puddings .flavor-slide[data-flavour="5"] .image-yogurt-info {
  background-size: 126% auto;
  background-position: center calc(50% + 72px);
}
@media (max-width: 690px) {
  #puddings .flavor-slide[data-flavour="0"] .image-yogurt-info,
  #puddings .flavor-slide[data-flavour="1"] .image-yogurt-info,
  #puddings .flavor-slide[data-flavour="2"] .image-yogurt-info,
  #puddings .flavor-slide[data-flavour="3"] .image-yogurt-info,
  #puddings .flavor-slide[data-flavour="4"] .image-yogurt-info,
#puddings .flavor-slide[data-flavour="5"] .image-yogurt-info {
    background-size: 128% auto;
    background-position: center calc(50% + 64px);
  }
}


/* 2026-10-23: Only tighten the space from the 'Pudding Is Our Speciality'
   introduction to its carousel cards. Do not resize or reposition products. */
#puddings .whats-home-slider { margin-top: -205px; }
@media (max-width: 690px) {
  #puddings .whats-home-slider { margin-top: -175px; }
}

/* 2026-10-23: Match More to Discover Yomi's display width to the
   Let's Work Together Yomi at the same desktop/tablet breakpoints.
   Keep both mascots' existing placement, artwork and mobile visibility. */
@media (min-width: 1101px) {
  .catalogue-section .yomi-product-cameo { width: 238px; }
}
@media (min-width: 691px) and (max-width: 1100px) {
  .catalogue-section .yomi-product-cameo { width: 175px; }
}