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

.btn-gold-outline {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-ultra-wide);
  border: 1px solid;
  border-image: linear-gradient(135deg, hsl(var(--primary-gold-start)), hsl(var(--primary-gold-shine)), hsl(var(--primary-gold-end))) 1;
  background: linear-gradient(135deg,
    hsl(var(--primary-gold-start)) 0%,
    hsl(var(--primary-gold-shine)) 25%,
    hsl(var(--primary-gold-mid)) 50%,
    hsl(var(--primary-gold-shine)) 75%,
    hsl(var(--primary-gold-end)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.6s var(--ease-luxe);
}
.btn-gold-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    hsl(var(--primary-gold-start)) 0%,
    hsl(var(--primary-gold-shine)) 30%,
    hsl(var(--primary-gold-mid)) 60%,
    hsl(var(--primary-gold-end)) 100%);
  opacity: 0;
  transition: opacity 0.6s var(--ease-luxe);
  z-index: -1;
}
.btn-gold-outline::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, hsl(0 0% 100% / 0.12), transparent);
  transition: left 0.8s var(--ease-luxe);
  z-index: 1;
}
.btn-gold-outline:hover {
  -webkit-background-clip: padding-box;
  -webkit-text-fill-color: hsl(var(--background));
  background-clip: padding-box;
  color: hsl(var(--background));
  box-shadow: 0 4px 20px -4px hsl(var(--primary-gold-mid) / 0.35), 0 0 0 1px hsl(var(--primary-gold-shine) / 0.1);
  transform: translateY(-2px);
}
.btn-gold-outline:hover::before { opacity: 1; }
.btn-gold-outline:hover::after { left: 130%; }
.btn-gold-outline:active {
  transform: translateY(0px);
  box-shadow: 0 2px 10px -4px hsl(var(--primary-gold-mid) / 0.25);
  transition-duration: 0.15s;
}
.btn-gold-outline svg { position: relative; z-index: 2; }

.btn-gold-solid {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-ultra-wide);
  border: none;
  background: linear-gradient(160deg,
    hsl(var(--primary-gold-end)) 0%,
    hsl(var(--primary-gold-mid)) 30%,
    hsl(var(--primary-gold-shine)) 55%,
    hsl(var(--primary-gold-mid)) 80%,
    hsl(var(--primary-gold-end)) 100%);
  background-size: 200% 100%;
  background-position: 0% 0%;
  color: hsl(var(--background));
  box-shadow:
    0 1px 3px hsl(0 0% 0% / 0.3),
    0 4px 12px -2px hsl(var(--primary-gold-mid) / 0.25),
    inset 0 1px 0 hsl(var(--primary-gold-shine) / 0.35),
    inset 0 -1px 0 hsl(var(--primary-gold-end) / 0.3);
  transition: all 0.6s var(--ease-luxe);
  /* so the sheen/gloss below can sit at z-index -1, i.e. over the gradient but
     under the label -- without isolation they would paint on top of the text */
  isolation: isolate;
}
/* travelling sheen */
.btn-gold-solid::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent 20%, hsl(0 0% 100% / 0.18) 50%, transparent 80%);
  transition: left 0.8s var(--ease-luxe);
  pointer-events: none;
  z-index: -1;
}
.btn-gold-solid:hover::before { left: 130%; }
/* static top gloss */
.btn-gold-solid::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(hsl(0 0% 100% / 0.08), transparent 50%, hsl(0 0% 0% / 0.05));
  pointer-events: none;
  z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
  .btn-gold-solid::before, .btn-gold-solid:hover::before { transition: none; left: -120%; }
}
.btn-gold-solid:hover {
  background-position: 100% 0%;
  box-shadow:
    0 2px 6px hsl(0 0% 0% / 0.3),
    0 8px 32px -4px hsl(var(--primary-gold-mid) / 0.4),
    0 0 40px -8px hsl(var(--primary-gold-shine) / 0.15),
    inset 0 1px 0 hsl(var(--primary-gold-shine) / 0.4),
    inset 0 -1px 0 hsl(var(--primary-gold-end) / 0.3);
  transform: translateY(-2px);
}
.btn-gold-solid:active {
  transform: translateY(0px);
  background-position: 50% 0%;
  transition-duration: 0.15s;
}

/* Size variants -- the original scales these per placement rather than using
   one fixed padding everywhere. */
.btn-gold-outline--lg { padding: 1.25rem 3rem; gap: 0.75rem; }
.btn-gold-solid--xl { padding: 1.5rem 3.5rem; gap: 0.75rem; font-size: 11px; }
.btn-gold-solid--sm { padding: 0.75rem 1.5rem; }

/* ===== Navbar ===== */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transition: all 0.5s ease;
  background: transparent;
}
.site-header.is-scrolled {
  background: hsl(var(--background) / 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid hsl(var(--border) / 0.3);
}
.site-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5rem;
}
.site-logo img { height: 3rem; width: auto; }

.site-nav-desktop {
  display: none;
  align-items: center;
  gap: 1.75rem;
}
@media (min-width: 768px) { .site-nav-desktop { display: flex; } }
@media (min-width: 1024px) { .site-nav-desktop { gap: 2.5rem; } }

.site-nav-desktop a {
  font-size: 11px;
  letter-spacing: var(--tracking-ultra-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: hsl(var(--foreground) / 0.7);
  /* the original inherits the body leading here; `normal` shrank the header */
  line-height: 1.65;
  transition: color 0.5s ease;
}
.site-nav-desktop a:hover { color: hsl(var(--foreground)); }
.site-nav-desktop a.is-active { color: transparent; }
.site-nav-desktop a.is-active,
.site-nav-mobile a.is-active {
  background: linear-gradient(135deg, hsl(var(--primary-gold-start)) 0%, hsl(var(--primary-gold-shine)) 25%, hsl(var(--primary-gold-mid)) 50%, hsl(var(--primary-gold-shine)) 75%, hsl(var(--primary-gold-end)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 20px;
  height: 20px;
  color: hsl(var(--foreground));
}
@media (min-width: 768px) { .nav-toggle { display: none; } }

.site-nav-mobile {
  display: none;
  /* the panel sits inside .container-narrow but the original runs its surface
     edge-to-edge; the inner keeps the gutter so the links stay aligned */
  margin-inline: -1.5rem;
  background: hsl(var(--background));
  border-top: 1px solid hsl(var(--border) / 0.3);
  overflow: hidden;
}
.site-nav-mobile.is-open { display: block; }
@media (min-width: 768px) { .site-nav-mobile { display: none !important; } }
.site-nav-mobile-inner {
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.site-nav-mobile a {
  font-size: 12px;
  letter-spacing: var(--tracking-ultra-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: hsl(var(--foreground) / 0.7);
}

/* ===== Footer ===== */

.site-footer {
  position: relative;
  overflow: hidden;
  /* the original's footer text inherits the body's 1.5 leading; leaving these
     at `normal` shortened the footer by ~27px on every page */
  line-height: 1.5;
}
.site-footer-inner {
  padding-top: 7rem;
  padding-bottom: 3rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(12, 1fr); gap: 2rem; }
  .footer-col-brand { grid-column: span 5; }
  .footer-col-nav { grid-column: span 2 / span 2; grid-column-start: 7; }
  .footer-col-contact { grid-column: span 3; }
}
/* width:auto is required -- the <img> carries width/height attributes, so without
   it the logo renders at the attribute width and gets horizontally stretched. */
.footer-logo {
  display: inline-block;
  transition: opacity 0.4s var(--ease-luxe);
}
.footer-logo:hover { opacity: 0.82; }
.footer-logo img {
  height: 3.75rem;
  width: auto;
  margin-bottom: 2rem;
}
.footer-tagline {
  color: hsl(var(--muted-foreground) / 0.7);
  font-size: 13px;
  line-height: 1.8;
  max-width: 20rem;
}
.footer-social { display: flex; gap: 0.5rem; margin-top: 2.5rem; }
.footer-social a {
  position: relative;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid hsl(var(--border) / 0.2);
  display: flex; align-items: center; justify-content: center;
  color: hsl(var(--muted-foreground) / 0.5);
  /* the original hard-swaps to bg-gold on hover; only colour and border animate */
  transition: color 0.5s ease, border-color 0.5s ease;
}
.footer-social a:hover,
.footer-social a:focus-visible {
  color: hsl(var(--primary-foreground));
  border-color: transparent;
  background-image: linear-gradient(135deg, hsl(var(--primary-gold-start)), hsl(var(--primary-gold-shine)), hsl(var(--primary-gold-end)));
}
.footer-social a:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.footer-social svg { position: relative; z-index: 1; width: 0.875rem; height: 0.875rem; }

@media (prefers-reduced-motion: reduce) {
  .footer-social a { transition: none; }
}

.footer-heading {
  font-size: 10px;
  letter-spacing: var(--tracking-mega-wide);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 2rem;
}
.footer-nav-list { display: flex; flex-direction: column; gap: 1.25rem; }
.footer-nav-list a {
  font-size: 13px;
  color: hsl(var(--muted-foreground) / 0.6);
  transition: color 0.5s ease;
}
.footer-nav-list a:hover { color: hsl(var(--foreground)); }

.footer-contact-list { display: flex; flex-direction: column; gap: 1rem; font-size: 13px; color: hsl(var(--muted-foreground) / 0.6); }
.footer-contact-list a:hover { color: hsl(var(--foreground)); }
.footer-cta { margin-top: 2.5rem; }

.footer-bottom {
  border-top: 1px solid hsl(var(--border) / 0.15);
  margin-top: 6rem;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
@media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; } }
.footer-copyright {
  font-size: 11px;
  color: hsl(var(--muted-foreground) / 0.35);
  letter-spacing: 0.02em;
}
.footer-copyright a:hover { color: hsl(var(--primary)); }
.footer-legal-links { display: flex; gap: 2rem; }
.footer-legal-links a {
  font-size: 11px;
  color: hsl(var(--muted-foreground) / 0.35);
  letter-spacing: 0.02em;
  transition: color 0.5s ease;
}
.footer-legal-links a:hover { color: hsl(var(--muted-foreground) / 0.6); }

/* ===== WhatsApp widget ===== */

.whatsapp-widget {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  z-index: 50;
  display: block;
  border-radius: 9999px;
}
/* a filled gold disc that expands and fades, matching the original's animate-ping
   -- not an outline ring */
.whatsapp-ping {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: linear-gradient(135deg, hsl(var(--primary-gold-start)), hsl(var(--primary-gold-shine)), hsl(var(--primary-gold-end)));
  opacity: 0.3;
  animation: wa-ping 1s cubic-bezier(0,0,0.2,1) infinite;
  pointer-events: none;
}
.whatsapp-btn {
  position: relative;
  width: 4rem; height: 4rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, hsl(var(--primary-gold-start)), hsl(var(--primary-gold-shine)), hsl(var(--primary-gold-end)));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 25px 50px -12px hsl(var(--primary) / 0.3);
  transition: transform 0.3s ease;
}
.whatsapp-widget:hover .whatsapp-btn,
.whatsapp-widget:focus-visible .whatsapp-btn { transform: scale(1.1); }
.whatsapp-widget:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 4px; }
.whatsapp-btn svg { width: 2rem; height: 2rem; color: hsl(var(--primary-foreground)); }


@keyframes wa-ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .whatsapp-ping { animation: none; opacity: 0; }
  .whatsapp-btn { transition: none; }
  .whatsapp-widget:hover .whatsapp-btn { transform: none; }
}

/* ===== Section headings ===== */

/* The hero content column follows the chrome measure (1280px including its
   gutters), not the wider section measure, so it lines up with the navbar. */
.cine-hero > .container { max-width: 1280px; }

/* ===== Cinematic hero title =====
   Base heroes run 48px -> 72px. The home page's hero steps up to 88px at lg
   and pulls its leading in tighter (.is-xl). */
.cine-hero-title {
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: 0.025em;
  /* the original only tightens to a flat 1 once the title is big enough to
     carry it; at the 48px mobile size it keeps a little leading */
  line-height: 1.05;
  color: hsl(var(--foreground));
}
@media (min-width: 768px) {
  .cine-hero-title { font-size: 4.5rem; line-height: 1; }
}
@media (min-width: 1024px) {
  .cine-hero-title.is-xl { font-size: 5.5rem; }
}
.section-heading { margin-bottom: 5rem; }
.section-heading.is-center { text-align: center; }
.section-heading-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: var(--tracking-mega-wide);
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}
/* Hero eyebrows used a flat gold; every other eyebrow uses the gradient clip. */
.cine-hero-eyebrow {
  background: linear-gradient(135deg,
    hsl(var(--primary-gold-start)) 0%,
    hsl(var(--primary-gold-shine)) 25%,
    hsl(var(--primary-gold-mid)) 50%,
    hsl(var(--primary-gold-shine)) 75%,
    hsl(var(--primary-gold-end)) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  line-height: 1.5;
}
/*
 * Heading scale mirrors the original: the default tops out at 60px, `.is-md`
 * blocks stop at 48px, and the closing call-to-action steps up to 72px.
 */
.section-heading-title {
  font-size: 2.25rem;
  font-weight: 300;
  letter-spacing: 0.025em;
  line-height: 1;
}
@media (min-width: 768px) { .section-heading-title { font-size: 3rem; } }
@media (min-width: 1024px) { .section-heading-title { font-size: 3.75rem; } }

@media (min-width: 1024px) {
  .section-heading-title.is-md { font-size: 3rem; }
  .section-heading-title.is-xl { font-size: 4.5rem; }
}
.section-heading-desc {
  margin-top: 1.5rem;
  font-size: 15px;
  line-height: 1.7;
  max-width: 42rem;
  color: hsl(var(--muted-foreground));
}
.section-heading.is-center .section-heading-desc { margin-left: auto; margin-right: auto; }

/* ===== Pagination ===== */

.pagination-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 5rem;
}
.pagination-nav button, .pagination-nav a, .pagination-nav .page-ellipsis, .pagination-nav span[aria-disabled] {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: var(--tracking-ultra-wide);
  text-transform: uppercase;
  font-weight: 500;
}
.pagination-nav button, .pagination-nav a, .pagination-nav span[aria-disabled] {
  border: 1px solid hsl(var(--border) / 0.2);
  color: hsl(var(--muted-foreground));
  transition: all 0.5s ease;
  padding: 0 1rem;
}
.pagination-nav button:hover:not(:disabled), .pagination-nav a:hover {
  color: hsl(var(--foreground));
  border-color: hsl(var(--foreground) / 0.2);
}
.pagination-nav button:disabled, .pagination-nav span[aria-disabled] {
  opacity: 0.3;
  cursor: not-allowed;
}
.pagination-nav button.is-current, .pagination-nav a.is-current {
  border-color: transparent;
  padding: 0;
  color: hsl(var(--background));
}
.pagination-nav .page-ellipsis {
  color: hsl(var(--muted-foreground) / 0.4);
  font-size: 0.75rem;
}

/* ===== Lightbox ===== */

.atlas-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: hsl(var(--background) / 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  align-items: center;
  justify-content: center;
}
.atlas-lightbox.is-open { display: flex; }
.atlas-lightbox-close,
.atlas-lightbox-prev,
.atlas-lightbox-next {
  position: absolute;
  color: hsl(var(--foreground) / 0.7);
  width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.3s ease;
}
.atlas-lightbox-close:hover,
.atlas-lightbox-prev:hover,
.atlas-lightbox-next:hover { color: hsl(var(--primary)); }
.atlas-lightbox-close { top: 1.5rem; right: 1.5rem; }
.atlas-lightbox-prev { left: 1rem; }
.atlas-lightbox-next { right: 1rem; }
@media (min-width: 768px) {
  .atlas-lightbox-prev { left: 2rem; }
  .atlas-lightbox-next { right: 2rem; }
}
.atlas-lightbox-counter {
  position: absolute;
  top: 1.5rem; left: 1.5rem;
  font-size: 11px;
  letter-spacing: var(--tracking-ultra-wide);
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.atlas-lightbox-counter .current { color: hsl(var(--primary)); }
.atlas-lightbox-counter .sep { margin: 0 0.5rem; opacity: 0.4; }
.atlas-lightbox-counter .total { opacity: 0.6; }
.atlas-lightbox-stage {
  position: relative;
  max-width: 92vw;
  max-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.atlas-lightbox-stage img {
  max-width: 100%;
  max-height: 82vh;
  object-fit: contain;
}

/* ===== Testimonials ===== */

.testimonials-section { position: relative; padding: 11rem 1.5rem; overflow: hidden; }
@media (min-width: 1024px) { .testimonials-section { padding-left: 3rem; padding-right: 3rem; } }
.testimonials-track-viewport { overflow: hidden; }
.testimonials-track { display: flex; gap: 1.5rem; }
.testimonial-card {
  flex: 0 0 100%;
  min-width: 0;
}
@media (min-width: 768px) { .testimonial-card { flex: 0 0 calc(50% - 12px); } }
@media (min-width: 1024px) { .testimonial-card { flex: 0 0 calc(33.333% - 16px); } }
/* Trailing space so the last card can travel to the left edge like every other
   one. Without it the track stops with two columns still showing and the last
   cards can never become the current slide. Width = viewport - card - gap. */
.testimonials-track::after { content: ''; flex: 0 0 0; }
@media (min-width: 768px) { .testimonials-track::after { flex-basis: calc(50% - 12px); } }
@media (min-width: 1024px) { .testimonials-track::after { flex-basis: calc(66.666% - 8px); } }
.testimonial-card-inner {
  height: 100%;
  border: 1px solid hsl(var(--border) / 0.15);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  background: hsl(var(--card) / 0.6);
  transition: border-color 0.5s ease;
}
.testimonial-card-inner:hover { border-color: hsl(var(--primary) / 0.2); }
.testimonial-stars { display: flex; gap: 0.15rem; margin: 1rem 0; }
.testimonial-stars svg { width: 14px; height: 14px; color: hsl(var(--foreground)); stroke-width: 1; }
.testimonial-quote { font-size: 1.15rem; margin-bottom: 1rem; }
.testimonial-text {
  font-size: 13px;
  line-height: 1.8;
  color: hsl(var(--muted-foreground) / 0.7);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  overflow: hidden;
}
@media (min-width: 640px)  { .testimonial-text { -webkit-line-clamp: 6; } }
@media (min-width: 1024px) { .testimonial-text { -webkit-line-clamp: 5; } }
.testimonial-text.is-expanded { -webkit-line-clamp: unset; overflow: visible; }
.testimonial-readmore {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: hsl(var(--primary));
  margin-top: 0.75rem;
}
.testimonial-footer { margin-top: auto; padding-top: 1.5rem; border-top: 1px solid hsl(var(--border) / 0.1); }
.testimonial-name { font-size: 14px; font-weight: 500; }
.testimonial-meta { font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 0.25rem; }
.testimonials-controls { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 3rem; }
.testimonials-controls button {
  width: 3rem; height: 3rem;
  border: 1px solid hsl(var(--border) / 0.2);
  color: hsl(var(--muted-foreground) / 0.5);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s ease;
}
.testimonials-controls button:hover { border-color: hsl(var(--primary) / 0.4); color: hsl(var(--primary)); }
.testimonials-counter { font-size: 11px; letter-spacing: var(--tracking-ultra-wide); text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.testimonials-counter .current { color: hsl(var(--primary)); }

/* ===== Premium map ===== */

.premium-map { position: relative; }
.premium-map-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid hsl(var(--border) / 0.15);
  background: hsl(var(--surface-elevated));
}
@media (min-width: 768px) { .premium-map-frame { aspect-ratio: 21 / 9; } }
.premium-map-frame iframe {
  width: 100%; height: 100%; border: 0;
  filter: grayscale(1) contrast(1.15) brightness(0.4) saturate(0.6) hue-rotate(180deg);
}
.premium-map-wash {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom right, hsl(var(--primary) / 0.04), transparent, hsl(var(--primary) / 0.06));
  mix-blend-mode: overlay;
}
.premium-map-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 55%, hsl(var(--background) / 0.6) 100%);
}
.premium-map-pin-wrap { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.premium-map-pin-ring {
  position: absolute;
  top: -28px; left: -28px;
  width: 56px; height: 56px;
  border-radius: 9999px;
  background: hsl(var(--primary) / 0.5);
  animation: map-pulse-1 2.8s ease-in-out infinite;
}
.premium-map-pin-ring.ring-2 {
  top: -28px; left: -28px;
  animation: map-pulse-2 3.2s ease-in-out infinite 0.6s;
}
@keyframes map-pulse-1 { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(2.4); opacity: 0; } }
@keyframes map-pulse-2 { 0%, 100% { transform: scale(1); opacity: 0.3; } 50% { transform: scale(3.2); opacity: 0; } }
.premium-map-pin {
  position: relative;
  width: 3rem; height: 3rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, hsl(var(--primary-gold-start)), hsl(var(--primary-gold-shine)), hsl(var(--primary-gold-end)));
  display: flex; align-items: center; justify-content: center;
  animation: map-pin-drop 800ms var(--ease-luxe) 400ms both;
  box-shadow: 0 8px 20px -6px hsl(0 0% 0% / 0.5);
}
.premium-map-pin svg { width: 1.25rem; height: 1.25rem; color: hsl(var(--primary-foreground)); }
@keyframes map-pin-drop { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.premium-map-card {
  position: absolute;
  bottom: 1.5rem; left: 1.5rem; right: 1.5rem;
  max-width: 24rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: hsl(var(--background) / 0.85);
  border: 1px solid hsl(var(--border) / 0.3);
  padding: 2rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s var(--ease-luxe) 0.2s, transform 0.9s var(--ease-luxe) 0.2s;
}
.premium-map-card.is-visible { opacity: 1; transform: translateY(0); }
@media (min-width: 768px) { .premium-map-card { right: auto; } }
.premium-map-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
@media (min-width: 768px) { .premium-map-card h3 { font-size: 1.5rem; } }
.premium-map-card p { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
.premium-map-directions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  font-size: 10px;
  letter-spacing: var(--tracking-ultra-wide);
  text-transform: uppercase;
  font-weight: 600;
  color: hsl(var(--primary));
  transition: color 0.3s ease;
}
.premium-map-directions:hover { color: hsl(var(--foreground)); }

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

.atlas-form-field {
  width: 100%;
  height: 3.5rem;
  background: hsl(var(--surface-elevated));
  border: 1px solid hsl(var(--border) / 0.2);
  color: hsl(var(--foreground));
  padding: 0.5rem 0.75rem;
  font-size: 14px;
  font-family: var(--font-sans);
  transition: border-color 0.3s ease;
}
textarea.atlas-form-field { height: auto; padding: 0.75rem; }
.atlas-form-field::placeholder { color: hsl(var(--muted-foreground) / 0.4); }
/* Ring is drawn outside the field on the page background, matching the original. */
.atlas-form-field:focus {
  outline: none;
  border-color: hsl(var(--primary) / 0.3);
  box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--primary));
}
textarea.atlas-form-field { resize: none; }
.atlas-form-row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .atlas-form-row.is-split { grid-template-columns: 1fr 1fr; } }
.atlas-form-status {
  margin-top: 1rem;
  font-size: 13px;
  padding: 0.9rem 1.1rem;
  border: 1px solid hsl(var(--border));
  display: none;
}
.atlas-form-status.is-success { display: block; border-color: hsl(var(--primary) / 0.4); color: hsl(var(--foreground)); }
.atlas-form-status.is-error { display: block; border-color: hsl(var(--destructive) / 0.5); color: hsl(var(--foreground)); }

/* ===== Accordion (native <details>) ===== */

.atlas-accordion-item {
  border-bottom: 1px solid hsl(var(--border) / 0.2);
}
.atlas-accordion-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-serif);
  font-size: 1.15rem;
}
.atlas-accordion-item summary::-webkit-details-marker { display: none; }
.atlas-accordion-item summary .accordion-num {
  font-size: 13px;
  color: hsl(var(--foreground) / 0.9);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  letter-spacing: normal;
  margin-right: 1.5rem;
}
.atlas-accordion-item summary .accordion-icon {
  flex-shrink: 0;
  color: hsl(var(--muted-foreground) / 0.4);
  transition: transform 0.5s var(--ease-luxe), color 0.5s var(--ease-luxe);
}
/* Chevron flips rather than a plus rotating into an x. */
.atlas-accordion-item[open] summary .accordion-icon { transform: rotate(180deg); }
.atlas-accordion-item summary:hover .accordion-icon,
.atlas-accordion-item[open] summary .accordion-icon { color: hsl(var(--primary)); }

.atlas-accordion-item summary .accordion-title { transition: color 0.5s var(--ease-luxe); }
/* the original golds the title on hover only — an open row stays at foreground */
.atlas-accordion-item summary:hover .accordion-title { color: hsl(var(--primary)); }

.atlas-accordion-item .accordion-body {
  padding: 0 0 1.75rem;
  font-size: 14px;
  line-height: 1.9;
  max-width: 36rem;
  color: hsl(var(--muted-foreground) / 0.7);
}

/* ===== Article content (blog body) ===== */

.article-content { font-size: 1.1rem; }
.article-content > * + * { margin-top: 1.75rem; }
.article-content p {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.35rem;
  line-height: 1.6;
  color: hsl(var(--foreground) / 0.9);
}
@media (min-width: 768px) { .article-content p { font-size: 1.5rem; } }
.article-content h2 {
  font-size: 1.9rem;
  font-weight: 300;
  margin-top: 3rem;
}
@media (min-width: 768px) { .article-content h2 { font-size: 2.25rem; } }
.article-content h3 {
  font-size: 1.6rem;
  font-weight: 400;
  margin-top: 2.5rem;
}
.article-content blockquote {
  border-left: 2px solid transparent;
  border-image: linear-gradient(180deg, hsl(var(--primary-gold-start)), hsl(var(--primary-gold-end))) 1;
  padding-left: 2rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.875rem;
  font-weight: 300;
  line-height: 1.2;
  color: hsl(var(--foreground));
  margin: 4rem 0;
}
.article-content blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.article-content figure { margin: 3.5rem -1rem; }
@media (min-width: 768px) { .article-content figure { margin-left: -3rem; margin-right: -3rem; } }
.article-content figure img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.article-content figcaption {
  text-align: center;
  font-size: 11px;
  letter-spacing: var(--tracking-ultra-wide);
  text-transform: uppercase;
  color: hsl(var(--muted-foreground) / 0.7);
  margin-top: 1rem;
}

/* ---- Everything else an author can insert ----------------------------------
   The seeded articles only ever used paragraphs, headings, quotes and figures,
   so nothing below had styling. A client writing a normal post reaches for
   lists and links immediately. Gutenberg's own class names are matched
   alongside the bare tags, so it reads the same whether the markup came from
   the block editor or was pasted in. */

.article-content h4 {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.35;
  margin-top: 2.25rem;
  color: hsl(var(--foreground));
}

.article-content ul,
.article-content ol {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: 1.35rem;
  line-height: 1.6;
  color: hsl(var(--foreground) / 0.9);
  padding-left: 1.5rem;
  margin-top: 1.75rem;
}
@media (min-width: 768px) {
  .article-content ul,
  .article-content ol { font-size: 1.5rem; }
}
.article-content ul { list-style: none; padding-left: 0; }
.article-content ul > li { position: relative; padding-left: 2rem; }
/* a short gold rule instead of a bullet, matching the scope list on projects */
.article-content ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 12px;
  height: 1px;
  background: linear-gradient(90deg, hsl(var(--primary-gold-start)), hsl(var(--primary-gold-end)));
}
.article-content ol { list-style: decimal; }
.article-content ol > li::marker {
  color: hsl(var(--primary) / 0.8);
  font-size: 0.85em;
}
.article-content li + li { margin-top: 0.75rem; }
.article-content li > ul,
.article-content li > ol { margin-top: 0.75rem; font-size: 0.9em; }

.article-content a:not([class]) {
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  text-decoration-color: hsl(var(--primary) / 0.4);
  transition: text-decoration-color 0.4s ease, color 0.4s ease;
}
.article-content a:not([class]):hover {
  color: hsl(var(--primary-gold-shine));
  text-decoration-color: hsl(var(--primary));
}

.article-content strong, .article-content b { font-weight: 500; color: hsl(var(--foreground)); }
.article-content em, .article-content i { font-style: italic; }

.article-content hr,
.article-content .wp-block-separator {
  border: 0;
  height: 1px;
  background: hsl(var(--border) / 0.4);
  margin: 3.5rem 0;
}
.article-content .wp-block-separator.is-style-wide { width: 100%; }

.article-content table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  margin-top: 2.5rem;
}
.article-content th,
.article-content td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid hsl(var(--border) / 0.3);
  text-align: left;
  vertical-align: top;
}
.article-content th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-ultra-wide);
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.article-content td { color: hsl(var(--foreground) / 0.85); }
/* a table is the one thing likely to be wider than the measure */
.article-content .wp-block-table { overflow-x: auto; }

.article-content code,
.article-content .wp-block-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  background: hsl(var(--surface-elevated));
  border: 1px solid hsl(var(--border) / 0.3);
  border-radius: 2px;
  padding: 0.15em 0.4em;
}
.article-content .wp-block-code { display: block; padding: 1.25rem; overflow-x: auto; }

/* Block editor wrappers that carry their own margins */
.article-content .wp-block-image { margin: 3.5rem -1rem; }
@media (min-width: 768px) {
  .article-content .wp-block-image { margin-left: -3rem; margin-right: -3rem; }
}
.article-content .wp-block-image img { width: 100%; height: auto; }
/* an author-chosen crop should win over the 16/9 default above */
.article-content .wp-block-image.is-style-default img { aspect-ratio: auto; }
.article-content .wp-block-quote { margin: 4rem 0; }
.article-content .wp-block-quote cite { display: block; }
.article-content .wp-block-embed,
.article-content .wp-block-video { margin: 3rem 0; }
.article-content .wp-block-embed iframe,
.article-content .wp-block-video video { width: 100%; aspect-ratio: 16 / 9; height: auto; }
.article-content .aligncenter { margin-left: auto; margin-right: auto; text-align: center; }
.article-content .alignwide { margin-left: -3rem; margin-right: -3rem; }
@media (max-width: 767px) { .article-content .alignwide { margin-left: -1rem; margin-right: -1rem; } }

.article-faq, .article-cta {
  padding: 3rem 2rem;
  margin: 3.5rem 0;
}
@media (min-width: 768px) { .article-faq, .article-cta { padding: 4rem; } }
.article-faq { background: hsl(var(--surface-elevated)); }
.article-cta { background: hsl(var(--surface-sunken)); text-align: center; }
.article-block-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: var(--tracking-mega-wide);
  text-transform: uppercase;
  color: hsl(var(--primary));
  margin-bottom: 1rem;
  font-family: var(--font-sans);
}
.article-faq h3, .article-cta h3 { font-size: 1.75rem; font-weight: 300; margin-bottom: 1.5rem; }
/* outranks `.article-content p` on specificity rather than with !important, so a
   page-scoped rule can still refine it */
.article-content .article-cta p,
.article-cta p { font-family: var(--font-sans); font-size: 15px; color: hsl(var(--muted-foreground)); margin-bottom: 1.75rem; }
@media (min-width: 768px) {
  .article-content .article-cta p,
  .article-cta p { font-size: 1rem; }
}

/* ===== Tags ===== */

.article-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.article-tags span {
  border: 1px solid hsl(var(--border) / 0.3);
  padding: 0.4rem 1rem;
  font-size: 11px;
  color: hsl(var(--muted-foreground));
}

/* ===== Icons (inline svg sizing helper) ===== */
.icon { display: inline-block; vertical-align: middle; stroke: currentColor; fill: none; stroke-width: 1.5; }
/* brand logos and the WhatsApp mark are solid glyphs, not outline strokes --
   the rule above beats their fill="currentColor" attribute and hollows them */
.icon--solid { stroke: none; fill: currentColor; }
.icon[hidden] { display: none; }

/* FAQ answers sit inside .article-content but are UI copy, not article body. */
.article-content .accordion-body p {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  color: hsl(var(--muted-foreground));
  margin: 0;
}