:root{--paper:#efede8;--card:#f7f6f2;--ink:#1a1c1f;--mute:#6d6253;--saf:#dd5a12;--mar:#8e1f1a;--gold:#e2b13c;--leaf:#2f6b4f;--line:rgba(26,28,31,.15);
--head:'Yatra One',Georgia,serif;--body:'Figtree',system-ui,sans-serif;--gur:'Noto Sans Gurmukhi',sans-serif;--g:clamp(18px,4vw,64px)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);overflow-x:clip}
a{color:inherit;text-decoration:none}img{max-width:100%}
:focus-visible{outline:2px solid var(--saf);outline-offset:3px}
h1,h2,h3{font-family:var(--head);font-weight:400;line-height:1.08;margin:0}
h2{font-size:clamp(30px,4.2vw,54px)}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--g)}
.band{height:10px;background:repeating-linear-gradient(90deg,var(--saf) 0 28px,var(--mar) 28px 42px,var(--gold) 42px 56px,var(--leaf) 56px 70px)}
.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 26px;border-radius:50px;border:1.5px solid var(--ink);font-weight:600;font-size:16px;cursor:pointer;background:transparent;color:var(--ink);transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.p{background:var(--saf);border-color:var(--saf);color:#fff}.btn.p:hover{background:var(--mar);border-color:var(--mar)}
header{position:fixed;inset:0 0 auto;z-index:50;background:rgba(239,237,232,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
.logo{font-family:var(--head);font-size:21px;display:flex;align-items:center;gap:10px}
.logo i{width:26px;height:26px;border-radius:50%;background:conic-gradient(var(--saf) 0 25%,var(--mar) 0 50%,var(--gold) 0 75%,var(--leaf) 0);box-shadow:inset 0 0 0 6px var(--paper)}
nav{display:flex;gap:30px;font-weight:500;font-size:15px}
nav a:hover{color:var(--saf)}
header .btn{height:40px;font-size:14px;padding:0 18px}
@media(max-width:760px){nav{display:none}}
/* hero */
.scrub{height:420vh;position:relative}
.stick{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--paper)}
.stick::before{content:"";position:absolute;inset:0;background:radial-gradient(520px circle at var(--mx,50%) var(--my,40%),rgba(221,90,18,.2),transparent 70%);pointer-events:none;z-index:1}
canvas{position:absolute;inset:0;width:100%;height:100%}
.intro{position:absolute;z-index:2;top:calc(100px + 4svh);left:0;right:0;text-align:center;padding:0 var(--g)}
.intro h2{font-size:clamp(32px,4.4vw,62px);max-width:18ch;margin:0 auto}
.intro p{max-width:46ch;margin:16px auto 0;color:var(--mute);font-size:clamp(16px,1.5vw,19px)}
.cta{display:flex;gap:12px;justify-content:center;margin-top:22px;flex-wrap:wrap}
.steps{position:absolute;z-index:2;left:0;right:0;bottom:max(20px,3svh);display:flex;justify-content:center;gap:10px;padding:0 var(--g);flex-wrap:wrap}
.steps div{padding:9px 16px;border-radius:50px;border:1px solid var(--line);background:rgba(247,246,242,.8);font-size:14px;color:var(--mute);transition:all .35s}
.steps div b{font-weight:600}
.steps div.on{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:translateY(-4px)}
.hint{position:absolute;z-index:2;right:var(--g);top:50%;font-size:13px;color:var(--mute);writing-mode:vertical-rl;transition:opacity .3s}
@media(max-width:760px){.hint{display:none}.steps div{font-size:12px;padding:7px 12px}}
/* sections */
section.s{padding:clamp(64px,9vw,120px) 0}
.head{max-width:640px;margin-bottom:44px}.head p{color:var(--mute);margin:14px 0 0}
.jaali{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 2 42 22 22 42 2 22Z' fill='none' stroke='%23dd5a12' stroke-opacity='.22'/%3E%3Ccircle cx='22' cy='22' r='3' fill='%23dd5a12' fill-opacity='.22'/%3E%3C/svg%3E");background-color:var(--card)}
.brands{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.card{position:relative;padding:28px 24px 30px;border-radius:20px;background:var(--paper);border:1px solid var(--line);overflow:hidden;min-height:210px}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--x,50%) var(--y,0%),rgba(221,90,18,.22),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover::after{opacity:1}
.card h3{font-size:27px;margin-bottom:10px}.card p{margin:0;color:var(--mute);font-size:15.5px}
.card.b{border-top:5px solid var(--saf)}.card.s2{border-top:5px solid var(--mar)}.card.d{border-top:5px solid var(--gold)}.card.a{border-top:5px solid var(--leaf)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.panel{padding:36px;border-radius:24px;background:var(--ink);color:var(--paper)}
.panel.t{background:var(--mar)}
.panel h3{font-size:36px;margin-bottom:6px}.panel>p{margin:0 0 22px;opacity:.8}
.panel ul{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.panel li{padding:7px 15px;border-radius:50px;border:1px solid rgba(239,237,232,.4);font-size:15px}
.panel .btn{border-color:var(--paper);color:var(--paper)}.panel .btn:hover{background:var(--paper);color:var(--ink)}
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.why h3{font-size:24px;margin-bottom:8px}.why p{margin:0;color:var(--mute)}
.why div{border-top:2px solid var(--saf);padding-top:18px}
/* finder */
.find{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,5vw,80px);align-items:start}
form{display:grid;gap:14px;background:var(--paper);padding:30px;border-radius:24px;border:1px solid var(--line)}
label{display:grid;gap:6px;font-weight:500;font-size:15px}
input,select{height:50px;border-radius:12px;border:1.5px solid var(--line);background:#fbfaf7;padding:0 14px;font:inherit}
input:focus,select:focus{border-color:var(--saf);outline:none}
.info p{margin:0 0 4px}.info a{color:var(--mar);font-weight:600}
footer{background:var(--ink);color:var(--paper);padding:40px 0 30px;font-size:15px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer span{opacity:.7}
@media(max-width:980px){.brands{grid-template-columns:1fr 1fr}.two,.find,.why{grid-template-columns:1fr}}
@media(max-width:520px){.brands{grid-template-columns:1fr}}

[hidden]{display:none!important}
.strip{background:var(--ink);color:var(--paper);font-size:13px;height:34px;transition:margin .35s}.strip .wrap{display:flex;justify-content:space-between;align-items:center;height:34px}
.sm .strip{margin-top:-34px}
header{transition:transform .45s cubic-bezier(.19,1,.22,1)}header.hide{transform:translateY(-100%)}
header .bar{display:flex;align-items:center;justify-content:space-between;height:66px}
nav a{position:relative;padding:4px 0}nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--saf);transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.19,1,.22,1)}nav a:hover::after,nav a.on::after{transform:scaleX(1);transform-origin:left}
.hr{display:flex;align-items:center;gap:12px}
.burger{display:none;width:42px;height:42px;border:1.5px solid var(--ink);border-radius:50%;background:none;position:relative}
.burger s{position:absolute;left:12px;right:12px;height:2px;background:var(--ink);transition:transform .3s}.burger s:first-child{top:16px}.burger s:last-child{top:24px}
.open .burger s:first-child{transform:translateY(4px) rotate(45deg)}.open .burger s:last-child{transform:translateY(-4px) rotate(-45deg)}
.mm{display:none}
@media(max-width:760px){.burger{display:block}.hr .btn{display:none}.open .mm{display:grid;gap:4px;padding:10px var(--g) 20px;border-top:1px solid var(--line)}.mm a{font-family:var(--head);font-size:28px;padding:6px 0}}
/* loader */
#load{position:fixed;inset:0;z-index:200;background:var(--paper);display:grid;place-items:center;transition:transform 1s cubic-bezier(.77,0,.18,1)}
#load::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:repeating-linear-gradient(90deg,var(--saf) 0 28px,var(--mar) 28px 42px,var(--gold) 42px 56px,var(--leaf) 56px 70px)}
#load.done{transform:translateY(-100%)}
.ld{display:grid;justify-items:center;gap:16px}.ld i{width:64px;height:64px;border-radius:50%;background:conic-gradient(var(--saf) 0 25%,var(--mar) 0 50%,var(--gold) 0 75%,var(--leaf) 0);box-shadow:inset 0 0 0 16px var(--paper);animation:spin 1.6s linear infinite}
.ld b{font:400 26px var(--head)}.bar2{width:min(240px,60vw);height:5px;border-radius:5px;background:var(--line);overflow:hidden}.bar2 em{display:block;height:100%;width:0;background:var(--saf)}.ld span{font-size:14px;color:var(--mute)}
@keyframes spin{to{transform:rotate(360deg)}}
/* intro choreography */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}.w i{display:inline-block;font-style:normal;transform:translateY(112%);transition:transform 1s cubic-bezier(.19,1,.22,1) calc(var(--i)*80ms + .15s)}
.go .w i{transform:none}
.js .intro p,.js .cta{opacity:0;transform:translateY(22px);transition:opacity .9s .7s,transform .9s .7s}.js .cta{transition-delay:.9s}.go .intro p,.go .cta{opacity:1;transform:none}
.js canvas{opacity:0;transition:opacity 1.4s .3s}.go canvas{opacity:1}
.js [data-r]{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .9s cubic-bezier(.19,1,.22,1);transition-delay:var(--d,0s)}.js [data-r].vis{opacity:1;transform:none}
section.page{animation:pg .7s cubic-bezier(.19,1,.22,1) both;padding-top:150px;min-height:80vh}@keyframes pg{from{opacity:0;transform:translateY(24px)}}
/* marquee */
.mq{overflow:hidden;background:var(--ink);color:var(--paper);padding:16px 0;white-space:nowrap}.mq.r{background:var(--saf);color:#fff}
.mq div{display:inline-flex;will-change:transform}.mq span{font-family:var(--head);font-size:clamp(26px,3.6vw,46px);padding:0 .5em;display:inline-flex;align-items:center}
.mq span::after{content:"";width:.34em;height:.34em;margin-left:1em;background:var(--gold);transform:rotate(45deg)}
/* products */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pc{display:block;border-radius:20px;background:var(--card);border:1px solid var(--line);overflow:hidden;position:relative;transition:transform .5s cubic-bezier(.19,1,.22,1),border-color .3s}
.pc:hover{transform:translateY(-6px);border-color:var(--saf)}
.pc::after{content:"";position:absolute;inset:0;background:radial-gradient(240px circle at var(--x,50%) var(--y,0%),rgba(221,90,18,.2),transparent 70%);opacity:0;transition:opacity .3s;pointer-events:none}.pc:hover::after{opacity:1}
.im{aspect-ratio:1/1;display:grid;place-items:center;background:var(--paper);overflow:hidden}.im img{height:88%;object-fit:contain;mix-blend-mode:multiply;transition:transform .7s cubic-bezier(.19,1,.22,1)}.pc:hover .im img{transform:scale(1.08) rotate(-2deg)}
.pi{padding:16px 18px 20px}.pi h3{font-size:21px;margin:8px 0 6px}.tag{display:inline-block;font-size:13px;font-weight:600;color:#fff;background:var(--mar);border-radius:50px;padding:2px 11px}.tag.v{background:none;color:var(--mute);border:1px solid var(--line);margin-left:6px}.pi span.go2{font-weight:600;font-size:14px;color:var(--saf)}
.filters{display:grid;gap:14px;margin-bottom:30px}#q{height:50px;border-radius:50px;border:1.5px solid var(--line);background:#fbfaf7;padding:0 20px;font:inherit;max-width:420px}#q:focus{border-color:var(--saf);outline:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{height:38px;padding:0 16px;border-radius:50px;border:1.5px solid var(--line);background:none;font:500 14px var(--body);cursor:pointer;transition:all .25s}.chip:hover{border-color:var(--ink)}.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.crumb{font-size:14px;color:var(--mute);margin-bottom:26px}.crumb a:hover{color:var(--saf)}
.pdp{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.pim{border-radius:28px;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;perspective:900px}.pim img{height:90%;mix-blend-mode:multiply;transition:transform .2s;will-change:transform}
.pdp h1{font-size:clamp(34px,4.6vw,60px);margin:14px 0}.pdp .lead{color:var(--mute);max-width:46ch}
dl{display:grid;grid-template-columns:auto 1fr;margin:26px 0;border-top:1px solid var(--line)}dt,dd{margin:0;padding:12px 0;border-bottom:1px solid var(--line)}dt{color:var(--mute);padding-right:30px}dd{font-weight:600}
.fit{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 14px}.fit input{flex:1;min-width:200px;height:50px;border-radius:50px;border:1.5px solid var(--line);background:#fbfaf7;padding:0 20px;font:inherit}
.rel{margin-top:80px}.rel h2{margin-bottom:26px}
@media(max-width:1000px){.pgrid{grid-template-columns:repeat(2,1fr)}.pdp{grid-template-columns:1fr}}
@media(max-width:480px){.pgrid{gap:12px}.pi{padding:12px}.pi h3{font-size:17px}.tag.v{display:none}}
/* footer */
footer{padding:64px 0 0}footer .wrap.fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:44px}
.fl{font:400 28px var(--head)}footer p{opacity:.72;margin:10px 0}footer h4{font:400 18px var(--head);margin:0 0 12px;color:var(--gold)}footer .fg a{display:block;padding:3px 0;opacity:.85}footer .fg a:hover{color:var(--gold);opacity:1}
footer .wrap.fb{border-top:1px solid rgba(239,237,232,.2);padding-top:18px;padding-bottom:26px;font-size:13px;opacity:.7}
@media(max-width:900px){footer .wrap.fg{grid-template-columns:1fr 1fr}}@media(max-width:520px){footer .wrap.fg{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.tile{display:block;border-radius:20px;background:var(--card);border:1px solid var(--line);padding:18px 18px 22px;transition:transform .5s cubic-bezier(.19,1,.22,1),border-color .3s}
.tile:hover{transform:translateY(-6px);border-color:var(--saf)}
.tile img{width:100%;aspect-ratio:1/1;object-fit:contain;mix-blend-mode:multiply;background:var(--paper);border-radius:14px;transition:transform .6s cubic-bezier(.19,1,.22,1)}.tile:hover img{transform:scale(1.05)}
.tile h3{font-size:24px;margin:14px 0 4px}.tile span{color:var(--mute);font-size:15px}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.how div{background:var(--paper);border-radius:20px;padding:28px;border:1px solid var(--line)}
.how b{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--saf);color:#fff;font:400 20px var(--head);margin-bottom:16px}.how h3{font-size:24px;margin-bottom:8px}.how p{margin:0;color:var(--mute)}
.rv{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px}
.rc{flex:0 0 min(360px,84%);scroll-snap-align:start;background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:26px;display:grid;gap:12px;align-content:start}
.st{color:var(--saf);letter-spacing:2px;font-size:18px}.rc p{margin:0}.rc small{color:var(--mute);font-size:14px}.rc em{font-style:normal;font-size:12px;font-weight:600;background:var(--gold);color:var(--ink);border-radius:50px;padding:2px 10px;justify-self:start}
.faq{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(28px,5vw,80px)}
details{border-bottom:1px solid var(--line);padding:18px 0}summary{font:400 22px var(--head);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--saf);transition:transform .3s}details[open] summary::after{transform:rotate(45deg)}details p{margin:12px 0 0;color:var(--mute);max-width:56ch}
.pol{max-width:820px}.pol h1{font-size:clamp(34px,4.6vw,56px);margin:12px 0 6px}.pol h2{font-size:26px;margin:34px 0 8px}.pol p,.pol li{color:#3b3f44}.pol ul{padding-left:20px}.pol .upd{color:var(--mute);font-size:14px}
.wafab{position:fixed;right:18px;bottom:18px;z-index:60;height:50px;padding:0 22px;border-radius:50px;background:var(--leaf);color:#fff;font-weight:600;display:flex;align-items:center;box-shadow:0 8px 24px rgba(0,0,0,.22);transition:transform .3s}.wafab:hover{transform:translateY(-3px)}
footer .ph{font:400 26px var(--head);color:var(--gold)}footer .fg{margin-bottom:0}
footer .wrap.fg{grid-template-columns:1.4fr .9fr .9fr .9fr 1.3fr}
.fb a{margin-left:18px}footer .wrap.fb{padding-bottom:78px}
@media(max-width:1000px){.tiles{grid-template-columns:repeat(2,1fr)}.how,.faq{grid-template-columns:1fr}footer .wrap.fg{grid-template-columns:1fr 1fr}}
@media(max-width:520px){footer .wrap.fg{grid-template-columns:1fr}.wafab{height:46px;padding:0 18px}}
/* cursor */
.cc,.cc a,.cc button,.cc input,.cc select{cursor:none}
.ring,.dot{position:fixed;left:0;top:0;z-index:99;pointer-events:none;border-radius:50%;display:none}
.cc .ring,.cc .dot{display:block}
.ring{width:40px;height:40px;margin:-20px 0 0 -20px;border:1.5px solid var(--saf);transition:width .3s,height .3s,margin .3s,background .3s}
.ring.hov{width:72px;height:72px;margin:-36px 0 0 -36px;background:rgba(221,90,18,.16)}
.dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;background:var(--saf)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.steps div,.card::after{transition:none}}

/* theme 2: plain, sturdy, parts-counter look */
:root{--paper:#f1f1ee;--card:#fff;--ink:#15171a;--line:rgba(21,23,26,.14);--head:'Barlow Condensed','Arial Narrow',sans-serif;--body:'Barlow',system-ui,sans-serif}
body{font-family:var(--body)}
h1,h2,h3,.logo,.fl,summary,footer h4,.ph,.ld b,.mq span,.how b{font-family:var(--head);font-weight:700;text-transform:uppercase;letter-spacing:.02em}
h1,h2,h3{line-height:1}h2{font-size:clamp(38px,5vw,64px)}
.intro h2{font-size:clamp(40px,5.2vw,76px);line-height:.95;max-width:22ch}.logo{font-size:25px}
.pdp h1,.pol h1{font-size:clamp(40px,5vw,68px)}.card h3,.tile h3,.how h3,.why h3{font-size:28px}.pi h3{font-size:23px}.panel h3{font-size:48px}.pol h2{font-size:30px}
summary{font-size:25px}.fl{font-size:34px}footer h4{font-size:21px}footer .ph{font-size:32px}.mq span{font-size:clamp(30px,4vw,54px)}.dh h3{font-size:30px}.how b{font-size:22px}
.btn{border-radius:4px;text-transform:uppercase;letter-spacing:.07em;font-size:14px;font-weight:600;height:48px}header .btn{height:40px;font-size:13px}
.tag{border-radius:3px;text-transform:uppercase;font-size:12px;letter-spacing:.06em}
.chip,#q,input,select,.fit input,.panel li{border-radius:4px}
.card,.pc,.tile,.how div,.rc,.panel,form,.pim,.tile img,.steps div,.wafab,.im{border-radius:6px}
.jaali{background-image:none;background-color:#fff}
.mq span::after{width:2px;height:.7em;margin-left:1em;background:currentColor;opacity:.45;transform:rotate(18deg)}
.logo i{width:30px;height:30px;border-radius:4px;background:var(--ink);box-shadow:none;display:grid;place-items:center}.logo i::after{content:"AM";color:#fff;font:700 14px var(--head)}
.ld i{width:56px;height:56px;border-radius:50%;background:none;box-shadow:none;border:5px solid var(--line);border-top-color:var(--saf);animation:spin .9s linear infinite}
.how b{border-radius:4px;background:var(--ink)}.band{height:6px}
a.card{display:block;transition:transform .4s cubic-bezier(.19,1,.22,1)}a.card:hover{transform:translateY(-5px)}
.rv{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;overflow:visible}.rc{background:var(--paper);padding:22px}
.rh{display:flex;align-items:center;gap:12px}.av{width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 19px var(--head)}.rh b{display:block;font-weight:600;line-height:1.2}.rh small{display:block}
.pc>a{display:block}.pa{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 18px 18px}.go2{font-weight:600;font-size:14px;color:var(--saf)}.pi{padding-bottom:12px}.go2{white-space:nowrap}.add{white-space:nowrap;padding:0 10px;font-size:12px}
.add{height:38px;padding:0 14px;border:1.5px solid var(--ink);border-radius:4px;background:none;font:600 13px var(--body);text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:background .25s,color .25s}.add:hover{background:var(--ink);color:#fff}.add.ok{background:var(--leaf);border-color:var(--leaf);color:#fff}
.acts{display:flex;gap:10px;flex-wrap:wrap}
.eb{display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1.5px solid var(--ink);border-radius:4px;background:none;font:600 13px var(--body);text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.eb b{min-width:22px;height:22px;border-radius:11px;background:var(--saf);color:#fff;display:grid;place-items:center;font-size:12px;padding:0 6px}
.dr{position:fixed;inset:0;z-index:150;pointer-events:none}.dr::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;transition:opacity .35s}
.dr aside{position:absolute;right:0;top:0;bottom:0;width:min(420px,100%);background:#fff;transform:translateX(100%);transition:transform .45s cubic-bezier(.19,1,.22,1);display:flex;flex-direction:column}
.dr.on{pointer-events:auto}.dr.on::before{opacity:1}.dr.on aside{transform:none}
.dh{display:flex;justify-content:space-between;align-items:center;padding:18px 22px;border-bottom:1px solid var(--line)}.dh button{font-size:28px;background:none;border:0;cursor:pointer}
.dl{flex:1;overflow:auto;padding:8px 22px}.di{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px 0;border-bottom:1px solid var(--line)}.di small{color:var(--mute)}
.qt{display:flex;align-items:center;gap:8px}.qt button{width:30px;height:30px;border:1.5px solid var(--line);border-radius:4px;background:none;cursor:pointer;font-size:18px}
.df{padding:18px 22px;border-top:1px solid var(--line);display:grid;gap:10px}.df input{height:46px;border:1.5px solid var(--line);border-radius:4px;padding:0 12px;font:inherit}.em{color:var(--mute);padding:30px 0}
#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,30px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:4px;z-index:160;opacity:0;transition:all .35s;pointer-events:none;cursor:pointer}#toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.visit{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(24px,5vw,72px);align-items:start}.visit.one{grid-template-columns:1fr;max-width:560px}.visit iframe{width:100%;height:340px;border:0;border-radius:6px}.visit dl{margin:0 0 22px}
@media(max-width:1000px){.rv{grid-template-columns:1fr 1fr}}@media(max-width:760px){.visit{grid-template-columns:1fr}}@media(max-width:600px){.rv{grid-template-columns:1fr}.pa{flex-direction:column;align-items:stretch}}

/* phones and touch */
html{-webkit-tap-highlight-color:transparent}a,button{touch-action:manipulation}
header.open{background:var(--paper)}.dr.on ~ #toast{display:none}body:has(.dr.on){overflow:hidden}.dl{overscroll-behavior:contain}
@media(hover:none){.pc:hover,.tile:hover,a.card:hover,.wafab:hover{transform:none}.pc:hover .im img,.tile:hover img{transform:none}.pc:hover::after,.card:hover::after{opacity:0}nav a:hover::after{transform:scaleX(0)}
.btn:active,.add:active,.chip:active,.pc:active,.tile:active,a.card:active,.eb:active{transform:scale(.97)}}
@media(max-width:760px){
.strip .wrap{justify-content:center}
.logo{font-size:17px;white-space:nowrap;gap:7px;min-width:0}header .bar{gap:8px}.hr{gap:8px;flex:none}.eb{padding:0 10px;font-size:12px}.burger{flex:none}.logo i{width:28px;height:28px}header .bar{height:60px}
.scrub{height:360vh}
.intro{top:calc(96px + 2svh)}.intro h2{font-size:clamp(32px,9.4vw,44px);max-width:20ch}.intro p{font-size:15px;margin-top:10px}.cta{margin-top:14px;gap:8px}.cta .btn{height:44px;padding:0 18px;font-size:13px}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:6px;bottom:max(14px,env(safe-area-inset-bottom));left:14px;right:14px;padding:0}.steps div{font-size:12px;padding:7px 8px;text-align:center;border-radius:4px}.steps div.on{transform:none}
.card{min-height:0}
.rv{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-right:calc(var(--g)*-1);padding-right:var(--g);scrollbar-width:none}.rv::-webkit-scrollbar{display:none}.rc{flex:0 0 82%;scroll-snap-align:start}
.panel{padding:24px}.panel h3{font-size:40px}
.wafab{height:44px;padding:0 16px;font-size:14px;right:14px;bottom:max(14px,env(safe-area-inset-bottom))}
.dr aside{width:100%}section.page{padding-top:124px}
}
@media(max-width:420px){.logo{font-size:15px;gap:6px}.logo i{width:26px;height:26px}.eb{padding:0 8px;gap:6px}}

/* next level */
header{max-width:100%;overflow-x:clip}.logo span{white-space:nowrap}.logo em{font-style:normal}
.pb{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--saf);transform:scaleX(0);transform-origin:left}
.outro{position:absolute;z-index:2;top:calc(100px + 4svh);left:0;right:0;text-align:center;padding:0 var(--g);opacity:0;pointer-events:none}
.outro h2{font-size:clamp(34px,5vw,70px);max-width:18ch;margin:0 auto;line-height:.98}.outro p{color:var(--mute);max-width:44ch;margin:12px auto 0}
.brands{display:block;border-top:2px solid var(--ink)}
a.card.b,a.card.s2,a.card.d,a.card.a{border:0;border-bottom:2px solid var(--ink);border-radius:0;background:none;min-height:0;display:grid;grid-template-columns:1.2fr 1.3fr auto;align-items:center;gap:20px;padding:24px 8px;overflow:hidden;transition:background .4s,color .4s,padding .5s cubic-bezier(.19,1,.22,1)}
a.card h3{font-size:clamp(44px,7vw,104px);margin:0;line-height:.95}a.card p{max-width:36ch;font-size:17px}
a.card::before{content:"→";order:3;font-size:40px;line-height:1;color:var(--saf);transition:transform .45s cubic-bezier(.19,1,.22,1)}
a.card.b:hover,a.card.s2:hover,a.card.d:hover,a.card.a:hover{background:var(--ink);color:var(--paper);padding-left:26px;transform:none}
a.card:hover p{color:rgba(239,237,232,.75)}a.card:hover::before{transform:translateX(10px)}a.card::after{display:none}
.cta2{background:var(--saf);color:#fff;padding:clamp(56px,8vw,110px) 0}.cta2 h2{font-size:clamp(46px,8.5vw,128px);line-height:.92}.cta2 p{max-width:46ch;font-size:19px;margin:16px 0 26px;opacity:.92}
.cta2 .btn{border-color:#fff;color:#fff}.cta2 .btn.p{background:#fff;color:var(--saf)}.cta2 .btn:hover,.cta2 .btn.p:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.mbar{display:none}
@media(max-width:760px){
.logo em{display:none}.eb{display:none}
a.card.b,a.card.s2,a.card.d,a.card.a{grid-template-columns:1fr auto;gap:6px 12px;padding:20px 4px}a.card h3{font-size:clamp(40px,13vw,64px)}a.card p{grid-column:1/-1;font-size:15px}a.card::before{font-size:30px}
.outro{top:calc(96px + 2svh)}.outro h2{font-size:clamp(30px,8.6vw,40px)}.outro p{font-size:15px}
.steps{bottom:calc(66px + env(safe-area-inset-bottom))}
.mbar{display:grid;grid-template-columns:1fr 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ink);padding-bottom:env(safe-area-inset-bottom)}
.mbar a,.mbar button{height:54px;display:flex;align-items:center;justify-content:center;gap:6px;color:#fff;background:none;border:0;border-right:1px solid rgba(255,255,255,.14);font:600 13px var(--body);text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
.mbar #mb2{background:var(--leaf)}.mbar b{background:var(--saf);border-radius:10px;padding:0 7px;font-size:12px;line-height:20px}
.wafab{display:none}body{padding-bottom:calc(54px + env(safe-area-inset-bottom))}#toast{bottom:76px}
}

/* grid items may shrink, so nothing can push the page wider than the phone */
.tiles,.pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}.tile,.pc,.card,.rc,.how div,.why div{min-width:0}.tile h3,.pi h3{overflow-wrap:anywhere}
@media(max-width:1000px){.tiles,.pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.how,.faq,.two,.find,.why,.pdp{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.tile h3{font-size:clamp(20px,6vw,26px)}.tile{padding:12px 12px 16px}}

.outro h2{font-size:clamp(30px,3.8vw,54px);max-width:30ch}.outro p{display:none}.tile h3,.pi h3{overflow-wrap:break-word}
@media(max-width:760px){.outro p{display:block}.outro h2{max-width:18ch}.tile h3{font-size:clamp(17px,5.2vw,22px)}a.card h3{font-size:clamp(36px,11vw,56px)}}
.tile img{background:none}


/* ============ v3: hero slideshow, refined motion ============ */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
::selection{background:var(--saf);color:#fff}

.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--paper);isolation:isolate;--iv:6000ms}
.hs{position:absolute;inset:0}
.sl{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity 1.4s cubic-bezier(.4,0,.2,1);--ac:#dd5a12}
.sl.on,.sl.out{visibility:visible}
.sl.on{opacity:1}
.sl-bg{position:absolute;inset:0;background:
 radial-gradient(70vmax 70vmax at 80% 52%,color-mix(in srgb,var(--ac) 20%,transparent),transparent 64%),
 linear-gradient(112deg,var(--paper) 0 42%,color-mix(in srgb,var(--ac) 9%,var(--paper)) 100%)}
.sl-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(21,23,26,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(21,23,26,.07) 1px,transparent 1px);background-size:64px 64px;
 -webkit-mask-image:radial-gradient(60% 75% at 76% 52%,#000,transparent 78%);mask-image:radial-gradient(60% 75% at 76% 52%,#000,transparent 78%);
 transform:scale(1.08);transition:transform 7s cubic-bezier(.19,1,.22,1)}
.sl.on .sl-grid{transform:none}
.sl-circle{position:absolute;right:calc(var(--g) + 2vw);top:54%;width:min(46vw,66vh);aspect-ratio:1;border-radius:50%;
 border:2px solid var(--ac);opacity:0;translate:calc(var(--px,0)*-22px) calc(-50% + var(--py,0)*-14px);transform:scale(.82) rotate(-40deg);
 transition:transform 1.8s cubic-bezier(.19,1,.22,1) .1s,opacity 1.2s .1s}
.sl-circle::after{content:"";position:absolute;inset:11%;border-radius:50%;border:1px dashed color-mix(in srgb,var(--ac) 60%,transparent)}
.sl.on .sl-circle,.sl.out .sl-circle{transform:none;opacity:.55}
.sl.out .sl-circle{transition:none}

.sl-in{position:relative;height:100%;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,64px);padding-top:116px;padding-bottom:96px}
.sl-tx h2{font-size:clamp(44px,5.4vw,92px);line-height:.94;max-width:15ch;text-wrap:balance}
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding:.04em .02em .1em;margin:-.04em -.02em -.1em}
.sw i{display:inline-block;font-style:normal;transform:translateY(118%) rotate(4deg);transform-origin:0 100%;transition:transform 1s cubic-bezier(.19,1,.22,1)}
.sl.on .sw i{transform:none;transition-delay:calc(.3s + var(--i)*75ms)}
.sl.out .sw i{transform:none;transition:none}
.sl .sub{max-width:44ch;margin:22px 0 0;color:var(--mute);font-size:clamp(16px,1.5vw,20px);opacity:0;transform:translateY(18px);transition:opacity .9s,transform 1s cubic-bezier(.19,1,.22,1)}
.sl-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px;opacity:0;transform:translateY(18px);transition:opacity .9s,transform 1s cubic-bezier(.19,1,.22,1)}
.sl.on .sub{opacity:1;transform:none;transition-delay:.75s}
.sl.on .sl-cta{opacity:1;transform:none;transition-delay:.95s}
.sl.out .sub,.sl.out .sl-cta{opacity:1;transform:none;transition:none}
.sl .btn.p{background:var(--ac);border-color:var(--ac)}
.sl .btn.p:hover{background:var(--ink);border-color:var(--ink)}

.sl-im{height:100%;display:grid;place-items:center;min-width:0}
.sl-im>div{translate:calc(var(--px,0)*16px) calc(var(--py,0)*10px);transition:translate .5s cubic-bezier(.19,1,.22,1);mix-blend-mode:multiply}
.sl-im img{display:block;max-height:min(66vh,620px);max-width:100%;width:auto;height:auto;
 opacity:0;transform:translateY(40px) scale(1.1) rotate(-4deg);transition:transform 1.8s cubic-bezier(.19,1,.22,1) .15s,opacity 1.1s .15s}
.sl.on .sl-im img{opacity:1;transform:none;animation:flo 7s ease-in-out 2s infinite}
.sl.out .sl-im img{opacity:1;transform:none;transition:none;animation:none}
@keyframes flo{50%{transform:translateY(-12px) rotate(-1.2deg)}}

/* photo slides: full-bleed picture with slow push-in */
.sl.photo .sl-bg{background:#0d0f11}
.sl-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.14);transform-origin:70% 50%}
.sl.on .sl-photo{animation:kb calc(var(--iv) + 2200ms) cubic-bezier(.2,.6,.2,1) both}
.sl.out .sl-photo{transform:scale(1)}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1)}}
.sl.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,15,17,.82) 0,rgba(13,15,17,.5) 48%,rgba(13,15,17,.12) 100%),linear-gradient(0deg,rgba(13,15,17,.55),transparent 38%)}
.sl.photo .sl-in{grid-template-columns:minmax(0,1fr);z-index:2}
.sl.photo .sl-tx{color:#fff}.sl.photo .sub{color:rgba(255,255,255,.82)}
.sl.photo .btn:not(.p){border-color:#fff;color:#fff}.sl.photo .btn:not(.p):hover{background:#fff;color:var(--ink)}

/* controls */
.hui{position:absolute;z-index:5;left:0;right:0;bottom:max(24px,4svh)}
.hrow{display:flex;align-items:center;justify-content:flex-start;gap:clamp(16px,3vw,36px)}
.hdots{display:flex;gap:10px}
.hd{width:clamp(34px,6vw,64px);height:18px;padding:0;border:0;background:none;cursor:pointer;position:relative}
.hd::before{content:"";position:absolute;left:0;right:0;top:7px;height:4px;border-radius:2px;background:rgba(21,23,26,.18)}
.hd i{position:absolute;left:0;right:0;top:7px;height:4px;border-radius:2px;background:var(--ink);transform:scaleX(0);transform-origin:left}
@keyframes fillbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hctl{display:flex;align-items:center;gap:8px}
.hcount{font:600 14px var(--body);font-variant-numeric:tabular-nums;color:var(--mute);margin-right:8px;min-width:44px;text-align:right}
.hctl button{width:44px;height:44px;border-radius:4px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:400 26px/1 var(--body);cursor:pointer;display:grid;place-items:center;position:relative;transition:background .25s,color .25s}
.hctl button:hover{background:var(--ink);color:var(--paper)}
#hpause s{position:absolute;top:14px;bottom:14px;width:3px;background:currentColor}
#hpause s:first-child{left:15px}#hpause s:last-child{right:15px}
.hero.paused #hpause s:last-child{display:none}
.hero.paused #hpause s:first-child{left:17px;top:13px;bottom:auto;width:0;height:0;background:none;border:9px solid transparent;border-left:14px solid currentColor;border-right:0}
.hero.dark .hd::before{background:rgba(255,255,255,.3)}.hero.dark .hd i{background:#fff}
.hero.dark .hcount{color:rgba(255,255,255,.75)}
.hero.dark .hctl button{border-color:#fff;color:#fff}.hero.dark .hctl button:hover{background:#fff;color:var(--ink)}
.hcue{position:absolute;z-index:4;right:var(--g);top:50%;writing-mode:vertical-rl;font-size:13px;color:var(--mute);display:flex;align-items:center;gap:10px;letter-spacing:.04em}
.hcue i{width:1px;height:46px;background:currentColor;opacity:.5;transform-origin:top;animation:cue 2.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero.dark .hcue{color:rgba(255,255,255,.7)}
@media(max-width:900px){
 .hero{min-height:560px}
 .sl-in{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-content:start;padding-top:118px;padding-bottom:86px;gap:8px}
 .sl-tx h2{font-size:clamp(38px,11.5vw,60px)}
 .sl .sub{margin-top:14px;font-size:15px}
 .sl-cta{margin-top:18px;gap:8px}.sl-cta .btn{height:44px;padding:0 16px;font-size:13px}
 .sl-im img{max-height:32vh}
 .sl-circle{width:78vw;right:-14vw;top:70%}
 .hcue{display:none}.hcount{display:none}
}
@media(max-width:760px){.hui{bottom:max(76px,calc(66px + env(safe-area-inset-bottom)))}}

/* headings reveal word by word when scrolled into view */
.js .hrv .sw i{transform:translateY(118%)}
.js .hrv.vis .sw i{transform:none;transition-delay:calc(var(--i)*60ms)}
.head h2,.cta2 h2{text-wrap:balance}

/* product extras */
.pr{font:700 22px var(--head);color:var(--saf);letter-spacing:.02em}
.im{position:relative}
.oosb{position:absolute;left:10px;top:10px;background:var(--ink);color:#fff;font:600 12px var(--body);text-transform:uppercase;letter-spacing:.06em;padding:4px 9px;border-radius:3px}
.pc.oos .im img{opacity:.55}
.pc .pi h3{transition:color .3s}.pc:hover .pi h3{color:var(--saf)}
.go2{position:relative}.go2::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s cubic-bezier(.19,1,.22,1)}
.pc:hover .go2::after{transform:scaleX(1);transform-origin:left}
.tile img{transition:transform .8s cubic-bezier(.19,1,.22,1)}
.btn{transition:background .3s,color .3s,border-color .3s,transform .3s}
.head h2{position:relative}
@media(prefers-reduced-motion:reduce){
 .sl{transition-duration:1s!important}
 .sl *{transition-duration:.01ms!important;animation:none!important}
 .sl.on .sl-photo{transform:none}
 .js .hrv .sw i{transform:none}
}

/* logo: AMC */
.logo i{width:auto;min-width:30px;padding:0 6px}
.logo i::after{content:"AMC";font-size:13px;letter-spacing:.03em}
/* sections that used to blend together */
#faq{background:var(--paper)}
#find{background:var(--ink);color:var(--paper);position:relative}
#find::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--saf)}
#find .head h2,#find h2{color:#fff}
#find .head p{color:rgba(241,241,238,.74)}
#find form{background:var(--paper);color:var(--ink);border-color:transparent;box-shadow:0 24px 60px rgba(0,0,0,.35)}

/* ---- added for launch: cookie banner, thank-you and not-found pages ---- */
.cb{position:fixed;left:16px;bottom:16px;right:16px;max-width:540px;z-index:180;background:var(--ink);color:#fff;padding:18px 20px;border-radius:6px;box-shadow:0 12px 40px rgba(0,0,0,.35);font-size:15px;line-height:1.5}
.cb p{margin:0 0 12px}.cb a{text-decoration:underline}
.cb .r{display:flex;gap:10px;flex-wrap:wrap}
.cb .btn{color:#fff;border-color:rgba(255,255,255,.5)}
.cs{background:none;border:0;color:inherit;font:inherit;text-decoration:underline;cursor:pointer;padding:0;margin-left:14px}
.pol .acts{margin-top:26px;display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:760px){.cb{bottom:70px}}

/* ---- brand hero (top of the home page) ---- */
.bh{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(128px,17vh,176px) 0 clamp(36px,6vh,64px);background:var(--paper);overflow:hidden;isolation:isolate}
.bh-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(55% 65% at 88% 28%,rgba(221,90,18,.16),transparent 70%),linear-gradient(var(--line) 1px,transparent 1px) 0 0/72px 72px,linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/72px 72px;-webkit-mask-image:radial-gradient(85% 85% at 75% 35%,#000 20%,transparent 75%);mask-image:radial-gradient(85% 85% at 75% 35%,#000 20%,transparent 75%)}
.bh .wrap.bh-in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(32px,5vw,88px);align-items:center;height:auto;justify-content:normal}
.bh .wrap:not(.bh-in){display:block;height:auto}
.bh-eb{display:flex;align-items:center;gap:14px;margin:0 0 22px;font:600 14px var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--saf)}
.bh-eb::before{content:"";width:40px;height:2px;background:var(--saf)}
.bh h1{font-size:clamp(42px,5vw,80px);line-height:.95;letter-spacing:.005em;text-wrap:balance;margin:0}
.bh-sub{max-width:54ch;margin:26px 0 0;font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--mute)}
.bh-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.bh-pn{position:relative;background:var(--ink);color:var(--paper);border-radius:6px;padding:clamp(26px,3vw,44px);box-shadow:0 30px 80px rgba(21,23,26,.22);overflow:hidden}
.bh-pn::before{content:"";position:absolute;left:0;right:0;top:0;height:8px;background:repeating-linear-gradient(90deg,var(--saf) 0 28px,var(--mar) 28px 42px,var(--gold) 42px 56px,var(--leaf) 56px 70px)}
.bh-pn-h{display:flex;align-items:center;gap:16px;padding-top:8px}
.bh-mk{display:grid;place-items:center;flex:none;min-width:52px;height:52px;padding:0 8px;border-radius:4px;background:var(--saf);color:#fff;font:700 20px var(--head);font-style:normal;letter-spacing:.04em}
.bh-pn-h b{display:block;font:700 clamp(22px,2.2vw,30px) var(--head);text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
.bh-pn-h span{display:block;margin-top:4px;font-size:14px;color:rgba(255,255,255,.62)}
.bh-lab{margin:34px 0 10px;font:600 12px var(--body);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.bh-br{list-style:none;margin:0;padding:0}
.bh-br li{border-top:1px solid rgba(255,255,255,.14)}
.bh-br li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.bh-br a{display:flex;align-items:center;gap:18px;padding:14px 0;color:var(--paper);transition:padding .3s,color .3s}
.bh-br a span{font:500 13px var(--body);color:var(--saf);min-width:22px}
.bh-br a b{flex:1;font:700 clamp(28px,3.1vw,44px) var(--head);text-transform:uppercase;letter-spacing:.015em;line-height:1.05}
.bh-br a em{font-style:normal;font-size:22px;opacity:0;transform:translateX(-8px);transition:opacity .3s,transform .3s}
.bh-br a:hover,.bh-br a:focus-visible{padding-left:10px;color:var(--gold)}
.bh-br a:hover em,.bh-br a:focus-visible em{opacity:1;transform:none}
.bh-pn-f{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font:600 12px var(--body);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.bh-pn-f span+span::before{content:"";display:inline-block;width:5px;height:5px;margin-right:22px;border-radius:50%;background:var(--saf);vertical-align:middle}
.bh-ph{position:relative;margin:0;border-radius:6px;overflow:hidden;aspect-ratio:4/5;background:var(--ink);box-shadow:0 30px 80px rgba(21,23,26,.22)}
.bh-ph img{width:100%;height:100%;object-fit:cover;display:block}
.bh-ph figcaption{position:absolute;left:0;right:0;bottom:0;padding:48px 26px 22px;color:#fff;background:linear-gradient(transparent,rgba(21,23,26,.85))}
.bh-ph figcaption b{display:block;font:700 28px var(--head);text-transform:uppercase;letter-spacing:.03em}
.bh-ph figcaption span{font-size:14px;opacity:.8}
.bh-pts{list-style:none;margin:clamp(36px,7vh,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);border-top:1.5px solid var(--ink)}
.bh-pts li{padding:22px 24px 0 0}
.bh-pts li+li{padding-left:24px;border-left:1px solid var(--line)}
.bh-pts b{display:block;margin-bottom:6px;font:700 clamp(19px,1.7vw,23px) var(--head);text-transform:uppercase;letter-spacing:.03em}
.bh-pts span{display:block;font-size:15px;line-height:1.5;color:var(--mute)}
.js .bh .bhr{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i)*.09s + .15s)}
.go .bh .bhr{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .bh .bhr{opacity:1;transform:none;transition:none}}
@media(max-width:980px){.bh{min-height:0;padding-top:118px}.bh .wrap.bh-in{grid-template-columns:1fr;gap:34px}.bh-pts{grid-template-columns:repeat(2,1fr)}.bh-pts li:nth-child(3){padding-left:0;border-left:0}.bh-pts li:nth-child(n+3){margin-top:22px}.bh-ph{aspect-ratio:16/10}}
@media(max-width:560px){.bh h1{font-size:clamp(42px,13vw,60px)}.bh-cta .btn{flex:1 1 100%}.bh-pts{grid-template-columns:1fr}.bh-pts li,.bh-pts li+li{padding:16px 0 0;border-left:0}.bh-pts li:nth-child(n+2){margin-top:0}.bh-br a em{opacity:1;transform:none}}

/* WhatsApp button: round icon, bottom right, on every screen size */
.wafab{width:58px;height:58px;padding:0;border-radius:50%;justify-content:center;background:#25D366;box-shadow:0 8px 24px rgba(0,0,0,.25);right:18px;bottom:max(18px,env(safe-area-inset-bottom))}
.wafab svg{width:32px;height:32px;fill:#fff;display:block}
.wafab::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;animation:wap 2.4s ease-out infinite;pointer-events:none}
@keyframes wap{0%{transform:scale(1);opacity:.65}100%{transform:scale(1.55);opacity:0}}
@media(max-width:760px){.wafab{display:flex;width:52px;height:52px;right:14px;bottom:calc(66px + env(safe-area-inset-bottom))}.wafab svg{width:28px;height:28px}}
@media(prefers-reduced-motion:reduce){.wafab::before{display:none}}


/* ================= v4: colour, announcement bar, new header and hero, logos, reviews form ================= */
:root{--steel:#dde8ef;--slate:#22313f;--sun:#ffe6d1;--honey:#f8e8b8}

/* announcement bar: each line fades in, then the next one takes over */
.strip{background:var(--saf);color:#fff;height:36px}
.strip .wrap{height:36px;gap:18px}
.sm .strip{margin-top:-36px}
.ann{position:relative;flex:1;height:36px;min-width:0}
.ann span{position:absolute;left:0;right:0;top:0;height:36px;line-height:36px;display:block;font:600 13px/36px var(--body);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(10px);transition:opacity .8s ease,transform .8s cubic-bezier(.19,1,.22,1)}
.ann span.on{opacity:1;transform:none}
.ann span.off{opacity:0;transform:translateY(-10px)}
.ann span::before{content:"";display:inline-block;width:7px;height:7px;margin-right:12px;background:var(--ink);transform:rotate(45deg);vertical-align:1px}
.strip #tel0{font:700 13px var(--body);letter-spacing:.05em;white-space:nowrap}
.strip #tel0:hover{text-decoration:underline}

/* header: dark, so it meets the dark hero without a seam */
header{background:rgba(21,23,26,.96);border-bottom:1px solid rgba(255,255,255,.1);color:#fff}
header .wrap.bar,header .bar{height:72px}
.logo{color:#fff;gap:13px}
.logo i{background:var(--saf);width:auto;min-width:48px;height:42px;border-radius:4px;padding:0 9px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.22)}
.logo i::after{font-size:15px}
.logo span{display:grid;line-height:1;font-size:25px}
.logo em{display:block;margin-top:5px;font:600 10px var(--body);letter-spacing:.34em;color:var(--gold);text-transform:uppercase}
nav{color:#fff}nav a:hover,nav a.on{color:var(--gold)}nav a::after{background:var(--saf)}
header .btn{color:#fff;border-color:rgba(255,255,255,.55)}header .btn:hover{background:#fff;color:var(--ink);border-color:#fff}
header .btn.p{background:var(--saf);border-color:var(--saf);color:#fff}header .btn.p:hover{background:#fff;color:var(--saf);border-color:#fff}
.eb{color:#fff;border-color:rgba(255,255,255,.55)}.eb:hover{background:#fff;color:var(--ink)}
.burger{border-color:#fff}.burger s{background:#fff}
header.open{background:var(--ink)}.mm a{color:#fff}.open .mm{border-top:1px solid rgba(255,255,255,.14)}
.pb{background:var(--gold);height:3px}

/* hero: dark workshop wall with a slowly turning brake disc */
.bh{background:#15171a;color:#fff;padding-top:clamp(150px,19vh,200px)}
.bh-bg{-webkit-mask-image:none;mask-image:none;background:radial-gradient(60% 70% at 86% 30%,rgba(221,90,18,.34),transparent 70%),radial-gradient(45% 55% at 0% 100%,rgba(142,31,26,.4),transparent 70%),linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px) 0 0/72px 72px,linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px) 0 0/72px 72px}
.rotor{position:absolute;z-index:-1;right:-9vw;top:50%;width:min(76vw,860px);height:auto;color:var(--saf);opacity:.3;translate:0 -50%;animation:rot 140s linear infinite;pointer-events:none}
@keyframes rot{to{transform:rotate(360deg)}}
.bh-eb{color:var(--gold)}.bh-eb::before{background:var(--gold)}
.bh h1{color:#fff;font-size:clamp(42px,4.5vw,78px);line-height:.96}
.bh{padding-bottom:clamp(28px,5vh,52px)}
.bh-sub{margin-top:20px}.bh-cta{margin-top:26px}.bh-pts{margin-top:clamp(28px,5vh,52px)}
.bh-sub{color:rgba(255,255,255,.78)}
.bh .btn:not(.p){border-color:#fff;color:#fff}.bh .btn:not(.p):hover{background:#fff;color:var(--ink)}
.bh .btn.p:hover{background:#fff;color:var(--saf);border-color:#fff}
.bh-pn{background:#fff;color:var(--ink);box-shadow:0 34px 90px rgba(0,0,0,.5)}
.bh-pn-h b{color:var(--ink)}.bh-pn-h span{color:var(--mute)}
.bh-lab{color:var(--mute);margin:26px 0 12px}
.bh-lg{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bh-lg a{display:grid;gap:10px;justify-items:center;align-content:start;padding:16px 12px 14px;border:1.5px solid var(--line);border-radius:6px;background:var(--paper);transition:border-color .25s,background .25s,transform .35s cubic-bezier(.19,1,.22,1)}
.bh-lg a:hover,.bh-lg a:focus-visible{border-color:var(--saf);background:#fff;transform:translateY(-3px)}
.bh-lg b{font:700 17px var(--head);text-transform:uppercase;letter-spacing:.04em;line-height:1;text-align:center}
.lgb{display:flex;align-items:center;justify-content:center;width:100%;height:56px}
.lgb img,.lg img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.mono{display:grid;place-items:center;width:52px;height:52px;border-radius:6px;background:var(--c,#dd5a12);color:#fff;font:700 28px var(--head);font-style:normal}
.bh-pn-f{color:var(--mute)}
.bh-pts{border-top:1.5px solid rgba(255,255,255,.3)}
.bh-pts li+li{border-left-color:rgba(255,255,255,.14)}
.bh-pts b{color:#fff}.bh-pts span{color:rgba(255,255,255,.68)}

/* brand rows with logos, on a dark band */
section[data-sec=brands]{background-color:#15171a;color:#fff;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:56px 56px}
section[data-sec=brands] .head p{color:rgba(255,255,255,.72)}
section[data-sec=brands] .brands{border-top:3px solid var(--saf)}
section[data-sec=brands] a.card{color:#fff;border-bottom:1px solid rgba(255,255,255,.18);grid-template-columns:128px minmax(0,1.2fr) minmax(0,1.2fr) auto;gap:clamp(14px,2.4vw,36px);padding:22px 10px}
section[data-sec=brands] a.card p{color:rgba(255,255,255,.7)}
section[data-sec=brands] a.card::before{color:var(--gold)}
section[data-sec=brands] a.card:hover{background:var(--saf);color:#fff;padding-left:24px}
section[data-sec=brands] a.card:hover p,section[data-sec=brands] a.card:hover::before{color:#fff}
.lg{display:grid;place-items:center;width:128px;height:82px;padding:10px;background:#fff;border-radius:6px}

/* a different colour for each band, so the page never feels like one white sheet */
section[data-sec=shop]{background:#f1f1ee}
section[data-sec=popular]{background:#fff}
section[data-sec=vehicles]{background:#f1f1ee}
section[data-sec=vehicles] .panel{border:0}
section[data-sec=how]{background:#fff}
section[data-sec=how] .how div{background:#f1f1ee;border:1px solid var(--line)}
section[data-sec=why]{background:#f1f1ee}
section[data-sec=why] .why div{border-top:2px solid var(--saf)}
section[data-sec=reviews]{background:#fff}
section[data-sec=reviews] .rc{background:#f1f1ee}
#faq{background:#f1f1ee}
#visit{background:#fff}
#catalog,#pdp,#policy,#thanks,#nf{background:#f1f1ee}
.pim.jaali{background:#fff}

.pmore{display:flex;gap:12px;flex-wrap:wrap;margin:34px 0 0}

/* write-a-review window */
.rvm{position:fixed;inset:0;z-index:170;background:rgba(21,23,26,.62);display:grid;place-items:center;padding:16px;animation:rvf .3s ease both}
@keyframes rvf{from{opacity:0}}
.rvb{position:relative;width:min(520px,100%);max-height:92svh;overflow:auto;background:#fff;border-radius:6px;padding:30px 28px 28px;border-top:6px solid var(--saf)}
.rvb h3{font-size:36px;margin:0 0 6px}.rvl{margin:0 0 18px;color:var(--mute)}
.rvx{position:absolute;right:10px;top:12px;width:42px;height:42px;border:0;background:none;font-size:32px;line-height:1;cursor:pointer}
.rvb form{padding:0;border:0;background:none;border-radius:0}
.rvb textarea{border:1.5px solid var(--line);border-radius:4px;padding:10px 14px;font:inherit;background:#fbfaf7;resize:vertical}
.rvb textarea:focus{border-color:var(--saf);outline:none}
.rvs{display:flex;gap:2px;margin-bottom:2px}
.rvs button{border:0;background:none;font-size:36px;line-height:1;color:#cfcac0;cursor:pointer;padding:2px 3px;transition:color .2s,transform .2s}.rvs button.on{color:var(--saf)}.rvs button:hover{transform:scale(1.12)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.rve{color:var(--mar);margin:0;min-height:1.3em;font-weight:600}
.ring,.dot{z-index:300}.cc textarea{cursor:none}

@media(max-width:980px){.rotor{right:-30vw;width:110vw;opacity:.22}}
@media(max-width:760px){
 .strip #tel0{display:none}.ann span{text-align:center;font-size:12px;letter-spacing:.03em}
 header .wrap.bar,header .bar{height:62px}
 .logo i{min-width:42px;height:36px}.logo span{font-size:20px}.logo em{display:none}
 .bh-lg{gap:8px}.lgb{height:48px}
 section[data-sec=brands] a.card{grid-template-columns:88px minmax(0,1fr) auto;grid-template-rows:auto auto;gap:6px 14px;padding:18px 4px}
 section[data-sec=brands] a.card .lg{grid-area:1/1;width:88px;height:62px}
 section[data-sec=brands] a.card h3{grid-area:1/2;font-size:clamp(30px,9vw,44px)}
 section[data-sec=brands] a.card::before{grid-area:1/3;order:0}
 section[data-sec=brands] a.card p{grid-area:2/1/3/-1}
 .pmore .btn{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){.rotor{animation:none}.ann span{transition:none}}
section[data-sec=brands] a.card h3{font-size:clamp(38px,5.4vw,80px);overflow-wrap:anywhere}

/* ================= v5: real logo, calmer hero, product page, contact page ================= */
/* loader */
.ld i{display:none}
.ldl{width:min(300px,70vw);height:auto;display:block}
.ld{gap:22px}
/* header logo: the real mark on a white tile */
.logo i{display:none}
.logo img.lm{height:44px;width:auto;display:block;background:#fff;border-radius:6px;padding:3px 7px}
.flg{display:block;width:170px;height:auto;background:#fff;border-radius:8px;padding:8px;margin-bottom:16px}
/* hero: flat and clean, no grid, no glow, no spinning disc */
.bh{min-height:0;background:#15171a;padding-top:clamp(132px,16vh,172px)}
.bh-bg,.rotor{display:none}
.bh::after{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;background:repeating-linear-gradient(90deg,var(--saf) 0 28px,var(--mar) 28px 42px,var(--gold) 42px 56px,var(--leaf) 56px 70px)}
.bh{padding-bottom:clamp(40px,6vh,64px)}
.bh-pn{box-shadow:0 20px 50px rgba(0,0,0,.35)}
.bh-pn-h img.bh-lm{height:50px;width:auto;flex:none;border-radius:4px}
.lgb{height:64px}
.lgb img{max-height:60px}
/* product page */
.pbl{height:36px;width:auto;max-width:130px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px 10px;margin:0 10px 10px 0;vertical-align:middle}
.ptr{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:9px}
.ptr li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.ptr li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--saf) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}
.enq{display:grid;gap:12px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px}
.pdp .enq{margin-top:22px}
.enq h3{margin:0;font-size:28px}
.enq .g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.enq textarea{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font:inherit;background:#fbfaf7;resize:vertical;min-height:90px}
.enq textarea:focus{border-color:var(--saf);outline:none}
.enq .acts{margin-top:2px}
.rve.ok{color:var(--leaf)}
.pdp .acts{margin-top:14px}
.pinfo{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:56px}
.pinfo>div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px}
.pinfo h3{font-size:26px;margin:0 0 10px}
.pinfo p{margin:0;color:var(--mute)}.pinfo a{color:var(--mar);font-weight:600}
.pinfo ol{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--mute)}
/* contact page */
.ctg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:30px 0}
.ctc{display:grid;gap:6px;align-content:start;background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px;transition:border-color .25s,transform .35s cubic-bezier(.19,1,.22,1)}
.ctc:hover{border-color:var(--saf);transform:translateY(-3px)}
.ctc svg{width:34px;height:34px;color:var(--saf);margin-bottom:6px}
.ctc b{font:700 28px var(--head);text-transform:uppercase;letter-spacing:.02em}
.ctc span{font-weight:600;overflow-wrap:anywhere}.ctc small{color:var(--mute)}
.ctw{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:start}
.ctv{background:#15171a;color:#fff;border-radius:10px;padding:26px}
.ctv h3{margin:0 0 14px;font-size:28px}
.ctv dt{color:var(--gold);font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-top:14px}
.ctv dd{margin:4px 0 0}
.ctv .btn{margin-top:20px;color:#fff;border-color:#fff}.ctv .btn:hover{background:#fff;color:var(--ink)}
@media(max-width:1000px){.pinfo,.ctg,.ctw{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.logo img.lm{height:36px;padding:2px 5px}.enq .g2{grid-template-columns:1fr}.enq .acts .btn{flex:1 1 100%}.bh-pn-h img.bh-lm{height:42px}}
#load{background:#fff}
.lgb img{mix-blend-mode:multiply}

/* part finder with product search */
.fl2{display:grid;gap:26px;align-content:start}
.fsl{font:600 13px var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
#fs{width:100%;margin-top:8px}
#find .chips{margin:14px 0 0}
#find .chip{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.3)}
#find .chip:hover{border-color:#fff}
#find .chip.on{background:var(--saf);border-color:var(--saf);color:#fff}
.fres{display:grid;gap:8px;margin-top:16px}
.fri{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.fri img{width:56px;height:56px;object-fit:cover;border-radius:6px;background:var(--paper)}
.fri b{display:block;font-weight:600;line-height:1.25}.fri small{color:rgba(255,255,255,.65)}
.fri .btn{min-height:40px;padding:0 16px;color:#fff;border-color:rgba(255,255,255,.55)}.fri .btn:hover{background:var(--saf);border-color:var(--saf)}
.fmore{color:var(--gold);font-weight:600;padding:6px 2px}.fnone{color:rgba(255,255,255,.7);margin:6px 0 0}
.fsel{display:grid;grid-template-columns:48px minmax(0,1fr) 36px;gap:12px;align-items:center;padding:10px 12px;border-radius:8px;background:#fff;border:1.5px solid var(--saf)}
.fsel[hidden]{display:none}
.fsel img{width:48px;height:48px;object-fit:cover;border-radius:6px;background:var(--paper)}
.fsel small{display:block;color:var(--mute);font-size:12px;text-transform:uppercase;letter-spacing:.1em}.fsel b{font-weight:600}
.fsel button{border:0;background:none;font-size:26px;cursor:pointer;line-height:1}
@media(max-width:560px){.fri{grid-template-columns:48px minmax(0,1fr)}.fri img{width:48px;height:48px}.fri .btn{grid-column:1/-1}}

/* product reviews */
.prv{margin-top:56px}
.prh{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.prh h2{margin:0 0 6px}
.prs{color:var(--mute);font-size:15px}.prs .st{font-size:16px}.prs b{color:var(--ink)}
.prl{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.prl .rc{flex:none;min-width:0}
.prn{margin:0;color:var(--mute);grid-column:1/-1;background:#fff;border:1px dashed var(--line);border-radius:10px;padding:22px}
.rpt{font-size:13px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media(max-width:600px){.prh .btn{width:100%}}
.pwn{margin:14px 0 0;padding:12px 14px;border-left:4px solid var(--saf,#e8590c);background:#fff;font-size:14px;color:var(--ink)}
.pwn a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ===== phone polish ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent}
a,button,summary,.chip,label,select{touch-action:manipulation}
@media(max-width:760px){
  html{scroll-padding-top:88px}
  /* top orange bar: show the whole line on two lines instead of cutting it with "..." */
  .strip .ann span{display:flex;align-items:center;justify-content:center;text-align:center;white-space:normal;text-overflow:clip;font-size:12px;line-height:1.2;letter-spacing:.03em;height:36px}
  /* the bottom bar already has Call, WhatsApp and Enquiry, so the round button only covers the content */
  .wafab{display:none}
  /* lighter header: no live blur on phones */
  header{-webkit-backdrop-filter:none;backdrop-filter:none}
  /* easy to tap: at least 44px */
  .logo{min-height:44px}
  .chip{min-height:44px;padding-top:0;padding-bottom:0}
  .pc .add,.go2,.fmore{min-height:44px;display:inline-flex;align-items:center}
  footer a{display:inline-block;padding:11px 0}
  details summary,summary{min-height:48px;display:flex;align-items:center}
  /* 16px fields: iPhone does not zoom the page when you tap a field */
  input,select,textarea{font-size:16px!important}
  /* product page: picture shorter so name, price and buttons show sooner */
  .pim{aspect-ratio:4/3;border-radius:16px}.pim img{height:92%}
  .pwn{font-size:14px}
  /* reviews on a product: swipe sideways */
  .prl{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-right:calc(var(--g,18px)*-1);padding:0 var(--g,18px) 8px 0;scrollbar-width:none}
  .prl::-webkit-scrollbar{display:none}
  .prl .rc{flex:0 0 82%;scroll-snap-align:start}
  .prl .prn{flex:0 0 100%}
  /* write a review: opens from the bottom like a phone sheet */
  .rvm{place-items:end center;padding:0}
  .rvb{width:100%;border-radius:18px 18px 0 0;max-height:92svh;padding:24px 20px calc(22px + env(safe-area-inset-bottom))}
  .rvb h3{font-size:30px}
  .rvs button{min-width:44px;min-height:44px}
}

/* map, shop photo, social icons */
.vph{margin:0 0 16px}.vph img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px}
.visit iframe{height:min(340px,55svh)}
.soc{display:flex;gap:8px;align-items:center}
.soc a{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;transition:background .2s,transform .2s}
.soc a:hover{background:#fff;color:var(--ink);transform:translateY(-2px)}
.soc svg{width:15px;height:15px;fill:currentColor}
.strip .soc.t{margin-left:auto}.strip .wrap{gap:14px}
.soc.m{padding:14px 0 0}.soc.m a,.soc.f a{width:44px;height:44px;background:rgba(255,255,255,.12)}
.soc.m svg,.soc.f svg{width:19px;height:19px}
.soc.f{margin-top:14px}
@media(max-width:760px){.strip .soc.t{display:none}}
@media(min-width:761px){.soc.m{display:none}}