/* Wild Turmeric Naturals – static site styles */
:root{--pink:#f0aaaa;--pink2:#e98f8f;--pinkbg:#fbe4e4;--cream:#fbefe6;--dark:#222;--text:#232323;--muted:#666;--body:'Plus Jakarta Sans',Arial,sans-serif;--head:'Libre Baskerville',Georgia,serif;--script:'Arizonia',cursive}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:var(--body);font-size:15px;line-height:1.75;color:var(--text);background:#fff;overflow-x:hidden}
main,section,footer{overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.container{width:90%;max-width:1300px;margin:0 auto}
h1,h2,h3,h4{font-family:var(--head);font-weight:400;color:var(--dark);line-height:1.3}
.sec{padding:90px 0}
.center{text-align:center}
.script{display:block;font-family:var(--script);color:var(--pink);font-size:24px;line-height:1.2;margin-bottom:6px}
.title{font-size:34px;margin-bottom:18px}
.title.pink{color:var(--pink)}
.btn{display:inline-block;background:var(--pink);color:#222;padding:10px 26px;border-radius:30px;font-weight:500;font-size:15px;border:0;cursor:pointer;transition:background .35s,color .35s,transform .35s;font-family:var(--body)}
.btn:hover{background:var(--dark);color:#fff;transform:translateY(-2px)}

/* ---------- Header ---------- */
.site-header{background:var(--pinkbg);position:sticky;top:0;z-index:100;transition:box-shadow .3s}
.site-header.scrolled{box-shadow:0 3px 16px rgba(0,0,0,.08)}
.nav-wrap{position:relative;display:flex;align-items:center;justify-content:space-between;height:80px;width:96%;max-width:1600px;margin:0 auto}
.menu{display:flex;align-items:center;gap:24px}
.menu>li{position:relative}
.menu>li>a{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:500;color:#222;padding:28px 0;transition:color .3s}
.menu>li>a:hover,.menu>li>a.active{color:var(--pink2)}
.menu .caret{width:9px;height:9px;fill:currentColor}
.dropdown{position:absolute;top:100%;left:-10px;background:#fff;min-width:200px;padding:12px 0;box-shadow:0 10px 30px rgba(0,0,0,.12);border-top:3px solid var(--pink);opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s}
.has-sub:hover .dropdown,.has-sub:focus-within .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{display:block;padding:7px 24px;font-size:14px;font-weight:500;transition:all .25s}
.dropdown a:hover,.dropdown a.active{color:var(--pink2);padding-left:30px}
.logo{position:absolute;left:50%;top:6px;transform:translateX(-50%);width:120px;height:120px;z-index:3}
.logo img{width:100%;height:100%;transition:transform .8s}
.logo:hover img{transform:rotate(360deg)}
.h-right{display:flex;align-items:center;gap:56px}
.h-right .btn{padding:10px 22px;font-size:15px}
.socials{display:flex;gap:10px}
.socials a{width:36px;height:36px;border:2px solid #222;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s}
.socials svg{width:16px;height:16px;fill:#222;transition:fill .3s}
.socials a:hover{background:var(--pink);border-color:var(--pink);transform:translateY(-3px)}
.burger{display:none;background:none;border:0;width:42px;height:42px;cursor:pointer;position:relative}
.burger span,.burger span:before,.burger span:after{position:absolute;left:9px;width:24px;height:2px;background:#222;transition:.3s;content:""}
.burger span{top:20px}.burger span:before{top:-7px;left:0}.burger span:after{top:7px;left:0}
.nav-open .burger span{background:transparent}.nav-open .burger span:before{transform:translateY(7px) rotate(45deg)}.nav-open .burger span:after{transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero slider (full width, full image) ---------- */
.hero{position:relative;overflow:hidden;width:100%;aspect-ratio:1920/800;background:#f4e9e6}
.hero-track{display:flex;height:100%;transition:transform 1s cubic-bezier(.7,0,.3,1)}
.hero-track .slide{flex:0 0 100%;height:100%}
.hero-track img{width:100%;height:100%;object-fit:cover}
.h-arrow{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:rgba(0,0,0,.65);color:#fff;font-size:22px;line-height:1;cursor:pointer;transition:background .3s,transform .3s;z-index:2}
.h-arrow:hover{background:#000;transform:translateY(-50%) scale(1.1)}
.h-arrow.prev{left:20px}.h-arrow.next{right:20px}

/* ---------- Inner banner (full width) ---------- */
.page-banner{position:relative;height:400px;background:url(../img/page-banner.webp) center/cover;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.page-banner:before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42)}
.page-banner img{position:relative;width:46px;margin-bottom:6px;filter:brightness(0) invert(1);animation:fadeUp 1s both}
.page-banner h1{position:relative;color:#fff;font-size:34px;font-weight:700;letter-spacing:1px;animation:fadeUp 1s .2s both}
.page-banner h1.pink{color:var(--pink);font-weight:400}

/* ---------- Home: about ---------- */
.about{background:#fff}
.about-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:60px;align-items:center}
.about-img{position:relative;max-width:560px}
.about-img .badge{position:absolute;left:35.6%;top:28.7%;width:28.1%;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.about-grid p{margin-bottom:14px;text-align:justify;font-weight:500}
.feats4{display:grid;grid-template-columns:1fr 1fr;gap:18px 30px;margin:24px 0 30px}
.feats4 div{display:flex;align-items:center;gap:14px;font-family:var(--head);font-size:18px}
.feats4 span{width:42px;height:42px;border-radius:50%;border:1px solid #f3cccc;display:flex;align-items:center;justify-content:center;transition:all .4s}
.feats4 svg{width:20px;height:20px;fill:var(--pink2)}
.feats4 div:hover span{background:var(--pink);transform:rotateY(180deg)}
.feats4 div:hover svg{fill:#fff}

/* ---------- Home: tips checkerboard (full width) ---------- */
.tips{display:grid;grid-template-columns:repeat(4,1fr);background:var(--cream) url(../img/cream-bg.webp) center/cover}
.tips .ph{overflow:hidden;aspect-ratio:342/285}
.tips .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s}
.tips .ph:hover img{transform:scale(1.1)}
.tips .tx{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px 22px}
.tips h3{font-size:18px;font-weight:700;color:var(--pink);text-transform:uppercase;margin-bottom:8px}
.tips p{font-size:14px;font-weight:500;line-height:1.6}
.more{margin-top:12px;width:30px;height:30px;border-radius:50%;border:1px solid var(--pink);background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .3s}
.more svg{width:14px;height:14px;fill:var(--pink)}
.more:hover{background:var(--pink);transform:rotate(-45deg)}.more:hover svg{fill:#fff}

/* ---------- Popup ---------- */
.popup{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;z-index:999;padding:20px;opacity:0;visibility:hidden;transition:.35s}
.popup.open{opacity:1;visibility:visible}
.popup-box{background:var(--pinkbg);max-width:620px;width:100%;max-height:88vh;overflow:auto;padding:40px 34px 34px;position:relative;transform:scale(.85);transition:transform .35s;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.popup.open .popup-box{transform:none}
.popup-close{position:absolute;top:8px;right:12px;background:none;border:0;font-size:26px;cursor:pointer;line-height:1;color:#333}
.popup-box .ic{width:34px;margin:0 auto 6px}
.popup-box h2{font-size:26px;text-align:center;margin-bottom:18px}
.popup-box .cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.popup-box h4{color:var(--pink2);font-size:17px;margin:4px 0 6px}
.popup-box ul{list-style:disc;padding-left:18px;font-size:13.5px;line-height:1.7}
.popup-box p{font-size:13.5px}

/* ---------- Strengths ---------- */
.flower{background:url(../img/flower-bg.webp) left top/260px auto no-repeat}
.str-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;margin-top:40px;text-align:center}
.str-grid img{width:76px;margin:0 auto 12px;transition:transform .6s}
.str-grid div:hover img{transform:translateY(-8px) scale(1.06)}
.str-grid p{font-size:19px;font-weight:600;color:#000}

/* ---------- Features ---------- */
.features{background:url(../img/features-bg.webp) center/cover}
.fe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:40px}
.fe{background:var(--cream);padding:34px 30px 30px;text-align:center;transition:background .45s,transform .45s}
.fe img{margin:0 auto 18px;max-width:200px;transition:transform .6s}
.fe h3{font-size:19px;font-weight:700;margin-bottom:10px}
.fe p{font-size:14px;font-weight:500;line-height:1.7}
.fe:hover,.fe.hl{background:var(--pink)}
.fe:hover{transform:translateY(-8px)}
.fe:hover img{transform:scale(1.05)}

/* ---------- Product carousels ---------- */
.prow{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:center;margin-top:40px}
.prow.rev{grid-template-columns:1fr 300px}
.prow.rev .catcard{order:2}
.catcard{position:relative;height:300px;background-size:cover;background-position:center;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:24px;overflow:hidden}
.catcard:before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42);transition:background .4s}
.catcard:hover:before{background:rgba(0,0,0,.55)}
.catcard>*{position:relative}
.catcard h3{color:#fff;font-size:22px;margin-bottom:10px}
.catcard p{font-size:14px;margin-bottom:16px}
.pc{position:relative}
.pc-view{overflow:hidden}
.pc-track{display:flex;transition:transform .7s ease;cursor:grab;touch-action:pan-y;user-select:none}
.pc-track.dragging{transition:none}
.pc-item{flex:0 0 calc(33.333% - 14px);margin-right:21px;text-align:center}
.pc-item .ph{overflow:hidden;aspect-ratio:270/315}
.pc-item img{width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform .9s}
.pc-item:hover img{transform:scale(1.08)}
.pc-item p{font-size:17px;font-weight:500;margin-top:10px}
.pc-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.pc-dots button{width:9px;height:9px;border-radius:50%;border:0;background:#e7c8c8;cursor:pointer}
.pc-dots button.on{background:var(--pink2);width:22px;border-radius:5px}

/* ---------- Services around model ---------- */
.ring{background:var(--pinkbg) url(../img/flower-bg.webp) left top/220px auto no-repeat;padding:70px 0 0}
.ring-grid{display:grid;grid-template-columns:1fr 1.1fr 1fr;gap:20px;align-items:end}
.rcol{display:flex;flex-direction:column;gap:36px;padding-bottom:60px}
.ri{display:flex;gap:18px;align-items:center}
.rcol.l .ri{flex-direction:row-reverse;text-align:right}
.ri img{width:66px;flex:0 0 66px;transition:transform .6s}
.ri:hover img{transform:rotateY(360deg)}
.ri h3{color:var(--pink2);font-size:21px;margin-bottom:4px}
.ri p{font-size:13.5px;color:var(--muted);line-height:1.6}
.model{position:relative}
.petal{position:absolute;width:14px;height:20px;border-radius:50% 50% 50% 0;background:#f7b6c8;opacity:.8;animation:fall 7s linear infinite}
@keyframes fall{0%{transform:translateY(-20px) rotate(0)}100%{transform:translateY(380px) rotate(320deg);opacity:0}}

/* ---------- About page ---------- */
.shape2{background:url(../img/shape-2.webp) right center/auto 100% no-repeat}
.auth-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:40px;text-align:center}
.auth-grid .ph{overflow:hidden;border-radius:10px}
.auth-grid img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .9s}
.auth-grid div:hover img{transform:scale(1.08)}
.auth-grid h3{font-size:16px;font-weight:700;margin-top:12px}
.counters{background:#f3efea url(../img/flower-bg.webp) left center/220px auto no-repeat;padding:80px 0}
.cnt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.cnt{background:#fff;padding:52px 22px 24px;position:relative;margin-top:30px;transition:transform .4s,box-shadow .4s}
.cnt:hover{transform:translateY(-6px);box-shadow:0 16px 36px rgba(0,0,0,.08)}
.cnt img{position:absolute;top:-30px;left:22px;width:60px;height:60px;background:var(--pink);padding:8px;border-radius:4px}
.cnt .n{font-size:46px;font-weight:500;line-height:1.1}
.cnt h3{color:var(--pink);font-size:18px;margin-top:8px}
.certs{display:flex;justify-content:center;gap:24px;margin:20px 0 24px}
.certs a{width:110px;height:110px;border-radius:50%;background:var(--pinkbg);display:flex;align-items:center;justify-content:center;padding:10px;transition:transform .5s}
.certs a:hover{transform:scale(1.08) rotate(-5deg)}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:999;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.3s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:86vw;max-height:82vh;transform:scale(.9);transition:transform .3s;background:#fff}
.lightbox.open img{transform:none}
.lightbox button{position:absolute;background:none;border:0;color:#fff;font-size:44px;cursor:pointer;line-height:1;padding:10px}
.lb-close{top:14px;right:22px}.lb-prev{left:16px;top:50%;transform:translateY(-50%)}.lb-next{right:16px;top:50%;transform:translateY(-50%)}
.lb-count{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#ccc;font-size:14px}

/* ---------- Product listing (hair / skin) ---------- */
.plist{background:var(--cream) url(../img/cream-bg.webp) center/cover}
.pl{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.pl:nth-child(even) .ph{order:2}
.pl .ph{overflow:hidden;min-height:340px}
.pl .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.pl:hover .ph img{transform:scale(1.06)}
.pl .tx{padding:50px 40px;display:flex;flex-direction:column;justify-content:center}
.pl h3{color:var(--pink);font-size:24px;margin-bottom:14px}
.pl p{font-size:13.5px;line-height:1.75}
.pl .price{font-size:18px;font-weight:700;margin:14px 0 18px}
.pl .btn{align-self:flex-start}
.ba{background:url(../img/features-bg.webp) center/cover}
.ba-grid{display:grid;grid-template-columns:1fr 1.4fr 1fr;align-items:stretch;margin-top:40px}
.ba-grid .ph{position:relative;overflow:hidden}
.ba-grid .ph img{width:100%;height:100%;object-fit:cover;transition:transform 1s}
.ba-grid .ph:hover img{transform:scale(1.06)}
.ba-grid .ph span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--head);font-size:20px;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.ba-grid .mid{background:#fff url(../img/ba-bg.webp) center/cover;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:30px 40px}
.ba-grid h3{color:var(--pink);font-size:20px;font-weight:700;margin-bottom:10px}
.ba-grid p{font-size:14px}
.solve{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:40px;text-align:center}
.solve .ph{overflow:hidden}
.solve img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:grayscale(1);transition:transform .8s,filter .6s}
.solve div:hover img{transform:scale(1.08);filter:grayscale(0)}
.solve h4{font-size:14px;margin-top:12px;text-transform:uppercase}

/* ---------- Sarees ---------- */
.sar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1000px;margin:40px auto 0}
.sar-grid a{overflow:hidden;display:block;aspect-ratio:1/1}
.sar-grid img{width:100%;height:100%;object-fit:cover;transition:transform .9s}
.sar-grid a:hover img{transform:scale(1.1)}

/* ---------- Contact ---------- */
.contact-sec{background:url(../img/contact-shape.webp) right bottom/220px no-repeat}
.c-card{display:grid;grid-template-columns:1.5fr 1fr;box-shadow:0 10px 40px rgba(0,0,0,.08);max-width:1000px;margin:0 auto}
.c-left{background:#fff url(../img/contact-card-bg.webp) right top/70% no-repeat;padding:60px 50px}
.c-left img.ic{width:44px;opacity:.6;margin-bottom:10px}
.c-left h2{color:var(--pink);font-size:28px;margin-bottom:30px}
.c-left li{display:flex;align-items:center;gap:20px;margin-bottom:22px;font-size:14px}
.c-left li span{width:30px;height:30px;border-radius:50%;background:var(--pinkbg);display:flex;align-items:center;justify-content:center;flex:0 0 30px}
.c-left svg{width:15px;height:15px;fill:var(--pink2)}
.c-left a:hover{color:var(--pink2)}
.c-right{background:#ec9e9e;padding:40px 32px}
.c-right h2{font-size:22px;font-weight:700;margin-bottom:18px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fgrid .full{grid-column:1/-1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.fgrid input,.fgrid textarea{width:100%;padding:9px 10px;border:1px solid #999;border-radius:2px;background:#fff;font:14px var(--body);color:#222}
.fgrid input:focus,.fgrid textarea:focus{outline:0;border-color:#222;box-shadow:0 0 0 3px rgba(255,255,255,.5)}
.fgrid textarea{height:100px;resize:vertical}
.send{background:#fff;border:0;padding:8px 26px;font:500 14px var(--body);cursor:pointer;margin-top:14px;transition:.3s}
.send:hover{background:#222;color:#fff}
.send:disabled{opacity:.6}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.form-msg{margin-top:12px;padding:10px 12px;font-size:13.5px;line-height:1.5;display:none}
.form-msg.ok{display:block;background:#e6f6ea;color:#1d5e2a}
.form-msg.err{display:block;background:#fff;color:#a12a1a}
.map iframe{width:100%;height:420px;border:0;display:block}

/* ---------- Footer (full width) ---------- */
.site-footer{position:relative;background:url(../img/footer-bg.webp) center/cover;color:#fff}
.site-footer:before{content:"";position:absolute;inset:0;background:rgba(10,4,8,.55)}
.site-footer>*{position:relative}
.f-topwrap{border-bottom:1px solid rgba(255,255,255,.25)}
.f-top{display:grid;grid-template-columns:1fr 1fr 1fr;width:90%;max-width:1300px;margin:0 auto}
.f-top>div{padding:30px 4%;display:flex;align-items:center}
.f-top>div:first-child{padding-left:0}.f-top>div:last-child{padding-right:0}
.f-top>div+div{border-left:1px solid rgba(255,255,255,.25)}
.f-top .mid{justify-content:center}
.f-top .mid img{width:110px;animation:spin 18s linear infinite}
.f-top p{font-size:14px;font-weight:500;margin-bottom:10px}
.f-top .socials a{border-color:#fff;width:40px;height:40px}
.f-top .socials svg{fill:#fff}
.f-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:34px;padding:50px 0 40px}
.site-footer h3{font-family:var(--body);color:#fff;font-size:24px;font-weight:500;margin-bottom:26px;position:relative}
.site-footer h3:after{content:"";position:absolute;left:0;bottom:-10px;width:40px;height:2px;background:#fff}
.f-contact li{display:flex;gap:12px;margin-bottom:14px;font-size:13.5px;font-weight:500;line-height:1.6}
.f-contact svg{width:14px;height:14px;fill:#fff;flex:0 0 14px;margin-top:4px}
.f-links li{margin-bottom:8px;font-size:13.5px;font-weight:500}
.f-links a{display:inline-flex;gap:12px;align-items:center;transition:all .3s}
.f-links a:before{content:"›";font-size:16px}
.f-links a:hover{color:var(--pink);transform:translateX(4px)}
.f-map iframe{width:100%;height:170px;border:0}
.f-bottom{border-top:1px solid rgba(255,255,255,.25);padding:18px 0;text-align:center;font-size:13px}
.f-bottom a{font-weight:700}.f-bottom a:hover{color:var(--pink)}
.wa{position:fixed;left:18px;bottom:18px;width:50px;height:50px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;z-index:95;box-shadow:0 6px 18px rgba(0,0,0,.25);animation:wap 2.2s infinite}
.wa svg{width:27px;height:27px;fill:#fff}
@keyframes wap{0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)}70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
.to-top{position:fixed;right:18px;bottom:18px;width:40px;height:40px;border-radius:4px;background:#888;color:#fff;border:0;cursor:pointer;opacity:0;visibility:hidden;transition:.3s;z-index:90;font-size:18px}
.to-top.show{opacity:1;visibility:visible}.to-top:hover{background:var(--pink2)}

/* ---------- Reveal ---------- */
.rv{opacity:0;transition:opacity .9s ease,transform .9s ease}
.rv.up:not(.in){transform:translateY(40px)}.rv.left:not(.in){transform:translateX(-60px)}.rv.right:not(.in){transform:translateX(60px)}.rv.zoomin:not(.in){transform:scale(.88)}
.rv.in{opacity:1}
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none!important}}

/* grid/flex children never wider than their column */
.prow>*,.about-grid>*,.ring-grid>*,.pl>*,.ba-grid>*,.c-card>*,.f-grid>*,.fe-grid>*,.tips>*,.cnt-grid>*,.auth-grid>*,.sar-grid>*,.solve>*,.str-grid>*{min-width:0}
.catcard{width:100%}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .h-right{gap:20px}.menu{gap:16px}
  .tips{grid-template-columns:repeat(2,1fr)}
  .tips .tx.alt{order:0}
  .f-grid{grid-template-columns:1fr 1fr}
  .solve{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
  .nav-wrap{height:70px;width:92%}
  .nav-wrap>nav,.h-right .btn{display:none}
  .logo{left:0;transform:none;top:4px;width:92px;height:92px}
  .h-right{margin-left:auto;gap:10px}
  .socials a{width:32px;height:32px}.socials svg{width:14px;height:14px}
  .burger{display:block}
  .m-menu{display:block;position:fixed;top:70px;left:0;right:0;background:#fff;max-height:0;overflow:hidden;transition:max-height .4s;box-shadow:0 10px 20px rgba(0,0,0,.08);z-index:99}
  .nav-open .m-menu{max-height:480px;padding-top:26px}
  .m-menu a{display:block;padding:12px 5%;border-top:1px solid #f1e1e1;font-weight:500}
  .m-menu a.sub{padding-left:10%;font-size:14px;color:#555}
  .m-menu a.active{color:var(--pink2)}
  .sec{padding:60px 0}
  .about-grid,.prow,.prow.rev,.ring-grid{grid-template-columns:1fr;gap:34px}
  .prow.rev .catcard{order:0}
  .about-img{margin:0 auto}
  .rcol{padding-bottom:0}
  .rcol.l .ri{flex-direction:row;text-align:left}
  .model{max-width:360px;margin:0 auto;order:3}
  .fe-grid{grid-template-columns:1fr;max-width:420px;margin-left:auto;margin-right:auto}
  .cnt-grid{grid-template-columns:1fr 1fr;gap:40px 20px}
  .pl{grid-template-columns:1fr}.pl:nth-child(even) .ph{order:0}
  .pl .ph{min-height:0;aspect-ratio:4/3}
  .ba-grid{grid-template-columns:1fr 1fr}.ba-grid .mid{grid-column:1/-1;grid-row:1}
  .c-card{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr}.f-top>div,.f-top>div:first-child,.f-top>div:last-child{justify-content:center;text-align:center;padding:24px 0}.f-top>div+div{border-left:0;border-top:1px solid rgba(255,255,255,.25)}
  .rv.left:not(.in),.rv.right:not(.in){transform:translateY(40px)}
  .page-banner{height:300px}
}
@media (min-width:981px){.m-menu{display:none}}
@media (max-width:640px){
  body{font-size:14.5px}
  .title{font-size:26px}
  .page-banner{height:220px}.page-banner h1{font-size:28px}
  .h-arrow{width:28px;height:28px;font-size:18px}.h-arrow.prev{left:8px}.h-arrow.next{right:8px}
  .tips{grid-template-columns:1fr 1fr}
  .tips .tx{padding:16px 12px}.tips h3{font-size:14px}.tips p{font-size:12.5px}
  .str-grid{grid-template-columns:1fr 1fr;gap:24px}.str-grid p{font-size:16px}
  .pc-item{flex-basis:calc(50% - 8px);margin-right:16px}
  .catcard{height:260px}
  .auth-grid{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto}
  .cnt .n{font-size:36px}.cnt h3{font-size:15px}.cnt{padding:44px 14px 18px}
  .solve{grid-template-columns:repeat(2,1fr)}
  .sar-grid{grid-template-columns:1fr 1fr;gap:14px}
  .pl .tx{padding:30px 22px}
  .ba-grid{grid-template-columns:1fr 1fr}.ba-grid .mid{padding:24px 20px}
  .c-left{padding:40px 24px}.c-right{padding:30px 20px}
  .fgrid{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr}
  .popup-box{padding:34px 20px 24px}.popup-box .cols{grid-template-columns:1fr;gap:6px}
  .about-grid p{text-align:left}
  .map iframe{height:300px}
}
.c-left li,.f-contact li{overflow-wrap:anywhere}
/* tips: one by one on mobile (image then its text) */
@media (max-width:640px){
  .tips{grid-template-columns:1fr}
  .tips>:nth-child(1){order:1}.tips>:nth-child(2){order:2}.tips>:nth-child(3){order:3}.tips>:nth-child(4){order:4}
  .tips>:nth-child(5){order:6}.tips>:nth-child(6){order:5}.tips>:nth-child(7){order:8}.tips>:nth-child(8){order:7}
  .tips .ph{aspect-ratio:16/10}
  .tips .tx{padding:28px 24px 34px}.tips h3{font-size:18px}.tips p{font-size:14px}
}