/* =========================================================================
   Majestic Handbags — luxury theme
   ========================================================================= */

:root{
  --ink:        #0A0A0C;
  --ink-2:      #101014;
  --panel:      #16161B;
  --panel-2:    #1D1D23;
  --line:       #2A2A32;
  --line-soft:  #23232A;

  --gold:       #C9A24C;
  --gold-lt:    #E9D8A6;
  --gold-dp:    #8C6A2A;
  --gold-grad:  linear-gradient(135deg,#8C6A2A 0%,#E9D8A6 28%,#C9A24C 52%,#F2E3B6 76%,#9A7530 100%);
  /* Same sheen, lifted off the dark end. Gradient-filled text sits on a near
     black page, and the dark stops above erase hairline strokes — the reph and
     matra tails in Devanagari/Gurmukhi vanish outright. Use this for text. */
  --gold-text-grad: linear-gradient(120deg,#C79A3E 0%,#F0DFAE 26%,#D9B45C 50%,#F7EBC8 74%,#C89F45 100%);

  --text:       #EFECE6;
  --text-2:     #B7B1A6;
  --text-3:     #837D72;

  --serif:  'Cormorant Garamond','Didot','Bodoni MT',Georgia,serif;
  --sans:   'Jost','Futura','Avenir Next',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;

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

/* Script-specific typefaces ------------------------------------------------ */
html[lang="hi"]{ --serif:'Noto Serif Devanagari',Georgia,serif; --sans:'Noto Sans Devanagari',system-ui,sans-serif; }
html[lang="pa"]{ --serif:'Noto Sans Gurmukhi',Georgia,serif;    --sans:'Noto Sans Gurmukhi',system-ui,sans-serif; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  font-size:16px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:28px; }

/* Shared type ------------------------------------------------------------- */
.eyebrow{
  font-size:11px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); font-weight:400; margin:0 0 18px;
  display:flex; align-items:center; gap:14px;
}
.eyebrow::after{ content:''; flex:0 0 44px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); }
.eyebrow.center{ justify-content:center; }
/* Wide tracking pulls Devanagari/Gurmukhi clusters apart and makes them hard
   to read — drop it for those languages. */
html[lang="hi"] .eyebrow, html[lang="pa"] .eyebrow{
  letter-spacing:.04em; text-transform:none; font-size:12.5px;
}
html[lang="hi"] .modal-ref, html[lang="pa"] .modal-ref{ letter-spacing:normal; }
.eyebrow.center::before{ content:''; flex:0 0 44px; height:1px; background:linear-gradient(270deg,var(--gold),transparent); }

h1,h2,h3{ font-family:var(--serif); font-weight:400; letter-spacing:.01em; margin:0; line-height:1.14; }
h2.sec-title{ font-size:clamp(2rem,4.2vw,3.35rem); margin:0 0 18px; }
html[lang="pa"] h2.sec-title, html[lang="hi"] h2.sec-title{ font-size:clamp(1.6rem,3.2vw,2.5rem); line-height:1.35; }

.sec-sub{ color:var(--text-2); max-width:60ch; margin:0; font-size:1.02rem; }
.center .sec-sub{ margin-inline:auto; text-align:center; }

/* background-clip:text paints only inside the element's background box, so any
   ink that overflows it renders as nothing. Devanagari rephs and Gurmukhi
   matras sit well above the line box and disappeared entirely at these tight
   heading line-heights. Pad the box out and pull the padding back off the
   layout so the gradient covers the full glyph extents. */
.gold-text{
  background:var(--gold-text-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  padding-block:.22em; margin-block:-.22em;
}

section{ padding:clamp(72px,9vw,130px) 0; position:relative; }
.sec-head{ margin-bottom:clamp(38px,5vw,64px); }
.sec-head.center{ text-align:center; }

/* Buttons ----------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 34px; border-radius:2px; font-size:12.5px; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; white-space:nowrap;
  transition:all .45s var(--ease); position:relative; overflow:hidden;
}
html[lang="hi"] .btn, html[lang="pa"] .btn{ letter-spacing:.06em; text-transform:none; font-size:14px; }

.btn-gold{ background:var(--gold-grad); color:#191307; font-weight:500; }
.btn-gold:hover{ filter:brightness(1.12); transform:translateY(-2px); box-shadow:0 12px 34px -12px rgba(201,162,76,.55); }

.btn-ghost{ border:1px solid var(--line); color:var(--text-2); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-lt); transform:translateY(-2px); }

/* ============================ ANNOUNCE + HEADER ========================== */
.announce{
  background:var(--gold-grad); color:#1A1408;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  text-align:center; padding:9px 16px; font-weight:500;
}
html[lang="hi"] .announce, html[lang="pa"] .announce{ text-transform:none; letter-spacing:.02em; font-size:13px; }

.hdr{
  position:sticky; top:0; z-index:80;
  background:rgba(10,10,12,.72);
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.hdr.solid{ background:rgba(10,10,12,.94); border-bottom-color:var(--line-soft); }
@supports (backdrop-filter:blur(1px)){ .hdr{ backdrop-filter:blur(18px); } }

.hdr-in{ display:flex; align-items:center; justify-content:space-between; gap:24px; height:82px; min-width:0; }

.brand{ display:flex; align-items:center; gap:13px; min-width:0; }
.brand img{ width:44px; height:44px; }
.brand-txt{ display:flex; flex-direction:column; line-height:1; }
.brand-name{
  font-family:'Cormorant Garamond',Georgia,serif; font-size:22px; font-weight:500;
  letter-spacing:.22em; background:var(--gold-text-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.brand-sub{ font-family:'Jost',sans-serif; font-size:8.5px; letter-spacing:.42em; color:var(--text-3); margin-top:5px; }

.nav{ display:flex; align-items:center; gap:34px; }
.nav a{
  font-size:12px; letter-spacing:.17em; text-transform:uppercase; color:var(--text-2);
  transition:color .3s; position:relative; padding:4px 0;
}
html[lang="hi"] .nav a, html[lang="pa"] .nav a{ text-transform:none; letter-spacing:.02em; font-size:14.5px; }
.nav a::after{ content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .38s var(--ease); }
.nav a:hover{ color:var(--gold-lt); }
.nav a:hover::after{ width:100%; }

/* Language switcher */
.lang{ display:flex; align-items:center; gap:4px; border:1px solid var(--line); border-radius:2px; padding:3px; }
.lang button{
  padding:6px 13px; font-size:12px; letter-spacing:.06em; color:var(--text-3);
  border-radius:1px; transition:all .3s var(--ease); white-space:nowrap;
}
.lang button:hover{ color:var(--text); }
.lang button.on{ background:var(--gold-grad); color:#191307; font-weight:500; }
.lang .l-short{ display:none; }

.burger{ display:none; width:42px; height:42px; align-items:center; justify-content:center; }
.burger span{ display:block; width:22px; height:1px; background:var(--text); position:relative; transition:.3s; }
.burger span::before,.burger span::after{ content:''; position:absolute; left:0; width:22px; height:1px; background:var(--text); transition:.3s; }
.burger span::before{ top:-7px; } .burger span::after{ top:7px; }
.burger.open span{ background:transparent; }
.burger.open span::before{ top:0; transform:rotate(45deg); }
.burger.open span::after{ top:0; transform:rotate(-45deg); }

/* ================================= HERO ================================== */
.hero{ position:relative; padding:clamp(80px,11vw,150px) 0 clamp(70px,8vw,110px); overflow:hidden; }
.hero::before{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 68% 52% at 78% 22%, rgba(201,162,76,.14), transparent 62%),
    radial-gradient(ellipse 52% 46% at 12% 82%, rgba(140,106,42,.10), transparent 66%);
  pointer-events:none;
}
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,86px); align-items:center; position:relative; }

.hero h1{ font-size:clamp(2.9rem,6.6vw,5.4rem); line-height:1.03; margin:0 0 26px; letter-spacing:-.005em; }
html[lang="hi"] .hero h1, html[lang="pa"] .hero h1{ font-size:clamp(2.1rem,4.6vw,3.7rem); line-height:1.28; }
.hero h1 .gold-text{ display:block; font-style:italic; }
html[lang="hi"] .hero h1 .gold-text, html[lang="pa"] .hero h1 .gold-text{ font-style:normal; }

.hero p.lead{ color:var(--text-2); font-size:1.075rem; max-width:52ch; margin:0 0 38px; }
.hero-cta{ display:flex; gap:15px; flex-wrap:wrap; margin-bottom:52px; }

.hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; border-top:1px solid var(--line-soft); padding-top:30px; }
.hstat b{ display:block; font-family:var(--serif); font-size:clamp(1.7rem,3vw,2.3rem); font-weight:400; margin-bottom:5px; }
.hstat span{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3); line-height:1.5; display:block; }
html[lang="hi"] .hstat span, html[lang="pa"] .hstat span{ text-transform:none; letter-spacing:0; font-size:13px; }

/* Hero collage */
.hero-art{ position:relative; aspect-ratio:1/1.06; }
.hero-art .frame{
  position:absolute; border-radius:3px; overflow:hidden;
  background:var(--panel); border:1px solid var(--line);
  box-shadow:0 30px 70px -26px rgba(0,0,0,.9);
}
/* Product shots are square on white — contain them so nothing gets cropped. */
.hero-art .frame{ background:#F4F2EE; }
.hero-art .frame img{ width:100%; height:100%; object-fit:contain; padding:7%; }
.hero-art .f1{ inset:0 38% 26% 0; z-index:2; }
.hero-art .f2{ width:44%; aspect-ratio:1/1.1; right:0; bottom:0; z-index:3; }
.hero-art .f3{ width:26%; aspect-ratio:1; right:5%; top:0; z-index:1; opacity:.7; }
.hero-badge{
  position:absolute; left:0; bottom:0; z-index:5;
  background:rgba(10,10,12,.9); border:1px solid var(--gold);
  padding:13px 19px; border-radius:2px; display:flex; align-items:center; gap:11px;
  box-shadow:0 16px 40px -14px rgba(0,0,0,.9);
}
@supports (backdrop-filter:blur(1px)){ .hero-badge{ backdrop-filter:blur(10px); } }
.hero-badge svg{ width:19px; height:19px; flex-shrink:0; }
.hero-badge span{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-lt); line-height:1.4; }
html[lang="hi"] .hero-badge span, html[lang="pa"] .hero-badge span{ text-transform:none; letter-spacing:0; font-size:12.5px; }

/* =============================== PILLARS ================================= */
.pillars{ background:var(--ink-2); border-block:1px solid var(--line-soft); padding:clamp(56px,7vw,86px) 0; }
.pillar-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.pillar{ background:var(--ink-2); padding:34px 30px; transition:background .45s var(--ease); }
.pillar:hover{ background:var(--panel); }
.pillar-ico{
  width:44px; height:44px; border:1px solid var(--gold); border-radius:50%;
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.pillar-ico svg{ width:19px; height:19px; }
.pillar h3{ font-size:1.3rem; margin:0 0 10px; }
.pillar p{ color:var(--text-2); font-size:.925rem; margin:0; line-height:1.7; }

/* ============================== COLLECTION =============================== */
.filters{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-bottom:46px; }
.filters button{
  padding:10px 24px; border:1px solid var(--line); border-radius:2px;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3);
  transition:all .35s var(--ease);
}
html[lang="hi"] .filters button, html[lang="pa"] .filters button{ text-transform:none; letter-spacing:.01em; font-size:14px; }
.filters button:hover{ color:var(--text); border-color:var(--text-3); }
.filters button.on{ border-color:var(--gold); color:var(--gold-lt); background:rgba(201,162,76,.08); }

.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(288px,1fr)); gap:30px; }

.card{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:3px;
  overflow:hidden; display:flex; flex-direction:column; position:relative;
  transition:transform .55s var(--ease), border-color .45s, box-shadow .55s var(--ease);
  animation:rise .6s var(--ease) both;
}
@keyframes rise{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:none;} }
.card:hover{ transform:translateY(-7px); border-color:rgba(201,162,76,.42); box-shadow:0 28px 60px -26px rgba(0,0,0,.92); }

.card-img{ position:relative; aspect-ratio:1/1.07; background:#F4F2EE; overflow:hidden; }
.card-img img{ width:100%; height:100%; object-fit:contain; padding:9%; transition:transform .8s var(--ease); }
.card:hover .card-img img{ transform:scale(1.055); }
.card-tag{
  position:absolute; top:13px; left:13px; z-index:2;
  background:rgba(10,10,12,.88); color:var(--gold-lt);
  font-size:9.5px; letter-spacing:.19em; text-transform:uppercase;
  padding:6px 12px; border-radius:2px; border:1px solid rgba(201,162,76,.4);
}
html[lang="hi"] .card-tag, html[lang="pa"] .card-tag{ text-transform:none; letter-spacing:0; font-size:11.5px; }
.card-auth{
  position:absolute; top:13px; right:13px; z-index:2;
  width:30px; height:30px; border-radius:50%;
  background:rgba(10,10,12,.88); border:1px solid rgba(201,162,76,.55);
  display:flex; align-items:center; justify-content:center;
}
.card-auth svg{ width:15px; height:15px; }

.card-body{ padding:24px 24px 26px; display:flex; flex-direction:column; flex:1; }
.card-mat{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-bottom:9px; }
html[lang="hi"] .card-mat, html[lang="pa"] .card-mat{ text-transform:none; letter-spacing:.01em; font-size:12px; }
.card h3{ font-size:1.42rem; margin:0 0 9px; line-height:1.25; }
html[lang="hi"] .card h3, html[lang="pa"] .card h3{ font-size:1.22rem; }
.card-line{ color:var(--text-3); font-size:.875rem; line-height:1.62; margin:0 0 20px; flex:1; }

.card-price{ border-top:1px solid var(--line-soft); padding-top:17px; margin-bottom:17px; }
.price-lbl{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--text-3); margin-bottom:5px; }
html[lang="hi"] .price-lbl, html[lang="pa"] .price-lbl{ text-transform:none; letter-spacing:0; font-size:11.5px; }
.price-inr{ font-family:var(--serif); font-size:1.85rem; line-height:1; margin-bottom:6px; }
.price-cad{ font-size:.8rem; color:var(--text-3); }
.price-cad s{ opacity:.7; }

.card-btns{ display:grid; grid-template-columns:1fr auto; gap:9px; }
.card-btns .btn{ padding:12px 18px; font-size:11px; letter-spacing:.15em; }
html[lang="hi"] .card-btns .btn, html[lang="pa"] .card-btns .btn{ font-size:13px; letter-spacing:0; padding:12px 14px; }
.icon-btn{
  width:44px; border:1px solid var(--line); border-radius:2px;
  display:flex; align-items:center; justify-content:center; transition:all .35s var(--ease);
}
.icon-btn svg{ width:18px; height:18px; }
.icon-btn:hover{ border-color:#25D366; background:rgba(37,211,102,.1); }

.empty{ text-align:center; color:var(--text-3); padding:60px 0; grid-column:1/-1; }

/* =============================== PROCESS ================================= */
.how{ background:var(--ink-2); border-block:1px solid var(--line-soft); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.step{ position:relative; padding-top:30px; }
.step::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--line); }
.step.active::before{ background:var(--gold-grad); }
.step-n{
  font-family:var(--serif); font-size:2.9rem; line-height:1; margin-bottom:16px;
  background:var(--gold-text-grad); -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; opacity:.62;
}
.step h3{ font-size:1.32rem; margin:0 0 11px; }
.step p{ color:var(--text-2); font-size:.925rem; margin:0; line-height:1.7; }

/* ============================ AUTHENTICITY =============================== */
.auth-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:center; }
.auth-body{ color:var(--text-2); font-size:1.05rem; margin:0 0 34px; }
.auth-list{ list-style:none; margin:0 0 36px; padding:0; display:grid; gap:19px; }
.auth-list li{ display:flex; gap:15px; align-items:flex-start; color:var(--text-2); font-size:.955rem; line-height:1.68; }
.auth-list svg{ width:19px; height:19px; flex-shrink:0; margin-top:3px; }

.auth-visual{
  position:relative; border:1px solid var(--line); border-radius:3px;
  background:linear-gradient(160deg,var(--panel),var(--ink-2)); padding:44px 38px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9);
}
.auth-visual::before{
  content:''; position:absolute; inset:11px; border:1px solid rgba(201,162,76,.2); border-radius:2px; pointer-events:none;
}
.seal{ width:96px; height:96px; margin:0 auto 26px; display:block; }
.auth-visual h3{ text-align:center; font-size:1.65rem; margin:0 0 8px; }
.auth-visual .seal-sub{ text-align:center; color:var(--gold); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; margin-bottom:30px; }
html[lang="hi"] .auth-visual .seal-sub, html[lang="pa"] .auth-visual .seal-sub{ text-transform:none; letter-spacing:.02em; font-size:12.5px; }
.doc-rows{ display:grid; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.doc-row{ background:var(--ink-2); padding:14px 18px; display:flex; align-items:center; gap:13px; font-size:.885rem; color:var(--text-2); }
.doc-row svg{ width:16px; height:16px; flex-shrink:0; }

/* ================================= FAQ =================================== */
.faq-list{ max-width:860px; margin-inline:auto; border-top:1px solid var(--line-soft); }
.faq-item{ border-bottom:1px solid var(--line-soft); }
.faq-q{
  width:100%; text-align:left; padding:26px 44px 26px 0; position:relative;
  font-family:var(--serif); font-size:1.3rem; color:var(--text); transition:color .3s;
}
html[lang="hi"] .faq-q, html[lang="pa"] .faq-q{ font-size:1.12rem; line-height:1.55; }
.faq-q:hover{ color:var(--gold-lt); }
.faq-q::after{
  content:''; position:absolute; right:8px; top:50%; width:11px; height:11px;
  border-right:1px solid var(--gold); border-bottom:1px solid var(--gold);
  transform:translateY(-70%) rotate(45deg); transition:transform .4s var(--ease);
}
.faq-item.open .faq-q::after{ transform:translateY(-30%) rotate(225deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .5s var(--ease); }
.faq-item.open .faq-a{ max-height:420px; }
.faq-a p{ color:var(--text-2); margin:0; padding:0 44px 28px 0; font-size:.965rem; line-height:1.78; }

/* =============================== CONTACT ================================= */
.contact{ background:var(--ink-2); border-top:1px solid var(--line-soft); }
.contact-card{
  max-width:920px; margin-inline:auto; text-align:center;
  border:1px solid var(--line); border-radius:3px; padding:clamp(40px,6vw,68px);
  background:linear-gradient(160deg,var(--panel),var(--ink-2)); position:relative;
}
.contact-card::before{ content:''; position:absolute; inset:0; border-radius:3px; padding:1px;
  background:linear-gradient(135deg,rgba(201,162,76,.5),transparent 40%,transparent 60%,rgba(201,162,76,.3));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.contact-btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin:34px 0 32px; }
.contact-meta{ display:flex; gap:34px; justify-content:center; flex-wrap:wrap; border-top:1px solid var(--line-soft); padding-top:28px; }
.cmeta{ text-align:center; }
.cmeta span{ display:block; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-3); margin-bottom:7px; }
html[lang="hi"] .cmeta span, html[lang="pa"] .cmeta span{ text-transform:none; letter-spacing:0; font-size:11.5px; }
.cmeta b{ font-weight:400; color:var(--text); font-size:.96rem; }

/* ================================ FOOTER ================================= */
.ftr{ background:var(--ink); border-top:1px solid var(--line-soft); padding:clamp(52px,6vw,76px) 0 30px; }
.ftr-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:44px; margin-bottom:44px; }
.ftr-brand{ display:flex; align-items:center; gap:13px; margin-bottom:18px; }
.ftr-brand img{ width:52px; height:52px; }
.ftr p.tag{ color:var(--text-3); font-size:.92rem; max-width:42ch; margin:0; }
.ftr h4{ font-family:var(--sans); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 19px; font-weight:400; }
html[lang="hi"] .ftr h4, html[lang="pa"] .ftr h4{ text-transform:none; letter-spacing:.02em; font-size:12.5px; }
.ftr ul{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.ftr ul a{ color:var(--text-3); font-size:.9rem; transition:color .3s; }
.ftr ul a:hover{ color:var(--gold-lt); }
.ftr-btm{ border-top:1px solid var(--line-soft); padding-top:26px; display:grid; gap:14px; }
.ftr-btm .rights{ color:var(--text-3); font-size:.83rem; }
.disclaimer{ color:#5F5A52; font-size:.74rem; line-height:1.7; max-width:100ch; }
.mocknote{
  display:inline-block; border:1px dashed rgba(201,162,76,.4); color:var(--gold);
  font-size:.74rem; padding:7px 14px; border-radius:2px;
}

/* WhatsApp float */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:56px; height:56px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 32px -8px rgba(37,211,102,.55); transition:transform .35s var(--ease);
}
.wa-float:hover{ transform:scale(1.09); }
.wa-float svg{ width:29px; height:29px; }

/* ================================ MODAL ================================== */
.modal{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; padding:24px;
}
.modal.open{ display:flex; }
.modal-bg{ position:absolute; inset:0; background:rgba(4,4,6,.88); }
@supports (backdrop-filter:blur(1px)){ .modal-bg{ backdrop-filter:blur(8px); } }
.modal-box{
  position:relative; width:100%; max-width:1000px; max-height:88vh; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:3px;
  display:grid; grid-template-columns:1fr 1fr;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);
  animation:pop .4s var(--ease) both;
}
@keyframes pop{ from{ opacity:0; transform:translateY(20px) scale(.985);} to{ opacity:1; transform:none;} }
.modal-close{
  position:absolute; top:14px; right:14px; z-index:5; width:38px; height:38px; border-radius:50%;
  background:rgba(10,10,12,.85); border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  transition:all .3s;
}
.modal-close:hover{ border-color:var(--gold); color:var(--gold-lt); }
.modal-close svg{ width:15px; height:15px; }
.modal-img{ background:#F4F2EE; display:flex; align-items:center; justify-content:center; padding:7%; }
.modal-img img{ width:100%; height:100%; object-fit:contain; }
.modal-side{ padding:clamp(28px,4vw,44px); }
.modal-side .card-mat{ margin-bottom:10px; }
.modal-side h2{ font-size:clamp(1.6rem,3vw,2.15rem); margin:0 0 12px; }
.modal-side .lead{ color:var(--text-2); font-size:.965rem; margin:0 0 26px; }
.mp-box{ border:1px solid var(--line); border-radius:2px; padding:20px 22px; margin-bottom:26px; background:var(--ink-2); }
.mp-box .price-lbl{ margin-bottom:7px; }
.mp-inr{ font-family:var(--serif); font-size:2.4rem; line-height:1; margin-bottom:9px; }
.mp-cad{ font-size:.85rem; color:var(--text-3); }
.msec-t{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin:0 0 14px; }
html[lang="hi"] .msec-t, html[lang="pa"] .msec-t{ text-transform:none; letter-spacing:.02em; font-size:12.5px; }
.spec-list{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:9px; }
.spec-list li{ color:var(--text-2); font-size:.9rem; padding-left:17px; position:relative; line-height:1.6; }
.spec-list li::before{ content:''; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:var(--gold); opacity:.7; }
.inc-list{ list-style:none; margin:0 0 28px; padding:0; display:grid; gap:11px; }
.inc-list li{ display:flex; gap:11px; align-items:flex-start; color:var(--text-2); font-size:.885rem; line-height:1.6; }
.inc-list svg{ width:16px; height:16px; flex-shrink:0; margin-top:3px; }
.modal-ref{ margin-top:20px; font-size:.76rem; color:var(--text-3); letter-spacing:.08em; }

/* ============================== RESPONSIVE =============================== */
@media (max-width:1080px){
  .pillar-grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); gap:34px; }
}
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-art{ max-width:520px; margin-inline:auto; width:100%; }
  .auth-grid{ grid-template-columns:1fr; }
  .modal-box{ grid-template-columns:1fr; max-height:92vh; }
  .modal-img{ aspect-ratio:1/.82; padding:5%; }
  .ftr-grid{ grid-template-columns:1fr 1fr; }

  .burger{ display:flex; }
  /* Fixed-position panels are not clipped by body{overflow-x:hidden}, so a
     closed drawer parked at translateX(100%) would widen the whole page.
     Keep it inside the viewport and hide it with opacity/visibility instead. */
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(320px,84vw);
    background:var(--ink-2); border-left:1px solid var(--line);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:104px 34px 34px; gap:26px; z-index:75;
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  }
  .nav.open{ opacity:1; visibility:visible; transform:none; }
  .nav a{ font-size:15px; letter-spacing:.1em; }
}
@media (max-width:720px){
  /* Full language names blow out the header on phones — use short codes. */
  .lang .l-full{ display:none; }
  .lang .l-short{ display:inline; }
  .lang button{ padding:6px 10px; font-size:12.5px; }
  .hdr-in{ gap:12px; height:72px; }
  .brand img{ width:38px; height:38px; }
  .brand-name{ font-size:17px; letter-spacing:.16em; }
  .brand-sub{ font-size:7.5px; letter-spacing:.3em; }
}
@media (max-width:620px){
  .wrap{ padding-inline:20px; }
  /* The floating WhatsApp button is fixed over the bottom-right corner and was
     sitting on top of the footer disclaimer. Shrink it and reserve room. */
  .wa-float{ width:50px; height:50px; right:16px; bottom:16px; }
  .wa-float svg{ width:26px; height:26px; }
  .ftr{ padding-bottom:86px; }
  .ftr-btm{ padding-right:64px; }
  .pillar-grid{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:1fr; }
  .hero-stats{ grid-template-columns:1fr; gap:18px; text-align:left; }
  .ftr-grid{ grid-template-columns:1fr; gap:34px; }
  .hero-cta .btn, .contact-btns .btn{ width:100%; }
  .brand-name{ font-size:19px; }
  .hero-art .f3{ display:none; }
  .contact-meta{ gap:22px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}