/* ==========================================================================
   SVAR — shared look for every public page (company, real estate, listing).
   Soft luxury: limestone, ink and brass; editorial serif headlines; a
   floating glass menu; rounded photos; slow, smooth motion.
   Each site sets its own accent at the top of its stylesheet
   (company: brass, real estate: terracotta).
   ========================================================================== */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Palette */
    --white: #ffffff;
    --stone: #f4efe6;          /* limestone: page background */
    --stone-2: #ece5d8;        /* soft fills, placeholders */
    --line: #e4dccd;
    --line-soft: #ede6da;
    --ink: #14181f;            /* main text (turns ivory in dark mode) */
    --onyx: #14181f;           /* always dark: footer, price card, hero */
    --ink-2: #2b313b;
    --muted: #6a645a;
    --brass: #b08a4e;
    --brass-ink: #8a6a35;      /* brass dark enough for text on light backgrounds */
    --brass-light: #e2c796;    /* brass on dark photos */
    --brass-soft: #f4ebdc;
    --clay: #a6492b;           /* terracotta: real estate accent */
    --clay-ink: #8c3b21;
    --clay-light: #f0c9b8;
    --clay-soft: #f7e9e2;
    --on-ink: #f4efe6;
    --on-ink-muted: #bdb6a8;
    --wa-green: #25d366;
    --ok: #1f6b43;
    --err: #b0331f;

    /* Accent (each site overrides these) */
    --accent: var(--brass);
    --accent-ink: var(--brass-ink);
    --accent-light: var(--brass-light);
    --accent-soft: var(--brass-soft);
    --on-accent: var(--onyx);

    /* Glass */
    --glass: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.65);
    --blur: saturate(1.5) blur(16px);

    /* Shape */
    --r-sm: 12px;
    --r: 20px;
    --r-lg: 28px;
    --pill: 999px;
    --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.05);
    --shadow: 0 14px 36px rgba(20, 24, 31, 0.09);
    --shadow-lg: 0 26px 60px rgba(20, 24, 31, 0.18);
    --header-h: 62px;
    --header-gap: 14px;

    /* Motion: long, eased, never snappy */
    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* Type */
    --font: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
    --font-arabic: 'IBM Plex Sans Arabic', 'Noto Naskh Arabic', Tahoma, sans-serif;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    background: var(--stone);
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
body.no-scroll { overflow: hidden; }

/* Editorial serif for the big headings, clean sans for the rest */
h1, h2 { font-family: var(--font-serif); font-weight: 400; line-height: 1.05; letter-spacing: -0.015em; }
h1 em, h2 em, h1 i, h2 i { font-style: italic; }
h3, h4 { font-family: var(--font); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }

input, select, textarea, button { font-family: inherit; font-size: inherit; color: inherit; }
img { max-width: 100%; }

/* Arabic / Kurdish Sorani: one Arabic-script family everywhere, no
   letter-spacing (it breaks letter joining), a little more line height */
html[dir="rtl"] body,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4,
html[dir="rtl"] input, html[dir="rtl"] select, html[dir="rtl"] textarea, html[dir="rtl"] button { font-family: var(--font-arabic); }
html[dir="rtl"] h1, html[dir="rtl"] h2 { font-weight: 600; line-height: 1.35; }
html[dir="rtl"] * { letter-spacing: normal !important; }

a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible,
textarea:focus-visible, label:focus-visible, [tabindex]:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* --------------------------------------------------------------------------
   Buttons and chips
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 24px;
    border-radius: var(--pill);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease);
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .5s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(3px); }
html[dir="rtl"] .btn:hover svg { transform: translateX(-3px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { box-shadow: 0 10px 24px rgba(20, 24, 31, 0.16); }
.btn-primary[disabled] { opacity: .6; cursor: wait; transform: none; }
.btn-dark { background: var(--ink); color: var(--white); }
.btn-dark:hover { box-shadow: 0 10px 24px rgba(20, 24, 31, 0.22); }
.btn-outline { border-color: var(--line); color: var(--ink); background: var(--white); }
.btn-outline:hover { border-color: var(--ink); }
.btn-glass { background: var(--glass); border-color: var(--glass-border); color: var(--ink); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.btn-ghost-light { border-color: rgba(244, 239, 230, 0.55); color: var(--on-ink); }
.btn-ghost-light:hover { background: rgba(244, 239, 230, 0.14); }
html[dir="rtl"] .btn svg.flip { transform: scaleX(-1); }
html[dir="rtl"] .btn:hover svg.flip { transform: scaleX(-1) translateX(3px); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--pill);
    border: 1px solid var(--line-soft);
    background: var(--white);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease), transform .45s var(--ease);
}
.chip:hover { border-color: var(--ink); transform: translateY(-1px); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.chip svg { width: 16px; height: 16px; }

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--accent-ink);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; }

/* Section heading */
.section-head { max-width: 680px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(36px, 4vw, 54px); margin: 14px 0 12px; }
.section-head p { color: var(--muted); font-size: 17px; }

/* --------------------------------------------------------------------------
   Header: a frosted-glass pill floating at the top
   -------------------------------------------------------------------------- */
/* The header takes (menu height + gap) at the top of the page. Photo heroes
   pull themselves up underneath it (margin-top: var(--under-header)) so the
   glass menu floats over the photo. */
:root { --under-header: calc((var(--header-h) + var(--header-gap)) * -1); }
header {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: calc(var(--header-h) + var(--header-gap));
    padding: var(--header-gap) 16px 0;
    pointer-events: none;
}
.navbar {
    pointer-events: auto;
    position: relative;
    max-width: 1180px;
    margin: 0 auto;
    height: var(--header-h);
    padding: 0 8px 0 24px;
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: var(--pill);
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: 0 10px 34px rgba(20, 24, 31, 0.10);
}
html[dir="rtl"] .navbar { padding: 0 24px 0 8px; }
.logo {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    margin-inline-end: auto;
    line-height: 1;
    /* The logo is always English: keep it left-to-right in Arabic / Kurdish too */
    direction: ltr;
    unicode-bidi: isolate;
}
.logo span { color: var(--accent-ink); font-style: italic; }
.logo::after { content: "."; color: var(--accent); }
html[dir="rtl"] .logo { font-family: var(--font-serif); }

.lang-switcher select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236a645a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    color: var(--ink);
    border: 1px solid rgba(20, 24, 31, 0.12);
    border-radius: var(--pill);
    padding: 9px 32px 9px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .4s var(--ease);
}
html[dir="rtl"] .lang-switcher select { background-position: left 12px center; padding: 9px 14px 9px 32px; }
.lang-switcher select:hover { border-color: var(--ink); }

.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--ink);
    color: var(--white);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    flex: none;
}
.menu-toggle svg { width: 20px; height: 20px; }
.menu-toggle .i-close { display: none; }
header.menu-open .menu-toggle .i-open { display: none; }
header.menu-open .menu-toggle .i-close { display: inline-flex; }

/* Drop-down menu on small screens: a glass card under the pill */
.menu-panel {
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
    box-shadow: var(--shadow-lg);
}

/* --------------------------------------------------------------------------
   Photo frames (heroes) and glass panels
   -------------------------------------------------------------------------- */
.glass {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}

/* Hero headlines rise in when the page opens */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 1.1s var(--ease) both; }
.rise-2 { animation-delay: .12s; }
.rise-3 { animation-delay: .24s; }
.rise-4 { animation-delay: .36s; }

/* Gentle reveal while scrolling (motion.js adds .js-motion to <html>) */
.js-motion [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js-motion [data-reveal].is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Forms (contact and viewing requests)
   -------------------------------------------------------------------------- */
.inq-form { display: grid; gap: 14px; }
.inq-form label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.inq-form input,
.inq-form textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--white);
    color: var(--ink);
    font-size: 15px;
    transition: border-color .45s var(--ease), box-shadow .45s var(--ease), background-color .45s var(--ease);
}
.inq-form input:hover, .inq-form textarea:hover { border-color: #d3c9b7; }
.inq-form input:focus, .inq-form textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 5px var(--accent-soft);
}
.inq-form textarea { min-height: 116px; resize: vertical; }
.inq-form .btn { justify-self: start; }

/* Honeypot: invisible but still in the form. Clipped in place rather than
   pushed off-screen — a far-left offset becomes scrollable in RTL pages. */
.inq-form .hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.form-status { min-height: 22px; font-size: 14px; font-weight: 600; }
.form-status.ok  { color: var(--ok); }
.form-status.err { color: var(--err); }

/* --------------------------------------------------------------------------
   Image placeholder (no photo uploaded yet)
   -------------------------------------------------------------------------- */
.image-fallback-box {
    width: 100%;
    min-height: 360px;
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, #e6dfd1 0%, #cfc3ae 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer { margin: 0 10px 10px; border-radius: var(--r-lg); background: var(--onyx); color: var(--on-ink-muted); padding: 36px 0; font-size: 14px; }
footer .container,
footer .footer-inner { max-width: 1240px; margin: 0 auto; padding: 0 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
footer a { color: var(--on-ink); text-decoration: none; font-weight: 600; transition: color .4s var(--ease); }
footer a:hover { color: var(--accent-light); }

/* --------------------------------------------------------------------------
   Small screens and reduced motion
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
    :root { --header-h: 58px; --header-gap: 10px; }
    header { padding: var(--header-gap) 10px 0; }
    .navbar { padding: 0 6px 0 18px; gap: 8px; }
    html[dir="rtl"] .navbar { padding: 0 18px 0 6px; }
    .container { padding: 0 16px; }
    .logo { font-size: 23px; }
    .lang-switcher select { padding: 8px 26px 8px 12px; background-position: right 9px center; font-size: 12.5px; }
    html[dir="rtl"] .lang-switcher select { padding: 8px 12px 8px 26px; background-position: left 9px center; }
    .section-head p { font-size: 16px; }
    footer { margin: 0 6px 6px; border-radius: 22px; }
    footer .container, footer .footer-inner { padding: 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .js-motion [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Sun / moon button in the menu
   -------------------------------------------------------------------------- */
.theme-toggle {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 50%;
    border: 1px solid rgba(20, 24, 31, 0.12);
    background: transparent;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color .4s var(--ease), transform .6s var(--ease);
}
.theme-toggle:hover { border-color: var(--ink); transform: rotate(-18deg); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .i-sun { display: none; }
html.dark .theme-toggle .i-sun { display: block; }
html.dark .theme-toggle .i-moon { display: none; }
@media (max-width: 820px) { .theme-toggle { width: 38px; height: 38px; } }

/* Soft cross-fade when the visitor switches (theme.js adds this for a moment) */
html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
    transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease), box-shadow .6s var(--ease) !important;
}

/* ==========================================================================
   Dark mode (theme.js adds class "dark" to <html>)
   Onyx surfaces, warm ivory text; brass and terracotta lifted a little.
   ========================================================================== */
html.dark {
    color-scheme: dark;
    --white: #1c2027;          /* cards and panels */
    --stone: #121418;          /* page background, soft fills */
    --stone-2: #252a33;
    --line: rgba(255, 255, 255, 0.12);
    --line-soft: rgba(255, 255, 255, 0.07);
    --ink: #ede7dc;            /* text */
    --ink-2: #d4cdc0;
    --muted: #a39c90;
    --brass: #cba66b;
    --brass-ink: #d8b77e;
    --brass-soft: rgba(203, 166, 107, 0.14);
    --clay: #c2603f;
    --clay-ink: #e8957a;
    --clay-soft: rgba(194, 96, 63, 0.18);
    --ok: #6fcf97;
    --err: #f08a76;
    --glass: rgba(28, 32, 39, 0.74);
    --glass-border: rgba(255, 255, 255, 0.09);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 26px 60px rgba(0, 0, 0, 0.55);
}
html.dark .navbar { box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35); }
html.dark .lang-switcher select { border-color: rgba(255, 255, 255, 0.14); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a39c90' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
html.dark .lang-switcher select option { background: #1c2027; color: #ede7dc; }
html.dark .theme-toggle { border-color: rgba(255, 255, 255, 0.14); }
html.dark .menu-panel { background: rgba(28, 32, 39, 0.96); }
html.dark .inq-form input:hover, html.dark .inq-form textarea:hover { border-color: rgba(255, 255, 255, 0.22); }
html.dark .inq-form input, html.dark .inq-form textarea { background: #151820; }
html.dark .image-fallback-box { background: linear-gradient(135deg, #252a33 0%, #1c2027 100%); color: var(--muted); }
html.dark footer { border: 1px solid var(--line-soft); }
html.dark .btn-dark:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); }
html.dark ::selection { background: rgba(203, 166, 107, 0.35); }