/* Site layer on top of the exported Framer styles (styles.css).
   Brand: Saudi green + desert gold + sand. Change the brand here, not in styles.css. */

html body {
  --cn-green: #0b3d2c;
  --cn-green-2: #006c35;
  --cn-gold: #d4a64a;
  --cn-sand: #f3ede0;
  --cn-cream: #fff9ee;

  --token-c8809533-d74e-4474-af14-ef3a211efd13: var(--cn-green);      /* primary (was black) */
  --token-9c090586-7a62-43ef-af9a-db53933ce9ee: #1b231f;              /* body text */
  --token-44dd7634-948b-4475-884c-16fbad7c474d: #fffdf6;              /* light surface */
  --token-cef92a4d-d47e-40c4-9eae-b4ff7c06350d: var(--cn-sand);       /* section background */
  --token-ff2a6766-d9d5-4a1d-a552-e969fba53510: var(--cn-cream);      /* text on dark */
  --token-230c3248-009b-4ccd-bda2-d16c47a758d2: var(--cn-gold);       /* accent */
  --token-37033d4e-1ccc-4cf2-bb27-e6ad4c96fbc3: #dcefe3;              /* light green tag */
  --token-bac38a89-9389-4baf-9908-6689e40f8ea3: var(--cn-green-2);    /* green tag text */
  --token-b8e91d38-56d6-4914-9d4c-c8d64604eb8d: rgba(11, 40, 30, .5);
  --token-f688b0c3-89d4-41da-82a2-fdf0869df82e: rgba(10, 30, 22, .8);
  background: var(--token-44dd7634-948b-4475-884c-16fbad7c474d);
}

html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 90px; }
::selection { background: var(--cn-gold); color: var(--cn-green); }

/* ------------------------------------------------------------------ preloader */
html.cn-loading { overflow: hidden; animation: cn-unlock 0s 8s forwards; }
@keyframes cn-unlock { to { overflow: auto; } }

#cn-preloader {
  position: fixed; inset: 0; z-index: 2147483000;
  display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 0%, #135a40 0%, var(--cn-green) 60%, #072a1e 100%);
  color: var(--cn-cream);
  transition: opacity .7s cubic-bezier(.65, 0, .35, 1), visibility .7s;
  animation: cn-pre-failsafe 0s 8s forwards; /* never block the page, even if JS fails */
}
@keyframes cn-pre-failsafe { to { opacity: 0; visibility: hidden; } }
html.cn-loaded #cn-preloader { opacity: 0; visibility: hidden; }
.cn-pre-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cn-pre-mark {
  width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center;
  background: rgba(212, 166, 74, .14); color: var(--cn-gold);
  animation: cn-pre-pulse 1.6s ease-in-out infinite;
}
.cn-pre-mark svg { width: 38px; height: 38px; }
@keyframes cn-pre-pulse { 50% { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(212, 166, 74, .25); } }
.cn-pre-name { font: 700 22px/1 "Inter Display", "Inter", system-ui, sans-serif; letter-spacing: .02em; }
.cn-pre-bar { width: 180px; height: 2px; border-radius: 2px; background: rgba(255, 249, 238, .15); overflow: hidden; }
.cn-pre-bar i { display: block; height: 100%; width: 0; background: var(--cn-gold); transition: width .3s ease; }
.cn-pre-count { font: 500 12px/1 "Inter", system-ui, sans-serif; letter-spacing: .12em; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .cn-pre-mark { animation: none; } }

/* ------------------------------------------------------------------ hero */
/* template blurred the whole hero photo; keep it sharp, darken softly for legible text */
.framer-DEZ00 .framer-13q4spt {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background: linear-gradient(180deg, rgba(7, 30, 22, .45) 0%, rgba(7, 30, 22, .1) 40%, rgba(7, 30, 22, .55) 100%);
}
.framer-DEZ00 .framer-1fb3w61 { filter: brightness(.9) !important; }

/* buy. sell. rent. hover preview card */
.cn-hero-preview {
  position: fixed; left: 0; top: 0; z-index: 50; width: 260px; pointer-events: none;
  border-radius: 16px; overflow: hidden; background: #fffdf6; color: var(--cn-green);
  box-shadow: 0 24px 60px rgba(4, 20, 14, .35);
  opacity: 0; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(.85) rotate(-4deg);
  transition: opacity .3s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}
.cn-hero-preview.is-on { opacity: 1; transform: translate3d(var(--x, 0), var(--y, 0), 0) scale(1) rotate(0); }
.cn-hero-preview img { display: block; width: 100%; height: 160px; object-fit: cover; }
.cn-hero-preview div { padding: 14px 16px 16px; }
.cn-hero-preview b { display: block; font: 600 17px/1.2 "Inter Display", "Inter", system-ui, sans-serif; }
.cn-hero-preview span { display: block; margin-top: 4px; font: 500 13px/1.4 "Inter", system-ui, sans-serif; opacity: .7; }
.cn-hero-preview em { display: inline-block; margin-top: 10px; padding: 4px 10px; border-radius: 99px; background: var(--cn-gold); color: var(--cn-green); font: 700 11px/1.4 "Inter", system-ui, sans-serif; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
section[data-framer-name="Hero"] h1 a { transition: color .3s ease; }

/* ------------------------------------------------------------------ process step numbers */
/* timeline boxes 01-04 (same as the template: dim until reached, then lit and stays lit).
   Green box kept; number is white; the step just reached glows. The glow stays inside the box
   because the rows clip overflow (that clipping is also what hides the not-yet-drawn line). */
[data-framer-name="Timeline Wrapper"] .framer-jAo4H { transition: box-shadow .6s ease; }
[data-framer-name="Timeline Wrapper"] .framer-jAo4H p { --framer-text-color: #fff !important; color: #fff !important; }
[data-framer-name="Timeline Wrapper"] .framer-jAo4H .framer-11gto1 { opacity: .4 !important; transition: opacity .45s ease, text-shadow .6s ease; }
[data-framer-name="Timeline Wrapper"] .framer-jAo4H.is-lit .framer-11gto1 { opacity: 1 !important; }
[data-framer-name="Timeline Wrapper"] .framer-jAo4H.is-active { box-shadow: inset 0 0 0 2px rgba(212, 166, 74, .9), inset 0 0 18px rgba(0, 200, 100, .55); }
[data-framer-name="Timeline Wrapper"] .framer-jAo4H.is-active .framer-11gto1 { text-shadow: 0 0 8px rgba(255, 255, 255, .95), 0 0 18px rgba(255, 221, 120, .9) !important; }
[data-framer-name="Progress bar"] > [data-framer-name="Line"] { will-change: transform; }

/* ------------------------------------------------------------------ logo */
.framer-9WvNT .framer-1ny7658 { width: auto !important; min-width: 152px; overflow: visible !important; }
.framer-9WvNT .framer-1l3sg2a { display: flex !important; align-items: center; }
.cn-logo { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--cn-green); }
.cn-logo-mark { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--cn-green); color: var(--cn-gold); flex: none; }
.cn-logo-mark svg { width: 24px; height: 24px; }
.cn-logo-text { font: 700 19px/1 "Inter Display", "Inter", system-ui, sans-serif; letter-spacing: -.01em; }

/* primary dark button: inline black in the export -> brand green */
.framer-WnmQR[data-framer-name="Dark"] { background-color: var(--cn-green) !important; }
/* listing prices ("SAR 12,500,000") stay on one line */
[data-framer-name="Price Wrapper"] p { white-space: nowrap; }

/* ------------------------------------------------------------------ footer */
.cn-footer-name {
  margin: 0; width: 100% !important; height: auto !important; white-space: nowrap;
  font: 600 clamp(44px, 11vw, 220px)/1 "Inter Display", "Inter", system-ui, sans-serif;
  letter-spacing: -.045em; color: var(--cn-cream);
}
/* newsletter column: stack the form and the contact details */
.framer-TcZFT .framer-55eskl { flex-direction: column !important; gap: 30px !important; }
.framer-TcZFT .framer-1r3ic0g { flex: none !important; width: 100% !important; }
.cn-contact { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.cn-contact-row {
  display: flex; align-items: flex-start; gap: 12px; text-decoration: none; color: var(--cn-cream);
  font: 500 15px/1.4 "Inter", system-ui, sans-serif;
}
.cn-contact-row small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .6; margin-bottom: 2px; }
.cn-ico { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(212, 166, 74, .16); color: var(--cn-gold); transition: background .3s, color .3s, transform .3s; }
.cn-ico svg { width: 17px; height: 17px; }
a.cn-contact-row:hover .cn-ico { background: var(--cn-gold); color: var(--cn-green); transform: rotate(-8deg) scale(1.05); }
a.cn-contact-row:hover { color: var(--cn-gold); }

/* ------------------------------------------------------------------ hover states (were JS variants) */
/* rolling letters in nav links and buttons */
p[class^="rolling-text-inner"] span { transition: transform .55s cubic-bezier(.65, 0, .35, 1); }
a:hover p[class^="rolling-text-inner"] span,
button:hover p[class^="rolling-text-inner"] span { transform: translateY(calc(-1 * var(--line-height-abs, 1.2em))) !important; }

/* double-arrow slide used in every button / footer link */
.framer-n2Eum .framer-lk72u0-container,
.framer-n2Eum .framer-1pnxtwi-container { transition: transform .5s cubic-bezier(.65, 0, .35, 1); }
a:hover .framer-n2Eum .framer-lk72u0-container, button:hover .framer-n2Eum .framer-lk72u0-container,
a:hover .framer-n2Eum .framer-1pnxtwi-container, button:hover .framer-n2Eum .framer-1pnxtwi-container { transform: translateX(14px); }

/* arrow colour by context (light on dark buttons/footer, green on light) */
.framer-n2Eum svg, .framer-n2Eum svg * { color: var(--cn-arrow, currentColor) !important; }
.framer-8kmnS, .framer-FZJIW, .framer-kEwaK, .framer-WnmQR[data-framer-name="Dark"] { --cn-arrow: var(--cn-cream); }
.framer-WnmQR[data-framer-name="Light"], .framer-1k2482m-container { --cn-arrow: var(--cn-green); }

/* buttons */
.framer-WnmQR, .framer-FZJIW, [data-reset="button"] { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s, filter .35s; }
.framer-WnmQR:hover, .framer-FZJIW:hover { transform: translateY(-2px); filter: brightness(1.08); }
.framer-WnmQR:active, .framer-FZJIW:active { transform: translateY(0) scale(.98); }

/* image zoom on every card link */
a [data-framer-background-image-wrapper] img { transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
a:hover [data-framer-background-image-wrapper] img { transform: scale(1.06); }
/* elements resized by the template's own .hover rules: animate them */
.framer-13ai5fx, .framer-62j14u, .framer-dxdd0d, .framer-17uev5u, .framer-1xi0xlq, .framer-Ev02C.framer-17o9taw, .framer-1fbr1af {
  transition: width .7s cubic-bezier(.2, .7, .2, 1), height .7s cubic-bezier(.2, .7, .2, 1), top .7s cubic-bezier(.2, .7, .2, 1), left .7s cubic-bezier(.2, .7, .2, 1), padding .35s, gap .35s;
}

/* footer links */
.framer-8kmnS .framer-1isv295 { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.framer-8kmnS:hover .framer-1isv295 { transform: translateX(6px); }
.framer-8kmnS .framer-1xi0xlq { background: var(--cn-gold) !important; }

/* social icons */
.framer-Ev02C { transition: background-color .3s, transform .3s; }
.framer-Ev02C:hover { transform: translateY(-3px); }

/* nav links: subtle pill */
.framer-Mwi49 .framer-1x1437e { transition: background-color .3s; }
.framer-Mwi49:hover .framer-1x1437e { background-color: rgba(11, 61, 44, .06) !important; }

/* service rows + faq rows */
.framer-u1OE5, .framer-alGVT { transition: background-color .35s; }
.framer-u1OE5:hover, .framer-alGVT:hover { background-color: rgba(212, 166, 74, .08); }
.framer-u1OE5 .framer-1jv42l0, .framer-alGVT .framer-1b0kzzj { transition: transform .45s cubic-bezier(.2, .7, .2, 1), background-color .35s; }
.framer-u1OE5:hover .framer-1jv42l0 { transform: rotate(45deg); }

/* ------------------------------------------------------------------ faq accordion */
.framer-alGVT .framer-gqkcaq { transition: height .45s cubic-bezier(.65, 0, .35, 1); }
.framer-alGVT .framer-1hxfd3l-container { transition: transform .45s cubic-bezier(.65, 0, .35, 1); }
.framer-alGVT:not(.framer-v-f1w3mf) .framer-1hxfd3l-container { transform: rotate(45deg); }
.framer-alGVT:not(.framer-v-f1w3mf) .framer-1b0kzzj { background-color: var(--cn-gold); }

/* ------------------------------------------------------------------ mobile menu */
.framer-9WvNT .framer-f7jq4i, .framer-9WvNT .framer-148vcde { transition: transform .4s cubic-bezier(.65, 0, .35, 1), top .4s, width .4s, left .4s; }
.framer-9WvNT.framer-v-17fw1af .framer-f7jq4i { transform: rotate(-45deg) !important; }
.framer-9WvNT.framer-v-17fw1af .framer-148vcde { transform: rotate(45deg) !important; }
.framer-9WvNT.framer-v-1wwugz2 .framer-qeelea, .framer-9WvNT.framer-v-17fw1af .framer-qeelea { transition: filter .5s ease, opacity .5s ease; }
.framer-9WvNT.framer-v-17fw1af .framer-qeelea { filter: none !important; -webkit-filter: none !important; }

/* ------------------------------------------------------------------ desktop "Explore" dropdown */
.framer-79cls7-container, .framer-amie0o-container, .framer-mn8aha-container {
  opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .55s cubic-bezier(.2, .7, .2, 1);
}
.cn-dd-open .framer-79cls7-container, .cn-dd-open .framer-amie0o-container, .cn-dd-open .framer-mn8aha-container { opacity: 1; transform: none; }
.cn-dd-open .framer-amie0o-container { transition-delay: .06s; }
.cn-dd-open .framer-mn8aha-container { transition-delay: .12s; }

/* ------------------------------------------------------------------ testimonial slider */
section.cn-slider > div { overflow: hidden; border-radius: 18px; }
section.cn-slider ul { transition: transform .8s cubic-bezier(.65, 0, .35, 1); cursor: grab; }
section.cn-slider ul:active { cursor: grabbing; }
section.cn-slider [aria-label^="Scroll to page"] div { transition: opacity .3s, width .3s; }
section.cn-slider [aria-label^="Scroll to page"].is-active div { opacity: 1 !important; width: 20px !important; border-radius: 8px !important; }

/* ------------------------------------------------------------------ forms */
.cn-form-note { margin-top: 10px; font: 500 14px/1.4 "Inter", system-ui, sans-serif; color: var(--cn-green-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}