/* ═══════════════════════════════════════════════════════════════
   NextMark.pk — design system
   Palette aapke logo se nikaali gayi hai.

   DISCIPLINE RULE (tornay se poora system girr jayega):
     --teal  → primary buttons, links, headings ka accent
     --red   → SIRF prices aur key numbers
     --wa    → SIRF WhatsApp buttons
   Teenon ka apna kaam hai. Overlap nahi.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --ink:       #0E2A3A;   /* navy-teal — body text, dark sections */
  --teal:      #14536B;   /* primary brand */
  --teal-dk:   #0D3B4D;   /* hover */
  --red:       #C1121F;   /* prices, key numbers ONLY */
  --wa:        #1FA45E;   /* WhatsApp ONLY */
  --wa-dk:     #178A4E;
  --paper:     #FBFBFA;
  --panel:     #F0F3F4;
  --rule:      #D8DDDF;
  --muted:     #5A6B73;

  --f-display: "Archivo", system-ui, -apple-system, sans-serif;
  --f-body:    "Public Sans", system-ui, -apple-system, sans-serif;

  --gap: clamp(1rem, 3vw, 1.75rem);
  --sec: clamp(3.5rem, 8vw, 6rem);
  --max: 1120px;
  --r:   4px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden}
body{overflow-x:hidden}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--f-display);line-height:1.1;letter-spacing:-.025em;margin:0}
h1{font-size:clamp(2.05rem,5.4vw,3.6rem);font-weight:700}
h2{font-size:clamp(1.55rem,3.5vw,2.35rem);font-weight:700}
h3{font-size:clamp(1.12rem,2vw,1.35rem);font-weight:600;letter-spacing:-.015em}
p{margin:0 0 1rem;max-width:64ch}
a{color:var(--teal)}
img{max-width:100%;height:auto;display:block}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gap)}
.narrow{max-width:800px}
hr.rule{border:0;border-top:1px solid var(--rule);margin:0}
.soon{color:var(--muted)}   /* draft page ka label — link nahi */

.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:#fff;padding:.6rem 1rem;border:2px solid var(--teal);border-radius:var(--r)}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-body);font-weight:600;font-size:1rem;
  padding:.85rem 1.35rem;border-radius:var(--r);border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background-color .15s,border-color .15s,color .15s;
}
.btn-sm{padding:.55rem 1rem;font-size:.92rem}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:var(--wa-dk)}
.btn-solid{background:var(--teal);color:#fff}
.btn-solid:hover{background:var(--teal-dk)}
.btn-ghost{background:transparent;color:var(--teal);border-color:var(--rule)}
.btn-ghost:hover{border-color:var(--teal);background:#fff}
.btn:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* ── Header ──────────────────────────────────────────────── */
.site-head{position:sticky;top:0;z-index:40;background:rgba(251,251,250,.96);border-bottom:1px solid var(--rule);backdrop-filter:blur(6px)}
.head-in{width:100%;margin:0;padding:.65rem var(--gap);display:flex;align-items:center;gap:1.25rem}
.brand img{width:auto;height:26px;max-width:none;display:block}
@media(max-width:480px){.brand img{height:21px}}
.site-nav{display:none;gap:1.3rem;margin-left:auto;font-size:.94rem}
.site-nav a{color:var(--ink);text-decoration:none;font-weight:500}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--teal)}
.head-cta{margin-left:auto;display:flex;gap:.6rem;align-items:center}
.head-tel{display:none;font-size:.92rem;text-decoration:none;color:var(--ink);font-weight:600}
.nav-toggle{display:flex;flex-direction:column;gap:4px;background:none;border:0;padding:.5rem;cursor:pointer}
.nav-toggle span{width:20px;height:2px;background:var(--ink);display:block}
@media(min-width:940px){
  .site-nav{display:flex}
  .head-cta{margin-left:0}
  .head-tel{display:inline}
  .nav-toggle{display:none}
}
.site-nav.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:#fff;border-bottom:1px solid var(--rule);padding:1rem var(--gap);gap:.9rem}

/* ── Hero ────────────────────────────────────────────────── */
.hero{padding:clamp(2.5rem,6vw,4.5rem) 0 var(--sec)}
.hero-grid{display:grid;gap:2.5rem}
@media(min-width:900px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:start}}
.hero h1{margin-bottom:1.1rem}
.hero .sub{font-size:1.08rem;color:var(--muted);max-width:47ch;margin-bottom:1.6rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.4rem}
.hero-note{font-size:.86rem;color:var(--muted);max-width:44ch}

/* ── Exhibit (signature component) ───────────────────────── */
.exhibit{background:#fff;border:1px solid var(--rule);border-radius:8px;box-shadow:3px 3px 0 rgba(14,42,58,.10);overflow:hidden}
.exhibit img,.exhibit svg{width:100%;display:block}
.exhibit .cap{border-top:1px solid var(--rule);padding:.7rem .85rem;font-size:.79rem;color:var(--muted);line-height:1.5}
.exhibit .cap strong{color:var(--ink);font-weight:600}
.ph{background:repeating-linear-gradient(45deg,#F0F3F4,#F0F3F4 8px,#E6EAEC 8px,#E6EAEC 16px);color:var(--muted);font-size:.74rem;padding:.3rem .55rem;display:inline-block;border-radius:3px}

/* ── Sections ────────────────────────────────────────────── */
.sec{padding:var(--sec) 0}
.sec-head{margin-bottom:2.25rem;max-width:60ch}
.sec-head h2{margin-bottom:.7rem}
.sec-head p{color:var(--muted);margin:0}
.band{background:var(--panel);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.prose p{margin-bottom:1rem}
.prose ul{margin:0 0 1.25rem;padding-left:1.1rem;color:var(--muted);max-width:64ch}
.prose li{margin-bottom:.4rem}
.prose h3{margin:1.75rem 0 .6rem}

/* ── Service list (cards nahi — rules aur whitespace) ────── */
.svc{border-top:1px solid var(--rule)}
.svc-item{border-bottom:1px solid var(--rule);padding:1.6rem 0;display:grid;gap:.5rem}
@media(min-width:820px){.svc-item{grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto;gap:2rem;align-items:baseline}}
.svc-item h3{color:var(--teal);margin:0}
.svc-item p{margin:0;color:var(--muted);font-size:.97rem;max-width:60ch}
.svc-item .go{font-weight:600;font-size:.92rem;text-decoration:none;white-space:nowrap}
.svc-item .go:hover{text-decoration:underline}

/* ── Steps (real sequence, isliye numbers) ───────────────── */
.steps{border-top:1px solid var(--rule)}
.step{border-bottom:1px solid var(--rule);padding:1.35rem 0;display:grid;grid-template-columns:2.2rem 1fr;gap:1rem;align-items:start}
.step .n{font-family:var(--f-display);font-weight:700;font-size:1.05rem;color:var(--red)}
.step h3{font-size:1.05rem;margin-bottom:.25rem}
.step p{margin:0;color:var(--muted);font-size:.95rem}

/* ── Pricing — the one bold moment ───────────────────────── */
.price-deck{background:var(--ink);color:#fff;padding:var(--sec) 0}
.price-deck h2{color:#fff}
.price-deck .sec-head p{color:#A6B8C1}
.price-grid{display:grid;gap:1px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16)}
@media(min-width:820px){.price-grid{grid-template-columns:repeat(3,1fr)}}
.price-cell{background:var(--ink);padding:1.9rem 1.5rem}
.price-cell h3{color:#fff;font-size:1.05rem;font-weight:600;margin-bottom:.9rem}
.price-num{font-family:var(--f-display);font-weight:700;font-size:clamp(2.4rem,5.5vw,3.1rem);letter-spacing:-.035em;color:#FF5A5F;line-height:1}
.price-unit{font-size:.85rem;color:#A6B8C1;margin:.45rem 0 1.1rem}
.price-cell ul{list-style:none;margin:0 0 1.4rem;padding:0;font-size:.93rem;color:#D3DDE2}
.price-cell li{padding:.34rem 0 .34rem 1.15rem;position:relative}
.price-cell li::before{content:"";position:absolute;left:0;top:.85em;width:6px;height:6px;background:var(--wa);border-radius:50%}
.price-deck .btn-ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.price-deck .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}
.price-foot{margin-top:1.5rem;font-size:.88rem;color:#A6B8C1;max-width:64ch}

/* ── Proof grid ──────────────────────────────────────────── */
.proof-grid{display:grid;gap:1.25rem}
@media(min-width:760px){.proof-grid{grid-template-columns:1fr 1fr}}

/* ── FAQ ─────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:1.15rem 2rem 1.15rem 0;font-family:var(--f-display);font-weight:600;font-size:1.02rem;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.3rem;top:.95rem;font-size:1.4rem;color:var(--teal);font-weight:500}
.faq details[open] summary::after{content:"\2013"}
.faq details .a{padding:0 0 1.2rem;color:var(--muted);font-size:.97rem;max-width:70ch}
.faq summary:focus-visible{outline:3px solid var(--red);outline-offset:2px}

/* ── Breadcrumbs ─────────────────────────────────────────── */
.crumbs{padding:1rem 0 0;font-size:.85rem;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--teal);text-decoration:underline}
.crumbs span{margin:0 .4rem}

/* ── Child links grid on hubs ────────────────────────────── */
.children{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:8px;overflow:hidden}
@media(min-width:700px){.children{grid-template-columns:1fr 1fr}}
.children > div{background:#fff;padding:1.2rem 1.35rem}
.children h3{font-size:1.02rem;margin-bottom:.3rem}
.children h3 a{text-decoration:none}
.children h3 a:hover{text-decoration:underline}
.children p{margin:0;font-size:.92rem;color:var(--muted)}
.children-cards{gap:1rem;background:transparent;border:0;border-radius:0;overflow:visible}
@media(min-width:700px){.children-cards{grid-template-columns:repeat(3,1fr)}}
.children-cards > div{background:#fff;border:1px solid var(--rule);border-radius:8px;padding:1.15rem 1.15rem 1.25rem;box-shadow:0 2px 8px rgba(14,42,58,.06);transition:transform .15s,box-shadow .15s}
.children-cards > div:hover{transform:translateY(-2px);box-shadow:0 5px 14px rgba(14,42,58,.1)}
.children-cards h3{margin:.75rem 0 .35rem;font-size:1rem}
.children-cards p{font-size:.88rem;line-height:1.45}
.child-icon{display:grid;place-items:center;width:2rem;height:2rem;border-radius:8px;background:var(--teal);color:#fff;font-size:0;font-weight:700;text-transform:uppercase}
.child-icon::before{font-size:.8rem;line-height:1}
.child-icon-search::before{content:'S'}
.child-icon-link::before{content:'L'}
.child-icon-technical::before{content:'T'}
.child-icon-content::before{content:'G'}
.child-icon-local::before{content:'M'}
.child-icon-shop::before{content:'E'}
.child-icon-audit::before{content:'A'}
.child-icon-wordpress::before{content:'W'}
.child-icon-woocommerce::before{content:'W'}
.child-icon-custom::before{content:'C'}
.child-icon-landing::before{content:'L'}
.child-icon-redesign::before{content:'R'}
.child-icon-facebook::before{content:'F'}
.child-icon-instagram::before{content:'I'}
.child-icon-whatsapp::before{content:'W'}
.child-icon-ecommerce::before{content:'E'}
.child-icon-link,.child-icon-local{background:#3AA8D8}
.child-icon-technical,.child-icon-content,.child-icon-shop{background:#4B24D6}
.child-icon-audit{background:#168A91}
.child-icon-wordpress,.child-icon-woocommerce{background:#21759B}
.child-icon-custom,.child-icon-landing{background:#3D2BD6}
.child-icon-redesign{background:#168A91}
.child-icon-facebook,.child-icon-instagram{background:#3D2BD6}
.child-icon-whatsapp{background:#1FA45E}
.child-icon-ecommerce{background:#168A91}
.child-icon-snapchat,.child-icon-snap-leads{background:#E6C400;color:#111}
.child-icon-snap-shop,.child-icon-snap-creative{background:#111}
.child-icon-snapchat::before{content:'S'}
.child-icon-snap-leads::before{content:'L'}
.child-icon-snap-shop::before{content:'E'}
.child-icon-snap-creative::before{content:'C'}
.city-feature{display:grid;gap:2.5rem;align-items:center;background:#F7F8F2;border:1px solid #E6E8DE;border-radius:8px;padding:2.5rem 2rem;min-height:23rem}
@media(min-width:820px){.city-feature{grid-template-columns:minmax(18rem,.85fr) minmax(0,1.4fr);padding:3rem 2.5rem;min-height:28rem}}
.city-copy .eyebrow{display:block;color:#3A72A8;font-size:.58rem;font-weight:700;letter-spacing:.08em;margin-bottom:.3rem}
.city-copy h3{font-size:clamp(1.5rem,3vw,2.15rem);color:#18245E;line-height:1.12;margin-bottom:.8rem}
.city-copy h3 strong{color:#2C62D6}
.city-copy p{font-size:.9rem;line-height:1.55;color:#52617A;margin-bottom:1.2rem;max-width:34ch}
.city-copy .btn{font-size:.8rem;padding:.62rem 1.05rem;border-radius:999px}
.city-map{display:grid;grid-template-columns:minmax(14rem,1.35fr) minmax(10rem,1fr);gap:1.5rem;align-items:center;min-height:19rem}
.city-map-image{width:100%;height:auto;max-height:none;min-height:19rem;object-fit:contain;display:block}
.pak-map{position:relative;height:16rem;max-width:18rem;margin:auto;width:100%;background:linear-gradient(145deg,transparent 10%,#B9D9F0 11%,#6F9FE5 38%,#6B4AE4 62%,#B7D8F2 63%,transparent 64%);clip-path:polygon(40% 0,70% 8%,88% 28%,78% 52%,94% 78%,62% 100%,40% 84%,13% 88%,28% 60%,7% 38%,24% 17%);filter:drop-shadow(0 6px 7px rgba(44,98,214,.2))}
.map-line{position:absolute;width:70%;height:1px;background:rgba(255,255,255,.65);transform:rotate(45deg);left:15%;top:45%}
.map-line-two{transform:rotate(-32deg);top:57%}
.map-dot{position:absolute;width:7px;height:7px;border:2px solid #fff;background:#3D27D8;border-radius:50%;box-shadow:0 0 0 2px rgba(61,39,216,.18)}
.map-dot-0{left:42%;top:18%}.map-dot-1{left:25%;top:53%}.map-dot-2{left:57%;top:10%}.map-dot-3{left:56%;top:27%}.map-dot-4{left:45%;top:40%}.map-dot-5{left:32%;top:67%}.map-dot-6{left:20%;top:76%}.map-dot-7{left:66%;top:50%}
.city-list{font-size:.9rem;color:#263456}.city-list strong{display:block;margin-bottom:.7rem;color:#21305A;font-size:1rem}.city-list-grid{display:grid;grid-template-columns:1fr 1fr;gap:.55rem .8rem}.city-list-grid span{position:relative;padding-left:1rem}.city-list-grid span::before{content:'';position:absolute;left:0;top:.55em;width:7px;height:7px;background:#2BA66B;border-radius:50%}.city-list-grid a{text-decoration:none;color:inherit}.city-list-grid a:hover{text-decoration:underline}

/* ── Callout ─────────────────────────────────────────────── */
.note{background:#FDF3F3;border-left:3px solid var(--red);padding:.9rem 1.1rem;font-size:.9rem;color:#6B1A20;border-radius:0 var(--r) var(--r) 0;margin:1.4rem 0;max-width:66ch}

/* ── CTA band ────────────────────────────────────────────── */
.cta-band{background:var(--teal);color:#fff;padding:var(--sec) 0;text-align:left}
.cta-band h2{color:#fff;margin-bottom:.8rem}
.cta-band p{color:#CFE2EA;margin-bottom:1.5rem}
.cta-band .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.cta-band .btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* ── Footer ──────────────────────────────────────────────── */
.site-foot{background:var(--ink);color:#BFCED6;padding:var(--sec) 0 6.5rem;font-size:.93rem}
.foot-grid{display:grid;gap:2rem}
@media(min-width:820px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.foot-h{font-family:var(--f-display);color:#fff;font-size:.9rem;font-weight:600;margin-bottom:.75rem}
.site-foot a{color:#BFCED6;text-decoration:none;display:block;padding:.2rem 0}
.site-foot a:hover{color:#fff}
.foot-brand p{color:#8FA5B0;max-width:36ch;margin:.9rem 0 .6rem}
.foot-brand img{height:80px;width:auto;max-width:100%;display:block}
/* Logo gehre neele aur laal ka hai — dark footer pe uska contrast sirf 2:1
   reh jata tha, yani woh lagbhag ghayab. Logo ko badalne ke bajaye usay
   ek safed panel pe rakha gaya hai, taake woh bilkul waisa hi rahe. */
.foot-logo-chip{
  display:inline-block;background:#fff;
  padding:.85rem 1.1rem;border-radius:10px;
  box-shadow:3px 3px 0 rgba(0,0,0,.25);
}
.foot-wa{color:var(--wa)!important;font-weight:600}
.foot-sister{font-size:.86rem}
.foot-sister a{display:inline;color:#fff;text-decoration:underline}
.foot-legal{border-top:1px solid rgba(255,255,255,.14);margin-top:2.25rem;padding-top:1.25rem;font-size:.82rem;color:#7F97A3;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}
.foot-legal-links{display:flex;gap:1rem}
.foot-legal-links a{display:inline}

/* ── Mobile sticky bar ───────────────────────────────────── */
.mobar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;background:#fff;border-top:1px solid var(--rule);padding:.55rem;gap:.5rem}
.mobar .btn{flex:1}
@media(min-width:940px){.mobar{display:none}}
@media(min-width:940px){.site-foot{padding-bottom:var(--sec)}}

/* ── Author page + blog post ─────────────────────────────── */
.founder{display:grid;gap:2rem}
@media(min-width:820px){.founder{grid-template-columns:250px 1fr;gap:2.75rem;align-items:start}}
.portrait-img{border:1px solid var(--rule);border-radius:8px;box-shadow:3px 3px 0 rgba(14,42,58,.10);width:100%;aspect-ratio:4/5;object-fit:cover;background:var(--panel)}
.byline{font-size:.9rem;color:var(--muted);margin:.9rem 0 0}
.byline a{color:var(--teal);font-weight:600;text-decoration:none}
.post-intro{font-size:1.1rem;color:var(--muted);margin-top:1.25rem}
.prose table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:.94rem}
.prose th,.prose td{border:1px solid var(--rule);padding:.6rem .75rem;text-align:left;vertical-align:top}
.prose th{background:var(--panel);font-family:var(--f-display);font-weight:600;font-size:.9rem}
.pricing-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.pricing-table-wrap .pricing-table{min-width:650px}
.pricing-table{border-collapse:separate!important;border-spacing:0;overflow:hidden;border:1px solid #cbd9df;border-radius:8px;background:#fff;box-shadow:0 8px 20px rgba(14,42,58,.08)}
.pricing-table th{background:var(--teal);color:#fff;border-color:rgba(255,255,255,.18);padding:.85rem .9rem;font-size:.88rem}
.pricing-table td{padding:.85rem .9rem;border-color:#e1e8eb}
.pricing-table tbody tr:nth-child(even) td{background:#f5f9fa}
.pricing-table tbody tr:hover td{background:#e8f5f1}
.pricing-table td:nth-child(2){color:var(--red);font-family:var(--f-display);font-weight:700;white-space:nowrap}

/* ── Draft bar (sirf localhost preview mode mein) ─────────── */
.draftbar{background:var(--red);color:#fff;text-align:center;padding:.55rem 1rem;font-size:.85rem;font-weight:500}
.draftbar code{background:rgba(255,255,255,.2);padding:.1rem .35rem;border-radius:3px;font-size:.9em}

/* ── Search bar ──────────────────────────────────────────── */
.searchbar{display:flex;gap:.6rem;margin-top:1.5rem;flex-wrap:wrap}
.searchbar input{flex:1;min-width:200px;padding:.85rem 1rem;border:1px solid var(--rule);border-radius:var(--r);font-family:var(--f-body);font-size:1rem;background:#fff;color:var(--ink)}
.searchbar input:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-color:var(--teal)}

/* ── Hero banner ──────────────────────────────────────────
   Banner ka apna palette navy + yellow hai, jo site ke teal/red
   system se alag hai. Isliye hero ko jaan boojh kar self-contained
   rakha gaya hai: navy background, safed text, aur WhatsApp green —
   jo navy pe saaf parhta hai. Teal button navy pe gandla lagta.
   ───────────────────────────────────────────────────────── */
:root{ --navy:#0A1E3C; --navy-2:#0E2C55; }

.hero-banner{
  background:var(--navy);
  color:#fff;
  position:relative;
  overflow:hidden;
}
.hero-banner-in{
  position:relative;z-index:2;
  padding-top:clamp(2.5rem,6vw,4.5rem);
  padding-bottom:clamp(2rem,5vw,4rem);
}
.hero-copy{max-width:34rem}
.hero-banner h1{color:#fff;margin-bottom:1.1rem}
.hero-banner .sub{font-size:1.08rem;color:#BFD2E6;max-width:44ch;margin-bottom:1.6rem}
.hero-banner .hero-note{font-size:.86rem;color:#8FA8C4;max-width:42ch;margin:0}
.hero-banner .hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-bottom:1.4rem}

/* Navy pe chalne wala secondary button */
.btn-onnavy{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-onnavy:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* Mobile: image neeche, text upar — text image ke upar nahi
   (phone pe laptop ke upar likha hua kuch parha nahi jata) */
.hero-banner-mobile{width:100%;height:auto;display:block;margin:0}
/* Form wale hero pe mobile ki alag image nahi chahiye — wahan bhi
   background hi cover karta hai, warna image do baar dikhti hai. */
.hero-banner.has-form .hero-banner-mobile{display:none}
.hero-banner.has-form{
  /* Mobile pe aspect-ratio nahi — wahan crop lagbhag square hai aur
     poora dikhane se hero bohat lamba ho jata. Content ki height chalti hai. */
  background-image:
    linear-gradient(180deg,rgba(10,30,60,.74) 0%,rgba(10,30,60,.62) 40%,rgba(10,30,60,.70) 100%),
    var(--hero-sm);
  background-size:cover, cover;
  background-position:center center;
}
/* Mobile pe image aur navy background ke beech koi line na rahe */
.hero-banner{padding-bottom:0}
.hero-banner-in{padding-bottom:clamp(1.75rem,4vw,2.5rem)}

@media(min-width:900px){
  .hero-banner{
    /* cover isliye ke auto-height pe neeche safed gap reh jata tha.
       Saath ek navy gradient bayein taraf — is se text ka contrast
       har screen width pe guaranteed rehta hai, chahe image kaise
       bhi scale ho. */
    background-image:
      linear-gradient(90deg,
        rgba(10,30,60,.97) 0%,
        rgba(10,30,60,.90) 34%,
        rgba(10,30,60,.35) 55%,
        rgba(10,30,60,0)   70%),
      var(--hero-lg);
    background-repeat:no-repeat, no-repeat;
    background-position:left center, right center;
    background-size:cover, cover;
    min-height:clamp(430px,42vw,540px);
    display:flex;align-items:center;
  }
  /* Form wale hero pe image upar rakhi jati hai aur neeche navy fade
     daali jati hai, taake safed form card saaf navy pe baithe. */
  /* Image poore hero ko cover karti hai. Upar ek halki navy layer hai
     taake safed form card aur safed heading dono saaf parhe jayein —
     lekin itni halki ke banner poora nazar aata rahe. */
  /* Banner ka apna aspect ratio 1983:793 hai. Hero ko wohi ratio
     de dete hain, is se image poori height mein bina kate nazar aati
     hai. Agar content zyada ho jaye to section khud barh jata hai —
     aspect-ratio sakht hadd nahi, sirf minimum shakal deta hai. */
  .hero-banner.has-form{
    align-items:center;
    aspect-ratio:1983 / 793;
    min-height:clamp(480px,40vw,620px);
    /* bottom anchor — is se mez aur laptop ka neeche wala hissa
       kat-ta nahi, aur banner section ke aakhir tak jata hai. */
    background-position:center bottom, center bottom;
    background-image:
      linear-gradient(180deg,
        rgba(10,30,60,.70) 0%,
        rgba(10,30,60,.52) 42%,
        rgba(10,30,60,.60) 100%),
      var(--hero-lg);
    background-size:cover, cover;
  }
  /* Content thora neeche — upar banner ke icons saaf nazar aate hain */
  .hero-banner.has-form .hero-banner-in{padding-top:4.5rem;padding-bottom:2rem}
  .hero-banner.has-form .hero-copy{max-width:44rem;margin-bottom:1.25rem}
  .hero-banner-in{width:100%;padding-top:2.5rem;padding-bottom:2.5rem}
  .hero-banner-mobile{display:none}
}
@media(min-width:900px) and (max-width:1300px){
  .hero-banner{
    background-image:
      linear-gradient(90deg,
        rgba(10,30,60,.97) 0%,
        rgba(10,30,60,.90) 38%,
        rgba(10,30,60,.40) 58%,
        rgba(10,30,60,0)   74%),
      var(--hero-md);
  }
  .hero-banner.has-form{
    background-image:
      linear-gradient(180deg,rgba(10,30,60,.72) 0%,rgba(10,30,60,.58) 40%,rgba(10,30,60,.66) 100%),
      var(--hero-md);
  }
}

/* ── Service cards ────────────────────────────────────────
   Jaan boojh kar generic SaaS cards nahi: koi soft grey blur
   shadow nahi, balke wohi hard 3px offset jo exhibit component
   pe hai. Is se card site ke apne system ka hissa lagta hai,
   kisi template ka nahi.
   ───────────────────────────────────────────────────────── */
.svc-cards{display:grid;gap:1.1rem}
@media(min-width:640px){.svc-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.svc-cards{grid-template-columns:repeat(3,1fr)}}

.svc-card{
  /* Halka teal tint — brand ke pine/teal se nikla hua, safed nahi.
     Upar ek teal accent bar taake card system ka hissa lage. */
  background:linear-gradient(180deg,#F3F8F9 0%,#EDF4F6 100%);
  border:1px solid #D3E0E4;
  border-top:3px solid var(--teal);
  border-radius:8px;
  box-shadow:3px 3px 0 rgba(14,42,58,.07);
  padding:1.5rem 1.4rem 1.4rem;
  display:flex;flex-direction:column;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.svc-card:hover{
  border-color:#BBD2D8;
  border-top-color:var(--teal-dk);
  box-shadow:5px 5px 0 rgba(20,83,107,.16);
  transform:translate(-1px,-1px);
}
@media(prefers-reduced-motion:reduce){.svc-card,.svc-card:hover{transition:none;transform:none}}

.svc-card h3{color:var(--ink);margin-bottom:.55rem}
.svc-card p{color:var(--muted);font-size:.95rem;margin:0 0 1.35rem;flex:1}

/* View service — ab asli button hai, plain link nahi */
.svc-card .go{
  align-self:flex-start;
  display:inline-flex;align-items:center;
  background:var(--teal);color:#fff;
  font-weight:600;font-size:.92rem;
  padding:.6rem 1.1rem;border-radius:var(--r);
  text-decoration:none;border:1px solid var(--teal);
  transition:background-color .15s,border-color .15s;
}
.svc-card .go:hover{background:var(--teal-dk);border-color:var(--teal-dk);text-decoration:none}
.svc-card .go:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.svc-card .soon{
  align-self:flex-start;font-size:.88rem;color:var(--muted);
  border:1px dashed var(--rule);padding:.55rem 1rem;border-radius:var(--r);
}

/* ── Scrollbox ────────────────────────────────────────────
   Lamba content ek container mein. Content DOM mein hi hai,
   isliye Google usay parh leta hai — lekin user ke liye page
   chhota reh jata hai.
   ───────────────────────────────────────────────────────── */
.scrollbox{
  max-height:clamp(320px,52vh,460px);
  overflow-y:auto;
  overscroll-behavior:contain;
  background:#fff;
  border:1px solid var(--rule);
  border-radius:8px;
  box-shadow:3px 3px 0 rgba(14,42,58,.07);
  /* Neeche halka fade — user ko pata chale ke aur content hai */
  mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 34px),transparent 100%);
}
.scrollbox:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.scrollbox-in{padding:1.6rem 1.75rem 2.5rem}
.scrollbox-in p{max-width:none}
.scrollbox-in h3{margin:1.6rem 0 .5rem;color:var(--teal)}
.scrollbox-in h3:first-child{margin-top:0}
.scrollbox-in ul{margin:0 0 1.1rem;padding-left:1.15rem;color:var(--muted)}
.scrollbox-note{font-size:.85rem;color:var(--muted);margin-top:.75rem}

/* Scrollbar ko brand ke rang mein */
.scrollbox{scrollbar-width:thin;scrollbar-color:var(--teal) #E8EDEF}
.scrollbox::-webkit-scrollbar{width:10px}
.scrollbox::-webkit-scrollbar-track{background:#E8EDEF;border-radius:0 8px 8px 0}
.scrollbox::-webkit-scrollbar-thumb{background:var(--teal);border-radius:6px;border:2px solid #E8EDEF}
.scrollbox::-webkit-scrollbar-thumb:hover{background:var(--teal-dk)}

@media(max-width:640px){
  .scrollbox{max-height:380px}
  .scrollbox-in{padding:1.25rem 1.25rem 2rem}
}

/* ── Enquiry form ─────────────────────────────────────────
   Rows mein — desktop pe 3 fields, tablet pe 2, phone pe 1.
   Button site ke system ka teal hai, kyunke red sirf prices
   ke liye reserve hai. Us rule ko torne se poora system girta hai.
   ───────────────────────────────────────────────────────── */
.enq{background:#fff;border:1px solid var(--rule);border-radius:10px;
     box-shadow:3px 3px 0 rgba(14,42,58,.07);padding:1.6rem 1.5rem 1.5rem}
.enq-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.enq-grid{display:grid;gap:1rem 1.1rem}
@media(min-width:620px){.enq-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:940px){.enq-grid{grid-template-columns:repeat(3,1fr)}}
.enq-field{display:flex;flex-direction:column;min-width:0}
.enq-field-full{grid-column:1/-1}

.enq-label{font-family:var(--f-display);font-size:.85rem;font-weight:600;
           color:var(--ink);margin-bottom:.35rem}
.enq-req{color:var(--red);margin-left:.15rem}

.enq input,.enq select,.enq textarea{
  width:100%;font-family:var(--f-body);font-size:1rem;color:var(--ink);
  background:#fff;border:1px solid var(--rule);border-radius:var(--r);
  padding:.75rem .9rem;transition:border-color .15s,box-shadow .15s;
}
.enq textarea{resize:vertical;min-height:110px}
.enq select{
  appearance:none;padding-right:2.2rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235A6B73' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:12px;
}
.enq input::placeholder,.enq textarea::placeholder{color:#9AA9B0}
.enq input:focus,.enq select:focus,.enq textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(20,83,107,.14);
}
.enq input:focus-visible,.enq select:focus-visible,.enq textarea:focus-visible{outline:none}

.enq-submit{width:100%;justify-content:center;margin-top:1.35rem;padding:.95rem 1.5rem;font-size:1.02rem}
.enq-note{font-size:.85rem;color:var(--muted);margin:.9rem 0 0;max-width:none}
.enq-note a{font-weight:600}

.enq-error{background:#FDF3F3;border-left:3px solid var(--red);border-radius:0 var(--r) var(--r) 0;
           padding:.85rem 1rem;margin-bottom:1.25rem}
.enq-error p{margin:0 0 .3rem;color:#6B1A20;font-size:.9rem;max-width:none}
.enq-error p:last-child{margin-bottom:0}


/* ── Hero ke andar form ───────────────────────────────────── */
.hero-form{position:relative;z-index:3}
.hero-form .enq{box-shadow:0 10px 34px rgba(0,0,0,.35);border-color:rgba(255,255,255,.18)}
@media(max-width:899px){
  .hero-banner.has-form .hero-copy{margin-bottom:1.5rem}
  .hero-form{margin-bottom:.5rem}
}


/* ── Form wale hero ki height bohat kam ──────────────────
   H1 chaar line ka ho kar poora page neeche dhakel raha tha.
   Is mode mein heading chhoti aur form compact rakhi gayi hai.
   ───────────────────────────────────────────────────────── */
.hero-banner.has-form h1{
  font-size:clamp(1.55rem,3.1vw,2.35rem);
  line-height:1.12;margin-bottom:0;
  text-shadow:0 2px 14px rgba(0,0,0,.55);
}
.hero-banner.has-form .enq{padding:1.15rem 1.2rem 1.2rem}
.hero-banner.has-form .enq-grid{gap:.7rem .9rem}
.hero-banner.has-form .enq input,
.hero-banner.has-form .enq select{padding:.6rem .8rem;font-size:.95rem}
.hero-banner.has-form .enq-label{font-size:.8rem;margin-bottom:.25rem}
.hero-banner.has-form .enq-submit{margin-top:.95rem;padding:.75rem 1.4rem;font-size:.97rem}


/* ── Navbar: 7 items + phone + button se wrap ho raha tha ── */
@media(min-width:940px){
  .site-nav{gap:1rem;font-size:.9rem}
  .site-nav a{white-space:nowrap}
  .head-tel{display:none}          /* phone chhota screen pe chhupa rahe */
}
@media(min-width:1180px){
  .site-nav{gap:1.2rem;font-size:.93rem}
  .head-tel{display:inline;white-space:nowrap}
}
/* Navbar ko simatne dein, warna woh viewport se bahar nikal kar
   poore page pe horizontal scrollbar le aata hai. */
.head-in{flex-wrap:nowrap;min-width:0}
.site-nav{min-width:0;overflow:hidden}
.head-cta{flex:0 0 auto}

@media(max-width:819px){
  .city-feature{gap:1.5rem;padding:1.75rem 1.25rem;min-height:0}
  .city-map{grid-template-columns:1fr;gap:1.25rem;min-height:0}
  .city-map-image{min-height:0;max-height:18rem}
  .city-list{width:100%}
}

@media(max-width:480px){
  .wrap{padding-left:1rem;padding-right:1rem}
  .head-in{gap:.5rem;padding-left:1rem;padding-right:.75rem}
  .brand img{max-width:145px}
  .head-cta{gap:.25rem}
  .head-cta .btn-sm{padding:.5rem .65rem;font-size:.8rem}
  .hero-banner-in{padding-top:2rem;padding-bottom:1.5rem}
  .hero-banner.has-form .enq{padding:.9rem .85rem 1rem}
  .hero-banner.has-form .enq-grid{gap:.7rem}
  .city-list-grid{gap:.45rem .65rem;font-size:.82rem}
  .pricing-table-wrap .pricing-table{font-size:.86rem}
}