:root{--red:#e5232a;--black:#151515;--ink:#20201d;--muted:#77746d;--paper:#f4f1ea;--glass:rgba(255,255,255,.14);--line:rgba(32,32,29,.13)}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--black)}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;overflow-x:hidden;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}a{text-decoration:none;color:inherit}button{font:inherit}
.site{min-height:100svh;background:var(--paper)}
header{position:fixed;z-index:50;top:calc(12px + env(safe-area-inset-top));left:4vw;right:4vw;height:60px;padding:0 14px 0 16px;display:flex;align-items:center;justify-content:space-between;color:#fff;border:1px solid rgba(255,255,255,.28);border-radius:23px;background:rgba(255,255,255,.11);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);box-shadow:0 12px 35px #0003,inset 0 1px 0 #fff4;transition:.35s}
header.scrolled{background:rgba(245,242,235,.48);color:var(--black);border-color:#fff9;-webkit-backdrop-filter:blur(24px) saturate(155%);backdrop-filter:blur(24px) saturate(155%)}
.brand{display:flex;align-items:center;gap:8px;min-width:0}.brand img{width:31px;height:31px;object-fit:contain;filter:none}.brand span{font-family:"Cormorant Garamond",serif;font-size:24px;font-weight:600;letter-spacing:.09em;white-space:nowrap}.brand b{font-weight:600;color:var(--red)}
nav{display:none}.desktop-cta{display:none}#menu{display:flex;flex-direction:column;justify-content:center;gap:5px;width:43px;height:43px;border:1px solid #fff5;border-radius:15px;background:#ffffff16;color:currentColor;padding:0;align-items:center;cursor:pointer}#menu span{width:18px;height:1.7px;background:currentColor;border-radius:2px;transition:.25s}#menu.open span:nth-child(1){transform:translateY(6.7px) rotate(45deg)}#menu.open span:nth-child(2){opacity:0}#menu.open span:nth-child(3){transform:translateY(-6.7px) rotate(-45deg)}
#mobileNav{position:fixed;z-index:49;top:calc(82px + env(safe-area-inset-top));left:4vw;right:4vw;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px);transition:.3s}#mobileNav.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}.glass-menu-inner{padding:10px 20px 15px;border:1px solid #fff9;border-radius:23px;background:rgba(245,242,235,.43);-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);box-shadow:0 20px 50px #0002,inset 0 1px #fff}.glass-menu-inner a{display:flex;align-items:center;gap:18px;padding:16px 0;border-bottom:1px solid #20201d1a;font-size:14px}.glass-menu-inner a:last-child{border-bottom:0}.glass-menu-inner a span{color:var(--red);font-size:9px;letter-spacing:.12em}
.hero{min-height:100svh;height:100svh;position:relative;isolation:isolate;color:#fff;display:flex;align-items:flex-end}.hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 75% 35%,#aaa398,#5a564f 47%,#242320 100%);z-index:-2}.hero-bg:after{content:"SHOWROOM / HERO IMAGE";position:absolute;inset:0;display:grid;place-items:center;color:#fff4;font-size:10px;letter-spacing:.18em}.hero-glow{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#000b,#0002 75%),linear-gradient(0deg,#0008,transparent 55%)}
.hero-content{padding:0 7vw 11vh;max-width:720px}.eyebrow{font-size:10px;letter-spacing:.22em;font-weight:600}.eyebrow.dark{color:var(--muted)}.hero h1{font:500 clamp(52px,14vw,78px)/.91 "Cormorant Garamond",serif;letter-spacing:-.045em;margin:20px 0}.hero h1 em,h2 em{font-style:italic}.hero p{max-width:590px;color:#fffc;line-height:1.75;font-size:13px}.primary-btn,.dark-btn,.outline-btn{display:inline-flex;align-items:center;justify-content:center;gap:22px;padding:16px 20px;margin-top:20px;font-size:10px;letter-spacing:.08em;transition:.3s;border-radius:3px}.primary-btn{background:#fff;color:var(--ink)}.dark-btn{background:var(--black);color:#fff}.outline-btn{border:1px solid #fff7;color:#fff}.primary-btn:hover,.dark-btn:hover,.outline-btn:hover{transform:translateY(-3px)}.hero-note{position:absolute;bottom:24px;right:6vw;font-size:8px;letter-spacing:.18em;display:flex;align-items:center;gap:9px}.hero-note i{display:block;width:28px;height:1px;background:#fff8}
.intro{text-align:center;padding:82px 7vw 88px}.intro h2,.section h2,.about h2,.contact h2,.feature-copy h2{font:500 clamp(43px,12vw,68px)/1 "Cormorant Garamond",serif;letter-spacing:-.04em;margin:17px 0 25px}.intro p{max-width:640px;margin:auto;color:var(--muted);font-size:13px;line-height:1.85}
.section{padding:75px 5vw}.section-head{margin-bottom:42px}.section-head h2{margin-bottom:0}.section-head>p{max-width:520px;color:var(--muted);font-size:12px;line-height:1.75;margin-top:17px}
.brands{background:#ebe7de}.brand-strip{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-left:1px solid var(--line)}.brand-tile{min-height:120px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;text-align:center;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.16)}.brand-tile strong{font-size:14px;letter-spacing:.1em}.brand-tile small{font-size:9px;color:var(--muted)}
.range{background:#f7f4ed}.range-grid{display:grid;grid-template-columns:1fr;gap:14px}.range-card{position:relative;min-height:380px;overflow:hidden;color:#fff;border-radius:4px}.range-main{min-height:480px}.range-bg{position:absolute;inset:0;transition:transform .8s}.range-card:hover .range-bg{transform:scale(1.045)}.range-overlay{position:absolute;inset:0;background:linear-gradient(0deg,#000c,transparent 60%)}.range-copy{position:absolute;left:25px;right:20px;bottom:24px}.range-copy small{font-size:9px;opacity:.7}.range-copy h3{font:500 38px "Cormorant Garamond",serif;margin:8px 0}.range-copy p{font-size:11px;line-height:1.5;opacity:.8}.range-copy b{font-size:10px;letter-spacing:.08em}.tiles{background:linear-gradient(135deg,#b7b1a5,#59554e)}.bathroom{background:linear-gradient(135deg,#cec8ba,#777067)}.kitchen{background:linear-gradient(135deg,#aaa79f,#4f4d48)}.pipes{background:linear-gradient(135deg,#89928e,#333a38)}.tanks{background:linear-gradient(135deg,#b9c2bf,#59615e)}.doors{background:linear-gradient(135deg,#9c836d,#4e392c)}.heaters{background:linear-gradient(135deg,#bbb7ae,#59574f)}
.featured{background:#fff}.products{display:grid;grid-template-columns:1fr 1fr;gap:34px 13px}.product small{font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:var(--muted)}.product h3{font:500 22px "Cormorant Garamond",serif;margin:7px 0}.product p{font-size:10px;color:var(--muted);margin:0}.carousel{position:relative;aspect-ratio:.86;margin-bottom:15px;overflow:hidden;border-radius:3px;background:#aaa}.slides{height:100%;display:flex;touch-action:pan-y}.slide{display:none;width:100%;height:100%;flex:0 0 100%;align-items:center;justify-content:center;color:#fff9;font-size:9px;letter-spacing:.16em}.slide.active{display:flex}.dots{position:absolute;bottom:11px;left:50%;transform:translateX(-50%);display:flex;gap:5px}.dots i{display:block;width:5px;height:5px;border-radius:50%;background:#fff8;transition:transform .25s ease,background .25s ease}.dots i.active{background:var(--red);transform:scale(1.35)}.tile-a{background:linear-gradient(135deg,#eee9dd,#aaa69b)}.tile-b{background:linear-gradient(135deg,#b9b1a2,#605a51)}.tile-c{background:linear-gradient(135deg,#e2ddd2,#9e978a)}.stone-a{background:linear-gradient(135deg,#aaa79f,#66635c)}.stone-b{background:linear-gradient(135deg,#8f8b84,#514e48)}.stone-c{background:linear-gradient(135deg,#bbb7ae,#777269)}.basin-a{background:linear-gradient(135deg,#e0dbd0,#999388)}.basin-b{background:linear-gradient(135deg,#c5bfb2,#746e64)}.basin-c{background:linear-gradient(135deg,#eeeae1,#aaa296)}.faucet-a{background:linear-gradient(135deg,#aaa9a5,#55534f)}.faucet-b{background:linear-gradient(135deg,#8e8d89,#45443f)}.faucet-c{background:linear-gradient(135deg,#c3c1ba,#77756e)}.sink-a{background:linear-gradient(135deg,#d1d3d0,#727673)}.sink-b{background:linear-gradient(135deg,#b6bbb8,#606561)}.sink-c{background:linear-gradient(135deg,#e1e3df,#888d89)}.pipe-a{background:linear-gradient(135deg,#a8b1ad,#4e5753)}.pipe-b{background:linear-gradient(135deg,#8d9994,#3e4743)}.pipe-c{background:linear-gradient(135deg,#c0c8c4,#6d7772)}.tank-a{background:linear-gradient(135deg,#c1c8c5,#666e6b)}.tank-b{background:linear-gradient(135deg,#aab3af,#4f5955)}.tank-c{background:linear-gradient(135deg,#d0d5d1,#7b837e)}.door-a{background:linear-gradient(135deg,#9a8069,#4d3929)}.door-b{background:linear-gradient(135deg,#b09a84,#594637)}.door-c{background:linear-gradient(135deg,#866c57,#3d2d22)}
.range-feature{display:grid;grid-template-columns:1fr;background:#e5e0d6}.feature-photo{min-height:380px;display:grid;place-items:center;background:linear-gradient(135deg,#66706c,#303635);color:#fff8;font-size:9px;letter-spacing:.17em}.feature-copy{padding:70px 6vw}.feature-copy p{color:var(--muted);line-height:1.8;font-size:12px}.mini-list{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:28px 0;color:#555;font-size:10px}.mini-list span:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--red);margin-right:8px}
.trust{display:grid;grid-template-columns:1fr 1fr;background:var(--black);color:#fff}.trust div{padding:32px 18px;border-right:1px solid #fff2;border-bottom:1px solid #fff2}.trust b{display:block;color:var(--red);font-size:10px;margin-bottom:20px}.trust strong{font-size:10px;letter-spacing:.1em}.trust span{display:block;color:#fff8;font-size:10px;line-height:1.6;margin-top:8px}
.about{background:#fff;display:grid;grid-template-columns:1fr;gap:45px}.about-photo{min-height:380px;display:grid;place-items:center;background:linear-gradient(135deg,#77736b,#35332f);color:#fff8;font-size:9px;letter-spacing:.17em}.about-copy p{color:var(--muted);font-size:12px;line-height:1.8}
.contact{background:var(--black);color:#fff;text-align:center;padding:90px 5vw}.contact>p{color:#fff9;font-size:12px}.contact-buttons{display:flex;justify-content:center;gap:8px}.details{display:grid;grid-template-columns:1fr;gap:25px;border-top:1px solid #fff2;margin-top:55px;padding-top:27px}.details small{display:block;color:var(--red);font-size:9px;letter-spacing:.16em;margin-bottom:7px}.details span{font-size:11px;color:#fff9}
footer{background:#0b0b0b;color:#fff;padding:42px 6vw 48px;text-align:left}.footer-brand{margin-bottom:18px}.footer-brand img{width:32px}.footer-brand span{font-size:23px}footer p{font-size:10px;color:#fff8;margin:15px 0}footer>small{font-size:9px;color:#fff7}
@media (min-width:700px){header{top:18px;left:3vw;right:3vw;height:64px;padding:0 20px;border-radius:25px}.brand span{font-size:25px}.hero-content{padding-left:8vw;max-width:800px}.hero h1{font-size:clamp(65px,8vw,100px)}.section{padding:105px 7vw}.range-grid{grid-template-columns:1fr 1fr}.range-main{grid-row:span 2;min-height:820px}.range-card{min-height:400px}.products{grid-template-columns:repeat(4,1fr);gap:42px 18px}.range-feature{grid-template-columns:1.1fr .9fr}.feature-photo{min-height:620px}.feature-copy{padding:90px 7vw}.about{grid-template-columns:1.1fr .9fr;align-items:center}.about-photo{min-height:560px}.details{grid-template-columns:repeat(3,1fr)}footer{padding:48px 7vw;display:flex;align-items:end;justify-content:space-between;gap:30px}}
@media (min-width:1000px){nav{display:flex;gap:26px;font-size:11px}nav a:hover{color:var(--red)}.desktop-cta{display:block;border:1px solid currentColor;border-radius:16px;padding:9px 15px;font-size:10px}#menu,#mobileNav{display:none!important}.hero-content{padding-left:9vw}.section{padding:125px 9vw}.range-grid{grid-template-columns:repeat(4,1fr)}.range-main{grid-row:span 2}.hero-note{right:5vw}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Final interaction refinements */
body{background:var(--black)}
.site{background:var(--paper);min-height:100svh}
header{padding-top:0}
.brand img{width:34px;height:34px;object-fit:contain}
.brand span{font-family:"DM Sans",sans-serif;font-weight:600;letter-spacing:.16em;font-size:20px}
.brand b{font-weight:500;color:var(--red)}
.carousel{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none;
  cursor:grab;
}
.carousel::-webkit-scrollbar{display:none}
.slides{display:flex;width:300%;height:100%;touch-action:pan-x;user-select:none}
.slide{display:flex!important;flex:0 0 33.333333%;scroll-snap-align:start}
.carousel:active{cursor:grabbing}
.dots{pointer-events:none}
.secondary-actions{display:none}


.details a{color:inherit;text-decoration:none}
.details a:hover{color:var(--red)}
@media(max-width:699px){
  .brand span{font-size:18px;letter-spacing:.13em}
  .brand img{width:32px;height:32px}
  .carousel{margin-bottom:14px}

}

@media(max-width:699px){
  .brand span,.footer-brand span{font-size:20px;letter-spacing:.10em}
  .brand img{width:38px;height:38px}
  .contact-buttons{flex-wrap:wrap}
  .social-btn{min-width:112px}
  .map-wrap iframe{height:230px;border-radius:22px}
}

/* Corrected logo treatment */
header{overflow:hidden;padding:0 10px 0 8px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.30);-webkit-backdrop-filter:blur(26px) saturate(145%);backdrop-filter:blur(26px) saturate(145%)}
header:before{content:"";position:absolute;z-index:-1;left:-8%;top:-5px;bottom:-5px;width:92%;background:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.99) 25%,rgba(255,255,255,.95) 42%,rgba(255,255,255,.75) 58%,rgba(255,255,255,.48) 73%,rgba(255,255,255,.22) 87%,rgba(255,255,255,0) 100%);pointer-events:none}
header.scrolled{background:rgba(245,242,235,.38)}
header.scrolled:before{background:linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.97) 27%,rgba(255,255,255,.90) 44%,rgba(255,255,255,.68) 60%,rgba(255,255,255,.42) 76%,rgba(255,255,255,.16) 91%,rgba(255,255,255,0) 100%)}
.brand{position:relative;z-index:2;height:100%;flex:1;min-width:0;gap:9px}
.brand-mark{width:49px;height:54px;flex:0 0 49px;display:grid;place-items:center;background:#fff;border-radius:0 0 14px 14px;box-shadow:0 4px 16px rgba(0,0,0,.07);overflow:hidden}
.brand-mark img{width:43px;height:43px;object-fit:contain}
.brand-copy{display:flex;flex-direction:column;justify-content:center;min-width:0}
.brand-copy strong{font-family:"Mukta","Noto Sans Devanagari",sans-serif;font-size:24px;line-height:.9;font-weight:700;letter-spacing:.015em;color:#171717;white-space:nowrap}
.brand-copy strong b{color:var(--red);font-weight:700}
.brand-copy small{margin-top:5px;font-family:"DM Sans",sans-serif;font-size:5.5px;line-height:1;letter-spacing:.20em;color:#625d52;white-space:nowrap}
#menu{position:relative;z-index:3;flex:0 0 43px;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.34);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}
.glass-menu-inner{background:rgba(245,242,235,.35);border-color:rgba(255,255,255,.64);-webkit-backdrop-filter:blur(30px) saturate(155%);backdrop-filter:blur(30px) saturate(155%)}
.social-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:118px;padding:14px 18px;border:1px solid rgba(255,255,255,.30);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:10px;letter-spacing:.07em}
.social-btn img{width:18px;height:18px;display:block}
.map-wrap{margin:46px auto 0;max-width:760px}
.map-wrap iframe{display:block;width:100%;height:250px;border:0;border-radius:24px;box-shadow:0 18px 45px rgba(0,0,0,.22)}
.map-link{display:inline-flex;margin-top:12px;padding:11px 17px;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:#fff;font-size:9px;letter-spacing:.08em;background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.footer-brand .brand-mark{width:48px;height:50px;flex-basis:48px;border-radius:12px}
.footer-brand .brand-copy strong{color:#fff;font-size:22px}
.footer-brand .brand-copy small{color:#aaa59a}
@media(max-width:699px){header{left:3vw;right:3vw;top:calc(10px + env(safe-area-inset-top));height:64px;border-radius:24px}header:before{width:115%}.brand-mark{width:49px;height:54px;flex-basis:49px}.brand-mark img{width:43px;height:43px}.brand-copy strong{font-size:23px}.brand-copy small{font-size:5px;letter-spacing:.18em}.map-wrap iframe{height:230px;border-radius:22px}}
@media(min-width:700px){header:before{width:78%;max-width:620px}.brand-copy strong{font-size:26px}}

/* Latest requested interaction and branding refinements */
.carousel{
  position:relative;
}
.carousel .dots{
  position:absolute;
  z-index:8;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  background:rgba(0,0,0,.20);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  pointer-events:auto;
}
.carousel .dots i{
  display:block;
  width:5px;
  height:5px;
  flex:0 0 5px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  transition:transform .25s ease,background .25s ease,opacity .25s ease;
}
.carousel .dots i.active{
  background:#fff;
  transform:scale(1.35);
}
.phone-glyph{
  font-family:Arial,sans-serif;
  font-size:17px;
  line-height:1;
  transform:translateY(-1px);
}
.call-btn .phone-glyph{color:currentColor}
.visit-btn{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-width:94px;
  height:44px;
  padding:0 18px!important;
  border-radius:999px!important;
  white-space:nowrap;
  box-sizing:border-box;
  flex:0 0 auto;
}
@media(max-width:699px){
  .carousel .dots{bottom:12px}
}

.mobile-nav a span:first-child{
  display:none!important;
}

/* HARD FIX: gallery dots are a sibling overlay, never part of a slide */
.carousel{
  position:relative!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scroll-snap-type:x mandatory!important;
  scroll-behavior:smooth!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:none!important;
  overscroll-behavior-x:contain!important;
}
.carousel::-webkit-scrollbar{display:none}
.carousel .slides{
  position:relative;
  display:flex!important;
  width:300%!important;
  height:100%!important;
  flex-wrap:nowrap!important;
  transform:none!important;
}
.carousel .slide{
  display:flex!important;
  flex:0 0 33.333333%!important;
  width:33.333333%!important;
  height:100%!important;
  scroll-snap-align:start!important;
}
.carousel .dots{
  position:absolute!important;
  z-index:100!important;
  left:50%!important;
  bottom:12px!important;
  transform:translateX(-50%)!important;
  display:flex!important;
  width:max-content!important;
  height:auto!important;
  padding:7px 10px!important;
  gap:7px!important;
  align-items:center!important;
  border-radius:999px!important;
  background:rgba(0,0,0,.28)!important;
  border:1px solid rgba(255,255,255,.28)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  backdrop-filter:blur(12px)!important;
  pointer-events:none!important;
}
.carousel .dots i{
  display:block!important;
  width:5px!important;
  height:5px!important;
  flex:0 0 5px!important;
  margin:0!important;
  padding:0!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.55)!important;
  transform:none!important;
  transition:transform .22s ease,background .22s ease!important;
}
.carousel .dots i.active{
  background:#fff!important;
  transform:scale(1.45)!important;
}
.brand-wordmark{
  display:block;
  width:auto;
  height:31px;
  max-width:170px;
  object-fit:contain;
  object-position:left center;
}
.brand-copy{min-width:0}
.brand-copy small{display:block}
.phone-glyph{
  font-family:Arial,sans-serif!important;
  font-size:17px!important;
  line-height:1!important;
}
@media(max-width:699px){
  .brand-wordmark{height:29px;max-width:150px}
}

/* Latest requested gallery behavior: automatic image cycling, no dots */
.carousel .dots,
.dots{
  display:none!important;
}
.carousel{
  position:relative!important;
  overflow:hidden!important;
}
.carousel .slides{
  display:flex!important;
  width:300%!important;
  height:100%!important;
  flex-wrap:nowrap!important;
  transform:translate3d(0,0,0);
  transition:transform 900ms cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.carousel .slide{
  flex:0 0 33.333333%!important;
  width:33.333333%!important;
  scroll-snap-align:none!important;
}
.carousel .slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

/* FINAL BUILD OVERRIDES */
.brand{position:relative;z-index:2;display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:49px!important;height:54px!important;flex:0 0 49px!important;display:grid!important;place-items:center!important;background:#fff!important;border-radius:0 0 14px 14px!important;overflow:hidden!important}
.brand-mark img{width:43px!important;height:43px!important;object-fit:contain!important}
.brand-copy{display:flex!important;flex-direction:column!important;justify-content:center!important;min-width:0!important}
.brand-wordmark{display:block!important;width:auto!important;height:32px!important;max-width:190px!important;object-fit:contain!important;object-position:left center!important}
.brand-copy small{display:block!important;margin-top:3px!important;font-size:5.5px!important;letter-spacing:.20em!important;line-height:1!important;white-space:nowrap!important;color:#5e594f!important}
.footer-brand .brand-wordmark{height:29px!important;max-width:175px!important}
.footer-brand .brand-copy small{color:#aaa59a!important}

header{overflow:hidden!important;padding:0 10px 0 8px!important;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.30)!important;-webkit-backdrop-filter:blur(26px) saturate(145%)!important;backdrop-filter:blur(26px) saturate(145%)!important}
header:before{content:""!important;position:absolute!important;z-index:-1!important;left:-7%!important;top:-5px!important;bottom:-5px!important;width:95%!important;background:linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.995) 23%,rgba(255,255,255,.96) 40%,rgba(255,255,255,.79) 56%,rgba(255,255,255,.54) 70%,rgba(255,255,255,.30) 83%,rgba(255,255,255,.10) 94%,rgba(255,255,255,0) 100%)!important;pointer-events:none!important}
header.scrolled:before{background:linear-gradient(90deg,rgba(255,255,255,.995) 0%,rgba(255,255,255,.98) 24%,rgba(255,255,255,.91) 42%,rgba(255,255,255,.72) 59%,rgba(255,255,255,.47) 74%,rgba(255,255,255,.22) 88%,rgba(255,255,255,0) 100%)!important}

.carousel{position:relative!important;overflow:hidden!important;aspect-ratio:.86!important;margin-bottom:15px!important;border-radius:3px!important;background:#aaa!important}
.carousel .slides{display:flex!important;width:300%!important;height:100%!important;flex-wrap:nowrap!important;transform:translate3d(0,0,0)!important;transition:transform 850ms cubic-bezier(.22,.61,.36,1)!important;will-change:transform!important}
.carousel .slide{display:flex!important;flex:0 0 33.333333%!important;width:33.333333%!important;height:100%!important;align-items:center!important;justify-content:center!important;color:rgba(255,255,255,.62)!important;font-size:9px!important;letter-spacing:.16em!important}
.carousel .dots,.dots,.carousel button{display:none!important}

.whatsapp-btn img{width:19px!important;height:19px!important;display:block!important;flex:0 0 19px!important}
.phone-glyph{font-family:Arial,sans-serif!important;font-size:17px!important;line-height:1!important}
@media(max-width:699px){
  .brand-wordmark{height:29px!important;max-width:155px!important}
  .brand-copy small{font-size:5px!important;letter-spacing:.18em!important}
  header:before{width:120%!important}
}

/* FINAL FEATURED-PICKS CAROUSEL: real horizontal scroll track + automatic cycling */
.carousel{
  position:relative!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  scroll-behavior:smooth!important;
  scrollbar-width:none!important;
  overscroll-behavior-x:contain!important;
  touch-action:pan-x!important;
  cursor:grab;
}
.carousel::-webkit-scrollbar{display:none!important}
.carousel .slides{
  display:flex!important;
  flex-wrap:nowrap!important;
  width:auto!important;
  min-width:100%!important;
  height:100%!important;
  transform:none!important;
  transition:none!important;
  will-change:scroll-position!important;
}
.carousel .slide{
  display:flex!important;
  flex:0 0 100%!important;
  width:100%!important;
  height:100%!important;
  align-items:center!important;
  justify-content:center!important;
}
.carousel:active{cursor:grabbing}
.carousel .dots,.dots,.carousel button{display:none!important}

/* Footer: make the exact wordmark readable on the dark footer. */

.footer-brand .brand-mark{
  background:#fff!important;
}
.footer-brand .brand-copy small{
  color:rgba(255,255,255,.72)!important;
}

/* Faster, smoother mobile menu opening. */
.mobile-nav{
  transition:opacity .16s ease, transform .16s ease!important;
  will-change:opacity,transform;
}
.mobile-nav.open{
  transition:opacity .16s ease, transform .16s ease!important;
}
.menu{
  transition:transform .16s ease, opacity .16s ease!important;
  will-change:transform;
}

/* FINAL MOBILE MENU PERFORMANCE FIX
   Do not animate backdrop-filter. The live blur was causing the opening hitch.
*/
@media (max-width:699px){
  .mobile-nav{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    background:
      linear-gradient(135deg,
        rgba(255,255,255,.30) 0%,
        rgba(255,255,255,.18) 45%,
        rgba(255,255,255,.10) 100%)!important;
    box-shadow:
      0 18px 50px rgba(0,0,0,.16),
      inset 0 1px 0 rgba(255,255,255,.42)!important;
    will-change:transform,opacity!important;
    contain:layout paint style!important;
    isolation:isolate!important;
    transition:
      transform .18s cubic-bezier(.22,.61,.36,1),
      opacity .12s linear!important;
  }

  .mobile-nav.open{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  .mobile-nav::before,
  .mobile-nav::after{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }

  .menu{
    will-change:transform!important;
    transform:translateZ(0)!important;
    -webkit-tap-highlight-color:transparent!important;
  }

  .menu span{
    will-change:transform!important;
  }

  /* Prevent the opening animation from forcing a repaint of the page behind it. */
  body:has(.mobile-nav.open){
    overflow:hidden;
  }
}

/* Featured Picks: smooth 3-second auto-scroll transition */
.carousel .slides{
  transition:transform 900ms cubic-bezier(.22,.61,.36,1)!important;
  will-change:transform;
}

/* FINAL MENU FRAME-DROP FIX
   The menu background is now a precomposed-looking static layer.
   Only transform/opacity are animated; no background/filter interpolation.
*/
@media(max-width:699px){
  .mobile-nav{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    background:rgba(118,114,105,.88)!important;
    background-image:linear-gradient(
      135deg,
      rgba(255,255,255,.22),
      rgba(255,255,255,.10)
    )!important;
    box-shadow:0 18px 45px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.35)!important;

    transition:none!important;
    animation:none!important;
    will-change:transform,opacity!important;
    transform:translate3d(0,0,0)!important;
    contain:strict!important;
    isolation:isolate!important;
  }

  .mobile-nav.open{
    transition:none!important;
    animation:none!important;
  }

  /* Keep the menu panel visually stable; only compositor properties move. */
  .mobile-nav a,
  .mobile-nav li{
    transition:none!important;
    animation:none!important;
  }

  .menu{
    transition:none!important;
    animation:none!important;
    will-change:transform!important;
    transform:translateZ(0)!important;
  }
}

/* ===== FINAL EXACT SUPPLIED WORDMARKS ===== */
.exact-brand{
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
  height:100%!important;
  margin:0!important;
}
.exact-wordmark{
  display:block!important;
  width:auto!important;
  object-fit:contain!important;
  object-position:left center!important;
  max-width:none!important;
}
.header-wordmark{
  height:58px!important;
  width:auto!important;
}
.footer-wordmark{
  height:64px!important;
  width:auto!important;
}

/* Header keeps the supplied wordmark crisp; the surrounding glass treatment
   remains on the navbar itself. */
header .exact-brand{
  flex:0 0 auto!important;
}

/* ===== MOBILE PRODUCT LAYOUT ===== */
@media(max-width:699px){
  html,body{
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  .products{
    grid-template-columns:1fr!important;
    width:100%!important;
    min-width:0!important;
  }

  .product-card{
    width:100%!important;
    min-width:0!important;
  }

  .product-card .carousel{
    width:100%!important;
    max-width:100%!important;
  }

  .header-wordmark{
    height:54px!important;
    max-width:calc(100vw - 95px)!important;
  }

  .footer-wordmark{
    height:52px!important;
    max-width:100%!important;
  }
}

/* ===== DESKTOP WORDMARK SCALE ===== */
@media(min-width:700px){
  .header-wordmark{height:64px!important}
  .footer-wordmark{height:68px!important}
}

/* Featured Picks: 3s interval, smooth 900ms movement. */
.carousel .slides{
  transition:transform 900ms cubic-bezier(.22,.61,.36,1)!important;
  will-change:transform!important;
}

/* Restore the main house/home logo beside the supplied wordmarks. */
.brand{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  min-width:0!important;
}
.brand-mark{
  display:grid!important;
  place-items:center!important;
  width:49px!important;
  height:54px!important;
  flex:0 0 49px!important;
  background:#fff!important;
  border-radius:0 0 14px 14px!important;
  overflow:hidden!important;
}
.brand-mark img{
  display:block!important;
  width:43px!important;
  height:43px!important;
  object-fit:contain!important;
}
.brand-copy{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-width:0!important;
}
.brand-wordmark{
  display:block!important;
  width:auto!important;
  max-width:190px!important;
  object-fit:contain!important;
  object-position:left center!important;
}
.header-wordmark{height:32px!important}
.footer-wordmark{height:31px!important}
@media(max-width:699px){
  .brand-mark{
    width:46px!important;
    height:52px!important;
    flex-basis:46px!important;
  }
  .brand-mark img{
    width:40px!important;
    height:40px!important;
  }
  .header-wordmark{
    height:28px!important;
    max-width:calc(100vw - 100px)!important;
  }
  .footer-wordmark{
    height:27px!important;
    max-width:calc(100vw - 100px)!important;
  }
}

/* FINAL MOBILE MENU: instant translucent panel, no transparent-first frame. */
@media(max-width:699px){
  .mobile-nav{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    background:rgba(245,243,238,.94)!important;
    background-image:none!important;
    opacity:1!important;
    visibility:visible!important;
    transition:none!important;
    animation:none!important;
    filter:none!important;
    box-shadow:0 14px 40px rgba(0,0,0,.14),inset 0 1px 0 rgba(255,255,255,.55)!important;
    contain:paint!important;
    isolation:isolate!important;
    will-change:auto!important;
  }

  .mobile-nav:not(.open){
    pointer-events:none!important;
  }

  .mobile-nav.open{
    opacity:1!important;
    visibility:visible!important;
    transition:none!important;
    animation:none!important;
  }

  /* Remove any pseudo-element blur/transparency that can paint one frame late. */
  .mobile-nav::before,
  .mobile-nav::after{
    content:none!important;
    display:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    filter:none!important;
    opacity:1!important;
  }

  .mobile-nav *,
  .mobile-nav *::before,
  .mobile-nav *::after{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    filter:none!important;
  }

  /* Keep the menu button itself instantaneous. */
  .menu,
  .menu span{
    transition:none!important;
    animation:none!important;
  }
}

/* ===== FINAL MENU: ZERO-ANIMATION MOBILE IMPLEMENTATION ===== */
@media(max-width:699px){
  .mobile-nav{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    filter:none!important;
    background:rgba(245,243,238,.90)!important;
    background-image:none!important;
    opacity:1!important;
    visibility:hidden!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
    box-shadow:0 12px 34px rgba(0,0,0,.13),inset 0 1px 0 rgba(255,255,255,.45)!important;
    contain:paint!important;
    isolation:isolate!important;
  }

  .mobile-nav.open{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }

  .mobile-nav::before,
  .mobile-nav::after{
    display:none!important;
    content:none!important;
  }

  .mobile-nav *,
  .mobile-nav *::before,
  .mobile-nav *::after{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    filter:none!important;
    transition:none!important;
    animation:none!important;
  }

  .menu,
  .menu.open,
  .menu span{
    transition:none!important;
    animation:none!important;
    transform:none!important;
    filter:none!important;
  }
}

/* ===== SAFARI MENU PAINT FIX ===== */
@media (max-width:699px){
  .mobile-nav{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    filter:none!important;
    background:#e8e5de!important;
    background-image:linear-gradient(
      135deg,
      rgba(255,255,255,.96) 0%,
      rgba(238,235,228,.98) 48%,
      rgba(220,216,207,.96) 100%
    )!important;
    opacity:1!important;
    visibility:hidden!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
    box-shadow:
      0 14px 38px rgba(0,0,0,.16),
      inset 0 1px 0 rgba(255,255,255,.75),
      inset 0 -1px 0 rgba(0,0,0,.08)!important;
    border:1px solid rgba(255,255,255,.72)!important;
    contain:paint!important;
    isolation:isolate!important;
    will-change:auto!important;
  }

  .mobile-nav.open{
    visibility:visible!important;
    opacity:1!important;
    background:#e8e5de!important;
    background-image:linear-gradient(
      135deg,
      rgba(255,255,255,.96) 0%,
      rgba(238,235,228,.98) 48%,
      rgba(220,216,207,.96) 100%
    )!important;
  }

  .mobile-nav::before,
  .mobile-nav::after{
    display:none!important;
    content:none!important;
  }

  .mobile-nav *,
  .mobile-nav *::before,
  .mobile-nav *::after{
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    filter:none!important;
    transition:none!important;
    animation:none!important;
  }

  .menu,
  .menu.open,
  .menu span{
    transition:none!important;
    animation:none!important;
    transform:none!important;
    filter:none!important;
  }
}

/* ===== ACTUAL MOBILE MENU FIX ===== */
@media (max-width:699px){

  /* The actual menu wrapper is #mobileNav, not .mobile-nav. */
  #mobileNav{
    opacity:1!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
    filter:none!important;
    -webkit-filter:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    will-change:auto!important;
  }

  #mobileNav.open{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }

  /* This is the actual glass panel. Give Safari a fully painted surface
     instead of asking it to composite a live blur when the panel appears. */
  #mobileNav .glass-menu-inner{
    background:#e7e3dc!important;
    background-image:linear-gradient(
      135deg,
      #f2f0eb 0%,
      #e8e5df 52%,
      #dcd8d0 100%
    )!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    filter:none!important;
    -webkit-filter:none!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
    box-shadow:
      0 16px 40px rgba(0,0,0,.14),
      inset 0 1px 0 rgba(255,255,255,.85),
      inset 0 -1px 0 rgba(0,0,0,.06)!important;
    border:1px solid rgba(255,255,255,.85)!important;
    contain:paint!important;
    isolation:isolate!important;
  }

  #mobileNav .glass-menu-inner::before,
  #mobileNav .glass-menu-inner::after{
    content:none!important;
    display:none!important;
  }

  /* Remove the last animation from the hamburger itself. */
  #menu,
  #menu.open,
  #menu span{
    transition:none!important;
    animation:none!important;
    filter:none!important;
    -webkit-filter:none!important;
  }

  #menu.open span:nth-child(1),
  #menu.open span:nth-child(2),
  #menu.open span:nth-child(3){
    transition:none!important;
  }
}

/* ===== MENU: PAINT FIRST, REVEAL SECOND ===== */
@media(max-width:699px){
  #mobileNav{
    visibility:hidden!important;
    opacity:1!important;
    pointer-events:none!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
  }

  /* "ready" means the panel is fully painted but still not visible. */
  #mobileNav.menu-ready{
    visibility:hidden!important;
    opacity:1!important;
    pointer-events:none!important;
  }

  /* Only after the painted state exists do we reveal it. */
  #mobileNav.menu-visible{
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }

  #mobileNav .glass-menu-inner{
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    filter:none!important;
    background:#e7e3dc!important;
    background-image:linear-gradient(
      135deg,
      #f2f0eb 0%,
      #e8e5df 52%,
      #dcd8d0 100%
    )!important;
  }
}

/* ===== MENU VISIBILITY: CLOSED BY DEFAULT ===== */
@media(max-width:699px){
  #mobileNav{
    display:none!important;
    visibility:hidden!important;
    opacity:1!important;
    pointer-events:none!important;
  }

  #mobileNav.open{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  #mobileNav.menu-ready{
    display:block!important;
    visibility:hidden!important;
    pointer-events:none!important;
  }

  #mobileNav.menu-visible{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    pointer-events:auto!important;
  }
}

/* ===== LARGER, MORE LEGIBLE BRANDING ===== */
.brand{
  gap:12px!important;
}
.brand-mark{
  width:64px!important;
  height:64px!important;
  flex-basis:64px!important;
}
.brand-mark img{
  width:58px!important;
  height:58px!important;
  object-fit:contain!important;
}
.brand-copy{
  gap:2px!important;
}
.brand-wordmark{
  height:39px!important;
  max-width:245px!important;
}
.brand-copy small{
  font-size:9px!important;
  letter-spacing:2px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
}
.header-wordmark{
  height:39px!important;
}
.footer-wordmark{
  height:40px!important;
}
@media(max-width:699px){
  .brand{
    gap:10px!important;
  }
  .brand-mark{
    width:60px!important;
    height:60px!important;
    flex-basis:60px!important;
  }
  .brand-mark img{
    width:54px!important;
    height:54px!important;
  }
  .header-wordmark{
    height:35px!important;
    max-width:calc(100vw - 112px)!important;
  }
  .footer-wordmark{
    height:36px!important;
    max-width:calc(100vw - 112px)!important;
  }
  .brand-copy small{
    font-size:8px!important;
    letter-spacing:1.7px!important;
  }
}



/* ===== SMOOTH FROSTED DROPDOWN MENU ===== */
@media(max-width:699px){
  #mobileNav{
    display:block!important;
    visibility:hidden!important;
    pointer-events:none!important;
    opacity:0!important;
    transform:translate3d(0,-14px,0)!important;
    clip-path:inset(0 0 100% 0 round 22px)!important;
    transition:none!important;
    animation:none!important;
    filter:none!important;
    -webkit-filter:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    will-change:transform,opacity,clip-path!important;
  }

  #mobileNav.menu-ready{
    display:block!important;
    visibility:hidden!important;
    pointer-events:none!important;
    opacity:0!important;
    transform:translate3d(0,-14px,0)!important;
    clip-path:inset(0 0 100% 0 round 22px)!important;
  }

  #mobileNav.menu-visible{
    display:block!important;
    visibility:visible!important;
    pointer-events:auto!important;
    opacity:1!important;
    transform:translate3d(0,0,0)!important;
    clip-path:inset(0 0 0 0 round 22px)!important;
    transition:
      transform 360ms cubic-bezier(.16,1,.3,1),
      opacity 220ms ease-out,
      clip-path 360ms cubic-bezier(.16,1,.3,1)!important;
  }

  #mobileNav .glass-menu-inner{
    background:rgba(232,229,222,.93)!important;
    background-image:linear-gradient(
      135deg,
      rgba(255,255,255,.30) 0%,
      rgba(255,255,255,.20) 52%,
      rgba(220,216,207,.28) 100%
    )!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
    filter:none!important;
    opacity:1!important;
    transform:none!important;
    transition:none!important;
    animation:none!important;
    box-shadow:
      0 16px 40px rgba(0,0,0,.13),
      inset 0 1px 0 rgba(255,255,255,.62),
      inset 0 -1px 0 rgba(0,0,0,.06)!important;
    border:1px solid rgba(255,255,255,.78)!important;
  }

  #mobileNav .glass-menu-inner::before,
  #mobileNav .glass-menu-inner::after{
    display:none!important;
    content:none!important;
  }

  #menu span{
    transition:
      transform 260ms cubic-bezier(.16,1,.3,1),
      opacity 140ms ease-out!important;
    will-change:transform,opacity!important;
  }

  #menu.open span:nth-child(1){
    transform:translate3d(0,7px,0) rotate(45deg)!important;
  }
  #menu.open span:nth-child(2){
    opacity:0!important;
  }
  #menu.open span:nth-child(3){
    transform:translate3d(0,-7px,0) rotate(-45deg)!important;
  }
}

/* ===== HEADER LOGO FIT =====
   The supplied house mark is wider than its square container. Let it occupy
   the mark naturally so the empty left/right padding is reduced. */
@media(max-width:699px){
  header .brand-mark{
    width:76px!important;
    flex-basis:76px!important;
    height:60px!important;
    padding:0!important;
    justify-content:flex-start!important;
  }
  header .brand-mark img{
    width:74px!important;
    height:auto!important;
    max-height:58px!important;
    object-fit:contain!important;
    object-position:left center!important;
  }
}



/* Mobile header: keep the cloud soft but ensure no rectangular clipping. */
@media(max-width:699px){
  header .brand-mark{
    position:relative!important;
    background:transparent!important;
    border-radius:0!important;
    overflow:visible!important;
    isolation:isolate!important;
  }

  header .brand-mark::before{
    content:""!important;
    position:absolute!important;
    z-index:-1!important;
    inset:-15px -20px!important;
    border-radius:50%!important;
    background:radial-gradient(
      ellipse at center,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.90) 44%,
      rgba(255,255,255,.52) 66%,
      rgba(255,255,255,0) 100%
    )!important;
    filter:blur(7px)!important;
    -webkit-filter:blur(7px)!important;
    pointer-events:none!important;
  }

  header .brand-mark::after{
    content:""!important;
    position:absolute!important;
    z-index:-2!important;
    inset:-24px -29px!important;
    border-radius:50%!important;
    background:radial-gradient(
      ellipse at center,
      rgba(255,255,255,.34) 0%,
      rgba(255,255,255,.12) 48%,
      rgba(255,255,255,0) 78%
    )!important;
    filter:blur(11px)!important;
    -webkit-filter:blur(11px)!important;
    pointer-events:none!important;
  }
}

/* Never apply the fuzzy background to the footer logo. */
footer .brand-mark,
.footer-brand .brand-mark{
  background:transparent!important;
  border-radius:0!important;
  overflow:visible!important;
}
footer .brand-mark::before,
footer .brand-mark::after,
.footer-brand .brand-mark::before,
.footer-brand .brand-mark::after{
  content:none!important;
  display:none!important;
  filter:none!important;
  -webkit-filter:none!important;
}

/* ===== LOGO BACKGROUNDS — FINAL ===== */

/*
   Header:
   The white glow is painted directly as a radial gradient on the logo area.
   There is no rectangular background and no pseudo-element extending outside
   the element, which eliminates the hard/sharp edges seen previously.
*/
header .brand-mark{
  position:relative!important;
  background:
    radial-gradient(
      ellipse 78% 72% at 50% 50%,
      rgba(255,255,255,.99) 0%,
      rgba(255,255,255,.94) 35%,
      rgba(255,255,255,.68) 58%,
      rgba(255,255,255,.30) 74%,
      rgba(255,255,255,0) 100%
    )!important;
  border-radius:0!important;
  overflow:visible!important;
  box-shadow:none!important;
  isolation:isolate!important;
}

header .brand-mark::before,
header .brand-mark::after{
  content:none!important;
  display:none!important;
}

/*
   Footer:
   Restore a proper white logo background so the black/red house mark remains
   clearly visible. No fuzzy/cloud treatment is applied here.
*/
footer .brand-mark,
.footer-brand .brand-mark{
  position:relative!important;
  background:#fff!important;
  border-radius:0 0 14px 14px!important;
  overflow:hidden!important;
  box-shadow:none!important;
  isolation:auto!important;
}

footer .brand-mark::before,
footer .brand-mark::after,
.footer-brand .brand-mark::before,
.footer-brand .brand-mark::after{
  content:none!important;
  display:none!important;
}

footer .brand-mark img,
.footer-brand .brand-mark img{
  position:relative!important;
  z-index:1!important;
  display:block!important;
  object-fit:contain!important;
}

/* ===== OUR BRANDS: IMAGE-ONLY SLOTS ===== */
.brand-image-slot{
  width:100%;
  min-height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  border:1px dashed rgba(25,25,25,.20);
  background:rgba(255,255,255,.18);
  font-size:11px;
  font-weight:600;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:rgba(25,25,25,.48);
  box-sizing:border-box;
}
@media(max-width:699px){
  .brand-image-slot{
    min-height:96px;
  }
}

/* ===== BRAND TAGLINE ALIGNMENT ===== */
.brand-copy small{
  position:relative!important;
  left:18px!important;
}
@media(max-width:699px){
  .brand-copy small{
    left:14px!important;
  }
}

/* ===== PENDING DESIGN UPDATES ===== */

/* Brand logo cards */
.brand-logo-card{
  min-height:132px;
  border:1px solid rgba(20,20,20,.12);
  border-radius:22px;
  background:rgba(255,255,255,.56);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  box-sizing:border-box;
  overflow:hidden;
}
.brand-logo-card img{
  display:block;
  width:100%;
  max-width:180px;
  height:78px;
  object-fit:contain;
}

/* New electric-fittings category visual */
.range-bg.electric{
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.18), transparent 34%),
    linear-gradient(135deg,#343434,#151515 55%,#555);
}

/* Everything for the Build */
.build-points{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:28px 0 26px;
}
.build-points > div{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:12px;
  row-gap:3px;
  padding:17px 16px;
  border:1px solid rgba(20,20,20,.12);
  border-radius:16px;
  background:rgba(255,255,255,.32);
}
.build-points strong{
  grid-row:1 / span 2;
  font-size:12px;
  letter-spacing:1.5px;
  color:#e51f26;
}
.build-points b{
  font-size:14px;
  font-weight:600;
}
.build-points span{
  font-size:12px;
  line-height:1.45;
  color:#666;
}
.delivery-badge{
  display:inline-flex;
  align-items:center;
  margin-left:12px;
  padding:11px 14px;
  border:1px solid rgba(25,25,25,.18);
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  letter-spacing:1.2px;
  vertical-align:middle;
}

/* Explore Our Range category chooser */
.range-panel{
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  padding:24px;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity 220ms ease;
}
.range-panel.open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}
.range-panel-backdrop{
  position:absolute;
  inset:0;
  background:rgba(12,12,12,.46);
}
.range-panel-card{
  position:relative;
  z-index:1;
  width:min(760px,100%);
  max-height:min(760px,88vh);
  overflow:auto;
  padding:30px;
  border:1px solid rgba(255,255,255,.70);
  border-radius:28px;
  background:rgba(240,237,231,.94);
  box-shadow:0 30px 90px rgba(0,0,0,.24);
  transform:translateY(18px) scale(.985);
  opacity:0;
  transition:transform 300ms cubic-bezier(.16,1,.3,1),opacity 220ms ease;
}
.range-panel.open .range-panel-card{
  transform:translateY(0) scale(1);
  opacity:1;
}
.range-panel-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  margin-bottom:22px;
}
.range-panel-head h2{
  margin:4px 0 0;
}
.range-panel-close{
  width:42px;
  height:42px;
  border:1px solid rgba(20,20,20,.15);
  border-radius:50%;
  background:rgba(255,255,255,.45);
  font-size:28px;
  line-height:1;
  cursor:pointer;
}
.range-panel-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.range-panel-grid a{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 18px;
  border:1px solid rgba(20,20,20,.12);
  border-radius:16px;
  color:#171717;
  text-decoration:none;
  background:rgba(255,255,255,.32);
  font-weight:600;
  transition:transform 180ms ease,background 180ms ease;
}
.range-panel-grid a:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.72);
}
.range-panel-grid a span{
  color:#e51f26;
}
@media(max-width:699px){
  .brand-logo-card{
    min-height:104px;
    padding:18px;
    border-radius:18px;
  }
  .brand-logo-card img{
    max-width:145px;
    height:60px;
  }
  .build-points{
    grid-template-columns:1fr;
  }
  .delivery-badge{
    display:flex;
    width:max-content;
    margin:12px 0 0;
  }
  .range-panel{
    padding:14px;
    align-items:end;
  }
  .range-panel-card{
    padding:22px 18px;
    border-radius:24px 24px 18px 18px;
    max-height:84vh;
  }
  .range-panel-grid{
    grid-template-columns:1fr;
  }
}

body.range-panel-open{overflow:hidden!important;}

/* ===== REAL BRAND LOGOS ===== */
.brand-logo-card{
  min-height:132px;
  padding:22px 26px;
}
.brand-logo-card img{
  width:100%;
  max-width:220px;
  height:92px;
  object-fit:contain;
  object-position:center;
  display:block;
}
@media(max-width:699px){
  .brand-logo-card{
    min-height:108px;
    padding:18px 20px;
  }
  .brand-logo-card img{
    max-width:170px;
    height:68px;
  }
}

/* ===== COMPACT SUPPLIED BRAND LOGO GRID ===== */
.brand-logo-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
}
.brand-logo-grid .brand-logo-card{
  min-height:92px!important;
  height:92px!important;
  padding:13px 18px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.58)!important;
  border:1px solid rgba(20,20,20,.10)!important;
  box-shadow:0 8px 24px rgba(20,20,20,.055)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
.brand-logo-grid .brand-logo-card img{
  width:100%!important;
  height:100%!important;
  max-width:190px!important;
  max-height:64px!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
}
@media(max-width:900px){
  .brand-logo-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:11px!important;
  }
}
@media(max-width:699px){
  .brand-logo-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }
  .brand-logo-grid .brand-logo-card{
    min-height:82px!important;
    height:82px!important;
    padding:11px 13px!important;
    border-radius:14px!important;
  }
  .brand-logo-grid .brand-logo-card img{
    max-width:150px!important;
    max-height:54px!important;
  }
}

/* ===== UNIFORM BRAND GRID ===== */
.brand-logo-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  width:100%!important;
}
.brand-logo-grid .brand-logo-card{
  min-width:0!important;
  height:104px!important;
  min-height:104px!important;
  padding:8px!important;
  border:1px solid rgba(30,30,30,.10)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.72)!important;
  box-shadow:0 7px 20px rgba(20,20,20,.045)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.brand-logo-frame{
  width:220px;
  height:90px;
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.brand-logo-frame img{
  width:220px!important;
  height:90px!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
}
@media(max-width:900px){
  .brand-logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;}
  .brand-logo-grid .brand-logo-card{height:98px!important;min-height:98px!important;}
}
@media(max-width:699px){
  .brand-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;}
  .brand-logo-grid .brand-logo-card{height:88px!important;min-height:88px!important;padding:6px!important;border-radius:14px!important;}
  .brand-logo-frame{height:76px;}
  .brand-logo-frame img{height:76px!important;}
}

/* ===== OPTICALLY UNIFORM BRAND MARKS ===== */
.brand-logo-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}
.brand-logo-grid .brand-logo-card{
  height:96px!important;
  min-height:96px!important;
  padding:12px 16px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(25,25,25,.09)!important;
  box-shadow:0 6px 18px rgba(25,25,25,.045)!important;
  overflow:hidden!important;
}
.brand-logo-grid .brand-logo-card img{
  width:220px!important;
  height:70px!important;
  max-width:100%!important;
  max-height:70px!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
}
@media(max-width:900px){
  .brand-logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media(max-width:699px){
  .brand-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;}
  .brand-logo-grid .brand-logo-card{height:84px!important;min-height:84px!important;padding:8px 10px!important;}
  .brand-logo-grid .brand-logo-card img{height:62px!important;}
}

/* ===== BRAND GRID FINAL POLISH ===== */
.brand-logo-grid{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  padding:0!important;
}
.brand-logo-grid::before,
.brand-logo-grid::after{
  content:none!important;
  display:none!important;
}
.brand-logo-grid .brand-logo-card{
  border:1px solid rgba(25,25,25,.08)!important;
  outline:0!important;
  box-shadow:0 6px 18px rgba(25,25,25,.045)!important;
  background:rgba(255,255,255,.76)!important;
}
.brand-logo-grid .brand-logo-card img{
  width:220px!important;
  height:70px!important;
  max-width:100%!important;
  max-height:70px!important;
  object-fit:contain!important;
  image-rendering:auto!important;
  filter:none!important;
}

.brands .brand-strip{
  border:0!important;
  outline:0!important;
}

/* ===== BRAND GRID — FINAL LOGO TREATMENT ===== */
.brand-logo-grid{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
  padding:0!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}
.brand-logo-grid .brand-logo-card{
  height:96px!important;
  min-height:96px!important;
  padding:8px 14px!important;
  border:1px solid rgba(25,25,25,.08)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.76)!important;
  box-shadow:0 6px 18px rgba(25,25,25,.045)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
}
.brand-logo-grid .brand-logo-card img{
  width:220px!important;
  height:70px!important;
  max-width:100%!important;
  max-height:70px!important;
  object-fit:contain!important;
  object-position:center!important;
  display:block!important;
  image-rendering:auto!important;
}
@media(max-width:900px){
  .brand-logo-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
@media(max-width:699px){
  .brand-logo-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
  }
  .brand-logo-grid .brand-logo-card{
    height:84px!important;
    min-height:84px!important;
    padding:6px 10px!important;
  }
  .brand-logo-grid .brand-logo-card img{
    width:190px!important;
    height:62px!important;
    max-height:62px!important;
  }
}

/* ===== BRAND LOGOS: COMPLETE, UNCROPPED, OPTICALLY BALANCED ===== */
.brand-logo-grid{
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
.brand-logo-grid .brand-logo-card{
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.brand-logo-grid .brand-logo-card img{
  width:220px!important;
  height:70px!important;
  max-width:100%!important;
  max-height:70px!important;
  object-fit:contain!important;
  object-position:center!important;
  overflow:visible!important;
}
@media(max-width:699px){
  .brand-logo-grid .brand-logo-card img{
    width:190px!important;
    height:62px!important;
    max-height:62px!important;
  }
}

/* ===== CATEGORY DESTINATION PANEL ===== */
.category-panel{position:fixed;inset:0;z-index:105;display:grid;place-items:center;padding:22px;visibility:hidden;opacity:0;pointer-events:none;transition:opacity 220ms ease}
.category-panel.open{visibility:visible;opacity:1;pointer-events:auto}
.category-panel-backdrop{position:absolute;inset:0;background:rgba(12,12,12,.46)}
.category-panel-card{position:relative;z-index:1;width:min(560px,100%);padding:34px;border:1px solid rgba(255,255,255,.7);border-radius:26px;background:rgba(240,237,231,.96);box-shadow:0 30px 90px rgba(0,0,0,.24);transform:translateY(16px) scale(.985);opacity:0;transition:transform 300ms cubic-bezier(.16,1,.3,1),opacity 220ms ease}
.category-panel.open .category-panel-card{transform:translateY(0) scale(1);opacity:1}
.category-panel-card h2{margin:5px 0 10px}.category-panel-card p{margin:0 0 24px;color:#666;line-height:1.65}
.category-panel-close{position:absolute;top:18px;right:18px;width:40px;height:40px;border:1px solid rgba(20,20,20,.14);border-radius:50%;background:rgba(255,255,255,.5);font-size:26px;cursor:pointer}
body.category-panel-open{overflow:hidden!important}

/* ===== 3x3 BRAND GRID ===== */
.brand-logo-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;padding:0!important}
.brand-logo-grid .brand-logo-card{height:100px!important;min-height:100px!important;padding:8px 14px!important;border:1px solid rgba(25,25,25,.08)!important;border-radius:16px!important;background:rgba(255,255,255,.76)!important;box-shadow:0 6px 18px rgba(25,25,25,.045)!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important}
.brand-logo-grid .brand-logo-card img{width:220px!important;height:70px!important;max-width:100%!important;max-height:70px!important;object-fit:contain!important;object-position:center!important;display:block!important}
@media(max-width:699px){.brand-logo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}.brand-logo-grid .brand-logo-card{height:86px!important;min-height:86px!important;padding:6px 10px!important}.brand-logo-grid .brand-logo-card img{width:190px!important;height:62px!important;max-height:62px!important}.category-panel{padding:14px;align-items:end}.category-panel-card{padding:28px 22px;border-radius:24px 24px 18px 18px}}

}

/* ===== HERO PRODUCT VIDEO ===== */
.hero-product-video{
  position:absolute;
  z-index:1;
  right:6vw;
  top:50%;
  width:min(42vw,560px);
  aspect-ratio:16/10;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.22);
  border-radius:28px;
  overflow:hidden;
  background:rgba(20,20,20,.24);
  box-shadow:0 28px 70px rgba(0,0,0,.24);
}
.hero-product-video video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.hero-product-video-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(0,0,0,.06),rgba(0,0,0,.18));
  pointer-events:none;
}
.hero-content{
  position:relative;
  z-index:2;
  max-width:min(52vw,720px);
}
.hero-note{
  position:relative;
  z-index:2;
}
@media(max-width:999px){
  .hero-product-video{
    right:5vw;
    width:min(43vw,440px);
  }
  .hero-content{
    max-width:52vw;
  }
}
@media(max-width:699px){
  .hero{
    min-height:100svh;
    height:auto;
    padding-bottom:100px;
    display:flex;
    align-items:flex-end;
  }
  .hero-product-video{
    top:18vh;
    right:6vw;
    width:88vw;
    height:auto;
    aspect-ratio:16/10;
    transform:none;
    border-radius:22px;
  }
  .hero-content{
    max-width:none;
    width:100%;
    padding:0 7vw 7vh;
    margin-top:46vh;
  }
  .hero-note{
    display:none;
  }
}

/* ===== OWN BRAND — VARUNA ===== */
.own-brand{
  display:grid;
  grid-template-columns:1fr 1.65fr;
  align-items:center;
  gap:24px;
  margin:0 0 22px;
  padding:18px 22px;
  min-height:132px;
  border:1px solid rgba(25,25,25,.08);
  border-radius:20px;
  background:rgba(255,255,255,.76);
  box-shadow:0 8px 24px rgba(25,25,25,.045);
  overflow:hidden;
}
.own-brand-copy{
  padding-left:4px;
}
.own-brand-copy h3{
  margin:4px 0 3px;
  font:500 28px "Cormorant Garamond",serif;
}
.own-brand-copy p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}
.own-brand-logo{
  height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.own-brand-logo img{
  width:100%;
  height:100%;
  max-width:600px;
  object-fit:contain;
  object-position:center;
  display:block;
}
@media(max-width:699px){
  .own-brand{
    grid-template-columns:1fr;
    gap:8px;
    padding:14px 16px;
    min-height:150px;
  }
  .own-brand-copy{
    padding-left:0;
  }
  .own-brand-copy h3{
    font-size:25px;
  }
  .own-brand-logo{
    height:82px;
  }
}

/* ===== HERO PRODUCT VIDEO — FULL BANNER ===== */
.hero-bg{
  background:transparent!important;
  z-index:-3!important;
}
.hero-bg:after{
  display:none!important;
}
.hero-product-video{
  position:absolute!important;
  inset:0!important;
  z-index:-2!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
  transform:none!important;
  border:0!important;
  border-radius:0!important;
  background:#111!important;
  box-shadow:none!important;
  overflow:hidden!important;
  pointer-events:none!important;
}
.hero-product-video video{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  display:block!important;
  filter:contrast(1.015) saturate(.96)!important;
}
.hero-product-video-shade{
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:
    radial-gradient(ellipse at 64% 46%,
      rgba(0,0,0,0) 18%,
      rgba(0,0,0,.07) 48%,
      rgba(0,0,0,.34) 100%),
    linear-gradient(90deg,
      rgba(0,0,0,.78) 0%,
      rgba(0,0,0,.46) 29%,
      rgba(0,0,0,.12) 67%,
      rgba(0,0,0,.28) 100%),
    linear-gradient(0deg,
      rgba(0,0,0,.52) 0%,
      rgba(0,0,0,.08) 34%,
      rgba(0,0,0,.20) 100%)!important;
}
.hero-glow{
  z-index:-1!important;
  background:
    radial-gradient(ellipse at 62% 45%,
      rgba(255,255,255,.02) 0%,
      rgba(0,0,0,0) 42%,
      rgba(0,0,0,.22) 100%),
    linear-gradient(90deg,rgba(0,0,0,.12),transparent 70%)!important;
  pointer-events:none!important;
}
.hero-content{
  position:relative!important;
  z-index:2!important;
}
.hero-note{
  z-index:2!important;
}

/* ===== VARUNA — CLEAN, LARGER OWN-BRAND MARK ===== */
.own-brand-logo{
  height:112px!important;
}
.own-brand-logo img{
  width:100%!important;
  height:100%!important;
  max-width:720px!important;
  object-fit:contain!important;
  object-position:center!important;
}
@media(max-width:699px){
  .own-brand-logo{height:92px!important;}
  .own-brand-logo img{max-width:100%!important;}
}

/* ===== DESKTOP NAV END PADDING ===== */
@media(min-width:1000px){
  header nav{
    margin-right:22px!important;
  }
}

@media(max-width:699px){
  .hero-product-video{
    inset:0!important;
    width:100%!important;
    height:100%!important;
    transform:none!important;
    border-radius:0!important;
  }
  .hero-product-video video{
    object-position:center center!important;
  }
}

/* Hero video must be a visual background element, never a media-control UI. */
.hero-product-video video{
  pointer-events:none!important;
  user-select:none!important;
}

.hero-product-video video{
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-select:none!important;
}

/* ===== HERO PRODUCT MOTION — AUTOPLAYING ANIMATED WEBP ===== */
.hero-product-video{
  overflow:hidden!important;
}
.hero-product-video .hero-product-motion{
  width:100%!important;
  height:100%!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}

/* On phones the full source composition is more important than filling the
   narrow viewport. Contain prevents the faucet/product from being cropped. */
@media(max-width:699px){
  .hero-product-video{
    top:11vh!important;
    left:5vw!important;
    right:5vw!important;
    width:90vw!important;
    height:auto!important;
    aspect-ratio:1920 / 1222!important;
    transform:none!important;
    border-radius:20px!important;
  }
  .hero-product-video .hero-product-motion{
    object-fit:contain!important;
    object-position:center!important;
  }
  .hero-content{
    margin-top:43vh!important;
  }
}

.hero-product-motion{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
}

/* ===== MOBILE HERO REWORK ===== */
@media(max-width:699px){
  .hero{
    position:relative!important;
    min-height:100svh!important;
    height:100svh!important;
    padding:0!important;
    display:block!important;
    overflow:hidden!important;
    isolation:isolate!important;
  }

  .hero-product-video{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    aspect-ratio:auto!important;
    border:0!important;
    border-radius:0!important;
    transform:none!important;
    z-index:0!important;
    background:#171717!important;
  }

  .hero-product-video .hero-product-motion{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:52% 50%!important;
    display:block!important;
  }

  /* Stronger lower vignette keeps the copy readable without hiding the product. */
  .hero-product-video-shade{
    position:absolute!important;
    inset:0!important;
    background:
      linear-gradient(to bottom,
        rgba(0,0,0,.18) 0%,
        rgba(0,0,0,.03) 34%,
        rgba(0,0,0,.20) 55%,
        rgba(0,0,0,.78) 100%)!important;
    z-index:1!important;
    pointer-events:none!important;
  }

  .hero-content{
    position:absolute!important;
    z-index:3!important;
    left:7vw!important;
    right:7vw!important;
    bottom:9vh!important;
    width:auto!important;
    max-width:none!important;
    padding:0!important;
    margin:0!important;
  }

  .hero-content h1{
    margin-top:0!important;
    font-size:clamp(52px,15vw,82px)!important;
    line-height:.88!important;
    max-width:92vw!important;
  }

  .hero-content p{
    max-width:88vw!important;
    margin-top:22px!important;
    color:rgba(255,255,255,.9)!important;
  }

  .hero-content .primary-btn{
    margin-top:26px!important;
  }

  .hero-note{
    position:absolute!important;
    z-index:3!important;
    bottom:3vh!important;
    left:7vw!important;
    right:7vw!important;
    justify-content:flex-start!important;
  }
}

/* Keep the animation visually smooth without GPU scaling artifacts. */
.hero-product-motion{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
}

/* ===== HD MP4 HERO ===== */
.hero-product-motion{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  transform:translateZ(0);
  pointer-events:none!important;
  user-select:none!important;
}
@media(max-width:699px){
  .hero-product-video .hero-product-motion{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:52% 50%!important;
  }
}

/* ===== MOBILE HERO: FULL BACKDROP + SHARP UNCROPPED VIDEO ===== */
@media(max-width:699px){
  .hero-product-video{
    background:#161616!important;
  }

  .hero-product-video::before{
    content:"";
    position:absolute;
    inset:-8%;
    z-index:0;
    background-image:url("assets/images/hero-poster.jpg");
    background-size:cover;
    background-position:center;
    filter:blur(24px);
    transform:scale(1.08);
    opacity:.72;
  }

  .hero-product-video .hero-product-motion{
    z-index:1!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
    object-position:center!important;
    background:transparent!important;
  }

  .hero-product-video-shade{
    z-index:2!important;
  }

  /* The phone should get the compact 3×3 brand grid requested:
     9 partner brands = 3 columns × 3 rows. */
  .brand-logo-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }

  .brand-logo-grid .brand-logo-card{
    height:78px!important;
    min-height:78px!important;
    padding:6px 5px!important;
    border-radius:14px!important;
  }

  .brand-logo-grid .brand-logo-card img{
    width:100%!important;
    height:58px!important;
    max-width:100%!important;
    max-height:58px!important;
    object-fit:contain!important;
  }

  .brand-logo-grid .brand-logo-card img[alt="Soncera"]{
    width:100%!important;
    height:58px!important;
    max-height:58px!important;
  }
}


/* ===== MOBILE HERO — MODERATE CROP + VIGNETTE FILL ===== */
@media(max-width:699px){
  .hero{
    position:relative!important;
    width:100%!important;
    height:100svh!important;
    min-height:100svh!important;
    overflow:hidden!important;
    display:block!important;
    background:#171717!important;
  }

  .hero-product-video{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:#171717!important;
    z-index:0!important;
  }

  /*
   * Moderate crop: enough to fill the portrait banner, but substantially
   * less aggressive than the previous version. The vignette hides the
   * remaining aspect-ratio edges naturally.
   */
  .hero-product-video .hero-product-motion{
    position:absolute!important;
    left:-12%!important;
    top:-2%!important;
    width:124%!important;
    height:104%!important;
    object-fit:cover!important;
    object-position:50% 47%!important;
    display:block!important;
    background:#171717!important;
    z-index:0!important;
  }

  /*
   * The vignette intentionally extends beyond the visible video edges.
   * This makes the transition into the banner background seamless rather
   * than leaving visible rectangular borders.
   */
  .hero-product-video-shade{
    position:absolute!important;
    inset:0!important;
    z-index:2!important;
    pointer-events:none!important;
    background:
      linear-gradient(
        to bottom,
        rgba(12,12,12,.90) 0%,
        rgba(12,12,12,.58) 8%,
        rgba(12,12,12,.16) 22%,
        rgba(12,12,12,.02) 42%,
        rgba(12,12,12,.10) 57%,
        rgba(12,12,12,.48) 75%,
        rgba(12,12,12,.94) 100%
      ),
      linear-gradient(
        to right,
        rgba(12,12,12,.35) 0%,
        rgba(12,12,12,0) 18%,
        rgba(12,12,12,0) 82%,
        rgba(12,12,12,.35) 100%
      )!important;
  }

  .hero-content{
    position:absolute!important;
    left:7vw!important;
    right:7vw!important;
    bottom:9vh!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    z-index:4!important;
  }

  .hero-content h1{
    margin:0!important;
    max-width:94vw!important;
    font-size:clamp(50px,14.2vw,78px)!important;
    line-height:.88!important;
    letter-spacing:-.025em!important;
  }

  .hero-content p{
    max-width:90vw!important;
    margin:22px 0 0!important;
    color:rgba(255,255,255,.92)!important;
  }

  .hero-content .primary-btn{
    margin-top:25px!important;
  }

  .hero-note{
    z-index:4!important;
    bottom:2.8vh!important;
  }
}

/* ===== MOBILE RANGE GRID ===== */
@media(max-width:699px){
  .range{
    padding-top:72px!important;
  }

  .range .section-head{
    margin-bottom:18px!important;
  }

  .range-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .range-card,
  .range-main{
    grid-row:auto!important;
    min-height:0!important;
    height:210px!important;
    border-radius:14px!important;
  }

  .range-card .range-copy{
    left:14px!important;
    right:12px!important;
    bottom:14px!important;
  }

  .range-card .range-copy small{
    font-size:7px!important;
  }

  .range-card .range-copy h3{
    font-size:25px!important;
    line-height:.95!important;
    margin:5px 0!important;
  }

  .range-card .range-copy p{
    font-size:8px!important;
    line-height:1.25!important;
    margin:0 0 7px!important;
  }

  .range-card .range-copy b{
    font-size:8px!important;
  }
}

/* ===== MOBILE SECTION SNAP — HERO / BRANDS / RANGE ===== */
@media(max-width:699px){
  html{
    scroll-snap-type:y proximity;
    scroll-behavior:smooth;
  }

  /* Only these first three sections participate in snapping. */
  #home,
  #brands,
  #range{
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }

  #home{
    min-height:100svh!important;
    height:100svh!important;
  }

  #brands{
    scroll-margin-top:0!important;
  }

  #range{
    scroll-margin-top:0!important;
  }
}

/* ===== PHONE HERO — POLISHED VIDEO COMPOSITION ===== */
@media(max-width:699px){
  .hero{
    position:relative!important;
    width:100%!important;
    height:100svh!important;
    min-height:100svh!important;
    overflow:hidden!important;
    display:block!important;
    background:#121212!important;
  }

  /* Full-bleed, blurred version of the same video fills the banner.
     This is the visual "canvas" around the sharp foreground video. */
  .hero-product-video{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:#121212!important;
    z-index:0!important;
  }

  .hero-product-video::before{
    content:""!important;
    position:absolute!important;
    inset:-12%!important;
    z-index:0!important;
    background-image:url("assets/images/hero-poster.jpg")!important;
    background-size:cover!important;
    background-position:center 34%!important;
    filter:blur(34px)!important;
    transform:scale(1.12)!important;
    opacity:.58!important;
  }

  /*
   * The foreground video is deliberately much larger than the previous
   * 70vw treatment. It is wide enough to read as a designed hero element,
   * while contain preserves essentially the entire source frame.
   */
  .hero-product-video .hero-product-motion{
    position:absolute!important;
    left:6vw!important;
    top:17vh!important;
    width:88vw!important;
    height:auto!important;
    max-width:88vw!important;
    max-height:43vh!important;
    aspect-ratio:16 / 9!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
    display:block!important;
    background:transparent!important;
    border-radius:4px!important;
    z-index:1!important;
    box-shadow:0 20px 55px rgba(0,0,0,.24)!important;
  }

  /*
   * Deep but soft vignette. It is strongest at the extreme edges and
   * around the top/bottom of the banner, while leaving the video readable.
   */
  .hero-product-video-shade{
    position:absolute!important;
    inset:0!important;
    z-index:2!important;
    pointer-events:none!important;
    background:
      radial-gradient(
        ellipse 58% 50% at 50% 34%,
        rgba(10,10,10,0) 22%,
        rgba(10,10,10,.08) 52%,
        rgba(10,10,10,.42) 80%,
        rgba(10,10,10,.78) 100%
      ),
      linear-gradient(
        to bottom,
        rgba(10,10,10,.78) 0%,
        rgba(10,10,10,.12) 15%,
        rgba(10,10,10,0) 31%,
        rgba(10,10,10,0) 63%,
        rgba(10,10,10,.18) 76%,
        rgba(10,10,10,.86) 100%
      )!important;
  }

  /* Keep the copy clearly below the media instead of competing with it. */
  .hero-content{
    position:absolute!important;
    left:7vw!important;
    right:7vw!important;
    bottom:8.5vh!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    z-index:4!important;
  }

  .hero-content h1{
    margin:0!important;
    max-width:94vw!important;
    font-size:clamp(48px,13.5vw,74px)!important;
    line-height:.88!important;
    letter-spacing:-.025em!important;
  }

  .hero-content p{
    max-width:88vw!important;
    margin:18px 0 0!important;
    color:rgba(255,255,255,.9)!important;
    font-size:14px!important;
    line-height:1.55!important;
  }

  .hero-content .primary-btn{
    margin-top:22px!important;
  }

  .hero-note{
    display:none!important;
  }
}

/* Small phones: make the media slightly shorter so the copy never collides. */
@media(max-width:390px){
  .hero-product-video .hero-product-motion{
    top:16vh!important;
    width:88vw!important;
    max-width:88vw!important;
    max-height:37vh!important;
  }

  .hero-content{
    bottom:7vh!important;
  }

  .hero-content h1{
    font-size:clamp(45px,13.2vw,62px)!important;
  }
}

/* =========================================================
   FINAL MOBILE HERO — FULL-BLEED, VISIBLE, PROFESSIONAL
   ========================================================= */
@media(max-width:699px){
  .hero{
    position:relative!important;
    width:100%!important;
    height:100svh!important;
    min-height:100svh!important;
    overflow:hidden!important;
    background:#111!important;
    isolation:isolate!important;
  }

  .hero-product-video{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    margin:0!important;
    border:0!important;
    border-radius:0!important;
    overflow:hidden!important;
    background:#111!important;
    z-index:0!important;
  }

  /* The actual full-quality video fills the entire phone banner. */
  .hero-product-video .hero-product-motion,
  .hero-product-video video{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    min-width:100%!important;
    min-height:100%!important;
    object-fit:cover!important;
    object-position:center 44%!important;
    transform:none!important;
    border-radius:0!important;
    display:block!important;
    filter:brightness(.72) saturate(.92) contrast(1.02)!important;
    box-shadow:none!important;
    z-index:1!important;
  }

  /*
   * A restrained vignette keeps the whole banner visually coherent and
   * protects the white hero copy without obscuring the product.
   */
  .hero-product-video-shade{
    position:absolute!important;
    inset:0!important;
    z-index:2!important;
    pointer-events:none!important;
    background:
      radial-gradient(
        ellipse 82% 72% at 50% 43%,
        rgba(0,0,0,0) 34%,
        rgba(0,0,0,.08) 58%,
        rgba(0,0,0,.38) 83%,
        rgba(0,0,0,.70) 100%
      ),
      linear-gradient(
        to bottom,
        rgba(0,0,0,.48) 0%,
        rgba(0,0,0,0) 23%,
        rgba(0,0,0,.02) 57%,
        rgba(0,0,0,.48) 100%
      )!important;
  }

  /* Keep header above the media and copy comfortably readable. */
  header{
    z-index:20!important;
  }

  .hero-content{
    position:absolute!important;
    left:7vw!important;
    right:7vw!important;
    bottom:8.5vh!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    z-index:4!important;
  }

  .hero-content h1{
    max-width:94vw!important;
    font-size:clamp(48px,13.5vw,74px)!important;
    line-height:.88!important;
  }

  .hero-content p{
    max-width:90vw!important;
    margin-top:18px!important;
    color:rgba(255,255,255,.92)!important;
    text-shadow:0 2px 18px rgba(0,0,0,.34)!important;
  }

  .hero-content .primary-btn{
    margin-top:22px!important;
  }

  .hero-note{
    display:none!important;
  }
}

/* Slightly tighter treatment on very small phones. */
@media(max-width:390px){
  .hero-product-video .hero-product-motion,
  .hero-product-video video{
    object-position:center 43%!important;
  }

  .hero-content{
    bottom:7vh!important;
  }

  .hero-content h1{
    font-size:clamp(45px,13.2vw,62px)!important;
  }
}

/* =========================================================
   VARUNA — SLIGHTLY SMALLER ON PHONE
   ========================================================= */
@media(max-width:699px){
  .own-brand{
    min-height:132px!important;
    padding:12px 15px!important;
    gap:6px!important;
  }

  .own-brand-copy h3{
    font-size:23px!important;
  }

  .own-brand-copy p{
    font-size:11px!important;
    line-height:1.4!important;
  }

  .own-brand-logo{
    height:70px!important;
  }

  .own-brand-logo img{
    max-height:70px!important;
  }
}

/* ===== VARUNA MOBILE — NOTICEABLY COMPACT, STILL BALANCED ===== */
@media(max-width:699px){
  .own-brand{
    min-height:118px!important;
    padding:10px 14px!important;
    gap:4px!important;
    margin-bottom:18px!important;
  }

  .own-brand-copy h3{
    font-size:21px!important;
    line-height:1!important;
    margin:3px 0 2px!important;
  }

  .own-brand-copy p{
    font-size:10px!important;
    line-height:1.3!important;
  }

  .own-brand-logo{
    height:58px!important;
    min-height:58px!important;
  }

  .own-brand-logo img{
    width:100%!important;
    height:58px!important;
    max-height:58px!important;
    object-fit:contain!important;
  }
}

/* Restore Varuna mobile typography; keep the accepted compact logo/card. */
@media(max-width:699px){
  .own-brand-copy h3{
    font-size:25px!important;
    line-height:1!important;
  }
  .own-brand-copy p{
    font-size:12px!important;
    line-height:1.5!important;
  }
}

/* Keep the mobile video crisp; sharpening is baked into the dedicated mobile asset. */
@media(max-width:699px){
  .hero-product-video .hero-product-motion,
  .hero-product-video video{
    filter:brightness(.72) saturate(.92) contrast(1.02)!important;
    image-rendering:auto!important;
  }
}

/* Jaquar optical size correction */
.brand-logo-grid .brand-logo-card img[alt="Jaquar"]{
  width:255px!important;
  height:82px!important;
  max-width:100%!important;
  max-height:82px!important;
}
@media(max-width:699px){
  .brand-logo-grid .brand-logo-card img[alt="Jaquar"]{
    width:220px!important;
    height:68px!important;
    max-height:68px!important;
  }
}

/* ===== MOBILE VIDEO SOURCE/COMPOSITION FIX ===== */
@media(max-width:699px){
  .hero-product-video{
    top:0!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    height:100%!important;
    aspect-ratio:auto!important;
    border-radius:0!important;
    overflow:hidden!important;
  }

  .hero-product-video .hero-product-motion{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    min-width:100%!important;
    min-height:100%!important;
    aspect-ratio:auto!important;
    object-fit:cover!important;
    object-position:center center!important;
    transform:none!important;
    border-radius:0!important;
    filter:brightness(.78) saturate(.96) contrast(1.03)!important;
    image-rendering:auto!important;
  }
}