/* =========================================================
   IndiasFlavour — exclusive-css.css
   Stylesheet for the homestyle tiffin & healthy meals landing page
   ========================================================= */

:root{
  --green-dark:   #1f5738;
  --green:        #2c7a4b;
  --green-light:  #e8f4ec;
  --orange:       #f0641f;
  --orange-dark:  #d94f10;
  --cream:        #ffffff;
  --cream-2:      #ffffff;
  --ink:          #22281f;
  --ink-soft:     #5a6357;
  --line:         #ece3d2;
  --white:        #ffffff;
  --gold:         #f5a623;
  --radius:       14px;
  --radius-lg:    22px;
  --shadow:       0 10px 30px rgba(31,87,56,0.08);
  --shadow-sm:    0 4px 14px rgba(31,87,56,0.07);
  --container:    1180px;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: "Poppins", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

html{ overflow-x: hidden; }

img{ max-width: 100%; display: block; }

a{ text-decoration: none; color: inherit; }

ul{ margin: 0; padding: 0; list-style: none; }

.if-container{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 20px 45px;
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--green);
  font-weight: 600;
}

.section-title{
  text-align: center;
  font-size: clamp(24px, 3.2vw, 34px);
  font-weight: 700;
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.section-title .leaf{ font-size: .7em; }

.section-sub{
  text-align: center;
  color: #000000; /*var(--ink-soft)*/
  font-size: 15px;
  margin: 0 0 42px;
}

.if-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}

.if-btn-orange{
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(240,100,31,0.35);
}
.if-btn-orange:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(240,100,31,0.42); }

.if-btn-red{
  background: linear-gradient(180deg, #E01820 0%, #a3121a 100%);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(224,24,32,0.35);
}
.if-btn-red:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(224,24,32,0.42); }

.if-btn-green{
  background: linear-gradient(180deg, var(--green) 0%, var(--green-dark) 100%);
  color: var(--white);
  box-shadow: 0 8px 20px rgba(31,87,56,0.30);
}
.if-btn-green:hover{ transform: translateY(-2px); box-shadow: 0 12px 26px rgba(31,87,56,0.38); }

.if-btn-outline{
  background: var(--white);
  color: var(--green-dark);
  border: 1.5px solid var(--green);
}
.if-btn-outline:hover{ background: var(--green-light); }

.if-btn-block{ width: 100%; }

/* =========================================================
   HEADER  (simplified nav — logo, plain links, green Order Now button;
   the "Authentic Tiffin Operator" badge and 5.0 rating box are kept for
   large desktop screens only, same as before)
   Fonts: Montserrat (display) + Roboto (body), scoped to header/hero only
   ========================================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid #E7E1D8;
}
.if-nav{
  display: flex;
  align-items: center;
  height: 96px;
  gap: 22px;
}
.if-logo{ display: flex; align-items: center; flex: none; }
.if-logo img{ height: 100px; width: auto; display: block; }

/* "Authentic, Healthy Tiffin Operator / Not A Restaurant" badge — large desktop only */
.if-header-badge{
  display: flex;
  align-items: stretch;
  flex: none;
  border: 1.5px solid #241F1A;
  border-radius: 2px;
  overflow: hidden;
}
.if-header-badge .if-badge-info{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 6px 12px;
  background: #ffffff;
}
.if-header-badge .if-badge-info .l1,
.if-header-badge .if-badge-info .l2{
  font-family: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: #241F1A;
  white-space: nowrap;
}
.if-header-badge .if-badge-info .l1 .accent{ color: var(--green-dark); }
.if-header-badge .if-badge-flag{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #E01820;
  color: #ffffff;
  padding: 6px 14px;
  font-family: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 11px;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.if-nav-links{
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  justify-content: center;
}
.if-nav-links a{
  position: relative;
  font-family: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #241F1A;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
  transition: color .15s ease;
  display: inline-block;
}
.if-nav-links a::after{
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 3px;
  height: 2px;
  background: var(--green-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}
.if-nav-links a:hover::after,
.if-nav-links a.is-active::after{ transform: scaleX(1); }
.if-nav-links a:hover{ color: var(--green-dark); }
.if-nav-links a.is-active{ color: var(--green-dark); }

.if-nav-links a.if-nav-order-mobile{ display: none; }

.if-nav-actions{
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
  margin-left: auto;
}

/* 5.0 Google rating box */
.if-nav-rating{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border: 1.5px solid #E7E1D8;
  border-radius: 6px;
  padding: 6px 10px;
  background: #ffffff;
  line-height: 1.2;
}
.if-nav-rating .rating-top{ display: flex; align-items: center; gap: 4px; }
.if-nav-rating .stars{ display: flex; gap: 1px; }
.if-nav-rating .stars svg{ width: 11px; height: 11px; color: #E29900; }
.if-nav-rating .rb-top{
  font-family: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 12px;
  color: #241F1A;
}
.if-nav-rating .rb-bottom{
  font-size: 10px;
  color: #6B6259;
  font-weight: 500;
}

/* hamburger (mobile) */
.if-nav-toggle{
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid #E7E1D8;
  border-radius: 6px;
  flex: none;
}
.if-nav-toggle span{
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: #241F1A;
  transition: transform .2s ease, opacity .2s ease;
}
.if-nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.if-nav-toggle.is-open span:nth-child(2){ opacity: 0; }
.if-nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---- responsive: header ----
   Operator badge: shown on mobile/tablet (hamburger visible, <=992px) and
   on large laptop/desktop screens (>=1821px); hidden in between, where the
   full nav links are shown but the screen isn't large enough for everything
   to sit on one line without crowding.
   Rating pill: hidden only on mobile/tablet (hamburger visible, <=992px) —
   shown on all laptop/desktop widths now that the nav has few links. */
@media (min-width: 993px) and (max-width: 1820px){
  .if-header-badge{ display: none; }
}

@media (max-width: 992px){
  .if-nav-rating{ display: none; }
}

@media (max-width: 1180px){
  .if-nav-links{ gap: 0; }
  .if-nav-links a{ padding: 8px 8px; font-size: 13px; }
}

@media (max-width: 992px){
  .if-nav-links{
    position: fixed;
    top: 96px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 12px 24px 32px;
    transform: translateX(100%);
    transition: transform .25s ease;
    overflow-y: auto;
  }
  .if-nav-links.is-open{ transform: translateX(0); }
  .if-nav-links a{
    padding: 16px 4px;
    border-bottom: 1px solid #E7E1D8;
    font-size: 16px;
    display: block;
  }
  .if-nav-links a::after{ display: none; }
  .if-nav-links a.if-nav-order-mobile{ display: flex; margin-top: 20px; width: 100%; }

  .if-nav-actions > .if-btn{ display: none; }
  .if-nav-toggle{ display: flex; }
}

@media (max-width: 700px){
  .if-nav{ height: 72px; }
  .if-nav-links{ top: 72px; }
  .if-logo img{ height: 52px; }
}

@media (max-width: 480px){
  .if-logo img{ height: 44px; }

  /* "Authentic Tiffin Operator" badge is already shown at this width (see
     the 993-1820px hide rule above) — just tighten it up for narrow phones */
  .if-header-badge{
    border-width: 1px;
  }
  .if-header-badge .if-badge-info{ padding: 4px 7px; }
  .if-header-badge .if-badge-info .l1,
  .if-header-badge .if-badge-info .l2{ font-size: 8px; }
  .if-header-badge .if-badge-flag{ padding: 4px 8px; font-size: 8px; }
  .if-nav{ gap: 10px; }
}

/* =========================================================
   HERO — "Why Choose India's Flavour?" layout: photo left (on a soft
   full-bleed gradient wash), heading + 6-row icon/title/description
   list right.
   ========================================================= */
.hero{
  position: relative;
  /* full-bleed wash: runs edge-to-edge of the section, fading out by the
     horizontal center so the text column sits on plain white */
  /*background: linear-gradient(to right, #fbead9 0%, #f7dfc4 22%, rgba(247,223,196,0) 50%), #ffffff;*/
  padding: 5px 0 5px;
  overflow: hidden;
}
/* mobile/stacked layout: the photo sits above the text, so the wash runs
   top-to-bottom instead of left-to-right — subtle, fading out before the list */
@media (max-width: 899px){
  .hero{
    background: linear-gradient(to bottom, #fbead9 0%, #f7dfc4 16%, rgba(247,223,196,0) 42%), #ffffff;
  }
}
.hero-inner{
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
}
/* the photo column scales through the tablet/small-laptop band so the text
   column always keeps enough room for a clean 2-line (title + line) fit;
   it reaches its full-size cap at 1180px+ */
@media (min-width: 900px) and (max-width: 1023px){
  .hero-inner{ grid-template-columns: minmax(0, 260px) 1fr; gap: 32px; }
}
@media (min-width: 1024px) and (max-width: 1179px){
  .hero-inner{ grid-template-columns: minmax(0, 380px) 1fr; gap: 36px; }
}
@media (min-width: 1180px){
  .hero-inner{ grid-template-columns: minmax(0, 500px) 1fr; gap: 40px; }
}
@media (max-width: 899px){
  .hero-media{ order: -1; }
}

/* ---- left: photo, sitting on the section-wide gradient above ----
   On desktop/tablet the photo is sized bigger than its grid column and
   allowed to visually bleed into the gap (and a little under the icon
   column) — it's absolutely positioned so this never affects the text
   column's own width/line-fit math, and it paints behind the text
   (z-index) since .hero-content sits above it. */
.hero-media{
  position: relative;
  min-width: 0;
}
@media (min-width: 900px){
  .hero-media{ z-index: 0; }
}
/* min-height matches the img's rendered height at each breakpoint below,
   so the bigger photo has room to sit without the section clipping it */
@media (min-width: 900px) and (max-width: 1023px){
  .hero-media{ min-height: 440px; }
}
@media (min-width: 1024px) and (max-width: 1179px){
  .hero-media{ min-height: 620px; }
}
@media (min-width: 1180px){
  .hero-media{ min-height: 775px; }
}
.hero-media-glow{
  width: 100%;
  max-width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 900px){
  .hero-media-glow{
    position: absolute;
    inset: 0;
    max-width: none;
    pointer-events: none;
  }
}
.hero-media-glow img{
  position: relative;
  z-index: 1;
  width: 95%;
  height: auto;
  display: block;
  flex-shrink: 0;
}
@media (min-width: 900px) and (max-width: 1023px){
  .hero-media-glow img{ width: 165%; max-width: 460px; }
}
@media (min-width: 1024px) and (max-width: 1179px){
  .hero-media-glow img{ width: 160%; max-width: 615px; }
}
@media (min-width: 1180px){
  .hero-media-glow img{ width: 155%; max-width: 800px; }
}

/* =====================================================================
   MOBILE POSTER HERO BANNER — ADD-ON CSS ONLY.

   Your existing .hero / .hero-inner / .hero-media / .hero-content /
   .hero-why-* rules in exclusive-css.css are NOT touched or duplicated
   here — this block only ADDS the new mobile poster banner and hides
   the old photo + heading on mobile. Paste this whole block anywhere
   in exclusive-css.css (e.g. right after your existing hero rules).

   ONE-TIME SETUP — add the Caveat font (used for the handwritten quote):
   In your <head>, REPLACE your existing Google Fonts <link> with this
   single line (note it needs rel="stylesheet" — a link tag with no rel
   attribute is just ignored by the browser, so the font silently never
   loads):
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Montserrat:wght@500;600;700;800&family=Roboto:wght@400;500;700&family=Caveat:wght@600;700&display=swap" rel="stylesheet">
   ===================================================================== */

.mp-banner{ display: none; }

@media (max-width: 899px){
  /* Removes the peach/cream gradient behind the hero on mobile only —
     desktop/tablet keep the gradient exactly as before. Without this,
     that gradient still shows as a strip of color above/around the
     full-bleed poster photo. */
  .hero{ background: #ffffff; }

  /* Hide the old plain photo + "WHY CHOOSE INDIA'S FLAVOUR?" heading on
     mobile only — desktop/tablet keep rendering them exactly as before. */
  .hero-media, .hero-why-eyebrow, .hero-why-title{ display: none; }

  .mp-banner{
    display: block;
    text-align: center;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--line);
  }

  /* Full-bleed edge-to-edge on mobile: breaks out of the section's normal
     side padding using the 100vw/-50vw technique, so the photo spans the
     entire screen width like a background rather than sitting inside the
     page's usual content margins. No rounded corners/shadow, since an
     edge-to-edge background photo shouldn't look like a framed card. */
  .mp-hero-photo{
    position: relative;
    width: 100vw;
    /* calc(50% - 50vw) is the correct full-bleed offset regardless of the
       parent's own side padding — a plain "margin-left:50%; translateX(-50%)"
       pair looks equivalent but isn't: margin-left:50% is 50% of the PARENT's
       (padded) width, not the viewport, so it under-shoots and drags
       everything to the right, clipping content off-screen. */
    margin-left: calc(50% - 50vw);
    aspect-ratio: 3 / 4;
    margin-bottom: 22px;
  }
  .mp-photo-bg{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* Fills the frame completely (crops to fit) — this is the option that
       matches "fit the photograph to fit the background completely".
       If you'd rather show the whole photo uncropped (letterboxed) instead,
       swap this to: object-fit: contain; background: transparent; */
    object-fit: cover;
    object-position: center 12%;
  }
  /* Wash removed per feedback — kept as an empty hook in case you want a
     light fade back later (just restore the gradient background below). */
  .mp-photo-scrim{
    position: absolute;
    inset: 0;
    background: none;
    pointer-events: none;
  }
  .mp-photo-overlay{
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 20px 18px;
    text-align: left;
  }
  .mp-overlay-copy{ max-width: 58%; }
  .mp-headline{
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -.01em;
    margin: 0 0 8px;
  }
  .mp-headline .mp-h-green,
  .mp-headline .mp-h-orange{
    display: block;
    font-size: clamp(18px, 6vw, 24px);
  }
  .mp-headline .mp-h-orange{ color: var(--orange); }
  .mp-headline .mp-h-green{ color: var(--green-dark); }
  .mp-heart{ width: .78em; height: .78em; flex: none; vertical-align: -0.05em; }

  .mp-sub{
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
    line-height: 1.4;
  }

  .mp-overlay-quote{
    max-width: 36%;
    text-align: right;
    font-family: 'Caveat', cursive;
    font-size: 18px;
    font-weight: 700;
    color: var(--green-dark);
    line-height: 1.18;
    flex: none;
    /* pulled up so it sits clear of the photo, rather than over a face */
    margin-top: -12px;
  }
  .mp-overlay-quote span{
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #000000; /*var(--ink-soft);*/
    margin-top: 3px;
  }

  /* .mp-usps / .mp-usp-item / .mp-icon — superseded by .usp-row / .usp-item / .usp-icon below,
     kept here commented as a backup of the original SVG-icon version.
  .mp-usps{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 26px;
    text-align: left;
  }
  .mp-usp-item{ padding: 14px 12px; }
  .mp-usp-item:nth-child(1){ border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .mp-usp-item:nth-child(2){ border-bottom: 1px solid var(--line); }
  .mp-usp-item:nth-child(3){ border-right: 1px solid var(--line); }
  .mp-icon{
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--green-light);
    color: var(--green-dark);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
  }
  .mp-icon svg{ width: 20px; height: 20px; }
  .mp-usp-item h4{ font-size: 13.5px; font-weight: 700; margin: 0 0 3px; color: #241F1A; }
  .mp-usp-item p{ font-size: 11.5px; color: var(--ink-soft); margin: 0; line-height: 1.4; }
  */

  /* ---- Get Our App usp icons row (hero) — real 75px image icons, no background ---- */
  .usp-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    margin-bottom: 26px;
  }
  .usp-item{
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 8px;
    padding: 18px 12px;
  }
  .usp-item.usp-1{ border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .usp-item.usp-2{ border-bottom: 1px solid var(--line); }
  .usp-item.usp-3{ border-right: 1px solid var(--line); }
  .usp-icon{ display: flex; align-items: center; justify-content: center; }
  .usp-icon img{ width: 75px; height: 75px; object-fit: contain; display: block; }
  .usp-item h4{ font-size: 13.5px; font-weight: 700; margin: 0 0 3px; color: #241F1A; }
  .usp-item p{ font-size: 11.5px; color: var(--ink-soft); margin: 0; line-height: 1.4; }

  .mp-cta{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, var(--orange) 0%, var(--orange-dark) 100%);
    color: var(--white);
    font-weight: 700;
    font-size: 14.5px;
    padding: 15px 30px;
    border-radius: 30px;
    box-shadow: 0 8px 20px rgba(240,100,31,0.35);
    margin-bottom: 20px;
  }
  .mp-cta svg{ width: 18px; height: 18px; }

@keyframes mp-cta-pulse {
  0%, 100% {
    box-shadow: 0 8px 20px rgba(240,100,31,0.35);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 8px 28px rgba(240,100,31,0.6), 0 0 0 7px rgba(240,100,31,0.15);
    transform: scale(1.03);
  }
}

.mp-cta{
  animation: mp-cta-pulse 1.8s ease-in-out infinite;
}

  /*.mp-strip{*/
  /*  display: flex;*/
  /*  flex-wrap: wrap;*/
  /*  align-items: center;*/
  /*  justify-content: center;*/
  /*  gap: 8px 18px;*/
  /*}*/
  /*.mp-strip span{*/
  /*  display: inline-flex;*/
  /*  align-items: center;*/
  /*  gap: 6px;*/
  /*  font-size: 11.5px;*/
  /*  font-weight: 700;*/
  /*  color: var(--green-dark);*/
  /*  white-space: nowrap;*/
  /*}*/
  /*.mp-strip svg{ width: 14px; height: 14px; flex: none; }*/
}

.benefit-strip{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
}
.benefit-item{
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.benefit-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.benefit-icon img{
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
}
.benefit-item span{
  font-size: 11.5px;
  font-weight: 700;
  color: var(--green-dark);
  white-space: nowrap;
}

@media (max-width: 360px){
  .usp-item{ padding: 14px 8px; gap: 6px; }
  .usp-icon img{ width: 60px; height: 60px; }
  .usp-item h4{ font-size: 12.5px; }
  .usp-item p{ font-size: 11px; }
  /*.mp-strip{ gap: 6px 12px; }*/
    .benefit-strip{ gap: 8px 14px; }
  .benefit-icon img{ width: 26px; height: 26px; }
}

/* ---- right: heading + 6-row USP list ---- */
.hero-content{ max-width: 560px; min-width: 0; position: relative; z-index: 1; }
.hero-why-eyebrow{
  font-family: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  font-weight: 800;
  font-size: 25px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #241F1A;
  margin: 0 0 2px;
}
.hero-why-title{
  font-family: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  font-size: clamp(30px, 3.6vw, 42px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.15;
  margin: 0 0 10px;
}
.hero-why-title .hl-green{ color: var(--green-dark); }
.hero-why-title .hl-orange{ color: var(--orange); }
.hero-why-leaf{ margin: 0 0 22px; line-height: 0; }
.hero-why-leaf svg{ width: 26px; height: 26px; }

.hero-why-list{ display: flex; flex-direction: column; }
.hero-why-item{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.hero-why-item:last-child{ border-bottom: none; padding-bottom: 0; }
.hero-why-item:first-child{ padding-top: 0; }
.hero-why-item .icon-circ{
  width: 44px; height: 44px;
  border-radius: 50%;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-light);
  color: var(--green-dark);
}
/* swap the inline <svg> for an <img src="..." width="22" height="22" alt="">
   inside .icon-circ and it sizes/centers identically */
.hero-why-item .icon-circ img{
  width: 22px; height: 22px; object-fit: contain; display: block;
}
.hero-why-item .icon-circ svg{ width: 22px; height: 22px; }
.hero-why-text{ min-width: 0; flex: 1; }
.hero-why-text h3{
  font-family: 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #241F1A;
  margin: 0 0 3px;
}
.hero-why-text p{
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.4;
  font-weight: 400;
}

/* Desktop + tablet (down to the single-column mobile breakpoint below):
   exactly two lines per item — bold title, then the plain-text line. */
@media (min-width: 900px){
  .hero-why-text h3,
  .hero-why-text p{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 899px){
  /* mobile: let both lines wrap naturally, however many lines they need */
  .hero-why-text h3,
  .hero-why-text p{ white-space: normal; }
}

@media (max-width: 480px){
  .hero{ padding: 0px 0 44px; }
  .hero-media-glow{ max-width: 340px; }
  .hero-why-item{ gap: 12px; }
  .hero-why-item .icon-circ{ width: 40px; height: 40px; }
  .hero-why-text h3{ font-size: 15px; }
  .hero-why-text p{ font-size: 13.5px; }
}

/* =========================================================
   DELIVERY ROUTE (dotted line + bike icon, below hero)
   Desktop/tablet: each location sits directly on the line.
   Mobile (<=700px): line + bike stay, locations move into a list below.
   ========================================================= */
.delivery-route{
  padding: 5px 0 21px;
}

.route-line{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
  margin-top: 44px;
}
.route-line::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 2.5px dashed var(--line);
  transform: translateY(-50%);
  z-index: 1;
}

.route-stop{
  position: relative;
  flex: 1;
  height: 100%;
}
.route-dot{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #0B7A34;
  border: 2.5px solid #ffffff;
  box-shadow: 0 0 0 1.5px var(--line);
  z-index: 2;
}
.route-label{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 98px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
  color: #241F1A;
}
.stop-up .route-label{ bottom: calc(50% + 16px); }
.stop-down .route-label{ top: calc(50% + 16px); }

/* static bike badge. Sits in its own reserved slot in the middle of the row
   (between the 5th and 6th stop) so it never overlaps a location label —
   swap the inline <svg> for an <img src="..." width="26" height="26" alt="">
   and it will size/center the same way. */
.route-bike{
  position: relative;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  margin: 0 10px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--orange);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  z-index: 3;
}

.route-list-mobile{ display: none; }

@media (max-width: 1080px){
  .route-label{ width: 82px; font-size: 10px; }
}

@media (max-width: 860px){
  .route-label{ width: 68px; font-size: 9px; }
  .route-bike{ width: 42px; height: 42px; margin: 0 5px; }
  .route-bike svg{ width: 20px; height: 20px; }
}

@media (max-width: 700px){
  .route-line{ height: 64px; margin-top: 30px; }
  .route-stop{ display: none; }
  .route-bike{ width: 44px; height: 44px; }
  .route-bike svg{ width: 21px; height: 21px; }

  .route-list-mobile{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 12px;
    margin-top: 26px;
  }
  .route-list-mobile li{
    padding: 8px 14px;
    border: 1px solid var(--line);
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    background: #ffffff;
  }
}

/* =========================================================
   WHY US STRIP (below hero) — compact row w/ dividers
   Mobile (<700px): stacks into a vertical list, horizontal dividers.
   Tablet (700–991px): 2x2 grid, cross dividers between the 4 cells.
   Desktop (>=992px): one row, thin vertical dividers between items.
   ========================================================= */
.why-strip{
  padding: 34px 0 46px;
}
.why-row{
  display: flex;
  flex-direction: column;
}
.why-row-item{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
}
.why-row-item:last-child{ border-bottom: none; }

/* ---- mobile + tablet: 2x2 grid, icon-above-text centered (matches the other icon rows on the page) ---- */
@media (max-width: 991px){
  .why-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .why-row-item{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 18px 20px;
    border-bottom: none;
  }
  .why-row-item.why-1{ border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .why-row-item.why-2{ border-bottom: 1px solid var(--line); }
  .why-row-item.why-3{ border-right: 1px solid var(--line); }
}

/* narrowest phones: tighten spacing and shrink the icon a bit further */
@media (max-width: 420px){
  .why-row-item{
    gap: 8px;
    padding: 16px 10px;
  }
  .why-row-item .icon-badge img{ width: 46px; height: 46px; }
  .why-row-item .why-text h3{ font-size: 13px; }
  .why-row-item .why-text p{ font-size: 11.5px; }
}

/* ---- desktop: single row, vertical dividers ---- */
@media (min-width: 992px){
  .why-row{ flex-direction: row; align-items: stretch; }
  .why-row-item{
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 26px;
    border-bottom: none;
  }
  .why-row-item + .why-row-item{ border-left: 1px solid var(--line); }
}
.why-row-item .icon-badge{
  flex: none;
  display: flex; align-items: center; justify-content: center;
}
/* swap the <img> for another image and it sizes/centers identically */
.why-row-item .icon-badge img{
  width: 60px;
  height: 60px;
  object-fit: contain;
  display: block;
}
.why-row-item .why-text{ min-width: 0; }
.why-row-item .why-text h3{
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: #241F1A;
  margin: 0 0 4px;
}
.why-row-item .why-text h3 .accent{ color: var(--orange); }
.why-row-item .why-text p{
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.45;
}


/* =========================================================
   TESTIMONIALS
   ========================================================= */
.testimonials{ padding: 50px 0 60px; }

.testi-layout{
  display: grid;
  grid-template-columns: 1fr 210px;
  gap: 22px;
  align-items: stretch;
}

.testi-track{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.testi-card{
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.testi-card .g-row{ display: flex; align-items: center; gap: 6px; }
.testi-card .g-row svg{ width: 16px; height: 16px; }
.testi-card .stars{ color: var(--gold); font-size: 13px; letter-spacing: 1px; }
.testi-card h4{ font-size: 14.5px; margin: 4px 0 0; }
.testi-card p{ font-size: 13px; color: var(--ink-soft); margin: 0; flex-grow: 1; }
.testi-card .author{ font-size: 12.5px; font-weight: 600; color: var(--ink); }

.testi-dots{ display: flex; justify-content: center; gap: 6px; margin-top: 20px; }
.testi-dots span{ width: 7px; height: 7px; border-radius: 50%; background: #d8cfba; }
.testi-dots span.active{ background: var(--green); }

.testi-side{
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px;
  text-align: center;
}
.testi-side .stars-big{ color: var(--gold); font-size: 20px; letter-spacing: 2px; }
.testi-side .g-label{ font-weight: 700; font-size: 15px; display:flex; align-items:center; gap:6px; }
.testi-side .g-label svg{ width: 20px; height: 20px; }
.testi-side .g-sub{ font-size: 11px; color: var(--ink-soft); }
.testi-side .pill{
  background: var(--green-dark);
  color: var(--white);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 20px;
}

/* =========================================================
   TIFFIN TYPES
   ========================================================= */
.tiffin-types{ padding: -1px 0 60px; }

.tiffin-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tiffin-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 24px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.tiffin-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow); }

/* highlighted price badge, pinned to the top-right corner of the card.
   Colour is set per card via a modifier class (badge-blue / badge-green / badge-orange). */
.tf-price-badge{
  position: absolute;
  top: -14px;
  right: 22px;
  color: var(--white);
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 15px;
  border-radius: 20px;
  white-space: nowrap;
}
.tf-price-badge.badge-blue{
  background: linear-gradient(180deg, #2478d6 0%, #14559e 100%);
  box-shadow: 0 6px 16px rgba(20,85,158,0.35);
}
.tf-price-badge.badge-green{
  background: linear-gradient(180deg, #0B7A34 0%, #075C27 100%);
  box-shadow: 0 6px 16px rgba(11,122,52,0.35);
}
.tf-price-badge.badge-orange{
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-dark) 100%);
  box-shadow: 0 6px 16px rgba(240,100,31,0.35);
}

/* icon + title on one line. Swap the inline <svg> inside .tf-icon-badge for an
   <img src="..." width="24" height="24" alt="..."> and it will size/center the same way. */
.tf-header{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.tiffin-card .tf-icon-badge{
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tiffin-card .tf-icon-badge img{
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}
.tiffin-card:nth-child(1) .tf-icon-badge{ background: #fff1e8; color: var(--orange); }
.tiffin-card:nth-child(2) .tf-icon-badge{ background: var(--green-light); color: var(--green-dark); }
.tiffin-card:nth-child(3) .tf-icon-badge{ background: #fef3d6; color: #b9860a; }

.tf-title{
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
}

/* spec rows: cleaner label/value grid instead of a bulleted list */
.tf-specs{
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  border-top: 1px solid var(--line);
}
.tf-spec-row{
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
}
.tf-spec-label{
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--green-dark);
  padding-top: 1px;
}
.tf-spec-value{
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* pin the Order Now button to the same position in every card, regardless of
   how many spec rows a card has (cards stretch to equal height in the grid/scroller) */
.tiffin-card > .if-btn{ margin-top: auto; }

@media (max-width: 420px){
  .tf-spec-row{ grid-template-columns: 1fr; gap: 3px; padding: 10px 0; }
}

/* =========================================================
   WEEKLY MENU
   ========================================================= */
.weekly-menu{ padding: 20px 0 60px; }

.week-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr) 1.15fr;
  gap: 16px;
}

.day-card{
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 14px;
  text-align: left;
}
.day-card .day-top{ display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.day-card .day-photo{
  width: 34px; height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.day-card .day-name{ font-weight: 700; font-size: 13.5px; color: var(--orange); }
.day-card ul{ display: flex; flex-direction: column; gap: 6px; }
.day-card li{ font-size: 12px; color: var(--ink-soft); padding-left: 12px; position: relative; }
.day-card li::before{ content: "•"; position: absolute; left: 0; color: var(--green); }

.veg-card{
  background: var(--green-dark);
  color: var(--white);
  border-radius: var(--radius);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
}
.veg-card .leaf-ic{ font-size: 26px; }
.veg-card p{ font-size: 13px; font-weight: 600; margin: 0; }
.veg-card .if-btn{ padding: 10px 22px; font-size: 13px; }

/* =========================================================
   WHY / CHECKLIST + IMAGE
   ========================================================= */
.why-block{ padding: 10px 0 60px; }

.why-grid{
  display: grid;
  grid-template-columns: 1fr 1.05fr 1fr;
  gap: 26px;
  align-items: center;
}

.why-col{ display: flex; flex-direction: column; gap: 22px; }
.why-item{ display: flex; align-items: flex-start; gap: 12px; }
.why-item .check{
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}
.why-item h4{ font-size: 14.5px; margin: 0 0 4px; }
.why-item p{ font-size: 12.5px; color: var(--ink-soft); margin: 0; }

.why-media{ position: relative; }
.why-media img{
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: 100%;
  aspect-ratio: 3/3.6;
  object-fit: cover;
}
.why-media .seal{
  position: absolute;
  bottom: -16px;
  right: -10px;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  box-shadow: var(--shadow-sm);
  border: 3px dashed rgba(255,255,255,0.6);
}
.why-media .bag-float{
  position: absolute;
  top: 14px;
  right: -18px;
  width: 92px;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,0.18));
}

/* =========================================================
   WHY CHOOSE — 6-item icon grid, no dividers, generous spacing.
   Desktop (>=992px): 3 columns x 2 rows.
   Tablet (620-991px): 2 columns x 3 rows.
   Mobile (<620px): 1 column x 6 rows.
   ========================================================= */
.why-block-v2{ padding: 1px 0 60px; }

.wg2-grid{
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 34px;
}
@media (min-width: 620px){
  .wg2-grid{ grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 38px; }
}
@media (min-width: 992px){
  .wg2-grid{ grid-template-columns: 1fr 1fr 1fr; column-gap: 44px; row-gap: 42px; }
}

.wg2-item{
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.wg2-icon{
  width: 58px; height: 58px;
  border-radius: 50%;
  flex: none;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
}
.wg2-icon svg{ width: 26px; height: 26px; }
/* to use a PNG icon instead, replace the <svg>...</svg> inside .wg2-icon with:
   <img src="your-icon.png" width="26" height="26" alt=""> — it sizes/centers
   identically. The circle's background color is set per item below. */
.wg2-icon img{ width: 26px; height: 26px; object-fit: contain; display: block; }

.wg2-item.wg2-1 .wg2-icon{ background: var(--orange); }
.wg2-item.wg2-2 .wg2-icon{ background: #2fa84f; }
.wg2-item.wg2-3 .wg2-icon{ background: #2f80ed; }
.wg2-item.wg2-4 .wg2-icon{ background: #e84d8a; }
.wg2-item.wg2-5 .wg2-icon{ background: #8b5cf6; }
.wg2-item.wg2-6 .wg2-icon{ background: #14b8a6; }

.wg2-text{ min-width: 0; padding-top: 4px; }
.wg2-text h4{
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: #241F1A;
}
.wg2-text p{
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (max-width: 480px){
  .why-block-v2{ padding: 44px 0 48px; }
  .wg2-icon{ width: 52px; height: 52px; }
  .wg2-icon svg{ width: 23px; height: 23px; }
  .wg2-text h4{ font-size: 15px; }
}

/* =========================================================
   MORE REASONS
   ========================================================= */
.reasons{ padding: 10px 0 55px; }
.reasons-title{
  text-align: center;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  margin: 0 0 34px;
  color: var(--green-dark);
}
.reasons-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}
.reason-item{
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 14px;
  text-align: center;
}
.reason-item .icon-circ{
  width: 46px; height: 46px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--green-light);
  color: var(--green-dark);
}
.reason-item:nth-child(3) .icon-circ{ background: #fff1e8; color: var(--orange); }
.reason-item:nth-child(5) .icon-circ{ background: #fef3d6; color: #b9860a; }
.reason-item h4{ font-size: 13.5px; margin: 0; }

/* =========================================================
   HOW IT WORKS
   ========================================================= 
.how-it-works{ padding: 10px 0 60px; }
.steps-row{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  align-items: start;
  position: relative;
}
.step{ text-align: center; padding: 0 8px; position: relative; }
.step .step-circ{
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--cream-2);
  border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 14px;
  font-size: 26px;
  position: relative;
  z-index: 2;
}
.step .step-num{
  position: absolute;
  top: -6px;
  right: 6px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.step h4{ font-size: 14px; margin: 0 0 4px; }
.step p{ font-size: 12px; color: var(--ink-soft); margin: 0; }
.step-arrow{
  position: absolute;
  top: 34px;
  right: -14%;
  font-size: 20px;
  color: var(--line);
  z-index: 1;
}*/

/* =========================================================
   HOW IT WORKS v2
   Desktop (>=992px): single row, 1 x 5, with connector arrows.
   Tablet  (620-991px): 3 on top row, 2 on second row, both centered,
                         arrows only between items in the same row.
   Mobile  (<620px): 2 top, 2 middle, 1 bottom, all rows centered.
   Icons are placeholder "image" glyphs — swap comment sits right
   above each icon telling you exactly how to drop your own PNG in.
   ========================================================= */
.how-it-works-v2{ padding: 5px 0 60px; }

.hiw-step{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 178px;
  flex: none;
}
.hiw-icon-wrap{
  position: relative;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--line);
  box-shadow: 0 6px 16px rgba(34,40,31,0.06);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.hiw-icon-wrap svg{ width: 38px; height: 38px; }
/* To use a real PNG icon instead, replace the <svg>...</svg> inside
   .hiw-icon-wrap with:
   <img src="images/how-it-works/step1-choose-plan.png" width="40" height="40" alt="Choose Your Plan">
   It will size and center identically to the placeholder glyph. */
.hiw-icon-wrap img{ object-fit: contain; display: block; }
/*width: 40px; height: 40px;*/

.hiw-num{
  position: absolute;
  top: -4px;
  right: -2px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid var(--white);
  box-shadow: 0 2px 6px rgba(217,79,16,0.35);
  z-index: 2;
}

.hiw-step h4{
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 5px;
  color: #241F1A;
}
.hiw-step p{
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  max-width: 168px;
}

.hiw-arrow{
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 46px;
  width: 46px;
}
.hiw-arrow svg{ display: block; width: 100%; height: auto; }

/* ---------- Desktop: 1 x 5 ---------- */
.hiw-row-desktop{
  display: none;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}
@media (min-width: 992px){
  .hiw-row-desktop{ display: flex; }
  .hiw-rows-tablet, .hiw-rows-mobile{ display: none !important; }
  /* Steps flex to fit the row instead of a fixed width, so the row
     never overflows on narrower desktop widths (992-1179px); the
     circle stays full size and only the text column narrows. */
  .hiw-row-desktop .hiw-step{ flex: 1 1 0; min-width: 0; max-width: 210px; width: auto; }
  .hiw-row-desktop .hiw-step p{ max-width: 100%; }
  .hiw-row-desktop .hiw-arrow{ flex: 0 1 46px; min-width: 22px; margin-top: 46px; }
}

/* ---------- Tablet: 3 top / 2 below, centered ---------- */
.hiw-rows-tablet{ display: none; }
@media (min-width: 620px) and (max-width: 991px){
  .hiw-rows-tablet{ display: block; }
  .hiw-rows-tablet .hiw-row{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
  }
  .hiw-rows-tablet .hiw-row + .hiw-row{ margin-top: 40px; }
  .hiw-rows-tablet .hiw-icon-wrap{ width: 92px; height: 92px; }
  .hiw-rows-tablet .hiw-icon-wrap svg{ width: 34px; height: 34px; }
  .hiw-rows-tablet .hiw-step{ width: 156px; }
  .hiw-rows-tablet .hiw-arrow{ width: 38px; margin-top: 42px; }
}

/* ---------- Mobile: 2 top / 2 middle / 1 bottom, centered ---------- */
.hiw-rows-mobile{ display: none; }
@media (max-width: 619px){
  .hiw-rows-mobile{ display: block; }
  .hiw-rows-mobile .hiw-row{
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
  }
  .hiw-rows-mobile .hiw-row + .hiw-row{ margin-top: 32px; }
  .hiw-rows-mobile .hiw-icon-wrap{ width: 78px; height: 78px; }
  .hiw-rows-mobile .hiw-icon-wrap svg{ width: 28px; height: 28px; }
  .hiw-rows-mobile .hiw-num{ width: 22px; height: 22px; font-size: 11px; }
  .hiw-rows-mobile .hiw-step{ width: 132px; }
  .hiw-rows-mobile .hiw-step h4{ font-size: 13.5px; }
  .hiw-rows-mobile .hiw-step p{ font-size: 11.5px; max-width: 122px; }
  .hiw-rows-mobile .hiw-arrow{ width: 26px; margin-top: 33px; }
}
@media (max-width: 359px){
  .hiw-rows-mobile .hiw-step{ width: 116px; }
  .hiw-rows-mobile .hiw-step p{ max-width: 108px; }
  .hiw-rows-mobile .hiw-arrow{ width: 20px; }
}


.how-cta-wrap{
  text-align: center;
  margin-top: 44px;
}
.how-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-dark) 100%);
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
  padding: 16px 34px;
  border-radius: 30px;
  box-shadow: 0 8px 20px rgba(240,100,31,0.35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.how-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(240,100,31,0.42);
}
.how-cta svg{ width: 18px; height: 18px; }

@media (max-width: 480px){
  .how-cta{ padding: 14px 26px; font-size: 14px; }
}
/* =========================================================
   CTA BANNER
   ========================================================= 
.cta-banner{
  background: linear-gradient(120deg, var(--green-dark), #144028);
  color: var(--white);
  padding: 44px 0;
  text-align: center;
}
.cta-banner h2{ font-size: clamp(20px, 3vw, 28px); margin: 0 0 18px; font-weight: 700; }
.cta-banner .if-btn-orange{ margin: 0 auto; }*/

/* =========================================================
   CTA + USP STRIP
   Desktop (>=992px): exact-replica layout — banner row with
     leaf accents + heading + button, USP row single line of 5
     with vertical dividers.
   Tablet/Mobile (<992px): USP row becomes 3 on top, 2 below,
     both centered, divider only between items in the same row.
   Colors reversed vs. the reference: orange banner bg, green button.
   ========================================================= */
.cus-section{ }

.cus-banner{
  background: var(--orange-dark);
  position: relative;
  overflow: hidden;
  padding: 30px 0;
}
.cus-banner-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: relative;
  z-index: 2;
}
.cus-leaf{
  flex: none;
  width: 46px; height: 46px;
  opacity: 0.85;
}
.cus-leaf svg{ width: 100%; height: 100%; display: block; }
.cus-leaf.cus-leaf-right{ display: block; }

.cus-text{ flex: 1 1 auto; min-width: 0; }
.cus-text h3{
  margin: 0 0 4px;
  color: var(--white);
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 700;
  line-height: 1.3;
}
.cus-text p{
  margin: 0;
  color: rgba(255,255,255,0.88);
  font-size: 14.5px;
  font-weight: 500;
}

.cus-btn{
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--green);
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(0,0,0,0.18);
  transition: background 0.15s ease, transform 0.15s ease;
}
.cus-btn:hover{ background: var(--green-dark); transform: translateY(-1px); }
.cus-btn svg{ width: 18px; height: 18px; flex: none; }

/* ---------------- USP row ---------------- */
.cus-usp-wrap{
  background: var(--white);
  padding: 26px 0 30px;
}
.cus-usp-row{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.cus-usp-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 26px;
  flex: none;
}
.cus-usp-item + .cus-usp-item{
  border-left: 1px solid var(--line);
}
.cus-usp-icon{
  flex: none;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
}
/* To use your own icon image instead, replace the <svg>...</svg> inside
   .cus-usp-icon with: <img src="your-icon.png" width="36" height="36" alt=""> */
.cus-usp-icon svg{ width: 100%; height: 100%; display: block; }
.cus-usp-icon img{ width: 36px; height: 36px; object-fit: contain; display: block; }

.cus-usp-text h4{
  margin: 0 0 2px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--green-dark);
  white-space: nowrap;
}
.cus-usp-text p{
  margin: 0;
  font-size: 12px;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* toggle which USP row is visible per breakpoint
   (uses the compound selector .cus-usp-row.cus-usp-row-desktop, not just
   .cus-usp-row-desktop, so this always outranks the plain .cus-usp-row{}
   rule below regardless of which one comes first in the file — otherwise
   equal-specificity rules fall back to source order and the desktop row
   can stay visible on mobile) */
.cus-usp-row-compact{ display: none; }
@media (max-width: 991px){
  .cus-usp-row.cus-usp-row-desktop{ display: none; }
  .cus-usp-row.cus-usp-row-compact{ display: block; }
}

/* ---------------- Desktop: single row, dividers on every item ---------------- */
@media (min-width: 992px){
  .cus-usp-row{ flex-wrap: nowrap; }
  .cus-usp-item{
    padding: 6px clamp(12px, 2.1vw, 24px);
    flex: 1 1 0;
    min-width: 0;
  }
  .cus-usp-item:first-child{ padding-left: 0; }
  .cus-usp-item:last-child{ padding-right: 0; }
  .cus-usp-text h4, .cus-usp-text p{ white-space: normal; }
}
@media (min-width: 1220px){
  .cus-usp-item{ flex: none; }
  .cus-usp-text h4, .cus-usp-text p{ white-space: nowrap; }
}

/* ---------------- Tablet/Mobile: 3 top / 2 below, centered ----------------
   Each row-line is its own CSS Grid with fixed column COUNTS (3, then 2).
   Grid columns share the row width and shrink together rather than
   wrapping, so the 3-across / 2-across split holds at every width down
   to 320px. */
@media (max-width: 991px){
  .cus-banner-inner{ flex-wrap: wrap; justify-content: center; text-align: center; }
  .cus-leaf.cus-leaf-left, .cus-leaf.cus-leaf-right{ display: none; }
  .cus-text{ flex: 1 1 100%; text-align: center; }

  .cus-usp-row{ display: block; }
  .cus-usp-row-line{
    display: grid;
    align-items: start;
    margin: 0 auto;
  }
  .cus-usp-row-line:nth-of-type(1){ grid-template-columns: repeat(3, 1fr); max-width: 620px; }
  .cus-usp-row-line:nth-of-type(2){ grid-template-columns: repeat(2, 1fr); max-width: 420px; }
  .cus-usp-row-line + .cus-usp-row-line{ margin-top: 26px; }

  .cus-usp-item{
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    width: auto;
    padding: 0 14px;
  }
  .cus-usp-text h4, .cus-usp-text p{ white-space: normal; }
}

@media (max-width: 560px){
  .cus-banner-inner{ gap: 16px; }
  .cus-btn{ padding: 12px 20px; font-size: 14px; }
  .cus-usp-row-line{ column-gap: 4px; }
  .cus-usp-item{ padding: 0 6px; gap: 7px; }
  .cus-usp-icon{ width: 32px; height: 32px; }
  .cus-usp-text h4{ font-size: 12px; }
  .cus-usp-text p{ font-size: 10.5px; }
}

@media (max-width: 359px){
  .cus-usp-item{ padding: 0 4px; }
  .cus-usp-text h4{ font-size: 11px; }
  .cus-usp-text p{ font-size: 10px; }
}

/* =========================================================
   GET OUR APP PROMO — plain white bg, subtle top/bottom hairline
   (these two border rules are the only "styling" left on the section —
   comment/remove them below if you'd rather not have them)
   ========================================================= */
.app-promo{
  padding: 44px 0;
  background: var(--white);
  border-top: 1px solid #dbe9dc;    /* subtle light-green line — remove if not wanted */
  border-bottom: 1px solid #dbe9dc; /* subtle light-green line — remove if not wanted */
}

.app-promo-top{
  display: flex;
  flex-direction: column;
}
/* Vertical dividers use equal padding on both sides (32px + 32px) so every
   divider reads the same and sits dead-center in its own gap. */
@media (min-width: 700px){
  .app-promo-top{ display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; }
  .app-promo-info{ padding-right: 32px; }
  .app-promo-getapp{ border-left: 1px solid var(--line); padding-left: 32px; }
  .app-promo-devices{
    grid-column: 1 / -1;
    border-top: 1px solid var(--line);
    margin-top: 30px;
    padding-top: 30px;
  }
}
@media (min-width: 1100px){
  .app-promo-top{ grid-template-columns: 1fr 1fr 1fr; }
  .app-promo-getapp{ padding-right: 32px; }
  .app-promo-devices{
    grid-column: auto;
    border-top: none;
    margin-top: 0;
    padding-top: 0;
    border-left: 1px solid var(--line);
    padding-left: 32px;
  }
}
@media (max-width: 699px){
  .app-promo-getapp{ border-top: 1px solid var(--line); margin-top: 30px; padding-top: 28px; }
  .app-promo-devices{ border-top: 1px solid var(--line); margin-top: 30px; padding-top: 28px; }
}

/* ---- heading + note ---- */
.app-promo-title{
  font-size: clamp(21px, 2.4vw, 26px);
  font-weight: 800;
  line-height: 1.28;
  margin: 0 0 14px;
  color: #241F1A;
}
.app-promo-title .accent{ color: var(--green-dark); display: block; }
.app-promo-title-bar{ width: 46px; height: 3px; background: var(--green); border-radius: 2px; margin: -4px 0 18px; }

.app-promo-noteBox{
  background: #f6f5ef;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
}
.app-promo-noteBox .note-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.app-promo-noteBox .note-icon{
  width: 24px; height: 24px; border-radius: 6px; flex: none;
  background: var(--green-dark); color: #fff;
  display:flex; align-items:center; justify-content:center;
}
.app-promo-noteBox .note-icon svg{ width: 13px; height: 13px; }
.app-promo-noteBox .note-head h4{ margin:0; font-size: 14.5px; font-weight: 700; color:#241F1A; }
.app-promo-noteBox p{ margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }

/* ---- Get Our App ---- */
.app-get-head{ display:flex; align-items:center; gap: 10px; margin-bottom: 6px; }
.app-get-head .get-icon{
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: var(--green-light); color: var(--green-dark);
  display:flex; align-items:center; justify-content:center;
}
.app-get-head .get-icon svg{ width: 18px; height: 18px; }
.app-get-head h3{ margin: 0; font-size: 19px; font-weight: 800; color:#241F1A; }
.app-promo-getapp .app-promo-title-bar{ margin: 4px 0 20px 44px; }

/* ---- combined device image, no box/border around it ---- */
.app-promo-devices-inner{
  display: flex;
  align-items: center;
  justify-content: center;
}
.device-slot-single{
  width: 100%;
  max-width: 380px;
  min-height: 230px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.device-slot-single img{ width: 100%; height: auto; display: block; }

/* =========================================================
   4 USPs — mobile + tablet (<992px): 2x2 grid, cross-divider.
   desktop (>=992px): single row w/ vertical dividers.
   ========================================================= */
.af-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 34px;
}
.af-item{
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 16px;
}
.af-item.af-1{ border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.af-item.af-2{ border-bottom: 1px solid var(--line); }
.af-item.af-3{ border-right: 1px solid var(--line); }

@media (max-width: 420px){
  .af-item{ padding: 16px 8px; }
}

@media (min-width: 992px){
  .af-row{ display: flex; flex-direction: row; align-items: stretch; }
  .af-item{ flex: 1 1 0; min-width: 0; padding: 18px 24px; }
  .af-item.af-1, .af-item.af-2, .af-item.af-3, .af-item.af-4{ border-right: none; border-bottom: none; }
  .af-item + .af-item{ border-left: 1px solid var(--line); }
}
.af-icon{
  width: 42px; height: 42px; border-radius: 50%; flex: none;
  display:flex; align-items:center; justify-content:center;
}
.af-icon svg{ width: 20px; height: 20px; }
.af-item.af-1 .af-icon{ background: var(--green-light); color: var(--green-dark); }
.af-item.af-2 .af-icon{ background: #e7eefb; color: #3163c4; }
.af-item.af-3 .af-icon{ background: #fff1e8; color: var(--orange); }
.af-item.af-4 .af-icon{ background: #fde8ea; color: #d9364a; }
.af-text h4{ margin: 0 0 3px; font-size: 14.5px; font-weight: 700; }
.af-item.af-1 h4{ color: var(--green-dark); }
.af-item.af-2 h4{ color: #3163c4; }
.af-item.af-3 h4{ color: var(--orange-dark); }
.af-item.af-4 h4{ color: #d9364a; }
.af-text p{ margin: 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }

/* ============ GET OUR APP ============ */
.appget-wrap{ margin-top:18px; }

.appget-row-labels{ display:flex; gap:10px; margin-bottom:7px; }
.appget-label{
  flex:1 1 0; min-width:0;
  font-size:12px; font-weight:800; color:var(--green-dark); margin:0;
}

.appget-row{ display:flex; gap:10px; margin-bottom:18px; }
.appget-store{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; justify-content:flex-start;
}
.appget-badge-img{
  width:100%; height:50px;
  object-fit:contain; object-position:left center;
  display:block;
}
.appget-webapp{ display:flex; align-items:center; gap:12px; }
.appget-web-icon{
  width:40px; height:40px; border-radius:10px;
  border:1.5px solid var(--ink); background:#fff;
  display:flex; align-items:center; justify-content:center; flex:none; color:var(--ink);
}
.appget-web-icon svg{ width:20px; height:20px; }
.appget-web-text{ flex:0.7; min-width:0; }
.appget-web-text .l1{ font-size:13.5px; font-weight:800; color:#241F1A; margin:0 0 1px; }
.appget-web-text .l2{ font-size:11px; color:var(--ink-soft); margin:0; }
.appget-web-btn{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  padding:9px 14px; border-radius:20px; border:1.5px solid var(--orange);
  color:var(--orange-dark); font-size:12px; font-weight:700; background:#fff; white-space:nowrap;
}


/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{ background: #16311f; color: #d9e5db; padding: 34px 0 20px; }
/*.footer-top{*/
/*  display: flex;*/
/*  align-items: center;*/
/*  justify-content: center;*/
/*  flex-wrap: wrap;*/
/*  gap: 28px;*/
/*  padding-bottom: 22px;*/
/*  border-bottom: 1px solid rgba(255,255,255,0.12);*/
/*}*/
/*.footer-badge{ display: flex; align-items: center; gap: 8px; font-size: 12.5px; }*/
/*.footer-badge svg{ width: 18px; height: 18px; color: var(--gold); flex-shrink: 0; }*/

.footer-top{
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--green-light);
  border-radius: 16px;
  padding: 26px 28px;
  margin-bottom: 22px;
}
.footer-badge{
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15.5px;
  color: var(--ink);
}
.footer-badge strong{
  color: var(--green-dark);
  font-weight: 800;
}
.footer-badge-icon{
  --footer-badge-icon-size: 44px; /* bump this one value to resize every icon in this block */
  flex: none;
  width: var(--footer-badge-icon-size);
  height: var(--footer-badge-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
}
.footer-badge-icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.footer-badge-text{ min-width: 0; line-height: 1.4; }

.footer-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 18px;
  font-size: 12.5px;
  color: #a9bcae;
}
.footer-brand{ display: flex; align-items: center; gap: 10px; }
.footer-brand .brand-logo{ width: 36px; height: 36px; font-size: 13px; }
.footer-links{ display: flex; gap: 18px; flex-wrap: wrap; }
.footer-links a:hover{ color: var(--white); }

.whatsapp-fab{
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #25D366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  z-index: 200;
}
.whatsapp-fab svg{ width: 28px; height: 28px; color: var(--white); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1080px){
  .why-grid{ grid-template-columns: 1fr; }
  .why-media{ order: -1; max-width: 380px; margin: 0 auto 10px; }
  .why-col{ flex-direction: row; flex-wrap: wrap; }
  .why-item{ flex: 1 1 260px; }
  .week-grid{ grid-template-columns: repeat(3, 1fr); }
  .veg-card{ grid-column: span 3; flex-direction: row; justify-content: space-between; }
  .reasons-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 940px){
  .testi-layout{ grid-template-columns: 1fr; }
  .testi-track{ grid-template-columns: repeat(2, 1fr); }
  .testi-side{ padding: 22px; }

  /* tablet + mobile: side-scrolling card carousel instead of a stacked column */
  .tiffin-grid{
    display: flex;
    grid-template-columns: none;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 22px 4px 14px;
    margin: -22px -4px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
  }
  .tiffin-grid::-webkit-scrollbar{ height: 6px; }
  .tiffin-grid::-webkit-scrollbar-track{ background: transparent; }
  .tiffin-grid::-webkit-scrollbar-thumb{ background: var(--line); border-radius: 6px; }
  .tiffin-grid .tiffin-card{
    flex: 0 0 78%;
    max-width: 340px;
    scroll-snap-align: start;
  }

  .steps-row{ grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  .step-arrow{ display: none; }

  .reasons-grid{ grid-template-columns: repeat(2, 1fr); }

  .footer-bottom{ justify-content: center; text-align: center; }
}

@media (max-width: 480px){
  .tiffin-grid .tiffin-card{ flex-basis: 84%; }
}

@media (max-width: 620px){
  .if-container{ padding: 0 18px; }

  .testi-track{ grid-template-columns: 1fr; }

  .week-grid{ grid-template-columns: repeat(2, 1fr); }
  .veg-card{ grid-column: span 2; }

  .steps-row{ grid-template-columns: repeat(2, 1fr); }

  .reasons-grid{ grid-template-columns: 1fr 1fr; }

  .cta-banner h2{ padding: 0 10px; }

  .footer-top{ gap: 14px; }
}