@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bricolage+Grotesque:opsz,wght@12..96,500;600;700;800&family=Figtree:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Tiro+Devanagari+Hindi:ital@0;1&display=swap');

:root {
  --font-figtree: 'Figtree', sans-serif;
  --font-bricolage: 'Bricolage Grotesque', sans-serif;
  --font-tiro: 'Tiro Devanagari Hindi', serif;
  --font-anton-next: 'Anton', sans-serif;
}

/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}
::before,
::after {
  --tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/
html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
  color: inherit;
  text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
  outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
  box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}
fieldset {
  margin: 0;
  padding: 0;
}
legend {
  padding: 0;
}
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
  resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
  cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
  max-width: 100%;
  height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.\!container{
  width: 100% !important;
}
.container{
  width: 100%;
}
@media (min-width: 640px){
  .\!container{
    max-width: 640px !important;
  }
  .container{
    max-width: 640px;
  }
}
@media (min-width: 768px){
  .\!container{
    max-width: 768px !important;
  }
  .container{
    max-width: 768px;
  }
}
@media (min-width: 1024px){
  .\!container{
    max-width: 1024px !important;
  }
  .container{
    max-width: 1024px;
  }
}
@media (min-width: 1280px){
  .\!container{
    max-width: 1280px !important;
  }
  .container{
    max-width: 1280px;
  }
}
@media (min-width: 1536px){
  .\!container{
    max-width: 1536px !important;
  }
  .container{
    max-width: 1536px;
  }
}
.collapse{
  visibility: collapse;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.hidden{
  display: none;
}
.h-4{
  height: 1rem;
}
.h-full{
  height: 100%;
}
.max-h-full{
  max-height: 100%;
}
.w-4{
  width: 1rem;
}
.w-full{
  width: 100%;
}
.max-w-full{
  max-width: 100%;
}
.shrink{
  flex-shrink: 1;
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize{
  resize: both;
}
.items-center{
  align-items: center;
}
.justify-center{
  justify-content: center;
}
.overflow-auto{
  overflow: auto;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.border{
  border-width: 1px;
}
.bg-slate-900{
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.object-contain{
  -o-object-fit: contain;
     object-fit: contain;
}
.p-4{
  padding: 1rem;
}
.font-bold{
  font-weight: 700;
}
.uppercase{
  text-transform: uppercase;
}
.italic{
  font-style: italic;
}
.underline{
  text-decoration-line: underline;
}
.shadow-2xl{
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline{
  outline-style: solid;
}
.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
:root {
  --saffron: #E87722;
  --saffron-deep: #C85A0F;
  --green: #0E7A3D;
  --green-deep: #0A5C2E;
  --chakra: #1B2A6B;
  --cream: #FFF9F2;
  --paper: #FFFFFF;
  --ink: #1F2430;
  --ink-soft: #5A6072;
  --line: #EBE2D6;
  --gold: #F4B942;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(31, 36, 48, .08);
  --font-display: var(--font-bricolage), 'Bricolage Grotesque', sans-serif;
  --font-body: var(--font-figtree), 'Figtree', sans-serif;
  --font-hindi: var(--font-tiro), 'Tiro Devanagari Hindi', serif;
  --font-anton: var(--font-anton-next), 'Anton', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 105px;
  overflow-x: hidden !important;
  max-width: 100vw;
  width: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: 17px;
  overflow-x: hidden !important;
  max-width: 100vw;
  width: 100%;
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  padding-top: 93px;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  flex: 1 0 auto;
}

@media (max-width: 960px) {
  main {
    padding-top: 83px;
  }
}
@media (max-width: 480px) {
  main {
    padding-top: 77px;
  }
}
img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.06;
  text-transform: none;
}

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--saffron-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
  text-align: center;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 3px;
  background: linear-gradient(90deg, var(--saffron) 33%, var(--paper) 33% 66%, var(--green) 66%);
  border: 1px solid var(--line);
  border-radius: 2px;
}

.hindi {
  font-family: var(--font-hindi);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 22px;
}

section.page {
  display: none;
  animation: fadeIn 0.45s ease;
}

section.page.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
/* ===== Tricolor ribbon ===== */
.tricolor {
  height: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.tricolor span:nth-child(1) {
  background: var(--saffron);
}

.tricolor span:nth-child(2) {
  background: #fff;
  position: relative;
}

.tricolor span:nth-child(2)::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid var(--chakra);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.tricolor span:nth-child(3) {
  background: var(--green);
}

/* ===== Header / Nav ===== */
header,
header.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(255, 249, 242, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  transition: background 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

header.scrolled,
header.site-header.scrolled {
  background: rgba(255, 249, 242, 0.98);
  box-shadow: 0 4px 24px rgba(31, 36, 48, 0.08);
  border-bottom-color: rgba(235, 226, 214, 0.85);
}

.navwrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  max-width: 1240px;
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.brand-logo-box {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-logo-box img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 0;
  line-height: 1;
}

.brand-name small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  color: var(--ink-soft);
  font-weight: 700;
  margin-top: 3px;
}

@media (max-width: 960px) {
  .brand-logo-box {
    width: 48px !important;
    height: 48px !important;
  }
  .brand {
    gap: 8px !important;
  }
}
@media (max-width: 480px) {
  .brand-logo-box {
    width: 42px !important;
    height: 42px !important;
  }
  .brand-name {
    font-size: 1.05rem !important;
  }
  .brand-name small {
    letter-spacing: 0.06em !important;
    font-size: 0.56rem !important;
  }
}
nav ul {
  display: flex;
  gap: 4px;
  list-style: none;
  flex-wrap: wrap;
}

nav button,
nav a.nav-btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.03em;
  background: none;
  border: none;
  padding: 9px 13px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--ink-soft);
  transition: 0.2s;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

nav button:hover,
nav a.nav-btn:hover {
  color: var(--ink);
  background: #fff;
}

nav button.active,
nav a.nav-btn.active {
  background: var(--chakra);
  color: #fff;
}

nav button:focus-visible,
.btn:focus-visible,
.faq-q:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 1.2rem;
  cursor: pointer;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(5, 12, 10, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1050;
  animation: fadeInBackdrop 0.25s ease forwards;
}

@keyframes fadeInBackdrop {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@media (max-width: 960px) {
  .menu-toggle {
    display: block;
    position: relative;
    z-index: 1002;
  }
  nav {
    position: fixed;
    top: 0;
    right: 0;
    transform: translateX(100%);
    visibility: hidden;
    width: 280px;
    height: 100vh;
    background: var(--cream);
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.12);
    display: block !important;
    z-index: 1060;
    border-left: 1px solid var(--line);
    border-bottom: none;
    padding-top: 85px;
    overflow-y: auto;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  }
  nav.open {
    transform: translateX(0);
    visibility: visible;
  }
  nav ul {
    flex-direction: column;
    padding: 16px 20px;
    gap: 6px;
  }
  nav button,
  nav a.nav-btn {
    width: 100%;
    text-align: left;
    font-size: 1.05rem;
    display: block;
    padding: 11px 16px;
    border-radius: 10px;
  }
}
/* ===== Season dropdown ===== */
.dropdown {
  position: relative;
}

.dropdown > button {
  padding-right: 32px !important;
}

.dropdown > button .badge {
  position: absolute;
  top: -8px;
  right: 18px;
  font-size: 11px;
  letter-spacing: 0.08em;
  background: var(--gold);
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 10px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1.5px solid #fff;
}

.dropdown > button .caret {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.6rem;
  transition: transform 0.2s;
}

.dropdown.open > button .caret {
  transform: translateY(-50%) rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 250px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(31, 36, 48, 0.16);
  padding: 8px;
  display: none;
  z-index: 999;
}

.dropdown-menu::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.dropdown.open .dropdown-menu {
  display: block;
}

@media (min-width: 961px) {
  .dropdown:hover .dropdown-menu,
  .dropdown.open .dropdown-menu {
    display: block;
  }
  .dropdown:hover > button .caret,
  .dropdown.open > button .caret {
    transform: translateY(-50%) rotate(180deg);
  }
}

.dropdown-menu button,
.dropdown-menu a {
  display: flex;
  width: 100%;
  text-align: left;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 0.9rem;
  background: none;
  border: none;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.dropdown-menu button:hover,
.dropdown-menu a:hover {
  background: var(--cream);
}

.dropdown-menu button .di,
.dropdown-menu a .di {
  font-size: 1rem;
}

.dropdown-menu .dd-head {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--saffron-deep);
  padding: 8px 14px 4px;
  white-space: nowrap;
}

@media (max-width: 960px) {
  .dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 0 16px;
    display: none;
  }
  .dropdown.open .dropdown-menu {
    display: block;
  }
}
/* ===== Buttons ===== */
.btn {
  display: inline-block;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  padding: 14px 26px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: 0.2s;
  text-align: center;
}

.btn-saffron {
  background: var(--saffron);
  color: #fff;
  box-shadow: 0 8px 22px rgba(232, 119, 34, 0.35);
}

.btn-saffron:hover {
  background: var(--saffron-deep);
  transform: translateY(-2px);
}

.btn-green {
  background: var(--green);
  color: #fff;
  box-shadow: 0 8px 22px rgba(14, 122, 61, 0.3);
}

.btn-green:hover {
  background: var(--green-deep);
  transform: translateY(-2px);
}

.btn-ghost {
  background: transparent;
  border: 2px solid var(--chakra);
  color: var(--chakra);
}

.btn-ghost:hover {
  background: var(--chakra);
  color: #fff;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(900px 420px at 85% -10%, rgba(232, 119, 34, 0.16), transparent 60%), radial-gradient(900px 420px at 10% 110%, rgba(14, 122, 61, 0.16), transparent 60%), var(--cream);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 40px;
  align-items: center;
  padding: 76px 22px 64px;
}

@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr 380px;
    gap: 24px;
  }
}
.hero .eyebrow {
  justify-content: flex-start;
  text-align: left;
  gap: 12px;
  margin-bottom: 16px;
}

.hero .eyebrow::before {
  width: 32px;
  height: 3px;
  background: linear-gradient(90deg, var(--saffron) 0% 33%, #FFFFFF 33% 66%, var(--green) 66% 100%);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  flex-shrink: 0;
}

.hero h1 {
  text-align: left !important;
  font-family: var(--font-display), "Bricolage Grotesque", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.02;
  font-size: clamp(3.2rem, 6.2vw, 4.8rem);
  color: var(--ink);
  margin-bottom: 6px;
}

.hero h1 .s {
  color: var(--saffron);
}

.hero h1 .g {
  color: var(--green);
}

.hero .hindi-tag {
  font-family: var(--font-hindi);
  font-size: 1.35rem;
  color: var(--chakra);
  margin: 14px 0 16px;
  font-weight: 500;
}

.hero p.lede {
  font-size: clamp(0.98rem, 1.4vw, 1.06rem);
  color: var(--ink-soft);
  max-width: 580px;
  margin: 14px 0 28px;
  line-height: 1.65;
}

.hero p.lede strong {
  color: var(--ink);
  font-weight: 700;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

.hero-meta {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 36px;
  justify-content: start;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
}

@media (max-width: 760px) {
  .hero-meta {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
.hero-meta div strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
  letter-spacing: 0;
  white-space: nowrap;
  margin-bottom: 2px;
}

.hero-meta div span {
  font-size: 0.72rem;
  color: var(--ink-soft);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.score-card {
  background: var(--chakra);
  color: #fff;
  border-radius: 22px;
  padding: 32px 26px;
  box-shadow: 0 24px 60px rgba(27, 42, 107, 0.35);
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.score-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 10%, rgba(244, 185, 66, 0.25), transparent 45%), repeating-linear-gradient(135deg, transparent 0 26px, rgba(255, 255, 255, 0.035) 26px 27px);
  pointer-events: none;
}

.score-card * {
  position: relative;
}

.score-card-title {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
  font-weight: 700;
}

.score-eq {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 24px;
  margin: 16px 0 10px;
}

.score-eq-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.score-eq .num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3.2rem, 5vw, 4.2rem);
  line-height: 1;
  display: block;
}

.score-eq .num.saff {
  color: var(--gold);
}

.score-eq .lbl {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.8;
  text-align: center;
  display: block;
  margin-top: 6px;
  white-space: nowrap;
}

.score-eq .eq {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  opacity: 0.75;
  line-height: 1;
  margin-top: 0.6rem;
}

.score-note {
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  opacity: 0.85;
  margin-top: 12px;
  white-space: normal;
}

.live-strip {
  margin-top: 22px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 16px 12px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  text-align: center;
}

.live-strip > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.live-strip b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--gold);
  line-height: 1.1;
  margin-bottom: 6px;
  white-space: nowrap;
}

.live-strip span {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  text-transform: uppercase;
  opacity: 0.8;
  line-height: 1.35;
  text-align: center;
  display: block;
}

@media (max-width: 550px) {
  .score-card {
    padding: 24px 18px;
  }
  .score-eq {
    gap: 16px;
  }
  .score-eq .num {
    font-size: 2.8rem;
  }
  .score-eq .eq {
    font-size: 1.8rem;
    margin-top: 0.4rem;
  }
  .score-eq .lbl {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
  }
  .live-strip {
    padding: 14px 6px;
    gap: 4px;
  }
  .live-strip b {
    font-size: 1.1rem;
  }
  .live-strip span {
    font-size: 0.58rem;
    letter-spacing: 0.05em;
  }
}
@media (max-width: 920px) {
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 52px 22px 46px;
  }
}
/* ===== Generic section spacing ===== */
.block {
  padding: 32px 0;
}

.block.alt {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.block h2 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  margin-bottom: 16px;
}

.block h2,
.container h2 {
  text-align: center;
}

.block .sub {
  max-width: 680px;
  color: var(--ink-soft);
  font-size: 1.06rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ===== Story strip (home) ===== */
.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 32px;
}

.story-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--saffron);
}

.story-card:not(:first-child) {
  border-top-color: var(--chakra);
}

.story-card:nth-child(3) {
  border-top-color: var(--green);
}

.story-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.story-card-header h3 {
  margin-bottom: 0;
}

.story-card-header .sc-ic {
  font-size: 1.35rem;
  margin-bottom: 0;
  line-height: 1;
}

.story-card h3 {
  font-size: 1.1rem;
  margin-bottom: 6px;
}

.story-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.45;
}

@media (max-width: 860px) {
  .story-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== Sector marquee ===== */
.sectors {
  margin-top: 40px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius);
  padding: 22px;
  overflow: hidden;
}

.sectors .row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

.sector-chip {
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.sector-chip.s {
  background: rgba(232, 119, 34, 0.18);
  border-color: rgba(232, 119, 34, 0.5);
}

.sector-chip.g {
  background: rgba(14, 122, 61, 0.2);
  border-color: rgba(14, 122, 61, 0.55);
}

@media (max-width: 768px) {
  .sectors {
    padding: 20px 12px;
    margin-top: 24px;
  }
  .sectors .row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    justify-content: stretch !important;
    width: 100% !important;
  }
  .sector-chip {
    padding: 12px 18px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    line-height: 1.3 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
}
/* ===== Stat band ===== */
.stat-band {
  background: linear-gradient(120deg, var(--saffron-deep), var(--saffron));
  color: #fff;
  padding: 56px 0;
}

.stat-band.greenband {
  background: linear-gradient(120deg, var(--green-deep), var(--green));
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
  text-align: center;
}

.stat-grid b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.stat-grid span {
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.9;
  font-weight: 700;
}

@media (max-width: 820px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ===== Teams Grid & Cards ===== */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 44px;
}
@media (max-width: 1200px) {
  .team-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 900px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

.team-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(31, 36, 48, 0.16);
  border-color: rgba(232, 119, 34, 0.4);
}

.team-head {
  padding: 22px 24px 18px;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.team-head::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.team-head .sector {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.9;
}

.team-head h3 {
  font-size: 1.5rem;
  margin-top: 6px;
}

.team-body {
  padding: 20px 24px 24px;
}

.team-body .motto {
  font-family: var(--font-hindi);
  color: var(--chakra);
  font-size: 1.05rem;
  margin-bottom: 10px;
}

.team-body p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-body .plays-for {
  margin-top: 14px;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green-deep);
  display: flex;
  align-items: center;
  gap: 4px;
}

.team-body .plays-for::before {
  content: none;
}

/* ===== Schedule ===== */
.day-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: center;
  margin: 36px 0 22px;
  padding: 6px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.day-tabs::-webkit-scrollbar {
  display: none;
}

.day-tab {
  border: 2px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  padding: 10px 22px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: 0.2s;
  font-family: var(--font-body);
  flex-shrink: 0;
  white-space: nowrap;
}

.day-tab.active {
  background: var(--saffron);
  border-color: var(--saffron);
  color: #fff;
}

@media (max-width: 768px) {
  .day-tabs {
    justify-content: flex-start;
    padding: 6px 22px;
    margin: 28px -22px 18px;
  }
}
.match-list {
  display: grid;
  gap: 14px;
}

.match {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 6px solid var(--saffron);
  border-radius: 12px;
  padding: 18px 22px;
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 0px;
  align-items: center;
  box-shadow: var(--shadow);
}

.match.knockout {
  border-left-color: var(--chakra);
}

.match .mtime {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--chakra);
}

.match .mtime small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  font-weight: 700;
  text-transform: uppercase;
}

.match .teams {
  font-weight: 700;
  font-size: 1.02rem;
}

.match .teams .vs,
.match .vs {
  background: linear-gradient(135deg, #FF6B00 0%, #EA580C 50%, #D97706 100%) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.06em !important;
  padding: 4px 16px !important;
  border-radius: 999px !important;
  box-shadow: 0 3px 10px rgba(234, 88, 12, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.match .tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--ink-soft);
}

.match .tag.final {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--ink);
}

@media (max-width: 720px) {
  .match {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
.sched-note {
  margin-top: 22px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 14px 18px;
}

/* ===== Ambassador ===== */
.amb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 44px;
}

.amb-grid.amb-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1000px) {
  .amb-grid.amb-3 {
    grid-template-columns: 1fr;
  }
}
.amb-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 34px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}

.amb-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--saffron), var(--gold), var(--green));
}

.amb-role {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--saffron-deep);
}

.amb-card h3 {
  font-size: 1.5rem;
  margin: 8px 0 14px;
  color: var(--chakra);
}

.amb-card blockquote {
  font-family: var(--font-hindi);
  font-size: 1.15rem;
  color: var(--ink);
  border-left: 4px solid var(--gold);
  padding-left: 16px;
  margin: 18px 0;
}

.amb-card p {
  color: var(--ink-soft);
  font-size: 0.98rem;
}

.amb-card p + p {
  margin-top: 12px;
}

.amb-quote-sub {
  font-size: 0.88rem;
  opacity: 0.85;
}

.amb-card-split {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: 1fr 230px;
  gap: 34px;
  align-items: flex-start;
}

.amb-card-split .amb-photo {
  float: none !important;
  margin: 0 !important;
  width: 230px !important;
}

.amb-card-body p {
  max-width: 780px;
}

.amb-partners-section {
  margin-top: 44px;
}

.amb-partners-grid {
  margin-top: 32px;
}

.amb-partner-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.amb-partner-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(25, 30, 45, 0.12);
}

.amb-partner-img {
  width: 100% !important;
  aspect-ratio: 16/9 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin: 0 0 16px 0 !important;
  border: 1px solid var(--line) !important;
  background: #ffffff !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 16px !important;
}
.amb-partner-img img {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  -o-object-position: center !important;
     object-position: center !important;
  margin: auto !important;
  transition: transform 0.4s ease !important;
}
.amb-partner-img:hover img {
  transform: scale(1.04) !important;
}

.amb-partner-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.amb-partner-body .amb-role {
  margin-bottom: 4px;
}
.amb-partner-body h3 {
  font-size: 1.22rem;
  margin: 4px 0 8px 0;
  color: var(--chakra);
}
.amb-partner-body p {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 860px) {
  .amb-grid {
    grid-template-columns: 1fr;
  }
  .amb-card-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .amb-card-split .amb-photo {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 3/4 !important;
  }
}
/* ===== Stalls ===== */
.stall-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 36px;
  align-items: center;
  margin-top: 44px;
}

.stall-grid .sub {
  text-align: left;
  margin-left: 0;
}

.stall-visual {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px;
  box-shadow: var(--shadow);
}

.stall-count {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 4rem;
  color: var(--saffron);
  line-height: 1;
}

.stall-count small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
  margin-top: 6px;
}

.stall-points {
  list-style: none;
  margin-top: 22px;
  display: grid;
  gap: 12px;
}

.stall-points li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.97rem;
  color: var(--ink-soft);
}

.stall-points li::before {
  content: "✓";
  flex: 0 0 auto;
  color: var(--green);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.5;
}

@media (max-width: 880px) {
  .stall-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== Media ===== */
.press-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 44px;
}

.press-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: var(--shadow);
}

.press-card .outlet {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--chakra);
  margin-bottom: 10px;
}

.press-card p {
  font-size: 0.95rem;
  color: var(--ink-soft);
}

@media (max-width: 860px) {
  .press-grid {
    grid-template-columns: 1fr;
  }
}
.zariya {
  margin-top: 36px;
  background: var(--ink);
  color: #fff;
  border-radius: 20px;
  padding: 40px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: center;
}

.zariya-photo {
  width: 360px;
  max-width: 100%;
}

.zariya h3 {
  font-size: 1.6rem;
  color: var(--gold);
}

.zariya p {
  opacity: 0.85;
  max-width: 640px;
  margin-top: 10px;
}

@media (max-width: 760px) {
  .zariya {
    grid-template-columns: 1fr;
    padding: 24px;
  }
  .zariya-photo {
    width: 100% !important;
    max-width: 100% !important;
  }
}
/* ===== FAQ ===== */
.faq-list {
  margin-top: 40px;
  display: grid;
  gap: 14px;
}

.faq-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.faq-q {
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 24px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--ink);
}

.faq-q .icon {
  flex: 0 0 auto;
  color: var(--saffron);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  transition: 0.25s;
}

.faq-item.open .faq-q .icon {
  transform: rotate(45deg);
  color: var(--green);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  color: var(--ink-soft);
  font-size: 0.97rem;
}

.faq-a-inner {
  padding: 0 24px 22px;
}

.faq-item.open .faq-a {
  max-height: 400px;
}

/* ===== Contact ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 44px;
}

.contact-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 32px;
  box-shadow: var(--shadow);
}

.contact-card h3 {
  font-size: 1.2rem;
  margin-bottom: 16px;
  color: var(--chakra);
}

.contact-line {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.98rem;
}

.contact-line:last-child {
  border: none;
}

.contact-line .ic {
  flex: 0 0 auto;
  font-size: 1.25rem;
  line-height: 1.5;
  width: 30px;
  text-align: center;
}

.contact-line b {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.contact-line a {
  color: var(--chakra);
  font-weight: 700;
  text-decoration: none;
}

.contact-line a:hover {
  text-decoration: underline;
}

@media (max-width: 820px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== CTA banner ===== */
.cta-banner {
  margin-top: 20px;
  border-radius: 22px;
  overflow: hidden;
  background: var(--chakra);
  color: #fff;
  padding: 52px 40px;
  text-align: center;
  position: relative;
}

.cta-banner.margin-lg {
  margin-top: 44px;
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 200px at 15% 0%, rgba(232, 119, 34, 0.35), transparent 60%), radial-gradient(600px 200px at 85% 100%, rgba(14, 122, 61, 0.4), transparent 60%);
}

.cta-banner * {
  position: relative;
}

.cta-banner h2 {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
}

.cta-banner p {
  opacity: 0.85;
  max-width: 620px;
  margin: 14px auto 26px;
}

/* ===== Contact Page Custom CTA Banner ===== */
.contact-cta-banner {
  margin-top: 36px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 48px 56px;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.05) 0%, rgba(15, 23, 42, 0.45) 45%, rgba(15, 23, 42, 0.8) 100%), url("/assets/images/contact/cta_contact.png") no-repeat center center/cover;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.contact-cta-banner .contact-cta-content {
  max-width: 650px;
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.contact-cta-banner .contact-cta-content .contact-cta-eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: #FF7700;
  background: rgba(255, 119, 0, 0.15);
  border: 1px solid rgba(255, 119, 0, 0.35);
  padding: 5px 16px;
  border-radius: 999px;
  margin-bottom: 2px;
}
.contact-cta-banner .contact-cta-content h2 {
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
}
.contact-cta-banner .contact-cta-content .contact-cta-subtitle {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 8px 0;
  max-width: 520px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.contact-cta-banner .contact-cta-content .contact-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.contact-cta-banner .contact-cta-content .contact-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 34px;
  border-radius: 99px;
  font-size: 1rem;
  font-weight: 700;
  background: var(--saffron);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(232, 119, 34, 0.45);
  transition: all 0.3s ease;
  align-self: center;
}
.contact-cta-banner .contact-cta-content .contact-cta-btn:hover {
  background: var(--saffron-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(232, 119, 34, 0.6);
}
.contact-cta-banner .contact-cta-content .contact-cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 99px;
  font-size: 0.92rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s ease;
}
.contact-cta-banner .contact-cta-content .contact-cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.45);
  transform: translateY(-2px);
}
@media (max-width: 880px) {
  .contact-cta-banner {
    padding: 36px 24px;
    justify-content: center;
    min-height: 320px;
  }
  .contact-cta-banner .contact-cta-content {
    max-width: 100%;
    text-align: center;
    align-items: center;
  }
}

/* ===== Social Ambassador Page Beyond Boundaries CTA Banner ===== */
.beyond-boundaries-cta-banner {
  margin-top: 40px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 36px 48px;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.6) 40%, rgba(15, 23, 42, 0.88) 100%), url("/assets/images/social_ambassador/beyond_boundaries.png") no-repeat center center/cover;
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.beyond-boundaries-cta-banner .bb-cta-content {
  max-width: 540px;
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  border: none;
}
.beyond-boundaries-cta-banner .bb-cta-content h2 {
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.02em;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
}
.beyond-boundaries-cta-banner .bb-cta-content p {
  font-size: 1.02rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.beyond-boundaries-cta-banner .bb-cta-content .bb-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 34px;
  border-radius: 99px;
  font-size: 1.02rem;
  font-weight: 700;
  background: var(--saffron);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(232, 119, 34, 0.45);
  transition: all 0.3s ease;
  margin-top: 4px;
}
.beyond-boundaries-cta-banner .bb-cta-content .bb-cta-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 32px rgba(232, 119, 34, 0.6);
  background: var(--saffron-deep);
}

@media (max-width: 860px) {
  .beyond-boundaries-cta-banner {
    justify-content: center;
    padding: 28px 20px;
    min-height: 320px;
  }
  .beyond-boundaries-cta-banner .bb-cta-content {
    max-width: 100%;
    gap: 10px;
  }
}
/* ===== Food Festival Custom CTA Banner ===== */
.food-festival-cta-banner {
  margin-top: 44px;
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 48px 56px;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.02) 0%, rgba(15, 23, 42, 0.45) 40%, rgba(15, 23, 42, 0.88) 100%), url("/assets/images/food-festival/food-festival-cta.png") no-repeat center center/100% 100%;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.food-festival-cta-banner .food-festival-cta-content {
  max-width: 720px;
  width: 65%;
  position: relative;
  z-index: 2;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.food-festival-cta-banner .food-festival-cta-content h2 {
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin: 0 0 16px 0;
  letter-spacing: -0.01em;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.7);
}
.food-festival-cta-banner .food-festival-cta-content p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 28px 0;
  text-align: center;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}
.food-festival-cta-banner .food-festival-cta-content .food-festival-cta-btn-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
.food-festival-cta-banner .food-festival-cta-content .food-festival-cta-btn-wrap .btn {
  padding: 14px 38px;
  font-size: 1rem;
  font-weight: 700;
  border-radius: 99px;
  box-shadow: 0 10px 24px rgba(232, 119, 34, 0.45);
  transition: all 0.25s ease;
}
.food-festival-cta-banner .food-festival-cta-content .food-festival-cta-btn-wrap .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(232, 119, 34, 0.6);
}
@media (max-width: 900px) {
  .food-festival-cta-banner {
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
    min-height: 340px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.88) 100%), url("/assets/images/food-festival/food-festival-cta.png") no-repeat center center/cover;
  }
  .food-festival-cta-banner .food-festival-cta-content {
    width: 100%;
    max-width: 100%;
  }
}

/* ===== Schedule Countdown ===== */
.countdown-card {
  margin-top: 40px;
  background: var(--chakra);
  color: #fff;
  border-radius: 20px;
  padding: 34px 30px;
  box-shadow: 0 24px 60px rgba(27, 42, 107, 0.3);
  position: relative;
  overflow: hidden;
}

.countdown-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 220px at 90% 0%, rgba(244, 185, 66, 0.22), transparent 55%), repeating-linear-gradient(135deg, transparent 0 26px, rgba(255, 255, 255, 0.035) 26px 27px);
}

.countdown-card * {
  position: relative;
}

.cd-label {
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 16px;
}

.cd-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 620px;
  margin: 0 auto;
}

.cd-cell {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  padding: 16px 8px;
  text-align: center;
}

.cd-cell b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 4.5vw, 2.6rem);
  color: var(--gold);
}

.cd-cell span {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.8;
  font-weight: 700;
}

.cd-foot {
  text-align: center;
  font-size: 0.9rem;
  opacity: 0.85;
  margin-top: 16px;
}

@media (max-width: 550px) {
  .countdown-card {
    padding: 24px 16px;
  }
  .cd-label {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    line-height: 1.5;
    opacity: 1;
    color: var(--gold);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 99px;
    padding: 8px 12px;
    max-width: 290px;
    margin: 0 auto 18px;
    font-weight: 700;
  }
  .cd-grid {
    gap: 8px;
  }
  .cd-cell {
    border-radius: 10px;
    padding: 12px 4px;
  }
  .cd-cell b {
    font-size: 1.5rem;
  }
  .cd-cell span {
    font-size: 0.58rem;
    letter-spacing: 0.1em;
  }
  .cd-foot {
    font-size: 0.8rem;
    margin-top: 14px;
  }
}
.format-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 40px;
}

.format-step {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
  position: relative;
}

.format-step::before {
  content: attr(data-n);
  position: absolute;
  top: -14px;
  left: 20px;
  background: var(--saffron);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  padding: 4px 12px;
  border-radius: 999px;
}

.format-step:nth-child(2)::before {
  background: var(--chakra);
}

.format-step:nth-child(3)::before {
  background: var(--green);
}

.format-step:nth-child(4)::before {
  background: var(--gold);
  color: var(--ink);
}

.format-step h3 {
  font-size: 0.98rem;
  margin: 8px 0 8px;
}

.format-step p {
  font-size: 0.86rem;
  color: var(--ink-soft);
}

@media (max-width: 880px) {
  .format-strip {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .format-strip {
    grid-template-columns: 1fr;
  }
}
.day-theme {
  margin: 6px 0 22px;
  font-family: var(--font-hindi);
  font-size: 1.15rem;
  color: var(--chakra);
  text-align: center;
}

.day-group {
  margin-top: 34px;
}

.day-group:first-child {
  margin-top: 10px;
}

.day-group-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}

.day-group-head h3 {
  font-size: 1.15rem;
  color: var(--chakra);
  white-space: nowrap;
}

.day-group-head::before,
.day-group-head::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--line));
}

.day-group-head::after {
  background: linear-gradient(90deg, var(--line), transparent);
}

.day-group .day-theme {
  margin: 0 0 18px;
}

/* ===== Schedule Match Cards & Tabs CSS Classes ===== */
.match {
  display: grid;
  grid-template-columns: 60px 125px 1fr auto;
  gap: 16px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 6px solid var(--saffron);
  border-radius: 14px;
  padding: 18px 22px;
  box-shadow: var(--shadow);
  transition: all 0.2s ease;
}

.match.friendship-special-card {
  grid-template-columns: 55px 130px 1fr auto;
  background: #FFFDF9;
  border: 1.5px solid rgba(232, 119, 34, 0.3);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(232, 119, 34, 0.08);
}

.match.match-final {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 2px solid #F59E0B;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.18);
}

.match.match-knockout {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 1.5px solid #60A5FA;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.12);
  border-left-color: var(--chakra);
}

.match .mno {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: #fff;
  background: var(--saffron);
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.match.friendship-special-card .mno {
  background: linear-gradient(135deg, #D97706 0%, #C2410C 100%);
  font-weight: 900;
  font-size: 0.92rem;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
}

.match .mtime {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.match .mtime .mtime-date {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.match .mtime .mtime-date-bold {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--chakra, #1B2A6B);
}

.match .mtime .mtime-clock {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--chakra);
}

.match .mtime .mtime-clock-saffron {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--saffron, #E87722);
}

.match .mtime small {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  font-weight: 700;
  text-transform: uppercase;
}

.match .teams {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 700;
  font-size: 1.02rem;
}

.match .teams-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.match .team-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.match .team-info {
  display: flex;
  flex-direction: column;
}

.match .team-name {
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.match .team-name-friendship {
  font-size: 1.15rem;
  font-weight: 700;
  color: #7F1D1D;
  line-height: 1.2;
}

.match .team-sector {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--saffron);
  margin-top: 2px;
}

.match .team-emoji {
  font-size: 1.35rem;
}

.team-logo-img {
  width: 56px;
  height: 56px;
  -o-object-fit: contain;
     object-fit: contain;
  background: #ffffff;
  border-radius: 10px;
  padding: 3px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(232, 119, 34, 0.2);
  flex-shrink: 0;
}

.match .vs {
  background: linear-gradient(135deg, #FF6B00 0%, #EA580C 50%, #D97706 100%);
  color: #FFFFFF;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding: 4px 16px;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(234, 88, 12, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.match .meta-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
}

.match .tag-friendship {
  background: linear-gradient(90deg, #E87722 0%, #9333EA 100%);
  color: #FFFFFF;
  padding: 6px 16px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 14px rgba(147, 51, 234, 0.35);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.meal-chip {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: #EDF7EF;
  border: 1px solid #CDE8D3;
  color: var(--green-deep);
  border-radius: 999px;
  padding: 6px 14px;
  white-space: nowrap;
}

.match-narrative-row {
  grid-column: 1/-1;
  border-top: 1px solid var(--line, #EBE2D6);
  margin-top: 10px;
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.narrative-badge {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #D97706;
  background: rgba(217, 119, 6, 0.12);
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.narrative-text {
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.45;
}

.day-tab.friendship-tab {
  background: linear-gradient(135deg, #D97706, #EA580C) !important;
  color: #FFFFFF !important;
  border-color: #D97706 !important;
}

@media (max-width: 991px) and (min-width: 640px) {
  .match,
  .match.friendship-special-card {
    grid-template-columns: 50px 110px 1fr auto;
    gap: 12px;
    padding: 14px 16px;
  }
}
@media (max-width: 639px) {
  .match,
  .match.friendship-special-card {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    gap: 10px 12px !important;
    padding: 14px 14px !important;
    border-left-width: 5px !important;
  }
  .match .mno {
    grid-column: 1;
    grid-row: 1;
    width: 42px !important;
    height: 42px !important;
    font-size: 0.82rem !important;
  }
  .match .mtime {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .match .teams {
    grid-column: 1/-1;
    grid-row: 2;
    width: 100%;
  }
  .match .teams-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100%;
  }
  .match .teams-row .vs {
    align-self: center !important;
    margin: 6px auto !important;
    text-align: center !important;
  }
  .match .meta-col {
    grid-column: 1/-1;
    grid-row: 3;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100%;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px dashed var(--line);
  }
  .team-logo-img {
    width: 44px !important;
    height: 44px !important;
  }
}
.marquee-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}

.marquee-card {
  border-radius: 18px;
  padding: 28px;
  color: #fff;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.marquee-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.marquee-bg-logos {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.marquee-bg-logos .bg-logo {
  position: absolute;
  width: 90px;
  height: 90px;
  opacity: 0.18;
  mix-blend-mode: overlay;
  filter: grayscale(1) brightness(1.8);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  -o-object-fit: contain;
     object-fit: contain;
  z-index: 2;
}

.marquee-bg-logos .bg-logo-left {
  left: 8px;
  bottom: 8px;
  transform: rotate(-10deg);
}

.marquee-bg-logos .bg-logo-right {
  right: 8px;
  bottom: 8px;
  transform: rotate(10deg);
}

.marquee-bg-logos .bg-vs {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.05);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.marquee-card:hover .bg-vs {
  transform: translateX(-50%) rotate(0deg) scale(1.06);
  color: rgba(255, 255, 255, 0.09);
}

.marquee-card:hover .bg-logo-left {
  transform: scale(1.08) rotate(-5deg);
  opacity: 0.26;
}

.marquee-card:hover .bg-logo-right {
  transform: scale(1.08) rotate(5deg);
  opacity: 0.26;
}

.marquee-card-content {
  position: relative;
  z-index: 2;
}

.marquee-card::before {
  content: "";
  position: absolute;
  left: -40px;
  bottom: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  z-index: 1;
}

.marquee-card::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  z-index: 1;
}

.marquee-card .tagline {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.85;
}

.marquee-card h3 {
  font-size: 1.25rem;
  margin: 8px 0 12px;
}

.marquee-card p {
  font-size: 0.92rem;
  opacity: 0.92;
  position: relative;
}

@media (max-width: 860px) {
  .marquee-grid {
    grid-template-columns: 1fr;
  }
}
.points-wrap {
  margin-top: 40px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.points-head {
  padding: 20px 24px;
  background: var(--ink);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.points-head h3 {
  font-size: 1.05rem;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.points-head span {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.75;
}

.points-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.points-table th {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 2px solid var(--line);
}

.points-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.points-table tr:last-child td {
  border-bottom: none;
}

.points-table .tname {
  font-weight: 700;
}

.points-table .tname small {
  display: block;
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.points-table .num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.pt-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  .points-head {
    padding: 14px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .points-table {
    min-width: 560px;
  }
  .points-table th,
  .points-table td {
    padding: 10px 10px;
    font-size: 0.8rem;
  }
}
/* ===== FAQ ===== */
.faq-hero-q {
  margin-top: 40px;
  background: var(--chakra);
  color: #fff;
  border-radius: 20px;
  padding: 36px 32px;
  box-shadow: 0 24px 60px rgba(27, 42, 107, 0.28);
  position: relative;
  overflow: hidden;
  text-align: center;
}

.faq-hero-q::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 220px at 88% 0%, rgba(244, 185, 66, 0.22), transparent 55%), repeating-linear-gradient(135deg, transparent 0 26px, rgba(255, 255, 255, 0.035) 26px 27px);
}

.faq-hero-q * {
  position: relative;
}

.faq-hero-q .lbl {
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.85;
  font-weight: 700;
}

.faq-hero-q h3 {
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  margin: 10px 0 14px;
  color: var(--gold);
}

.faq-hero-q p {
  opacity: 0.92;
  font-size: 1rem;
  margin: 0 auto 12px;
}

.faq-hero-q p:last-child {
  margin-bottom: 0;
}

.faq-toolbar {
  margin-top: 44px;
  display: grid;
  gap: 18px;
}

.faq-search {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}

.faq-search input {
  width: 100%;
  padding: 16px 20px 16px 52px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  box-shadow: var(--shadow);
}

.faq-search input:focus {
  outline: none;
  border-color: var(--saffron);
}

.faq-search .mag {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  opacity: 0.7;
}

.faq-cats {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: center;
  padding: 6px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.faq-cats::-webkit-scrollbar {
  display: none;
}

.faq-cat {
  border: 2px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  padding: 9px 20px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: 0.2s;
  font-family: var(--font-body);
  color: var(--ink-soft);
  flex-shrink: 0;
  white-space: nowrap;
}

.faq-cat:hover {
  border-color: var(--saffron);
}

.faq-cat.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

@media (max-width: 768px) {
  .faq-cats {
    justify-content: flex-start;
    padding: 6px 22px;
    margin: 0 -22px;
  }
}
.faq-group-title {
  margin: 36px 0 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--chakra);
  display: flex;
  align-items: center;
  gap: 12px;
}

.faq-group-title::after {
  content: "";
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--line), transparent);
}

.faq-group-sub {
  font-family: var(--font-hindi);
  color: var(--ink-soft);
  font-size: 1rem;
  margin-bottom: 16px;
}

.faq-empty {
  margin-top: 30px;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 14px;
  padding: 28px;
  text-align: center;
  color: var(--ink-soft);
  display: none;
}

.faq-help {
  margin-top: 56px;
  background: url("/assets/images/faq/faq.png") no-repeat center right/cover;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 44px 48px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 320px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
  position: relative;
  overflow: hidden;
}
.faq-help .faq-help-content {
  max-width: 580px;
  width: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 0;
}
.faq-help .faq-help-content h3 {
  font-size: clamp(1.35rem, 2.2vw, 1.65rem);
  font-weight: 700;
  color: var(--green-deep);
  margin: 0 0 12px 0;
  line-height: 1.25;
  text-align: center;
}
.faq-help .faq-help-content p {
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.6;
  margin: 0 0 24px 0;
  text-align: center;
}
.faq-help .faq-help-content .faq-help-btn-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}
.faq-help .faq-help-content .faq-help-btn-wrap .btn {
  padding: 13px 36px;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 99px;
  box-shadow: 0 8px 20px rgba(22, 101, 52, 0.25);
  transition: all 0.25s ease;
}
.faq-help .faq-help-content .faq-help-btn-wrap .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(22, 101, 52, 0.35);
}
@media (max-width: 960px) {
  .faq-help {
    padding: 32px 24px;
  }
  .faq-help .faq-help-content {
    width: 100%;
    max-width: 100%;
    padding: 28px 24px;
  }
}

/* ===== Contact ===== */
.door-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 44px;
}

.door {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 24px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: 0.25s;
  position: relative;
  overflow: hidden;
}

.door::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
}

.door.d1::before {
  background: var(--saffron);
}

.door.d2::before {
  background: var(--chakra);
}

.door.d3::before {
  background: var(--green);
}

.door.d4::before {
  background: var(--gold);
}

.door:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(31, 36, 48, 0.14);
}

.door-img-wrap {
  margin: -26px -24px 16px -24px;
  width: calc(100% + 48px);
  aspect-ratio: 16/10;
  min-height: 200px;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.door-img-wrap img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  transition: transform 0.4s ease;
}

.door:hover .door-img-wrap img {
  transform: scale(1.05);
}

.door .ic {
  font-size: 1.9rem;
}

.door h3 {
  font-size: 1.05rem;
}

.door .who {
  font-family: var(--font-hindi);
  color: var(--chakra);
  font-size: 0.98rem;
}

.door p {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft);
  flex: 1;
}

.door a {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--saffron-deep);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.door a:hover {
  text-decoration: underline;
}

@media (max-width: 980px) {
  .door-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .door-grid {
    grid-template-columns: 1fr;
  }
}
.msg-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  margin-top: 52px;
  align-items: stretch;
}

.msg-grid > div > .msg-card {
  height: 100%;
}

/* ===== Section 3: All Our Addresses, One Place ===== */
.addr-band {
  margin-top: 28px;
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.85);
  border-radius: 24px;
  padding: 24px 28px;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03);
}
.addr-band .addr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.addr-band .addr-header h3 {
  font-size: 1.22rem;
  font-weight: 700;
  color: #0F2444;
  margin: 0;
  letter-spacing: -0.01em;
}
.addr-band .addr-header .addr-badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #EA580C;
  background: #FFF7ED;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid #FED7AA;
  white-space: nowrap;
}
.addr-band .addr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 0;
}
.addr-band .addr-card {
  background: #F8FAFC;
  border: 1px solid #EDF2F7;
  border-radius: 16px;
  padding: 16px 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  transition: all 0.25s ease;
  min-width: 0;
}
.addr-band .addr-card:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  border-color: #FED7AA;
}
.addr-band .addr-card .addr-ic-box {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  color: #EA580C;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.addr-band .addr-card .addr-ic-box svg {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}
.addr-band .addr-card .addr-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.addr-band .addr-card .addr-info .addr-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748B;
  margin-bottom: 2px;
  display: block;
}
.addr-band .addr-card .addr-info .addr-values {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.addr-band .addr-card .addr-info .addr-values a {
  font-size: 0.96rem;
  font-weight: 700;
  color: #0F2444;
  text-decoration: none;
  transition: color 0.2s ease;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.addr-band .addr-card .addr-info .addr-values a:hover {
  color: #EA580C;
}
.addr-band .soc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.addr-band .soc-row .soc-ic {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0F2444;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  flex: 0 0 auto;
  text-decoration: none;
}
.addr-band .soc-row .soc-ic svg {
  width: 15px;
  height: 15px;
  fill: #ffffff;
}
.addr-band .soc-row .soc-ic:hover {
  background: #EA580C;
  transform: translateY(-2px) scale(1.08);
}
@media (max-width: 768px) {
  .addr-band {
    padding: 20px 18px;
  }
  .addr-band .addr-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ===== Section 4: Three Direct Guarantees Strip ===== */
.promise-strip,
.strip {
  margin-top: 24px;
  background: #F4FAF6;
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 20px;
  padding: 24px 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.04);
}
.promise-strip > div,
.strip > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.promise-strip > div b, .promise-strip > div h4,
.strip > div b,
.strip > div h4 {
  display: block;
  font-size: 0.96rem;
  font-weight: 800;
  color: #0E7A3D;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.3;
}
.promise-strip > div span, .promise-strip > div p,
.strip > div span,
.strip > div p {
  display: block;
  font-size: 0.85rem;
  color: #475569;
  margin: 0;
  line-height: 1.4;
  font-weight: 500;
}
@media (max-width: 768px) {
  .promise-strip,
  .strip {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 20px 24px;
  }
}

@media (max-width: 880px) {
  .msg-grid {
    grid-template-columns: 1fr;
  }
}
.msg-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--shadow);
}

.msg-card h3 {
  font-size: 1.25rem;
  color: var(--chakra);
  margin-bottom: 6px;
}

/* Venue Stadium Bullets List (Contact Page) */
.venue-bullets {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 22px;
}
.venue-bullets .venue-bullet {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.venue-bullets .venue-bullet .v-ic {
  width: 42px;
  height: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 10px;
  background: #FFF7ED;
  border: 1.2px solid #FED7AA;
  color: #EA580C;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.25s ease;
}
.venue-bullets .venue-bullet .v-ic svg {
  width: 20px;
  height: 20px;
  stroke: #EA580C;
  transition: transform 0.2s ease;
}
.venue-bullets .venue-bullet:hover .v-ic {
  background: #FFEDD5;
  border-color: #FDBA74;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(234, 88, 12, 0.12);
}
.venue-bullets .venue-bullet:hover .v-ic svg {
  transform: scale(1.06);
}
.venue-bullets .venue-bullet p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: #475569;
  flex: 1;
}
.venue-bullets .venue-bullet p strong {
  font-weight: 700;
  color: #1E293B;
}

.form-success-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.14) 100%);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 14px;
  margin: 16px 0 20px 0;
  position: relative;
  animation: fadeInDown 0.3s ease;
}
.form-success-banner .success-ic {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #10b981;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}
.form-success-banner .success-text {
  flex: 1;
}
.form-success-banner .success-text strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: #065f46;
  margin-bottom: 2px;
}
.form-success-banner .success-text p {
  font-size: 0.88rem;
  color: #047857;
  margin: 0;
  line-height: 1.45;
  font-weight: 500;
}
.form-success-banner .close-success {
  background: transparent;
  border: none;
  font-size: 1.3rem;
  line-height: 1;
  color: #047857;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.form-success-banner .close-success:hover {
  opacity: 1;
}

.msg-card .hint {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin-bottom: 22px;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 7px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 2px solid var(--line);
  background: var(--cream);
  font-family: var(--font-body);
  font-size: 0.98rem;
  color: var(--ink);
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--saffron);
}

.msg-note {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 12px;
}

.promise-strip {
  margin-top: 24px;
  background: linear-gradient(120deg, #EDF7EF, #FFF4E8);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  text-align: center;
}

.promise-strip b {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--green-deep);
  letter-spacing: 0.04em;
}

.promise-strip span {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 720px) {
  .promise-strip {
    grid-template-columns: 1fr;
  }
}
.reach-list {
  list-style: none;
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.reach-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

.reach-list li .rc {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 153, 51, 0.12);
  border: 1px solid rgba(255, 153, 51, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--saffron);
  margin-top: 2px;
}

.story-card .sc-ic {
  font-size: 2.1rem;
  margin-bottom: 12px;
  line-height: 1;
}

/* ===== Home: USP, how-it-works, teams strip, quotes, press ===== */
.usp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}

.usp {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: var(--shadow);
  display: flex;
  gap: 16px;
  align-items: flex-start;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.usp:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.2);
  border-color: rgba(232, 119, 34, 0.35);
}
.usp:hover .ic.ic-orange {
  background: rgba(232, 119, 34, 0.18);
  border-color: rgba(232, 119, 34, 0.45);
}
.usp:hover .ic.ic-emerald {
  background: rgba(16, 185, 129, 0.18);
  border-color: rgba(16, 185, 129, 0.45);
}
.usp:hover .ic.ic-blue {
  background: rgba(37, 99, 235, 0.18);
  border-color: rgba(37, 99, 235, 0.45);
}
.usp:hover .ic.ic-purple {
  background: rgba(139, 92, 246, 0.18);
  border-color: rgba(139, 92, 246, 0.45);
}
.usp:hover .ic.ic-amber {
  background: rgba(217, 119, 6, 0.18);
  border-color: rgba(217, 119, 6, 0.45);
}
.usp:hover .ic.ic-rose {
  background: rgba(225, 29, 72, 0.18);
  border-color: rgba(225, 29, 72, 0.45);
}

.usp .ic {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  background: rgba(232, 119, 34, 0.08);
  border: 1px solid rgba(232, 119, 34, 0.2);
  color: #E87722;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.usp .ic.ic-orange {
  background: rgba(232, 119, 34, 0.1);
  border: 1px solid rgba(232, 119, 34, 0.25);
  color: #E87722;
}
.usp .ic.ic-emerald {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  color: #10B981;
}
.usp .ic.ic-blue {
  background: rgba(37, 99, 235, 0.1);
  border: 1px solid rgba(37, 99, 235, 0.25);
  color: #2563EB;
}
.usp .ic.ic-purple {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(139, 92, 246, 0.25);
  color: #8B5CF6;
}
.usp .ic.ic-amber {
  background: rgba(217, 119, 6, 0.1);
  border: 1px solid rgba(217, 119, 6, 0.25);
  color: #D97706;
}
.usp .ic.ic-rose {
  background: rgba(225, 29, 72, 0.1);
  border: 1px solid rgba(225, 29, 72, 0.25);
  color: #E11D48;
}

.usp h3 {
  font-size: 0.98rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--ink);
}

.usp p {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .usp-grid {
    grid-template-columns: 1fr;
  }
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 40px;
  position: relative;
}

.how-step {
  padding: 24px 18px;
  text-align: center;
  position: relative;
}

.how-step .ball {
  margin: 0 auto 10px;
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.how-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -12px;
  top: 26px;
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--line);
}

.how-step h3 {
  font-size: 1.12rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.how-step p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.steps-ctas {
  margin-top: 28px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .steps-ctas {
    flex-wrap: nowrap;
    width: 100%;
  }
  .steps-ctas > a {
    flex: 1;
    text-align: center;
    white-space: nowrap;
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 0.85rem !important;
  }
}
@media (max-width: 820px) {
  .how-grid {
    grid-template-columns: 1fr;
  }
  .how-step {
    padding: 16px 22px;
  }
  .how-step:not(:last-child)::after {
    display: none;
  }
}
/* ===== Testimonials Section ===== */
.testimonials-section {
  padding: 64px 0 48px 0;
  position: relative;
}
.testimonials-section .testimonials-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 48px auto;
}
.testimonials-section .testimonials-header .testimonials-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(232, 119, 34, 0.12) 0%, rgba(245, 158, 11, 0.12) 100%);
  border: 1px solid rgba(232, 119, 34, 0.3);
  color: #C85A0F;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(232, 119, 34, 0.08);
}
.testimonials-section .testimonials-header .testimonials-title {
  font-size: clamp(2.1rem, 3.8vw, 2.9rem);
  font-weight: 900;
  color: #1F2430;
  letter-spacing: -0.02em;
  line-height: 1.14;
  margin: 0 0 16px 0;
}
.testimonials-section .testimonials-header .testimonials-title .highlight-text {
  color: #E87722;
}
.testimonials-section .testimonials-header .testimonials-sub {
  font-size: 1.06rem;
  color: #5A6072;
  margin: 0;
  line-height: 1.6;
  font-weight: 500;
}
.testimonials-section .testimonials-slider-wrapper {
  position: relative;
  width: 100%;
}
.testimonials-section .testimonials-slider-wrapper .testimonials-slider-viewport {
  overflow: hidden;
  position: relative;
  padding: 8px 4px 16px 4px;
  margin: 0 -4px;
}
.testimonials-section .testimonials-slider-wrapper .slider-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(232, 119, 34, 0.35);
  color: #C85A0F;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(232, 119, 34, 0.12);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 20;
}
.testimonials-section .testimonials-slider-wrapper .slider-nav-btn.prev-btn {
  left: -20px;
}
.testimonials-section .testimonials-slider-wrapper .slider-nav-btn.next-btn {
  right: -20px;
}
.testimonials-section .testimonials-slider-wrapper .slider-nav-btn svg {
  transition: transform 0.2s ease;
}
.testimonials-section .testimonials-slider-wrapper .slider-nav-btn:hover {
  background: linear-gradient(135deg, #E87722, #F59E0B);
  border-color: transparent;
  color: #FFFFFF;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 12px 28px rgba(232, 119, 34, 0.35);
}
.testimonials-section .testimonials-slider-wrapper .slider-nav-btn:hover svg {
  transform: scale(1.15);
}
.testimonials-section .testimonials-slider-wrapper .slider-nav-btn:active {
  transform: translateY(-50%) scale(0.95);
}
@media (max-width: 1024px) {
  .testimonials-section .testimonials-slider-wrapper .slider-nav-btn.prev-btn {
    left: -10px;
  }
  .testimonials-section .testimonials-slider-wrapper .slider-nav-btn.next-btn {
    right: -10px;
  }
}
@media (max-width: 640px) {
  .testimonials-section .testimonials-slider-wrapper .slider-nav-btn {
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  }
  .testimonials-section .testimonials-slider-wrapper .slider-nav-btn.prev-btn {
    left: 4px;
  }
  .testimonials-section .testimonials-slider-wrapper .slider-nav-btn.next-btn {
    right: 4px;
  }
  .testimonials-section .testimonials-slider-wrapper .slider-nav-btn svg {
    width: 16px;
    height: 16px;
  }
}
.testimonials-section .testimonials-slider-track {
  display: flex;
  gap: 24px;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.testimonials-section .testimonial-card {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  border-radius: 24px;
  padding: 32px 24px 24px 24px;
  border-style: solid;
  border-width: 1px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06), 0 2px 8px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: space-between;
  box-sizing: border-box;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}
.testimonials-section .testimonial-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 48px rgba(27, 42, 107, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
  border-color: rgba(232, 119, 34, 0.45) !important;
}
.testimonials-section .testimonial-card .card-accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
}
.testimonials-section .testimonial-card .avatar-wrapper {
  position: relative;
  margin-bottom: 18px;
}
.testimonials-section .testimonial-card .avatar-wrapper .avatar-ring {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 4px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}
.testimonials-section .testimonial-card .avatar-wrapper .badge-verified {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: #0E7A3D;
  color: #FFFFFF;
  font-size: 0.72rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #FFFFFF;
  font-weight: 900;
}
.testimonials-section .testimonial-card .leader-info {
  margin-bottom: 18px;
  width: 100%;
}
.testimonials-section .testimonial-card .leader-info .leader-name {
  font-size: 1.12rem;
  font-weight: 900;
  color: #111827;
  line-height: 1.25;
  margin: 0 0 4px 0;
}
.testimonials-section .testimonial-card .leader-info .leader-role {
  font-size: 0.8rem;
  font-weight: 700;
  color: #C85A0F;
  line-height: 1.3;
}
.testimonials-section .testimonial-card .leader-info .leader-ministry {
  font-size: 0.72rem;
  font-weight: 600;
  color: #64748B;
  margin-top: 3px;
}
.testimonials-section .testimonial-card .quote-box {
  position: relative;
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.18);
  border-radius: 16px;
  padding: 16px 16px 14px 16px;
  width: 100%;
  text-align: center;
}
.testimonials-section .testimonial-card .quote-box .quote-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: #1F2430;
  font-style: italic;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.testimonials-section .testimonial-card .read-letter-btn {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(232, 119, 34, 0.08) 0%, rgba(245, 158, 11, 0.12) 100%);
  border: 1px solid rgba(232, 119, 34, 0.35);
  color: #C85A0F;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(232, 119, 34, 0.08);
}
.testimonials-section .testimonial-card .read-letter-btn .btn-icon {
  font-size: 0.95rem;
  transition: transform 0.25s ease;
}
.testimonials-section .testimonial-card .read-letter-btn:hover {
  background: linear-gradient(135deg, #E87722 0%, #F59E0B 100%);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 8px 20px rgba(232, 119, 34, 0.3);
  transform: translateY(-2px);
}
.testimonials-section .testimonial-card .read-letter-btn:hover .btn-icon {
  transform: scale(1.2) rotate(-5deg);
}
.testimonials-section .testimonial-card .read-letter-btn:active {
  transform: translateY(0);
}
.testimonials-section .avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 900;
  border: 3px solid #FFFFFF;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  font-family: var(--font-display), sans-serif;
  letter-spacing: 0.02em;
}
.testimonials-section .avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 3px solid #FFFFFF;
}
.testimonials-section .slider-dots-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  margin-bottom: 52px;
}
.testimonials-section .slider-dots-wrapper .slider-dots-group {
  display: flex;
  gap: 8px;
  align-items: center;
}
.testimonials-section .slider-dots-wrapper .slider-dots-group .slider-dot-btn {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(203, 213, 225, 0.8);
  border: none;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.testimonials-section .slider-dots-wrapper .slider-dots-group .slider-dot-btn.active {
  width: 26px;
  background: linear-gradient(135deg, #E87722, #F59E0B);
}
.testimonials-section .press-media-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  align-items: stretch;
}
.testimonials-section .press-media-row .press-card-box {
  background: linear-gradient(135deg, #FFFFFF 0%, #FFFDF9 50%, #F8FAF9 100%);
  border-radius: 24px;
  border: 1px solid rgba(232, 119, 34, 0.2);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.testimonials-section .press-media-row .press-card-box .press-card-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.testimonials-section .press-media-row .press-card-box .press-card-header .press-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(232, 119, 34, 0.08);
  border: 1px solid rgba(232, 119, 34, 0.2);
  color: #C85A0F;
}
.testimonials-section .press-media-row .press-card-box .press-card-header .press-pill-badge .press-pill-text {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.testimonials-section .press-media-row .press-card-box .press-card-header .press-pill-sub {
  font-size: 0.7rem;
  color: #64748B;
  font-weight: 600;
}
.testimonials-section .press-media-row .media-logos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
}
@media (max-width: 480px) {
  .testimonials-section .press-media-row .media-logos-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
.testimonials-section .press-media-row .media-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
  height: 64px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  overflow: hidden;
}
.testimonials-section .press-media-row .media-logo-card:hover {
  transform: translateY(-4px) scale(1.02) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08) !important;
  border-color: rgba(232, 119, 34, 0.4) !important;
}
.testimonials-section .press-media-row .media-logo-card .media-logo-img {
  height: 44px;
  max-width: 92%;
  -o-object-fit: contain;
     object-fit: contain;
}
.testimonials-section .press-media-row .media-logo-card .media-logo-img.logo-dd-sports {
  height: 46px;
  transform: scale(1.35);
}
.testimonials-section .press-media-row .media-logo-card .media-logo-img.logo-prasar-bharati {
  height: 48px;
  transform: scale(1.4);
}
.testimonials-section .press-media-row .read-more-media-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 800;
  color: #FFFFFF;
  text-decoration: none;
  padding: 9px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, #E87722 0%, #D9531E 100%);
  box-shadow: 0 6px 18px rgba(232, 119, 34, 0.32);
  letter-spacing: 0.02em;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.testimonials-section .press-media-row .read-more-media-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(232, 119, 34, 0.45);
}
.testimonials-section .press-media-row .partner-logo-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}
.testimonials-section .press-media-row .partner-logo-wrapper .partner-card-box {
  flex: 1;
  min-width: 120px;
  max-width: 175px;
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.testimonials-section .press-media-row .partner-logo-wrapper .partner-card-box.scoring-card {
  max-width: 175px;
}
.testimonials-section .press-media-row .partner-logo-wrapper .partner-card-box.scoring-card .scoring-logo-img {
  height: 62px;
  -o-object-fit: contain;
     object-fit: contain;
}
.testimonials-section .press-media-row .partner-logo-wrapper .partner-card-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.09);
}
.testimonials-section .press-media-row .partner-logo-wrapper .partner-card-box:hover .partner-logo-img {
  transform: scale(1.05);
}
.testimonials-section .press-media-row .partner-logo-wrapper .partner-card-box .partner-logo-pod {
  width: 100%;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.testimonials-section .press-media-row .partner-logo-wrapper .partner-card-box .partner-logo-pod .partner-logo-img {
  height: 62px;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  transition: transform 0.25s ease;
}
.testimonials-section .press-media-row .partner-logo-wrapper .partner-card-box .partner-title {
  font-size: 0.84rem;
  font-weight: 800;
  color: #0F172A;
  margin-top: 4px;
  letter-spacing: -0.01em;
}

/* ===== Official Endorsement Document Viewer Modal ===== */
.letter-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 14px;
  animation: modalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.letter-modal-overlay.active,
.letter-modal-overlay:not([hidden]).active {
  display: flex !important;
}

.letter-modal-overlay[hidden] {
  display: none !important;
}

.letter-modal-container {
  width: 96vw;
  max-width: 1280px;
  height: 93vh;
  max-height: 980px;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalScaleUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.letter-modal-header {
  padding: 14px 24px;
  background: linear-gradient(180deg, #FAFBFD 0%, #F1F5F9 100%);
  border-bottom: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  flex-shrink: 0;
  min-height: 78px;
  z-index: 2;
  position: relative;
}
.letter-modal-header .modal-header-leader {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}
.letter-modal-header .modal-header-leader .modal-avatar-ring {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  padding: 3px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #E87722, #F4B942);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-sizing: border-box;
}
.letter-modal-header .modal-header-leader .modal-avatar-ring .avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #FFFFFF;
  display: block;
}
.letter-modal-header .modal-header-leader .modal-avatar-ring .avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 900;
  color: #FFFFFF;
  background: linear-gradient(135deg, #E87722, #1B2A6B);
  border: 2px solid #FFFFFF;
}
.letter-modal-header .modal-header-leader .modal-leader-text .modal-leader-name {
  font-size: 1.1rem;
  font-weight: 900;
  color: #0F172A;
  margin: 0 0 2px 0;
  line-height: 1.2;
}
.letter-modal-header .modal-header-leader .modal-leader-text .modal-leader-role {
  font-size: 0.78rem;
  color: #475569;
  margin: 0 0 4px 0;
  font-weight: 600;
  max-width: 480px;
  line-height: 1.3;
}
.letter-modal-header .modal-header-leader .modal-leader-text .modal-badge-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 2px 10px;
  border-radius: 999px;
  border: 1px solid;
  background: #FFFFFF;
}
.letter-modal-header .modal-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.letter-modal-header .modal-header-actions .modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 800;
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
}
.letter-modal-header .modal-header-actions .modal-btn.outline {
  background: #FFFFFF;
  color: #1E293B;
  border: 1px solid #CBD5E1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.letter-modal-header .modal-header-actions .modal-btn.outline:hover {
  background: #F8FAFC;
  border-color: #94A3B8;
  transform: translateY(-1px);
}
.letter-modal-header .modal-header-actions .modal-btn.primary {
  background: linear-gradient(135deg, #E87722 0%, #F59E0B 100%);
  color: #FFFFFF;
  border: none;
  box-shadow: 0 4px 14px rgba(232, 119, 34, 0.25);
}
.letter-modal-header .modal-header-actions .modal-btn.primary:hover {
  opacity: 0.95;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232, 119, 34, 0.35);
}
.letter-modal-header .modal-header-actions .modal-close-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #E2E8F0;
  border: none;
  color: #334155;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.letter-modal-header .modal-header-actions .modal-close-btn:hover {
  background: #DC2626;
  color: #FFFFFF;
  transform: rotate(90deg);
}

.letter-modal-body {
  flex: 1;
  background: #1E293B;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.letter-modal-body .letter-loading-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  background: #0F172A;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.letter-modal-body .letter-loading-container .letter-loading-spinner {
  width: 48px;
  height: 48px;
  border: 3.5px solid rgba(232, 119, 34, 0.2);
  border-top-color: #E87722;
  border-right-color: #F59E0B;
  border-radius: 50%;
  animation: letterSpinner 0.8s linear infinite;
}
.letter-modal-body .letter-loading-container .letter-loading-text {
  color: #F1F5F9;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
}
.letter-modal-body .letter-pdf-iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: #FFFFFF;
  transition: opacity 0.3s ease;
}
.letter-modal-body .letter-pdf-iframe.loading-hidden {
  opacity: 0;
  pointer-events: none;
}
.letter-modal-body .letter-img-scroll-container {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transition: opacity 0.3s ease;
  box-sizing: border-box;
}
.letter-modal-body .letter-img-scroll-container.loading-hidden {
  opacity: 0;
  pointer-events: none;
}
.letter-modal-body .letter-img-scroll-container .letter-img-view {
  width: auto;
  max-width: min(920px, 100%);
  height: auto;
  max-height: none;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  background: #fff;
  display: block;
}
.letter-modal-body .letter-empty-state {
  color: #94A3B8;
  font-size: 0.95rem;
}

@keyframes letterSpinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.letter-modal-footer {
  padding: 14px 24px;
  background: #FAFBFD;
  border-top: 1px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}
.letter-modal-footer .modal-quote-text {
  font-size: 0.82rem;
  font-style: italic;
  color: #475569;
  font-weight: 500;
  max-width: 600px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.letter-modal-footer .modal-stamp {
  font-size: 0.72rem;
  font-weight: 800;
  color: #0E7A3D;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes modalScaleUp {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
@media (max-width: 640px) {
  .letter-modal-container {
    height: 95vh;
    border-radius: 16px;
  }
  .letter-modal-header {
    padding: 12px 16px;
  }
  .letter-modal-header .modal-header-leader .modal-leader-text .modal-leader-role {
    display: none;
  }
  .letter-modal-header .modal-header-actions .modal-btn {
    padding: 6px 10px;
    font-size: 0.75rem;
  }
  .letter-modal-footer {
    padding: 10px 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .letter-modal-footer .modal-quote-text {
    white-space: normal;
  }
}
.spotlight-grid {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 36px;
  align-items: center;
}
@media (max-width: 720px) {
  .spotlight-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    text-align: center;
  }
}

/* ===== Stall Owners Testimonials (Food Festival Page) ===== */
.stall-testimonials-wrapper {
  margin: 40px 0 60px 0;
}

.stall-testimonials-header {
  text-align: center;
  margin: 0 auto 44px auto;
}

.stall-testimonials-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(232, 119, 34, 0.12) 0%, rgba(245, 158, 11, 0.12) 100%);
  border: 1px solid rgba(232, 119, 34, 0.3);
  color: #C85A0F;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.stall-testimonials-title {
  font-size: clamp(2rem, 3.5vw, 2.6rem);
  font-weight: 900;
  color: #1F2430;
  letter-spacing: -0.02em;
  margin: 0 0 12px 0;
}
.stall-testimonials-title span {
  color: #E87722;
}

.stall-testimonials-subtitle {
  font-size: 1rem;
  color: #5A6072;
  margin: 0;
  font-weight: 500;
}

.stall-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 28px;
}

.stall-testimonial-card {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFD 100%);
  border-radius: 20px;
  padding: 32px 24px 24px 24px;
  border: 1px solid rgba(232, 119, 34, 0.22);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.stall-testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.1);
  border-color: rgba(232, 119, 34, 0.4);
}

.stall-card-accent-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}
.stall-card-accent-bar.saffron {
  background: linear-gradient(90deg, #E87722, #F59E0B);
}
.stall-card-accent-bar.amber {
  background: linear-gradient(90deg, #F59E0B, #0E7A3D);
}
.stall-card-accent-bar.green {
  background: linear-gradient(90deg, #0E7A3D, #E87722);
}

.stall-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.stall-card-stars {
  display: flex;
  color: #F59E0B;
  font-size: 0.95rem;
}

.stall-card-category-tag {
  font-size: 0.7rem;
  font-weight: 800;
  color: #E87722;
  background: rgba(232, 119, 34, 0.1);
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

.stall-card-quote {
  margin: 0 0 20px 0;
  font-size: 0.98rem;
  line-height: 1.65;
  color: #1F2430;
  font-style: italic;
  font-weight: 500;
}

.stall-card-author {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 16px;
}

.stall-card-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}
.stall-card-avatar.orange {
  background: linear-gradient(135deg, #FFEDD5, #FED7AA);
  border: 2px solid #E87722;
}
.stall-card-avatar.amber {
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  border: 2px solid #F59E0B;
}
.stall-card-avatar.green {
  background: linear-gradient(135deg, #DCFCE7, #BBF7D0);
  border: 2px solid #0E7A3D;
}

.stall-card-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: #111827;
}

.stall-card-role {
  font-size: 0.78rem;
  font-weight: 600;
  color: #E87722;
}

.stall-card-meta {
  font-size: 0.72rem;
  color: #64748B;
}

/* ===== How It Works Photo Collage ===== */
.how-collage-wrapper {
  margin-top: 36px;
  width: 100%;
}

.how-collage-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 240px 220px;
  gap: 4px;
  background: var(--line, #e2e8f0);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.how-collage-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #000;
}
.how-collage-item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease;
}
.how-collage-item.item-1 {
  grid-column: span 3;
  grid-row: 1;
}
.how-collage-item.item-2 {
  grid-column: span 3;
  grid-row: 1;
}
.how-collage-item.item-3 {
  grid-column: span 2;
  grid-row: 2;
}
.how-collage-item.item-4 {
  grid-column: span 2;
  grid-row: 2;
}
.how-collage-item.item-5 {
  grid-column: span 2;
  grid-row: 2;
}
.how-collage-item:hover img {
  transform: scale(1.05);
  filter: brightness(0.92);
}
.how-collage-item:hover .collage-hover-overlay {
  opacity: 1;
}

.collage-hover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.1) 60%, rgba(0, 0, 0, 0) 100%);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.collage-hover-badge {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
}

.collage-caption-box {
  color: #fff;
}
.collage-caption-box b {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 2px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.collage-caption-box span {
  display: block;
  font-size: 0.75rem;
  opacity: 0.85;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.how-collage-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 0 4px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.how-collage-footer .cam {
  font-size: 1rem;
}
.how-collage-footer b {
  color: var(--ink);
  font-weight: 600;
}
.how-collage-footer span {
  opacity: 0.8;
}

@media (max-width: 820px) {
  .how-collage-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    height: auto;
  }
  .how-collage-grid .how-collage-item {
    height: 200px;
    grid-column: span 1 !important;
    grid-row: auto !important;
  }
  .how-collage-grid .how-collage-item.item-5 {
    grid-column: span 2 !important;
  }
  .collage-hover-overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 60%);
  }
}
@media (max-width: 520px) {
  .how-collage-grid {
    grid-template-columns: 1fr;
  }
  .how-collage-grid .how-collage-item {
    height: 220px;
    grid-column: span 1 !important;
  }
}
.team-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}

@media (max-width: 1000px) {
  .team-strip {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 768px) {
  .team-strip {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .team-pill {
    width: 100% !important;
  }
  .team-pill.cta-pill {
    grid-column: 1/-1;
    padding: 16px !important;
  }
}
.team-pill {
  border-radius: 18px;
  padding: 10px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  overflow: hidden;
}

.team-pill:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(31, 36, 48, 0.25);
}

.team-pill.cta-pill {
  background: var(--paper);
  border: 2px dashed var(--chakra);
  color: var(--chakra);
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 16px;
  gap: 8px;
  min-height: 100%;
}

.team-pill.cta-pill .arr {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
}

.team-pill.cta-pill b {
  color: var(--chakra);
  font-size: 0.95rem;
}

.team-pill.cta-pill:hover {
  background: var(--chakra);
  border-style: solid;
}

.team-pill.cta-pill:hover b,
.team-pill.cta-pill:hover .arr {
  color: #fff;
}

.team-pill .logo-box {
  width: 100%;
  aspect-ratio: 16/11;
  background: #ffffff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.team-pill .logo-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-pill:hover .logo-box img {
  transform: scale(1.06);
}

.team-pill .team-pill-info {
  padding: 2px 6px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.team-pill b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.team-pill span {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.85;
}

.split-cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 40px;
}

.split-card {
  border-radius: 20px;
  padding: 34px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.split-card h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
}

.split-card p {
  opacity: 0.92;
  font-size: 0.95rem;
  max-width: 420px;
  margin-bottom: 20px;
}

.split-card .img-slot {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 18px;
}

.split-card .img-slot b {
  color: #fff;
}

@media (max-width: 860px) {
  .split-cta {
    grid-template-columns: 1fr;
  }
}
.quote-band {
  margin-top: 15px;
  background: var(--ink);
  color: #fff;
  border-radius: 22px;
  padding: 46px 40px;
}

.quote-band .qb-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 26px;
  text-align: center;
}

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

.quote-grid blockquote {
  font-size: 0.94rem;
  opacity: 0.9;
  border-left: 3px solid var(--saffron);
  padding-left: 16px;
}

.quote-grid cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold);
}

.quote-grid cite small {
  display: block;
  font-weight: 400;
  opacity: 0.7;
  letter-spacing: 0.02em;
  margin-top: 2px;
}

@media (max-width: 860px) {
  .quote-grid {
    grid-template-columns: 1fr;
  }
}
.press-strip {
  margin-top: 40px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.press-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 12px;
  padding: 12px 24px;
  box-shadow: var(--shadow);
}

/* ===== About: story with side images ===== */
.story-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 44px;
  align-items: start;
  margin-top: 8px;
}

.story-media .img-slot {
  aspect-ratio: 16/10;
  min-height: 0;
}

.story-media {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 18px;
}

@media (max-width: 900px) {
  .story-layout {
    grid-template-columns: 1fr;
  }
  .story-media {
    position: static;
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 600px) {
  .story-media {
    grid-template-columns: 1fr;
  }
}
.points-wrap {
  position: relative;
}

.pt-veil {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, rgba(255, 249, 242, 0.55), rgba(255, 249, 242, 0.75));
  backdrop-filter: blur(2.5px);
  border-radius: 18px;
  pointer-events: none;
}

.pt-veil .cs {
  transform: rotate(-7deg);
  text-align: center;
}

.pt-veil .cs b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: 0.08em;
  color: var(--saffron);
  text-shadow: 0 3px 0 rgba(255, 255, 255, 0.9), 0 10px 28px rgba(232, 119, 34, 0.3);
  border: 4px solid var(--saffron);
  border-radius: 14px;
  padding: 10px 34px;
  background: rgba(255, 255, 255, 0.75);
}

.pt-veil .cs span {
  display: block;
  margin-top: 14px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chakra);
}

.pt-scroll {
  filter: saturate(0.85);
}

/* ===== Image slots (replace inner content with <img>) ===== */
.img-slot {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(232, 119, 34, 0.1), rgba(255, 255, 255, 0.6) 45%, rgba(14, 122, 61, 0.1)), var(--paper);
  border: 2px dashed var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 18px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.img-slot .cam {
  font-size: 1.7rem;
  opacity: 0.7;
}

.img-slot b {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.img-slot span {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.75;
}

.img-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s ease;
}

.img-slot:hover img {
  transform: scale(1.05);
}

.img-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.45);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}

.img-slot:hover .img-hover-overlay {
  opacity: 1;
}

.img-hover-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.8);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(4px);
}

.img-hover-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.img-slot:hover .img-hover-icon {
  transform: scale(1);
}

.img-hover-text {
  color: #fff !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  opacity: 0.95;
  transform: translateY(8px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6) !important;
}

.img-slot:hover .img-hover-text {
  transform: translateY(0);
}

.ratio-wide {
  aspect-ratio: 16/7;
}

.ratio-photo {
  aspect-ratio: 4/3;
}

.ratio-portrait {
  aspect-ratio: 3/4;
}

.ratio-square {
  aspect-ratio: 1/1;
}

.photo-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.photo-strip .img-slot {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.photo-strip .img-slot:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--saffron);
  box-shadow: 0 12px 28px rgba(232, 119, 34, 0.18);
}

@media (max-width: 860px) {
  .photo-strip {
    grid-template-columns: repeat(2, 1fr);
  }
  .photo-strip .img-slot:hover {
    transform: translateY(-8px) scale(1.02);
  }
}
@media (max-width: 580px) {
  .photo-strip {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 36px;
}

@media (max-width: 820px) {
  .gallery {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 580px) {
  .gallery {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
.figure-cap {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-style: italic;
  text-align: center;
}

/* ===== Lightbox / Image Slider Modal ===== */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(12px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999999;
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lightbox-overlay.active {
  display: flex;
}

[data-zoomable], .clickable-logo, .zoomable, .how-collage-item, .photo-strip .img-slot, .open-video-btn, .match-video-wrap {
  cursor: pointer;
}

.lightbox-close {
  position: absolute;
  top: 28px;
  right: 28px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10010;
  line-height: 1;
}

.lightbox-close:hover {
  background: #fff;
  color: #000;
  transform: rotate(90deg) scale(1.05);
}

.lightbox-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1100px;
  padding: 0 80px;
  box-sizing: border-box;
}

.lightbox-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lightbox-image-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.65);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #ffffff;
  padding: 12px;
  max-height: 88vh;
}

.lightbox-image-wrapper img {
  max-width: 92vw;
  max-height: 84vh;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  display: block;
  background: #ffffff;
}

.lightbox-caption {
  margin-top: 20px;
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lightbox-caption b {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.lightbox-caption span {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85) !important;
}

.lightbox-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10005;
  outline: none;
}

.lightbox-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.lightbox-btn:hover {
  background: #fff;
  color: #000;
  scale: 1.08;
}

.lightbox-btn.prev {
  left: 0px;
}

.lightbox-btn.next {
  right: 0px;
}

.lightbox-dots {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  z-index: 10005;
}

.lightbox-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  border: none;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
}

.lightbox-dot.active {
  background: var(--saffron);
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(232, 119, 34, 0.6);
}

@media (max-width: 768px) {
  .lightbox-container {
    padding: 0 20px;
  }
  .lightbox-btn {
    width: 44px;
    height: 44px;
  }
  .lightbox-btn svg {
    width: 18px;
    height: 18px;
  }
  .lightbox-btn.prev {
    left: 8px;
  }
  .lightbox-btn.next {
    right: 8px;
  }
  .lightbox-close {
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    font-size: 1.4rem;
  }
  .lightbox-caption b {
    font-size: 0.95rem;
  }
}
@media (max-width: 480px) {
  .lightbox-container {
    padding: 0 10px;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.team-logo-banner {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 179px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}

.team-logo-banner::after {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.team-logo-banner .logo-wrapper {
  background: transparent;
  border-radius: 20px 20px 0 0;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-shadow: none;
  border: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.team-logo-banner .logo-wrapper img {
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px 20px 0 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-card:hover .logo-wrapper img {
  transform: scale(1.06);
}

.logo-enlarge-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.25);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  z-index: 2;
}

.clickable-logo:hover .logo-enlarge-badge {
  opacity: 1;
  transform: translateY(0);
}

.team-modal-container {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 45vw;
  max-height: 74vh;
  padding: 0;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .team-modal-container {
    max-width: 88vw;
    max-height: 85vh;
  }
}

.team-modal-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: block;
}

.team-modal-story {
  width: 100%;
  box-sizing: border-box;
  background: #ffffff;
  color: #000000;
  padding: 14px 18px;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top: none;
  border-right: none;
  border-radius: 0 0 14px 14px;
}
@media (max-width: 768px) {
  .team-modal-story {
    font-size: 0.88rem;
    line-height: 1.5;
    padding: 14px 16px;
  }
}

.team-body {
  padding: 18px 20px 20px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.team-body h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  margin-top: 0;
  margin-bottom: 8px;
  line-height: 1.3;
}

.team-body .motto {
  font-size: 0.88rem;
  font-style: italic;
  margin-bottom: 10px;
  color: var(--ink);
  line-height: 1.4;
}

.team-body p,
.team-story-truncated {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
}

.team-body .plays-for {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(14, 122, 61, 0.08);
  border: 1px solid rgba(14, 122, 61, 0.2);
  color: var(--green-deep);
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: auto;
}

/* ===== Team Modal Lightbox ===== */
.team-modal-slide {
  background: var(--paper);
  border-radius: 24px;
  overflow: hidden;
  max-width: 520px;
  width: 90vw;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.15);
  animation: modalScaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-modal-header {
  padding: 32px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.team-modal-logo-box {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  height: 220px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15);
}

.team-modal-logo-box img {
  max-height: 100%;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 12px;
}

.team-modal-body {
  padding: 28px 30px 32px;
}

.team-modal-body h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  margin-bottom: 12px;
}

.team-modal-body .motto {
  font-size: 1rem;
  font-style: italic;
  padding-left: 12px;
  margin-bottom: 16px;
}

.team-modal-body p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 20px;
}

.amb-photo {
  float: right;
  width: 190px;
  margin: 0 0 14px 20px;
}

.amb-photo img {
  -o-object-position: center 15%;
     object-position: center 15%;
}

.amb-lead-photo {
  float: left;
  width: 230px;
  margin: 0 28px 14px 0;
}

.amb-lead-photo img {
  -o-object-position: center 15%;
     object-position: center 15%;
}

.amb-3 .amb-photo {
  float: none;
  width: 100%;
  margin: 16px 0;
}

@media (max-width: 860px) {
  .amb-photo,
  .amb-lead-photo {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px !important;
    aspect-ratio: 3/4 !important;
  }
}
/* ===== Improved Modern Footer ===== */
footer.site-footer {
  background: linear-gradient(180deg, #111520 0%, #0A0D14 100%);
  color: #fff;
  margin-top: 40px;
  position: relative;
  border-top: 1px solid rgba(232, 119, 34, 0.25);
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1.1fr 1.3fr;
  gap: 48px;
  padding: 44px 0 32px 0;
}

.foot-col {
  display: flex;
  flex-direction: column;
}
.foot-col.season-col {
  padding-left: 36px;
}

.foot-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.foot-brand .brand-icon {
  font-size: 1.4rem;
}
.foot-brand .brand-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: #FFFFFF;
  margin: 0;
  letter-spacing: -0.01em;
}

.brand-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 12px 0;
}

.hindi-motto {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--gold, #F4B942);
  margin-bottom: 14px;
}

.sdg-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sdg-tags .sdg-tag {
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.foot-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.08rem;
  color: #FFFFFF;
  margin: 0 0 18px 0;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.foot-heading .heading-badge {
  color: var(--gold, #F4B942);
  position: relative;
}
.foot-heading .heading-badge::after {
  content: "";
  display: block;
  width: 24px;
  height: 3px;
  background: var(--saffron, #E87722);
  border-radius: 2px;
  margin-top: 4px;
}

.foot-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.foot-nav li a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.92rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.22s ease;
  font-weight: 500;
}
.foot-nav li a .nav-arrow {
  font-size: 0.82rem;
  color: var(--saffron, #E87722);
  opacity: 0.6;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.foot-nav li a:hover {
  color: #FFFFFF;
  transform: translateX(4px);
}
.foot-nav li a:hover .nav-arrow {
  opacity: 1;
  transform: translateX(2px);
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 18px;
}
.contact-details .contact-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.4;
}
.contact-details .contact-item .contact-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
  margin-top: 2px;
}
.contact-details .contact-item a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  transition: color 0.2s ease;
}
.contact-details .contact-item a:hover {
  color: var(--saffron, #E87722);
  text-decoration: underline;
}
.contact-details .contact-item .sep {
  opacity: 0.5;
}

.social-icons-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.social-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.social-icon-btn svg {
  transition: transform 0.25s ease;
}
.social-icon-btn:hover {
  transform: translateY(-4px) scale(1.08);
  color: #FFFFFF;
  border-color: transparent;
}
.social-icon-btn:hover svg {
  transform: scale(1.1);
}
.social-icon-btn.soc-instagram:hover {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  box-shadow: 0 6px 20px rgba(225, 48, 108, 0.4);
}
.social-icon-btn.soc-facebook:hover {
  background: #1877F2;
  box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
}
.social-icon-btn.soc-twitter:hover {
  background: #000000;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}
.social-icon-btn.soc-youtube:hover {
  background: #FF0000;
  box-shadow: 0 6px 20px rgba(255, 0, 0, 0.4);
}
.social-icon-btn.soc-linkedin:hover {
  background: #0A66C2;
  box-shadow: 0 6px 20px rgba(10, 102, 194, 0.4);
}

.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.65);
}
.foot-bottom .hashtag-badge {
  font-weight: 700;
  color: var(--gold, #F4B942);
  background: rgba(244, 185, 66, 0.1);
  border: 1px solid rgba(244, 185, 66, 0.25);
  padding: 4px 14px;
  border-radius: 999px;
}

@media (max-width: 1024px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .foot-col.brand-col {
    grid-column: 1 / -1;
  }
  .foot-col.season-col {
    padding-left: 0;
  }
}
@media (max-width: 640px) {
  .foot-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 32px 0 20px 0;
  }
  .foot-col.brand-col {
    grid-column: auto;
  }
  .foot-col.season-col {
    padding-left: 0;
  }
  .foot-bottom {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
}
/* ---------- Legacy (Seasons 1–3) ---------- */
.nav-badge {
  position: absolute;
  top: -8px;
  right: 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  background: var(--green);
  color: #fff;
  border-radius: 999px;
  padding: 5px 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: 1.5px solid #fff;
}

nav button:has(.nav-badge),
nav a.nav-btn:has(.nav-badge) {
  padding-right: 56px !important;
}

.legacy-teams {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 36px;
}

.legacy-team {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow);
  border-left: 5px solid var(--saffron);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.legacy-team:hover {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.1);
  border-left-color: var(--saffron-deep);
}

.legacy-team .img-slot {
  border: none;
  background: var(--line-soft);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.legacy-team:hover .img-hover-overlay {
  opacity: 1;
}

.legacy-team:hover .img-hover-icon {
  transform: scale(1);
}

.legacy-team:hover .img-hover-text {
  transform: translateY(0);
}

.legacy-team:hover img {
  transform: scale(1.04);
}

.legacy-team b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  margin-bottom: 4px;
  margin-top: 14px;
}

.legacy-team span {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--green-deep);
}

.nano-banana {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #eaf8ee;
  /* Soft green raw banana leaf background */
  border: 1px solid #ccecd5;
  color: #1e6b3c;
  padding: 4px 10px;
  border-radius: 8px;
  margin-top: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.04);
  width: -moz-fit-content;
  width: fit-content;
}

.nano-banana span {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  color: #1e6b3c !important;
  letter-spacing: 0.05em !important;
}

.legacy-amb {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 16px;
  margin-top: 30px;
}

.legacy-amb .p {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.legacy-amb .p:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  border-color: rgba(232, 119, 34, 0.25);
}

.legacy-amb .p b {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 3px;
}

.legacy-amb .p span {
  font-size: 0.78rem;
  color: #5a5f6d;
  line-height: 1.45;
  display: block;
}

.winner-card {
  background: linear-gradient(120deg, var(--chakra), #1d2b70);
  border: 1px solid rgba(212, 175, 55, 0.22);
  color: #fff;
  border-radius: 20px;
  padding: 44px 36px;
  margin-top: 36px;
  box-shadow: 0 24px 60px rgba(27, 42, 107, 0.28);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.winner-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--saffron), var(--gold), var(--green));
}

.winner-card .cup {
  font-size: 3rem;
  display: inline-block;
  animation: heartbeat 2s infinite ease-in-out;
}

.winner-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin: 10px 0 6px;
  color: var(--gold);
}

.winner-card p {
  max-width: 720px;
  margin: 0 auto;
  opacity: 0.92;
}

.winner-result {
  display: inline-block;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.35);
  padding: 10px 28px;
  border-radius: 99px;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--gold) !important;
  margin: 22px auto 14px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.winner-slot {
  width: 100%;
  max-width: 580px;
  margin: 24px auto;
  border-radius: 16px;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
  .winner-card {
    padding: 30px 16px;
  }
  .winner-card h3 {
    font-size: 1.35rem;
  }
  .winner-slot {
    margin: 18px auto;
    max-width: 100%;
  }
  .winner-result {
    font-size: 1.05rem;
    padding: 8px 20px;
    margin: 18px auto 10px;
  }
}
@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}
.mini-slot {
  aspect-ratio: 3/4;
  padding: 10px;
  border-radius: 12px;
  margin-bottom: 12px;
}

.mini-slot .cam {
  font-size: 1.15rem;
}

.mini-slot b {
  font-size: 0.66rem;
  letter-spacing: 0.03em;
}

.mini-slot span {
  font-size: 0.58rem;
}

.crest-slot {
  aspect-ratio: 1/1;
  width: 72px;
  padding: 6px;
  border-radius: 12px;
  margin-bottom: 10px;
  gap: 2px;
}

.crest-slot .cam {
  font-size: 0.95rem;
}

.crest-slot b {
  font-size: 0.5rem;
  letter-spacing: 0.02em;
}

.legacy-moments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px;
}

@media (max-width: 820px) {
  .legacy-moments {
    grid-template-columns: 1fr;
  }
}
.winner-slot {
  max-width: 820px;
  aspect-ratio: 16/10 !important;
  margin: 24px auto 12px;
  border-color: rgba(212, 175, 55, 0.4);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.winner-slot b {
  color: #fff;
}

.legacy-cta-banner {
  position: relative;
  border-radius: 28px;
  background-image: url("/assets/images/legacy/legacy-cta.png");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  min-height: 360px;
  padding: 48px 40px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  margin-top: 40px;
}

.legacy-cta-banner .cta-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.5) 40%, rgba(15, 23, 42, 0.88) 100%);
  pointer-events: none;
}

.legacy-cta-banner .cta-content {
  position: relative;
  z-index: 2;
  max-width: 540px;
  text-align: right;
  color: #ffffff;
}

.legacy-cta-banner h2 {
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 12px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  text-align: right;
}

.legacy-cta-banner p {
  color: #e2e8f0;
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 24px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
  text-align: right;
}

.legacy-cta-banner .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #E87722 0%, #F59E0B 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(232, 119, 34, 0.45);
  transition: all 0.3s ease;
}

.legacy-cta-banner .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(232, 119, 34, 0.6);
  filter: brightness(1.1);
}

@media (max-width: 768px) {
  .legacy-cta-banner {
    padding: 36px 20px;
    min-height: 280px;
    justify-content: center;
  }
  .legacy-cta-banner .cta-overlay {
    background: rgba(15, 23, 42, 0.82);
  }
  .legacy-cta-banner .cta-content {
    max-width: 100%;
    text-align: center;
  }
  .legacy-cta-banner h2 {
    text-align: center;
  }
  .legacy-cta-banner p {
    text-align: center;
  }
}
/* Food Festival Collage Layout */
.food-collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 180px 180px 150px;
  gap: 16px;
  margin-top: 30px;
}

.food-collage-item {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--line);
}

.food-collage-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  border-color: var(--saffron-deep);
}

.food-collage-item-1 {
  grid-column: 1/3;
  grid-row: 1/3;
}

.food-collage-item-2 {
  grid-column: 3/4;
  grid-row: 1/2;
}

.food-collage-item-3 {
  grid-column: 4/5;
  grid-row: 1/3;
}

.food-collage-item-4 {
  grid-column: 3/4;
  grid-row: 2/3;
}

.food-collage-item-5 {
  grid-column: 1/5;
  grid-row: 3/4;
}

.food-collage-item .img-slot {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  border: none !important;
}

@media (max-width: 768px) {
  .food-collage {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-rows: auto;
    gap: 16px;
  }
  .food-collage-item {
    grid-column: 1/-1 !important;
    grid-row: auto !important;
  }
  .food-collage-item-1 {
    aspect-ratio: 4/3;
  }
  .food-collage-item-2 {
    aspect-ratio: 4/3;
  }
  .food-collage-item-3 {
    aspect-ratio: 3/4;
    /* Correct portrait size for Specialty 3 */
  }
  .food-collage-item-4 {
    aspect-ratio: 4/3;
  }
  .food-collage-item-5 {
    aspect-ratio: 16/9;
    /* Correct wide size for Specialty 5 */
  }
}
/* Full Image Sizing (No Crop/Cut) */
.img-slot.img-full-display {
  aspect-ratio: auto !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
}

.img-slot.img-full-display img {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  border-radius: 16px;
  display: block;
}

/* Equal Sized Containers with Uncropped Images */
.img-slot.img-fit-contain-dark {
  aspect-ratio: 1.6 !important;
  background: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}

.img-slot.img-fit-contain-dark img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  -o-object-fit: contain !important;
     object-fit: contain !important;
  border-radius: 16px;
}

/* Stall Features cards */
.stall-features {
  display: grid;
  gap: 16px;
  margin: 24px 0;
}

.stall-feature-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--saffron);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.stall-feature-card:hover {
  transform: translateX(4px);
  border-color: var(--saffron);
}

.stall-feature-card .icon {
  font-size: 1.5rem;
  line-height: 1;
}

.stall-feature-card h4 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--chakra);
  margin-bottom: 4px;
}

.stall-feature-card p {
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.5;
}

/* Zone Map Grid with Mobile Spacing */
.zone-map-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 36px;
}

@media (max-width: 820px) {
  .zone-map-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
    /* Generous space on the top side of each stacked image */
    margin-top: 36px !important;
    /* Space on the top side of the first image */
  }
}
/* Optimize mobile food collage spacing */
@media (max-width: 768px) {
  .food-collage {
    gap: 32px !important;
    /* Generous space on the top side of each stacked food image */
    margin-top: 36px !important;
    /* Space on the top side of the first food image */
  }
}
/* ===== VIDEO POPUP MODAL ===== */
.video-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(8, 12, 24, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeInModal 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.video-modal-overlay.active {
  display: flex;
}

@keyframes fadeInModal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.video-modal-container {
  width: 100%;
  max-width: 920px;
  background: #0d1322;
  border: 1px solid rgba(255, 153, 51, 0.35);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 32px 90px rgba(0, 0, 0, 0.8), 0 0 50px rgba(255, 153, 51, 0.2);
  animation: scaleUpModal 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  display: flex;
  flex-direction: column;
}

@keyframes scaleUpModal {
  from {
    transform: scale(0.92) translateY(18px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
.video-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.video-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}
.video-modal-title svg {
  flex-shrink: 0;
}
.video-modal-title span:not(.video-modal-badge) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-modal-badge {
  display: none !important;
}

.video-modal-close {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  transition: all 0.2s ease;
  flex-shrink: 0;
  margin-left: 4px;
}

.video-modal-close:hover {
  background: #ff9933;
  color: #000;
  border-color: #ff9933;
  transform: rotate(90deg) scale(1.1);
}

.video-modal-body {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
}

.video-modal-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal-footer {
  padding: 12px 20px;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.75);
}

/* Mobile adjustments for Video Popup Modal */
@media (max-width: 640px) {
  .video-modal-overlay {
    padding: 10px;
  }
  .video-modal-container {
    border-radius: 16px;
    max-width: calc(100vw - 20px);
  }
  .video-modal-header {
    padding: 10px 12px;
    gap: 8px;
  }
  .video-modal-title {
    font-size: 0.82rem;
    gap: 6px;
  }
  .video-modal-title span:not(.video-modal-badge) {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
  }
  .video-modal-badge {
    font-size: 0.55rem;
    padding: 2px 6px;
    letter-spacing: 0.04em;
  }
  .video-modal-close {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    font-size: 1rem;
  }
  .video-modal-footer {
    padding: 8px 12px;
    font-size: 0.72rem;
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }
}
/* Play trigger overlay on Zariya poster */
.zariya-poster-wrapper {
  position: relative;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  display: inline-block;
  width: 100%;
}

.zariya-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 68px;
  background: linear-gradient(135deg, #ff9933, #e65100);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(255, 153, 51, 0.65), 0 8px 24px rgba(0, 0, 0, 0.5);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 5;
}

.zariya-play-btn svg {
  width: 26px;
  height: 26px;
  fill: #fff;
  margin-left: 4px;
}

.zariya-poster-wrapper:hover .zariya-play-btn {
  transform: translate(-50%, -50%) scale(1.18);
  box-shadow: 0 0 50px rgba(255, 153, 51, 0.95), 0 12px 32px rgba(0, 0, 0, 0.7);
}

/* ===== Image Slots & Aspect Ratios ===== */
.img-slot {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: 
    radial-gradient(circle at 50% 30%, rgba(232, 119, 34, .08), transparent 70%),
    linear-gradient(135deg, rgba(232, 119, 34, .10), rgba(255, 255, 255, .6) 45%, rgba(14, 122, 61, .10)),
    var(--paper);
  border: 2px dashed var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 18px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.img-slot .cam {
  font-size: 1.7rem;
  opacity: .7;
}

.img-slot b {
  font-size: .82rem;
  letter-spacing: .06em;
  color: var(--ink);
}

.img-slot span {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: .75;
}

.img-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.img-slot:hover img {
  transform: scale(1.05);
}

.img-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 15, 15, 0.45);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}

.img-slot:hover .img-hover-overlay {
  opacity: 1;
}

.img-hover-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.8);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(4px);
}

.img-hover-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.img-slot:hover .img-hover-icon {
  transform: scale(1);
}

.img-hover-text {
  color: #fff !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  opacity: 0.95;
  transform: translateY(8px);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.6) !important;
}

.img-slot:hover .img-hover-text {
  transform: translateY(0);
}

.ratio-wide {
  aspect-ratio: 16/7;
}

.ratio-photo {
  aspect-ratio: 4/3;
}

.ratio-portrait {
  aspect-ratio: 3/4;
}

.ratio-square {
  aspect-ratio: 1/1;
}

/* ===== Stalls ===== */
.stall-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 36px;
  align-items: center;
  margin-top: 44px;
}

.stall-grid .sub {
  text-align: left;
  margin-left: 0;
}

@media (max-width: 900px) {
  .stall-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== In-Page Image Slider Controls ===== */
.inpage-slider-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}

.inpage-slider-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 5;
  letter-spacing: 0.05em;
}

.inpage-slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 6;
  transition: all 0.2s ease;
  outline: none;
  opacity: 0.85;
}
.inpage-slider-btn:hover {
  background: var(--saffron);
  color: #fff;
  border-color: var(--saffron);
  opacity: 1;
  transform: translateY(-50%) scale(1.1);
}
.inpage-slider-btn.prev {
  left: 12px;
}
.inpage-slider-btn.next {
  right: 12px;
}
.inpage-slider-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.5;
  fill: none;
}

.inpage-slider-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 6;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.inpage-slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s ease;
}
.inpage-slider-dot.active {
  background: var(--saffron);
  width: 18px;
  border-radius: 10px;
}

.inpage-slider-wrapper.controls-hovered .img-hover-overlay,
.inpage-slider-wrapper.controls-hovered .zoom-hint-pill {
  opacity: 0 !important;
}

/* ===== News Coverage Section ===== */
.news-coverage-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 32px;
}

@media (max-width: 1200px) {
  .news-coverage-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}
@media (max-width: 860px) {
  .news-coverage-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}
@media (max-width: 520px) {
  .news-coverage-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}
/* ===== News Coverage Pagination ===== */
.news-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.news-pagination-info {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

.news-pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: 0.84rem;
  font-weight: 700;
  border-radius: 999px;
  background: var(--paper);
  border: 1.5px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s ease;
}
.news-page-btn:hover:not(:disabled) {
  background: var(--chakra);
  color: #fff;
  border-color: var(--chakra);
}
.news-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.news-page-num {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  font-weight: 700;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.2s ease;
}
.news-page-num:hover:not(.active) {
  background: rgba(27, 42, 107, 0.08);
  border-color: var(--chakra);
  color: var(--chakra);
}
.news-page-num.active {
  background: var(--saffron);
  color: #fff;
  border-color: var(--saffron);
  box-shadow: 0 4px 14px rgba(232, 119, 34, 0.35);
}

.news-coverage-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(31, 36, 48, 0.04);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.news-coverage-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(31, 36, 48, 0.08);
}

.news-coverage-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16/8;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.news-coverage-media img {
  max-width: 100%;
  max-height: 70px;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  transition: transform 0.35s ease;
}
.news-coverage-media:hover img {
  transform: scale(1.06);
}

.news-coverage-content {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.news-coverage-publisher {
  display: none;
}

.news-coverage-title {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 8px;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-coverage-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.news-coverage-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}
.news-coverage-btn.btn-enlarge {
  background: rgba(27, 42, 107, 0.08);
  color: var(--chakra);
  border-color: rgba(27, 42, 107, 0.15);
}
.news-coverage-btn.btn-enlarge:hover {
  background: var(--chakra);
  color: #fff;
  border-color: var(--chakra);
}
.news-coverage-btn.btn-details {
  background: rgba(232, 119, 34, 0.1);
  color: var(--saffron-deep);
  border-color: rgba(232, 119, 34, 0.2);
}
.news-coverage-btn.btn-details:hover {
  background: var(--saffron);
  color: #fff;
  border-color: var(--saffron);
}

.news-coverage-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--chakra);
  text-decoration: none;
  transition: color 0.2s ease, gap 0.2s ease;
  margin-top: auto;
}
.news-coverage-link:hover {
  color: var(--saffron);
  gap: 10px;
}

@media (max-width: 600px) {
  .news-coverage-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .news-coverage-media {
    padding: 6px 8px;
  }
  .news-coverage-media img {
    max-height: 38px;
  }
  .news-coverage-content {
    padding: 8px 8px;
  }
  .news-coverage-title {
    font-size: 0.74rem;
    line-height: 1.25;
    margin-bottom: 4px;
  }
  .news-coverage-link {
    font-size: 0.75rem;
  }
}
.inpage-slider-wrapper:has(.inpage-slider-btn:hover) .img-hover-overlay,
.inpage-slider-wrapper:has(.inpage-slider-dots:hover) .img-hover-overlay {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  backdrop-filter: none !important;
  display: none !important;
}

/* ===== Food Festival Tiled Collage Grid (7.jpg Left Cover + 6 Right Blocks) ===== */
.food-collage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 190px);
  gap: 16px;
  margin-top: 28px;
}
.food-collage .food-collage-item {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}
.food-collage .food-collage-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
}
.food-collage .food-collage-item .img-slot {
  width: 100%;
  height: 100%;
  margin: 0 !important;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
}
.food-collage .food-collage-item .img-slot img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover !important;
     object-fit: cover !important;
  -o-object-position: center !important;
     object-position: center !important;
  transition: transform 0.4s ease;
}
.food-collage .food-collage-item .img-slot:hover img {
  transform: scale(1.05);
}
.food-collage .food-collage-item {
  /* 7.jpg on Left Side covering entire left area (2 cols x 3 rows) */
}
.food-collage .food-collage-item.c-item-7 {
  grid-column: 1/span 2;
  grid-row: 1/span 3;
}
.food-collage .food-collage-item {
  /* Right side 6 blocks (Columns 3 & 4) */
}
.food-collage .food-collage-item.c-item-1 {
  grid-column: 3/span 1;
  grid-row: 1/span 1;
}
.food-collage .food-collage-item.c-item-2 {
  grid-column: 4/span 1;
  grid-row: 1/span 1;
}
.food-collage .food-collage-item.c-item-3 {
  grid-column: 3/span 1;
  grid-row: 2/span 1;
}
.food-collage .food-collage-item.c-item-4 {
  grid-column: 4/span 1;
  grid-row: 2/span 1;
}
.food-collage .food-collage-item.c-item-5 {
  grid-column: 3/span 1;
  grid-row: 3/span 1;
}
.food-collage .food-collage-item.c-item-6 {
  grid-column: 4/span 1;
  grid-row: 3/span 1;
}
@media (max-width: 900px) {
  .food-collage {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
  .food-collage .food-collage-item {
    height: 220px;
  }
  .food-collage .food-collage-item.c-item-7 {
    grid-column: span 2;
    grid-row: span 1;
    height: 280px;
  }
  .food-collage .food-collage-item.c-item-1, .food-collage .food-collage-item.c-item-2, .food-collage .food-collage-item.c-item-3, .food-collage .food-collage-item.c-item-4, .food-collage .food-collage-item.c-item-5, .food-collage .food-collage-item.c-item-6 {
    grid-column: span 1;
    height: 200px;
  }
}
@media (max-width: 560px) {
  .food-collage {
    grid-template-columns: 1fr;
  }
  .food-collage .food-collage-item {
    height: 200px;
  }
  .food-collage .food-collage-item.c-item-7, .food-collage .food-collage-item.c-item-1, .food-collage .food-collage-item.c-item-2, .food-collage .food-collage-item.c-item-3, .food-collage .food-collage-item.c-item-4, .food-collage .food-collage-item.c-item-5, .food-collage .food-collage-item.c-item-6 {
    grid-column: span 1;
    height: 200px;
  }
}

/* Partner Brand Card Hover Animation & Food Festival Page Classes */
.food-fest-hero-grid {
  margin-top: 32px;
  margin-bottom: 48px;
}

.festival-details-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.festival-details-text {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
}

.festival-details-points {
  display: grid;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.festival-point-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.festival-point-bullet {
  color: var(--saffron);
  font-size: 1.1rem;
}

.block-padded {
  padding-top: 56px;
  padding-bottom: 56px;
}

.sub-mt-26 {
  margin-top: 26px;
}

.sub-mb-32 {
  margin-bottom: 32px;
}

.sub-mb-34 {
  margin-bottom: 34px;
}

.sectors-dark {
  background: var(--ink);
  margin-bottom: 36px;
}

.partner-brands-showcase {
  margin-top: 24px;
}

.partner-showcase-head {
  margin-bottom: 20px;
  text-align: center;
}

.partner-showcase-eyebrow {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--saffron);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.partner-showcase-title {
  font-size: clamp(1.2rem, 3vw, 1.7rem);
  font-weight: 800;
  color: var(--chakra);
  margin-top: 6px;
}

.partner-logo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.partner-brand-card {
  width: 100%;
  max-width: 280px;
  background: #FFFFFF;
  border: 1px solid var(--line, #E2E8F0);
  border-radius: 18px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.partner-brand-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(232, 119, 34, 0.16) !important;
  border-color: rgba(232, 119, 34, 0.45) !important;
}
.partner-brand-card:hover .partner-img {
  transform: scale(1.45) !important;
}

.partner-img-wrapper {
  height: 95px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 14px;
  box-sizing: border-box;
  transition: all 0.3s ease;
}
.partner-img-wrapper.light-pod {
  background: #FFFFFF;
  border: 1px solid rgba(226, 232, 240, 0.95);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02), 0 2px 8px rgba(15, 23, 42, 0.04);
}
.partner-img-wrapper.light-pod .partner-img {
  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.12));
}
.partner-img-wrapper.dark-pod {
  background: linear-gradient(135deg, #111A3E 0%, #0F172A 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.08), 0 4px 14px rgba(15, 23, 42, 0.22);
}
.partner-img-wrapper.dark-pod .partner-img {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6));
}

.partner-img {
  max-height: 72px;
  max-width: 92%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  transition: transform 0.3s ease;
}

.partner-card-body {
  text-align: center;
  margin-top: 14px;
  width: 100%;
}

.partner-brand-name {
  display: block;
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.3;
}

.partner-brand-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--saffron-deep);
  background: rgba(232, 119, 34, 0.1);
  border: 1px solid rgba(232, 119, 34, 0.2);
  padding: 3px 10px;
  border-radius: 99px;
  margin-top: 8px;
}

.partner-callout-banner {
  margin-top: 24px;
  padding: 16px 20px;
  border-radius: 14px;
  background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 100%);
  border: 1px solid rgba(232, 119, 34, 0.25);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.partner-callout-icon {
  font-size: 1.4rem;
}

.partner-callout-text {
  font-size: 0.9rem;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.4;
}

.stall-grid-mt-36 {
  margin-top: 36px;
}

.sub-left-align {
  margin-bottom: 18px;
  text-align: left;
  margin-left: 0;
}

.stall-feature-card.chakra-border {
  border-left-color: var(--chakra);
}

.stall-feature-card.green-border {
  border-left-color: var(--green);
}

.tax-disclaimer-note {
  margin-top: 16px;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

/* ===== GLOBAL WEBSITE LOADERS & IMAGE SKELETONS ===== */
/* 1. Top Progress Bar */
.top-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--saffron) 0%, var(--gold) 50%, var(--green) 100%);
  z-index: 99999;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease, opacity 0.3s ease;
  opacity: 0;
  pointer-events: none;
}
.top-progress-bar.active {
  opacity: 1;
  animation: topProgressAnim 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.top-progress-bar .progress-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px var(--saffron), 0 0 5px var(--saffron);
}

@keyframes topProgressAnim {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  50% {
    transform: scaleX(0.7);
    transform-origin: left;
  }
  100% {
    transform: scaleX(1);
    transform-origin: right;
  }
}
/* 2. Global Page Splash & Route Loader */
.global-splash-loader,
.global-page-loader {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100%;
  background: rgba(255, 249, 242, 0.96);
  backdrop-filter: blur(12px);
  z-index: 9999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden !important;
  box-sizing: border-box;
  animation: fadeIn 0.3s ease;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.global-splash-loader.fade-out,
.global-page-loader.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.splash-card,
.loader-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px 28px;
  box-shadow: 0 20px 50px rgba(27, 42, 107, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  max-width: 480px;
  width: 90%;
  margin: 0 auto;
}

.splash-logo-container,
.loader-logo-wrap {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.splash-logo-img,
.loader-logo-img {
  width: 64px;
  height: 64px;
  -o-object-fit: contain;
     object-fit: contain;
  z-index: 2;
  animation: pulseLogo 2s infinite ease-in-out;
}

.splash-pulse-ring,
.loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--saffron);
  border-right-color: var(--chakra);
  border-bottom-color: var(--green);
  animation: spinRing 1.2s linear infinite;
}

.splash-brand-text h3,
.splash-brand-text .loader-title,
.loader-text h3,
.loader-text .loader-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--chakra);
  margin-bottom: 4px;
  display: block;
}
.splash-brand-text p,
.splash-brand-text .loader-sub,
.loader-text p,
.loader-text .loader-sub {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 500;
  display: block;
}
.splash-brand-text .splash-hindi-tag,
.loader-text .splash-hindi-tag {
  font-size: 0.8rem;
  color: var(--saffron-deep);
  font-weight: 500;
  margin-top: 2px;
  display: block;
  font-family: serif;
  font-style: italic;
}

.splash-theme-dark {
  background: #0f172a !important;
  border-color: #1e293b !important;
  color: #ffffff !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5) !important;
}
.splash-theme-dark .splash-brand-text h3 {
  color: #f59e0b !important;
}
.splash-theme-dark .splash-brand-text p {
  color: #cbd5e1 !important;
}

.splash-theme-tricolor {
  background: #ffffff !important;
  border: 2px solid var(--saffron) !important;
  box-shadow: 0 20px 50px rgba(245, 158, 11, 0.15) !important;
}

.splash-loading-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: var(--saffron-deep);
  font-weight: 600;
}

.splash-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(232, 119, 34, 0.2);
  border-top-color: var(--saffron);
  border-radius: 50%;
  animation: spinRing 0.8s linear infinite;
}

.loader-bar-track {
  width: 100%;
  height: 4px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}

.loader-bar-fill {
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, var(--saffron) 0%, var(--green) 100%);
  border-radius: 99px;
  animation: barIndeterminate 1.5s infinite ease-in-out;
}

@keyframes spinRing {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes pulseLogo {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}
@keyframes barIndeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}
/* 3. Image Skeleton Loader & Shimmer */
.img-skeleton-loader {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  border-radius: inherit;
}

.img-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(232, 119, 34, 0.2);
  border-top-color: var(--saffron-deep);
  border-radius: 50%;
  animation: spinRing 0.8s linear infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
img.img-fadeIn {
  opacity: 1;
  transition: opacity 0.4s ease-in-out;
}

img.img-hidden {
  opacity: 0;
}

/* ===== FLOATING BROCHURE BUTTON & PDF VIEWER ===== */
.floating-brochure-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: auto;
}
.floating-brochure-container.active-hover .brochure-tooltip, .floating-brochure-container:hover .brochure-tooltip, .floating-brochure-container:focus-within .brochure-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

.floating-brochure-circle {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FF6B00 0%, #D94800 100%);
  border: 3px solid #FFFFFF;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 32px rgba(233, 84, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.25);
  position: relative;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  outline: none;
}
.floating-brochure-circle:hover {
  transform: scale(1.12) rotate(-6deg);
  box-shadow: 0 18px 42px rgba(233, 84, 0, 0.7);
}
.floating-brochure-circle:hover .brochure-main-icon {
  transform: translateY(1px);
}
.floating-brochure-circle .brochure-pulse-ring {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(255, 107, 0, 0.45);
  animation: brochurePulse 2s infinite ease-out;
  pointer-events: none;
}
.floating-brochure-circle .brochure-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  margin-top: 1px;
}
.floating-brochure-circle .brochure-main-icon {
  transition: transform 0.2s ease;
}
.floating-brochure-circle .brochure-label {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: #FFFFFF;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  background: rgba(27, 42, 107, 0.9);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.floating-brochure-circle.theme-emerald {
  background: linear-gradient(135deg, #10B981 0%, #0D9488 100%) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 32px rgba(16, 185, 129, 0.55), 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}
.floating-brochure-circle.theme-emerald:hover {
  box-shadow: 0 18px 42px rgba(16, 185, 129, 0.75) !important;
}
.floating-brochure-circle.theme-emerald .brochure-pulse-ring {
  border-color: rgba(16, 185, 129, 0.55) !important;
}
.floating-brochure-circle.theme-emerald .brochure-label {
  background: rgba(6, 78, 59, 0.95) !important;
  border-color: rgba(52, 211, 153, 0.6) !important;
}
.floating-brochure-circle.theme-gradient {
  background: linear-gradient(135deg, #F59E0B 0%, #EA580C 50%, #E11D48 100%) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 32px rgba(234, 88, 12, 0.55), 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}
.floating-brochure-circle.theme-gradient:hover {
  box-shadow: 0 18px 42px rgba(225, 29, 72, 0.75) !important;
}
.floating-brochure-circle.theme-gradient .brochure-pulse-ring {
  border-color: rgba(234, 88, 12, 0.55) !important;
}
.floating-brochure-circle.theme-gradient .brochure-label {
  background: rgba(15, 23, 42, 0.95) !important;
  border-color: rgba(251, 113, 133, 0.6) !important;
}
.floating-brochure-circle.theme-dark {
  background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%) !important;
  border-color: #F59E0B !important;
  color: #F59E0B !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(245, 158, 11, 0.25) !important;
}
.floating-brochure-circle.theme-dark:hover {
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.9), 0 0 20px rgba(245, 158, 11, 0.4) !important;
}
.floating-brochure-circle.theme-dark .brochure-pulse-ring {
  border-color: rgba(245, 158, 11, 0.45) !important;
}
.floating-brochure-circle.theme-dark .brochure-label {
  background: #F59E0B !important;
  color: #020617 !important;
  border-color: #FFFFFF !important;
}
.floating-brochure-circle.theme-dark .brochure-main-icon {
  color: #F59E0B !important;
  stroke: #F59E0B !important;
}
.floating-brochure-circle.theme-amber {
  background: linear-gradient(135deg, #FF6B00 0%, #D94800 100%) !important;
  border-color: #FFFFFF !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 32px rgba(233, 84, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

@keyframes brochurePulse {
  0% {
    transform: scale(0.95);
    opacity: 0.85;
  }
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}
.brochure-tooltip {
  position: absolute;
  bottom: calc(100% + 14px);
  right: 0;
  background: #FFFFFF;
  border: 1px solid var(--line, #E2E8F0);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.95);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  pointer-events: auto;
  z-index: 1000000;
}
.brochure-tooltip::after {
  content: "";
  position: absolute;
  bottom: -7px;
  right: 24px;
  width: 12px;
  height: 12px;
  background: #FFFFFF;
  border-right: 1px solid var(--line, #E2E8F0);
  border-bottom: 1px solid var(--line, #E2E8F0);
  transform: rotate(45deg);
}
.brochure-tooltip .tooltip-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--chakra, #1B2A6B);
}
.brochure-tooltip .tooltip-sub {
  font-size: 0.78rem;
  color: var(--ink-soft, #5A6072);
  font-weight: 600;
}
.brochure-tooltip .tooltip-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.brochure-tooltip .tooltip-btn {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 14px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}
.brochure-tooltip .tooltip-btn.download-btn {
  background: var(--saffron, #E87722);
  color: #FFFFFF;
}
.brochure-tooltip .tooltip-btn.download-btn:hover {
  background: var(--saffron-deep, #C85A0F);
  transform: translateY(-1px);
}
.brochure-tooltip .tooltip-btn.view-btn {
  background: rgba(27, 42, 107, 0.08);
  color: var(--chakra, #1B2A6B);
}
.brochure-tooltip .tooltip-btn.view-btn:hover {
  background: rgba(27, 42, 107, 0.16);
  transform: translateY(-1px);
}

/* PDF Modal Viewer */
.brochure-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(10px);
  z-index: 99999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn 0.25s ease;
}

.brochure-modal-overlay.active {
  display: flex;
}

.brochure-modal-card {
  background: #FFFFFF;
  border-radius: 20px;
  width: 100%;
  max-width: 1100px;
  height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: zoomIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.brochure-modal-header {
  padding: 16px 24px;
  background: #FFF9F2;
  border-bottom: 1px solid var(--line, #EBE2D6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.brochure-modal-header .brochure-modal-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brochure-modal-header .brochure-modal-title-wrap .pdf-icon-badge {
  font-size: 1.8rem;
}
.brochure-modal-header .brochure-modal-title-wrap h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--chakra, #1B2A6B);
  margin: 0;
}
.brochure-modal-header .brochure-modal-title-wrap p {
  font-size: 0.82rem;
  color: var(--ink-soft, #5A6072);
  margin: 0;
  font-weight: 500;
}
.brochure-modal-header .brochure-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brochure-modal-header .modal-download-btn {
  background: var(--saffron, #E87722);
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 10px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 14px rgba(232, 119, 34, 0.3);
}
.brochure-modal-header .modal-download-btn:hover {
  background: var(--saffron-deep, #C85A0F);
  transform: translateY(-1px);
}
.brochure-modal-header .brochure-modal-close {
  background: transparent;
  border: none;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--ink-soft, #5A6072);
  cursor: pointer;
  padding: 0 6px;
  border-radius: 8px;
  transition: all 0.2s ease;
}
.brochure-modal-header .brochure-modal-close:hover {
  color: var(--ink, #1F2430);
  background: rgba(0, 0, 0, 0.06);
}

.brochure-pdf-body {
  flex: 1;
  width: 100%;
  height: 100%;
  background: #323639;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.brochure-mobile-notice {
  background: #111A3E;
  color: #FFFFFF;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.brochure-mobile-notice .notice-txt {
  font-weight: 600;
}
.brochure-mobile-notice .notice-actions {
  display: flex;
  gap: 8px;
}
.brochure-mobile-notice .mobile-notice-btn {
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.76rem;
  transition: all 0.2s ease;
}
.brochure-mobile-notice .mobile-notice-btn:hover {
  background: var(--saffron, #E87722);
}
.brochure-mobile-notice .mobile-notice-btn.download {
  background: var(--saffron, #E87722);
}
.brochure-mobile-notice .mobile-notice-btn.download:hover {
  background: var(--saffron-deep, #C85A0F);
}

.brochure-pdf-object,
.brochure-pdf-iframe,
.brochure-pdf-embed {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: none;
  display: block;
}

.pdf-fallback-msg {
  padding: 40px 20px;
  text-align: center;
  color: #FFFFFF;
}
.pdf-fallback-msg p {
  margin-bottom: 16px;
  font-size: 1rem;
}

@media (max-width: 768px) {
  .floating-brochure-container {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    right: 16px;
    max-width: calc(100vw - 32px);
  }
  .floating-brochure-circle {
    width: 54px;
    height: 54px;
  }
  .floating-brochure-circle .brochure-main-icon {
    width: 22px;
    height: 22px;
  }
  .floating-brochure-circle .brochure-label {
    font-size: 0.55rem;
    padding: 1px 4px;
  }
  .brochure-tooltip {
    right: 0;
    width: -moz-max-content;
    width: max-content;
    min-width: 250px;
    max-width: calc(100vw - 32px);
    white-space: normal;
    word-break: normal;
    padding: 14px 16px;
  }
  .brochure-tooltip::after {
    right: 18px;
  }
  .brochure-tooltip .tooltip-title {
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.3;
    white-space: normal;
    word-break: normal;
  }
  .brochure-tooltip .tooltip-sub {
    font-size: 0.76rem;
    white-space: nowrap;
  }
  .brochure-tooltip .tooltip-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 8px;
    width: 100%;
  }
  .brochure-tooltip .tooltip-btn {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 8px 12px;
    white-space: nowrap !important;
    word-break: keep-all !important;
    flex: 1;
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  .brochure-tooltip .tooltip-btn svg {
    flex-shrink: 0;
  }
  .brochure-modal-overlay {
    padding: 10px;
  }
  .brochure-modal-card {
    width: 98vw;
    height: 94vh;
    border-radius: 14px;
  }
  .brochure-modal-header {
    padding: 12px 14px;
    flex-wrap: wrap;
  }
  .brochure-modal-header .brochure-modal-title-wrap {
    gap: 10px;
  }
  .brochure-modal-header .brochure-modal-title-wrap .pdf-icon-badge {
    font-size: 1.4rem;
  }
  .brochure-modal-header .brochure-modal-title-wrap h3 {
    font-size: 0.95rem;
  }
  .brochure-modal-header .brochure-modal-title-wrap p {
    font-size: 0.72rem;
  }
  .brochure-modal-header .modal-download-btn {
    font-size: 0.78rem;
    padding: 6px 12px;
  }
}
/* ===== Premium Video Highlights Infinite Marquee Reel ===== */
@keyframes smoothInfiniteVideoMarquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}
.video-slider-container {
  position: relative;
  border-radius: 20px;
  background: transparent;
  padding: 0;
}

.video-slider-viewport-wrapper {
  position: relative;
  width: 100%;
}

.video-infinite-viewport {
  width: 100%;
  overflow-x: auto;
  scroll-behavior: auto;
  border-radius: 18px;
  padding: 10px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.video-infinite-viewport:active {
  cursor: grabbing;
}
.video-infinite-viewport::-webkit-scrollbar {
  display: none;
}

.video-infinite-track {
  display: flex;
  gap: 22px;
  width: -moz-max-content;
  width: max-content;
}
.video-infinite-track img {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}

.video-card-marquee {
  width: 360px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .video-card-marquee {
    width: 290px;
  }
}
.video-slider-side-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  border: 1.5px solid var(--line);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.video-slider-side-btn.btn-left {
  left: -22px;
}
.video-slider-side-btn.btn-right {
  right: -22px;
}
.video-slider-side-btn:hover {
  background: var(--saffron-deep);
  color: #ffffff;
  border-color: var(--saffron-deep);
  box-shadow: 0 10px 28px rgba(255, 119, 0, 0.45);
  transform: translateY(-50%) scale(1.12);
}

@media (max-width: 1100px) {
  .video-slider-side-btn.btn-left {
    left: 6px;
  }
  .video-slider-side-btn.btn-right {
    right: 6px;
  }
}
.video-slider-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

@media (max-width: 900px) {
  .video-slider-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .video-slider-grid {
    grid-template-columns: 1fr;
  }
}
.video-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(31, 36, 48, 0.05);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  will-change: transform, box-shadow;
}
.video-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 22px 45px rgba(232, 119, 34, 0.16), 0 8px 18px rgba(0, 0, 0, 0.08);
  border-color: rgba(232, 119, 34, 0.45);
}
.video-card:hover .video-card-thumb img {
  transform: scale(1.12);
}
.video-card:hover .video-thumb-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(15, 23, 42, 0.85) 100%);
}
.video-card:hover .video-play-btn-circle {
  transform: scale(1.22);
  background: linear-gradient(135deg, #FF7700 0%, #E85D00 100%);
  color: #ffffff;
  border-color: rgb(255, 255, 255);
  box-shadow: 0 16px 40px rgba(255, 119, 0, 0.6), 0 0 0 10px rgba(255, 119, 0, 0.22);
}
.video-card:hover .video-watch-link {
  color: var(--saffron-deep);
  transform: translateX(6px);
}
.video-card:hover .video-watch-link svg {
  transform: translateX(4px);
}

.video-card-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #0f172a;
  overflow: hidden;
}
.video-card-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-thumb-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(15, 23, 42, 0.75) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.video-play-btn-circle {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.95);
  color: var(--saffron-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 0 5px rgba(255, 255, 255, 0.25);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.video-play-btn-circle svg {
  margin-left: 3px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.video-card:hover .video-play-btn-circle {
  transform: scale(1.18);
  background: linear-gradient(135deg, #FF7700 0%, #E85D00 100%);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 14px 38px rgba(255, 119, 0, 0.55), 0 0 0 9px rgba(255, 119, 0, 0.25);
}

.video-card-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #fbbf24;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}

.video-card-duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.video-card-body {
  padding: 16px 18px;
}
.video-card-body h4 {
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.38;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-watch-link {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--chakra);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: transform 0.2s ease, color 0.2s ease;
}

/* Dots Indicator Bar */
.video-slider-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.video-dot-pill {
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.video-dot-pill.active {
  width: 28px;
  background: var(--saffron-deep);
}
.video-dot-pill:not(.active) {
  width: 8px;
  opacity: 0.6;
}
.video-dot-pill:not(.active):hover {
  opacity: 1;
  background: var(--ink-soft);
}

/* ===== Teams Page Bottom CTA Section ===== */
.teams-cta-block {
  padding: 60px 0;
  width: 100%;
}

.teams-cta-wrapper {
  position: relative;
  width: 100%;
  min-height: 380px;
  border-radius: 24px;
  overflow: hidden;
  background-image: url("/assets/images/matches/team_cta.png");
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-shadow: 0 20px 50px rgba(31, 36, 48, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.teams-cta-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.25) 0%, rgba(15, 23, 42, 0.75) 45%, rgba(15, 23, 42, 0.92) 100%);
  z-index: 1;
}

.teams-cta-right-content {
  position: relative;
  z-index: 2;
  width: 55%;
  max-width: 620px;
  padding: 48px 48px 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #ffffff;
}
.teams-cta-right-content .teams-cta-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 800;
  color: #FF7700;
  background: rgba(255, 119, 0, 0.15);
  border: 1px solid rgba(255, 119, 0, 0.3);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.teams-cta-right-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 16px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.teams-cta-right-content p {
  font-size: 0.98rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 28px;
  max-width: 480px;
}
.teams-cta-right-content .teams-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(255, 119, 0, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
}
.teams-cta-right-content .teams-cta-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 36px rgba(255, 119, 0, 0.6);
}

@media (max-width: 900px) {
  .teams-cta-wrapper {
    min-height: auto;
    justify-content: center;
    background-position: center;
  }
  .teams-cta-wrapper::before {
    background: rgba(15, 23, 42, 0.85);
  }
  .teams-cta-right-content {
    width: 100%;
    max-width: 100%;
    padding: 36px 24px;
  }
}
/* ===== Matches Page Bottom CTA Section ===== */
.matches-cta-block {
  padding: 60px 0;
  width: 100%;
}

.matches-cta-wrapper {
  position: relative;
  width: 100%;
  min-height: 380px;
  border-radius: 24px;
  overflow: hidden;
  background-image: url("/assets/images/matches/match_cta.png");
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-shadow: 0 20px 50px rgba(31, 36, 48, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.matches-cta-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(15, 23, 42, 0.25) 0%, rgba(15, 23, 42, 0.75) 45%, rgba(15, 23, 42, 0.92) 100%);
  z-index: 1;
}

.matches-cta-right-content {
  position: relative;
  z-index: 2;
  width: 55%;
  max-width: 620px;
  padding: 48px 48px 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #ffffff;
}
.matches-cta-right-content .matches-cta-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 800;
  color: #FF7700;
  background: rgba(255, 119, 0, 0.15);
  border: 1px solid rgba(255, 119, 0, 0.3);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.matches-cta-right-content h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
  margin-bottom: 16px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.matches-cta-right-content p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 28px;
  max-width: 500px;
}
.matches-cta-right-content .matches-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 1.05rem;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(255, 119, 0, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
}
.matches-cta-right-content .matches-cta-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 36px rgba(255, 119, 0, 0.6);
}

@media (max-width: 900px) {
  .matches-cta-wrapper {
    min-height: auto;
    justify-content: center;
    background-position: center;
  }
  .matches-cta-wrapper::before {
    background: rgba(15, 23, 42, 0.85);
  }
  .matches-cta-right-content {
    width: 100%;
    max-width: 100%;
    padding: 36px 24px;
  }
}
/* ===== News Articles Section & Uncropped Newspaper Cards ===== */
.news-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 36px;
  align-items: stretch;
}

@media (max-width: 1024px) {
  .news-articles-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (max-width: 640px) {
  .news-articles-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.news-article-card-marquee {
  width: 360px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .news-article-card-marquee {
    width: 290px;
  }
}
.news-article-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.09);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.06);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  height: 100%;
}
.news-article-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(232, 119, 34, 0.2), 0 10px 20px rgba(0, 0, 0, 0.08);
  border-color: rgba(232, 119, 34, 0.45);
}
.news-article-card:hover .news-article-slot img {
  transform: scale(1.03);
}
.news-article-card:hover .img-hover-overlay {
  opacity: 1;
}
.news-article-card:hover .img-hover-overlay .img-hover-icon {
  transform: scale(1.1);
}
.news-article-badges-row {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  pointer-events: none;
}
.news-article-card .news-article-badge {
  position: static;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, #E87722 0%, #F59E0B 100%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  padding: 2.5px 8px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(232, 119, 34, 0.3);
  pointer-events: none;
  line-height: 1.2;
}
.news-article-card .news-article-badge svg {
  color: #ffffff;
  flex-shrink: 0;
}
.news-article-card .news-article-slot {
  width: 100%;
  height: 480px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
@media (max-width: 1024px) {
  .news-article-card .news-article-slot {
    height: 440px;
  }
}
@media (max-width: 640px) {
  .news-article-card .news-article-slot {
    height: 380px;
  }
}
.news-article-card .news-article-slot img {
  width: 100%;
  height: 100%;
  max-height: 440px;
  -o-object-fit: contain;
     object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  background: #ffffff;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}
@media (max-width: 1024px) {
  .news-article-card .news-article-slot img {
    max-height: 400px;
  }
}
@media (max-width: 640px) {
  .news-article-card .news-article-slot img {
    max-height: 340px;
  }
}

.img-hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 8;
}
.img-hover-overlay .img-hover-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E87722 0%, #F59E0B 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(232, 119, 34, 0.5);
  transform: scale(0.85);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.img-hover-overlay .img-hover-icon svg {
  width: 24px;
  height: 24px;
}
.img-hover-overlay .img-hover-text {
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.45);
  padding: 6px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* ===== Season 4 Press Release Media Section ===== */
.season4-media-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 24px;
}
@media (max-width: 1300px) {
  .season4-media-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
}
@media (max-width: 1000px) {
  .season4-media-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}
@media (max-width: 768px) {
  .season4-media-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}
@media (max-width: 520px) {
  .season4-media-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}

.season4-media-card {
  background: var(--paper, #ffffff);
  border: 1px solid var(--line, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 14px rgba(31, 36, 48, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  cursor: pointer;
}
.season4-media-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(232, 119, 34, 0.15), 0 4px 10px rgba(0, 0, 0, 0.05);
  border-color: rgba(232, 119, 34, 0.45);
}
.season4-media-card:hover .season4-media-logo img {
  transform: scale(1.1);
}
.season4-media-card:hover .season4-btn {
  background: var(--saffron, #e87722);
  color: #ffffff;
  border-color: var(--saffron, #e87722);
}

.season4-media-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  padding: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  box-sizing: border-box;
}
.season4-media-badge svg {
  width: 15px;
  height: 15px;
  display: block;
  flex-shrink: 0;
}
.season4-media-badge.badge-video {
  background: linear-gradient(135deg, #e87722 0%, #ff5252 100%);
  color: #ffffff;
  border: 2px solid #ffffff;
}
.season4-media-badge.badge-website {
  background: linear-gradient(135deg, #1b2a6b 0%, #2563eb 100%);
  color: #ffffff;
  border: 2px solid #ffffff;
}

.season4-media-logo {
  width: 100%;
  height: 105px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line, rgba(0, 0, 0, 0.06));
  position: relative;
}
.season4-media-logo img {
  max-width: 94%;
  max-height: 78px;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.season4-media-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
}

.season4-media-title {
  font-family: var(--font-display, inherit);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink, #1f2430);
  line-height: 1.3;
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 520px) {
  .season4-media-logo {
    height: 80px;
    padding: 6px 8px;
  }
  .season4-media-logo img {
    max-height: 56px;
  }
  .season4-media-badge {
    width: 26px;
    height: 26px;
    min-width: 26px;
    min-height: 26px;
    top: 6px;
    right: 6px;
  }
  .season4-media-badge svg {
    width: 12px;
    height: 12px;
  }
  .season4-media-body {
    padding: 8px 10px;
  }
  .season4-media-title {
    font-size: 0.74rem;
    line-height: 1.25;
  }
}
/* ===== Single Featured Press Conference Video Section ===== */
.press-featured-container {
  max-width: 960px;
  margin: 0 auto;
}

.press-featured-card {
  position: relative;
  background: #0d1322;
  border: 1px solid rgba(232, 119, 34, 0.25);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.15), 0 8px 30px rgba(232, 119, 34, 0.12);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.press-featured-card:hover {
  box-shadow: 0 24px 60px rgba(232, 119, 34, 0.24), 0 10px 36px rgba(0, 0, 0, 0.2);
  border-color: rgba(232, 119, 34, 0.5);
}

.press-featured-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000000;
  overflow: hidden;
}
.press-featured-screen iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.press-featured-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.press-featured-poster img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.press-featured-poster:hover img {
  transform: scale(1.04);
}

.press-featured-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 19, 34, 0.35) 0%, rgba(13, 19, 34, 0.85) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  text-align: center;
  transition: background 0.3s ease;
}
.press-featured-overlay:hover {
  background: linear-gradient(180deg, rgba(13, 19, 34, 0.25) 0%, rgba(13, 19, 34, 0.9) 100%);
}

.press-featured-play-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e87722 0%, #ff5252 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(232, 119, 34, 0.6), 0 0 0 10px rgba(232, 119, 34, 0.2);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  margin-bottom: 20px;
  cursor: pointer;
}
.press-featured-play-btn:hover {
  transform: scale(1.12);
  box-shadow: 0 14px 40px rgba(232, 119, 34, 0.8), 0 0 0 16px rgba(232, 119, 34, 0.25);
}
.press-featured-play-btn svg {
  width: 32px;
  height: 32px;
  margin-left: 4px;
}

.press-featured-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(232, 119, 34, 0.9);
  padding: 6px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  margin-bottom: 12px;
}

.press-featured-title {
  color: #ffffff;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.2rem, 2.5vw, 1.75rem);
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 8px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.press-featured-caption {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.88rem;
  font-weight: 500;
  max-width: 540px;
  margin: 0 auto;
}

.press-featured-footer {
  background: #090e1a;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.press-featured-footer-info {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #94a3b8;
  font-size: 0.82rem;
  font-weight: 600;
}

.press-featured-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ==========================================================================
   Special Leadership Video Spotlight (Half-and-Half Section)
   ========================================================================== */
.special-video-spotlight-block {
  width: 100%;
  background: linear-gradient(180deg, rgba(232, 119, 34, 0.03) 0%, rgba(27, 42, 107, 0.04) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 60px;
  padding-bottom: 70px;
  scroll-margin-top: 100px;
}

.spotlight-section-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 36px;
}

.spotlight-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 auto 10px auto;
}

.spotlight-main-heading {
  text-align: center;
  max-width: 780px;
  font-size: clamp(1.35rem, 2.3vw, 1.85rem);
  line-height: 1.3;
  margin-bottom: 8px;
}

.spotlight-subtitle {
  text-align: center;
  margin: 0 auto;
  max-width: 700px;
}

.spotlight-half-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  align-items: stretch;
}
@media (max-width: 960px) {
  .spotlight-half-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.spotlight-half-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 12px 35px rgba(27, 42, 107, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}
.spotlight-half-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgba(232, 119, 34, 0.14), 0 6px 18px rgba(0, 0, 0, 0.06);
  border-color: rgba(232, 119, 34, 0.4);
}

.spotlight-video-wrapper {
  position: relative;
  width: 100%;
  background: #0b0f19;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
  height: 480px;
}
@media (max-width: 600px) {
  .spotlight-video-wrapper {
    height: 380px;
  }
}

.spotlight-native-video {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  background: #070a12;
}

.spotlight-top-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  z-index: 5;
}

.spotlight-tag-pill {
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fbbf24;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.spotlight-duration-pill {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.spotlight-duration-pill svg {
  stroke: #fbbf24;
}

.spotlight-half-body {
  padding: 18px 22px 22px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: #ffffff;
}

.spotlight-speaker-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232, 119, 34, 0.08);
  border: 1px solid rgba(232, 119, 34, 0.2);
  color: var(--saffron-deep, #e87722);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 4px 12px 4px 6px;
  border-radius: 999px;
  margin-bottom: 10px;
  width: -moz-fit-content;
  width: fit-content;
}
.spotlight-speaker-chip .speaker-avatar-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff7700 0%, #e85d00 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spotlight-half-title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink, #1b2a6b);
  line-height: 1.35;
  margin-bottom: 0;
}

/* ===== Compact Date Tabs Carousel Slider (for Print Coverage & Season 4 Media) ===== */
.news-date-tabs-wrapper,
.s4-date-tabs-wrapper {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto 22px auto;
  padding: 0 8px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.news-date-scroll-btn,
.s4-date-scroll-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(27, 42, 107, 0.12);
  background: #ffffff;
  color: #1B2A6B;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  padding: 0;
}

.news-date-scroll-btn svg,
.s4-date-scroll-btn svg {
  width: 16px;
  height: 16px;
}

.news-date-scroll-btn:hover,
.s4-date-scroll-btn:hover {
  background: #E87722;
  border-color: #E87722;
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(232, 119, 34, 0.35);
}

.news-date-scroll-btn:active,
.s4-date-scroll-btn:active {
  transform: scale(0.92);
}

.news-date-tabs-scroll,
.s4-date-tabs-scroll {
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  scroll-behavior: smooth;
  flex-wrap: nowrap !important;
  white-space: nowrap;
  padding: 4px 2px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex: 1;
  min-width: 0;
}

.news-date-tabs-scroll::-webkit-scrollbar,
.s4-date-tabs-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.news-date-tab-btn,
.s4-date-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.09);
  background: #ffffff;
  color: #475569;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
  outline: none;
  line-height: 1.2;
}

.news-date-tab-btn .news-date-tab-icon,
.s4-date-tab-btn .s4-date-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
  opacity: 0.85;
  flex-shrink: 0;
}

.news-date-tab-btn .news-date-tab-icon svg,
.s4-date-tab-btn .s4-date-tab-icon svg {
  width: 12px;
  height: 12px;
}

.news-date-tab-btn .news-date-tab-count,
.s4-date-tab-btn .s4-date-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 800;
  background: rgba(0, 0, 0, 0.05);
  color: #475569;
  transition: all 0.2s;
  line-height: 1;
}

.news-date-tab-btn:hover,
.s4-date-tab-btn:hover {
  border-color: rgba(232, 119, 34, 0.45);
  background: #fffaf5;
  color: #E87722;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(232, 119, 34, 0.12);
}

.news-date-tab-btn:hover .news-date-tab-count,
.s4-date-tab-btn:hover .s4-date-tab-count {
  background: rgba(232, 119, 34, 0.12);
  color: #E87722;
}

.news-date-tab-btn.active,
.s4-date-tab-btn.active,
.news-date-tab-btn.on {
  background: linear-gradient(135deg, #E87722 0%, #F59E0B 100%);
  border-color: #E87722;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(232, 119, 34, 0.32);
  transform: translateY(-1px);
}

.news-date-tab-btn.active .news-date-tab-count,
.s4-date-tab-btn.active .s4-date-tab-count,
.news-date-tab-btn.on .news-date-tab-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* News Article Badges & Header in Print Coverage */
.news-article-badges-row {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  pointer-events: none;
}

.news-article-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #1e293b;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 2px 7px;
  border-radius: 999px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  line-height: 1.15;
}
.news-article-date-badge svg {
  width: 9px;
  height: 9px;
  color: #E87722;
  flex-shrink: 0;
}

.news-article-badges-row .news-article-badge,
.news-article-card .news-article-badge {
  position: static !important;
  top: auto !important;
  right: auto !important;
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, #E87722 0%, #F59E0B 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  padding: 2px 7px !important;
  border-radius: 999px !important;
  box-shadow: 0 2px 6px rgba(232, 119, 34, 0.28) !important;
  pointer-events: none;
  line-height: 1.15;
}
.news-article-badge svg {
  width: 9px;
  height: 9px;
  color: #ffffff;
  flex-shrink: 0;
}

.news-date-pill {
  display: none !important;
}

/* Gallery Section */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 32px;
}
@media (max-width: 900px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
}
@media (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
.gallery .img-slot {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  border: 1px solid var(--line, rgba(0,0,0,0.08));
  background: #fff;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.gallery .img-slot:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(232, 119, 34, 0.18);
  border-color: rgba(232, 119, 34, 0.4);
}
.gallery .img-slot .gallery-caption-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.88) 100%);
  padding: 24px 16px 14px 16px;
  color: #fff;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.gallery .img-slot .gallery-caption-overlay b {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: #fff;
}
.gallery .img-slot .gallery-caption-overlay span {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.82);
}