/* Inter variable — self-hosted, latin subset (48 KB). No third-party font request. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   Telestone — design system
   Surface colour: Telestone Blue #2916F5 (replaces the former black)
   ========================================================================== */

:root{
  /* --- surfaces ------------------------------------------------------- */
  /* Deep indigo carries the large surfaces; the vivid brand blue is the
     ACCENT, not the field. At full-page scale #2916F5 reads as flashy —
     used at ~5% of the surface it reads as expensive. */
  --ink:#140B63;          /* primary surface: hero, dark sections   */
  --graphite:#0D0742;     /* secondary surface, keeps page rhythm   */
  --blue-ink:#080428;     /* footer + search overlay                */
  --elevated:#241796;     /* raised panels on indigo                */

  --paper:#FFFFFF;
  --paper-2:#F2F2F3;
  --paper-3:#E8E8EA;

  /* --- text ------------------------------------------------------------ */
  --near-black:#08080A;
  --titanium:#C7CBD1;     /* secondary text on blue    — 5.10:1     */
  --lavender:#D9D4FF;     /* accent text on indigo     — 11.78:1    */
  --slate:#5A5E66;        /* secondary text on white   — 6.51:1     */

  /* --- accent ---------------------------------------------------------- */
  --red:#FC1618;          /* wordmark ring, light surfaces only     */
  --blue-accent:#2916F5;  /* Telestone Blue: accent text, light — 8.31:1 */
  --blue-deeper:#1B0DA8;  /* button hover on light                  */
  --accent:var(--blue-accent);
  /* To restore red as the light-surface accent, set --accent:#D0121A here. */

  --line-dark:rgba(255,255,255,.14);
  --line-light:rgba(8,8,10,.11);

  --pad:clamp(1.25rem,5vw,5rem);
  --max:1440px;
  --gap:clamp(1.25rem,2.5vw,2.25rem);

  --ease:cubic-bezier(.16,1,.3,1);

  --fg:var(--near-black);
  --bg:var(--paper);
  --fg-2:var(--slate);
  --line:var(--line-light);
  --panel:var(--paper-2);
}

/* Blue surfaces carry the reversed token set */
[data-theme="dark"],
.dark,.graphite,.hero,.phero,.foot,.search,.drawer{
  --fg:#F7F7F8;
  --bg:var(--ink);
  --fg-2:var(--titanium);
  --line:var(--line-dark);
  --panel:var(--elevated);
  --accent:var(--lavender);
}
/* Light islands re-assert the light set, wherever they sit */
.paper,.paper-2,.phero--light{
  --fg:var(--near-black);
  --bg:var(--paper);
  --fg-2:var(--slate);
  --line:var(--line-light);
  --panel:var(--paper-2);
  --accent:var(--blue-accent);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--paper);
  color:var(--near-black);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:1.0625rem;
  line-height:1.65;
  letter-spacing:-.005em;
  font-feature-settings:'ss01' 1,'cv05' 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
table{border-collapse:collapse;width:100%}

::selection{background:var(--ink);color:#fff}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.skip{
  position:fixed;top:0;left:0;z-index:200;
  transform:translateY(-120%);
  background:var(--ink);color:#fff;padding:.85rem 1.25rem;
  font-size:.8125rem;font-weight:600;letter-spacing:.02em;
}
.skip:focus{transform:none}

/* ---------- Type primitives ---------- */
.display{font-size:clamp(2.75rem,6.1vw,6rem);line-height:.94;font-weight:600;letter-spacing:-.045em}
/* The hero headline runs to four lines on some slides. On a short laptop screen
   that pushed the slide past the fold and took the carousel controls with it, so
   inside the hero the size is capped against viewport height as well as width. */
.hero .display{font-size:clamp(2.3rem,min(6.1vw,10.2vh),6rem)}
/* A browser with several toolbars open leaves very little height. Tighten the
   whole hero so the slide and its controls still fit without scrolling. */
@media (min-width:901px) and (max-height:640px){
  .hero .display{font-size:clamp(1.9rem,min(5vw,8vh),3.6rem)}
  .hero .lede{font-size:.9375rem;line-height:1.5}
  .hero .stack-l{gap:.85rem}
  .hero .eyebrow{margin-bottom:0}
  .hero__ui{margin-top:1rem}
  .hero .btn{padding-block:.7rem}
}
.h1{font-size:clamp(2.25rem,4.9vw,4.4rem);line-height:1.02;font-weight:600;letter-spacing:-.04em}
.h2{font-size:clamp(1.9rem,3.9vw,3.3rem);line-height:1.06;font-weight:600;letter-spacing:-.033em}
.h3{font-size:clamp(1.25rem,1.9vw,1.7rem);line-height:1.2;font-weight:550;letter-spacing:-.022em}
.h4{font-size:1.0625rem;font-weight:600;letter-spacing:-.015em;line-height:1.35}

.eyebrow{font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-2);display:block}
.eyebrow--red{color:var(--accent)}

.lede{font-size:clamp(1.0625rem,1.35vw,1.3125rem);line-height:1.55;color:var(--fg-2);letter-spacing:-.012em}
.muted{color:var(--fg-2)}
.small{font-size:.875rem;line-height:1.55}
.xs{font-size:.75rem;line-height:1.5}
.measure{max-width:38ch}
.measure-wide{max-width:60ch}
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* ---------- Layout ---------- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.wrap--narrow{max-width:960px}
.section{padding-block:clamp(4.5rem,10vw,10rem)}
.section--tight{padding-block:clamp(3rem,6vw,5.5rem)}
.dark{background:var(--ink);color:#F7F7F8}
.graphite{background:var(--graphite);color:#F7F7F8}
.paper{background:var(--paper);color:var(--near-black)}
.paper-2{background:var(--paper-2);color:var(--near-black)}

.grid{display:grid;gap:var(--gap)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.stack-s>*+*{margin-top:.5rem}
.stack-m>*+*{margin-top:1rem}
.stack-l>*+*{margin-top:1.75rem}
.stack-xl>*+*{margin-top:clamp(2rem,4vw,3.5rem)}

/* ---------- Logo ---------- */
.logo{display:inline-block;line-height:0}
.logo img{height:40px;width:auto}
.logo--sm img{height:34px}
/* Both variants ship; exactly one is shown. These selectors must out-rank
   `.logo img`, or both render stacked — which is what happened on the first
   live deploy. Hence `.logo .logo__x`, not `.logo__x`. */
.logo .logo__dark{display:block}
.logo .logo__light{display:none}
/* indigo surfaces get the reversed lockup */
.nav:not(.nav--light) .logo .logo__dark,
.foot .logo .logo__dark,
.drawer .logo .logo__dark{display:none}
.nav:not(.nav--light) .logo .logo__light,
.foot .logo .logo__light,
.drawer .logo .logo__light{display:block}
@media (max-width:420px){.logo--sm img{height:29px}}

/* ---------- Buttons & links ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.95rem 1.6rem;
  font-size:.9375rem;font-weight:550;letter-spacing:-.008em;
  border-radius:2px;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
  border:1px solid transparent;min-height:48px;
}
.btn .ar{transition:transform .35s var(--ease);display:inline-block}
.btn:hover .ar{transform:translateX(4px)}
.btn--primary{background:var(--blue-accent);color:#fff;border-color:var(--blue-accent)}
.btn--primary:hover{background:var(--blue-deeper);border-color:var(--blue-deeper)}
/* On indigo surfaces the primary inverts to white. `.phero--light` must be
   excluded or the product pages get a white button on a white page. */
.dark .btn--primary,.graphite .btn--primary,.hero .btn--primary,
.phero:not(.phero--light) .btn--primary{
  background:#fff;color:var(--ink);border-color:#fff;
}
.dark .btn--primary:hover,.graphite .btn--primary:hover,.hero .btn--primary:hover,
.phero:not(.phero--light) .btn--primary:hover{background:var(--lavender);border-color:var(--lavender)}
.btn--solid{background:#F7F7F8;color:var(--ink)}
.btn--solid:hover{background:#fff}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--graphite)}
.btn--ghost{border-color:color-mix(in srgb,currentColor 34%,transparent);color:inherit}
.btn--ghost:hover{border-color:currentColor}
.btn--sm{padding:.65rem 1.1rem;font-size:.8125rem;min-height:40px}

.link{display:inline-flex;align-items:center;gap:.5em;font-size:.9375rem;font-weight:550;padding-block:.35rem;border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.link .ar{transition:transform .35s var(--ease);display:inline-block}
.link:hover{border-color:currentColor}
.link:hover .ar{transform:translateX(4px)}
.link--red{color:var(--accent)}

/* ---------- Navigation ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .45s var(--ease),backdrop-filter .45s var(--ease),border-color .45s var(--ease);
  border-bottom:1px solid transparent;color:#F7F7F8;
}
.nav--light{color:var(--near-black)}
.nav.is-stuck{
  background:rgba(20,11,99,.86);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom-color:var(--line-dark);color:#F7F7F8;
}
.nav--light.is-stuck{background:rgba(255,255,255,.82);border-bottom-color:var(--line-light);color:var(--near-black)}
.nav__in{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad);height:72px;display:flex;align-items:center;gap:clamp(1rem,3vw,2.75rem)}
.nav__links{display:flex;align-items:center;gap:clamp(.9rem,2vw,2rem);margin-left:auto}
.nav__link{font-size:.875rem;font-weight:500;padding:.4rem 0;position:relative;opacity:.86;transition:opacity .25s var(--ease)}
.nav__link:hover,.nav__link[aria-current="page"]{opacity:1}
.nav__link[aria-current="page"]::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor}
.nav__tools{display:flex;align-items:center;gap:.35rem;margin-left:.5rem}
.icon-btn{width:40px;height:40px;display:grid;place-items:center;border-radius:2px;transition:background .25s var(--ease)}
.icon-btn:hover{background:rgba(127,127,160,.2)}
.icon-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
.nav__cta{margin-left:.35rem}
.burger{display:none}

.drawer{position:fixed;inset:0;z-index:99;background:var(--ink);color:#F7F7F8;padding:96px var(--pad) 2rem;display:none;flex-direction:column;overflow-y:auto}
.drawer.is-open{display:flex}
.drawer a{display:block;font-size:1.6rem;font-weight:550;letter-spacing:-.03em;padding:.7rem 0;border-bottom:1px solid var(--line-dark)}
.drawer__foot{margin-top:auto;padding-top:2rem;color:var(--titanium);font-size:.875rem}

/* ---------- Product shot frame ---------- */
.shot{
  position:relative;overflow:hidden;border-radius:3px;
  display:grid;place-items:center;isolation:isolate;
  /* One product panel treatment everywhere: the supplied photography has a
     near-white sweep baked in, so the panel must stay near-white or the
     images would show as white rectangles inside it. */
  background:linear-gradient(168deg,#FAFAFA 0%,#EDEDEF 100%);
}
.shot::after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px var(--line);border-radius:inherit}
.dark .shot::after,.graphite .shot::after,.phero .shot::after{box-shadow:none}
.shot img{width:100%;height:100%;object-fit:contain;padding:clamp(.5rem,2%,1.5rem);transition:transform .6s var(--ease)}
.shot--tall{aspect-ratio:3/4}
.shot--sq{aspect-ratio:1/1}
.shot--wide{aspect-ratio:16/10}
.shot--hero{aspect-ratio:16/11}
/* Panel aspect follows the delivered photography, measured from the files:
   televisions and stabilizers 1254x1254, coolers and washers 1122x1402,
   air conditioners 1600x900. A single fixed aspect letterboxes or crops. */
.shot--ar-led-tv,.shot--ar-stabilizer{aspect-ratio:1/1}
.shot--ar-air-cooler,.shot--ar-washing-machine{aspect-ratio:4/5}
.shot--ar-air-conditioner{aspect-ratio:16/9}
.shot.is-missing img{opacity:0}
.shot.is-missing::before{
  content:attr(data-label);position:absolute;inset:0;display:grid;place-content:center;
  text-align:center;padding:2rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);opacity:.5;z-index:1;
}

/* ---------- Product card ---------- */
.pcard{display:flex;flex-direction:column;gap:1.15rem;position:relative}
.pcard .shot{aspect-ratio:1/1}
.pcard:hover .shot img{transform:scale(1.045)}
.pcard__meta{display:flex;flex-direction:column;gap:.3rem}
.pcard__sku{font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.pcard__name{font-size:1.0625rem;font-weight:550;letter-spacing:-.018em;line-height:1.3}
.pcard__tag{font-size:.875rem;color:var(--fg-2);line-height:1.45}
.pcard__more{font-size:.8125rem;font-weight:550;margin-top:.35rem;display:inline-flex;gap:.4em;align-items:center}
.pcard__more .ar{transition:transform .35s var(--ease);display:inline-block}
.pcard:hover .pcard__more .ar{transform:translateX(4px)}
.pcard a::after{content:'';position:absolute;inset:0}
.pcard__flag{position:absolute;top:.9rem;left:.9rem;z-index:2;font-size:.625rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;background:var(--blue-accent);color:#fff;padding:.3rem .55rem;border-radius:2px}

/* ---------- Editorial range row ---------- */
.erow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(2rem,6vw,6rem);align-items:center;padding-block:clamp(3rem,6vw,6rem);border-top:1px solid var(--line)}
.erow:last-child{border-bottom:1px solid var(--line)}
.erow--flip>*:first-child{order:2}
.erow .shot{aspect-ratio:auto}
.erow:hover .shot img{transform:scale(1.03)}
.erow__count{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}

/* ---------- Stats ---------- */
.statgrid{display:grid;gap:clamp(1.5rem,4vw,3rem);grid-template-columns:repeat(3,minmax(0,1fr))}
.stat__v{font-size:clamp(2.5rem,5.5vw,4.75rem);font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.stat__l{margin-top:.85rem;font-size:.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}
.stat__d{margin-top:.65rem;font-size:.9375rem;color:var(--fg-2);line-height:1.55;max-width:32ch}

/* ---------- Feature list ---------- */
.feat{border-top:1px solid var(--line);padding-top:1.75rem}
.feat__n{font-size:.6875rem;letter-spacing:.14em;color:var(--accent);font-weight:600}
.feat__t{margin-top:1rem}
.feat__b{margin-top:.75rem;color:var(--fg-2);font-size:.9375rem;line-height:1.62}

/* ---------- Ladder ---------- */
.ladder{display:flex;flex-wrap:wrap;gap:.5rem}
.ladder a{border:1px solid var(--line);border-radius:2px;padding:.6rem 1rem;font-size:.875rem;font-weight:550;font-variant-numeric:tabular-nums;transition:border-color .3s var(--ease)}
.ladder a:hover{border-color:currentColor}

/* ---------- Specs ---------- */
.specs{display:grid;gap:0}
.specgroup{border-top:1px solid var(--line)}
.specgroup__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.4rem 0;text-align:left}
.specgroup__sign{width:22px;height:22px;position:relative;flex:none;opacity:.6;transition:opacity .3s}
.specgroup__sign::before,.specgroup__sign::after{content:'';position:absolute;background:currentColor;left:50%;top:50%;translate:-50% -50%}
.specgroup__sign::before{width:13px;height:1.5px}
.specgroup__sign::after{width:1.5px;height:13px;transition:opacity .3s var(--ease)}
.specgroup__btn[aria-expanded="true"] .specgroup__sign{opacity:1}
.specgroup__btn[aria-expanded="true"] .specgroup__sign::after{opacity:0}
.specgroup__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.specgroup__btn[aria-expanded="true"]+.specgroup__body{grid-template-rows:1fr}
.specgroup__inner{overflow:hidden}
.specrow{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1.5rem;padding:.7rem 0;font-size:.9375rem;border-top:1px solid var(--line)}
.specgroup__inner .specrow:first-child{border-top:0}
.specrow dt{color:var(--fg-2)}
.specrow dd{margin:0;font-variant-numeric:tabular-nums}
.flagmark{display:inline-block;margin-left:.5em;font-size:.6875rem;font-weight:600;color:var(--accent);letter-spacing:.06em;vertical-align:.08em;border:1px solid currentColor;border-radius:2px;padding:0 .3em}
.notice{border-left:2px solid var(--accent);padding:.9rem 0 .9rem 1.15rem;font-size:.875rem;line-height:1.6;color:var(--fg-2)}

.warrant{display:grid;gap:.5rem}
.warrant__v{font-size:clamp(1.5rem,3vw,2.4rem);font-weight:600;letter-spacing:-.03em;line-height:1.12}

/* ---------- Thumbnail strip ---------- */
.thumbs{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.thumbs .shot{width:84px;aspect-ratio:1/1;padding:0;cursor:pointer;transition:box-shadow .3s var(--ease)}
.thumbs .shot img{padding:.35rem;transition:transform .3s var(--ease)}
.thumbs .shot:hover img{transform:scale(1.06)}
.thumbs .shot[aria-current="true"]{box-shadow:0 0 0 2px currentColor}

/* ---------- Listing category groups ---------- */
.lgroup{grid-column:1/-1;display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;padding:1.25rem 0 .25rem;border-top:1px solid var(--line)}
.lgroup:first-child{border-top:0;padding-top:0}
.lgroup[hidden]{display:none}

/* ---------- Filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding-block:1.25rem}
.chip{border:1px solid var(--line);border-radius:99px;padding:.5rem 1rem;font-size:.8125rem;font-weight:550;transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);white-space:nowrap}
.chip:hover{border-color:currentColor}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.selectwrap{position:relative;margin-left:auto}
.selectwrap select{appearance:none;border:1px solid var(--line);background:transparent;border-radius:2px;padding:.5rem 2.2rem .5rem .9rem;font-size:.8125rem;font-weight:550}
.selectwrap::after{content:'';position:absolute;right:.9rem;top:50%;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;translate:0 -70%;rotate:45deg;pointer-events:none;opacity:.6}

/* ---------- Compare ---------- */
.cmp{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp table{min-width:640px}
.cmp th,.cmp td{text-align:left;padding:1rem 1.25rem;font-size:.9375rem;border-top:1px solid var(--line);vertical-align:top;font-variant-numeric:tabular-nums}
.cmp th[scope="row"]{color:var(--fg-2);font-weight:400;width:22%}
.cmp thead th{border-top:0;padding-top:0}
.cmp .shot{aspect-ratio:4/3;margin-bottom:.9rem}
.cmp__pick{display:grid;gap:.75rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.cmp__pick select{width:100%;appearance:none;border:1px solid var(--line);background:transparent;border-radius:2px;padding:.8rem 2.2rem .8rem 1rem;font-size:.875rem}

/* ---------- Search overlay ---------- */
.search{
  position:fixed;inset:0;z-index:150;display:none;
  background:rgba(8,4,40,.96);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  color:#F7F7F8;padding:clamp(1.5rem,6vh,5rem) var(--pad);overflow-y:auto;
}
.search.is-open{display:block;animation:searchIn .22s var(--ease)}
@keyframes searchIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.search__in{max-width:900px;margin-inline:auto}
.search__field{display:flex;align-items:center;gap:1rem;border-bottom:1px solid var(--line-dark);padding-bottom:1rem}
.search__field input{flex:1;background:none;border:0;outline:0;color:inherit;font-size:clamp(1.5rem,4vw,2.5rem);font-weight:550;letter-spacing:-.035em}
.search__field input::placeholder{color:rgba(199,203,209,.5)}
.search__hint{margin-top:1rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--titanium);opacity:.75}
.search__results{margin-top:2rem;display:grid;gap:0}
.sres{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:1.25rem;align-items:center;padding:1rem 0;border-top:1px solid var(--line-dark)}
.sres:focus-visible,.sres.is-active{background:rgba(255,255,255,.07)}
.sres .shot{aspect-ratio:1/1;border-radius:2px}
.sres .shot img{padding:.2rem}
.sres__n{font-weight:550;font-size:.9375rem;letter-spacing:-.015em}
.sres__c{font-size:.75rem;color:var(--titanium);letter-spacing:.1em;text-transform:uppercase;margin-top:.2rem}
.sres__a{opacity:.5;font-size:.9rem}
.search__empty{padding:2.5rem 0;color:var(--titanium)}

/* ---------- Forms ---------- */
.field{display:grid;gap:.5rem}
.field label{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2);font-weight:600}
.field input,.field select,.field textarea{background:transparent;border:0;border-bottom:1px solid var(--line);padding:.75rem 0;outline:0;border-radius:0;transition:border-color .3s var(--ease)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--accent)}
.field select{
  appearance:none;-webkit-appearance:none;padding-right:1.75rem;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 10px) calc(50% + 1px),calc(100% - 5px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field select option{background:#fff;color:#08080A}
.field textarea{resize:vertical;min-height:110px}
.form-note{font-size:.8125rem;color:var(--fg-2);line-height:1.6}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq__btn{width:100%;display:flex;gap:1.5rem;align-items:flex-start;justify-content:space-between;padding:1.5rem 0;text-align:left}
.faq__q{font-size:1.0625rem;font-weight:550;letter-spacing:-.018em;line-height:1.4}
.faq__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.faq__btn[aria-expanded="true"]+.faq__body{grid-template-rows:1fr}
.faq__inner{overflow:hidden}
.faq__a{padding-bottom:1.5rem;color:var(--fg-2);max-width:62ch;font-size:.9375rem;line-height:1.62}

/* ---------- Rail ---------- */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,300px);gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1.5rem;scrollbar-width:thin}
.rail>*{scroll-snap-align:start}
.rail::-webkit-scrollbar{height:2px}
.rail::-webkit-scrollbar-thumb{background:var(--line)}

/* ---------- Letter (MD message) ---------- */
.letter{max-width:66ch;margin-inline:auto}

/* The letter is set as one continuous piece of correspondence: every paragraph
   the same size, weight and leading, justified. Client feedback asked for both
   — the earlier version set the opening line and the pull-quote larger, which
   read as inconsistent rather than as typographic hierarchy. */
.letter p{
  margin-bottom:1.5rem;
  font-size:1.0625rem;line-height:1.75;color:var(--fg-2);
  text-align:justify;text-justify:inter-word;
  hyphens:auto;-webkit-hyphens:auto;
}
.letter p.letter__open{
  font-size:1.0625rem;line-height:1.75;color:var(--fg-2);
  font-weight:400;letter-spacing:normal;margin-bottom:1.5rem;
}
.letter p.letter__salut{font-weight:600;color:var(--fg);text-align:left;hyphens:manual}
.letter p.letter__pull{
  margin:1.5rem 0;padding:0;border:0;
  font-size:1.0625rem;line-height:1.75;font-weight:550;
  letter-spacing:normal;color:var(--fg);
}
.letter__sig{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)}
.letter__sig b{display:block;font-size:1.25rem;font-weight:600;letter-spacing:-.02em;color:var(--fg)}
.letter__sig span{display:block;font-size:.9375rem;color:var(--fg-2)}
.letter__signoff{margin-top:1.75rem;font-size:1.0625rem;font-weight:550;color:var(--accent);letter-spacing:-.01em;text-align:left;hyphens:manual}

/* Justifying a narrow measure opens rivers of white space, so a phone gets the
   same letter ragged-right. */
@media (max-width:640px){
  .letter p{text-align:left;hyphens:manual}
}

/* ---------- Footer ---------- */
.foot{background:var(--blue-ink);color:#F7F7F8;padding-block:clamp(3.5rem,7vw,6rem) 2.5rem}
.foot__grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:clamp(1.75rem,3vw,3rem)}
.foot h4{font-size:.6875rem;letter-spacing:.16em;text-transform:uppercase;color:var(--titanium);font-weight:600;margin-bottom:1.1rem}
.foot li{margin-bottom:.6rem}
.foot a{font-size:.875rem;opacity:.86;transition:opacity .25s}
.foot a:hover{opacity:1}
.foot__bar{margin-top:clamp(3rem,5vw,4.5rem);padding-top:1.75rem;border-top:1px solid var(--line-dark);display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;font-size:.8125rem;color:var(--titanium)}
.foot__bar .sp{margin-left:auto}

.crumbs{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2);display:flex;gap:.6rem;flex-wrap:wrap}
.crumbs a:hover{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100svh;display:grid;align-items:center;
  background-color:var(--ink);
  background-image:linear-gradient(160deg,#1B1078 0%,#140B63 46%,#0D0742 100%);
  color:#F7F7F8;overflow:hidden;padding-top:72px}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:clamp(2rem,5vw,5rem);align-items:center;width:100%}
.hero__shot{position:relative}
/* The supplied photography is shot on a near-white sweep, and several products
   (washing machines, AC casings) are themselves white — so they cannot be cut
   out from that sweep without eating the product. The hero therefore uses the
   same lightbox panel as every other surface: it works for any product colour
   and reads as a lit product stage against the blue. */
.hero__shot .shot{aspect-ratio:1/1;max-width:min(100%,560px);margin-inline:auto;border-radius:6px;
  box-shadow:0 30px 70px -30px rgba(4,2,20,.7)}
.hero__shot .shot::after{box-shadow:none}
/* No scale on the image: the panel clips overflow, so any scale above 1 cropped
   the product. Parallax moves the wrapper instead. */
.hero__shot img{transform:none;padding:clamp(1.25rem,4%,3rem)}
.hero__glow{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(130%,900px);aspect-ratio:1;
  background:radial-gradient(closest-side,rgba(41,22,245,.55),transparent 70%);z-index:-1;pointer-events:none;filter:blur(10px)}
.hero__scroll{position:absolute;bottom:2rem;left:50%;translate:-50% 0;font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;color:var(--titanium);display:flex;flex-direction:column;align-items:center;gap:.6rem;opacity:.8}
.hero__scroll span{display:block;width:1px;height:34px;background:currentColor;opacity:.5;animation:scrollcue 2.4s var(--ease) infinite}
@keyframes scrollcue{0%{transform:scaleY(.2);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(.2);transform-origin:bottom}}

.phero{background-color:var(--ink);background-image:linear-gradient(160deg,#190F72 0%,#140B63 60%,#100950 100%);color:#F7F7F8;padding-top:calc(72px + clamp(2.5rem,6vw,5rem));padding-bottom:clamp(3rem,7vw,6rem)}
.phero--light{background-color:var(--paper);background-image:none;color:var(--near-black)}

/* ---------- Reveal motion ---------- */
html.js [data-rv]{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js [data-rv].is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html.js [data-rv]{opacity:1!important;transform:none!important}
  .hero__shot{transform:none}
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .foot__grid{grid-template-columns:1fr 1fr 1fr}
  .cols-4{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav__links{display:none}
  .burger{display:grid}
  .hero{min-height:auto;padding-block:calc(72px + 2.5rem) 3.5rem}
  .hero__grid{grid-template-columns:1fr;gap:2.5rem}
  .hero__scroll{display:none}
  .split,.erow{grid-template-columns:1fr;gap:2rem}
  .erow--flip>*:first-child{order:0}
  .cols-3,.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .statgrid{grid-template-columns:1fr;gap:2.25rem}
  .stat__d{max-width:none}
}
@media (max-width:640px){
  body{font-size:1rem}
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
  .pcard .shot{aspect-ratio:1/1}
  .foot__grid{grid-template-columns:1fr 1fr}
  .foot__bar .sp{margin-left:0;width:100%}
  .specrow{grid-template-columns:1fr;gap:.15rem}
  .specrow dt{font-size:.8125rem}
  .cmp__pick{grid-template-columns:1fr}
  .btn{width:100%;justify-content:center}
  .btn--inline{width:auto}
}
@media (max-width:360px){:root{--pad:1rem}}

@media print{
  .nav,.search,.drawer,.hero__scroll,.foot__bar{display:none}
  body{background:#fff;color:#000}
}

/* ==========================================================================
   Homepage furniture — rotating hero, badges, range banners, MovieBox wall,
   ecosystem, testimonials, WhatsApp
   ========================================================================== */

/* ---------- Rotating hero ---------- */
.hero__slides{display:grid}
.hslide{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .7s var(--ease);pointer-events:none}
.hslide.is-active{opacity:1;visibility:visible;pointer-events:auto}
html:not(.js) .hslide{opacity:1;visibility:visible;position:static;pointer-events:auto}
html:not(.js) .hslide:not(.is-active){display:none}

/* In the flow rather than pinned to the bottom edge: a tall slide used to push
   the bottom edge below the fold, which is why the controls were "hidden in the
   bottom" on some screens. Under the slides they are always on screen. */
.hero__ui{
  position:relative;z-index:3;
  margin-top:clamp(1.5rem,3.2vh,2.75rem);
  display:flex;align-items:center;justify-content:center;gap:1rem;
}
.harrow{
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-dark);color:#F7F7F8;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.harrow:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.harrow svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hdots{display:flex;gap:.5rem;align-items:center}
.hdot{
  width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.34);
  transition:background .3s var(--ease),width .3s var(--ease);
}
.hdot.is-on{background:#fff;width:26px;border-radius:99px}
.hdot:hover{background:rgba(255,255,255,.7)}
.hplay{
  width:40px;height:40px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-dark);color:#F7F7F8;margin-left:.25rem;
  transition:background .25s var(--ease),border-color .25s var(--ease);
}
.hplay:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.hplay svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hplay .hplay__play{display:none;fill:currentColor;stroke:none}
.hplay[aria-pressed="true"] .hplay__pause{display:none}
.hplay[aria-pressed="true"] .hplay__play{display:block}

/* dots carry the affordance; the cue collided with them */
[data-hero] .hero__scroll{display:none}

/* ---------- Atmanirbhar Bharat mark (About hero) ---------- */
/* The mark sits on a white card: its own artwork contains white fills, so it
   cannot be knocked out onto the indigo without losing parts of the drawing. */
.atma{display:flex;align-items:center;gap:clamp(1rem,1.8vw,1.6rem);margin-top:clamp(2rem,4vh,3rem)}
.atma img{
  height:clamp(86px,11vh,128px);width:auto;display:block;
  background:#fff;border-radius:12px;padding:.6rem .9rem;
  box-shadow:0 10px 30px rgba(8,4,40,.28);
}
.atma span{
  font-size:.8125rem;letter-spacing:.02em;color:var(--titanium);
  max-width:18ch;line-height:1.45;
}
@media (max-width:900px){
  .phero--tall{padding-block:0}
  .phero--tall>.wrap{padding-top:calc(72px + 2rem);padding-bottom:0}
  .phero--tall .phero__head{margin-block:0}
  .phero--tall .atma{margin-top:0;padding-top:2rem}
}
@media (max-width:640px){
  .atma{gap:.9rem}
  .atma img{height:72px;padding:.45rem .7rem}
  .atma span{font-size:.75rem}
}

/* ---------- Badge strip ---------- */
.badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.5rem)}
.badge{border-top:2px solid var(--accent);padding-top:1.1rem}
.badge h3{margin-bottom:.4rem}

/* ---------- Range banners ---------- */
.rbanners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.rbanner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1rem,2vw,2rem);align-items:center;
  background:var(--paper);border-radius:4px;padding:clamp(1rem,2vw,1.75rem);
  transition:box-shadow .35s var(--ease),transform .35s var(--ease)}
.rbanner:hover{box-shadow:0 22px 50px -28px rgba(8,4,40,.45);transform:translateY(-3px)}
.rbanner:hover .shot img{transform:scale(1.05)}
.rbanner__body{display:flex;flex-direction:column;align-items:flex-start}

/* ---------- MovieBox poster wall ---------- */
/* Reads as a fine mosaic motif rather than a grid of empty boxes: small tiles,
   many of them. Large sparse rectangles looked like failed image loads. */
.wall{display:grid;grid-template-columns:repeat(10,1fr);gap:.35rem;max-width:520px}
.poster{
  display:block;aspect-ratio:2/3;border-radius:2px;
  background:linear-gradient(155deg,
    hsl(248 62% calc(26% + var(--d) * 3%)),
    hsl(250 66% calc(14% + var(--d) * 2%)));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
}

/* ---------- Ecosystem ---------- */
.eco{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap);align-items:end}
.eco__item{position:relative;display:block}
.eco__item .shot{transition:transform .45s var(--ease)}
.eco__item:hover .shot{transform:translateY(-6px)}
.eco__item:hover .shot img{transform:scale(1.05)}
.eco__cap{display:block;margin-top:.85rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-2)}
.eco__item--0{grid-column:span 3}
.eco__item--1{grid-column:span 3}
.eco__item--2{grid-column:span 2}
.eco__item--3{grid-column:span 2}
.eco__item--4{grid-column:span 2}

/* ---------- Testimonials ---------- */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.tcard{margin:0;border-top:1px solid var(--line);padding-top:1.75rem;display:flex;flex-direction:column;gap:1.5rem}
.tcard blockquote{margin:0;flex:1}
.tcard blockquote p{font-size:1.0625rem;line-height:1.62;color:var(--fg)}
.tcard blockquote p::before{content:'“'}
.tcard blockquote p::after{content:'”'}
.tcard figcaption{display:flex;align-items:center;gap:.85rem}
.tcard__av{
  width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:#fff;font-weight:600;font-size:.9375rem;
}
.tcard figcaption b{font-weight:600;font-size:.9375rem}

/* ---------- Gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}

/* ---------- WhatsApp float ---------- */
.wa{
  position:fixed;right:clamp(1rem,2.5vw,2rem);bottom:clamp(1rem,2.5vw,2rem);z-index:90;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:#25D366;color:#0B2E17;
  box-shadow:0 12px 28px -10px rgba(8,4,40,.55);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.wa:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 18px 36px -12px rgba(8,4,40,.65)}
.wa svg{width:30px;height:30px;fill:currentColor}
@media print{.wa{display:none}}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .badges{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rbanners{grid-template-columns:1fr}
  .rbanner{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
  .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wall{grid-template-columns:repeat(12,1fr);max-width:none}
  .eco{grid-template-columns:repeat(4,1fr)}
  .eco__item--0,.eco__item--1{grid-column:span 2}
  .eco__item--2,.eco__item--3,.eco__item--4{grid-column:span 2}
  .hero .hero__scroll{display:none}
}
@media (max-width:640px){
  .badges{grid-template-columns:1fr;gap:1.25rem}
  .tgrid{grid-template-columns:1fr}
  .wall{grid-template-columns:repeat(10,1fr)}
  .eco{grid-template-columns:repeat(2,1fr)}
  .eco__item--0,.eco__item--1,.eco__item--2,.eco__item--3,.eco__item--4{grid-column:span 1}
  .rbanner{grid-template-columns:1fr}
  .wa{width:48px;height:48px}
  .wa svg{width:26px;height:26px}
}

/* ---------- Editorial bands and macros ---------- */
/* The image is set inline on the element so its relative URL resolves against
   the PAGE. A url() inside a custom property resolves against the stylesheet
   instead, which pointed every band at /assets/css/assets/editorial/. */
.band{
  position:relative;display:grid;align-items:center;
  background-color:var(--graphite);
  background-size:cover;background-position:center;
  padding-block:clamp(3rem,7vw,6rem);color:#F7F7F8;
}
.band::before{content:'';position:absolute;inset:0;
  background:linear-gradient(to right,rgba(12,7,66,.93),rgba(12,7,66,.58))}
.band>.wrap{position:relative;z-index:1}
.band__line{
  font-size:clamp(1.5rem,3.4vw,2.9rem);line-height:1.12;font-weight:600;
  letter-spacing:-.032em;max-width:20ch;
}
.netband{position:relative;background-size:cover;background-position:center}
.netband::before{content:'';position:absolute;inset:0;
  background:linear-gradient(to right,rgba(13,7,66,.96),rgba(13,7,66,.76))}
.netband>.wrap{position:relative;z-index:1}
.techshot{margin-bottom:.5rem;max-width:420px}
.techshot img{padding:0;object-fit:cover}
.shot--wide img{object-fit:cover;padding:0}

/* ==========================================================================
   Nav dropdown, and catalogue-page theming
   ========================================================================== */

/* ---------- Products dropdown ---------- */
.nav__has{position:relative;display:flex}
.nav__link--btn{display:inline-flex;align-items:center;gap:.4em;cursor:pointer}
.nav__caret{width:9px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease);opacity:.7}
.nav__link--btn[aria-expanded="true"] .nav__caret{transform:rotate(180deg);opacity:1}

.nav__menu{
  position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 0;z-index:5;
  min-width:520px;padding:.5rem;border-radius:6px;
  background:var(--paper);color:var(--near-black);
  box-shadow:0 30px 70px -24px rgba(8,4,40,.45),0 0 0 1px rgba(8,8,10,.07);
  animation:navdrop .22s var(--ease);
}
.nav__menu[hidden]{display:none}
@keyframes navdrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
/* hover bridge so the pointer can travel from the button to the panel */
.nav__menu::before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px}
.nav__menu-in{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.nav__mi{
  display:flex;flex-direction:column;gap:.15rem;
  padding:.8rem .9rem;border-radius:4px;
  transition:background .2s var(--ease);
}
.nav__mi:hover,.nav__mi:focus-visible{background:var(--paper-2)}
.nav__mi-n{font-size:.9375rem;font-weight:600;letter-spacing:-.015em}
.nav__mi-r{font-size:.75rem;color:var(--slate)}
.nav__mi--alt .nav__mi-n{color:var(--blue-accent)}

.drawer__sub{font-size:1.05rem!important;opacity:.78;padding-left:1rem!important}

/* ---------- Catalogue pages: product floats on white ---------- */
/* The photography is shot on a near-white sweep. On a white page the panel is
   redundant — dropping it lets the product sit on the page the way it was lit,
   instead of inside a visible white box on a coloured band. */
.phero--light .shot{background:none}
.phero--light .shot::after{box-shadow:none}
.phero--light .thumbs .shot{background:linear-gradient(168deg,#FAFAFA 0%,#EDEDEF 100%)}
.phero--light .thumbs .shot[aria-current="true"]{box-shadow:0 0 0 2px var(--blue-accent)}

/* keep the hero columns from drifting apart vertically */
.phero .split{align-items:center}
.phero--light [data-stage] .shot{max-width:min(100%,460px);margin-inline:auto}
.phero--light .thumbs{justify-content:center}

@media (max-width:1040px){
  .nav__menu{min-width:min(92vw,460px)}
}

/* ==========================================================================
   Photographic hero backgrounds
   ========================================================================== */

/* Two wash strengths.

   --img  : the page still has content in the right half (a stat block, a
            panel), so the wash stays above .74 alpha until 72% and only then
            releases. Worst case — a pure-white pixel under the text — that is
            4.6:1 for secondary text and 7.6:1 for white, so AA holds whatever
            the photograph does.

   --room : the page has been cleared of its right-hand panel because the room
            photograph IS the product shot. Text is confined to the left 46%,
            so the wash can fall away much earlier and the room reads properly.

   The photo layer carries a small saturation/contrast lift so it does not go
   muddy under the indigo. */
.phero--img{
  position:relative;overflow:hidden;
  background-size:cover;background-position:center right;
  min-height:clamp(400px,58vh,620px);
  display:grid;grid-template-columns:minmax(0,1fr);align-items:center;
}
.phero--img::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(20,11,99,.95) 0%,
    rgba(20,11,99,.90) 45%,
    rgba(20,11,99,.74) 72%,
    rgba(13,7,66,.40) 88%,
    rgba(13,7,66,.22) 100%);
}
.phero--room::before{
  background:linear-gradient(100deg,
    rgba(20,11,99,.94) 0%,
    rgba(20,11,99,.87) 40%,
    rgba(20,11,99,.56) 58%,
    rgba(13,7,66,.24) 78%,
    rgba(13,7,66,.10) 100%);
}
/* Scrim under the fixed nav so the reversed logo and links keep contrast
   whatever the photograph is doing up there. */
.phero--img::after{
  content:'';position:absolute;left:0;right:0;top:0;height:190px;
  background:linear-gradient(180deg,rgba(8,4,40,.66) 0%,rgba(8,4,40,.34) 45%,rgba(8,4,40,0) 100%);
  pointer-events:none;
}
.phero--img>.wrap{position:relative;z-index:1;width:100%}

/* The cleared hero: text column keeps its own width instead of stretching
   across the photograph. */
.phero--room .split{grid-template-columns:minmax(0,1fr)}
.phero--room .split>.stack-l{max-width:min(46ch,44%)}
.phero--room .measure-wide{max-width:min(46ch,44%)}
.phero--room>.wrap>.h1{max-width:min(16ch,44%)}
.phero--room{min-height:clamp(460px,66vh,680px)}
/* A hero asked to fill the viewport, so the section beneath it does not show a
   sliver of its own heading above the fold. */
.phero--tall{min-height:100svh;align-items:stretch;padding-block:0}
.phero--tall>.wrap{
  display:flex;flex-direction:column;justify-content:center;
  padding-top:calc(72px + 2rem);padding-bottom:clamp(2rem,5vh,3.5rem);
}
/* the national mark anchors the foot of the band rather than floating under
   the headline with a screenful of empty indigo below it */
.phero--tall .phero__head{margin-block:auto}
.phero--tall .atma{margin-top:0;padding-top:clamp(2.5rem,8vh,5rem)}
.phero--room{background-repeat:no-repeat;
  background-size:var(--hbg-size,cover);background-position:var(--hbg-pos,center)}

/* Mirror of the same hero for photographs whose product sits on the left:
   the text moves to the right and the wash follows it. */
.phero--room-r::before{
  background:linear-gradient(280deg,
    rgba(20,11,99,.94) 0%,
    rgba(20,11,99,.87) 40%,
    rgba(20,11,99,.56) 58%,
    rgba(13,7,66,.24) 78%,
    rgba(13,7,66,.10) 100%);
}
.phero--room-r .split>.stack-l{margin-left:auto}
.phero--room-r .crumbs{justify-content:flex-end}
@media (max-width:900px){
  .phero--room-r .split>.stack-l{margin-left:0}
  .phero--room-r .crumbs{justify-content:flex-start}
}

/* Home carousel: one background layer per slide, cross-fading with the slide. */
.hero__bgs{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero__bg{
  position:absolute;inset:0;opacity:0;
  background-size:var(--hbg-size,cover);
  background-position:var(--hbg-pos,center right);
  background-repeat:no-repeat;
  filter:saturate(1.06) contrast(1.04);
  transition:opacity .9s var(--ease);
}
.hero__bg.is-on{opacity:1}
/* The wash rides on each layer so a room slide and a texture slide can be
   washed differently; during the .9s cross-fade they blend with the photo. */
.hero__bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(100deg,
    rgba(20,11,99,.95) 0%,
    rgba(20,11,99,.90) 45%,
    rgba(20,11,99,.74) 72%,
    rgba(13,7,66,.40) 88%,
    rgba(13,7,66,.22) 100%);
}
.hero__bg--room::after{
  background:linear-gradient(100deg,
    rgba(20,11,99,.94) 0%,
    rgba(20,11,99,.87) 40%,
    rgba(20,11,99,.56) 58%,
    rgba(13,7,66,.24) 78%,
    rgba(13,7,66,.10) 100%);
}
.hero__bg--room-r::after{
  background:linear-gradient(280deg,
    rgba(20,11,99,.94) 0%,
    rgba(20,11,99,.87) 40%,
    rgba(20,11,99,.56) 58%,
    rgba(13,7,66,.24) 78%,
    rgba(13,7,66,.10) 100%);
}
/* Same nav scrim as the page heroes, so the reversed logo holds over a bright
   photograph. Sits above the background layers, below the slide content. */
.hero__bgs::after{
  content:'';position:absolute;left:0;right:0;top:0;height:190px;
  background:linear-gradient(180deg,rgba(8,4,40,.60) 0%,rgba(8,4,40,.30) 45%,rgba(8,4,40,0) 100%);
}
.hero>.wrap,.hero>.hero__ui,.hero>.hero__scroll{position:relative;z-index:1}

/* A slide whose background already shows the product in a room does not need
   the lightbox panel beside it — two televisions in one frame reads as a
   mistake. Below 900px the wash goes vertical and hides the room, so the
   panel comes back. */
@media (min-width:901px){
  .hslide--room .hero__shot{display:none}
  .hslide--room .hero__grid{grid-template-columns:minmax(0,1fr)}
  .hslide--room .stack-l{max-width:min(48ch,46%)}
  .hslide--room-r .stack-l{margin-left:auto}
}

@media (max-width:900px){
  /* A narrow screen cannot hold text and photograph in the same band without
     washing the photograph away, so the hero stacks: solid indigo behind the
     words, the room photograph below it at full width and almost unwashed.
     56.3vw is the photographs' own 1672x941 aspect. */
  .phero--img{
    background-size:auto var(--hbg-ar,56.3vw);
    background-position:var(--hbg-mob-pos,center bottom);
    background-repeat:no-repeat;
    padding-bottom:calc(var(--hbg-ar,56.3vw) + 2.5rem);
    min-height:auto;
  }
  .phero--img::before,.phero--room::before,.phero--room-r::before{
    background:linear-gradient(180deg,
      var(--ink) 0,
      var(--ink) calc(100% - var(--hbg-ar,56.3vw)),
      rgba(20,11,99,.14) calc(100% - var(--hbg-ar,56.3vw)),
      rgba(20,11,99,.08) 100%);
  }
  .phero--room .split>.stack-l,.phero--room .measure-wide,
  .phero--room>.wrap>.h1{max-width:none}
  .hero__bg{background-size:cover;background-position:center right}
  .hero__bg::after,.hero__bg--room::after,.hero__bg--room-r::after{
    background:linear-gradient(180deg,
      rgba(20,11,99,.94) 0%,
      rgba(20,11,99,.90) 55%,
      rgba(13,7,66,.86) 100%);
  }
}

/* ==========================================================================
   In the room — the room photography at full size
   ========================================================================== */
.rooms{
  display:grid;gap:clamp(.75rem,1.4vw,1.25rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.room{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--r-lg,18px);
  background:var(--elevated);
  aspect-ratio:16/9;
  isolation:isolate;
}
.room--wide{grid-column:span 2}
.room--wide{aspect-ratio:21/8}
.room img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);
  transition:transform .8s var(--ease),filter .8s var(--ease);
  filter:saturate(1.04);
}
.room:hover img,.room:focus-visible img{transform:scale(1.06)}
.room__cap{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;gap:.4rem;
  padding:clamp(1rem,2.4vw,1.75rem);
  background:linear-gradient(180deg,rgba(8,4,40,0) 0%,rgba(8,4,40,.62) 52%,rgba(8,4,40,.92) 100%);
  color:#fff;
}
.room__line{font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.35;max-width:34ch}
.room:focus-visible{outline:2px solid var(--lavender);outline-offset:3px}

@media (max-width:760px){
  .rooms{grid-template-columns:minmax(0,1fr)}
  .room--wide{grid-column:span 1;aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){
  .room img,.room:hover img,.room:focus-visible img{transform:none;transition:none}
}