:root{--gold:#c6a664;--orange:#e87a38;--cream:#f4ebe1;--ink:#1a1a1a;--muted:#646464;--paper:#fff;--pale:#fbece0;--radius:20px;--shadow:0 12px 35px rgba(40,25,10,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--cream);font-family:Arial,Helvetica,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}body.modal-open{overflow:hidden}a{color:inherit}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}img{max-width:100%}img[loading=lazy]{content-visibility:auto}button:focus-visible,a:focus-visible{outline:3px solid #b9632e;outline-offset:4px}p{line-height:1.72}
.site-header{background:#fff;box-shadow:0 4px 16px #00000009;position:relative;z-index:5}.header-inner{max-width:1650px;margin:auto;min-height:108px;padding:12px 26px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}.nav-links,.contact-links{display:flex;align-items:center;gap:18px}.nav-link{padding:12px 10px;text-decoration:none;font-size:13px;font-weight:750;letter-spacing:.5px;white-space:nowrap;transition:color .2s,transform .2s}.nav-link:hover{color:var(--orange);transform:translateY(-2px)}.nav-link svg{width:16px;height:16px;vertical-align:-3px;margin-right:5px}.header-logo{display:block;text-align:center;width:115px;justify-self:center;transition:transform .3s}.header-logo img{display:block;margin:auto;width:112px;height:auto;max-height:100px;object-fit:contain}.logo-hover:hover{transform:scale(1.08) rotate(1deg)}.contact-links{justify-content:flex-end;gap:10px}.contact-pill{display:flex;gap:11px;align-items:center;white-space:nowrap;padding:7px 10px;text-decoration:none;transition:color .2s,transform .2s}.contact-pill:hover{color:var(--orange);transform:translateY(-2px)}.contact-icon{width:36px;height:36px;display:grid;place-items:center;background:#f8f9fa;border:1px solid #eee;border-radius:50%;font-size:17px}.contact-pill small{display:block;font-size:9px;letter-spacing:1.7px;font-weight:800;color:#999;margin-bottom:3px}.contact-pill strong{font-size:12px;font-weight:700}.contact-divider{height:25px;width:1px;background:#ddd}
.hero{background:#fff;position:relative;overflow:hidden;min-height:570px;display:flex;align-items:center;mask-image:linear-gradient(black 0%,black 84%,transparent 100%);-webkit-mask-image:linear-gradient(black 0%,black 84%,transparent 100%);padding-bottom:120px}.hero-inner{width:100%;max-width:1540px;margin:auto;display:grid;grid-template-columns:5fr 6fr;gap:40px;align-items:center;padding:72px 80px 12px}.hero-copy{max-width:580px}.eyebrow{display:inline-flex;gap:9px;align-items:center;letter-spacing:2px;border:1px solid #e87a3840;color:var(--orange);border-radius:40px;background:#fbece080;padding:10px 15px;font-size:10px;font-weight:850}.eyebrow .star{font-size:14px}.hero h1{font:900 clamp(35px,4vw,57px)/1.1 Arial,Helvetica,sans-serif;letter-spacing:-1.5px;margin:31px 0 22px}.hero p{max-width:560px;color:#6a6a6a;font-size:17px;font-weight:400;line-height:1.7;margin:0 0 44px}.cta{display:inline-flex;justify-content:center;align-items:center;gap:13px;border-radius:50px;border:none;padding:18px 28px;background:var(--orange);color:#fff;text-decoration:none;font-size:13px;font-weight:800;letter-spacing:1px;box-shadow:0 9px 20px #e87a3840;transition:transform .25s,box-shadow .25s,background .25s}.cta:hover{transform:translateY(-4px);background:#d66a2c;box-shadow:0 14px 30px #e87a3850}.hero-visual{width:min(100%,500px);height:430px;margin:auto;position:relative;animation:float 4s ease-in-out infinite alternate}.hero-visual:before{content:"";position:absolute;width:180px;height:180px;border-radius:50%;left:0;top:0;background:#e87a3815}.hero-visual:after{content:"";position:absolute;inset:17px 11px 28px 33px;border:2px solid #e87a3836;border-radius:115px 30px 30px 35px;z-index:0}.hero-photo{position:absolute;inset:28px 34px 33px 30px;border:8px solid white;box-shadow:0 19px 43px #00000017;border-radius:110px 24px 24px 35px;overflow:hidden;z-index:1}.hero-photo img{width:100%;height:100%;display:block;object-fit:cover}
@keyframes float{from{transform:translateY(-6px)}to{transform:translateY(6px)}}.section-wrap{max-width:1240px;margin:auto;padding-left:24px;padding-right:24px}.products{padding-top:14px;padding-bottom:90px;text-align:center}.section-title{font-size:32px;font-weight:850;letter-spacing:1.4px;margin:0}.section-line{height:3px;width:60px;background:var(--orange);border-radius:10px;margin:16px auto 50px}.category-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:24px 16px}.category-card{position:relative;width:210px;height:220px;border:0;padding:0;border-radius:20px;overflow:hidden;box-shadow:0 5px 12px #00000010;cursor:pointer;color:white;background:#6e6d6b;text-align:center;isolation:isolate;transition:transform .35s,box-shadow .35s}.category-card:hover{transform:translateY(-8px);box-shadow:0 16px 28px #00000027}.category-card:active{transform:scale(.97)}.category-card img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;z-index:-2;transition:transform .55s}.category-card:hover img{transform:scale(1.08)}.category-card:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.1),transparent 40%,rgba(0,0,0,.85));z-index:-1}.inquire-badge svg{width:12px;height:12px;vertical-align:-2px;margin-right:4px}.inquire-badge{position:absolute;top:12px;right:12px;font-size:10px;letter-spacing:.5px;font-weight:700;padding:8px 10px;border-radius:20px;background:#0006;color:white;border:1px solid #ffffff30}.category-card:hover .inquire-badge{background:var(--orange)}.category-copy{position:absolute;bottom:16px;left:10px;right:10px;display:grid;gap:5px}.category-copy strong{font-size:13px;line-height:1.3;letter-spacing:.4px}.category-copy small{font-size:9px;letter-spacing:.3px;color:#ffffffb8}.category-detail-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:24px auto 0;max-width:1000px}.category-detail-links a{font-size:12px;color:#a95f30;text-underline-offset:4px}.category-detail-links a:hover{color:#543c28}
.benefits{padding:35px 40px 70px}.benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.benefit{background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:0 0 30px;overflow:hidden;transition:transform .3s,box-shadow .3s}.benefit:hover{transform:translateY(-5px);box-shadow:0 17px 37px #00000012}.benefit-image{width:100%;height:160px;object-fit:cover;display:block;background:#ddd}.benefit-content{padding:22px 24px 0}.benefit-icon{font-size:22px;width:46px;height:46px;display:grid;place-items:center;border-radius:15px;margin-top:-46px;position:relative;background:#fbece0;border:4px solid white;box-sizing:content-box}.benefit:nth-child(2) .benefit-icon{background:#e6e8fb}.benefit:nth-child(3) .benefit-icon{background:#e2f3eb}.benefit h3{font-size:20px;margin:17px 0 10px}.benefit p{font-size:14px;color:#656565;line-height:1.65;margin:0}
.about{background:#fff;min-height:600px;position:relative;overflow:hidden;isolation:isolate;mask-image:linear-gradient(transparent 0%,black 10%,black 90%,transparent 100%);-webkit-mask-image:linear-gradient(transparent 0%,black 10%,black 90%,transparent 100%)}.about::before{position:absolute;content:"";inset:0;background-image:linear-gradient(90deg,#ffffff00 0%,#f8f9faf9 68%),url('assets/clonProduct.jpg');background-size:cover;background-position:left center;opacity:.62;z-index:-1;transition:opacity .5s}.about.expanded::before{opacity:.14}.about-inner{max-width:1400px;margin:auto;min-height:600px;padding:80px 80px;display:flex;align-items:center;justify-content:flex-end;gap:60px;transition:all .4s}.about-commitment{width:0;max-width:400px;flex:0 1 0;opacity:0;overflow:hidden;text-align:right;transition:width .5s,opacity .5s,flex-basis .5s}.about.expanded .about-commitment{width:400px;flex-basis:400px;opacity:1}.about-divider{width:0;height:0;background:#ddd;transition:all .5s}.about.expanded .about-divider{width:1px;height:220px}.about-content{width:450px;max-width:100%;text-align:right}.about-logo{display:block;max-width:130px;max-height:125px;object-fit:contain;margin:0 0 30px auto;animation:float 4s ease-in-out infinite alternate}.overline{font-weight:800;color:var(--orange);letter-spacing:3px;font-size:11px;margin:0 0 22px}.about-content p,.about-commitment p{font-size:15px;font-weight:500;line-height:1.8;color:#303030}.about-commitment p{font-size:16px}.about-commitment p+p{margin-top:12px}.outline-btn{cursor:pointer;padding:14px 31px;border:1.5px solid var(--orange);border-radius:50px;background:#fff;color:var(--orange);font-size:12px;font-weight:800;letter-spacing:2px;transition:background .25s,color .25s,transform .25s;margin-top:20px}.outline-btn:hover{color:#fff;background:var(--orange);transform:translateY(-3px)}
footer{padding:175px 24px 30px}.footer-inner{max-width:1320px;margin:0 auto}.footer-rule{height:2px;background:linear-gradient(90deg,transparent,#e87a3880,transparent);margin:0 20px 35px}.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:65px;padding:20px 30px 45px}.footer-col{min-width:0}.footer-col+.footer-col{border-left:1px solid #e6ddd3;padding-left:60px}.footer-logo{max-width:130px;margin-bottom:20px;transition:transform .3s}.footer-logo:hover{transform:scale(1.07)}.footer-description{max-width:320px;color:#666;font-size:14px;line-height:1.85;white-space:pre-line}.footer-heading{font-size:11px;letter-spacing:2.5px;font-weight:850;color:var(--orange);margin:2px 0 29px}.contact-row{display:flex;gap:15px;align-items:flex-start;margin:18px 0;text-decoration:none;color:#333;line-height:1.5;font-size:14px;font-weight:600}.contact-row[href]:hover{color:var(--orange)}.contact-row .icon{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;background:#fbece088;border-radius:10px;font-size:19px;color:var(--orange)}.contact-row span:last-child{padding-top:7px}.map-frame{width:100%;height:180px;border:1px solid #ddd;border-radius:16px;overflow:hidden;background:#f9f8f7;margin-top:18px;transition:transform .3s,box-shadow .3s}.map-frame:hover{transform:translateY(-5px);box-shadow:0 12px 24px #e87a3828}.map-frame iframe{width:100%;height:100%;border:0}.footer-bottom{text-align:center;border-top:1px solid #ded6cd;color:#a3a3a3;font-size:10px;font-weight:750;letter-spacing:2px;padding:30px 10px}.footer-category-links{display:flex;gap:10px 16px;flex-wrap:wrap;max-width:300px;margin-top:22px}.footer-category-links a{font-size:12px;color:#8b694b}.footer-category-links a:hover{color:var(--orange)}
.whatsapp-fab{position:fixed;right:27px;bottom:28px;z-index:30;width:58px;height:58px;display:grid;place-items:center;text-decoration:none;color:#fff;background:#25d366;border-radius:16px;box-shadow:0 8px 20px #0003;transition:transform .25s,background .2s}.whatsapp-fab:hover{transform:translateY(-4px) scale(1.04);background:#20b658}.whatsapp-fab svg{width:30px;height:30px;fill:currentColor}
.modal-layer{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;background:#0007;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}.modal-layer.open{opacity:1;visibility:visible}.modal-card{background:white;border-radius:32px 32px 0 0;padding:16px 32px 40px;margin:0 16px;width:100%;max-width:500px;text-align:center;box-shadow:0 -15px 50px #0002;transform:translateY(40px);transition:transform .3s}.modal-layer.open .modal-card{transform:translateY(0)}.modal-handle{width:42px;height:5px;border-radius:12px;background:#d7d7d7;margin:0 auto 31px}.modal-image{width:120px;height:120px;object-fit:cover;border-radius:24px;box-shadow:0 9px 18px #0002}.modal-card h2{font-size:24px;margin:21px auto 10px}.modal-card p{font-size:14px;color:#6c6c6c;max-width:410px;margin:0 auto 28px}.modal-action{width:100%;padding:18px 20px;display:flex;justify-content:center;align-items:center;gap:12px;background:#25d366;text-decoration:none;border-radius:40px;color:#fff;font-weight:750;box-shadow:0 7px 18px #25d36644}.modal-action:hover{background:#20b658}.modal-close{background:transparent;border:0;font-size:25px;line-height:1;position:absolute;right:25px;top:13px;color:#999;cursor:pointer}
.splash{position:fixed;inset:0;background:var(--cream);z-index:100;display:grid;place-items:center;transition:opacity .8s,visibility .8s}.splash.leaving{opacity:0;visibility:hidden}.splash-inner{text-align:center;animation:splash-slide 2.1s ease forwards}.splash img{display:block;width:210px;max-width:70vw;margin:0 auto 32px}.splash strong{font-size:14px;letter-spacing:3px;color:#666}@keyframes splash-slide{0%,50%{opacity:1;transform:translateY(0)}100%{opacity:.5;transform:translateY(-90px)}}.reveal{opacity:0;transform:translateY(35px);transition:opacity .8s,transform .8s}.reveal.visible{opacity:1;transform:translateY(0)}
/* Indexable product pages */.subpage main{min-height:52vh}.breadcrumb{max-width:1100px;margin:28px auto;padding:0 24px;font-size:13px;color:#775d47}.breadcrumb a{text-underline-offset:3px}.product-detail{max-width:1150px;margin:32px auto 70px;padding:0 24px;display:grid;grid-template-columns:1.05fr 1fr;gap:45px;align-items:center}.product-detail-img{width:100%;height:410px;object-fit:cover;border-radius:28px;box-shadow:var(--shadow)}.product-detail h1{font-size:clamp(30px,4vw,50px);line-height:1.1;letter-spacing:-1px;margin:22px 0}.product-detail p{color:#626262}.product-detail .cta{margin-top:20px}.product-links{max-width:1100px;margin:0 auto 70px;padding:0 24px}.product-links h2{font-size:22px}.product-links ul{line-height:2}
@media(max-width:1120px){.hero-inner{padding-left:45px;padding-right:45px}.contact-pill strong{font-size:11px}.footer-grid{gap:22px}.footer-col+.footer-col{padding-left:25px}.about-inner{padding:75px 35px}}
@media(max-width:900px){.header-inner{grid-template-columns:1fr auto 1fr;min-height:80px;gap:6px;padding:8px 10px}.header-logo{width:85px}.header-logo img{width:85px}.nav-links{gap:2px}.nav-link{padding:8px 5px;font-size:11px}.contact-links{gap:4px}.contact-pill{padding:5px}.contact-pill small,.contact-pill strong,.contact-divider{display:none}.contact-icon{width:32px;height:32px}.hero{min-height:355px;padding-bottom:65px}.hero-inner{display:block;text-align:center;padding:60px 25px 20px}.hero-copy{max-width:660px;margin:auto}.hero h1{font-size:42px}.hero p{font-size:15px}.hero-visual{display:none}.benefit-grid{grid-template-columns:1fr;max-width:640px;margin:auto}.benefits{padding-left:24px;padding-right:24px}.about-inner{display:block;max-width:650px;min-height:690px;padding:70px 24px}.about-content{width:100%;text-align:center}.about-logo{margin-left:auto;margin-right:auto}.about::before{background-image:linear-gradient(to bottom,#fffc 0%,#fffffffb 73%),url('assets/clonProduct.jpg');opacity:.96}.about .about-commitment{width:100%;max-width:100%;height:0;flex:none;opacity:0;text-align:center}.about.expanded .about-commitment{width:100%;height:auto;opacity:1;margin:28px auto 0}.about-divider{display:none}.about-inner{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:0}.about .about-commitment{order:0}.about.expanded .about-commitment{flex-basis:auto}.about-content{order:1}.about.expanded{min-height:950px}.footer-grid{grid-template-columns:1fr;max-width:600px;margin:auto;gap:30px;padding:20px 10px}.footer-col+.footer-col{padding:35px 0 0;border-left:0;border-top:1px solid #ded6cd}footer{padding-top:80px}.product-detail{grid-template-columns:1fr;max-width:700px}.product-detail-img{height:300px}}
@media(max-width:600px){.header-inner{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);padding:8px 9px;gap:0}.nav-links{gap:4px}.nav-link{font-size:0;display:grid;place-items:center;width:37px;height:37px;border:1px solid #ddd;border-radius:50%;background:#fafafa;padding:5px}.nav-link svg{margin:0;width:18px;height:18px}.header-logo{width:76px}.header-logo img{width:76px}.contact-links{gap:3px}.contact-icon{width:34px;height:34px}.hero h1{font-size:32px}.hero-inner{padding:58px 24px 14px}.hero p{font-size:15px}.hero .cta{margin-bottom:7px}.section-title{font-size:24px}.section-line{margin-bottom:38px}.category-grid{gap:14px}.category-card{width:calc((100% - 14px)/2);height:210px}.category-copy strong{font-size:12px}.products{padding-top:20px;padding-bottom:70px}.benefits{padding-top:24px;padding-bottom:60px}.about-inner{padding:62px 24px}.about-content p,.about-commitment p{font-size:15px}.whatsapp-fab{width:54px;height:54px;right:17px;bottom:17px}.modal-card{padding-left:24px;padding-right:24px}.product-detail-img{height:260px}}
@media(max-width:370px){.category-card{height:190px}.header-logo,.header-logo img{width:66px}.nav-link{width:33px;height:33px}.contact-icon{width:31px;height:31px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}.splash{display:none}}
/* Keep business content visible even if JavaScript or scroll observers don't run.
   An entrance animation is enhancement only, never an SEO/information dependency. */
.reveal{opacity:1;transform:none}
.reveal.visible{opacity:1;transform:none;animation:rise-in .7s ease both}
@keyframes rise-in{from{opacity:.7;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
.hero-photo{background:#f5f3ee url('assets/clonProduct.jpg') center/cover no-repeat}
.category-card{background:#565656 url('assets/clonProduct.jpg') center/cover no-repeat}
.benefit-image{background:#dfddd8 url('assets/clonProduct.jpg') center/cover no-repeat}

/* === Version 2: original Flutter one-page behavior + source-matched card styles === */
html{scroll-behavior:smooth;scroll-padding-top:0}
#products,#about,#contact{scroll-margin-top:0}
/* The navigation and home logo only change the scroll position on this page. */
.site-header .nav-link,.header-logo,.footer-logo{cursor:pointer}
/* Flutter's benefit card stacks: photograph -> near-solid white veil -> foreground content. */
.benefits{padding-top:35px;padding-bottom:80px}
.benefit-grid{align-items:stretch}
.benefit{isolation:isolate;position:relative;min-height:340px;padding:0;background:transparent;border-radius:24px;overflow:hidden;box-shadow:0 8px 15px rgba(0,0,0,.04);transition:transform 400ms cubic-bezier(.2,.8,.2,1),box-shadow 400ms cubic-bezier(.2,.8,.2,1);}
.benefit:hover{transform:translateY(-10px);box-shadow:0 15px 30px rgba(232,122,56,.15)}
.benefit-image{position:absolute;inset:0;z-index:-2;width:100%;height:100%;border:0;border-radius:24px;object-fit:cover;transition:transform 600ms cubic-bezier(.2,.8,.2,1);}
.benefit:hover .benefit-image{transform:scale(1.08)}
.benefit::before{content:"";position:absolute;z-index:-1;inset:0;background:rgba(255,255,255,.96);transition:background 400ms cubic-bezier(.2,.8,.2,1);}
.benefit:hover::before{background:rgba(255,255,255,.88)}
.benefit-content{position:relative;z-index:1;padding:36px;display:flex;flex-direction:column;align-items:flex-start}
.benefit-icon{position:relative;box-sizing:border-box;margin:0;width:58px;height:58px;border:0;border-radius:16px;background:rgba(251,236,224,.60);display:grid;place-items:center;color:#e87a38;transition:background 300ms,color 300ms;}
.benefit:nth-child(2) .benefit-icon{color:#5d65b9;background:rgba(230,232,251,.6)}
.benefit:nth-child(3) .benefit-icon{color:#388e67;background:rgba(226,243,235,.6)}
.benefit:hover .benefit-icon{background:#e87a38;color:white}
.benefit:nth-child(2):hover .benefit-icon{background:#5d65b9;color:white}
.benefit:nth-child(3):hover .benefit-icon{background:#388e67;color:white}
.benefit-arrow{position:absolute;top:42px;right:36px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#e87a38;background:#fbece0;opacity:0;transform:translate(-12px,12px);transition:opacity 300ms,transform 300ms;}
.benefit:nth-child(2) .benefit-arrow{color:#5d65b9;background:#e6e8fb}
.benefit:nth-child(3) .benefit-arrow{color:#388e67;background:#e2f3eb}
.benefit:hover .benefit-arrow{opacity:1;transform:translate(0)}
.benefit h3{font-family:Arial,Helvetica,sans-serif;font-weight:900;letter-spacing:-1px;font-size:clamp(25px,2.5vw,34px);line-height:1.1;margin:40px 0 14px;color:#1a1a1a}
.benefit p{font-size:14px;line-height:1.6;font-weight:500;color:#222;margin:0}
/* Desktop About Us matches Flutter: content on right until expanded, then commitment slides in on left. */
.about{min-height:600px;transition:min-height 500ms cubic-bezier(.2,.8,.2,1)}
.about.expanded{min-height:650px}
.about::before{background-image:linear-gradient(90deg,rgba(255,255,255,0) 30%,rgba(248,249,250,.98) 70%),url('https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=1920&q=80');opacity:1;transition:opacity 600ms,filter 600ms}
.about.expanded::before{opacity:1;filter:brightness(1.055)}
.about-inner{min-height:600px;max-width:1400px;transition:min-height 500ms cubic-bezier(.2,.8,.2,1);gap:0;justify-content:flex-end}
.about.expanded .about-inner{min-height:650px}
.about-commitment{box-sizing:border-box;display:block;width:0;max-width:none;flex:0 0 0;opacity:0;visibility:hidden;overflow:hidden;transition:width 600ms cubic-bezier(.2,.8,.2,1),flex-basis 600ms cubic-bezier(.2,.8,.2,1),opacity 400ms,visibility 600ms;margin-right:0}
.about.expanded .about-commitment{flex-basis:400px;width:400px;margin-right:60px;opacity:1;visibility:visible;transition:width 600ms cubic-bezier(.2,.8,.2,1),flex-basis 600ms cubic-bezier(.2,.8,.2,1),opacity 400ms 80ms,visibility 0s}
.about-commitment > *{width:400px;max-width:400px}
.about-divider{flex:0 0 0;height:0;transition:height 600ms cubic-bezier(.2,.8,.2,1),flex-basis 600ms cubic-bezier(.2,.8,.2,1),margin-right 600ms}
.about.expanded .about-divider{flex-basis:1px;width:1px;height:220px;margin-right:60px}
.about-content{flex:0 1 450px;max-width:450px}
.about-mobile-commitment{display:none}
/* Flutter switches to inline vertically expanding commitment below paragraph at <= 900px. */
@media(max-width:900px){
  .about{min-height:680px}
  .about.expanded{min-height:950px}
  .about-inner,.about.expanded .about-inner{display:flex;flex-direction:column;justify-content:flex-start;min-height:680px;max-width:650px;padding:60px 24px 40px;gap:0}
  .about.expanded .about-inner{min-height:950px}
  .about-content{width:100%;max-width:100%;flex:initial;order:0;text-align:center}
  .about-content .about-logo{margin:0 auto 30px}
  .about-commitment,.about.expanded .about-commitment,.about-divider{display:none}
  .about-mobile-commitment{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 500ms cubic-bezier(.2,.8,.2,1),opacity 350ms ease;}
  .about-mobile-commitment-inner{min-height:0;overflow:hidden;text-align:center}
  .about.expanded .about-mobile-commitment{grid-template-rows:1fr;opacity:1}
  .about-mobile-commitment .overline{margin-top:24px;margin-bottom:16px}
  .about-mobile-commitment p{margin:0 0 15px}
  .about::before{background-image:linear-gradient(to bottom,rgba(255,255,255,.96) 50%,rgba(248,249,250,.98) 85%),url('https://images.unsplash.com/photo-1581092160607-ee22621dd758?auto=format&fit=crop&w=1920&q=80');background-position:center top}
  .about.expanded::before{opacity:1;filter:none}
  .benefit-grid{grid-template-columns:1fr;max-width:640px;margin:auto;gap:16px}
  .benefit{min-height:220px}
  .benefit-content{padding:24px}
  .benefit-icon{width:46px;height:46px;border-radius:16px}
  .benefit-icon svg{width:22px;height:22px}
  .benefit-arrow{top:27px;right:24px}
  .benefit h3{font-size:28px;margin:20px 0 14px}
  .benefit p{font-size:13px}
}
@media(max-width:600px){.benefits{padding-bottom:80px}.about-inner,.about.expanded .about-inner{padding:60px 24px 40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Navigation styling follows Flutter's text-mode links on desktop. */
@media(min-width:601px){
 .nav-link svg{display:none}
 .nav-link{position:relative}
 .nav-link::after{content:"";position:absolute;bottom:3px;left:50%;height:2px;width:0;background:#e87a38;border-radius:2px;transform:translateX(-50%);transition:width 300ms cubic-bezier(.2,.8,.2,1)}
 .nav-link:hover::after,.nav-link:focus-visible::after{width:calc(100% - 20px)}
}
/* Source Flutter header uses pill outlines around the contact actions. */
.contact-pill{border:1.5px solid #e1e1e1;border-radius:100px;transition:border-color 250ms,box-shadow 250ms,transform 250ms,color 250ms}
.contact-pill:hover{border-color:rgba(232,122,56,.5);box-shadow:0 6px 12px rgba(232,122,56,.15)}
@media(min-width:901px) and (max-width:1140px){
  .about.expanded .about-commitment{flex-basis:280px;width:280px;margin-right:24px}
  .about-commitment > *{max-width:280px;width:280px}
  .about.expanded .about-divider{margin-right:24px}
  .about-inner{padding-left:30px;padding-right:30px}
  .about-content{flex-shrink:1}
}


/* ==========================================================
   V3 — Flutter reference alignment and stability corrections
   ========================================================== */
/* A click must jump immediately. No CSS smooth-scroll layered
   over a JS animation. Keep keyboard / deep links functional. */
html{scroll-behavior:auto!important;scroll-padding-top:0;overflow-anchor:none}
body{overflow-anchor:none}
#products,#about,#contact{scroll-margin-top:0}

/* Flutter header: edge-to-edge, white with a visible soft shadow. */
.site-header{box-shadow:0 4px 16px rgba(0,0,0,.065);position:relative;z-index:10}
.header-inner{max-width:none;min-height:100px;padding:10px 24px}
.contact-icon,.contact-icon svg{color:#e87a38;stroke:#e87a38}

/* Flutter desktop hero uses 5:6 layout across the viewport, with
   80px left padding; the old 1540px/max-580px caps forced 4 lines. */
@media(min-width:901px){
  .hero-inner{max-width:none;width:100%;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:24px;padding:72px 80px 12px}
  .hero-copy{max-width:none;min-width:0}
  .hero h1{font-family:Helvetica,Arial,sans-serif;font-weight:900;font-size:clamp(38px,3.05vw,56px);line-height:1.1;letter-spacing:-1.5px}
  .hero p{max-width:670px}
}
@media(min-width:901px) and (max-width:1200px){
  .hero-inner{padding-left:45px;padding-right:45px;gap:22px}
  .hero h1{font-size:clamp(34px,4vw,49px)}
}

/* Flutter Expanded x3 fills width at >950px. Original HTML
   inherited section-wrap's 1240px max-width. */
.benefits.section-wrap{width:100%;max-width:none;padding:35px 40px 80px}
.benefit-grid{width:100%;max-width:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.benefit{width:100%;height:100%;min-height:340px}
@media(max-width:950px){
 .benefits.section-wrap{padding-left:40px;padding-right:40px}
 .benefit-grid{grid-template-columns:minmax(0,1fr);gap:16px}
 .benefit{min-height:220px}
}
@media(max-width:600px){.benefits.section-wrap{padding-left:24px;padding-right:24px}}

/* Keep the WHO WE ARE section at the same desktop height, open or
   closed. The commitment expands sideways, not vertically. */
@media(min-width:901px){
 .about,.about.expanded{height:650px;min-height:650px}
 .about-inner,.about.expanded .about-inner{height:100%;min-height:0;padding-top:72px;padding-bottom:72px}
}
/* Mobile has no jump in preset min-height when toggling. Keep the
   toggle button in place, reveal detail BELOW it instead. */
@media(max-width:900px){
 .about,.about.expanded{height:auto;min-height:680px}
 .about-inner,.about.expanded .about-inner{height:auto;min-height:680px;padding:60px 24px 56px}
 .about-mobile-commitment{margin-top:0;overflow-anchor:none}
 .about.expanded .about-mobile-commitment{margin-top:20px}
}

/* A failed image/script/network request must never make the site
   blank. The CSS fallback hides splash even without app.js. */
.splash{pointer-events:none;animation:clon-splash-safety 0s 2s both}
@keyframes clon-splash-safety{to{opacity:0;visibility:hidden}}
.reveal,.reveal.visible{opacity:1}

/* ===========================================================
   VERSION 4 — Flutter-matched smooth navigation and reveals
   Existing Version 3 sizing, modals and About Us layout retained.
   =========================================================== */

/* The header and first section share one seamless white background.
   Remove the shadow completely on all viewport widths. */
.site-header, .hero { background-color: #fff; }
.site-header { box-shadow: none !important; border: 0; }

/* JS owns the section scrolling, so native CSS smooth scrolling
   cannot compete with or delay the 800/1000ms animation. */
html { scroll-behavior: auto !important; }

/* Progressive enhancement: all content is visible WITHOUT JavaScript.
   Reveal transforms are added only after a working observer is installed.
   Flutter _AnimatedScrollWrapper uses a 1200ms fade + upward motion
   + scale when the section reaches the lower 85% of the viewport. */
@media (prefers-reduced-motion: no-preference) {
  html.scroll-effects-enabled .products.reveal {
    transition: opacity 1.2s ease-out,
                transform 1.2s cubic-bezier(.22, 1.2, .36, 1);
  }
  html.scroll-effects-enabled .products.reveal:not(.visible) {
    opacity: 0;
    transform: translateY(60px) scale(.7);
  }
  html.scroll-effects-enabled .products.reveal.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  /* Flutter also reveals the three benefits as visitors scroll. */
  html.scroll-effects-enabled .benefit.reveal {
    transition: opacity .9s ease-out,
                transform 1.1s cubic-bezier(.22, 1.2, .36, 1),
                box-shadow .3s;
  }
  html.scroll-effects-enabled .benefit.reveal:not(.visible) {
    opacity: 0;
    transform: translateY(48px) scale(.85);
  }
  html.scroll-effects-enabled .benefit.reveal.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  /* Preserve Version 3 hover lift AFTER the reveal has finished. */
  html.scroll-effects-enabled .benefit.reveal.visible:hover {
    transform: translateY(-5px);
  }
  html.scroll-effects-enabled .about.reveal,
  html.scroll-effects-enabled .footer-inner.reveal {
    transition: opacity .85s ease-out, transform 1s cubic-bezier(.22, 1, .36, 1);
  }
  html.scroll-effects-enabled .about.reveal:not(.visible),
  html.scroll-effects-enabled .footer-inner.reveal:not(.visible) {
    opacity: 0;
    transform: translateY(35px);
  }
  html.scroll-effects-enabled .about.reveal.visible,
  html.scroll-effects-enabled .footer-inner.reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Prefer reduced motion and never let reveal styles obscure content. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.visible { opacity: 1 !important; transform: none !important; }
}

/* ================================================================
   VERSION 5 — cohesive, smooth motion and refined typography
   Preserves Version 4 layout, modal, card width, SEO, and About Us fixes.
   ================================================================ */
:root { --ease-elegant: cubic-bezier(.22, 1, .36, 1); }
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
.site-header { background:#fff; box-shadow:none !important; }
.hero { background:#fff; }
.hero h1 {
  font-family:inherit !important;
  font-weight:700 !important;
  letter-spacing:-1.65px;
  line-height:1.13;
}
.nav-link { font-weight:600; }
.eyebrow { font-weight:700; }
.section-title { font-weight:700; }
.benefit h3 { font-family:inherit; font-weight:700; letter-spacing:-.8px; line-height:1.16; }
.benefit p { font-weight:400; }
.about-content p,.about-commitment p { font-weight:400; }
.cta { font-weight:700; }
.outline-btn { font-weight:700; }
.footer-heading { font-weight:700; }

/* The Flutter intro runs for 2200ms. Complete its animation instead
   of cutting a 2100ms logo movement short after 650ms. Always hides
   by CSS even when the JavaScript bundle fails to load. */
.splash {
  pointer-events:none;
  will-change:opacity;
  animation:clonSplashVeil 2200ms both !important;
  transition:none !important;
  background:#f4ebe1;
}
.splash-inner {
  will-change:transform;
  animation:clonSplashLogo 2200ms both !important;
  transform:translate3d(0,0,0);
}
.splash.leaving { opacity:0; visibility:hidden; }
@keyframes clonSplashVeil {
  0%,50% {opacity:1;visibility:visible;animation-timing-function:cubic-bezier(.42,0,.58,1)}
  100% {opacity:0;visibility:hidden}
}
@keyframes clonSplashLogo {
  0%,30% {opacity:1;transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  90%,100% {opacity:1;transform:translate3d(0,-116px,0)}
}
/* The homepage emerges underneath the fading splash, not afterward. */
.site-header, main, footer, .floating-whatsapp {
  animation:clonPageEnter 2200ms both;
}
@keyframes clonPageEnter {
  0%,20% {opacity:0;animation-timing-function:cubic-bezier(.42,0,.58,1)}
  80%,100% {opacity:1}
}

/* Never move the products/about sections themselves: scrolling must
   always use their real layout coordinates, even during reveals. */
/* Only pin section-layout containers; benefit cards are free to animate
   independently. No element changes its layout/scroll anchor position. */
.products.reveal,.products.reveal.visible,
.about.reveal,.about.reveal.visible,
.footer-inner.reveal,.footer-inner.reveal.visible {
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
}
.benefit.reveal,.benefit.reveal.visible { animation:none !important; }

@media (prefers-reduced-motion:no-preference) {
  /* .motion-ready is installed ONLY once the observer is working. */
  html.motion-ready .products.reveal .section-title,
  html.motion-ready .products.reveal .section-line,
  html.motion-ready .products.reveal .category-card,
  html.motion-ready .benefit.reveal,
  html.motion-ready .about.reveal .about-content,
  html.motion-ready .footer-inner.reveal {
    transition:opacity 680ms var(--ease-elegant),
               transform 680ms var(--ease-elegant);
  }
  html.motion-ready .products.reveal:not(.visible) .section-title,
  html.motion-ready .products.reveal:not(.visible) .section-line,
  html.motion-ready .products.reveal:not(.visible) .category-card,
  html.motion-ready .benefit.reveal:not(.visible),
  html.motion-ready .about.reveal:not(.visible) .about-content,
  html.motion-ready .footer-inner.reveal:not(.visible) {
    opacity:0;
    transform:translate3d(0,20px,0) scale(.985);
  }
  html.motion-ready .products.reveal.visible .section-title,
  html.motion-ready .products.reveal.visible .section-line,
  html.motion-ready .products.reveal.visible .category-card,
  html.motion-ready .benefit.reveal.visible,
  html.motion-ready .about.reveal.visible .about-content,
  html.motion-ready .footer-inner.reveal.visible {
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
  html.motion-ready .products .section-line { transition-delay:65ms; }
  html.motion-ready .products .category-card:nth-child(1) { transition-delay:80ms; }
  html.motion-ready .products .category-card:nth-child(2) { transition-delay:125ms; }
  html.motion-ready .products .category-card:nth-child(3) { transition-delay:170ms; }
  html.motion-ready .products .category-card:nth-child(4) { transition-delay:215ms; }
  html.motion-ready .products .category-card:nth-child(5) { transition-delay:260ms; }
  html.motion-ready .benefit.reveal:nth-child(2) { transition-delay:75ms; }
  html.motion-ready .benefit.reveal:nth-child(3) { transition-delay:150ms; }
  /* Existing source-matched hover: still 96% white veil -> 88% on hover. */
  html.motion-ready .benefit.reveal.visible:hover {
    transform:translate3d(0,-8px,0) scale(1);
    transition-delay:0ms;
  }
  html.motion-ready .products.reveal.visible .category-card:hover {
    transform:translate3d(0,-8px,0) scale(1);
    transition-delay:0ms;
  }
  /* Keep hover responsiveness after staggered appearance. */
  .category-card img,.benefit-image { backface-visibility:hidden; }
}

/* Respect accessibility settings and avoid hidden content in prints. */
@media (prefers-reduced-motion:reduce) {
  .splash { display:none !important;animation:none !important; }
  .splash-inner,.site-header,main,footer,.floating-whatsapp {
    animation:none !important;
    opacity:1 !important;
  }
  .reveal,.reveal * { transition-duration:0ms !important; }
}
@media print {
  .splash { display:none !important; }
  .site-header,main,footer,.floating-whatsapp { animation:none !important;opacity:1 !important; }
  .reveal,.reveal * { opacity:1 !important;transform:none !important; }
}

/* Progressive enhancement: if JavaScript fails, the splash cannot hide the site. */
.splash { display:none; }
html.js-enabled .splash { display:grid; }
@media (prefers-reduced-motion:reduce) { html.js-enabled .splash { display:none !important; } }


/* =======================================================================
   CLON ONE FINAL: benefit / Who We Are / footer scroll entrances
   The V5 product reveal stays intact. These specific items use one-time
   compositor animations from app.js instead of the old CSS visibility gate.
   No text is hidden by default; failures can never leave an empty section.
   ======================================================================= */
html.motion-ready .benefit.reveal,
html.motion-ready .benefit.reveal:not(.visible),
html.motion-ready .benefit.reveal.visible,
html.motion-ready .about.reveal .about-content,
html.motion-ready .about.reveal:not(.visible) .about-content,
html.motion-ready .about.reveal.visible .about-content,
html.motion-ready .footer-inner.reveal,
html.motion-ready .footer-inner.reveal:not(.visible),
html.motion-ready .footer-inner.reveal.visible {
  opacity: 1;
  transform: none;
}
/* Keep V5's exact white overlay and 3-column sizing. Hover stays smooth
   once the one-time entrance finishes. */
html.motion-ready .benefit.reveal {
  transition: transform 400ms cubic-bezier(.2,.8,.2,1),
              box-shadow 400ms cubic-bezier(.2,.8,.2,1);
}
html.motion-ready .benefit.reveal:hover,
html.motion-ready .benefit.reveal.visible:hover {
  transform: translateY(-8px);
}
html.motion-ready .about.reveal .about-content,
html.motion-ready .footer-inner.reveal {
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .benefit, .about-content, footer .footer-col {
    opacity: 1 !important;
    animation: none !important;
  }
}