@charset "utf-8";

/* =================================================================
   3@1 PROPERTIES — STYLESHEET
   Contents:
   1.  Fonts
   2.  Custom properties (design tokens)
   3.  Modern CSS reset
   4.  Base / global element styles
   5.  Utilities (container, sr-only, buttons, eyebrow, icon)
   6.  Header + navigation
   7.  Hero
   8.  What Sets Us Apart
   9.  About / timeline
   10. Vision & Mission
   11. Area of Expertise
   12. Meet the Team
   13. Reviews / carousel
   14. Properties
   15. Footer + contact form
   16. Back to top
   17. WhatsApp button
   18. Reduced motion
   Breakpoints used throughout: 480 / 768 / 1024 / 1280
   ================================================================= */

/* ---------- 1. Fonts ----------
   Inter Variable — drop the two files described in /css/fonts/README.txt
   into that folder. Falls back to the system stack until then. */
@font-face {
  font-family: 'Inter';
  src: url('css/fonts/Inter-Variable.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('css/fonts/Inter-Italic-Variable.woff') format('woff');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- 2. Custom properties ---------- */
:root {
  /* Brand colors */
  --color-navy-900: #001237;
  --color-navy-800: #0B1E49;
  --color-navy-700: #172B5E;
  --color-gold-500: #D4B90E;
  --color-gold-600: #B39B0C;
  --color-gold-100: #FBF4D6;

  /* Neutrals */
  --color-white: #FFFFFF;
  --color-ink: #1A2036;
  --color-body: #454C61;
  --color-muted: #6B7185;
  --color-border: #E3E6ED;
  --color-surface: #F6F7FA;
  --color-surface-2: #EEF0F5;

  /* Area accents */
  --color-area-hartenbos: #B9552E;
  --color-area-grootbrak: #157A6B;
  --color-area-mosselbay: #0B6E8C;
  --color-area-pinnacle: #3F6B44;

  /* Feedback */
  --color-success: #1F8A57;
  --color-error: #C0392B;

  /* Floating WhatsApp button accent - previously WhatsApp's own green,
     now repointed to the same gold used for the button's border/ring
     (see section 17) so the badge reads as part of the site's navy/gold
     palette instead of introducing a one-off brand color. Kept as its
     own pair of variables, rather than replaced outright with
     --color-gold-500/600, because php/whatsapp-button.php (not part of
     this stylesheet) may reference --color-whatsapp directly for the
     badge icon's fill/stroke - repointing it here recolors that badge
     without needing to edit the include file itself. */
  --color-whatsapp: var(--color-gold-500);
  --color-whatsapp-dark: var(--color-gold-600);

  /* Listing status badges — Under Offer / Pending / Price Reduced.
     Independent from the navy/gold mandate badges above so the two
     can sit side by side without reading as the same kind of label.
     All three pair with white text at 5:1+ contrast (AA). */
  --color-status-offer: #95591A;
  --color-status-pending: #4B3B78;
  --color-status-reduced: #9C2B2B;

  /* Typography */
  --font-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --fs-xs: clamp(0.7813rem, 0.76rem + 0.11vw, 0.85rem);
  --fs-sm: clamp(0.875rem, 0.85rem + 0.13vw, 0.95rem);
  --fs-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-md: clamp(1.125rem, 1.06rem + 0.28vw, 1.3125rem);
  --fs-lg: clamp(1.375rem, 1.25rem + 0.55vw, 1.75rem);
  --fs-xl: clamp(1.75rem, 1.5rem + 1.1vw, 2.375rem);
  --fs-2xl: clamp(2.25rem, 1.85rem + 1.8vw, 3.25rem);
  --fs-3xl: clamp(2.75rem, 2rem + 3.3vw, 5rem);

  /* Spacing */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: clamp(3.5rem, 2.8rem + 3vw, 6.5rem);
  --space-3xl: clamp(4.5rem, 3.4rem + 5vw, 9rem);

  /* Layout */
  --container-max: 1280px;
  --container-padding: clamp(1.25rem, 1rem + 2vw, 3rem);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-full: 999px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0, 18, 55, 0.07), 0 1px 3px rgba(0, 18, 55, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(0, 18, 55, 0.18);
  --shadow-lg: 0 24px 48px -16px rgba(0, 18, 55, 0.28);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 150ms var(--ease);
  --t-base: 250ms var(--ease);
  --t-slow: 420ms var(--ease);
  --t-carousel: 1100ms var(--ease);

  /* Header */
  --header-height: 76px;
}

/* ---------- 3. Modern CSS reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html:focus-within { scroll-behavior: smooth; }
body { min-height: 100vh; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; text-align: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
p, h1, h2, h3, h4 { overflow-wrap: break-word; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }

/* ---------- 4. Base ---------- */
body {
  font-family: var(--font-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  color: var(--color-body);
  background: var(--color-white);
}

h1, h2, h3, h4 {
  color: var(--color-navy-900);
  font-weight: var(--fw-bold);
  line-height: 1.15;
}
h2 { font-size: var(--fs-2xl); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-md); }

a { transition: color var(--t-fast); }

:focus-visible {
  outline: 3px solid var(--color-gold-500);
  outline-offset: 3px;
  border-radius: 2px;
}

[id] { scroll-margin-top: calc(var(--header-height) + 12px); }

/* ---------- 5. Utilities ---------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-sm);
  z-index: 200;
  background: var(--color-navy-900);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold);
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--space-sm); }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-gold-600);
  margin-bottom: var(--space-xs);
	position: relative;
}
.eyebrow--on-dark { color: var(--color-gold-500); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.85em 1.75em;
  border-radius: var(--radius-full);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--accent {
  background: var(--color-gold-500);
  color: var(--color-navy-900);
  box-shadow: var(--shadow-sm);
}
.btn--accent:hover { background: var(--color-gold-600); box-shadow: var(--shadow-md); }
.btn--accent .icon { width: 1em; height: 1em; }

/* ---------- 6. Header ---------- */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 10000;
  background: var(--color-white);
  box-shadow: 0 1px 0 rgba(0, 18, 55, 0.06);
  transition: background-color var(--t-base), box-shadow var(--t-base);
}
.site-header.is-scrolled {
  background: var(--color-navy-900);
  box-shadow: var(--shadow-md);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
}

.site-header__logo { display: block; }
.logo-swap { position: relative; display: block; width: 130px; height: auto; aspect-ratio: 597.67 / 173.79; }
.logo-swap__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity var(--t-base);
}
.logo-swap__img--white { opacity: 0; }
.site-header.is-scrolled .logo-swap__img--dark { opacity: 0; }
.site-header.is-scrolled .logo-swap__img--white { opacity: 1; }

.site-nav { display: none; }

.menu-toggle {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  color: var(--color-navy-900);
  transition: color var(--t-base);
}
.site-header.is-scrolled .menu-toggle { color: var(--color-white); }
.menu-toggle__icon { position: absolute; }
.menu-toggle__icon--close { opacity: 0; transform: rotate(-90deg); transition: opacity var(--t-fast), transform var(--t-fast); }
.menu-toggle__icon--open { transition: opacity var(--t-fast), transform var(--t-fast); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open { opacity: 0; transform: rotate(90deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close { opacity: 1; transform: rotate(0); }

.mobile-nav {
  position: fixed;
  inset-inline: 0;
  top: var(--header-height);
  background: var(--color-navy-900);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-slow);
}
.mobile-nav.is-open { max-height: 32rem; }
.mobile-nav__list { padding: var(--space-sm) var(--container-padding) var(--space-lg); display: flex; flex-direction: column; }
.mobile-nav__list a {
  display: block;
  padding: var(--space-sm) 0;
  color: var(--color-white);
  font-weight: var(--fw-medium);
  font-size: var(--fs-md);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.mobile-nav__list li:last-child a { border-bottom: none; }

@media (min-width: 1024px) {
  .site-nav { display: block; }
  .site-nav__list { display: flex; align-items: center; gap: var(--space-lg); }
  .site-nav__list a {
    position: relative;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--color-navy-900);
    padding-block: var(--space-3xs);
    transition: color var(--t-base);
  }
  .site-header.is-scrolled .site-nav__list a { color: var(--color-white); }
  .site-nav__list a::after {
    content: '';
    position: absolute;
    left: 0; right: 100%;
    bottom: -4px;
    height: 2px;
    background: var(--color-gold-500);
    transition: right var(--t-base);
  }
  .site-nav__list a:hover::after { right: 0; }
  .site-nav__cta {
    padding: 0.65em 1.4em;
    border-radius: var(--radius-full);
    background: var(--color-gold-500);
    color: var(--color-navy-900) !important;
  }
  .site-nav__cta::after { display: none; }
  .menu-toggle { display: none; }
  .mobile-nav { display: none; }
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--color-navy-900) 0%, var(--color-navy-800) 55%, #0F2657 100%);
}
.hero__video {
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 18, 55, 0.55) 0%, rgba(0, 18, 55, 0.72) 65%, rgba(0, 18, 55, 0.88) 100%);
}
.hero__content {
  position: relative;
  color: var(--color-white);
  padding-block: calc(var(--header-height) + var(--space-xl)) var(--space-2xl);
  max-width: 62rem;
}
.hero__title {
  display: flex;
  flex-direction: column;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.hero__title-line1 {
  font-size: 0.4em;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  color: var(--color-gold-500);
  margin-bottom: 0.3em;
}
.hero__title-line2 {
color: #fff
}
p.hero__lead {
  margin-top: var(--space-md);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  max-width: 34ch;
  color: var(--color-white);
	padding-top: 10px;
}
.hero__sub {
  margin-top: var(--space-sm);
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.72);
  max-width: 40ch;
}

/* ---------- 8. What Sets Us Apart ---------- */
.values {
  background: var(--color-navy-900);
  color: var(--color-white);
  padding-block: var(--space-2xl);
}
.values__title {
  color: var(--color-white);
  font-size: var(--fs-xl);
  text-align: center;
  margin-bottom: var(--space-xl);
}
.values__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
.value-card { text-align: center; }
.value-card__icon {
  width: 2.75rem; height: 2.75rem;
  color: var(--color-gold-500);
  margin-inline: auto;
  margin-bottom: var(--space-sm);
}
.value-card h3 { color: var(--color-white); font-size: var(--fs-md); margin-bottom: var(--space-2xs); }
.value-card p { color: rgba(255, 255, 255, 0.68); font-size: var(--fs-sm); max-width: 30ch; margin-inline: auto; }

@media (min-width: 640px) {
  .values__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .values__grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-xl); }
}

/* ---------- 9. About / timeline ---------- */
.about { padding-block: var(--space-3xl); }
.about__intro { margin-bottom: var(--space-xl); max-width: 40ch; }
.about__intro-text { margin-top: var(--space-sm); font-size: var(--fs-md); color: var(--color-navy-900); font-weight: var(--fw-medium); }

.timeline { position: relative; padding-left: var(--space-lg); }
.timeline::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 6px; bottom: 6px;
  width: 2px;
  background: var(--color-border);
}
.timeline__item { position: relative; padding-bottom: var(--space-xl); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-lg) + 1px);
  top: 6px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--color-gold-500);
  box-shadow: 0 0 0 4px var(--color-white);
}
.timeline__marker {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-gold-600);
  margin-bottom: var(--space-2xs);
}
.timeline__body h3 { margin-bottom: var(--space-2xs); }
.timeline__body p { max-width: 62ch; }

@media (min-width: 1024px) {
  .about__layout { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-2xl); align-items: start; }
  .about__intro { position: sticky; top: calc(var(--header-height) + var(--space-xl)); margin-bottom: 0; }
}

/* ---------- 10. Vision & Mission ---------- */
.vision-mission {
  background: var(--color-navy-900);
  color: var(--color-white);
  padding-block: var(--space-3xl);
  text-align: center;
}
.vision-mission__purpose {
  color: var(--color-white);
  font-size: var(--fs-xl);
  max-width: 24ch;
  margin-inline: auto;
  margin-bottom: var(--space-2xl);
  line-height: 1.25;
}
.vision-mission__grid {
  display: grid;
  gap: var(--space-lg);
  text-align: left;
  max-width: 56rem;
  margin-inline: auto;
}
.vm-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.vm-card h3 { color: var(--color-gold-500); margin-bottom: var(--space-sm); }
.vm-card p { color: rgba(255, 255, 255, 0.82); }

@media (min-width: 768px) {
  .vision-mission__grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- 11. Area of Expertise ---------- */
.areas { padding-block: var(--space-3xl); background: var(--color-surface); }
.areas__intro { font-size: var(--fs-md); color: var(--color-navy-900); font-weight: var(--fw-medium); max-width: 45ch; margin-bottom: var(--space-xl); }

.areas__route { margin-bottom: var(--space-2xl); }
.areas__route ol {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.areas__route li { position: relative; }
.areas__route li a {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xs) 0;
}
.areas__route-dot {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-white);
  border: 2px solid var(--area-c);
  color: var(--area-c);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.areas__route li a:hover .areas__route-dot,
.areas__route li a:focus-visible .areas__route-dot { background: var(--area-c); color: var(--color-white); }
.areas__route-label { font-weight: var(--fw-semibold); color: var(--color-navy-900); font-size: var(--fs-sm); }

.areas__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
.area-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border-top: 5px solid var(--area-c);
  scroll-margin-top: calc(var(--header-height) + 24px);
}
.area-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, color-mix(in srgb, var(--area-c) 18%, white), color-mix(in srgb, var(--area-c) 32%, white));
  display: grid;
  place-items: center;
}
.area-card__watermark { width: 30%; height: 30%; color: var(--area-c); opacity: 0.55; }
.area-card h3 { padding: var(--space-lg) var(--space-lg) 0; }
.area-card > p { padding: var(--space-sm) var(--space-lg) 0; }
.area-card__points { padding: var(--space-md) var(--space-lg) 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.area-card__points li { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--color-navy-900); }
.area-card__points .icon { color: var(--area-c); }

.area-card__more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--area-c);
}
.area-card__more .icon { transition: transform var(--t-fast); }
.area-card__more:hover .icon,
.area-card__more:focus-visible .icon { transform: translateX(3px); }

@media (min-width: 768px) {
  .areas__route ol { flex-direction: row; justify-content: space-between; position: relative; }
  .areas__route ol::before {
    content: '';
    position: absolute;
    left: 1.25rem; right: 1.25rem; top: 1.25rem;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
  }
  .areas__route li a { flex-direction: column; text-align: center; background: var(--color-surface); padding-inline: var(--space-2xs); position: relative; z-index: 1; }
  .areas__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  .areas__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 12. Meet the Team ---------- */
.team { padding-block: var(--space-3xl); }
.team__intro { font-size: var(--fs-md); color: var(--color-navy-900); font-weight: var(--fw-medium); margin-bottom: var(--space-xl); }
.team__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
.team-card {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.team-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.team-card--lead { background: var(--color-navy-900); }
.team-card--lead h3, .team-card--lead .team-card__role { color: var(--color-white); }
.team-card--lead .team-card__blurb { color: rgba(255, 255, 255, 0.75); }
.team-card--lead .team-card__role { color: var(--color-gold-500); }

.team-card__photo {
  width: 6.5rem; height: 6.5rem;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: var(--space-sm);
  background: var(--color-surface-2);
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { font-size: var(--fs-md); margin-bottom: 2px; }
.team-card__role { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-gold-600); margin-bottom: var(--space-sm); }
.team-card__bio { margin-bottom: var(--space-md); }
.team-card__blurb {
  font-size: var(--fs-sm);
  overflow: hidden;
  max-height: 6em; /* ~4 lines at the inherited 1.5 line-height */
  transition: max-height var(--t-slow);
}
.team-card__bio-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  margin-top: var(--space-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--color-gold-600);
}
.team-card__bio-toggle .icon { width: 0.9em; height: 0.9em; transition: transform var(--t-fast); }
.team-card__bio-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.team-card--lead .team-card__bio-toggle { color: var(--color-gold-500); }
.team-card__contact { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2xs); }
.team-card__contact a { display: inline-flex; align-items: center; gap: var(--space-3xs); font-size: var(--fs-xs); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.team-card--lead .team-card__contact a { color: var(--color-white); }
.team-card__contact .icon { width: 1em; height: 1em; color: var(--color-gold-600); }
.team-card--lead .team-card__contact .icon { color: var(--color-gold-500); }

.team-card__blurb {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.team-card__blurb.is-expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

@media (min-width: 640px) { .team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .team__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .team__grid { grid-template-columns: repeat(3, 1fr); } .team-card--lead { grid-column: span 2; } }

/* ---------- 13. Reviews / carousel ---------- */
.reviews { position: relative; padding-block: var(--space-3xl); background: var(--color-surface); text-align: center; overflow: hidden; }
.reviews__quote-mark { position: absolute; top: var(--space-lg); left: 50%; transform: translateX(-50%); width: 4rem; height: 3rem; color: var(--color-gold-100); }
.reviews h2 { margin-bottom: var(--space-xl); }

.carousel { max-width: 46rem; margin-inline: auto; }
.carousel__track { position: relative; min-height: 11rem; }
.carousel__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-carousel);
}
.carousel__slide.is-active { position: relative; opacity: 1; visibility: visible; }
.carousel__slide p {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--color-navy-900);
  line-height: 1.45;
}
.carousel__slide footer { margin-top: var(--space-md); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-gold-600); }

.carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-md); margin-top: var(--space-xl); }
.carousel__arrow, .carousel__playpause {
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-navy-900);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.carousel__arrow:hover, .carousel__playpause:hover { background: var(--color-navy-900); color: var(--color-white); }
.carousel__dots { display: flex; align-items: center; gap: var(--space-xs); }
.carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); transition: background-color var(--t-base), width var(--t-base); }
.carousel__dot.is-active { background: var(--color-gold-500); width: 22px; border-radius: var(--radius-full); }

/* ---------- 14. Properties ---------- */
.properties { padding-block: var(--space-3xl); }
.properties__header { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.properties__p24-link { display: inline-flex; align-items: center; gap: var(--space-3xs); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--color-navy-900); }
.properties__p24-link .icon { width: 1em; height: 1em; color: var(--color-gold-600); }

.properties__filter { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-bottom: var(--space-xl); }
.filter-btn {
  padding: 0.55em 1.2em;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-navy-900);
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.filter-btn:hover { border-color: var(--color-navy-900); }
.filter-btn.is-active { background: var(--color-navy-900); border-color: var(--color-navy-900); color: var(--color-white); }

.properties__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
.property-card {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.property-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.property-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--color-surface-2); }
.property-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Badge wrapper - holds the mandate badge (Sole/Dual) and the status
   badge (Under Offer/Pending/Price Reduced) together, since a listing
   can show one of each at once. A shared flex container (rather than
   positioning each badge independently) so the pair can never overlap:
   mandate badge sits at the start, status badge is pushed to the end
   via margin-left: auto - and if a long "Dual Mandate" + "Pending"
   pairing doesn't fit on one line at narrower card widths, flex-wrap
   drops the second badge to its own line instead of the two visually
   colliding. Works identically with only one badge present, or none
   (renders empty, taking up no space). */
.property-card__badges {
  position: absolute;
  top: var(--space-sm); left: var(--space-sm); right: var(--space-sm);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2xs);
  transition: opacity var(--t-fast);
}
.property-card__badges > * { flex: 0 0 auto; }

.mandate-badge, .status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  padding: 0.4em 0.85em;
  border-radius: var(--radius-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  box-shadow: var(--shadow-sm);
}
.mandate-badge .icon, .status-badge .icon { width: 0.9em; height: 0.9em; }
.mandate-badge--sole { background: var(--color-gold-500); color: var(--color-navy-900); }
.mandate-badge--dual { background: var(--color-navy-900); color: var(--color-white); }

/* Status badge always pushes itself to the right of the row (or the
   right of its own line, if wrapped) regardless of whether a mandate
   badge is present alongside it - so a "General" mandate listing that
   is just "Price Reduced" still gets its badge top-right, not stranded
   top-left. Never rendered on a Sold card - see the PHP that outputs
   this, which suppresses it the same way the On Show tile further
   down already suppresses itself for Sold listings. */
.status-badge {
  margin-left: auto;
  color: var(--color-white);
}
.status-badge--offer { background: var(--color-status-offer); }
.status-badge--pending { background: var(--color-status-pending); }
.status-badge--reduced { background: var(--color-status-reduced); }

.property-card__body { padding: var(--space-md); }
.property-card__price { font-size: var(--fs-lg); font-weight: var(--fw-extrabold); color: var(--color-navy-900); }
.property-card__body h3 { font-size: var(--fs-base); margin-top: var(--space-3xs); }
.property-card__location { display: flex; align-items: center; gap: var(--space-3xs); font-size: var(--fs-sm); color: var(--color-muted); margin-top: var(--space-3xs); }
.property-card__location .icon { width: 1em; height: 1em; }
.property-card__meta { display: flex; gap: var(--space-md); margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }
.property-card__meta li { display: flex; align-items: center; gap: var(--space-3xs); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-navy-900); }
.property-card__meta .icon { width: 1.1em; height: 1.1em; color: var(--color-gold-600); }
.property-card__link { display: inline-flex; align-items: center; gap: var(--space-3xs); margin-top: var(--space-md); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--color-navy-900); }
.property-card__link .icon { width: 1em; height: 1em; transition: transform var(--t-fast); }
.property-card__link:hover .icon { transform: translateX(3px); }

.properties__empty { text-align: center; padding: var(--space-xl) 0; color: var(--color-muted); }

@media (min-width: 640px) { .properties__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .properties__header { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .properties__grid { grid-template-columns: repeat(3, 1fr); }
}
/*@media (min-width: 1280px) { .properties__grid { grid-template-columns: repeat(4, 1fr); } }*/


/* Keep your existing meta container styles, ensure it never wraps */
.property-card__meta { 
    display: flex; 
    flex-wrap: nowrap; /* Add this to force a single line */
    gap: var(--space-md); 
    margin-top: var(--space-sm); 
    padding-top: var(--space-sm); 
    border-top: 1px solid var(--color-border); 
}

/* Update your existing li styles to prevent shrinking */
.property-card__meta li { 
    display: flex; 
    align-items: center; 
    gap: var(--space-3xs); 
    font-size: var(--fs-sm); 
    font-weight: var(--fw-semibold); 
    color: var(--color-navy-900); 
    white-space: nowrap; /* Prevent text from wrapping to two lines */
    flex-shrink: 0; /* Prevent these items from squashing */
}

.property-card__meta .icon { 
    width: 1.1em; 
    height: 1.1em; 
    color: var(--color-gold-600); 
    flex-shrink: 0; /* Ensure the icons themselves never shrink */
}

/* NEW RULES FOR THE YARD SIZE */
.property-card__meta li.meta-yard {
    flex-shrink: 1; /* Allow ONLY the yard item to shrink */
    min-width: 0; /* Critical flexbox fix: allows children to shrink below their text width */
}

.property-card__meta li.meta-yard span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.property-card__body h3 { 
    font-size: var(--fs-base); 
    margin-top: var(--space-3xs); 
    
    /* Strict 2-line clamping with clean cutoff */
    line-height: 1.4; /* Explicit line height fixes the overlap */
    height: calc(var(--fs-base) * 1.4 * 2); /* Locks the container height to exactly 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ---------- 14b. Sold properties ---------- */
.property-card--sold { cursor: default; }
.property-card--sold:hover {
  box-shadow: var(--shadow-sm);
  transform: none;
}

.property-card--sold .property-card__media img {
  filter: grayscale(75%) brightness(0.92);
  transition: filter var(--t-slow);
}
.property-card--sold:hover .property-card__media img {
  filter: grayscale(55%) brightness(0.95);
}



.property-card--sold .property-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 18, 55, 0) 50%, rgba(0, 18, 55, 0.55) 100%);
}

/* ---------- 14c. On Show tile ----------
   Bottom-left tile on a listing's photo when it has an upcoming open
   house date (property_show_dates - see php/on-show-helpers.php).
   Frosted glass over the photo rather than a solid fill, so it reads
   as an overlay rather than a flat sticker; the thin gold edge and
   gold date keep it tied to the same navy/gold language as the badges
   above instead of introducing a third colour. Shared by
   .property-card__media (homepage grid + similar-properties strip)
   and .listing-gallery__stage (property.php hero) - both already have,
   or sit inside, position:relative, so no extra rules are needed to
   make this work in both places. */
.on-show-tile {
  position: absolute;
    left: var(--space-sm);
    bottom: var(--space-sm);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 0.95em;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgb(255 255 255 / 50%);
    color: var(--color-navy-900);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    box-shadow: var(--shadow-md);
    animation: on-show-pulse 2.6s ease-in-out infinite;
    transition: opacity var(--t-fast);
}
.on-show-tile .icon {
    width: 1.1em;
    height: 1.1em;
    color: var(--color-navy-900);
}

.on-show-tile strong {
    font-weight: var(--fw-extrabold);
   color: var(--color-navy-900);
}

@keyframes on-show-pulse {
  0%, 100% { box-shadow: var(--shadow-md), 0 0 0 0 rgba(0, 18, 55, 0.4); }
  50%      { box-shadow: var(--shadow-md), 0 0 0 7px rgba(0, 18, 55, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .on-show-tile { animation: none; }
}

/* ---------- 14d. Sold ribbon ----------
   Replaces the old small top-right pill with a full corner ribbon -
   bigger, tilted across the top-right corner, navy/gold to match the
   rest of the site. Positioned to overhang .property-card__media /
   .listing-gallery__stage - both have, or sit inside, an
   overflow:hidden ancestor already (.property-card itself, and
   .listing-gallery__stage directly), which is what clips it neatly to
   the rounded corner instead of needing a wrapper of its own. */
.property-card__ribbon {
  position: absolute;
  top: 20px; right: -54px;
  z-index: 3;
  width: 190px;
  padding-block: 0.5em;
  transform: rotate(45deg);
  transform-origin: center;
  text-align: center;
  background: linear-gradient(135deg, var(--color-navy-700), var(--color-navy-900) 70%);
  color: var(--color-gold-500);
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  box-shadow: 0 10px 22px -6px rgba(0, 18, 55, 0.5);
  border-top: 1px solid rgba(212, 185, 14, 0.6);
  border-bottom: 1px solid rgba(212, 185, 14, 0.6);
  transition: opacity var(--t-fast);
}

.property-card__link--sold {
  color: var(--color-muted);
  cursor: default;
}


/* ---------- 15. Footer ---------- */
.site-footer { background: var(--color-navy-900); color: rgba(255, 255, 255, 0.82); }
.site-footer__map { width: 100%; height: 320px; }
.site-footer__map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.3) brightness(0.9); }

.site-footer__top {
  padding-block: var(--space-2xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}
.footer-col h2 { color: var(--color-white); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--space-md); }
.footer-col--about p { font-size: var(--fs-sm); max-width: 32ch; margin-block: var(--space-md); }
.footer-logo { width: 140px; height: auto; }

.social-links { display: flex; gap: var(--space-sm); }
.social-links a {
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  transition: background-color var(--t-fast);
}
.social-links a:hover { background: var(--color-gold-500); color: var(--color-navy-900); }
.social-links .icon { width: 1.1rem; height: 1.1rem; }

.footer-col--links ul, .footer-col--areas ul { display: flex; flex-direction: column; gap: var(--space-sm); }
.footer-col--links a, .footer-col--areas a { font-size: var(--fs-sm); transition: color var(--t-fast); }
.footer-col--links a:hover, .footer-col--areas a:hover { color: var(--color-gold-500); }

address { font-style: normal; display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-lg); }
address a, address span { display: flex; align-items: flex-start; gap: var(--space-xs); font-size: var(--fs-sm); }
address .icon { width: 1.1em; height: 1.1em; color: var(--color-gold-500); flex-shrink: 0; margin-top: 0.15em; }
address a:hover { color: var(--color-gold-500); }

.contact-form { display: flex; flex-direction: column; gap: var(--space-sm); }
.contact-form__row { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); }
.contact-form__field { display: flex; flex-direction: column; gap: var(--space-3xs); }
.contact-form label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: rgba(255, 255, 255, 0.85); }
.contact-form label span { color: var(--color-gold-500); }
.contact-form input, .contact-form textarea {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-sm);
  padding: 0.7em 0.9em;
  color: var(--color-white);
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.contact-form input:focus, .contact-form textarea:focus { border-color: var(--color-gold-500); background: rgba(255, 255, 255, 0.1); }
.contact-form textarea { resize: vertical; min-height: 5rem; }
.contact-form__honeypot { position: absolute; left: -9999px; }
.contact-form__consent { flex-direction: row; align-items: flex-start; gap: var(--space-2xs); }
.contact-form__consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.1em;
  height: 1.1em;
  margin-top: 0.2em;
  accent-color: var(--color-gold-500);
}
.contact-form__consent label { font-weight: 400; color: rgba(255, 255, 255, 0.7); line-height: 1.5; }
.contact-form__submit { margin-top: var(--space-2xs); align-self: flex-start; }
.contact-form__status { font-size: var(--fs-sm); font-weight: var(--fw-semibold); min-height: 1.2em; }
.contact-form__status.is-success { color: #6FE0A6; }
.contact-form__status.is-error { color: #F29C93; }

.site-footer__bottom {
  padding-block: var(--space-md);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  font-size: var(--fs-xs);
}
.legal-links { display: flex; gap: var(--space-md); }
.legal-links a:hover { color: var(--color-gold-500); }

@media (min-width: 768px) {
  .site-footer__top { grid-template-columns: 1.3fr 0.8fr 0.8fr 1.3fr; }
  .contact-form__row { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .site-footer__bottom { flex-direction: row; justify-content: space-between; }
}

/* ---------- 16. Back to top ----------
   Default bottom offset is raised clear of the fixed WhatsApp button in
   section 17 below (its resting height + the gap between the two) so
   the arrow always sits stacked directly above it rather than
   overlapping. If the WhatsApp button's size ever changes, update the
   matching offsets there alongside this.
   Pages that don't render the WhatsApp button (currently just
   property.php - see php/whatsapp-button.php's include comment in
   section 17) add the .back-to-top--no-whatsapp modifier below instead,
   which drops the arrow straight back into the corner rather than
   leaving the gap the button would otherwise have occupied. */
.back-to-top {
  position: fixed;
  right: var(--space-md);
  bottom: calc(var(--space-md) + 4rem + var(--space-xs));
  z-index: 90;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--color-navy-900);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--t-base), transform var(--t-base), background-color var(--t-fast), bottom var(--t-base);
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0); }
.back-to-top:hover { background: var(--color-gold-500); color: var(--color-navy-900); }

/* ---------- 17. WhatsApp button ----------
   Fixed bottom-right on every page except property.php (see
   php/whatsapp-button.php's include comment, and the
   .back-to-top--no-whatsapp modifier in section 16 above). Redesigned
   as a small round photo badge - no card, no label - so it reads as a
   lightweight shortcut rather than a banner sitting over the page:
   white ring + gold border keep it tied to the site's navy/gold
   language, and the corner WhatsApp badge is now gold to match rather
   than WhatsApp's own green. Sized 60-80px across the two breakpoints
   below, per the "don't cover too much on a small screen" brief.
   .whatsapp-cta__label is kept in the DOM (not display:none) so
   whatever call-to-action text php/whatsapp-button.php renders there
   still reaches screen readers - it's just visually hidden the same
   way .sr-only works elsewhere in this file. */
.whatsapp-cta {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 4rem; height: 4rem;
  padding: 3px;
  background: var(--color-white);
  border: 2px solid var(--color-gold-500);
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.whatsapp-cta:hover,
.whatsapp-cta:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.whatsapp-cta:focus-visible { outline-offset: 4px; }

.whatsapp-cta__avatar {
  position: relative;
  width: 100%; height: 100%;
}
.whatsapp-cta__avatar img {
  display: block;
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface-2);
}

.whatsapp-cta__badge {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 1.5rem; height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  box-shadow: var(--shadow-sm);
  animation: whatsapp-pulse 2.6s ease-in-out infinite;
}
.whatsapp-cta__badge .icon { width: 100%; height: 100%; }

/* Visually hidden, not removed - see the section comment above. */
.whatsapp-cta__label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes whatsapp-pulse {
  0%, 100% { box-shadow: var(--shadow-sm), 0 0 0 0 rgba(212, 185, 14, 0.5); }
  50%      { box-shadow: var(--shadow-sm), 0 0 0 6px rgba(212, 185, 14, 0); }
}

@media (min-width: 768px) {
  .whatsapp-cta { width: 4.75rem; height: 4.75rem; }
  .whatsapp-cta__badge { width: 1.75rem; height: 1.75rem; }
  /* Grown button is taller - keep back-to-top's clearance matched to it */
  .back-to-top { bottom: calc(var(--space-md) + 4.75rem + var(--space-xs)); }
	.back-to-top--no-whatsapp { bottom: var(--space-md); }
}

/* ---------- 18. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}


.contact-form__context { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-gold-500); margin-bottom: var(--space-2xs); }
.site-footer__credit a { font-weight: var(--fw-semibold); transition: color var(--t-fast); }
.site-footer__credit a:hover { color: var(--color-gold-500); }