/* =========================================================
   PRE-TRANSLATION FLASH GUARD
   ========================================================= */
html.pre-translate {
  background: #08362a;
}

html.pre-translate body {
  visibility: hidden;
}

/* =========================================================
   POPUP FLOW GUARD
   Popup stylesheets load first; this main stylesheet is final.
   Closed overlays never reserve page height.
   ========================================================= */
.gcsez-modal,
.disc-modal,
.map-lb {
  position: fixed !important;
}

.gcsez-modal.is-open,
.disc-modal.is-open,
.map-lb.is-open {
  display: block !important;
}

/* =========================================================
   01. GLOBAL ROSE METALLIC SCROLLBAR Main website + all normal inner scroll areas
   ========================================================= */

/* Firefox */

html,
body,
* {
  scrollbar-width: thin;
  scrollbar-color: #e8b4a8 #073126;
}

/* Chrome / Edge / Safari */

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

/* TRACK */

*::-webkit-scrollbar-track {
  background: linear-gradient(180deg,
      #06271f 0%,
      #0b3529 50%,
      #06271f 100%);
  border-left: 1px solid rgba(240, 188, 194, 0.14);
}

/* =========================================================
   FORCE PRELOADER VISIBLE UNTIL JS RELEASES IT
   ========================================================= */

.gc-loader-active .page-loader {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: all !important;
}

.gc-loader-active body {
  overflow: hidden !important;
}

/* EXIT STATE */

/* ROSE METALLIC THUMB */

*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
      #6f3542 0%,
      #a95d6b 16%,
      #f4c1c6 34%,
      #fff0ed 48%,
      #d58b96 60%,
      #a85564 78%,
      #713743 100%);
  border: 2px solid #0b3529;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255, 244, 238, .92),
    inset 0 -1px 0 rgba(58, 26, 18, .72),
    0 0 6px rgba(232, 180, 168, .38);
}

/* HOVER */

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
      #7d3d4a 0%,
      #bd6e7b 18%,
      #ffd3d2 38%,
      #fff7f4 50%,
      #e49ca6 64%,
      #b45d6c 82%,
      #773944 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(58, 26, 18, .75),
    0 0 10px rgba(240, 188, 194, .55);
}

/* CLICK / DRAG */

*::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg,
      #5d2c37 0%,
      #a95161 22%,
      #e8a5ad 48%,
      #b65f6d 75%,
      #672f3a 100%);
}

/* SCROLLBAR CORNER */

*::-webkit-scrollbar-corner {
  background: #06271f;
}

/* =========================================================
   DISCLAIMER POPUP — MOBILE SCROLLBAR OUTSIDE FRAME
   ONLY UNDER 500PX
========================================================= */

@media (max-width: 500px) {

  /* Scrollbar ko crop hone se allow kare */
  .disc-modal-dialog {
    overflow: visible !important;
  }


  /* Scroll area ko sirf right side extend karo */
  .disc-modal-scroll {
    width: calc(100% + 10px) !important;
    margin-right: -10px !important;

    box-sizing: border-box;
  }


  /* Scrollbar width */
  .disc-modal-scroll::-webkit-scrollbar {
    width: 7px;
  }


  /* Transparent track */
  .disc-modal-scroll::-webkit-scrollbar-track {
    background: transparent;
  }


  /* Pink scrollbar */
  .disc-modal-scroll::-webkit-scrollbar-thumb {
    background: #e8b4a8;

    border-radius: 20px !important;

    border: 1px solid rgba(255, 255, 255, 0.25);

    box-shadow:
      0 0 4px rgba(232, 180, 168, 0.55);
  }

}

/* =========================================================
   02. POPUPS — FORCE ROSE METALLIC SCROLLBAR Quick Links + Tutorial Popup
   ========================================================= */

/* Firefox */

.gc-quick-popup,
.gc-quick-popup *,
.gc-tutorial-popup,
.gc-tutorial-popup * {
  scrollbar-width: thin !important;
  scrollbar-color: #e8b4a8 #073126 !important;
}

/* POPUP SCROLLBAR SIZE */

.gc-quick-popup *::-webkit-scrollbar,
.gc-tutorial-popup *::-webkit-scrollbar,
.gc-quick-popup__links::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

/* POPUP TRACK */

.gc-quick-popup *::-webkit-scrollbar-track,
.gc-tutorial-popup *::-webkit-scrollbar-track,
.gc-quick-popup__links::-webkit-scrollbar-track {
  background: #073126 !important;
  border-left: 1px solid rgba(240, 188, 194, .14) !important;
}

/* POPUP ROSE METALLIC THUMB */

.gc-quick-popup *::-webkit-scrollbar-thumb,
.gc-tutorial-popup *::-webkit-scrollbar-thumb,
.gc-quick-popup__links::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
      #6f3542 0%,
      #a95d6b 14%,
      #e8a5ad 28%,
      #ffd5d2 42%,
      #fff3ef 50%,
      #e6a0aa 61%,
      #b75f6d 80%,
      #703541 100%) !important;
  border: 2px solid #073126 !important;
  border-radius: 999px !important;
  box-shadow: inset 0 1px 0 rgba(255, 244, 238, .95),
    inset 0 -1px 0 rgba(58, 26, 18, .75),
    0 0 5px rgba(240, 188, 194, .55) !important;
}

/* POPUP HOVER */

.gc-quick-popup *::-webkit-scrollbar-thumb:hover,
.gc-tutorial-popup *::-webkit-scrollbar-thumb:hover,
.gc-quick-popup__links::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
      #7d3d4a 0%,
      #bd6e7b 17%,
      #f6bdc3 32%,
      #fff5f1 48%,
      #ffd4d1 53%,
      #de909c 68%,
      #ad5564 84%,
      #713743 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98),
    0 0 9px rgba(240, 188, 194, .72) !important;
}

/* POPUP ACTIVE */

.gc-quick-popup *::-webkit-scrollbar-thumb:active,
.gc-tutorial-popup *::-webkit-scrollbar-thumb:active,
.gc-quick-popup__links::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg,
      #63303b,
      #ad5867 24%,
      #edabb3 50%,
      #b35a69 78%,
      #632f3a) !important;
}

/* POPUP CORNER */

.gc-quick-popup *::-webkit-scrollbar-corner,
.gc-tutorial-popup *::-webkit-scrollbar-corner {
  background: #073126 !important;
}

/* =========================================================
   Green City SEZ — Jaipur Emerald & Cream luxury design system
   ========================================================= */

/* =========================================================
   Tokens
   ========================================================= */

/* =========================================================
   Reset
   ========================================================= */

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

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

img {
  height: auto;
}

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

button {
  font: inherit;
  cursor: pointer;
}

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

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 3px;
}

/* =========================================================
   Typography
   ========================================================= */

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--emerald-deep);
  text-wrap: balance;
}

h4 {
  line-height: 1.25;
}

.section-dark h4 {
  color: var(--cream);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4 {
  color: var(--cream);
}

h1 {
  font-size: var(--step-5);
}

h2 {
  font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.15rem);
}

h3 {
  font-size: var(--step-2);
}

p {
  text-wrap: pretty;
  font-size: clamp(0.9rem, 0.86rem + 0.2vw, 0.97rem);
}

strong {
  font-weight: 700;
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
  display: inline-block;
}

.eyebrow.center {
  justify-content: center;
}

.section-dark .eyebrow {
  color: var(--gold-light);
}

.section-dark .eyebrow::before {
  background: var(--gold-light);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 60ch;
}

.section-dark .lede {
  color: var(--on-emerald-soft);
}

/* =========================================================
   Layout primitives
   ========================================================= */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.container.narrow {
  width: min(100% - 2 * var(--gutter), var(--container-narrow));
}

section {
  position: relative;
}

.section {
  padding-block: var(--space-section);
}

.section-sm {
  padding-block: var(--space-section-sm);
}

.section-cream {
  background: var(--bg);
}

.section-cream-alt {
  background: var(--bg-alt);
}

.section-dark {
  background: var(--emerald-deep);
  color: var(--on-emerald);
}

.section-dark p {
  color: var(--on-emerald-soft);
}

.section-head.center {
  margin-inline: auto;
  text-align: center;
}

.section-head.center .lede {
  margin-inline: auto;
}

.section-head .eyebrow {
  margin-bottom: 1.1rem;
}

.section-head h2+.lede {
  margin-top: 1.1rem;
}

.grid {
  display: grid;
  gap: clamp(1rem, 0.6rem + 1.6vw, 1.8rem);
}

.cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.cols-4 {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.gold-rule {
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border: 0;
}

/* =========================================================
   Buttons
   ========================================================= */

.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--emerald-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.92em 1.6em;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: 100px;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out),
    background .3s ease, color .3s ease, border-color .3s ease;
  will-change: transform;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-gold);
}

.btn:active {
  transform: translateY(-1px);
}

.btn svg {
  width: 1.05em;
  height: 1.05em;
}

.btn-gold {
  --btn-bg: linear-gradient(135deg, var(--gold-light), var(--gold));
}

.btn-emerald {
  --btn-bg: var(--emerald);
  --btn-fg: var(--cream);
}

.btn-emerald:hover {
  box-shadow: var(--shadow-md);
}

.btn-outline {
  --btn-bg: transparent;
  --btn-fg: var(--emerald-deep);
  border-color: var(--line-gold);
}

.btn-outline:hover {
  background: rgba(201, 161, 74, 0.08);
  box-shadow: none;
  transform: translateY(-3px);
}

.section-dark .btn-outline,
.btn-outline-light {
  --btn-fg: var(--cream);
  border-color: var(--line-on-dark);
  background: transparent;
}

.section-dark .btn-outline:hover,
.btn-outline-light:hover {
  background: rgba(201, 161, 74, 0.12);
}

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--gold);
  border-color: transparent;
}

.btn-block {
  width: 100%;
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

.btn-group.center {
  justify-content: center;
}

/* =========================================================
   Header
   ========================================================= */

.site-header.scrolled {
  box-shadow: 0 14px 40px -22px rgba(0, 0, 0, 0.6);
  background: rgba(8, 54, 42, 0.94);
}

/* backdrop-filter creates a containing block for position:fixed — disable it while the mobile menu is open so the fixed nav stays pinned to the viewport */

body:not(.nav-open) .site-header.scrolled {
  backdrop-filter: blur(10px);
}

/* Keep the header (close bar) pinned while the mobile menu is open */

body.nav-open .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-overlay);
}

.brand-mark {
  width: 38px;
  height: 38px;
  flex: none;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.18rem;
  letter-spacing: 0.02em;
  color: var(--cream);
}

.brand-name b {
  color: var(--gold-light);
  font-weight: 700;
}

.brand-tag {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 700;
}

.nav a {
  position: relative;
  padding: 0.5rem 0.9rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--on-emerald);
  border-radius: 8px;
  transition: color .25s ease;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0.9rem;
  bottom: 0.28rem;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}

.nav a:hover {
  color: var(--cream);
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.nav a[aria-current="page"] {
  color: var(--gold-light);
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

/* The in-nav gold CTA is reserved for the mobile slide-out menu only */

.nav-cta {
  display: none;
}

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line-on-dark);
  background: transparent;
  border-radius: 24px;
  position: relative;
}

.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 20px;
  height: 2px;
  background: var(--cream);
  transition: transform .35s var(--ease-out), opacity .2s ease;
}

.nav-toggle span::before {
  translate: -50% -7px;
}

.nav-toggle span::after {
  translate: -50% 5px;
}

body.nav-open .nav-toggle span {
  background: transparent;
}

body.nav-open .nav-toggle span::before {
  translate: -50% -50%;
  rotate: 45deg;
}

body.nav-open .nav-toggle span::after {
  translate: -50% -50%;
  rotate: -45deg;
}

/* =========================================================
   Hero
   ========================================================= */

.hero {
  position: relative;
  background: var(--emerald-deep);
  color: var(--on-emerald);
  overflow: hidden;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.32;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 80% at 85% 10%, rgba(201, 161, 74, 0.18), transparent 55%),
    linear-gradient(115deg, var(--emerald-deep) 32%, rgba(8, 54, 42, 0.72) 70%, rgba(8, 54, 42, 0.55) 100%);
}

.hero-grid-lines {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image: linear-gradient(rgba(159, 187, 174, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159, 187, 174, 0.08) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 100% at 80% 30%, #000 30%, transparent 75%);
}

.hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  padding-block: clamp(1.75rem, 1.25rem + 3vw, 3.5rem);
}

.hero-copy {
  max-width: 40ch;
}

.hero h1 {
  color: var(--cream);
  font-size: clamp(2.2rem, 1.5rem + 3.6vw, 3.9rem);
  margin-top: 1.3rem;
}

.hero h1 em {
  font-style: normal;
  color: var(--gold-light);
  background: var(--gold-metallic);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: var(--gold-filter);
}

.hero-sub {
  font-size: var(--step-1);
  color: var(--on-emerald-soft);
  margin-top: 1.4rem;
  line-height: 1.62;
  max-width: 46ch;
}

.hero .btn-group {
  margin-top: 2.2rem;
}

.hero-meta {
  margin-top: 2.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-on-dark);
}

.hero-meta div {
  line-height: 1.2;
}

.hero-meta b {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--gold-light);
}

.hero-meta span {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--on-emerald-soft);
}

/* Hero plate / master-plan card */

.hero-plate {
  position: relative;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(18, 92, 70, 0.55), rgba(8, 54, 42, 0.85));
  box-shadow: var(--shadow-lg);
  padding: 1.4rem;
  backdrop-filter: blur(4px);
}

.hero-plate-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 700;
  margin-bottom: 0.9rem;
}

.hero-plate-label .live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--sage);
}

.hero-plate-label .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 0 0 rgba(231, 203, 126, 0.7);
  animation: pulse 2.4s var(--ease-out) infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(231, 203, 126, 0.55);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(231, 203, 126, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(231, 203, 126, 0);
  }
}

.hero-plate svg.siteplan {
  width: 100%;
  height: auto;
  border-radius: var(--r-md);
}

.hero-plate-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-top: 1rem;
}

.hero-plate-foot span {
  font-size: 0.66rem;
  text-align: center;
  color: var(--on-emerald-soft);
  letter-spacing: 0.02em;
  padding: 0.5rem 0.3rem;
  border: 1px solid var(--line-on-dark);
  border-radius: 8px;
}

.hero-plate-foot b {
  display: block;
  color: var(--gold-light);
  font-family: var(--font-head);
  font-size: 0.95rem;
}

/* =========================================================
   Trust strip
   ========================================================= */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.3rem var(--gutter);
  color: var(--on-emerald);
  border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.trust-item:last-child {
  border-right: 0;
}

.trust-item .ico {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--gold-light);
  border: 1px solid var(--line-on-dark);
  border-radius: 24px;
}

.trust-item span {
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--cream);
}

/* =========================================================
   Feature cards
   ========================================================= */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.4rem, 1.1rem + 0.9vw, 2rem);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s ease;
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-gold);
}

.section-dark .card {
  background: linear-gradient(160deg, rgba(18, 92, 70, 0.32), rgba(255, 255, 255, 0.02));
  border-color: var(--line-on-dark);
}

.section-dark .card:hover {
  border-color: var(--gold);
}

.card-ico {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(150deg, rgba(201, 161, 74, 0.16), rgba(201, 161, 74, 0.04));
  border: 1px solid var(--line-gold);
  color: var(--emerald);
  margin-bottom: 1.2rem;
}

.section-dark .card-ico {
  color: var(--gold-light);
}

.card h3 {
  font-size: var(--step-1);
  margin-bottom: 0.55rem;
}

.section-dark .card h3 {
  color: var(--cream);
}

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

.section-dark .card p {
  color: var(--on-emerald-soft);
}

.card-num {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.4rem;
  color: rgba(201, 161, 74, 0.16);
  line-height: 1;
}

/* Service card with index */

.service-card {
  padding-top: 2.2rem;
}

.service-card .kicker {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
  display: block;
  margin-bottom: 0.5rem;
}

/* =========================================================
   Split / about
   ========================================================= */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(2rem, 1rem + 4vw, 4.5rem);
  align-items: center;
}

.split-media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3.4;
}

.split-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-media .badge {
  position: absolute;
  left: 1.2rem;
  bottom: 1.2rem;
  right: 1.2rem;
  background: rgba(8, 54, 42, 0.86);
  border: 1px solid var(--line-on-dark);
  backdrop-filter: blur(6px);
  border-radius: var(--r-md);
  padding: 1rem 1.2rem;
  color: var(--cream);
}

.split-media .badge b {
  color: var(--gold-light);
  font-family: var(--font-head);
}

.split-media .badge span {
  display: block;
  font-size: 0.82rem;
  color: var(--on-emerald-soft);
}

.tick-list {
  display: grid;
  gap: 0.9rem;
  margin-top: 1.6rem;
}

.tick-list li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  font-size: 0.98rem;
  color: var(--ink-soft);
}

.section-dark .tick-list li {
  color: var(--on-emerald-soft);
}

.tick-list .tick {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(201, 161, 74, 0.15);
  color: var(--emerald);
}

.section-dark .tick-list .tick {
  color: var(--gold-light);
}

.tick-list b {
  color: var(--ink);
}

.section-dark .tick-list b {
  color: var(--cream);
}

/* =========================================================
   Why list (numbered points)
   ========================================================= */

.point-list {
  display: grid;
  gap: 0;
  counter-reset: pt;
}

.point-list li {
  counter-increment: pt;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: center;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line-on-dark);
  font-size: 1.02rem;
}

.point-list li:last-child {
  border-bottom: 0;
}

.point-list li::before {
  content: counter(pt, decimal-leading-zero);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--gold-light);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-on-dark);
  display: grid;
  place-items: center;
}

/* =========================================================
   Highlight chips
   ========================================================= */

.chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem;
}

.chip {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--emerald-deep);
  transition: border-color .3s ease, transform .3s var(--ease-out);
}

.chip:hover {
  border-color: var(--line-gold);
  transform: translateY(-2px);
}

.chip .ico {
  color: var(--gold);
  flex: none;
}

.section-dark .chip {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--line-on-dark);
  color: var(--cream);
}

.section-dark .chip .ico {
  color: var(--gold-light);
}

/* =========================================================
   Featured focus (image + content)
   ========================================================= */

.feature-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--emerald-deep);
  box-shadow: var(--shadow-lg);
}

.feature-banner-media {
  position: absolute;
  inset: 0;
}

.feature-banner-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.28;
}

.feature-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, var(--emerald-deep) 35%, rgba(8, 54, 42, 0.7));
}

.feature-banner-inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.5rem;
  align-items: center;
  padding: clamp(2rem, 1.4rem + 3vw, 4rem);
  color: var(--on-emerald);
}

.feature-banner h2 {
  color: var(--cream);
}

/* =========================================================
   Location map
   ========================================================= */

.map-wrap {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-on-dark);
  background: linear-gradient(160deg, #0b4031, var(--emerald-deep));
  box-shadow: var(--shadow-lg);
}

.map-wrap svg {
  width: 100%;
  height: auto;
  display: block;
}

.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 1.5rem;
  margin-top: 1.5rem;
}

.map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: var(--ink-soft);
  font-weight: 600;
}

.section-dark .map-legend span {
  color: var(--on-emerald-soft);
}

.map-legend i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  display: inline-block;
}

/* =========================================================
   Steps / journey
   ========================================================= */

.journey-step {
  position: relative;
  padding: 1.6rem 1.3rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

.journey-step:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}

.journey-step .step-n {
  counter-increment: step;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--emerald-deep);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(150deg, var(--gold-light), var(--gold));
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}

.journey-step h4 {
  font-size: 1.05rem;
}

.journey-step p {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 0.4rem;
}

/* =========================================================
   Comparison table
   ========================================================= */

table.compare {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
  background: var(--surface);
}

table.compare th,
table.compare td {
  padding: 1.05rem 1.3rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}

table.compare thead th {
  background: var(--emerald-deep);
  color: var(--cream);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

table.compare thead th:first-child {
  color: var(--gold-light);
}

table.compare thead th.highlight {
  background: var(--emerald);
}

table.compare tbody th {
  font-weight: 700;
  color: var(--emerald-deep);
  width: 34%;
}

table.compare td.col-sez {
  background: rgba(201, 161, 74, 0.07);
  font-weight: 600;
  color: var(--emerald-deep);
}

table.compare tbody tr:last-child td,
table.compare tbody tr:last-child th {
  border-bottom: 0;
}

.cell-yes {
  color: var(--emerald);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.cell-soft {
  color: var(--ink-soft);
}

/* =========================================================
   Video cards
   ========================================================= */

.video-card {
  display: block;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s ease;
}

.video-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-gold);
}

.video-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--emerald-deep);
}

.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
  transition: transform .6s var(--ease-out), opacity .4s ease;
}

.video-card:hover .video-thumb img {
  transform: scale(1.06);
  opacity: 0.9;
}

.video-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(8, 54, 42, 0.55));
}

.video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(201, 161, 74, 0.92);
  color: var(--emerald-deep);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.5);
  transition: transform .4s var(--ease-out), background .3s ease;
}

.video-card:hover .video-play {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--gold-light);
}

.video-body {
  padding: 1.2rem 1.3rem 1.4rem;
}

.video-body .tag {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}

.video-body h4 {
  font-size: 1.08rem;
  margin-top: 0.4rem;
}

/* =========================================================
   Gallery
   ========================================================= */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.9rem;
}

.gallery figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-sm);
}

.gallery.feature figure:first-child {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}

.gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}

.gallery figure:hover img {
  transform: scale(1.07);
}

.gallery figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.4rem 1.1rem 0.9rem;
  color: var(--cream);
  font-size: 0.84rem;
  font-weight: 600;
  background: linear-gradient(180deg, transparent, rgba(9, 40, 31, 0.90));
}

/* =========================================================
   Accordion (FAQ)
   ========================================================= */

.accordion {
  display: grid;
  gap: 5px;
}

.accordion .faq-item:hover {
  transform: translateX(3px);
  border-color: #E8B4A8 !important;
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(232, 180, 168, 0.2) !important;
}

.faq-item[open] {
  border-color: var(--line-gold);
  box-shadow: var(--shadow-sm);
}

.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 1rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--emerald-deep);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item[open] summary .q-ico {
  transform: rotate(45deg);
  background: var(--gold);
  color: var(--emerald-deep);
}

.faq-answer {
  padding: 0 1.4rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease-out), padding .4s var(--ease-out);
}

.faq-item[open] .faq-answer {
  padding: 0 1.4rem 1.3rem;
  max-height: 400px;
}

.faq-answer p {
  color: var(--ink-soft);
  font-size: 0.97rem;
}

/* =========================================================
   Forms
   ========================================================= */

.lead-card {
  background: var(--surface);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-lg);
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  box-shadow: var(--shadow-lg);
}

.section-dark .lead-card {
  background: linear-gradient(165deg, rgba(18, 92, 70, 0.4), rgba(8, 54, 42, 0.65));
  border-color: var(--line-on-dark);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field.full {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--emerald);
}

.section-dark .field label {
  color: var(--gold-light);
}

.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 0.96rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-alt);
  color: var(--ink);
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}

.section-dark .field input,
.section-dark .field select,
.section-dark .field textarea {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line-on-dark);
  color: var(--cream);
}

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

.field input::placeholder,
.field textarea::placeholder {
  color: #8a8f84;
}

.section-dark .field input::placeholder,
.section-dark .field textarea::placeholder {
  color: var(--sage);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 161, 74, 0.18);
  background: var(--surface);
}

.section-dark .field input:focus,
.section-dark .field select:focus,
.section-dark .field textarea:focus {
  background: rgba(255, 255, 255, 0.08);
}

.form-note {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 0.4rem;
}

.section-dark .form-note {
  color: var(--on-emerald-soft);
}

/* =========================================================
   CTA band
   ========================================================= */

.cta-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 50% 0%, rgba(201, 161, 74, 0.16), transparent 60%);
}

.cta-band .container {
  position: relative;
}

.cta-band h2 {
  color: var(--cream);
  max-width: 22ch;
  margin-inline: auto;
}

.cta-band p {
  max-width: 56ch;
  margin: 1.1rem auto 0;
}

/* =========================================================
   Disclaimer
   ========================================================= */

.disclaimer {
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.5;
  border-left: 0;
  padding: 0.9rem 1.1rem;
  background: rgba(201, 161, 74, 0.08);
  border: 1px solid var(--line-gold);
  border-radius: var(--r-sm);
}

.section-dark .disclaimer {
  color: var(--on-emerald-soft);
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-on-dark);
}

.price-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  font-family: var(--font-head);
  color: var(--cream);
}

.price-tag b {
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
  color: var(--gold-light);
  font-weight: 700;
}

.price-tag span {
  font-size: 0.9rem;
  color: var(--on-emerald-soft);
}

/* =========================================================
   Floating actions
   ========================================================= */

.float-actions {
  position: fixed;
  right: clamp(1rem, 2vw, 1.6rem);
  bottom: clamp(1rem, 2vw, 1.6rem);
  z-index: var(--z-float);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.fab {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  box-shadow: var(--shadow-lg);
  transition: transform .4s var(--ease-out);
  position: relative;
}

.fab:hover {
  transform: scale(1.08) translateY(-2px);
}

.fab-whatsapp {
  background: #25D366;
}

.fab-call {
  background: var(--surface);
  color: var(--emerald-deep);
  border: 1px solid var(--gold);
}

.fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0.5;
  animation: ring 2.4s var(--ease-out) infinite;
}

.fab-call::after {
  border: 2px solid var(--gold) !important;
}

@keyframes ring {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }

  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* =========================================================
   Mobile sticky CTA bar
   ========================================================= */

.mobile-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.6rem 0.4rem 0.7rem;
  color: var(--cream);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-right: 1px solid var(--line-on-dark);
}

.mobile-bar a:last-child {
  border-right: 0;
}

.mobile-bar a .ico {
  color: var(--gold-light);
}

/* =========================================================
   Page hero (subpages)
   ========================================================= */

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--emerald-deep);
  color: var(--on-emerald);
  padding-block: clamp(1.5rem, 1.2rem + 2vw, 2.75rem);
  isolation: isolate;
}

/* Subpage hero: let the leather grain show through. The stock photo + an opaque gradient used to bury it, so the band read as a flat green wash. Photo is dropped and the overlay is now translucent. */

.page-hero .hero-media {
  display: none;
}

.page-hero .hero-overlay {
  background: radial-gradient(100% 120% at 80% 0%, rgba(201, 161, 74, 0.14), transparent 58%),
    linear-gradient(160deg, rgba(8, 54, 42, 0.30), rgba(8, 54, 42, 0.42));
}

.page-hero h1 {
  color: var(--cream);
  margin-top: 1rem;
  max-width: none;
  white-space: nowrap;
  font-size: clamp(2rem, 1.5rem + 2.6vw, 3.2rem);
}

@media (max-width: 640px) {
  .page-hero h1 {
    white-space: normal;
  }
}

.page-hero p {
  color: var(--on-emerald-soft);
  max-width: 56ch;
  margin-top: 1.1rem;
  font-size: var(--step-1);
}

.breadcrumb {
  font-size: 0.82rem;
  color: var(--sage);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.breadcrumb a:hover {
  color: var(--gold-light);
}

.breadcrumb .sep {
  color: var(--line-on-dark);
}

/* =========================================================
   Reveal animation (JS-gated: visible by default without JS) ---------- Never fade fully to 0: if the observer is late (or a tall section can't meet its threshold), partially-faded text still reads instead of going blank.
   ========================================================= */

.js .reveal {
  opacity: 1;
  transform: translateY(14px);
  transition: transform .45s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* Tall sections must never depend on the animation to become readable. */

.js .gc-blocks,
.js .gc-legal,
.js .gc-check,
.js .bg-grid,
.js .gc-aims,
.js .gc-stats {
  opacity: 1 !important;
  transform: none !important;
}

/* Phones: skip the entrance animation entirely — it is the main cause of "blank while scrolling" on slower devices. */

@media (max-width: 780px) {

  .js .reveal,
  .js .reveal.in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-plate-label .dot,
  .fab::after {
    animation: none;
  }

  .btn,
  .card,
  .journey-step,
  .chip,
  .video-card {
    transition: none;
  }
}

/* =========================================================
   Utilities
   ========================================================= */

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

.mt-1 {
  margin-top: 1rem;
}

.mt-2 {
  margin-top: 1.6rem;
}

.mt-3 {
  margin-top: 2.4rem;
}

.mb-0 {
  margin-bottom: 0;
}

.maxw-prose {
  max-width: 65ch;
}

.stack>*+* {
  margin-top: 1.1rem;
}

.divider-gold {
  height: 1px;
  background: var(--line-gold);
  border: 0;
  margin-block: var(--space-section-sm);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  background: rgba(201, 161, 74, 0.1);
  border: 1px solid var(--line-gold);
  padding: 0.4rem 0.9rem;
  border-radius: 100px;
}

.section-dark .pill {
  color: var(--gold-light);
  border-color: var(--line-on-dark);
}

/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-plate {
    max-width: 460px;
  }

  .feature-banner-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .header-phone {
    display: none;
  }

  .nav-toggle {
    display: grid;
    place-items: center;
  }

  .nav {
    display: flex;
    position: fixed;
    inset: 50px 0 0;
    z-index: var(--z-nav);
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    background: var(--emerald-deep);
    padding: 1.5rem var(--gutter) 2rem;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .45s var(--ease-out), visibility 0s linear .45s;
    border-top: 1px solid var(--line-on-dark);
    overflow-y: auto;
  }

  body.nav-open .nav {
    transform: translateX(0);
    visibility: visible;
    transition: transform .45s var(--ease-out), visibility 0s;
  }

  body.nav-open {
    overflow: hidden;
  }

  .nav a {
    width: 100%;
    padding: 10px 10px;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--line-on-dark);
  }

  .nav a::after {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  /* hide the CALL button inside the mobile menu */

  .nav .nav-cta {
    color: var(--emerald-deep);
  }

  .nav .btn {
    margin-top: 1.4rem;
    width: 100%;
    border-bottom: 0;
  }

  .trust-item {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .mobile-bar {
    display: grid;
  }

  .float-actions {
    bottom: 76px;
  }



  /* was full-width span at ≤1024px; keep it in the 2×2 */

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

@media (max-width: 520px) {
  .hero-meta b {
    font-size: 1.25rem;
  }

  .gallery.feature figure:first-child {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 4/3;
  }

  .btn {
    width: 100%;
  }

  .btn-group {
    flex-direction: column;
  }

  .header-cta .btn-call-sm {
    padding: 0.7em 1.1em;
  }
}

/* =========================================================
   HOMEPAGE — reference layout components
   ========================================================= */

/* Header: centered nav + gold-filled call pill (applies site-wide) */

.header-inner {
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
  display: grid;
  grid-template-columns: auto 1fr auto;
}

.nav {
  display: flex;
  align-items: center !important;
  /* gap: 0.5rem; */
  justify-content: center !important;
}

/* White call pill + white Instagram icon button */

.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  font-family: var(--font-head);
  font-size: 0.95rem;
  white-space: nowrap;
  padding: 0.5rem 1.1rem 0.5rem 0.9rem;
  border: 1px solid var(--line-gold);
  border-radius: 100px;
  transition: background .3s ease, border-color .3s ease, transform .35s var(--ease-out);
  background: #ffffff;
  border-color: #ffffff;
  color: var(--emerald-deep);
}

.header-phone:hover {
  transform: translateY(-2px);
  background: #f2f2ec;
  border-color: #ffffff;
}

.header-phone .ico {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: none;
  color: var(--emerald-deep);
}

.header-cta .head-social {
  background: #ffffff;
  border-color: #ffffff;
  color: var(--emerald-deep);
}

.header-cta .head-social:hover {
  background: #f2f2ec;
  border-color: var(--gold);
  color: var(--emerald-deep);
}

/* Dark emerald card variant (the dominant card look) */

.card-em h3 {
  color: var(--cream);
}

.card-em p {
  color: var(--on-emerald-soft);
}

.card-em .card-ico {
  color: var(--gold-light);
  border-color: var(--line-gold);
  background: rgba(201, 161, 74, 0.12);
}

.card-em:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow-md);
}

.card-em .kicker {
  color: var(--gold-light);
}

.card-em .card-num {
  color: rgba(231, 203, 126, 0.16);
}

/* Hero art frame + decorative gold curve */

.hero-art {
  position: relative;
}

.hero-art .frame {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-on-dark);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3.1;
}

.hero-art .frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-art .frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, rgba(8, 54, 42, 0.55));
}

.hero-curve {
  position: absolute;
  inset: -14% -10% -10% -12%;
  z-index: -1;
  pointer-events: none;
  width: calc(100% + 22%);
  height: calc(100% + 24%);
}

.hero-tag {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(9, 40, 31, 0.90);
  border: 1px solid var(--line-on-dark);
  border-radius: 100px;
  padding: .5rem 1rem;
  color: var(--cream);
  font-size: .78rem;
  font-weight: 700;
  backdrop-filter: blur(6px);
}

.hero-tag .ico {
  color: var(--gold-light);
  display: grid;
}

/* Trust cards row */

.trust-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .9rem;
}

.trust-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
}

.trust-card .ico {
  width: 48px;
  height: 48px;
  margin: 0 auto .8rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--gold-light);
  background: rgba(201, 161, 74, 0.1);
  border: 1px solid var(--line-gold);
}

.trust-card span {
  display: block;
  color: var(--cream);
  font-weight: 600;
  font-size: .86rem;
  line-height: 1.35;
}

/* Gold line-art illustration (cityscape / skyline) */

.lineart {
  width: 100%;
  height: auto;
  color: var(--gold);
  opacity: .9;
}

.section-dark .lineart {
  color: var(--gold-light);
}

/* Featured focus aerial with labels + stats */

.focus {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-on-dark);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 16 / 9;
}

.focus img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
}

.focus::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 110% at 50% 100%, rgba(8, 54, 42, 0.72), transparent 62%);
}

.focus-label {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(201, 161, 74, 0.94);
  color: var(--emerald-deep);
  font-size: .7rem;
  font-weight: 700;
  padding: .35rem .8rem;
  border-radius: 100px;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5);
  white-space: nowrap;
}

.focus-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1.6rem;
}

.focus-stat {
  text-align: center;
  padding: 1rem .5rem;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-md);
}

.focus-stat .ico {
  color: var(--gold-light);
  margin-bottom: .5rem;
  display: flex;
  justify-content: center;
}

.focus-stat b {
  display: block;
  color: var(--cream);
  font-family: var(--font-head);
  font-size: .92rem;
  line-height: 1.2;
}

.focus-stat span {
  color: var(--on-emerald-soft);
  font-size: .74rem;
}

/* Map embed */

.map-embed {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-gold);
  box-shadow: var(--shadow-md);
  background: #0e4937;
}

.map-embed iframe {
  width: 100%;
  height: clamp(320px, 42vw, 460px);
  border: 0;
  display: block;
}

/* Info cards (plot options + documentation safety) */

.info-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s ease;
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-gold);
}

.info-card .pic {
  aspect-ratio: 16 / 8;
  overflow: hidden;
}

.info-card .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out);
}

.info-card:hover .pic img {
  transform: scale(1.05);
}

.info-card .body {
  padding: clamp(1.4rem, 1rem + 1vw, 2rem);
}

.info-card h3 {
  font-size: var(--step-2);
  margin-bottom: .4rem;
}

/* Buyer journey timeline */

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.timeline::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 27px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  z-index: 0;
}

.tl-step {
  position: relative;
  z-index: 1;
  text-align: center;
}

.tl-num {
  width: 56px;
  height: 56px;
  margin: 0 auto .9rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--emerald-deep);
  background: linear-gradient(150deg, var(--gold-light), var(--gold));
  border: 4px solid var(--bg-alt);
  box-shadow: 0 8px 20px -8px rgba(201, 161, 74, .6);
}

.tl-step h4 {
  font-size: 1rem;
}

.tl-step p {
  font-size: .82rem;
  color: var(--ink-soft);
  margin-top: .3rem;
}

/* Two-col: compare table + buyer-guide cards */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: start;
}

.guide-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.guide-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1.4rem;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s ease;
}

.guide-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-gold);
}

.guide-card .card-ico {
  width: 44px;
  height: 44px;
  margin-bottom: .9rem;
}

.guide-card h4 {
  font-size: 1rem;
}

.guide-card p {
  font-size: .86rem;
  color: var(--ink-soft);
  margin: .4rem 0 .9rem;
}

.guide-card a.more {
  color: var(--emerald);
  font-weight: 700;
  font-size: .8rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.guide-card a.more:hover {
  color: var(--gold);
  gap: .6rem;
}

/* YouTube button */

.btn-youtube {
  --btn-bg: #FF0000;
  --btn-fg: #fff;
}

.btn-youtube:hover {
  box-shadow: 0 16px 36px -16px rgba(255, 0, 0, .6);
}

/* FAQ two-column */

.accordion.grid-2 {
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

/* Final CTA with handshake mark */

.cta-final {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 2.5rem;
  flex-wrap: wrap;
  text-align: left;
}

.cta-final .lead-mark {
  width: 70px;
  height: 70px;
  flex: none;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: rgba(201, 161, 74, 0.12);
  border: 1px solid var(--line-gold);
  color: var(--gold-light);
}

.cta-final .txt {
  flex: 1 1 380px;
}

.cta-final .txt h2 {
  color: var(--cream);
}

.cta-final .txt .eyebrow {
  margin-bottom: .8rem;
}

.cta-final .btn-group {
  flex: 0 0 auto;
}

@media (max-width: 980px) {
  .timeline {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem 1rem;
  }

  .timeline::before {
    display: none;
  }
}

@media (max-width: 860px) {
  .two-col {
    grid-template-columns: 1fr;
  }

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

  .accordion.grid-2 {
    grid-template-columns: 1fr;
  }

  .cta-final {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .cta-final .btn-group {
    justify-content: center;
  }
}

@media (max-width: 560px) {
  .timeline {
    grid-template-columns: repeat(2, 1fr);
  }

  .guide-cards {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   HERO v2 — serif logo, curved gold image panel, stats, icon trust row
   ========================================================= */

/* Typographic gold logo */

.brand {
  display: inline-flex;
  color: var(--cream);
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1;
}

.logo-sez {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.95rem;
  letter-spacing: .1em;
  color: var(--gold-light);
  line-height: .9;
}

.logo-sub {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .44em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 1px;
}

.logo-tag {
  font-size: .5rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage);
  font-weight: 700;
  margin-top: 5px;
}

/* Call pill: number only (reference look) */

.header-phone .label {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(8, 54, 42, 0.62);
  display: none;
}

/* Curved hero */

.hero-curved {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--emerald-deep);
  color: var(--on-emerald);
  display: flex;
  align-items: center;
  min-height: clamp(500px, 64vh, 680px);
  border-bottom: 1px solid var(--line-on-dark);
}

.hero-clip-def {
  position: absolute;
  width: 0;
  height: 0;
}

.hero-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 57%;
  z-index: 0;
}

.hero-panel>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: url(#heroClip);
}

.hero-panel .edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.hero-panel .hero-tag {
  position: absolute;
  right: 8%;
  bottom: 1.4rem;
  left: auto;
}

.hero-curved .hero-grid-lines {
  mask-image: radial-gradient(120% 100% at 10% 40%, #000 30%, transparent 72%);
}

.hero2-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem);
  padding-inline: clamp(1.25rem, 5vw, 6.5rem) var(--gutter);
}

.hero-curved h1 {
  font-family: var(--font-display);
  font-weight: 700;
  color: #ffffff;
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4rem);
  line-height: 1.06;
  letter-spacing: 0;
  text-wrap: balance;
}

.hero-curved h1 em {
  font-style: normal;
  color: var(--gold-light);
  background: var(--gold-metallic);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: var(--gold-filter);
}

.hero-curved h1 .h1-sub {
  display: block;
  font-size: 48px;
  line-height: 1.12;
  margin-top: 0.35em;
}

.hero-points {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold-light);
  font-size: clamp(1rem, .9rem + .55vw, 1.3rem);
  margin-top: 1rem;
}

.hero-curved .hero-sub {
  font-size: var(--step-1);
  color: var(--on-emerald-soft);
  margin-top: 1rem;
  line-height: 1.6;
  max-width: 42ch;
}

.hero-curved .btn-group {
  margin-top: 1.8rem;
}

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.hero-stats>div {
  padding: 0 1.5rem;
  border-left: 1px solid var(--line-on-dark);
}

.hero-stats>div:first-child {
  padding-left: 0;
  border-left: 0;
}

.hero-stats b {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold-light);
  font-size: 1.7rem;
  display: block;
  line-height: 1.05;
}

.hero-stats span {
  font-size: .76rem;
  color: var(--on-emerald-soft);
}

/* Icon trust row with dividers */

.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.trust-emb {
  position: relative;
  text-align: center;
  padding: 1.6rem 1rem;
}

.trust-emb+.trust-emb::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24%;
  bottom: 24%;
  width: 1px;
  background: var(--line-on-dark);
}

.trust-emb:nth-child(4n

  /**/
  +1)::before {
  display: none;
}

.trust-emb:nth-child(n

  /**/
  +5)::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 0;
  height: 1px;
  background: var(--line-on-dark);
}

.trust-emb span {
  color: var(--cream);
  font-weight: 600;
  font-size: .84rem;
  line-height: 1.3;
  display: block;
}

@media (max-width: 900px) {
  .hero-curved {
    display: block;
    min-height: 0;
  }

  .hero-panel {
    position: relative;
    width: 100%;
    height: clamp(200px, 42vw, 300px);
  }

  .hero-panel>img {
    clip-path: none;
  }

  .hero-panel .edge {
    display: none;
  }

  .hero-panel .hero-tag {
    right: auto;
    left: 1rem;
  }

  .hero2-copy {
    max-width: none;
  }

  .hero2-inner {
    padding-block: clamp(2rem, 1.6rem + 3vw, 3rem);
    padding-inline: var(--gutter);
  }

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

  .trust-emb+.trust-emb::before {
    display: none;
  }

  .trust-emb:nth-child(n

    /**/
    +5)::after {
    display: none;
  }
}

@media (max-width: 520px) {
  .trust-row {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-stats {
    flex-wrap: nowrap;
    gap: 0;
  }

  .hero-stats>div {
    padding: 0 0.7rem;
    flex: 1 1 0;
    min-width: 0;
  }

  .hero-stats b {
    font-size: 1.35rem;
  }

  .hero-stats span {
    font-size: 0.66rem;
  }
}

/* =========================================================
   DARK SURFACES — single solid green (An earlier revision gave these gradients; the flat fill won out. The `--grad-emerald-*` tokens are kept because .coming-soon still uses one.)
   ========================================================= */

.hero-curved,
.page-hero {
  background: var(--emerald-deep);
}

.section-dark,
.hero-curved+.section-dark {
  background: var(--emerald-deep);
}

.cta-band {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--emerald-700);
  text-align: center;
  background: var(--emerald-deep);
}

/* =========================================================
   SQUARE-BY-DEFAULT GEOMETRY Everything is square unless a later rule opts back in. The radius tokens collapse to 5px here so any remaining var(--r-*) consumer stays consistent.
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
  border-radius: 0 !important;
}

/* Opt-in rounded pill: overrides the global square reset above */

.btn-round {
  border-radius: 999px !important;
}

/* =========================================================
   Background image inside the emerald feature cards (card-em)
   ========================================================= */

.card-em:nth-child(4n

  /**/
  +1) {
  background-image: linear-gradient(158deg, rgba(14, 74, 56, 0.86) 0%, rgba(8, 44, 34, 0.94) 100%), url("../assets/card-planned.webp");
}

.card-em:nth-child(4n

  /**/
  +2) {
  background-image: linear-gradient(158deg, rgba(14, 74, 56, 0.86) 0%, rgba(8, 44, 34, 0.94) 100%), url("../assets/card-roads.webp");
}

.card-em:nth-child(4n

  /**/
  +3) {
  background-image: linear-gradient(158deg, rgba(14, 74, 56, 0.86) 0%, rgba(8, 44, 34, 0.94) 100%), url("../assets/card-zones.webp");
}

.card-em:nth-child(4n) {
  background-image: linear-gradient(158deg, rgba(14, 74, 56, 0.86) 0%, rgba(8, 44, 34, 0.94) 100%), url("../assets/card-growth.webp");
}

.card-em:nth-child(4n

  /**/
  +1):hover {
  background-image: linear-gradient(158deg, rgba(15, 80, 60, 0.80) 0%, rgba(8, 44, 34, 0.92) 100%), url("../assets/card-planned.webp");
}

.card-em:nth-child(4n

  /**/
  +2):hover {
  background-image: linear-gradient(158deg, rgba(15, 80, 60, 0.80) 0%, rgba(8, 44, 34, 0.92) 100%), url("../assets/card-roads.webp");
}

.card-em:nth-child(4n

  /**/
  +3):hover {
  background-image: linear-gradient(158deg, rgba(15, 80, 60, 0.80) 0%, rgba(8, 44, 34, 0.92) 100%), url("../assets/card-zones.webp");
}

.card-em:nth-child(4n):hover {
  background-image: linear-gradient(158deg, rgba(15, 80, 60, 0.80) 0%, rgba(8, 44, 34, 0.92) 100%), url("../assets/card-growth.webp");
}

/* =========================================================
   WHITE ICONS on dark surfaces
   ========================================================= */

.card-em .card-ico,
.section-dark .card-ico,
.trust-emb .ico,
.trust-card .ico,
.trust-item .ico,
.section-dark .chip .ico,
.section-dark .tick-list .tick,
.hero-tag .ico,
.focus-stat .ico,
.mobile-bar a .ico {
  color: #ffffff;
}

/* keep WhatsApp brand-green in the mobile bar */

.mobile-bar a.is-wa .ico {
  color: #25D366;
}

/* =========================================================
   HERO full-bleed background image (render includes the gold wave)
   ========================================================= */

.hero-curved.hero-bg {
  background: var(--emerald-deep);
}

/* Crossfading image slider behind the hero text */

.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.hero-slide.is-active {
  opacity: 1;
}

/* Mobile-only hero background (portrait render); hidden on desktop */

.hero-mobile-slide {
  display: none;
}

/* Gradient overlay above the slides, below the text — keeps copy readable */

.hero-curved.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(100deg, rgba(7, 40, 31, 0.95) 0%, rgba(7, 40, 31, 0.66) 36%, rgba(7, 40, 31, 0.12) 55%, rgba(7, 40, 31, 0) 70%);
}

/* Slide indicator dots */

.hero-dots {
  position: absolute;
  z-index: 3;
  left: clamp(1.25rem, 5vw, 6.5rem);
  bottom: clamp(1.5rem, 3vw, 2.6rem);
  display: flex;
  gap: .55rem;
}

.hero-dot {
  width: 34px;
  height: 4px;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: rgba(246, 239, 221, 0.32);
  transition: background .3s ease, width .3s ease;
}

.hero-dot:hover {
  background: rgba(246, 239, 221, 0.6);
}

.hero-dot.is-active {
  background: var(--gold-light);
  width: 48px;
}

@media (max-width: 900px) {
  .hero-slide {
    display: none;
  }

  .hero-mobile-slide {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  /* Size the hero to the image's own aspect ratio so the whole render shows (no side/edge cropping), then overlay the copy on its dark-green lower zone. */

  .hero-curved.hero-disclaimer {
    min-height: 0;
    aspect-ratio: 1130 / 1600;
    display: flex;
    align-items: flex-end;
  }

  .hero-curved.hero-disclaimer .hero2-inner {
    width: 100%;
    padding-bottom: clamp(1.5rem, 5vw, 3rem);
  }

  .hero-curved.hero-bg::after {
    background: linear-gradient(180deg, rgba(7, 40, 31, 0) 0%, rgba(7, 40, 31, 0.05) 34%, rgba(7, 40, 31, 0.55) 66%, rgba(7, 40, 31, 0.9) 100%);
  }

  .hero-dots {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Trust-row icons at 65x65 */

.trust-emb .ico svg {
  width: 44px;
  height: 44px;
}

/* Trust-row icons: thin 0.6 stroke */

.trust-emb .ico svg,
.trust-emb .ico svg * {
  stroke-width: 0.6;
}

/* =========================================================
   "Our Specialisation" section background image
   ========================================================= */

.section-dark.spec-bg {
  background-image: linear-gradient(90deg, rgba(7, 40, 31, 0.96) 0%, rgba(7, 40, 31, 0.80) 30%, rgba(7, 40, 31, 0.30) 62%, rgba(7, 40, 31, 0.02) 100%),
    url("../assets/specialisation-bg.webp");
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}

@media (max-width: 760px) {
  .section-dark.spec-bg {
    background-image: linear-gradient(180deg, rgba(7, 40, 31, 0.45) 0%, rgba(7, 40, 31, 0.72) 40%, rgba(7, 40, 31, 0.93) 100%),
      url("../assets/spec-bg-mobile.webp");
    background-position: top center;
    background-size: cover;
  }
}

/* Paragraph base size — 16px (keeps .lede and hero display lines larger) */

p:not(.lede):not(.hero-sub):not(.hero-points) {
  font-size: 16px;
}

/* =========================================================
   Alternating feature rows (content/image, flipped per row)
   ========================================================= */

.alt-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
}

/* content-left: content left, image right | img-left: natural DOM order */

.alt-rows.content-left .info-card .pic {
  order: 2;
}

@media (max-width: 760px) {
  .alt-rows .info-card {
    grid-template-columns: 1fr;
  }

  .alt-rows .info-card .pic {
    min-height: 0;
    aspect-ratio: 16 / 8;
  }

  .alt-rows.content-left .info-card .pic {
    order: 0;
  }

  .alt-rows.content-left .info-card .body {
    order: 0;
  }
}

/* alt-rows: full-width, no card background */

.alt-rows .info-card:hover {
  transform: none;
  box-shadow: none;
}

.alt-rows .info-card .pic {
  aspect-ratio: auto;
  height: 100%;
  min-height: 320px;
  overflow: hidden;
}

/* alt-section: images bleed full-width to viewport edges, content aligned to container */

.alt-section>.container {
  width: 100%;
  max-width: none;
}

.alt-rows .info-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
  column-gap: 0;
}

.alt-rows .info-card .body {
  align-self: center;
  padding: 0;
  padding-block: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.alt-rows.content-left .info-card .body {
  order: 1;
  padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2));
  padding-right: clamp(1.5rem, 1rem + 2vw, 3.5rem);
}

.alt-rows.img-left .info-card .body {
  padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2));
  padding-left: clamp(1.5rem, 1rem + 2vw, 3.5rem);
}

@media (max-width: 760px) {

  .alt-rows .info-card .body,
  .alt-rows.content-left .info-card .body,
  .alt-rows.img-left .info-card .body {
    padding: clamp(1.4rem, 4vw, 2rem) var(--gutter);
  }
}

/* =========================================================
   Responsive overflow fix — let grid/flex items shrink so wide content (e.g. the comparison table) scrolls inside its container, not the page
   ========================================================= */

.two-col>*,
.split>*,
.grid>*,
.alt-rows .info-card>* {
  min-width: 0;
}

.table-wrap {
  overflow-x: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line-on-dark);
  box-shadow: var(--shadow-md);
  max-width: 100%;
}

/* Compare table -> stacked per-factor cards on mobile (no horizontal scroll) */

@media (max-width: 620px) {
  .table-wrap {
    overflow: visible;
    border: 0;
    box-shadow: none;
  }

  table.compare {
    min-width: 0;
    background: transparent;
  }

  table.compare thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  table.compare,
  table.compare tbody,
  table.compare tr,
  table.compare th,
  table.compare td {
    display: block;
  }

  table.compare tbody tr {
    background: var(--surface);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    padding: 0.4rem 1rem 0.9rem;
    margin-bottom: 0.9rem;
  }

  table.compare tbody th[scope="row"] {
    width: auto;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--emerald-deep);
    padding: 0.7rem 0 0.6rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 0.5rem;
  }

  table.compare td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0;
    border: 0;
    text-align: right;
    font-size: 0.95rem;
  }

  table.compare td::before {
    content: attr(data-label);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    text-align: left;
    flex: 0 0 auto;
  }

  table.compare td.col-sez {
    background: transparent;
    color: var(--emerald);
    font-weight: 700;
  }

  table.compare td.col-sez::before {
    color: var(--emerald-deep);
  }

  table.compare td.cell-soft {
    color: var(--ink-soft);
  }

  table.compare tbody tr:last-child td {
    border-bottom: 0;
  }
}

/* Mobile header: toggle flush right (avoid grid auto-placement centering it) */

@media (max-width: 860px) {
  .header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }
}

/* Lede + hero sub paragraphs at 16px */

.lede,
.hero-sub,
.hero-curved .hero-sub {
  font-size: 16px;
}

/* Remove the bottom mobile action bar (Call / WhatsApp / Site Visit) */

.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-mobilebar);
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--emerald-deep);
  border-top: 1px solid var(--line-on-dark);
  box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, 0.5);
  display: none !important;
}

/* Keep floating action buttons circular (override global square corners) */

.fab,
.fab::after {
  border-radius: 50% !important;
}

@media (max-width: 860px) {
  .float-actions {
    bottom: 1.25rem;
  }

  body {
    padding-bottom: 0;
  }
}

@media (max-width: 560px) {
  .fab {
    width: 50px;
    height: 50px;
  }

  .fab svg {
    width: 22px;
    height: 22px;
  }
}

/* Trust strip icons: Font Awesome feature glyphs */

.trust-emb .ico {
  color: var(--gold-light);
  margin: 0 auto .7rem;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  background: none;
  border: 0;
}

.trust-emb .ico i {
  font-size: 2.6rem;
  line-height: 1;
}

/* =========================================================
   Location Advantage section — aerial render background (map removed)
   ========================================================= */

.section-dark.location-bg {
  background-image: linear-gradient(100deg, rgba(7, 40, 31, 0.94) 0%, rgba(7, 40, 31, 0.78) 32%, rgba(7, 40, 31, 0.32) 58%, rgba(7, 40, 31, 0.04) 78%),
    url("../assets/location-bg.webp");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  min-height: clamp(440px, 46vw, 640px);
  display: flex;
  align-items: center;
}

.location-bg .location-copy {
  max-width: clamp(300px, 46vw, 600px);
}

@media (max-width: 760px) {
  .section-dark.location-bg {
    background-image: linear-gradient(180deg, rgba(7, 40, 31, 0.25) 0%, rgba(7, 40, 31, 0.40) 38%, rgba(7, 40, 31, 0.85) 72%, rgba(7, 40, 31, 0.95) 100%),
      url("../assets/location-bg-mobileb6f5.webp?v=10");
    background-position: center top;
    background-size: cover;
    min-height: 86vh;
    align-items: flex-end;
  }

  .location-bg .location-copy {
    max-width: none;
  }
}

/* Alt-row feature sections: no top/bottom padding (image sits flush) */

.section.alt-section {
  padding-block: 0;
}

/* =========================================================
   Featured Focus — title / body left, image right (desktop); title -> image -> body (mobile)
   ========================================================= */

.featured-head,
.featured-body {
  max-width: 500px;
}

.featured-body .lede {
  margin-top: 1rem;
}

.featured .focus-stats {
  grid-template-columns: repeat(2, 1fr);
  max-width: 440px;
}

/* Featured Focus: full-section render background */

.featured.section-dark {
  background-image: linear-gradient(90deg, rgba(7, 40, 31, 0.98) 0%, rgba(7, 40, 31, 0.95) 30%, rgba(7, 40, 31, 0.62) 48%, rgba(7, 40, 31, 0.14) 64%, rgba(7, 40, 31, 0) 78%),
    url("../assets/featured-bg.webp");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
}

@media (max-width: 760px) {
  .featured-grid {
    max-width: none;
  }

  .featured .focus-stats {
    max-width: none;
  }

  .featured.section-dark {
    background-image: linear-gradient(180deg, rgba(7, 40, 31, 0.55) 0%, rgba(7, 40, 31, 0.74) 42%, rgba(7, 40, 31, 0.92) 100%),
      url("../assets/featured-bg-mobile.webp");
    background-position: top center;
    background-size: cover;
  }
}

/* Brand logo image */

.brand-img {
  padding-bottom: 2px;
  height: 70px;
  width: auto;
  display: block;
}

@media (max-width: 860px) {
  .brand-img {
    height: 48px;
    padding-bottom: 0px;
  }
}

/* Moving-light ring around the header logo */

.site-header .brand::before {
  content: none;
  position: absolute;
  inset: -5px;
  border-radius: 10px !important;
  padding: 2px;
  background: conic-gradient(from var(--trust-angle),
      rgba(201, 161, 74, 0.2) 0%,
      #c9a14a 12%, #e8b4a8 28%, #fff4d6 32%, #e8b4a8 36%, #c9a14a 52%,
      rgba(201, 161, 74, 0.2) 66%, rgba(201, 161, 74, 0.2) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(201, 161, 74, 0.55));
  pointer-events: none;
  animation: trustLightSpin 2.8s linear infinite;
}

/* =========================================================
   Plot Categories — 6 cards
   ========================================================= */

.plot-cats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.8rem, 0.5rem + 1vw, 1.4rem);
}

.plot-card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: clamp(1.2rem, 1rem + 1vw, 1.9rem) 1rem;
  text-align: center;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s ease;
}

.plot-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-gold);
}

.plot-ico {
  color: var(--emerald);
  display: grid;
  place-items: center;
  margin-bottom: 0.2rem;
}

.plot-card h3 {
  font-size: 1.15rem;
  line-height: 1.2;
  color: var(--emerald-deep);
}

.plot-card p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.45;
  flex: 1 0 auto;
}

.plot-card .btn {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.7em 0.8em;
}

@media (max-width: 900px) {
  .plot-cats {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 620px) {
  .plot-cats {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-inline: auto;
  }
}

/* =========================================================
   Final CTA banner — "Ready to Invest"
   ========================================================= */

.cta-card {
  background: linear-gradient(100deg, rgba(8, 44, 34, 0.95), rgba(8, 44, 34, 0.82) 50%, rgba(8, 44, 34, 0.68)), url("../assets/reveal-in.webp") center/cover no-repeat var(--emerald-deep);
  border: 1px solid var(--line-on-dark);
  border-radius: 0 !important;
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.2rem) clamp(1.4rem, 1rem + 2vw, 2.8rem);
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 0.8rem + 1.5vw, 2.2rem);
}

.cta-phone {
  flex: none;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  color: var(--gold-light);
  border: 1.5px solid var(--gold);
  border-radius: 50% !important;
}

.cta-text {
  flex: 1 1 auto;
}

.cta-text h2 {
  color: var(--cream);
  font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.15rem);
  line-height: 1.15;
}

.cta-text p {
  color: var(--on-emerald-soft);
  margin-top: 0.35rem;
  font-size: 16px;
}

.cta-actions {
  flex: none;
  display: flex;
  gap: 0.8rem;
}

.cta-actions .btn {
  white-space: nowrap;
}

.btn-outline-gold {
  background: transparent;
  color: var(--gold-light);
  border-color: var(--gold);
}

.btn-outline-gold:hover {
  background: rgba(201, 161, 74, 0.12);
  border-color: var(--gold-light);
}

@media (max-width: 880px) {
  .cta-card {
    flex-direction: column;
    text-align: center;
  }

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

  .cta-actions {
    flex-direction: column;
    width: 100%;
  }

  .cta-actions .btn {
    width: 100%;
  }
}

/* =========================================================
   Gallery & Videos — thumbnail row + YouTube pill
   ========================================================= */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(0.8rem, 0.5rem + 1vw, 1.5rem);
}

.gallery-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: center;
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}

.gallery-card:hover .gallery-thumb img {
  transform: scale(1.06);
}

.gallery-thumb .video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--emerald-deep);
  border-radius: 50% !important;
  box-shadow: 0 8px 22px rgba(8, 54, 42, 0.28);
  transition: transform .3s var(--ease-out), background .3s ease;
}

.gallery-card:hover .gallery-thumb .video-play {
  transform: scale(1.08);
  background: #fff;
}

.gallery-cap {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}

.gallery-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 1.4rem + 2vw, 3.2rem);
}

.yt-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.85em 1.7em;
  background: var(--surface);
  border: 1px solid var(--line-gold);
  border-radius: 0 !important;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s ease;
}

.yt-pill:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--gold);
}

.yt-pill .yt-mark {
  display: inline-grid;
  place-items: center;
}

.yt-pill .yt {
  color: #FF0000;
}

@media (max-width: 980px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 620px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   Site Visit Process — horizontal numbered journey timeline
   ========================================================= */

.journey {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
}

.jstep {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
}

.jstep:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 24px;
  left: 50%;
  width: 100%;
  height: 0;
  border-top: 2px dotted var(--line);
  z-index: 0;
}

.jnum {
  position: relative;
  z-index: 1;
  width: 48px;
  height: 48px;
  border-radius: 50% !important;
  background: var(--emerald-deep);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
}

.jlabel {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.35;
  max-width: 14ch;
}

@media (max-width: 720px) {
  .journey {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 0.5rem;
  }

  .jstep:not(:last-child)::after {
    display: block;
    width: calc(100% + 0.5rem);
  }

  .jstep:nth-child(3n)::after {
    display: none;
  }
}

@media (max-width: 420px) {
  .journey {
    grid-template-columns: repeat(2, 1fr);
  }

  .jstep:nth-child(3n)::after {
    display: block;
  }

  .jstep:nth-child(2n)::after {
    display: none;
  }
}

/* Plot Categories — full-width */

.plot-section>.container {
  width: 100%;
  max-width: none;
  padding-inline: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
}

/* About card icons — larger, lighter (matches fa-light shield-check / file-lines / user / location-dot) */

#about .card-em .card-ico {
  width: 68px;
  height: 68px;
}

#about .card-em .card-ico svg {
  width: 38px;
  height: 38px;
  stroke-width: 1.3;
}

/* =========================================================
   Service card icons (Font Awesome), larger
   ========================================================= */

.service-card .card-ico {
  width: 66px;
  height: 66px;
}

.service-card .card-ico i {
  font-size: 30px;
  line-height: 1;
}

/* =========================================================
   Gallery & Videos — larger thumbnails, no radius
   ========================================================= */

#videos>.container {
  width: 100%;
  max-width: none;
  padding-inline: clamp(1.25rem, 1rem + 1.5vw, 2.5rem);
}

.gallery-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0 !important;
}

/* =========================================================
   Site Visit Process — larger circles on desktop
   ========================================================= */

@media (min-width: 721px) {
  .jnum {
    width: 66px;
    height: 66px;
    font-size: 1.4rem;
  }

  .jstep:not(:last-child)::after {
    top: 33px;
  }
}

/* =========================================================
   Media — "In the Spotlight" asymmetric gallery
   ========================================================= */

.spotlight-head h2 {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.spotlight {
  display: grid;
  grid-template-columns: 1fr 1fr 1.18fr;
  gap: clamp(1rem, 0.6rem + 1.4vw, 1.8rem);
}

.spot {
  position: relative;
  display: block;
  overflow: hidden;
  background: #0c0c0c;
}

.spot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .65s var(--ease-out);
}

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

.spot:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / 3;
}

.spot:nth-child(2) {
  grid-column: 2;
  grid-row: 1 / 3;
}

.spot:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
  aspect-ratio: 16 / 10;
}

.spot:nth-child(4) {
  grid-column: 3;
  grid-row: 2;
  aspect-ratio: 16 / 10;
}

.spot.framed {
  border: 1px solid var(--line);
  background: var(--surface);
}

.spot .video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--emerald-deep);
  border-radius: 50% !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
  transition: transform .3s var(--ease-out);
}

.spot:hover .video-play {
  transform: scale(1.08);
}

.spot-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  text-align: center;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 13px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

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

  .spot:nth-child(1) {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 3 / 4;
  }

  .spot:nth-child(2) {
    grid-column: 2;
    grid-row: auto;
    aspect-ratio: 3 / 4;
  }

  .spot:nth-child(3) {
    grid-column: 1;
    grid-row: auto;
  }

  .spot:nth-child(4) {
    grid-column: 2;
    grid-row: auto;
  }
}

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

  .spot:nth-child(1),
  .spot:nth-child(2),
  .spot:nth-child(3),
  .spot:nth-child(4) {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 16 / 10;
  }
}

/* =========================================================
   Blog cards
   ========================================================= */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.2rem, 0.8rem + 1.6vw, 2rem);
}

.blog-card {
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s ease;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-gold);
}

.blog-card .pic {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}

.blog-card .pic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}

.blog-card:hover .pic img {
  transform: scale(1.05);
}

.blog-card .body {
  padding: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}

.blog-meta .date {
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.blog-card p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  flex: 1;
}

.blog-card .more {
  margin-top: 0.3rem;
  color: var(--emerald);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.blog-card .more:hover {
  color: var(--gold);
}

/* Smaller blog card titles */

.blog-card h3 {
  font-size: 1.3rem;
  line-height: 1.25;
}

/* =========================================================
   Single blog post — article layout
   ========================================================= */

.post-hero {
  background: var(--emerald-deep);
  color: var(--on-emerald);
}

.post-hero .eyebrow {
  color: var(--gold-light);
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.8rem;
}

.post-meta .date {
  color: var(--on-emerald-soft);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.post-hero h1 {
  color: var(--cream);
  max-width: none;
  font-size: clamp(1.7rem, 1.05rem + 2vw, 2.6rem);
}

@media (min-width: 1024px) {
  .post-hero h1 {
    white-space: nowrap;
  }
}

.post-figure {
  width: 100%;
  margin: 0 0 clamp(1.6rem, 1rem + 1.5vw, 2.4rem);
}

.post-figure img {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  display: block;
}

.article {
  max-width: none;
  margin-inline: 0;
}

.article p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink);
  margin-bottom: 1.3rem;
}

.article p.lead {
  font-size: 20px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.article h2 {
  font-size: var(--step-3);
  margin: 2.2rem 0 0.9rem;
}

.article h3 {
  font-size: var(--step-2);
  margin: 1.8rem 0 0.7rem;
}

.article ul {
  margin: 0 0 1.4rem;
  padding-left: 0;
  display: grid;
  gap: 0.7rem;
}

.article ul li {
  position: relative;
  padding-left: 1.9rem;
  line-height: 1.65;
  color: var(--ink);
}

.article ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  background: var(--gold);
}

.article blockquote {
  margin: 1.8rem 0;
  padding: 1.2rem 1.6rem;
  border-left: 3px solid var(--gold);
  background: var(--bg-alt);
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--emerald-deep);
}

.focus-stat .ico i {
  font-size: 22px;
  line-height: 1;
}

/* =========================================================
   Enquire Now section
   ========================================================= */

#visit {
  background: #093425;
  padding-block: clamp(1.25rem, 2vw, 1.75rem);
}

#visit .container {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}

.enquire-card {
  display: grid;
  grid-template-columns: 0.82fr 1.7fr;
  background: transparent;
  color: var(--cream);
  border: 0;
  overflow: hidden;
}

.enquire-intro {
  padding: clamp(1.6rem, 2.6vw, 2.8rem);
  border-right: 1px solid rgba(255, 255, 255, 0.10);
}

.enquire-intro .eyebrow {
  color: var(--gold-light);
}

.enquire-intro h2 {
  color: var(--cream);
  margin-top: .7rem;
  font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.15rem);
}

.enquire-intro>p {
  color: var(--on-emerald-soft);
  margin-top: .7rem;
  font-size: 15px;
  max-width: 32ch;
}

.enquire-points {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .9rem;
  margin-top: 2rem;
}

.enquire-point {
  text-align: center;
}

.enquire-point .ico {
  display: flex;
  justify-content: center;
  color: var(--gold-light);
  font-size: 36px;
  margin-bottom: .7rem;
}

.enquire-point>span {
  display: block;
  font-size: .7rem;
  line-height: 1.3;
  color: var(--on-emerald-soft);
}

.enquire-form {
  padding: clamp(1.6rem, 2.6vw, 2.6rem);
}

.enquire-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  align-items: start;
}

.enquire-grid .field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.enquire-grid label {
  font-family: var(--font-head);
  font-size: .72rem;
  letter-spacing: .03em;
  color: var(--cream);
  margin-bottom: .45rem;
}

.enquire-grid input,
.enquire-grid select,
.enquire-grid textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: .85rem;
  padding: .72em .85em;
}

.enquire-grid input::placeholder,
.enquire-grid textarea::placeholder {
  color: rgba(231, 224, 201, 0.38);
}

.enquire-grid select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23E7CB7E' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85em center;
  background-size: 12px;
}

.enquire-grid select option {
  color: #0a3525;
}

.enquire-grid textarea {
  min-height: 92px;
  resize: vertical;
}

.enquire-grid input:focus,
.enquire-grid select:focus,
.enquire-grid textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.07);
}

.enquire-actions {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1rem;
  margin-top: 1.4rem;
}

.enquire-actions .btn {
  width: 100%;
}

.btn-wa {
  background: #0c3f2d;
  color: #fff;
  border: 1px solid rgba(37, 211, 102, 0.55);
}

.btn-wa:hover {
  background: #0f4c37;
  border-color: #25D366;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.btn-wa .wa-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50% !important;
  background: #fff;
  color: #25D366;
}

.enquire-form .form-note {
  margin-top: 1rem;
  font-size: .78rem;
  color: var(--on-emerald-soft);
  text-align: left;
}

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

  .enquire-intro {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  }

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

  .enquire-actions {
    grid-template-columns: 1fr;
  }
}

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

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

/* =========================================================
   Mobile-only overrides (per request)
   ========================================================= */

@media (max-width: 620px) {
  .yt-pill {
    border-radius: 0 !important;
  }

  .faq-item summary {
    padding: 0.90em;
    font-size: 0.8rem;
  }

  p:not(.lede):not(.hero-sub):not(.hero-points) {
    font-size: 11px;
  }

  .trust-emb .ico {
    width: 42px;
    height: 42px;
  }

  .trust-emb {
    padding: 1.1rem 0.6rem;
  }
}

.fab-whatsapp i {
  font-size: 30px;
  line-height: 1;
  color: #fff;
}

/* =========================================================
   Video carousel + embedded-video facade
   ========================================================= */

.vcarousel {
  position: relative;
  margin-top: 1.6rem;
}

.carousel-track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-track .vembed {
  flex: 0 0 clamp(230px, 25vw, 290px);
  aspect-ratio: 9 / 16;
  scroll-snap-align: center;
}

/* Spotlight video slider: no arrow buttons (swipe / scroll only) */

#videos .carousel-btn {
  display: none !important;
}

/* Contest reels — static grid, all reels shown (no slider) */

.reel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  max-width: 920px;
  margin: 2.2rem auto 0;
}

.reel-grid .vembed {
  aspect-ratio: 9 / 16;
}

@media (max-width: 640px) {
  .reel-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    max-width: 440px;
  }
}

/* Static grid (no slider): 5-across single row (6th video hidden) */

.vcarousel.is-grid .carousel-btn {
  display: none;
}

.vcarousel.is-grid .carousel-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  overflow: visible;
  scroll-snap-type: none;
}

.vcarousel.is-grid .carousel-track .vembed {
  flex: none;
  width: auto;
}

.vcarousel.is-grid .carousel-track .vembed:nth-child(n

  /**/
  +6) {
  display: none;
}

@media (max-width: 1000px) {
  .vcarousel.is-grid .carousel-track {
    grid-template-columns: repeat(3, 1fr);
  }

  .vcarousel.is-grid .carousel-track .vembed:nth-child(n

    /**/
    +4) {
    display: none;
  }
}

@media (max-width: 620px) {
  .vcarousel.is-grid .carousel-track {
    grid-template-columns: repeat(2, 1fr);
  }

  .vcarousel.is-grid .carousel-track .vembed:nth-child(n

    /**/
    +3) {
    display: none;
  }
}

/* =========================================================
   Video lightbox popup
   ========================================================= */

.vlightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
}

.vlightbox.is-open {
  display: block;
}

.vlightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 20, 15, 0.82);
  backdrop-filter: blur(4px);
}

.vlightbox-dialog {
  position: relative;
  z-index: 1;
  width: min(920px, calc(100vw - 2rem));
  margin: 7vh auto 0;
  animation: discPop .28s ease;
}

.vlightbox.is-reel .vlightbox-dialog {
  width: min(400px, calc(100vw - 2rem));
  margin-top: 4vh;
}

.vlightbox-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px !important;
  overflow: hidden;
  border: 1px solid rgba(201, 161, 74, 0.4);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.vlightbox.is-reel .vlightbox-frame {
  aspect-ratio: 9 / 16;
  max-height: 82vh;
}

.vlightbox-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.vlightbox-soon {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .8rem;
  background: linear-gradient(180deg, #0b3327, var(--emerald-deep));
  color: var(--gold-light);
  text-align: center;
}

.vlightbox-soon-ico {
  width: 66px;
  height: 66px;
  border-radius: 50% !important;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 161, 74, 0.5);
  color: var(--gold-light);
}

.vlightbox-soon p {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--on-emerald-soft);
}

.vlightbox-x {
  position: absolute;
  top: -3rem;
  right: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  border: 1px solid rgba(201, 161, 74, 0.4);
  background: rgba(8, 54, 42, 0.7);
  color: var(--gold-light);
  cursor: pointer;
  transition: background .2s, color .2s;
}

.vlightbox-x:hover {
  background: rgba(201, 161, 74, 0.2);
  color: #fff;
}

.vlightbox-cap {
  text-align: center;
  color: var(--cream);
  font-family: var(--font-head);
  font-weight: 600;
  margin: 1rem 0 0;
  font-size: 1rem;
}

@media (max-width: 560px) {
  .vlightbox-x {
    top: -2.6rem;
  }
}

.vembed {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #06231a;
  border: 1px solid var(--line-on-dark);
  border-radius: 8px !important;
}

.vembed-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out), opacity .4s ease;
}

.vembed:hover .vembed-poster {
  transform: scale(1.05);
  opacity: .85;
}

.vembed-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 30px;
  height: 30px;
  border-radius: 50% !important;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--emerald-deep);
  box-shadow: var(--shadow-md);
  transition: transform .3s var(--ease-out), background .3s ease;
}

.vembed-play svg {
  margin-left: 3px;
}

.vembed:hover .vembed-play,
.vembed:focus-visible .vembed-play {
  transform: translate(-50%, -50%) scale(1.1);
  background: var(--gold-light);
}

.vembed-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.6rem 0.9rem 0.85rem;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.25;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
}

.vembed-tag {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 2;
  background: rgba(8, 44, 34, 0.78);
  color: var(--gold-light);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.3em 0.6em;
}

.vembed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.featured-in-sec {
  background-image: linear-gradient(rgba(18, 74, 58, 0.12), rgba(18, 74, 58, 0.12)),
    url("../assets/leather-tile1bce.webp?v=6") !important;
  background-size: auto, 1200px auto !important;
  background-repeat: repeat, repeat !important;
  background-position: center, center !important;
}

.featured-in-sec .reg-lede {
  margin: .6rem auto 0;
  max-width: 640px;
}

.media-grid.featured-in-grid {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.4rem;
  margin-top: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

.featured-in-frame {
  background-image: url("../assets/leather/leather-square-1200x1200.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 10px;
  padding: 6%;
}

.media-grid.featured-in-grid .vembed {
  aspect-ratio: 16 / 9 !important;
  width: 100%;
  height: auto;
}

.featured-in-more {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
}

@media (max-width: 780px) {
  .media-grid.featured-in-grid {
    grid-template-columns: 1fr !important;
  }

  .featured-in-frame {
    padding: 7%;
  }
}

.vembed-soon-ico {
  width: 54px;
  height: 54px;
  border-radius: 50% !important;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 161, 74, 0.5);
  color: var(--gold-light);
}

.vembed-soon p {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: .04em;
  font-size: .9rem;
  color: var(--on-emerald-soft);
}

.vembed.is-playing .vembed-play,
.vembed.is-playing .vembed-cap,
.vembed.is-playing .vembed-tag,
.vembed.is-playing .vembed-poster {
  display: none;
}

.vembed:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 50% !important;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--surface);
  color: var(--emerald-deep);
  border: 1px solid var(--line-gold);
  box-shadow: var(--shadow-md);
  transition: background .3s ease, transform .3s var(--ease-out);
}

.carousel-btn:hover {
  background: var(--gold-light);
  transform: translateY(-50%) scale(1.06);
}

.carousel-btn.prev {
  left: -14px;
}

.carousel-btn.next {
  right: -14px;
}

.gallery-cta.center {
  display: flex;
  justify-content: center;
  margin-top: 1.8rem;
}

/* Embedded-video gallery (videos page) */

.vgallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}

.vgallery .vembed {
  aspect-ratio: 16 / 9;
}

@media (max-width: 900px) {
  .vgallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .carousel-btn {
    display: none;
  }

  .carousel-track .vembed {
    flex-basis: 74%;
  }

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

/* =========================================================
   Premium comparison (vs) table
   ========================================================= */

.vs-ico {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  width: 34px;
  height: 34px;
  margin-right: 0.65rem;
  flex: none;
  color: #fff;
  background: var(--emerald-deep);
  border: 0;
}

.vs-ico i {
  font-size: 15px;
}

.compare-vs tbody th[scope="row"] span:last-child {
  vertical-align: middle;
}

.vs-yes {
  color: var(--emerald);
  margin-right: 0.5rem;
}

.vs-no {
  color: #b15640;
  margin-right: 0.5rem;
}

table.compare-vs td.col-sez {
  background: rgba(14, 74, 56, 0.10);
}

table.compare-vs thead th.highlight {
  box-shadow: inset 0 4px 0 var(--gold);
}

.vs-best {
  display: block;
  font-family: var(--font-head);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.25rem;
}

@media (max-width: 620px) {
  .compare-vs tbody th[scope="row"] {
    display: flex;
    align-items: center;
    font-size: 1rem;
  }

  .vs-ico {
    width: 30px;
    height: 30px;
  }

  /* Answer rows: label caption on top, value left-aligned full width */

  table.compare-vs td {
    display: block;
    text-align: left;
    padding: 0.7rem 0.95rem;
    font-size: 0.95rem;
    line-height: 1.4;
  }

  table.compare-vs td::before {
    display: block;
    content: attr(data-label);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.25rem;
  }

  table.compare-vs td.col-sez {
    background: rgba(14, 74, 56, 0.10);
    color: var(--emerald-deep);
    font-weight: 700;
  }

  .compare-vs td .vs-yes,
  .compare-vs td .vs-no {
    font-size: 1rem;
    margin-right: 0.45rem;
    vertical-align: -1px;
  }
}

/* =========================================================
   Proximity / distance-to-reach cards
   ========================================================= */

.prox-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 1.8rem;
}

.prox-card {
  flex: 0 1 360px;
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 1.5rem 1.6rem;
}

.prox-card:hover {
  border-color: var(--line-gold);
  box-shadow: var(--shadow-md);
}

.prox-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}

.prox-ico {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  color: #fff;
  background: var(--emerald-deep);
  border: 0;
}

.prox-ico i {
  font-size: 18px;
}

.prox-head h3 {
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--emerald-deep);
}

.prox-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.prox-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.prox-name {
  color: var(--ink);
  font-size: 0.94rem;
}

.prox-time {
  color: var(--emerald);
  font-weight: 700;
  font-family: var(--font-head);
  font-size: 0.9rem;
  white-space: nowrap;
}

.prox-time::before {
  content: "";
}

/* Smaller section headings so they fit on one line on desktop */

.section-head {
  margin-bottom: clamp(1.4rem, 1rem + 2vw, 2.9rem);
  max-width: 60rem;
}

.section-head h2 {
  font-size: clamp(1.5rem, 1.05rem + 1.5vw, 2.15rem);
}

/* =========================================================
   Videos page: featured-video hero
   ========================================================= */

.vid-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: clamp(1.5rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  margin-top: 1.4rem;
}

.vid-hero-copy h1 {
  max-width: 15ch;
}

.vid-hero-copy p {
  color: var(--on-emerald-soft);
  font-size: var(--step-1);
  line-height: 1.7;
  margin-top: 1.1rem;
  max-width: 46ch;
}

.vid-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.8rem;
}

.vembed.is-feature {
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-lg);
  border-color: rgba(201, 161, 74, 0.4);
}

.vembed.is-feature .vembed-play {
  width: 78px;
  height: 78px;
}

.vembed.is-feature .vembed-play svg {
  width: 30px;
  height: 30px;
}

.vembed.is-feature .vembed-cap {
  font-size: 1.05rem;
  padding: 2rem 1.1rem 1rem;
}

@media (max-width: 860px) {
  .vid-hero-grid {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }

  .vid-hero-copy h1 {
    max-width: none;
  }
}

/* =========================================================
   Green City SEZ landing page: sticky mobile CTA bar
   ========================================================= */

@media (max-width: 860px) {
  body.gcsez .mobile-bar {
    display: grid !important;
  }

  body.gcsez .float-actions {
    display: none;
  }

  body.gcsez {
    padding-bottom: 58px;
  }
}

/* =========================================================
   Coming Soon page
   ========================================================= */

.coming-soon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: calc(100vh - 77px);
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--grad-emerald-hero);
  color: var(--on-emerald);
  padding: clamp(3rem, 5vw, 6rem) 0;
}

.coming-inner {
  max-width: 660px;
  position: relative;
  z-index: 1;
}

.coming-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-light);
  border: 1px solid var(--line-gold);
  padding: 0.45em 0.9em;
  background: rgba(201, 161, 74, 0.08);
}

.coming-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50% !important;
  background: var(--gold-light);
  box-shadow: 0 0 0 0 rgba(231, 203, 126, 0.6);
  animation: comingPulse 2s var(--ease-out) infinite;
}

@keyframes comingPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(231, 203, 126, 0.55);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(231, 203, 126, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(231, 203, 126, 0);
  }
}

.coming-soon h1 {
  color: var(--cream);
  font-size: clamp(2.6rem, 1.8rem + 5vw, 5rem);
  line-height: 1.04;
  margin-top: 1rem;
  text-wrap: balance;
}

.coming-soon p {
  color: var(--on-emerald-soft);
  font-size: var(--step-1);
  line-height: 1.75;
  margin-top: 1.2rem;
  margin-inline: auto;
  max-width: 56ch;
}

.coming-soon .coming-sub {
  font-size: 1rem;
  margin-top: 0.7rem;
}

.coming-soon .btn-group {
  margin-top: 2.3rem;
}

/* =========================================================
   Header search
   ========================================================= */

.search-btn,
.head-social {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  background: transparent;
  color: var(--cream);
  border: 1px solid var(--line-on-dark);
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}

.search-btn:hover,
.head-social:hover {
  border-color: var(--gold);
  color: var(--gold-light);
}

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 5vh 1.25rem;
  overflow-y: auto;
  background: rgba(6, 32, 24, 0.74);
  backdrop-filter: blur(4px);
}

.search-overlay.open {
  display: flex;
}

/* Quick-options panel (replaces the old text search) */

.search-panel {
  position: relative;
  width: min(560px, 100%);
  margin: auto;
  background: var(--emerald-deep);
  border: 1px solid var(--line-gold);
  border-radius: 22px !important;
  box-shadow: var(--shadow-lg);
  padding: 1.8rem 1.6rem 2rem;
}

.search-panel-eyebrow {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .72rem;
  color: var(--gold-light);
  margin-bottom: .35rem;
}

.search-panel-title {
  font-family: var(--font-display);
  color: var(--cream);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
  line-height: 1.1;
  margin: 0 0 1.2rem;
  padding-right: 2.5rem;
}

.search-panel .search-close {
  position: absolute;
  top: .85rem;
  right: .85rem;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50% !important;
  border: 1px solid rgba(201, 161, 74, 0.4);
  background: rgba(8, 54, 42, 0.6);
  color: var(--gold-light);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.search-panel .search-close:hover {
  background: rgba(201, 161, 74, 0.18);
  color: #fff;
}

body.search-open {
  overflow: hidden;
}

@media (max-width: 620px) {
  .search-go {
    display: none;
  }
}

/* =========================================================
   TOPBAR + LANGUAGE SWITCH (Google Translate powered)
   ========================================================= */

@media (max-width: 560px) {
  :root {
    --topbar-h: 31px;
  }
}

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.lang-ico {
  color: var(--gold-light);
  display: inline-grid;
  place-items: center;
  margin-right: .15rem;
}

.lang-btn {
  background: transparent;
  border: 0;
  color: var(--cream);
  font-weight: 600;
  font-size: .8rem;
  cursor: pointer;
  padding: .2rem .4rem;
  font-family: var(--font-body);
  transition: color .25s ease;
}

@media (max-width: 560px) {
  .topbar {
    font-size: .74rem;
  }

  .topbar-inner {
    justify-content: space-between;
    min-height: 30px;
    gap: .5rem;
  }

  .topbar-note {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .lang-btn {
    font-size: .74rem;
    padding: .15rem .35rem;
  }
}

/* Neutralise the default Google Translate banner + tooltip (keep layout intact) */

.goog-te-banner-frame,
.skiptranslate iframe,
iframe.goog-te-banner-frame {
  display: none !important;
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  top: 0 !important;
}

#goog-gt-tt,
.goog-te-balloon-frame {
  display: none !important;
}

.goog-text-highlight {
  background: none !important;
  box-shadow: none !important;
}

#google_translate_element {
  display: none !important;
}

/* =========================================================
   SCROLL STACK (React Bits "ScrollStack" ported to vanilla JS + CSS)
   ========================================================= */

/* NOTE: no overflow on the section — position:sticky needs the viewport as its scroll box */

.scroll-stack {
  position: relative;
}

/* Compositor-driven pinning (smooth — no per-frame JS position work). Enabled only when JS sets data-stack="on" (so reduced-motion stays a plain list). */

.scroll-stack[data-stack="on"] .scroll-stack-card {
  position: sticky;
  top: calc(9vh + var(--i, 0) * 6rem);
  margin-bottom: 6vh;
}

/* thin inner keyline (like the reference card) */

.scroll-stack-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(246, 239, 221, 0.35);
  border-radius: 16px !important;
  pointer-events: none;
}

.scroll-stack-card .ss-dots .on {
  color: var(--gold-light);
}

/* Order: title on top, then icon, then paragraph */

.scroll-stack-card h3 {
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.3rem);
  line-height: 1.15;
  order: 1;
  margin: 0 0 1.7rem;
}

.scroll-stack-card .ss-ico {
  color: var(--gold-light);
  font-size: clamp(3.4rem, 2.6rem + 3vw, 5.2rem);
  line-height: 1;
  order: 2;
  margin-bottom: 1.2rem;
}

.scroll-stack-card p {
  color: var(--sage);
  font-size: clamp(1rem, .95rem + .25vw, 1.15rem);
  line-height: 1.6;
  max-width: 46ch;
  order: 3;
  margin: 0 auto;
}

.scroll-stack-card .ss-dots {
  display: none;
  order: 4;
}

/* Trailing room must be a little taller than a card (24rem) so the last card has enough scroll distance to rise fully over the previous one, then release. Kept in rem (not vh) so it tracks card height across viewports. */

/* Trailing room = how long the fully-stacked deck stays pinned at the end. Needs to roughly match the deck's total offset (3 cards × 7.5rem) so every card's title stays visible together before the stack releases. */

.scroll-stack-end {
  width: 100%;
  height: 22rem;
}

@media (max-width: 620px) {
  .scroll-stack-inner {
    padding: 3vh 1rem 6vh;
  }

  /* Uniform height so stacked cards align and none peeks out during the slide */

  .scroll-stack-card {
    min-height: 10rem;
  }

  .scroll-stack[data-stack="on"] .scroll-stack-card {
    top: calc(9vh + var(--i, 0) * 5rem);
  }

  .scroll-stack-card .ss-ico {
    opacity: .8;
    font-size: clamp(2.4rem, 1.8rem + 4vw, 3.2rem);
  }

  .scroll-stack-card h3 {
    font-size: 1.35rem;
    margin: 0 0 2rem;
  }

  .scroll-stack-card p {
    font-size: .92rem;
  }
}

/* =========================================================
   NEWS / UPDATES — 3-box grid
   ========================================================= */

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.6rem);
}

.news-box::before {
  display: none;
}

.news-box:hover::after {
  clip-path: inset(0 0 0 0);
}

.news-box:hover {
  transform: translateY(-6px);
  border-color: #6ee7b7;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}

.news-box:hover .news-link svg {
  transform: translateX(4px);
}

.news-box .news-link svg {
  transition: transform .3s ease;
}

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

@media (max-width: 600px) {
  .news-box p {
    font-size: 1.18rem !important;
    line-height: 1.65;
  }
}

/* About Green City SEZ (stack) header: let the paragraph span the full wide block */

.scroll-stack-section .lede {
  max-width: none;
  margin-top: 1.75rem;
}

/* Green City SEZ Advantage: trim the trailing empty gap below the stack (bottom only) and reduce the top gap above the "About" heading. */

.scroll-stack-inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 4vh 1.25rem 10vh;
  padding-bottom: 2vh;
}

/* Last card stays sticky so it pins directly over the previous card (full coverage). A small trailing spacer lets it release and scroll away right after, so it never freezes or overlaps the next section. */

.scroll-stack[data-stack="on"] .scroll-stack-card:nth-last-child(2) {
  margin-bottom: 0;
}

/* Hero copy slides — crossfade in sync with the image slider */

.hero2-copy {
  max-width: clamp(300px, 44vw, 580px);
  display: grid;
}

.hero-copy-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility .8s ease;
}

.hero-copy-slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* Contest CTA button — attention-grabbing pop/pulse */

@keyframes ctaPop {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(201, 161, 74, 0.55);
  }

  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 12px rgba(201, 161, 74, 0);
  }
}

@keyframes ctaPop-new {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 81, 51, 0.55);
  }

  50% {
    transform: scale(1.06);
    box-shadow: 0 0 0 12px rgba(63, 117, 82, 0);
  }
}

.btn-contest {
  animation: ctaPop 1.7s ease-in-out infinite;
  will-change: transform;
  border-radius: 10px !important;
}

.btn-contest:hover {
  animation-play-state: paused;
  transform: translateY(-2px) scale(1.04);
}

/* =========================================================
   REEL CONTEST BANNER (recreated in code)
   ========================================================= */

.reel-banner {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 0.85fr 0.8fr;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(1.6rem, 1rem + 3vw, 3.2rem) clamp(1.5rem, 1rem + 3vw, 3.5rem);
  background: linear-gradient(100deg, rgba(6, 42, 32, 0.97) 0%, rgba(9, 40, 31, 0.90) 48%, rgba(6, 42, 32, 0.9) 100%),
    url("../assets/specialisation-bg.webp");
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line-gold);
}

/* decorative gold confetti */

.rb-confetti {
  position: absolute;
  width: 14px;
  height: 5px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  opacity: .8;
  border-radius: 3px !important;
  pointer-events: none;
}

.rb-c1 {
  top: 14%;
  left: 46%;
  transform: rotate(35deg);
}

.rb-c2 {
  top: 62%;
  left: 40%;
  transform: rotate(-20deg);
  width: 10px;
}

.rb-c3 {
  top: 24%;
  right: 30%;
  transform: rotate(60deg);
  width: 18px;
}

/* Left */

.rb-head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rb-clap {
  width: 62px;
  height: 62px;
  flex: none;
  border: 2px solid var(--line-gold);
  border-radius: 50% !important;
  display: grid;
  place-items: center;
  color: var(--gold-light);
  font-size: 1.5rem;
}

.rb-brand {
  display: block;
  font-family: var(--font-display);
  color: var(--gold-light);
  font-weight: 700;
  font-size: clamp(1.3rem, 1rem + 1.6vw, 2rem);
  line-height: 1;
}

.rb-title {
  font-family: var(--font-display);
  color: var(--cream);
  font-weight: 700;
  font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3rem);
  line-height: 1.02;
  margin: .25rem 0 0;
}

.rb-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold-light);
}

.rb-live {
  color: var(--gold-light);
  text-shadow: 0 0 22px rgba(231, 203, 126, 0.65);
}

.rb-sub {
  color: var(--cream);
  opacity: .95;
  margin: 1.1rem 0 1.5rem;
  font-size: clamp(.95rem, .9rem + .4vw, 1.12rem);
  line-height: 1.5;
}

.rb-sub strong {
  color: var(--gold-light);
}

.rb-btn {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--emerald-deep);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1rem, .9rem + .5vw, 1.2rem);
  padding: .85em 1.4em;
  text-decoration: none;
}

.rb-btn .rb-arrow {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50% !important;
  background: var(--emerald-deep);
  color: var(--gold-light);
  display: grid;
  place-items: center;
  font-size: .85rem;
}

/* Center: phone */

.rb-phone {
  justify-self: center;
  order: 3;
}

.rb-phone-frame {
  position: relative;
  width: clamp(150px, 13vw, 195px);
  aspect-ratio: 9 / 19;
  background: #0b0b0d;
  border-radius: 28px !important;
  padding: 7px;
  border: 2px solid #1c1c1f;
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, 0.75);
}

.rb-phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 22px !important;
  overflow: hidden;
}

.rb-phone-screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rb-reels-tag {
  position: absolute;
  top: 10px;
  left: 12px;
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.rb-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 52px;
  height: 52px;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
}

.rb-reel-ui {
  position: absolute;
  right: 8px;
  bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

.rb-reel-ui span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: #fff;
  font-size: .6rem;
}

.rb-reel-ui i {
  font-size: .95rem;
}

/* Right: prize badge */

.rb-prize {
  justify-self: center;
  text-align: center;
  order: 2;
}

.rb-prize-badge {
  border: 2px solid var(--line-gold);
  background: rgba(6, 40, 30, 0.55);
  padding: 1rem 1.7rem 1.1rem;
}

.rb-stars {
  color: var(--gold-light);
  font-size: .7rem;
  letter-spacing: .35em;
}

.rb-prize-label {
  display: block;
  color: var(--cream);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: clamp(.75rem, .7rem + .3vw, .95rem);
  margin-top: .35rem;
}

.rb-amount {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold-light);
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.3rem);
  line-height: 1;
  text-shadow: 0 0 18px rgba(231, 203, 126, 0.55);
}

.rb-trophy {
  display: inline-block;
  margin-top: .7rem;
  color: var(--gold-light);
  font-size: 2.4rem;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.4));
}

@media (max-width: 1024px) {
  .reel-banner {
    grid-template-columns: 1.2fr 0.8fr;
  }

  .rb-phone {
    display: none;
  }
}

@media (max-width: 680px) {
  .reel-banner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .rb-head {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .rb-prize {
    display: none;
  }
}

/* Reel contest banner — full designed image (desktop + mobile) */

.reel-banner-img {
  display: block;
  line-height: 0;
  transition: transform .4s var(--ease-out), box-shadow .4s ease;
}

.reel-banner-img img {
  display: block;
  width: 100%;
  height: auto;
}

.reel-banner-img:hover {
  transform: translateY(-3px);
  box-shadow: 0 34px 66px -34px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .reel-banner-img:hover {
    transform: none;
  }
}

/* Reel banner: overlaid "Join the Contest" button (left-bottom over the image) */

.reel-banner-wrap {
  position: relative;
  line-height: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reel-banner-wrap img {
  display: block;
  width: 100%;
  height: auto;
}

.reel-cta {
  position: absolute;
  left: 15.84%;
  right: 0;
  bottom: 12.63%;
  margin-inline: auto;
  width: max-content;
  max-width: calc(100% - 2rem);
  margin-top: 0;
  z-index: 2;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  line-height: 1;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--emerald-deep);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(.95rem, .8rem + .5vw, 1.15rem);
  padding: .85em 1.6em;
  text-decoration: none;
  border-radius: 24px !important;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.55);
}

.reel-cta .rc-arrow {
  width: 1.7em;
  height: 1.7em;
  flex: none;
  border-radius: 50% !important;
  background: var(--emerald-deep);
  color: var(--gold-light);
  display: grid;
  place-items: center;
  font-size: .78em;
}

@media (max-width: 680px) {
  /* The <picture> swaps to the portrait 1707x2400 artwork here, which has its own composition — centre the button and sit it just above the lower edge. */

  .reel-cta {
    left: 0;
    bottom: clamp(.7rem, 3.5vw, 1.4rem);
    font-size: .82rem;
    padding: .8em 1.3em;
  }
}

/* Header CTA buttons — golden background (search, social, call pill) */

.header-cta .search-btn,
.header-cta .head-social,
.header-cta .header-phone {
  background: var(--surface);
  border-color: var(--gold);
  color: var(--emerald-deep);
}

.header-cta .search-btn:hover,
.header-cta .head-social:hover,
.header-cta .header-phone:hover {
  background: #e8b4a8;
  border-color: transparent;
  color: var(--emerald);
}

.header-cta .header-phone .ico {
  color: var(--emerald-deep);
}

/* Brand-coloured header social icons: Instagram pink, WhatsApp light green */

.header-cta .head-social[aria-label="Instagram"] {
  background: linear-gradient(135deg, #f77b9c, #e1306c);
  border-color: transparent;
  color: #fff;
}

.header-cta .head-social[aria-label="Instagram"]:hover {
  background: linear-gradient(135deg, #ff8fac, #e1306c);
  border-color: transparent;
  color: #fff;
}

.header-cta .head-social[aria-label="WhatsApp"] {
  background: #25D366;
  border-color: transparent;
  color: #fff;
}

.header-cta .head-social[aria-label="WhatsApp"]:hover {
  background: #38dd76;
  border-color: transparent;
  color: #fff;
}

.header-cta .header-phone .label {
  color: rgba(8, 54, 42, 0.65);
}

/* =========================================================
   CONTEST PAGE
   ========================================================= */

.ct-sec-title {
  text-align: center;
  font-family: var(--font-display);
  color: var(--emerald-deep);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.15rem + 2vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0;
}

.section-dark .ct-sec-title {
  color: var(--cream);
}

.ct-sec-title::before,
.ct-sec-title::after {
  content: "";
  height: 1px;
  width: clamp(30px, 6vw, 90px);
  background: linear-gradient(90deg, transparent, var(--gold));
}

.ct-sec-title::after {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.ct-sec-title .fa-trophy {
  font-size: 1.7em;
  line-height: 1;
}

/* Prizes section: reduced top & bottom padding */

#prizes {
  padding-block: clamp(1.2rem, .9rem + 1.2vw, 1.9rem);
}

@media (max-width: 600px) {
  #prizes .ct-sec-title {
    flex-direction: column;
    gap: .45rem;
    white-space: nowrap;
    font-size: 1.6rem;
  }

  #prizes .ct-sec-title::before,
  #prizes .ct-sec-title::after {
    display: none;
  }

  /* Space between "Win Exciting Prizes" and "TOTAL WINNERS: 21" */

  #prizes .ct-sec-title+p {
    margin-top: 0.9rem !important;
  }
}

/* Hero */

.ct-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: center;
}

.ct-brand {
  font-family: var(--font-display);
  color: var(--gold-light);
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.1rem);
  font-weight: 700;
  display: block;
}

.ct-h1 {
  font-family: var(--font-display);
  color: #fff;
  font-weight: 700;
  font-size: clamp(2.2rem, 1.4rem + 3.4vw, 4rem);
  line-height: 1.02;
  margin: .1rem 0 .3rem;
}

.ct-h1 span {
  color: var(--gold-light);
}

.ct-tag {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-light);
  font-size: clamp(1.1rem, .9rem + 1vw, 1.6rem);
  margin: 0;
}

.ct-lead {
  color: var(--cream);
  opacity: .9;
  line-height: 1.6;
  margin: 1.2rem 0 1.6rem;
  max-width: 46ch;
}

.ct-hero-tnc {
  display: inline-block;
  color: var(--gold-light);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin: 0 0 .5rem;
}

.ct-hero-tnc:hover {
  opacity: .8;
}

.ct-hero-note {
  color: var(--cream);
  opacity: .8;
  font-size: .85rem;
  margin: 0 0 1rem;
}

.ct-hero-note b {
  color: var(--gold-light);
  font-weight: 700;
}

.ct-meta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.8rem;
}

.ct-meta-item {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
}

.ct-meta-ico {
  color: var(--gold-light);
  font-size: 1.3rem;
  width: 1.7rem;
  text-align: center;
  flex: none;
  margin-top: .15rem;
}

.ct-meta-item b {
  display: block;
  color: var(--gold-light);
  font-size: .92rem;
}

.ct-meta-item span>b+br {
  display: none;
}

.ct-meta-item>span {
  color: var(--cream);
  opacity: .92;
  font-size: .95rem;
  line-height: 1.45;
}

.ct-hero-vis {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 2vw, 2rem);
}

.ct-phone {
  position: relative;
  width: clamp(150px, 15vw, 220px);
  aspect-ratio: 9 / 19;
  background: #0b0b0d;
  border: 2px solid #1c1c1f;
  border-radius: 30px !important;
  padding: 8px;
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, .7);
  flex: none;
}

.ct-phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 22px !important;
}

.ct-trophy-badge {
  text-align: center;
}

.ct-trophy {
  font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
  color: var(--gold-light);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .5));
  line-height: 1;
}

.ct-trophy-label {
  color: var(--cream);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .78rem;
  margin-top: .6rem;
}

.ct-trophy-amt {
  font-family: var(--font-display);
  color: var(--gold-light);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem);
  text-shadow: 0 0 16px rgba(231, 203, 126, .5);
}

/* Prizes */

/* Mint moving-light ring — always visible + animating (no hover needed) */

.prize-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 15px !important;
  padding: 4px;
  pointer-events: none;
  z-index: 4;
  background: conic-gradient(from var(--trust-angle),
      rgba(110, 231, 183, 0.25) 0%,
      #6ee7b7 12%, #a7f3d0 28%, #ecfdf5 32%, #a7f3d0 36%, #6ee7b7 52%,
      rgba(110, 231, 183, 0.25) 66%, rgba(110, 231, 183, 0.25) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 7px rgba(110, 231, 183, 0.6));
  opacity: 1;
  animation: trustLightSpin 2.6s linear infinite;
}

.prize-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 50px -28px rgba(0, 0, 0, .42);
}

.prize-card.is-runner {
  background: #fff;
}

.prize-card.is-first {
  background: linear-gradient(160deg, #5b3d28, #271c15);
  border: 2px solid var(--gold);
  color: var(--cream);
}

/* Silver 2nd-place card */

.prize-card.is-second {
  background: linear-gradient(160deg, #f3f5f7 0%, #c2c7cd 100%);
  border: 2px solid #9aa0a6;
}

.prize-card.is-second .prize-list {
  border-top-color: rgba(120, 126, 133, 0.4);
}

.prize-card.is-second .prize-list li i {
  color: #6b7178;
}

/* Bronze 3rd-place card */

.prize-card.is-third {
  background: linear-gradient(160deg, #f1dcc0 0%, #cd9a63 100%);
  border: 2px solid #b3763a;
}

.prize-card.is-third .prize-list {
  border-top-color: rgba(140, 90, 45, 0.4);
}

.prize-card.is-third .prize-list li i {
  color: #97591f;
}

.prize-badge {
  width: 34px;
  height: 34px;
  border-radius: 50% !important;
  display: grid;
  place-items: center;
  margin: 0 auto .7rem;
  font-weight: 700;
  color: #fff;
  font-size: .9rem;
}

.prize-rank {
  text-align: center;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--emerald-deep);
  font-size: 1.05rem;
}

.prize-card.is-first .prize-rank {
  color: var(--cream);
}

.prize-amount {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  color: var(--emerald-deep);
  margin-top: .3rem;
}

.prize-card.is-first .prize-amount {
  color: var(--gold-light);
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.7rem);
  font-weight: 800;
}

.prize-sub {
  text-align: center;
  font-size: .78rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}

.prize-card.is-first .prize-sub {
  color: var(--sage);
}

.prize-list {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid rgba(201, 161, 74, .25);
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.prize-list li {
  display: flex;
  gap: .55rem;
  font-size: .85rem;
  color: var(--ink-soft);
  line-height: 1.35;
}

.prize-list li i {
  color: var(--gold);
  margin-top: .12rem;
  flex: none;
  font-size: .82rem;
  width: 1rem;
  text-align: center;
}

.prize-card.is-first .prize-list li i {
  color: var(--gold-light);
}

/* First Prize has 8 items vs 4-5 on the other cards - tighten it so the row's cards land closer in overall height instead of one towering. */

.prize-card.is-first .prize-list {
  gap: .4rem;
  margin-top: .8rem;
  padding-top: .8rem;
}

.prize-card.is-first .prize-list li {
  color: var(--cream);
  font-size: .78rem;
  line-height: 1.25;
}

.prize-tnc {
  display: block;
  margin-top: auto;
  padding-top: .9rem;
  text-align: right;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  animation: prizeTncBlink 1.3s ease-in-out infinite;
}

.prize-tnc:hover {
  opacity: 1 !important;
  text-decoration: underline;
  animation-play-state: paused;
}

@keyframes prizeTncBlink {

  0%,
  100% {
    opacity: 1;
    color: #d3341f;
    text-shadow: 0 0 6px rgba(211, 52, 31, .5);
  }

  50% {
    opacity: 1;
    color: #7a0f04;
    text-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prize-tnc {
    animation: none;
    opacity: 1;
    color: #d3341f;
  }
}

.prize-card.is-first .prize-tnc {
  color: var(--cream);
}

/* Steps */

.steps {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  margin-top: 2.2rem;
}

.step {
  position: relative;
  border: 1px solid var(--line-on-dark);
  background: rgba(255, 255, 255, .03);
  padding: 1.6rem 1rem;
  text-align: center;
  border-radius: 12px !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.step-num {
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  border: 2px solid var(--gold);
  color: var(--gold-light);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  margin: 0 auto 1rem;
}

.step-ico {
  font-size: 1.9rem;
  color: var(--gold-light);
  margin-bottom: .8rem;
}

.step p {
  color: var(--cream);
  font-size: .9rem;
  line-height: 1.45;
  margin: 0;
}

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

.step-grouped {
  text-align: left;
  padding: clamp(1.4rem, 1.1rem + 1vw, 2rem) clamp(1.2rem, 1rem + .8vw, 1.6rem);
  display: flex;
  flex-direction: column;
}

.step-grouped .step-num {
  margin: 0 0 .8rem;
}

.step-num-label {
  width: auto;
  height: auto;
  border-radius: 999px !important;
  padding: .35rem 1rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-family: var(--font-head);
}

.step-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold-light);
  margin: 0 0 .9rem;
  text-align: left;
}

.step-sublist {
  margin: 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.step-sublist li {
  color: var(--cream);
  font-size: .86rem;
  line-height: 1.5;
}

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

/* Hover: uplift + green moving-light border (reuses trust-card animation) */

.step::before {
  content: "";
  display: block;
  position: absolute;
  inset: -1px;
  border-radius: 13px !important;
  padding: 2.5px;
  background: conic-gradient(from var(--trust-angle),
      rgba(110, 231, 183, 0.25) 0%,
      #6ee7b7 12%, #a7f3d0 28%, #ecfdf5 32%, #a7f3d0 36%, #6ee7b7 52%,
      rgba(110, 231, 183, 0.25) 66%, rgba(110, 231, 183, 0.25) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(110, 231, 183, 0.6));
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 2;
}

.step:hover {
  transform: translateY(-4px);
  border-color: transparent;
  border-radius: 10px !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.3);
}

.step:hover::before {
  opacity: 1;
  border-radius: 11px !important;
  animation: trustLightSpin 2.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .step:hover::before {
    animation: none;
  }
}

.steps-note {
  text-align: center;
  color: var(--gold-light);
  margin: 1.8rem 0 0;
  font-size: .95rem;
}

.steps-note-warn {
  margin-top: .8rem;
  line-height: 1.5;
}

.steps-light .steps-note-warn {
  color: var(--emerald-deep);
}

.steps-note-warn strong {
  font-weight: 700;
}

/* Highlight for "participate multiple times" */

.note-hl {
  background: none;
  color: inherit;
  font-weight: 700;
  padding: 0;
}

/* Participate-multiple-times popup */

.pmt-modal {
  position: fixed;
  inset: 0;
  z-index: 3200;
  display: none;
}

.pmt-modal.is-open {
  display: block;
}

.pmt-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 20, 15, 0.78);
  backdrop-filter: blur(3px);
}

.pmt-dialog {
  position: relative;
  z-index: 1;
  width: min(440px, calc(100vw - 2rem));
  margin: 16vh auto 0;
  background: linear-gradient(160deg, #0d4937, #08362a);
  border: 1px solid rgba(201, 161, 74, 0.5);
  border-radius: 18px !important;
  padding: 2.4rem 1.8rem 2rem;
  text-align: center;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
  animation: discPop .3s ease;
}

.pmt-x {
  position: absolute;
  top: .8rem;
  right: .8rem;
  width: 34px;
  height: 34px;
  border-radius: 50% !important;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(201, 161, 74, 0.5);
  color: var(--gold-light);
  cursor: pointer;
  transition: background .2s ease;
}

.pmt-x:hover {
  background: rgba(201, 161, 74, 0.18);
}

.pmt-ico {
  width: 60px;
  height: 60px;
  margin: 0 auto 1rem;
  border-radius: 50% !important;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--emerald-deep);
  font-size: 1.5rem;
}

.pmt-title {
  font-family: var(--font-display);
  color: var(--gold-light);
  font-size: 1.5rem;
  margin: 0 0 .6rem;
}

.pmt-msg {
  color: var(--cream);
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0 0 1.6rem;
}

.pmt-ok {
  display: inline-flex;
}

/* Reel ideas */

.ideas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .7rem;
  margin-top: 1.8rem;
}

.idea-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  border: 1px solid rgba(201, 161, 74, .4);
  padding: .6rem 1rem;
  font-size: .9rem;
  color: var(--emerald-deep);
  font-weight: 600;
}

.idea-tag i {
  color: var(--gold);
}

/* Tips */

.tips {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .8rem;
  margin-top: 2.2rem;
}

.tip-ico {
  font-size: 1.7rem;
  color: var(--gold-light);
  margin-bottom: .7rem;
}

.tip p {
  color: var(--cream);
  font-size: .82rem;
  line-height: 1.4;
  margin: 0;
}

/* Hover: uplift + green moving-light border (reuses trust-card animation) */

.tip::before {
  content: "";
  display: block;
  position: absolute;
  inset: -1px;
  border-radius: 13px !important;
  padding: 2.5px;
  background: conic-gradient(from var(--trust-angle),
      rgba(110, 231, 183, 0.25) 0%,
      #6ee7b7 12%, #a7f3d0 28%, #ecfdf5 32%, #a7f3d0 36%, #6ee7b7 52%,
      rgba(110, 231, 183, 0.25) 66%, rgba(110, 231, 183, 0.25) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(110, 231, 183, 0.6));
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.tip:hover {
  transform: translateY(-4px);
  border-color: transparent;
  border-radius: 10px !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
}

.tip:hover::before {
  opacity: 1;
  border-radius: 11px !important;
  animation: trustLightSpin 2.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .tip:hover::before {
    animation: none;
  }
}

/* =========================================================
   Terms & Conditions page
   ========================================================= */

.terms-doc {
  max-width: none;
  margin-inline: 0;
}

.terms-block {
  margin-bottom: 1.9rem;
}

.terms-block h2 {
  font-family: var(--font-display);
  color: var(--emerald-deep);
  font-size: clamp(1.2rem, 1rem + .8vw, 1.55rem);
  margin: 0 0 .55rem;
  line-height: 1.2;
}

.terms-block p {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.65;
  margin: 0 0 .4rem;
}

.terms-block ul {
  margin: .35rem 0 .4rem;
  padding-left: 1.25rem;
}

.terms-block li {
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: .32rem;
}

.terms-block strong {
  color: var(--emerald-deep);
  font-weight: 700;
}

.terms-updated {
  color: var(--ink-soft);
  font-size: .85rem;
  font-style: italic;
  margin-top: 2.2rem;
}

/* Final */

.ct-final {
  background: linear-gradient(120deg, #08362a, #0b3d2f);
  text-align: center;
}

@media (max-width: 1024px) {
  .prize-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .prize-card.is-first {
    grid-column: 1 / -1;
  }

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

  .tips {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 760px) {
  .ct-hero-grid {
    grid-template-columns: 1fr;
  }

  .ct-hero-vis {
    order: -1;
  }

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

  .steps:not(.steps-grouped) {
    grid-template-columns: 1fr 1fr;
  }

  .steps-grouped {
    grid-template-columns: 1fr;
  }

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

/* Contest hero — designed background image (desktop + mobile) */

.ct-hero {
  position: relative;
  overflow: hidden;
  background: url("../assets/contest-bg.webp");
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  aspect-ratio: 1672 / 941;
  min-height: 0;
  display: flex;
  align-items: center;
}

.ct-hero>.container {
  width: 100%;
  padding-inline: clamp(1.5rem, 7vw, 8rem);
}

.ct-hero .ct-hero-grid {
  grid-template-columns: 1fr;
}

.ct-hero .ct-hero-vis {
  display: none;
}

.ct-hero .ct-hero-copy {
  max-width: 600px;
}

/* Terms page hero: no banner image, just the green gradient + text. `.ct-hero`'s aspect-ratio (1672/941, sized for the contest banner image) was still active here and forced a tall box even after min-height was reset - on a 390px phone that alone was ~220px, and combined with flex-centering it pushed ~150-300px of empty space above and below the actual copy. */

.terms-hero {
  background: linear-gradient(120deg, #062a20 0%, #0b3d2f 55%, #062a20 100%) !important;
  aspect-ratio: auto !important;
  min-height: auto !important;
  padding-block: clamp(1.3rem, 1rem + 1.2vw, 2rem) !important;
}

.terms-hero .ct-hero-copy {
  max-width: 860px;
}

.terms-hero .ct-lead {
  max-width: 760px;
}

@media (max-width: 760px) {
  .ct-hero {
    background: linear-gradient(rgba(20, 14, 6, 0.45), rgba(20, 14, 6, 0.45)),
      url("../assets/contest-bg-mobile.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    aspect-ratio: 1057 / 1488;
  }

  .ct-hero .ct-hero-copy {
    max-width: none;
  }
}

/* Contest tweaks: equal prize cards + recoloured sections. NOTE: don't re-declare grid-template-columns here — it would override the responsive breakpoints above (2/1 columns on tablet/mobile) since it comes later in the cascade and caused the cards to overflow off-screen on phones. */

.prize-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  margin-top: .8rem;
  align-items: stretch;
}

.prize-card {
  position: relative;
  background: linear-gradient(160deg, #e6faf1 0%, #c7edda 100%);
  border: 1px solid rgba(201, 161, 74, .4);
  padding: 1.5rem 1.2rem;
  box-shadow: 0 20px 40px -28px rgba(0, 0, 0, .3);
  border-radius: 14px !important;
  transition: transform .3s var(--ease-out), box-shadow .3s ease;
  border-color: transparent !important;
  display: flex;
  flex-direction: column;
}

/* Card order: badge, then PRICE, then title, then paragraph, then list, then T&C */

.prize-card .prize-badge {
  order: 0;
}

.prize-card .prize-amount {
  order: 1;
}

.prize-card .prize-rank {
  order: 2;
  margin-top: .5rem;
}

.prize-card .prize-sub {
  order: 3;
}

.prize-card .prize-list {
  order: 4;
}

.prize-card .prize-tnc {
  order: 5;
}

/* How to Participate: cream section with green step cards */

.section.steps-light {
  padding-block: clamp(1.1rem, .8rem + 1.2vw, 1.8rem);
}

.section-dark:has(.tips) {
  padding-block: clamp(1.1rem, .8rem + 1.2vw, 1.8rem);
  background-color: #08362a;
  background-image: linear-gradient(rgba(18, 74, 58, 0.12), rgba(18, 74, 58, 0.12)),
    url("../assets/leather-tile1bce.webp?v=6");
  background-size: auto, 1200px auto;
  background-repeat: repeat, repeat;
  background-position: center, center;
}

/* Tip cards: lift them off the leather so the text stays crisp */

.section-dark:has(.tips) .tip {
  background: rgba(4, 30, 23, 0.55);
  border: 1px solid rgba(201, 161, 74, 0.34);
  backdrop-filter: blur(2px);
}

.section-dark:has(.tips) .tip p {
  color: var(--cream);
}

/* Each step card a distinct dark jewel-tone */

.steps-light .step:nth-child(1) {
  background: linear-gradient(160deg, #0d4937, #08362a);
}

/* emerald */

.steps-light .step:nth-child(2) {
  background: linear-gradient(160deg, #145a52, #08332e);
}

/* teal */

.steps-light .step:nth-child(3) {
  background: linear-gradient(160deg, #5b3d28, #271c15);
}

/* brown */

.steps-light .step:nth-child(4) {
  background: linear-gradient(160deg, #3f4a1c, #232a10);
}

/* olive */

.steps-light .step:nth-child(5) {
  background: linear-gradient(160deg, #4a2a30, #281319);
}

/* plum */

.steps-light .step:nth-child(6) {
  background: linear-gradient(160deg, #234a5b, #103038);
}

/* deep teal-blue */

.steps-light .step:hover {
  border-color: transparent;
}

.steps-light .step-num {
  border-color: var(--gold);
  color: var(--gold-light);
}

.steps-light .step-ico {
  color: var(--gold-light);
}

.steps-light .step p {
  color: var(--cream);
}

.steps-light .steps-note {
  color: var(--emerald);
}

/* "Ready to Show Your Creativity" - this band carries the dark leather surface, so its text must be light. It was authored for a cream background, which left dark-green text on dark-green leather. */

.ct-final h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem);
  margin: .6rem 0 0;
  color: var(--cream) !important;
}

.ct-final p {
  opacity: .9;
  max-width: 52ch;
  margin: 1rem auto 1.6rem;
  line-height: 1.6;
  color: var(--on-emerald-soft) !important;
}

.ct-final .ct-trophy {
  color: var(--gold-light) !important;
}

/* Mobile: left-align disclaimer + keep it clear of the floating buttons on the right */

/* News grid with two cards — centered */

/* Trim the big top gap above the Latest Updates heading */

.news-updates {
  padding-top: clamp(1.6rem, 1rem + 2vw, 3rem);
}

.news-grid--2 {
  grid-template-columns: repeat(3, 1fr);
  max-width: 1240px;
  margin-inline: auto;
  gap: clamp(1.2rem, 2vw, 1.8rem);
}

.news-grid--2 .news-box .news-ico {
  font-size: 2.5rem;
}

.news-grid--2 .news-box p {
  font-size: 1.08rem;
}

@media (max-width: 1024px) and (min-width: 821px) {
  .news-grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  .news-grid--2 {
    grid-template-columns: 1fr;
  }
}

/* Topbar — golden background */

.topbar {
  border-bottom: 1px solid var(--line-on-dark);
  font-size: .8rem;
  position: sticky;
  top: 0;
  z-index: calc(var(--z-sticky) + 1);
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border-bottom-color: rgba(8, 54, 42, 0.22);
}

.topbar-note,
.topbar-note i,
.lang-ico,
.lang-btn {
  color: var(--emerald-deep);
}

.lang-btn:hover {
  color: #000;
}

.lang-btn.is-active {
  text-underline-offset: 3px;
  color: var(--emerald-deep);
  text-decoration: underline;
}

.lang-sep {
  color: rgba(8, 54, 42, 0.45);
}

/* =========================================================
   Nav dropdown (Videos submenu)
   ========================================================= */

.nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-item.has-sub>a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.nav-item .caret {
  display: inline-flex;
  transition: transform .3s ease;
}

.nav-item.has-sub:hover .caret,
.nav-item.has-sub:focus-within .caret {
  transform: rotate(180deg);
}

.nav-item.has-sub:hover .nav-sub,
.nav-item.has-sub:focus-within .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}

.nav-sub a {
  padding: .65rem 1.2rem !important;
  font-size: .9rem !important;
  border-bottom: 0 !important;
  width: auto !important;
  white-space: nowrap;
  border-radius: 0 !important;
  color: var(--on-emerald);
}

.nav-sub a::after {
  display: none !important;
}

.nav-sub a:hover {
  background: rgba(201, 161, 74, .12);
  color: var(--gold-light);
}

@media (max-width: 860px) {

  .nav-item,
  .nav-item.has-sub {
    width: 100%;
    display: block;
  }

  .nav-item.has-sub>a {
    justify-content: space-between;
  }

  .nav-item .caret {
    display: inline-flex;
    margin-left: auto;
  }

  .nav-item.has-sub.is-open .caret {
    transform: rotate(180deg);
  }

  /* collapsed by default — expands only when the parent is tapped */

  .nav-sub {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
  }

  .nav-item.has-sub.is-open .nav-sub {
    max-height: 400px;
  }

  .nav-sub a {
    padding: .9rem 0 .9rem 1.4rem !important;
    font-size: 1rem !important;
    border-bottom: 1px solid var(--line-on-dark) !important;
    white-space: normal;
  }
}

/* Header icon buttons — round background */

.header-cta .search-btn,
.header-cta .head-social {
  border-radius: 50% !important;
}

/* Header call pill — rounded corners */

.header-cta .header-phone {
  border-radius: 24px !important;
}

/* Hero: Important Disclaimer heading */

.hero-disclaimer {
  background: var(--emerald-deep);
  position: relative;
}

/* Golden accent line along the bottom edge of the hero */

.hero-disclaimer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  z-index: 3;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 18%, var(--gold-light) 50%, var(--gold) 82%, transparent 100%);
  box-shadow: 0 0 14px rgba(201, 161, 74, 0.55);
}

.page-hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  z-index: 3;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 18%, var(--gold-light) 50%, var(--gold) 82%, transparent 100%);
  box-shadow: 0 0 14px rgba(201, 161, 74, 0.55);
}

.disc-hero {
  text-align: left;
  max-width: 620px;
}

.disc-flourish {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  color: var(--gold-light);
  margin-bottom: 1.3rem;
}

.disc-flourish .disc-line:last-child {
  background: linear-gradient(90deg, var(--gold), transparent);
}

.disc-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 1rem + 3vw, 3.4rem);
  line-height: 1.05;
  margin: 0;
  padding-bottom: 1.1rem;
  background: #e8b4a8;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-light);
}

/* Disclaimer hero: body text + "To Know More" button */

.disc-text {
  color: var(--cream);
  opacity: .92;
  font-size: clamp(1rem, .95rem + .3vw, 1.2rem);
  line-height: 1.6;
  margin: 1.3rem 0 0;
}

.disc-btn-green {
  border: 1px solid var(--gold) !important;
  color: var(--emerald) !important;
  animation: ctaPop-new 1.7s ease-in-out infinite !important;
}

.disc-btn-ico-green {
  border: 1px solid var(--surface) !important;
}

.disc-btn-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  border: 1px solid var(--surface);
  flex: none;
}

.disc-flourish .disc-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
  width: clamp(50px, 8vw, 110px);
}

/* Keep the disclaimer title on a single line on small screens (needs .hero-curved prefix to beat the .hero-curved h1 font-size rule) */

@media (max-width: 560px) {
  .hero-curved .disc-title {
    white-space: nowrap;
    letter-spacing: .02em;
    font-size: clamp(1.2rem, 6vw, 2rem);
  }
}

/* Desktop: single line too — let it extend past the 620px copy column. width:max-content so the background-clip:text gradient covers every glyph. */

@media (min-width: 901px) {
  .hero-curved .disc-title {
    white-space: nowrap;
    width: max-content;
    max-width: none;
    font-size: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
  }
}

/* =========================================================
   Disclaimer modal
   ========================================================= */

.disc-btn {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: 1rem;
  padding: 6px 10px;
  border: 1px solid var(--surface);
  color: var(--surface);
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .3s ease, color .3s ease;
  cursor: pointer;
  background: transparent;
  border-radius: 24px !important;
  animation: ctaPop 1.7s ease-in-out infinite;
  will-change: transform;
}

.disc-btn:hover {
  background: rgba(201, 161, 74, .12);
  color: #fff;
  animation-play-state: paused;
}

/* the click (hand-pointer) icon taps in sync */

@keyframes discTap {

  0%,
  100% {
    transform: scale(1);
  }

  45%,
  62% {
    transform: scale(.72);
  }
}

.disc-btn-ico i {
  display: inline-block;
  animation: discTap 1.7s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {

  .disc-btn,
  .disc-btn-ico i {
    animation: none;
  }
}

.disc-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
}

.disc-modal.is-open {
  display: block;
}

.disc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 20, 15, 0.72);
  backdrop-filter: blur(3px);
}

@keyframes discPop {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.disc-modal-x:hover {
  background: rgba(201, 161, 74, 0.18);
  color: #fff;
}

.dm-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50% !important;
  border: 1.5px solid var(--gold);
  color: var(--gold-light);
}

.dm-ico svg {
  width: 22px;
  height: 22px;
}

.dm-ico-lg {
  width: 54px;
  height: 54px;
}

.dm-ico-lg svg {
  width: 26px;
  height: 26px;
}

/* vertical timeline connector behind the icons */

.dm-list::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 22px;
  bottom: 22px;
  width: 1.5px;
  background: linear-gradient(180deg, rgba(201, 161, 74, 0.55), rgba(201, 161, 74, 0.15));
}

.dm-row:last-child {
  border-bottom: 0;
}

.dm-row .dm-ico {
  position: relative;
  z-index: 1;
  background: var(--emerald-deep);
}

.dm-txt strong {
  display: block;
  color: #fff;
  opacity: 1;
  font-weight: 700;
  margin-bottom: .12rem;
}

.dm-tnc:hover {
  opacity: .8;
}

.dm-foot {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.8rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid rgba(201, 161, 74, 0.4);
  border-radius: 24px !important;
}

.dm-foot-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--gold-light);
}

.dm-foot-ico svg {
  width: 34px;
  height: 34px;
}

.dm-foot-line {
  width: 1px;
  align-self: stretch;
  min-height: 48px;
  background: rgba(201, 161, 74, 0.4);
}

.dm-foot-txt {
  margin: 0;
  flex: 1 1 340px;
  text-align: center;
  font-family: var(--font-display);
  color: var(--cream);
  font-size: 1.6rem !important;
  line-height: 1.4;
}

.dm-foot-thanks {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold-light);
  font-size: 1.75rem !important;
}

@media (max-width: 560px) {
  .disc-modal-dialog {
    margin-top: .8rem;
  }

  .disc-modal-head {
    gap: .55rem;
    padding-right: 2.2rem;
    margin-bottom: .8rem;
  }

  .disc-modal-title {
    font-size: .9rem;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .dm-ico-lg {
    width: 32px;
    height: 32px;
  }

  .dm-ico-lg svg {
    width: 17px;
    height: 17px;
  }

  .disc-modal-x {
    width: 30px;
    height: 30px;
    top: .55rem;
    right: .55rem;
  }

  .dm-row {
    gap: .8rem;
    grid-template-columns: 40px 1fr;
    padding: .62rem 0;
  }

  .dm-txt {
    line-height: 1.45;
  }

  .dm-list::before {
    left: 19px;
  }

  .dm-ico {
    width: 40px;
    height: 40px;
  }

  .dm-ico svg {
    width: 19px;
    height: 19px;
  }

  .dm-foot {
    gap: .7rem;
  }

  .dm-foot-line {
    display: none;
  }

  .dm-foot-txt,
  .dm-foot-thanks {
    text-align: center;
    flex-basis: 100%;
  }
}

/* Hero disclaimer mark (ban icon + connector) */

.disc-row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 1.4rem;
}

.disc-row .disc-text {
  margin: 0;
  text-wrap: balance;
  max-width: 70ch;
  margin-inline: auto;
}

.disc-warn {
  flex: none;
  color: var(--gold-light);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: 1;
  display: inline-flex;
}

.disc-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 62px;
  flex: none;
}

.disc-mark-ico {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50% !important;
  border: 1.6px solid var(--gold);
  color: var(--gold-light);
}

.disc-mark-ico svg {
  width: 30px;
  height: 30px;
}

.disc-mark-line {
  display: none;
  width: 1.5px;
  height: 26px;
  background: linear-gradient(180deg, var(--gold), transparent);
}

/* =========================================================
   Trust items as cards
   ========================================================= */

.trust-cards-sec {
  padding-block: clamp(1.2rem, .75rem + 1.5vw, 2rem);
}

.trust-cards-sec .trust-row {
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}

.trust-cards-sec .trust-emb:hover {
  transform: translateY(-5px);
  border-color: transparent;
  border-radius: 10px !important;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

.trust-cards-sec .trust-emb span {
  font-size: clamp(1rem, .9rem + .3vw, 1.15rem);
  letter-spacing: .01em;
}

.trust-cards-sec .trust-emb .ico,
.trust-cards-sec .trust-emb .ico i,
.trust-cards-sec .trust-emb .ico svg {
  color: var(--gold-light);
}

/* Repurpose ::before as a moving-light border (revealed on hover); this also overrides the legacy divider seams from the base .trust-emb rules. */

@property --trust-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.trust-cards-sec .trust-emb::before,
.trust-cards-sec .trust-emb+.trust-emb::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  border-radius: 14px !important;
  padding: 3px;
  background: conic-gradient(from var(--trust-angle),
      rgba(201, 161, 74, 0.25) 0%,
      #c9a14a 12%, #e8b4a8 28%, #fff4d6 32%, #e8b4a8 36%, #c9a14a 52%,
      rgba(201, 161, 74, 0.25) 66%, rgba(201, 161, 74, 0.25) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 7px rgba(201, 161, 74, 0.6));
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}

.trust-cards-sec .trust-emb::after,
.trust-cards-sec .trust-emb:nth-child(n

  /**/
  +5)::after {
  display: none !important;
}

.trust-cards-sec .trust-emb:hover::before {
  opacity: 1;
  border-radius: 10px !important;
  animation: trustLightSpin 2.6s linear infinite;
}

@keyframes trustLightSpin {
  to {
    --trust-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-cards-sec .trust-emb:hover::before {
    animation: none;
  }
}

@media (max-width: 680px) {
  /* Compact 2×4 grid so all 8 cards fit on one screen */

  .trust-cards-sec {
    padding-block: 1.4rem;
  }

  .trust-cards-sec .trust-row {
    grid-template-columns: repeat(2, 1fr);
    gap: .6rem;
  }

  .trust-cards-sec .trust-emb .ico {
    width: 30px;
    height: 30px;
    margin-bottom: .4rem;
  }

  .trust-cards-sec .trust-emb .ico i {
    font-size: 1.5rem;
  }

  .trust-cards-sec .trust-emb .ico svg {
    width: 30px;
    height: 30px;
  }

  .trust-cards-sec .trust-emb span {
    font-size: .8rem;
    line-height: 1.2;
  }

  /* No hover on touch — show the moving-light ring always on mobile */

  .trust-cards-sec .trust-emb {
    padding: 2.1rem .5rem !important;
    border-width: 1.5px;
    border-radius: 12px !important;
    border-color: transparent;
  }

  .trust-cards-sec .trust-emb::before,
  .trust-cards-sec .trust-emb+.trust-emb::before {
    opacity: 1;
    border-radius: 12px !important;
    padding: 2px;
    animation: trustLightSpin 2.6s linear infinite;
  }
}

@media (max-width: 680px) and (prefers-reduced-motion: reduce) {

  .trust-cards-sec .trust-emb::before,
  .trust-cards-sec .trust-emb+.trust-emb::before {
    animation: none;
  }
}

/* =========================================================
   Backdrop for The Green City SEZ Advantage section
   ========================================================= */

.scroll-stack-section {
  padding-top: clamp(1.8rem, 1.2rem + 2vw, 3.5rem);
  padding-bottom: 0;
  position: relative;
}

/* Forest silhouette pinned to the bottom of the viewport through this section */

.forest-bg {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;
  z-index: 0;
  pointer-events: none;
  background: url("../assets/forest-bg.webp") no-repeat bottom center;
  background-size: 100% auto;
  mix-blend-mode: multiply;
  opacity: .9;
}

@media (max-width: 700px) {
  .forest-bg {
    background-size: 200% auto;
  }
}

.scroll-stack-section>.container,
.scroll-stack-section>.scroll-stack {
  position: relative;
  z-index: 1;
}

/* Advantage cards now live in the scroll-stack; dots + icons hidden */

.ss-dots {
  display: none;
}

.ss-ico {
  display: none;
}

/* =========================================================
   In the Spotlight — category tabs
   ========================================================= */

.spotlight-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 6px;
}

.spot-tab {
  position: relative;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .72em 2.6em;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--emerald-deep);
  border-radius: 24px !important;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* Mint moving-light ring border (same effect as the trust cards), revealed on hover */

.spot-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px !important;
  padding: 4px;
  pointer-events: none;
  background: conic-gradient(from var(--trust-angle),
      rgba(110, 231, 183, 0.25) 0%,
      #6ee7b7 12%, #a7f3d0 28%, #ecfdf5 32%, #a7f3d0 36%, #6ee7b7 52%,
      rgba(110, 231, 183, 0.25) 66%, rgba(110, 231, 183, 0.25) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 7px rgba(110, 231, 183, 0.6));
  opacity: 0;
  transition: opacity .3s ease;
}

.spot-tab:hover::before {
  opacity: 1;
  animation: trustLightSpin 2.6s linear infinite;
}

.spot-tab:hover {
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.28);
}

@media (prefers-reduced-motion: reduce) {
  .spot-tab:hover::before {
    animation: none;
  }
}

.spot-tab.is-active {
  background: var(--gold);
  color: var(--emerald-deep);
  border-color: transparent;
  box-shadow: 0 10px 24px -12px rgba(201, 161, 74, 0.7);
}

.spot-tab.is-active:hover {
  transform: translateY(-2px);
}

.spot-tab:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.spot-panel[hidden] {
  display: none;
}

/* Mobile: "Beyond Green City SEZ" spans the top, the other two share a row below */

@media (max-width: 560px) {
  .spotlight-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .55rem;
  }

  .spotlight-tabs .spot-tab:nth-child(2) {
    order: -1;
    grid-column: 1 / -1;
  }

  .spot-tab {
    padding: .72em .6em;
    font-size: .74rem;
    letter-spacing: .04em;
    white-space: nowrap;
  }
}

/* =========================================================
   FAQ two-column grid
   ========================================================= */

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  align-items: start;
  max-width: 1080px;
  margin-inline: auto;
}

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

/* Latest Updates news boxes — gold border + heading shadow */

.news-grid--2 .news-box h3 {
  font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem);
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.5);
}

/* Latest Updates: reduced, equal top & bottom padding */

#videos {
  padding-top: 2.5rem;
}

/* Card polish: shadow + radius + border */

.trust-cards-sec .trust-emb {
  padding: 1.9rem 1rem 1.6rem !important;
  background: transparent;
  border: 2px solid rgba(201, 161, 74, 0.75);
  border-radius: 14px !important;
  transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.45);
}

.news-grid--2 .news-box:hover {
  border-color: #6ee7b7;
  box-shadow: 0 32px 64px -24px rgba(0, 0, 0, 0.6);
}

/* Latest Updates: green background with aerial township image behind it. Opaque + higher layer so it covers the advantage stack's pinned cards/dots. */

section[aria-label="Updates and news"] {
  padding-block: 5px 20px;
  position: relative;
  z-index: 2;
  background: linear-gradient(rgba(9, 40, 31, 0.94), rgba(8, 54, 42, 0.94)), url("../assets/reveal-in.webp") center/cover no-repeat var(--emerald-deep);
}

section[aria-label="Updates and news"] .eyebrow {
  color: var(--gold-light);
}

section[aria-label="Updates and news"] h2 {
  color: var(--cream);
}

/* FAQ: rounded cards + circular toggle icon */

.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color .3s ease, box-shadow .3s ease;
  border-radius: 16px !important;
  overflow: hidden;
}

.faq-item summary .q-ico {
  flex: none;
  width: 28px;
  height: 28px;
  border: 1px solid var(--line-gold);
  color: var(--gold);
  display: grid;
  place-items: center;
  transition: transform .4s var(--ease-out), background .3s ease, color .3s ease;
  border-radius: 50% !important;
}

/* Centered page hero (title + breadcrumb) */

/* Tight hero - used on How to Buy so the breadcrumb sits close to the header */

.page-hero--tight {
  padding-block: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem);
}

.page-hero--tight h1 {
  margin-top: .45rem;
}

.page-hero--center {
  text-align: center;
}

.page-hero--center .breadcrumb {
  justify-content: center;
}

.page-hero--center h1 {
  max-width: none;
  margin-inline: auto;
}

/* Tighten the gap between the Reel Contest banner and the FAQ section (home) */

/* Full-bleed contest banner: no gaps, edge-to-edge image flush to next section */

.cta-section {
  background: var(--bg);
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
}

.cta-section .container {
  width: 100%;
  max-width: none;
}

/* Golden accent line along the bottom edge of the contest banner */

.cta-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  z-index: 3;
  background: linear-gradient(90deg, transparent 0%, var(--gold) 18%, var(--gold-light) 50%, var(--gold) 82%, transparent 100%);
  box-shadow: 0 0 14px rgba(201, 161, 74, 0.55);
}

#faq {
  padding-top: 10px;
  padding-bottom: 15px;
}

/* =========================================================
   Green City SEZ quick-links popup
   ========================================================= */

.gcsez-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
}

.gcsez-modal.is-open {
  display: block;
}

.gcsez-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 20, 15, 0.72);
  backdrop-filter: blur(3px);
}

.gcsez-x:hover {
  background: rgba(201, 161, 74, 0.18);
  color: #fff;
}

.gcsez-links {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.gcsez-links a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .95rem 1.15rem;
  border: 1px solid rgba(201, 161, 74, 0.35);
  border-radius: 12px !important;
  color: var(--cream);
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1rem;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
}

/* Mint moving-light ring border, revealed on hover */

.gcsez-links a::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px !important;
  padding: 2px;
  pointer-events: none;
  background: conic-gradient(from var(--trust-angle),
      rgba(110, 231, 183, 0.25) 0%,
      #6ee7b7 12%, #a7f3d0 28%, #ecfdf5 32%, #a7f3d0 36%, #6ee7b7 52%,
      rgba(110, 231, 183, 0.25) 66%, rgba(110, 231, 183, 0.25) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(110, 231, 183, 0.55));
  opacity: 0;
  transition: opacity .3s ease;
}

.gcsez-links a:hover::before {
  opacity: 1;
  animation: trustLightSpin 2.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .gcsez-links a:hover::before {
    animation: none;
  }
}

/* Media-picker popup: light ring always visible + animating (no hover needed) */

#mediaPickerModal .gcsez-links a::before {
  opacity: 1;
  animation: trustLightSpin 2.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  #mediaPickerModal .gcsez-links a::before {
    animation: none;
  }
}

.gcsez-links a svg {
  flex: none;
  color: var(--gold-light);
  transition: transform .2s ease;
}

.gcsez-links a:hover {
  background: rgba(201, 161, 74, 0.12);
  border-color: transparent;
  transform: translateX(3px);
  color: #fff;
}

.gcsez-links a:hover svg {
  transform: translateX(3px);
}

/* =========================================================
   Topbar location badge — pop-in, then whole badge (pin + text) keeps popping
   ========================================================= */

.topbar-note {
  color: var(--sage);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  letter-spacing: .02em;
  transform-origin: left center;
  animation: notePop .5s ease both, noteTextPop 2.6s ease-in-out .8s infinite;
}

.topbar-note i {
  color: var(--gold-light);
  transform-origin: center bottom;
  animation: notePinPulse 2.6s ease-in-out .8s infinite;
}

@keyframes noteTextPop {

  0%,
  100% {
    transform: none;
  }

  12% {
    transform: translateY(-2px) scale(1.07);
  }

  26% {
    transform: none;
  }
}

@keyframes notePop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(.9);
  }

  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.05);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes notePinPulse {

  0%,
  100% {
    transform: none;
  }

  12% {
    transform: translateY(-2px) scale(1.25);
  }

  24% {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {

  .topbar-note,
  .topbar-note i {
    animation: none;
  }
}

/* Important notice callout */

.notice-box {
  border: 1px solid var(--gold);
  border-radius: 12px !important;
  background: rgba(201, 161, 74, 0.08);
  padding: 1.1rem 1.4rem;
}

.notice-box p {
  margin: 0;
  color: var(--ink);
}

.notice-box strong {
  color: var(--gold);
}

/* =========================================================
   PAGE LOADER — visual styling only. Exit timing is controlled by JavaScript so the loader stays for at least 4s.
   ========================================================= */

.page-loader .pl-logo {
  width: clamp(96px, 18vw, 140px);
  height: auto;
  opacity: .96;
  display: block;
}

/* Moving-light ring around the preloader logo */

.page-loader .pl-logo-wrap {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.page-loader .pl-logo-wrap::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 16px !important;
  padding: 2.5px;
  background: conic-gradient(from var(--trust-angle),
      rgba(201, 161, 74, 0.2) 0%,
      #c9a14a 12%, #e8b4a8 28%, #fff4d6 32%, #e8b4a8 36%, #c9a14a 52%,
      rgba(201, 161, 74, 0.2) 66%, rgba(201, 161, 74, 0.2) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  filter: drop-shadow(0 0 9px rgba(201, 161, 74, 0.6));
  pointer-events: none;
  animation: trustLightSpin 2.6s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .page-loader .pl-logo-wrap::before {
    animation: none;
  }
}

@keyframes plSlide {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader .pl-bar {
    animation: none;
    transform: none;
  }
}

/* =========================================================
   About page — Green City SEZ clarification / disclosure section
   ========================================================= */

/* Top notice banner */

.gc-notice {
  position: relative;
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1.1rem + 1.4vw, 2.4rem);
  padding-inline-start: clamp(1.6rem, 1.3rem + 1.4vw, 2.6rem);
  background: linear-gradient(150deg, rgba(201, 161, 74, 0.13), rgba(201, 161, 74, 0.03));
  border: 1px solid var(--line-gold);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, .7rem + 1vw, 1.6rem);
  align-items: start;
  overflow: hidden;
}

.gc-notice::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--gold-light), var(--gold));
}

.gc-notice-ico {
  flex: none;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: linear-gradient(150deg, var(--gold), #b8903c);
  color: var(--emerald-deep);
  font-size: 1.35rem;
  box-shadow: var(--shadow-gold);
}

.gc-notice h2 {
  font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  margin-bottom: .7rem;
}

.gc-notice p {
  color: var(--ink-soft);
  line-height: 1.75;
  margin-bottom: .75rem;
}

.gc-notice p:last-child {
  margin-bottom: 0;
}

.gc-notice strong {
  color: var(--emerald-deep);
}

/* Numbered content blocks */

.gc-blocks {
  display: grid;
  gap: clamp(.7rem, .35rem + 1.4vw, 1.1rem);
}

.gc-block {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: clamp(1.1rem, .85rem + 1vw, 1.5rem);
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .3s ease;
}

.gc-block:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-gold);
}

.gc-block-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding-inline: .55rem;
  border-radius: 10px;
  background: linear-gradient(150deg, rgba(201, 161, 74, 0.18), rgba(201, 161, 74, 0.05));
  border: 1px solid var(--line-gold);
  color: var(--gold);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: .6rem;
}

.gc-block h3 {
  font-size: clamp(1.1rem, .98rem + .55vw, 1.4rem);
  margin-bottom: .5rem;
  line-height: 1.35;
}

.gc-block p {
  color: var(--ink-soft);
  line-height: 1.75;
  margin-bottom: .6rem;
}

.gc-block p:last-child {
  margin-bottom: 0;
}

.gc-block strong {
  color: var(--emerald-deep);
  font-weight: 700;
}

/* Dark variant */

.section-dark .gc-block {
  background: linear-gradient(160deg, rgba(18, 92, 70, 0.34), rgba(255, 255, 255, 0.02));
  border-color: var(--line-on-dark);
}

.section-dark .gc-block:hover {
  border-color: var(--gold);
}

.section-dark .gc-block p {
  color: var(--on-emerald-soft);
}

.section-dark .gc-block strong {
  color: var(--cream);
}

.section-dark .gc-block-num {
  color: var(--gold-light);
}

/* Bullet list inside blocks */

.gc-list {
  display: grid;
  gap: .65rem;
  margin: 1.05rem 0 .95rem;
}

.section-dark .gc-list li {
  color: var(--on-emerald-soft);
}

.section-dark .gc-list li::before {
  background: var(--gold-light);
}

/* Two-column list on wider screens */

.gc-list.cols {
  grid-template-columns: 1fr 1fr;
  gap: .65rem 1.6rem;
}

@media (max-width: 720px) {
  .gc-list.cols {
    grid-template-columns: 1fr;
  }
}

/* Stat strip */

.gc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: clamp(.7rem, .5rem + .8vw, 1.2rem);
  margin-top: clamp(1.6rem, 1.2rem + 1.4vw, 2.6rem);
}

.gc-stat {
  text-align: center;
  padding: clamp(1.1rem, .9rem + .8vw, 1.7rem) .9rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-on-dark);
  transition: transform .4s var(--ease-out), border-color .3s ease, background .3s ease;
}

.gc-stat:hover {
  transform: translateY(-5px);
  border-color: var(--gold);
  background: rgba(255, 255, 255, 0.07);
}

.gc-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem);
  line-height: 1.1;
  color: var(--gold-light);
  margin-bottom: .35rem;
}

.gc-stat span {
  display: block;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--on-emerald-soft);
  font-weight: 600;
}

.gc-stat em {
  display: block;
  font-style: normal;
  font-size: .72rem;
  color: var(--sage);
  margin-top: .3rem;
  font-weight: 500;
}

/* Price comparison cards */

.gc-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: clamp(.9rem, .6rem + 1vw, 1.5rem);
  margin: 1.4rem 0 1.2rem;
}

.gc-compare-card {
  padding: clamp(1.2rem, 1rem + .8vw, 1.7rem);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-alt);
}

.gc-compare-card .lbl {
  display: block;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: #856218;
  margin-bottom: .55rem;
}

.gc-compare-card .val {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + .9vw, 1.75rem);
  color: var(--emerald-deep);
  line-height: 1.2;
  margin-bottom: .45rem;
}

.gc-compare-card p {
  font-size: .9rem;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.6;
}

.gc-compare-card.is-high {
  border-color: var(--line-gold);
  background: linear-gradient(150deg, rgba(201, 161, 74, 0.10), rgba(201, 161, 74, 0.02));
}

/* Checklist (numbered precautions) */

.gc-check {
  display: grid;
  gap: .55rem;
  counter-reset: gcchk;
  margin-top: 1.4rem;
}

.gc-check li {
  counter-increment: gcchk;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .95rem;
  align-items: start;
  padding: .85rem 1.1rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  transition: border-color .3s ease, transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}

.gc-check li:hover {
  border-color: var(--line-gold);
  transform: translateX(4px);
  box-shadow: var(--shadow-sm);
}

.gc-check li::before {
  content: counter(gcchk, decimal-leading-zero);
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(150deg, rgba(201, 161, 74, 0.18), rgba(201, 161, 74, 0.05));
  border: 1px solid var(--line-gold);
  color: var(--gold);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .8rem;
}

@media (min-width: 900px) {
  .gc-check {
    grid-template-columns: 1fr 1fr;
    gap: .55rem .9rem;
  }
}

/* Purpose / objective chips */

.gc-aims {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .8rem;
  margin-top: 1.3rem;
}

.gc-aim {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  padding: 1.05rem 1.2rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-on-dark);
  color: var(--cream);
  font-size: .93rem;
  line-height: 1.6;
  font-weight: 500;
  transition: border-color .3s ease, transform .3s var(--ease-out), background .3s ease;
}

.gc-aim:hover {
  border-color: var(--gold);
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.07);
}

.gc-aim i {
  color: var(--gold-light);
  flex: none;
  margin-top: .22rem;
}

/* Legal disclaimer accordion */

.gc-legal {
  display: grid;
  gap: .7rem;
  margin-top: 1.5rem;
}

.gc-legal-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.gc-legal-item[open] {
  border-color: var(--line-gold);
  box-shadow: var(--shadow-sm);
}

.gc-legal-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.05rem 1.3rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, .94rem + .35vw, 1.15rem);
  color: var(--emerald-deep);
  line-height: 1.4;
}

.gc-legal-item summary::-webkit-details-marker {
  display: none;
}

.gc-legal-item summary .q-ico {
  margin-inline-start: auto;
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(201, 161, 74, 0.15);
  border: 1px solid var(--line-gold);
  color: var(--gold);
  transition: transform .35s var(--ease-out), background .3s ease, color .3s ease;
}

.gc-legal-item[open] summary .q-ico {
  transform: rotate(45deg);
  background: var(--gold);
  color: var(--emerald-deep);
}

.gc-legal-body {
  padding: 0 1.3rem 1.3rem;
}

.gc-legal-body p {
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.75;
  margin-bottom: .7rem;
}

.gc-legal-body p:last-child {
  margin-bottom: 0;
}

.gc-legal-body strong {
  color: var(--emerald-deep);
}

.gc-legal-body .gc-list {
  margin-top: .8rem;
}

/* Closing signature card */

.gc-sign {
  margin-top: clamp(1.8rem, 1.4rem + 1.6vw, 3rem);
  text-align: center;
  padding: clamp(1.6rem, 1.3rem + 1.6vw, 2.8rem);
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, rgba(201, 161, 74, 0.12), rgba(201, 161, 74, 0.03));
  border: 1px solid var(--line-gold);
}

.gc-sign p {
  color: var(--ink-soft);
  max-width: 62ch;
  margin-inline: auto;
  line-height: 1.75;
}

.gc-sign .gc-sign-name {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  color: var(--emerald-deep);
}

.gc-sign .gold-rule {
  margin: 1.1rem auto 0;
}

/* Trademark note */

.gc-tm {
  margin-top: 1.4rem;
  padding: 1.15rem 1.35rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed var(--line-on-dark);
  font-size: .88rem;
  line-height: 1.7;
  color: var(--on-emerald-soft);
}

.gc-tm strong {
  color: var(--gold-light);
}

@media (max-width: 640px) {
  .gc-notice {
    grid-template-columns: 1fr;
  }

  .gc-notice-ico {
    width: 46px;
    height: 46px;
    font-size: 1.15rem;
  }
}

/* Featured stat tile (highlighted headline figure) */

.gc-stat.is-feature {
  position: relative;
  background: linear-gradient(155deg, rgba(201, 161, 74, 0.22), rgba(201, 161, 74, 0.06));
  border-color: var(--gold);
  box-shadow: var(--shadow-gold);
}

.gc-stat.is-feature::after {
  content: "";
  position: absolute;
  inset-inline: 18%;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
}

.gc-stat.is-feature b {
  color: #fff4d6;
  font-size: clamp(1.7rem, 1.3rem + 1.7vw, 2.5rem);
  text-shadow: 0 2px 14px rgba(201, 161, 74, 0.45);
}

.gc-stat.is-feature span {
  color: var(--cream);
  font-weight: 700;
}

.gc-stat.is-feature em {
  color: var(--gold-light);
}

.gc-stat.is-feature:hover {
  border-color: var(--gold-light);
  background: linear-gradient(155deg, rgba(201, 161, 74, 0.28), rgba(201, 161, 74, 0.09));
}

/* =========================================================
   Buyer Guide — local landowner / broker directory grid
   ========================================================= */

.bg-note>i {
  color: var(--gold);
  font-size: 1.15rem;
  margin-top: .2rem;
}

.bg-note strong {
  color: var(--emerald-deep);
}

.bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: clamp(.7rem, .5rem + .7vw, 1.1rem);
}

.bg-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.05rem 1.2rem;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .3s ease;
  overflow-wrap: anywhere;
}

.bg-card:hover,
.bg-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-gold);
}

.bg-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--emerald-deep);
}

.bg-num {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.bg-num i {
  flex: none;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: .7rem;
  background: rgba(201, 161, 74, 0.15);
  border: 1px solid var(--line-gold);
  color: var(--gold);
  transition: background .3s ease, color .3s ease;
}

.bg-card:hover .bg-num {
  color: var(--emerald-deep);
}

.bg-card:hover .bg-num i {
  background: var(--gold);
  color: var(--emerald-deep);
}

.bg-count {
  margin-top: clamp(1.2rem, 1rem + .8vw, 1.8rem);
  text-align: center;
  font-size: .86rem;
  color: var(--ink-soft);
  font-weight: 600;
}

/* Phones: two per row stays readable down to ~360px, one below that */

@media (max-width: 560px) {
  .bg-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .bg-card {
    padding: .9rem 1rem;
  }

  .bg-name {
    font-size: .95rem;
  }

  .bg-num {
    font-size: .88rem;
    gap: .45rem;
  }

  .bg-num i {
    width: 22px;
    height: 22px;
    font-size: .62rem;
  }

  .bg-note {
    grid-template-columns: 1fr;
    gap: .6rem;
  }
}

/* =========================================================
   Buyer Guide directory — A-Z grouping with a colour per letter Each group sets --tone-*, and the cards inside inherit it. Tones are muted/desaturated so they sit inside the emerald+gold system.
   ========================================================= */

.bg-group[data-tone="0"] {
  --tone-ink: #0f5132;
  --tone-accent: #2f8f5b;
  --tone-bg: rgba(47, 143, 91, 0.08);
  --tone-line: rgba(47, 143, 91, 0.34);
}

.bg-group[data-tone="1"] {
  --tone-ink: #8a5a12;
  --tone-accent: #C9A14A;
  --tone-bg: rgba(201, 161, 74, 0.10);
  --tone-line: rgba(201, 161, 74, 0.38);
}

.bg-group[data-tone="2"] {
  --tone-ink: #155e63;
  --tone-accent: #2b9ba3;
  --tone-bg: rgba(43, 155, 163, 0.08);
  --tone-line: rgba(43, 155, 163, 0.32);
}

.bg-group[data-tone="3"] {
  --tone-ink: #8c3d2f;
  --tone-accent: #c76a52;
  --tone-bg: rgba(199, 106, 82, 0.08);
  --tone-line: rgba(199, 106, 82, 0.32);
}

.bg-group[data-tone="4"] {
  --tone-ink: #4b3f8f;
  --tone-accent: #7a6cc4;
  --tone-bg: rgba(122, 108, 196, 0.08);
  --tone-line: rgba(122, 108, 196, 0.30);
}

.bg-group[data-tone="5"] {
  --tone-ink: #1f6b45;
  --tone-accent: #4aa373;
  --tone-bg: rgba(74, 163, 115, 0.09);
  --tone-line: rgba(74, 163, 115, 0.32);
}

.bg-group[data-tone="6"] {
  --tone-ink: #8a4a6b;
  --tone-accent: #bd7398;
  --tone-bg: rgba(189, 115, 152, 0.08);
  --tone-line: rgba(189, 115, 152, 0.30);
}

.bg-group[data-tone="7"] {
  --tone-ink: #6b5a1f;
  --tone-accent: #a89341;
  --tone-bg: rgba(168, 147, 65, 0.10);
  --tone-line: rgba(168, 147, 65, 0.34);
}

.bg-group[data-tone="8"] {
  --tone-ink: #1d5a86;
  --tone-accent: #3f8dbf;
  --tone-bg: rgba(63, 141, 191, 0.08);
  --tone-line: rgba(63, 141, 191, 0.30);
}

.bg-group[data-tone="9"] {
  --tone-ink: #7a4420;
  --tone-accent: #b3743c;
  --tone-bg: rgba(179, 116, 60, 0.09);
  --tone-line: rgba(179, 116, 60, 0.32);
}

.bg-group[data-tone="10"] {
  --tone-ink: #3f6b22;
  --tone-accent: #6f9e42;
  --tone-bg: rgba(111, 158, 66, 0.09);
  --tone-line: rgba(111, 158, 66, 0.32);
}

.bg-group[data-tone="11"] {
  --tone-ink: #6d3070;
  --tone-accent: #96569b;
  --tone-bg: rgba(150, 86, 155, 0.08);
  --tone-line: rgba(150, 86, 155, 0.30);
}

.bg-groups {
  display: grid;
  gap: clamp(1.4rem, 1rem + 1.4vw, 2.2rem);
}

/* Letter heading with a rule running to the right */

.bg-letter {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 .85rem;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--tone-ink);
}

.bg-letter span {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--tone-bg);
  border: 1px solid var(--tone-line);
  color: var(--tone-ink);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}

.bg-letter::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--tone-line), transparent);
}

/* Cards pick up the group's tone */

.bg-group .bg-card {
  background: var(--tone-bg);
  border-color: var(--tone-line);
}

.bg-group .bg-name {
  color: var(--tone-ink);
}

.bg-group .bg-num i {
  background: var(--tone-bg);
  border-color: var(--tone-line);
  color: var(--tone-accent);
}

.bg-group .bg-card:hover,
.bg-group .bg-card:focus-visible {
  border-color: var(--tone-accent);
}

.bg-group .bg-card:hover .bg-num {
  color: var(--tone-ink);
}

.bg-group .bg-card:hover .bg-num i {
  background: var(--tone-accent);
  color: #fff;
}

/* A-Z jump bar */

.bg-az {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin-bottom: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);
}

.bg-jump {
  --tone-ink: #0d4937;
  --tone-accent: #C9A14A;
  --tone-bg: rgba(201, 161, 74, 0.08);
  --tone-line: rgba(201, 161, 74, 0.34);
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 36px;
  padding-inline: .5rem;
  border-radius: 9px;
  background: var(--tone-bg);
  border: 1px solid var(--tone-line);
  color: var(--tone-ink);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .88rem;
  transition: transform .25s var(--ease-out), background .25s ease, color .25s ease;
}

.bg-jump[data-tone="0"] {
  --tone-ink: #0f5132;
  --tone-accent: #2f8f5b;
  --tone-bg: rgba(47, 143, 91, 0.10);
  --tone-line: rgba(47, 143, 91, 0.34);
}

.bg-jump[data-tone="1"] {
  --tone-ink: #8a5a12;
  --tone-accent: #C9A14A;
  --tone-bg: rgba(201, 161, 74, 0.12);
  --tone-line: rgba(201, 161, 74, 0.38);
}

.bg-jump[data-tone="2"] {
  --tone-ink: #155e63;
  --tone-accent: #2b9ba3;
  --tone-bg: rgba(43, 155, 163, 0.10);
  --tone-line: rgba(43, 155, 163, 0.32);
}

.bg-jump[data-tone="3"] {
  --tone-ink: #8c3d2f;
  --tone-accent: #c76a52;
  --tone-bg: rgba(199, 106, 82, 0.10);
  --tone-line: rgba(199, 106, 82, 0.32);
}

.bg-jump[data-tone="4"] {
  --tone-ink: #4b3f8f;
  --tone-accent: #7a6cc4;
  --tone-bg: rgba(122, 108, 196, 0.10);
  --tone-line: rgba(122, 108, 196, 0.30);
}

.bg-jump[data-tone="5"] {
  --tone-ink: #1f6b45;
  --tone-accent: #4aa373;
  --tone-bg: rgba(74, 163, 115, 0.11);
  --tone-line: rgba(74, 163, 115, 0.32);
}

.bg-jump[data-tone="6"] {
  --tone-ink: #8a4a6b;
  --tone-accent: #bd7398;
  --tone-bg: rgba(189, 115, 152, 0.10);
  --tone-line: rgba(189, 115, 152, 0.30);
}

.bg-jump[data-tone="7"] {
  --tone-ink: #6b5a1f;
  --tone-accent: #a89341;
  --tone-bg: rgba(168, 147, 65, 0.12);
  --tone-line: rgba(168, 147, 65, 0.34);
}

.bg-jump[data-tone="8"] {
  --tone-ink: #1d5a86;
  --tone-accent: #3f8dbf;
  --tone-bg: rgba(63, 141, 191, 0.10);
  --tone-line: rgba(63, 141, 191, 0.30);
}

.bg-jump[data-tone="9"] {
  --tone-ink: #7a4420;
  --tone-accent: #b3743c;
  --tone-bg: rgba(179, 116, 60, 0.11);
  --tone-line: rgba(179, 116, 60, 0.32);
}

.bg-jump[data-tone="10"] {
  --tone-ink: #3f6b22;
  --tone-accent: #6f9e42;
  --tone-bg: rgba(111, 158, 66, 0.11);
  --tone-line: rgba(111, 158, 66, 0.32);
}

.bg-jump[data-tone="11"] {
  --tone-ink: #6d3070;
  --tone-accent: #96569b;
  --tone-bg: rgba(150, 86, 155, 0.10);
  --tone-line: rgba(150, 86, 155, 0.30);
}

.bg-jump:hover,
.bg-jump:focus-visible {
  transform: translateY(-2px);
  background: var(--tone-accent);
  color: #fff;
  border-color: var(--tone-accent);
}

/* Land below the sticky header when jumping to a letter */

.bg-group {
  --tone-ink: #0d4937;
  --tone-accent: #C9A14A;
  --tone-bg: rgba(201, 161, 74, 0.07);
  --tone-line: rgba(201, 161, 74, 0.34);
  scroll-margin-top: 110px;
}

@media (max-width: 560px) {
  .bg-letter {
    font-size: .92rem;
    gap: .6rem;
  }

  .bg-letter span {
    width: 32px;
    height: 32px;
    font-size: .95rem;
  }

  .bg-jump {
    min-width: 32px;
    height: 32px;
    font-size: .8rem;
  }

  .bg-az {
    gap: .35rem;
  }
}

/* Size hint on large map downloads */

.map-size {
  display: inline-block;
  margin-left: .55rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  font-style: normal;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--gold-light);
  background: rgba(201, 161, 74, 0.14);
  border: 1px solid var(--line-on-dark);
}

.map-size.is-big {
  color: #ffd9a8;
  background: rgba(199, 106, 82, 0.20);
  border-color: rgba(199, 106, 82, 0.45);
}

@media (max-width: 560px) {
  .map-size {
    font-size: .62rem;
    margin-left: .4rem;
    padding: .08rem .38rem;
  }
}

/* =========================================================
   Map preview grid (inside the Maps modal)
   ========================================================= */

.gcsez-dialog:has(.map-grid) {
  width: min(860px, calc(100vw - 2rem));
}

.map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .8rem;
  max-height: 62vh;
  overflow-y: auto;
  padding-right: .35rem;
}

.map-card {
  margin: 0;
}

.map-thumb {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: zoom-in;
  background: #fff;
  aspect-ratio: 3 / 4;
  transition: border-color .25s ease, transform .25s var(--ease-out);
}

.map-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.map-thumb:hover,
.map-thumb:focus-visible {
  border-color: var(--gold);
  transform: translateY(-3px);
}

.map-zoom {
  position: absolute;
  right: .45rem;
  bottom: .45rem;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: .78rem;
  background: rgba(8, 54, 42, .82);
  color: var(--gold-light);
  border: 1px solid var(--line-on-dark);
  opacity: 0;
  transition: opacity .25s ease;
}

.map-thumb:hover .map-zoom,
.map-thumb:focus-visible .map-zoom {
  opacity: 1;
}

.map-card figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .45rem;
}

.map-name {
  font-size: .78rem;
  font-weight: 600;
  color: var(--cream);
  line-height: 1.3;
}

.map-dl {
  flex: none;
  font-size: .72rem;
  font-weight: 700;
  color: var(--gold-light);
  white-space: nowrap;
  padding: .2rem .45rem;
  border-radius: 6px;
  border: 1px solid var(--line-on-dark);
  transition: background .25s ease, color .25s ease;
}

.map-dl:hover {
  background: var(--gold);
  color: var(--emerald-deep);
}

/* =========================================================
   Fullscreen map lightbox
   ========================================================= */

.map-lb {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  place-items: center;
  background: rgba(4, 26, 20, .94);
  padding: clamp(.8rem, 2vw, 2rem);
  overscroll-behavior: contain;
}

.map-lb.is-open {
  display: grid;
}

.map-lb-inner {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
  text-align: center;
}

.map-lb-inner img {
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: var(--shadow-lg);
}

.map-lb-inner figcaption {
  margin-top: .7rem;
  color: var(--cream);
  font-size: .9rem;
  font-weight: 600;
}

.map-lb-x {
  position: absolute;
  top: .8rem;
  right: .8rem;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(8, 54, 42, .9);
  color: var(--cream);
  border: 1px solid var(--line-on-dark);
  transition: background .25s ease, color .25s ease;
}

.map-lb-x:hover {
  background: var(--gold);
  color: var(--emerald-deep);
}

@media (max-width: 560px) {
  .map-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: .6rem;
    max-height: 58vh;
  }

  .map-name {
    font-size: .72rem;
  }
}

/* =========================================================
   Standalone Maps section (homepage + Green City SEZ page)
   ========================================================= */

.maps-section {
  scroll-margin-top: 90px;
}

/* Wider grid when the maps are on the page (not inside the narrow modal) */

.map-grid--wide {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  max-height: none;
  overflow: visible;
  padding-right: 0;
  gap: clamp(.8rem, .6rem + .7vw, 1.3rem);
}

.map-grid--wide .map-name {
  font-size: .86rem;
}

.map-grid--wide .map-dl {
  font-size: .74rem;
}

.maps-note {
  margin-top: clamp(1.2rem, 1rem + .8vw, 1.8rem);
  text-align: center;
  font-size: .86rem;
  color: var(--on-emerald-soft);
  max-width: 66ch;
  margin-inline: auto;
}

@media (max-width: 560px) {
  .map-grid--wide {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  .map-grid--wide .map-name {
    font-size: .76rem;
  }
}

/* =========================================================
   Loader notice (below the logo)
   ========================================================= */

@keyframes plNoteIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader .pl-note {
    animation: none;
  }
}

/* =========================================================
   Multi-paragraph disclaimer row
   ========================================================= */

.dm-txt .dm-sub {
  margin-top: .5rem;
  font-size: .93em;
  opacity: .92;
}

/* =========================================================
   Maps & Location page
   ========================================================= */

.loc-map {
  position: relative;
  min-height: 340px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  background: #eef2ee;
}

.loc-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.loc-facts h3 {
  font-size: var(--step-1);
  margin-bottom: .3rem;
}

.loc-note {
  margin-top: 1rem;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

@media (max-width: 820px) {
  .loc-wrap {
    grid-template-columns: 1fr;
  }

  .loc-map {
    min-height: 260px;
    aspect-ratio: 16 / 11;
  }
}

/* Parenthetical identity line inside a disclaimer row */

.dm-txt .dm-sub-line {
  display: inline-block;
  margin-top: .2rem;
  font-weight: 500;
  font-size: .95em;
  opacity: .9;
}

/* Loader: parenthetical identity line under the brand name */

/* Hero disclaimer — Green City SEZ identity block */

.disc-gcs-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.02rem, .95rem + .35vw, 1.22rem);
  color: var(--gold-light);
  line-height: 1.25;
}

.disc-gcs-sub {
  margin: .25rem 0 0;
  font-size: clamp(.82rem, .78rem + .2vw, .92rem);
  line-height: 1.55;
  color: var(--on-emerald-soft);
}

.disc-gcs-body {
  margin: .6rem 0 0;
  font-size: clamp(.84rem, .8rem + .22vw, .95rem);
  line-height: 1.6;
  color: var(--cream);
  opacity: .93;
}

.disc-gcs-body strong {
  color: var(--gold-light);
}

@media (max-width: 640px) {
  .disc-gcs {
    padding: .85rem 1rem;
    margin-top: 1.1rem;
  }
}

/* Bylaws modal — empty state until PDFs are supplied */

.bylaws-empty {
  margin: 0;
  padding: 1.4rem 1.2rem;
  text-align: center;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--on-emerald-soft);
  border: 1px dashed var(--line-on-dark);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.03);
}

/* Quick-links: tabs with no destination yet */

.gcsez-links a.is-soon {
  opacity: .55;
  cursor: not-allowed;
}

.gcsez-links a.is-soon:hover {
  border-color: var(--line-on-dark);
  transform: none;
}

.soon-tag {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .45rem;
  border-radius: 5px !important;
  font-style: normal;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--gold-light);
  background: rgba(201, 161, 74, 0.14);
  border: 1px solid var(--line-on-dark);
}

/* Multi-page map preview: pages stack vertically in the lightbox */

.map-lb-inner .map-lb-extra {
  display: block;
  max-width: 100%;
  height: auto;
  margin: .9rem auto 0;
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: var(--shadow-lg);
}

/* Badge on the thumbnail telling the user there is more than one page */

.map-pages {
  position: absolute;
  left: .45rem;
  bottom: .45rem;
  padding: .16rem .5rem;
  border-radius: 999px;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: rgba(8, 54, 42, .86);
  border: 1px solid var(--line-on-dark);
  pointer-events: none;
}

/* Reel card with no video yet */

.vembed.is-soon {
  cursor: default;
}

.vembed.is-soon .vembed-poster {
  filter: grayscale(.35) brightness(.72);
}

.vembed.is-soon .vembed-play {
  display: none;
}

.vembed-soon {
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .7rem;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold-light);
  background: rgba(8, 54, 42, .86);
  border: 1px solid var(--line-on-dark);
  white-space: nowrap;
  pointer-events: none;
}

/* Wide popup for long-form content (How to Buy) */

.gcsez-dialog--wide {
  width: min(760px, calc(100vw - 2rem));
  text-align: left;
}

.gcsez-body {
  margin-top: 1.2rem;
}

.gcsez-body .lede,
.gcsez-body p {
  color: var(--on-emerald-soft);
  font-size: .95rem;
  line-height: 1.7;
  margin-bottom: .8rem;
  max-width: none;
}

.gcsez-body .lede {
  font-size: 1rem;
  color: var(--cream);
}

.gcsez-body b,
.gcsez-body strong {
  color: var(--cream);
}

.gcsez-body .tick-list {
  display: grid;
  gap: .75rem;
  margin: 1rem 0;
}

.gcsez-body .tick-list li {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  color: var(--on-emerald-soft);
  font-size: .94rem;
  line-height: 1.6;
}

.gcsez-body .tick-list .tick {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(201, 161, 74, .16);
  color: var(--gold-light);
}

.gcsez-body .notice-box {
  margin-top: 1.4rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r-sm);
  background: rgba(201, 161, 74, .10);
  border: 1px solid var(--line-on-dark);
}

.gcsez-body .notice-box p {
  margin: 0;
  color: var(--cream);
  font-size: .92rem;
}

.gcsez-body .notice-box strong {
  color: var(--gold-light);
}

/* =========================================================
   Brand lion (left of the logo)
   ========================================================= */

/* .brand is set to column further up; the header brand must sit in a row so the lion is BESIDE the logo, not stacked above it. */

.brand-lion {
  height: 74px;
  width: auto;
  display: block;
  flex: none;
  margin-left: -14px;
  margin-right: .1rem;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35));
}

/* Taller header so the full lion (incl. its pedestal) reads properly */

.site-header .header-inner {
  min-height: 75px;
}

@media (max-width: 860px) {
  .brand-lion {
    height: 58px;
  }

  .site-header .header-inner {
    min-height: 80px;
  }
}

@media (max-width: 520px) {
  .brand-lion {
    height: 48px;
  }

  .site-header .header-inner {
    min-height: 50px;
  }

  .brand {
    gap: .45rem;
  }
}

/* "Read Buyer Guide" CTA sits directly above the directory - keep it tight */

.htb-cta {
  padding-block: clamp(1.4rem, 1rem + 1.4vw, 2.2rem) 0;
}

.htb-cta .btn {
  margin-top: 1.1rem !important;
}

/* Target the directory directly: a comment node sits between the two sections, so the sibling selector alone is unreliable. */

#directory {
  padding-top: clamp(.9rem, .7rem + .7vw, 1.3rem);
  padding-bottom: clamp(1rem, .8rem + .8vw, 1.5rem);
}

#directory .section-head {
  margin-bottom: clamp(.7rem, .6rem + .6vw, 1.1rem);
}

#directory .section-head .eyebrow {
  margin-bottom: .35rem;
}

#directory .section-head h2 {
  margin-bottom: .45rem;
}

#directory .section-head .lede {
  margin-bottom: 0;
}

/* Loader: lion beside the logo */

.page-loader .pl-brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(2rem, 1.2rem + 4vw, 4.5rem);
}

.page-loader .pl-lion {
  height: clamp(78px, 14vw, 116px);
  width: auto;
  display: block;
  flex: none;
  margin-left: -30px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .45));
}

/* News card icon replaced by the brand lion */

.news-ico--lion {
  height: 84px !important;
  width: auto !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.news-ico--lion img {
  height: 100%;
  width: auto;
  max-height: 84px;
  display: block;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35));
}

@media (max-width: 860px) {
  .brand-lion {
    margin-left: -10px;
  }
}

@media (max-width: 520px) {
  .brand-lion {
    margin-left: -8px;
  }
}

/* Tablet: 5 columns are too tight - drop to 4 and let the map span. */

/* Phones: two columns, brand and the map each on their own full-width row. */

/* Mobile header: the lion widened the brand, pushing it over the action buttons. Let the brand shrink and keep the buttons from being overlapped. */

@media (max-width: 860px) {
  .site-header .header-inner {
    gap: .6rem;
  }

  .site-header .brand {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
  }

  .site-header .brand .brand-img {
    max-width: 100%;
  }

  .header-cta {
    flex: none;
    margin-left: auto;
  }
}

@media (max-width: 520px) {
  .brand-lion {
    height: 42px;
  }

  .site-header .brand-img {
    height: 40px !important;
  }

  .site-header .header-inner {
    gap: .4rem;
  }

  .header-cta {
    gap: .35rem;
  }

  .header-cta .search-btn,
  .header-cta .head-social {
    width: 36px;
    height: 36px;
  }
}

/* Maps: one button per map (no preview images) */

.maps-btns {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .7rem;
}

.map-btn {
  display: flex;
  align-items: center;
  gap: .85rem;
  width: 100%;
  padding: .95rem 1.15rem;
  text-align: left;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line-on-dark);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.35;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, transform .25s var(--ease-out);
}

.map-btn i {
  color: var(--gold-light);
  flex: none;
  font-size: 1rem;
}

.map-btn:hover,
.map-btn:focus-visible {
  background: rgba(201, 161, 74, 0.12);
  border-color: var(--gold);
  transform: translateY(-2px);
}

.map-btn--group {
  border-style: dashed;
}

.maps-btns .map-size {
  margin-left: .4rem;
}

@media (max-width: 520px) {
  .maps-btns {
    grid-template-columns: 1fr;
  }

  .map-btn {
    padding: .85rem 1rem;
    font-size: .9rem;
  }
}

/* Self-hosted jingle clips fill the card like the iframes do */

.vembed.is-playing video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  object-fit: cover;
}

/* Videos / Reels / Jingles popups opened from a category menu */

.gcsez-dialog--media {
  width: min(1000px, calc(100vw - 2rem));
}

.media-grid .vembed-poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.media-grid .vembed-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.6rem .7rem .6rem;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .85), transparent);
}

.media-empty {
  grid-column: 1 / -1;
  padding: 2.4rem 1rem;
  text-align: center;
  color: var(--on-emerald-soft);
  font-size: .95rem;
}

@media (max-width: 560px) {
  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: .6rem;
  }

  .media-grid .vembed-cap {
    font-size: .7rem;
  }
}

/* Videos / Reels / Jingles / Collab - four buttons on one row in a menu popup */

.gcsez-media-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .3rem;
  margin: .55rem 0;
  width: 100%;
}

.gcsez-media-btn span {
  display: block;
  white-space: nowrap;
}

.gcsez-media-btn:hover,
.gcsez-media-btn:focus-visible {
  transform: translateY(-2px);
}

/* Solid, clearly different backgrounds so the four read as distinct choices. */

.gcsez-media-btn:nth-child(1) i {
  color: #b9f6d7;
}

.gcsez-media-btn:nth-child(1):hover {
  background: #26996a;
  border-color: #6ee7b7;
}

.gcsez-media-btn:nth-child(2) i {
  color: #ffeab8;
}

.gcsez-media-btn:nth-child(2):hover {
  background: #b98c28;
  border-color: var(--gold-light);
}

.gcsez-media-btn:nth-child(3) i {
  color: #e9d2f7;
}

.gcsez-media-btn:nth-child(3):hover {
  background: #824ea3;
  border-color: #bd93d8;
}

.gcsez-media-btn:nth-child(4) i {
  color: #c5e6f7;
}

.gcsez-media-btn:nth-child(4):hover {
  background: #24759f;
  border-color: #6bb6de;
}

.gcsez-media-btn:nth-child(5) {
  background: #8a3b52;
  border-color: #c2687f;
}

.gcsez-media-btn:nth-child(5) i {
  color: #f7cdd8;
}

.gcsez-media-btn:nth-child(5):hover {
  background: #a8485f;
  border-color: #de869c;
}

@media (max-width: 420px) {
  .gcsez-media-row {
    gap: .25rem;
  }

  .gcsez-media-btn {
    padding: .5rem .06rem;
  }

  .gcsez-media-btn i {
    font-size: .78rem;
  }
}

@media (max-width: 420px) {
  .gcsez-media-row {
    gap: .3rem;
  }

  .gcsez-media-btn {
    font-size: .52rem;
    padding: .45rem .1rem;
    letter-spacing: 0;
  }

  .gcsez-media-btn i {
    font-size: .72rem;
  }
}

/* Hero disclaimer: two buttons side by side */

.disc-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  margin-top: 1.9rem;
}

.disc-btn-row .disc-btn {
  margin-top: 0;
  text-decoration: none;
  margin-left: 10px;
}

.disc-btn-row a{

    color: #122d23 !important;
    background-color: #E8B4A8;
}

@media (max-width: 520px) {
  .disc-btn-row {
    gap: .6rem;
  }

  .disc-btn-row .disc-btn {
    justify-content: center;
    margin-left: 0px;
  }
}

/* =========================================================
   Leather texture on every emerald-green surface. One shared image, tinted by an emerald overlay so the existing palette is unchanged - only the surface gains grain.
   ========================================================= */

.site-header,
.section-dark,
.hero-curved,
.page-hero,
.cta-band,
.page-loader,
.gcsez-dialog,
.disc-modal-dialog,
.maps-section {
  background-image: linear-gradient(rgba(18, 74, 58, 0.10), rgba(18, 74, 58, 0.10)),
    url("../assets/leather-tile1bce.webp?v=6");
  background-size: auto, 1200px auto;
  background-repeat: repeat, repeat;
  background-position: center, center;
}

/* Sections that already carry a photo are simply not in the texture list above - they must NOT be reset here, or their photo disappears. */

/* The dialog keeps its own top-to-bottom sheen above the grain. */

/* Texture on the remaining emerald surfaces (cards, strips, bars, wraps). Same overlay approach so the palette is untouched. */

.hero,
.trust-strip,
.trust-card,
.card-em,
.map-wrap,
.mobile-bar,
.video-thumb,
.gcsez-dialog--media,
.gcsez-dialog--wide,
.disc-modal .disc-modal-dialog,
.spot-panel .vcarousel,
.lead-card,
.section-dark .card {
  background-image: linear-gradient(rgba(8, 54, 42, 0.48), rgba(8, 54, 42, 0.48)),
    url("../assets/leather-tile1bce.webp?v=6");
  background-size: auto, 1200px auto;
  background-repeat: repeat, repeat;
  background-position: center, center;
}

/* Keep the emerald (lighter) tone on the trust strip rather than deep green. */

.trust-strip {
  border-block: 1px solid var(--emerald-700);
  background: var(--emerald);
  border-block-color: rgba(201, 161, 74, 0.22);
  background-image: linear-gradient(rgba(18, 92, 70, 0.45), rgba(18, 92, 70, 0.45)),
    url("../assets/leather-tile1bce.webp?v=6");
}

/* Photo-backed elements are excluded by omission, not by resetting them. */

/* Nav dropdown panel - texture like the rest of the green chrome. */

.nav-sub {
  position: absolute;
  top: 100%;
  left: 0;

  min-width: 250px;

  background-color: var(--emerald-deep);

  border: 0;

  display: flex;
  flex-direction: column;

  padding: 10px 15px;

  box-shadow:
    0 24px 46px -22px rgba(0, 0, 0, .7);

  opacity: 0;
  visibility: hidden;

  transform: translateY(8px);

  transition:
    opacity .25s ease,
    transform .25s ease,
    visibility 0s linear .25s;

  z-index: 80;

  background-image:
    linear-gradient(rgba(18, 74, 58, 0.05),
      rgba(18, 74, 58, 0.05)),
    url("../assets/img/mega-menu-bg.jpg");

  /* IMPORTANT */
  background-size:
    100% 100%,
    100% 100%;

  background-position:
    center,
    center;

  background-repeat:
    no-repeat,
    no-repeat;
}

/* =========================================================
   Plot area unit converter (How to Buy page)
   ========================================================= */

.uconv-field>span {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.uconv-field input,
.uconv-field select {
  width: 100%;
  padding: .8rem .9rem;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--line-on-dark);
  background: rgba(255, 255, 255, 0.06);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
}

.uconv-field select option {
  background: #0b3327;
  color: var(--cream);
}

.uconv-field input:focus,
.uconv-field select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.uconv-cell {
  padding: .95rem 1rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-on-dark);
}

.uconv-cell b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .9rem + .7vw, 1.45rem);
  color: var(--gold-light);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.uconv-cell span {
  display: block;
  margin-top: .2rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--on-emerald-soft);
}

.uconv-cell.is-source {
  border-color: var(--gold);
  background: rgba(201, 161, 74, 0.16);
}

@media (max-width: 700px) {
  .uconv-row {
    grid-template-columns: 1fr;
  }

  .uconv-reset {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   LEATHER ON EVERY GREEN SURFACE Any element whose green comes from a gradient (cards, strips, dialogs, steps, banners) gets the leather layered underneath that gradient, so the grain reads through while the original colour is preserved.
   ========================================================= */

.scroll-stack-card,
.trust-card,
.card-em,
.steps-light .step,
.ct-final,
.terms-hero,
.pmt-dialog,
.vembed-soon,
.vlightbox-soon,
.map-wrap,
.feature-banner,
.disc-gcs,
.gcsez-dialog--media,
.gcsez-dialog--wide,
.uconv,
.media-grid .vembed,
.section-dark .card,
.gcsez-links>a {
  background-image: linear-gradient(rgba(18, 74, 58, 0.12), rgba(18, 74, 58, 0.12)),
    url("../assets/img/mega-menu-bg.jpg") !important;
  background-size: auto, 1200px auto !important;
  background-repeat: repeat, repeat !important;
  background-position: center, center !important;
}

/* Keep each coloured media button's own tint - texture blends under it. */

.gcsez-media-btn:nth-child(1) {
  background: #1f7a55;
  border-color: #35b37e;
  background-image: linear-gradient(rgba(31, 122, 85, 0.72), rgba(31, 122, 85, 0.72)), url("../assets/leather-tile1bce.webp?v=6") !important;
  background-size: auto, 1200px auto !important;
}

.gcsez-media-btn:nth-child(2) {
  background: #9a7420;
  border-color: var(--gold);
  background-image: linear-gradient(rgba(154, 116, 32, 0.75), rgba(154, 116, 32, 0.75)), url("../assets/leather-tile1bce.webp?v=6") !important;
  background-size: auto, 1200px auto !important;
}

.gcsez-media-btn:nth-child(3) {
  background: #6b3f86;
  border-color: #a26fc4;
  background-image: linear-gradient(rgba(107, 63, 134, 0.75), rgba(107, 63, 134, 0.75)), url("../assets/leather-tile1bce.webp?v=6") !important;
  background-size: auto, 1200px auto !important;
}

.gcsez-media-btn:nth-child(4) {
  background: #1d5f86;
  border-color: #3f8dbf;
  background-image: linear-gradient(rgba(29, 95, 134, 0.75), rgba(29, 95, 134, 0.75)), url("../assets/leather-tile1bce.webp?v=6") !important;
  background-size: auto, 1200px auto !important;
}

/* Elements that must keep a real photo are never in the lists above. */

.vembed:not(.media-grid .vembed) .vembed-poster,
.hero-slide,
.hero-media img {
  background-image: none !important;
}

/* Video cards: show the whole YouTube thumbnail instead of cropping it. YouTube posters are 16:9, so a 9:16 card cut off both sides. */

.media-grid {
  display: grid;
  gap: .9rem;
  margin-top: 1.2rem;
  max-height: 66vh;
  overflow-y: auto;
  padding-right: .3rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.media-grid .vembed {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  background: #000;
  border: 1px solid var(--line-on-dark);
  aspect-ratio: 16 / 9;
}

.media-grid .vembed .vembed-poster {
  object-fit: cover;
  object-position: center;
}

/* Portrait clips (jingles, reels) keep their tall shape. */

.media-grid .vembed[data-mp4*="jingle"],
.media-grid .vembed[data-mp4*="reel"] {
  aspect-ratio: 9 / 16;
}

@media (max-width: 560px) {
  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  }
}

/* sddefault posters are 4:3 with black bars top/bottom; scaling them up crops those bars away so every card shows a clean 16:9 frame. */

.media-grid .vembed img[src*="sddefault"] {
  transform: scale(1.34);
  transform-origin: center;
}

/* Mobile: swipe video cards sideways instead of a long vertical scroll. */

@media (max-width: 700px) {
  .media-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    gap: .7rem;
    padding-bottom: .6rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .media-grid .vembed {
    flex: 0 0 78%;
    max-width: 78%;
    scroll-snap-align: start;
  }

  /* Portrait clips are narrower so more of the next one peeks in. */

  .media-grid .vembed[data-mp4] {
    flex-basis: 55%;
    max-width: 55%;
  }

  .media-grid .media-empty {
    flex: 0 0 100%;
  }

  .media-grid::-webkit-scrollbar {
    height: 6px;
  }

  .media-grid::-webkit-scrollbar-thumb {
    background: rgba(201, 161, 74, .5);
    border-radius: 999px;
  }

  /* Hint that there is more to the right. */

  .gcsez-dialog--media .media-grid {
    scroll-padding-inline: 1rem;
  }

  /* Featured In stays a real 1-column grid on mobile, not the swipe-carousel flex layout used by the video-modal galleries above. */

  .media-grid.featured-in-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
    max-height: none !important;
  }

  .media-grid.featured-in-grid .vembed {
    flex: none !important;
    max-width: none !important;
  }
}

/* =========================================================
   Plot & shop size tables (How to Buy)
   ========================================================= */

.psize-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(.9rem, .6rem + 1vw, 1.4rem);
  align-items: stretch;
}

.psize-card h3 i {
  color: var(--gold-light);
  font-size: .95em;
}

/* Last column carries the longest text - let it breathe instead of clipping. */

.psize-table td:first-child,
.psize-table th:first-child {
  width: 1%;
}

.psize-table tbody tr:last-child td {
  border-bottom: 0;
}

/* No row hover: the highlight lightened the row and its `color` override blanked the rose-gold Sq. Mtr. cell (that text is a clipped gradient, so setting a colour makes it disappear). */

.psize-table td b {
  color: var(--cream);
  font-weight: 700;
}

@media (max-width: 480px) {
  .psize-table {
    font-size: .8rem;
  }

  .psize-table th,
  .psize-table td {
    padding: .45rem .4rem;
  }
}

/* Size tables: show a soft fade on the right so it is obvious the table scrolls sideways when the last column does not fit. */

.psize-scroll::-webkit-scrollbar {
  height: 6px;
}

.psize-scroll::-webkit-scrollbar-thumb {
  background: rgba(201, 161, 74, .5);
  border-radius: 999px;
}

.psize-card.is-scrollable::after {
  opacity: 1;
}

/* =========================================================
   Route map + drive video (Location page)
   ========================================================= */

.route-wrap {
  display: grid;
  grid-template-columns: 1.55fr .8fr;
  gap: clamp(1.2rem, .9rem + 1.4vw, 2.2rem);
  align-items: start;
}

.route-map {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  background: var(--surface);
}

.route-map a {
  display: block;
  line-height: 0;
}

/* the infographic must never be cropped - show it whole */

.route-map img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  transition: transform .4s var(--ease-out);
}

.route-map a:hover img {
  transform: scale(1.012);
}

.route-map figcaption {
  line-height: 1.45;
  padding: .7rem clamp(.8rem, .6rem + .6vw, 1.1rem);
  font-size: .82rem;
  color: var(--ink-soft);
  background: var(--surface);
  border-top: 1px solid var(--line);
}

.route-video h3 {
  font-size: var(--step-1);
  margin-bottom: .3rem;
}

.route-video-note {
  font-size: .86rem;
  color: var(--ink-soft);
  margin-bottom: .9rem;
  line-height: 1.5;
}

/* Portrait (9:16) video card - poster shown in full, never cropped */

.route-video .vembed-portrait {
  aspect-ratio: 9 / 16;
  max-width: 300px;
  margin-inline: auto;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #0b2a20;
}

.route-video .vembed-portrait .vembed-poster {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.route-video .vembed-portrait video,
.route-video .vembed-portrait iframe {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: #0b2a20;
}

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

  .route-video .vembed-portrait {
    max-width: 280px;
  }
}

/* =========================================================
   PREMIUM LEATHER PANEL - stitched edges + brass corner screws. The source art is a complete framed panel, so it is applied with border-image: the corner screws and stitching always land on the element's real corners and never repeat through the middle. Large scrolling surfaces keep the seamless centre tile instead.
   ========================================================= */

.lthr-panel,
.gcsez-dialog,
.disc-modal-dialog,
.pmt-dialog,
.psize-card,
.uconv,
.route-video,
.loc-facts,
.cta-band,
.ct-final {
  border-style: solid;
  border-width: 26px;
  border-image-source: none;
  border-radius: 0;
  background-clip: padding-box;
}

/* The frame supplies the surface, so drop any competing background on these panels and let the leather art show through. */

.gcsez-dialog,
.disc-modal-dialog,
.pmt-dialog,
.psize-card,
.uconv,
.route-video,
.loc-facts,
.cta-band,
.ct-final {
  background-image: none;
  background-color: transparent;
}

/* Panels need a solid interior behind the content - the frame is only the edge */

.psize-card,
.uconv,
.route-video,
.loc-facts {}

/* The 22px frame sits INSIDE the box, so the padding that used to create breathing room now doubles up and squeezes the content. Trim it back so tables and text keep their original usable width. */

.route-video {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: clamp(.7rem, .5rem + .6vw, 1rem);
}

.loc-facts {
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: clamp(.8rem, .6rem + .7vw, 1.2rem);
}

@media (max-width: 700px) {

  .lthr-panel,
  .gcsez-dialog,
  .disc-modal-dialog,
  .pmt-dialog,
  .psize-card,
  .uconv,
  .route-video,
  .loc-facts,
  .cta-band,
  .ct-final {
    border-width: 18px;
  }
}

/* =========================================================
   STITCHED LEATHER ON EVERY GREEN SURFACE (client requirement). Same border-image panel as above, applied to all remaining green cards, bands and containers so edges + screws show throughout.
   ========================================================= */

.scroll-stack-card,
.news-box,
.trust-card,
.card-em,
.section-dark .card,
.steps-light .step,
.gcsez-links>a,
.map-wrap,
.feature-banner,
.disc-gcs,
.terms-hero,
.gcsez-dialog--media,
.gcsez-dialog--wide,
.media-grid .vembed,
.tip,
.prize-card,
.bg-note {
  border-style: solid !important;
  /* border-width: 22px !important; */
  border-image-source: none;
  border-radius: 0 !important;
  background-clip: padding-box;
}

/* The frame art supplies the surface - remove competing fills so the leather, stitching and screws are what you actually see. */

.scroll-stack-card,
.news-box,
.trust-card,
.card-em,
.section-dark .card,
.steps-light .step,
.gcsez-links>a,
.map-wrap,
.feature-banner,
.disc-gcs,
.terms-hero,
.gcsez-dialog--media,
.gcsez-dialog--wide,
.tip,
.prize-card {
  background-image: none !important;
  background-color: transparent !important;
}

/* Keep the interior dark enough for cream text to stay readable */

.scroll-stack-card,
.news-box,
.trust-card,
.card-em,
.section-dark .card,
.steps-light .step,
.gcsez-links>a,
.feature-banner,
.disc-gcs,
.terms-hero,
.tip,
.prize-card {}

/* The frame sits inside the box, so pull back padding that would otherwise double up and squeeze the content. */

.trust-card {
  text-align: center;
  background: linear-gradient(162deg, #0e4937, #08362a);
  border: 1px solid var(--line-on-dark);
  border-radius: var(--r-md);
  transition: transform .4s var(--ease-out), border-color .3s ease;
  padding: .7rem .6rem;
}

.card-em {
  background: linear-gradient(162deg, #0e4937 0%, #08362a 100%);
  border-color: var(--line-gold);
  color: var(--on-emerald);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
  padding: clamp(.8rem, .6rem + .7vw, 1.2rem);
}

.tip {
  position: relative;
  border: 1.5px solid rgba(201, 161, 74, 0.6);
  background: rgba(255, 255, 255, .03);
  text-align: center;
  border-radius: 12px !important;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  padding: clamp(.7rem, .5rem + .6vw, 1rem);
}

.steps-light .step {
  background: linear-gradient(160deg, #0d4937, #08362a);
  border-color: var(--gold);
  padding: clamp(.8rem, .6rem + .7vw, 1.2rem);
}

@media (max-width: 700px) {

  .scroll-stack-card,
  .news-box,
  .trust-card,
  .card-em,
  .section-dark .card,
  .steps-light .step,
  .gcsez-links>a,
  .map-wrap,
  .feature-banner,
  .disc-gcs,
  .terms-hero,
  .gcsez-dialog--media,
  .gcsez-dialog--wide,
  .media-grid .vembed,
  .tip,
  .prize-card,
  .bg-note {
    border-width: 16px !important;
  }
}

/* The leather frame already draws the card edge - suppress the old 1px outline that otherwise reads as a doubled border inside the stitching. */

.scroll-stack-card,
.news-box,
.trust-card,
.card-em,
.section-dark .card,
.steps-light .step,
.gcsez-links>a,
.feature-banner,
.disc-gcs,
.terms-hero,
.tip,
.prize-card,
.psize-card,
.uconv,
.route-video,
.loc-facts {
  outline: none !important;
}

/* =========================================================
   Panels that used to be LIGHT surfaces now carry dark leather, so their dark ink text would disappear. Repaint their contents for the leather.
   ========================================================= */

.loc-facts,
.loc-facts h3,
.loc-facts p,
.loc-facts li,
.route-video,
.route-video h3,
.bg-note,
.bg-note p,
.prize-card,
.prize-card li,
.prize-card div,
.prize-card h3,
.prize-card p {
  color: var(--cream) !important;
}

.loc-facts strong,
.bg-note strong,
.prize-card strong,
.prize-card a {
  color: var(--gold-light) !important;
}

.loc-facts .loc-note,
.route-video .route-video-note,
.bg-note p {
  color: var(--on-emerald-soft) !important;
}

.loc-facts .gc-list li::marker,
.bg-note i {
  color: var(--gold) !important;
}

/* list bullets/squares inside these panels */

.loc-facts .gc-list li::before,
.prize-card li::before {
  background: var(--gold) !important;
}

/* =========================================================
   Guarantee an opaque leather interior on every framed panel. border-image `fill` paints the centre, but any rule that later sets box-shadow (e.g. .news-box) wipes out an inset-shadow fill, and a transparent panel on a cream page shows cream behind the text. A real background-image cannot be clobbered the same way.
   ========================================================= */

.scroll-stack-card,
.news-box,
.trust-card,
.card-em,
.section-dark .card,
.steps-light .step,
.gcsez-links>a,
.feature-banner,
.disc-gcs,
.terms-hero,
.tip,
.prize-card,
.psize-card,
.uconv,
.route-video,
.loc-facts,
.bg-note,
.gcsez-dialog,
.disc-modal-dialog,
.pmt-dialog,
.cta-band,
.ct-final {
  background-color: #0b2a20 !important;
  background-image: linear-gradient(rgba(10, 42, 32, 0.55), rgba(10, 42, 32, 0.55)),
    url("../assets/leather-tile1bce.webp?v=6") !important;
  background-size: auto, 900px auto !important;
  background-repeat: repeat, repeat !important;
  background-clip: padding-box !important;
}

.site-header,
.page-hero,
.hero-curved,
.section-dark,
.cta-band,
.maps-section,
.ct-final {
  border-left: 0 !important;
  border-right: 0 !important;
  border-top-style: solid !important;
  border-bottom-style: solid !important;
  border-top-width: 16px !important;
  border-bottom-width: 16px !important;
  border-image-source: none;
  border-radius: 0 !important;
}

/* The sticky header should not gain height from its new edges */

@media (max-width: 700px) {

  .page-hero,
  .hero-curved,
  .section-dark,
  .cta-band,
  .maps-section,
  .ct-final {
    border-top-width: 11px !important;
    border-bottom-width: 11px !important;
  }

  .site-header {
    border-bottom-width: 9px !important;
  }
}

/* The hero sits directly under the header, so its top stitch would double up with the header's bottom stitch. Keep one seam between them. */

.page-hero,
.hero-curved {
  border-top-width: 0 !important;
}

@media (max-width: 700px) {

  .page-hero,
  .hero-curved {}
}

/* =========================================================
   Disclaimer modal: the stitched bottom edge reads as "content ends here", so users stop scrolling early. Hide the bottom stitch while there is more to read, and show a soft fade + hint instead. The stitching returns once the reader reaches the end.
   ========================================================= */

/* While more content remains: no bottom stitch, fade the last few lines */

.disc-modal-dialog.has-more {
  border-bottom-width: 0 !important;
}

.disc-modal-dialog.has-more::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 108px;
  pointer-events: none;
  z-index: 2;
  /* background: linear-gradient(to bottom,
      rgba(8, 54, 42, 0) 0%,
      rgba(8, 54, 42, 0.55) 34%,
      rgba(8, 54, 42, 0.93) 66%,
      rgba(8, 54, 42, 0.99) 100%); */
}

/* Reserve room under the last line so the cue never sits on top of text. The padding stays applied at the bottom too, so nothing shifts when the cue disappears - only the fade and stitching change. */

/* "Scroll for more" cue, centred over the fade */

.disc-more-cue {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  z-index: 3;
  display: none;
  align-items: center;
  gap: .45rem;
  padding: .34rem .8rem;
  border-radius: 999px !important;
  background: rgba(8, 54, 42, 0.92);
  border: 1px solid rgba(201, 161, 74, 0.5);
  color: var(--gold-light);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  animation: discCue 1.6s ease-in-out infinite;
}

.disc-modal-dialog.has-more .disc-more-cue {
  display: inline-flex;
}

@keyframes discCue {

  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }

  50% {
    transform: translateX(-50%) translateY(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .disc-more-cue {
    animation: none;
  }
}

@media (max-width: 700px) {
  .disc-modal-dialog.has-more {}

  .disc-more-cue {
    font-size: .68rem;
    padding: .3rem .65rem;
  }
}

/* =========================================================
   Loader: stitched leather frame. The loader fills the viewport, so a normal border would run along the screen edges. Instead an inset pseudo-element carries the panel art, giving a proper framed plaque with stitching and corner screws.
   ========================================================= */

/* keep the logo, bar and text above the frame art */

@media (max-width: 700px) {
  .page-loader::before {
    inset: clamp(8px, 2.4vw, 14px);
    border-width: 14px;
  }
}

/* =========================================================
   ACCESSIBILITY: gold text on cream sections. The brand gold (#C9A14A) measures only ~2.1:1 on the cream backgrounds - well under the 4.5:1 minimum for small text, so eyebrows and small labels were hard to read. A deeper gold is used for SMALL text on light surfaces only. Gold on dark green, gold buttons, headings and rules are untouched.
   ========================================================= */

.section-cream .eyebrow,
.section-cream-alt .eyebrow,
.section .eyebrow,
.gc-block-num,
.gc-stat .lbl,
.bg-letter,
.blog-tag,
.psize-note strong {
  color: var(--gold);
}

/* Keep gold bright wherever the surface is dark */

.section-dark .eyebrow,
.hero-curved .eyebrow,
.page-hero .eyebrow,
.ct-final .eyebrow,
.cta-band .eyebrow,
.scroll-stack-card .eyebrow,
.news-box .eyebrow,
.card-em .eyebrow,
.gcsez-dialog .eyebrow,
.disc-modal-dialog .eyebrow,
.psize-card .eyebrow,
.uconv .eyebrow,
.loc-facts .eyebrow,
.prize-card .eyebrow,
.tip .eyebrow {
  color: var(--gold-light);
}

/* Remaining small gold labels on light cards - same accessibility fix */

.lbl,
.blog-meta>span:not(.date),
.gc-stat .lbl,
.gc-price .lbl {
  color: #856218;
}

/* ...but keep them bright on any dark/leather surface */

.section-dark .lbl,
.scroll-stack-card .lbl,
.card-em .lbl,
.psize-card .lbl,
.uconv .lbl,
.loc-facts .lbl,
.prize-card .lbl,
.section-dark .blog-meta>span:not(.date) {
  color: var(--gold-light);
}

/* =========================================================
   Converter: Length / Area / Price tabs
   ========================================================= */

.uconv-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
  margin-bottom: 1rem;
}

.uconv-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem .5rem;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--on-emerald-soft);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 161, 74, 0.32);
  border-radius: 10px !important;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
  white-space: nowrap;
}

.uconv-tab:hover {
  color: var(--cream);
  border-color: rgba(201, 161, 74, 0.55);
}

.uconv-tab.is-active {
  background: linear-gradient(160deg, var(--gold), #b8912f);
  border-color: var(--gold);
  color: #08362a;
}

.uconv-tab i {
  font-size: .9em;
}

.uconv-panel.is-hidden {
  display: none;
}

/* Price row: size + unit + rate + unit + reset */

.uconv-row--price {
  flex-wrap: wrap;
}

/* Total price headline */

.uconv-total {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem .8rem;
  margin: .2rem 0 .9rem;
  padding: .8rem 1rem;
  border-radius: 12px !important;
  background: rgba(201, 161, 74, 0.12);
  border: 1px solid rgba(201, 161, 74, 0.4);
}

.uconv-total-lbl {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.uconv-total b {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem);
  color: var(--cream);
  line-height: 1;
}

.uconv-total-w {
  font-size: .86rem;
  color: var(--on-emerald-soft);
}

@media (max-width: 560px) {
  .uconv-tab {
    font-size: .72rem;
    padding: .5rem .3rem;
    letter-spacing: .02em;
  }

  .uconv-tab i {
    display: none;
  }
}

/* =========================================================
   Plot size tables: highlight the Sq. Mtr. column
   ========================================================= */

/* Cherry red reads clearly on the dark leather while staying distinct from the gold used elsewhere. */

.psize-table th.psize-hl,
.psize-table td.psize-hl {
  color: #E8B4A8;
  font-weight: 700;
  background: transparent;
}

/* "Front x Width" sits above the size column headings */

/* the awareness line was clipping at 34ch - give it the full column */

/* =========================================================
   How to Buy stickers: compact, but wide enough that the thick rope stitching renders at its real scale. Below ~18px the rope is squashed into a thin smear.
   ========================================================= */

.psize-card,
.uconv {
  border-width: 20px !important;
}

@media (max-width: 700px) {

  .psize-card,
  .uconv {
    border-width: 15px !important;
  }
}

/* =========================================================
   Location: pull it up and close the blank space around it
   ========================================================= */

/* Location sits directly under the hero now, so keep its top tight; route follows below it. */

#location {
  padding-block: clamp(1.1rem, .8rem + 1.1vw, 1.9rem);
}

#location .section-head {
  margin-bottom: clamp(.7rem, .55rem + .6vw, 1.1rem);
}

#route {
  padding-block: clamp(1.1rem, .8rem + 1.1vw, 1.9rem);
}

#route .section-head {
  margin-bottom: clamp(.7rem, .55rem + .6vw, 1.1rem);
}

.loc-wrap {
  display: grid;
  grid-template-columns: 1.25fr .9fr;
  gap: clamp(1.2rem, .9rem + 1.4vw, 2.2rem);
  align-items: start;
}

.loc-facts .gc-list {
  margin-top: .55rem;
}

.loc-facts .loc-note {
  margin-top: .7rem;
}

/* With } .page-loader::before { border-color: #08362a; } /* The mint/gold "moving light ring" pseudo-elements predate the leather frames. Inside a stitched panel they read as a stray green outline just inside the rope, so they are switched off wherever a frame is applied. */

.prize-card::before,
.step::before,
.trust-card::before,
.scroll-stack-card::before,
.card-em::before,
.news-box::before,
.tip::before,
.psize-card::before,
.uconv::before,
.route-video::before,
.loc-facts::before,
.bg-note::before {
  content: none !important;
  display: none !important;
}

/* =========================================================
   Rose gold accents (client request)
   ========================================================= */

:root {
  --emerald-deep: #08362A;
  --emerald: #125C46;
  --emerald-700: #0d4937;
  --gold: #e8b4a8;
  --gold-light: #e8b4a8;
  --gold-metallic: linear-gradient(180deg,
      #6f3542 0%,
      #a95d6b 16%,
      #f4c1c6 34%,
      #fff0ed 48%,
      #d58b96 60%,
      #a85564 78%,
      #713743 100%);
  --gold-filter: drop-shadow(0 -1px 0 rgba(255, 244, 238, .92)) drop-shadow(0 2px 1px rgba(58, 26, 18, .85)) drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
  --cream: #F6EFDD;
  --cream-50: #FBF7EC;
  --sage: #9FBBAE;
  --charcoal: #20231F;
  --bg: var(--cream);
  --bg-alt: var(--cream-50);
  --surface: #FFFDF7;
  --ink: var(--charcoal);
  --ink-soft: #4a4f46;
  --on-emerald: #F3ECDA;
  --on-emerald-soft: #c9d6cd;
  --line: rgba(32, 35, 31, 0.12);
  --line-gold: rgba(201, 161, 74, 0.35);
  --line-on-dark: rgba(201, 161, 74, 0.28);
  --font-display: Georgia, "Times New Roman", serif;
  --font-head: Inter, Arial, sans-serif;
  --font-body: Inter, Arial, sans-serif;
  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.45rem, 1.32rem + 0.66vw, 1.85rem);
  --step-3: clamp(1.8rem, 1.55rem + 1.2vw, 2.6rem);
  --step-4: clamp(2.2rem, 1.8rem + 2vw, 3.4rem);
  --step-5: clamp(2.6rem, 2rem + 3vw, 4.4rem);
  --space-section: clamp(1.7rem, 1.2rem + 2.5vw, 3.45rem);
  --space-section-sm: clamp(1.2rem, .9rem + 1.5vw, 2.2rem);
  --gutter: clamp(1.15rem, 0.8rem + 2vw, 2.5rem);
  --container: 1240px;
  --container-narrow: 920px;
  --shadow-sm: 0 2px 8px rgba(8, 54, 42, 0.06);
  --shadow-md: 0 14px 40px -18px rgba(8, 54, 42, 0.30);
  --shadow-lg: 0 40px 80px -40px rgba(8, 54, 42, 0.45);
  --shadow-gold: 0 18px 40px -18px rgba(201, 161, 74, 0.55);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --z-base: 1;
  --z-sticky: 100;
  --z-mobilebar: 200;
  --z-float: 250;
  --z-nav: 300;
  --z-overlay: 400;
  --grad-emerald-hero: linear-gradient(122deg, #135640 0%, #0b4030 46%, #061d16 100%);
  --r-sm: 5px;
  --r-md: 5px;
  --r-lg: 5px;
  --topbar-h: 39px;
  --rose-gold: #E8B4A8;
  --rose-gold-light: #F0CDC4;
}

/* Card headings on the homepage read in rose gold */

.news-box h3,
.scroll-stack-card h3 {
  color: var(--rose-gold) !important;
}

/* =========================================================
   Plot size tables: larger, clearer headings
   ========================================================= */

@media (max-width: 700px) {
  .psize-table th {
    font-size: .74rem;
  }

  .psize-table td {
    font-size: .82rem;
  }

  .psize-fw {
    font-size: .64rem;
  }
}

/* =========================================================
   Readability: panels must have an even interior ---------- The leather art has pronounced light streaks. Left visible behind body text they make it look washed out, so every content panel gets a solid ground; the leather still reads on the frame, borders and page bands.
   ========================================================= */

.psize-card,
.uconv,
.route-video,
.loc-facts,
.bg-note,
.scroll-stack-card,
.news-box,
.card-em,
.trust-card,
.tip,
.prize-card,
.steps-light .step,
.section-dark .card,
.gcsez-dialog,
.disc-modal-dialog,
.pmt-dialog {
  background-color: #0b2a20 !important;
  background-image: linear-gradient(rgba(8, 40, 30, 0.22), rgba(8, 40, 30, 0.22)),
    url("../assets/leather-tile1bce.webp?v=6") !important;
  background-size: auto, 480px auto !important;
  background-repeat: repeat, repeat !important;
}

/* =========================================================
   Bigger, clearer table headings
   ========================================================= */

@media (max-width: 700px) {
  .psize-card h3 {
    font-size: 1.12rem !important;
  }

  .psize-table th {
    font-size: .76rem !important;
  }

  .psize-table td {
    font-size: .86rem !important;
  }
}

/* =========================================================
   Frame keeps its stitching, but stops painting the centre ---------- border-image `fill` draws the source image's middle region ON TOP of the element's own background, so the leather's light streaks landed behind body text. Dropping `fill` on content panels keeps the rope border and corner screws while letting the solid interior show through.
   ========================================================= */

.psize-card,
.uconv,
.route-video,
.loc-facts,
.bg-note,
.scroll-stack-card,
.news-box,
.card-em,
.trust-card,
.tip,
.prize-card,
.steps-light .step,
.section-dark .card,
.gcsez-dialog,
.disc-modal-dialog,
.pmt-dialog,
.gcsez-links>a,
.feature-banner,
.disc-gcs,
.terms-hero {
  background-color: #0b2a20 !important;
  background-image: linear-gradient(rgba(8, 40, 30, 0.22), rgba(8, 40, 30, 0.22)),
    url("../assets/leather-tile1bce.webp?v=6") !important;
  background-size: auto, 480px auto !important;
  background-repeat: repeat, repeat !important;
}

.section-dark,
.cta-band,
.maps-section,
.ct-final,
.page-hero,
.hero-curved {
  background-color: #0b2a20 !important;
  background-image: linear-gradient(rgba(8, 40, 30, 0.22), rgba(8, 40, 30, 0.22)),
    url("../assets/leather-tile1bce.webp?v=6") !important;
  background-size: auto, 760px auto !important;
  background-repeat: repeat, repeat !important;
}

/* =========================================================
   Every leather surface gets the refined tile ---------- With `fill` removed the frame only draws its stitched edge, so each panel and band supplies its own clean leather ground. One tile, one tone, no creases - a calm, even hide across the whole site.
   ========================================================= */

.lthr-panel,
.gcsez-dialog,
.disc-modal-dialog,
.pmt-dialog,
.psize-card,
.uconv,
.route-video,
.loc-facts,
.bg-note,
.cta-band,
.ct-final,
.section-dark,
.section-dark .card,
.steps-light .step,
.gcsez-links>a,
.map-wrap,
.feature-banner,
.disc-gcs,
.terms-hero,
.gcsez-dialog--media,
.gcsez-dialog--wide,
.media-grid .vembed,
.tip,
.prize-card,
.scroll-stack-card,
.news-box,
.card-em,
.trust-card,
.site-header,
.page-hero,
.hero-curved,
.maps-section,
.page-loader::before {
  background-color: #0b2a20 !important;
  background-image: linear-gradient(rgba(8, 40, 30, 0.22), rgba(8, 40, 30, 0.22)),
    url("../assets/leather-tile1bce.webp?v=6") !important;
  background-size: auto, 760px auto !important;
  background-repeat: repeat, repeat !important;
  background-position: center, center !important;
}

/* the loader frame itself must stay see-through in the middle */

/* =========================================================
   LUXURY LEATHER PACK (assets/leather/) Each image is a COMPLETE panel: padded 3D sponge edge, antique-gold twisted stitching and a clean centre. They are stretched to fit (100% 100%, no-repeat) exactly as the pack's README specifies - never tiled, or the stitched edge would repeat through the middle.
   ========================================================= */

/* Wide panels & full-width bands: 16:9 landscape master */

.site-header,
.page-hero,
.hero-curved,
.section-dark,
.cta-band,
.ct-final,
.maps-section,
.uconv,
.route-video,
.loc-facts,
.bg-note,
.feature-banner,
.disc-gcs,
.terms-hero,
.map-wrap,
.steps-light .step,
.section-dark .card,
.gcsez-links>a,
.tip,
.trust-card,
.page-loader {
  border: 0 !important;
  border-image-source: none !important;
  border-radius: 18px !important;
  background-color: #0b2a20 !important;
  background-image: url("../assets/leather/leather-background-1920x1080.webp") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  box-shadow: none !important;
}

/* Full-bleed bands keep square corners - they span the viewport */

/* Portrait cards: 3:4 card master (only genuinely tall cards) */

.news-box,
.prize-card,
.psize-card,
.card-em {
  border: 0 !important;
  border-image-source: none !important;
  border-radius: 18px !important;
  background-color: #0b2a20 !important;
  background-image: url("../assets/leather/leather-card-900x1200.webp") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .6) !important;
}

/* Modals / dialogs: square master reads well at dialog ratios */

.gcsez-dialog,
.disc-modal-dialog,
.pmt-dialog,
.gcsez-dialog--media,
.gcsez-dialog--wide {
  border: 0 !important;
  border-image-source: none !important;
  border-radius: 20px !important;
  background-color: #0b2a20 !important;
  background-image: url("../assets/leather/leather-background-1920x1080.webp") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* The pack's stitched edge already frames the panel, so content needs to sit inside the safe area (README: keep text within the central 75-80%). */

.uconv,
.route-video,
.loc-facts,
.bg-note,
.psize-card,
.news-box,
.scroll-stack-card,
.prize-card,
.card-em,
.tip,
.steps-light .step,
.trust-card,
.section-dark .card {
  padding: clamp(1.1rem, .9rem + 1vw, 1.8rem) clamp(1.2rem, 1rem + 1.1vw, 2rem) !important;
}

/* Mobile: portrait master on narrow screens */

@media (max-width: 700px) {

  .site-header,
  .page-hero,
  .hero-curved,
  .section-dark,
  .cta-band,
  .ct-final,
  .maps-section,
  .page-loader {
    background-image: url("../assets/leather/leather-mobile-1080x1920f500.html?v=13") !important;
  }

  .news-box,
  .prize-card,
  .psize-card,
  .card-em {
    background-image: url("../assets/leather/leather-card-900x1200.webp") !important;
  }
}

/* =========================================================
   3D METALLIC GOLD TEXT Replaces the flat rose-gold fill with a bevelled, shining gold: a vertical gradient does the metal, layered text-shadows build the raised edge and the drop shadow beneath it.
   ========================================================= */

.news-box h3,
.scroll-stack-card h3,
.psize-table th.psize-hl,
.psize-table td.psize-hl,
.gc-stat .num,
.gcsez-title,
.disc-modal-title {
  filter: drop-shadow(0 -1px 0 rgba(255, 244, 238, .92)) drop-shadow(0 2px 1px rgba(58, 26, 18, .85)) drop-shadow(0 4px 6px rgba(0, 0, 0, .5));
  font-weight: 800;
  letter-spacing: .015em;
  paint-order: stroke fill;
}

/* Browsers without background-clip:text still get solid gold, never invisible text. */

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {

  .news-box h3,
  .scroll-stack-card h3,
  .psize-table th.psize-hl,
  .psize-table td.psize-hl,
  .gc-stat .num,
  .gcsez-title,
  .disc-modal-title {
    background: none;
    color: #E8B4A8 !important;
    -webkit-text-fill-color: #E8B4A8;
    filter: none;
  }
}

/* Table cells are small - keep the metal readable at that size */

/* Wide cards use the landscape master so the stitched edge keeps its proportions instead of being squeezed into a zigzag */

.scroll-stack-card {
  position: relative;
  transform-origin: top center;
  will-change: transform;
  backface-visibility: hidden;
  min-height: 13rem;
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(150deg, #10543f 0%, #0b3d2f 55%, #08362a 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  color: var(--cream);
  overflow: hidden;
  margin-bottom: 1.5rem;
  padding: clamp(.8rem, .6rem + .7vw, 1.2rem);
  border: 0 !important;
  border-image-source: none !important;
  border-radius: 18px !important;
  background-color: #0b2a20 !important;
  background-image: url("../assets/leather/leather-wide-panelf500.webp?v=13") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .6) !important;
}

@media (max-width: 700px) {
  .scroll-stack-card {
    background-image: url("../assets/leather/leather-wide-panelf500.webp?v=13") !important;
  }
}

/* Full-width bands: plain leather, no framed panel ---- Stretching a stitched panel across a whole section wraps the page in a rope border. Bands get the pack's clean leather centre instead; the framed panels stay on cards, tables and dialogs. */

.site-header,
.page-hero,
.hero-curved,
.section-dark,
.cta-band,
.ct-final,
.maps-section,
.page-loader {
  border-radius: 0 !important;
  background-image: url("../assets/leather/leather-plain-tile.webp") !important;
  background-size: 620px auto !important;
  background-repeat: repeat !important;
  background-position: center !important;
}

@media (max-width: 700px) {

  .site-header,
  .page-hero,
  .hero-curved,
  .section-dark,
  .cta-band,
  .ct-final,
  .maps-section,
  .page-loader {
    background-image: url("../assets/leather/leather-plain-tile.webp") !important;
    background-size: 420px auto !important;
    background-repeat: repeat !important;
  }
}

/* Centre the icon and copy inside the news cards */

.news-box h3,
.news-box p {
  text-align: center;
  width: 100%;
}

/* Sq. Mtr. column: larger, in the same 3D metallic gold */

/* the metal needs a touch more shadow at this size to stay crisp */

@media (max-width: 700px) {
  .psize-table th.psize-hl {
    font-size: .86rem !important;
  }


}

/* Converter: keep controls inside the stitched safe area ---- The pack's padded edge eats ~7% each side, so the Reset button and the last result cell were sliding under the stitching. */

.uconv {
  max-width: 860px;
  margin-inline: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-on-dark);
  background-image: linear-gradient(rgba(11, 51, 39, 0.52), rgba(8, 54, 42, 0.56)),
    url("../assets/leather-tile1bce.webp?v=6");
  background-size: auto, 1200px auto;
  background-repeat: repeat, repeat;
  padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem) clamp(1.8rem, 1.4rem + 1.8vw, 3rem) !important;
}

.uconv-row {
  grid-template-columns: 1.1fr 1.2fr auto;
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-items: end;
}

.uconv-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1 1 190px;
  min-width: 0;
}

.uconv-reset {
  flex: 0 0 auto;
  white-space: nowrap;
}

.uconv-out {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: .6rem;
  margin-top: 1rem;
}

@media (max-width: 700px) {
  .uconv {
    padding: 1.5rem 1.4rem !important;
  }

  .uconv-field {
    flex: 1 1 100%;
  }

  .uconv-reset {
    flex: 1 1 100%;
  }
}

/* Sq. Mtr. clearly larger than the other columns */

@media (max-width: 700px) {
  .psize-table td.psize-hl {
    font-size: 1.18rem !important;
  }

  .psize-table th.psize-hl {
    font-size: .92rem !important;
  }
}

/* Size cards: equal padding so top and bottom match the middle ---- The 3:4 panel stretches to each card's height; unequal padding made the first and last cards' stitching sit tight against the content. */

.psize-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 161, 74, .55) transparent;
  flex: 1 1 auto;
}

/* Loader: full 3D leather panel with stitched edge ---- The inset ::before frame was neutralised with the other border-image rules; the pack's portrait panel supplies the padded edge directly. */

@media (min-width: 701px) {
  .page-loader {
    background-image: url("../assets/leather/leather-background-1920x1080.webp") !important;
  }
}

/* Mobile converter: keep everything inside the padded edge ---- The pack's stitched border takes ~8% of each side; at 390px that is ~30px, so tabs and the note were sliding under the stitching. */

@media (max-width: 700px) {
  /* the stitched edge is proportionally much thicker at phone widths, so the safe area needs a deeper inset than a simple rem value */

  .uconv {
    padding: 3.1rem 2.4rem !important;
  }

  .uconv-tabs {
    gap: .3rem;
    margin-bottom: .9rem;
  }

  .uconv-tab {
    font-size: .66rem;
    padding: .5rem .2rem;
    letter-spacing: 0;
  }

  .uconv-out {
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
  }

  .uconv-note {
    font-size: .76rem;
    line-height: 1.5;
    margin-top: .9rem;
  }

  /* size cards need the same inset so their tables clear the stitching */

  .psize-card {
    padding: 2.9rem 2.1rem !important;
  }
}

/* Mobile size tables: the scroll area must stop at the safe edge ---- The table scrolls sideways, but its overflow box ran to the card's outer box, so rows slid under (and past) the stitched right edge. */

@media (max-width: 700px) {
  /* The card's padding already defines the safe area; the scroll box must not paint outside it or rows slide under the stitched right edge. */

  .psize-card {
    overflow: hidden;
  }

  .psize-scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-radius: 6px;
    -webkit-mask-image: linear-gradient(to right, #000 0 94%, transparent 100%);
    mask-image: linear-gradient(to right, #000 0 94%, transparent 100%);
  }

  /* shrink the table so all four columns fit inside the frame - no sideways scrolling needed on a phone */

  .psize-table {
    font-size: .78rem;
  }

  .psize-table th {
    font-size: .66rem !important;
    padding: .4rem .18rem !important;
  }

  .psize-table td {

    padding: .32rem .18rem !important;
  }

  .psize-table td.psize-hl {
    font-size: .96rem !important;
  }

  .psize-table th.psize-hl {
    font-size: .74rem !important;
  }

  .psize-fw {
    font-size: .56rem !important;
  }
}

/* Loader on mobile: keep a visible padded 3D edge ---- Stretching the 9:16 panel to a tall phone viewport thinned the padded border to a hairline. An inset frame restores a real edge at any height. */

@media (max-width: 700px) {
  /* A panel built at phone proportions (9:19.5): the padded edge bands are kept at full size and only the clean middle is stretched, so the 3D edge and stitching stay visible on a tall screen. */

  .page-loader {
    background-image: url("../assets/leather/leather-tall-panelf500.html?v=13") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    padding: 0 !important;
  }

  .page-loader::before {
    display: none !important;
  }
}

/* Loader: float the leather card with space on all four sides ---- Painting the panel as the loader's own background made it bleed to the screen edges, clipping the padded 3D border. It is drawn on an inset pseudo-element instead, over a plain dark ground, so the whole card - rounded sponge corners, stitching and screws - is visible. */

.page-loader>* {
  position: relative;
  z-index: 1;
}

@media (max-width: 700px) {
  .page-loader {
    background-image: none !important;
    background-color: #071c15 !important;
  }

  .page-loader::before {
    display: block !important;
    inset: clamp(14px, 4vw, 24px);
    background-image: url("../assets/leather/leather-tall-panelf500.html?v=13") !important;
    background-size: 100% 100% !important;
    background-repeat: no-repeat !important;
    border-radius: 18px !important;
  }
}

/* Prize cards - purpose-built tall panel matching this card's own ~1:2.05 ratio, so the border/bolts don't stretch off-proportion. */

body.contest-page .prize-card {
  background-image: url("../assets/leather-blush/leather-prize-card.webp") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
}

/* Other card types keep the general-purpose card/step/tip assets */

body.contest-page .news-box,
body.contest-page .psize-card,
body.contest-page .card-em {
  background-image: url("../assets/leather-blush/leather-card-900x1200.webp") !important;
}

body.contest-page .steps-light .step {
  background-image: url("../assets/leather-blush/leather-portrait-800x10003860.html?v=1") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
}

body.contest-page .steps-light .step-grouped {
  background-image: url("../assets/leather-blush/leather-card-900x1200.webp") !important;
}

body.contest-page .tip {
  background-image: url("../assets/leather-blush/leather-square-800x800.webp") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
}

/* Benefits cards - purpose-built panel matching this card's own ~5:4 ratio */

body.contest-page .ben-card {
  background-image: url("../assets/leather-blush/leather-benefit-card.webp") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
}

/* FAQ accordion rows - purpose-built ultra-shallow strip */

body.contest-page .faq-item {
  background-image: url("../assets/leather-blush/leather-faq-row.webp") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
}

@media (max-width: 700px) {

  body.contest-page .news-box,
  body.contest-page .psize-card,
  body.contest-page .card-em {
    background-image: url("../assets/leather-blush/leather-card-600x8003860.html?v=1") !important;
  }

  body.contest-page .prize-card {
    background-image: url("../assets/leather-blush/leather-mobile-1080x1920-v23860.html?v=1") !important;
  }
}

/* The blush pack is a pale card - cream/rose-gold text (tuned for the dark green leather) disappears on it, so force dark, high-contrast text on every card type that now sits on blush. */

body.contest-page .news-box h3,
body.contest-page .prize-card h3,
body.contest-page .psize-card h3,
body.contest-page .card-em h3,
body.contest-page .ben-card h3 {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--emerald-deep) !important;
  color: var(--emerald-deep) !important;
  filter: none !important;
  text-shadow: none !important;
}

body.contest-page .news-box p,
body.contest-page .prize-card p,
body.contest-page .prize-card li,
body.contest-page .psize-card p,
body.contest-page .card-em p,
body.contest-page .ben-card p,
body.contest-page .tip p,
body.contest-page .steps-light .step p,
body.contest-page .steps-light .step-sublist li,
body.contest-page .prize-sub,
body.contest-page .prize-card.is-first .prize-sub,
body.contest-page .prize-amount {
  color: var(--charcoal) !important;
}

body.contest-page .steps-light .step-title {
  color: var(--emerald-deep) !important;
}

body.contest-page .prize-rank,
body.contest-page .prize-card.is-first .prize-rank {
  color: var(--emerald-deep) !important;
}

body.contest-page .steps-light .step-num,
body.contest-page .steps-light .step-ico,
body.contest-page .tip-ico,
body.contest-page .ben-ico {
  color: var(--emerald-deep) !important;
  border-color: var(--emerald-deep) !important;
}

body.contest-page .prize-list li,
body.contest-page .prize-card.is-first .prize-list li {
  color: var(--charcoal) !important;
}

body.contest-page .prize-list li i,
body.contest-page .prize-card.is-first .prize-list li i,
body.contest-page .prize-card.is-second .prize-list li i,
body.contest-page .prize-card.is-third .prize-list li i {
  color: var(--emerald-deep) !important;
}

body.contest-page .prize-list {
  border-top-color: rgba(8, 54, 42, .25) !important;
}

/* =========================================================
   HOME PAGE — Green City SEZ news card only, blush leather background
   ========================================================= */

.news-box--blush {
  background-image: url("../assets/leather-blush/leather-card-900x1200.webp") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: transparent !important;
}

@media (max-width: 700px) {
  .news-box--blush {
    background-image: url("../assets/leather-blush/leather-card-600x8003860.html?v=1") !important;
  }
}

.news-box--blush h3 {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--emerald-deep) !important;
  color: var(--emerald-deep) !important;
  filter: none !important;
  text-shadow: none !important;
}

.news-box--blush p,
.news-box--blush .news-link {
  color: var(--charcoal) !important;
}

.news-box--blush .news-ico {
  color: var(--emerald-deep) !important;
}

/* =========================================================
   Menu popups: scrollbar, and breathing room inside the stitched frame
   ========================================================= */

/* The dialog scrolls, but its scrollbar was the browser default - a pale bar against dark leather. Tint it to match, and keep it out of the way until the pointer is over the dialog. */

.gcsez-dialog::-webkit-scrollbar {
  width: 8px;
}

.gcsez-dialog::-webkit-scrollbar-track {
  background: transparent;
}

.gcsez-dialog::-webkit-scrollbar-thumb {
  background: rgba(201, 161, 74, 0.34);
  border-radius: 8px !important;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.gcsez-dialog::-webkit-scrollbar-thumb:hover {
  background: rgba(201, 161, 74, 0.55);
  background-clip: padding-box;
}

/* Keep the popup's content clear of the stitched edge */

@media (max-width: 700px) {
  .gcsez-dialog {
    padding: 2.6rem 1.9rem !important;
  }
}

/* News cards: clearer type and consistent alignment */

.news-box {
  gap: .7rem;
  position: relative;
  background: linear-gradient(150deg, #10543f 0%, #0b3d2f 60%, #08362a 100%);
  border: 1px solid var(--line-on-dark);
  color: var(--cream);
  text-decoration: none;
  transition: transform .35s var(--ease-out), border-color .3s ease, box-shadow .3s ease;
  padding: clamp(.9rem, .7rem + .7vw, 1.3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  min-height: 100%;
}

.news-box p {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--cream);
  margin: 0;
  flex: 1 1 auto;
}

.news-box .news-link {
  color: var(--gold-light);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  margin-top: auto;
}

/* Icons sit on one baseline: the lion is an image and the others are font glyphs, so the row needs a fixed height for all three to line up. */

.news-box .news-ico {
  color: var(--gold-light);
  font-size: 2rem;
  line-height: 1;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 66px;
  margin-bottom: 0;
}

.news-box .news-ico img {
  max-height: 66px;
  width: auto;
  display: block;
}

.news-box .news-ico i {
  font-size: 2rem;
  line-height: 1;
}

@media (max-width: 700px) {
  .news-box .news-ico {
    height: 56px;
  }

  .news-box .news-ico img {
    max-height: 56px;
  }

  .news-box .news-ico i {
    font-size: 1.75rem;
  }
}

/* The lion icon reads visually smaller than the font-icon glyphs at the same box height, so let it run larger than the shared 66px baseline. */

.news-box .news-ico--lion {
  height: 84px;
}

.news-box .news-ico--lion img {
  max-height: 84px;
}

@media (max-width: 700px) {
  .news-box .news-ico--lion {
    height: 70px;
  }

  .news-box .news-ico--lion img {
    max-height: 70px;
  }
}

/* Mobile stacking cards are ~2.2:1, not 3.7:1 - a panel built at their own ratio keeps the stitching from being squashed, and more padding keeps the copy clear of it. */

@media (max-width: 700px) {
  .scroll-stack-card {
    background-image: url("../assets/leather/leather-wide-panel-mobf500.html?v=13") !important;
    padding: 1.9rem 1.7rem !important;
  }

  .scroll-stack-card h3 {
    margin-bottom: .45rem;
  }

  .scroll-stack-card p {
    font-size: .86rem;
    line-height: 1.5;
  }
}

/* News-card headings match the stacking cards' treatment - the gradient was already identical, they were just rendering too small for the metal banding and bevel to read. */

.news-box h3 {
  font-family: var(--font-display);
  color: var(--cream);
  font-weight: 800;
  filter: drop-shadow(0 -1px 0 rgba(255, 244, 238, .92)) drop-shadow(0 2px 1px rgba(58, 26, 18, .85)) drop-shadow(0 4px 6px rgba(0, 0, 0, .5)) !important;
  font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem) !important;
  line-height: 1.18 !important;
  letter-spacing: .015em !important;
  margin: 20px 0 !important;
}

@media (max-width: 700px) {
  /* match the reference: larger and with a lighter touch of shadow, so the gold stays bright rather than sinking into the leather */

  .news-box h3 {
    font-size: 1.72rem !important;
    line-height: 1.16 !important;
  }

  .news-box h3,
  .scroll-stack-card h3 {
    filter: drop-shadow(0 -1px 0 rgba(255, 244, 238, .88)) drop-shadow(0 2px 1px rgba(58, 26, 18, .72)) drop-shadow(0 4px 7px rgba(0, 0, 0, .42)) !important;
  }
}

/* =========================================================
   SAFE AREA: every framed panel keeps its content clear of the stitching. The pack art puts the rope roughly 6-8% in from each edge, so a flat rem padding is not enough on small panels - text ran onto the thread.
   ========================================================= */

.disc-gcs {
  margin-top: 1.35rem;
  border-left: 3px solid var(--gold);
  background: rgba(8, 54, 42, 0.42);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  backdrop-filter: blur(2px);
  max-width: 620px;
  padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem) clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem) !important;
}

.disc-gcs .disc-gcs-body,
.disc-gcs p {
  margin-left: 0;
  margin-right: 0;
}

/* Loader: the lion + logo and the caption were touching the rope */

/* Header brand: line the lion up with the logo and give them a real gap */

.site-header .brand {
  position: relative;
  flex-direction: row;
  display: inline-flex;
  align-items: center;
  gap: clamp(.7rem, .5rem + .7vw, 1.15rem) !important;
}

.site-header .brand-lion {
  height: 58px !important;
  width: auto !important;
  align-self: center;
  display: block;
}

.site-header .brand-img {
  align-self: center;
}

@media (max-width: 700px) {
  .site-header .brand {
    gap: .6rem !important;
  }

  .site-header .brand-lion {
    height: 46px !important;
  }

  .page-loader {
    padding: 2.6rem 2rem !important;
  }
}

/* Media buttons: smaller type so all four read clearly in one row */

.gcsez-media-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  min-width: 0;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--line-on-dark);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .25s ease, border-color .25s ease, transform .25s var(--ease-out);
  font-size: .62rem !important;
  letter-spacing: .01em !important;
  padding: .5rem .18rem !important;
  line-height: 1.15;
}

.gcsez-media-btn i {
  line-height: 1;
  flex: none;
  font-size: .82rem !important;
  margin-bottom: .12rem;
}

@media (max-width: 700px) {
  .gcsez-media-row {
    gap: .34rem !important;
  }

  .gcsez-media-btn {
    font-size: .55rem !important;
    padding: .46rem .1rem !important;
  }

  .gcsez-media-btn i {
    font-size: .76rem !important;
  }
}

@media (max-width: 380px) {
  .gcsez-media-btn {
    font-size: .5rem !important;
  }
}

/* Loader caption must stay well inside the rope on narrow screens */

.page-loader .pl-note,
.page-loader .pl-sub {
  max-width: min(50ch, 95%) !important;
  margin-inline: auto !important;
}

@media (max-width: 700px) {

  .page-loader .pl-note,
  .page-loader .pl-sub {
    max-width: 88% !important;
    font-size: .74rem;
    line-height: 1.5;
  }

  .page-loader .pl-track {
    max-width: 58% !important;
  }
}

/* Broker note: the icon column left the paragraph tight against the right rope - even out the inset on both sides. */

.bg-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  margin-bottom: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  border-radius: var(--r-md);
  background: linear-gradient(150deg, rgba(201, 161, 74, 0.12), rgba(201, 161, 74, 0.03));
  border: 1px solid var(--line-gold);
  padding: clamp(1.5rem, 1.2rem + 1.3vw, 2.2rem) clamp(1.8rem, 1.4rem + 1.6vw, 2.6rem) !important;
}

.bg-note p {
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.7;
  margin: 0;
  margin-right: 0;
}

@media (max-width: 700px) {
  .bg-note {
    padding: 1.7rem 1.6rem !important;
  }
}

/* Size-table cards: keep the heading clear of the corner screws and give the last row room above the bottom rope. */

/* generous top/bottom to clear the rope, but tighter sides so all four table columns still fit inside the card */

@media (max-width: 700px) {
  .psize-card {
    padding: 2.3rem 1.1rem !important;
  }
}

/* Keep the first/last table columns off the side ropes without widening the card padding (which pushed columns out of the panel). */

.psize-table th:first-child,
.psize-table td:first-child {
  padding-left: .34rem !important;
}

.psize-table th:last-child,
.psize-table td:last-child {
  white-space: normal;
  min-width: 6.5rem;
  padding-right: .34rem !important;
}

@media (max-width: 700px) {
  .psize-card .psize-scroll {
    padding-inline: .4rem;
  }
}

/* =========================================================
   Menu popups: keep every control inside the rope. On a 358px dialog the pack's rope sits ~28px in, so a 30px inset left the link buttons sitting on the stitching and the close button on the corner screw.
   ========================================================= */

.gcsez-x {
  position: sticky;
  float: right;
  margin: -.6rem -.6rem 0 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  border: 1px solid rgba(201, 161, 74, 0.4);
  background: rgba(8, 54, 42, 0.92);
  backdrop-filter: blur(4px);
  color: var(--gold-light);
  cursor: pointer;
  transition: background .2s, color .2s;
  top: clamp(2.1rem, 1.6rem + 1.6vw, 2.6rem) !important;
  right: clamp(2.1rem, 1.6rem + 1.6vw, 2.6rem) !important;
  z-index: 5;
}

/* the heading must not run under the close button */

.gcsez-title {
  font-family: var(--font-display);
  color: #fff;
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem);
  margin: 0 0 1.3rem;
  line-height: 1.15;
  padding-right: 2.6rem;
}

@media (max-width: 700px) {
  .gcsez-dialog {
    padding: 3rem 2.5rem !important;
  }

  .gcsez-x {
    top: 2rem !important;
    right: 2rem !important;
  }

  .gcsez-title,
  .gcsez-eyebrow {
    padding-right: 2.4rem;
  }
}

/* The eyebrow was still riding the top rope - push the header block down and keep the close button clear of it. */

.gcsez-eyebrow {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-light);
  padding-right: 2.6rem;
  display: block;
  margin-top: .55rem;
  margin-bottom: .35rem;
}

.gcsez-dialog {
  position: relative;
  z-index: 1;
  width: min(460px, calc(100vw - 2rem));
  margin: 8vh auto;
  max-height: 84vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #0b3327 0%, var(--emerald-deep) 100%);
  border: 1px solid rgba(201, 161, 74, 0.4);
  border-radius: 18px !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  animation: discPop .26s ease;
  background-image: linear-gradient(180deg, rgba(11, 51, 39, 0.92) 0%, rgba(8, 54, 42, 0.94) 100%),
    url("../assets/leather-tile1bce.webp?v=6");
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 161, 74, 0.42) transparent;
  scrollbar-gutter: stable;
  padding: clamp(3.2rem, 2.4rem + 2.6vw, 4rem) clamp(2.7rem, 2.1rem + 2.4vw, 3.4rem) !important;
  padding-top: clamp(3.6rem, 2.8rem + 2.8vw, 4.5rem) !important;
}

@media (max-width: 700px) {
  .gcsez-dialog {
    padding-top: 3.4rem !important;
  }

  .gcsez-eyebrow {
    margin-top: .4rem;
  }
}

/* =========================================================
   Location page: one vertical sequence At a glance -> route map image -> live Google map -> drive video
   ========================================================= */

.loc-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.1rem, .9rem + 1vw, 1.8rem);
  width: 100%;
  max-width: 940px;
  margin-inline: auto;
}

.loc-stack>* {
  min-width: 0;
  max-width: 100%;
}

.loc-block {
  border-radius: 18px !important;
  background-color: #0b2a20 !important;
  background-image: url("../assets/leather/leather-background-1920x1080.webp") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  padding: clamp(1.9rem, 1.5rem + 1.6vw, 2.8rem) clamp(1.9rem, 1.5rem + 1.7vw, 2.9rem) !important;
}

.loc-block>h3 {
  font-size: var(--step-1);
  color: var(--cream);
  margin: 0 0 .35rem;
}

.loc-block-note {
  font-size: .9rem;
  line-height: 1.55;
  color: var(--on-emerald-soft);
  margin: 0 0 1rem;
}

/* the map keeps a comfortable height now it spans the full column */

.loc-stack .loc-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* route image spans the column, never cropped */

.loc-stack .route-map {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}

.loc-stack .route-map img {
  width: 100%;
  height: auto;
  display: block;
}

/* video card centres its portrait poster */

.loc-stack .route-video .vembed-portrait {
  max-width: 320px;
  margin-inline: auto;
}

@media (max-width: 700px) {
  .loc-block {
    padding: 1.7rem 1.6rem !important;
  }

  .loc-stack .loc-map {
    min-height: 280px;
  }

  .loc-stack .route-video .vembed-portrait {
    max-width: 260px;
  }
}

/* the embedded map must not push past its block on small screens */

.loc-stack .loc-map {
  position: relative;
  min-height: clamp(300px, 40vw, 440px);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line-on-dark);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* At-a-glance is part of the same stack, so it needs the same safe area */

.loc-stack .loc-facts {
  border-radius: 18px !important;
  padding: clamp(1.9rem, 1.5rem + 1.6vw, 2.8rem) max(1.2rem, 8%) !important;
}

.loc-stack .loc-facts h3 {
  margin: 0 0 .7rem;
}

.loc-stack .loc-facts .loc-note {
  margin-bottom: 0;
}

@media (max-width: 700px) {
  .loc-stack .loc-facts {
    padding: 1.7rem max(1.1rem, 8.5%) !important;
  }
}

/* Block headings sit inboard of the corner screws */

.loc-stack .loc-block>h3,
.loc-stack .loc-facts>h3 {
  padding-left: .35rem;
}

.loc-stack .loc-block-note,
.loc-stack .route-video-note {
  padding-left: .35rem;
}

/* =========================================================
   Important Disclaimer modal: keep rows, icons and the close button inside the stitched frame. At 358px the rope sits ~28px in, so the 26px scroll padding let the icon column run under the stitching.
   ========================================================= */

/* .disc-modal-scroll { padding: clamp(3.2rem, 2.5rem + 2.4vw, 4rem) clamp(2.7rem, 2.1rem + 2.4vw, 3.4rem) 5.4rem !important; } */

/* heading must not slide under the close button */

@media (max-width: 700px) {
  .disc-modal-scroll {
    padding: 3rem 2.5rem 5rem !important;
  }

  .disc-modal-x {
    top: 1.9rem !important;
    right: 1.9rem !important;
  }

  .disc-modal-title {
    padding-right: 2.6rem;
  }

  /* the icon + text row needs to stay readable in the narrower safe area */

  .disc-modal-dialog .dm-row {
    gap: .7rem;
  }
}

/* On phones the 46px icon column pushed the circles onto the left rope. Smaller icons + a tighter column keep them inside the frame and leave more width for the text. */

@media (max-width: 700px) {
  .disc-modal-dialog .dm-row {
    grid-template-columns: 34px 1fr;
    gap: .8rem;
  }

  .disc-modal-dialog .dm-ico {
    width: 34px;
    height: 34px;
  }

  .disc-modal-dialog .dm-ico svg {
    width: 16px;
    height: 16px;
  }

  .disc-modal-dialog .dm-ico-lg {
    width: 38px;
    height: 38px;
  }

  .disc-modal-dialog .dm-ico-lg svg {
    width: 18px;
    height: 18px;
  }

  .disc-modal-dialog .dm-list::before {
    left: 16px;
  }

  /* close button clear of the corner screw */

  .disc-modal-x {
    top: 2.4rem !important;
    right: 2.4rem !important;
    width: 34px;
    height: 34px;
  }

  .disc-modal-title {
    font-size: 1.22rem;
    padding-right: 3rem;
  }
}

/* The title sat on one line and ran under the close button. Let it wrap and reserve the button's column so the two never collide. */

@media (max-width: 700px) {
  .disc-modal-title {
    font-size: 1.05rem !important;
    padding-right: 3.4rem !important;
    letter-spacing: .02em;
  }

  /* first row's large icon also needs to clear the left rope */

  .disc-modal-head {
    gap: .7rem;
  }
}

/* Desktop: the icon column and close button were still riding the frame. Pull the icon rail inboard and move the button off the corner screw. */

@media (min-width: 701px) {
  .disc-modal-dialog .dm-row {
    grid-template-columns: 46px 1fr;
    padding-left: .6rem;
  }

  .disc-modal-dialog .dm-list::before {
    left: 23.6px;
  }

  .disc-modal-x {
    top: 3rem !important;
    right: 3rem !important;
  }

  .disc-modal-title {
    padding-right: 3.6rem;
  }
}

/* =========================================================
   Plot-size tables: real clearance from the side ropes. The last column ended only ~4px clear of the stitching, so "APPROX. FEET SIZE" visually ran into it. Narrow the type slightly and widen the inset so every column has room.
   ========================================================= */

.psize-card .psize-scroll {
  padding-inline: 0;
}

.psize-table {
  max-width: 100%;
  border-collapse: collapse;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  width: 100%;
  table-layout: fixed;
}

.psize-table th,
.psize-table td {
  padding: .42rem .22rem !important;
  overflow-wrap: anywhere;
}

/* column widths: keep the two numeric columns tight so the size columns have room to breathe */

/* the feet column holds the longest strings (e.g. 65.6 x 131.2 ft), so it gets the most width and never wraps */

.psize-table th:nth-child(1),
.psize-table td:nth-child(1) {
  width: 15%;
}

.psize-table th:nth-child(2),
.psize-table td:nth-child(2) {
  width: 20%;
}

.psize-table th:nth-child(3),
.psize-table td:nth-child(3) {
  width: 28%;
}

.psize-table th:nth-child(4),
.psize-table td:nth-child(4) {
  width: 37%;
}

.psize-table td:nth-child(4) {
  white-space: nowrap;
}

.psize-table th {
  text-align: left;
  font-weight: 700;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-on-dark);
  letter-spacing: .01em;
  padding: .5rem .3rem;
  white-space: normal;
  vertical-align: bottom;
  color: var(--gold-light);
  font-size: .7rem !important;
}

.psize-table td {
  color: var(--on-emerald-soft);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  white-space: nowrap;
  padding: .34rem .3rem;
  font-size: .82rem !important;
}

.psize-fw {
  display: block;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold-light);
  white-space: nowrap;
  margin-bottom: .16rem;
  font-size: .58rem !important;
}

@media (max-width: 700px) {
  .psize-card {
    padding-inline: 1.7rem !important;
  }

  .psize-table th {
    font-size: .62rem !important;
  }

  .psize-table td {
    font-size: .74rem !important;
  }

  .psize-table td.psize-hl {
    font-size: 1rem !important;
  }

  .psize-table th.psize-hl {
    font-size: .78rem !important;
  }

  .psize-fw {
    font-size: .52rem !important;
  }

  .psize-table th,
  .psize-table td {
    padding: .36rem .16rem !important;
  }
}

/* Mobile: shorten the size-column headings and tighten the table so the last column clears the right rope. "Front x Width" is dropped on the feet column - the meter column above it already carries that label. */

@media (max-width: 700px) {
  .psize-card {
    padding-inline: 1.55rem !important;
  }

  .psize-table th:nth-child(1),
  .psize-table td:nth-child(1) {
    width: 14%;
  }

  .psize-table th:nth-child(2),
  .psize-table td:nth-child(2) {
    width: 20%;
  }

  .psize-table th:nth-child(3),
  .psize-table td:nth-child(3) {
    width: 30%;
  }

  .psize-table th:nth-child(4),
  .psize-table td:nth-child(4) {
    width: 36%;
  }

  .psize-table th:nth-child(4) .psize-fw {
    display: none;
  }

  .psize-table th {
    font-size: .58rem !important;
    letter-spacing: 0 !important;
  }

  .psize-table td {
    font-size: .7rem !important;
  }

  .psize-table td:nth-child(4) {
    white-space: normal;
  }
}

/* Nothing may repaint a size-table row on hover. Only the background is reset - touching `color`/`-webkit-text-fill-color` here would blank the rose-gold Sq. Mtr. cells, which are a clipped gradient. */

.psize-table tbody tr:hover td,
.psize-table tbody tr:hover th,
.psize-card:hover .psize-table td {
  background: transparent !important;
}

/* =========================================================
   Gradient-clipped text and selection. The rose-gold/gold headings and Sq. Mtr. cells paint through a clipped background, so the glyph fill is transparent. When a browser paints a selection (or a tap highlight) it fills that transparent area and the text disappears. Give those elements a selection colour that keeps the glyphs visible, and stop the tap highlight entirely.
   ========================================================= */

.psize-table td.psize-hl,
.psize-table th.psize-hl,
.news-box h3,
.scroll-stack-card h3,
.gcsez-title,
.disc-modal-title,
.gc-stat .num {
  -webkit-tap-highlight-color: transparent;
}

.psize-table td.psize-hl::selection,
.psize-table th.psize-hl::selection,
.news-box h3::selection,
.scroll-stack-card h3::selection,
.gcsez-title::selection,
.disc-modal-title::selection,
.gc-stat .num::selection {
  background: rgba(201, 161, 74, 0.30);
  -webkit-text-fill-color: #FFEDE4;
  color: #FFEDE4;
}

.psize-table td.psize-hl::-moz-selection,
.psize-table th.psize-hl::-moz-selection,
.news-box h3::-moz-selection,
.scroll-stack-card h3::-moz-selection,
.gcsez-title::-moz-selection,
.disc-modal-title::-moz-selection {
  background: rgba(201, 161, 74, 0.30);
  -webkit-text-fill-color: #FFEDE4;
  color: #FFEDE4;
}

/* NOTE: do NOT put user-select:none on .psize-table - in Chromium it forces a repaint path that drops the background-clip:text fill and the Sq. Mtr. column renders blank. The ::selection rules above are enough. */

/* =========================================================
   Sq. Mtr. column: solid rose gold, not a clipped gradient. background-clip:text renders the glyph fill transparent, so any repaint the browser does for a selection or tap drops the fill and the number vanishes. A solid colour with a shadow bevel looks the same and cannot disappear.
   ========================================================= */

.psize-table td.psize-hl,
.psize-table th.psize-hl {
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
}

.psize-table td.psize-hl {
  font-weight: 800 !important;
  letter-spacing: .01em;
  font-size: 1.18rem !important;
  color: #E8B4A8 !important;
  text-shadow: 0 -1px 0 rgba(255, 244, 238, .55),
    0 1px 0 rgba(74, 32, 22, .95),
    0 2px 3px rgba(0, 0, 0, .6);
}

.psize-table th.psize-hl {
  letter-spacing: .02em;
  font-size: .88rem !important;
  color: #F0CDC4 !important;
  text-shadow: 0 1px 0 rgba(74, 32, 22, .9),
    0 2px 2px rgba(0, 0, 0, .5);
}

/* =========================================================
   Disclaimer popup: real clearance from the rope. Measured on the rendered dialog, the rope's bright band sits about 7% of the panel width in from each edge, and the padded shoulder runs a little past that. Content needs ~11% to sit clearly inside it.
   ========================================================= */

@media (max-width: 700px) {
  .disc-modal-scroll {
    padding-left: 12.5% !important;
    padding-right: 12.5% !important;
    padding-top: 3.4rem !important;
  }

  .disc-modal-x {
    top: 8.5% !important;
    right: 8.5% !important;
  }

  /* narrower safe area - trim the icon rail so the text keeps its width */

  .disc-modal-dialog .dm-row {
    grid-template-columns: 28px 1fr;
    gap: .65rem;
  }

  .disc-modal-dialog .dm-ico {
    width: 28px;
    height: 28px;
  }

  .disc-modal-dialog .dm-ico svg {
    width: 14px;
    height: 14px;
  }

  .disc-modal-dialog .dm-list::before {
    left: 13px;
  }
}

/* The icon rail is the left-most element, so it lands on the rope before the text does. Indent the whole list and pull the close button further in from the corner screw. */

@media (max-width: 700px) {
  .disc-modal-dialog .dm-list {
    padding-left: .35rem;
  }

  .disc-modal-x {
    top: 12% !important;
    right: 12% !important;


  }

  .disc-modal-title {
    padding-right: 3.6rem !important;
  }
}

/* Title sits above the close button rather than beside it, so it has the full width and never needs to break mid-word. */

.disc-modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 0;
  background: #e8b4a8;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-light);
  white-space: normal;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: none;
  line-height: 1.12;
  padding-right: 0 !important;
  max-width: 100%;
  font-size: clamp(1.15rem, .95rem + 1.4vw, 2.1rem) !important;
}

@media (max-width: 700px) {
  .disc-modal-title {
    font-size: 1rem !important;
    padding-right: 0 !important;
  }

  /* keep the first line clear of the close button */

  .disc-modal-scroll {
    padding-top: 4.6rem !important;
  }
}

/* =========================================================
   SITE-WIDE SAFE AREA FOR LEATHER PANELS Every panel that carries the stitched art reserves a percentage inset rather than a fixed rem value. The rope scales with the panel, so a fixed padding is always wrong at some size - this is what caused the repeated "content on the thread" problems.
   ========================================================= */

.psize-card,
.uconv,
.route-video,
.loc-facts,
.loc-block,
.bg-note,
.disc-gcs,
.news-box,
.scroll-stack-card,
.prize-card,
.card-em,
.trust-card,
.tip,
.steps-light .step,
.gcsez-dialog,
.pmt-dialog,
.terms-hero,
.feature-banner {
  padding-left: max(1.1rem, 9%) !important;
  padding-right: max(1.1rem, 9%) !important;
}

/* wide panels have a proportionally thinner side rope */

.scroll-stack-card,
.uconv,
.loc-block,
.loc-facts,
.bg-note,
.disc-gcs,
.feature-banner,
.terms-hero {
  padding-left: max(1.1rem, 5.5%) !important;
  padding-right: max(1.1rem, 5.5%) !important;
}

/* the disclaimer icon rail is the left-most element in its panel */

@media (max-width: 700px) {
  .disc-modal-dialog .dm-list {
    padding-left: .8rem;
  }
}

/* =========================================================
   List rows: keep the sentence as flowing text. `.gc-list li` was a flex container, so every inline <strong> became its own flex item and the words scattered into columns. A plain block with a text indent keeps the sentence flowing and still shows the bullet.
   ========================================================= */

.gc-list li {
  align-items: flex-start;
  color: var(--ink-soft);
  font-size: .96rem;
  line-height: 1.65;
  display: block !important;
  position: relative;
  padding-left: 1.35rem;
  gap: 0 !important;
}

.gc-list li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 161, 74, 0.16);
  position: absolute;
  left: 0;
  top: .62rem;
  margin-top: 0;
}

.gc-list li strong {
  display: inline;
}

/* Panels that hold body copy get the same proportional safe area as the rest of the leather surfaces, so nothing lands on the rope. */

.loc-facts,
.loc-block,
.disc-gcs,
.bg-note,
.route-video {
  padding-left: max(1.2rem, 7.5%) !important;
  padding-right: max(1.2rem, 7.5%) !important;
}

@media (max-width: 700px) {

  .loc-facts,
  .loc-block,
  .disc-gcs,
  .bg-note,
  .route-video {
    padding-left: max(1.1rem, 8.5%) !important;
    padding-right: max(1.1rem, 8.5%) !important;
  }

  .gc-list li {
    gap: .55rem;
    font-size: .9rem;
  }
}

/* Conversion note under the size tables: the whole line reads bold, with the ratio itself heavier and in gold so it stands out on the leather. */

.psize-note {
  margin-top: clamp(1.1rem, .9rem + .8vw, 1.6rem);
  text-align: center;
  max-width: 70ch;
  margin-inline: auto;
  font-weight: 600;
  color: var(--cream);
  font-size: .95rem;
  line-height: 1.6;
}

.psize-note strong {
  font-weight: 800;
  color: var(--gold-light);
  letter-spacing: .01em;
}

.uconv-note {
  font-size: .85rem;
  line-height: 1.65;
  color: var(--on-emerald-soft);
  margin-top: 1rem;
  font-weight: 600;
}

.uconv-note strong {
  font-weight: 800;
  color: var(--gold-light);
}

/* Wide panels: the rope is a fixed share of the art, so a wide panel needs the same PERCENTAGE inset as a narrow one. 7.5% was still short on the 916px location panels. */

.loc-facts,
.loc-block,
.disc-gcs,
.bg-note,
.route-video,
.uconv,
.scroll-stack-card,
.feature-banner,
.terms-hero {
  padding-left: max(1.2rem, 8%) !important;
  padding-right: max(1.2rem, 8%) !important;
}

/* =========================================================
   FIXED-HEIGHT ROPE FOR THE LOCATION PANELS. Root cause of the recurring "content sits on the stitching" bug: the panel art was painted with `background-size: 100% 100%`, so the rope scaled with panel HEIGHT while the padding that had to clear it was a fixed rem (or a % of WIDTH - CSS percentage padding never resolves against height). Those two can only agree at one panel size, so any content change reintroduced the overlap. Fix: paint the rope as three layers - a top strip and a bottom strip at a FIXED pixel height, with a vertically seamless slab tiling between them. The rope is now the same thickness on a 400px panel and a 900px one, so one constant padding is correct everywhere.
   ========================================================= */

.loc-stack .loc-block,
.loc-stack .loc-facts {
  --rope-t: 46px;
  --rope-b: 34px;
  --rope-x: 56px;
  background-color: #0b2a20 !important;
  background-image: url("../assets/leather/rope-top.webp"),
    url("../assets/leather/rope-bottom.webp"),
    url("../assets/leather/rope-left.webp"),
    url("../assets/leather/rope-right.webp"),
    url("../assets/leather/rope-middle.webp") !important;
  background-position: top center, bottom center,
    left top, right top,
    center center !important;
  background-size: 100% var(--rope-t),
    100% var(--rope-b),
    var(--rope-x) auto,
    var(--rope-x) auto,
    815px auto !important;
  background-repeat: no-repeat, no-repeat,
    repeat-y, repeat-y,
    repeat !important;
  padding-top: calc(var(--rope-t) + .75rem) !important;
  padding-bottom: calc(var(--rope-b) + .75rem) !important;
  padding-left: calc(var(--rope-x) + .55rem) !important;
  padding-right: calc(var(--rope-x) + .55rem) !important;
}

@media (max-width: 700px) {

  .loc-stack .loc-block,
  .loc-stack .loc-facts {
    --rope-t: 34px;
    --rope-b: 25px;
    --rope-x: 26px;
    padding-top: calc(var(--rope-t) + .6rem) !important;
    padding-bottom: calc(var(--rope-b) + .6rem) !important;
    padding-left: calc(var(--rope-x) + .5rem) !important;
    padding-right: calc(var(--rope-x) + .5rem) !important;
  }
}

/* =========================================================
   DISCLAIMER MODAL: the copy read as shifted to the right. The panel's own padding was symmetric, but the 34px icon rail plus its gap sits INSIDE that safe area on the left only, so the text started ~96px from the left edge and ended ~45px from the right - a 51px imbalance that reads as "pushed right". Fix: pull the icon rail into the left inset so it hangs beside the copy rather than pushing it, and let the text use the full width between the ropes. The rail keeps its own clearance from the rope.
   ========================================================= */

.disc-modal-dialog .dm-list {
  padding-left: 0 !important;
}

.disc-modal-dialog .dm-list::before {
  left: 38px;
}

@media (max-width: 700px) {
  .disc-modal-dialog .dm-row {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: .6rem;
    margin-left: -12px;
  }

  .disc-modal-dialog .dm-list::before {
    left: 18px;
  }
}

/* the heading block shares the same left edge as the copy */

/* =========================================================
   DISCLAIMER MODAL: fixed-size rope, same fix as the location panels. The modal painted `leather-square-1200x1200` with background-size 100% 100%. On a tall phone dialog that square is stretched ~1:3, so the rope thickness (and the corner screws) changed with the amount of content - measured anywhere from 6% to 31% of the width. No single padding value can clear a rope that moves, which is why the copy kept needing bigger and bigger left insets and ended up looking shifted. Painting the rope at a FIXED size makes one constant inset correct, and lets the text sit centred between the ropes again.
   ========================================================= */

/* equal, constant insets - the copy is now centred in the safe area */

@media (max-width: 700px) {
  .disc-modal-dialog {
    --rope-t: 32px;
    --rope-b: 25px;
    --rope-x: 26px;
  }

  .disc-modal-scroll {
    padding-left: calc(var(--rope-x) + .55rem) !important;
    padding-right: calc(var(--rope-x) + .55rem) !important;
    padding-top: calc(var(--rope-t) + 1rem) !important;
    padding-bottom: calc(var(--rope-b) + 3.2rem) !important;
  }

  .disc-modal-x {
    width: 32px;
    height: 32px;
  }
}

/* the rail no longer needs a negative pull now the inset is honest */

.disc-modal-dialog .dm-row {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: .85rem;
  margin-left: 0;
}

/* =========================================================
   PLOT-SIZE CARDS: centred headings + fixed-size rope. These cards still painted a square leather image with `background-size: 100% 100%`. A 398x621 card stretches that square to roughly 1:1.6, so the rope thickness changed with the card's height and the heading ended up sitting on the top stitching. Same cure as the location panels and the disclaimer modal: paint the rope at a FIXED size so one constant inset clears it everywhere.
   ========================================================= */

.psize-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(2.4rem, 1.9rem + 1.8vw, 3.1rem) clamp(1.1rem, .9rem + .8vw, 1.5rem) !important;
  padding-inline: clamp(1.9rem, 1.5rem + 1.5vw, 2.6rem) !important;
  --rope-t: 42px;
  --rope-b: 32px;
  --rope-x: 52px;
  border: 0 !important;
  border-radius: 18px !important;
  background-color: #0b2a20 !important;
  background-image: url("../assets/leather/rope-top.webp"),
    url("../assets/leather/rope-bottom.webp"),
    url("../assets/leather/rope-left.webp"),
    url("../assets/leather/rope-right.webp"),
    url("../assets/leather/rope-middle.webp") !important;
  background-position: top center, bottom center,
    left top, right top,
    center center !important;
  background-size: 100% var(--rope-t),
    100% var(--rope-b),
    var(--rope-x) auto,
    var(--rope-x) auto,
    815px auto !important;
  background-repeat: no-repeat, no-repeat,
    repeat-y, repeat-y,
    repeat !important;
  padding-top: calc(var(--rope-t) + .7rem) !important;
  padding-bottom: calc(var(--rope-b) + .7rem) !important;
  padding-left: calc(var(--rope-x) * 0.61 + .45rem) !important;
  padding-right: calc(var(--rope-x) * 0.61 + .45rem) !important;
}

/* client request: headings centred in the card */

.psize-card h3 {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--cream);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem) !important;
  margin-bottom: .8rem !important;
  margin: 0 0 .9rem !important;
  padding-inline: .2rem;
  justify-content: center !important;
  text-align: center;
}

@media (max-width: 700px) {
  .psize-card {
    --rope-t: 32px;
    --rope-b: 25px;
    --rope-x: 38px;
    padding-top: calc(var(--rope-t) + .55rem) !important;
    padding-bottom: calc(var(--rope-b) + .55rem) !important;
    padding-left: calc(var(--rope-x) * 0.61 + .35rem) !important;
    padding-right: calc(var(--rope-x) * 0.61 + .35rem) !important;
  }
}

/* the scroll fade must stop at the safe edge, not run onto the rope */

.psize-card::after {
  content: "";
  position: absolute;
  width: 34px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 54, 42, 0), rgba(8, 54, 42, .92));
  opacity: 0;
  transition: opacity .25s ease;
  top: calc(var(--rope-t) + 2.2rem);
  bottom: calc(var(--rope-b) + .4rem);
  right: var(--rope-x);
  border-radius: 0;
}

/* =========================================================
   DISCLAIMER MODAL: centred heading (client request). The head block was switched to `display: block` earlier so the title could use the full width instead of sitting beside the close button. Centre the shield icon and the title within that full width.
   ========================================================= */

.disc-modal-dialog .disc-modal-head {
  margin-left: 0;
  display: block;
  text-align: center;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.disc-modal-dialog .disc-modal-head .dm-ico-lg {
  display: grid;
  margin: 0 auto .55rem;
}

.disc-modal-dialog .disc-modal-title {
  text-align: center;
  padding-left: 2.6rem !important;
  padding-right: 2.6rem !important;
}

@media (max-width: 700px) {
  .disc-modal-dialog .disc-modal-title {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .disc-modal-dialog .disc-modal-head .dm-ico-lg {
    margin-bottom: .4rem;
  }
}

/* =========================================================
   CONTEST HERO: never clip the copy. `.ct-hero` locked its height with `aspect-ratio` so the banner artwork kept its proportions, and `overflow: hidden` quietly cut off anything that did not fit. Adding the two extra contest dates pushed the copy past that fixed height, so "Open For" was sliced in half - measured up to 144px of text simply gone at 320px wide. Treat the artwork ratio as a MINIMUM height instead of a fixed one: the banner still fills the frame when the copy is short, and the panel grows instead of cutting when the copy is tall.
   ========================================================= */

.ct-hero:not(.terms-hero) {
  aspect-ratio: auto !important;
  min-height: min(calc(100vw * 941 / 1672), 82vh);
  overflow: visible !important;
  padding-block: clamp(2rem, 1.4rem + 2.4vw, 3.4rem);
}

@media (max-width: 760px) {
  .ct-hero:not(.terms-hero) {
    min-height: min(calc(100vw * 1488 / 1057), 78vh);
    padding-block: clamp(1.8rem, 1.3rem + 2vw, 2.8rem);
    background-attachment: scroll;
  }
}

/* =========================================================
   VIDEO LIGHTBOX Clips used to play inside their card - 17% of the screen on desktop, 12% on a phone. The lightbox lifts them out so a jingle fills the screen instead of a 150px box.
   ========================================================= */

.vlb {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(.8rem, 2vw, 2rem);
}

.vlb.is-open {
  display: flex;
}

body.vlb-lock {
  overflow: hidden;
}

.vlb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 20, 15, .9);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.vlb-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 0 clamp(.4rem, 1.4vw, 1.2rem);
  width: 100%;
  height: 100%;
  animation: vlbIn .22s ease-out both;
}

@keyframes vlbIn {
  from {
    opacity: 0;
    transform: scale(.97);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vlb-inner {
    animation: none;
  }
}

/* The stage sizes itself to the clip's shape: landscape fills the width, portrait fills the height - so neither ends up letterboxed. */

.vlb-stage {
  position: relative;
  flex: 0 1 auto;
  aspect-ratio: 16 / 9;
  --vlb-h: calc(100dvh - 5.2rem);
  width: min(100%, calc(var(--vlb-h) * 16 / 9));
  max-height: var(--vlb-h);
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
}

.vlb.is-portrait .vlb-stage {
  aspect-ratio: 9 / 16;
  width: min(100%, calc(var(--vlb-h) * 9 / 16));
}

.vlb-stage video,
.vlb-stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: contain;
  background: #000;
}

.vlb-x {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50% !important;
  border: 1.5px solid rgba(201, 161, 74, .75);
  background: rgba(8, 40, 30, .85);
  color: var(--gold-light);
  cursor: pointer;
}

.vlb-x:hover {
  background: rgba(12, 58, 44, .95);
}

.vlb-nav {
  flex: none;
  display: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 161, 74, .55);
  background: rgba(8, 40, 30, .8);
  color: var(--gold-light);
  cursor: pointer;
}

.vlb.has-nav .vlb-nav {
  display: grid;
}

.vlb-nav:hover {
  background: rgba(12, 58, 44, .95);
}

/* The caption is a real row under the stage rather than an absolutely positioned overlay, so it can never sit on top of the picture. */

.vlb-cap {
  order: 3;
  flex: 0 0 100%;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .6rem;
  margin: .55rem 0 0;
  max-width: 100%;
  font-size: .9rem;
  color: var(--cream);
  text-align: center;
}

.vlb-count {
  color: var(--gold-light);
  font-weight: 600;
  font-size: .82rem;
  flex: none;
}

@media (max-width: 700px) {
  .vlb {
    padding: .6rem;
  }

  /* the arrows would crowd a phone screen - swipe handles it instead */

  .vlb.has-nav .vlb-nav {
    display: none;
  }

  .vlb-stage {
    --vlb-h: calc(100dvh - 4.2rem);
  }

  .vlb-x {
    width: 38px;
    height: 38px;
    top: -4px;
    right: -2px;
  }

  .vlb-cap {
    font-size: .82rem;
  }
}

/* =========================================================
   REEL CONTEST: Benefits for Participants + Terms & Conditions
   ========================================================= */

/* =========================================================
   Benefits
   ========================================================= */

.ben-lede {
  max-width: 62ch;
  margin: .9rem auto 0;
  text-align: center;
  color: var(--on-emerald-soft);
  font-size: clamp(.95rem, .9rem + .3vw, 1.08rem);
  line-height: 1.6;
}

.ben-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, .7rem + .8vw, 1.4rem);
  margin-top: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
}

.ben-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.2rem, 1rem + .8vw, 1.7rem);
  border-radius: 16px;
  border: 1px solid rgba(201, 161, 74, .28);
  background: rgba(8, 44, 34, .55);
}

.ben-num {
  position: absolute;
  top: clamp(1.2rem, 1rem + .8vw, 1.7rem);
  right: clamp(1.1rem, .9rem + .7vw, 1.5rem);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--emerald);
  font-weight: 800;
  background: none;
}

.ben-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: .85rem;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  color: var(--gold-light);
  font-size: 1.2rem;
}

.ben-tnc {
  display: block;
  margin-top: auto;
  padding-top: .9rem;
  text-align: right;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  animation: prizeTncBlink 1.3s ease-in-out infinite;
}

.ben-tnc:hover {
  opacity: 1 !important;
  text-decoration: underline;
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .ben-tnc {
    animation: none;
    opacity: 1;
    color: #d3341f;
  }
}

.ben-card h3 {
  margin: 0 0 .5rem;
  padding-right: 2rem;
  font-size: clamp(1rem, .94rem + .32vw, 1.16rem);
  line-height: 1.3;
  color: var(--rose-gold);
}

.ben-card p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--cream);
  opacity: .9;
}

.ben-close {
  margin-top: clamp(1.4rem, 1.1rem + 1.1vw, 2.2rem);
  padding: clamp(1.3rem, 1rem + 1vw, 2rem);
  border-radius: 18px;
  border: 1px solid rgba(201, 161, 74, .4);
  background: rgba(8, 44, 34, .68);
  text-align: center;
}

.ben-close h3 {
  margin: 0 0 .6rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  color: var(--gold-light);
  background: var(--gold-metallic);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: var(--gold-filter);
}

.ben-close p {
  max-width: 68ch;
  margin: 0 auto .55rem;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--cream);
  opacity: .92;
}

.ben-close p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .ben-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .ben-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ben-num {
    font-size: 1.6rem;
  }
}

/* All benefit cards share one fixed height on mobile so the leather border art (fixed-ratio, stretched to 100% 100%) renders at the same proportions on every card instead of stretching more on longer text. */

@media (max-width: 900px) {
  body.contest-page .ben-card {
    min-height: 330px;
  }
}

/* =========================================================
   Terms & Conditions
   ========================================================= */

.tnc-lede {
  max-width: 60ch;
  margin: .9rem auto 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: clamp(.92rem, .88rem + .28vw, 1.02rem);
  line-height: 1.6;
}

#terms-details {
  scroll-margin-top: 140px;
}

.tnc-list {
  counter-reset: tnc;
  list-style: none;
  max-width: 900px;
  margin: clamp(1.5rem, 1.2rem + 1.2vw, 2.3rem) auto 0;
  padding: 0;
}

.tnc-list>li {
  counter-increment: tnc;
  position: relative;
  padding: clamp(1rem, .85rem + .7vw, 1.45rem) 0 clamp(1rem, .85rem + .7vw, 1.45rem) clamp(2.6rem, 2.2rem + 1.4vw, 3.4rem);
  border-bottom: 1px solid rgba(11, 61, 47, .14);
}

.tnc-list>li:last-child {
  border-bottom: 0;
}

.tnc-list>li::before {
  content: counter(tnc);
  position: absolute;
  left: 0;
  top: clamp(1rem, .85rem + .7vw, 1.45rem);
  display: grid;
  place-items: center;
  width: clamp(1.9rem, 1.6rem + .9vw, 2.4rem);
  height: clamp(1.9rem, 1.6rem + .9vw, 2.4rem);
  border-radius: 50%;
  background: var(--emerald-deep);
  color: var(--gold-light);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .92rem;
  line-height: 1;
}

.tnc-list>li>h3 {
  margin: 0 0 .5rem;
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  line-height: 1.3;
  color: var(--emerald-deep);
}

.tnc-list>li>p {
  margin: 0 0 .6rem;
  font-size: .93rem;
  line-height: 1.68;
  color: var(--ink-soft);
}

.tnc-list>li>p:last-child {
  margin-bottom: 0;
}

.tnc-list>li>p strong {
  color: var(--emerald-deep);
  font-weight: 700;
}

/* prize table inside clause 14 */

.tnc-prizes {
  display: grid;
  gap: .35rem;
  margin: .2rem 0 .9rem;
}

.tnc-prize {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .8fr);
  gap: .6rem;
  align-items: baseline;
  padding: .5rem .85rem;
  border-radius: 10px;
  background: rgba(11, 61, 47, .06);
  font-size: .9rem;
}

.tnc-prize-lbl {
  color: var(--emerald-deep);
  font-weight: 700;
}

/* #856218 measured 4.39:1 on the tinted prize row - just under AA for 14px text. Deepened until it clears 4.5:1 on both row shades. */

.tnc-prize-amt {
  color: #6F5013;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tnc-prize-win {
  color: var(--ink-soft);
  text-align: right;
}

.tnc-prize-total {
  background: rgba(11, 61, 47, .13);
  border: 1px solid rgba(201, 161, 74, .35);
}

@media (max-width: 560px) {
  .tnc-prize {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: .15rem;
  }

  .tnc-prize-win {
    grid-column: 1 / -1;
    text-align: left;
    font-size: .84rem;
  }
}

/* =========================================================
   TERMS PAGE: letterhead + Google Form note
   ========================================================= */

.terms-letterhead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin-bottom: clamp(1.2rem, .95rem + .9vw, 1.8rem);
}

.terms-letterhead-lion {
  height: clamp(44px, 6vw, 60px);
  width: auto;
}

.terms-letterhead-logo {
  height: clamp(48px, 7vw, 68px);
  width: auto;
}

.tnc-form-note {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  max-width: 760px;
  margin: clamp(1.1rem, .9rem + .8vw, 1.7rem) auto 0;
  padding: clamp(.9rem, .75rem + .5vw, 1.2rem) clamp(1rem, .85rem + .5vw, 1.35rem);
  border-radius: 14px;
  border: 1px solid rgba(133, 98, 24, .35);
  background: rgba(133, 98, 24, .08);
}

.tnc-form-note i {
  flex: none;
  margin-top: .2rem;
  font-size: 1.1rem;
  color: #856218;
}

.tnc-form-note p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.tnc-form-note strong {
  color: var(--emerald-deep);
  font-weight: 700;
}

/* =========================================================
   REEL CONTEST: Participant Registration form (terms.html)
   ========================================================= */

.reg-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem) clamp(1.3rem, 1.05rem + 1vw, 2rem);
  border-radius: 20px;
  border: 1px solid rgba(201, 161, 74, .3);
  background: rgba(8, 44, 34, .55);
}

.reg-letterhead {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin-bottom: .9rem;
}

.reg-letterhead img:first-child {
  height: 40px;
  width: auto;
}

.reg-letterhead img:last-child {
  height: 44px;
  width: auto;
}

.reg-wrap .ct-sec-title {
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem);
}

.reg-lede {
  margin: .6rem 0 0;
  text-align: center;
  color: var(--on-emerald-soft);
  font-size: .92rem;
}

.reg-form {
  margin-top: clamp(1.2rem, 1rem + .8vw, 1.7rem);
}

.reg-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem;
  margin-bottom: .9rem;
}

.reg-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.reg-field>span,
.reg-field>legend {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--gold-light);
  padding: 0;
}

.reg-field i {
  color: #e8846f;
  font-style: normal;
  margin-left: .15rem;
}

.reg-field input[type="text"],
.reg-field input[type="tel"],
.reg-field input[type="number"],
.reg-field input[type="url"] {
  width: 100%;
  padding: .6rem .8rem;
  border-radius: 10px;
  border: 1px solid rgba(201, 161, 74, .35);
  background: rgba(4, 26, 20, .55);
  color: var(--cream);
  font-size: .92rem;
  font-family: inherit;
}

.reg-field input::placeholder {
  color: rgba(240, 236, 224, .4);
}

.reg-field input:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.reg-field input:disabled {
  opacity: .35;
  cursor: not-allowed;
}

.reg-field input[type="number"]::-webkit-outer-spin-button,
.reg-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.reg-field input[type="number"] {
  -moz-appearance: textfield;
}

.reg-tel-group {
  display: flex;
  align-items: stretch;
  border-radius: 10px;
  border: 1px solid rgba(201, 161, 74, .35);
  background: rgba(4, 26, 20, .55);
  overflow: hidden;
}

.reg-tel-group:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.reg-tel-prefix {
  flex: none;
  display: flex;
  align-items: center;
  padding: .6rem .7rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--gold-light);
  background: rgba(201, 161, 74, .12);
  border-right: 1px solid rgba(201, 161, 74, .3);
}

.reg-tel-group input[type="tel"] {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: .6rem .8rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--cream);
  font-size: .92rem;
  font-family: inherit;
}

.reg-tel-group input[type="tel"]:focus {
  outline: none;
}

.reg-tel-err {
  margin: .3rem 0 0;
  font-size: .78rem;
  color: #ff9a8a;
}

.reg-tel-status {
  display: block;
  margin: .35rem 0 0;
  font-size: .78rem;
  font-weight: 600;
}

.reg-tel-status.is-checking {
  color: var(--sage);
}

.reg-tel-status.is-found {
  color: #7fe0a8;
}

.reg-tel-status.is-new {
  color: var(--gold-light);
}

.reg-tel-status.is-error {
  color: #ff8a80;
}

.reg-tel-status[hidden] {
  display: none;
}

.reg-returning-note {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.2rem;
  padding: .8rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(127, 224, 168, .35);
  background: rgba(127, 224, 168, .1);
  color: #cdeedb;
  font-size: .88rem;
}

.reg-returning-note i {
  color: #7fe0a8;
  font-size: 1.1rem;
  flex: none;
}

.reg-returning-note[hidden] {
  display: none;
}

#regNewFields[hidden],
#regReelUrls[hidden] {
  display: none;
}

.reg-radios {
  border: 0;
  margin: 0;
  padding: 0;
}

.reg-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  padding-top: .15rem;
}

.reg-radio-group label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .88rem;
  color: var(--cream);
  cursor: pointer;
}

.reg-radio-group input {
  accent-color: var(--gold);
  width: 15px;
  height: 15px;
}

.reg-platforms {
  border: 0;
  margin: 0 0 .9rem;
  padding: 0;
}

.reg-hint {
  margin: .1rem 0 .6rem;
  font-size: .78rem;
  color: var(--on-emerald-soft);
}

.reg-platform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
}

.reg-platform {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .55rem .6rem;
  border-radius: 10px;
  border: 1px solid rgba(201, 161, 74, .22);
}

.reg-check {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .86rem;
  color: var(--cream);
  cursor: pointer;
}

.reg-check input[type="checkbox"] {
  accent-color: var(--gold);
  width: 15px;
  height: 15px;
  flex: none;
}

.reg-platform input[type="text"],
.reg-platform input[type="url"] {
  padding: .45rem .6rem;
  font-size: .84rem;
}

.reg-err {
  margin: .5rem 0 0;
  font-size: .8rem;
  color: #ff9a8a;
}

.reg-form-err {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: .9rem 0 0;
  padding: .8rem 1rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 154, 138, .45);
  background: rgba(255, 154, 138, .1);
  color: #ffb3a3;
  font-size: .86rem;
  font-weight: 600;
}

.reg-form-err::before {
  content: "⚠";
  flex: none;
  font-size: 1.1rem;
}

.reg-declare {
  align-items: flex-start;
  gap: .55rem;
  margin: .3rem 0 1.2rem;
  padding: .7rem .85rem;
  border-radius: 10px;
  background: rgba(201, 161, 74, .08);
}

.reg-declare input {
  margin-top: .2rem;
}

.reg-declare span {
  font-size: .86rem;
  line-height: 1.5;
  color: var(--cream);
}

.reg-declare a {
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.reg-submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
}

.reg-submit-spin {
  display: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(8, 40, 30, .3);
  border-top-color: #082818;
  animation: regSpin .7s linear infinite;
}

.reg-submit.is-loading .reg-submit-spin {
  display: inline-block;
}

.reg-submit.is-loading .reg-submit-txt {
  opacity: .7;
}

@keyframes regSpin {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 700px) {
  .reg-row {
    grid-template-columns: 1fr;
    gap: .8rem;
  }

  .reg-platform-grid {
    grid-template-columns: 1fr;
  }
}

.reel-urls {
  border: 0;
  margin: 0 0 .9rem;
  padding: 0;
}

.reel-url-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  margin-bottom: .7rem;
}

.reel-url-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.reel-url-row input[type="url"] {
  flex: 1;
  width: 100%;
  padding: .6rem .8rem;
  border-radius: 10px;
  border: 1px solid rgba(201, 161, 74, .35);
  background: rgba(4, 26, 20, .55);
  color: var(--cream);
  font-size: .92rem;
  font-family: inherit;
}

.reel-url-row input[type="url"]::placeholder {
  color: rgba(240, 236, 224, .4);
}

.reel-url-row input[type="url"]:focus {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.reel-url-remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(201, 161, 74, .3);
  background: transparent;
  color: var(--gold-light);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}

.reel-url-remove:hover {
  background: rgba(201, 161, 74, .12);
  border-color: var(--gold);
}

.reel-url-add {
  width: 100%;
  justify-content: center;
  gap: .5rem;
  font-size: .85rem;
  padding: .55rem 1rem;
}

/* =========================================================
   Sticky logo download button (contest page only)
   ========================================================= */

.logo-download-sticky {
  position: fixed;
  left: clamp(1rem, 2vw, 1.6rem);
  bottom: clamp(1rem, 2vw, 1.6rem);
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--emerald-deep);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: var(--shadow-lg);
  transition: transform .3s var(--ease-out), opacity .3s ease;
}

.logo-download-sticky:hover {
  transform: translateY(-2px) scale(1.03);
  color: var(--emerald-deep);
}

.logo-download-sticky.is-hidden-by-cta {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

@media (max-width: 640px) {
  .logo-download-sticky {
    padding: .7rem .9rem;
    font-size: .78rem;
  }
}

/* =========================================================
   Download confirmation toast
   ========================================================= */

.download-toast {
  position: fixed;
  left: 50%;
  bottom: clamp(1.2rem, 3vw, 2rem);
  transform: translate(-50%, 20px);
  z-index: var(--z-overlay);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .75rem 1.2rem;
  border-radius: 999px;
  background: var(--emerald-deep);
  color: var(--cream);
  font-size: .88rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}

.download-toast i {
  color: #6fd39a;
}

.download-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* =========================================================
   2026-09-21 — NAV LANGUAGE + SITE-WIDE AOS / HOVER ENHANCEMENTS
   ========================================================= */

/* Language switch now lives in the right side of the main navbar/header. */

.site-header .lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 40px;
  padding: 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform .32s var(--ease-out), border-color .32s ease,
    background .32s ease, box-shadow .32s ease;
  flex: none;
}

.site-header .lang-switch:hover {
  transform: translateY(-2px);
  border-color: var(--gold-light);
  background: rgba(201, 161, 74, 0.11);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.site-header .lang-ico {
  color: var(--gold-light);
  margin-right: 1px;
}

.site-header .lang-btn {
  color: var(--cream);
  padding: 4px 5px;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  border-radius: 12px;
  transition: color .25s ease, background .25s ease, transform .25s ease;
}

.site-header .lang-btn:hover,
.site-header .lang-btn.is-active {
  color: var(--emerald-deep);
  background: var(--gold-light);
  text-decoration: none;
  transform: translateY(-1px);
}

.site-header .lang-sep {
  color: rgba(255, 255, 255, 0.34);
}

/* Topbar now contains only its location/identity note. */

.topbar-inner {
  display: flex;
  align-items: center;
  min-height: 38px;
  gap: 1rem;
  justify-content: flex-start;
}

/* Shared hover motion applied by JS to interactive/content cards only. */

.gc-hover-lift {
  transition: transform .38s var(--ease-out), box-shadow .38s var(--ease-out),
    border-color .32s ease, filter .32s ease !important;
  will-change: transform;
}


.gc-hover-link {
  transition: transform .3s var(--ease-out), color .25s ease,
    background-color .25s ease, border-color .25s ease, box-shadow .3s ease !important;
}

.gc-hover-link:hover {
  transform: translateY(-2px);
}

.gc-hover-media {
  overflow: hidden;
}

.gc-hover-media img {
  transition: transform .65s var(--ease-out), filter .45s ease;
}

.gc-hover-media:hover img {
  transform: scale(1.035);
  filter: saturate(1.05) contrast(1.02);
}

/* Give headings a refined hover response without changing layout. */

main h1,
main h2,
main h3,
main h4 {
  transition: text-shadow .3s ease, color .3s ease;
}

main h1:hover,
main h2:hover,
main h3:hover,
main h4:hover {
  text-shadow: 0 9px 24px rgba(0, 0, 0, 0.12);
}

/* AOS should never make translated/reduced-motion content inaccessible. */

@media (prefers-reduced-motion: reduce) {
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .gc-hover-lift:hover,
  .gc-hover-link:hover,
  .site-header .lang-switch:hover {
    transform: none !important;
  }
}

@media (hover: none) {

  .gc-hover-lift:hover,
  .gc-hover-link:hover,
  .site-header .lang-switch:hover {
    transform: none !important;
  }
}

@media (max-width: 860px) {
  .site-header .lang-switch {
    min-height: 36px;
    padding: 3px 6px;
    gap: 2px;
  }

  .site-header .lang-btn {
    padding: 3px 4px;
    font-size: 11px;
  }
}

@media (max-width: 520px) {
  .site-header .lang-ico {
    display: none;
  }

  .site-header .lang-switch {
    min-height: 32px;
    padding: 2px 4px;
  }

  .site-header .lang-btn {
    padding: 3px;
    font-size: 10px;
  }
}

@media (max-width: 430px) {
  .site-header .brand-lion {
    height: 36px;
  }

  .site-header .brand-img {
    height: 34px !important;
  }

  .header-cta {
    gap: 7px;
  }

  .header-cta .search-btn,
  .header-cta .head-social {
    width: 31px;
    height: 31px;
  }

  .nav-toggle {
    width: 30px;
    height: 25px;
  }

  .site-header .lang-switch {
    min-height: 31px;
  }
}

/* =========================================================
   TRUST MARQUEE
   ========================================================= */

.gc-trust-marquee {
  width: 100%;
  height: 60px;
  overflow: hidden;
  display: flex;
  align-items: center;
  position: relative;
}

.gc-trust-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: gcTrustMarqueeScroll 38s linear infinite;
  will-change: transform;
}

.gc-trust-marquee:hover .gc-trust-marquee-track {
  animation-play-state: paused;
}

.gc-trust-marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.gc-trust-marquee-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: #ffffff;
  padding: 0 34px;
}

.gc-trust-marquee-item::after {
  content: "";
  position: absolute;
  right: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffffff;
}

@keyframes gcTrustMarqueeScroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 991px) {
  .gc-trust-marquee-track {
    animation-duration: 32s;
  }

  .gc-trust-marquee-item {
    font-size: 14px;
    padding: 0 28px;
  }
}

@media (max-width: 575px) {

  .gc-trust-marquee-section,
  .gc-trust-marquee {
    height: 52px;
    max-height: 52px;
  }

  .gc-trust-marquee-track {
    animation-duration: 28s;
  }

  .gc-trust-marquee-item {
    font-size: 13px;
    padding: 0 22px;
  }
}

/* =========================================================
   LANGUAGE DROPDOWN
   ========================================================= */

.gc-lang-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  z-index: 1000;
}

.gc-lang-current {
  height: 30px;
  min-width: 35px;
  padding: 0 5px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: transparent;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: all 0.3s ease;
}

.gc-lang-current i {
  font-size: 10px;
  transition: transform 0.3s ease;
}

.gc-lang-current:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.35);
}

.gc-lang-dropdown.is-open .gc-lang-current i {
  transform: rotate(180deg);
}

/* DROPDOWN */

.gc-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 100px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.25s ease;
}

.gc-lang-dropdown.is-open .gc-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* OPTIONS */

.gc-lang-option {
  width: 100%;
  border: 0;
  background: transparent;
  color: #222222;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
}

.gc-lang-option:hover {
  background: #f2f2f2;
}

/* ACTIVE LANGUAGE KO DROPDOWN ME HIDE KARNA */

.gc-lang-option.is-active {
  display: none;
}

/* MOBILE */

@media (max-width: 767px) {
  .gc-lang-current {
    height: 25px;
    min-width: 35px;
    padding: 0 3px;
    font-size: 13px;
  }

  .gc-lang-menu {
    min-width: 90px;
  }

  .gc-lang-option {
    font-size: 13px;
  }
}

/* =========================================================
   GREEN CITY SEZ — 3-PHASE STORY 01–03 horizontal / 04–05 normal / 06–08 sticky stack
   ========================================================= */

/* =========================================================
   SHARED
   ========================================================= */

.gcs-story,
.gcs-story-normal,
.gcs-story-stack {
  position: relative;
  width: 100%;
  background: #f6f4ed;
}

.gcs-story {
  overflow: clip;
}

/* =========================================================
   PHASE 1 — FREEZE THE VISIBLE UPPER SECTIONS JS adds this class only while Cards 01–03 are progressing. Their exact viewport positions are captured once, then held without per-frame transforms, so the upper composition stays completely still until Card 03 finishes.
   ========================================================= */

.gcs-upper-freeze-placeholder {
  display: block;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  pointer-events: none;
  visibility: hidden;
}

.gcs-upper-frozen {
  transition: none !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: paint;
  will-change: transform;
  transform-origin: top left;
}

.gcs-story-scroll {
  position: relative;
  width: 100%;
}

@media (min-width: 1301px) {
  .gcs-story-stage {
    top: 30%;
  }
}

.gcs-story-title {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  z-index: 20;
}

.gcs-story-title span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid rgba(32, 72, 51, 0.16);
  border-radius: 100px;
  background: rgba(246, 244, 237, 0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #294f3c;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

/* =========================================================
   PHASE 1 — CARDS 01–03 HORIZONTAL SCROLL
   ========================================================= */

.gcs-story-window {
  position: relative;
  width: 100%;
  height: 460px;
  overflow: hidden;
  border-radius: 28px;
}

.gcs-story-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transform: translate3d(0px, 0px, 0px);
  will-change: transform;
  backface-visibility: hidden;
  pointer-events: none;
}

.gcs-story-slide.gcs-is-current {
  pointer-events: auto;
}

/* =========================================================
   SHARED CARD DESIGN — ALL 8 CARDS
   ========================================================= */

.gcs-story-card {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(33, 70, 50, 0.10);
  border-radius: 28px;
}

.gcs-story-image {
  position: relative;
  width: 50%;
  flex: 0 0 50%;
  overflow: hidden;
  background: #e2e7e2;
}

.gcs-story-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
      rgba(18, 42, 28, 0.00),
      rgba(18, 42, 28, 0.10));
}

.gcs-story-image img {
  width: 100%;
  height: 100%;
  display: block;
  transform: scale(1.01);
  transition: transform 0.8s ease;
}

.gcs-story-content {
  width: 50%;
  flex: 0 0 50%;
  padding: 6px 10px 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #ffffff;
  border: 2px solid var(--gold) !important;
}

.gcs-story-count {
  display: inline-block;
  margin-bottom: 10px;
  color: rgba(41, 79, 60, 0.35);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 3px;
}

.gcs-story-content h3 {
  max-width: 500px;
  margin: 10px 0;
  color: #315b46;
  font-size: 45px;
  line-height: 1;
  font-weight: 700;
}

.gcs-story-content p {
  max-width: 520px;
  margin: 0;
  color: #778279;
  font-size: 16px;
  line-height: 1.5;
}

/* =========================================================
   PHASE 2 — CARDS 04–05 NORMAL FLOW
   ========================================================= */

.gcs-story-normal {
  padding: 0 0 20px;
}

/* While 01–03 are pinned, JS fixes only this inner container once. No per-frame transform means Card 04 stays pixel-stable. */

.gcs-story-normal>.container.gcs-normal-held {
  z-index: 5;
  transition: none !important;
  transform: none !important;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.gcs-story-stage {
  position: sticky;
  top: 10px;
  width: 100%;
  padding: 18px 0 35px;
  overflow: hidden;
  z-index: 10;
}

.gcs-story-normal-card {
  position: relative;
  width: 100%;
  height: 460px;
}

.gcs-story-normal-card+.gcs-story-normal-card {
  margin-top: 20px;
}

/* =========================================================
   PHASE 3 — CARDS 06–08 CSS STICKY STACK
   ========================================================= */

.gcs-story-stack {
  padding: 0 0 20px;
}

.gcs-story-stack-card {
  position: relative;
  width: 100%;
  height: 460px;
  margin-bottom: 20px;
}

/* * Card 06 sticks first. */

.gcs-story-stack-card:nth-child(1) {
  position: sticky;
  top: 100px;
  z-index: 20;
}

/* * Card 07 comes from below, layers over 06, * then sticks at 110px. */

.gcs-story-stack-card:nth-child(2) {
  position: sticky;
  top: 110px;
  z-index: 21;
}

/* * Card 08 is NOT sticky. * It scrolls normally from below over 06/07. * When its top reaches the sticky stack area, * the section bottom also reaches the sticky cards, * so 06 + 07 release and everything scrolls away naturally. */

.gcs-story-stack-card:nth-child(3) {
  position: relative;
  top: auto;
  z-index: 22;
}

.gcs-story-stack-card:last-child {
  margin-bottom: 0;
}

/* =========================================================
   CIRCLE ARROW
   ========================================================= */

.gcs-story-arrow {
  width: 100px;
  height: 45px;
  flex: 0 0 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #315b46;
  border-radius: 50%;
  background: #315b46;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  transition: transform 0.35s ease,
    background 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease;
}

.gcs-story-arrow i {
  transition: transform 0.35s ease;
}

.gcs-story-arrow:hover {
  transform: translateY(-4px);
  background: #ffffff;
  color: #315b46;
  box-shadow: 0 14px 30px rgba(37, 74, 54, 0.18);
}

.gcs-story-arrow:hover i {
  transform: translateX(5px);
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {
  .gcs-story-stage {
    top: 70px;
  }

  .gcs-story-window,
  .gcs-story-normal-card,
  .gcs-story-stack-card {
    height: 400px;
  }

  .gcs-story-content {
    padding: 35px;
  }

  .gcs-story-content h3 {
    font-size: 31px;
  }

  .gcs-story-content p {
    font-size: 15px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .gcs-story-stage {
    top: 20px;
    padding-top: 10px;
    padding-bottom: 20px;
  }

  .gcs-story-title {
    margin-bottom: 12px;
  }

  .gcs-story-title span {
    min-height: 34px;
    padding: 0 14px;
    font-size: 11px;
  }

  .gcs-story-window,
  .gcs-story-normal-card,
  .gcs-story-stack-card {
    height: 560px;
    border-radius: 20px;
  }

  .gcs-story-normal-card+.gcs-story-normal-card {
    margin-top: 15px;
  }

  .gcs-story-stack-card {
    margin-bottom: 15px;
  }

  .gcs-story-card {
    flex-direction: column;
  }

  .gcs-story-image {
    width: 100%;
    flex: 0 0 200px;
    height: 200px;
  }

  .gcs-story-content {
    width: 100%;
    flex: 1;
    padding: 5px 10px 15px;
    min-height: 0;
  }

  .gcs-story-count {
    margin-bottom: 5px;
  }

  .gcs-story-content h3 {
    margin-bottom: 0px;
    font-size: 17px;
  }

  .gcs-story-content p {
    font-size: 14px;
    line-height: 1.65;
  }

  .gcs-story-arrow {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .disc-btn {
    margin-top: 10px !important;
    padding: 5px 5px;
  }

  .disc-btn-ico {
    width: 25px;
    height: 25px;
  }
}

/* =========================================================
   STORY CONTENT — PREMIUM DETAIL DESIGN
   ========================================================= */

.gcs-detail-content {
  width: 100%;
}

/* TOP LABEL */

.gcs-detail-label {
  width: fit-content;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  margin-bottom: 24px;
  border: 1px solid rgba(196, 151, 61, 0.55);
  border-radius: 50px;
  overflow: hidden;
  background: #ffffff;
}

.gcs-detail-number {
  width: 48px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #c59a45;
  color: #ffffff;
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
}

.gcs-detail-label-text {
  padding: 0 22px;
  color: #24523c;
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* TITLE */

.gcs-detail-title {
  margin: 0 0 14px;
  color: #174c35;
  font-size: 46px;
  line-height: 1.08;
  font-weight: 700;
}

/* DESCRIPTION */

.gcs-detail-desc {
  max-width: 600px;
  margin: 0 0 28px;
  color: #69776e;
  font-size: 16px;
  line-height: 1.75;
}

/* POINTS */

.gcs-detail-points {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.gcs-detail-point {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 5px 0;
  transition: transform 0.3s ease;
}

.gcs-detail-point:hover {
  transform: translateX(6px);
}

/* ICON */

.gcs-detail-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fbfaf6;
  border: 1px solid var(--gold);
  color: #1d573d;
  font-size: 20px;
  box-shadow: 0 7px 18px rgba(37, 74, 53, 0.08);
  transition: background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
    font-weight: 900;
}

.gcs-detail-point:hover .gcs-detail-icon {
  background: #214f39;
  color: #ffffff;
  transform: scale(1.06);
}

/* POINT TEXT */

.gcs-detail-point>div {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.gcs-detail-point strong {
  color: var(--emerald-deep);
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
}

.gcs-detail-point>div>span {
  color: black;
  font-size: 11px;
  line-height: 1.5;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {
  .gcs-detail-title {
    font-size: 36px;
  }

  .gcs-detail-desc {
    font-size: 15px;
  }

  .gcs-detail-icon {
    width: 46px;
    height: 46px;
    flex-basis: 46px;
    font-size: 17px;
  }

  .gcs-detail-point strong {
    font-size: 15px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .gcs-detail-label {
    min-height: 36px;
    margin-bottom: 16px;
  }

  .gcs-detail-number {
    width: 42px;
    min-height: 36px;
    font-size: 11px;
  }

  .gcs-detail-label-text {
    padding: 0 15px;
    font-size: 10px;
    letter-spacing: 1.3px;
  }

  .gcs-detail-title {
    margin-bottom: 10px;
    font-size: 29px;
  }

  .gcs-detail-desc {
    margin-bottom: 18px;
    font-size: 14px;
    line-height: 1.6;
  }

  .gcs-detail-points {
    gap: 0px;
  }

  .gcs-detail-point {
    gap: 12px;
    padding: 4px 0;
  }

  .gcs-detail-icon {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
    font-size: 16px;
  }

  .gcs-detail-point strong {
    font-size: 12px;
  }

  .gcs-detail-point>div>span {
    font-size: 10px;
  }

  .disc-title {
    padding-bottom: 0px;
  }

  .disc-row {
    margin-top: 5px;
  }
}

/* =========================================================
   FEATURED SWIPER — MOBILE PREV / NEXT BUTTON FIX
   ========================================================= */

@media (max-width: 767px) {
  .gcfi-swiper-wrap {
    position: relative !important;
    overflow: visible !important;
  }

  .gcfi-swiper {
    position: relative !important;
    overflow: hidden !important;
  }

  .gcfi-nav-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    width: 35px !important;
    height: 35px !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #0d4a38 !important;
    border: 1px solid rgba(13, 74, 56, 0.22) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;
    transform: translateY(-50%) !important;
    z-index: 50 !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
  }

  /* PREVIOUS */

  .gcfi-nav-prev {
    left: -10px !important;
    right: auto !important;
  }

  /* NEXT */

  .gcfi-nav-next {
    right: -10px !important;
    left: auto !important;
  }

  .gcfi-nav-btn i {
    font-size: 15px !important;
    line-height: 1 !important;
  }

  .disc-btn-row {
    margin-top: 10px;
    justify-content: center;
  }
}

/* =========================================================
   VERTICAL IMAGE DISCLAIMER
   ========================================================= */

.gc-vertical-note {
  position: absolute;
  top: 50%;
  right: 22px;
  z-index: 5;
  display: block;
  color: #ffffff;
  font-size: 7px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transform: translate(50%, -50%) rotate(90deg);
  transform-origin: center;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65),
    0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Tablet */

@media (max-width: 991px) {
  .gc-vertical-note {
    right: 7px;
    font-size: 11px;
  }
}

/* Mobile */

@media (max-width: 575px) {
  .gc-vertical-note {
    right: 14px;
    font-size: 5px;
    letter-spacing: 0;
  }
}

/* =========================================================
   ALL 8 CARDS — STICKY STACK
   ========================================================= */

.gcs-all-stack {
  position: relative;
  width: 100%;
  padding: 20px 0;
  background: #f6f4ed;
}

.gcs-all-stack>.container {
  position: relative;
}

/* SHARED CARD */

/* CARD 01 */

.gcs-all-stack-card:nth-child(1) {
  top: 100px;
  z-index: 11;
}

/* CARD 02 */

.gcs-all-stack-card:nth-child(2) {
  top: 110px;
  z-index: 12;
}

/* CARD 03 */

.gcs-all-stack-card:nth-child(3) {
  top: 120px;
  z-index: 13;
}

/* CARD 04 */

.gcs-all-stack-card:nth-child(4) {
  top: 130px;
  z-index: 14;
}

/* CARD 05 */

.gcs-all-stack-card:nth-child(5) {
  top: 140px;
  z-index: 15;
}

/* CARD 06 */

.gcs-all-stack-card:nth-child(6) {
  top: 150px;
  z-index: 16;
}

/* CARD 07 */

.gcs-all-stack-card:nth-child(7) {
  top: 160px;
  z-index: 17;
}

/* CARD 08 */

.gcs-all-stack-card:nth-child(8) {
  top: 170px;
  z-index: 18;
}

/* NEW TOTAL = 9 CARDS */

.gcs-all-stack-card:nth-child(9) {
  top: 180px;
  z-index: 19;
}

.gcs-all-stack-card:nth-child(10) {
  top: 190px;
  z-index: 20;
}

.gcs-all-stack-card:last-child {
  margin-bottom: 0;
}

@media (max-width: 1300px) {
  .gcs-all-stack-card:nth-child(1) {
    top: 65px;
  }

  .gcs-all-stack-card:nth-child(2) {
    top: 70px;
  }

  .gcs-all-stack-card:nth-child(3) {
    top: 75px;
  }

  .gcs-all-stack-card:nth-child(4) {
    top: 80px;
  }

  .gcs-all-stack-card:nth-child(5) {
    top: 85px;
  }

  .gcs-all-stack-card:nth-child(6) {
    top: 90px;
  }

  .gcs-all-stack-card:nth-child(7) {
    top: 95px;
  }

  .gcs-all-stack-card:nth-child(8) {
    top: 100px;
  }

  .gcs-all-stack-card:nth-child(9) {
    top: 105px;
  }

  .gcs-all-stack-card:nth-child(10) {
    top: 110px;
  }
}

@media (max-width: 767px) {
  .gcs-all-stack-card {
    height: 560px;
    margin-bottom: 15px;
  }
}

/* =========================================================
   HEADER BOTTOM METALLIC LINE + MOVING WHITE PILL
   ========================================================= */

.site-header {
  top: 0;
  z-index: var(--z-sticky);
  border-top: 1px solid var(--gold);
  transition: box-shadow .4s var(--ease-out), background .3s ease;
  background: var(--emerald-deep);
  border-top-width: 0 !important;
  border-bottom-width: 12px !important;
  position: sticky;
  overflow: visible;
  border-bottom: 0 !important;
}

/* Rose metallic bottom border */

.site-header::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0px;
  height: 2px;
  z-index: 20;
  background: linear-gradient(90deg,
      #74404a 0%,
      #b86f79 16%,
      #e8b4a8 36%,
      #ffd8d0 50%,
      #e8b4a8 64%,
      #b86f79 84%,
      #74404a 100%);
  box-shadow: 0 1px 2px rgba(255, 220, 215, 0.25),
    0 2px 7px rgba(201, 130, 140, 0.25);
  pointer-events: none;
}

/* Moving white pill */

.site-header::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: -70px;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0),
      #ffffff 30%,
      #fffaf8 50%,
      #ffffff 70%,
      rgba(255, 255, 255, 0));
  border-radius: 999px !important;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.95),
    0 0 10px rgba(255, 235, 230, 0.80),
    0 0 18px rgba(232, 180, 168, 0.65);
  z-index: 21;
  pointer-events: none;
  animation: gcHeaderLightMove 3.2s linear infinite;
}

@keyframes gcHeaderLightMove {
  0% {
    left: -70px;
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  92% {
    opacity: 1;
  }

  100% {
    left: calc(100% + 70px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header::after {
    animation: none;
    display: none;
  }
}

/* =========================================================
   STACK CARDS — AUTO HEIGHT FOR MORE CONTENT
   ========================================================= */

.gcs-all-stack-card {
  position: sticky;
  width: 100%;
  margin-bottom: 20px;
  transform: none;
  will-change: auto;
  border-radius: 13px !important;
  overflow: hidden !important;
  height: auto !important;
  min-height: 460px;
}

.gcs-all-stack-card .gcs-story-card {
  height: auto !important;
  min-height: 460px;
  overflow: visible !important;
}

.gcs-all-stack-card .gcs-story-content {
  height: auto !important;
  min-height: 100%;
  overflow: visible !important;
}

/* =========================================================
   MOBILE — AUTO HEIGHT + BUTTON CENTER
   ========================================================= */

@media (max-width: 767px) {
  .gcs-all-stack-card {
    height: auto !important;
    min-height: 500px;
  }

  .gcs-all-stack-card .gcs-story-card {
    height: auto !important;
    min-height: 500px;
    overflow: visible !important;
  }

  .gcs-all-stack-card .gcs-story-content {
    height: auto !important;
    overflow: visible !important;
  }

  /* Tutorial / CTA button center */

  .gcs-all-stack-card .gcs-story-content .btn,
  .gcs-all-stack-card .gcs-story-content .gcs-story-btn,
  .gcs-all-stack-card .gcs-story-content>a:last-child {
    display: flex !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    align-items: center !important;
  }
}

/* =========================================================
   MAIN LAYOUT
   ========================================================= */

/* =========================================================
   BRAND
   ========================================================= */

/* =========================================================
   COLUMNS
   ========================================================= */

/* CONNECT wider */

/* =========================================================
   THIN VERTICAL METALLIC DIVIDERS
   ========================================================= */

/* Small diamond on divider */

/* =========================================================
   TITLES
   ========================================================= */

/* Small underline */

/* =========================================================
   LINKS
   ========================================================= */

/* =========================================================
   MAP
   ========================================================= */

/* =========================================================
   SOCIAL ICONS
   ========================================================= */

/* =========================================================
   COMMON HOVER Background bilkul same rahega
   ========================================================= */

/* =========================================================
   YOUTUBE
   ========================================================= */

/* =========================================================
   INSTAGRAM Original style gradient
   ========================================================= */

/* =========================================================
   FACEBOOK
   ========================================================= */

/* =========================================================
   LINKEDIN
   ========================================================= */

/* =========================================================
   WHATSAPP
   ========================================================= */

/* YouTube */

/* Instagram */

/* Facebook */

/* LinkedIn */

/* WhatsApp */

/* =========================================================
   BOTTOM DISCLAIMER
   ========================================================= */

/* Metallic top divider */

/* =========================================================
   TABLET
   ========================================================= */

/* =========================================================
   MOBILE
   ========================================================= */

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

/* =========================================================
   GREEN CITY SEZ — FINAL RESPONSIVE VIDEO PRELOADER Desktop: leather BG + desktop video + text Tablet: leather BG + mobile video LEFT + text RIGHT Mobile: mobile video ONLY
   ========================================================= */

/* =========================================================
   BASE
   ========================================================= */

.page-loader {
  flex-direction: column;
  gap: 1.6rem;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-image: none !important;
  background-color: #071c15 !important;
  box-sizing: border-box;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  z-index: 100000 !important;
  overflow: hidden !important;
  background: #041f18 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  will-change: transform;
}

/* =========================================================
   LEATHER BACKGROUND FRAME Desktop + Tablet
   ========================================================= */

.page-loader::before {
  border-style: solid;
  border-width: 26px;
  border-image-source: none;
  display: block !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 20px !important;
  content: "";
  position: absolute;
  inset: 28px;
  z-index: 0;
  pointer-events: none;
  background-image: url("../assets/leather/leather-background-1920x1080.webp") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, .45);
}

/* no unnecessary second layer */

.page-loader::after {
  display: none !important;
  content: none !important;
}

/* =========================================================
   COMMON VIDEO
   ========================================================= */

.page-loader .pl-video {
  position: relative;
  display: block;
  object-fit: contain;
  object-position: center;
  background: transparent;
  border: 0;
  pointer-events: none;
  z-index: 2;
}

/* =========================================================
   CONTENT
   ========================================================= */

.page-loader .pl-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* =========================================================
   LOADING LINE
   ========================================================= */

.page-loader .pl-track {
  border-radius: 999px !important;
  max-width: 62% !important;
  display: block;
  position: relative !important;
  width: 340px;
  height: 4px;
  margin-bottom: 30px;
  overflow: hidden;
  background: rgba(240, 188, 194, .14);
}

.page-loader .pl-bar {
  position: absolute;
  inset: 0;
  transform: translateX(100%);
  animation: plSlide 1.05s cubic-bezier(.65, 0, .35, 1) forwards;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,
      #743946 0%,
      #aa5969 18%,
      #df929d 35%,
      #f0bcc2 47%,
      #fff0ed 51%,
      #e2a0a9 64%,
      #ad5968 82%,
      #703541 100%);
  box-shadow: 0 0 8px rgba(240, 188, 194, .50);
}

/* =========================================================
   TEXT
   ========================================================= */

.page-loader .pl-note {
  font-weight: 600;
  animation: plNoteIn .5s var(--ease-out) .25s both;
  margin-inline: auto;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  max-width: 460px;
  text-align: center !important;
  font-family: Inter,
    Arial,
    sans-serif;
  color: rgba(234, 239, 232, .88) !important;
  font-size: 17px;
  line-height: 1.6;
  transform: none !important;
}

.page-loader .pl-note strong {
  letter-spacing: .01em;
  display: block;
  margin-bottom: 10px;
  font-family: Georgia,
    "Times New Roman",
    serif;
  font-size: 26px;
  line-height: 1.2;
  color: #f0bcc2 !important;
}

.page-loader .pl-sub {
  display: block;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  color: rgba(229, 235, 228, .84) !important;
}

/* =========================================================
   DEFAULT
   ========================================================= */

.pl-video--mobile {
  display: none !important;
}

/* =========================================================
   DESKTOP 1200px+
   ========================================================= */

@media (min-width: 1200px) {
  .page-loader {
    flex-direction: column !important;
  }

  /* leather frame visible */

  .page-loader::before {
    display: block !important;
    inset: 32px;
  }

  /* DESKTOP VIDEO */

  .page-loader .pl-video--desktop {
    display: block !important;
    width: 620px !important;
    height: 400px !important;
    max-width: 44vw !important;
    max-height: 44vh !important;
    margin-bottom: 0px;
    margin-top: 20px;
    z-index: 2;
  }

  /* mobile video hidden */

  .page-loader .pl-video--mobile {
    display: none !important;
  }

  /* content under video */

  .page-loader .pl-content {
    width: 620px;
    max-width: 55vw;
  }
}

/* =========================================================
   TABLET 768px — 1199px LEFT = portrait/mobile video RIGHT = text
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {
  .page-loader {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;
    padding: 50px !important;
  }

  /* leather background remains */

  .page-loader::before {
    display: block !important;
    inset: 22px;
  }

  /* desktop video off */

  .page-loader .pl-video--desktop {
    display: none !important;
  }

  /* portrait video LEFT */

  .page-loader .pl-video--mobile {
    display: block !important;
    position: relative !important;
    width: 38% !important;
    height: 76vh !important;
    max-width: 330px !important;
    max-height: 720px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 2 !important;
  }

  /* text RIGHT */

  .page-loader .pl-content {
    width: 54%;
    max-width: 530px;
    align-items: flex-start;
    text-align: left;
  }

  .page-loader .pl-track {
    width: 100%;
    margin: 0 0 27px;
  }

  .page-loader .pl-note {
    max-width: 100%;
    text-align: left !important;
  }

  .page-loader .pl-note strong {
    font-size: 25px;
  }

  .page-loader .pl-sub {
    font-size: 15px;
  }
}

/* =========================================================
   MOBILE 767px AND BELOW ONLY MOBILE VIDEO NO BG FRAME NO TEXT
   ========================================================= */

@media (max-width: 767px) {
  .page-loader {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    background: #04271f !important;
  }

  /* leather background completely hide */

  .page-loader::before {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
  }

  /* desktop video off */

  .page-loader .pl-video--desktop {
    display: none !important;
  }

  /* text off */

  .page-loader .pl-content {
    display: none !important;
  }

  /* mobile portrait video ONLY */

  .page-loader .pl-video--mobile {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 98% !important;
    height: 98% !important;
    max-width: 98% !important;
    max-height: 98% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    transform: translate(-50%, -50%) !important;
    object-fit: contain !important;
    object-position: center center !important;
    z-index: 2 !important;
  }
}

.gc-trust-marquee-section {
  background: #111111;
  width: 100%;
  overflow: hidden;
  max-height: 60px;
  background-image: url("../assets/leather/rope-middle.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================================================
   3 CARDS — CUSTOM DIRECTIONAL BORDER DRAW HOVER 01: RIGHT TOP → LEFT TOP → LEFT BOTTOM → RIGHT BOTTOM 02: TOP + BOTTOM LEFT → RIGHT 03: LEFT TOP → RIGHT TOP → RIGHT BOTTOM → LEFT BOTTOM
   ========================================================= */

.news-grid--2 .news-box {
  padding: 30px 35px !important;
  min-height: 340px;
  gap: 0px;
  border: 1.5px solid var(--gold);
  border-radius: 0px !important;
  box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: visible;
  isolation: isolate;
}

/* Keep content above animation */

.news-grid--2 .news-box>* {
  position: relative;
  z-index: 2;
}

/* =========================================================
   CARD 01 RIGHT TOP → LEFT TOP LEFT TOP → LEFT BOTTOM LEFT BOTTOM → RIGHT BOTTOM
   ========================================================= */

.news-grid--2 .news-box:nth-child(1)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(currentColor, currentColor) top right / 0% 2px no-repeat,
    linear-gradient(currentColor, currentColor) top left / 2px 0% no-repeat,
    linear-gradient(currentColor, currentColor) bottom left / 0% 2px no-repeat;
  opacity: 0;
}

.news-grid--2 .news-box:nth-child(1):hover::after {
  opacity: 1;
  animation: newsCardOneDraw 0.9s linear forwards;
}

@keyframes newsCardOneDraw {
  /* Start */

  0% {
    background-size: 0% 2px,
      2px 0%,
      0% 2px;
  }

  /* Top: right → left */

  33% {
    background-size: 100% 2px,
      2px 0%,
      0% 2px;
  }

  /* Left: top → bottom */

  66% {
    background-size: 100% 2px,
      2px 100%,
      0% 2px;
  }

  /* Bottom: left → right */

  100% {
    background-size: 100% 2px,
      2px 100%,
      100% 2px;
  }
}

/* =========================================================
   CARD 02 TOP : LEFT → RIGHT BOTTOM : LEFT → RIGHT Both together
   ========================================================= */

.news-grid--2 .news-box:nth-child(2)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(currentColor, currentColor) top left / 0% 2px no-repeat,
    linear-gradient(currentColor, currentColor) bottom left / 0% 2px no-repeat;
  opacity: 0;
}

.news-grid--2 .news-box:nth-child(2):hover::after {
  opacity: 1;
  animation: newsCardTwoDraw 0.75s cubic-bezier(.22, 1, .36, 1) forwards;
}

@keyframes newsCardTwoDraw {
  0% {
    background-size: 0% 2px,
      0% 2px;
  }

  100% {
    background-size: 100% 2px,
      100% 2px;
  }
}

/* =========================================================
   CARD 03 — EXACT OPPOSITE OF CARD 01 LEFT TOP → RIGHT TOP RIGHT TOP → RIGHT BOTTOM RIGHT BOTTOM → LEFT BOTTOM
   ========================================================= */

.news-grid--2 .news-box:nth-child(3)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(currentColor, currentColor) top left / 0% 2px no-repeat,
    linear-gradient(currentColor, currentColor) top right / 2px 0% no-repeat,
    linear-gradient(currentColor, currentColor) bottom right / 0% 2px no-repeat;
  opacity: 0;
}

.news-grid--2 .news-box:nth-child(3):hover::after {
  opacity: 1;
  animation: newsCardThreeDraw 0.9s linear forwards;
}

@keyframes newsCardThreeDraw {
  /* Start */

  0% {
    background-size: 0% 2px,
      2px 0%,
      0% 2px;
  }

  /* Top: left → right */

  33% {
    background-size: 100% 2px,
      2px 0%,
      0% 2px;
  }

  /* Right: top → bottom */

  66% {
    background-size: 100% 2px,
      2px 100%,
      0% 2px;
  }

  /* Bottom: right → left */

  100% {
    background-size: 100% 2px,
      2px 100%,
      100% 2px;
  }
}

/* =========================================================
   DISCLAIMER POPUP OUTER FRAME WILL NEVER SCROLL
   ========================================================= */

.disc-modal-dialog {
  z-index: 1;
  background: linear-gradient(180deg, #0b3327 0%, var(--emerald-deep) 100%);
  border: 1px solid rgba(201, 161, 74, 0.35);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  border-radius: 24px !important;
  animation: discPop .28s ease;
  --rope-t: 44px;
  --rope-b: 34px;
  --rope-x: 40px;
  /* background-color: #0b2a20 !important;
  background-image: url("../assets/leather/rope-top.webp"),
    url("../assets/leather/rope-bottom.webp"),
    url("../assets/leather/rope-left.webp"),
    url("../assets/leather/rope-right.webp"),
    url("../assets/leather/rope-middle.webp") !important;
  background-position: top center, bottom center,
    left top, right top,
    center center !important;
  background-size: 100% var(--rope-t),
    100% var(--rope-b),
    var(--rope-x) auto,
    var(--rope-x) auto,
    815px auto !important; */
  background-repeat: no-repeat, no-repeat,
    repeat-y, repeat-y,
    repeat !important;
  position: relative;
  width: min(1080px, calc(100vw - 40px));
  height: min(760px, calc(100dvh - 40px));
  max-height: calc(100dvh - 40px);
  margin: auto;
  box-sizing: border-box;
  padding: 10px;
  overflow: hidden;
  isolation: isolate;
}

/* =========================================================
   CLOSE BUTTON
   ========================================================= */

/* =========================================================
   ONLY CONTENT AREA SCROLLS
   ========================================================= */

/* =========================================================
   HEADER
   ========================================================= */

.disc-modal-head {
  margin-bottom: 1.6rem;
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin: 0 0 24px;
}

/* =========================================================
   LIST
   ========================================================= */

.dm-list {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =========================================================
   EACH DISCLAIMER ROW
   ========================================================= */

.dm-row {
  gap: 1.1rem;
  /* border-bottom: 1px solid rgba(201, 161, 74, 0.12); */
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: flex-start;
  column-gap: 24px;
  width: 100%;
  padding: 24px 0;
  box-sizing: border-box;
}

/* divider */



/* =========================================================
   ICON
   ========================================================= */

.dm-row>.dm-ico {
  position: relative;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
}

/* =========================================================
   TEXT IMPORTANT — prevents horizontal overflow
   ========================================================= */

.dm-txt {
  margin: 0 30px 0 30px;
  color: var(--cream);
  opacity: .82;
  font-size: clamp(.92rem, .88rem + .2vw, 1.02rem);
  line-height: 1.55;
  min-width: 0;
  width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  box-sizing: border-box;
}

.dm-txt p {
  margin-top: 0;
}

.dm-txt p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   T&C
   ========================================================= */

.dm-tnc {
  color: var(--gold-light);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 0px;
  margin-left: 84px;
}

/* =========================================================
   CUSTOM SCROLLBAR
   ========================================================= */

.disc-modal-scroll {
  padding-left: calc(var(--rope-x) + .7rem) !important;
  padding-right: calc(var(--rope-x) + .7rem) !important;
  padding-top: calc(var(--rope-t) + 1.1rem) !important;
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding: 10px 34px 30px 10px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #e8b4a8 rgba(255, 255, 255, 0.08);
}

.disc-modal-scroll::-webkit-scrollbar {
  width: 7px;
}

.disc-modal-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
}

.disc-modal-scroll::-webkit-scrollbar-thumb {
  border-radius: 8px !important;
  background: #e39aa8;
}

.disc-modal-scroll::-webkit-scrollbar-thumb:hover {
  background: #efb3bd;
}

/* =========================================================
   BOTTOM FADE TEXT KO FRAME KE BOTTOM ME VISUALLY CUT HONE SE ROKEGA
   ========================================================= */

.disc-modal-dialog::after {
  content: "";
  position: absolute;
  left: 45px;
  right: 45px;
  bottom: 34px;
  height: 75px;
  pointer-events: none;
  z-index: 20;
  /* background: linear-gradient(
    to bottom,
    rgba(1, 51, 38, 0),
    rgba(1, 51, 38, 0.75) 55%,
    rgba(1, 51, 38, 0.97) 100%
  ); */
}

/* =========================================================
   KEEP CLOSE BUTTON ABOVE FADE
   ========================================================= */

.disc-modal-x {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50% !important;
  border: 1px solid rgba(201, 161, 74, 0.4);
  background: rgba(8, 54, 42, 0.6);
  color: var(--gold-light);
  cursor: pointer;
  transition: background .2s, color .2s;
  top: calc(var(--rope-t) + .3rem) !important;
  right: calc(var(--rope-x) + .3rem) !important;
  position: absolute;
  flex-shrink: 0;
  z-index: 100;
}

/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1199px) {
  .disc-modal-dialog {
    width: calc(100vw - 30px);
    height: min(720px, calc(100dvh - 30px));
    max-height: calc(100dvh - 30px);
    padding: 75px 60px 60px 70px;
  }

  .disc-modal-x {
    top: 58px;
    right: 48px;
  }

  .disc-modal-scroll {
    padding-right: 26px;
    padding-bottom: 80px;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {
  .disc-modal-dialog {
    width: calc(100vw - 24px);
    height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 70px 45px 55px;
  }

  .disc-modal-x {
    top: 48px;
    right: 36px;
  }

  .disc-modal-scroll {
    padding: 10px 20px 75px 5px;
  }

  .dm-row {
    grid-template-columns: 54px minmax(0, 1fr);
    column-gap: 18px;
    padding: 21px 0;
  }

  .dm-row>.dm-ico {
    width: 50px;
    height: 50px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .disc-modal-dialog {
    width: calc(100vw - 14px);
    height: calc(100dvh - 14px);
    max-height: calc(100dvh - 14px);
    padding: 64px 25px 42px;
  }

  .disc-modal-x {
    top: 35px;
    right: 22px;
  }

  .disc-modal-scroll {
    padding: 6px 14px 70px 2px;
  }

  .disc-modal-head {
    gap: 12px;
    margin-bottom: 15px;
  }

  .dm-row {
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 13px;
    padding: 9px 0;
  }

  .dm-row>.dm-ico {
    width: 42px;
    height: 42px;
  }
}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
  .disc-modal-dialog {
    padding: 58px 19px 35px;
  }

  .disc-modal-scroll {
    padding-left: 17px !important;
    padding-top: 0px !important;
    padding-right: 15px !important;
    padding-bottom: 10px !important;
  }

  .dm-row {
    grid-template-columns: 39px minmax(0, 1fr);
    column-gap: 11px;
  }

  .dm-row>.dm-ico {
    width: 38px;
    height: 38px;
  }
}

/* =========================================================
   FEATURED IN CATEGORY FILTER + HORIZONTAL VIDEO SLIDER
   ========================================================= */

.gcfi-sec {
  position: relative;
  overflow: hidden;
  padding: 10px 0 10px;
  background-color: #f7f4ec;
  isolation: isolate;
}

.gcfi-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(247, 244, 236, 0.12) 0%,
      rgba(247, 244, 236, 0.02) 46%,
      rgba(219, 229, 207, 0.24) 100%);
  pointer-events: none;
  z-index: 0;
}

.gcfi-container {
  position: relative;
  z-index: 2;
}

/* =========================================================
   HEADING
   ========================================================= */

.gcfi-head-wrap {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  z-index: 2;
}

.gcfi-top-kicker {
  display: inline-block;
  margin-bottom: 5px;
  color: var(--gold);
  font-size: 15px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 7px;
  text-transform: uppercase;
}

.gcfi-title {
  margin: 0;
  color: #143c27;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 49px;
  line-height: 1.05;
  font-weight: 700;
}

.gcfi-lede {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 17px;
  margin: 5px 0 0;
  color: #71766f;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: 3.2px;
  text-transform: uppercase;
}

.gcfi-lede span {
  color: #777d75;
  font-weight: 400;
}

/* =========================================================
   CATEGORY FILTER
   ========================================================= */

.gcfi-filter-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 17px auto 22px;
  z-index: 5;
}

.gcfi-filter-btn {
  min-height: 23px;
  padding: 0 21px;
  border: 1px solid var(--gold);
  border-radius: 10px !important;
  background: white;
  color: #1f3428;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(36, 63, 46, 0.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.gcfi-filter-btn:hover {
  transform: translateY(-2px);
  background: #ffffff;
  border-color: rgba(25, 75, 48, 0.14);
  box-shadow: 0 8px 18px rgba(31, 69, 47, 0.08);
}

.gcfi-filter-btn.active {
  background: #0e4a2c;
  border-color: #0e4a2c;
  color: #ffffff;
  box-shadow: 0 7px 20px rgba(14, 74, 44, 0.18);
}

/* =========================================================
   SLIDER AREA
   ========================================================= */

.gcfi-slider-area {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  gap: 13px;
}

.gcfi-swiper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 3px 2px 9px;
}

.gcfi-swiper .swiper-wrapper {
  align-items: stretch;
}

.gcfi-swiper .swiper-slide {
  height: auto;
  display: flex;
}

/* =========================================================
   CARD
   ========================================================= */

.gcfi-card-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 10px;
  background: transparent;
  transition: transform 0.35s ease,
    filter 0.35s ease;
}

.gcfi-card-wrap:hover {
  transform: translateY(-5px);
}

.gcfi-video-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 9px;
  background: #07150e;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(12, 38, 23, 0.13);
  transform: translateZ(0);
}

.gcfi-video-thumb {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 0.65s cubic-bezier(.22, .61, .36, 1),
    filter 0.45s ease;
}

.gcfi-video-card:hover .gcfi-video-thumb {
  transform: scale(1.065);
  filter: brightness(1.03);
}

/* =========================================================
   CARD GRADIENT
   ========================================================= */

.gcfi-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg,
      rgba(3, 12, 7, 0.02) 0%,
      rgba(3, 12, 7, 0.03) 30%,
      rgba(3, 12, 7, 0.42) 63%,
      rgba(2, 11, 6, 0.95) 100%);
  pointer-events: none;
  transition: background 0.4s ease;
}

.gcfi-video-card:hover .gcfi-card-overlay {
  background: linear-gradient(180deg,
      rgba(3, 12, 7, 0.02) 0%,
      rgba(3, 12, 7, 0.08) 29%,
      rgba(3, 12, 7, 0.48) 63%,
      rgba(2, 11, 6, 0.97) 100%);
}

/* =========================================================
   PLAY BUTTON
   ========================================================= */

.gcfi-play-btn {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 5;
  width: 43px;
  height: 43px;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.96);
  color: #184c30;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease,
    background 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

.gcfi-play-btn svg {
  width: 19px;
  height: 19px;
  margin-left: 2px;
}

.gcfi-video-card:hover .gcfi-play-btn {
  transform: translate(-50%, -50%) scale(1.12);
  background: #ffffff;
  color: #0b4e2b;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

/* =========================================================
   VIDEO TEXT
   ========================================================= */

.gcfi-video-meta {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 11px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gcfi-video-cap {
  color: #ffffff;
  font-size: 14px;
  line-height: 1.16;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.38);
}

.gcfi-video-source {
  color: rgba(255, 255, 255, 0.90);
  font-size: 11px;
  line-height: 1.2;
  font-weight: 500;
}

/* =========================================================
   NAVIGATION ARROWS
   ========================================================= */

.gcfi-nav-btn {
  position: relative;
  z-index: 10;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.50);
  border-radius: 10px !important;
  background: #164f31;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(13, 58, 34, 0.14);
  transition: transform 0.3s ease,
    color 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}

.gcfi-nav-btn:hover {
  background: #ffffff;
  color: #164f31;
  transform: scale(1.08);
  box-shadow: 0 12px 25px rgba(13, 58, 34, 0.17);
}

.gcfi-nav-btn.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* =========================================================
   BOTTOM ROW
   ========================================================= */

.gcfi-bottom {
  position: relative;
  min-height: 53px;
  margin-top: 5px;
}

/* =========================================================
   PAGINATION
   ========================================================= */

.gcfi-pagination-wrap {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gcfi-swiper-pagination {
  position: static !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: auto !important;
}

.gcfi-swiper-pagination .swiper-pagination-bullet {
  width: 29px;
  height: 5px;
  margin: 0 !important;
  border: 1px solid rgba(27, 76, 47, 0.40);
  border-radius: 50px;
  opacity: 1;
  background: rgba(255, 255, 255, 0.56);
  transition: width 0.35s ease,
    background 0.35s ease,
    border-color 0.35s ease;
}

.gcfi-swiper-pagination .swiper-pagination-bullet-active {
  width: 30px;
  background: #164e30;
  border-color: #164e30;
}

/* =========================================================
   WATCH ALL VIDEOS
   ========================================================= */

.gcfi-cta-wrap {
  position: absolute;
  right: 60px;
  top: -21px;
  z-index: 5;
}

.gcfi-cta-btn {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #315a45;
  border-radius: 10px !important;
  background: white;
  color: #173c2a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-decoration: none;
  font-size: 12px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.gcfi-cta-btn:hover {
  background: #164e30;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(18, 70, 42, 0.16);
}

.gcfi-cta-btn i {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.gcfi-cta-btn:hover i {
  transform: translateX(4px);
}

/* =========================================================
   FILTER TRANSITION
   ========================================================= */

.gcfi-swiper .swiper-slide.gcfi-hidden-slide {
  display: none !important;
}

/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1200px) {
  .gcfi-container {
    max-width: 1420px;
  }
}

/* =========================================================
   LAPTOP
   ========================================================= */

@media (max-width: 1199px) {
  .gcfi-title {
    font-size: 44px;
  }

  .gcfi-filter-btn {
    padding: 0 16px;
    font-size: 11px;
  }

  .gcfi-video-card {
    aspect-ratio: 16 / 9;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 991px) {
  .gcfi-sec {
    padding: 34px 0 28px;
  }

  .gcfi-title {
    font-size: 39px;
  }

  .gcfi-lede {
    gap: 10px;
    font-size: 11px;
    letter-spacing: 2px;
  }

  .gcfi-filter-wrap {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding: 3px 2px 8px;
    margin-bottom: 14px;
    scrollbar-width: none;
  }

  .gcfi-filter-wrap::-webkit-scrollbar {
    display: none;
  }

  .gcfi-filter-btn {
    flex: 0 0 auto;
  }

  .gcfi-slider-area {
    gap: 8px;
  }

  .gcfi-nav-btn {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }

  .gcfi-bottom {
    margin-top: 10px;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
  .gcfi-sec {
    padding: 25px 0 25px;
  }

  .gcfi-head-wrap {
    padding: 0 5px;
  }

  .gcfi-top-kicker {
    margin-bottom: 7px;
    font-size: 11px;
    letter-spacing: 5px;
  }

  .gcfi-title {
    font-size: 31px;
    line-height: 1.06;
  }

  .gcfi-lede {
    gap: 6px;
    margin-top: 7px;
    font-size: 9px;
    letter-spacing: 1.1px;
  }

  .gcfi-lede span {
    margin: 0 2px;
  }

  .gcfi-filter-wrap {
    margin-top: 16px;
    margin-left: -2px;
    margin-right: -2px;
  }

  .gcfi-filter-btn {
    min-height: 34px;
    padding: 0 14px;
    font-size: 11px;
  }

  .gcfi-slider-area {
    display: block;
  }

  .gcfi-nav-btn {
    display: none;
  }

  .gcfi-swiper {
    overflow: visible;
    padding-bottom: 8px;
  }

  .gcfi-video-card {
    aspect-ratio: 16 / 9;
  }

  .gcfi-video-time {
    left: 10px;
    bottom: 68px;
  }

  .gcfi-play-btn {
    width: 42px;
    height: 42px;
  }

  .gcfi-video-meta {
    left: 11px;
    right: 11px;
    bottom: 10px;
  }

  .gcfi-video-cap {
    font-size: 14px;
  }

  .gcfi-bottom {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-top: 7px;
  }

  .gcfi-pagination-wrap {
    position: static;
    transform: none;
    order: 1;
  }

  .gcfi-cta-wrap {
    position: static;
    order: 2;
  }

  .gcfi-cta-btn {
    min-height: 43px;
    padding: 0 22px;
    font-size: 11px;
  }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {
  .gcfi-title {
    font-size: 28px;
  }

  .gcfi-lede {
    font-size: 8px;
    letter-spacing: 0.8px;
  }

  .gcfi-swiper-pagination .swiper-pagination-bullet {
    width: 22px;
  }

  .gcfi-swiper-pagination .swiper-pagination-bullet-active {
    width: 27px;
  }
}

/* =========================================================
   FINAL PRELOADER CONTROL — JS OWNS EXIT TIMING
   ========================================================= */

html.gc-loader-active .page-loader {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  animation: none !important;
  pointer-events: all !important;
}

html.gc-loader-exit .page-loader {
  display: flex !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: none !important;
  animation: none !important;
  pointer-events: none !important;
  transition: opacity 0.65s ease,
    visibility 0.65s ease !important;
}

html.gc-loader-active body,
html.gc-loader-exit body {
  overflow: hidden !important;
}

/* FORCE WEBSITE TUTORIAL BUTTON ANIMATION */

.disc-btn,
.disc-btn-green {
  animation: ctaPop-new 1.7s ease-in-out infinite !important;
  will-change: transform;
}

.disc-btn-ico i,
.disc-btn-ico-green i {
  display: inline-block;
  animation: discTap 1.7s ease-in-out infinite !important;
}

/* Rose metallic top border */

/* Moving white pill */

/* Moving animation */

/* Reduced motion */

/* =========================================================
   LANGUAGE TOGGLE
   ========================================================= */

.gclang-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100px;
  height: 35px;
  padding: 4px;
  border-radius: 25px !important;
  background: #e8b4a8;
  box-sizing: border-box;
  overflow: hidden;
}

.gclang-toggle-btn {
  position: relative;
  flex: 1;
  height: 30px;
  padding: 0 5px;
  border: 0;
  outline: 0;
  border-radius: 23px !important;
  background: transparent;
  color: var(--emerald);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.3s ease,
    color 0.3s ease,
    transform 0.3s ease;
}

.gclang-toggle-btn.is-active {
  background: #ffffff;
  color: var(--emerald);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.gclang-toggle-btn:hover {
  transform: scale(1.02);
}

/* MOBILE */

@media (max-width: 767px) {
  .gclang-toggle {
    width: 60px;
    height: 28px;
    padding: 4px;
  }

  .gclang-toggle-btn {
    height: 22px;
    padding: 0 5px;
    font-size: 10px;
  }
}

/* All closed popup/modal elements */

.gc-quick-popup:not(.is-open),
.gc-tutorial-popup:not(.is-open),
.gcsez-modal:not(.is-open),
.disc-modal:not(.is-open),
.map-lb:not(.is-open) {
  display: none !important;
}

/* No accidental space after page */

html,
body {
  margin-bottom: 0 !important;
}

/* Mobile safeguard */

@media (max-width: 860px) {
  body {
    padding-bottom: 0 !important;
  }
}

/* =========================================================
   FRESH FOOTER — ISOLATED CLASS SYSTEM
   No legacy .site-footer / .gc-footer-* classes are used.
   ========================================================= */
.gcsf-footer {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 18px 0 0;
  overflow: hidden;
  color: #f6efdd;
  background: url("../assets/leather/rope-middle.webp") center / cover no-repeat;
}

/* Rose metallic line at the exact footer start. */
.gcsf-footer::before {
  content: "";
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
      #74404a 0%,
      #b86f79 16%,
      #e8b4a8 36%,
      #ffd8d0 50%,
      #e8b4a8 64%,
      #b86f79 84%,
      #74404a 100%);
  box-shadow:
    0 -1px 2px rgba(255, 220, 215, 0.25),
    0 -2px 7px rgba(201, 130, 140, 0.25);
}

/* Moving highlight over the metallic line. */
.gcsf-footer::after {
  content: "";
  position: absolute;
  z-index: 21;
  top: 0;
  left: -70px;
  width: 48px;
  height: 2px;
  pointer-events: none;
  border-radius: 999px;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0),
      #ffffff 30%,
      #fffaf8 50%,
      #ffffff 70%,
      rgba(255, 255, 255, 0));
  box-shadow:
    0 0 4px rgba(255, 255, 255, .95),
    0 0 10px rgba(255, 235, 230, .80),
    0 0 18px rgba(232, 180, 168, .65);
  animation: gcsfFooterSweep 3.2s linear infinite;
}

@keyframes gcsfFooterSweep {
  0% {
    left: -70px;
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  92% {
    opacity: 1;
  }

  100% {
    left: calc(100% + 70px);
    opacity: 0;
  }
}

.gcsf-footer__container {
  position: relative;
  z-index: 2;
}

.gcsf-footer__grid {
  display: grid;
  grid-template-columns: 1.2fr .9fr .9fr .95fr 1.35fr;
  align-items: stretch;
  width: 100%;
}

.gcsf-footer__brand {
  min-width: 0;
  padding: 0 34px 14px 0;
}

.gcsf-footer__logo {
  display: block;
  width: 210px;
  max-width: 100%;
  margin: 0 auto 20px;
}

.gcsf-footer__logo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.gcsf-footer__column {
  position: relative;
  min-width: 0;
  padding: 6px 16px 16px;
}

.gcsf-footer__column::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 10px;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg,
      rgba(201, 130, 140, .05) 0%,
      rgba(240, 188, 194, .82) 15%,
      rgba(255, 222, 220, .95) 50%,
      rgba(201, 130, 140, .82) 85%,
      rgba(201, 130, 140, .05) 100%);
}

.gcsf-footer__column::after {
  content: "";
  position: absolute;
  top: 49%;
  left: -3px;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: #e4a1aa;
  box-shadow: 0 0 5px rgba(240, 188, 194, .45);
}

.gcsf-footer__title {
  position: relative;
  display: inline-block;
  margin: 0 0 22px;
  padding-bottom: 9px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #e8b4a8;
}

.gcsf-footer__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 2px;
  border-radius: 10px;
  background: linear-gradient(90deg, #a95d6b, #f0bcc2, #fff0ed);
}

.gcsf-footer__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gcsf-footer__links li+li {
  margin-top: 15px;
}

.gcsf-footer__links a {
  display: flex;
  align-items: center;
  gap: 11px;
  width: fit-content;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 247, 235, .90);
  transition: color .3s ease, transform .3s ease;
}

.gcsf-footer__links a i {
  flex: none;
  font-size: 12px;
  color: #e3a0aa;
  transition: color .3s ease, transform .3s ease;
}

.gcsf-footer__links a:hover {
  color: #f0bcc2;
  transform: translateX(4px);
}

.gcsf-footer__links a:hover i {
  color: #fff0ed;
  transform: translateX(3px);
}

.gcsf-footer__location {
  padding-right: 0;
}

.gcsf-footer__map {
  position: relative;
  width: 100%;
  height: 100px;
  overflow: hidden;
  border: 1px solid rgba(240, 188, 194, .75);
  border-radius: 10px;
  background: #f5efe3;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .18);
}

.gcsf-footer__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.gcsf-footer__map>a {
  position: absolute;
  z-index: 2;
  inset: 0;
}

.gcsf-footer__social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

.gcsf-footer__social a {
  display: inline-flex;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(240, 188, 194, .78);
  border-radius: 8px !important;
  color: #fff7eb;
  background: rgba(4, 50, 38, .55);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.gcsf-footer__social a i {
  font-size: 17px;
  transition: color .35s ease, transform .35s ease;
}

.gcsf-footer__social a:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .18);
}

.gcsf-footer__social a:hover i {
  transform: scale(1.12);
}

.gcsf-footer__social a[aria-label="YouTube"]:hover {
  border-color: #ff0000;
}

.gcsf-footer__social a[aria-label="YouTube"]:hover i {
  color: #ff0000;
}

.gcsf-footer__social a[aria-label="Instagram"]:hover {
  border-color: #d62976;
}

.gcsf-footer__social a[aria-label="Instagram"]:hover i {
  color: #d62976;
}

.gcsf-footer__social a[aria-label="Facebook"]:hover {
  border-color: #1877f2;
}

.gcsf-footer__social a[aria-label="Facebook"]:hover i {
  color: #1877f2;
}

.gcsf-footer__social a[aria-label="LinkedIn"]:hover {
  border-color: #0a66c2;
}

.gcsf-footer__social a[aria-label="LinkedIn"]:hover i {
  color: #0a66c2;
}

.gcsf-footer__social a[aria-label="WhatsApp"]:hover {
  border-color: #25d366;
}

.gcsf-footer__social a[aria-label="WhatsApp"]:hover i {
  color: #25d366;
}

.gcsf-footer__disclaimer {
  position: relative;
  margin: 0;
  padding: 16px 0 18px;
  text-align: center;
}

.gcsf-footer__disclaimer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg,
      transparent,
      #a95d6b 15%,
      #f0bcc2 50%,
      #a95d6b 85%,
      transparent);
}

.gcsf-footer__disclaimer p {
  max-width: 1500px;
  margin: 0 auto;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 247, 235, .85);
}

.gcsf-footer__disclaimer strong {
  color: #f0bcc2;
}

/* Footer responsive — kept directly with the footer section. */
@media (max-width: 1100px) {
  .gcsf-footer__grid {
    grid-template-columns: 1.15fr 1fr 1fr;
  }

  .gcsf-footer__brand {
    padding-right: 24px;
  }

  .gcsf-footer__location {
    grid-column: 2 / -1;
    margin-top: 26px;
  }
}

@media (max-width: 767px) {
  .gcsf-footer {
    padding-top: 22px;
  }

  .gcsf-footer__grid {
    grid-template-columns: 1fr;
  }

  .gcsf-footer__brand,
  .gcsf-footer__column,
  .gcsf-footer__location {
    width: 100%;
    margin: 0;
    padding: 22px 0;
  }

  .gcsf-footer__brand {
    padding-top: 0;
    text-align: center;
  }

  .gcsf-footer__logo {
    width: 185px;
  }

  .gcsf-footer__column::before {
    top: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent,
        rgba(240, 188, 194, .85),
        transparent);
  }

  .gcsf-footer__column::after {
    display: none;
  }

  .gcsf-footer__title {
    margin-bottom: 16px;
    font-size: 16px;
  }

  .gcsf-footer__links li+li {
    margin-top: 12px;
  }

  .gcsf-footer__links a {
    font-size: 14px;
  }

  .gcsf-footer__location {
    grid-column: auto;
  }

  .gcsf-footer__map {
    height: 180px;
  }

  .gcsf-footer__social {
    justify-content: center;
    gap: 12px;
  }

  .gcsf-footer__disclaimer {
    padding: 18px 0 20px;
  }

  .gcsf-footer__disclaimer p {
    font-size: 12px;
    line-height: 1.65;
  }

  .dm-txt {
    margin: 0 30px 0 5px !important;
  }
}

@media (max-width: 420px) {
  .gcsf-footer__logo {
    width: 165px;
  }

  .gcsf-footer__map {
    height: 160px;
  }

  .gcsf-footer__social {
    gap: 8px;
  }

  .gcsf-footer__social a {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }

  .dm-txt {
    margin: 0 30px 0 5px !important;
  }

  .dm-tnc {
    margin-left: 37px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gcsf-footer::after {
    display: none;
    animation: none;
  }
}


/* =========================================================
   WHY INVEST IN JAIPUR / WHY GREEN CITY SEZ
   DESKTOP: 2 SIDES × 4 COLUMNS × 2 ROWS
   MOBILE:  1 SIDE AT A TIME × 2 COLUMNS
========================================================= */

.gci-invest-section {
  position: relative;
  width: 100%;
  overflow: hidden;

  padding: 25px;

  color: #ffffff;

  background-color: #063b2b;

  /* DESKTOP BACKGROUND */
  background-image:
    url("../assets/img/desk.jpg");

  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}


/* =========================================================
   MAIN WRAPPER
========================================================= */

.gci-invest-container {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1540px;

  margin: 0 auto;
  padding: 0 !important;
}


/*
  IMPORTANT:
  Bootstrap row ko forcefully 2-column CSS grid bana rahe hain.
*/
.gci-invest-container>.row {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  width: 100%;

  margin: 0 !important;
}


/* =========================================================
   LEFT / RIGHT SIDE
========================================================= */

.gci-side {
  position: relative;

  width: auto !important;
  max-width: none !important;

  padding: 28px 18px 24px !important;
}


/* CENTER DIVIDER */
.gci-side-left {
  border-right:
    1px solid rgba(177, 139, 78, 0.72);
}


/* =========================================================
   HEADING
========================================================= */

.gci-heading {
  text-align: center;

  margin-bottom: 0px;
}


.gci-kicker {
  display: block;

  margin-bottom: 8px;

  color: #e8b4a8;

  font-family: Arial, sans-serif;

  font-size: 20px;
  line-height: 1;

  font-weight: 700;

  letter-spacing: 6px;

  text-transform: uppercase;
}


.gci-title {
  margin: 5px;

  color: #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 43px;
  line-height: 1.05;

  font-weight: 700;

  letter-spacing: 0;

  text-transform: uppercase;

  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.6);
}


/* =========================================================
   FACT GRID
   FORCE 4 COLUMNS
========================================================= */

.gci-facts-row {
  position: relative;

  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  width: 100%;

  margin: 0 !important;
}


/*
  Bootstrap col-md-3 etc. ko override kar raha hai.
*/
.gci-facts-row>.gci-fact {
  width: auto !important;
  max-width: none !important;

  flex: none !important;
}


/* =========================================================
   FACT CARD
========================================================= */

.gci-fact {
  position: relative;

  min-width: 0;
  min-height: 150px;

  display: flex !important;

  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 0px;

  text-align: center;

  background: transparent;

  transition:
    transform 0.3s ease,
    background-color 0.3s ease;
}


/* =========================================================
   VERTICAL SEPARATORS
========================================================= */

.gci-fact:not(:nth-child(4n))::after {
  content: "";

  position: absolute;

  top: 18px;
  right: 0;
  bottom: 18px;

  width: 1px;

  background:
    rgba(177, 139, 78, 0.65);
}


/* =========================================================
   HORIZONTAL SEPARATOR
   BETWEEN ROW 1 + ROW 2
========================================================= */

.gci-fact:nth-child(-n + 4)::before {
  content: "";

  position: absolute;

  left: 10px;
  right: 10px;
  bottom: 0;

  height: 1px;

  background:
    rgba(177, 139, 78, 0.65);
}


/* =========================================================
   ICON
========================================================= */

.gci-icon {
  height: 62px;

  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 11px;

  color: #e8b4a8;
}


.gci-icon i {
  font-size: 50px;
  line-height: 1;

  color: inherit;
}


/* =========================================================
   TEXT
========================================================= */

.gci-fact p {
  margin: 0;

  color: #ffffff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 13px !important;
  line-height: 1.45;

  font-weight: 600;

  letter-spacing: 0.25px;

  text-transform: uppercase;

  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.75);
}


/* =========================================================
   HOVER
========================================================= */

.gci-fact:hover {
  transform: translateY(-3px);

  background:
    rgba(255, 255, 255, 0.025);
}


.gci-fact:hover .gci-icon {
  color: #f0bcc2;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1199px) {

  .gci-invest-section {
    padding: 34px 24px;

    background-size: cover;
  }


  /*
    Tablet par left / right sections
    ek ke neeche ek.
  */
  .gci-invest-container>.row {
    grid-template-columns: 1fr;
  }


  .gci-side {
    padding: 30px 12px !important;
  }


  .gci-side-left {
    border-right: 0;

    border-bottom:
      1px solid rgba(177, 139, 78, 0.72);
  }


  .gci-title {
    font-size: 40px;
  }


  .gci-fact {
    min-height: 170px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .gci-invest-section {
    padding: 45px 10px;

    /*
      MOBILE BACKGROUND IMAGE
      Recommended size: 900 × 1600
    */
    background-image:
      url("../assets/img/mob.jpg");

    background-size: 100% 100%;

    background-position: center;

    background-repeat: no-repeat;
  }


  .gci-side {
    padding: 45px 6px 10px 6px !important;
  }

  .gci-side-right {
    padding: 20px 6px 10px 6px !important;
  }

  .gci-heading {
    margin-bottom: 0px;
  }


  .gci-kicker {
    margin-bottom: 0px;

    font-size: 15px;

    letter-spacing: 5px;
  }


  .gci-title {
    font-size: 28px;

    line-height: 1.08;
  }


  /* 2 COLUMNS ON MOBILE */
  .gci-facts-row {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }


  .gci-fact {
    min-height: 125px;

    padding: 0px;
  }


  /* Remove desktop lines */
  .gci-fact::before,
  .gci-fact::after {
    display: none;
  }


  /* Vertical center divider */
  .gci-fact:nth-child(odd)::after {
    content: "";

    display: block;

    position: absolute;

    top: 14px;
    right: 0;
    bottom: 14px;

    width: 1px;

    background:
      rgba(177, 139, 78, 0.58);
  }


  /*
    Horizontal lines:
    row 1, row 2, row 3
  */
  .gci-fact:nth-child(-n + 6)::before {
    content: "";

    display: block;

    position: absolute;

    left: 30px;
    right: 8px;
    bottom: 0;

    height: 1px;
    width: 140px;

    background:
      rgba(177, 139, 78, 0.58);

  }


  .gci-icon {
    height: 48px;

    margin-bottom: 9px;
  }


  .gci-icon i {
    font-size: 38px;
  }


  .gci-fact p {
    font-size: 11px !important;

    line-height: 1.4;

    letter-spacing: 0;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

  .gci-invest-section {
    padding: 20px 10px;
  }


  .gci-side-right,
  .gci-side {
    padding:
      40px 4px 10px 4px !important;
  }

  .gci-side-right {
    padding:
      25px 4px 25px 4px !important;
  }


  .gci-title {
    font-size: 24px;
  }


  .gci-kicker {
    font-size: 13px;

    letter-spacing: 4px;
  }


  .gci-fact {
    min-height: 110px;

    padding: 0px 0px;
  }


  .gci-icon {
    height: 42px;
  }


  .gci-icon i {
    font-size: 33px;
  }


  .gci-fact p {
    font-size: 10px !important;

    line-height: 1.35;
  }

}

/* =========================================================
   INVEST SECTION — TOP METALLIC LINE + MOVING WHITE PILL
========================================================= */

.gci-invest-section {
  position: relative;
  overflow: hidden;
}


/* METALLIC TOP LINE */
.gci-invest-section::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  width: 100%;
  height: 2px;

  z-index: 20;

  background: linear-gradient(90deg,
      #74404a 0%,
      #b86f79 16%,
      #e8b4a8 36%,
      #ffd8d0 50%,
      #e8b4a8 64%,
      #b86f79 84%,
      #74404a 100%);

  box-shadow:
    0 1px 2px rgba(255, 220, 215, 0.25),
    0 2px 7px rgba(201, 130, 140, 0.25);

  pointer-events: none;
}


/* MOVING WHITE LIGHT */
.gci-invest-section::after {
  content: "";

  position: absolute;

  top: 0;
  left: -70px;

  width: 48px;
  height: 2px;

  z-index: 21;

  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0),
      #ffffff 30%,
      #fffaf8 50%,
      #ffffff 70%,
      rgba(255, 255, 255, 0));

  border-radius: 999px !important;

  box-shadow:
    0 0 4px rgba(255, 255, 255, 0.95),
    0 0 10px rgba(255, 235, 230, 0.80),
    0 0 18px rgba(232, 180, 168, 0.65);

  pointer-events: none;

  animation:
    gciTopLightMove 3.2s linear infinite;
}


/* MOVEMENT */
@keyframes gciTopLightMove {

  0% {
    left: -70px;
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  92% {
    opacity: 1;
  }

  100% {
    left: calc(100% + 70px);
    opacity: 0;
  }

}

/* =========================================================
   MOBILE + TABLET NAVBAR
   RESPONSIVE FRAME BACKGROUND + CLICK-ONLY SUBMENUS
========================================================= */

@media (max-width: 1024px) {

  /* =====================================================
     MAIN NAV PANEL
  ====================================================== */

  .nav {
    position: fixed !important;

    top: 50px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;

    /*
      RESPONSIVE WIDTH
      Tablet -> max 520px
      Mobile -> viewport according
    */
    width: clamp(320px, 68vw, 520px) !important;
    max-width: calc(100vw - 24px) !important;

    /*
      IMPORTANT:
      Fixed height REMOVED.
      Menu grows when submenu opens.
    */
    height: auto !important;
    min-height: 0 !important;

    /*
      Never go outside screen.
      If content becomes taller, nav itself scrolls.
    */
    max-height: calc(100dvh - 62px) !important;

    padding:
      42px 34px 38px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain;

    background-color: #07382b !important;

    background-image:
      linear-gradient(rgba(7, 56, 43, 0.10),
        rgba(7, 56, 43, 0.10)),
      url("../assets/img/nav-bg-new-mob.jpg") !important;

    /*
      IMPORTANT:
      NO COVER.
      Image will always fit complete panel.
      Nothing gets cropped.
    */
    background-size:
      100% 100%,
      100% 100% !important;

    background-position:
      center,
      center !important;

    background-repeat:
      no-repeat,
      no-repeat !important;

    border: 0 !important;

    border-radius: 15px !important;

    box-sizing: border-box !important;
  }


  /* =====================================================
     MAIN NAV LINKS
  ====================================================== */

  .nav>a,
  .nav-item.has-sub>a {
    width: 100% !important;

    padding:
      16px 10px !important;

    margin: 0 !important;

    box-sizing: border-box;

    background: transparent !important;

    border-bottom:
      1px solid rgba(201, 161, 74, 0.28) !important;
  }


  /* =====================================================
     NAV ITEMS
  ====================================================== */

  .nav-item,
  .nav-item.has-sub {
    display: block !important;

    width: 100% !important;

    margin: 0 !important;
  }


  .nav-item.has-sub>a {
    display: flex !important;

    align-items: center;
    justify-content: space-between;

    gap: 10px;
  }


  /* =====================================================
     CARET
  ====================================================== */

  .nav-item .caret {
    display: inline-flex !important;

    flex: 0 0 auto;

    margin-left: auto;

    transition:
      transform 0.3s ease !important;
  }


  /* =====================================================
     SUBMENU — CLOSED BY DEFAULT
  ====================================================== */

  .nav .nav-sub {
    position: static !important;

    display: block !important;

    width: 100% !important;
    min-width: 0 !important;

    /*
      Closed
    */
    max-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    overflow: hidden !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;

    border: 0 !important;

    box-shadow: none !important;

    background: transparent !important;
    background-image: none !important;

    transition:
      max-height 0.42s ease !important;
  }


  /* =====================================================
     DISABLE DESKTOP HOVER BEHAVIOUR
  ====================================================== */

  .nav .nav-item.has-sub:hover .nav-sub,
  .nav .nav-item.has-sub:focus-within .nav-sub {
    max-height: 0 !important;

    background: transparent !important;
    background-image: none !important;
  }


  .nav .nav-item.has-sub:hover .caret,
  .nav .nav-item.has-sub:focus-within .caret {
    transform: rotate(0deg) !important;
  }


  /* =====================================================
     CLICK OPEN STATE
     JS ADDS .is-open
  ====================================================== */

  .nav .nav-item.has-sub.is-open .nav-sub,
  .nav .nav-item.has-sub.is-open:hover .nav-sub,
  .nav .nav-item.has-sub.is-open:focus-within .nav-sub {
    /*
      Large enough for all submenu items.
      Parent nav height automatically increases.
    */
    max-height: 500px !important;
  }


  .nav .nav-item.has-sub.is-open .caret,
  .nav .nav-item.has-sub.is-open:hover .caret,
  .nav .nav-item.has-sub.is-open:focus-within .caret {
    transform: rotate(180deg) !important;
  }


  /* =====================================================
     SUBMENU LINKS
  ====================================================== */

  .nav .nav-sub a {
    display: block !important;

    width: 100% !important;

    padding:
      14px 12px 14px 24px !important;

    margin: 0 !important;

    white-space: normal !important;

    line-height: 1.4;

    box-sizing: border-box;

    background: transparent !important;

    border-bottom:
      1px solid rgba(232, 180, 168, 0.18) !important;
  }


  /* LAST SUBMENU LINK */

  .nav .nav-sub a:last-child {
    border-bottom:
      1px solid rgba(232, 180, 168, 0.18) !important;
  }


  /* =====================================================
     TOUCH NAV — REMOVE HOVER EFFECT
  ====================================================== */

  .nav .nav-sub a:hover,
  .nav .nav-sub a:focus,
  .nav .nav-sub a:active {
    background: transparent !important;

    color: inherit !important;

    transform: none !important;
  }

}


/* =========================================================
   TABLET
   769PX — 1024PX
========================================================= */

@media (min-width: 769px) and (max-width: 1024px) {

  .nav {
    width: min(54vw, 520px) !important;

    right: 18px !important;

    padding:
      44px 38px 40px !important;
  }

}


/* =========================================================
   MOBILE
   UNDER 768PX
========================================================= */

@media (max-width: 768px) {

  .nav {
    width: min(76vw, 420px) !important;

    right: 0px !important;

    top: 50px !important;

    max-height:
      calc(100dvh - 20px) !important;

    padding:
      38px 30px 34px 50px !important;
  }

}


/* =========================================================
   MOBILE
   UNDER 576PX
========================================================= */

@media (max-width: 576px) {

  .nav {
    width: min(78vw, 380px) !important;

    right: 0px !important;

    padding:
      30px 35px 34px 40px !important;

    border-radius:
      12px !important;
  }


  .nav>a,
  .nav-item.has-sub>a {
    padding:
      10px 20px !important;
  }


  .nav .nav-sub a {
    padding:
      13px 8px 13px 20px !important;
  }

}


/* =========================================================
   SMALL MOBILE
   UNDER 420PX
========================================================= */

@media (max-width: 420px) {

  .nav {
    /*
      Enough width so submenu text does not overflow.
    */
    width: calc(100vw - 34px) !important;

    right: 6px !important;

    max-width: 360px !important;

    padding:
      32px 24px 30px !important;
  }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

  .nav {
    width: calc(100vw - 18px) !important;

    right: 4px !important;

    padding:
      30px 21px 28px !important;
  }

}

/* =========================================================
   MOBILE + TABLET — RESTORE NAV-SUB BACKGROUND IMAGE
   IMAGE ONLY SHOWS WHEN SUBMENU IS OPEN
========================================================= */

@media (max-width: 1024px) {

  /* CLOSED STATE */
  .nav .nav-item.has-sub .nav-sub {
    max-height: 0 !important;

    padding: 0 !important;

    background-color: transparent !important;
    background-image: none !important;

    overflow: hidden !important;
  }


  /* =====================================================
     OPEN STATE — RESTORE BACKGROUND IMAGE
  ====================================================== */

  .nav .nav-item.has-sub.is-open .nav-sub,
  .nav .nav-item.has-sub.is-open:hover .nav-sub,
  .nav .nav-item.has-sub.is-open:focus-within .nav-sub {

    max-height: 500px !important;

    padding: 18px 15px !important;

    background-color: #07382b !important;

    background-image:
      linear-gradient(rgba(7, 56, 43, 0.08),
        rgba(7, 56, 43, 0.08)),
      url("../assets/img/mega-menu-bg.jpg") !important;

    /* FULL IMAGE — NO CROPPING */
    background-size:
      100% 100%,
      100% 100% !important;

    background-position:
      center,
      center !important;

    background-repeat:
      no-repeat,
      no-repeat !important;

    border: 0 !important;

    box-shadow: none !important;

    overflow: hidden !important;
  }


  /* =====================================================
     SUBMENU LINKS
  ====================================================== */

  .nav .nav-item.has-sub.is-open .nav-sub a {
    position: relative;

    width: 100% !important;

    padding:
      13px 16px !important;

    margin: 0 !important;

    background: transparent !important;

    white-space: normal !important;

    box-sizing: border-box;

    border-bottom:
      1px solid rgba(232, 180, 168, 0.18) !important;
  }


  .nav .nav-item.has-sub.is-open .nav-sub a:last-child {
    border-bottom: 0 !important;
  }

}



/* =========================================================
   NEWS CARD — WHITE PILL
   STARTS 1 SECOND AFTER HOVER
========================================================= */

.news-grid--2 .news-box>.news-border-pill {
  position: absolute !important;

  width: 48px;
  height: 2px;

  top: 0;
  left: 0;

  z-index: 20 !important;

  display: block;

  opacity: 0;

  pointer-events: none;

  border-radius: 999px !important;

  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0),
      #ffffff 30%,
      #fffaf8 50%,
      #ffffff 70%,
      rgba(255, 255, 255, 0));

  box-shadow:
    0 0 4px rgba(255, 255, 255, .95),
    0 0 10px rgba(255, 235, 230, .85),
    0 0 18px rgba(110, 231, 183, .75);
}


/* =========================================================
   CARD 01
   RIGHT TOP → LEFT
   LEFT TOP → BOTTOM
   BOTTOM LEFT → RIGHT
========================================================= */

.news-grid--2 .news-box:nth-child(1):hover>.news-border-pill {

  animation:
    newsWhitePillOne 2.4s linear 1s infinite;
}


@keyframes newsWhitePillOne {

  /* TOP RIGHT → LEFT */

  0% {
    opacity: 1;

    width: 48px;
    height: 2px;

    top: 0;
    left: calc(100% - 48px);

    background: linear-gradient(90deg,
        transparent,
        #fff 30%,
        #fffaf8 50%,
        #fff 70%,
        transparent);
  }

  32% {
    top: 0;
    left: 0;

    width: 48px;
    height: 2px;
  }


  /* LEFT TOP → BOTTOM */

  33% {
    top: 0;
    left: 0;

    width: 2px;
    height: 48px;

    background: linear-gradient(180deg,
        transparent,
        #fff 30%,
        #fffaf8 50%,
        #fff 70%,
        transparent);
  }

  65% {
    top: calc(100% - 48px);
    left: 0;

    width: 2px;
    height: 48px;
  }


  /* BOTTOM LEFT → RIGHT */

  66% {
    top: calc(100% - 2px);
    left: 0;

    width: 48px;
    height: 2px;

    background: linear-gradient(90deg,
        transparent,
        #fff 30%,
        #fffaf8 50%,
        #fff 70%,
        transparent);
  }

  100% {
    opacity: 1;

    top: calc(100% - 2px);
    left: calc(100% - 48px);

    width: 48px;
    height: 2px;
  }

}


/* =========================================================
   CARD 02
   TOP LEFT → RIGHT
   BOTTOM LEFT → RIGHT
========================================================= */

.news-grid--2 .news-box:nth-child(2):hover>.news-border-pill {

  animation:
    newsWhitePillTwo 2s linear 1s infinite;
}


@keyframes newsWhitePillTwo {

  0% {
    opacity: 1;

    top: 0;
    left: 0;
  }

  47% {
    opacity: 1;

    top: 0;
    left: calc(100% - 48px);
  }

  48% {
    opacity: 0;
  }

  50% {
    opacity: 1;

    top: calc(100% - 2px);
    left: 0;
  }

  100% {
    opacity: 1;

    top: calc(100% - 2px);
    left: calc(100% - 48px);
  }

}


/* =========================================================
   CARD 03
   LEFT TOP → RIGHT
   RIGHT TOP → BOTTOM
   BOTTOM RIGHT → LEFT
========================================================= */

.news-grid--2 .news-box:nth-child(3):hover>.news-border-pill {

  animation:
    newsWhitePillThree 2.4s linear 1s infinite;
}


@keyframes newsWhitePillThree {

  /* TOP LEFT → RIGHT */

  0% {
    opacity: 1;

    width: 48px;
    height: 2px;

    top: 0;
    left: 0;

    background: linear-gradient(90deg,
        transparent,
        #fff 30%,
        #fffaf8 50%,
        #fff 70%,
        transparent);
  }

  32% {
    top: 0;
    left: calc(100% - 48px);

    width: 48px;
    height: 2px;
  }


  /* RIGHT TOP → BOTTOM */

  33% {
    top: 0;
    left: calc(100% - 2px);

    width: 2px;
    height: 48px;

    background: linear-gradient(180deg,
        transparent,
        #fff 30%,
        #fffaf8 50%,
        #fff 70%,
        transparent);
  }

  65% {
    top: calc(100% - 48px);
    left: calc(100% - 2px);

    width: 2px;
    height: 48px;
  }


  /* BOTTOM RIGHT → LEFT */

  66% {
    top: calc(100% - 2px);
    left: calc(100% - 48px);

    width: 48px;
    height: 2px;

    background: linear-gradient(90deg,
        transparent,
        #fff 30%,
        #fffaf8 50%,
        #fff 70%,
        transparent);
  }

  100% {
    opacity: 1;

    top: calc(100% - 2px);
    left: 0;

    width: 48px;
    height: 2px;
  }

}

/* =========================================================
   NEWS CARDS — RESTORE NEON BORDER + KEEP WHITE PILL
========================================================= */

/* NEON DIRECTIONAL BORDER */
.news-grid--2 .news-box::after {
  color: #6ee7b7 !important;

  z-index: 8 !important;

  filter:
    drop-shadow(0 0 3px rgba(110, 231, 183, 1)) drop-shadow(0 0 7px rgba(110, 231, 183, 0.85)) drop-shadow(0 0 12px rgba(167, 243, 208, 0.65)) !important;
}


/* CARD 01 — neon animation */
.news-grid--2 .news-box:nth-child(1):hover::after {
  opacity: 1 !important;

  animation:
    newsCardOneDraw 0.9s linear forwards !important;
}


/* CARD 02 — neon animation */
.news-grid--2 .news-box:nth-child(2):hover::after {
  opacity: 1 !important;

  animation:
    newsCardTwoDraw 0.75s cubic-bezier(.22, 1, .36, 1) forwards !important;
}


/* CARD 03 — neon animation */
.news-grid--2 .news-box:nth-child(3):hover::after {
  opacity: 1 !important;

  animation:
    newsCardThreeDraw 0.9s linear forwards !important;
}


/* =========================================================
   WHITE PILL ALWAYS ABOVE NEON LINE
========================================================= */

.news-grid--2 .news-box>.news-border-pill {
  z-index: 15 !important;
}


/* Normal gold border disappears on hover */
.news-grid--2 .news-box:hover {
  border-color: transparent !important;
}

/* =========================================================
   DISCLAIMER POPUP — FINAL CENTER + SAFE INNER SCROLL FIX
   Paste this at the VERY END of your CSS
========================================================= */


/* =========================================================
   01. FULL POPUP — EXACT VIEWPORT CENTER
========================================================= */

.disc-modal {
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100dvh !important;

  display: none !important;

  place-items: center !important;

  padding: 20px !important;

  margin: 0 !important;

  overflow: hidden !important;

  box-sizing: border-box !important;

  z-index: 3000 !important;
}


.disc-modal.is-open {
  display: grid !important;
}


/* =========================================================
   02. BACKDROP
========================================================= */

.disc-modal-backdrop {
  position: fixed !important;

  inset: 0 !important;

  width: 100vw !important;
  height: 100dvh !important;

  background: rgba(2, 18, 13, 0.82) !important;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}


/* =========================================================
   03. DESKTOP DIALOG / OUTER FRAME
   FRAME ITSELF NEVER SCROLLS
========================================================= */

.disc-modal-dialog {
  position: relative !important;

  margin: 0 !important;

  padding: 0 !important;

  overflow: hidden !important;

  box-sizing: border-box !important;

  border: 0 !important;

  border-radius: 24px !important;


  /* DESKTOP LEATHER FRAME */

  background-color: #0b2a20 !important;

  background-image:
    url("../assets/leather/leather-background-1920x1080.webp") !important;

  background-size:
    100% 100% !important;

  background-position:
    center center !important;

  background-repeat:
    no-repeat !important;


  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55) !important;
}


/* =========================================================
   04. ONLY INNER CONTENT SCROLLS
   IMPORTANT: SAFE AREA INSIDE GOLD FRAME
========================================================= */

.disc-modal-scroll {
  position: absolute !important;

  /*
     Content starts AFTER top/side ropes
     and ends BEFORE bottom rope.
  */

  top: 40px !important;
  right: 58px !important;
  bottom: 40px !important;
  left: 58px !important;

  width: auto !important;
  height: auto !important;

  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;


  /*
     Extra bottom space ensures last text
     never hides below Scroll For More.
  */

  padding:
    18px 26px 20px 22px !important;


  overflow-y: auto !important;
  overflow-x: hidden !important;

  box-sizing: border-box !important;

  overscroll-behavior: contain;

  scrollbar-gutter: stable;

  -webkit-overflow-scrolling: touch;


  /*
     Stops scrolling children from visually
     painting outside this safe content area.
  */

  contain: paint;

  border-radius: 12px !important;
}


/* =========================================================
   05. CLOSE BUTTON
   ALWAYS INSIDE FRAME
========================================================= */

.disc-modal-x {
  position: absolute !important;

  top: 58px !important;
  right: 75px !important;

  z-index: 100 !important;

  width: 46px !important;
  height: 46px !important;

  border-radius: 50% !important;
}


/* =========================================================
   06. HEADING
========================================================= */

.disc-modal-dialog .disc-modal-head {
  position: relative;

  width: 100%;

  margin:
    0 0 28px !important;

  padding:
    0 65px !important;

  box-sizing: border-box;

  text-align: center;
}


.disc-modal-dialog .disc-modal-head .dm-ico-lg {
  margin:
    0 auto 10px !important;
}


.disc-modal-dialog .disc-modal-title {
  margin: 0 !important;

  padding: 0 !important;

  text-align: center !important;
}


/* =========================================================
   07. LIST — PREVENT TEXT FROM LEAVING FRAME
========================================================= */

.disc-modal-dialog .dm-list {
  width: 100%;

  max-width: 100%;

  margin: 0 !important;

  padding: 0 !important;

  box-sizing: border-box;
}


.disc-modal-dialog .dm-row {
  width: 100%;

  max-width: 100%;

  box-sizing: border-box;
}


.disc-modal-dialog .dm-txt {
  min-width: 0 !important;

  max-width: 100% !important;

  width: auto !important;

  margin-right: 0 !important;

  overflow-wrap: anywhere;

  box-sizing: border-box;
}


/* =========================================================
   08. SCROLL FOR MORE
   KEEP INSIDE BOTTOM FRAME
========================================================= */

.disc-more-cue {
  bottom: 42px !important;

  z-index: 110 !important;

  border-radius: 999px !important;
}


/* =========================================================
   09. DESKTOP/TABLET SCROLLBAR
========================================================= */

.disc-modal-scroll::-webkit-scrollbar {
  width: 7px !important;
}


.disc-modal-scroll::-webkit-scrollbar-track {
  background: transparent !important;
}


.disc-modal-scroll::-webkit-scrollbar-thumb {
  background:
    linear-gradient(180deg,
      #a95d6b,
      #f0bcc2,
      #fff0ed,
      #d58b96) !important;

  border:
    1px solid #073126 !important;

  border-radius:
    999px !important;
}


/* =========================================================
   10. TABLET
========================================================= */

@media (max-width: 991px) {

  .disc-modal {
    padding: 12px !important;
  }


  .disc-modal-dialog {
    width:
      calc(100vw - 24px) !important;

    height:
      calc(100dvh - 24px) !important;

    max-height:
      calc(100dvh - 24px) !important;

    border-radius:
      20px !important;
  }


  .disc-modal-scroll {
    top: 64px !important;

    right: 46px !important;

    bottom: 46px !important;

    left: 46px !important;

    padding:
      15px 20px 85px 18px !important;
  }


  .disc-modal-x {
    top: 48px !important;

    right: 44px !important;

    width: 42px !important;

    height: 42px !important;
  }


  .disc-more-cue {
    bottom:
      34px !important;
  }

}


/* =========================================================
   11. MOBILE
   DIFFERENT PORTRAIT BACKGROUND IMAGE
========================================================= */

@media (max-width: 767px) {

  .disc-modal {
    padding: 7px !important;
  }


  .disc-modal-dialog {
    width:
      calc(100vw - 14px) !important;

    height:
      calc(100dvh - 14px) !important;

    max-height:
      calc(100dvh - 14px) !important;


    /*
       MOBILE PORTRAIT LEATHER FRAME
    */

    background-image:
      url("../assets/leather/leather-card-900x1200.webp") !important;

    background-size:
      100% 100% !important;

    background-position:
      center center !important;

    background-repeat:
      no-repeat !important;

    border-radius:
      18px !important;

    overflow:
      hidden !important;
  }


  /*
     Content stays completely inside
     mobile frame ropes.
  */

  .disc-modal-scroll {
    top: 40px !important;

    right: 36px !important;

    bottom: 38px !important;

    left: 36px !important;


    width: auto !important;

    height: auto !important;


    padding:
      18px 12px 15px 10px !important;


    overflow-y:
      auto !important;

    overflow-x:
      hidden !important;


    contain: paint;
  }


  .disc-modal-x {
    top: 45px !important;

    right: 50px !important;

    width: 38px !important;

    height: 38px !important;
  }


  .disc-modal-dialog .disc-modal-head {
    padding:
      0 34px !important;

    margin-bottom:
      20px !important;
  }


  .disc-more-cue {
    bottom:
      27px !important;
  }

}


/* =========================================================
   12. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

  .disc-modal-dialog {
    width:
      calc(100vw - 10px) !important;

    height:
      calc(100dvh - 10px) !important;

    max-height:
      calc(100dvh - 10px) !important;

    border-radius:
      15px !important;
  }


  .disc-modal-scroll {
    top:
      45px !important;

    right:
      1px !important;

    bottom:
      40px !important;

    left:
      37px !important;


    padding:
      15px 30px 15px 10px !important;
  }


  .disc-modal-x {
    top:
      60px !important;

    right:
      53px !important;

    width:
      34px !important;

    height:
      34px !important;
  }


  .disc-modal-dialog .disc-modal-head {
    padding:
      0 8px !important;
  }


  .disc-modal-dialog .dm-row {
    grid-template-columns:
      38px minmax(0, 1fr) !important;

    column-gap:
      10px !important;

    padding:
      12px 0 !important;
  }


  .disc-modal-dialog .dm-row>.dm-ico {
    width:
      38px !important;

    height:
      38px !important;
  }


  .disc-more-cue {
    bottom:
      22px !important;
  }

}

/* =========================================================
   CENTER DIVIDER — SHORT HEIGHT
========================================================= */

.gci-side-left {
  position: relative;
  border-right: 0 !important;
}

.gci-side-left::after {
  content: "";

  position: absolute;

  top: 50%;
  right: 0;

  width: 1px;

  /* YAHAN SE HEIGHT CONTROL KARNA */
  height: 85%;

  transform: translateY(-50%);

  background: rgba(177, 139, 78, 0.72);

  pointer-events: none;
}




@media (max-width: 480px) {

  .gci-side-left::after {
    display: none !important;
  }


}

/* =========================================================
   TABLET + MOBILE ONLY
========================================================= */

@media (max-width: 1199px) {

  /* LEFT COLUMN KI FULL WIDTH BOTTOM LINE REMOVE */
  .gci-side-left {
    position: relative;
    border-bottom: 0 !important;
  }

  /* SAME LINE — SHORT WIDTH */
  .gci-side-left::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    width: 82%;
    /* line ki width yahan se control karo */
    height: 1px;

    transform: translateX(-50%);

    background: rgba(177, 139, 78, 0.72);

    pointer-events: none;
  }


  /* LAST ROW KE 2 BOXES KI BOTTOM LINE REMOVE */
  .gci-fact:nth-last-child(-n + 2) {
    border-bottom: 0 !important;
  }

}


.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
--bs-gutter-x : 0px !important;
}
    
/* about us page css */
/* =====================================================================
   GCSEZ NESTED POPUPS — RESPONSIVE FRAME + CONTAINED INNER SCROLL
   Final override block. Keep this at the END of styles2b9f.css.
   ===================================================================== */

/* While any popup in the stack is open, the page itself must not move. */
body.gc-popup-stack-open {
  overflow: hidden !important;
  overscroll-behavior: none;
}

/* Inner popup layer sits ABOVE the large quick-links popup (z-index: 3000). */
.gcsez-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 4000;
  width: 100vw !important;
  height: 100dvh !important;
  padding: 24px;
  margin: 0 !important;
  display: none;
  place-items: center;
  overflow: hidden !important;
  box-sizing: border-box;
}

.gcsez-modal.is-open {
  display: grid !important;
}

.gcsez-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0;
  background: rgba(2, 18, 13, 0.76) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Parent popup stays visible behind a nested popup. */
.gc-quick-popup.has-child-popup,
.gcsez-modal.has-child-popup {
  visibility: visible !important;
}

/* ---------------------------------------------------------------------
   BASE / DESKTOP: landscape rectangle
   1301px+ uses the landscape leather image.
   --------------------------------------------------------------------- */
.gcsez-dialog,
.gcsez-dialog.gcsez-dialog--media,
.gcsez-dialog.gcsez-dialog--wide {
  position: relative !important;
  z-index: 1;

  width: min(1300px, calc(100vw - 48px), calc((100dvh - 48px) * 16 / 9)) !important;
  height: auto !important;
  aspect-ratio: 16 / 9;

  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: calc(100dvh - 48px) !important;

  margin: 0 !important;
  padding: 70px 74px 62px !important;
  box-sizing: border-box;

  display: flex !important;
  flex-direction: column;
  align-items: stretch;

  /* IMPORTANT: the decorative frame never scrolls. Only its inner body scrolls. */
  overflow: hidden !important;

  border: 0 !important;
  border-radius: 20px !important;
  background-color: #0b2a20 !important;
  background-image: url("../assets/leather/leather-background-1920x1080.webp") !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-clip: border-box !important;

  box-shadow: 0 30px 85px rgba(0, 0, 0, 0.58) !important;
  animation: discPop .26s ease;
  isolation: isolate;
}

/* Header never joins the scroll area. */
.gcsez-dialog > .gcsez-eyebrow,
.gcsez-dialog > .gcsez-title {
  flex: 0 0 auto;
}

.gcsez-dialog > .gcsez-eyebrow {
  display: block;
  margin: 0 0 8px !important;
  padding: 0 78px 0 25px !important;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: 3px;
}

.gcsez-dialog > .gcsez-title {
  margin: 0 0 22px !important;
  padding: 0 78px 0 25px !important;
  font-size: clamp(30px, 2.4vw, 44px) !important;
  line-height: 1.06 !important;
}

/* Close button belongs to the fixed frame, not to the scrolling content. */
.gcsez-dialog > .gcsez-x {
  position: absolute !important;
  top: 52px !important;
  right: 58px !important;
  z-index: 20 !important;

  float: none !important;
  margin: 0 !important;

  width: 46px !important;
  height: 46px !important;

  display: grid !important;
  place-items: center;

  border: 1px solid rgba(232, 180, 168, 0.72) !important;
  border-radius: 50% !important;
  background: rgba(7, 57, 43, 0.94) !important;
  color: #e8b4a8 !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.gcsez-dialog > .gcsez-x:hover,
.gcsez-dialog > .gcsez-x:focus-visible {
  background: #e8b4a8 !important;
  color: #08362a !important;
}

/*
   Every possible dialog body becomes the ONLY vertical scroll area.
   This prevents maps/videos/jingles/bylaws from painting outside the frame.
*/
.gcsez-dialog > .maps-btns,
.gcsez-dialog > .gcsez-links,
.gcsez-dialog > .media-grid,
.gcsez-dialog > .gcsez-body {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  max-height: none !important;

  margin-top: 0 !important;
  padding: 2px 12px 12px 2px !important;
  box-sizing: border-box;

  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;

  contain: layout paint;
}

/* Modal content must render immediately; page reveal animation must not offset it. */
.gcsez-dialog .reveal,
.gcsez-dialog .reveal.in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Desktop document layouts. */
.gcsez-dialog > .maps-btns,
.gcsez-dialog > .gcsez-links {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 12px !important;
}

.gcsez-dialog > .gcsez-links > a,
.gcsez-dialog > .maps-btns > .map-btn {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Media stays a proper contained grid instead of the old popup-wide horizontal strip. */
.gcsez-dialog > .media-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-content: start;
  gap: 14px !important;
}

.gcsez-dialog > .media-grid > .vembed {
  min-width: 0;
  max-width: none !important;
  width: 100%;
}

.gcsez-dialog > .gcsez-body {
  display: block;
}

/* Ensure long labels never force the scroll body outside the frame. */
.gcsez-dialog .map-btn,
.gcsez-dialog .gcsez-links a,
.gcsez-dialog .gcsez-links a span,
.gcsez-dialog .vembed-cap,
.gcsez-dialog .gcsez-body {
  overflow-wrap: anywhere;
  word-break: normal;
}


/* ---------------------------------------------------------------------
   900px — 1300px
   Near-square tablet popup, but intentionally taller than it is wide.
   Uses the square leather artwork.
   --------------------------------------------------------------------- */
@media (min-width: 900px) and (max-width: 1300px) {
  .gcsez-modal {
    padding: 28px;
  }

  .gcsez-dialog,
  .gcsez-dialog.gcsez-dialog--media,
  .gcsez-dialog.gcsez-dialog--wide {
    width: min(1320px, calc(100vw - 56px), calc((100dvh - 56px) * 16 / 9)) !important;
    max-height: calc(100dvh - 56px) !important;
    padding: 76px 82px 68px !important;
  }

  .gcsez-dialog > .gcsez-x {
    top: 57px !important;
    right: 65px !important;
    width: 48px !important;
    height: 48px !important;
  }

  .gcsez-dialog > .gcsez-title {
    font-size: 44px !important;
    margin-bottom: 24px !important;
  }

  .gcsez-dialog > .media-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ---------------------------------------------------------------------
   600px — 899px
   Smaller tall-square tablet popup. Same square background family.
   --------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 899px) {
  .gcsez-modal {
    padding: 14px;
  }

  .gcsez-dialog,
  .gcsez-dialog.gcsez-dialog--media,
  .gcsez-dialog.gcsez-dialog--wide {
    width: min(610px, calc(100vw - 28px), calc((100dvh - 28px) * 4 / 5)) !important;
    height: auto !important;
    aspect-ratio: 4 / 5;
    max-height: calc(100dvh - 28px) !important;

    padding: 60px 52px 52px !important;

    background-image: url("../assets/leather/leather-square-1200x1200.webp") !important;
  }

  .gcsez-dialog > .gcsez-x {
    top: 39px !important;
    right: 39px !important;
    width: 42px !important;
    height: 42px !important;
  }

  .gcsez-dialog > .gcsez-eyebrow {
    font-size: 11px;
    line-height: 16px;
    letter-spacing: 2.2px;
    padding-right: 58px !important;
  }

  .gcsez-dialog > .gcsez-title {
    font-size: 32px !important;
    margin-bottom: 17px !important;
    padding-right: 58px !important;
  }

  .gcsez-dialog > .maps-btns,
  .gcsez-dialog > .gcsez-links {
    grid-template-columns: 1fr;
    gap: 9px !important;
  }

  .gcsez-dialog > .media-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    gap: 10px !important;
    scroll-snap-type: none !important;
  }

  .gcsez-dialog > .media-grid > .vembed,
  .gcsez-dialog > .media-grid > .vembed[data-mp4] {
    flex: none !important;
    max-width: none !important;
    width: 100% !important;
  }
}

/* ---------------------------------------------------------------------
   400px — 599px
   Mobile portrait popup. Uses the dedicated vertical leather artwork.
   --------------------------------------------------------------------- */
@media (min-width: 400px) and (max-width: 599px) {
  .gcsez-modal {
    padding: 10px;
  }

  .gcsez-dialog,
  .gcsez-dialog.gcsez-dialog--media,
  .gcsez-dialog.gcsez-dialog--wide {
    width: min(440px, calc(100vw - 20px), calc((100dvh - 20px) * 3 / 4)) !important;
    height: auto !important;
    aspect-ratio: 2 / 4;
    max-height: calc(100dvh - 20px) !important;

    padding: 60px 39px 60px !important;
    border-radius: 18px !important;

    background-image: url("../assets/leather/leather-card-900x1200.webp") !important;
  }

  .gcsez-dialog > .gcsez-x {
    top: 60px !important;
    right: 50px !important;
    width: 38px !important;
    height: 38px !important;
  }

  .gcsez-dialog > .gcsez-eyebrow {
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 2px;
    padding-right: 48px !important;
    margin-bottom: 5px !important;
  }

  .gcsez-dialog > .gcsez-title {
    font-size: 28px !important;
    line-height: 1.08 !important;
    margin-bottom: 14px !important;
    padding-right: 48px !important;
  }

  .gcsez-dialog > .maps-btns,
  .gcsez-dialog > .gcsez-links {
    grid-template-columns: 1fr;
    gap: 8px !important;
  }

  .gcsez-dialog > .media-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    gap: 8px !important;
    scroll-snap-type: none !important;
  }

  .gcsez-dialog > .media-grid > .vembed,
  .gcsez-dialog > .media-grid > .vembed[data-mp4] {
    flex: none !important;
    max-width: none !important;
    width: 100% !important;
  }

  .gcsez-dialog .map-btn,
  .gcsez-dialog .gcsez-links a {
    padding: 11px 12px !important;
    font-size: 13px !important;
  }

  .gcsez-dialog .vembed-cap {
    font-size: 10px !important;
    padding: 26px 7px 7px !important;
  }

  .gcsez-dialog .vembed-play {
    width: 46px;
    height: 46px;
  }
}

/* ---------------------------------------------------------------------
   Under 400px
   Compact portrait popup; still never leaves the viewport.
   --------------------------------------------------------------------- */
@media (max-width: 399px) {
  .gcsez-modal {
    padding: 7px;
  }

  .gcsez-dialog,
  .gcsez-dialog.gcsez-dialog--media,
  .gcsez-dialog.gcsez-dialog--wide {
    width: min(365px, calc(100vw - 14px), calc((100dvh - 14px) * 3 / 4)) !important;
    height: auto !important;
    aspect-ratio: 2 / 4;
    max-height: calc(100dvh - 14px) !important;

    padding: 56px 38px 50px 40px !important;
    border-radius: 16px !important;
overflow: hidden !important;
    background-image: url("../assets/leather/leather-card-900x1200.webp") !important;
  }

  .gcsez-dialog > .gcsez-x {
    top: 52px !important;
    right: 52px !important;
    width: 34px !important;
    height: 34px !important;
  }

  .gcsez-dialog > .gcsez-eyebrow {
    font-size: 9px;
    line-height: 14px;
    letter-spacing: 1.7px;
    padding-right: 42px !important;
    margin-bottom: 4px !important;
  }

  .gcsez-dialog > .gcsez-title {
    font-size: 24px !important;
    line-height: 1.08 !important;
    margin-bottom: 12px !important;
    padding-right: 42px !important;
  }

  .gcsez-dialog > .maps-btns,
  .gcsez-dialog > .gcsez-links {
    grid-template-columns: 1fr;
    gap: 7px !important;
  }

  .gcsez-dialog > .media-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    gap: 8px !important;
    scroll-snap-type: none !important;
  }

  .gcsez-dialog > .media-grid > .vembed,
  .gcsez-dialog > .media-grid > .vembed[data-mp4] {
    flex: none !important;
    max-width: none !important;
    width: 100% !important;
  }

  .gcsez-dialog .map-btn,
  .gcsez-dialog .gcsez-links a {
    padding: 10px 10px !important;
    gap: 8px !important;
    font-size: 12px !important;
  }

  .gcsez-dialog .map-size {
    display: inline-block;
    margin: 4px 0 0 0 !important;
    font-size: 10px !important;
  }

  .gcsez-dialog .vembed-cap {
    font-size: 10px !important;
    padding: 24px 7px 7px !important;
  }

  .gcsez-dialog .vembed-play {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gcsez-dialog,
  .gcsez-dialog .vembed,
  .gcsez-dialog .map-btn,
  .gcsez-dialog .gcsez-links a {
    animation: none !important;
    transition: none !important;
  }
}

/* =====================================================================
   MEDIA POPUPS — SEPARATE VIDEO / JINGLE / REEL LAYOUTS
   Final override block. Keep this at the VERY END of styles2b9f.css.

   - Videos  : horizontal YouTube-style 16:9 cards
   - Jingles : vertical Reel-style 9:16 cards
   - Reels   : vertical Reel-style 9:16 cards
   ===================================================================== */

/* No title strip/text over any popup media thumbnail. */
.gcsez-media-modal .vembed-cap {
  display: none !important;
}

/* ---------------------------------------------------------------------
   COMMON MEDIA GRID BEHAVIOUR
   --------------------------------------------------------------------- */
.media-grid--videos,
.media-grid--jingles,
.media-grid--reels {
  display: grid !important;
  align-content: start !important;
  align-items: start !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-snap-type: none !important;
}

/* Videos get fewer columns because every card is landscape. */
.media-grid--videos {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

/* Jingles/Reels stay compact and portrait. */
.media-grid--jingles,
.media-grid--reels {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

/* ---------------------------------------------------------------------
   VIDEO CARDS — YouTube / landscape
   --------------------------------------------------------------------- */
.vembed--video {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #6f6737 !important;
  background-image:
    linear-gradient(rgba(87, 79, 36, 0.34), rgba(87, 79, 36, 0.34)),
    url("../assets/leather-tile1bce.webp?v=6") !important;
  background-size: auto, 900px auto !important;
  background-position: center !important;
  background-repeat: repeat !important;
}

/* ---------------------------------------------------------------------
   JINGLE / REEL CARDS — portrait
   --------------------------------------------------------------------- */
.vembed--jingle,
.vembed--reel {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 9 / 16 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: #6f6737 !important;
  background-image:
    linear-gradient(rgba(87, 79, 36, 0.34), rgba(87, 79, 36, 0.34)),
    url("../assets/leather-tile1bce.webp?v=6") !important;
  background-size: auto, 900px auto !important;
  background-position: center !important;
  background-repeat: repeat !important;
}

/* ---------------------------------------------------------------------
   THUMBNAILS / PLAYING MEDIA
   Same inset frame, but each card keeps its own aspect ratio.
   --------------------------------------------------------------------- */
.vembed--video .vembed-poster,
.vembed--jingle .vembed-poster,
.vembed--reel .vembed-poster {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  left: 14px !important;
  z-index: 1 !important;
  display: block !important;
  width: calc(100% - 28px) !important;
  height: calc(100% - 28px) !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* Keep play button above thumbnail. */
.vembed--video .vembed-play,
.vembed--jingle .vembed-play,
.vembed--reel .vembed-play {
  z-index: 4 !important;
}

/* Keep JS-injected player inside the same framed card. */
.vembed--video iframe,
.vembed--jingle iframe,
.vembed--reel iframe,
.vembed--video video,
.vembed--jingle video,
.vembed--reel video {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;
  bottom: 14px !important;
  left: 14px !important;
  width: calc(100% - 28px) !important;
  height: calc(100% - 28px) !important;
  border: 0 !important;
  object-fit: cover !important;
  background: #000 !important;
}

/* Old generic mobile flex rules must never turn popup media into strips. */
.gcsez-media-modal .media-grid--videos,
.gcsez-media-modal .media-grid--jingles,
.gcsez-media-modal .media-grid--reels {
  flex-wrap: initial !important;
}

/* ---------------------------------------------------------------------
   900px — 1399px
   --------------------------------------------------------------------- */
@media (min-width: 900px) and (max-width: 1399px) {
  .media-grid--videos {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .media-grid--jingles,
  .media-grid--reels {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
}

/* ---------------------------------------------------------------------
   600px — 899px
   --------------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 899px) {
  .media-grid--videos,
  .media-grid--jingles,
  .media-grid--reels {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .vembed--video .vembed-poster,
  .vembed--jingle .vembed-poster,
  .vembed--reel .vembed-poster,
  .vembed--video iframe,
  .vembed--jingle iframe,
  .vembed--reel iframe,
  .vembed--video video,
  .vembed--jingle video,
  .vembed--reel video {
    top: 11px !important;
    right: 11px !important;
    bottom: 11px !important;
    left: 11px !important;
    width: calc(100% - 22px) !important;
    height: calc(100% - 22px) !important;
  }
}

/* ---------------------------------------------------------------------
   400px — 599px
   Videos become one full-width landscape card.
   Jingles/Reels remain two portrait cards side-by-side.
   --------------------------------------------------------------------- */
@media (min-width: 400px) and (max-width: 599px) {
  .media-grid--videos {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .media-grid--jingles,
  .media-grid--reels {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .vembed--video .vembed-poster,
  .vembed--jingle .vembed-poster,
  .vembed--reel .vembed-poster,
  .vembed--video iframe,
  .vembed--jingle iframe,
  .vembed--reel iframe,
  .vembed--video video,
  .vembed--jingle video,
  .vembed--reel video {
    top: 8px !important;
    right: 8px !important;
    bottom: 8px !important;
    left: 8px !important;
    width: calc(100% - 16px) !important;
    height: calc(100% - 16px) !important;
  }

  .gcsez-media-modal .vembed-play {
    width: 42px !important;
    height: 42px !important;
  }
}

/* ---------------------------------------------------------------------
   Under 400px
   Videos: one 16:9 card.
   Jingles/Reels: two 9:16 cards.
   --------------------------------------------------------------------- */
@media (max-width: 399px) {
  .media-grid--videos {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .media-grid--jingles,
  .media-grid--reels {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .vembed--video,
  .vembed--jingle,
  .vembed--reel {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
  }

  .vembed--video {
    aspect-ratio: 16 / 9 !important;
  }

  .vembed--jingle,
  .vembed--reel {
    aspect-ratio: 9 / 16 !important;
  }

  .vembed--video .vembed-poster,
  .vembed--jingle .vembed-poster,
  .vembed--reel .vembed-poster,
  .vembed--video iframe,
  .vembed--jingle iframe,
  .vembed--reel iframe,
  .vembed--video video,
  .vembed--jingle video,
  .vembed--reel video {
    top: 6px !important;
    right: 6px !important;
    bottom: 6px !important;
    left: 6px !important;
    width: calc(100% - 12px) !important;
    height: calc(100% - 12px) !important;
  }

  .gcsez-media-modal .vembed-play {
    width: 38px !important;
    height: 38px !important;
  }
}
/* =========================================================
   JINGLES / REELS GRID ROW OVERLAP FIX
   ========================================================= */

.media-grid--jingles,
.media-grid--reels {
  grid-auto-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
}

.media-grid--jingles > .vembed--jingle,
.media-grid--reels > .vembed--reel {
  position: relative !important;
  align-self: start !important;
  height: auto !important;
  aspect-ratio: 9 / 16 !important;
}

/* =====================================================================
   FINAL MEDIA POPUP PATCH
   01 OCT 2026
   - Keep existing Jingles responsive/grid layout unchanged.
   - Remove thumbnail card background image / colour from Videos + Jingles.
   - Fix Videos row sizing on mobile so 16:9 thumbnails never overlap.
   ===================================================================== */

/* ---------------------------------------------------------
   CLEAN THUMBNAIL CARDS
   No leather image, no coloured fill, no border/shadow.
   Layout/aspect-ratio is NOT changed here.
   --------------------------------------------------------- */
.gcsez-media-modal--videos .vembed--video,
.gcsez-media-modal--jingles .vembed--jingle {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Let the real thumbnail fill the complete card.
   Removes the visible leather/colour frame around it. */
.gcsez-media-modal--videos .vembed--video .vembed-poster,
.gcsez-media-modal--jingles .vembed--jingle .vembed-poster {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  background: transparent !important;
  background-image: none !important;
  border-radius: 10px !important;
}

/* Playing iframe/video also fills the complete card. */
.gcsez-media-modal--videos .vembed--video iframe,
.gcsez-media-modal--videos .vembed--video video,
.gcsez-media-modal--jingles .vembed--jingle iframe,
.gcsez-media-modal--jingles .vembed--jingle video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  object-fit: cover !important;
  background: transparent !important;
}

/* ---------------------------------------------------------
   VIDEOS ONLY — ROW OVERLAP FIX
   Jingles grid/layout intentionally untouched.
   --------------------------------------------------------- */
.gcsez-media-modal--videos .media-grid--videos {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-auto-rows: max-content !important;
  align-items: start !important;
  align-content: start !important;
}

.gcsez-media-modal--videos .media-grid--videos > .vembed--video {
  position: relative !important;
  display: block !important;
  align-self: start !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important;
  flex: none !important;
}

/* ---------------------------------------------------------
   MOBILE VIDEOS
   One clean 16:9 thumbnail per row.
   Jingles mobile rules are intentionally NOT included.
   --------------------------------------------------------- */
@media (max-width: 599px) {
  .gcsez-media-modal--videos .media-grid--videos,
  .gcsez-dialog > .media-grid--videos {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: max-content !important;
    gap: 10px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-snap-type: none !important;
  }

  .gcsez-media-modal--videos .media-grid--videos > .vembed--video,
  .gcsez-dialog > .media-grid--videos > .vembed--video {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    flex: none !important;
    align-self: start !important;
    scroll-snap-align: none !important;
  }

  .gcsez-media-modal--videos .vembed--video .vembed-poster,
  .gcsez-media-modal--videos .vembed--video iframe,
  .gcsez-media-modal--videos .vembed--video video {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* Extra-small phones: same behaviour, just a slightly tighter gap. */
@media (max-width: 399px) {
  .gcsez-media-modal--videos .media-grid--videos,
  .gcsez-dialog > .media-grid--videos {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-rows: max-content !important;
    gap: 8px !important;
  }
}

/* =====================================================================
   PRELOADER — TABLET + MOBILE FINAL RESPONSIVE FIX
   Desktop 1200px+ is intentionally untouched.

   Goals:
   - video always remains INSIDE its safe area
   - video is never cropped
   - loading bar/content stays perfectly centered
   - keeps the existing mobile artwork/path
   ===================================================================== */


/* =========================================================
   TABLET — 768px to 1199px
   Keep existing desktop/tablet visual system, but make the
   media and content safely centered and impossible to crop.
   ========================================================= */
@media (min-width: 768px) and (max-width: 1199px) {

  .page-loader {
    overflow: hidden !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;

    gap: clamp(18px, 3vw, 42px) !important;
    padding: clamp(42px, 6vw, 76px) !important;

    box-sizing: border-box !important;
  }

  .page-loader .pl-video--desktop {
    display: none !important;
  }

  /* Full video stays visible. Nothing can escape this area. */
  .page-loader .pl-video--mobile {
    display: block !important;

    position: relative !important;
    inset: auto !important;

    flex: 0 1 auto !important;

    width: min(42vw, 430px) !important;
    height: min(52vw, 68dvh) !important;

    max-width: 44% !important;
    max-height: 68dvh !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    object-fit: contain !important;
    object-position: center center !important;

    overflow: hidden !important;
    background: transparent !important;
    border: 0 !important;

    box-sizing: border-box !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }

  /* Center the complete loading-content column. */
  .page-loader .pl-content {
    position: relative !important;
    inset: auto !important;

    display: flex !important;
    flex: 0 1 520px !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    width: min(46vw, 520px) !important;
    max-width: 46% !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    text-align: center !important;
    box-sizing: border-box !important;
    z-index: 3 !important;
  }

  .page-loader .pl-track {
    display: block !important;

    width: min(100%, 430px) !important;
    max-width: 100% !important;
    height: 5px !important;

    margin: 0 auto 24px !important;

    flex: none !important;
  }

  .page-loader .pl-note {
    width: 100% !important;
    max-width: 500px !important;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;
  }

  .page-loader .pl-note strong,
  .page-loader .pl-sub {
    width: 100% !important;
    max-width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
  }
}


/* =========================================================
   MOBILE — 767px and below
   The portrait artwork is the master canvas.
   All positions use percentages, so they scale together on
   narrow/tall/short phones without leaving the inner frame.
   ========================================================= */
@media (max-width: 767px) {

  .page-loader {
    --pl-safe-left: 10.5%;
    --pl-safe-width: 79%;

    position: fixed !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100dvh !important;
    min-height: 100dvh !important;

    display: block !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    overscroll-behavior: none !important;

    background: #031b14 !important;
    background-image: none !important;

    box-sizing: border-box !important;
  }

  /* Existing portrait artwork — unchanged path. */
  .page-loader::before {
    content: "" !important;
    display: block !important;

    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    background-color: #031b14 !important;
    background-image: url("../assets/img/nav-bg-mob-new.webp") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;

    /* Artwork and percentages scale as one canvas. */
    background-size: 100% 100% !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* No extra coloured layer behind the video. */
  .page-loader::after {
    content: none !important;
    display: none !important;
  }

  .page-loader .pl-video--desktop {
    display: none !important;
  }

  /* ---------------------------------------------------------
     SAFE VIDEO AREA
     The element itself never exceeds the inner rope/frame.
     object-fit: contain guarantees the COMPLETE MP4 is shown.
     --------------------------------------------------------- */
  .page-loader .pl-video--mobile {
    display: block !important;

    position: absolute !important;

    left: var(--pl-safe-left) !important;
    top: 18.5% !important;

    width: var(--pl-safe-width) !important;
    height: 32% !important;

    max-width: var(--pl-safe-width) !important;
    max-height: 32% !important;

    min-width: 0 !important;
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    object-fit: contain !important;
    object-position: center center !important;

    overflow: hidden !important;

    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    opacity: 1 !important;
    visibility: visible !important;

    box-sizing: border-box !important;

    z-index: 3 !important;
    pointer-events: none !important;
  }

  /* ---------------------------------------------------------
     CENTERED LOADER CONTENT
     Same safe width as the inner frame/video.
     --------------------------------------------------------- */
  .page-loader .pl-content {
    display: flex !important;

    position: absolute !important;

    left: 50% !important;
    top: 53.5% !important;

    width: var(--pl-safe-width) !important;
    max-width: var(--pl-safe-width) !important;

    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: translateX(-50%) !important;

    text-align: center !important;

    box-sizing: border-box !important;

    z-index: 4 !important;
    pointer-events: none !important;
  }

  .page-loader .pl-track {
    display: block !important;

    position: relative !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 5px !important;

    flex: none !important;

    margin: 0 auto 18px !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: rgba(109, 37, 62, 0.50) !important;
    border: 0 !important;
    border-radius: 999px !important;

    box-shadow: 0 0 8px rgba(240, 188, 194, 0.16) !important;

    box-sizing: border-box !important;
  }

  .page-loader .pl-bar {
    display: block !important;

    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    border-radius: inherit !important;

    background: linear-gradient(
      90deg,
      #743946 0%,
      #aa5969 18%,
      #df929d 35%,
      #f0bcc2 47%,
      #fff0ed 51%,
      #e2a0a9 64%,
      #ad5968 82%,
      #703541 100%
    ) !important;

    box-shadow: 0 0 8px rgba(240, 188, 194, 0.46) !important;
  }

  .page-loader .pl-note {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;

    font-size: clamp(12px, 3.6vw, 17px) !important;
    line-height: 1.55 !important;

    box-sizing: border-box !important;
  }

  .page-loader .pl-note strong {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto 12px !important;
    padding: 0 !important;

    text-align: center !important;

    font-size: clamp(27px, 7.4vw, 40px) !important;
    line-height: 1.08 !important;
  }

  .page-loader .pl-sub {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;

    text-align: center !important;

    font-size: clamp(12px, 3.6vw, 17px) !important;
    line-height: 1.55 !important;
  }
}


/* =========================================================
   VERY NARROW PHONES
   Reduce only typography; video/frame geometry stays locked.
   ========================================================= */
@media (max-width: 420px) {

  .page-loader {
    --pl-safe-left: 10%;
    --pl-safe-width: 80%;
  }

  .page-loader .pl-content {
    top: 53% !important;
  }

  .page-loader .pl-track {
    height: 4px !important;
    margin-bottom: 14px !important;
  }

  .page-loader .pl-note strong {
    font-size: clamp(24px, 7vw, 31px) !important;
    margin-bottom: 9px !important;
  }

  .page-loader .pl-note,
  .page-loader .pl-sub {
    font-size: clamp(11px, 3.45vw, 14px) !important;
    line-height: 1.5 !important;
  }
}


/* =========================================================
   SHORT MOBILE SCREENS
   Keep everything inside the lower rope by compacting content.
   ========================================================= */
@media (max-width: 767px) and (max-height: 700px) {

  .page-loader .pl-video--mobile {
    top: 17.5% !important;
    height: 31% !important;
    max-height: 31% !important;
  }

  .page-loader .pl-content {
    top: 51.5% !important;
  }

  .page-loader .pl-track {
    margin-bottom: 12px !important;
  }

  .page-loader .pl-note strong {
    font-size: clamp(23px, 6.5vw, 30px) !important;
    margin-bottom: 7px !important;
  }

  .page-loader .pl-note,
  .page-loader .pl-sub {
    font-size: clamp(10px, 3vw, 13px) !important;
    line-height: 1.42 !important;
  }
}


/* =========================================================
   LANDSCAPE PHONE SAFEGUARD
   Video still remains contained and content remains centered.
   ========================================================= */
@media (max-width: 767px) and (orientation: landscape) {

  .page-loader .pl-video--mobile {
    top: 15% !important;
    height: 36% !important;
    max-height: 36% !important;
  }

  .page-loader .pl-content {
    top: 54% !important;
  }

  .page-loader .pl-track {
    width: 78% !important;
    margin-bottom: 9px !important;
  }

  .page-loader .pl-note strong {
    font-size: clamp(20px, 4vw, 28px) !important;
    margin-bottom: 5px !important;
  }

  .page-loader .pl-note,
  .page-loader .pl-sub {
    font-size: clamp(10px, 2vw, 13px) !important;
    line-height: 1.35 !important;
  }
}


/* =====================================================================
   QUICK-LINK CARDS — THUMBNAIL VIDEO PREVIEW + UNIVERSAL VIDEO VIEWER
   02 OCT 2026
   ===================================================================== */

.gc-quick-popup__card.gc-quick-popup__card--video {
  display: grid !important;
  grid-template-columns: 156px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 16px !important;
}

.gc-quick-popup__card--video .gc-quick-popup__card-content {
  min-width: 0 !important;
}

.gc-quick-popup__card--video .gc-quick-popup__card-visual.gc-quick-popup__video-thumb {
  position: relative !important;
  display: block !important;
  width: 156px !important;
  min-width: 156px !important;
  height: 140px !important;
  min-height: 140px !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  background: #031b14 !important;
  border: 1px solid #e8b4a8 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  isolation: isolate !important;
}

.gc-quick-popup__video-thumb img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  border: 0 !important;
  border-radius: inherit !important;
  transition: transform 0.35s ease, filter 0.35s ease !important;
}

.gc-quick-popup__video-thumb::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background: linear-gradient(180deg, rgba(3, 27, 20, 0.02), rgba(3, 27, 20, 0.22)) !important;
  pointer-events: none !important;
}

.gc-quick-popup__video-play {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  transform: translate(-50%, -50%) !important;
  color: #073126 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(232, 180, 168, 0.82) !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24) !important;
  pointer-events: none !important;
  transition: transform 0.28s ease, background 0.28s ease !important;
}

.gc-quick-popup__video-play i {
  font-size: 14px !important;
  margin-left: 2px !important;
}

.gc-quick-popup__video-thumb:hover img,
.gc-quick-popup__video-thumb:focus-visible img {
  transform: scale(1.04) !important;
}

.gc-quick-popup__video-thumb:hover .gc-quick-popup__video-play,
.gc-quick-popup__video-thumb:focus-visible .gc-quick-popup__video-play {
  transform: translate(-50%, -50%) scale(1.08) !important;
  background: #f0bcc2 !important;
}

.gc-quick-popup__video-thumb:focus-visible {
  outline: 2px solid #f0bcc2 !important;
  outline-offset: 3px !important;
}

.gc-quick-popup__card--video .gc-quick-popup__card-cta:not(.gc-quick-popup__card-cta--soon) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: fit-content !important;
  margin-top: 8px !important;
  padding: 7px 12px !important;
  color: #f8eee4 !important;
  background: rgba(232, 180, 168, 0.10) !important;
  border: 1px solid #e8b4a8 !important;
  border-radius: 8px !important;
}

/* ---------------- UNIVERSAL VIEWER ---------------- */

body.gc-card-video-open {
  overflow: hidden !important;
}

.gc-card-video-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 12000 !important;
  display: none !important;
  width: 100% !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

.gc-card-video-modal.is-open {
  display: block !important;
}

.gc-card-video-modal__backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(1, 20, 15, 0.93) !important;
  backdrop-filter: blur(5px) !important;
}

.gc-card-video-modal__dialog {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 26px 88px 24px !important;
  box-sizing: border-box !important;
}

.gc-card-video-modal__center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

.gc-card-video-modal__frame {
  position: relative !important;
  width: 960px;
  height: 540px;
  max-width: 100% !important;
  max-height: 78dvh !important;
  overflow: hidden !important;
  background: #000 !important;
  border: 1px solid #e8b4a8 !important;
  border-radius: 0 !important;
  box-shadow: 0 22px 70px rgba(0, 0, 0, 0.42) !important;
  transition: width 0.18s ease, height 0.18s ease !important;
}

.gc-card-video-modal__media,
.gc-card-video-modal__player {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #000 !important;
}

video.gc-card-video-modal__player {
  object-fit: contain !important;
  object-position: center !important;
}

.gc-card-video-modal__meta {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 12px !important;
  color: #f8eee4 !important;
  text-align: center !important;
  line-height: 1.25 !important;
}

.gc-card-video-modal__title {
  font-size: 15px !important;
  font-weight: 500 !important;
}

.gc-card-video-modal__count {
  color: #e8b4a8 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

.gc-card-video-modal__close,
.gc-card-video-modal__nav {
  position: absolute !important;
  z-index: 4 !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #e8b4a8 !important;
  background: rgba(5, 42, 32, 0.88) !important;
  border: 1px solid #e8b4a8 !important;
  border-radius: 0 !important;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease !important;
}

.gc-card-video-modal__close {
  top: 26px !important;
  right: 30px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
}

.gc-card-video-modal__close i {
  font-size: 24px !important;
}

.gc-card-video-modal__nav {
  top: 50% !important;
  width: 54px !important;
  height: 54px !important;
  transform: translateY(-50%) !important;
}

.gc-card-video-modal__nav--prev {
  left: 28px !important;
}

.gc-card-video-modal__nav--next {
  right: 28px !important;
}

.gc-card-video-modal__nav i {
  font-size: 24px !important;
}

.gc-card-video-modal__close:hover,
.gc-card-video-modal__close:focus-visible,
.gc-card-video-modal__nav:hover,
.gc-card-video-modal__nav:focus-visible {
  color: #073126 !important;
  background: #e8b4a8 !important;
}

.gc-card-video-modal__close:hover {
  transform: scale(1.05) !important;
}

.gc-card-video-modal__nav:hover {
  transform: translateY(-50%) scale(1.05) !important;
}

.gc-card-video-modal__close:focus-visible,
.gc-card-video-modal__nav:focus-visible {
  outline: 2px solid #fff0ed !important;
  outline-offset: 3px !important;
}

/* ---------------- TABLET ---------------- */
@media (min-width: 576px) and (max-width: 991px) {
  .gc-quick-popup__card.gc-quick-popup__card--video {
    grid-template-columns: 132px minmax(0, 1fr) !important;
    gap: 13px !important;
  }

  .gc-quick-popup__card--video .gc-quick-popup__card-visual.gc-quick-popup__video-thumb {
    width: 132px !important;
    min-width: 132px !important;
    height: 74px !important;
    min-height: 74px !important;
  }

  .gc-quick-popup__video-play {
    width: 38px !important;
    height: 38px !important;
  }

  .gc-card-video-modal__dialog {
    padding: 68px 70px 24px !important;
  }

  .gc-card-video-modal__close {
    top: 18px !important;
    right: 20px !important;
    width: 48px !important;
    height: 48px !important;
  }

  .gc-card-video-modal__nav {
    width: 48px !important;
    height: 48px !important;
  }

  .gc-card-video-modal__nav--prev {
    left: 14px !important;
  }

  .gc-card-video-modal__nav--next {
    right: 14px !important;
  }
}

/* ---------------- MOBILE ---------------- */
@media (max-width: 575px) {
  .gc-quick-popup__card.gc-quick-popup__card--video {
    grid-template-columns: 108px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .gc-quick-popup__card--video .gc-quick-popup__card-visual.gc-quick-popup__video-thumb {
    width: 108px !important;
    min-width: 108px !important;
    height: 68px !important;
    min-height: 68px !important;
    aspect-ratio: auto !important;
    border-radius: 9px !important;
  }

  .gc-quick-popup__video-play {
    width: 34px !important;
    height: 34px !important;
  }

  .gc-quick-popup__video-play i {
    font-size: 11px !important;
  }

  .gc-quick-popup__card--video .gc-quick-popup__card-title {
    font-size: 14px !important;
  }

  .gc-quick-popup__card--video .gc-quick-popup__card-desc {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  .gc-quick-popup__card--video .gc-quick-popup__card-cta:not(.gc-quick-popup__card-cta--soon) {
    margin-top: 5px !important;
    padding: 5px 8px !important;
    font-size: 11px !important;
  }

  .gc-card-video-modal__dialog {
    padding:
      max(64px, env(safe-area-inset-top))
      0
      max(52px, env(safe-area-inset-bottom)) !important;
  }

  .gc-card-video-modal__center {
    width: 100% !important;
  }

  .gc-card-video-modal__frame {
    max-width: 86vw !important;
    max-height: 72dvh !important;
  }

  .gc-card-video-modal__close {
    top: max(12px, env(safe-area-inset-top)) !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
  }

  .gc-card-video-modal__close i {
    font-size: 20px !important;
  }

  .gc-card-video-modal__nav {
    top: 50% !important;
    width: 42px !important;
    height: 48px !important;
    background: rgba(5, 42, 32, 0.78) !important;
  }

  .gc-card-video-modal__nav--prev {
    left: 6px !important;
  }

  .gc-card-video-modal__nav--next {
    right: 6px !important;
  }

  .gc-card-video-modal__nav i {
    font-size: 19px !important;
  }

  .gc-card-video-modal__meta {
    width: 86vw !important;
    margin-top: 10px !important;
    padding-inline: 4px !important;
  }

  .gc-card-video-modal__title,
  .gc-card-video-modal__count {
    font-size: 12px !important;
  }
}

@media (max-width: 360px) {
  .gc-quick-popup__card.gc-quick-popup__card--video {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .gc-quick-popup__card--video .gc-quick-popup__card-visual.gc-quick-popup__video-thumb {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  .gc-quick-popup__card--video .gc-quick-popup__card-content {
    width: 100% !important;
  }
}

@media (max-width: 767px) and (orientation: landscape) {
  .gc-card-video-modal__dialog {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  .gc-card-video-modal__close {
    top: 8px !important;
  }

  .gc-card-video-modal__frame {
    max-height: 72dvh !important;
  }

  .gc-card-video-modal__meta {
    margin-top: 6px !important;
  }
}

/* =========================================================
   TWO CARD ACTION BUTTONS
========================================================= */

.gc-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 95%;

  gap: 12px;

  /* margin-top: 15px; */
}


/* Keep first button at start */

.gc-card-actions .disc-btn:first-child {
  margin-right: auto;
}


/* Keep PDF button at end */

.gc-card-actions .gc-pdf-btn {
  margin-left: auto;

  text-decoration: none;
}


/* =========================================================
   MOBILE
   ONE BUTTON BELOW ANOTHER
========================================================= */

@media (max-width: 575px) {

  .gc-card-actions {
     display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    gap: 8px;
  }


  .gc-card-actions .disc-btn,
  .gc-card-actions .gc-pdf-btn {
     width: auto;
    margin: 0;
    flex: 0 0 auto;
  }

}

/* =========================================================
   FOOTER TABLET + MOBILE — BRAND + 2 x 2 CLIENT REFERENCE
   Desktop stays unchanged.
   Top: Brand / social icons
   Row 1: GCS | Videos
   Row 2: Explore | Location
========================================================= */

@media (max-width: 991px) {

  .gcsf-footer {
    padding-top: 20px;
  }

  .gcsf-footer__container {
    width: calc(100% - 36px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .gcsf-footer__grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 0 !important;
    width: 100% !important;
    align-items: stretch !important;
  }

  /* Keep the original brand/social block visible above the four sections. */
  .gcsf-footer__brand {
    display: block !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    order: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 0 10px !important;
    text-align: center !important;
  }

  .gcsf-footer__logo {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .gcsf-footer__social {
    justify-content: center !important;
    flex-wrap: wrap !important;
    max-width: 320px;
    margin: 16px auto 0 !important;
  }

  /* Existing decorative column lines are replaced by the clean 2 x 2 dividers. */
  .gcsf-footer__column::before,
  .gcsf-footer__column::after {
    display: none !important;
  }

  .gcsf-footer__column,
  .gcsf-footer__location {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px 30px 10px !important;
    box-sizing: border-box !important;
  }

  /* Explicit placement keeps the screenshot order on every tablet/mobile width. */
  .gcsf-footer__column--gcs {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  .gcsf-footer__column--videos {
    grid-column: 2 !important;
    grid-row: 2 !important;
  }

  .gcsf-footer__column--explore {
    grid-column: 1 !important;
    grid-row: 3 !important;
  }

  .gcsf-footer__location {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }

  /* Horizontal divider under the first row. */
  .gcsf-footer__column--gcs,
  .gcsf-footer__column--videos {
    border-bottom: 1px solid rgba(232, 180, 168, 0.78) !important;
  }

  /* Vertical divider through the left side of both rows. */
  .gcsf-footer__column--gcs,
  .gcsf-footer__column--explore {
    border-right: 1px solid rgba(232, 180, 168, 0.78) !important;
  }

  .gcsf-footer__title {
    margin: 0 0 20px !important;
    padding-bottom: 10px !important;
    font-size: 20px !important;
    line-height: 24px !important;
    letter-spacing: 3px !important;
  }

  .gcsf-footer__title::after {
    width: 48px !important;
    height: 2px !important;
  }

  .gcsf-footer__links li + li {
    margin-top: 17px !important;
  }

  .gcsf-footer__links a {
    gap: 12px !important;
    width: fit-content !important;
    font-size: 16px !important;
    line-height: 22px !important;
  }

  .gcsf-footer__links a i {
    font-size: 13px !important;
  }

  .gcsf-footer__map {
    width: 100% !important;
    height: 100px !important;
    margin: 0 !important;
    border: 1px solid rgba(240, 188, 194, 0.78) !important;
    box-shadow: none !important;
  }

  .gcsf-footer__disclaimer {
    margin-top: 24px !important;
    padding: 24px 0 !important;
    border-bottom: 1px solid rgba(232, 180, 168, 0.72) !important;
  }

  .gcsf-footer__disclaimer p {
    font-size: 13px !important;
    line-height: 21px !important;
  }
}


/* =========================================================
   MOBILE TUNING
========================================================= */

@media (max-width: 575px) {

  .gcsf-footer {
    padding-top: 16px;
  }

  .gcsf-footer__container {
    width: calc(100% - 28px) !important;
  }

  .gcsf-footer__brand {
    padding: 0 0 !important;
  }

  .gcsf-footer__social {
    gap: 12px !important;
  }

  .gcsf-footer__column,
  .gcsf-footer__location {
    padding: 10px 16px 10px !important;
  }

  .gcsf-footer__title {
    margin-bottom: 18px !important;
    font-size: 18px !important;
    line-height: 22px !important;
    letter-spacing: 2.5px !important;
  }

  .gcsf-footer__title::after {
    width: 44px !important;
  }

  .gcsf-footer__links li + li {
    margin-top: 15px !important;
  }

  .gcsf-footer__links a {
    gap: 10px !important;
    font-size: 15px !important;
    line-height: 20px !important;
  }

  .gcsf-footer__links a i {
    font-size: 12px !important;
  }

  .gcsf-footer__map {
    height: 90px !important;
  }

  .gcsf-footer__disclaimer {
    margin-top: 20px !important;
    padding: 20px 8px !important;
  }

  .gcsf-footer__disclaimer p {
    font-size: 12px !important;
    line-height: 19px !important;
  }
}


/* =========================================================
   EXTRA SMALL MOBILE
========================================================= */

@media (max-width: 390px) {

  .gcsf-footer__container {
    width: calc(100% - 20px) !important;
  }

  .gcsf-footer__brand {
    padding-bottom: 18px !important;
  }

  .gcsf-footer__social {
    gap: 8px !important;
  }

  .gcsf-footer__column,
  .gcsf-footer__location {
    padding: 7px 12px 7px !important;
  }

  .gcsf-footer__title {
    font-size: 17px !important;
    line-height: 21px !important;
    letter-spacing: 2px !important;
  }

  .gcsf-footer__links a {
    gap: 8px !important;
    font-size: 14px !important;
    line-height: 19px !important;
  }

  .gcsf-footer__map {
    height: 90px !important;
  }
}

/* =========================================================
   Hindi (Google Translate adds html.gc-translated): Devanagari vowel signs
   (ि ी े ं …) rise above the Latin cap height. The typing hero clips with
   overflow:hidden and the disclaimer title paints its colour with
   background-clip:text, so both cut the top of Hindi headings. Give the
   glyphs room above (and a little below) the line.
   ========================================================= */

html.gc-translated .about-hero__title .typing-text {
  padding-top: 0.32em;
  padding-bottom: 0.08em;
  line-height: 1.3;
}

html.gc-translated .disc-title {
  padding-top: 0.3em;
  line-height: 1.35;
}

html.gc-translated .hero-curved h1,
html.gc-translated .about-hero__title {
  line-height: 1.35;
}

/* Card video viewer: hide prev/next when there is only one video (the script
   sets [hidden]; the button's display rule above would otherwise show it). */
.gc-card-video-modal__nav[hidden] {
  display: none !important;
}

/* Latest Updates: a single card sits alone in the centre. */
.news-grid--2.news-grid--single {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}

/* Latest Updates: "Read more" drawn as the cream pill button used by "Know More". */
.news-box .news-btn {
  align-self: center;
  margin-top: 1.2rem;
  background: #FFFDF7;
  color: #08362A !important;
  border-color: #e8b4a8 !important;
}
.news-box .news-btn .disc-btn-ico {
  border-color: #08362A !important;
}
.news-box:hover .news-btn {
  background: #e8b4a8;
}

/* FAQ: a single tab sits alone in the centre (also on phones, where the tabs are a 2-column grid). */
.spotlight-tabs.spotlight-tabs--single {
  display: flex;
  justify-content: center;
}

/* Quick-link popups: "View More" drawn like the home "Read More" button
   (cream pill, arrow in a circle, gentle pulse); beats the older popup CTA rules. */
.gc-quick-popup .gc-quick-popup__card .gc-quick-popup__card-cta:not(.gc-quick-popup__card-cta--soon) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  width: fit-content !important;
  margin-top: 10px !important;
  padding: 4px 14px 4px 4px !important;
  background: #FFFDF7 !important;
  color: #08362A !important;
  border: 1px solid #e8b4a8 !important;
  border-radius: 24px !important;
  font-family: var(--font-head) !important;
  font-weight: 700 !important;
  font-size: 0.76rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  animation: ctaPop-new 1.7s ease-in-out infinite;
  transition: background 0.3s ease;
}
.gc-quick-popup .gc-quick-popup__cta-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid #08362A;
  border-radius: 50% !important;
  font-size: 0.8rem;
}
.gc-quick-popup .gc-quick-popup__card:hover .gc-quick-popup__card-cta:not(.gc-quick-popup__card-cta--soon) {
  background: #e8b4a8 !important;
}
@media (max-width: 767px) {
  .gc-quick-popup .gc-quick-popup__card .gc-quick-popup__card-cta:not(.gc-quick-popup__card-cta--soon) {
    margin-top: 6px !important;
    padding: 3px 10px 3px 3px !important;
    font-size: 0.68rem !important;
  }
  .gc-quick-popup .gc-quick-popup__cta-ico {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .gc-quick-popup .gc-quick-popup__card .gc-quick-popup__card-cta { animation: none; }
}

/* Card video viewer on phones (portrait): the ‹ › arrows sat over the video's
   sides and covered YouTube's own controls (full-screen button). Move them
   into a row below the title / count instead. */
@media (max-width: 767px) and (orientation: portrait) {
  .gc-card-video-modal .gc-card-video-modal__dialog {
    flex-wrap: wrap !important;
    align-content: center !important;
    column-gap: 18px !important;
  }
  .gc-card-video-modal .gc-card-video-modal__center {
    flex: 0 0 100% !important;
  }
  .gc-card-video-modal .gc-card-video-modal__nav {
    position: static !important;
    order: 1 !important;
    transform: none !important;
    margin-top: 14px !important;
    width: 48px !important;
    height: 44px !important;
  }
}

/* =========================================================
   QUICK-LINK POPUPS — SIMPLE PHONE LAYOUT
   The stretched leather backgrounds (popup, cards, media buttons) look
   squashed on phones. Below 768px: plain theme colours, a clear heading
   and one card per row. Light theme = soft green; dark theme = dark green.
   ========================================================= */
@media (max-width: 767px) {
  .gc-quick-popup {
    --qp-bg: #dcebe2;
    --qp-card: #ffffff;
    --qp-line: rgba(8, 54, 42, 0.16);
    --qp-head: #08362a;
    --qp-text: #3f4d46;
    --qp-accent: #b2685a;
    padding: 10px !important;
  }
  html[data-theme="dark"] .gc-quick-popup {
    --qp-bg: #0f3427;
    --qp-card: #143d2e;
    --qp-line: rgba(232, 180, 168, 0.22);
    --qp-head: #f3ecda;
    --qp-text: #b7c6be;
    --qp-accent: #e8b4a8;
  }

  .gc-quick-popup .gc-quick-popup__dialog {
    width: calc(100vw - 20px) !important;
    height: auto !important;
    max-height: calc(100dvh - 20px) !important;
    min-height: 0 !important;
    padding: 18px 12px 12px !important;
    background: var(--qp-bg) !important;
    background-image: none !important;
    border: 1px solid var(--qp-line) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45) !important;
  }

  .gc-quick-popup .gc-quick-popup__head {
    padding: 0 52px 12px 6px !important;
    border-bottom: 1px solid var(--qp-line);
    margin-bottom: 12px;
  }
  .gc-quick-popup .gc-quick-popup__eyebrow {
    font-size: 11px !important;
    letter-spacing: 2.5px !important;
    color: var(--qp-accent) !important;
    margin-bottom: 4px !important;
  }
  .gc-quick-popup .gc-quick-popup__title {
    /* One line on phones ("What would you like to know?") */
    font-size: clamp(16px, 5vw, 20px) !important;
    line-height: 1.25 !important;
    white-space: nowrap;
    color: var(--qp-head) !important;
  }

  .gc-quick-popup .gc-quick-popup__close {
    top: 12px !important;
    right: 12px !important;
    width: 40px !important;
    height: 40px !important;
    background: var(--qp-card) !important;
    /* Same colour as the small "GREEN CITY SEZ" heading */
    color: var(--qp-accent) !important;
    border: 1px solid var(--qp-accent) !important;
  }

  .gc-quick-popup .gc-quick-popup__links {
    display: grid !important;
    grid-template-columns: 1fr !important;
    /* Rows keep their full height and the list scrolls (rows otherwise squeeze to fit). */
    grid-auto-rows: max-content !important;
    gap: 10px !important;
    padding: 0 4px 4px 0 !important;
    border-radius: 0 !important;
  }

  /* One card per row: small video thumbnail left, text and button right. */
  .gc-quick-popup .gc-quick-popup__card,
  .gc-quick-popup .gc-quick-popup__card.gc-quick-popup__card--video {
    display: grid !important;
    grid-template-columns: 120px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 0 !important;
    padding: 10px !important;
    background: var(--qp-card) !important;
    background-image: none !important;
    border: 1px solid var(--qp-line) !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    color: var(--qp-head) !important;
  }
  .gc-quick-popup .gc-quick-popup__card:not(.gc-quick-popup__card--video) {
    grid-template-columns: 1fr !important;
  }
  .gc-quick-popup .gc-quick-popup__card:hover {
    transform: none !important;
    filter: none !important;
  }
  .gc-quick-popup .gc-quick-popup__card--video .gc-quick-popup__card-visual.gc-quick-popup__video-thumb {
    width: 120px !important;
    min-width: 120px !important;
    height: 100px !important;
    min-height: 100px !important;
    border-radius: 8px !important;
    border: 1px solid var(--qp-line) !important;
  }
  .gc-quick-popup .gc-quick-popup__video-play {
    width: 30px !important;
    height: 30px !important;
  }
  .gc-quick-popup .gc-quick-popup__video-play i {
    font-size: 11px !important;
  }
  .gc-quick-popup .gc-quick-popup__card-title {
    font-size: 17px !important;
    line-height: 1.25 !important;
    /* Same colour as the small heading and the close button */
    color: var(--qp-accent) !important;
    margin: 0 0 3px !important;
  }
  .gc-quick-popup .gc-quick-popup__card-desc {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    color: var(--qp-text) !important;
  }
  .gc-quick-popup .gc-quick-popup__card .gc-quick-popup__card-cta:not(.gc-quick-popup__card-cta--soon) {
    margin-top: 7px !important;
    font-size: 0.66rem !important;
    padding: 3px 10px 3px 3px !important;
    animation: none !important;
  }
  .gc-quick-popup .gc-quick-popup__card-cta--soon {
    margin-top: 6px !important;
    color: var(--qp-text) !important;
    border-color: var(--qp-line) !important;
    background: transparent !important;
    font-size: 0.66rem !important;
  }

  /* Videos · Reels · Jingles · Collab: four small plain tiles in a row. */
  .gc-quick-popup .gc-quick-popup__media-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .gc-quick-popup .gc-quick-popup__media-btn {
    min-height: 0 !important;
    padding: 10px 4px !important;
    gap: 6px !important;
    background: var(--qp-card) !important;
    background-image: none !important;
    border: 1px solid var(--qp-line) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    color: var(--qp-head) !important;
    font-size: 10px !important;
  }
  .gc-quick-popup .gc-quick-popup__media-icon {
    width: 34px !important;
    height: 34px !important;
    background: var(--qp-bg) !important;
    color: var(--qp-accent) !important;
    border-color: var(--qp-line) !important;
  }

  /* Plain scrollbar to match. */
  .gc-quick-popup .gc-quick-popup__links::-webkit-scrollbar-track {
    background: transparent !important;
    border: 0 !important;
  }
  .gc-quick-popup .gc-quick-popup__links::-webkit-scrollbar-thumb {
    background: var(--qp-line) !important;
    border: 0 !important;
    box-shadow: none !important;
  }
  .gc-quick-popup .gc-quick-popup__links {
    scrollbar-color: var(--qp-line) transparent !important;
  }
}

/* Home advantage cards: buttons that ride up with the incoming card
   (public/js/home-button-ride.js) stay above the card text they pass. */
.gcs-all-stack .gc-ride {
  position: relative;
  z-index: 2;
  /* Same colour as the card panel (white, or dark green in dark mode), so the
     text the buttons pass over does not show through. */
  background-color: inherit;
}
/* The actions row (Know More + View): a strip behind its buttons. */
.gcs-all-stack .gc-card-actions.gc-ride.is-riding::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10px;
  bottom: -10px;
  left: var(--ride-left, 0);
  width: var(--ride-width, 100%);
  background-color: inherit;
  pointer-events: none;
}
/* A lone Know More button gets its strip as box-shadows (set by the script);
   pause its pulse meanwhile, as the pulse animates box-shadow too. */
.gcs-all-stack .disc-btn.gc-ride.is-riding {
  animation: none !important;
}

/* FAQ: sets of 6 questions; "View More" reveals the next set. */
.faq-page + .faq-page {
  margin-top: 0.75rem;
}
.faq-page[hidden] {
  display: none !important;
}
.faq-more {
  display: flex;
  justify-content: center;
  margin-top: 1.25rem;
}
.faq-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.4rem;
  border: 1px solid #e8b4a8;
  border-radius: 999px !important;
  background: #fffdf7;
  color: #08362a;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.faq-more-btn:hover {
  background: #e8b4a8;
  transform: translateY(-1px);
}
html[data-theme="dark"] .faq-more-btn {
  background: var(--dk-surface, #122d23);
  color: var(--dk-head, #f3ecda);
  border-color: rgba(232, 180, 168, 0.6);
}
html[data-theme="dark"] .faq-more-btn:hover {
  background: #e8b4a8;
  color: #08362a;
}

/* Media popups (Videos / Reels / Jingles / Collab), all screen sizes: a clear
   rose border around every video so the thumbnails don't run into each other. */
.gcsez-media-modal .media-grid .vembed {
  border: 2px solid #e8b4a8 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
}
.gcsez-media-modal .media-grid {
  gap: 14px !important;
}

/* Quick-link popups, desktop / tablet: card headings in the same rose as the
   small "GREEN CITY SEZ" label (phones have their own colours above). */
@media (min-width: 768px) {
  .gc-quick-popup .gc-quick-popup__card-title {
    color: #e8b4a8 !important;
  }
}

/* Floating buttons: WhatsApp, call and the AI chat bubble (AI Chat Vault)
   as one column in the bottom-right corner, all the same size and style.
   The chat bubble sits at the bottom; WhatsApp / call stack above it.
   All three are hidden while any popup is open (see below). */
:root {
  --gc-fab-size: 45px;
  /* The chat widget fixes its bubble 20px from the right edge, so all three use 20px. */
  --gc-fab-edge: 20px;
}
@media (max-width: 560px) {
  :root {
    --gc-fab-size: 50px;
  }
}
.float-actions {
  right: var(--gc-fab-edge) !important;
  bottom: calc(var(--gc-fab-edge) + var(--gc-fab-size) + 0.7rem) !important;
}
/* "html body" outranks the widget's own #ai-chat-vault-bubble !important rules. */
html body #ai-chat-vault-bubble {
  right: var(--gc-fab-edge) !important;
  bottom: var(--gc-fab-edge) !important;
  width: var(--gc-fab-size) !important;
  height: var(--gc-fab-size) !important;
  min-width: var(--gc-fab-size) !important;
  min-height: var(--gc-fab-size) !important;
  max-width: var(--gc-fab-size) !important;
  max-height: var(--gc-fab-size) !important;
  border: 1px solid #e8b4a8 !important;
  box-shadow: 0 6px 18px rgba(8, 54, 42, 0.35) !important;
}
/* The chat icon fills the whole circle (inside the rose border), no green ring. */
html body #ai-chat-vault-bubble {
  padding: 0 !important;
  overflow: hidden !important;
}
html body #ai-chat-vault-bubble img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  border-radius: 50% !important;
}

/* Header: "Contact Us" hidden from the menu for now (the page still works). */
.site-header .nav a[href="/contact-us"] {
  display: none !important;
}

/* While any popup / lightbox is open, hide all three floating buttons (and the
   chat widget's greeting box); they come back when it closes. */
html body.gc-popup-stack-open .float-actions,
html body.gc-card-video-open .float-actions,
html body.bgc-video-lightbox-open .float-actions,
html body.vlb-lock .float-actions,
html body.search-open .float-actions,
html body:has(.gc-quick-popup.is-open, .gcsez-modal.is-open, .gc-tutorial-popup.is-open, .disc-modal.is-open, .gc-card-video-modal.is-open, #bgcVideoLightbox.is-open, .vlb.is-open, .map-lb.is-open) .float-actions,
html body.gc-popup-stack-open #ai-chat-vault-bubble,
html body.gc-card-video-open #ai-chat-vault-bubble,
html body.bgc-video-lightbox-open #ai-chat-vault-bubble,
html body.vlb-lock #ai-chat-vault-bubble,
html body.search-open #ai-chat-vault-bubble,
html body:has(.gc-quick-popup.is-open, .gcsez-modal.is-open, .gc-tutorial-popup.is-open, .disc-modal.is-open, .gc-card-video-modal.is-open, #bgcVideoLightbox.is-open, .vlb.is-open, .map-lb.is-open) #ai-chat-vault-bubble,
html body.gc-popup-stack-open #aicv-popup,
html body.gc-card-video-open #aicv-popup,
html body.bgc-video-lightbox-open #aicv-popup,
html body.vlb-lock #aicv-popup,
html body.search-open #aicv-popup,
html body:has(.gc-quick-popup.is-open, .gcsez-modal.is-open, .gc-tutorial-popup.is-open, .disc-modal.is-open, .gc-card-video-modal.is-open, #bgcVideoLightbox.is-open, .vlb.is-open, .map-lb.is-open) #aicv-popup {
  display: none !important;
}

/* AI chat widget: never show its "Ask us anything!…" greeting box; the chat
   opens from the bubble as usual. */
html body #aicv-popup {
  display: none !important;
}

/* First-load intro (loader video): hide WhatsApp, call and the chat bubble
   until it has gone. The disclaimer that follows is covered by the popup rule above. */
html.gc-loader-active .float-actions,
html.gc-loader-active body #ai-chat-vault-bubble,
html body:has(.page-loader) .float-actions,
html body:has(.page-loader) #ai-chat-vault-bubble {
  display: none !important;
}

/* Home hero: Website Tutorial at the card's left edge, How to Buy at its
   right edge (phones keep them centred, see the 767px rule). */
@media (min-width: 768px) {
  .disc-btn-row {
    justify-content: space-between;
  }

  .disc-btn-row .disc-btn {
    margin-left: 0;
  }
}