/* ============================================================
   Quick-commerce style UI: bright, dense, card-first.
   White canvas, yellow brand bar, green as the action colour.
   ============================================================ */

:root{
  --brand:#f8cb46;
  --brand-dark:#e8b81f;
  --brand-tint:#fff8e1;
  --green:#0c831f;
  --green-dark:#0a6b19;
  --green-tint:#eaf6ec;
  --ink:#1f1f1f;
  --ink-2:#3c3c3c;
  --gray:#666;
  --gray-2:#8a8a8a;
  --line:#e8e8e8;
  --line-2:#f0f0f0;
  --bg:#fff;
  --tint:#f7f7f7;
  --red:#d4380d;
  --blue:#0a5cd6;

  --font:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --wrap:1280px;
  --r:12px;
  --r-sm:8px;
  --shadow:0 1px 3px rgba(0,0,0,.06);
  --shadow-lg:0 4px 16px rgba(0,0,0,.1);
}

*,*::before,*::after{box-sizing:border-box}
/* ------------------------------------------------------------------
   SCROLL FIX
   Pehle html AUR body dono par overflow-x:hidden tha, plus body par
   max-width:100vw aur overscroll-behavior-y:none. Us combination se
   iOS Safari aur kuch Android browsers me page ka scroll poora lock
   ho jaata tha (aur sticky header bhi tootta tha).
   Ab horizontal clipping sirf body par hai, aur scroll kahin block
   nahi hota.
   ------------------------------------------------------------------ */
html{
  -webkit-text-size-adjust:100%;
  /* scroll-behavior:smooth hata diya -- isi se poora page "slow"/chipka
     hua lagta tha, khaaskar Android Chrome me. Ab native speed. */
  scroll-padding-top:calc(var(--hdr-h,64px) + 12px);
  height:auto;              /* kabhi 100% mat karna, warna scroll marr jaata hai */
}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;        /* fallback */
  overflow-x:clip;          /* modern browsers: clip karta hai par scroll block nahi karta */
  overflow-y:visible;
  min-height:100%;
  /* dock clearance -- JS na chale tab bhi neeche jagah bachi rahe */
  padding-bottom:var(--dock-space,0px);
}
body.has-dock{--dock-space:74px}
@media(min-width:641px){body.has-dock{--dock-space:78px}}
.page{display:block;min-height:40vh}

/* soft entry so the page does not snap in */
.reveal{opacity:0;transform:translateY(6px);
  transition:opacity .28s ease-out,transform .28s ease-out}
.reveal.in{opacity:1;transform:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.2;font-weight:700;letter-spacing:-.02em}
h1{font-size:clamp(1.5rem,3.4vw,2.1rem)}
h2{font-size:clamp(1.15rem,2.2vw,1.4rem)}
h3{font-size:1rem}
p{margin:0 0 .8rem}
.wrap{width:min(100% - 1.6rem,var(--wrap));margin-inline:auto}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
::selection{background:var(--brand)}

/* ============================ TOP STRIP ============================ */
.topbar{background:var(--ink);color:#e6e6e6;font-size:.72rem;font-weight:500}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;
  align-items:center;justify-content:space-between;padding:.42rem 0}
.topbar .tb-side{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.topbar .tb-hrs{color:#a9a9a9}
.topbar a{transition:color .15s ease}
.topbar a:hover{color:var(--brand)}

/* ============================ HEADER ============================ */
.site-header{
  position:sticky;top:0;z-index:60;background:var(--brand);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.site-header .wrap{display:flex;align-items:center;gap:1rem;padding:.7rem 0}

.brand{display:flex;align-items:center;gap:.55rem;flex:none}
.brand-mark{
  width:38px;height:38px;flex:none;background:var(--ink);color:var(--brand);
  border-radius:10px;display:grid;place-items:center;
  font-size:1.25rem;font-weight:800;
}
.brand-name{font-size:1.3rem;font-weight:800;letter-spacing:-.03em;display:block;line-height:1.05}
.brand-sub{font-size:.68rem;font-weight:600;color:#6b5a14;display:block}

.deliver-in{
  flex:none;padding-left:1rem;border-left:1px solid rgba(0,0,0,.12);
  line-height:1.2;
}
.deliver-in b{display:block;font-size:.9rem;font-weight:800;letter-spacing:-.02em}
.deliver-in span{font-size:.72rem;color:#5c4f14;font-weight:600}

.searchbox{flex:1;min-width:0;position:relative}
.searchbox input{
  width:100%;padding:.7rem .9rem .7rem 2.4rem;border:1px solid rgba(0,0,0,.1);
  border-radius:var(--r-sm);background:#fff;font-size:.88rem;
}
.searchbox input::placeholder{color:var(--gray-2)}
.searchbox svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--gray)}

.header-cta{display:flex;align-items:center;gap:.5rem;flex:none}
.searchbox-spacer{flex:1;min-width:0}

/* ---------- nav row ---------- */
.navbar{background:#fff;border-bottom:1px solid var(--line)}
.navbar .wrap{display:flex;align-items:center;gap:.2rem;overflow-x:auto;scrollbar-width:none}
.navbar .wrap::-webkit-scrollbar{display:none}
.navbar a{
  padding:.75rem .9rem;font-size:.85rem;font-weight:600;color:var(--ink-2);
  white-space:nowrap;border-bottom:3px solid transparent;
}
.navbar a:hover{color:var(--green)}
.navbar a.active{color:var(--green);border-bottom-color:var(--green)}

/* ============================ BUTTONS ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.62rem 1rem;border:1px solid transparent;border-radius:var(--r-sm);
  font-size:.82rem;font-weight:700;cursor:pointer;letter-spacing:-.01em;
  transition:background .15s,color .15s,border-color .15s,transform .1s;
}
.btn:active{transform:scale(.96)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn-green{background:var(--green);color:#fff}
.btn-green:hover{background:var(--green-dark)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.btn-outline{background:#fff;border-color:var(--green);color:var(--green)}
.btn-outline:hover{background:var(--green-tint)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gray-2)}
.btn-wa{background:#1fa855;color:#fff}
.btn-wa:hover{background:#178943}
.btn-sm{padding:.42rem .7rem;font-size:.75rem}
.btn-lg{padding:.8rem 1.4rem;font-size:.92rem}
.btn-block{width:100%}

/* ============================ CATEGORY TILES ============================ */
.cat-strip{padding:1.1rem 0 .5rem}
/* Desktop: tiles share the full row width. Mobile: horizontal scroll. */
.cat-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.8rem;
  padding-bottom:.4rem;scrollbar-width:none}
.cat-row::-webkit-scrollbar{display:none}
.cat-tile{text-align:center;min-width:0}
.cat-tile .box{
  width:100%;aspect-ratio:1/1;max-height:140px;border-radius:var(--r);background:var(--brand-tint);
  display:grid;place-items:center;margin-bottom:.45rem;overflow:hidden;
  border:1px solid var(--line-2);transition:transform .15s,box-shadow .15s;
  font-size:clamp(1.8rem,3.4vw,2.8rem);
}
.cat-tile .box img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
@media(hover:hover){.cat-tile:hover .box{transform:translateY(-2px);box-shadow:var(--shadow-lg)}}
.cat-tile span{font-size:.75rem;font-weight:600;line-height:1.25;display:block;color:var(--ink-2)}
.cat-tile:nth-child(6n+2) .box{background:#e9f4ff}
.cat-tile:nth-child(6n+3) .box{background:#eaf6ec}
.cat-tile:nth-child(6n+4) .box{background:#fdeeea}
.cat-tile:nth-child(6n+5) .box{background:#f2edfd}
.cat-tile:nth-child(6n+6) .box{background:#e8f7f6}

/* ============================ HERO BANNER ============================ */
/* Short on purpose -- products matter more than the picture. */
.hero{padding:.8rem 0 0}
.hero-slides{
  position:relative;height:var(--hero-h,36vh);min-height:200px;max-height:360px;
  border-radius:var(--r);overflow:hidden;background:var(--ink);
}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;
  background-size:cover;background-position:center}
.hero-slide.on{opacity:1}
.hero-slide::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 55%,rgba(0,0,0,.15) 100%)}
.hero-copy{position:absolute;inset:0;z-index:2;display:flex;align-items:center;
  padding:0 clamp(1.2rem,4vw,3rem)}
.hero-inner{max-width:32rem;color:#fff}
.hero-inner h1{color:#fff;font-size:clamp(1.4rem,3.6vw,2.3rem)}
.hero-inner h1 em{font-style:normal;color:var(--brand)}
.hero-inner p{color:#dcdcdc;margin:.5rem 0 1rem;font-size:.88rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.hero-dots{position:absolute;left:0;right:0;bottom:.7rem;z-index:3;
  display:flex;gap:.3rem;justify-content:center}
.hero-dots button{width:20px;height:3px;border:0;border-radius:3px;
  background:rgba(255,255,255,.4);cursor:pointer;padding:0}
.hero-dots button.on{background:var(--brand)}

/* ---------- rate ticker ---------- */
.ratebar{background:var(--green-tint);border-block:1px solid #d6ecda;overflow:hidden;margin-top:.9rem}
.ratebar-inner{display:flex;gap:2.2rem;padding:.5rem 0;white-space:nowrap;
  font-size:.78rem;font-weight:600;color:var(--green-dark);animation:slide 44s linear infinite}
.ratebar-inner b{color:var(--ink)}
.ratebar:hover .ratebar-inner{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================ SECTIONS ============================ */
.section{padding:1.6rem 0}
.section--tint{background:var(--tint)}
.sec-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:.6rem;margin-bottom:.9rem}
.sec-head h2{letter-spacing:-.03em}
.sec-head p{margin:.2rem 0 0;color:var(--gray);font-size:.83rem}
.see-all{font-size:.82rem;font-weight:700;color:var(--green)}
.see-all:hover{text-decoration:underline}

/* ============================ PRODUCT GRID ============================ */
.filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.chip{
  font-size:.78rem;font-weight:600;padding:.45rem .85rem;border:1px solid var(--line);
  border-radius:100px;background:#fff;cursor:pointer;color:var(--ink-2);transition:.15s;
}
.chip:hover{border-color:var(--green);color:var(--green)}
.chip.on{background:var(--green);color:#fff;border-color:var(--green)}

.grid{display:grid;gap:.8rem}
/* minmax(0,1fr) zaroori hai -- plain 1fr ke saath card ka content
   (price + ENQUIRE button) column se chaudi ho jaati thi aur card
   screen ke right side se bahar nikal kar kat jaata tha. */
.grid-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid>*{min-width:0}

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:.55rem;display:flex;flex-direction:column;position:relative;min-width:0;
  transition:box-shadow .2s ease,border-color .2s ease,transform .2s cubic-bezier(.22,.61,.36,1);
}
@media(hover:hover){.card:hover{box-shadow:var(--shadow-lg);border-color:#dcdcdc;transform:translateY(-2px)}}
.card:active{transform:scale(.99)}
.card-media img{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
@media(hover:hover){.card:hover .card-media img{transform:scale(1.045)}}
.card-media{position:relative;aspect-ratio:1/1;background:var(--tint);
  border-radius:var(--r-sm);overflow:hidden;margin-bottom:.5rem}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-tag{
  position:absolute;top:.4rem;left:.4rem;background:var(--blue);color:#fff;
  font-size:.6rem;font-weight:800;padding:.15rem .4rem;border-radius:4px;letter-spacing:.02em;
}
.card-tag.out{background:var(--red)}
.card-tag.low{background:#c47f00}
.card-cat{font-size:.66rem;font-weight:600;color:var(--gray-2);
  text-transform:uppercase;letter-spacing:.03em}
.card h3{font-size:.85rem;font-weight:600;margin:.15rem 0 .1rem;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-unit{font-size:.75rem;color:var(--gray);margin-bottom:.5rem}
.card-desc{font-size:.72rem;color:var(--gray-2);margin:0 0 .5rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.price-row{display:flex;align-items:center;justify-content:space-between;gap:.4rem;
  margin-top:auto;flex-wrap:wrap;min-width:0}
.price{font-size:.95rem;font-weight:800;letter-spacing:-.02em}
.price small{display:block;font-size:.68rem;font-weight:500;color:var(--gray-2)}

/* ============================ AVAILABILITY BOARD ============================ */
.board{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow)}
.board-top{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between;
  padding:.9rem 1.1rem;background:var(--green-tint);border-bottom:1px solid #d6ecda}
.board-top h3{font-size:1.05rem}
.board-top p{margin:.1rem 0 0;font-size:.78rem;color:var(--gray)}
.board-live{font-size:.72rem;font-weight:600;color:var(--green-dark);
  display:flex;align-items:center;gap:.4rem}
.board-live i{width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 0 rgba(12,131,31,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 7px rgba(12,131,31,0)}100%{box-shadow:0 0 0 0 rgba(12,131,31,0)}}

.board-form{display:grid;grid-template-columns:1.4fr 1fr 1fr .7fr auto;gap:.6rem;padding:1rem 1.1rem}
.board-form label{display:block;font-size:.7rem;font-weight:700;color:var(--gray);margin-bottom:.3rem}
.board-form select,.board-form input{
  width:100%;padding:.6rem .65rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;font-size:.85rem;
}
.board-form select:focus,.board-form input:focus{border-color:var(--green);outline:none}
.board-form .field-go{display:flex;align-items:flex-end}
.board-form .field-go .btn{height:39px;white-space:nowrap}

.board-result{padding:0 1.1rem 1.1rem;display:none}
.board-result.show{display:block}
.result-card{border-radius:var(--r-sm);padding:.9rem 1rem;background:var(--tint);
  border-left:4px solid var(--gray-2)}
.result-card.yes{background:var(--green-tint);border-left-color:var(--green)}
.result-card.no{background:#fdeeea;border-left-color:var(--red)}
.result-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem}
.result-num{font-size:2.2rem;font-weight:800;line-height:1;letter-spacing:-.04em}
.result-card.yes .result-num{color:var(--green)}
.result-card.no .result-num{color:var(--red)}
.result-txt{font-size:.85rem;color:var(--ink-2)}
.daygrid{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.8rem}
.daychip{font-size:.7rem;font-weight:600;padding:.28rem .5rem;border-radius:6px;
  background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.daychip b{color:var(--green)}
.daychip.zero{color:var(--red);border-color:#f4cdc2}
.daychip.zero b{color:var(--red)}
.result-actions{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem}

/* ============================ TRADE CARDS ============================ */
.trade{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,border-color .15s}
.trade:hover{box-shadow:var(--shadow-lg);border-color:#dcdcdc}

.trade-head{padding:.85rem .9rem .7rem;border-bottom:1px solid var(--line-2)}
.trade-title{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.trade h3{font-size:1rem;line-height:1.25}
.trade .local{font-size:.9rem;font-weight:700;color:var(--ink-2);
  background:var(--brand-tint);padding:.12rem .45rem;border-radius:5px;white-space:nowrap;flex:none}
.trade p{font-size:.76rem;color:var(--gray);margin:.35rem 0 0}
.trade-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.55rem}
.trade-rate{font-size:1.2rem;font-weight:800;letter-spacing:-.03em}
.trade-rate small{font-size:.7rem;font-weight:500;color:var(--gray-2)}
.trade-free{font-size:.72rem;font-weight:700;color:var(--green);
  background:var(--green-tint);padding:.2rem .5rem;border-radius:100px}
.trade-free.none{color:var(--red);background:#fdeeea}

/* the check-right-here strip inside each card */
.trade-check{padding:.7rem .9rem .85rem;background:var(--tint);display:grid;gap:.45rem}
.trade-check .row2{display:grid;grid-template-columns:1.35fr .65fr;gap:.4rem}
.trade-check label{font-size:.66rem;font-weight:700;color:var(--gray);
  display:block;margin-bottom:.2rem}
.trade-check input{width:100%;padding:.48rem .5rem;border:1px solid var(--line);
  border-radius:6px;background:#fff;font-size:.82rem}
.trade-check input:focus{border-color:var(--green);outline:none}
.trade-check .btn{padding:.5rem;font-size:.75rem}
.trade-out{font-size:.78rem;font-weight:700;padding:.45rem .6rem;border-radius:6px;
  display:none;line-height:1.35}
.trade-out.show{display:block}
.trade-out.yes{background:var(--green-tint);color:var(--green-dark)}
.trade-out.no{background:#fdeeea;color:var(--red)}
.trade-out .go{display:inline-block;margin-top:.35rem;font-weight:800;text-decoration:underline}

/* ============================ PARTNERS ============================ */
.marquee{overflow:hidden;position:relative;padding:.3rem 0;
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-track{display:flex;gap:3.2rem;align-items:center;width:max-content;
  animation:slide 34s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee img{height:48px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.55;transition:.2s}
.marquee a:hover img{filter:none;opacity:1}

/* ============================ TEAM ============================ */
.person{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;text-align:center;padding-bottom:.8rem}
.person-photo{aspect-ratio:1/1;background:var(--tint)}
.person-photo img{width:100%;height:100%;object-fit:cover}
.person h3{font-size:.9rem;margin-top:.6rem}
.person-role{font-size:.74rem;color:var(--gray);margin-top:.1rem}
.person-phone{display:inline-block;margin-top:.45rem;font-size:.78rem;font-weight:700;color:var(--green)}
.person-wa{display:inline-block;margin-top:.3rem;font-size:.72rem;font-weight:700;color:#1fa855}
.person{transition:box-shadow .2s ease,transform .2s cubic-bezier(.22,.61,.36,1)}
@media(hover:hover){.person:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}}

/* reserved team slots, shown until the admin adds real people */
.person--empty{border-style:dashed;background:var(--tint);box-shadow:none}
.person--empty:hover{transform:none;box-shadow:none}
.person--empty h3,.person--empty .person-role{color:var(--gray-2)}
.person-photo.ph{background:
  linear-gradient(135deg,var(--line-2) 25%,transparent 25%,transparent 50%,var(--line-2) 50%,var(--line-2) 75%,transparent 75%)
  0 0/16px 16px}
.muted-ph{display:inline-block;margin-top:.45rem;font-size:.75rem;font-weight:600;color:var(--gray-2)}
.team-hint{margin-top:.9rem;font-size:.8rem;color:var(--gray);
  background:var(--brand-tint);border:1px solid #f2e4b8;border-radius:var(--r-sm);padding:.7rem .85rem}

/* people / brands -- centre me, left me nahi */
.sec-head.center{justify-content:center;text-align:center}
.sec-head.center>div{width:100%}
.people-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem}
.people-row .person{width:calc((100% - 3.2rem)/5);min-width:150px;max-width:230px}
.brand-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:2.6rem;padding:.6rem 0}
.brand-row img{height:52px;width:auto;object-fit:contain;filter:grayscale(1);opacity:.6;transition:.2s}
@media(hover:hover){.brand-row a:hover img{filter:none;opacity:1}}

/* ============================ STEPS ============================ */
.steps{display:grid;gap:.8rem;grid-template-columns:repeat(4,minmax(0,1fr))}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem}
.step .n{width:28px;height:28px;border-radius:50%;background:var(--brand);
  display:grid;place-items:center;font-weight:800;font-size:.8rem;margin-bottom:.5rem}
.step h3{font-size:.9rem;margin-bottom:.2rem}
.step p{font-size:.78rem;color:var(--gray);margin:0}

/* ============================ FORMS ============================ */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.2rem}
.form-grid{display:grid;gap:.8rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.field{display:flex;flex-direction:column;gap:.28rem}
.field.full{grid-column:1/-1}
.field label{font-size:.75rem;font-weight:700;color:var(--ink-2)}
.field input,.field select,.field textarea{
  padding:.65rem .7rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;font-size:.87rem}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);outline:none}
.req{color:var(--red)}

.notice{padding:.7rem .9rem;border-radius:var(--r-sm);font-size:.84rem;
  background:var(--tint);border-left:4px solid var(--gray-2);margin-bottom:.8rem}
.notice.ok{background:var(--green-tint);border-left-color:var(--green)}
.notice.err{background:#fdeeea;border-left-color:var(--red)}

/* ============================ INFO / SPLIT ============================ */
.split{display:grid;grid-template-columns:1fr 1.2fr;gap:1.6rem;align-items:start}
.info-list{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.info-list li{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:.7rem .85rem}
.info-list b{display:block;font-size:.7rem;font-weight:700;color:var(--gray-2);
  text-transform:uppercase;letter-spacing:.04em;margin-bottom:.15rem}
.info-list span,.info-list a{font-size:.9rem;font-weight:600}

/* ============================ TABLES ============================ */
.tbl-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.tbl-scroll{overflow-x:auto}
table.week{width:100%;border-collapse:collapse;min-width:720px;font-size:.85rem}
table.week th{background:var(--tint);padding:.65rem .5rem;font-size:.72rem;
  font-weight:700;color:var(--gray)}
table.week th:first-child{text-align:left;padding-left:1rem}
table.week td{padding:.65rem .5rem;text-align:center;border-top:1px solid var(--line-2);font-weight:700}
table.week td:first-child{text-align:left;padding-left:1rem;font-weight:400}
table.week .t-name{font-weight:700;font-size:.88rem;display:block}
table.week .t-sub{font-size:.72rem;color:var(--gray);font-weight:400}
table.week .free{color:var(--green)}
table.week .zero{color:var(--red)}

/* ============================ PAGE HEAD ============================ */
.pagehead{background:var(--brand-tint);border-bottom:1px solid #f2e4b8;padding:1.4rem 0}
.pagehead p{margin:.3rem 0 0;color:var(--ink-2);font-size:.87rem;max-width:44rem}
.crumb{font-size:.74rem;color:var(--gray);margin-bottom:.35rem;font-weight:600}
.crumb a:hover{color:var(--green)}

.empty{padding:2.2rem 1rem;text-align:center;color:var(--gray);font-size:.88rem;
  background:#fff;border:1px dashed var(--line);border-radius:var(--r)}

/* ============================ FOOTER ============================ */
.site-footer{background:var(--tint);border-top:1px solid var(--line);
  padding:2rem 0 0;font-size:.85rem;color:var(--gray);margin-top:1.5rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:1.6rem}
.site-footer h4{font-size:.82rem;font-weight:800;color:var(--ink);margin-bottom:.6rem;
  text-transform:uppercase;letter-spacing:.04em}
.site-footer a:hover{color:var(--green)}
.foot-links{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.foot-bottom{border-top:1px solid var(--line);margin-top:1.6rem;padding:.9rem 0;
  font-size:.76rem;display:flex;flex-wrap:wrap;gap:.4rem;justify-content:space-between}
.foot-btns{display:flex;gap:.4rem;margin-top:.8rem;flex-wrap:wrap}
.foot-social{display:flex;gap:.9rem;margin-top:.8rem;font-size:.78rem;font-weight:600}
.foot-social a{color:var(--ink-2)}
.foot-social a:hover{color:var(--green)}

/* ============================ CHATBOT ============================ */
.chat-panel{
  position:fixed;right:18px;bottom:18px;z-index:95;width:min(370px,calc(100vw - 24px));
  height:min(550px,calc(100vh - 36px));background:#fff;border-radius:var(--r);
  box-shadow:0 12px 44px rgba(0,0,0,.22);flex-direction:column;overflow:hidden;
}
.chat-head{background:var(--green);color:#fff;padding:.8rem .9rem;display:flex;align-items:center;gap:.6rem}
.chat-head .avatar{width:34px;height:34px;background:var(--brand);color:var(--ink);
  border-radius:50%;display:grid;place-items:center;font-weight:800}
.chat-head strong{font-size:.95rem;display:block;line-height:1.15}
.chat-head span{font-size:.7rem;opacity:.85}
.chat-head .close{margin-left:auto;background:none;border:0;color:#fff;font-size:1.35rem;
  line-height:1;cursor:pointer;opacity:.85}
.chat-body{flex:1;overflow-y:auto;padding:.9rem;background:var(--tint);
  display:flex;flex-direction:column;gap:.5rem}
.msg{max-width:85%;padding:.55rem .75rem;border-radius:12px;font-size:.84rem;line-height:1.45}
.msg.bot{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.msg.user{background:var(--green);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.msg a{text-decoration:underline}
.typing{display:flex;gap:4px;padding:.65rem .75rem}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--gray-2);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.chat-quick{display:flex;flex-wrap:wrap;gap:.3rem;padding:.55rem .75rem 0;background:#fff}
.chat-quick button{font-size:.72rem;font-weight:600;padding:.3rem .6rem;border-radius:100px;
  border:1px solid var(--line);background:#fff;cursor:pointer;color:var(--ink-2)}
.chat-quick button:hover{border-color:var(--green);color:var(--green)}
.chat-actions{display:flex;gap:.35rem;padding:.55rem .75rem;background:#fff}
.chat-actions .btn{flex:1;padding:.45rem;font-size:.72rem}
.chat-input{display:flex;gap:.35rem;padding:.5rem .75rem .75rem;background:#fff;
  border-top:1px solid var(--line-2)}
.chat-input input{flex:1;padding:.55rem .8rem;border:1px solid var(--line);
  border-radius:100px;font-size:.86rem}
.chat-input button{width:38px;height:38px;border-radius:50%;border:0;flex:none;
  background:var(--green);color:#fff;cursor:pointer;display:grid;place-items:center}


/* ============================================================
   APP DOCK
   Phone : full-width bar pinned to the bottom, like Blinkit.
   Laptop: the same bar shrunk into a small centred floating pill.
   Height is published as --dock-space so body padding always matches
   and nothing can end up hidden underneath it.
   ============================================================ */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:88;
  /* backdrop-filter hata diya -- Android par har scroll frame par
     blur dobara banta tha aur scroll lag karta tha. Solid background
     bilkul waisa hi dikhta hai aur bahut tez hai. */
  background:#fff;
  border-top:1px solid var(--line);
  box-shadow:0 -4px 20px rgba(0,0,0,.07);
  padding-bottom:env(safe-area-inset-bottom);
  transition:transform .28s cubic-bezier(.22,.61,.36,1);
}
.dock.tuck{transform:translateY(120%)}
.dock-inner{
  display:flex;align-items:flex-end;justify-content:space-around;
  max-width:var(--wrap);margin-inline:auto;padding:.3rem .25rem .3rem;
}
.dock-item{
  flex:1 1 0;min-width:0;background:none;border:0;cursor:pointer;padding:.3rem .1rem .25rem;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  color:var(--gray);font-family:inherit;
  transition:color .18s ease;
}
.dock-ico{
  position:relative;width:26px;height:26px;border-radius:9px;
  display:grid;place-items:center;
  transition:background .22s ease,transform .22s cubic-bezier(.34,1.56,.64,1);
}
.dock-ico svg{width:20px;height:20px}
.dock-txt{
  font-size:.615rem;font-weight:600;letter-spacing:-.01em;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.dock-item:active .dock-ico{transform:scale(.88)}
.dock-item.on{color:var(--green)}
.dock-item.on .dock-ico{background:var(--green-tint);transform:translateY(-1px)}
.dock-item.on .dock-ico svg{stroke-width:2.1}

/* unread nudge on the chat tab */
.dock-dot{
  position:absolute;top:1px;right:1px;width:7px;height:7px;border-radius:50%;
  background:var(--red);opacity:0;transform:scale(.4);
  transition:opacity .25s ease,transform .25s cubic-bezier(.34,1.56,.64,1);
}
.dock-dot.on{opacity:1;transform:scale(1)}

/* raised WhatsApp action */
.dock-fab{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:.3rem .1rem .25rem;color:var(--green-dark);
}
.fab-ring{
  width:44px;height:44px;border-radius:50%;flex:none;margin-top:-20px;
  background:#1fa855;color:#fff;display:grid;place-items:center;
  border:3px solid #fff;box-shadow:0 6px 16px rgba(31,168,85,.42);
  transition:transform .22s cubic-bezier(.34,1.56,.64,1),box-shadow .22s ease;
}
.fab-ring svg{width:22px;height:22px}
.dock-fab:hover .fab-ring{transform:translateY(-2px);box-shadow:0 9px 22px rgba(31,168,85,.5)}
.dock-fab:active .fab-ring{transform:scale(.92)}
.dock-fab .dock-txt{font-weight:700;color:var(--green-dark)}

/* ---------- laptop: same dock, small floating pill in the centre ---------- */
@media(min-width:641px){
  .dock{
    left:50%;right:auto;bottom:16px;transform:translateX(-50%);
    width:auto;border:1px solid var(--line);border-radius:100px;
    background:#fff;
    box-shadow:0 10px 34px rgba(0,0,0,.14),0 2px 6px rgba(0,0,0,.05);
    padding-bottom:0;
  }
  .dock.tuck{transform:translateX(-50%) translateY(160%)}
  .dock-inner{padding:.28rem .35rem;gap:.1rem;justify-content:center}
  .dock-item,.dock-fab{
    flex:0 0 auto;flex-direction:row;gap:.35rem;padding:.42rem .72rem;border-radius:100px;
    transition:background .18s ease,color .18s ease;
  }
  .dock-item:hover{background:var(--tint);color:var(--ink)}
  .dock-ico{width:auto;height:auto;border-radius:0;background:none !important}
  .dock-ico svg{width:17px;height:17px}
  .dock-txt{font-size:.76rem;font-weight:600}
  .dock-item.on{background:var(--green-tint);color:var(--green-dark)}
  .dock-item.on .dock-ico{transform:none}
  .fab-ring{width:28px;height:28px;margin-top:0;border-width:0;box-shadow:none}
  .fab-ring svg{width:17px;height:17px}
  .dock-fab{background:#1fa855;color:#fff}
  .dock-fab .dock-txt{color:#fff}
  .dock-fab:hover{background:#178943}
  .dock-fab:hover .fab-ring{transform:none;box-shadow:none}
}
@media(min-width:641px) and (max-width:900px){
  .dock-item .dock-txt{display:none}
  .dock-item{padding:.45rem .6rem}
}

/* ============================ FLOATING CHAT LAUNCHER ============================ */
.chat-launch{
  position:fixed;right:16px;z-index:90;
  bottom:calc(var(--dock-space,18px) + 14px);
  height:44px;padding:0 .9rem 0 .75rem;border-radius:100px;
  border:0;cursor:pointer;background:var(--green);color:#fff;
  display:inline-flex;align-items:center;gap:.4rem;
  font-weight:700;font-size:.8rem;letter-spacing:-.01em;
  box-shadow:0 8px 22px rgba(12,131,31,.34);
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),opacity .2s ease,box-shadow .2s ease;
}
.chat-launch:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(12,131,31,.42)}
.chat-launch:active{transform:scale(.95)}
.chat-launch.hide{opacity:0;pointer-events:none;transform:scale(.7)}
.chat-launch svg{width:20px;height:20px;flex:none}
.chat-launch .badge{
  position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;
  font-size:.6rem;font-weight:800;width:18px;height:18px;border-radius:50%;
  display:grid;place-items:center;box-shadow:0 0 0 2px #fff;
}
.chat-panel{
  right:16px;bottom:calc(var(--dock-space,18px) + 14px);
  transform:translateY(12px) scale(.97);opacity:0;
  transition:opacity .22s ease,transform .22s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;display:flex;
}
.chat-panel.open{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.chat-panel:not(.open){visibility:hidden}

/* ============================ RESPONSIVE ============================ */
@media(max-width:1100px){
  .people-row .person{width:calc((100% - 2.4rem)/4)}
  .grid-5{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid{grid-template-columns:1.4fr 1fr 1fr}
  .foot-about{grid-column:1/-1}
  .board-form{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .people-row .person{width:calc((100% - 1.6rem)/3)}
  .deliver-in{display:none}
  .site-header .wrap{flex-wrap:wrap;gap:.5rem .7rem}
  .searchbox{order:3;flex-basis:100%}
  .split{grid-template-columns:1fr}
  .grid-5,.grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .topbar .tb-hrs{display:none}
}

/* ---------- phone: behave like an app ---------- */
@media(max-width:640px){
  .topbar{display:none}
  /* Header ab sticky hai, fixed nahi. Sticky ko JS se padding-top set
     karne ki zaroorat nahi padti, isliye JS fail ho jaaye tab bhi na
     content chhupta hai na scroll rukta hai. */
  .site-header{
    position:sticky;top:0;
    padding-top:env(safe-area-inset-top);
  }
  .navbar{display:none}

  .brand{min-width:0;flex:1 1 auto}
  .brand-txt{min-width:0}
  .brand-name{font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand-mark{width:32px;height:32px;font-size:1.05rem;border-radius:9px}
  .header-cta{flex:none;margin-left:auto}
  .brand-sub{display:none}
  .site-header .wrap{padding:.55rem 0}
  .searchbox input{padding:.6rem .85rem .6rem 2.3rem;font-size:.85rem}
  .header-cta .btn{padding:.44rem .68rem;font-size:.73rem}

  /* PHONE: ek row me poore 5 tile fit hote hain (pehle 4 aate the).
     Width fixed px me nahi, screen se calculate hoti hai -- isliye
     360px, 390px, 412px har phone par exactly 5 hi aate hain. */
  .cat-row{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;padding-inline:0;gap:.45rem}
  .cat-tile{flex:0 0 calc((100% - 1.8rem) / 5);width:calc((100% - 1.8rem) / 5);
    scroll-snap-align:start}
  .cat-tile .box{width:100%;height:auto;aspect-ratio:1/1;max-height:none;font-size:1.45rem}
  .cat-tile span{font-size:.63rem;line-height:1.2}

  .section{padding:1.1rem 0}
  .grid-5,.grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-2{grid-template-columns:1fr}

  /* ----------------------------------------------------------------
     TRADE CARDS -- phone fix
     2 columns me har card sirf ~150px chaudi bachti thi. Android ka
     native date picker input usse zyada jagah maangta hai, isliye
     card ka right side kat jaata tha. Ab phone par ek hi column,
     aur date + "how many" ek saaf row me.
     ---------------------------------------------------------------- */
  .grid-trades{grid-template-columns:1fr !important;gap:.6rem}
  .trade-check{padding:.75rem .9rem .9rem;gap:.55rem}
  .trade-check .row2{grid-template-columns:1fr 92px;gap:.5rem}
  .trade-check input{
    width:100%;min-width:0;font-size:16px;padding:.6rem .55rem;
  }
  .trade-check input[type=date]{-webkit-appearance:none;appearance:none}
  .trade-check label{font-size:.68rem;margin-bottom:.25rem}
  .trade-check .btn{padding:.62rem;font-size:.82rem}
  .trade-head{padding:.8rem .9rem .7rem}
  .trade h3{font-size:1.02rem}
  .trade .local{font-size:.85rem}

  /* availability milne par "Send your labour request" ka bada form
     phone par nahi dikhana -- sirf Call / WhatsApp kaafi hai */
  #requestBox{display:none !important}

  /* people row phone par 2 per line, centre me */
  .people-row .person{width:calc((100% - .8rem)/2);min-width:0}
  .brand-row{gap:1.4rem}
  .brand-row img{height:38px}
  .steps{grid-template-columns:1fr}
  .board-form{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .hero-slides{min-height:165px;border-radius:12px}
  .pagehead{padding:1rem 0}

  /* footer: quieter, smaller, no oversized artwork */
  .site-footer{padding-top:1.4rem;margin-top:1rem}
  .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem}
  .foot-about{grid-column:1/-1}
  .foot-about p{font-size:.8rem}
  .site-footer h4{font-size:.72rem;margin-bottom:.45rem}
  .foot-links{gap:.32rem;font-size:.8rem}
  .foot-bottom{margin-top:1.1rem;font-size:.7rem;justify-content:center;text-align:center}
  .marquee img{height:36px}
  .person-photo{aspect-ratio:1/1}

  .chat-launch{right:12px;height:40px;padding:0 .8rem 0 .68rem;font-size:.76rem}
  .chat-launch svg{width:18px;height:18px}
  .chat-panel{right:0;left:0;bottom:0;width:100%;height:100dvh;border-radius:0;
    transform:translateY(100%);}
  .chat-panel.open{transform:none}
  /* the full-screen chat covers the dock, so hide it while open */
  body.chat-open .dock,body.chat-open .chat-launch{opacity:0;pointer-events:none}
}

@media(max-width:380px){
  .dock-txt{font-size:.57rem}
  .dock-ico svg{width:19px;height:19px}
  /* .header-cta ab chhupta nahi -- "Book labour" button chhote phone
     par bhi dikhna chahiye. Sirf thoda compact ho jaata hai. */
  .brand-sub{display:none}
  .header-cta .btn{padding:.4rem .55rem;font-size:.7rem}
  .cat-tile span{font-size:.58rem}
}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .reveal{opacity:1 !important;transform:none !important}
}


/* ==================== LABOUR CARD PHOTO ==================== */
.trade-photo{position:relative;aspect-ratio:16/10;background:var(--tint);border-bottom:1px solid var(--line-2)}
.trade-photo img{width:100%;height:100%;object-fit:cover;display:block}
.trade-tag{position:absolute;left:.55rem;bottom:.55rem;background:rgba(17,17,17,.86);color:#fff;
  font-weight:800;font-size:.82rem;padding:.24rem .55rem;border-radius:999px;backdrop-filter:blur(2px)}
.trade-tag small{font-weight:600;opacity:.75;font-size:.66rem}

/* week table ka chhota thumbnail */
.t-cell{display:flex;align-items:center;gap:.55rem}
.t-thumb{width:38px;height:38px;border-radius:8px;object-fit:cover;flex:none;border:1px solid var(--line)}

/* ==================== ABOUT PAGE ==================== */
.about-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2rem;align-items:start}
.about-copy h2{margin-bottom:.6rem}
.about-copy p{color:var(--gray);margin-bottom:.75rem;line-height:1.7}
.about-cta{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}

.about-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
.stat-tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1rem .9rem;
  transition:box-shadow .2s ease,transform .2s cubic-bezier(.22,.61,.36,1)}
.stat-tile p{font-size:.78rem;color:var(--gray);margin:.3rem 0 0;line-height:1.5}
.stat-v{font-size:1.55rem;font-weight:800;letter-spacing:.01em;line-height:1}
@media(hover:hover){.stat-tile:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}}

.why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
.why-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1rem;position:relative}
.why-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--brand);font-weight:800;font-size:.82rem;margin-bottom:.6rem}
.why-card h3{font-size:.94rem;margin-bottom:.28rem}
.why-card p{font-size:.82rem;color:var(--gray);margin:0;line-height:1.6}

.about-band{background:#111;color:#fff;border-radius:var(--r);padding:1.6rem 1.5rem;
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.about-band h2{color:#fff;margin:0}
.about-band p{color:rgba(255,255,255,.72);margin:.4rem 0 0;font-size:.88rem;max-width:52ch}
.about-band-btns{display:flex;gap:.5rem;flex-wrap:wrap}
.about-band .btn-outline{border-color:rgba(255,255,255,.35);color:#fff}

@media(max-width:900px){
  .about-split{grid-template-columns:1fr;gap:1.4rem}
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .why-grid{grid-template-columns:1fr}
  .about-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-v{font-size:1.3rem}
  .about-band{padding:1.2rem 1rem;text-align:left}
  .about-band-btns .btn{flex:1;min-width:130px;justify-content:center}
  .trade-photo{aspect-ratio:16/9}
  .t-thumb{width:32px;height:32px}
}