:root{
  --maroon:#7c1f2d;
  --maroon-dark:#59141f;
  --gold:#c9962c;
  --gold-light:#f2dfae;
  --cream:#fdf7ea;
  --cream-2:#f6ebd2;
  --ink:#2c1b12;
  --ink-soft:#6d5844;
  --line:#e3d3ab;
  --wa:#25d366;
  --wa-dark:#1da851;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Nirmala UI","Noto Sans Devanagari","Segoe UI",system-ui,-apple-system,sans-serif;
  line-height:1.55;
  padding-bottom:64px;
}
a{color:inherit;text-decoration:none;}
.serif{ font-family:"Noto Serif Devanagari","Palatino Linotype",Georgia,serif; }
img{max-width:100%;display:block;}
.wrap{max-width:520px;margin:0 auto;padding:0 18px;}
section{padding:34px 0;}
h1,h2,h3{margin:0 0 10px;text-wrap:balance;}
p{margin:0 0 10px;}

/* ---------- top bar ---------- */
header.top{
  position:sticky;top:0;z-index:40;
  background:var(--maroon);color:var(--cream);
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
header.top .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:10px;padding-bottom:10px;gap:10px;
}
.brand{ display:flex;align-items:center;gap:8px; }
.brand .mark{
  width:32px;height:32px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--gold-light), var(--gold) 60%, var(--maroon-dark));
  flex:none;
}
.brand strong{ font-size:1.05rem; letter-spacing:.01em; }
.brand small{ display:block; font-size:.62rem; color:var(--gold-light); letter-spacing:.04em; }
.top-right{ display:flex; align-items:center; gap:8px; }
.lang-switch{ display:flex; gap:4px; }
.lang-switch button{
  font-size:.68rem;font-weight:700;padding:4px 8px;border-radius:999px;
  border:1px solid rgba(253,247,234,.35); background:transparent;color:var(--cream);
  cursor:pointer;font-family:inherit;
}
.lang-switch button.active{ background:var(--gold); border-color:var(--gold); color:var(--maroon-dark); }

/* ---------- nav ---------- */
.menu-btn{
  width:38px;height:34px;border-radius:8px;flex:none;
  border:1px solid rgba(253,247,234,.35);background:transparent;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  padding:0;
}
.menu-btn span{
  display:block;width:17px;height:2px;background:var(--cream);border-radius:2px;
  position:relative;
}
.menu-btn span::before,.menu-btn span::after{
  content:"";position:absolute;left:0;width:17px;height:2px;background:var(--cream);border-radius:2px;
}
.menu-btn span::before{ top:-5px; }
.menu-btn span::after{ top:5px; }
nav.site-nav{
  background:var(--maroon-dark);
  border-top:1px solid rgba(253,247,234,.15);
}
nav.site-nav ul{ list-style:none;margin:0;padding:6px 0 10px; }
nav.site-nav li a{
  display:block;padding:9px 0;font-size:.9rem;color:var(--cream);
  border-bottom:1px solid rgba(253,247,234,.1);
}
nav.site-nav li:last-child a{ border-bottom:none; }
nav.site-nav li a.current{ color:var(--gold-light);font-weight:700; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-weight:700;font-size:.92rem;padding:12px 18px;border-radius:10px;
  border:none;cursor:pointer;width:100%;font-family:inherit;
}
.btn.wa{ background:var(--wa); color:#fff; }
.btn.wa:hover{ background:var(--wa-dark); }
.btn.call{ background:transparent; border:1.5px solid var(--maroon); color:var(--maroon); }
.btn.small{ padding:9px 14px; font-size:.8rem; width:auto; }
.btn-row{ display:flex; gap:10px; }
.btn-row .btn{ flex:1; }

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(circle at 85% -10%, var(--gold-light) 0%, transparent 45%),
    linear-gradient(180deg, var(--cream-2), var(--cream));
  padding-top:40px;
}
.hero h1{ font-size:1.7rem; color:var(--maroon-dark); }
.hero .lede{ color:var(--ink-soft); font-size:.96rem; margin-bottom:18px; }
.badge-row{ display:flex; gap:14px; margin-top:18px; font-size:.76rem; color:var(--ink-soft); }
.badge-row span{ display:flex; align-items:center; gap:5px; }
.badge-row .dot{ width:6px;height:6px;border-radius:50%;background:var(--gold); }

/* ---------- inner page hero ---------- */
.page-hero{
  background:linear-gradient(180deg, var(--cream-2), var(--cream));
  padding:26px 0 22px;
  border-bottom:1px solid var(--line);
}
.page-hero h1{ font-size:1.42rem;color:var(--maroon-dark); }
.page-hero .lede{ color:var(--ink-soft);font-size:.92rem;margin:0; }
.crumb{ font-size:.72rem;color:var(--ink-soft);margin-bottom:8px; }
.crumb a{ color:var(--maroon); }
.crumb .sep{ opacity:.5;margin:0 5px; }

/* ---------- kundli form ---------- */
.kundli-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:20px 18px;box-shadow:0 12px 30px -18px rgba(124,31,45,.35);
  margin-top:-6px;
}
.kundli-card h2{ font-size:1.15rem;color:var(--maroon-dark); }
.kundli-card .sub{ font-size:.82rem;color:var(--ink-soft);margin-bottom:14px; }
/* min-width:0 matters: a grid child defaults to min-width:auto and refuses to
   shrink below its content, so the date/time pair overflowed the card on a
   narrow phone instead of fitting its column. */
.field{ margin-bottom:10px;min-width:0; }
.field label{ display:block;font-size:.74rem;font-weight:700;color:var(--ink-soft);margin-bottom:4px; }
.field input{
  display:block;width:100%;min-width:0;
  padding:11px 12px;border:1px solid var(--line);border-radius:8px;
  /* 16px exactly: iOS Safari zooms the whole page when a focused input is
     under 16px, which is what made the form jump around on a phone. */
  font-size:16px;line-height:1.25;min-height:46px;
  font-family:inherit;background:var(--cream);color:var(--ink);
  -webkit-appearance:none;appearance:none;
}
/* iOS gives date/time pickers their own metrics and centres the value, so
   without this they sit at a different height to the text fields. */
.field input[type="date"],
.field input[type="time"]{ text-align:left; }
.field input::-webkit-date-and-time-value{ text-align:left;margin:0;min-height:22px; }
.field input::-webkit-datetime-edit{ padding:0;line-height:1.25; }
.field input::-webkit-calendar-picker-indicator{ margin-left:0;opacity:.55; }
.field input:focus{ outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold); }
.field-row{ display:grid;grid-template-columns:1fr 1fr;gap:10px; }
@media (max-width:360px){ .field-row{ grid-template-columns:1fr; } }

/* ---------- problem grid ---------- */
.problems{ background:var(--cream-2); }
.p-grid{ display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px; }
.p-card{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;
  display:block;
}
.p-card .emoji{ font-size:1.4rem; }
.p-card h3{ font-size:.92rem;margin:8px 0 3px;color:var(--maroon-dark); }
.p-card p{ font-size:.76rem;color:var(--ink-soft);margin:0; }

/* ---------- about ---------- */
.about-photo{
  width:100%;height:auto;display:block;border-radius:14px;
  border:1px solid var(--line);
  box-shadow:0 14px 34px -20px rgba(124,31,45,.5);
}
.about-row{ margin-top:14px;text-align:center; }
.about-row h3{ font-size:1.3rem;margin:0 0 3px;color:var(--maroon-dark); }
.about-row .meta{ font-size:.85rem;color:var(--ink-soft); }
.ph-note{ font-size:.68rem;color:var(--gold);margin-top:6px;font-style:italic; }

/* ---------- services ---------- */
.services{ background:var(--cream-2); }
.s-list{ display:flex;flex-direction:column;gap:8px;margin-top:14px; }
.s-item{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;font-weight:700;font-size:.9rem;color:var(--ink);
  display:flex;align-items:center;gap:10px;
}
.s-item .dot2{ width:8px;height:8px;border-radius:50%;background:var(--maroon);flex:none; }

/* ---------- gallery ---------- */
.gallery-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px; }
.g-item{
  /* display:block is load-bearing. The tile is an <a> inside a plain wrapper
     div, so it is NOT the grid item and never got blockified - it stayed
     inline, which means aspect-ratio and overflow:hidden were both ignored
     and the photo spilled ~50px past its row onto the caption below it. */
  display:block;
  aspect-ratio:1;border-radius:10px;overflow:hidden;
  border:1px solid var(--line);background:var(--cream-2);
}
.g-item img{ width:100%;height:100%;object-fit:cover;display:block; }
.g-cap{
  text-align:center;font-size:.72rem;color:var(--ink-soft);
  margin-top:5px;letter-spacing:.2px;
}

/* ---------- trust ---------- */
.trust{ background:var(--cream-2); }
.t-row{ display:flex;gap:10px;margin-top:14px; }
.t-card{ flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center; }
.t-card .num{ font-size:1.4rem;font-weight:800;color:var(--maroon-dark); }
.t-card .lbl{ font-size:.72rem;color:var(--ink-soft); }
.review{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:10px;
}
.stars{ color:var(--gold);letter-spacing:2px;font-size:.85rem; }
.review p{ font-size:.85rem;color:var(--ink-soft);margin:6px 0 0;font-style:italic; }

/* ---------- location ---------- */
.map-embed{ width:100%;height:220px;display:block;
  border:1px solid var(--line);border-radius:12px; }
.shopfront{ width:100%;border-radius:12px;border:1px solid var(--line);margin-bottom:4px; }
.hours-row{ display:flex;justify-content:space-between;margin-top:12px;font-size:.88rem;gap:12px; }
.hours-row strong{ color:var(--maroon-dark);flex:none; }

/* ---------- prose / article ---------- */
.prose h2{ font-size:1.12rem;color:var(--maroon-dark);margin-top:22px; }
.prose h3{ font-size:.98rem;color:var(--maroon-dark);margin-top:16px; }
.prose p{ font-size:.92rem;color:var(--ink); }
.prose ul{ margin:0 0 12px;padding-left:20px; }
.prose li{ font-size:.9rem;margin-bottom:6px; }

/* ---------- spec table ---------- */
.spec{
  width:100%;border-collapse:collapse;margin-top:12px;
  background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.spec tr+tr{ border-top:1px solid var(--line); }
.spec th,.spec td{ text-align:left;padding:10px 12px;font-size:.85rem;vertical-align:top; }
.spec th{ color:var(--ink-soft);font-weight:700;width:42%;background:var(--cream); }
.spec td{ color:var(--ink);font-weight:600; }

/* ---------- callout ---------- */
.note{
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:10px;padding:12px 14px;margin:14px 0;
}
.note p{ margin:0;font-size:.85rem;color:var(--ink-soft); }

/* ---------- card list (hub pages) ---------- */
.card-grid{ display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px; }
.card-grid.one{ grid-template-columns:1fr; }
.c-card{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;
  display:block;
}
.c-card h3{ font-size:.92rem;margin:0 0 3px;color:var(--maroon-dark); }
.c-card p{ font-size:.76rem;color:var(--ink-soft);margin:0; }
.c-card .emoji{ font-size:1.3rem;display:block;margin-bottom:6px; }
.c-card .arrow{ font-size:.72rem;color:var(--gold);font-weight:700;margin-top:6px;display:block; }

/* ---------- faq ---------- */
.faq-item{
  background:#fff;border:1px solid var(--line);border-radius:10px;
  margin-bottom:8px;overflow:hidden;
}
.faq-item summary{
  padding:12px 14px;font-weight:700;font-size:.88rem;color:var(--maroon-dark);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+";color:var(--gold);font-size:1.1rem;flex:none;line-height:1; }
.faq-item[open] summary::after{ content:"\2013"; }
.faq-item .a{ padding:0 14px 12px;font-size:.85rem;color:var(--ink-soft); }

/* ---------- footer ---------- */
footer.site{
  background:var(--maroon-dark);color:var(--cream);padding:28px 0 22px;margin-top:10px;
}
footer.site .wrap{ text-align:center; }
footer.site .fname{ font-size:1rem;font-weight:700;margin-bottom:4px; }
footer.site .flang{ font-size:.74rem;color:var(--gold-light);margin-top:6px; }
footer.site .fnav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;
  margin:14px 0 10px;font-size:.78rem;
}
footer.site .fnav a{ color:var(--gold-light); }
footer.site .fmeta{ font-size:.7rem;color:rgba(253,247,234,.55);margin-top:10px; }

/* ---------- sticky bottom cta ---------- */
.sticky-bottom{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:#fff;border-top:1px solid var(--line);
  padding:8px 14px;display:flex;gap:8px;
  box-shadow:0 -6px 16px -10px rgba(0,0,0,.25);
}
.sticky-bottom .btn{ padding:11px 14px;font-size:.86rem; }

/* ================================================================
   WIDER SCREENS

   Everything above this line is the phone layout and is deliberately
   untouched - most of the traffic is a phone near Khar Road station.
   But the site shipped with exactly ONE media query (360px), so a
   desktop browser got the 520px phone column stranded in the middle of
   the screen with nothing scaled up and the nav still behind a burger.
   Now that it is on its own domain the client opens it on a laptop, so
   the rules below widen the layout once there is actually room.
   ================================================================ */

/* ---------- tablet ---------- */
@media (min-width:700px){
  .wrap{ max-width:680px; padding:0 24px; }
  section{ padding:44px 0; }

  .hero{ padding-top:52px; }
  .hero h1{ font-size:2.05rem; }
  .hero .lede{ font-size:1.05rem; }
  .page-hero{ padding:34px 0 28px; }
  .page-hero h1{ font-size:1.7rem; }
  .page-hero .lede{ font-size:1rem; }

  .prose p{ font-size:.97rem; }
  .prose li{ font-size:.95rem; }
  .prose h2{ font-size:1.25rem; margin-top:28px; }
  .prose h3{ font-size:1.06rem; }

  /* Four problems in a row instead of a 2x2 block. */
  .p-grid{ grid-template-columns:repeat(4,1fr); gap:12px; }
  .card-grid{ grid-template-columns:repeat(3,1fr); gap:12px; }
  .s-list{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

  /* A WhatsApp/Call pair stretched across the full column reads as a
     phone screen blown up; cap it and let it sit left. */
  .btn-row{ max-width:460px; }
  .about-row .btn{ width:auto; }
}

/* ---------- desktop ---------- */
@media (min-width:980px){
  .wrap{ max-width:1060px; padding:0 32px; }

  /* An article column at 1060px is unreadable, so only the full-bleed
     furniture (header, footer, home sections) gets the full width -
     the inner pages keep a proper measure. They stay centred, so the
     page hero and the body text still line up. */
  .prose .wrap,
  .page-hero .wrap{ max-width:800px; }

  .hero h1{ font-size:2.5rem; }
  .page-hero h1{ font-size:1.95rem; }

  /* ----- real nav bar, no burger ----- */
  .menu-btn{ display:none; }
  /* Beats the browser's own [hidden]{display:none}: the burger toggles
     that attribute, and at this width the nav is always open. */
  nav.site-nav{ display:block; }
  nav.site-nav ul{ display:flex; flex-wrap:wrap; justify-content:center; padding:0; }
  nav.site-nav li a{
    padding:12px 15px; font-size:.87rem; border-bottom:none;
    border-top:3px solid transparent; border-bottom:3px solid transparent;
  }
  nav.site-nav li a:hover{ background:rgba(253,247,234,.08); }
  nav.site-nav li a.current{ border-bottom-color:var(--gold); }

  /* ----- home hero: pitch left, kundli form right ----- */
  .hero .wrap{
    display:grid;
    grid-template-columns:minmax(0,1fr) 400px;
    grid-template-rows:auto auto 1fr;
    column-gap:48px;
  }
  .hero .wrap > *{ grid-column:1; }
  .hero .wrap > .kundli-card{
    grid-column:2; grid-row:1 / span 3;
    align-self:start; margin-top:0;
  }
  .hero .wrap > .badge-row{ align-self:start; }

  /* ----- about: photo beside the text, not a 1060px portrait ----- */
  .about .wrap{
    display:grid; grid-template-columns:340px minmax(0,1fr);
    column-gap:40px; align-items:center;
  }
  .about-row{ margin-top:0; text-align:left; }

  .p-grid{ gap:16px; }
  .p-card,.c-card{ padding:18px; }
  .p-card h3,.c-card h3{ font-size:1rem; }
  .p-card p,.c-card p{ font-size:.83rem; }
  .card-grid{ grid-template-columns:repeat(4,1fr); }
  .prose .card-grid{ grid-template-columns:repeat(3,1fr); }
  .gallery-grid{ gap:14px; }
  .t-row{ gap:16px; }

  /* A hoverable pointer exists here, so give the cards a target state. */
  .p-card,.c-card,.s-item{ transition:transform .15s ease, box-shadow .15s ease; }
  .p-card:hover,.c-card:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 24px -16px rgba(124,31,45,.45);
  }

  /* A standalone CTA stretched to 1060px reads as a phone button blown
     up. Only the ones sitting directly in a .wrap are standalone - the
     form's submit and the .btn-row pairs must keep their full width. */
  .wrap > .btn{ width:auto; }

  /* ----- trust: two stats beside the review, not stacked ----- */
  .trust .wrap{
    display:grid; grid-template-columns:1fr 1fr;
    column-gap:24px; align-items:center;
  }
  .trust .wrap > .t-row,
  .trust .wrap > .review{ margin-top:0; }

  /* ----- location: shopfront beside the map ----- */
  /* The shopfront is a 941x1154 portrait. At the full column width it came
     out roughly 1300px tall, so the address and hours fell off the bottom
     of the screen entirely, while the map sat in a 220px letterbox. */
  .location .wrap{
    display:grid; grid-template-columns:440px minmax(0,1fr);
    column-gap:32px;
  }
  .location .wrap > h2{ grid-column:1 / -1; }
  .location .wrap > .shopfront{ grid-column:1; grid-row:2 / span 3; align-self:start; }
  .location .wrap > iframe,
  .location .wrap > .btn,
  .location .wrap > .hours-row{ grid-column:2; }
  .location .wrap > .map-embed{ height:340px; }
  /* A grid item stretches its track by default, so width:auto alone left
     this button 524px wide and two lines tall. */
  .location .wrap > .btn{ justify-self:start; align-self:start; }
  .location .wrap > .hours-row{ display:block; align-self:start; }
  .location .wrap > .hours-row strong{ display:block; margin-top:6px; }

  /* ----- sticky CTA becomes a floating pill ----- */
  /* Full-bleed across a 1440px monitor it looked like phone chrome, but
     the whole site exists to start a WhatsApp chat, so it stays - just
     sized like something a desktop would show. */
  body{ padding-bottom:0; }
  footer.site{ padding-bottom:84px; }
  .sticky-bottom{
    left:auto; right:26px; bottom:26px;
    width:auto; padding:10px; gap:10px;
    border:1px solid var(--line); border-radius:14px;
    box-shadow:0 14px 34px -14px rgba(0,0,0,.4);
  }
  .sticky-bottom .btn{ padding:11px 20px; }
}