/* =====================================================================
   TEJVAAN — design system
   ---------------------------------------------------------------------
   Palette note: the light ground is a cool steel grey, not the warmer
   off-white you often see. This is a metal appliance brand — tanks,
   elements, pressure, hard water. A warm cream ground would read
   artisanal, which is the wrong promise for a geyser.

   Type: Montserrat, self-hosted and subset to Latin (48KB for three
   weights). Hindi text falls through to the device's own Devanagari
   font, which every Android and iOS phone already has — much cheaper
   than shipping a Devanagari webfont over an Indian mobile connection.
   ===================================================================== */

/* ---------- fonts ---------- */
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-SemiBold.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('../fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --navy-950:#08182F;
  --navy-900:#0A1F40;
  --navy:#0E2A54;
  --navy-700:#1B3D6E;
  --copper:#C47E4A;
  --copper-600:#A9662F;
  --copper-50:#FBF3EB;

  --steel-50:#F5F7FA;
  --steel-100:#E9EDF3;
  --steel-200:#DCE3EC;
  --steel-300:#C2CBD8;

  --ink:#16191D;
  --muted:#5C6673;
  --white:#FFFFFF;

  --ok:#067647;
  --warn:#B54708;
  --bad:#B42318;

  --font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* Devanagari falls back to whatever the device ships */
  --font-hi:'Noto Sans Devanagari','Nirmala UI','Mangal',var(--font);

  --fs-display:clamp(2.25rem,5.6vw,4.4rem);
  --fs-h1:clamp(1.8rem,3.8vw,2.9rem);
  --fs-h2:clamp(1.35rem,2.5vw,1.95rem);
  --fs-h3:1.125rem;
  --fs-body:1rem;
  --fs-sm:0.875rem;
  --fs-xs:0.78rem;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;

  --r-sm:5px; --r:9px; --r-lg:16px; --r-pill:999px;

  --sh-1:0 1px 3px rgba(8,24,47,.06),0 1px 2px rgba(8,24,47,.04);
  --sh-2:0 4px 14px rgba(8,24,47,.08);
  --sh-3:0 14px 44px rgba(8,24,47,.13);

  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1200px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--steel-50);color:var(--ink);
  font-family:var(--font);font-size:var(--fs-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
html[lang="hi"] body{font-family:var(--font-hi)}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:none}
a:hover{color:var(--copper-600)}
button{font-family:inherit}
h1,h2,h3,h4{margin:0 0 var(--sp-4);line-height:1.18;font-weight:700;letter-spacing:-.02em}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);letter-spacing:-.01em}
p{margin:0 0 var(--sp-4)}
ul,ol{margin:0 0 var(--sp-4);padding-left:1.15em}
:focus-visible{outline:3px solid var(--copper);outline-offset:2px;border-radius:3px}

/* screen-reader only */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);
  color:#fff;padding:12px 18px}
.skip:focus{left:8px;top:8px;color:#fff}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
@media(min-width:900px){.wrap{padding:0 40px}}
.section{padding:var(--sp-8) 0}
@media(min-width:900px){.section{padding:var(--sp-9) 0}}
.section--tight{padding:var(--sp-7) 0}
.section--navy{background:var(--navy);color:#fff}
.section--navy h2,.section--navy h3{color:#fff}
.section--white{background:var(--white)}
.grid{display:grid;gap:var(--sp-5)}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.grid-4{grid-template-columns:repeat(4,1fr)}}

/* ---------- eyebrow + section heads ---------- */
.eyebrow{
  display:inline-block;font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--copper);
  margin-bottom:var(--sp-3);
}
.section--navy .eyebrow{color:var(--copper)}
.lede{font-size:1.075rem;color:var(--muted);max-width:62ch}
.section--navy .lede{color:#B9C6DA}
.head-center{text-align:center;margin:0 auto var(--sp-7);max-width:64ch}
.head-center .lede{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 26px;border:2px solid transparent;border-radius:var(--r-sm);
  background:var(--navy);color:#fff;font-size:.95rem;font-weight:600;
  letter-spacing:.01em;cursor:pointer;text-align:center;
  transition:background .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease);
}
.btn:hover{background:var(--navy-700);color:#fff;transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(0)}
.btn--copper{background:var(--copper)}
.btn--copper:hover{background:var(--copper-600);color:#fff}
.btn--ghost{background:transparent;border-color:var(--steel-300);color:var(--navy)}
.btn--ghost:hover{background:var(--white);border-color:var(--navy);color:var(--navy)}
.btn--onnavy{background:var(--white);color:var(--navy)}
.btn--onnavy:hover{background:var(--copper);color:#fff}
.btn--outline-light{background:transparent;border-color:rgba(255,255,255,.4);color:#fff}
.btn--outline-light:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.btn--sm{padding:9px 17px;font-size:var(--fs-sm)}
.btn--block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

/* ---------- cards ---------- */
.card{
  background:var(--white);border:1px solid var(--steel-200);border-radius:var(--r);
  padding:var(--sp-5);box-shadow:var(--sh-1);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
}
.card--hover:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:var(--copper)}
.card__icon{
  width:44px;height:44px;border-radius:var(--r-sm);background:var(--copper-50);
  color:var(--copper-600);display:flex;align-items:center;justify-content:center;
  margin-bottom:var(--sp-4);
}
.card__icon svg{width:22px;height:22px}
.card h3{margin-bottom:var(--sp-2)}
.card p:last-child{margin-bottom:0}
.card p{color:var(--muted);font-size:var(--fs-sm)}

/* ---------- header ---------- */
.utility{
  background:var(--navy-950);color:#96A7C0;font-size:var(--fs-xs);
}
.utility .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-4);min-height:38px;flex-wrap:wrap}
.utility a{color:#C8D5E8}
.utility a:hover{color:var(--copper)}
.utility__left{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.utility strong{color:#fff;font-weight:600}
.utility__right{display:flex;align-items:center;gap:var(--sp-3)}
/* On small phones the strip gets crowded — drop the email and the social row,
   both of which are repeated in the footer anyway. */
@media(max-width:620px){
  .utility__left a[href^="mailto:"]{display:none}
  .utility .social{display:none}
}
.langtoggle{display:inline-flex;border:1px solid rgba(255,255,255,.22);border-radius:var(--r-pill);overflow:hidden}
.langtoggle a{padding:3px 11px;font-weight:600;letter-spacing:.04em}
.langtoggle a[aria-current="true"]{background:var(--copper);color:#fff}
.social{display:flex;gap:10px;align-items:center}
.social a{display:flex;width:22px;height:22px;align-items:center;justify-content:center}
.social svg{width:15px;height:15px;fill:currentColor}

.masthead{
  position:sticky;top:0;z-index:90;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--steel-200);
  transition:box-shadow .3s var(--ease),padding .3s var(--ease);
}
.masthead.is-stuck{box-shadow:var(--sh-2)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  min-height:70px;transition:min-height .3s var(--ease)}
.masthead.is-stuck .wrap{min-height:58px}
.brandmark{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brandmark img{height:30px;width:auto;transition:height .3s var(--ease)}
.masthead.is-stuck .brandmark img{height:26px}

.nav{display:none}
@media(min-width:1000px){
  .nav{display:flex;align-items:center;gap:var(--sp-1)}
  .nav>li{list-style:none;position:relative}
  .nav>li>a{
    display:block;padding:11px 14px;font-size:.925rem;font-weight:600;
    color:var(--ink);border-radius:var(--r-sm);
  }
  .nav>li>a:hover,.nav>li>a[aria-current="page"]{color:var(--navy);background:var(--steel-100)}
  .nav>li>a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--copper)}
  .nav ul{position:absolute;top:calc(100% + 6px);left:0;min-width:236px;
    background:var(--white);border:1px solid var(--steel-200);border-radius:var(--r);
    box-shadow:var(--sh-3);padding:8px;margin:0;list-style:none;
    opacity:0;visibility:hidden;transform:translateY(-7px);
    transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s}
  .nav li:hover>ul,.nav li:focus-within>ul{opacity:1;visibility:visible;transform:translateY(0)}
  .nav ul a{display:block;padding:9px 12px;border-radius:var(--r-sm);font-size:.9rem;color:var(--ink)}
  .nav ul a:hover{background:var(--steel-100);color:var(--navy)}
  .nav ul .sub{display:block;font-size:var(--fs-xs);color:var(--muted);font-weight:400}
}
.masthead__cta{display:none}
@media(min-width:1150px){.masthead__cta{display:inline-flex}}

.burger{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:44px;height:44px;border:1px solid var(--steel-200);border-radius:var(--r-sm);
  background:var(--white);cursor:pointer;padding:0 11px;
}
.burger span{display:block;height:2px;background:var(--navy);border-radius:2px;
  transition:transform .28s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:1000px){.burger{display:none}}

.drawer{
  position:fixed;inset:0;z-index:95;background:var(--white);
  padding:var(--sp-5) 0 var(--sp-8);overflow-y:auto;
  transform:translateX(100%);transition:transform .34s var(--ease);
}
.drawer[data-open="true"]{transform:translateX(0)}
.drawer__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-5)}
.drawer nav ul{list-style:none;margin:0;padding:0}
.drawer nav>ul>li{border-bottom:1px solid var(--steel-100)}
.drawer nav>ul>li>a{display:block;padding:15px 2px;font-size:1.05rem;font-weight:600;color:var(--ink)}
.drawer nav ul ul{padding:0 0 12px 14px}
.drawer nav ul ul a{display:block;padding:8px 2px;font-size:.94rem;color:var(--muted)}
.drawer nav ul ul a:hover{color:var(--navy)}
@media(min-width:1000px){.drawer{display:none}}

/* ---------- hero ---------- */
.hero{
  position:relative;background:var(--navy);color:#fff;overflow:hidden;
  padding:var(--sp-8) 0 var(--sp-9);
}
.hero::before{
  /* soft copper wash, top-right */
  content:'';position:absolute;top:-30%;right:-15%;width:70%;height:130%;
  background:radial-gradient(ellipse at center,rgba(196,126,74,.30),transparent 66%);
  pointer-events:none;
}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(8,24,47,.5));
}
.hero .wrap{position:relative;z-index:2}
.hero__grid{display:grid;gap:var(--sp-7);align-items:center}
@media(min-width:920px){.hero__grid{grid-template-columns:1.06fr .94fr;gap:var(--sp-8)}}
.hero h1{
  font-size:var(--fs-display);letter-spacing:-.035em;line-height:1.03;
  margin-bottom:var(--sp-4);
}
.hero h1 em{font-style:normal;color:var(--copper);display:block}
.hero__lede{font-size:1.1rem;color:#C3D0E3;max-width:52ch;margin-bottom:var(--sp-6)}
.hero__actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.hero__proof{display:flex;gap:var(--sp-6);flex-wrap:wrap;padding-top:var(--sp-5);
  border-top:1px solid rgba(255,255,255,.16)}
.hero__proof div{min-width:88px}
.hero__proof b{display:block;font-size:1.6rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.hero__proof span{font-size:var(--fs-xs);color:#96A7C0;text-transform:uppercase;letter-spacing:.11em}
.hero__figure{position:relative;display:flex;justify-content:center;align-items:center;min-height:280px}
.hero__figure .placeholder{
  width:100%;max-width:360px;aspect-ratio:3/4;border-radius:var(--r-lg);
  border:2px dashed rgba(255,255,255,.28);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;text-align:center;padding:var(--sp-5);
  color:#96A7C0;font-size:var(--fs-sm);
}

/* ---------- trust strip ---------- */
.trust{background:var(--white);border-bottom:1px solid var(--steel-200)}
.trust ul{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4);
  list-style:none;margin:0;padding:var(--sp-5) 0}
@media(min-width:840px){.trust ul{grid-template-columns:repeat(4,1fr)}}
.trust li{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-sm);font-weight:600}
.trust svg{width:19px;height:19px;color:var(--copper);flex-shrink:0;margin-top:2px}
.trust span{display:block;font-weight:400;color:var(--muted);font-size:var(--fs-xs)}

/* ---------- product cards ---------- */
.prod{display:flex;flex-direction:column;overflow:hidden;padding:0}
.prod__media{
  position:relative;aspect-ratio:4/3;background:var(--steel-100);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.prod__media img{width:100%;height:100%;object-fit:contain;padding:var(--sp-4);
  transition:transform .45s var(--ease)}
.card--hover:hover .prod__media img{transform:scale(1.05)}
.prod__media .ph{color:var(--muted);font-size:var(--fs-xs);text-align:center;padding:var(--sp-4)}
.prod__tag{position:absolute;top:12px;left:12px;background:var(--navy);color:#fff;
  font-size:var(--fs-xs);font-weight:600;padding:4px 11px;border-radius:var(--r-pill);
  letter-spacing:.06em;text-transform:uppercase}
.prod__tag--copper{background:var(--copper)}
.prod__body{padding:var(--sp-5);display:flex;flex-direction:column;flex:1}
.prod__body h3{margin-bottom:var(--sp-1)}
.prod__cap{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:var(--sp-3)}
.prod__specs{list-style:none;padding:0;margin:0 0 var(--sp-4);font-size:var(--fs-sm)}
.prod__specs li{display:flex;justify-content:space-between;gap:var(--sp-3);
  padding:6px 0;border-bottom:1px solid var(--steel-100);color:var(--muted)}
.prod__specs li b{color:var(--ink);font-weight:600}
.prod__foot{margin-top:auto;display:flex;align-items:end;justify-content:space-between;gap:var(--sp-3)}
.price{display:flex;flex-direction:column}
.price b{font-size:1.4rem;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.price span{font-size:var(--fs-xs);color:var(--muted)}

/* ---------- forms ---------- */
.form{background:var(--white);border:1px solid var(--steel-200);border-radius:var(--r-lg);
  padding:var(--sp-5);box-shadow:var(--sh-1)}
@media(min-width:700px){.form{padding:var(--sp-6)}}
.fieldset{border:0;padding:0;margin:0 0 var(--sp-6)}
.fieldset legend{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--copper);padding:0;margin-bottom:var(--sp-4);
}
.frow{display:grid;gap:var(--sp-4);margin-bottom:var(--sp-4)}
@media(min-width:640px){.frow--2{grid-template-columns:1fr 1fr}
  .frow--3{grid-template-columns:1fr 1fr 1fr}}
.field label,.flabel{display:block;font-size:var(--fs-sm);font-weight:600;margin-bottom:6px}
.field .req{color:var(--bad)}
.field .hint{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:5px}
input[type=text],input[type=tel],input[type=email],input[type=date],
input[type=password],input[type=number],select,textarea{
  width:100%;padding:12px 14px;font-family:inherit;font-size:1rem;color:var(--ink);
  background:var(--white);border:1.5px solid var(--steel-300);border-radius:var(--r-sm);
  transition:border-color .2s,box-shadow .2s;
}
input:hover,select:hover,textarea:hover{border-color:var(--steel-300)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(196,126,74,.17)}
textarea{resize:vertical;min-height:110px}
select{appearance:none;background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6673' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:17px;padding-right:40px}
.field.has-error input,.field.has-error select,.field.has-error textarea{
  border-color:var(--bad);background:#FFFBFA}
.field .err{display:none;font-size:var(--fs-xs);color:var(--bad);margin-top:5px;font-weight:600}
.field.has-error .err{display:block}
.check{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-sm);cursor:pointer}
.check input{width:19px;height:19px;flex-shrink:0;margin-top:2px;accent-color:var(--navy)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* file upload */
.upload{
  border:2px dashed var(--steel-300);border-radius:var(--r);padding:var(--sp-5);
  text-align:center;cursor:pointer;background:var(--steel-50);
  transition:border-color .22s,background .22s;
}
.upload:hover,.upload.is-drag{border-color:var(--copper);background:var(--copper-50)}
.upload input{position:absolute;left:-9999px}
.upload svg{width:30px;height:30px;color:var(--copper);margin:0 auto var(--sp-3)}
.upload b{display:block;font-size:var(--fs-sm)}
.upload span{font-size:var(--fs-xs);color:var(--muted)}
.upload__preview{display:none;margin-top:var(--sp-4)}
.upload__preview img{max-height:190px;margin:0 auto;border-radius:var(--r-sm);border:1px solid var(--steel-200)}
.upload__preview p{font-size:var(--fs-xs);color:var(--muted);margin:var(--sp-2) 0 0}

/* ---------- alerts ---------- */
.alert{padding:15px 18px;border-radius:var(--r);border-left:4px solid;
  margin-bottom:var(--sp-5);font-size:var(--fs-sm)}
.alert h3{font-size:1rem;margin-bottom:6px}
.alert p:last-child{margin-bottom:0}
.alert--ok{background:#ECFDF3;border-color:var(--ok);color:#054F31}
.alert--err{background:#FEF3F2;border-color:var(--bad);color:#912018}
.alert--info{background:#EFF6FF;border-color:var(--navy);color:#173A6B}
.alert--warn{background:#FFFAEB;border-color:var(--warn);color:#7A2E0E}

/* ---------- pills / badges ---------- */
.pill{display:inline-block;padding:3px 11px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em}
.pill--ok{background:#DCFAE6;color:var(--ok)}
.pill--wait{background:#FEF0C7;color:var(--warn)}
.pill--bad{background:#FEE4E2;color:var(--bad)}
.pill--navy{background:var(--steel-100);color:var(--navy)}

/* ---------- footer ---------- */
.foot{background:var(--navy-950);color:#93A4BE;font-size:var(--fs-sm);padding:var(--sp-8) 0 0}
.foot h4{color:#fff;font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:var(--sp-4)}
.foot a{color:#B8C6DA}
.foot a:hover{color:var(--copper)}
.foot__grid{display:grid;gap:var(--sp-6);padding-bottom:var(--sp-7)}
@media(min-width:700px){.foot__grid{grid-template-columns:1.5fr 1fr 1fr}}
@media(min-width:1000px){.foot__grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:9px}
.foot__brand img{height:28px;margin-bottom:var(--sp-4)}
.foot__tag{color:var(--copper);font-size:var(--fs-xs);letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:var(--sp-4)}
.foot__bar{border-top:1px solid rgba(255,255,255,.1);padding:var(--sp-5) 0;
  display:flex;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;
  font-size:var(--fs-xs)}
.foot__legal{display:flex;gap:var(--sp-4);flex-wrap:wrap}

/* ---------- floating WhatsApp ---------- */
.wa{
  position:fixed;right:16px;bottom:16px;z-index:80;
  width:54px;height:54px;border-radius:50%;background:#25D366;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 20px rgba(0,0,0,.24);
  transition:transform .25s var(--ease);
}
.wa:hover{transform:scale(1.08)}
.wa svg{width:29px;height:29px;fill:#fff}

/* ---------- scroll progress rail (desktop only) ---------- */
.rail{position:fixed;left:0;top:0;width:3px;height:100vh;z-index:85;
  background:rgba(14,42,84,.07);display:none}
.rail i{display:block;width:100%;height:0;background:linear-gradient(180deg,var(--copper),var(--copper-600))}
@media(min-width:1200px){.rail{display:block}}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(20px);
  transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}
.reveal[data-d="4"]{transition-delay:.36s}

/* logo intro — plays once per browser session */
.intro{position:fixed;inset:0;z-index:300;background:var(--navy);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s var(--ease),visibility .6s}
.intro[data-done="true"]{opacity:0;visibility:hidden}
.intro img{width:min(260px,58vw);opacity:0;transform:scale(.94);
  animation:introIn 1.15s var(--ease) forwards}
.intro span{position:absolute;bottom:calc(50% - 62px);font-size:var(--fs-xs);
  letter-spacing:.34em;text-transform:uppercase;color:var(--copper);opacity:0;
  animation:introIn .8s var(--ease) .5s forwards}
@keyframes introIn{to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .intro{display:none}
}

/* ---------- utilities ---------- */
.tc{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mb-4{margin-bottom:var(--sp-4)}.mb-5{margin-bottom:var(--sp-5)}.mb-6{margin-bottom:var(--sp-6)}
.muted{color:var(--muted)}
.small{font-size:var(--fs-sm)}
.xs{font-size:var(--fs-xs)}
.nowrap{white-space:nowrap}
.hide{display:none!important}
.stack>*+*{margin-top:var(--sp-4)}
.kv{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.kv td{padding:10px 0;border-bottom:1px solid var(--steel-100);vertical-align:top}
.kv td:first-child{color:var(--muted);width:44%}
.kv td:last-child{font-weight:600}
.crumbs{font-size:var(--fs-xs);color:var(--muted);padding:var(--sp-4) 0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--copper)}

/* ---------- long-form prose (legal, blog, story) ---------- */
.prose{max-width:74ch}
.prose h2{margin:var(--sp-7) 0 var(--sp-3);font-size:1.35rem;padding-top:var(--sp-5);
  border-top:1px solid var(--steel-200)}
.prose h2:first-of-type{border-top:0;padding-top:0;margin-top:var(--sp-5)}
.prose h3{margin:var(--sp-5) 0 var(--sp-2);font-size:1.05rem}
.prose p,.prose li{color:#2B3138}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-bottom:8px}
.prose li::marker{color:var(--copper)}
.prose table{width:100%;border-collapse:collapse;margin:var(--sp-4) 0;font-size:var(--fs-sm)}
.prose th,.prose td{padding:10px 12px;border:1px solid var(--steel-200);text-align:left;vertical-align:top}
.prose th{background:var(--steel-100);font-weight:600}
.prose code{background:var(--steel-100);padding:2px 6px;border-radius:3px;font-size:.9em}
.prose a{text-decoration:underline;text-decoration-color:var(--steel-300);text-underline-offset:3px}
.prose a:hover{text-decoration-color:var(--copper)}
.prose .box{background:var(--white);border:1px solid var(--steel-200);border-left:4px solid var(--copper);
  border-radius:var(--r);padding:var(--sp-5);margin:var(--sp-5) 0}
.prose .box h3{margin-top:0}
.prose .box p:last-child{margin-bottom:0}
.legalmeta{font-size:var(--fs-xs);color:var(--muted);padding-bottom:var(--sp-5);
  border-bottom:1px solid var(--steel-200);margin-bottom:var(--sp-5)}
.toc{background:var(--white);border:1px solid var(--steel-200);border-radius:var(--r);
  padding:var(--sp-5);margin-bottom:var(--sp-6)}
.toc h2{margin:0 0 var(--sp-3);font-size:var(--fs-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--copper);border:0;padding:0}
.toc ol{margin:0;padding-left:1.2em;columns:2;column-gap:var(--sp-6)}
@media(max-width:640px){.toc ol{columns:1}}
.toc li{margin-bottom:6px;font-size:var(--fs-sm)}

/* ---------- cookie consent ---------- */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--navy-950);
  color:#C3D0E3;border-top:2px solid var(--copper);
  transform:translateY(110%);transition:transform .4s var(--ease)}
.cc[data-show="true"]{transform:translateY(0)}
.cc__in{max-width:var(--wrap);margin:0 auto;padding:16px 20px;display:flex;gap:var(--sp-5);
  align-items:center;justify-content:space-between;flex-wrap:wrap}
.cc__txt{flex:1;min-width:260px}
.cc__txt strong{display:block;color:#fff;font-size:var(--fs-sm);margin-bottom:3px}
.cc__txt p{margin:0;font-size:var(--fs-xs);line-height:1.55}
.cc__txt a{color:var(--copper)}
.cc__btns{display:flex;gap:10px;flex-shrink:0}
.cc__btns .btn--ghost{background:transparent;border-color:rgba(255,255,255,.32);color:#fff}
.cc__btns .btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff}
@media(max-width:620px){.cc__in{padding:14px 16px}.cc__btns{width:100%}.cc__btns .btn{flex:1}}
/* On phones the mobile action bar owns the bottom edge, so sit the consent
   strip above it rather than covering it. */
@media(max-width:760px){
  .cc{bottom:58px}
  .cc[data-show="true"]{transform:translateY(0)}
}

/* ---------- back to top ---------- */
.totop{position:fixed;right:16px;bottom:82px;z-index:79;width:44px;height:44px;
  border:1px solid var(--steel-200);border-radius:50%;background:var(--white);
  color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-2);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s}
.totop[data-show="true"]{opacity:1;visibility:visible;transform:none}
.totop svg{width:19px;height:19px}
.totop:hover{border-color:var(--copper);color:var(--copper-600)}
@media(min-width:900px){.totop{bottom:82px}}

/* ---------- mobile action bar ---------- */
.mobar{display:none}
@media(max-width:760px){
  .mobar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;
    z-index:78;background:var(--white);border-top:1px solid var(--steel-200);
    box-shadow:0 -2px 14px rgba(8,24,47,.08);padding-bottom:env(safe-area-inset-bottom)}
  .mobar a,.mobar button{display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:9px 4px;border:0;background:none;font:inherit;color:var(--ink);cursor:pointer;
    text-decoration:none}
  .mobar svg{width:20px;height:20px;color:var(--navy)}
  .mobar span{font-size:10.5px;letter-spacing:.02em}
  .mobar a:active,.mobar button:active{background:var(--steel-100)}
  /* keep the floating buttons clear of the bar */
  .wa{bottom:74px}
  .totop{bottom:136px}
  body{padding-bottom:58px}
}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:120;background:rgba(8,24,47,.55);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;transition:opacity .28s var(--ease)}
/* display:flex above beats the browser's [hidden]{display:none}, which would
   leave an invisible overlay swallowing every click on the page. */
.modal[hidden]{display:none}
.modal[data-open="true"]{opacity:1}
.modal__box{background:var(--white);border-radius:var(--r-lg);padding:var(--sp-6);
  max-width:420px;width:100%;max-height:90vh;overflow-y:auto;position:relative;
  box-shadow:var(--sh-3);transform:translateY(14px);transition:transform .28s var(--ease)}
.modal[data-open="true"] .modal__box{transform:none}
.modal__x{position:absolute;top:10px;right:14px;border:0;background:none;font-size:1.7rem;
  line-height:1;color:var(--muted);cursor:pointer;padding:4px 8px}
.modal__x:hover{color:var(--ink)}

/* ---------- hero typewriter ---------- */
.tw-cursor{display:inline-block;width:3px;height:.82em;background:var(--copper);
  margin-left:4px;vertical-align:-2px;animation:twBlink 1s steps(2) infinite}
@keyframes twBlink{0%,50%{opacity:1}51%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.tw-cursor{display:none}}

/* =====================================================================
   THERMAL IDENTITY  —  the visual system that makes this TEJVAAN's site
   and not a template with the colours swapped.
   ---------------------------------------------------------------------
   The idea: this is a water heater brand. Everything here is built on the
   journey from cold to hot — deep navy (cold water in) through copper
   (heat). That gradient appears in the scroll rail, section rules, card
   edges, numbering and the hero bloom. No other brand's site can borrow it
   without borrowing the meaning.
   ===================================================================== */

:root{
  --thermal: linear-gradient(90deg, var(--navy) 0%, var(--navy-700) 34%, var(--copper) 100%);
  --thermal-v: linear-gradient(180deg, var(--navy) 0%, var(--navy-700) 34%, var(--copper) 100%);
}

/* ---------- hero: breathing heat bloom + thermal scale ---------- */
.hero{isolation:isolate}
.hero::before{
  animation:bloom 9s ease-in-out infinite alternate;
  will-change:transform,opacity;
}
@keyframes bloom{
  0%{transform:translate3d(0,0,0) scale(1);opacity:.85}
  100%{transform:translate3d(-4%,3%,0) scale(1.18);opacity:1}
}

/* temperature scale down the left of the hero — reads as a thermometer */
.hero__scale{
  position:absolute;left:max(14px,calc((100vw - var(--wrap))/2 - 34px));
  top:50%;transform:translateY(-50%);z-index:3;
  display:none;flex-direction:column;align-items:center;gap:10px;
}
@media(min-width:1280px){.hero__scale{display:flex}}
.hero__scale i{
  display:block;width:2px;height:120px;border-radius:2px;
  background:linear-gradient(180deg,var(--copper),rgba(255,255,255,.12));
}
.hero__scale span{
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#7D8FA9;
  writing-mode:vertical-rl;
}

/* ---------- editorial section numbering ---------- */
.eyebrow{position:relative;display:inline-flex;align-items:center;gap:11px}
.eyebrow[data-n]::before{
  content:attr(data-n);
  font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--white);
  background:var(--copper);width:20px;height:20px;border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
}
.section--navy .eyebrow[data-n]::before{background:var(--copper);color:#08182F}

/* thin thermal rule that draws itself in as the section arrives */
.head-center::after,.thermal-rule{
  content:'';display:block;height:2px;width:0;max-width:200px;
  background:var(--thermal);border-radius:2px;
  margin:var(--sp-5) auto 0;
  transition:width 1.1s var(--ease) .15s;
}
.head-center.is-in::after,.thermal-rule.is-in{width:200px}

/* ---------- cards: heat edge on hover ---------- */
.card{position:relative;overflow:hidden}
.card--hover::after{
  content:'';position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--thermal);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease);
}
.card--hover:hover::after{transform:scaleX(1)}

/* ---------- richer scroll motion ---------- */
.reveal{
  opacity:0;transform:translate3d(0,38px,0) scale(.985);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
  will-change:opacity,transform;
}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.10s}
.reveal[data-d="2"]{transition-delay:.20s}
.reveal[data-d="3"]{transition-delay:.30s}
.reveal[data-d="4"]{transition-delay:.40s}

/* headline words rise in sequence */
.riseword{display:inline-block;opacity:0;transform:translate3d(0,.5em,0);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.is-in .riseword,.riseword.is-in{opacity:1;transform:none}

/* wipe reveal for figures and tables — feels engineered rather than generic */
.wipe{clip-path:inset(0 99.4% 0 0);transition:clip-path 1s var(--ease)}
.wipe.is-in{clip-path:inset(0 0 0 0)}

/* ---------- thermal scroll rail ---------- */
.rail{background:rgba(14,42,84,.06);width:4px}
.rail i{background:var(--thermal-v);box-shadow:0 0 12px rgba(196,126,74,.55)}

/* ---------- fact ticker ---------- */
.ticker{background:var(--navy-950);color:#C3D0E3;overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.ticker__track{display:flex;width:max-content;animation:tick 38s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__item{display:flex;align-items:center;gap:11px;padding:13px 30px;
  font-size:var(--fs-sm);white-space:nowrap}
.ticker__item b{color:#fff;font-weight:700}
.ticker__item::after{content:'';width:5px;height:5px;border-radius:50%;
  background:var(--copper);margin-left:19px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- pressure gauge dial (product hero) ---------- */
.gauge{position:absolute;right:18px;bottom:18px;width:88px;height:88px;z-index:3}
.gauge circle{fill:none;stroke-width:5;stroke-linecap:round}
.gauge .bg{stroke:rgba(255,255,255,.14)}
.gauge .fg{stroke:var(--copper);stroke-dasharray:220;stroke-dashoffset:220;
  transition:stroke-dashoffset 1.6s var(--ease) .4s}
.gauge.is-in .fg{stroke-dashoffset:var(--gauge-off,66)}
.gauge text{fill:#fff;font-family:var(--font);font-weight:700}

@media(prefers-reduced-motion:reduce){
  .hero::before{animation:none}
  .ticker__track{animation:none}
  .reveal,.riseword,.wipe{opacity:1;transform:none;clip-path:none}
  .head-center::after,.thermal-rule{width:200px;transition:none}
}