@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@600;700;800&family=Playfair+Display:wght@400;500;600&display=swap");

/* Defensive rule: elements like .contact-form declare their own `display`
   (grid/flex), which otherwise silently overrides the browser's default
   handling of the `hidden` attribute. Without this, setting el.hidden = true
   in JS (e.g. the contact form success/error toggle) has no visual effect. */
[hidden] {
  display: none !important;
}

:root {
  --font-heading: "Montserrat", "Inter", Arial, sans-serif;
  --font-body: "Inter", "Lato", Arial, sans-serif;
  --font-hero-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --text-xs: 0.78rem;
  --text-sm: 0.9rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.35rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.35rem;
  --text-3xl: 3.25rem;
  --text-hero: clamp(2.5rem, 4vw, 4rem);
  --line-tight: 1.05;
  --line-heading: 1.12;
  --line-body: 1.65;
  --vpg-navy: #253A72;
  --vpg-deep-navy: #172F49;
  --vpg-gold: #F7C52B;
  --vpg-dark-gold: #C8882F;
  --vpg-white: #FFFFFF;
  --vpg-sand: #D8C7AC;
  --vpg-muted-teal: #5F9993;
  --vpg-charcoal: #24313F;
  --vpg-border: rgba(37, 58, 114, 0.16);
  --vpg-shadow: 0 18px 45px rgba(23, 47, 73, 0.18);
  --ink: var(--vpg-charcoal);
  --navy: var(--vpg-navy);
  --teal: var(--vpg-muted-teal);
  --sand: var(--vpg-sand);
  --warm: rgba(216, 199, 172, 0.22);
  --white: var(--vpg-white);
  --muted: #66727d;
  --line: var(--vpg-border);
  --shadow: var(--vpg-shadow);
  --radius: 6px;
  --max: 1180px;
  --header-height: 104px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Belt-and-suspenders: whenever anything scrolls a section into view
   (anchor links, in-page find, accessibility tools), stop with clearance
   below the sticky header instead of landing underneath it. */
section {
  scroll-margin-top: calc(var(--header-height) + 24px);
  position: relative;
}

.page-hero {
  position: relative;
}

body {
  margin: 0;
  background: var(--vpg-white);
  color: var(--vpg-charcoal);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--line-body);
}

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

a {
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.container {
  width: min(100% - 32px, var(--max));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  min-height: var(--header-height);
  padding: 0 clamp(24px, 4vw, 64px);
  background: var(--vpg-navy);
  border-bottom: 1px solid rgba(247, 197, 43, 0.32);
  backdrop-filter: blur(14px);
}

.brand {
  display: inline-flex;
  align-items: center;
  height: 100%;
  gap: 12px;
  text-decoration: none;
  font-weight: 700;
  color: var(--vpg-navy);
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--vpg-sand);
  border-radius: 50%;
  color: var(--vpg-navy);
  font-size: 0.82rem;
  letter-spacing: 0;
}

.brand-name {
  font-size: clamp(1rem, 2vw, 1.2rem);
}

.brand-logo {
  width: auto;
  height: 70px;
  max-height: 70px;
  object-fit: contain;
}

.footer-logo {
  height: 60px;
  max-height: 60px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 36px);
  margin-left: auto;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
}

.site-nav a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.82);
}

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

/* Homepage-only: header floats transparently over the hero photo instead
   of sitting on top of it as a solid bar, then solidifies once the user
   scrolls past the hero (toggled via .is-solid in main.js). */
.site-header--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* fully transparent: the header has no tint layer of its own, so the
     hero's single gradient overlay (see .hero background) shows straight
     through with zero seam between the header and the photo below it */
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
  transition: background 220ms ease, box-shadow 220ms ease;
}

.site-header--overlay.is-solid {
  position: fixed;
  background: var(--vpg-navy);
  border-bottom: 1px solid rgba(247, 197, 43, 0.32);
  box-shadow: 0 12px 28px rgba(23, 47, 73, 0.18);
  backdrop-filter: blur(14px);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(247, 197, 43, 0.42);
  border-radius: var(--radius);
  background: transparent;
}

.nav-toggle-line {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px auto;
  background: var(--vpg-white);
}

.hero {
  position: relative;
  min-height: auto;
  display: grid;
  align-items: center;
  overflow: hidden;
  /* header is an absolutely-positioned overlay here (see .site-header--overlay),
     so the hero itself must clear the header height, plus a bit extra so the
     headline doesn't sit right at the seam between the header's scrim and the
     hero's own darker overlay */
  padding-top: calc(var(--header-height) + clamp(32px, 3.8vw, 56px));
  padding-bottom: clamp(40px, 4.8vw, 64px);
  /* lighter wash than before -- lets the photo breathe warm and visible for
     a calmer, less "corporate banner" feel; text-shadow on the copy below
     picks up the slack */
  background:
    linear-gradient(135deg, rgba(23, 47, 73, 0.52), rgba(37, 58, 114, 0.4)),
    url("../img/home-hero-puerto-vallarta.jpg") center center / cover no-repeat;
  color: var(--vpg-white);
}

.hero::before,
.hero::after {
  display: none;
  content: none;
}

.hero-image,
.hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.hero-image {
  object-fit: cover;
}

.hero-overlay {
  background: linear-gradient(90deg, rgba(13, 31, 49, 0.78), rgba(13, 31, 49, 0.4) 50%, rgba(13, 31, 49, 0.15));
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(100% - 48px, 1250px);
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 0;
  text-align: center;
}

.eyebrow,
.hero-eyebrow {
  margin: 0 0 12px;
  color: var(--vpg-gold);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--line-heading);
  color: var(--vpg-navy);
}

.hero h1,
.hero .hero-title {
  max-width: 1150px;
  margin: 0 auto;
  color: var(--vpg-white);
  /* Elegant serif display face for the homepage hero only -- everything
     else on the site keeps the Montserrat/Inter system untouched.
     Font size is tuned (not the larger size often used for display serifs)
     specifically so "Boutique Real Estate, Property Management &" reliably
     fits on one line above the forced <br> in the markup, at ordinary
     desktop widths -- a literal 5.5rem serif headline would wrap to 3+
     lines here despite the narrower letterforms. */
  font-family: var(--font-hero-display);
  font-size: clamp(2.75rem, 4.1vw, 3.85rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 18px rgba(13, 31, 49, 0.35);
}

.hero-copy,
.hero .hero-subtitle {
  max-width: 620px;
  margin: 22px auto 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.02rem, 1.2vw, 1.2rem);
  line-height: var(--line-body);
  text-shadow: 0 1px 12px rgba(13, 31, 49, 0.3);
}

/* Deliberately understated -- a single quiet credential line, not a list of
   the same three phrases used as headings in "Why Vallarta Property Group"
   further down the page. */
.hero-trust {
  max-width: 560px;
  margin: 18px auto 0;
  color: rgba(255, 255, 255, 0.62);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(13, 31, 49, 0.25);
}

/* Subtle staggered fade-in for the hero content only -- opacity + a small
   upward drift, nothing flashy. */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero .eyebrow,
.hero h1,
.hero-copy,
.hero-trust,
.hero-cta-row {
  opacity: 0;
  animation: heroFadeIn 1000ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero .eyebrow {
  animation-delay: 100ms;
}

.hero h1 {
  animation-delay: 260ms;
}

.hero-copy {
  animation-delay: 430ms;
}

.hero-trust {
  animation-delay: 560ms;
}

.hero-cta-row {
  animation-delay: 700ms;
}

/* Reusable fade-in utilities -- same keyframe/easing/duration as the
   homepage hero above, so interior page heroes animate identically.
   Usage: add "fade-in" plus one "fade-delay-N" to any hero element. */
.fade-in {
  opacity: 0;
  animation: heroFadeIn 1000ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.fade-delay-1 {
  animation-delay: 100ms;
}

.fade-delay-2 {
  animation-delay: 280ms;
}

.fade-delay-3 {
  animation-delay: 460ms;
}

.fade-delay-4 {
  animation-delay: 620ms;
}

@media (prefers-reduced-motion: reduce) {
  .hero .eyebrow,
  .hero h1,
  .hero-copy,
  .hero-trust,
  .hero-cta-row,
  .fade-in {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.button-row,
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero-cta-row {
  align-items: center;
  justify-content: center;
  margin-top: 26px;
}

.hero-text-link {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  color: var(--vpg-white);
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 197, 43, 0.72);
}

.hero-text-link:hover {
  color: var(--vpg-gold);
}

.button,
.btn,
.cta-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0.85rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 4px;
  font-family: var(--font-heading);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}

button {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  background: var(--vpg-gold);
  color: var(--vpg-navy);
  border-color: var(--vpg-gold);
}

.button-primary:hover {
  background: var(--vpg-dark-gold);
  border-color: var(--vpg-dark-gold);
  color: var(--vpg-white);
}

.button-light {
  background: var(--vpg-white);
  color: var(--vpg-navy);
  border-color: var(--vpg-navy);
}

.button-light:hover {
  background: var(--vpg-navy);
  color: var(--vpg-white);
}

.button-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.72);
  color: var(--vpg-white);
}

.button-ghost:hover {
  background: var(--vpg-white);
  border-color: var(--vpg-white);
  color: var(--vpg-navy);
}

.button-outline {
  background: var(--vpg-white);
  border-color: var(--vpg-navy);
  color: var(--vpg-navy);
}

.button-outline:hover {
  background: var(--vpg-navy);
  color: var(--vpg-white);
}

.btn-primary {
  background: var(--vpg-gold);
  color: var(--vpg-navy);
  border: 1px solid var(--vpg-gold);
}

.btn-primary:hover {
  background: var(--vpg-dark-gold);
  border-color: var(--vpg-dark-gold);
  color: var(--vpg-white);
}

.btn-secondary {
  background: var(--vpg-white);
  color: var(--vpg-navy);
  border: 1px solid var(--vpg-navy);
}

.btn-secondary:hover {
  background: var(--vpg-navy);
  color: var(--vpg-white);
}

.home-action-tabs {
  width: min(100%, 760px);
  margin-top: 42px;
}

.home-action-tab-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.home-action-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.95rem 1.35rem;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  color: var(--vpg-white);
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.home-action-tab:hover,
.home-action-tab:focus-visible {
  transform: translateY(-1px);
  border-color: var(--vpg-gold);
  outline: none;
}

.home-action-tab.active {
  background: var(--vpg-gold);
  border-color: var(--vpg-gold);
  color: var(--vpg-navy);
  box-shadow: var(--vpg-shadow);
}

.home-action-panel {
  margin-top: 16px;
  padding: clamp(22px, 4vw, 34px);
  background: rgba(255, 255, 255, 0.96);
  color: var(--vpg-charcoal);
  border: 1px solid var(--vpg-border);
  border-radius: var(--radius);
  box-shadow: var(--vpg-shadow);
  backdrop-filter: blur(10px);
}

.home-action-panel.active {
  animation: homePanelIn 260ms ease both;
}

.home-action-panel h2 {
  max-width: 680px;
  color: var(--vpg-navy);
  font-size: var(--text-2xl);
}

.home-action-panel h3 {
  color: var(--vpg-navy);
}

.home-action-panel p {
  max-width: 700px;
  margin: 14px 0 0;
  color: var(--vpg-charcoal);
  font-size: 1.02rem;
}

.panel-actions {
  margin-top: 24px;
}

@keyframes homePanelIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section {
  padding: clamp(48px, 6vw, 84px) 0;
}

/* Tighten the gap between a hero and the section that follows it,
   so pages feel vertically connected instead of airy/disconnected. */
.hero + .section,
.page-hero + .section {
  padding-top: clamp(24px, 3vw, 44px);
}

/* Contact page specifically: pull the form even closer to the intro. */
.contact-hero + .section {
  padding-top: clamp(8px, 1.5vw, 20px);
}

.intro-section {
  background: var(--vpg-white);
}

.two-column,
.split-content,
.contact-grid,
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: start;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1fr);
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
  width: min(100% - 32px, var(--max));
  max-width: var(--max);
  margin: 0 auto;
}

.two-column h2,
.split-content h2,
.section-heading h2,
.cta-panel h2 {
  font-size: clamp(var(--text-2xl), 3.4vw, 2.9rem);
  font-weight: 600;
}

.rich-text p,
.two-column p,
.split-content p,
.page-hero p,
.page-hero .hero-subtitle,
.cta-panel p {
  color: var(--muted);
  font-size: var(--text-md);
  line-height: var(--line-body);
}

.page-hero p,
.page-hero .hero-subtitle {
  max-width: 680px;
}

.text-link {
  display: inline-flex;
  margin-top: 12px;
  color: var(--vpg-navy);
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: var(--vpg-gold);
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}

.service-paths {
  background: rgba(216, 199, 172, 0.12);
}

.section-heading {
  max-width: 760px;
  margin-bottom: 34px;
}

.section-heading p:not(.eyebrow) {
  max-width: 760px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: var(--text-md);
  line-height: var(--line-body);
}

.section-heading.narrow {
  max-width: 820px;
}

/* Editorial "How We Help": three equal service blocks -- same image
   treatment, same copy length, same CTA style, no service visually
   dominating the others. */
.service-grid-equal {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(32px, 4vw, 48px);
}

/* Reusable image-card system -- fixed, editorial height instead of letting
   raw photo dimensions drive the box, so cards read as refined/boutique
   rather than oversized. .service-card / .image-card are provided as
   general-purpose aliases alongside the structural .service-support img
   selector already applied across the homepage service cards. */
.service-support img,
.service-card img,
.image-card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(23, 47, 73, 0.1);
  margin-bottom: 22px;
}

.approach-item h3,
.contact-card h2 {
  font-size: var(--text-lg);
}

.service-support-body h3 {
  font-size: var(--text-lg);
}

.approach-item p,
.service-support-body p {
  color: var(--muted);
}

.service-support-body p {
  margin: 12px 0 0;
}

.service-support-body .text-link {
  margin-top: 18px;
}

/* Elevated philosophy statement -- sits right after the hero, left-aligned
   and offset (not centered) for an editorial, asymmetric feel. No card,
   just a soft tint band and generous padding to signal it matters. */
.hospitality-section {
  background: rgba(216, 199, 172, 0.13);
  padding: clamp(64px, 8vw, 116px) 0;
}

.hospitality-content {
  max-width: 640px;
  text-align: left;
}

.hospitality-content h2 {
  margin: 10px 0 0;
  max-width: 560px;
  font-size: clamp(var(--text-2xl), 3.4vw, 2.85rem);
  font-weight: 600;
}

.hospitality-content p {
  margin: 20px 0 0;
  max-width: 580px;
  color: var(--muted);
  font-size: var(--text-md);
  line-height: var(--line-body);
}

/* Refined trust section supporting the Property Management flagship --
   short gold accent rules instead of bullets/numbers/cards. */
.standards-section {
  background: var(--vpg-white);
}

.standards-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 48px);
  margin-top: 8px;
}

.standards-item::before {
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  margin-bottom: 16px;
  background: var(--vpg-gold);
}

.standards-item h3 {
  font-size: var(--text-lg);
}

.standards-item p {
  margin: 10px 0 0;
  color: var(--muted);
}

.approach-section {
  background: var(--vpg-white);
}

/* "Why Vallarta Property Group" cards -- fixed image height (not
   aspect-ratio-derived) so all three cards align on the same row
   regardless of each source photo's native dimensions. .why-grid /
   .feature-grid / .values-grid are provided as general-purpose aliases
   alongside the structural .approach-grid selector already applied here. */
.approach-grid,
.why-grid,
.feature-grid,
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 32px);
  align-items: start;
  background: transparent;
  border: 0;
}

/* Editorial treatment: image + text, no bordered/shadowed card container. */
.approach-item,
.why-card,
.feature-card,
.value-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.approach-item img,
.why-card img,
.feature-card img,
.value-card img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
  display: block;
}

.approach-item-body,
.why-card-content,
.feature-card-content,
.value-card-content {
  padding-top: clamp(20px, 2.5vw, 28px);
}

.cta-section {
  padding-top: 0;
}

.cta-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: clamp(28px, 5vw, 54px);
  background: rgba(216, 199, 172, 0.18);
  border-radius: var(--radius);
}

.cta-panel > div:first-child {
  max-width: 700px;
}

.page-hero {
  /* Extra safety margin below the sticky header on interior pages -- the
     header already reserves its own space in normal flow (it's sticky, not
     overlay/fixed, here), but this keeps a generous, unmistakable gap. */
  padding: clamp(44px, 5vw, 68px) 0 clamp(32px, 4vw, 52px);
  background: linear-gradient(180deg, rgba(216, 199, 172, 0.2), var(--vpg-white));
}

.page-hero h1,
.page-hero .hero-title {
  max-width: 720px;
  /* Same serif display system as the homepage hero, so interior pages read
     as the same brand rather than a heavier sans-serif "product page". */
  font-family: var(--font-hero-display);
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

/* Editorial, fixed-height crop for hero side images -- deliberately shorter
   than the raw source photos so they read as refined and boutique rather
   than oversized. .page-hero-image / .feature-image are provided as
   general-purpose aliases alongside the structural .page-hero img selector
   already applied across every interior page hero. */
.page-hero img,
.page-hero-image img,
.feature-image img {
  width: 100%;
  max-width: 500px;
  justify-self: center;
  height: 460px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(23, 47, 73, 0.1);
}

/* Portrait-sourced photos (consulting, real estate, about) now share the
   same fixed-height editorial crop as landscape photos, rather than
   preserving their full tall aspect ratio -- an intentional, tighter crop
   instead of a full-height raw photo. */
.page-hero img.is-portrait {
  max-width: 460px;
  height: 460px;
}

/* Property Management pool photo -- favor the pool/loungers over the plain
   sky filling the top of the frame. */
.page-hero img[src*="management-main"] {
  object-position: center 60%;
}

/* Hospitality Consulting statue photo -- the child in the foreground reads
   too prominently at a shorter crop height, so the focal point shifts
   right and up toward the statue, hat, and chessboard instead. */
.page-hero img[src*="consulting-main"] {
  object-position: 78% 35%;
}

/* Plain, flowing bullet list (no per-item boxes) so the list reads as
   continuous text rather than a stack of blocky cards. */
.check-list {
  display: grid;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 26px;
  color: var(--vpg-charcoal);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--line-body);
}

.check-list li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--vpg-gold);
}

.warm-section {
  background: rgba(216, 199, 172, 0.18);
}

/* Fluid editorial list (replaces the old boxed "compact-grid" cards):
   hairline rule between rows instead of bordered/shadowed boxes. */
.editorial-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 clamp(40px, 5vw, 72px);
}

.editorial-item {
  padding: 26px 0;
  border-top: 1px solid var(--vpg-border);
}

.editorial-item:nth-child(1),
.editorial-item:nth-child(2) {
  border-top: none;
  padding-top: 0;
}

.editorial-item h3 {
  font-size: var(--text-lg);
}

.editorial-item p {
  margin: 10px 0 0;
  color: var(--muted);
}

.contact-card,
.form-shell {
  background: var(--vpg-white);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(23, 47, 73, 0.08);
}

.contact-card {
  padding: clamp(24px, 4vw, 38px);
}

.form-shell {
  padding: clamp(24px, 5vw, 48px);
}

.contact-form {
  display: grid;
  gap: 22px;
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

label {
  display: grid;
  gap: 8px;
  color: var(--vpg-navy);
  font-weight: 800;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--vpg-border);
  border-radius: var(--radius);
  padding: 14px 15px;
  color: var(--vpg-charcoal);
  font: inherit;
  background: var(--vpg-white);
}

textarea {
  resize: vertical;
}

.form-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.site-footer {
  padding: 56px 0 24px;
  background: var(--vpg-deep-navy);
  color: rgba(255, 255, 255, 0.82);
}

.footer-brand {
  color: var(--vpg-white);
}

.footer-brand .brand-mark {
  color: var(--vpg-white);
}

.footer-grid {
  align-items: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 18px 28px;
}

.footer-links a {
  color: var(--vpg-white);
  font-weight: 700;
  text-decoration: none;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  width: min(100% - 32px, var(--max));
  margin: 36px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.92rem;
}

/* Understated social links -- deliberately quieter than the primary nav
   links above and nowhere near the visual weight of the Contact/WhatsApp
   CTAs elsewhere on the page. Small icons, muted by default, gold on hover. */
.social-links {
  display: flex;
  align-items: center;
  gap: 14px;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: rgba(255, 255, 255, 0.55);
  transition: color 160ms ease;
}

.social-links a:hover {
  color: var(--vpg-gold);
}

.social-links svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.whatsapp-button {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 25;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #1f8f5f;
  color: var(--vpg-white);
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 16px 30px rgba(24, 34, 45, 0.22);
}

@media (max-width: 900px) {
  :root {
    --header-height: 86px;
  }

  .site-header {
    height: var(--header-height);
    min-height: var(--header-height);
    padding: 0 20px;
  }

  .brand-logo {
    height: 62px;
    max-height: 62px;
  }

  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: absolute;
    top: var(--header-height);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px 16px 18px;
    background: var(--vpg-navy);
    border-bottom: 1px solid rgba(247, 197, 43, 0.28);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    padding: 13px 8px;
  }

  .hero {
    min-height: auto;
    align-items: start;
  }

  .hero-content {
    padding-top: 0;
  }

  .two-column,
  .split-content,
  .page-hero-grid,
  .contact-grid,
  .footer-grid,
  .service-grid-equal,
  .editorial-grid,
  .standards-list {
    grid-template-columns: 1fr;
  }

  /* Tablet: "Why VPG" cards go to 2 columns rather than collapsing all the
     way to 1, per the requested responsive behavior. */
  .approach-grid,
  .why-grid,
  .feature-grid,
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .editorial-item:nth-child(2) {
    border-top: 1px solid var(--vpg-border);
    padding-top: 26px;
  }

  .cta-panel {
    display: grid;
  }

  .footer-links {
    justify-content: flex-start;
  }

  /* Tablet: shorter still than desktop, keeping the editorial crop
     consistent as the layout stacks to one column. */
  .page-hero img,
  .page-hero img.is-portrait,
  .page-hero-image img,
  .feature-image img {
    max-width: 100%;
    height: 400px;
  }

  .service-support img,
  .service-card img,
  .image-card img {
    height: 260px;
  }
}

/* ------------------------------------------------------------------ */
/* Rentals (Phase 1 — draft/development, not yet linked from live nav) */
/* Reuses existing tokens, card, button, and form patterns above —     */
/* no new colors, fonts, or layout primitives introduced.              */
/* ------------------------------------------------------------------ */

.rental-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(32px, 4vw, 48px);
}

.rental-card {
  display: flex;
  flex-direction: column;
}

.rental-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 22px;
}

.rental-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.rental-card-neighborhood {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.rental-card-details {
  margin: 10px 0 0;
  color: var(--vpg-navy);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.rental-card-body p:not(.rental-card-neighborhood):not(.rental-card-details) {
  margin: 14px 0 0;
  color: var(--muted);
}

.rental-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.rental-disclaimer,
.booking-disclaimer {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--vpg-border);
  color: var(--muted);
  font-size: 0.92rem;
}

/* Key facts row on individual rental pages — plain text with dot
   separators, same restrained treatment as .hero-trust, no badges
   or pills so it doesn't read as an OTA/booking-platform listing. */
.key-details-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 18px 0 0;
  color: var(--vpg-navy);
  font-family: var(--font-heading);
  font-size: 0.92rem;
  font-weight: 600;
}

.key-details-row span {
  position: relative;
  padding-left: 18px;
}

.key-details-row span:first-child {
  padding-left: 0;
}

.key-details-row span:first-child::before {
  content: none;
}

.key-details-row span::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--vpg-gold);
}

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

@media (max-width: 620px) {
  .rental-card-actions {
    flex-direction: column;
  }

  .rental-card-actions .button {
    width: 100%;
  }
}

@media (max-width: 620px) {
  .brand-name {
    max-width: 190px;
    line-height: 1.15;
  }

  .hero {
    min-height: auto;
  }

  .hero-overlay {
    display: none;
  }

  .hero h1,
  .hero .hero-title {
    font-size: clamp(2.35rem, 10vw, 3.5rem);
    line-height: 1.08;
    max-width: 100%;
  }

  .hero-copy {
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  }

  .page-hero h1,
  .page-hero .hero-title {
    font-size: clamp(2.35rem, 10vw, 3.5rem);
    line-height: 1.08;
    max-width: 100%;
  }

  .button-row,
  .cta-actions,
  .home-action-tab,
  .button {
    width: 100%;
  }

  .hero-text-link {
    width: 100%;
    justify-content: center;
  }

  .home-action-tab-list {
    gap: 10px;
  }

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

  .section {
    padding: 40px 0;
  }

  .hero + .section,
  .page-hero + .section {
    padding-top: 24px;
  }

  /* Mobile: shortest tier -- still a full-width editorial crop, not a
     tall raw photo. */
  .page-hero img,
  .page-hero img.is-portrait,
  .page-hero-image img,
  .feature-image img {
    height: 300px;
  }

  .service-support img,
  .service-card img,
  .image-card img {
    height: 220px;
  }

  /* Mobile: "Why VPG" cards stack to 1 column, image height stays within
     the 280-320px range rather than shrinking further like the other
     image tiers above. */
  .approach-grid,
  .why-grid,
  .feature-grid,
  .values-grid {
    grid-template-columns: 1fr;
  }

  .approach-item img,
  .why-card img,
  .feature-card img,
  .value-card img {
    height: 300px;
  }
}

/* ------------------------------------------------------------------ */
/* Vacation Rentals (direct-booking property pages) — additive only,   */
/* reuses existing tokens/colors/fonts/card patterns above. Draft/     */
/* noindex until launch; see vacation-rentals.html and                */
/* vacation-rentals/*.html for the "do not launch yet" notice.         */
/* ------------------------------------------------------------------ */

.rental-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 140px;
  gap: 12px;
}

.rental-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: 0 8px 20px rgba(23, 47, 73, 0.08);
}

.rental-gallery img:first-child {
  grid-column: span 2;
  grid-row: span 2;
}

.map-frame {
  position: relative;
  width: 100%;
  padding-top: 42%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(23, 47, 73, 0.08);
}

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

.rate-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

.draft-banner {
  background: var(--vpg-deep-navy);
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-sm);
  text-align: center;
  padding: 10px 16px;
}

.draft-banner strong {
  color: var(--vpg-gold);
}

@media (max-width: 720px) {
  .rental-gallery {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 160px;
  }

  .rental-gallery img:first-child {
    grid-column: span 2;
    grid-row: span 1;
    height: 260px;
  }

  .map-frame {
    padding-top: 70%;
  }
}