/* HiGold mobile site. Palette: black, white, gold only. */
:root{
  --black:#000;--white:#fff;--gold:#D4AF37;--gold-light:#F3D97A;--gold-ink:#8A6510;
  --wa:#25D366;--red:#C62828;--green:#13803A;
  --font:"Plus Jakarta Sans","Noto Sans Devanagari","Noto Sans Telugu",system-ui,sans-serif;
  --foil:linear-gradient(100deg,#A67C1B 0%,#F3D97A 25%,#D4AF37 45%,#A67C1B 65%,#F3D97A 85%,#C9A033 100%);
  --safe:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{font-family:var(--font);font-size:16px;font-weight:500;line-height:1.6;color:var(--black);background:var(--white);text-rendering:optimizeLegibility;padding-bottom:calc(72px + var(--safe))}
html[lang=hi] body,html[lang=te] body{line-height:1.75}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.px{padding-inline:20px}

/* top bar */
.bar{position:sticky;top:0;z-index:40;background:var(--black);border-bottom:2px solid var(--gold);display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 16px}
.bar img{height:38px;width:auto}
.lang{display:flex;border:1.5px solid var(--gold);border-radius:999px;padding:3px;gap:2px}
.lang button{font:inherit;font-size:.85rem;font-weight:800;line-height:1;border:0;background:none;color:var(--white);padding:.5rem .65rem;border-radius:999px;min-width:2.4rem;min-height:34px}
.lang button[aria-pressed=true]{background:var(--gold);color:var(--black)}

/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%;min-height:54px;padding:.9rem 1.2rem;border-radius:16px;font:inherit;font-weight:800;font-size:1.02rem;text-decoration:none;border:0;cursor:pointer}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.6}
.btn svg{width:21px;height:21px;flex:none}
.btn-gold{background:var(--gold);color:var(--black)}
.btn-ghost{background:transparent;color:var(--white);border:2px solid var(--white)}
.btn-ghost .wa{color:var(--wa)}
.btn-dark{background:var(--black);color:var(--white)}
.btn-link{background:none;color:var(--black);text-decoration:underline;min-height:44px}

/* hero */
.hero{background:var(--black);color:var(--white);text-align:center;padding:34px 20px 40px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;width:520px;height:520px;left:50%;top:-230px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(212,175,55,.35),rgba(212,175,55,.06) 45%,transparent 70%)}
.hero>*{position:relative}
.coin{width:190px;aspect-ratio:1;margin:0 auto 26px;border-radius:50%;
  background:radial-gradient(circle at 32% 26%,#FFF6CF 0,#F3D97A 16%,#D4AF37 44%,#A67C1B 74%,#5E430B 100%);
  box-shadow:inset 0 0 0 8px rgba(94,67,11,.2),inset 0 0 0 10px rgba(255,240,190,.6),inset 0 -12px 28px rgba(0,0,0,.25),0 30px 60px -12px rgba(212,175,55,.6);
  display:grid;place-items:center;position:relative;overflow:hidden;animation:float 6s ease-in-out infinite}
.coin::before{content:"";position:absolute;inset:9%;border-radius:50%;border:2px dotted rgba(94,67,11,.5)}
.coin::after{content:"";position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.6) 50%,transparent 60%);transform:translateX(-120%);animation:shine 6s ease-in-out 1s infinite}
@keyframes shine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes float{50%{transform:translateY(-8px)}}
.coin-face{text-align:center;color:#4A3408;text-shadow:0 1px 0 rgba(255,244,200,.8);position:relative;z-index:1}
.coin-face b{display:block;font-size:3rem;font-weight:800;letter-spacing:-.05em;line-height:1}
.coin-face span{display:block;font-size:.95rem;font-weight:800;margin-top:.25rem}
.pill{display:inline-flex;align-items:center;gap:.5rem;font-size:.82rem;font-weight:800;color:var(--gold-light);border:1.5px solid var(--gold);padding:.35rem .85rem .35rem .45rem;border-radius:999px}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.3)}
.hero h1{font-size:2.35rem;font-weight:800;line-height:1.08;letter-spacing:-.035em;margin-top:16px}
html[lang=hi] .hero h1,html[lang=te] .hero h1{font-size:2rem;letter-spacing:0;line-height:1.35}
.hero h1 .foil{display:block;background:var(--foil);background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:foil 2.6s cubic-bezier(.3,.1,.2,1) .25s both}
@keyframes foil{from{background-position:100% 0}to{background-position:0 0}}
.hero .lede{margin:16px auto 0;font-size:1.02rem;max-width:34ch}
.hero .stack{display:grid;gap:12px;margin-top:26px}

/* promises carousel */
.promises{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px;background:var(--black);scrollbar-width:none}
.promises::-webkit-scrollbar{display:none}
.promise{flex:0 0 78%;scroll-snap-align:start;border:1.5px solid var(--gold);border-radius:18px;padding:16px 18px;color:var(--white)}
.promise b{display:block;color:var(--gold);font-weight:800}
.promise span{font-size:.95rem}

/* sections */
section{padding:44px 0}
.dark{background:var(--black);color:var(--white)}
h2{font-size:1.85rem;font-weight:800;line-height:1.12;letter-spacing:-.03em}
html[lang=hi] h2,html[lang=te] h2{font-size:1.6rem;letter-spacing:0;line-height:1.35}
.gold-rule{width:44px;height:5px;border-radius:5px;background:var(--gold);margin-bottom:14px}
.intro{margin-top:10px}

.cards{display:grid;gap:14px;margin-top:24px}
.svc{border:2px solid var(--black);border-radius:22px;padding:22px}
.svc h3{font-size:1.25rem;font-weight:800;line-height:1.25;margin-bottom:6px}
.svc .icon{width:48px;height:48px;border-radius:14px;background:var(--black);color:var(--gold);display:grid;place-items:center;margin-bottom:14px}
.svc .icon svg{width:24px;height:24px}
.svc.feature{background:var(--black);color:var(--white);border-color:var(--gold)}
.svc.feature h3{font-size:1.5rem;color:var(--gold-light)}
.svc.feature .icon{background:var(--gold);color:var(--black)}
.tag{display:inline-block;font-size:.78rem;font-weight:800;background:var(--gold);color:var(--black);padding:.15rem .7rem;border-radius:999px;margin-bottom:10px}
.svc ul{list-style:none;display:grid;gap:8px;margin:14px 0 18px}
.svc li{display:flex;gap:10px}
.svc li svg{flex:none;width:20px;height:20px;color:var(--gold);margin-top:3px}

.tabs{display:flex;border:2px solid var(--gold);border-radius:16px;padding:4px;margin-top:20px}
.tabs button{flex:1;font:inherit;font-size:.9rem;font-weight:800;border:0;background:none;color:var(--white);padding:.7rem .4rem;border-radius:12px;min-height:46px;line-height:1.25}
.tabs button[aria-selected=true]{background:var(--gold);color:var(--black)}
.timeline{list-style:none;counter-reset:s;margin-top:26px}
.timeline li{counter-increment:s;position:relative;padding:0 0 26px 58px}
.timeline li::before{content:counter(s);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--gold);color:var(--black);font-weight:800;display:grid;place-items:center;font-size:1.05rem}
.timeline li::after{content:"";position:absolute;left:19px;top:44px;bottom:4px;width:2px;background:var(--gold)}
.timeline li:last-child{padding-bottom:0}
.timeline li:last-child::after{display:none}
.timeline h3{font-size:1.08rem;font-weight:800;color:var(--gold-light);line-height:1.3;padding-top:7px}
.timeline p{margin-top:4px}
.panel:not([hidden]) .timeline{animation:in .3s ease both}
@keyframes in{from{opacity:0;transform:translateY(6px)}}

.checklist{list-style:none;display:grid;gap:10px;margin-top:22px}
.checklist li{display:flex;gap:14px;border:2px solid var(--black);border-radius:16px;padding:14px 16px}
.checklist svg{flex:none;width:24px;height:24px;color:var(--gold-ink);margin-top:2px}
.checklist b{display:block;font-weight:800;line-height:1.35}
.checklist span{font-size:.95rem}

/* booking form */
.form-card{margin-top:24px;background:var(--white);color:var(--black);border-radius:24px;padding:20px;border:2px solid var(--gold)}
form.booking-form{display:grid;gap:16px}
form.booking-form.is-done{display:none}
.field{display:flex;flex-direction:column;gap:6px}
label,.label{font-size:.92rem;font-weight:800}
.opt{font-weight:500}
input,select,textarea{font:inherit;font-size:16px;font-weight:600;color:var(--black);background:var(--white);border:2px solid var(--black);border-radius:14px;padding:14px;width:100%;min-height:52px}
input::placeholder,textarea::placeholder{color:#000;opacity:.45;font-weight:500}
textarea{resize:vertical;min-height:96px}
input:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.35)}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0;min-height:0}
.seg span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:56px;font-size:.84rem;font-weight:800;padding:8px 4px;border:2px solid var(--black);border-radius:14px;line-height:1.25}
.seg input:checked+span{background:var(--black);color:var(--gold)}
.seg input:focus-visible+span{outline:3px solid var(--gold);outline-offset:2px}
.loc{display:grid;gap:10px;padding:14px;border:2px dashed var(--gold);border-radius:16px}
.loc-status{font-size:.9rem;font-weight:600}
.loc-status.ok{color:var(--green)}
.loc-status.err{color:var(--red)}
.err-msg{color:var(--red);font-size:.86rem;font-weight:700;display:none}
.field.invalid input,.field.invalid textarea{border-color:var(--red)}
.field.invalid .err-msg{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.submit-row{display:grid;gap:8px}
.note{font-size:.85rem;text-align:center}
.form-error{color:var(--red);font-weight:700}
.form-success{text-align:center;padding:24px 8px}
.form-success .tick{width:68px;height:68px;border-radius:50%;background:var(--gold);color:var(--black);display:grid;place-items:center;margin:0 auto 16px}
.form-success .tick svg{width:34px;height:34px}
.form-success h3{font-size:1.4rem;font-weight:800}
.form-success p{margin-top:6px}

/* faq */
.faq-list{margin-top:20px}
details{border-bottom:2px solid var(--black)}
details:first-child{border-top:2px solid var(--black)}
summary{list-style:none;cursor:pointer;padding:18px 48px 18px 0;position:relative;font-weight:800;font-size:1.02rem;line-height:1.4}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:var(--black);color:var(--gold);display:grid;place-items:center;font-size:1.3rem;transition:transform .2s}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details p{padding:0 0 18px}

/* visit */
.visit-card{margin-top:22px;border:2px solid var(--gold);border-radius:24px;overflow:hidden;background:var(--black);color:var(--white)}
.visit-card address{font-style:normal;padding:20px 20px 0;line-height:1.85}
.visit-card address b{color:var(--gold);font-weight:800}
.visit-card .stack{display:grid;gap:10px;padding:18px 20px 20px}
.visit-card iframe{display:block;width:100%;height:240px;border:0}

footer{background:var(--black);color:var(--white);text-align:center;padding:30px 20px 34px;border-top:2px solid var(--gold);display:grid;gap:14px;justify-items:center;font-weight:600;font-size:.9rem}
footer img{height:42px;width:auto}
.foot-phone{display:inline-flex;align-items:center;gap:10px;color:var(--gold);font-weight:800;font-size:1.4rem;text-decoration:none;border:2px solid var(--gold);border-radius:16px;padding:10px 18px}
.foot-phone svg{width:22px;height:22px}
.foot-phone small{display:block;font-size:.75rem;color:var(--white);font-weight:700;text-align:left}

/* bottom action bar */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr 1.3fr;background:var(--black);border-top:2px solid var(--gold);padding-bottom:var(--safe)}
.dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:68px;text-decoration:none;color:var(--white);font-weight:800;font-size:.8rem}
.dock svg{width:22px;height:22px}
.dock .wa svg{color:var(--wa)}
.dock .book{background:var(--gold);color:var(--black);font-size:.9rem}

/* popup as bottom sheet */
dialog.popup{border:0;padding:0;margin:auto 0 0;width:100%;max-width:100%;max-height:92vh;border-radius:26px 26px 0 0;background:var(--white);color:var(--black);overflow:auto}
dialog.popup::backdrop{background:rgba(0,0,0,.72)}
dialog.popup[open]{animation:sheet .32s cubic-bezier(.2,.9,.3,1)}
@keyframes sheet{from{transform:translateY(100%)}}
.popup-head{background:var(--black);color:var(--white);padding:26px 20px 20px;position:relative;border-bottom:3px solid var(--gold)}
.popup-head::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);width:44px;height:5px;border-radius:5px;background:var(--gold)}
.popup-head h2{font-size:1.5rem;color:var(--gold-light);padding-right:44px}
.popup-head p{margin-top:6px}
.popup-x{position:absolute;right:14px;top:18px;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--gold);background:none;color:var(--white);display:grid;place-items:center}
.popup-x svg{width:18px;height:18px}
.popup-body{padding:18px 20px calc(20px + var(--safe))}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}