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

/* ---------- Tokens ---------- */
:root {
  /* Brand palette */
  --emerald-deep: #08362A;
  --emerald: #125C46;
  --emerald-700: #0d4937;
  --gold: #C9A14A;
  --gold-light: #E7CB7E;
  --cream: #F6EFDD;
  --cream-50: #FBF7EC;
  --sage: #9FBBAE;
  --charcoal: #20231F;

  /* Functional roles */
  --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);

  /* Type — Georgia serif headings + Inter body/UI */
  --font-display: Georgia, "Times New Roman", serif;
  --font-head: Inter, Arial, sans-serif;
  --font-body: Inter, Arial, sans-serif;

  /* Fluid scale */
  --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);

  /* Spacing rhythm */
  --space-section: clamp(3.4rem, 2.4rem + 5vw, 6.9rem);
  --space-section-sm: clamp(2.4rem, 1.8rem + 3vw, 4.4rem);
  --gutter: clamp(1.15rem, 0.8rem + 2vw, 2.5rem);
  --container: 1240px;
  --container-narrow: 920px;

  /* Radii & shadows */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --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);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);

  /* Z-scale */
  --z-base: 1;
  --z-sticky: 100;
  --z-mobilebar: 200;
  --z-float: 250;
  --z-nav: 300;
  --z-overlay: 400;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
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;
}
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 { max-width: 64ch; margin-bottom: clamp(1.4rem, 1rem + 2vw, 2.9rem); }
.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 {
  position: sticky;
  top: var(--topbar-h, 39px);
  z-index: var(--z-sticky);
  background: var(--emerald-deep);
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transition: box-shadow .4s var(--ease-out), background .3s ease;
}
.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); }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 76px;
}
.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: var(--cream); }
.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 { display: flex; align-items: center; gap: 0.3rem; }
.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; }
.header-phone {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--cream); 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);
}
.header-phone:hover { background: rgba(201,161,74,0.12); border-color: var(--gold); transform: translateY(-2px); }
.header-phone .ico {
  color: var(--gold-light); display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: none;
}
.header-phone .label {
  display: block; font-size: 0.58rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--sage); font-weight: 700;
}

.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(3.5rem, 2.5rem + 6vw, 7rem);
}
.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); }
.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-strip {
  background: var(--emerald);
  border-block: 1px solid var(--emerald-700);
}
.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 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; counter-reset: step; }
.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-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--line-on-dark); box-shadow: var(--shadow-md); }
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(8,54,42,0.82));
}

/* ---------- Accordion (FAQ) ---------- */
.accordion { display: grid; gap: 0.7rem; }
.faq-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;
}
.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: 1.15rem 1.4rem;
  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 summary .q-ico {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  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;
}
.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 {
  position: relative; overflow: hidden;
  background: var(--emerald-deep);
  border-block: 1px solid var(--emerald-700);
  text-align: center;
}
.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); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--emerald-deep);
  color: var(--on-emerald-soft);
  padding-top: clamp(3rem, 2.4rem + 2vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 2rem + 1.5vw, 3.5rem);
  border-top: 2px solid var(--gold);
}
.footer-grid {
  /* 5 columns: brand, Video, Blog, Explore, Connect(+map).
     The old 4-column rule pushed Connect onto its own row, leaving a large
     empty gap beside the brand. */
  display: grid; grid-template-columns: 1.35fr .85fr .85fr .9fr 1.25fr;
  gap: 2rem 1.8rem;
  padding-bottom: 1.2rem;
  align-items: start;
}
.footer-brand .brand { margin-bottom: 1.1rem; }
.footer-brand p { font-size: 0.92rem; max-width: 34ch; }
.footer-phone {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin-top: 1.2rem; font-family: var(--font-head); font-weight: 700;
  font-size: 1.25rem; color: var(--gold-light);
}
.footer-col h4 {
  color: var(--cream); font-size: 0.82rem; letter-spacing: 0.16em;
  text-transform: uppercase; margin-bottom: 1.1rem; font-family: var(--font-body); font-weight: 700;
}
.footer-col ul { display: grid; gap: 0.65rem; }
.footer-col a { font-size: 0.92rem; transition: color .25s ease, padding .25s ease; }
.footer-col a:hover { color: var(--gold-light); padding-left: 4px; }
.footer-social { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: nowrap; margin: 0 1.3rem 0.8rem; }
.footer-social a {
  width: 42px; height: 42px; border-radius: 50% !important;
  border: 1px solid var(--line-on-dark);
  display: grid; place-items: center; color: var(--cream);
  transition: background .3s ease, color .3s ease, transform .3s var(--ease-out), border-color .3s ease;
}
.footer-social a:hover { background: var(--gold); color: var(--emerald-deep); transform: translateY(-3px); border-color: var(--gold); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between;
  padding-block: 1.6rem; font-size: 0.82rem; color: var(--sage);
}
.footer-bottom a:hover { color: var(--gold-light); }

/* ---------- 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: 56px; height: 56px; 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(--gold); color: var(--emerald-deep); }
.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;
}
@keyframes ring {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- Mobile sticky CTA bar ---------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-mobilebar);
  display: none;
  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);
}
.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); }
.mobile-bar a.is-wa .ico { color: #25D366; }

/* ---------- Page hero (subpages) ---------- */
.page-hero {
  position: relative; overflow: hidden;
  background: var(--emerald-deep); color: var(--on-emerald);
  padding-block: clamp(3rem, 2.4rem + 4vw, 5.5rem);
  isolation: isolate;
}
.page-hero .hero-media img { opacity: 0.22; }
.page-hero .hero-overlay {
  background: radial-gradient(100% 120% at 80% 0%, rgba(201,161,74,0.16), transparent 55%),
    linear-gradient(160deg, var(--emerald-deep), rgba(8,54,42,0.82));
}
.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;                      /* text is ALWAYS readable - never fades out */
  transform: translateY(14px);     /* only a small slide-up remains */
  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; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .header-phone { display: none; }
  .nav-toggle { display: grid; place-items: center; }
  .nav {
    display: flex;
    position: fixed; inset: 76px 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: 1rem 0.5rem; 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; }
  body { padding-bottom: 0; }
  .footer-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 2rem 1.5rem; }
  .footer-brand { grid-column: auto; } /* 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; }
}

/* spacing so fixed mobile bar doesn't cover footer content */
@media (max-width: 860px) {
  .site-footer { padding-bottom: 84px; }
}

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

/* Header: centered nav + gold-filled call pill (applies site-wide) */
.header-inner { display: grid; grid-template-columns: auto 1fr auto; }
.nav { justify-content: center; }
.header-phone {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  border-color: transparent; color: var(--emerald-deep);
}
.header-phone:hover { background: linear-gradient(135deg, #efd590, var(--gold)); border-color: transparent; }
.header-phone .label { color: rgba(8,54,42,0.62); }
.header-phone .ico { color: var(--emerald-deep); }

/* White call pill + white Instagram icon button */
.header-phone { background: #ffffff; border-color: #ffffff; color: var(--emerald-deep); }
.header-phone:hover { background: #f2f2ec; border-color: #ffffff; }
.header-phone .ico { 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 {
  background: linear-gradient(162deg, #0e4937 0%, #08362a 100%);
  border-color: var(--line-gold); color: var(--on-emerald);
}
.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(8,54,42,0.82); 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 {
  text-align: center; padding: 1.5rem 1rem;
  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;
}
.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 { 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; }
.site-footer .logo-sez { color: var(--gold-light); }

/* Call pill: number only (reference look) */
.header-phone .label { 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); }
.hero2-copy { max-width: clamp(300px, 44vw, 580px); }
.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); }
.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 .ico { color: var(--gold-light); width: 48px; height: 48px; margin: 0 auto .7rem; display: grid; place-items: center; }
.trust-emb .ico i { font-size: 1.7rem; line-height: 1; }
.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.)
   ===================================================================== */
:root {
  --grad-emerald-hero: linear-gradient(122deg, #135640 0%, #0b4030 46%, #061d16 100%);
}
.site-header { background: var(--emerald-deep); }
.hero-curved, .page-hero { background: var(--emerald-deep); }
.section-dark, .hero-curved + .section-dark { background: var(--emerald-deep); }
.site-footer { background: var(--emerald-deep); }
.cta-band { background: var(--emerald-deep); }
.trust-strip { background: var(--emerald); border-block-color: rgba(201,161,74,0.22); }

/* =====================================================================
   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.
   ===================================================================== */
:root { --r-sm: 5px; --r-md: 5px; --r-lg: 5px; }
*, *::before, *::after { 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 {
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}
.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,
.footer-social a,
.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 { width: 44px; height: 44px; }
.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); }
.alt-rows .info-card { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.alt-rows .info-card .pic { aspect-ratio: auto; height: 100%; min-height: 320px; }
.alt-rows .info-card .body { padding: clamp(1.6rem, 1.2rem + 2vw, 3rem); align-self: center; }
/* content-left: content left, image right | img-left: natural DOM order */
.alt-rows.content-left .info-card .pic { order: 2; }
.alt-rows.content-left .info-card .body { order: 1; }
@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 { background: transparent; border: 0; box-shadow: none; overflow: visible; column-gap: clamp(1.5rem, 1rem + 3vw, 4rem); }
.alt-rows .info-card:hover { transform: none; box-shadow: none; }
.alt-rows .info-card .body { padding: 0; }
.alt-rows .info-card .pic { 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 { column-gap: 0; }
.alt-rows .info-card .body { padding-block: clamp(1.5rem, 1rem + 2vw, 3rem); }
.alt-rows.content-left .info-card .body {
  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 { 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 { 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; }
  .site-footer { padding-bottom: 20px; }
  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 { 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-mobile.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 { height: 56px; width: auto; display: block; }
.site-footer .brand-img { height: 84px; width: 84px; border-radius: 50% !important; }
@media (max-width: 860px) { .brand-img { height: 48px; } .site-footer .brand-img { height: 72px; width: 72px; } }
/* Moving-light ring around the header logo */
.site-header .brand { position: relative; }
.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%, #e7cb7e 28%, #fff4d6 32%, #e7cb7e 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;
}
@media (prefers-reduced-motion: reduce) { .site-header .brand::before { animation: none; } }
/* Moving-light ring around the footer logo (circular) */
.site-footer .brand { position: relative; display: inline-flex; }
.site-footer .brand::before {
  content: none; position: absolute; inset: -5px; border-radius: 50% !important; padding: 2px;
  background: conic-gradient(from var(--trust-angle),
              rgba(201,161,74,0.2) 0%,
              #c9a14a 12%, #e7cb7e 28%, #fff4d6 32%, #e7cb7e 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;
}
@media (prefers-reduced-motion: reduce) { .site-footer .brand::before { animation: none; } }

/* =====================================================================
   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-section { background: var(--bg); }
.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 { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px !important; }
.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 { 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 { 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 h3 { font-size: var(--step-2); line-height: 1.2; }
.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(2.5rem, 4vw, 3.5rem); }
#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: 60px; height: 60px; 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; }
.vembed-soon { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .7rem; background: linear-gradient(180deg,#0b3327,var(--emerald-deep)); color: var(--gold-light); text-align: center; padding: 1rem; }
.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 { 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; }
@media (prefers-reduced-motion: reduce) { .coming-badge .dot { animation: none; } }

/* ===== 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)
   ===================================================================== */
:root { --topbar-h: 39px; }
@media (max-width: 560px) { :root { --topbar-h: 31px; } }
.topbar { background: #062a20; border-bottom: 1px solid var(--line-on-dark); font-size: .8rem; position: sticky; top: 0; z-index: calc(var(--z-sticky) + 1); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 1rem; }
.topbar-note { color: var(--sage); display: inline-flex; align-items: center; gap: .5rem; letter-spacing: .02em; }
.topbar-note i { color: var(--gold-light); }
.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; }
.lang-btn:hover { color: var(--gold-light); }
.lang-btn.is-active { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.lang-sep { color: var(--line-on-dark); }
@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 { 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; }
.scroll-stack-inner { max-width: 880px; margin: 0 auto; padding: 4vh 1.25rem 10vh; }
.scroll-stack-card {
  position: relative;
  transform-origin: top center;
  will-change: transform;
  backface-visibility: hidden;
  min-height: 13rem;
  width: 100%;
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.3rem) clamp(1.9rem, 1.2rem + 2.2vw, 3.2rem);
  box-sizing: border-box;
  background: linear-gradient(150deg, #10543f 0%, #0b3d2f 55%, #08362a 100%);
  border: 1px solid var(--line-on-dark);
  border-radius: 24px !important;
  box-shadow: 0 34px 70px -34px rgba(0,0,0,0.7);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  text-align: center;
  color: var(--cream);
  overflow: hidden;
  margin-bottom: 1.5rem; /* fallback gap when stacking is off (reduced-motion / no JS) */
}
/* 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;
  /* Each card pins a little lower than the previous one, so at the end of the
     slider they fan into a deck and every card's title stays visible. */
  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-ico { color: var(--gold-light); font-size: clamp(3.4rem, 2.6rem + 3vw, 5.2rem); line-height: 1; margin-bottom: 1.4rem; }
.scroll-stack-card h3 { color: #fff; font-family: var(--font-display); font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.3rem); margin: 0 0 .8rem; line-height: 1.15; }
.scroll-stack-card p { color: var(--sage); font-size: clamp(1rem, .95rem + .25vw, 1.15rem); line-height: 1.6; max-width: 46ch; margin: 0 auto; }
.scroll-stack-card .ss-dots { display: none; }
.scroll-stack-card .ss-dots .on { color: var(--gold-light); }
/* Order: title on top, then icon, then paragraph */
.scroll-stack-card h3 { order: 1; margin: 0 0 1.7rem; }
.scroll-stack-card .ss-ico { order: 2; margin-bottom: 1.2rem; }
.scroll-stack-card p { order: 3; margin: 0 auto; }
.scroll-stack-card .ss-dots { 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 {
  display: flex; flex-direction: column; gap: .7rem; position: relative;
  padding: clamp(1.7rem, 1.1rem + 2vw, 2.5rem);
  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;
}
.news-box::before { display: none; }
/* Left + bottom accent border that slides in from left to right on hover */
.news-box::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  border-left: 2px solid #6ee7b7; border-bottom: 2px solid #6ee7b7;
  filter: drop-shadow(0 0 6px rgba(110,231,183,0.55));
  clip-path: inset(0 100% 0 0);
  transition: clip-path .55s var(--ease-out);
}
.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 .news-ico { color: var(--gold-light); font-size: 2rem; line-height: 1; }
.news-box h3 { font-family: var(--font-display); color: var(--cream); font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); margin: .2rem 0 0; line-height: 1.15; }
.news-box p { color: var(--sage); font-size: 1rem; line-height: 1.6; margin: 0; flex: 1; }
.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-top: .3rem; }
.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-section { padding-top: clamp(1.8rem, 1.2rem + 2vw, 3.5rem); padding-bottom: 0; }
.scroll-stack-inner { 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 { 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); }
}
.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); }
@media (prefers-reduced-motion: reduce) { .btn-contest { animation: none; } }

/* =====================================================================
   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(8,54,42,0.82) 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 {
  /* Centre with auto margins (not transform) so the ctaPop scale animation
     can't knock it off-centre.
     Offsets are percentages of the banner, not pixels: the artwork is a fixed
     1774x887 composition rendered at width:100%, so the button has to scale
     with it. 15.84% == the 281px and 12.63% == the 112px it was tuned at. */
  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: linear-gradient(135deg, var(--gold-light), var(--gold));
  border-color: transparent; color: var(--emerald-deep);
}
.header-cta .search-btn:hover,
.header-cta .head-social:hover,
.header-cta .header-phone:hover {
  background: linear-gradient(135deg, #efd590, var(--gold));
  border-color: transparent; color: var(--emerald-deep);
}
.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(2.4rem, 1.8rem + 2.4vw, 3.8rem); }
@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 { background: linear-gradient(120deg, #062a20 0%, #0b3d2f 55%, #062a20 100%); position: relative; overflow: hidden; }
.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 */
.prize-grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr 1fr; gap: 1rem; align-items: start; margin-top: 2.2rem; }
.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; }
/* Mint moving-light ring — always visible + animating (no hover needed) */
.prize-card { border-color: transparent !important; }
.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); }
@media (prefers-reduced-motion: reduce) { .prize-card::before { animation: none; } }
.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.2rem + 2vw, 2.7rem); }
.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 { color: var(--cream); }
.prize-card.is-first .prize-list li i { color: var(--gold-light); }
.prize-tnc { display: block; margin-top: auto; padding-top: .9rem; text-align: right; font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: inherit; opacity: .55; text-decoration: none; transition: opacity .2s ease; }
.prize-tnc:hover { opacity: 1; text-decoration: underline; }
.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; }
/* 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 { position: relative; border: 1.5px solid rgba(201,161,74,0.6); background: rgba(255,255,255,.03); padding: 1.3rem .7rem; text-align: center; border-radius: 12px !important; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.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; }
.ct-final h2 { color: var(--cream); font-family: var(--font-display); font-size: clamp(1.8rem, 1.2rem + 2.4vw, 2.8rem); margin: .6rem 0 0; }
.ct-final p { color: var(--cream); opacity: .9; max-width: 52ch; margin: 1rem auto 1.6rem; line-height: 1.6; }

@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 { grid-template-columns: 1fr 1fr; }
  .tips { grid-template-columns: 1fr 1fr; }
}

/* Contest hero — designed background image (desktop + mobile) */
.ct-hero {
  background: url('../assets/contest-bg.webp?v=10');
  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 */
.terms-hero { background: linear-gradient(120deg, #062a20 0%, #0b3d2f 55%, #062a20 100%) !important; min-height: auto !important; padding-block: clamp(2.6rem, 4vw, 4.5rem) !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?v=10');
    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 { align-items: stretch; }
.prize-card { 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(2.2rem, 1.6rem + 2.4vw, 3.6rem); }
.section-dark:has(.tips) { padding-block: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem); background: linear-gradient(160deg, #5b3d28, #271c15); }
.steps-light .step { background: linear-gradient(160deg, #0d4937, #08362a); border-color: var(--gold); }
/* 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 on light background */
.ct-final { background: var(--cream-50); }
.ct-final h2 { color: var(--emerald-deep); }
.ct-final p { color: var(--ink-soft); }
.ct-final .ct-trophy { color: var(--gold); }

/* Footer disclaimer line */
.footer-disclaimer { margin: 0; padding-top: 1.4rem; border-top: 1px solid var(--line-on-dark); color: var(--sage); font-size: .82rem; line-height: 1.55; text-align: center; }
.footer-disclaimer strong { color: var(--gold-light); font-weight: 700; }
/* Mobile: left-align disclaimer + keep it clear of the floating buttons on the right */
@media (max-width: 860px) { .footer-disclaimer { text-align: left; padding-right: 80px; } }

/* 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 { padding: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); min-height: 340px; gap: 1rem; }
.news-grid--2 .news-box .news-ico { font-size: 2.5rem; }
.news-grid--2 .news-box h3 { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2rem); }
.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 { 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 { 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-sub {
  position: absolute; top: 100%; left: 0; min-width: 230px;
  background: var(--emerald-deep); border: 1px solid var(--line-on-dark);
  display: flex; flex-direction: column; padding: .4rem 0;
  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;
}
.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);
}
.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 { height: 1px; width: clamp(60px, 14vw, 180px); background: linear-gradient(90deg, transparent, var(--gold)); }
.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: linear-gradient(180deg, #f4e4a6 0%, var(--gold-light) 45%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold-light);
  text-shadow: 0 2px 20px rgba(201,161,74,0.25);
}

/* 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 { display: inline-flex; align-items: center; gap: .8rem; margin-top: 1.9rem; padding: .75em 1.6em; border: 1px solid var(--gold); color: var(--gold-light); 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; }
.disc-btn:hover { background: rgba(201,161,74,.12); color: #fff; }
.disc-btn-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50% !important; border: 1px solid var(--gold); flex: none; }
.disc-flourish .disc-line { 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, 6.2vw, 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 { cursor: pointer; background: transparent; border-radius: 24px !important; animation: ctaPop 1.7s ease-in-out infinite; will-change: transform; }
.disc-btn:hover { 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); }
.disc-modal-dialog {
  position: relative; z-index: 1; width: min(760px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem); margin: 1.5rem auto 0;
  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; overflow: hidden;
  animation: discPop .28s ease;
}
@keyframes discPop { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.disc-modal-x {
  position: absolute; top: .7rem; right: .7rem; z-index: 3; 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;
}
.disc-modal-x:hover { background: rgba(201,161,74,0.18); color: #fff; }
.disc-modal-scroll { overflow-y: auto; max-height: calc(100vh - 3rem); padding: clamp(1.6rem, 1rem + 2vw, 2.8rem); }
.disc-modal-scroll::-webkit-scrollbar { width: 8px; }
.disc-modal-scroll::-webkit-scrollbar-thumb { background: rgba(201,161,74,0.35); border-radius: 8px !important; }

.disc-modal-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.6rem; }
.disc-modal-title {
  font-family: var(--font-display); font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem); line-height: 1.05; margin: 0;
  background: linear-gradient(180deg, #f4e4a6 0%, var(--gold-light) 45%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold-light);
}

.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; }

.dm-list { list-style: none; margin: 0; padding: 0; position: relative; }
/* 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 {
  display: grid; grid-template-columns: 46px 1fr; gap: 1.1rem; align-items: start;
  padding: 1.05rem 0; border-bottom: 1px solid rgba(201,161,74,0.12);
}
.dm-row:last-child { border-bottom: 0; }
.dm-row .dm-ico { position: relative; z-index: 1; background: var(--emerald-deep); }
.dm-txt { margin: 0; color: var(--cream); opacity: .82; font-size: clamp(.92rem, .88rem + .2vw, 1.02rem); line-height: 1.55; }
.dm-txt strong { display: block; color: #fff; opacity: 1; font-weight: 700; margin-bottom: .12rem; }
.dm-tnc { display: inline-block; margin-top: 1.4rem; color: var(--gold-light); font-weight: 600; font-size: .92rem; text-decoration: underline; text-underline-offset: 2px; }
.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-align: center;
  /* Even out the line lengths instead of leaving a short orphan line. */
  text-wrap: balance;
  max-width: 34ch;
  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-line { display: 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 { width: 1.5px; height: 26px; background: linear-gradient(180deg, var(--gold), transparent); }

/* ===== Trust items as cards ===== */
.trust-cards-sec { padding-block: clamp(2.4rem, 1.5rem + 3vw, 4rem); }
.trust-cards-sec .trust-row { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.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;
}
.trust-cards-sec .trust-emb:hover {
  transform: translateY(-5px);
  border-color: transparent; /* let the moving-light ::before be the border */
  border-radius: 10px !important; /* radius on hover (light ring inherits this) */
  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%, #e7cb7e 28%, #fff4d6 32%, #e7cb7e 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 { padding: 2.1rem .5rem !important; border-width: 1.5px; border-radius: 12px !important; }
  .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 { 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 { 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: 1.5rem 0 2rem; }
.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 rgba(18,92,70,0.28); 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: linear-gradient(135deg, var(--gold-light), 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: clamp(1rem, 2vw, 1.6rem); 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 { border: 1.5px solid var(--gold); }
.news-grid--2 .news-box:hover { border-color: #6ee7b7; }
.news-grid--2 .news-box h3 { text-shadow: 0 3px 14px rgba(0,0,0,0.5); }

/* Latest Updates: reduced, equal top & bottom padding */
section[aria-label="Updates and news"] { padding-block: clamp(2.4rem, 1.8rem + 2.4vw, 3.8rem); }
#videos { padding-top: 2.5rem; }

/* Card polish: shadow + radius + border */
.trust-cards-sec .trust-emb {
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.45);
}
.news-grid--2 .news-box {
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 24px 50px -22px rgba(0,0,0,0.5);
}
.news-grid--2 .news-box:hover { 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"] {
  position: relative; z-index: 2;
  background: linear-gradient(rgba(8,54,42,0.90), 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 { border-radius: 16px !important; overflow: hidden; }
.faq-item summary .q-ico { border-radius: 50% !important; }

/* Centered page hero (title + breadcrumb) */
.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 { 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: clamp(2rem, 1.4rem + 1.5vw, 3rem); padding-bottom: clamp(2rem, 1.4rem + 1.5vw, 3rem); }

/* ===== 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-dialog {
  position: relative; z-index: 1; width: min(460px, calc(100vw - 2rem));
  margin: 8vh auto; padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);
  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;
}
.gcsez-x {
  /* Sticky, not absolute: the dialog itself is the scroll container, so an
     absolutely-positioned button scrolls away with the content. */
  position: sticky; top: 0; float: right; z-index: 3;
  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;
}
.gcsez-x:hover { background: rgba(201,161,74,0.18); color: #fff; }
.gcsez-eyebrow { display: block; font-family: var(--font-head); font-weight: 700; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-light); margin-bottom: .5rem; }
.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; }
.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 {
  transform-origin: left center;
  animation: notePop .5s ease both, noteTextPop 2.6s ease-in-out .8s infinite;
}
.topbar-note i { 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 — gold bar slides left→right, then overlay wipes away.
   CSS-only (works without JS): auto-exits after the intro animation.
   ===================================================================== */
.page-loader {
  position: fixed; inset: 0; z-index: 100000;
  background: var(--emerald-deep);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
  animation: plExit .6s cubic-bezier(.76,0,.24,1) 2.6s forwards;
  will-change: transform;
}
.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%, #e7cb7e 28%, #fff4d6 32%, #e7cb7e 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; } }
.page-loader .pl-track {
  position: relative; width: min(240px, 58vw); height: 3px; overflow: hidden;
  background: rgba(201,161,74,.22); border-radius: 999px !important;
}
.page-loader .pl-bar {
  position: absolute; inset: 0; display: block;
  background: linear-gradient(90deg, var(--gold-light), var(--gold));
  transform: translateX(100%);
  animation: plSlide 1.05s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes plSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes plExit { to { transform: translateX(-100%); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .page-loader { animation: plExit .01s linear 2.2s forwards; }
  .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; }
.gc-list li {
  display: flex; gap: .75rem; align-items: flex-start;
  color: var(--ink-soft); font-size: .96rem; line-height: 1.65;
}
.gc-list li::before {
  content: "";
  flex: none; width: 7px; height: 7px; margin-top: .62rem;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,161,74,0.16);
}
.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: var(--gold); 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 {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  padding: clamp(1.1rem, .9rem + .8vw, 1.6rem) clamp(1.2rem, 1rem + .8vw, 1.7rem);
  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);
}
.bg-note > i { color: var(--gold); font-size: 1.15rem; margin-top: .2rem; }
.bg-note p { color: var(--ink-soft); font-size: .92rem; line-height: 1.7; margin: 0; }
.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;
  /* long names must never spill out of the card */
  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 {
  --tone-ink:    #0d4937;   /* heading + name text */
  --tone-accent: #C9A14A;   /* icon + rule        */
  --tone-bg:     rgba(201,161,74,0.07);
  --tone-line:   rgba(201,161,74,0.34);
}
.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 { 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; }
}

/* ---------- Footer map link + map file-size badges ---------- */
.footer-map {
  display: inline-flex; align-items: center;
  color: var(--gold-light);
  font-weight: 600;
  transition: color .25s ease, transform .25s var(--ease-out);
}
.footer-map:hover { color: var(--cream); transform: translateX(2px); }

/* 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;         /* no inner scroll on a full page section */
  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; }
}

/* ---------- Footer embedded Google Map ---------- */
.footer-map-wrap { margin-top: .85rem; }
.footer-map-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  max-width: 340px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line-on-dark);
  background: #0b2c22;
  box-shadow: var(--shadow-sm);
}
.footer-map-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  /* Google's embed is light by default; tone it toward the emerald footer. */
  filter: saturate(.85) contrast(.95);
}
.footer-map-wrap .footer-map {
  margin-top: .6rem;
  font-size: .88rem;
}
@media (max-width: 860px) {
  /* The footer grid drops to 2 narrow columns on phones, which would squeeze
     the map to ~160px. Break the map out of its column so it spans the full
     footer width and stays readable. */
  .footer-col:has(.footer-map-embed) { grid-column: 1 / -1; }
  .footer-map-embed { max-width: 100%; aspect-ratio: 16 / 10; }
}

/* Caption above the footer map — the pin is unlabelled, so name it here */
.footer-map-cap {
  display: flex; align-items: center; gap: .45rem;
  margin-bottom: .55rem;
  font-size: .86rem; font-weight: 700;
  color: var(--cream);
}
.footer-map-cap i { color: var(--gold); flex: none; }

/* ---------- Loader notice (below the logo) ---------- */
.page-loader .pl-note {
  max-width: min(480px, 86vw);
  margin: 0;
  text-align: center;
  font-size: clamp(.78rem, .72rem + .3vw, .9rem);
  line-height: 1.55;
  font-weight: 600;
  color: var(--gold-light);
  animation: plNoteIn .5s var(--ease-out) .25s both;
}
@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-wrap {
  display: grid;
  grid-template-columns: 1.25fr .9fr;
  gap: clamp(1.2rem, .9rem + 1.4vw, 2.2rem);
  align-items: stretch;
}
.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 {
  padding: clamp(1.2rem, 1rem + .9vw, 1.9rem);
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
}
.loc-facts h3 { font-size: var(--step-1); margin-bottom: .3rem; }
.loc-facts .gc-list { margin-top: .8rem; }
.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 */
.page-loader .pl-note strong {
  display: inline-block;
  font-size: 1.08em;
  letter-spacing: .01em;
  margin-bottom: .25rem;
  color: var(--gold-light);
}
.page-loader .pl-sub {
  display: block;
  font-weight: 500;
  font-size: .92em;
  line-height: 1.55;
  color: var(--on-emerald-soft);
}

/* Hero disclaimer — Green City SEZ identity block */
.disc-gcs {
  margin-top: 1.35rem;
  padding: 1rem 1.2rem;
  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;
}
.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: 999px;
  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 {
  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. */
.site-header .brand {
  flex-direction: row;
  align-items: center;
  gap: .6rem;
}
.brand-lion {
  height: 74px;
  width: auto;
  display: block;
  flex: none;
  /* Pull the lion slightly left so it sits closer to the page edge. */
  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: 96px; }

@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: 72px; }
  .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(1.5rem, 1.1rem + 1.4vw, 2.2rem); }
#directory .section-head { margin-bottom: clamp(1.1rem, .9rem + 1vw, 1.8rem); }

/* Loader: lion beside the logo */
.page-loader .pl-brand {
  display: inline-flex;
  align-items: center;
  gap: clamp(.7rem, .5rem + 1vw, 1.3rem);
}
.page-loader .pl-lion {
  height: clamp(78px, 14vw, 116px);
  width: auto;
  display: block;
  flex: none;
  /* Pull the lion further left so the pair sits balanced. */
  margin-left: -26px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.45));
}

/* Footer: lion beside the round logo */
.site-footer .brand {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: .7rem;
}
.footer-lion {
  height: 78px;
  width: auto;
  display: block;
  flex: none;
  filter: drop-shadow(0 3px 9px rgba(0,0,0,.4));
}
@media (max-width: 860px) {
  .footer-lion { height: 64px; }
}

/* News card icon replaced by the brand lion */
.news-ico--lion {
  height: 72px !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: 72px;
  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; } }

/* Footer map sits inside the Connect column - keep it compact */
.footer-map-wrap { margin-top: .7rem; }
.footer-map-embed { max-width: 100%; aspect-ratio: 16 / 11; }
/* Tablet: 5 columns are too tight - drop to 4 and let the map span. */
@media (min-width: 861px) and (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
  .footer-col:has(.footer-map-embed) { grid-column: 1 / -1; }
  .footer-col:has(.footer-map-embed) .footer-map-embed { max-width: 340px; }
}
/* Phones: two columns, brand and the map each on their own full-width row. */
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem 1.4rem; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col:has(.footer-map-embed) { grid-column: 1 / -1; }
  .footer-map-embed { max-width: 100%; aspect-ratio: 16 / 10; }
}

/* 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; }
  /* Header only - this must not touch the round footer logo. */
  .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; }
}

/* Footer logo must stay a perfect circle at every width. Header rules above
   set .brand-img height globally, which was squashing this out of round. */
.site-footer .brand-img {
  height: 84px !important;
  width: 84px !important;
  max-width: none !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50% !important;
}
@media (max-width: 860px) {
  .site-footer .brand-img { height: 72px !important; width: 72px !important; }
}
@media (max-width: 520px) {
  .site-footer .brand-img { height: 64px !important; width: 64px !important; }
}