/* ============================================================
   THEME 2026 — "Kerala Twilight / Temple Brass"
   A full re-skin layered over the existing markup.
   Loaded LAST so it wins the cascade. No markup changes required
   for color/type/background. Service-card grid fix included.
   ============================================================ */

/* ---- 1. NEW DESIGN TOKENS (override both legacy :root blocks) ---- */
:root{
  /* Backgrounds: deep Kerala-night indigo over teal-slate */
  --bg:#0E1726;
  --bg-deep:#0A1019;
  --bg2:#13202E;
  --bg3:#172636;
  --bg-mid:#172636;
  --bg-glow:rgba(200,151,63,.16);

  /* Temple brass (warmer & earthier than the old cold gold) */
  --gold:#C8973F;
  --gold-lt:#E4B860;
  --gold-dk:#9A7227;
  --gold-soft:rgba(200,151,63,.85);
  --gold-05:rgba(200,151,63,.05);
  --gold-10:rgba(200,151,63,.10);
  --gold-15:rgba(200,151,63,.15);
  --gold-20:rgba(200,151,63,.22);
  --gold-30:rgba(200,151,63,.34);

  /* Single warm accent — marigold-coral, used sparingly for CTAs */
  --coral:#E07856;
  --coral-dk:#C45F3F;

  /* Surfaces — warm raised cards on the cool ground */
  --surface:#1A2433;
  --surface-hi:#212E40;
  --card:rgba(26,36,51,.78);
  --card-hi:rgba(33,46,64,.9);

  /* Text — soft sandalwood cream, never pure white */
  --t:#F4EDE0;
  --td:#D8CCB8;
  --tm:#A99E8C;
  --tg:#7C7464;

  /* Legacy aliases still referenced in old CSS */
  --plum:#13202E;
  --maroon-deep:#0A1019;

  /* Type — NEW pairing: Fraunces (display) + Inter (body) */
  --fh:'Fraunces','Playfair Display',Georgia,serif;
  --fb:'Inter','Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --rc:14px;
  --rc-lg:22px;
  --e:cubic-bezier(.4,0,.2,1);
  --e-slow:cubic-bezier(.16,1,.3,1);
}

/* ---- 2. BACKGROUND — calmer indigo wash + faint brass rasi ring ---- */
body{
  background:var(--bg)!important;
  color:var(--t)!important;
  font-family:var(--fb)!important;
}
body::before{
  content:''!important;position:fixed!important;inset:0!important;z-index:-2!important;
  background:
    radial-gradient(ellipse 70% 60% at 50% 22%,var(--bg-glow),transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 110%,rgba(224,120,86,.10),transparent 60%),
    linear-gradient(180deg,var(--bg-deep) 0%,var(--bg) 48%,var(--bg-deep) 100%)!important;
  opacity:1!important;pointer-events:none!important;background-repeat:no-repeat!important;
}
/* subtle star/ring layer recoloured to brass; toned right down */
body::after{
  opacity:.14!important;
}

/* ---- 3. TYPOGRAPHY ---- */
h1,h2,h3,h4{
  font-family:var(--fh)!important;color:var(--t)!important;
  letter-spacing:-.01em!important;
}
h1{font-weight:600!important;line-height:1.16!important;font-optical-sizing:auto;}
h2{font-weight:600!important;}
h3{font-weight:600!important;letter-spacing:0!important;}
.ggt,.gold,.hl{
  background:linear-gradient(120deg,var(--gold-lt),var(--gold) 55%,var(--gold-dk))!important;
  -webkit-background-clip:text!important;background-clip:text!important;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
}
p{color:var(--td)!important;}
a{color:var(--gold-lt);}
a:hover{color:var(--gold);}
.sub,.hero__p{color:var(--tm)!important;}
.ey,.eyebrow{color:var(--gold)!important;}

/* ---- 4. BUTTONS — brass primary, coral "call", solid contrast ---- */
.btn,.bgo,.bol{
  border-radius:50px!important;font-family:var(--fb)!important;
  font-weight:600!important;letter-spacing:.2px!important;
}
.bgo{
  background:linear-gradient(135deg,var(--gold-lt),var(--gold) 55%,var(--gold-dk))!important;
  color:#15110A!important;box-shadow:0 6px 22px rgba(200,151,63,.28)!important;
}
.bgo:hover{box-shadow:0 10px 30px rgba(200,151,63,.42)!important;color:#15110A!important;}
.bcr{
  background:linear-gradient(135deg,var(--coral),var(--coral-dk))!important;
  color:#fff!important;box-shadow:0 6px 20px rgba(224,120,86,.30)!important;
}
.bcr:hover{box-shadow:0 10px 30px rgba(224,120,86,.45)!important;color:#fff!important;}
.bol{
  background:rgba(200,151,63,.10)!important;color:var(--gold-lt)!important;
  border:1.5px solid var(--gold)!important;
}
.bol:hover{background:rgba(200,151,63,.20)!important;color:var(--t)!important;border-color:var(--gold-lt)!important;}
/* WhatsApp stays green — recognised brand */

/* ---- 5. CARDS (services, locations, trust, faq) ---- */
.svc,.loc,.tcard,.glass,.fq,.li{
  background:var(--card)!important;
  border:1px solid var(--gold-15)!important;
  border-radius:var(--rc-lg)!important;
  backdrop-filter:blur(16px) saturate(130%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(130%)!important;
}
.svc:hover,.loc:hover,.tcard:hover,.glass:hover{
  border-color:var(--gold)!important;
  transform:translateY(-4px)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.45),0 0 0 1px var(--gold-15)!important;
}
/* brass hairline at the top of each service / location card */
.svc::before,.loc::before{
  content:''!important;position:absolute!important;top:0!important;left:0!important;right:0!important;
  height:2px!important;background:linear-gradient(90deg,transparent,var(--gold),transparent)!important;opacity:.7!important;
}
.svc__ic{
  background:var(--surface-hi)!important;
  border:1px solid var(--gold-30)!important;border-radius:14px!important;
}
.svc h3{color:var(--t)!important;}
.svc p{color:var(--tm)!important;}
.svc__link{color:var(--gold-lt)!important;font-weight:600!important;}

/* ============================================================
   6. SERVICE CARDS → RESPONSIVE GRID (was a horizontal carousel)
   This fixes the mobile-responsiveness problem directly.
   ============================================================ */
.svc-scroll-wrap{margin-top:32px!important;}
.svc-track{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:18px!important;
  overflow:visible!important;          /* kill horizontal scroll */
  scroll-snap-type:none!important;
  padding:4px!important;cursor:default!important;
}
.svc-track .svc{
  width:auto!important;min-width:0!important;   /* drop fixed 300px width */
  flex-shrink:1!important;scroll-snap-align:none!important;
  display:flex!important;flex-direction:column!important;
}
.svc-track .svc p{flex:1;}
/* tablet */
@media(max-width:900px){
  .svc-track{grid-template-columns:repeat(2,1fr)!important;gap:14px!important;}
}
/* phone — single column, full width, no sideways scroll */
@media(max-width:560px){
  .svc-track{grid-template-columns:1fr!important;gap:14px!important;padding:0!important;}
  .svc-track .svc{width:auto!important;min-width:0!important;}
}
/* carousel dots no longer needed once it's a grid */
.svc-dots{display:none!important;}
/* the JS reveal-animation sets .svc{opacity:0} until an observer fires.
   In a grid that observer may not trigger, so force service cards visible. */
.svc-track .svc.rv,.svc-track .svc{opacity:1!important;transform:none!important;}

/* ---- 7. HEADER / NAV ---- */
.hdr{
  background:rgba(10,16,25,.72)!important;
  border-bottom:1px solid var(--gold-10)!important;
  backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important;
}
.hdr.scrolled{background:rgba(10,16,25,.94)!important;border-bottom-color:var(--gold-20)!important;}
.logo__i{border:1.5px solid var(--gold-30)!important;background:radial-gradient(circle,var(--gold-10),transparent)!important;}
.logo__t{color:var(--t)!important;font-family:var(--fh)!important;}
.logo__s{color:var(--gold)!important;}
.nmenu a{color:var(--td)!important;}
.nmenu a:hover,.nmenu a.active{color:var(--gold)!important;}
.nmenu a::after{background:var(--gold)!important;}

/* ---- 8. HERO ---- */
.hero__badge{
  color:var(--gold)!important;background:rgba(200,151,63,.08)!important;
  border:1px solid var(--gold-20)!important;
}
.hero__google{color:var(--td)!important;}
.st b,.st__n{color:var(--gold-lt)!important;}

/* ---- 9. FOOTER ---- */
.ft{background:linear-gradient(180deg,rgba(10,16,25,1),rgba(7,11,18,1))!important;border-top:1px solid var(--gold-20)!important;}
.ft::before{background:linear-gradient(90deg,transparent,var(--gold),transparent)!important;}
.ft-locs a,.lch a,.lch span{
  background:var(--gold-05)!important;border:1px solid var(--gold-10)!important;color:var(--td)!important;
}
.ft-locs a:hover{background:var(--gold-10)!important;border-color:var(--gold-30)!important;color:var(--gold)!important;}

/* ---- 10. SECTION DIVIDERS / MISC ---- */
.gr{background:linear-gradient(90deg,transparent,var(--gold),transparent)!important;}
.sdiv{background:linear-gradient(90deg,transparent 5%,var(--gold-10) 50%,transparent 95%)!important;}
.ey::before,.ey::after,.gr{background:linear-gradient(90deg,transparent,var(--gold-30))!important;}
.page-content h2{border-bottom:1px solid var(--gold-15)!important;}
.page-content h2::after{background:linear-gradient(90deg,var(--gold),transparent)!important;}

/* language pill accents */
.li__tag{background:var(--gold-10)!important;border:1px solid var(--gold-20)!important;color:var(--gold)!important;}
.li.open .li__tag{background:var(--gold)!important;color:#15110A!important;}

/* ---- 11. SERVICE / PAGE HERO IMAGES (rounded, brass frame) ---- */
.svc-hero-img,.page-hero-img,.svc-img,.content-img{
  border-radius:var(--rc-lg)!important;border:1px solid var(--gold-20)!important;
  box-shadow:0 14px 40px rgba(0,0,0,.45)!important;
}

/* ---- 12. SELECTION + FOCUS (a11y floor) ---- */
::selection{background:var(--gold);color:#15110A;}
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:2px solid var(--gold-lt);outline-offset:3px;border-radius:6px;
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}