/* Classical — design-system tokens and component classes. Copied verbatim from the original design system (_ds/classical.../styles.css) so the site keeps its exact visual identity. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600&family=Lora:wght@400;600&display=swap');

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201f1d;
  --color-accent: #b68235;
  --color-accent-2: #ac803e;
  --color-divider: color-mix(in srgb, #201f1d 16%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff3e4;
  --color-accent-200: #ffe3bf;
  --color-accent-300: #facb8d;
  --color-accent-400: #e1ad66;
  --color-accent-500: #c28d41;
  --color-accent-600: #a06f24;
  --color-accent-700: #7d5411;
  --color-accent-800: #5a3b0a;
  --color-accent-900: #3a270d;

  --color-accent-2-100: #fff3e4;
  --color-accent-2-200: #ffe3be;
  --color-accent-2-300: #f5cd96;
  --color-accent-2-400: #dbaf70;
  --color-accent-2-500: #bc8f4e;
  --color-accent-2-600: #9b7232;
  --color-accent-2-700: #79561f;
  --color-accent-2-800: #573d14;
  --color-accent-2-900: #382810;

  --font-heading: "Cormorant Garamond", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Lora", system-ui, sans-serif;

  --space-1: 4.6px;
  --space-2: 9.2px;
  --space-3: 13.8px;
  --space-4: 18.4px;
  --space-6: 27.6px;
  --space-8: 36.8px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
.site-shell {
  min-height: 100vh;
  background-color: var(--color-bg);
  color: var(--color-text);
  position: relative;
}

/* Southern Saudi Heritage Geometric Borders */

/* 1. Desktop & Laptop View (>1024px): Positioned at the OUTER EDGES OF THE SCREEN */
@media (min-width: 1025px) {
  .site-shell::before,
  .site-shell::after {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    width: 55px;
    pointer-events: none;
    z-index: 1;
  }

  .site-shell::before {
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='55' height='120' viewBox='0 0 55 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23b68235' stroke-width='1' stroke-opacity='0.42'%3E%3Cline x1='0' y1='0' x2='0' y2='120' stroke='%23b68235' stroke-opacity='0.65' stroke-width='2'/%3E%3Cline x1='6' y1='0' x2='6' y2='120' stroke='%23b68235' stroke-opacity='0.25' stroke-width='0.75' stroke-dasharray='3,3'/%3E%3Cpath d='M0 10 L25 30 L0 50'/%3E%3Cpath d='M0 20 L16 30 L0 40'/%3E%3Cpath d='M0 70 L25 90 L0 110'/%3E%3Cpath d='M0 80 L16 90 L0 100'/%3E%3Cpolygon points='25,30 38,30 31.5,23.5' fill='%23b68235' fill-opacity='0.18' stroke='%23b68235' stroke-width='0.8'/%3E%3Cpolygon points='25,90 38,90 31.5,83.5' fill='%23b68235' fill-opacity='0.18' stroke='%23b68235' stroke-width='0.8'/%3E%3Cline x1='0' y1='60' x2='28' y2='60' stroke-width='1.2'/%3E%3Ccircle cx='35' cy='60' r='3' fill='%23b68235' fill-opacity='0.2'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-position: left top;
    background-size: 55px auto;
  }

  .site-shell::after {
    right: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='55' height='120' viewBox='0 0 55 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23b68235' stroke-width='1' stroke-opacity='0.42'%3E%3Cline x1='55' y1='0' x2='55' y2='120' stroke='%23b68235' stroke-opacity='0.65' stroke-width='2'/%3E%3Cline x1='49' y1='0' x2='49' y2='120' stroke='%23b68235' stroke-opacity='0.25' stroke-width='0.75' stroke-dasharray='3,3'/%3E%3Cpath d='M55 10 L30 30 L55 50'/%3E%3Cpath d='M55 20 L39 30 L55 40'/%3E%3Cpath d='M55 70 L30 90 L55 110'/%3E%3Cpath d='M55 80 L39 90 L55 100'/%3E%3Cpolygon points='30,30 17,30 23.5,23.5' fill='%23b68235' fill-opacity='0.18' stroke='%23b68235' stroke-width='0.8'/%3E%3Cpolygon points='30,90 17,90 23.5,83.5' fill='%23b68235' fill-opacity='0.18' stroke='%23b68235' stroke-width='0.8'/%3E%3Cline x1='55' y1='60' x2='27' y2='60' stroke-width='1.2'/%3E%3Ccircle cx='20' cy='60' r='3' fill='%23b68235' fill-opacity='0.2'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-position: right top;
    background-size: 55px auto;
  }

  /* Make sure hero, dark headers, dark CTAs, and footer stay cleanly above the borders */
  .hero-section,
  header,
  footer,
  .site-cta-banner,
  section[style*="background:#181310"],
  section[style*="background: #181310"],
  section[style*="background:#14100e"],
  section[style*="background: #14100e"] {
    position: relative !important;
    z-index: 10 !important;
  }
}

/* 2. Tablet & Mobile View (<=1024px): Positioned on Content Container */
@media (max-width: 1024px) {
  .light-content-framed {
    position: relative;
  }

  .light-content-framed::before,
  .light-content-framed::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 5;
  }

  .light-content-framed::before {
    left: 0;
    width: 28px;
    background-image: url("data:image/svg+xml,%3Csvg width='55' height='120' viewBox='0 0 55 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23b68235' stroke-width='1' stroke-opacity='0.42'%3E%3Cline x1='0' y1='0' x2='0' y2='120' stroke='%23b68235' stroke-opacity='0.65' stroke-width='2'/%3E%3Cline x1='6' y1='0' x2='6' y2='120' stroke='%23b68235' stroke-opacity='0.25' stroke-width='0.75' stroke-dasharray='3,3'/%3E%3Cpath d='M0 10 L25 30 L0 50'/%3E%3Cpath d='M0 20 L16 30 L0 40'/%3E%3Cpath d='M0 70 L25 90 L0 110'/%3E%3Cpath d='M0 80 L16 90 L0 100'/%3E%3Cpolygon points='25,30 38,30 31.5,23.5' fill='%23b68235' fill-opacity='0.18' stroke='%23b68235' stroke-width='0.8'/%3E%3Cpolygon points='25,90 38,90 31.5,83.5' fill='%23b68235' fill-opacity='0.18' stroke='%23b68235' stroke-width='0.8'/%3E%3Cline x1='0' y1='60' x2='28' y2='60' stroke-width='1.2'/%3E%3Ccircle cx='35' cy='60' r='3' fill='%23b68235' fill-opacity='0.2'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-position: left top;
    background-size: 28px auto;
    opacity: 0.9;
  }

  .light-content-framed::after {
    right: 0;
    width: 28px;
    background-image: url("data:image/svg+xml,%3Csvg width='55' height='120' viewBox='0 0 55 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23b68235' stroke-width='1' stroke-opacity='0.42'%3E%3Cline x1='55' y1='0' x2='55' y2='120' stroke='%23b68235' stroke-opacity='0.65' stroke-width='2'/%3E%3Cline x1='49' y1='0' x2='49' y2='120' stroke='%23b68235' stroke-opacity='0.25' stroke-width='0.75' stroke-dasharray='3,3'/%3E%3Cpath d='M55 10 L30 30 L55 50'/%3E%3Cpath d='M55 20 L39 30 L55 40'/%3E%3Cpath d='M55 70 L30 90 L55 110'/%3E%3Cpath d='M55 80 L39 90 L55 100'/%3E%3Cpolygon points='30,30 17,30 23.5,23.5' fill='%23b68235' fill-opacity='0.18' stroke='%23b68235' stroke-width='0.8'/%3E%3Cpolygon points='30,90 17,90 23.5,83.5' fill='%23b68235' fill-opacity='0.18' stroke='%23b68235' stroke-width='0.8'/%3E%3Cline x1='55' y1='60' x2='27' y2='60' stroke-width='1.2'/%3E%3Ccircle cx='20' cy='60' r='3' fill='%23b68235' fill-opacity='0.2'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-position: right top;
    background-size: 28px auto;
    opacity: 0.9;
  }
}

@media (max-width: 768px) {
  .light-content-framed::before,
  .light-content-framed::after {
    width: 20px;
    background-size: 20px auto;
    opacity: 0.95;
  }
}

/* Testimonial Cards Clean Styling */
.testimonial-card {
  position: relative;
  background: var(--color-bg) !important;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.site-shell-ar { font-family:'Noto Naskh Arabic', var(--font-body); }
.site-shell-en { font-family:var(--font-body); }
.site-nav-link { color:var(--color-text); }
.site-nav-link.is-active { color:var(--color-accent-700); }
.request-card { align-items:center; text-align:center; }
.request-card .tag { margin-inline:auto; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.plate{filter:sepia(0.22) saturate(0.82) contrast(1.05);box-sizing:border-box;
  border:6px solid var(--color-surface);outline:1px solid var(--color-divider)}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { color: var(--color-accent); border-color: var(--color-accent); }
.btn-primary:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: transparent;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: transparent; border: 1px solid var(--color-divider);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg); border: 1px solid var(--color-divider);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — image-slot replacement: plain <img>/div box that fills its container — */
.img-slot { display: block; width: 100%; height: 100%; object-fit: cover; }
.img-slot-empty {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  background: var(--color-surface); color: var(--color-neutral-600); font-size: 13px; text-align: center; padding: 12px;
}

/* — full-site responsiveness safety net —
   Pages use inline `grid-template-columns: repeat(auto-fit, minmax(Npx, 1fr))`
   tracks; on very narrow phones (<= 480px) some of those px minimums (up to
   320px) can exceed the available content width and force horizontal
   scrolling. Force every such inline grid to a single column at that
   breakpoint so no page overflows on any phone, regardless of the inline
   minmax value used. */
@media (max-width: 480px) {
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}
img, iframe, video { max-width: 100%; }
html { overflow-x: hidden; }

/* — public header: mobile dropdown menu —
   The desktop inline nav (.site-nav) hides on narrow screens in favor of a
   hamburger button (.nav-toggle) that opens a full-width dropdown
   (.mobile-nav) containing the same page links. The language switch link
   stays outside the dropdown at every width, as requested. */
.nav-toggle{display:none;background:transparent;border:1px solid var(--color-divider);border-radius:var(--radius-sm);width:38px;height:38px;align-items:center;justify-content:center;cursor:pointer;font-size:18px;line-height:1;color:var(--color-text);}
.mobile-nav{display:none;flex-direction:column;background:var(--color-bg);border-bottom:1px solid var(--color-divider);}
.mobile-nav.open{display:flex;}
.mobile-nav a{padding:13px clamp(20px,5vw,64px);font-size:15px;border-top:1px solid var(--color-divider);}
@media (max-width: 760px) {
  .site-nav{display:none !important;}
  .nav-toggle{display:flex;}
  .mobile-nav{position:fixed;top:78px;left:0;right:0;z-index:9;align-items:center;text-align:center;max-height:calc(100vh - 78px);overflow-y:auto;box-shadow:0 8px 18px rgba(32,31,29,0.14);}
  .mobile-nav a{width:100%;padding-inline:20px;text-align:center;}
  .site-shell > section,
  .site-shell > div:not(.mobile-nav):not(.site-footer){text-align:center;}
  .site-shell > section [style*="text-align:justify"],
  .site-shell > div:not(.mobile-nav):not(.site-footer) [style*="text-align:justify"]{text-align:center !important;}
  .site-footer > div:first-child{text-align:center;}
  .site-footer > div:first-child > div{display:flex;flex-direction:column;align-items:center;text-align:center;}
  .site-footer > div:first-child > div > div{align-items:center !important;justify-content:center !important;text-align:center !important;}
  .site-footer .footer-contact-info{align-items:center !important;text-align:center !important;width:100%;}
  .site-footer .footer-social-links{justify-content:center !important;width:100%;}
  .property-gallery{overflow:hidden;}
  .property-gallery .gallery-arrow-next{right:4px !important;}
  .property-gallery .gallery-arrow-prev{left:4px !important;}
  .hero-video{transform:scale(1.16);}
}

/* — admin dropzones: drag-and-drop file pickers for property photos/video — */
.dropzone{
  border:2px dashed var(--color-divider); border-radius:var(--radius-md); padding:20px;
  text-align:center; cursor:pointer; background:color-mix(in srgb, var(--color-text) 3%, transparent);
  transition:border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.dragover{ border-color:var(--color-accent); background:color-mix(in srgb, var(--color-accent) 8%, transparent); }
.dropzone-hint{ font-size:12px; color:var(--color-neutral-600); }
.dropzone-list{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; justify-content:center; }
.dropzone-file{
  font-size:11px; background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-sm);
  padding:4px 10px; color:var(--color-text);
}

/* — GSAP & ScrollTrigger Animations & Micro-interactions — */
.gsap-word {
  display: inline-block;
  will-change: transform, opacity;
}
.gsap-word-space {
  display: inline-block;
  width: 0.28em;
}
.hero-content-box {
  will-change: transform, opacity;
}
.card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
#readingProgressBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent-700), var(--color-accent), var(--color-accent-300));
  z-index: 99999;
  width: 0%;
  pointer-events: none;
  transition: width 0.08s linear;
}

/* — Golden Shimmer & Luxury Gleam Effects — */
.gold-shimmer {
  background: linear-gradient(
    110deg,
    var(--color-accent-500) 0%,
    var(--color-accent-300) 25%,
    #ffffff 50%,
    var(--color-accent-300) 75%,
    var(--color-accent-500) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 5s ease-in-out infinite;
  display: inline-block;
}

@keyframes goldShimmer {
  0%, 15% {
    background-position: 200% center;
  }
  60%, 100% {
    background-position: -200% center;
  }
}

.gold-shimmer-badge {
  position: relative;
  overflow: hidden;
}

.gold-shimmer-badge::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    transparent 35%,
    rgba(255, 238, 205, 0.45) 50%,
    transparent 65%
  );
  transform: rotate(25deg);
  animation: badgeShine 5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes badgeShine {
  0%, 30% {
    transform: translate(-100%, -100%) rotate(25deg);
  }
  60%, 100% {
    transform: translate(100%, 100%) rotate(25deg);
  }
}

/* Lenis Recommended CSS for smooth scrolling */
html.lenis, html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* — Universal Interactive Carousel Sliders for Desktop, Laptop & Mobile — */
.featured-properties-slider,
.services-slider,
.values-slider,
.cities-slider,
.team-slider,
.services-page-slider,
.process-slider,
.packages-slider,
.traits-slider,
.properties-slider,
.requests-slider,
.blog-slider,
.testimonials-slider,
.testi-mobile-slider {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth !important;
  gap: 24px !important;
  padding: 12px 6px 20px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  cursor: grab;
  user-select: none;
}

.featured-properties-slider.is-grabbing,
.services-slider.is-grabbing,
.values-slider.is-grabbing,
.cities-slider.is-grabbing,
.team-slider.is-grabbing,
.services-page-slider.is-grabbing,
.process-slider.is-grabbing,
.packages-slider.is-grabbing,
.traits-slider.is-grabbing,
.properties-slider.is-grabbing,
.requests-slider.is-grabbing,
.blog-slider.is-grabbing,
.testimonials-slider.is-grabbing,
.testi-mobile-slider.is-grabbing {
  cursor: grabbing !important;
  scroll-snap-type: none !important;
  scroll-behavior: auto !important;
}

.featured-properties-slider::-webkit-scrollbar,
.services-slider::-webkit-scrollbar,
.values-slider::-webkit-scrollbar,
.cities-slider::-webkit-scrollbar,
.team-slider::-webkit-scrollbar,
.services-page-slider::-webkit-scrollbar,
.process-slider::-webkit-scrollbar,
.packages-slider::-webkit-scrollbar,
.traits-slider::-webkit-scrollbar,
.properties-slider::-webkit-scrollbar,
.requests-slider::-webkit-scrollbar,
.blog-slider::-webkit-scrollbar,
.testimonials-slider::-webkit-scrollbar,
.testi-mobile-slider::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Card sizing on Desktop & Laptop */
.services-slider > *,
.services-page-slider > *,
.values-slider > *,
.cities-slider > *,
.team-slider > *,
.traits-slider > *,
.properties-slider > *,
.requests-slider > *,
.testi-mobile-slider > * {
  flex: 0 0 340px !important;
  max-width: 380px !important;
  scroll-snap-align: start !important;
  box-sizing: border-box !important;
}

.featured-properties-slider > * {
  flex: 0 0 380px !important;
  max-width: 420px !important;
  scroll-snap-align: start !important;
  box-sizing: border-box !important;
}

.testimonials-slider > * {
  flex: 0 0 360px !important;
  max-width: 400px !important;
  scroll-snap-align: start !important;
  box-sizing: border-box !important;
}

.process-slider > * {
  flex: 0 0 280px !important;
  max-width: 320px !important;
  scroll-snap-align: start !important;
  box-sizing: border-box !important;
}

.packages-slider > * {
  flex: 0 0 320px !important;
  max-width: 350px !important;
  scroll-snap-align: start !important;
  box-sizing: border-box !important;
}

.blog-slider > * {
  flex: 0 0 360px !important;
  max-width: 400px !important;
  scroll-snap-align: start !important;
  box-sizing: border-box !important;
}

/* Universal slider controls (Dots only, exactly like mobile) */
.mobile-slider-dots,
.slider-controls-wrap {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 28px !important;
}

.slider-dots-list {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-divider);
  transition: all 0.25s ease;
  cursor: pointer;
}

.slider-dot.active {
  width: 26px;
  border-radius: 6px;
  background: var(--color-accent);
}

@media (max-width: 1024px) {
  .mobile-only {
    display: block !important;
  }
  .desktop-only {
    display: none !important;
  }

  .services-slider,
  .featured-properties-slider,
  .values-slider,
  .cities-slider,
  .team-slider,
  .services-page-slider,
  .process-slider,
  .packages-slider,
  .traits-slider,
  .properties-slider,
  .requests-slider,
  .blog-slider,
  .testimonials-slider,
  .testi-mobile-slider {
    gap: 16px !important;
    padding: 8px clamp(16px, 4vw, 32px) 18px !important;
    margin-inline: calc(-1 * clamp(20px, 5vw, 64px)) !important;
  }

  .services-slider > *,
  .featured-properties-slider > *,
  .values-slider > *,
  .cities-slider > *,
  .team-slider > *,
  .services-page-slider > *,
  .traits-slider > *,
  .properties-slider > *,
  .requests-slider > *,
  .testimonials-slider > *,
  .testi-mobile-slider > * {
    flex: 0 0 290px !important;
    max-width: 82vw !important;
  }

  .blog-slider > * {
    flex: 0 0 310px !important;
    max-width: 84vw !important;
  }

  .packages-slider > * {
    flex: 0 0 300px !important;
    max-width: 84vw !important;
  }

  .process-slider > * {
    flex: 0 0 240px !important;
    max-width: 75vw !important;
  }

  .testi-mobile-slider-wrap {
    margin-top: 10px;
  }
  .testi-mobile-card {
    flex: 0 0 340px !important;
    max-width: 86vw !important;
    padding: 32px 24px !important;
    background: var(--color-bg) !important;
    border-top: 2px solid var(--color-accent) !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
}