/* ============================================================
   Chhota Bheem Family Café — Stylesheet
   Fonts: Fraunces (display) · DM Sans (body) · Bagel Fat One (poster)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800;9..144,900&family=DM+Sans:wght@400;500;600;700&family=Bagel+Fat+One&display=swap');

/* ── 1. DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --saffron:      #E85D04;
  --saffron-deep: #C24A02;
  --marigold:     #F4A024;
  --gold:         #D4A017;
  --maroon:       #7B1E1E;
  --maroon-deep:  #5A1414;
  --dark-bg:      #3A0F0F;
  --cream:        #FFF6E4;
  --cream-soft:   #FDF0D5;
  --ivory:        #FFFBF2;
  --brown:        #3A2515;
  --brown-soft:   #6B4423;
  --radius-card:  1.25rem;
  --radius-btn:   9999px;
}

/* ── 2. RESET & BASE ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; }
body {
  font-family: "Ubuntu", sans-serif;
  font-weight: 400;
  font-style: normal;
  background: var(--cream);
  color: var(--brown);
  /* font-family: 'DM Sans', system-ui, sans-serif; */
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; vertical-align: middle; }
button { cursor: pointer; font: inherit; background: none; border: none; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit; }
::selection { background: var(--saffron); color: var(--ivory); }

/* ── 3. TYPOGRAPHY ROLES ──────────────────────────────────── */
.font-display { font-family: "Times New Roman", Times, serif; font-optical-sizing: auto; letter-spacing: -0.01em; }
.font-poster  { font-family: "Times New Roman", Times, serif; letter-spacing: 0.01em; }

/* Heading scales */
.h-display {
  /* font-family: 'Fraunces', serif; */
  font-weight: 700;
  font-size: clamp(2.4rem, 5.5vw, 60px);
  line-height: 1.0;
  letter-spacing: -0.02em;
}
    .md\:text-xl {
      font-size: 26x !important;
    }
.h-section {
  /* font-family: 'Fraunces', serif; */
  font-weight: 700;
  font-size: clamp(1.9rem, 3.6vw, 40px);
  line-height: 1.0;
  letter-spacing: -0.015em;
}
.h-sub {
  /* font-family: 'Fraunces', serif; */
  font-weight: 600;
  font-size: clamp(1.3rem, 2vw, 24px);
  line-height: 1.25;
}
.eyebrow {
  /* font-family: 'DM Sans', sans-serif; */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  color: var(--saffron);
}
.stat-num {
  /* font-family: 'Fraunces', serif; */
  font-weight: 800;
  font-size: clamp(2rem, 3.6vw, 42px);
  line-height: 1;
  color: #f4971f;
  letter-spacing: -0.02em;
}
.stat-num {
    font-family: "Times New Roman", Times, serif;
}

/* ── 4. LAYOUT HELPERS ────────────────────────────────────── */
.App { min-height: 100vh; background: var(--cream); }
.container-cb {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}
.section { padding: 5rem 0;padding-top: 6rem; }

/* ── 5. NAVIGATION ────────────────────────────────────────── */
.cb-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  /* background: rgba(255, 246, 228, 0.86); */
  background: #faf2df;
  /* border-bottom: 1px solid rgba(123, 30, 30, 0.08); */
}
.cb-nav{
    position: fixed;
    overflow: visible;
    z-index: 999;
}

/* ── 6. BUTTONS ───────────────────────────────────────────── */
.btn-cb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem 1.9rem;
  border-radius: var(--radius-btn);
  font-weight: 600;
  /* font-family: 'DM Sans', sans-serif; */
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .25s ease, background-color .25s ease;
}
.btn-cb-primary {
  background: #3a1f0f;
  color: var(--ivory);
  box-shadow: 0 8px 22px rgba(232, 93, 4, .28);
}
.btn-cb-primary:hover {
  background: var(--saffron-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(232, 93, 4, .34);
}
.btn-cb-secondary {
  background: transparent;
  color: var(--maroon);
  border: 2px solid var(--maroon);
}
.btn-cb-secondary:hover {
  background: #3a1f0f;
  color: var(--ivory);
  transform: translateY(-2px);
}

/* ── 7. CARDS ─────────────────────────────────────────────── */
.cb-card {
  background: #fff;
  border: 1px solid rgba(123, 30, 30, .10);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 18px rgba(58, 37, 21, .06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.cb-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(58, 37, 21, .10);
}
.cb-card-dark {
  background: linear-gradient(140deg, var(--maroon) 0%, var(--maroon-deep) 100%);
  background: #3a1f0f;
  color: var(--cream);
  border-radius: var(--radius-card);
}

/* ── 8. INPUTS ────────────────────────────────────────────── */
.cb-input {
  width: 100%;
  background: #fff;
  border: 1.5px solid rgba(123, 30, 30, .18);
  border-radius: .85rem;
  padding: .9rem 1.1rem;
  color: var(--brown);
  /* font-family: 'DM Sans', sans-serif; */
  font-size: .96rem;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cb-input:focus {
  outline: none;
  border-color: var(--saffron);
  box-shadow: 0 0 0 4px rgba(232, 93, 4, .12);
}
.cb-input::placeholder { color: rgba(58, 37, 21, .45); }

/* ── 9. DECORATIVE PATTERNS ───────────────────────────────── */
.bg-paisley {
  /* background-image:
    radial-gradient(circle at 20% 30%, rgba(212,160,23,.10) 0, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(232,93,4,.08)  0, transparent 45%);*/
    background:#faf2df;
} 
.bg-grain {
  background-image:
    radial-gradient(circle at 25% 25%, rgba(123,30,30,.04) 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgba(232,93,4,.04)  1px, transparent 1px);
  background-size: 24px 24px, 32px 32px;
}
.ornament-divider {
  background-image: linear-gradient(90deg, transparent, var(--gold) 20%, var(--saffron) 50%, var(--gold) 80%, transparent);
  height: 2px;
}

/* ── 10. ANIMATIONS ───────────────────────────────────────── */
@keyframes float-slow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-12px) rotate(2deg); }
}
@keyframes shimmer-line {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0    rgba(232, 93, 4, .4); }
  50%       { box-shadow: 0 0 0 14px rgba(232, 93, 4, 0);  }
}
@keyframes slide-up-fade {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-float-slow  { animation: float-slow   6s   ease-in-out infinite; }
.animate-pulse-glow  { animation: pulse-glow   2.2s ease-out    infinite; }
.animate-slide-up    { animation: slide-up-fade .8s  ease-out   both; }
.ticker-track        { animation: ticker-scroll 28s  linear     infinite; }

.shimmer-text {
  /* background: linear-gradient(90deg,
    var(--maroon) 0%, var(--saffron) 35%,
    var(--gold)   50%, var(--saffron) 65%,
    var(--maroon) 100%); */
    background: #f4971f;
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer-line 6s linear infinite;
}

/* ── 11. UTILITY: FLEX / GRID ─────────────────────────────── */
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }
.hidden       { display: none; }
.block        { display: block; }

.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap     { flex-wrap: wrap; }
.shrink-0      { flex-shrink: 0; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.col-span-2  { grid-column: span 2; }

/* gaps */
.gap-1\.5 { gap: .375rem; }
/* .gap-2    { gap: .5rem;   } */
.gap-2 {
    gap: 1.5rem;
}
.gap-2\.5 { gap: .625rem; }
.gap-3    { gap: .75rem;  }
.gap-4    { gap: 1rem;    }
.gap-5    { gap: 1.25rem; }
.gap-6    { gap: 1.5rem;  }
.gap-7    { gap: 1.75rem; }
.gap-8    { gap: 2rem;    }
.gap-10   { gap: 2.5rem;  }
.gap-12   { gap: 3rem;    }

/* space-y */
.space-y-2\.5 > * + * { margin-top: .625rem; }
.space-y-3    > * + * { margin-top: .75rem;  }
.space-y-4    > * + * { margin-top: 1rem;    }

/* ── 12. UTILITY: SIZING ──────────────────────────────────── */
.w-full  { width: 100%; }
.w-10    { width: 2.5rem; }  .h-10   { height: 2.5rem; }
.w-11    { width: 2.75rem; } .h-11   { height: 2.75rem; }
.w-12    { width: 3rem; }    .h-12   { height: 3rem; }
.w-14    { width: 3.5rem; }  .h-14   { height: 3.5rem; }
.w-24    { width: 6rem; }    .h-24   { height: 6rem; }
.w-32    { width: 8rem; }    .h-32   { height: 8rem; }
.w-48    { width: 12rem; }   .h-48   { height: 12rem; }
.w-56    { width: 14rem; }   .h-56   { height: 14rem; }
.w-72    { width: 18rem; }   .h-72   { height: 18rem; }
.w-80    { width: 20rem; }   .h-80   { height: 20rem; }
.w-1\.5  { width: .375rem; } .h-1\.5 { height: .375rem; }
.h-2\.5  { height: .625rem; }
.h-full  { height: 100%; }
.h-\[420px\] { height: 420px; }
.min-h-screen   { min-height: 100vh; }
.min-h-\[110px\]{ min-height: 110px; }
.max-w-xl  { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-md  { max-width: 28rem; }
.aspect-square { aspect-ratio: 1; }
.w-auto { width: auto; }

/* ── 13. UTILITY: SPACING ─────────────────────────────────── */
.p-2 { padding: .5rem; }   .p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }

.px-3 { padding-left: .75rem;  padding-right: .75rem; }
.px-4 { padding-left: 1rem;    padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }

.py-1\.5 { padding-top: .375rem;  padding-bottom: .375rem; }
.py-2\.5 { padding-top: .625rem;  padding-bottom: .625rem; }
.py-3    { padding-top: .75rem;   padding-bottom: .75rem; }
.py-3\.5 { padding-top: .875rem;  padding-bottom: .875rem; }
.py-4    { padding-top: 1rem;     padding-bottom: 1rem; }
.py-14   { padding-top: 3.5rem;   padding-bottom: 3.5rem; }

.pt-2   { padding-top: .5rem;  }
.pt-5   { padding-top: 1.25rem; }
.pt-28  { padding-top: 7rem;   }
.pb-2\.5{ padding-bottom: .625rem; }
.pb-16  { padding-bottom: 4rem; }

.mt-0\.5 { margin-top: .125rem; } .mt-1   { margin-top: .25rem;  }
.mt-1\.5 { margin-top: .375rem; } .mt-2   { margin-top: .5rem;   }
.mt-2\.5 { margin-top: .625rem; } .mt-3   { margin-top: .75rem;  }
.mt-4    { margin-top: 1rem;    } .mt-5   { margin-top: 1.25rem; }
.mt-6    { margin-top: 1.5rem;  } .mt-7   { margin-top: 1.75rem; }
.mt-8    { margin-top: 2rem;    } .mt-10  { margin-top: 2.5rem;  }
.mt-12   { margin-top: 3rem;    } .mt-14  { margin-top: 3.5rem;  }
.mt-16   { margin-top: 4rem;    }
.-mt-1   { margin-top: -.25rem; } .-mt-4  { margin-top: -1rem;   }
.mb-1\.5 { margin-bottom: .375rem; }
.mb-3    { margin-bottom: .75rem; }
.mb-6    { margin-bottom: 1.5rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-2    { margin-left: .5rem; margin-right: .5rem; }

/* ── 14. UTILITY: POSITION ────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed;    }

.inset-0   { inset: 0; }
.-inset-3  { inset: -.75rem; }
.-inset-4  { inset: -1rem;   }

.top-20   { top: 5rem; }
.right-0  { right: 0; }  .right-2  { right: .5rem; }
.right-5  { right: 1.25rem; } .right-10 { right: 2.5rem; }
.bottom-2 { bottom: .5rem; }  .bottom-5 { bottom: 1.25rem; }
.bottom-10{ bottom: 2.5rem; }
.left-2   { left: .5rem; }  .left-5  { left: 1.25rem; }
.left-10  { left: 2.5rem; }

.-top-2   { top: -.5rem; }   .-top-4  { top: -1rem;   }
.-top-6   { top: -1.5rem; }  .-top-8  { top: -2rem;   }
.-top-12  { top: -3rem; }    .-top-16 { top: -4rem;   }
.-top-20  { top: -5rem; }
.-bottom-6  { bottom: -1.5rem; } .-bottom-12 { bottom: -3rem; }
.-bottom-24 { bottom: -6rem; }
.-left-4   { left: -1rem; }  .-left-12  { left: -3rem; }
.-left-20  { left: -5rem; }
.-right-3  { right: -.75rem; } .-right-6  { right: -1.5rem; }
.-right-8  { right: -2rem; }  .-right-12 { right: -3rem; }
.-right-16 { right: -4rem; }

.z-10  { z-index: 10; }
.z-50  { z-index: 50; }

/* ── 15. UTILITY: TYPOGRAPHY ──────────────────────────────── */
.text-xs   { font-size: .75rem;  line-height: 1rem;   }
.text-sm   { font-size: .875rem; line-height: 1.25rem;}
.text-base { font-size: 1rem;    line-height: 1.5rem; }
.text-lg   { font-size: 1.125rem;line-height: 1.75rem;}
.text-xl   { font-size: 30px ; line-height: 1.75rem;}
.text-2xl  { font-size: 30px;  line-height: 2rem;   }
.text-3xl  { font-size: 40px;line-height: 2.25rem;}
.text-4xl  { font-size: 40px; line-height: 3rem; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 13px; }
.text-\[12px\] { font-size: 12px; }
.text-\[14px\] { font-size: 14px; }
.text-\[15px\] { font-size: 14px; }

.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; text-align: left;}
.uppercase     { text-transform: uppercase; }
.text-left     { text-align: left; }
.text-center   { text-align: center; }
.leading-none    { line-height: 1;     }
.leading-tight   { line-height: 1.25;  }
.leading-relaxed { line-height: 1.625; }
.whitespace-nowrap { white-space: nowrap; }
.break-all { word-break: break-all; }
.resize-y  { resize: vertical; }

/* letter-spacing */
.tracking-wide        { letter-spacing: .025em;  }
.tracking-wider       { letter-spacing: .05em;   }
.tracking-\[0\.14em\] { letter-spacing: .14em;   }
.tracking-\[0\.16em\] { letter-spacing: .16em;   }
.tracking-\[0\.18em\] { letter-spacing: .18em;   }
.tracking-\[0\.22em\] { letter-spacing: .22em;   }

/* ── 16. UTILITY: COLOURS ─────────────────────────────────── */
/* Backgrounds */
.bg-white            { background-color: #fff; }
.bg-\[\#FFF6E4\]     { background-color: #FFF6E4; }
.bg-\[\#FFF6E4\]\/5  { background-color: rgba(255,246,228,.05); }
.bg-\[\#FFF6E4\]\/8  { background-color: rgba(255,246,228,.08); }
.bg-\[\#FFFBF2\]     { background-color: #FFFBF2; }
.bg-\[\#FDF0D5\]     { background-color: #FDF0D5; }
.bg-\[\#5A1414\]     { background-color: #3a1f0f; }
.bg-\[\#3A0F0F\]     { background-color: #3A0F0F; }
.bg-\[\#E85D04\]     { background-color: #f4971f; }
.bg-\[\#F4A024\]     { background-color: #F4A024; }
.bg-\[\#7B1E1E\]\/8  { background-color: rgba(123,30,30,.08); }
.bg-\[\#7B1E1E\]\/12 { background-color: rgba(123,30,30,.12); }
.bg-\[\#7B1E1E\]\/15 { background-color: rgba(123,30,30,.15); }
.bg-\[\#E85D04\]\/10 { background-color: rgba(232,93,4,.10); }
.bg-\[\#E85D04\]\/15 { background-color: rgba(232,93,4,.15); }
.bg-\[\#F4A024\]\/10 { background-color: rgba(244,160,36,.10); }
.bg-\[\#F4A024\]\/15 { background-color: rgba(244,160,36,.15); }
/* .bg-\[\#F4A024\]\/20 { background-color: rgba(244,160,36,.20); } */

/* Gradients */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)); }
.bg-gradient-to-r  { background-image: linear-gradient(to right,        var(--tw-gradient-stops)); }
.bg-gradient-to-t  { background-image: linear-gradient(to top,          var(--tw-gradient-stops)); }

/* .from-\[\#E85D04\]      { --tw-gradient-from: #E85D04;                        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); } */
.from-\[\#F4A024\]      { --tw-gradient-from: #F4A024;                        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-\[\#F4A024\]\/30  { --tw-gradient-from: rgba(244,160,36,.3);             --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-\[\#7B1E1E\]      { --tw-gradient-from: #7B1E1E;                        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-\[\#5A1414\]\/70  { --tw-gradient-from: rgba(90,20,20,.7);              --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-\[\#3A0F0F\]\/85  { --tw-gradient-from: rgba(58,15,15,.85);             --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.from-\[\#FFF6E4\]      { --tw-gradient-from: #FFF6E4;                        --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
.via-transparent        { --tw-gradient-stops: var(--tw-gradient-from), transparent, var(--tw-gradient-to, transparent); }
.via-\[\#3A0F0F\]\/20   { --tw-gradient-stops: var(--tw-gradient-from), rgba(58,15,15,.2), var(--tw-gradient-to, transparent); }
/* .to-\[\#7B1E1E\]        { --tw-gradient-to: #7B1E1E; } */
.to-\[\#7B1E1E\]\/20    { --tw-gradient-to: rgba(123,30,30,.2); }
.to-\[\#5A1414\]        { --tw-gradient-to: #5A1414; }
.to-\[\#E85D04\]        { --tw-gradient-to: #f4971f; }
.to-\[\#F4A024\]        { --tw-gradient-to: #F4A024; }
.to-\[\#FDF0D5\]        { --tw-gradient-to: #FDF0D5; }
.to-transparent         { --tw-gradient-to: transparent; }

/* Text colours */
.text-\[\#3A2515\]      { color: #3A2515; }
.text-\[\#6B4423\]      { color: #6B4423; }
.text-\[\#6B4423\]\/80  { color: rgba(107,68,35,.8); }
.text-\[\#7B1E1E\]      { color: #502707; }
.text-\[\#7B1E1E\]\/20  { color: rgba(123,30,30,.2); }
.text-\[\#E85D04\]      { color: #f4971f; }
.\!text-\[\#E85D04\]    { color: #f4971f !important; }
.text-\[\#F4A024\]      { color: #F4A024; }
.\!text-\[\#F4A024\]    { color: #F4A024 !important; }
.text-\[\#FFF6E4\]      { color: #FFF6E4; }
.text-\[\#FFF6E4\]\/40  { color: rgba(255,246,228,.4); }
.text-\[\#FDF0D5\]\/55  { color: rgba(253,240,213,.55); }
.text-\[\#FDF0D5\]\/60  { color: rgba(253,240,213,.6); }
.text-\[\#FDF0D5\]\/75  { color: rgba(253,240,213,.75); }
.text-\[\#FDF0D5\]\/80  { color: rgba(253,240,213,.8); }
.text-\[\#FDF0D5\]\/85  { color: rgba(253,240,213,.85); }
.text-\[\#FDF0D5\]\/90  { color: rgba(253,240,213,.9); }

/* Hover text */
.hover\:text-\[\#E85D04\]:hover { color: #f4971f; }
.hover\:text-\[\#F4A024\]:hover { color: #F4A024; }

/* ── 17. UTILITY: BORDERS ─────────────────────────────────── */
.border   { border-width: 1px; border-style: solid; }
.border-4 { border-width: 4px; border-style: solid; }
.border-t { border-top-width:    1px; border-top-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-y { border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; }
.border-dashed { border-style: dashed; }
.border-white             { border-color: #fff; }
.border-\[\#7B1E1E\]\/10  { border-color: rgba(123,30,30,.10); }
.border-\[\#7B1E1E\]\/15  { border-color: rgba(123,30,30,.15); }
.border-\[\#7B1E1E\]\/20  { border-color: rgba(123,30,30,.20); }
.border-\[\#7B1E1E\]\/30  { border-color: rgba(123,30,30,.30); }
.border-\[\#E85D04\]\/30  { border-color: rgba(232,93,4,.30); }
.border-\[\#F4A024\]\/15  { border-color: rgba(244,160,36,.15); }
.border-\[\#F4A024\]\/20  { border-color: rgba(244,160,36,.20); }
.border-\[\#F4A024\]\/25  { border-color: rgba(244,160,36,.25); }
.border-\[\#F4A024\]\/30  { border-color: rgba(244,160,36,.30); }

/* ── 18. UTILITY: BORDER RADIUS ──────────────────────────── */
.rounded-full     { border-radius: 9999px;    margin-top: -14px; }
.rounded-xl       { border-radius: .75rem; }
.rounded-2xl      { border-radius: 1rem;   }
.rounded-3xl      { border-radius: 1.5rem; }
.rounded-\[1\.75rem\] { border-radius: 1.75rem; }
.rounded-\[2rem\]     { border-radius: 2rem;    }

/* ── 19. UTILITY: SHADOWS ─────────────────────────────────── */
/* .shadow-md  { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); } */
.shadow-lg  { box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1); }
.shadow-xl  { box-shadow: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,.25); }

/* ── 20. UTILITY: MISC ────────────────────────────────────── */
.overflow-hidden    { overflow: hidden; }
.pointer-events-none{ pointer-events: none; }
.object-cover       { object-fit: cover; }
.opacity-25  { opacity: .25; }
.opacity-30  { opacity: .30; }
.opacity-60  { opacity: .60; }
.opacity-80  { opacity: .80; }

/* blur */
.blur-xl  { filter: blur(24px);  }
.blur-2xl { filter: blur(40px);  }
.blur-3xl { filter: blur(64px);  }
.backdrop-blur-sm { backdrop-filter: blur(4px); }

/* transitions */
.transition        { transition: color .15s,background-color .15s,border-color .15s,opacity .15s,box-shadow .15s,transform .15s; }
.transition-colors { transition: color .15s,background-color .15s,border-color .15s; }
.duration-500      { transition-duration: 500ms; }

/* group hover */
.group:hover .group-hover\:scale-110 { transform: scale(1.1); }


.logo-wrap{
    position: relative;
}

.cb-logo{
    width: 150px;
    max-width: none;
    margin-top: 90px;
}
.mall-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:6px 12px;

    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.18em;

    color:#F4A024;
    background:rgba(244,160,36,0.20);
    border:1px solid rgba(244,160,36,0.30);
    border-radius:9999px;
}
.location-text{
  text-align: left;
}
.feature-title{
  text-align: center;
    margin-top:16px;
    color:#3A2515;
    font-weight:700;
    font-size:20px; /* text-xl */
    line-height:1.3;
}

.feature-text{
  text-align: center;
    margin-top:8px;
    color:#6B4423;
    font-size:15px;
    line-height:1.7;
}
.flagship-title{
    margin-top:24px;
    font-size:36px;
    font-weight:700;
    line-height:1.2;
}

.flagship-desc{
    margin-top:12px;
    font-size:16px;
    color:rgba(253,240,213,0.90);
}

.location-wrap{
    margin-top:24px;
    display:inline-flex;
    align-items:center;
    gap:8px;
}

.location-text{
    font-size:14px;
    color:rgba(253,240,213,0.80);
    line-height:1.5;
}
.investment-stats{
    margin-top:40px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    /* gap:12px; */
    text-align:center;
}

.stat-item{
    display:flex;
    flex-direction:column;
    align-items:center;
}

.stat-num{
    font-size:24px;
    font-weight:700;
    line-height:1;
}

.stat-label{
    margin-top:4px;
    font-size:12px;
    line-height:1.3;
    color:#6B4423;
}

@media (min-width:768px){
    .investment-stats{
            grid-template-columns: repeat(3, 1fr);
        gap:16px;
    }

    .stat-item{
        text-align:center;
    }

    .stat-num{
        font-size:30px;
    }

    .stat-label{
        font-size:14px;
    }
}
@media (max-width:767px){
    .revenue-value{
        font-size:16px !important;
        line-height:1.3;
    }
}
/* Mobile */
@media (max-width:767px){

    .flagship-title{
        font-size:28px;
        text-align:center;
    }

    .flagship-desc{
        text-align:center;
    }

    .location-wrap{
        width:100%;
        justify-content:center;
        text-align:center;
    }

    .location-text{
        text-align:center;
    }
}

@media (max-width:767px){
    .feature-title{
        font-size:18px; /* text-lg */
        text-align:center;
    }

    .feature-text{
        font-size:14px;
        text-align:center;
    }
}

@media (max-width:767px){
    .mall-badge{
        margin:0 auto;
    }
}
.stats-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.stat-card{
    background:rgba(255,246,228,0.08);
    border:1px solid rgba(244,160,36,0.20);
    border-radius:16px;
    padding:20px;
}

.stat-number{
    font-family:var(--display-font);
    font-size:30px;
    font-weight:700;
    color:#F4A024;
    line-height:1;
}

.stat-text{
    margin-top:6px;
    font-size:13px;
    line-height:1.4;
    color:rgba(253,240,213,0.80);
}

/* Mobile */
@media (max-width:767px){
    .stats-grid{
        grid-template-columns:repeat(1,2fr);
        gap:12px;
    }

    .stat-card{
        padding:16px;
        text-align:center;
    }

    .stat-number{
        font-size:24px;
    }

    .stat-text{
        font-size:12px;
    }
}
@media (max-width:767px){

    .bg-\[\#3A0F0F\] .relative{
        text-align:center;
    }

    .bg-\[\#3A0F0F\] .flex.items-center{
        justify-content:center;
    }

    .bg-\[\#3A0F0F\] p{
        text-align:center;
    }

    .bg-\[\#3A0F0F\] .border-t{
        text-align:center;
    }
}

/* Mobile */

@media (max-width: 767px){
    .cb-logo{
              width: 130px;
        margin-top: 49px;
        /*margin-left: 131px;*/
       
    }
    
    .h-display {
       margin-top: 56px;
    font-size: 35px;
    text-align: center;
    line-height: 1.1;
  }
  .rounded-full {
    border-radius: 9999px;
    margin-top: -35px;
}
 .md\:text-xl   { font-size: 22px !important; line-height: 1.75rem;text-align: center; }
  .mt-8.flex.flex-wrap.gap-3.sm\:gap-4 {
    justify-content: center;
    text-align: center;
  }
      .mt-8.flex.flex-wrap.gap-3.sm\:gap-4 {
        margin-top: 50px;}
  
.stat-num {
    font-size: 22px !important;
  }
  .text-\[\#6B4423\] {
    font-size: 10px;
}
.text-\[\#3A2515\] {
    text-align: center;
}
.eyebrow {
    justify-content: center;
    text-align: center;
  }
   #problem p {
    font-size: 13px;
    text-align: center;
  }
  .h-section{
    text-align: center;
  }
  .backdrop-blur-sm {
    font-size: 12px !important;
    text-align: center;}
    .w-12.h-12.object-contain {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  .h-section + p {
    text-align: center;
  }
  .mt-8.grid.grid-cols-2.sm\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .cb-card {
    padding: 12px !important;
  }

  .cb-card .text-2xl {
    font-size: 22px !important;
    line-height: 1.2;
  }

  .cb-card .text-xs {
    font-size: 11px !important;
    line-height: 1.3;
  }
  .tag-list{
        display: none;
    }
    .gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .gallery-grid img {
        height: 220px !important;
        margin-top: 0 !important;
    }
    .text-\[\#6B4423\] {
    text-align: center;
}
.revenue-icon{
    margin-top: -15px;
}
.mt-1.font-display.font-bold.text-lg.sm\:text-xl.text-\[\#3A2515\] {
    font-size: 12px;
  }
}



#master .mt-7.grid .flex {
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
}

#master .mt-7.grid .flex span {
  white-space: nowrap;
}

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
 footer{
  background:var(--forest-ink);
  padding:30px 30px;
  display:flex;align-items:center;justify-content:space-between;  text-align:center;flex-direction:column;text-align:center;;
  border-top:1px solid rgba(201,146,42,.1);flex-wrap:wrap;gap:10px;
}
.footer-brand{display:flex;align-items:center;gap:10px;flex-direction:column;text-align: center;margin-top: 15px;}
.footer-brand .hexmark{width:32px;height:32px}
.footer-brand .hexmark .hm{font-size:13px}
.footer-words .fn{
  font-family: 'Prohibition Test Regular', sans-serif;
  font-weight:600;
  color:rgba(249,245,236,.7);
}
.footer-words .fs{font-family: 'Prohibition Test Regular', sans-serif;font-size:10px;color:#d8b62a;letter-spacing:1.5px;text-transform:uppercase;margin-top:0px}
.footer-center p{font-size:12px;text-align:center}
.footer-right{font-size:11px;text-align:center;line-height:1.7} 
.footer-right p{
  font-size: 15px;
  color: #737272;
}

.footer-center p
{
  color:#000;
    margin:4px 0;
    font-size: 15px;
    margin-bottom: 5px;
}
/* Tablet */
@media (min-width: 768px) and (max-width: 1023px){
    .cb-logo{
        width: 120px;
        margin-top: 70px;
    }
}

/* Desktop */
@media (min-width: 1024px){
    .cb-logo{
        width: 112px;
        margin-top: 68px;
    }
}

/* ── 21. RESPONSIVE BREAKPOINTS ───────────────────────────── */
@media (min-width: 640px) {
  .sm\:flex  { display: flex; }
  .sm\:w-auto { width: auto; }
  .sm\:h-64  { height: 16rem; }
  .sm\:h-\[480px\] { height: 480px; }
  .sm\:rounded-2xl { border-radius: 1rem; }
  .sm\:p-6 { padding: 1.5rem; }
  .sm\:p-7 { padding: 15px; }
  .sm\:p-8 { padding: 2rem;   }
  .sm\:p-10{ padding: 2.5rem; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .sm\:gap-4  { gap: 1rem; }
  .sm\:gap-6  { gap: 1.5rem; }
  .sm\:text-sm  { font-size: .875rem; line-height: 1.25rem; }
  .sm\:text-base{ font-size: 1rem;    line-height: 1.5rem;  }
  .sm\:text-xl  { font-size: 22px; line-height: 1.75rem; }
  .sm\:text-3xl { font-size: 1.875rem;line-height: 2.25rem; }
  .sm\:text-4xl { font-size: 2.25rem; line-height: 2.5rem;  }
  .sm\:text-\[11px\] { font-size: 11px; }
  .sm\:text-\[13px\] { font-size: 14px; }
  .sm\:text-\[15px\] { font-size: 14px; }
}

@media (min-width: 768px) {
  .md\:flex  { display: flex; }
  .md\:w-11  { width: 2.75rem; }
  .md\:h-11  { height: 2.75rem; }
  .md\:mt-20 { margin-top: 5rem; }
  .md\:pt-32 { padding-top: 8rem; }
  .md\:pb-20 { padding-bottom: 5rem; }
  .md\:py-4  { padding-top: 1rem;   padding-bottom: 1rem; }
  .md\:py-16 { padding-top: 4rem;   padding-bottom: 4rem; }
  .md\:grid-cols-2  { grid-template-columns: repeat(2,  minmax(0,1fr)); }
  .md\:grid-cols-3  { grid-template-columns: repeat(3,  minmax(0,1fr)); }
  .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0,1fr)); }
  .md\:col-span-3   { grid-column: span 3; }
  .md\:col-span-4   { grid-column: span 4; }
  .md\:col-span-5   { grid-column: span 5; }
  .md\:text-base { font-size: 1rem;    line-height: 1.5rem;  }
  .md\:text-lg   { font-size: 1.125rem;line-height: 1.75rem; }
  /* .md\:text-xl   { font-size: 1.25rem; line-height: 1.75rem; } */
  .md\:text-3xl  { font-size: 1.875rem;line-height: 2.25rem; }
  .md\:text-\[11px\] { font-size: 11px; }
}

@media (min-width: 1024px) {
  .lg\:flex   { display: flex; }
  .lg\:hidden { display: none; }
  .lg\:h-\[560px\] { height: 560px; }
  .lg\:pt-36  { padding-top:    9rem; }
  .lg\:pb-24  { padding-bottom: 3rem; }
  .lg\:p-10   { padding: 30px; }
  .lg\:p-12   { padding: 3rem;   }
  .lg\:gap-8  { gap: 2rem; }
  .lg\:gap-12 { gap: 3rem; }
  .lg\:grid-cols-2  { grid-template-columns: repeat(2,  minmax(0,1fr)); }
  .lg\:grid-cols-3  { grid-template-columns: repeat(3,  minmax(0,1fr)); }
  .lg\:grid-cols-4  { grid-template-columns: repeat(4,  minmax(0,1fr)); }
  .lg\:grid-cols-5  { grid-template-columns: repeat(5,  minmax(0,1fr)); }
  .lg\:grid-cols-6  { grid-template-columns: repeat(6,  minmax(0,1fr)); }
  .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0,1fr)); }
  .lg\:col-span-5   { grid-column: span 5; }
  .lg\:col-span-6   { grid-column: span 6; }
  .lg\:col-span-7   { grid-column: span 7; }
  .lg\:-left-8  { left: -2rem;   }
  .lg\:-right-6 { right: -1.5rem;}
}

/* ── 22. RESPONSIVE COMPONENT TWEAKS ──────────────────────── */
@media (max-width: 1024px) {
  .section      { padding: 4.5rem 0; }
  .container-cb { padding: 0 1.5rem;
  padding-top: 20px; }
}
/* @media (min-width:1024px){

  #hero > .mt-16{
      width:fit-content;
      max-width:1200px;
      margin-left:auto;
      margin-right:auto;
      background:#5A1414;
      overflow:hidden;
  }


  .ticker-track > div:last-child{
      display:none;
  }
} */@media (min-width:1024px) and (max-width:1199px) {
    #hero .mt-16{
        width: fit-content !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        background: #3a1f0f;
        overflow: hidden;
    }
}

@media (min-width:1200px){
    #hero .mt-16{
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
}

@media (min-width:1024px){
  .ticker-track > div:last-child{
      display: none;
  }
}
@media (max-width: 768px) {
  .section      { padding: 3.5rem 0; }
  .container-cb { padding: 0 1.25rem; }
}
@media (max-width: 480px) {
  .section      { padding: 2.75rem 0; }
  .container-cb { padding: 0 1rem; justify-content :center; }
}


@media (max-width:767px){

    /* Top badge */
    .risk-section .flex.items-center{
        justify-content:center;
        text-align:center;
        white-space: nowrap;
    }

    /* Heading */
    .risk-section h3{
        text-align:center;
        font-size:24px;
    }

    /* Risk points */
    .risk-section .grid > div{
        display:flex;
        flex-direction:column;
        align-items:center;
        text-align:center;
        gap:8px;
        white-space: nowrap;
    }

    /* Icons */
    .risk-section .grid > div svg{
        margin:0;
        
    }

    /* Text */
    .risk-section .grid > div span{
        
        white-space: nowrap;
        margin: auto;
    }

    /* Button */
    .risk-section .btn-cb{
        width:100%;
        justify-content:center;
    }
    /* In styles.css */
#master .bg-\[\#FFF6E4\]\/5 span,
#master .flex.items-start span {
  white-space: nowrap;
}
}
@media (max-width: 767px) {


  /* ── HERO: Stats bar — dark brown background, stacked rows ── */
.investment-stats {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 60px;

    display: flex;       /* IMPORTANT */
    flex-direction: column;

    border-radius: 16px;
    overflow: hidden;
}
.stat-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    /* gap: 12px !important; */
}

.stat-num,
.stat-label {
    display: inline-block !important;
    margin: 0 !important;
}
.stat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    /* gap: 12px; */
    padding: 16px 20px;
}
.stat-label {
    margin-top: 0;
}

  .stat-item:last-child {
    border-bottom: none;
  }

.stat-num,
.stat-label {
    font-size: 18px;
    font-weight: 600;
    color: #FFF6E4;
}

  /* .stat-label {
    font-size: 13px;
    color: rgba(255, 246, 228, 0.75);
    margin-top: 2px;
  } */
  .stat-item:nth-child(1) {
    background: #341c0e; /* Dark Brown */
}

/* Second Item */
.stat-item:nth-child(2) {
    background: #61371d; /* Maroon */
}

/* Third Item */
.stat-item:nth-child(3) {
    background: #6f452a; /* Orange */
}
}