/* ============================================================
   OLANA — Resort & Residence
   Editorial luxury · warm ivory default · brand identity assets
   Colors (mandated): Ivory #FEF8EC · Blue Mist #7383A7 · Navy #222330 · Charcoal #191919
   ============================================================ */

/* ---------- Real brand fonts ---------- */
@font-face { font-family:'Bahij'; src:url('/assets/fonts/Bahij-ExtraLight.ttf') format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Bahij'; src:url('/assets/fonts/Bahij-Light.ttf') format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'Bahij'; src:url('/assets/fonts/Bahij-SemiLight.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Bahij'; src:url('/assets/fonts/Bahij-Plain.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'Bahij'; src:url('/assets/fonts/Bahij-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'VerdanaOlana'; src:url('/assets/fonts/Verdana.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'VerdanaOlana'; src:url('/assets/fonts/Verdana-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }

:root {
    --ivory:#FEF8EC; --blue:#7383A7; --navy:#222330; --charcoal:#191919;
    --ivory-2:#F6EEDD; --blue-tint:#EEF0F5;

    /* Light (default) theme */
    --bg:var(--ivory);
    --surface:#FFFDF7;
    --panel:#F4ECDA;
    --ink:var(--navy);
    --ink-soft:#43455A;
    --muted:#6C6F80;
    --line:rgba(34,35,48,.14);
    --line-soft:rgba(34,35,48,.08);
    --accent:var(--blue);
    --on-dark:var(--ivory);
    --logo:var(--navy);

    --font-ar:'Bahij','IBM Plex Sans Arabic',sans-serif;
    --font-en:'VerdanaOlana',Verdana,Geneva,sans-serif;
    --font:var(--font-ar);

    --sq:clamp(22px,3.4vw,46px);   /* rounded-square radius echoing the logo mark */
    --container:1280px;
    --gutter:clamp(20px,5vw,64px);
    --ease:cubic-bezier(.19,1,.22,1);
    --tr-lg:34px; --tr:20px;
}
html[lang="en"]{ --font:var(--font-en); }
html[data-theme="dark"]{
    --bg:var(--charcoal);
    --surface:var(--navy);
    --panel:#20212E;
    --ink:var(--ivory);
    --ink-soft:#C9CBD6;
    --muted:#8E92A4;
    --line:rgba(254,248,236,.16);
    --line-soft:rgba(254,248,236,.08);
    --logo:var(--ivory);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:var(--font); font-weight:400; line-height:1.85;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    overflow-x:hidden; transition:background .5s var(--ease), color .5s var(--ease);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--navy); color:var(--ivory); }

/* ---------- Real Olana logo (recolored via mask) ---------- */
.olana-logo{
    display:inline-block; width:170px; height:40px;
    background:var(--logo);
    -webkit-mask:url('/assets/img/logo/olana-navy.svg') no-repeat center/contain;
            mask:url('/assets/img/logo/olana-navy.svg') no-repeat center/contain;
}
.olana-logo--light{ background:var(--ivory); }
.olana-logo--dark{ background:var(--navy); }
.logo-img{ height:46px; width:auto; }
.olana-logo-img{ height:42px; width:auto; display:block; }
.footer-about .olana-logo-img{ height:52px; }

/* Logo mark only (the two interlocking squares) — extracted via same asset, cropped */
.olana-mark{
    display:inline-block; width:42px; height:42px; background:var(--logo);
    -webkit-mask:url('/assets/img/logo/olana-navy.svg') no-repeat left center; -webkit-mask-size:auto 100%;
            mask:url('/assets/img/logo/olana-navy.svg') no-repeat left center; mask-size:auto 100%;
    /* the mark sits at the far side of the lockup; show only that region */
    width:44px; overflow:hidden;
}

/* ---------- Typography ---------- */
h1,h2,h3,h4{ margin:0 0 .4em; font-weight:300; line-height:1.12; letter-spacing:-.01em; color:var(--ink); overflow-wrap:break-word; }
html[lang="en"] h1, html[lang="en"] h2{ letter-spacing:.01em; }
.display{ font-weight:300; }
h1{ font-size:clamp(2.6rem,6.4vw,5.6rem); }
h2{ font-size:clamp(2rem,4.4vw,3.4rem); }
h3{ font-size:clamp(1.3rem,2.4vw,1.8rem); font-weight:400; }
p{ margin:0 0 1.1rem; color:var(--ink-soft); }
.lead{ font-size:clamp(1.1rem,1.8vw,1.45rem); font-weight:300; line-height:1.7; color:var(--ink); }
.kicker{
    font-family:var(--font-en); font-size:.72rem; letter-spacing:.42em; text-transform:uppercase;
    color:var(--accent); display:inline-flex; align-items:center; gap:14px;
}
.kicker::before{ content:""; width:34px; height:1px; background:currentColor; opacity:.7; }
.kicker--center::after{ content:""; width:34px; height:1px; background:currentColor; opacity:.7; }

/* ARABIC: never apply Latin font + letter-spacing to Arabic text (breaks joins) */
html[lang="ar"] .kicker,
html[lang="ar"] .chapter__num,
html[lang="ar"] .hero__scroll,
html[lang="ar"] .footer-watermark{ font-family:var(--font-ar); letter-spacing:normal; text-transform:none; }
html[lang="ar"] .kicker{ font-size:.9rem; }
html[lang="ar"] .chapter__num{ font-size:.95rem; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding:clamp(64px,10vw,150px) 0; position:relative; }
.section--dark{ background:var(--charcoal); color:var(--ivory); }
.section--dark h1,.section--dark h2,.section--dark h3{ color:var(--ivory); }
.section--dark p{ color:rgba(254,248,236,.7); }
.section--panel{ background:var(--panel); }

/* Chapter heading (numbered editorial) */
.chapter{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:clamp(34px,5vw,70px); flex-wrap:wrap; }
.chapter__lead{ max-width:560px; }
.chapter__num{
    font-family:var(--font-en); font-size:.8rem; letter-spacing:.3em; color:var(--accent);
    display:block; margin-bottom:20px;
}
.chapter h2{ margin:0; }
.rule{ height:1px; background:var(--line); border:0; margin:0; }

/* ---------- Buttons / links ---------- */
.btn{
    display:inline-flex; align-items:center; gap:12px; padding:15px 34px; border-radius:100px;
    font-family:var(--font-en); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
    cursor:pointer; border:1px solid transparent; transition:all .4s var(--ease); white-space:nowrap;
}
html[lang="ar"] .btn{ font-family:var(--font-ar); font-weight:500; letter-spacing:.02em; text-transform:none; font-size:.95rem; }
.btn--solid{ background:var(--navy); color:var(--ivory); }
.btn--solid:hover{ background:var(--charcoal); transform:translateY(-2px); }
html[data-theme="dark"] .btn--solid{ background:var(--ivory); color:var(--navy); }
.btn--ivory{ background:var(--ivory); color:var(--navy); }
.btn--ivory:hover{ transform:translateY(-2px); box-shadow:0 16px 40px rgba(0,0,0,.35); }
.btn--outline{ border-color:currentColor; color:inherit; }
.btn--outline:hover{ background:var(--ink); color:var(--bg); }
.section--dark .btn--outline:hover{ background:var(--ivory); color:var(--navy); }
.btn--wa{ background:#25D366; color:#fff; }
.btn--block{ width:100%; justify-content:center; }
.btn--sm{ padding:11px 22px; font-size:.72rem; }
.arrow-link{
    display:inline-flex; align-items:center; gap:12px; font-family:var(--font-en); font-size:.78rem;
    letter-spacing:.16em; text-transform:uppercase; color:var(--ink); position:relative; padding-bottom:4px;
}
html[lang="ar"] .arrow-link{ font-family:var(--font-ar); text-transform:none; letter-spacing:0; font-size:.98rem; }
.arrow-link::after{ content:""; position:absolute; inset-inline:0; bottom:0; height:1px; background:currentColor; transform:scaleX(.5); transform-origin:inline-start; transition:transform .4s var(--ease); opacity:.4; }
.arrow-link:hover::after{ transform:scaleX(1); opacity:1; }
.arrow-link .ar-i{ transition:transform .4s var(--ease); }
.arrow-link:hover .ar-i{ transform:translateX(6px); }
html[dir="rtl"] .arrow-link:hover .ar-i{ transform:translateX(-6px) scaleX(-1); }
html[dir="rtl"] .arrow-link .ar-i{ transform:scaleX(-1); }

/* ---------- Squircle (logo motif image frame) ---------- */
.squircle{ border-radius:var(--sq); overflow:hidden; position:relative; }
.squircle img{ width:100%; height:100%; object-fit:cover; }

/* Editorial page frame (thin architectural border) */
.page-frame{ position:fixed; inset:16px; border:1px solid var(--line); border-radius:8px; pointer-events:none; z-index:1; }
html[data-theme="dark"] .page-frame{ border-color:rgba(254,248,236,.14); }
.brand-rail{
    position:fixed; z-index:2; top:50%; inset-inline-start:22px; transform:translateY(-50%) rotate(180deg);
    writing-mode:vertical-rl; font-family:var(--font-en); font-size:.66rem; letter-spacing:.4em; text-transform:uppercase;
    color:var(--muted); pointer-events:none; mix-blend-mode:difference;
}

/* ---------- Header ---------- */
.site-header{ position:fixed; inset-block-start:0; inset-inline:0; z-index:50; padding:24px 0; transition:all .45s var(--ease); }
.site-header.scrolled{ padding:12px 0; background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:blur(16px) saturate(1.1); border-bottom:1px solid var(--line-soft); }
.nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; z-index:1; }
.nav-links{ display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0; }
.nav-links a:not(.btn){ font-size:.95rem; color:var(--ink); position:relative; padding:6px 0; opacity:.9; transition:opacity .3s,color .3s; }
html[lang="en"] .nav-links a:not(.btn){ font-family:var(--font-en); font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; }
.nav-links a:not(.btn):hover,.nav-links a.active{ opacity:1; }
.nav-links a.active::after{ content:""; position:absolute; inset-inline:0; bottom:0; height:1px; background:var(--accent); }
.nav-actions{ display:flex; align-items:center; gap:12px; }
.pill{
    display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px; border:1px solid var(--line);
    border-radius:100px; color:var(--ink); font-family:var(--font-en); font-size:.72rem; letter-spacing:.12em; cursor:pointer;
    background:transparent; transition:all .3s var(--ease);
}
html[lang="ar"] .pill{ font-family:var(--font-ar); letter-spacing:0; font-size:.85rem; }
.pill:hover{ border-color:var(--accent); color:var(--accent); }
.pill--icon{ width:42px; padding:0; justify-content:center; }
/* Theme toggle: shows current mode (icon + label) */
.pill--theme .ic-sun, .pill--theme .ic-moon{ display:inline-flex; align-items:center; }
.pill--theme .ic-moon{ display:none; }
html[data-theme="dark"] .pill--theme .ic-sun{ display:none; }
html[data-theme="dark"] .pill--theme .ic-moon{ display:inline-flex; }
.pill--theme [data-theme-label]{ font-size:.82rem; }
html[lang="en"] .pill--theme [data-theme-label]{ font-family:var(--font-en); letter-spacing:.1em; }
.nav-toggle{ display:none; }
.brand-link{ display:inline-flex; align-items:center; }
.brand-link .olana-logo{ width:150px; height:36px; }
.site-header.scrolled .olana-logo{ width:132px; }

/* Header over a dark hero (home): light logo/links until scrolled onto the page bg */
.site-header--over-dark:not(.scrolled) .olana-logo{ background:var(--ivory); }
.site-header--over-dark:not(.scrolled) .nav-links a:not(.btn){ color:var(--ivory); opacity:1; }
.site-header--over-dark:not(.scrolled) .pill{ color:var(--ivory); border-color:rgba(254,248,236,.4); }
.site-header--over-dark:not(.scrolled) .pill:hover{ color:var(--navy); background:var(--ivory); border-color:var(--ivory); }
.site-header--over-dark:not(.scrolled) .btn--solid{ background:var(--ivory); color:var(--navy); }
/* Scrim so the transparent header stays legible over any hero imagery */
.site-header--over-dark:not(.scrolled)::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
    background:linear-gradient(to bottom, rgba(25,25,25,.6), rgba(25,25,25,0)); }

/* ---------- HERO (split editorial: dark text panel + photography, interlocked) ---------- */
.hero{ position:relative; min-height:100svh; display:grid; grid-template-columns:1.05fr .95fr; background:var(--charcoal); color:var(--ivory); overflow:hidden; }
.hero__text{ position:relative; z-index:3; display:flex; flex-direction:column; justify-content:center; padding:130px var(--gutter) 90px; max-width:720px; margin-inline-start:auto; }
.hero__text .kicker{ color:var(--blue); margin-bottom:30px; }
.hero h1{ color:var(--ivory); font-weight:300; margin-bottom:.35em; }
.hero__accent{ color:var(--blue); }
.hero__sub{ font-size:clamp(1rem,1.5vw,1.25rem); font-weight:300; color:rgba(254,248,236,.78); max-width:480px; margin-bottom:40px; }
.hero__cta{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
/* Hero sits on a permanent dark ground — force light-colored text/links regardless of theme */
.hero .arrow-link,
.section--dark .arrow-link{ color:var(--ivory); }
.section--dark .stat__l{ color:rgba(254,248,236,.6); }
.section--dark .chapter__lead,
.section--dark .muted{ color:rgba(254,248,236,.65); }
.hero__media{ position:relative; z-index:1; overflow:hidden; }
.hero__media > img{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--charcoal) 0%,transparent 22%); }
html[dir="rtl"] .hero__media::after{ background:linear-gradient(-90deg,var(--charcoal) 0%,transparent 22%); }
/* interlock: a squircle-framed inset photo overlapping the seam */
.hero__inset{
    position:absolute; z-index:2; inset-block-end:9%; inset-inline-start:-70px; width:min(38%,300px); aspect-ratio:1;
    border-radius:var(--sq); overflow:hidden; border:6px solid var(--charcoal); box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.hero__inset img{ width:100%; height:100%; object-fit:cover; }
.hero__vlabel{
    position:absolute; z-index:3; top:50%; inset-inline-end:26px; transform:translateY(-50%);
    writing-mode:vertical-rl; font-family:var(--font-en); font-size:.66rem; letter-spacing:.4em; text-transform:uppercase; color:rgba(254,248,236,.55);
}
.hero__scroll{ position:absolute; z-index:3; inset-block-end:28px; inset-inline-start:var(--gutter); display:flex; align-items:center; gap:12px; font-family:var(--font-en); font-size:.66rem; letter-spacing:.28em; text-transform:uppercase; color:rgba(254,248,236,.6); }
.hero__scroll span{ width:56px; height:1px; background:currentColor; position:relative; overflow:hidden; }
.hero__scroll span::after{ content:""; position:absolute; inset:0; background:var(--ivory); transform:translateX(-100%); animation:draw 2.6s var(--ease) infinite; }
html[dir="rtl"] .hero__scroll span::after{ animation-name:draw-r; }
@keyframes draw{ 0%{transform:translateX(-100%)} 50%{transform:translateX(0)} 100%{transform:translateX(100%)} }
@keyframes draw-r{ 0%{transform:translateX(100%)} 50%{transform:translateX(0)} 100%{transform:translateX(-100%)} }

/* ---------- Intro / statement ---------- */
.statement{ font-size:clamp(1.5rem,3.2vw,2.6rem); font-weight:300; line-height:1.4; letter-spacing:-.01em; max-width:15ch; }
.statement em{ font-style:normal; color:var(--accent); }
.intro-grid{ display:grid; grid-template-columns:1fr 1.3fr; gap:clamp(30px,6vw,90px); align-items:center; }
.vm{ display:grid; gap:28px; margin-top:34px; }
.vm__item{ padding-inline-start:22px; border-inline-start:1px solid var(--line); }
.vm__item h4{ font-family:var(--font-en); font-size:.74rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent); margin:0 0 8px; }
html[lang="ar"] .vm__item h4{ font-family:var(--font-ar); letter-spacing:0; font-size:1rem; }
.vm__item p{ margin:0; font-weight:300; }

/* ---------- Featured project (large editorial rows) ---------- */
.feature{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(28px,5vw,70px); margin-bottom:clamp(48px,7vw,110px); }
.feature:last-child{ margin-bottom:0; }
.feature__media{ position:relative; }
.feature__media .squircle{ aspect-ratio:5/6; box-shadow:0 40px 80px rgba(34,35,48,.16); }
.feature__media .squircle img{ transition:transform 1.1s var(--ease); }
.feature:hover .feature__media .squircle img{ transform:scale(1.05); }
.feature__ghost{ position:absolute; inset-block-start:-26px; inset-inline-end:-26px; width:46%; aspect-ratio:1; border:1px solid var(--accent); border-radius:var(--sq); z-index:-1; opacity:.5; }
.feature--rev{ direction:rtl; }
.feature--rev > *{ direction:ltr; }
html[dir="rtl"] .feature--rev{ direction:ltr; }
html[dir="rtl"] .feature--rev > *{ direction:rtl; }
.feature__index{ font-family:var(--font-en); font-size:.8rem; letter-spacing:.3em; color:var(--accent); margin-bottom:22px; }
.feature__meta{ display:flex; gap:22px; flex-wrap:wrap; color:var(--muted); font-family:var(--font-en); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; margin:18px 0 26px; }
html[lang="ar"] .feature__meta{ font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:.9rem; }
.feature__meta span{ display:inline-flex; align-items:center; gap:8px; }
.feature h3{ font-size:clamp(1.8rem,3.2vw,2.7rem); font-weight:300; }

/* ---------- Project card (grid) ---------- */
.grid{ display:grid; gap:clamp(20px,3vw,40px); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.card{ display:flex; flex-direction:column; }
.card__media{ position:relative; aspect-ratio:4/5; border-radius:var(--sq); overflow:hidden; }
.card__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.card:hover .card__media img{ transform:scale(1.06); }
.card__tag{ position:absolute; inset-block-start:16px; inset-inline-start:16px; padding:7px 15px; border-radius:100px; font-family:var(--font-en); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; background:color-mix(in srgb,var(--ivory) 90%,transparent); color:var(--navy); backdrop-filter:blur(6px); }
html[lang="ar"] .card__tag{ font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:.75rem; }
.card__tag--soon{ background:color-mix(in srgb,var(--blue) 90%,transparent); color:#fff; }
.card__body{ padding:22px 4px 0; }
.card__loc{ font-family:var(--font-en); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:8px; }
html[lang="ar"] .card__loc{ font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:.85rem; }
.card__title{ font-size:1.4rem; font-weight:400; margin:10px 0; }
.card__foot{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; padding-top:16px; border-top:1px solid var(--line); }
.card__price{ font-weight:300; }
.card__price small{ display:block; color:var(--muted); font-size:.72rem; letter-spacing:.1em; }

/* ---------- Why (hairline row, big numerals) ---------- */
.why{ display:grid; grid-template-columns:repeat(4,1fr); }
.why__item{ padding:34px 26px; border-inline-start:1px solid var(--line); }
.why__item:first-child{ border-inline-start:0; }
.why__n{ font-family:var(--font-en); font-size:.8rem; letter-spacing:.24em; color:var(--accent); }
.why__ic{ color:var(--accent); margin:22px 0 20px; }
.why__item h3{ font-size:1.2rem; font-weight:400; margin-bottom:8px; }
.why__item p{ font-size:.92rem; margin:0; font-weight:300; }

/* ---------- Stats (hairline row) ---------- */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--line); }
.stat{ padding:44px 20px; text-align:center; border-inline-start:1px solid var(--line); }
.stat:first-child{ border-inline-start:0; }
.stat__n{ font-size:clamp(2.6rem,5vw,4rem); font-weight:300; line-height:1; }
.stat__n .plus{ color:var(--accent); }
.stat__l{ font-family:var(--font-en); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:14px; }
html[lang="ar"] .stat__l{ font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:.9rem; }

/* ---------- Gallery (editorial masonry-ish) ---------- */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:210px; gap:14px; grid-auto-flow:dense; }
.gallery a{ overflow:hidden; border-radius:var(--tr); position:relative; }
.gallery img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.gallery a:hover img{ transform:scale(1.07); }
.gallery a:nth-child(8n+1){ grid-column:span 2; grid-row:span 2; }
.gallery a:nth-child(8n+6){ grid-column:span 2; }

.gallery__tag{ position:absolute; inset-block-end:0; inset-inline:0; padding:26px 16px 12px; color:var(--ivory); font-size:.82rem;
    background:linear-gradient(to top, rgba(25,25,25,.75), transparent); opacity:0; transform:translateY(6px); transition:all .35s var(--ease); }
.gallery a:hover .gallery__tag{ opacity:1; transform:none; }
.gallery a{ cursor:zoom-in; }

/* ---------- Lightbox ---------- */
.lightbox{ position:fixed; inset:0; z-index:300; display:none; align-items:center; justify-content:center; }
.lightbox.open{ display:flex; }
.lightbox__backdrop{ position:absolute; inset:0; background:rgba(15,15,18,.94); backdrop-filter:blur(4px); }
.lightbox__fig{ position:relative; z-index:1; margin:0; max-width:min(1100px,92vw); max-height:86vh; display:flex; flex-direction:column; align-items:center; gap:16px; }
.lightbox__img{ max-width:100%; max-height:78vh; object-fit:contain; border-radius:10px; box-shadow:0 30px 80px rgba(0,0,0,.6); }
.lightbox__cap{ color:var(--ivory); font-size:1rem; letter-spacing:.02em; text-align:center; }
.lightbox__count{ position:absolute; z-index:1; inset-block-start:22px; inset-inline-start:50%; transform:translateX(-50%); color:rgba(254,248,236,.7); font-family:var(--font-en); font-size:.8rem; letter-spacing:.1em; }
.lightbox__btn{ position:absolute; z-index:2; width:52px; height:52px; border-radius:50%; border:1px solid rgba(254,248,236,.25); background:rgba(25,25,25,.5); color:var(--ivory); display:grid; place-items:center; cursor:pointer; transition:all .3s var(--ease); }
.lightbox__btn:hover{ background:var(--ivory); color:var(--navy); border-color:var(--ivory); }
.lightbox__close{ inset-block-start:20px; inset-inline-end:20px; }
.lightbox__prev, .lightbox__next{ inset-block-start:50%; transform:translateY(-50%); }
.lightbox__prev{ inset-inline-start:20px; }
.lightbox__next{ inset-inline-end:20px; }
.lightbox__next svg{ transform:rotate(0deg); }
.lightbox__prev svg{ transform:rotate(180deg); }
html[dir="rtl"] .lightbox__next svg{ transform:rotate(180deg); }
html[dir="rtl"] .lightbox__prev svg{ transform:rotate(0deg); }
@media (max-width:680px){
    .lightbox__btn{ width:44px; height:44px; }
    .lightbox__close{ inset-block-start:14px; inset-inline-end:14px; }
    .lightbox__prev{ inset-inline-start:10px; } .lightbox__next{ inset-inline-end:10px; }
    .lightbox__img{ max-height:70vh; }
}

/* ---------- Testimonials (single stage quote) ---------- */
.quote-stage{ text-align:center; max-width:860px; margin-inline:auto; position:relative; min-height:260px; }
.quote-stage .qmark{ font-family:var(--font-en); font-size:6rem; line-height:.6; color:var(--accent); opacity:.35; }
.quote{ position:absolute; inset-inline:0; opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease),transform .7s var(--ease); pointer-events:none; }
.quote.active{ position:relative; opacity:1; transform:none; pointer-events:auto; }
.quote__text{ font-size:clamp(1.3rem,2.6vw,2rem); font-weight:300; line-height:1.5; color:var(--ink); }
.quote__by{ font-family:var(--font-en); font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-top:26px; }
html[lang="ar"] .quote__by{ font-family:var(--font-ar); letter-spacing:0; text-transform:none; }
.quote-dots{ display:flex; gap:10px; justify-content:center; margin-top:40px; }
.quote-dots button{ width:8px; height:8px; border-radius:50%; border:0; background:var(--line); cursor:pointer; padding:0; transition:all .3s; }
.quote-dots button.active{ background:var(--accent); width:26px; border-radius:6px; }

/* ---------- FAQ ---------- */
.faq{ max-width:840px; margin-inline:auto; }
.faq-item{ border-block-end:1px solid var(--line); }
.faq-q{ width:100%; text-align:start; background:none; border:0; color:var(--ink); font-family:inherit; font-size:clamp(1.05rem,1.8vw,1.3rem); font-weight:300; padding:26px 0; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq-q .pm{ position:relative; width:16px; height:16px; flex:none; color:var(--accent); }
.faq-q .pm::before,.faq-q .pm::after{ content:""; position:absolute; background:currentColor; inset-block-start:50%; inset-inline:0; height:1px; transition:transform .3s; }
.faq-q .pm::after{ transform:rotate(90deg); }
.faq-item.open .pm::after{ transform:rotate(0); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.faq-a p{ padding-bottom:26px; margin:0; font-weight:300; max-width:70ch; }

/* ---------- Invite / CTA ---------- */
.invite{ position:relative; text-align:center; padding:clamp(60px,10vw,130px) var(--gutter); overflow:hidden; background:var(--panel); border-block:1px solid var(--line); }
.invite h2{ font-weight:300; }
.invite .lead{ max-width:520px; margin-inline:auto; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--charcoal); color:var(--ivory); padding:clamp(60px,8vw,100px) 0 32px; position:relative; overflow:hidden; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:44px; margin-bottom:56px; position:relative; z-index:1; }
.footer-grid .olana-logo{ background:var(--ivory); width:180px; height:44px; }
.footer-col h4{ font-family:var(--font-en); font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--blue); margin-bottom:20px; }
html[lang="ar"] .footer-col h4{ font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:.95rem; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.footer-col a:not(.btn){ color:rgba(254,248,236,.72); font-size:.95rem; font-weight:300; transition:color .3s; }
.footer-col a:not(.btn):hover{ color:var(--ivory); }
.footer-about p{ color:rgba(254,248,236,.68); font-weight:300; max-width:34ch; }
.social{ display:flex; gap:12px; margin-top:22px; }
.social a{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(254,248,236,.2); display:grid; place-items:center; color:var(--ivory); transition:all .35s var(--ease); }
.social a:hover{ background:var(--ivory); color:var(--navy); }
.footer-bottom{ border-top:1px solid rgba(254,248,236,.14); padding-top:26px; text-align:center; color:rgba(254,248,236,.55); font-size:.82rem; font-family:var(--font-en); letter-spacing:.06em; }
html[lang="ar"] .footer-bottom{ font-family:var(--font-ar); }
.footer-watermark{ position:absolute; inset-block-end:-8%; inset-inline-end:-2%; width:340px; height:340px; opacity:.05; background:var(--ivory); -webkit-mask:url('/assets/img/logo/olana-navy.svg') no-repeat center/contain; mask:url('/assets/img/logo/olana-navy.svg') no-repeat center/contain; }

/* ---------- Pattern texture ---------- */
.pattern-bg{ position:relative; }
.pattern-bg::before{ content:""; position:absolute; inset:0; background:url('/assets/img/pattern/pattern-navy.png') repeat; background-size:340px; opacity:.035; pointer-events:none; }
.section--dark.pattern-bg::before{ background-image:url('/assets/img/pattern/pattern-charcoal.png'); opacity:.35; mix-blend-mode:soft-light; }

/* ---------- Inner page hero ---------- */
.page-hero{ padding:170px 0 70px; position:relative; }
.page-hero h1{ font-weight:300; margin:14px 0 0; }
.page-hero .lead{ margin-top:16px; max-width:600px; }

/* ---------- Forms ---------- */
.field{ display:flex; flex-direction:column; gap:9px; margin-bottom:18px; }
.field label{ font-family:var(--font-en); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
html[lang="ar"] .field label{ font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:.85rem; color:var(--ink-soft); }
.field .req{ color:var(--accent); }
.field input,.field select,.field textarea{
    width:100%; padding:14px 16px; border:0; border-bottom:1px solid var(--line); background:transparent; color:var(--ink);
    font-family:inherit; font-size:1rem; transition:border-color .3s; border-radius:0;
}
.field.boxed input,.field.boxed select,.field.boxed textarea{ border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--accent); }
.field textarea{ resize:vertical; min-height:90px; }
.field .hint{ color:var(--muted); font-size:.78rem; }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237383A7' fill='none' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:calc(100% - 14px) center; padding-inline-end:38px; }
html[dir="rtl"] .field select{ background-position:14px center; }
/* Dropdown option list must have explicit colors or it's invisible in dark mode */
.field select option, .field select optgroup{ background:var(--surface); color:var(--ink); }
html[data-theme="dark"] .field select option, html[data-theme="dark"] .field select optgroup{ background:#2a2b3a; color:var(--ivory); }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
.phone-row{ display:flex; gap:10px; }
.phone-row .cc{ flex:0 0 84px; text-align:center; }
.form-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:14px; }
.alert{ padding:15px 20px; border-radius:12px; margin-bottom:20px; font-weight:400; font-size:.95rem; }
.alert--ok{ background:color-mix(in srgb,#2f9e5f 14%,transparent); color:#2f9e5f; border:1px solid color-mix(in srgb,#2f9e5f 34%,transparent); }
.alert--err{ background:color-mix(in srgb,#d9534f 12%,transparent); color:#d9534f; border:1px solid color-mix(in srgb,#d9534f 30%,transparent); }
.hp-field{ position:absolute; left:-9999px; opacity:0; height:0; overflow:hidden; }

/* Booking sidebar / modal */
.book-panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--tr-lg); padding:32px; position:sticky; top:100px; }
html[data-theme="dark"] .book-panel{ background:var(--panel); }
/* Robust scrollable modal: the overlay itself scrolls, so any content height fits any screen */
.modal{ position:fixed; inset:0; z-index:200; display:none; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:24px; }
.modal.open{ display:block; }
.modal__backdrop{ position:fixed; inset:0; background:rgba(25,25,25,.72); backdrop-filter:blur(6px); }
.modal__box{ position:relative; z-index:1; background:var(--bg); border-radius:var(--tr-lg); max-width:620px; width:100%; margin:24px auto; padding:40px; box-shadow:0 40px 100px rgba(0,0,0,.5); }
.modal__close{ position:fixed; inset-block-start:20px; inset-inline-end:20px; z-index:210; background:color-mix(in srgb,var(--bg) 80%,transparent); backdrop-filter:blur(6px); }

/* ---------- Project detail ---------- */
.pd-hero{ position:relative; height:78vh; min-height:520px; overflow:hidden; }
.pd-hero img{ width:100%; height:100%; object-fit:cover; }
.pd-hero__grad{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(25,25,25,.15) 0%,transparent 30%,rgba(25,25,25,.85) 100%); display:flex; align-items:flex-end; }
.pd-hero__c{ padding-bottom:56px; color:var(--ivory); }
.pd-hero__c h1{ color:var(--ivory); font-weight:300; }
.pd-tag{ display:inline-flex; padding:8px 18px; border-radius:100px; font-family:var(--font-en); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; background:rgba(254,248,236,.16); color:var(--ivory); backdrop-filter:blur(6px); margin-bottom:18px; }
html[lang="ar"] .pd-tag{ font-family:var(--font-ar); letter-spacing:0; text-transform:none; }
.pd-layout{ display:grid; grid-template-columns:1.7fr 1fr; gap:clamp(30px,5vw,64px); align-items:start; }
.pd-gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.pd-gallery a{ border-radius:var(--tr); overflow:hidden; aspect-ratio:4/3; }
.pd-gallery a:first-child{ grid-column:1/-1; aspect-ratio:16/9; }
.pd-gallery img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.pd-gallery a:hover img{ transform:scale(1.05); }
.amen-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--line); border:1px solid var(--line); border-radius:var(--tr); overflow:hidden; }
.amen{ display:flex; gap:16px; align-items:flex-start; padding:22px; background:var(--bg); }
.amen__ic{ color:var(--accent); flex:none; }
.amen h4{ margin:0 0 4px; font-size:1.05rem; font-weight:400; }
.amen p{ margin:0; font-size:.86rem; font-weight:300; }
.unit-table{ width:100%; border-collapse:collapse; }
.unit-table th,.unit-table td{ padding:18px 8px; text-align:start; border-block-end:1px solid var(--line); font-weight:300; }
.unit-table th{ font-family:var(--font-en); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
html[lang="ar"] .unit-table th{ font-family:var(--font-ar); letter-spacing:0; text-transform:none; font-size:.85rem; }
.unit-table td:first-child{ font-weight:400; }
.map-embed{ width:100%; aspect-ratio:16/9; border:0; border-radius:var(--tr); }

/* Filters */
.filters{ display:grid; grid-template-columns:repeat(4,1fr) auto; gap:16px; align-items:end; margin-bottom:50px; padding-bottom:34px; border-bottom:1px solid var(--line); }
.filters .field{ margin:0; }

/* WhatsApp float */
.wa-float{ position:fixed; inset-block-end:26px; inset-inline-end:26px; z-index:40; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 14px 34px rgba(37,211,102,.4); transition:transform .3s var(--ease); }
.wa-float:hover{ transform:scale(1.08); }

/* Reveal */
[data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease),transform .9s var(--ease); }
[data-reveal].visible{ opacity:1; transform:none; }
[data-reveal].d1{ transition-delay:.08s } [data-reveal].d2{ transition-delay:.16s } [data-reveal].d3{ transition-delay:.24s }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
    .hero{ grid-template-columns:1fr; }
    .hero__media{ position:absolute; inset:0; }
    .hero__media::after{ background:linear-gradient(180deg,rgba(25,25,25,.55),rgba(25,25,25,.82)); }
    .hero__text{ max-width:none; margin:0; }
    .hero__inset{ display:none; }
    .intro-grid,.pd-layout{ grid-template-columns:1fr; }
    .feature{ grid-template-columns:1fr; }
    .feature__ghost{ display:none; }
    .why{ grid-template-columns:1fr 1fr; }
    .why__item:nth-child(3){ border-inline-start:0; }
    .stats{ grid-template-columns:1fr 1fr; }
    .stat:nth-child(3){ border-inline-start:0; }
    .footer-grid{ grid-template-columns:1fr 1fr; }
    .book-panel{ position:static; }
    .page-frame,.brand-rail{ display:none; }
}
/* Tablets & large/landscape phones: collapse the horizontal nav into a drawer.
   Below this width the full nav + action pills overflow the viewport and shove
   the whole page sideways, so we switch to the hamburger drawer early. */
@media (max-width:900px){
    .nav{ gap:14px; }
    /* Keep the toggle above the open drawer so a second tap always closes it. */
    .nav-toggle{ display:grid; position:relative; z-index:70; }
    /* Off-canvas drawer — positioned with PHYSICAL props so it hides fully
       off-screen in every browser (the logical-property version left a
       vertical sliver of the menu visible on the side in RTL). */
    .nav-links{ position:fixed; top:0; right:0; left:auto; height:100svh; width:min(42vw,172px); white-space:nowrap;
        flex-direction:column; align-items:flex-start; justify-content:center; gap:14px; padding:30px 20px; background:var(--surface);
        transform:translateX(100%); transition:transform .5s var(--ease); z-index:60; box-shadow:-20px 0 60px rgba(0,0,0,.2); }
    /* Arabic (RTL): drawer lives on the left and hides off the left edge. */
    html[dir="rtl"] .nav-links{ right:auto; left:0; transform:translateX(-100%); box-shadow:20px 0 60px rgba(0,0,0,.2); }
    /* Open state must out-specify the dir-scoped hide rule above, or the drawer
       never slides in (the [dir] selector otherwise wins the transform). */
    .nav-links.open,
    html[dir="rtl"] .nav-links.open,
    html[dir="ltr"] .nav-links.open{ transform:translateX(0); }
    /* Drawer sits on a light panel — links/button must use dark ink regardless of hero */
    .site-header .nav-links a:not(.btn),
    .site-header--over-dark:not(.scrolled) .nav-links a:not(.btn){ color:var(--ink); opacity:1; font-size:.9rem; }
    .nav-links .btn{ padding:9px 18px; font-size:.85rem; }
    .site-header--over-dark:not(.scrolled) .nav-links a.btn--solid{ background:var(--navy); color:var(--ivory); }
    html[data-theme="dark"] .nav-links{ background:var(--panel); }
}
@media (max-width:680px){
    /* Compact the header action row so it never overflows a narrow phone
       (logo + labelled theme toggle + language pill + hamburger was too wide). */
    .site-header{ padding:16px 0; }
    .nav{ gap:8px; flex-wrap:nowrap; min-width:0; }
    .nav-actions{ flex:0 0 auto; }
    .hero h1{ font-size:clamp(2rem,8vw,2.8rem); }
    .brand-link{ min-width:0; }
    .brand-link .olana-logo{ width:116px; height:30px; }
    .site-header.scrolled .olana-logo{ width:104px; }
    .nav-actions{ gap:8px; }
    .pill{ height:38px; padding:0 12px; font-size:.7rem; }
    .pill--theme{ width:38px; padding:0; justify-content:center; }
    .pill--theme [data-theme-label]{ display:none; }   /* icon-only toggle on phones */
    .pill--icon{ width:38px; }

    .grid--3,.grid--2,.form-grid,.amen-grid,.pd-gallery{ grid-template-columns:1fr; }
    .why,.stats{ grid-template-columns:1fr; }
    .why__item,.stat{ border-inline-start:0; border-block-start:1px solid var(--line); }
    .why__item:first-child,.stat:first-child{ border-block-start:0; }
    .footer-grid{ grid-template-columns:1fr; }
    .gallery{ grid-template-columns:1fr 1fr; grid-auto-rows:44vw; }
    .gallery a{ grid-column:auto !important; grid-row:auto !important; }
    .gallery a:nth-child(8n+1){ grid-column:1 / -1 !important; }
    .hero__cta{ flex-direction:column; align-items:stretch; }
    .hero__cta .btn{ justify-content:center; }
    .modal{ padding:0; }
    .modal__box{ margin:0; min-height:100svh; border-radius:0; padding:64px 20px 40px; }
    .modal__box .form-grid{ grid-template-columns:1fr; }
    .modal__close{ inset-block-start:14px; inset-inline-end:14px; }
}
@media (prefers-reduced-motion:reduce){
    *{ animation:none!important; transition:none!important; scroll-behavior:auto; }
    [data-reveal]{ opacity:1; transform:none; }
}