/* Page styles for /locations/mumbai/  (from best_ref/Final Mumbai Location Page.html) */
:root{--orange:#f56622;--orange-dark:#df5315;--ink:#111318;--muted:#68707b;--light:#f7f7f6;--line:#e7e8ea;--dark:#111214;--max:1180px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,Arial,Helvetica,sans-serif;color:var(--ink);line-height:1.65;background:#fff}
a{text-decoration:none;color:inherit}
.container{width:min(var(--max),calc(100% - 42px));margin:auto}
h1,h2,h3{line-height:1.12;letter-spacing:-.035em}
h1{font-size:clamp(43px,5.7vw,72px)}
h2{font-size:clamp(33px,4vw,51px)}
h3{font-size:21px}
.eyebrow{font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:800;color:var(--orange);margin-bottom:13px}
.lead{font-size:18px;color:var(--muted);max-width:790px}
.section{padding:96px 0}
.soft{background:var(--light)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:9px;font-size:14px;font-weight:800;border:1px solid transparent;transition:.2s}
.primary{background:var(--orange);color:#fff}
.primary:hover{background:var(--orange-dark);transform:translateY(-2px)}
.secondary{background:#fff;border-color:#d9dce0}
.secondary:hover{border-color:var(--orange);color:var(--orange)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero{padding:112px 0 90px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:68px;align-items:center}
.hero h1 span{color:var(--orange)}
.hero-copy{margin-top:23px}
.hero-art{min-height:460px;border-radius:28px;background:var(--dark);position:relative;overflow:hidden;padding:28px;display:flex;align-items:flex-end}
.hero-art:before{content:"";position:absolute;width:470px;height:470px;right:-185px;top:-210px;border-radius:50%;background:radial-gradient(circle,var(--orange),transparent 67%)}
.city-ring{position:absolute;inset:42px;border:1px solid #ffffff20;border-radius:50%}
.city-ring:before,.city-ring:after{content:"";position:absolute;inset:55px;border:1px dashed #ffffff18;border-radius:50%}
.city-ring:after{inset:110px}
.city-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;z-index:2}
.city-label small{font-size:10px;letter-spacing:2px;color:#c4c8ce;font-weight:800}
.city-label strong{display:block;font-size:31px;margin-top:5px}
.map-tag{position:absolute;background:#ffffff10;border:1px solid #ffffff1d;color:#fff;border-radius:9px;padding:8px 10px;font-size:10px;font-weight:700}
.t1{left:24px;top:70px}
.t2{right:28px;top:105px}
.t3{left:35px;bottom:125px}
.t4{right:30px;bottom:82px}
.hero-card{position:relative;z-index:3;background:#ffffff0d;border:1px solid #ffffff1c;border-radius:17px;padding:20px;width:100%;color:#fff}
.hero-card p{font-size:13px;color:#c5cad0;margin-top:4px}
.two{display:grid;grid-template-columns:.82fr 1.18fr;gap:75px}
.copy p{font-size:17px;color:var(--muted);margin-bottom:17px}
.note{margin-top:24px;padding:23px;border-left:3px solid var(--orange);background:#fff7f2;border-radius:0 13px 13px 0;font-weight:750}
.area-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:42px}
.area{padding:26px;border:1px solid var(--line);border-radius:17px;background:#fff}
.area h3{font-size:19px;color:var(--orange);margin-bottom:9px}
.area p{font-size:13px;color:var(--muted)}
.journey{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}
.journey-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.journey-flow div{padding:21px 8px;text-align:center;border:1px solid var(--line);border-radius:12px;font-size:12px;font-weight:800;background:#fff}
.journey-flow div:nth-child(4){grid-column:1/3}
.journey-flow div:last-child{background:var(--orange);color:#fff;border-color:var(--orange)}
.approach{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.approach-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}
.approach-card{padding:26px;border:1px solid var(--line);border-radius:16px;background:#fff}
.approach-card b{display:block;color:var(--orange);font-size:10px;letter-spacing:1.2px;margin-bottom:7px}
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:43px}
.service{padding:26px;border:1px solid var(--line);border-radius:17px;background:#fff;transition:.2s}
.service:hover{transform:translateY(-3px);box-shadow:0 12px 30px #0000000a}
.service .no{font-size:10px;color:var(--orange);font-weight:850;letter-spacing:1px}
.service h3{font-size:19px;margin:9px 0}
.service p{font-size:13px;color:var(--muted)}
.service a{display:inline-block;color:var(--orange);font-size:12px;font-weight:850;margin-top:16px}
.intent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:42px}
.intent{padding:25px;border:1px solid var(--line);border-radius:16px}
.intent strong{display:block;font-size:16px;margin-bottom:6px}
.intent p{font-size:13px;color:var(--muted)}
.local{margin-top:43px;padding:34px;background:var(--dark);color:#fff;border-radius:22px}
.local-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:23px}
.local-grid div{padding:18px 8px;text-align:center;border:1px solid #ffffff1a;border-radius:10px;font-size:12px}
.industry-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:42px}
.industry{padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff}
.industry h3{font-size:19px}
.industry p{font-size:13px;color:var(--muted);margin-top:7px}
.mmr{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.mmr-card{padding:32px;border-radius:19px;border:1px solid var(--line);background:#fff}
.mmr-card.dark-card{background:var(--dark);color:#fff}
.dark-card p{color:#bfc4cb}
.process{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-top:43px}
.process div{padding:22px 8px;text-align:center;border:1px solid var(--line);border-radius:13px;font-size:12px;font-weight:800;background:#fff}
.process b{display:block;color:var(--orange);font-size:10px;margin-bottom:8px}
.proof{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:42px}
.proof-card{padding:30px;border-radius:19px;border:1px solid var(--line);background:#fff}
.proof-card strong{font-size:18px}
.proof-card p{font-size:14px;color:var(--muted);margin-top:8px}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:42px}
.guide{padding:25px;border:1px solid var(--line);border-radius:16px}
.guide h3{font-size:19px}
.guide p{font-size:13px;color:var(--muted);margin-top:7px}
.faq{max-width:900px;margin:42px auto 0}
details{border-bottom:1px solid var(--line);padding:20px 0}
summary{list-style:none;cursor:pointer;font-weight:800;padding-right:30px;position:relative}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";position:absolute;right:0;color:var(--orange);font-size:21px}
details[open] summary:after{content:"−"}
details p{padding-top:10px;color:var(--muted);font-size:14px}
.cta{background:var(--orange);color:#fff;text-align:center;padding:88px 20px}
.cta .lead{color:#fff;margin:18px auto 0;opacity:.94}
@media(max-width:1050px){
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .area-grid{grid-template-columns:repeat(2,1fr)}
  .industry-grid{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  .hero{padding:88px 0 70px}
  .hero-grid,.two,.journey,.approach{grid-template-columns:1fr;gap:42px}
  .section{padding:75px 0}
  .hero-art{min-height:390px}
  .intent-grid{grid-template-columns:1fr 1fr}
  .mmr{grid-template-columns:1fr}
  .guide-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .container{width:calc(100% - 30px)}
  h1{font-size:42px}
  h2{font-size:34px}
  .lead{font-size:16px}
  .actions{flex-direction:column}
  .btn{width:100%}
  .hero-art{min-height:330px;padding:18px}
  .map-tag{font-size:9px}
  .t1{left:15px;top:50px}
  .t2{right:15px;top:78px}
  .t3{left:20px;bottom:110px}
  .t4{right:18px;bottom:67px}
  .city-label strong{font-size:27px}
  .service-grid,.intent-grid,.industry-grid,.area-grid,.guide-grid{grid-template-columns:1fr}
  .approach-grid{grid-template-columns:1fr}
  .journey-flow{grid-template-columns:1fr 1fr}
  .journey-flow div:nth-child(4){grid-column:auto}
  .local-grid{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr 1fr}
  .proof{grid-template-columns:1fr}
}
