/* ═════════ BANGALORE CAFE — BOLD MODERN REBUILD ═════════ */
:root{
  --maroon:#6e0f24; --maroon-dark:#560a1b; --maroon-deep:#3f0714;
  --cream:#fbeede; --cream-2:#f6e3cf; --orange:#f5a623; --orange-d:#e8951a;
  --green:#3c7d2e; --ink:#2a1410; --muted:#6f5d54; --white:#fff;
  --ff-head:'Archivo Black',sans-serif; --ff-body:'Rubik',sans-serif;
  --shadow:0 16px 40px rgba(63,7,20,.14); --shadow-lg:0 26px 60px rgba(63,7,20,.22);
  --r:22px; --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--ff-body);color:var(--ink);background:var(--cream);overflow-x:hidden;line-height:1.6}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
::selection{background:var(--maroon);color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--cream-2)}
::-webkit-scrollbar-thumb{background:var(--maroon);border-radius:8px}

.container{width:min(1820px,92%);margin-inline:auto}
.w-100{width:100%}
.eyebrow{font-family:var(--ff-body);font-style:italic;font-weight:500;font-size:1.05rem;color:var(--orange-d);margin-bottom:14px}
.eyebrow.center{text-align:center}
.sec-h{font-family:var(--ff-head);font-size:clamp(2rem,4.6vw,3.4rem);color:var(--maroon);line-height:1.05;text-transform:uppercase;letter-spacing:-.5px}
.sec-h.center{text-align:center}

/* Buttons */
.btn-orange,.btn-outline,.btn-text,.btn-wa,.btn-dl{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--ff-head);font-size:.82rem;letter-spacing:.6px;text-transform:uppercase;border-radius:14px;padding:16px 26px;transition:all .35s var(--ease);cursor:pointer;border:2px solid transparent}
.btn-orange{background:var(--orange);color:var(--maroon-deep);box-shadow:0 10px 24px rgba(245,166,35,.4)}
.btn-orange:hover{background:var(--orange-d);transform:translateY(-3px);box-shadow:0 14px 30px rgba(245,166,35,.5)}
.btn-outline{border-color:rgba(255,255,255,.6);color:#fff;background:transparent}
.btn-outline:hover{background:#fff;color:var(--maroon)}
.btn-outline.dark{border-color:var(--maroon);color:var(--maroon)}
.btn-outline.dark:hover{background:var(--maroon);color:#fff}
.btn-text{color:var(--maroon);padding:16px 14px}
.btn-text:hover{color:var(--orange-d)}
.btn-sm{padding:7px 10px;font-size:.76rem}
.btn-wa{background:var(--orange);color:var(--maroon-deep)}
.btn-wa:hover{background:var(--orange-d);transform:translateY(-2px)}
.btn-dl{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn-dl:hover{background:#fff;color:var(--maroon)}

/* Preloader */
.preloader{position:fixed;inset:0;background:var(--maroon-deep);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;z-index:9999;transition:opacity .6s,visibility .6s}
.preloader img{width:170px;filter:brightness(0) invert(1);animation:pulse 1.4s ease-in-out infinite}
.preloader-bar{width:200px;height:4px;background:rgba(255,255,255,.15);border-radius:4px;overflow:hidden;position:relative}
.preloader-bar::after{content:'';position:absolute;left:0;top:0;height:100%;width:40%;background:var(--orange);border-radius:4px;animation:load 1.1s ease-in-out infinite}
.preloader.done{opacity:0;visibility:hidden}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes load{0%{left:-40%}100%{left:110%}}

/* ═════ HEADER ═════ */
.header{position:fixed;top:0;left:0;width:100%;z-index:900;background:linear-gradient(180deg,var(--maroon-deep),var(--maroon));transition:.4s;border-bottom:1px solid rgba(245,166,35,.25)}
.header.scrolled{background:rgba(63,7,20,.97);backdrop-filter:blur(12px);box-shadow:0 8px 30px rgba(0,0,0,.3)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 0}
.brand img{height:46px;filter:brightness(0) invert(1)}
.nav ul{display:flex;gap:4px}
.nav a{display:block;padding:9px 13px;font-family:var(--ff-head);font-size:16px;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.85);border-radius:10px;transition:.3s}
.nav a:hover,.nav a.active{color:#fff;background:rgb(245 166 35 / 91%)}
.header-actions{display:flex;align-items:center;gap:12px}
.burger{display:none;flex-direction:column;gap:5px;padding:8px}
.burger span{width:26px;height:3px;background:#fff;border-radius:3px;transition:.3s}

/* Drawer */
.drawer{position:fixed;top:0;right:-360px;width:340px;max-width:88vw;height:80dvh;background:var(--maroon-deep);z-index:1200;padding:26px;transition:right .5s var(--ease);display:flex;flex-direction:column;gap:24px;overflow-y:auto}
.drawer.open{right:0}
.drawer-head{display:flex;justify-content:space-between;align-items:center}
.drawer-head img{height:46px;filter:brightness(0) invert(1)}
.drawer-close{color:#fff;font-size:1.5rem}
.drawer-nav{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.12)}
.drawer-nav a{display:block;padding:14px 4px;color:rgba(255,255,255,.9);border-bottom:1px solid rgba(255,255,255,.08);font-family:var(--ff-head);font-size:.82rem;letter-spacing:.6px;text-transform:uppercase;transition:.3s}
.drawer-nav a:hover{color:var(--orange);padding-left:12px}
.drawer-btns{display:flex;flex-direction:column;gap:12px;margin-top:auto}
.drawer-overlay{position:fixed;inset:0;background:rgba(20,4,2,.6);backdrop-filter:blur(3px);opacity:0;visibility:hidden;transition:.4s;z-index:1100}
.drawer-overlay.show{opacity:1;visibility:visible}

/* ═════ BANNER ═════ */
.banner{background:radial-gradient(ellipse at 80% 20%,rgba(245,166,35,.12),transparent 55%),linear-gradient(160deg,var(--maroon) 0%,var(--maroon-deep) 100%);padding:150px 0 90px;position:relative;overflow:hidden}
.banner::after{content:'';position:absolute;right:-120px;bottom:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(245,166,35,.1),transparent 70%)}
.banner-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center;position:relative;z-index:2}
.banner-text .eyebrow{color:var(--orange)}
.banner h1{font-family:var(--ff-head);font-size:clamp(2.6rem,6vw,5rem);line-height:.98;color:#fff;text-transform:uppercase;letter-spacing:-1px;margin-bottom:24px}
.banner-lead{color:rgba(255,255,255,.85);font-size:1.08rem;margin-bottom:34px}
.banner-btns{display:flex;gap:16px;flex-wrap:wrap}
/* auto-scroll collage */
.media-collage{position:relative;height:740px;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);}
.collage-track{display:flex;gap:18px;height:100%;width:max-content;animation:collageScroll 26s linear infinite}
.collage-track img{height:100%;width:800px;object-fit:cover;border-radius:16px;flex-shrink:0}
.media-collage:hover .collage-track{animation-play-state:paused}
@keyframes collageScroll{to{transform:translateX(-50%)}}

/* ═════ BRAND STORY ═════ */
.story{padding:30px 0;background:var(--cream)}
.story-top{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:64px}
.story-text .eyebrow{color:var(--maroon)}
.story-text h2{font-family:var(--ff-head);font-size:clamp(2rem,4.4vw,3.2rem);color:var(--maroon);line-height:1.05;text-transform:uppercase;letter-spacing:-.5px;margin-bottom:24px}
.story-text p{color:var(--muted);margin-bottom:16px;font-size:1.02rem}
.story-img img{border-radius:var(--r);box-shadow:var(--shadow-lg);width:100%;height:420px;object-fit:cover}
.story-features{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.feat h4{font-family:var(--ff-head);font-size:1.05rem;color:var(--maroon);text-transform:uppercase;margin-bottom:10px;line-height:1.2}
.feat p{font-size:.9rem;color:var(--muted)}

/* ═════ TODAY'S SPECIAL ═════ */
.special{padding:30px 0;background:var(--cream-2)}
.special .eyebrow{color:var(--maroon)}
.special-sub{color:var(--muted);margin:14px 0 50px;font-size:1.02rem}
.special-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:start}
.special-highlight{background:linear-gradient(160deg,var(--maroon),var(--maroon-deep));border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);position:sticky;top:110px}
.hl-img{height:300px;overflow:hidden;background:#2a0a12}
.hl-img img{width:100%;height:100%;object-fit:cover}
.hl-body{padding:28px 30px 32px;color:#fff}
.hl-badge{display:inline-block;background:var(--orange);color:var(--maroon-deep);font-family:var(--ff-head);font-size:.66rem;letter-spacing:1px;text-transform:uppercase;padding:7px 16px;border-radius:30px;margin-bottom:16px}
.hl-day{color:var(--orange);font-family:var(--ff-head);font-size:.8rem;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:6px}
.hl-body h3{font-family:var(--ff-head);font-size:2.4rem;text-transform:uppercase;line-height:1;margin-bottom:14px}
.hl-desc{color:rgba(255,255,255,.85);margin-bottom:18px}
.hl-note{font-size:.82rem;color:rgba(255,255,255,.6);border-top:1px solid rgba(255,255,255,.15);padding-top:16px;margin-bottom:22px}
.week-list{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px}
.week-item{display:flex;gap:16px;padding:16px;background:#fff;border-radius:16px;border:1px solid rgba(110,15,36,.08);box-shadow:0 8px 22px rgba(63,7,20,.06);transition:.4s var(--ease)}
.week-item:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.week-item.is-today{border:2px solid var(--orange);background:#fffaf2;position:relative}
.week-item.is-today::after{content:'TODAY';position:absolute;top:-11px;right:14px;background:var(--orange);color:var(--maroon-deep);font-family:var(--ff-head);font-size:.6rem;letter-spacing:1px;padding:4px 11px;border-radius:20px}
.wi-img{flex:0 0 64px;width:64px;height:64px;border-radius:12px;overflow:hidden;background:var(--cream-2)}
.wi-img img{width:100%;height:100%;object-fit:cover}
.wi-day{display:block;font-family:var(--ff-head);font-size:.72rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--green);margin-bottom:4px}
.week-item h5{font-family:var(--ff-head);font-size:.92rem;color:var(--maroon);text-transform:uppercase;line-height:1.2;margin-bottom:5px}
.week-item p{font-size:.8rem;color:var(--muted);line-height:1.4}

/* ═════ CATERING & PARTY HALL ═════ */
.catering{padding:30px 0;background:var(--cream)}
.catering-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.cat-img img{border-radius:var(--r);box-shadow:var(--shadow-lg);width:100%;height:480px;object-fit:cover}
.cat-text .eyebrow{color:var(--maroon)}
.cat-text h2{font-family:var(--ff-head);font-size:clamp(1.9rem,4vw,3rem);color:var(--maroon);line-height:1.05;text-transform:uppercase;letter-spacing:-.5px;margin-bottom:22px}
.cat-text>p{color:var(--muted);margin-bottom:24px;font-size:1.02rem}
.cat-tags{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:30px}
.cat-tags li{font-family:var(--ff-head);font-size:.84rem;color:var(--green);text-transform:uppercase;letter-spacing:.4px}
.cat-btns{display:flex;gap:16px;flex-wrap:wrap}

/* ═════ REVIEWS ═════ */
.reviews{padding:30px 0 70px;background:var(--cream-2)}
.rate-row{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin:26px 0 50px}
.rate-num{font-family:var(--ff-head);font-size:2.2rem;color:var(--maroon)}
.rate-stars{color:var(--orange);letter-spacing:3px;font-size:1.2rem}
.rate-link{display:inline-flex;align-items:center;gap:8px;background:var(--maroon);color:#fff;font-family:var(--ff-head);font-size:.74rem;letter-spacing:.6px;text-transform:uppercase;padding:10px 20px;border-radius:30px;transition:.35s}
.rate-link i{color:var(--orange)}
.rate-link:hover{background:var(--orange);color:var(--maroon-deep);transform:translateY(-3px)}
.rate-link:hover i{color:var(--maroon-deep)}
.slider-wrap{position:relative}
.rail{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px 4px 30px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.revi-card{flex:0 0 360px;scroll-snap-align:center;background:#fff;border-radius:var(--r);padding:32px 28px;box-shadow:var(--shadow);border-top:5px solid var(--orange);transition:transform .5s var(--ease),box-shadow .5s,opacity .5s;opacity:.7;transform:scale(.95)}
.revi-card.focused{opacity:1;transform:scale(1.03) translateY(-8px);box-shadow:var(--shadow-lg)}
.revi-card .stars{color:var(--orange);letter-spacing:3px;margin-bottom:14px}
.revi-card>p{font-size:.95rem;color:var(--muted);font-style:italic;min-height:96px;margin-bottom:20px}
.revi-foot{display:flex;align-items:center;gap:12px;border-top:1px dashed rgba(110,15,36,.18);padding-top:18px}
.revi-foot img,.avatar-init{width:50px;height:50px;border-radius:50%;object-fit:cover;border:2px solid var(--orange)}
.avatar-init{flex:0 0 50px;display:grid;place-items:center;font-family:var(--ff-head);color:#fff;background:var(--maroon);font-size:1rem}
.revi-foot h4{font-family:var(--ff-head);font-size:.92rem;color:var(--maroon);text-transform:uppercase}
.revi-foot span{font-size:.74rem;color:var(--muted)}
.rail-btns{display:flex;justify-content:center;gap:12px;margin-top:6px}
.rail-btn{width:50px;height:50px;border-radius:50%;border:2px solid var(--maroon);color:var(--maroon);font-size:1rem;transition:.35s;background:#fff}
.rail-btn:hover{background:var(--maroon);color:#fff;transform:translateY(-3px)}

/* ═════ VISIT / CONTACT ═════ */
.visit{padding:30px 0;background:var(--cream)}
.visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.visit-info .eyebrow{color:var(--green)}
.visit-info h2{font-family:var(--ff-head);font-size:clamp(2rem,4.4vw,3.2rem);color:var(--maroon);line-height:1.05;text-transform:uppercase;letter-spacing:-.5px;margin-bottom:18px}
.visit-lead{color:var(--muted);margin-bottom:34px;font-size:1.02rem}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px 30px;margin-bottom:34px}
.info-block h5{font-family:var(--ff-head);font-size:.82rem;letter-spacing:1px;text-transform:uppercase;color:var(--green);margin-bottom:8px}
.info-block p,.info-block a{font-family:var(--ff-head);font-size:1rem;color:var(--maroon);line-height:1.4}
.info-block a:hover{color:var(--orange-d)}
.visit-btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.map-card{position:relative;display:block;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);height:480px}
.map-card iframe{width:100%;height:100%;border:0;filter:saturate(.85)}
.map-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(110,15,36,.55),rgba(63,7,20,.78));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:30px;transition:.4s}
.map-card:hover .map-overlay{background:linear-gradient(180deg,rgba(110,15,36,.35),rgba(63,7,20,.55))}
.map-overlay small{font-family:var(--ff-body);font-style:italic;color:var(--orange);font-size:1rem;margin-bottom:8px}
.map-overlay b{font-family:var(--ff-head);font-size:clamp(1.6rem,3.5vw,2.6rem);text-transform:uppercase;letter-spacing:-.5px;margin-bottom:12px}
.map-overlay em{font-style:normal;font-size:.9rem;opacity:.85}

/* ═════ FOOTER ═════ */
.footer{background:var(--maroon-deep);color:#fff;position:relative}
.footer::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--orange),var(--maroon),var(--orange))}
.footer-grid{display:grid;grid-template-columns:1.5fr .8fr 1fr 1fr;gap:44px;padding:70px 0 50px}
.f-logo{height:50px;margin-bottom:20px;filter:brightness(0) invert(1)}
.f-col p{font-size:16px;line-height:1.7}
.f-col h4{font-family:var(--ff-head);color:#fff;font-size:20px;letter-spacing:.8px;text-transform:uppercase;margin-bottom:22px;position:relative;padding-bottom:12px}
.f-col h4::after{content:'';position:absolute;left:0;bottom:0;width:40px;height:3px;background:var(--orange)}
.f-social{display:flex;gap:10px;margin-top:22px}
.f-social a{width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;transition:.35s}
.f-social a:hover{background:var(--orange);border-color:var(--orange);color:var(--maroon-deep);transform:translateY(-4px)}
.f-links li{margin-bottom:12px}
.f-links a{font-size:16px;transition:.3s}
.f-links a:hover{color:var(--orange);padding-left:6px}
.f-contact li{display:flex;gap:12px;margin-bottom:16px;font-size:16px}
.f-contact i{color:var(--orange);margin-top:4px}
.f-contact a:hover{color:var(--orange)}
.f-hours li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed rgba(255,255,255,.15);padding-bottom:10px;margin-bottom:10px;font-size:16px}
.f-hours b{color:var(--orange);font-weight:500;white-space:nowrap}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0}
.footer-bottom-inner{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:16px}

/* Floats */
.wa-float{position:fixed;right:22px;bottom:80px;z-index:1500;width:60px;height:60px;border-radius:50%;background:#02f502;color:var(--maroon-deep);display:grid;place-items:center;font-size:1.7rem;box-shadow:0 10px 30px rgba(245,166,35,.5);animation:float 3s ease-in-out infinite;transition:.3s}
.wa-float:hover{background:var(--orange-d);transform:scale(1.1)}
.to-top{position:fixed;right:22px;bottom:22px;z-index:1500;width:50px;height:50px;border-radius:50%;background:var(--orange);color:#fff;font-size:1rem;opacity:0;visibility:hidden;transform:translateY(20px);transition:.4s}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
.to-top:hover{background:var(--orange);color:var(--maroon-deep)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ═════ RESPONSIVE ═════ */
@media(max-width:1199px){
.nav a{padding:9px 10px;font-size:.7rem}
.banner-grid,.story-top,.catering-grid,.visit-grid{gap:40px}
.story-features{grid-template-columns:1fr 1fr;gap:34px}
}
@media(max-width:991px){
.nav,.hide-md{display:none}
.burger{display:flex}
.banner-grid,.story-top,.catering-grid,.visit-grid{grid-template-columns:1fr}
.banner{padding:70px 0 70px}
.banner-media{order:-1}
.media-collage{height:430px}
.special-grid{grid-template-columns:1fr}
.special-highlight{position:static}
.cat-img img,.story-img img,.map-card{height:360px}
.footer-grid{grid-template-columns:1fr;}
}
@media(max-width:767px){
.story-features{grid-template-columns:1fr}
.week-list{grid-template-columns:1fr}
.info-grid{grid-template-columns:1fr}
.collage-track img{width:450px}
}
@media(max-width:575px){
.banner h1{font-size:1.4rem}
.banner-btns{        
  flex-direction: column;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
  gap: 12px;
}
.banner-btns .btn-orange,
.banner-btns .btn-outline{
  width: 100% !important;
  max-width: 100% !important;
  justify-content: center;
  padding: 14px 20px;
  font-size: 0.75rem;
}
}

/* ════ PREVENT HORIZONTAL SCROLL ════ */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
  position: relative;
}

.container {
  max-width: 100%;
}

/* Fix banner grid overflow */
.banner-grid {
  max-width: 100%;
  overflow: hidden;
}

/* Fix collage overflow */
.media-collage {
  max-width: 100%;
  overflow: hidden;
}

.collage-track img {
  max-width: 100%;
}

/* Fix all images */
img {
  max-width: 100%;
  height: auto;
}

/* Fix mobile - ensure grid stacks properly */
@media (max-width: 991px) {
  .banner-grid {
    grid-template-columns: 1fr !important;
  }
  .banner-media,
  .banner-text {
    width: 100% !important;
    max-width: 100% !important;
  }
  .media-collage {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 575px) {
  .banner-btns, .cat-btns, .visit-btns {
        flex-direction: row;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 303px;
        height: auto;
    }
        .banner-lead {
        flex-direction: row;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 303px;
        height: auto;
    }
    h3#hlName {
    font-size: 25px;
}
}