@font-face{font-family:'Open Sauce One';src:url('/fonts/open-sauce-one/OpenSauceOne-Medium.woff2') format('woff2');font-display:swap;font-weight:500}
:root{--gh-nav:64px;--gh-black:#0F0F0F;--gh-white:#fff;--gh-grey:#F5F5F5;--gh-line:#E3E3DE;--gh-muted:#545454;--gh-orange:#ff5e00;--gh-font:'Open Sauce One','Helvetica Neue',Arial,sans-serif;
/* design-system.html tokens: --grey #F5F5F5, --ease 200ms cubic-bezier(.4,0,.2,1) */
--gh-hover:#F5F5F5;--gh-hover-radius:0;--gh-ease:200ms cubic-bezier(.4,0,.2,1);--gh-subtext:#545454;--gh-dim:.45;
/* grace period before the mega menu closes on mouse-out */
--gh-mega-grace:260ms;
/* not a design-system colour: launch tag, see note to Amit */
--gh-green:#0B7A3B}
.global-header,.global-header *,.global-promo,.global-promo *{box-sizing:border-box}
.global-header{position:fixed;inset:0 0 auto;z-index:100;height:var(--gh-nav);background:rgba(255,255,255,.98);border-bottom:1px solid var(--gh-line);color:var(--gh-black);font-family:var(--gh-font);font-weight:500;letter-spacing:-.025em}
.global-header__inner{width:90%;max-width:1760px;height:100%;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.global-header__logo{display:flex;align-items:center;width:164px;height:24px;white-space:nowrap;text-decoration:none;color:inherit}.global-header__logo img,.global-header__logo svg{display:block;width:100%;height:auto}
/* gap is reduced from 2.5rem to offset the .6rem side padding added to each link below,
   so the visual rhythm between items matches the pre-hover-background layout */
/* type below matches what typography.css forces, so the header renders identically on
   pages that load typography.css and on about.html, which deliberately does not */
.global-header__nav{height:100%;display:flex;align-items:center;gap:clamp(.2rem,1.3vw,1.3rem);font-size:.9rem;font-weight:500;letter-spacing:-.02em}
.global-header__item{height:100%;display:flex;align-items:center}.global-header__link{position:relative;padding:.4rem .6rem;color:inherit;text-decoration:none;white-space:nowrap;font-weight:500;border-radius:0;transition:background-color var(--gh-ease)}
.global-header__link:hover{background:var(--gh-hover)}
/* underline is reserved for the active page; hover uses the grey background instead */
.global-header__link::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:.15rem;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--gh-ease)}.global-header__link.is-active::after{transform:scaleX(1)}
/* no border-top here: the header's own 1px border-bottom already draws the seam.
   Having both produced a 2px stroke when the mega menu was open. */
/* The hover item is only as wide as its link, so travelling diagonally towards the panel
   leaves that column while still inside the header strip. --gh-mega-grace holds the panel
   open long enough to get there; re-entering within the grace period cancels the close. */
.global-mega{position:fixed;left:0;right:0;top:var(--gh-nav);z-index:99;background:var(--gh-white);border-top:0;box-shadow:0 24px 42px rgba(0,0,0,.09);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity 200ms ease,transform 200ms ease,visibility 200ms ease;transition-delay:var(--gh-mega-grace)}
.global-header__item:hover .global-mega,.global-header__item:focus-within .global-mega{opacity:1;visibility:visible;transform:none;transition-delay:0ms}
/* vertical padding moved off __inner and onto the two columns, so the grid row spans the
   full panel height and the utility column's border-left runs edge to edge */
.global-mega__inner{width:90%;max-width:1500px;margin-inline:auto;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(210px,250px);gap:clamp(2rem,4vw,4.5rem)}
/* row gap reduced from 2.25rem to offset the .75rem block padding on each thumbnail */
.global-mega__products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem .5rem;padding:2.75rem 0 3rem}
.global-mega__product{display:flex;flex-direction:column;align-items:center;text-align:center;color:inherit;text-decoration:none;min-width:0;padding:.75rem .5rem;border-radius:0;transition:background-color var(--gh-ease)}
.global-mega__product:hover{background:var(--gh-hover)}
/* hovering any thumbnail dims its siblings, so the active one reads as selected */
.global-mega__products:hover .global-mega__product{opacity:var(--gh-dim);transition:opacity var(--gh-ease),background-color var(--gh-ease)}
.global-mega__products:hover .global-mega__product:hover{opacity:1}
.global-mega__media{display:flex;align-items:flex-end;justify-content:center;width:100%;height:105px;margin-bottom:.85rem}.global-mega__media img{display:block;width:125px;height:100%;object-fit:contain;object-position:center bottom;transition:transform 200ms ease}.global-mega__product:hover img{transform:translateY(-3px)}
.global-mega__name{font-size:1rem}
/* launch tag. font-size is !important to beat typography.css's `body *{font-size:inherit
   !important}`; every other property resolves normally, so it renders the same on
   about.html, which does not load typography.css. */
.global-mega__tag{display:inline-block;margin-top:.4rem;padding:.2rem .45rem;background:var(--gh-green);color:#fff;font-size:.8rem!important;line-height:1.2;letter-spacing:-.02em;text-transform:uppercase;border-radius:0;white-space:nowrap}
.global-mega__utility{border-left:1px solid var(--gh-line);padding:2.75rem 0 3rem clamp(1.75rem,3vw,3rem);display:flex;flex-direction:column;align-items:flex-start;gap:1rem}.global-mega__utility a{position:relative;color:inherit;text-decoration:none;font-size:1rem}.global-mega__utility a:first-child{font-size:1rem;margin-bottom:.3rem}.global-mega__utility a::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 200ms ease}.global-mega__utility a:hover::after{transform:scaleX(1)}
/* hovering the utility list dims the rest and holds the hovered item at full black */
.global-mega__utility a{transition:color var(--gh-ease)}
.global-mega__utility:hover a{color:var(--gh-subtext)}
.global-mega__utility a:hover{color:var(--gh-black)}
.global-header__burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:24px;height:24px;padding:0;border:0;background:none;color:inherit}.global-header__burger span{display:block;width:100%;height:1.5px;background:currentColor;transition:transform 200ms ease,opacity 200ms ease}.global-header__burger[aria-expanded=true] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}.global-header__burger[aria-expanded=true] span:nth-child(2){opacity:0}.global-header__burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.global-mobile{position:fixed;inset:var(--gh-nav) 0 0;z-index:98;background:var(--gh-white);overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all 200ms ease}.global-mobile.is-open{opacity:1;visibility:visible;transform:none}.global-mobile__inner{width:90%;margin-inline:auto;padding:1.25rem 0 3rem}.global-mobile__heading{display:block;padding:1rem 0;font-size:1rem;color:inherit;text-decoration:none}.global-mobile__products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.8rem 1rem;padding-bottom:1.5rem;border-bottom:1px solid var(--gh-line)}.global-mobile__product{display:flex;flex-direction:column;align-items:center;text-align:center;color:inherit;text-decoration:none}.global-mobile__product img{width:100%;height:110px;object-fit:contain}.global-mobile__product span{margin-top:.5rem;font-size:.9rem}.global-mobile__link{display:block;padding:1.2rem 0;border-bottom:1px solid var(--gh-line);font-size:1rem;color:inherit;text-decoration:none}
.global-promo{margin-top:var(--gh-nav);min-height:52px;padding:.8rem 5%;display:flex;align-items:center;justify-content:center;gap:.4rem;background:var(--gh-orange);color:var(--gh-white);font:500 .9rem/1.35 var(--gh-font);letter-spacing:-.025em;text-align:center;animation:global-promo-settle 1.4s ease-out forwards}.global-promo a{color:inherit;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
/* orange for the first second, then settles to grey */
@keyframes global-promo-settle{0%,71.4%{background:var(--gh-orange);color:var(--gh-white)}100%{background:var(--gh-grey);color:var(--gh-muted)}}
body.has-global-header{padding-top:0!important}body.has-global-header main{padding-top:0!important}body.global-menu-open{overflow:hidden}
@media(prefers-reduced-motion:reduce){.global-promo{animation:none;background:var(--gh-grey);color:var(--gh-muted)}}
@media(max-width:980px){.global-header__nav{display:none}.global-header__burger{display:flex}.global-promo{min-height:58px;padding:.7rem 1.25rem;font-size:.8rem;flex-wrap:wrap;column-gap:.3rem;row-gap:0}}
@media(max-width:620px){:root{--gh-nav:58px}.global-header__logo{width:138px;height:20px}.global-mega{display:none}}

/* Smart door locks menu: two models */
.global-mega__products--two{grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- site footer: one footer on every page (scripts/site_footer.py) ----------
   Black, a hairline grid: four menus, four help cells, the legal line, then the giant NATIVE wordmark.
   The wordmark is dark on black; holographic foil shows through a soft spot that follows the pointer. */
.site-footer{--sf-fg:#F5F5F5;--sf-muted:#8E8E87;--sf-line:#262626;background:#000;color:var(--sf-fg);font-family:inherit;
  position:relative;z-index:1;overflow:hidden;padding-top:clamp(24px,3vw,40px)}
.site-footer__inner{width:90%;max-width:1500px;margin-inline:auto}
.site-footer__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--sf-line)}
.site-footer__cell{padding:32px clamp(16px,2vw,32px) 40px;border-left:1px solid var(--sf-line);min-width:0}
.site-footer__cell:first-child{border-left:0;padding-left:0}
.site-footer h2{margin:0 0 20px;font-size:.6875rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--sf-muted);line-height:1.4}
.site-footer h2 a{color:inherit;text-decoration:none}
.site-footer h2 a:hover{color:var(--sf-fg)}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.site-footer__cell li a{color:var(--sf-fg);text-decoration:none;font-size:1rem;line-height:1.35;letter-spacing:-.01em;transition:color .2s}
.site-footer__cell ul:hover li a{color:var(--sf-muted)}
.site-footer__cell ul li a:hover,.site-footer li a[aria-current="page"]{color:var(--sf-fg)}
.site-footer li a[aria-current="page"]{text-decoration:underline;text-underline-offset:4px}
.site-footer__more{margin-top:6px}
.site-footer__more a{color:var(--sf-muted)!important;font-size:.8125rem!important}
.site-footer__more a::after,.site-footer__go::after{content:" →"}
.site-footer__more a:hover{color:var(--sf-fg)!important}
.site-footer__row--help .site-footer__cell{padding-block:28px 32px}
.site-footer__row--help h2{margin-bottom:12px;font-size:.9375rem;letter-spacing:-.01em;text-transform:none;color:var(--sf-fg)}
.site-footer__row--help p{margin:0;font-size:.8125rem;line-height:1.6;color:var(--sf-muted);max-width:34ch}
.site-footer__row--help p a{color:var(--sf-fg);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.site-footer__go{display:inline-block;margin-top:14px;font-size:.8125rem;color:var(--sf-fg);text-decoration:none}
.site-footer__go:hover{text-decoration:underline;text-underline-offset:3px}
.site-footer__legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding:22px 0}
.site-footer__legal p{margin:0;font-size:.75rem;line-height:1.5;color:var(--sf-muted)}
.site-footer__legal ul{flex-direction:row;flex-wrap:wrap;gap:8px 24px}
.site-footer__legal a{font-size:.75rem;color:var(--sf-muted);text-decoration:none}
.site-footer__legal a:hover{color:var(--sf-fg)}
/* giant wordmark: full width of the page margin, its bottom sliced off by the page edge */
.site-footer__word{width:90%;max-width:1500px;margin:clamp(24px,4vw,56px) auto 0;height:calc(min(90vw,1500px) * 792 / 6950 * .8);overflow:hidden;line-height:0}
.site-footer__word svg{display:block;width:100%;height:auto}
@media(max-width:980px){.site-footer__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer__cell:nth-child(odd){border-left:0;padding-left:0}
  .site-footer__cell:nth-child(n+3){border-top:1px solid var(--sf-line)}}
@media(max-width:560px){.site-footer__row--help{grid-template-columns:1fr}
  .site-footer__row--help .site-footer__cell{border-left:0;padding-left:0;border-top:1px solid var(--sf-line)}
  .site-footer__row--help .site-footer__cell:first-child{border-top:0}
  .site-footer__legal{flex-direction:column;align-items:flex-start}}

/* menus with a dropdown: a small caret after the label, turned up while the menu is open */
.global-header__link--menu{display:inline-flex;align-items:center;gap:.3rem}
.global-header__link--menu::after{right:1.55rem}
.global-header__caret{width:.75rem;height:.75rem;flex:none;opacity:.7;transition:transform var(--gh-ease),opacity var(--gh-ease)}
.global-header__item:hover .global-header__caret,.global-header__item:focus-within .global-header__caret{transform:rotate(180deg);opacity:1}

/* pages without the offer strip: keep content below the fixed header */
.global-header-spacer{height:var(--gh-nav)}
/* purifier shots are on white: multiply keeps them clean on the hover tint */
.global-mega__media img[src*="home/products/"],.global-mobile__product img[src*="home/products/"]{mix-blend-mode:multiply}

/* "New" pill (26 Oct 2026, after Ather's, then holographic): a small rounded pill of iridescent foil that keeps flowing
   slowly sideways, the same foil colours as the footer wordmark. Dark text for contrast. One style for every "new" product mention:
   home cards, mega menu, mobile menu, category pages. Holds still for reduced motion. */
.nv-new.nv-new,.page-index .card--v3 .card__badge.nv-new,.global-mega__tag.nv-new,.global-mobile__product span.nv-new{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex!important;align-items:center;width:auto;height:24px;margin:0;padding:0 11px!important;border-radius:0!important;
  font-family:'Open Sauce One','Helvetica Neue',Arial,sans-serif;font-size:12.5px!important;font-weight:500;line-height:1;letter-spacing:-.01em!important;
  text-transform:none!important;white-space:nowrap;color:#0F0F0F!important;vertical-align:middle;background:#EDE7FF!important;
  box-shadow:inset 0 0 0 1px rgba(11,11,11,.08),inset 0 1px 0 rgba(255,255,255,.7)}
.nv-new::before{content:none!important}
/* the foil: a strip six times the pill's width holding the rainbow twice, so only two or three soft colours show at a
   time; it slides left by exactly one rainbow (seamless linear flow). A soft sheen sits on top. */
.nv-new::after{content:"";position:absolute;inset:0 auto 0 0;width:600%;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 60%),linear-gradient(90deg,#A9C2FF 0.0%,#D9B8FF 10.0%,#FFC2DD 20.0%,#FFE5B0 30.0%,#BDF3DF 40.0%,#A9C2FF 50.0%,#D9B8FF 60.0%,#FFC2DD 70.0%,#FFE5B0 80.0%,#BDF3DF 90.0%,#A9C2FF 100%);
  animation:nv-new-flow 10s linear infinite}
@keyframes nv-new-flow{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.nv-new::after{animation:none}}
.page-index .card--v3 .card__badge.nv-new{position:absolute;top:16px;right:16px}