@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Roboto+Slab:wght@700&display=swap');
/* Design System - 8pt spacing scale and corporate orange palette */
:root {
  /* Colors */
  --color-accent-1: #E65C00; /* orange dark */
  --color-accent-2: #FFA04D; /* orange light */
  --color-accent-3: #1AA6A6; /* teal match */
  --color-dark: #0F2A2E; /* deep petrol */
  --color-white: #FFFFFF;
  --color-grey-1: #6B7280;
  --color-grey-2: #9CA3AF;
  --color-grey-3: #f5f5f5;
  --color-muted: #A78BFA; /* muted accent for subtle elements */
  --color-bg: #FFF3E6; /* cream orange */

  /* Spacing (8pt scale) */
  --space-0: 0;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;

  /* Radius */
  --radius-1: 8px;
  --radius-2: 16px;
  --radius-3: 24px;
  --radius-3: 32px;
  --radius-4: 64px;
  --radius-r: 999px;

  /* Shadows */
  --shadow-1: 2px 2px 0 0 #222222;
  --shadow-2: 1px 1px 0 0 #222222;
  --shadow-3: 0px 0px 0 0 #222222;

  /* Typography */
  --font-sans: 'Roboto', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --font-heading: 'Roboto Slab', 'Roboto', system-ui, -apple-system, Segoe UI, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --fs-h1: 48px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-h5: 16px;
  --fs-p: 16px;
  --fs-sm-p: 12px;
  --lh: 1.5;
}

* { box-sizing: border-box; }
html { margin: 0; padding: 0; overflow-x: hidden; }
body { margin: 0; padding: 0; font-family: var(--font-sans); background: var(--color-bg); color: var(--color-dark); overflow-x: hidden; }

/* Container with responsive max-widths */
/* Main container - ensure sticky positioning works */
main { 
  overflow: visible; 
  transform: none; 
  filter: none; 
  perspective: none; 
}

.container { 
  width: 100%; 
  margin: 0 auto; 
  padding: var(--space-3); 
  overflow: visible; 
  transform: none; 
  filter: none; 
  perspective: none; 
}
/* Mobile (1-799px): full width (no max-width) */
/* Tablet (800-1279px): constrained width */
@media (min-width: 800px) { .container { max-width: 900px; } }
/* Desktop (≥1280px): wider constrained width */
@media (min-width: 901px) { .container { max-width: 1200px; } }

/* Header */
.site-header { position: fixed; top: 0; left: 0; right: 0; background: var(--color-white); border-bottom: 1px solid var(--color-dark); z-index: 10; padding: 0 var(--space-4); }
.site-header .inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: 64px; padding: 0; }
.brand { display: flex; align-items: center; gap: var(--space-2); font-weight: 700; color: var(--color-dark); text-decoration: none; }
.brand .logo { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--color-accent-1), var(--color-accent-2)); box-shadow: var(--shadow-2); }

/* Admin navigation */
.admin-nav { display:flex; align-items: center; gap: var(--space-3); }
.admin-nav a { color: var(--color-dark); gap: var(--space-1); text-decoration: none; padding: var(--space-1) 0; transition: color 300ms ease-out; }
.admin-nav a:not(.logout) { position: relative; }
.admin-nav a:not(.logout)::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--color-accent-2); transform: scaleX(0); transform-origin: 0 50%; transition: transform 300ms ease-out, background-color 300ms ease-out; }
.admin-nav a:not(.logout):hover { color: var(--color-accent-2); }
.admin-nav a:not(.logout):hover::after { transform: scaleX(1); background: var(--color-accent-2); }
.admin-nav a:not(.logout).active { color: var(--color-accent-1); }
.admin-nav a:not(.logout).active::after { transform: scaleX(1); background: var(--color-accent-1); }
.admin-nav a.logout { border: 1px solid var(--color-dark); transition: all 300ms cubic-bezier(0.25, 0.1, 0.25, 1); }
.admin-nav a.logout:hover { background: var(--color-accent-1); border: 1px solid var(--color-dark); color: var(--color-white); }
.admin-nav a.logout:active { background: var(--color-accent-2); border: 1px solid var(--color-dark); color: var(--color-white); }

/* Language dropdown */
.lang-toggle { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: var(--space-1); padding: 6px 10px; background: transparent; border: 1px solid transparent; border-radius: var(--radius-1); cursor: pointer; }
.lang-btn:hover { background: var(--color-bg); }
.lang-flag { width: 24px; height: 24px; display: inline-block; }
.lang-arrow { display: inline-block; border: solid var(--color-dark); border-width: 0 2px 2px 0; padding: 3px; transform: rotate(45deg); }
.lang-menu { position: absolute; top: calc(100% + var(--space-1)); right: 0; background: var(--color-white); border: 1px solid var(--color-dark); border-radius: var(--radius-3); box-shadow: var(--shadow-1); padding: var(--space-3); display: none; min-width: 180px; }
.lang-menu.active { display: block; }
.lang-item { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-1); color: var(--color-dark); text-decoration: none; }
.lang-item:hover { background: var(--color-bg); cursor: pointer; }
.lang-item.active { background: var(--color-accent-2); color: var(--color-dark); }

/* Public navigation */
.public-nav { display:flex; align-items: center; gap: var(--space-3); }
.public-nav a { color: var(--color-dark); text-decoration: none; padding: var(--space-1) 0; transition: color 300ms ease-out; position: relative; }
.public-nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--color-accent-2); transform: scaleX(0); transform-origin: 0 50%; transition: transform 300ms ease-out, background-color 300ms ease-out; }
.public-nav a:hover { color: var(--color-accent-2); }
.public-nav a:hover::after { transform: scaleX(1); background: var(--color-accent-2); }
.public-nav a.active { color: var(--color-accent-1); }
.public-nav a.active::after { transform: scaleX(1); background: var(--color-accent-1); }

/* Properties dropdown - Desktop */
.properties-dropdown-wrapper { position: relative; display: inline-block; }
.properties-nav-link { display: inline-flex; align-items: center; color: var(--color-dark); text-decoration: none; padding: var(--space-1) 0; transition: color 300ms ease-out; position: relative; cursor: pointer; }
.properties-nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--color-accent-2); transform: scaleX(0); transform-origin: 0 50%; transition: transform 300ms ease-out, background-color 300ms ease-out; }
.properties-nav-link:hover { color: var(--color-accent-2); }
.properties-nav-link:hover::after { transform: scaleX(1); background: var(--color-accent-2); }
.properties-nav-link.active { color: var(--color-accent-1); }
.properties-nav-link.active::after { transform: scaleX(1); background: var(--color-accent-1); }

/* Level 2 Dropdown */
.properties-dropdown { position: absolute; top: calc(100% + 8px); left: 0; background: var(--color-white); border: 1px solid var(--color-dark); border-radius: var(--radius-2); box-shadow: var(--shadow-1); padding: var(--space-4); display: none; min-width: 200px; z-index: 100; }
.properties-dropdown.active { display: block; }

.properties-dropdown-item-wrapper { position: relative; }
.properties-dropdown-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 14px; color: var(--color-dark); cursor: pointer; border-radius: var(--radius-1); transition: background 200ms ease-out, color 200ms ease-out; }
.properties-dropdown-item:hover, .properties-dropdown-item.active { background: var(--color-bg); color: var(--color-accent-1); }
.properties-dropdown-item + .properties-dropdown-item-wrapper { margin-top: 8px; }

/* Level 3 Dropdown */
.properties-dropdown-level3 { position: absolute; top: 0; left: calc(100% + 8px); background: var(--color-white); border: 1px solid var(--color-dark); border-radius: var(--radius-2); box-shadow: var(--shadow-1); padding: var(--space-4); display: none; min-width: 220px; z-index: 101; }
.properties-dropdown-level3.active { display: block; }

.properties-dropdown-level3-item { display: block; padding: 10px 16px; font-size: 14px; color: var(--color-dark); text-decoration: none; border-radius: var(--radius-1); transition: background 200ms ease-out, color 200ms ease-out; }
.properties-dropdown-level3-item:hover { background: var(--color-bg); color: var(--color-accent-1); }
.properties-dropdown-level3-item + .properties-dropdown-level3-item { margin-top: 4px; }

/* Properties dropdown - Mobile */
.properties-dropdown-wrapper.mobile { display: block; }
.properties-nav-link-mobile { display: flex; align-items: center; padding: var(--space-1); color: var(--color-dark); text-decoration: none; border-radius: var(--radius-1); cursor: pointer; }
.properties-nav-link-mobile:hover { background: var(--color-bg); }
.properties-nav-link-mobile.active { background: var(--color-accent-2); color: var(--color-dark); }

.properties-dropdown-mobile { display: none; padding-left: var(--space-2); margin-top: 8px; }
.properties-dropdown-mobile.active { display: block; }

.properties-dropdown-item-wrapper-mobile { margin-bottom: 8px; }
.properties-dropdown-item-mobile { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; font-size: 14px; color: var(--color-dark); cursor: pointer; border-radius: var(--radius-1); background: var(--color-white); border: 1px solid var(--color-dark); transition: background 200ms ease-out, color 200ms ease-out; }
.properties-dropdown-item-mobile:hover, .properties-dropdown-item-mobile.active { background: var(--color-bg); color: var(--color-accent-1); }

.properties-dropdown-level3-mobile { display: none; padding-left: var(--space-2); margin-top: 8px; background: var(--color-white); border-radius: var(--radius-1); padding: 12px; border: 1px solid #eee; }
.properties-dropdown-level3-mobile.active { display: block; }

.properties-dropdown-level3-item-mobile { display: block; padding: 8px 12px; font-size: 14px; color: var(--color-dark); text-decoration: none; border-radius: var(--radius-1); transition: background 200ms ease-out, color 200ms ease-out; }
.properties-dropdown-level3-item-mobile:hover { background: var(--color-bg); color: var(--color-accent-1); }
.properties-dropdown-level3-item-mobile + .properties-dropdown-level3-item-mobile { margin-top: 4px; }

/* Services dropdown - Desktop */
.services-dropdown-wrapper { position: relative; display: inline-block; }
.services-nav-link { display: inline-flex; align-items: center; color: var(--color-dark); text-decoration: none; padding: var(--space-1) 0; transition: color 300ms ease-out; position: relative; cursor: pointer; }
.services-nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--color-accent-2); transform: scaleX(0); transform-origin: 0 50%; transition: transform 300ms ease-out, background-color 300ms ease-out; }
.services-nav-link:hover { color: var(--color-accent-2); }
.services-nav-link:hover::after { transform: scaleX(1); background: var(--color-accent-2); }
.services-nav-link.active { color: var(--color-accent-1); }
.services-nav-link.active::after { transform: scaleX(1); background: var(--color-accent-1); }

.services-dropdown { position: absolute; top: calc(100% + 8px); left: 0; background: var(--color-white); border: 1px solid var(--color-dark); border-radius: var(--radius-2); box-shadow: var(--shadow-1); padding: var(--space-4); display: none; min-width: 220px; z-index: 100; }
.services-dropdown.active { display: block; }

.services-dropdown-item { display: block; padding: 10px 16px; font-size: 14px; color: var(--color-dark); text-decoration: none; border-radius: var(--radius-1); transition: background 200ms ease-out, color 200ms ease-out; }
.services-dropdown-item:hover { background: var(--color-bg); color: var(--color-accent-1); }

/* Services dropdown - Mobile */
.services-dropdown-wrapper.mobile { display: block; }
.services-nav-link-mobile { display: flex; align-items: center; padding: var(--space-1); color: var(--color-dark); text-decoration: none; border-radius: var(--radius-1); cursor: pointer; }
.services-nav-link-mobile:hover { background: var(--color-bg); }
.services-nav-link-mobile.active { background: var(--color-accent-2); color: var(--color-dark); }

.services-dropdown-mobile { display: none; padding-left: var(--space-2); margin-top: 8px; }
.services-dropdown-mobile.active { display: block; }

.services-dropdown-item-mobile { display: block; padding: 8px 12px; font-size: 14px; color: var(--color-dark); text-decoration: none; border-radius: var(--radius-1); transition: background 200ms ease-out, color 200ms ease-out; }
.services-dropdown-item-mobile:hover { background: var(--color-bg); color: var(--color-accent-1); }

/* Buttons */
.btn { display: inline-flex; align-items: center; transform: translate(-2px, -2px); gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-r); border: 1px solid var(--color-dark); color: var(--color-dark); background: transparent; text-decoration: none; box-shadow: var(--shadow-1); cursor: pointer; transition: transform 300ms ease-out, colobox-shadow 300ms ease-out, color 300ms ease-out, background 300ms ease-out, border 300ms ease-out; position: relative; overflow: hidden; z-index: 0; }
.btn::after { content: ""; position: absolute; inset: 0; background: var(--color-accent-2); z-index: -2; }
.btn::before { content: ""; position: absolute; top: 0; left: 0; width: 0%; aspect-ratio: 1 / 1; background: var(--color-accent-1); border-radius: 0 999px 999px 999px; transition: width 300ms ease-out; z-index: -1; pointer-events: none; }
.btn > * { position: relative; z-index: 1; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-2); color: var(--color-white); }
.btn:hover::before { width: 200%; }
.btn:hover img { filter: brightness(0) invert(1); }
.btn:active { transform: translate(0px, 0px); border: 1px solid var(--color-grey-1); color: var(--color-grey-1); }
.btn:active::before { width: 200%; background: var(--color-dark); }

.btn.secondary { display: inline-flex; align-items: center; transform: translate(-2px, -2px); gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-r); border: 1px solid var(--color-dark); color: var(--color-dark); background: transparent; text-decoration: none; box-shadow: var(--shadow-1); cursor: pointer; transition: transform 300ms ease-out, colobox-shadow 300ms ease-out, color 300ms ease-out, background 300ms ease-out, border 300ms ease-out; position: relative; overflow: hidden; z-index: 0; }
.btn.secondary::after { content: ""; position: absolute; inset: 0; background: var(--color-bg); z-index: -2; }
.btn.secondary::before { content: ""; position: absolute; top: 0; left: 0; width: 0%; aspect-ratio: 1 / 1; background: var(--color-accent-3); border-radius: 0 999px 999px 999px; transition: width 300ms ease-out; z-index: -1; pointer-events: none; }
.btn.secondary > * { position: relative; z-index: 1; }
.btn.secondary:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-2); color: var(--color-white); }
.btn.secondary:hover::before { width: 200%; }
.btn.secondary:active { transform: translate(0px, 0px); border: 1px solid var(--color-grey-1); color: var(--color-grey-1); }
.btn.secondary:active::before { width: 200%; background: var(--color-dark); }

.btn.ghost { background: transparent; color: var(--color-accent-1); border-color: var(--color-accent-1); }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* Typography usage */
p { color: var(--color-dark); font-family: 'Roboto', var(--font-sans); font-weight: 400; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; color: var(--color-dark); }

/* Cards */
.card { background: var(--color-white); border-radius: var(--radius-2); overflow: hidden; transform: translate(-2px, -2px); box-shadow: 0 0 0 1px var(--color-dark), var(--shadow-1); transition: transform 300ms ease-out, box-shadow 300ms ease-out; }
.card:hover { transform: translate(-1px, -1px); box-shadow: 0 0 0 1px var(--color-accent-1), var(--shadow-2); }
.card:active { transform: translate(0px, 0px); box-shadow: 0 0 0 1px var(--color-accent-1), var(--shadow-3); }
.card .card-media { width: 100%; height: 200px; object-fit: cover; display: block; }
.card .card-body { padding: var(--space-3); }
.card h3 { font-size: var(--fs-h3); margin: 0 0 var(--space-1); }
.card p { font-size: var(--fs-p); margin: 0; }

/* Card title clamp + instant tooltip */
.card .card-body .card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}
.card .card-body .card-title:hover::after {
  content: attr(data-title);
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  white-space: normal;
  background: var(--color-white);
  color: var(--color-dark);
  border: 1px solid var(--color-dark);
  border-radius: var(--radius-1);
  padding: 8px 10px;
  box-shadow: var(--shadow-1);
  z-index: 1000;
  width: max-content;
  max-width: 520px;
}

/* Property card location */
.card .card-location {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--space-3);
  color: var(--color-dark);
  font-size: var(--fs-p);
}

.card .card-location img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Property card details grid */
.card .card-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.card .card-detail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-dark);
  font-size: var(--fs-p);
}

.card .card-detail-item img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* Clickable Card Links */
.card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.card-link .card:hover { cursor: pointer; }

/* Grid */
.grid { display: grid; gap: var(--space-3); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 1279px) { .grid.cols-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 799px) { .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; } }

/* Utilities */
.mt-header { margin-top: 64px; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mb-2 { margin-bottom: var(--space-2); }
.text-muted { color: var(--color-grey-1); }
.price { color: var(--color-accent-1); font-weight: 700; font-size: var(--fs-h3); }
.price-type { font-size: var(--fs-p); }

/* Forms */
label { display: block; font-weight: 600; margin-bottom: 6px; }
input[type="text"], input[type="number"], input[type="email"], input[type="password"], textarea, select { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: var(--radius-1); background: var(--color-white); }
textarea { min-height: 100px; }
form .row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
form .row + .row { margin-top: var(--space-2); }

@media (max-width: 799px) { form .row { grid-template-columns: 1fr; } }

/* Hide number input spin buttons */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* Tables */
table { width: 100%; border-collapse: collapse; background: var(--color-white); box-shadow: var(--shadow-1); border-radius: var(--radius-1); overflow: hidden; }
th, td { padding: 12px 14px; border-bottom: 1px solid #eee; text-align: left; }
th { background: #fafafa; font-weight: 700; }

.leads-intro { color: var(--color-dark); }

/* Overlay Modal */
.overlay-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; z-index: 1000; }
.overlay-backdrop.active { display: block; }
.overlay-modal { position: fixed; top: var(--space-4); left: var(--space-4); right: var(--space-4); bottom: var(--space-4); background: var(--color-white); border: 1px solid var(--color-dark); border-radius: var(--radius-3); box-shadow: var(--shadow-1); overflow: hidden; display: flex; flex-direction: column; }

/* Desktop: max-width and full height */
@media (min-width: 1280px) {
  .overlay-modal { width: 1280px; top: var(--space-4); bottom: var(--space-4); left: 50%; transform: translateX(-50%); right: auto; }
}
.overlay-header { position: relative; padding: var(--space-4) var(--space-4) var(--space-2) var(--space-4); }
.overlay-close { position: absolute; top: var(--space-4); right: var(--space-4); background: transparent; border: none; padding: 0; cursor: pointer; }
.overlay-content { flex: 1; overflow: auto; padding: 0 var(--space-4) var(--space-4) var(--space-4); }
.overlay-footer { position: sticky; bottom: 0; background: var(--color-white); border-top: 1px solid #eee; padding: var(--space-2) var(--space-4); display: flex; gap: var(--space-2); justify-content: flex-end; }

@media (max-width: 799px) {
  .overlay-modal { top: var(--space-2); left: var(--space-2); right: var(--space-2); bottom: var(--space-2); border-radius: var(--radius-2); }
  .overlay-header { padding: var(--space-3); }
  .overlay-content { padding: 0 var(--space-3) var(--space-3) var(--space-3); }
  .overlay-footer { padding: var(--space-2) var(--space-3); }
  
  /* Mobile logo swap */
  .logo-desktop { display: none !important; }
  .logo-mobile { display: block !important; }
}

/* Breakpoints */
/* Tablet and below: scale down type system */
@media (max-width: 1279px) { 
  :root { 
    --bp: 1279px; 
    /* Type scale for Tablet */
    --fs-h1: 36px;
    --fs-h2: 28px;
    --fs-h3: 22px;
    --fs-h4: 18px;
    --fs-h5: 16px;
    --fs-p: 16px;
  }
  
  /* Header actions gap */
  .header-actions { gap: var(--space-2) !important; }
}
/* Mobile: further reduce type scale */
@media (max-width: 799px) { 
  :root { 
    --bp: 799px; 
    /* Type scale for Mobile */
    --fs-h1: 28px;
    --fs-h2: 22px;
    --fs-h3: 20px;
    --fs-h4: 18px;
    --fs-h5: 16px;
    --fs-p: 16px;
  } 
}

/* Property Media Row */
.property-media-row { position: relative; display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: var(--space-3) 0; }
@media (min-width: 800px) { .property-media-row { grid-template-columns: 1fr 1fr; align-items: start; } }
.property-media-row .media-left .card .card-media { height: 400px; }
.property-media-row .media-right .media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.property-media-row .media-right .card .card-media { height: 190px; }
.more-images-indicator { position: absolute; right: var(--space-3); bottom: var(--space-3); background: rgba(15,42,46,0.8); color: #fff; padding: 6px 10px; border-radius: var(--radius-r); border: 1px solid var(--color-dark); box-shadow: var(--shadow-2); font-size: 14px; }
.desktop-only { display: none; }
.mobile-only { display: inline-block; }
@media (min-width: 800px) { .desktop-only { display: inline-block; } .mobile-only { display: none; } }

/* Mobile hamburger */
.hamburger-btn { display: none; background: transparent; border: 1px solid transparent; padding: 6px; border-radius: var(--radius-1); cursor: pointer; }
.hamburger-btn:hover { background: var(--color-bg); }

/* Mobile menu overlay (similar to lang dropdown but fullscreen) */
.mobile-menu-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.32); backdrop-filter: blur(16px); display: none; z-index: 999; }
.mobile-menu-backdrop.active { display: block; }
.mobile-menu { position: fixed; top: var(--space-2); left: var(--space-2); right: var(--space-2); bottom: var(--space-2); background: var(--color-white); border: 1px solid var(--color-dark); border-radius: var(--radius-2); box-shadow: var(--shadow-1); padding: 16px; display: none; overflow: auto; z-index: 1000; }
.mobile-menu.active { display: block; }
.mobile-menu .menu-items { display: flex; flex-direction: column; gap: var(--space-2); }
.mobile-menu .menu-items a { display: block; padding: var(--space-1); color: var(--color-dark); text-decoration: none; border-radius: var(--radius-1); }
.mobile-menu .menu-items a:hover { background: var(--color-bg); }
.mobile-menu .menu-items a.active { background: var(--color-accent-2); color: var(--color-dark); }
/* Mobile menu header row with close button */
.mobile-menu .menu-header { display: flex; align-items: center; justify-content: flex-end; margin-bottom: var(--space-2); }
.mobile-menu .mobile-close { width: 40px; height: 40px; display: grid; place-items: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius-1); cursor: pointer; }
.mobile-menu .mobile-close:hover { background: var(--color-bg); }

/* Header layout responsive */
@media (max-width: 1279px) {
  .public-nav { display: none; }
  .hamburger-btn { display: inline-flex; }
  .admin-nav { display: none; }
}

/* Feature Badges */
.feature-badge { display: inline-block; padding: 4px 12px; margin: 4px 4px 4px 0; background: var(--color-bg); border: 1px solid var(--color-dark); border-radius: var(--radius-r); font-size: 14px; font-weight: 400; }

/* Property Details Grid */
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.details-grid .detail-item { display: flex; flex-direction: column; gap: 4px; }
.details-grid .detail-item .label { font-weight: 600; color: var(--color-dark); font-size: 14px; }
.details-grid .detail-item .value { color: var(--color-grey-1); font-size: 16px; }

/* Property Sections */
.property-section h2 { font-size: var(--fs-h3); margin: 0 0 var(--space-2); color: var(--color-dark); }
.property-section .section-content { padding: var(--space-3); }

/* Property ID Badge */
.property-id-badge { display: inline-block; padding: 8px 16px; background: var(--color-accent-2); border: 1px solid var(--color-dark); border-radius: var(--radius-r); font-weight: 700; font-size: 16px; margin-bottom: var(--space-2); box-shadow: var(--shadow-2); }

/* Property Title Row */
.property-title-row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); margin-bottom: var(--space-2); }
.property-title-row .property-id-badge { margin: 0; margin-top: var(--space-1); }
.property-title-row .location-breadcrumb { margin: var(--space-1) 0 0 0; }

/* Location Breadcrumb */
.location-breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--color-grey-1); font-size: 16px; margin-bottom: var(--space-2); }
.location-breadcrumb .separator { color: var(--color-grey-2); }

/* Property Info Row - Robust Sticky Implementation */
.property-info-row { 
  display: grid; 
  grid-template-columns: 1fr; 
  grid-template-areas: 'right' 'left'; 
  gap: var(--space-4); 
  margin: var(--space-4) 0; 
  /* Ensure no properties that break sticky positioning */
  overflow: visible;
  transform: none;
  filter: none;
  perspective: none;
}
.property-info-row .info-left { 
  grid-area: left; 
  min-height: 0; /* Prevent grid blowout */
}
.property-info-row .info-right { 
  grid-area: right; 
  min-height: 0; /* Prevent grid blowout */
}
.property-info-row .info-right .property-summary { 
  position: static; 
  top: auto; 
}
@media (min-width: 800px) {
  .property-info-row { 
    grid-template-columns: 7fr 3fr; 
    grid-template-areas: 'left right'; 
    align-items: flex-start;
  }
  .property-info-row .info-right { 
    /* Critical: no transform, overflow, filter, or perspective */
    position: static;
    overflow: visible;
    transform: none;
    filter: none;
    perspective: none;
    contain: none;
  }
  .property-info-row .info-right .sticky-summary { 
    /* Robust sticky positioning */
    position: -webkit-sticky; 
    position: sticky; 
    top: 128px;
    z-index: 1;
    /* Ensure proper stacking and rendering */
    isolation: isolate;
  }
  .property-info-row .info-right .sticky-summary .property-summary {
    /* Ensure the card itself doesn't interfere */
    position: relative;
  }
}

/* Video Embed */
.video-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius-2); border: 1px solid var(--color-dark); }
.video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

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

/* Footer */
.site-footer { background: var(--color-dark); color: var(--color-white); padding: var(--space-6) 0 var(--space-3); margin-top: 0; }
.site-footer a { color: var(--color-white); text-decoration: none; transition: color 300ms ease-out; }
.site-footer a:hover { color: var(--color-accent-2); }
.footer-container { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-3); }
.footer-grid { display: grid; grid-template-columns: 2fr 1.5fr 1fr 1fr; gap: var(--space-6); margin-bottom: var(--space-4); }
.footer-column h3 { font-size: var(--fs-h4); margin: 0 0 var(--space-2); color: var(--color-accent-2); }
.footer-column p { margin: 0 0 var(--space-2); line-height: 1.6; color: var(--color-white); opacity: 0.9; font-size: 14px; }
.footer-logo { max-width: 180px; height: auto; margin-bottom: var(--space-2); }
.company-details { list-style: none; padding: 0; margin: var(--space-2) 0 0; font-size: 14px; line-height: 1.8; }
.company-details li { margin-bottom: 4px; color: var(--color-white); opacity: 0.85; }
.company-details strong { opacity: 1; margin-right: 4px; }
.company-detail-item { display: flex; align-items: center; gap: 8px; }
.company-detail-item img { width: 20px; height: 20px; flex-shrink: 0; filter: brightness(0) invert(1); }
.address-link { color: var(--color-white); text-decoration: none; transition: color 300ms ease-out; }
.address-link:hover { color: var(--color-accent-2); }
.contact-info { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--space-3); }
.contact-info-item { display: flex; align-items: center; gap: 8px; color: var(--color-white); text-decoration: none; transition: color 300ms ease-out; }
.contact-info-item img { width: 20px; height: 20px; transition: filter 300ms ease-out; }
.contact-info-item:hover { color: var(--color-accent-2); }
.contact-info-item:hover img { filter: brightness(0) saturate(100%) invert(70%) sepia(85%) saturate(2078%) hue-rotate(360deg) brightness(102%) contrast(101%); }
.social-icons { display: flex; gap: 16px; align-items: center; margin-top: var(--space-3); }
.social-icons a { display: inline-block; transition: transform 300ms ease-out; }
.social-icons a:hover { transform: scale(1.04); }
.social-icons img { width: 40px; height: 40px; display: block; }
.social-tooltip-link { position: relative; display: inline-flex; transition: transform 300ms ease-out; }
.social-tooltip-link:hover { transform: scale(1.04); }
.social-tooltip { position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: var(--color-white); color: var(--color-dark); padding: 6px 12px; border-radius: var(--radius-1); font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 300ms ease-out, visibility 300ms ease-out; pointer-events: none; border: 1px solid var(--color-dark); box-shadow: var(--shadow-1); z-index: 10; }
.social-tooltip-link:hover .social-tooltip { opacity: 1; visibility: visible; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: var(--space-1); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: var(--space-3); text-align: center; color: var(--color-white); opacity: 0.7; font-size: 14px; }

@media (max-width: 1279px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-column:first-child { grid-column: 1 / -1; }
}

@media (max-width: 799px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-column:first-child { grid-column: auto; }
  .footer-logo { max-width: 150px; }
}

/* Home page specific */
.home-section { margin-top: var(--space-6); }
.home-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.home-section-header h2 { font-size: var(--fs-h2); margin: 0; }
.home-section-header a { font-size: 16px; }

/* Hero search container */
.hero-search-container { 
  margin: var(--space-4) auto 0; 
  display: flex; 
  flex-direction: column; 
  gap: var(--space-2); 
  align-items: center;
  width: fit-content;
  padding: var(--space-4);
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-2);
  border: 1px solid #0F2A2E;
  box-shadow: var(--shadow-1);
  transform: translate(-2px, -2px);
  transition: transform 300ms ease-out, box-shadow 300ms ease-out;
}

.hero-search-container:hover {
  transform: translate(-1px, -1px);
  box-shadow: var(--shadow-2);
}

.hero-search-container h3 {
  margin: 0 0 var(--space-2);
  color: var(--color-white);
  font-size: var(--fs-h3);
  text-align: center;
}

@media (max-width: 799px) {
  .hero-search-container { align-items: stretch; width: 100%; }
  .hero-search-container form, .hero-search-container button { width: 100%; justify-content: center; }
}

/* Home About Section */
.home-about-section{background:var(--color-white);width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;padding:var(--space-8) 0;margin-top:var(--space-8)}
.home-about-container{max-width:1280px;margin:0 auto;padding:0 var(--space-3);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:center}
.home-about-content h2{font-size:var(--fs-h2);margin:0 0 var(--space-3);color:var(--color-dark)}
.home-about-content p{font-size:var(--fs-p);line-height:1.8;color:var(--color-grey-1);margin:0 0 var(--space-3)}
.home-about-image img{width:100%;border-radius:var(--radius-2);border:1px solid var(--color-dark);box-shadow:var(--shadow-1);transform:translate(-2px,-2px)}
@media (max-width:1279px){.home-about-container{grid-template-columns:1fr;gap:var(--space-4)}}

/* Google Reviews Section */
.home-reviews-section{background:var(--color-grey-3);width:100vw;position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;padding:var(--space-6) 0;margin-top:0}
.reviews-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4);flex-wrap:wrap;gap:var(--space-2)}
.reviews-header h2{font-size:var(--fs-h2);margin:0;color:var(--color-dark)}
.reviews-score{display:flex;align-items:center;gap:var(--space-1)}
.google-logo{width:28px;height:28px;flex-shrink:0}
.score-number{font-size:var(--fs-h2);font-weight:700;color:var(--color-accent-1)}
.score-stars{font-size:24px;color:var(--color-accent-1);line-height:1}
.score-label{font-size:var(--fs-p);color:var(--color-grey-1)}
.reviews-marquee-container{overflow:hidden;mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent);-webkit-mask-image:linear-gradient(to right,transparent,black 10%,black 90%,transparent)}
.reviews-marquee{display:flex;gap:var(--space-3);animation:marquee 60s linear infinite;will-change:transform}
.reviews-marquee:hover{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.review-card{background:var(--color-white);border-radius:var(--radius-2);border:1px solid var(--color-dark);box-shadow:var(--shadow-1);padding:var(--space-3);min-width:320px;max-width:320px;flex-shrink:0}
.review-profile{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}
.review-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--color-accent-1),var(--color-accent-2));border:1px solid var(--color-dark);flex-shrink:0}
.review-info{flex:1}
.review-name{font-weight:600;color:var(--color-dark);font-size:16px}
.review-stars{color:var(--color-accent-1);font-size:14px;line-height:1}
.review-text{font-size:14px;line-height:1.6;color:var(--color-grey-1);margin:0}
@media (max-width:799px){.reviews-header{flex-direction:column;align-items:flex-start}}

/* Property gallery (single) */
.pg-img-wrapper{position:relative}
.pg-img-wrapper img{display:block;width:100%;height:auto}
.pg-img-wrapper{cursor:pointer}
.pg-img-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
.pg-img-overlay img{width:28px;height:28px}
.pg-img-wrapper:hover .pg-img-overlay{opacity:1}

/* Lightbox */
#pgOverlay{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:1000;-webkit-user-select:none;user-select:none}
#pgOverlay.active{display:flex}
#pgOverlay .pg-lb-image{max-width:90vw;max-height:85vh;object-fit:contain}
#pgOverlay .pg-lb-btn{position:absolute;background:transparent;border:0;cursor:pointer;padding:12px;color:#fff}
#pgOverlay .pg-lb-prev{left:12px}
#pgOverlay .pg-lb-next{right:12px}
#pgOverlay .pg-lb-close{top:12px;right:12px;line-height:1}

/* Icon masks for easy color control */
.pg-icon{display:inline-block;width:28px;height:28px;background-color:#fff;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transition:background-color .2s ease}
.pg-icon-left{-webkit-mask-image:url('/assets/Images/icons/left.svg');mask-image:url('/assets/Images/icons/left.svg')}
.pg-icon-right{-webkit-mask-image:url('/assets/Images/icons/right.svg');mask-image:url('/assets/Images/icons/right.svg')}
.pg-icon-close{-webkit-mask-image:url('/assets/Images/icons/icon-close.svg');mask-image:url('/assets/Images/icons/icon-close.svg')}

#pgOverlay .pg-lb-btn:hover .pg-icon{background-color: var(--color-accent-2)}

@media (min-width:768px){.pg-icon{width:36px;height:36px}}