:root{
  --ink:#0a0a0b; --ink-2:#131316; --ink-3:#1a1a1e; --bone:#f6f4ef; --bone-2:#ece8e0;
  --orange:#ED7D0E; --orange-soft:rgba(237,125,14,.14);
  --dim:rgba(246,244,239,.62); --faint:rgba(246,244,239,.40);
  --ink-dim:rgba(10,10,11,.62); --ink-faint:rgba(10,10,11,.42);
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.16); --line-ink:rgba(10,10,11,.12);
  --green:#3fae6b;
  --display:"Poppins",system-ui,sans-serif; --ui:"Inter",system-ui,sans-serif;
  --maxw:1280px; --pad:clamp(20px,5vw,68px);
  --e:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);font-family:var(--ui);-webkit-font-smoothing:antialiased;line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* flag label: orange square + letterspaced kicker, never a pill */
.flag{display:inline-flex;align-items:center;gap:9px}
.flag i{width:9px;height:9px;background:var(--orange);border-radius:1px;flex:none}
.flag span{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--orange)}

/* cta_text: label + arrow, no container */
.cta-text{display:inline-flex;align-items:center;gap:7px;color:var(--orange);font-weight:600;font-size:14px}
.cta-text svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;transition:transform .3s var(--e)}
.cta-text:hover svg{transform:translateX(4px)}

/* squared buttons, deliberately not pills */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--orange);color:#fff;
  font-weight:600;font-size:15px;padding:14px 24px;border-radius:4px;transition:background .25s var(--e),transform .25s var(--e)}
.btn:hover{background:#ff8c1a;transform:translateY(-2px)}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.btn--ghost{background:transparent;border:1px solid var(--line-2);color:var(--bone)}
.btn--ghost:hover{background:rgba(255,255,255,.06)}
.btn--sm{padding:11px 16px;font-size:13.5px}
.btn--ink{background:var(--ink);color:var(--bone)}
.btn--ink:hover{background:#25252b}

.head{position:relative;z-index:3}
.head__row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:24px}
.head__logo{height:29px;width:auto}

/* ---------------- ATTENTION: full-bleed hero with overlay ---------------- */
.hero{position:relative;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
  min-height:min(94vh,940px)}
.hero__bg{position:absolute;inset:0;z-index:-2}
/* lifestyle image is a background here and may crop; PRODUCT shots stay object-contain */
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 36%}
.hero__scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to top,rgba(10,10,11,.97) 0%,rgba(10,10,11,.90) 20%,rgba(10,10,11,.52) 48%,rgba(10,10,11,.10) 74%,rgba(10,10,11,.42) 100%),
  linear-gradient(to right,rgba(10,10,11,.62),rgba(10,10,11,.15) 58%,transparent 78%)}
.hero__topbar{position:absolute;top:0;left:0;right:0;z-index:3}
.hero__inner{position:relative;z-index:2;width:100%;
  padding-top:clamp(96px,14vh,150px);padding-bottom:clamp(96px,10vw,150px)}
.hero__grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(18px,4vw,54px);align-items:end}
h1{font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:.92;
  font-size:clamp(46px,8vw,104px);text-transform:uppercase;text-shadow:0 2px 30px rgba(0,0,0,.45)}
h1 em{font-style:normal;color:var(--orange)}
.hero__sub{color:rgba(246,244,239,.78);font-size:clamp(15px,1.5vw,17.5px);max-width:44ch;
  margin-top:clamp(16px,2.2vw,26px)}
.stat{text-align:right}
.stat__pre{display:block;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(246,244,239,.72);margin-bottom:2px}
.stat__n{font-family:var(--display);font-weight:700;line-height:.86;letter-spacing:-.03em;
  font-size:clamp(66px,11vw,148px);color:var(--orange);display:block;text-shadow:0 2px 40px rgba(0,0,0,.5)}
.stat__n small{font-size:.42em;vertical-align:super;letter-spacing:0}
.stat__l{display:block;margin-top:8px;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(246,244,239,.72)}

/* offer strip sits on the overlay, glassy so the image reads through */
.ostrip{display:flex;flex-wrap:wrap;margin-top:clamp(20px,2.6vw,30px);
  border:1px solid rgba(255,255,255,.16);border-radius:10px;overflow:hidden;
  background:rgba(10,10,11,.42);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);max-width:560px}
.ostrip__i{flex:1 1 210px;padding:14px 18px}
.ostrip__i+.ostrip__i{border-left:1px solid rgba(255,255,255,.16)}
.ostrip__k{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);font-weight:600}
.ostrip__v{font-family:var(--display);font-weight:600;font-size:17px;margin-top:4px}
.ostrip__v small{font-family:var(--ui);font-weight:400;font-size:12.5px;color:rgba(246,244,239,.66);display:block;margin-top:2px}

.mark{position:absolute;right:clamp(16px,4vw,64px);top:clamp(84px,13vh,150px);z-index:3;
  width:clamp(84px,9vw,116px);aspect-ratio:1}
.mark svg{width:100%;height:100%}

/* ---------------- store finder, raised over the hero ---------------- */
.loc{position:relative;z-index:4;margin-top:clamp(-130px,-9vw,-80px);padding-bottom:clamp(46px,6vw,80px)}
.loc__panel{border:1px solid var(--line-2);border-top:3px solid var(--orange);border-radius:16px;
  background:linear-gradient(180deg,#17171b,#121215);overflow:hidden;
  box-shadow:0 34px 80px rgba(0,0,0,.62),0 2px 0 rgba(255,255,255,.04) inset}
.loc__phead{padding:clamp(22px,2.8vw,32px) clamp(20px,2.6vw,30px) 0}
.loc__title{font-family:var(--display);font-weight:700;font-size:clamp(25px,3.2vw,38px);
  letter-spacing:-.02em;margin-top:12px}
.loc__note{color:var(--faint);font-size:12.5px;margin-top:9px}
.loc__controls{display:flex;flex-wrap:wrap;gap:12px;padding:clamp(18px,2.2vw,24px) clamp(20px,2.6vw,30px);
  align-items:center;border-bottom:1px solid var(--line)}
.loc__controls .btn{padding:15px 22px}
.loc__search{flex:1 1 250px;display:flex;align-items:center;gap:10px;border:1px solid var(--line-2);
  border-radius:4px;padding:13px 15px;background:rgba(0,0,0,.35);transition:border-color .2s}
.loc__search:focus-within{border-color:var(--orange)}
.loc__search input{flex:1;background:none;border:none;color:var(--bone);font-size:14.5px;outline:none;min-width:0}
.loc__search input::placeholder{color:var(--faint)}
.loc__search svg{width:16px;height:16px;fill:none;stroke:var(--faint);stroke-width:1.8;flex:none}
.seg{display:flex;border:1px solid var(--line-2);border-radius:4px;overflow:hidden;flex:none}
.seg button{padding:13px 16px;font-size:13px;color:var(--dim);transition:background .2s,color .2s}
.seg button+button{border-left:1px solid var(--line-2)}
.seg button[aria-pressed="true"]{background:var(--orange);color:#fff;font-weight:600}
.loc__results{padding:4px 0}
.loc__empty{padding:26px 20px;color:var(--dim);font-size:14.5px;text-align:center}
.res{display:grid;grid-template-columns:1fr auto;gap:12px 20px;
  padding:18px clamp(20px,2.6vw,30px);align-items:center;transition:background .2s}
.res:hover{background:rgba(255,255,255,.035)}
.res+.res{border-top:1px solid var(--line)}
.res__name{font-family:var(--display);font-weight:600;font-size:17.5px;display:flex;align-items:center;
  gap:12px;flex-wrap:wrap}
.res__dist{font-size:12px;color:var(--orange);font-weight:600;letter-spacing:.04em}
.res__meta{color:var(--dim);font-size:13.5px;margin-top:6px}
.res__land{color:var(--faint);font-size:12.5px;margin-top:3px}
.res__open{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.res__open i{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;
  box-shadow:0 0 0 3px rgba(63,174,107,.18)}
.res__open.shut i{background:var(--faint);box-shadow:none}
.res__acts{display:flex;flex-wrap:wrap;gap:9px;justify-content:flex-end}
.loc__more{padding:0 clamp(20px,2.6vw,30px) 20px}

/* ---------------- reassurance ---------------- */
.why{background:var(--ink);padding-block:clamp(50px,7vw,86px)}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(13px,1.8vw,20px);margin-top:32px}
.tile{background:rgba(255,255,255,.02);border:1px solid var(--line);border-radius:12px;padding:clamp(20px,2.4vw,28px)}
.tile__ic{width:50px;height:50px;border:2px solid var(--orange);border-radius:12px;display:grid;place-items:center;margin-bottom:16px}
.tile__ic svg{width:25px;height:25px;fill:none;stroke:var(--orange);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile__t{font-family:var(--display);font-weight:600;font-size:17.5px;margin-bottom:8px}
.tile__d{color:var(--dim);font-size:14px}

/* ---------------- categories + range on bone ---------------- */
.range{background:var(--bone);color:var(--ink);padding-block:clamp(52px,7.5vw,92px)}
.range h2,.stores h2,.faq h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:clamp(28px,4.2vw,48px);margin-top:13px}
.range .lede,.stores .lede{color:var(--ink-dim);max-width:60ch;margin-top:13px;font-size:15.5px}
.cats{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,20px);margin-top:clamp(26px,3.4vw,40px)}
.cat{background:#fff;border:1px solid var(--line-ink);border-radius:12px;padding:clamp(20px,2.6vw,30px);display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center}
.cat__t{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,30px)}
.cat__d{color:var(--ink-faint);font-size:13.5px;margin-top:6px}
.cat__p{margin-top:14px;font-size:14px}
.cat__p b{font-family:var(--display);font-size:19px}
.cat__img{width:clamp(110px,14vw,190px)}
.cat__img img{width:100%;height:auto;object-fit:contain}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(13px,1.7vw,20px);margin-top:clamp(26px,3.4vw,42px)}
.card{background:#fff;border:1px solid var(--line-ink);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.card__media{background:var(--bone-2);aspect-ratio:4/3;display:grid;place-items:center;padding:16px}
.card__media img{width:100%;height:100%;object-fit:contain}
/* no-photo tile: an offset backing squircle from the orange geometry family,
   so a missing product shot reads as a designed state, not a failed load */
.card__media--none{position:relative;overflow:hidden}
.card__media--none::before{content:"";position:absolute;width:64%;aspect-ratio:1;
  background:var(--orange);opacity:.13;border-radius:38% 62% 55% 45%/45% 38% 62% 55%;
  left:8%;top:14%}
.noimg{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.noimg>span{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,30px);
  color:var(--ink);letter-spacing:-.02em}
.noimg small{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);font-weight:600}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card__body{padding:17px 17px 19px;display:flex;flex-direction:column;flex:1}
.card__name{font-family:var(--display);font-weight:600;font-size:18.5px}
.card__line{color:var(--ink-faint);font-size:12.5px;margin-top:5px;min-height:2.6em}
.card__prices{margin-top:14px;flex:1;display:flex;flex-direction:column}
/* one price the eye lands on, detail kept quiet underneath */
.pl{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pl__k{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.pl__v{font-family:var(--display);font-weight:700;font-size:clamp(24px,2.6vw,29px);letter-spacing:-.02em}
.pl__mrp{font-size:13px;color:var(--ink-faint);text-decoration:line-through}
.pl__emi{margin-top:7px;font-size:12.5px;color:var(--orange);font-weight:600}
.pl__sizes{list-style:none;margin-top:13px;padding-top:12px;border-top:1px dashed var(--line-ink);
  display:flex;flex-direction:column;gap:5px}
.pl__sizes li{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--ink-dim)}
.pl__sizes b{font-weight:600;color:var(--ink)}
.card__foot{margin-top:15px;padding-top:12px;border-top:1px solid var(--line-ink)}
.seal{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);display:inline-flex;align-items:center;gap:7px}
.seal::before{content:"";width:7px;height:7px;border:2px solid var(--orange);border-radius:50%}

.also{margin-top:24px;border-top:1px solid var(--line-ink);padding-top:20px}
.also__h{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px}
.trow{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--line-ink)}
.trow__name{font-family:var(--display);font-weight:600;font-size:16.5px}
.trow__line{color:var(--ink-faint);font-size:12.5px;margin-top:3px}
.trow__prices{display:flex;gap:22px;flex-wrap:wrap}

/* ---------------- combo ---------------- */
.combo{background:var(--ink);color:var(--bone);padding-block:clamp(50px,7vw,86px)}
.combo__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,58px);align-items:center}
.combo h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,4.2vw,48px);letter-spacing:-.02em;margin-top:13px}
.combo p{color:var(--dim);margin-top:15px;max-width:48ch;font-size:15.5px}
.calc{border:1px solid var(--line);border-radius:14px;padding:clamp(20px,3vw,30px);background:rgba(255,255,255,.02)}
.calc__row{display:flex;justify-content:space-between;gap:14px;padding:10px 0;font-size:14.5px;color:var(--dim)}
.calc__row b{color:var(--bone);font-weight:600}
.calc__row+.calc__row{border-top:1px solid var(--line)}
.calc__pay{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:15px;padding-top:17px;border-top:2px solid var(--orange)}
.calc__pay span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.calc__pay b{font-family:var(--display);font-size:clamp(28px,3.8vw,40px);color:var(--orange);font-weight:700}
.calc__emi{margin-top:11px;font-size:13.5px;color:var(--dim)}

/* ---------------- all stores ---------------- */
.stores{background:var(--bone);color:var(--ink);padding-block:clamp(52px,7.5vw,92px)}
.storegrid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(13px,1.7vw,20px);margin-top:clamp(26px,3.4vw,42px)}
.store{background:#fff;border:1px solid var(--line-ink);border-radius:12px;padding:19px;display:flex;flex-direction:column}
.store__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.store__city{font-family:var(--display);font-weight:600;font-size:16.5px}
.store__state{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.store__addr{color:var(--ink-dim);font-size:13px;margin-top:9px;flex:1}
.store__land{color:var(--ink-faint);font-size:12.5px;margin-top:6px}
.store__acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px;padding-top:14px;border-top:1px solid var(--line-ink)}
.store__acts .btn{flex:1 1 auto}

/* ---- searchable showroom list ------------------------------------------
   The list sits on bone, so this is the light counterpart of the finder's
   dark search field. It pins to the top of the screen on phones so the search
   stays in reach while the visitor scrolls the cards. */
.sfind{margin-top:clamp(22px,3vw,34px)}
.sfind__search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line-ink);
  border-radius:4px;padding:0 6px 0 15px;min-height:52px;transition:border-color .2s,box-shadow .2s}
.sfind__search:focus-within{border-color:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}
.sfind__search>svg{width:18px;height:18px;fill:none;stroke:var(--ink-faint);stroke-width:1.8;flex:none}
.sfind__search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--ink);
  font:inherit;font-size:16px;padding:14px 0}
.sfind__search input::placeholder{color:var(--ink-faint)}
.sfind__search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.sfind__clear{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:4px;color:var(--ink-dim);flex:none}
.sfind__clear:hover,.sfind__clear:focus-visible{background:var(--bone-2);color:var(--ink)}
.sfind__clear svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.sfind__row{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin-top:12px}
.sfind__count{font-size:13px;color:var(--ink-dim);font-variant-numeric:tabular-nums}
.seg--ink{border-color:var(--line-ink);background:#fff;max-width:100%;overflow-x:auto;scrollbar-width:none}
.seg--ink::-webkit-scrollbar{display:none}
.seg--ink button{color:var(--ink-dim);white-space:nowrap;flex:none}
.seg--ink button+button{border-left-color:var(--line-ink)}
.seg--ink button[aria-pressed="true"]{background:var(--orange);color:#fff}
.seg--ink button:focus-visible,.sfind__cities .cta-text:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.sfind__empty{margin-top:clamp(22px,3vw,34px);background:#fff;border:1px solid var(--line-ink);border-radius:12px;
  padding:clamp(22px,3vw,34px);text-align:center}
.sfind__emptyt{font-family:var(--display);font-weight:600;font-size:18px}
.sfind__emptyd{color:var(--ink-dim);font-size:14.5px;margin-top:8px}
.sfind__emptyd .cta-text{font-size:inherit}
.sfind__cities{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 22px;margin-top:18px}
.sfind__cities .cta-text{font-size:14.5px;padding:6px 0}
/* .store and the controls set their own display, which would override the
   hidden attribute and leave filtered cards on screen */
.storegrid .store[hidden],.sfind__clear[hidden],.sfind__empty[hidden]{display:none!important}

/* ---------------- faq ---------------- */
.faq{background:var(--ink);padding-block:clamp(50px,7vw,86px)}
.faq h2{color:var(--bone)}
.faqgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,44px);margin-top:30px}
details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:17px 0;font-weight:600;font-size:15.5px;display:flex;justify-content:space-between;align-items:center;gap:14px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--orange);font-size:20px;line-height:1;flex:none}
details[open] summary::after{content:"\2212"}
details p{color:var(--dim);font-size:14.5px;padding-bottom:17px;max-width:60ch}

.band{background:var(--ink-2);border-top:3px solid var(--orange);padding-block:clamp(38px,5vw,62px);text-align:center}
.band h2{font-family:var(--display);font-weight:700;font-size:clamp(24px,3.4vw,40px);letter-spacing:-.02em;margin-top:15px}
.band p{color:var(--dim);margin:13px auto 24px;max-width:52ch;font-size:15.5px}
.foot{background:var(--ink);border-top:1px solid var(--line);padding-block:24px;color:var(--faint);font-size:12.5px}
.foot__row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* reveal is progressive enhancement: .js is set by an inline head script, so
   with JS blocked every section stays visible */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--e),transform .7s var(--e)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

@media (max-width:1080px){
  .grid,.grid--3{grid-template-columns:repeat(2,1fr)}
  .storegrid{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  /* iOS Safari zooms any input under 16px on focus, which jolts the page */
  .loc__search input{font-size:16px}
  /* only the search stays pinned: the state filter is a one-time choice, and a
     pinned toolbar of both would hold a sixth of a phone screen */
  .sfind{position:sticky;top:0;z-index:5;background:var(--bone);margin-inline:calc(var(--pad) * -1);
    padding:10px var(--pad);border-bottom:1px solid var(--line-ink)}
  /* the four states share the full width, so none is clipped or hidden behind a
     swipe; "Andhra Pradesh" wraps to two lines rather than pushing others off */
  .sfind__row{flex-direction:column;align-items:stretch;gap:10px}
  .sfind__row .seg--ink{width:100%;overflow:visible}
  .sfind__row .seg--ink button{flex:1 1 0;min-width:0;white-space:normal;line-height:1.25;padding:10px 6px;
    display:flex;align-items:center;justify-content:center;text-align:center}
  .sfind__count{font-size:12.5px}
  .hero__grid{grid-template-columns:1fr;gap:22px}
  .stat{text-align:left}
  .combo__grid{grid-template-columns:1fr}
  .cats{grid-template-columns:1fr}
  .faqgrid{grid-template-columns:1fr}
  .res{grid-template-columns:1fr}
  .res__acts{justify-content:flex-start}
}
@media (max-width:560px){
  .grid,.grid--3{grid-template-columns:1fr}
  .storegrid{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr}
  .trow{flex-direction:column;align-items:flex-start}
  .ostrip__i+.ostrip__i{border-left:none;border-top:1px solid var(--line)}
}
/* ---------------- lifestyle break band ---------------- */
.lband{position:relative;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
  min-height:min(62vh,560px)}
.lband__bg{position:absolute;inset:0;z-index:-2}
.lband__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 52%}
.lband__scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(to top,rgba(10,10,11,.94) 0%,rgba(10,10,11,.66) 34%,rgba(10,10,11,.12) 70%,transparent 100%),
  linear-gradient(to right,rgba(10,10,11,.58),transparent 62%)}
.lband__inner{position:relative;z-index:2;width:100%;padding-block:clamp(38px,6vw,70px)}
.lband h2{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(28px,4.6vw,54px);margin-top:14px;max-width:16ch;text-shadow:0 2px 30px rgba(0,0,0,.5)}
.lband h2 em{font-style:normal;color:var(--orange)}
.lband p{color:rgba(246,244,239,.78);margin-top:14px;max-width:44ch;font-size:15.5px}

/* ---------------- brand mnemonics + units from the element kit ---------------- */
.feats__k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
  margin-top:clamp(22px,3vw,32px)}
.feats{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(10px,1.4vw,16px);margin-top:14px;max-width:780px;margin-inline:auto}
/* uniform tiles: identical size, the lockups already carry their own circular mark */
.feat{flex:0 0 clamp(132px,15vw,172px);background:#fff;border:1px solid var(--line-ink);
  border-radius:12px;padding:clamp(10px,1.1vw,16px);display:grid;place-items:center;
  transition:border-color .25s var(--e),transform .25s var(--e)}
.feat:hover{border-color:var(--orange);transform:translateY(-2px)}
.feat img{width:100%;height:auto;object-fit:contain}
.lede--nohead{margin-top:clamp(14px,2vw,20px)}
.badge55{width:clamp(210px,26vw,330px);height:auto;display:block;margin:20px 0 6px;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.45))}
/* the combo is the strongest offer on the page, so it carries the most weight */
.combo h2{font-size:clamp(36px,5.6vw,68px)}
.calc__pay b{font-size:clamp(36px,5vw,54px)}
.wunits{background:var(--ink);padding-block:clamp(30px,4vw,54px);border-top:1px solid var(--line)}
.wunits__row{display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,64px);align-items:center;justify-content:center}
.wunit{width:clamp(180px,22vw,270px);height:auto;object-fit:contain}
.wunits__note{max-width:640px;margin:22px auto 0;text-align:center;color:var(--faint);font-size:13.5px;line-height:1.6;padding-inline:var(--pad)}
@media (max-width:560px){.feat{flex:0 0 calc(50% - 8px)}}

/* ===== inner pages: store and offer pages, built on the homepage system ===== */
/* Clip sideways overflow on the ROOT only. The old offer stylesheet set this on
   body too, which makes body its own scroll container, and a sticky element
   inside one never sticks: the showroom bar scrolled away with the page. */
html{overflow-x:hidden}
.ln,.ln__i{display:block}
.ostrip{max-width:760px}
.ostrip__i{flex:1 1 0;min-width:180px}
.ostrip__k{display:flex;align-items:center;gap:9px}
.ostrip__ic{width:26px;height:26px;flex:none;color:var(--orange)}
@media (max-width:720px){
  .ostrip__i{flex:1 1 100%}
  .ostrip__i+.ostrip__i{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
}

/* the hero is sized by what it holds, so the showroom and its buttons sit in
   the first screen instead of below a full height photograph */
.hero--page{min-height:0}
.hero--page .hero__inner{padding-top:clamp(108px,12vw,144px);padding-bottom:clamp(44px,6vw,82px)}
.hero--page h1{text-transform:none;font-size:clamp(34px,5.2vw,66px);line-height:1.02;
  letter-spacing:-.025em;max-width:17ch;text-wrap:balance}
.hero--store h1{text-transform:uppercase;font-size:clamp(46px,7.6vw,98px);line-height:.92;max-width:none}
.hero--page .mark{top:clamp(78px,10vw,116px)}
.hero__grid--one{grid-template-columns:1fr}
.h1__at{display:block;margin-top:.5em;font-size:clamp(21px,2.5vw,32px);line-height:1.12;
  letter-spacing:-.01em;text-transform:none;color:var(--bone);text-shadow:none}
.hero__addr{color:rgba(246,244,239,.8);font-size:15.5px;line-height:1.5;max-width:52ch;margin-top:14px}
.hero__land{color:var(--faint);font-size:13.5px;margin-top:4px}
.hero__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:14px;
  font-size:14px;color:var(--dim)}
.hero__tel{display:inline-flex;align-items:center;gap:7px;color:var(--bone);font-weight:600;
  font-variant-numeric:tabular-nums}
.hero__tel svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(18px,2.4vw,26px)}
[data-open-badge][hidden]{display:none!important}
/* the showroom, as glass over the photograph like the offer strip */
.scard{border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(10,10,11,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:clamp(18px,2.4vw,26px);
  width:100%;max-width:470px;justify-self:end}
.scard__n{font-family:var(--display);font-weight:600;font-size:18px;line-height:1.3}
.scard .hero__addr{font-size:14.5px;margin-top:10px}
.scard .hero__cta{margin-top:18px}

/* the showroom bar: first thing on every showroom page, sticky when it holds
   one showroom, so its two buttons stay in reach down a long page */
.sbar{background:var(--ink);border-bottom:1px solid var(--line);position:relative;z-index:50}
.sbar--one{position:sticky;top:0}
.sbar[hidden]{display:none}
.sbar__wrap{padding-block:12px}
.sbar--one .sbar__wrap{display:flex;align-items:center;gap:12px 26px;flex-wrap:wrap}
.sbar__list{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.sbar--one .sbar__list{margin-top:0;flex:1 1 420px}
.sbar__item{display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap}
.sbar__who b{font-family:var(--display);font-weight:600;font-size:17px;color:var(--bone);display:block}
.sbar__who span{display:block;margin-top:2px;font-size:12.5px;color:var(--faint)}
.sbar .cta{display:flex;gap:10px;flex-wrap:nowrap}
.sbar .btn{padding:11px 16px;font-size:14px;white-space:nowrap}
.sbar .btn:hover{transform:none}
.sbar .btn svg{width:16px;height:16px}
.has-sbar [id]{scroll-margin-top:96px}

/* price modes on the homepage product card */
.range--emi .pl__emi{font-family:var(--display);font-size:16px;margin-top:10px}

/* the dealer band: the homepage's closing band, carrying one showroom */
.band--store .band__store{margin:6px auto 0;max-width:60ch}
.band--store .band__store p{margin:0 auto;font-size:14.5px}
.band--store .band__store p+p{margin-top:4px;color:var(--faint);font-size:13.5px}
.band--store .hero__meta{justify-content:center}
.band .hero__cta{justify-content:center;margin-top:24px}

.combo--compact .badge55{margin-top:0}
.store__city a:hover{color:var(--orange)}
.xnav{background:var(--ink);border-top:1px solid var(--line);padding-block:clamp(30px,4vw,46px)}
.xnav__row{display:flex;flex-wrap:wrap;gap:14px 32px;margin-top:16px}
.xnav .cta-text{font-size:15px}
.foot a{color:var(--dim)}
.foot a:hover{color:var(--orange)}

@media (max-width:860px){
  .scard{justify-self:start;max-width:none}
}
@media (max-width:560px){
  .hero--page .mark{width:64px;top:76px}
  .hero--page .hero__inner{padding-top:152px}
  .hero__cta .btn{flex:1 1 100%}
  /* on a phone the bar keeps the name and both buttons, and drops the rest to
     the hero right under it, so it holds a sliver of the screen, not a sixth */
  .sbar--one .flag,.sbar--one .sbar__who span{display:none}
  .sbar__item{flex-direction:column;align-items:stretch;gap:9px}
  .sbar .cta{width:100%}
  .sbar .cta .btn{flex:1 1 0;min-width:0;padding:11px 10px;justify-content:center}
  .has-sbar [id]{scroll-margin-top:112px}
}