/* ═══════════════════════════════════════════════════
   MARQUEE — counter-scrolling photo bands
   Sandy / summery luxury palette
   ═══════════════════════════════════════════════════ */

:root {
  --mq-bg: #f1ead9;          /* warm sand / cream */
  --mq-bg-deep: #e9dfc7;
  --mq-ink: #1a1612;         /* warm near-black */
  --mq-ink-soft: rgba(26,22,18,0.62);
  --mq-ink-mute: rgba(26,22,18,0.40);
  --mq-line: rgba(26,22,18,0.16);
  --mq-accent: #0D6796;      /* keep brand blue, reads richer on cream */
  --mq-accent-light: #2a8fc4;
}

.variant-marquee { background: var(--mq-bg); color: var(--mq-ink); }
.variant-marquee body { background: var(--mq-bg); }
.variant-marquee .nav { display: none; }

/* ─── Nav ─── */
.mq-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 48px;
  background: linear-gradient(to bottom, rgba(241,234,217,0.94), rgba(241,234,217,0));
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  font-family: var(--font-sans);
}
.mq-nav-logo img {
  height: 38px;
  width: auto;
  /* Logo is a light wordmark — invert/darken so it reads on cream */
  filter: brightness(0.42) saturate(1.2) contrast(1.1);
}
.mq-nav-links {
  display: flex;
  gap: 26px;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--mq-ink);
}
.mq-nav-links a:hover { color: var(--mq-accent); }
.mq-nav-cta {
  padding: 11px 22px;
  border: 1px solid var(--mq-ink);
  border-radius: 100px;
  transition: all 0.3s var(--ease);
}
.mq-nav-cta:hover { background: var(--mq-ink); color: var(--mq-bg); }

/* ─── Stage ─── */
.mq {
  position: relative;
  height: 100vh;
  min-height: 720px;
  width: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  isolation: isolate;
  background: var(--mq-bg);
}

/* Subtle paper texture / warmth via radial vignette */
.mq::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(255,255,255,0.4), transparent 70%),
    linear-gradient(180deg, var(--mq-bg) 0%, var(--mq-bg-deep) 100%);
}

/* ─── Bands ─── */
.mq-bands {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 60px 0;
}

.mq-band {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.mq-band--top { transform: rotate(-2deg) translateY(2%); }
.mq-band--bot { transform: rotate(-2deg) translateY(-2%); }

.mq-track {
  position: absolute;
  top: 0; bottom: 0;
  display: flex;
  align-items: center;
}
.mq-row {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 22px;
  padding-right: 22px;
  opacity: 0;
  transition: opacity 0.4s var(--ease), transform 0.5s cubic-bezier(0.7, 0, 0.2, 1);
  transform: translateY(60%);
}
.mq-row.is-active {
  opacity: 1;
  transform: translateY(0);
}
.mq-row:not(.is-active) { transform: translateY(-60%); }

.mq-track[data-direction="left"] .mq-row {
  animation: scrollLeft 70s linear infinite;
}
.mq-track[data-direction="right"] .mq-row {
  animation: scrollRight 90s linear infinite;
}

@keyframes scrollLeft {
  0%   { translate: 0 0; }
  100% { translate: -50% 0; }
}
@keyframes scrollRight {
  0%   { translate: -50% 0; }
  100% { translate: 0 0; }
}

.mq:hover .mq-track .mq-row { animation-duration: 180s; }

/* ─── Cards ─── */
.mq-card {
  position: relative;
  flex-shrink: 0;
  width: 32vw;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(26,22,18,0.10);
  background: var(--mq-bg-deep);
  border-radius: 4px;
  box-shadow: 0 18px 40px -16px rgba(60,46,28,0.28);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.mq-card--small { width: 22vw; }
.mq-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Bright/clean — no darkening filter; let the photo breathe */
  filter: saturate(1.05) contrast(1.02);
  transition: filter 0.4s var(--ease), transform 0.6s var(--ease);
}
.mq-card:hover {
  border-color: var(--mq-accent);
  transform: scale(0.985);
  box-shadow: 0 24px 60px -16px rgba(60,46,28,0.4);
}
.mq-card:hover img {
  filter: saturate(1.15) contrast(1.05);
  transform: scale(1.04);
}

.mq-card figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 18px;
  background: linear-gradient(to top, rgba(26,22,18,0.62), transparent);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mq-card figcaption span {
  color: #fff;
  font-weight: 500;
  opacity: 0.85;
}

/* ─── Scrim — soft cream halo so type pops without washing out the photos ─── */
.mq-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 60% at 50% 50%, rgba(241,234,217,0.92) 0%, rgba(241,234,217,0.72) 30%, rgba(241,234,217,0.0) 70%),
    linear-gradient(180deg, rgba(241,234,217,0.6), rgba(241,234,217,0) 18%, rgba(241,234,217,0) 82%, rgba(241,234,217,0.78));
}

/* ─── Centre content ─── */
.mq-content {
  position: relative;
  z-index: 5;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  color: var(--mq-ink);
}

.mq-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  letter-spacing: 0.46em;
  color: var(--mq-ink-soft);
  margin-bottom: 28px;
  text-transform: uppercase;
}
.mq-eyebrow-rule {
  width: 38px; height: 1px;
  background: var(--mq-accent);
}

.mq-title {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--mq-ink);
  line-height: 0.95;
  text-shadow: 0 4px 22px rgba(241,234,217,0.6);
  margin-bottom: 38px;
}
.mq-title-1 {
  display: block;
  font-size: clamp(3rem, 7.5vw, 7rem);
  letter-spacing: -0.012em;
}
.mq-title-2 {
  display: block;
  font-size: clamp(2rem, 5vw, 4.4rem);
  font-weight: 300;
  letter-spacing: -0.005em;
  color: rgba(26,22,18,0.85);
  margin-top: 4px;
}
.mq-title-2 em {
  font-style: italic;
  color: var(--mq-accent);
}
.mq-title-3 {
  display: block;
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--mq-ink-soft);
}

/* Toggle */
.mq-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  background: rgba(255,253,247,0.78);
  border: 1px solid rgba(26,22,18,0.18);
  border-radius: 100px;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  margin-bottom: 32px;
  box-shadow: 0 6px 18px -8px rgba(60,46,28,0.25);
}
.mq-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 26px;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mq-ink-soft);
  border-radius: 100px;
  transition: all 0.35s var(--ease);
}
.mq-toggle-btn .mq-toggle-num {
  font-feature-settings: "tnum";
  color: var(--mq-ink-mute);
  font-size: 10px;
}
.mq-toggle-btn.is-active {
  background: var(--mq-ink);
  color: var(--mq-bg);
}
.mq-toggle-btn.is-active .mq-toggle-num { color: rgba(241,234,217,0.6); }

.mq-meta {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.4em;
  color: var(--mq-ink-mute);
  text-transform: uppercase;
}

/* Counter */
.mq-counter {
  position: absolute;
  bottom: 36px;
  right: 36px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 10px;
  letter-spacing: 0.36em;
  color: var(--mq-ink-soft);
  text-transform: uppercase;
}
.mq-counter-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 300;
  color: var(--mq-accent);
  letter-spacing: 0.04em;
}
.mq-counter-rule { width: 36px; height: 1px; background: var(--mq-line); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mq-track .mq-row { animation: none !important; transform: none; }
  .mq-card img, .mq-card { transition: none; }
  .mq-row:not(.is-active) { display: none; }
}

/* Responsive */
@media (max-width: 960px) {
  .mq-nav-links a:not(.mq-nav-cta):not([href^="tel"]) { display: none; }
  .mq-card { width: 56vw; }
  .mq-card--small { width: 38vw; }
  .mq-counter { bottom: 18px; right: 18px; }
  .mq-counter-num { font-size: 26px; }
}
@media (max-width: 480px) {
  .mq-bands { gap: 14px; padding: 100px 0 80px; }
  .mq-card { width: 75vw; }
  .mq-card--small { width: 50vw; }
  .mq-meta { flex-wrap: wrap; justify-content: center; }
}