/* ============================================================
   FALCON PROPERTIES — DESIGN SYSTEM
   Light luxury: Creme + Lite Olive + Lite Aqua + White
   Display: Fraunces  |  Body: Plus Jakarta Sans
   ============================================================ */

:root {
  /* ---- EMERALD VELVET — core luxury palette ---- */
  --emerald: #0F5B4C;       /* hero-lead colour — used mainly in Hero */
  --emerald-rgb: 15, 91, 76;
  --forest: #1E4738;         /* deep sections: projects / CTA / footer / loader */
  --forest-rgb: 30, 71, 56;
  --cream: #F5F0E6;
  --sand: #D9CDBA;
  --gold-base: #C9A84C;
  --gold-base-rgb: 201, 168, 76;

  /* ---- mapped design-system tokens (kept same names so the rest of the
         site's markup needs no structural changes) ---- */
  --creme: #F5F0E6;          /* Cream */
  --ivory: #FBF8F1;          /* soft cream-white, near palette Cream */
  --olive: #D9CDBA;          /* Warm Sand */
  --solive: #C7B79D;         /* deeper Warm Sand */
  --aqua: #2E7D6B;           /* mid-emerald, used sparingly for glows/blobs */
  --saqua: #C9E4DC;          /* pale emerald wash, very light section tints */
  --charcoal: #1E4738;       /* Forest Green replaces near-black */
  --moss: #52625A;           /* muted forest-sand for body copy */
  --gold: #C9A84C;
  --gold-soft: #DFC482;
  --line: rgba(30, 71, 56, 0.12);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-luxe: cubic-bezier(0.65, 0, 0.15, 1);

  /* ---- Falcon brand palette (Emerald Velvet) ---- */
  --pf-dark: #1E4738;        /* Forest Green — deep sections (not hero) */
  --pf-dark-rgb: 30, 71, 56;
  --pf-gold: #C9A84C;
  --pf-gold-rgb: 201, 168, 76;
  --pf-amber: #B8863A;
  --pf-amber-rgb: 184, 134, 58;
  --pf-brown: #7A5C33;
  --pf-brown-rgb: 122, 92, 51;
  --pf-grey: #F2ECDF;        /* warm sand-tinted neutral */
}

* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--ivory);
  color: var(--charcoal);
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  overflow-x: hidden;
}

::selection { background: var(--aqua); color: var(--charcoal); }

.font-display { font-family: "Fraunces", serif; }

/* ---------- grain ---------- */
.grain::after {
  content: "";
  position: fixed;
  inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 90;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- custom cursor ---------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 9999;
  border-radius: 9999px;
  transform: translate(-50%, -50%);
}
.cursor-dot { width: 6px; height: 6px; background: var(--charcoal); }
.cursor-ring {
  width: 38px; height: 38px;
  border: 1.5px solid rgba(89, 102, 83, 0.55);
  display: flex; align-items: center; justify-content: center;
  transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out),
              background-color 0.35s, border-color 0.35s;
}
.cursor-ring span {
  font-size: 10px; letter-spacing: 0.18em; font-weight: 700;
  color: var(--ivory); opacity: 0; transition: opacity 0.25s;
}
.cursor-ring.is-view { width: 76px; height: 76px; background: rgba(30,71,56,0.9); border-color: transparent; backdrop-filter: blur(4px); }
.cursor-ring.is-view span { opacity: 1; }
.cursor-ring.is-link { width: 56px; height: 56px; border-color: var(--gold); background: rgba(201,168,76,0.12); }
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

/* ---------- loader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--charcoal);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 28px;
  transition: opacity 0.7s var(--ease-luxe), visibility 0.7s;
}
#loader.done { opacity: 0; visibility: hidden; }
#loader .loader-emblem { width: 92px; filter: drop-shadow(0 0 24px rgba(201,168,76,0.45)); animation: loaderPulse 1.4s ease-in-out infinite; }
@keyframes loaderPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
#loader .loader-track { width: 180px; height: 1px; background: rgba(251,248,241,0.15); overflow: hidden; }
#loader .loader-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--gold), var(--aqua)); transition: width 0.3s; }
#loader .loader-word { color: rgba(251,248,241,0.5); font-size: 11px; letter-spacing: 0.42em; text-transform: uppercase; }
.flight-path path { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: drawPath 1.6s var(--ease-luxe) forwards; }
@keyframes drawPath { to { stroke-dashoffset: 0; } }

/* ---------- navbar ---------- */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background-color 0.5s, box-shadow 0.5s, backdrop-filter 0.5s;
}
#navbar.scrolled {
  background: rgba(251, 248, 241, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--line), 0 12px 40px -18px rgba(30,71,56,0.18);
}
/* homepage hero is now a dark Emerald section — keep nav text/icons light
   until the navbar picks up its solid (scrolled) background */
body[data-testid="home-page"] #navbar:not(.scrolled) .nav-link { color: rgba(251,248,241,0.82); }
body[data-testid="home-page"] #navbar:not(.scrolled) .nav-link:hover,
body[data-testid="home-page"] #navbar:not(.scrolled) .nav-link.active { color: var(--gold-soft); }
body[data-testid="home-page"] #navbar:not(.scrolled) .nav-link::after { background: linear-gradient(90deg, var(--gold), var(--gold-soft)); }
body[data-testid="home-page"] #navbar:not(.scrolled) [data-testid="nav-whatsapp-btn"] { border-color: rgba(251,248,241,0.35); color: var(--ivory); }
body[data-testid="home-page"] #navbar:not(.scrolled) [data-testid="nav-whatsapp-btn"]:hover { background: var(--ivory); color: var(--emerald); }
body[data-testid="home-page"] #navbar:not(.scrolled) #menu-btn { border-color: rgba(251,248,241,0.35); color: var(--ivory); }
body[data-testid="home-page"] #navbar:not(.scrolled) [data-testid="nav-explore-btn"] { background: var(--gold); color: var(--forest); }
body[data-testid="home-page"] #navbar:not(.scrolled) [data-testid="nav-explore-btn"]:hover { background: var(--ivory); color: var(--forest); }
.nav-link { position: relative; padding: 6px 2px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.02em; color: var(--moss); transition: color 0.3s; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), var(--solive));
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease-luxe);
}
.nav-link:hover, .nav-link.active { color: var(--charcoal); }
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); transform-origin: left; }

/* mobile menu */
#mobile-menu {
  position: fixed; inset: 0; z-index: 150;
  background:
    radial-gradient(60% 50% at 85% 15%, rgba(46,125,107,0.45), transparent 70%),
    radial-gradient(50% 45% at 10% 90%, rgba(199,183,157,0.5), transparent 70%),
    var(--charcoal);
  clip-path: circle(0% at calc(100% - 44px) 44px);
  transition: clip-path 0.8s var(--ease-luxe);
  pointer-events: none;
}
#mobile-menu.open { clip-path: circle(150% at calc(100% - 44px) 44px); pointer-events: auto; }
#mobile-menu .m-link {
  display: block; overflow: hidden;
}
#mobile-menu .m-link span {
  display: block; transform: translateY(110%); transition: transform 0.7s var(--ease-luxe);
}
#mobile-menu.open .m-link span { transform: translateY(0); }
#mobile-menu.open .m-link:nth-child(1) span { transition-delay: 0.15s; }
#mobile-menu.open .m-link:nth-child(2) span { transition-delay: 0.22s; }
#mobile-menu.open .m-link:nth-child(3) span { transition-delay: 0.29s; }
#mobile-menu.open .m-link:nth-child(4) span { transition-delay: 0.36s; }
#mobile-menu.open .m-link:nth-child(5) span { transition-delay: 0.43s; }
#mobile-menu.open .m-link:nth-child(6) span { transition-delay: 0.50s; }

/* ---------- buttons ---------- */
.btn-primary {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  background: var(--charcoal); color: var(--ivory);
  padding: 15px 30px; border-radius: 9999px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
  overflow: hidden; isolation: isolate;
  transition: color 0.4s, transform 0.3s var(--ease-out), box-shadow 0.4s;
}
.btn-primary::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, var(--solive), var(--aqua));
  transform: translateY(101%); border-radius: inherit;
  transition: transform 0.5s var(--ease-luxe);
}
.btn-primary:hover { color: var(--charcoal); transform: translateY(-2px); box-shadow: 0 16px 34px -14px rgba(30,71,56,0.45); }
.btn-primary:hover::before { transform: translateY(0); }

.btn-ghost {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 6px; font-size: 14px; font-weight: 700; color: var(--charcoal);
  transition: color 0.3s;
}
.btn-ghost::after {
  content: ""; position: absolute; left: 0; bottom: 8px; height: 1.5px; width: 100%;
  background: var(--charcoal); transform-origin: left; transition: transform 0.45s var(--ease-luxe);
}
.btn-ghost:hover::after { transform: scaleX(0.35); }
.btn-ghost svg { transition: transform 0.35s var(--ease-out); }
.btn-ghost:hover svg { transform: translateX(5px); }

.btn-gold {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(105deg, var(--pf-gold), var(--pf-amber));
  color: var(--pf-dark); padding: 15px 30px; border-radius: 9999px;
  font-size: 14px; font-weight: 800;
  transition: transform 0.3s var(--ease-out), box-shadow 0.4s, filter 0.3s;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(var(--pf-amber-rgb),0.65); filter: brightness(1.05); }

/* ---------- eyebrow / chapter ---------- */
.chapter {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--moss);
}
.chapter::before { content: ""; width: 42px; height: 1px; background: var(--pf-gold); }
.chapter .num { color: var(--pf-amber); }

/* ---------- masked line reveal ---------- */
.line-mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line-mask > span { display: block; transform: translateY(115%); will-change: transform; }
.no-js .line-mask > span, .reduced .line-mask > span { transform: none; }

/* ---------- hero ---------- */
.hero-blob { position: absolute; border-radius: 9999px; filter: blur(90px); pointer-events: none; }
.hero-blob.a { width: 560px; height: 560px; background: radial-gradient(circle, rgba(46,125,107,0.75), transparent 65%); top: -140px; right: -80px; animation: blobFloat 14s ease-in-out infinite; }
.hero-blob.b { width: 480px; height: 480px; background: radial-gradient(circle, rgba(199,183,157,0.7), transparent 65%); bottom: -120px; left: -120px; animation: blobFloat 18s ease-in-out infinite reverse; }
.hero-blob.c { width: 380px; height: 380px; background: radial-gradient(circle, rgba(var(--pf-gold-rgb),0.45), transparent 65%); top: 38%; left: 32%; animation: blobFloat 22s ease-in-out infinite 2s; }
.hero-blob.d { width: 300px; height: 300px; background: radial-gradient(circle, rgba(var(--pf-dark-rgb),0.14), transparent 65%); bottom: 10%; right: 12%; animation: blobFloat 16s ease-in-out infinite 1s; }
@keyframes blobFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(34px,-26px) scale(1.07); }
  66% { transform: translate(-26px,22px) scale(0.95); }
}
#hero-glow {
  position: absolute; width: 640px; height: 640px; border-radius: 9999px;
  background: radial-gradient(circle, rgba(var(--emerald-rgb),0.28), transparent 62%);
  pointer-events: none; transform: translate(-50%, -50%);
  left: 60%; top: 40%;
}
.hero-arch {
  border-radius: 999px 999px 28px 28px;
  overflow: hidden; position: relative;
  box-shadow: 0 40px 90px -30px rgba(30,71,56,0.35);
}
.hero-arch img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); will-change: transform; }
.hero-arch::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30,71,56,0.28), transparent 45%);
}
.chip {
  position: absolute; display: flex; align-items: center; gap: 16px;
  background: rgba(251,248,241,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(var(--pf-gold-rgb), 0.5);
  padding: 18px 24px; border-radius: 22px;
  min-width: 232px;
  box-shadow: 0 22px 50px -18px rgba(var(--pf-dark-rgb), 0.4);
  animation: chipFloat 6s ease-in-out infinite;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s, border-color 0.35s;
  cursor: default; z-index: 5;
}
.chip:hover { transform: translateY(-4px) scale(1.04); border-color: rgba(var(--pf-gold-rgb),0.85); box-shadow: 0 32px 64px -18px rgba(var(--pf-dark-rgb), 0.5), 0 0 0 4px rgba(var(--pf-gold-rgb),0.28); }
.chip .chip-icon { width: 48px; height: 48px; border-radius: 15px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chip .chip-icon i { width: 22px; height: 22px; }
.chip small { display: block; font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--moss); font-weight: 700; margin-bottom: 3px; }
.chip strong { display: block; font-size: 17px; font-weight: 800; line-height: 1.2; color: var(--charcoal); white-space: nowrap; }
@keyframes chipFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.chip:nth-child(odd) { animation-delay: 1.4s; animation-duration: 7s; }
@media (max-width: 1023px) { .chip { min-width: 0; padding: 14px 18px; } .chip strong { font-size: 15px; } }

.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.scroll-cue .cue-line { width: 1px; height: 54px; background: var(--line); position: relative; overflow: hidden; }
.scroll-cue .cue-line::after { content: ""; position: absolute; top: -40%; left: 0; width: 100%; height: 40%; background: var(--gold); animation: cueDrop 2s var(--ease-luxe) infinite; }
@keyframes cueDrop { to { top: 110%; } }

/* ---------- search panel ---------- */
.search-panel {
  position: relative;
  background: rgba(251,248,241,0.86);
  backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 28px;
  box-shadow: 0 34px 80px -30px rgba(30,71,56,0.28);
  overflow: hidden;
}
.search-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--pf-gold), var(--pf-amber), var(--pf-brown));
}
.search-field label { font-size: 10px; letter-spacing: 0.22em; font-weight: 800; text-transform: uppercase; color: var(--moss); display: block; margin-bottom: 8px; }
.search-field select {
  width: 100%; background: transparent; border: none; outline: none;
  font-size: 15px; font-weight: 700; color: var(--charcoal); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  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='%23596653' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; padding-right: 20px;
}

/* ---------- marquee ---------- */
.marquee { overflow: hidden; white-space: nowrap; position: relative; }
.marquee-track { display: inline-flex; align-items: center; animation: marquee 42s linear infinite; will-change: transform; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-item {
  font-family: "Fraunces", serif; font-size: clamp(38px, 6vw, 84px);
  padding: 0 0.5em; line-height: 1.15;
  color: transparent; -webkit-text-stroke: 1px rgba(30,71,56,0.3);
  transition: color 0.4s;
}
.marquee-item.solid { color: var(--charcoal); -webkit-text-stroke: 0; font-style: italic; }
.marquee-dot { width: 10px; height: 10px; border-radius: 9999px; background: var(--pf-gold); flex-shrink: 0; }

/* logo marquee (builders) */
.logo-marquee-track { display: inline-flex; animation: marquee 34s linear infinite; }
.logo-marquee:hover .logo-marquee-track { animation-play-state: paused; }
.marquee-fade { -webkit-mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); mask-image: linear-gradient(90deg, transparent, black 12%, black 88%, transparent); }
.builder-cell {
  display: flex; align-items: center; justify-content: center;
  min-width: 230px; padding: 26px 30px; margin: 0 10px;
  border: 1px solid var(--line); border-radius: 20px; background: #fff;
  transition: border-color 0.35s, transform 0.35s var(--ease-out), box-shadow 0.35s;
}
.builder-cell:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(30,71,56,0.25); }

/* ---------- cards ---------- */
.cat-card { position: relative; border-radius: 26px; overflow: hidden; display: block; isolation: isolate; }
.cat-card img { transition: transform 1.1s var(--ease-luxe); }
.cat-card:hover img { transform: scale(1.08); }
.cat-card .cat-blob {
  position: absolute; width: 220px; height: 220px; border-radius: 9999px;
  background: radial-gradient(circle, rgba(46,125,107,0.5), transparent 65%);
  top: -60px; right: -60px; opacity: 0; transition: opacity 0.5s; z-index: 1; pointer-events: none;
}
.cat-card:hover .cat-blob { opacity: 1; }
.cat-card .cat-arrow { transition: transform 0.4s var(--ease-out), background-color 0.4s, color 0.4s; }
.cat-card:hover .cat-arrow { transform: translate(4px,-4px); background: var(--charcoal); color: var(--ivory); }
.cat-card::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to top, rgba(30,71,56,0.72), rgba(30,71,56,0.05) 55%);
}

.prop-card {
  background: #fff; border: 1px solid var(--line); border-radius: 26px; overflow: hidden;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s, border-color 0.4s;
}
.prop-card:hover { transform: translateY(-8px); box-shadow: 0 34px 70px -28px rgba(30,71,56,0.35); border-color: rgba(201,168,76,0.55); }
.prop-card .prop-img { overflow: hidden; position: relative; }
.prop-card .prop-img img { transition: transform 1s var(--ease-luxe); }
.prop-card:hover .prop-img img { transform: scale(1.07); }
.prop-badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(251,248,241,0.88); backdrop-filter: blur(8px);
  font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 9999px; color: var(--charcoal);
}
.prop-badge.new { background: var(--charcoal); color: var(--gold-soft); }
.amen-chip { font-size: 11px; font-weight: 600; background: var(--creme); border-radius: 9999px; padding: 5px 11px; color: var(--moss); }

.proj-card { perspective: 1200px; }
.proj-inner {
  border-radius: 26px; overflow: hidden; position: relative; height: 100%;
  transform-style: preserve-3d; transition: transform 0.6s var(--ease-out), box-shadow 0.5s;
  background: #fff; border: 1px solid var(--line);
}
.proj-card:hover .proj-inner { box-shadow: 0 40px 80px -30px rgba(30,71,56,0.4); }
.proj-inner .p-img { position: relative; overflow: hidden; }
.proj-inner .p-img img { transition: transform 1.1s var(--ease-luxe); }
.proj-card:hover .p-img img { transform: scale(1.08); }
.loc-badge {
  position: absolute; bottom: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(30,71,56,0.72); color: var(--ivory); backdrop-filter: blur(8px);
  font-size: 11px; font-weight: 700; padding: 7px 13px; border-radius: 9999px;
}
.filter-pill {
  padding: 10px 20px; border-radius: 9999px; border: 1px solid var(--line);
  font-size: 13px; font-weight: 700; color: var(--moss); background: #fff;
  transition: all 0.35s var(--ease-out); cursor: pointer; white-space: nowrap;
}
.filter-pill:hover { border-color: var(--solive); color: var(--charcoal); transform: translateY(-2px); }
.filter-pill.active { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); }

/* team */
.team-card { position: relative; border-radius: 26px; overflow: hidden; background: #fff; border: 1px solid var(--line); transition: transform 0.5s var(--ease-out), box-shadow 0.5s; }
.team-card:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -26px rgba(30,71,56,0.3); }
.team-card .t-img { border-radius: 22px 22px 45% 45% / 22px 22px 12% 12%; overflow: hidden; margin: 12px; }
/* Team photos are full-body portraits (face near the top of the frame).
   The markup crops them to a fixed height with object-cover, which — with
   no object-position set — defaults to centering the crop and cuts the
   face off the top on both mobile and desktop. Anchoring the crop to the
   top keeps the face in frame at any card height. */
.team-card .t-img img { object-fit: cover; object-position: top center; transition: transform 1s var(--ease-luxe); }
.team-card:hover .t-img img { transform: scale(1.06); }
@media (max-width: 767px) {
  /* on small screens the card is narrower relative to the portrait's
     aspect ratio, so give the crop a little more headroom before anchoring
     to the top — keeps hair/forehead from touching the rounded edge */
  .team-card .t-img img { object-position: top center; }
}

/* ---------- accordion ---------- */
.acc-item { border-bottom: 1px solid var(--line); }
.acc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; padding: 26px 4px; cursor: pointer; background: none; border: none; }
.acc-head h3 { transition: color 0.3s; }
.acc-item.open .acc-head h3, .acc-head:hover h3 { color: var(--moss); }
.acc-icon { flex-shrink: 0; width: 40px; height: 40px; border-radius: 9999px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; transition: all 0.45s var(--ease-luxe); }
.acc-item.open .acc-icon { background: var(--charcoal); color: var(--ivory); transform: rotate(45deg); border-color: var(--charcoal); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height 0.6s var(--ease-luxe); }

/* investment expand cards */
.invest-card { border: 1px solid var(--line); border-radius: 22px; background: #fff; overflow: hidden; transition: box-shadow 0.4s, border-color 0.4s; cursor: pointer; }
.invest-card:hover { border-color: rgba(158,174,130,0.7); }
.invest-card.open { border-color: var(--gold); box-shadow: 0 24px 50px -24px rgba(30,71,56,0.25); }
.invest-card .inv-body { max-height: 0; overflow: hidden; transition: max-height 0.55s var(--ease-luxe); }
.invest-card.open .inv-body { max-height: 220px; }
.invest-card .inv-plus { transition: transform 0.45s var(--ease-luxe); }
.invest-card.open .inv-plus { transform: rotate(45deg); }

/* bangalore area cards */
.area-card { position: relative; border-radius: 24px; padding: 28px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform 0.45s var(--ease-out), box-shadow 0.45s; cursor: pointer; display: block; }
.area-card::before {
  content: ""; position: absolute; width: 240px; height: 240px; border-radius: 9999px;
  background: radial-gradient(circle, rgba(var(--pf-gold-rgb),0.35), transparent 65%);
  top: -90px; right: -90px; opacity: 0; transition: opacity 0.5s;
}
.area-card:hover { transform: translateY(-6px); box-shadow: 0 28px 56px -26px rgba(30,71,56,0.3); }
.area-card:hover::before { opacity: 1; }
.area-card .area-more { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.55s var(--ease-luxe), opacity 0.4s; }
.area-card:hover .area-more { max-height: 160px; opacity: 1; }

/* ---------- forms ---------- */
.f-field label { display: block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800; color: var(--moss); margin-bottom: 8px; }
.f-input {
  width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 15px 18px; font-size: 15px; font-weight: 600; color: var(--charcoal);
  outline: none; transition: border-color 0.3s, box-shadow 0.3s;
}
.f-input:focus { border-color: var(--solive); box-shadow: 0 0 0 4px rgba(46,125,107,0.35); }
.f-input.error { border-color: #c0564f; box-shadow: 0 0 0 4px rgba(192,86,79,0.15); }

/* ---------- concierge chamber (contact page) ---------- */
.concierge-chamber {
  position: relative; border-radius: 40px; padding: 84px 20px 0;
  overflow: hidden; isolation: isolate;
  background:
    radial-gradient(620px 380px at 50% 0%, rgba(var(--pf-gold-rgb),0.16), transparent 68%),
    linear-gradient(180deg, #16362B 0%, #102720 58%, #0C1E18 100%);
}
.concierge-chamber::before {
  content: ""; position: absolute; inset: 14px; border: 1px solid rgba(223,196,130,0.22);
  border-radius: 28px; pointer-events: none;
}
.concierge-chamber::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 480px at 50% 100%, rgba(0,0,0,0.4), transparent 70%);
}
.concierge-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--gold-soft); position: relative; z-index: 2;
}
.concierge-eyebrow::before, .concierge-eyebrow::after { content: ""; width: 34px; height: 1px; background: rgba(223,196,130,0.5); }

.concierge-figure { position: relative; display: flex; flex-direction: column; align-items: center; z-index: 2; margin-top: 34px; }
.concierge-glow {
  position: absolute; top: -56px; left: 50%; width: 440px; height: 440px; border-radius: 50%;
  transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(201,168,76,0.3), transparent 62%);
}
.concierge-seal {
  position: absolute; top: -14px; left: 50%; width: 380px; height: 380px; border-radius: 50%;
  border: 1px solid rgba(223,196,130,0.45); transform: translateX(-50%); z-index: 0; pointer-events: none;
}
.concierge-seal::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; border: 1px solid rgba(223,196,130,0.24); }
html:not(.reduced) .concierge-seal { animation: sealTurn 80s linear infinite; }
@keyframes sealTurn { to { transform: translateX(-50%) rotate(360deg); } }

.concierge-img { position: relative; z-index: 2; width: clamp(190px, 20vw, 290px); height: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.55)); }
html:not(.reduced) .concierge-img { animation: figureFloat 7s ease-in-out infinite; }
@keyframes figureFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.concierge-plate { position: relative; z-index: 2; margin-top: 20px; text-align: center; }
.concierge-plate span { display: block; width: 1px; height: 30px; margin: 0 auto 14px; background: linear-gradient(180deg, rgba(223,196,130,0), rgba(223,196,130,0.75)); }
.concierge-plate p { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 800; color: var(--gold-soft); }

.concierge-thread { width: 1px; height: 46px; margin: 22px auto 0; position: relative; z-index: 2; background: linear-gradient(180deg, rgba(223,196,130,0.75), rgba(223,196,130,0)); }

.ledger-wrap { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding: 0 4px 64px; }
.ledger-card { background: var(--ivory); border-radius: 26px; padding: 40px 26px; box-shadow: 0 50px 90px -30px rgba(0,0,0,0.55); position: relative; }
@media (min-width: 640px) { .ledger-card { padding: 46px 44px; } }
.ledger-card::before { content: ""; position: absolute; top: 0; left: 32px; right: 32px; height: 1px; background: linear-gradient(90deg, transparent, rgba(201,168,76,0.75), transparent); }

.ledger-card .f-input { background: transparent; border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 2px 12px; }
.ledger-card .f-input:focus { border-color: var(--gold); box-shadow: 0 1px 0 0 var(--gold); }
.ledger-card .f-input.error { border-color: #c0564f; box-shadow: 0 1px 0 0 #c0564f; }
.ledger-card select.f-input {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23596653' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center; padding-right: 22px;
}
.ledger-card textarea.f-input { resize: vertical; min-height: 78px; }
.ledger-submit { width: 100%; justify-content: center; margin-top: 6px; }
.ledger-note { text-align: center; font-size: 11px; color: var(--moss); margin-top: 16px; letter-spacing: 0.02em; }

@media (max-width: 640px) {
  .concierge-chamber { padding: 60px 14px 0; border-radius: 28px; }
  .concierge-glow, .concierge-seal { width: 280px; height: 280px; }
}

/* range sliders */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; border-radius: 999px; background: linear-gradient(90deg, var(--solive) var(--fill,50%), #E7E2D2 var(--fill,50%)); outline: none; cursor: pointer; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 9999px;
  background: var(--charcoal); border: 4px solid var(--ivory);
  box-shadow: 0 4px 14px rgba(30,71,56,0.35); transition: transform 0.25s var(--ease-out);
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 9999px; background: var(--charcoal); border: 4px solid var(--ivory); box-shadow: 0 4px 14px rgba(30,71,56,0.35); }

/* ---------- modals ---------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 160; background: rgba(30,71,56,0.55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
  opacity: 0; pointer-events: none; transition: opacity 0.4s;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-panel {
  background: var(--ivory); border-radius: 30px; width: 100%; max-width: 100%;
  max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateY(40px) scale(0.97); transition: transform 0.55s var(--ease-luxe);
  display: flex; flex-direction: column;
  box-sizing: border-box;
}
.modal-overlay.open .modal-panel { transform: translateY(0) scale(1); }
/* flex children default to min-height:auto, which stops them shrinking below
   their content size — that breaks the parent's overflow-y:auto scroll on
   mobile. Forcing min-height:0 lets .modal-panel be the single scroller. */
.modal-panel > * { min-height: 0; }
.modal-panel img { max-width: 100%; height: auto; }
.modal-panel table { display: block; max-width: 100%; overflow-x: auto; }
.modal-close {
  position: absolute; top: 18px; right: 18px; z-index: 10;
  width: 44px; height: 44px; border-radius: 9999px;
  background: rgba(251,248,241,0.9); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.35s var(--ease-out), background-color 0.3s;
}
.modal-close:hover { transform: rotate(90deg); background: var(--charcoal); color: var(--ivory); }
.gallery-thumb { border-radius: 14px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color 0.3s, transform 0.3s; }
.gallery-thumb:hover { transform: translateY(-3px); }
.gallery-thumb.active { border-color: var(--gold); }

/* ---- modal mobile responsiveness fix ---- */
@media (max-width: 640px) {
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal-panel {
    max-height: 94dvh; max-height: 94vh;
    border-radius: 24px 24px 0 0;
    width: 100%;
  }
  .modal-panel::-webkit-scrollbar { width: 4px; }
  .modal-close { top: 12px; right: 12px; width: 40px; height: 40px; }
  /* collapse any multi-column layouts (spec grids, gallery grids, side-by-side
     info blocks) into a single readable column on small screens */
  .modal-panel [class*="grid-cols-2"],
  .modal-panel [class*="grid-cols-3"],
  .modal-panel [class*="grid-cols-4"] { grid-template-columns: 1fr !important; }
  .modal-panel [class*="md:flex-row"],
  .modal-panel [class*="lg:flex-row"] { flex-direction: column !important; }
  .modal-panel .flex.gap-3,
  .modal-panel .flex.gap-4 { flex-wrap: wrap; }
  .modal-panel h1, .modal-panel h2, .modal-panel h3 { word-break: break-word; }
}
@supports (height: 100dvh) {
  @media (max-width: 640px) { .modal-panel { max-height: 94dvh; } }
}

/* ---------- chatbot ---------- */
#concierge-btn {
  position: fixed; bottom: 96px; right: 22px; z-index: 140;
  width: 60px; height: 60px; border-radius: 9999px;
  background: var(--charcoal);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 34px -10px rgba(30,71,56,0.5), 0 0 0 0 rgba(46,125,107,0.5);
  animation: pulseAqua 3s infinite;
  transition: transform 0.35s var(--ease-out);
}
#concierge-btn:hover { transform: scale(1.1) rotate(-6deg); }
@keyframes pulseAqua { 0% { box-shadow: 0 14px 34px -10px rgba(30,71,56,0.5), 0 0 0 0 rgba(46,125,107,0.55); } 70% { box-shadow: 0 14px 34px -10px rgba(30,71,56,0.5), 0 0 0 18px rgba(46,125,107,0); } 100% { box-shadow: 0 14px 34px -10px rgba(30,71,56,0.5), 0 0 0 0 rgba(46,125,107,0); } }
#chat-panel {
  position: fixed; bottom: 168px; right: 22px; z-index: 145;
  width: 384px; max-width: calc(100vw - 32px); height: min(600px, calc(100vh - 200px));
  background: var(--ivory); border-radius: 28px; overflow: hidden;
  box-shadow: 0 40px 90px -24px rgba(30,71,56,0.45); border: 1px solid rgba(255,255,255,0.7);
  display: flex; flex-direction: column;
  transform: translateY(24px) scale(0.96); opacity: 0; pointer-events: none;
  transform-origin: bottom right;
  transition: transform 0.5s var(--ease-luxe), opacity 0.35s;
}
#chat-panel.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
.chat-msgs { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 20px; display: flex; flex-direction: column; gap: 14px; scroll-behavior: smooth; }
.msg { max-width: 85%; padding: 13px 17px; border-radius: 20px; font-size: 13.5px; line-height: 1.55; animation: msgIn 0.45s var(--ease-out); }
@keyframes msgIn { from { opacity: 0; transform: translateY(12px); } }
.msg.bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 6px; align-self: flex-start; }
.msg.user { background: var(--charcoal); color: var(--ivory); border-bottom-right-radius: 6px; align-self: flex-end; }
.msg .caret { display: inline-block; width: 2px; height: 1em; background: var(--gold); vertical-align: text-bottom; animation: blink 0.8s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.typing-dots { display: inline-flex; gap: 5px; padding: 6px 2px; }
.typing-dots i { width: 7px; height: 7px; border-radius: 9999px; background: var(--solive); animation: dotBounce 1.2s infinite; }
.typing-dots i:nth-child(2) { animation-delay: 0.15s; } .typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dotBounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }
.chat-opts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 14px; }
.chat-opt {
  padding: 10px 16px; border-radius: 9999px; border: 1px solid var(--line); background: #fff;
  font-size: 12.5px; font-weight: 700; color: var(--moss);
  transition: all 0.3s var(--ease-out); animation: msgIn 0.4s var(--ease-out);
}
.chat-opt:hover { background: var(--charcoal); color: var(--ivory); border-color: var(--charcoal); transform: translateY(-2px); }
.chat-cta { display: block; width: 100%; text-align: left; padding: 13px 17px; border-radius: 16px; background: var(--saqua); font-size: 13px; font-weight: 700; color: var(--charcoal); transition: all 0.3s; animation: msgIn 0.4s var(--ease-out); }
.chat-cta:hover { background: var(--aqua); transform: translateX(3px); }
@media (max-width: 640px) {
  #chat-panel { position: fixed; inset: 0; width: 100%; max-width: none; height: 100vh; height: 100dvh; border-radius: 0; bottom: 0; right: 0; }
}

/* ---------- floating buttons ---------- */
#wa-float {
  position: fixed; bottom: 22px; right: 22px; z-index: 140;
  display: flex; align-items: center; gap: 0;
  background: #22c15e; color: #fff; border-radius: 9999px; height: 60px; padding: 0 17px;
  box-shadow: 0 14px 34px -10px rgba(34,193,94,0.6);
  transition: all 0.4s var(--ease-out); overflow: hidden;
}
#wa-float .wa-label { max-width: 0; overflow: hidden; white-space: nowrap; font-size: 13.5px; font-weight: 700; transition: max-width 0.45s var(--ease-luxe), margin 0.45s; }
#wa-float:hover .wa-label { max-width: 140px; margin-left: 10px; }
#wa-float:hover { transform: translateY(-3px); }
#to-top {
  position: fixed; bottom: 22px; left: 22px; z-index: 140;
  width: 48px; height: 48px; border-radius: 9999px;
  background: rgba(251,248,241,0.9); backdrop-filter: blur(10px); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transform: translateY(14px);
  transition: all 0.4s var(--ease-out);
}
#to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
#to-top:hover { background: var(--charcoal); color: var(--ivory); }

/* ---------- footer ---------- */
.footer-flight path { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.footer-flight.drawn path { animation: drawPath1400 2.4s var(--ease-luxe) forwards; }
@keyframes drawPath1400 { to { stroke-dashoffset: 0; } }
.foot-link { color: rgba(251,248,241,0.6); font-size: 14px; transition: color 0.3s, padding-left 0.3s; display: inline-block; }
.foot-link:hover { color: var(--gold-soft); padding-left: 6px; }
.social-btn {
  width: 42px; height: 42px; border-radius: 9999px; border: 1px solid rgba(251,248,241,0.2);
  display: flex; align-items: center; justify-content: center; color: rgba(251,248,241,0.7);
  transition: all 0.35s var(--ease-out);
}
.social-btn:hover { background: var(--gold); border-color: var(--gold); color: var(--charcoal); transform: translateY(-4px); }

/* ---------- section watermark (centred in every section) ---------- */
.section-watermark {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: clamp(260px, 30vw, 460px);
  height: auto;
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  filter: drop-shadow(0 10px 30px rgba(var(--pf-dark-rgb), 0.1));
}
/* legacy corner-modifier classes are neutralised — every watermark now centres itself */
.wm-tr, .wm-tl, .wm-br, .wm-bl, .wm-center-r, .wm-center-l {
  top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
}
/* on deep Forest-Green sections the logo is flipped to a pale tint so it reads clearly */
.wm-on-dark { opacity: 0.22; filter: brightness(0) invert(1) drop-shadow(0 10px 30px rgba(0,0,0,0.35)); }
@media (max-width: 767px) { .section-watermark { width: clamp(190px, 52vw, 300px); opacity: 0.14; } .wm-on-dark { opacity: 0.2; } }

/* ---------- hero: dark Emerald background overrides ---------- */
/* The hero section background is a dark Emerald→Forest gradient (set inline
   on #hero in the HTML). Everything below flips its foreground content to
   read correctly against that dark background. */
#hero h1 { color: var(--ivory); }
#hero .chapter { color: rgba(251,248,241,0.78); }
#hero .chapter::before { background: var(--gold-soft); }
#hero .chapter .num { color: var(--gold-soft); }
/* catches every hero paragraph/icon that was still styled for a light background */
#hero [style*="color:var(--moss)"] { color: rgba(251,248,241,0.72) !important; }
#hero [style*="color:var(--solive)"] { color: var(--gold-soft) !important; }
#hero .text-charcoal { color: var(--ivory) !important; }
#hero .cue-line { background: rgba(251,248,241,0.28); }
#hero .cue-line::after { background: var(--gold); }

/* primary CTA becomes gold (the button now needs to stand out from the
   emerald backdrop rather than blend into it) */
#hero .btn-primary { background: var(--gold); color: var(--forest); }
#hero .btn-primary::before { background: linear-gradient(105deg, var(--ivory), var(--gold-soft)); }
#hero .btn-primary:hover { color: var(--forest); }
#hero .btn-ghost { color: var(--ivory); }
#hero .btn-ghost::after { background: var(--gold-soft); }

/* floating info chips stay light glass cards — that contrast is what makes
   them pop against the dark hero, so only refine the glow/border */
#hero .pf-icon-dark { background: rgba(var(--emerald-rgb), 0.14); }
#hero .pf-icon-dark i { color: var(--emerald); }
#hero .chip { border-color: rgba(var(--gold-base-rgb), 0.4); box-shadow: 0 22px 50px -18px rgba(0,0,0,0.5); }
#hero .chip:hover { border-color: rgba(var(--gold-base-rgb), 0.75); box-shadow: 0 32px 64px -18px rgba(0,0,0,0.55), 0 0 0 4px rgba(var(--gold-base-rgb),0.22); }

/* ambient blobs/glow retuned for a dark backdrop — warm gold + soft ivory
   wisps instead of emerald-on-emerald (which would just disappear) */
#hero .hero-blob.a { background: radial-gradient(circle, rgba(var(--gold-base-rgb),0.32), transparent 65%); }
#hero .hero-blob.b { background: radial-gradient(circle, rgba(251,248,241,0.14), transparent 65%); }
#hero .hero-blob.c { background: radial-gradient(circle, rgba(var(--gold-base-rgb),0.4), transparent 65%); }
#hero .hero-blob.d { background: radial-gradient(circle, rgba(251,248,241,0.1), transparent 65%); }
#hero-glow { background: radial-gradient(circle, rgba(var(--gold-base-rgb),0.22), transparent 62%); }
#hero svg.hero-flight path { stroke-width: 1.8; }
#hero .hero-arch { box-shadow: 0 40px 90px -28px rgba(0,0,0,0.55); }
#hero .hero-arch::after { background: linear-gradient(to top, rgba(0,0,0,0.35), transparent 45%); }

/* NOTE: the mobile-only hero background photo now lives as an inline
   <style> block in index.html's <head>, not here — keeps it shipping
   with the page and avoids the css/ vs page-root relative-path mismatch. */

/* ---------- misc ---------- */
.stat-line { border-left: 2px solid var(--gold); padding-left: 18px; }
.glass-pill { background: rgba(251,248,241,0.7); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.75); }
.trust-icon { width: 52px; height: 52px; border-radius: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 0.4s var(--ease-out); }
.trust-item:hover .trust-icon { transform: rotate(-8deg) scale(1.1); }
.insight-card img { transition: transform 1s var(--ease-luxe); }
.insight-card:hover img { transform: scale(1.06); }
.demo-tag { font-size: 9px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(var(--pf-gold-rgb),0.18); color: var(--pf-brown); padding: 4px 9px; border-radius: 9999px; }

/* ---------- palette-driven icon backgrounds (homepage) ---------- */
.pf-icon-gold { background: rgba(var(--pf-gold-rgb),0.2); }
.pf-icon-gold i { color: var(--pf-brown); }
.pf-icon-amber { background: rgba(var(--pf-amber-rgb),0.18); }
.pf-icon-amber i { color: var(--pf-amber); }
.pf-icon-dark { background: rgba(var(--pf-dark-rgb),0.08); }
.pf-icon-dark i { color: var(--pf-dark); }

.testi-track { display: flex; gap: 22px; transition: transform 0.7s var(--ease-luxe); will-change: transform; }
.testi-card { min-width: min(420px, 86vw); }

.reveal-img-mask { clip-path: inset(0 0 100% 0); }
.no-js .reveal-img-mask { clip-path: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .marquee-track, .logo-marquee-track { animation: none; }
}