/* ==========================================================================
   رنا العبدالله العقارية — design system
   راسخ · شفّاف · استشاري  (established · transparent · advisory)

   Direction notes, so later sessions extend the site in its own language:
   - Type    Amiri (Arabic serif) for display, IBM Plex Sans Arabic for UI.
             The serif is the point — it reads as an established advisory
             practice rather than a listings app.
   - Colour  Warm neutrals THROUGHOUT (ivory / sand ground), not a dark field
             with one gold accent. Bronze is sampled from the client's own
             logo and behaves like a material: rules, numerals, seals.
   - Layout  Editorial grid + sidebar-driven listings. Deliberately NOT the
             full-bleed alternating bands used elsewhere in the portfolio.
   - Shape   Arch motif on imagery; everything else is near-square (3px).
   - Motion  Near zero, and switched off entirely under reduced-motion.

   Contrast: --bronze is 3.8:1 on ivory, so it is only ever used for large
   text, rules and decoration. Small text and button fills use --bronze-text
   (5.6:1) and --bronze-dark. Do not swap them without re-checking.
   ========================================================================== */

:root {
	/* ground */
	--rana-ivory: #fbf8f3;
	--rana-sand: #f2ece1;
	--rana-sand-2: #e7decd;
	--rana-white: #fff;

	/* ink */
	--rana-ink: #1a1714;
	--rana-ink-2: #4a423a;
	--rana-ink-3: #7a7168;

	/* metal — sampled from the logo artwork */
	--rana-bronze: #9c783c;
	--rana-bronze-dark: #786030;
	--rana-bronze-text: #786030;
	--rana-bronze-light: #c9a961;
	--rana-bronze-pale: #ede2cc;
	--rana-slate: #6c6c6c;

	--rana-line: #ddd2bf;
	--rana-line-soft: #ebe3d5;

	--rana-r: 3px;
	--rana-arch: 999px 999px var(--rana-r) var(--rana-r);
	--rana-arch-sm: 110px 110px var(--rana-r) var(--rana-r);

	--rana-wrap: 1180px;
	--rana-gap: clamp(28px, 4vw, 48px);
	--rana-band: clamp(56px, 7vw, 104px);

	--rana-display: "Amiri", "Noto Naskh Arabic", Georgia, serif;
	--rana-body: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;

	--rana-shadow: 0 1px 2px rgba(26, 23, 20, .04), 0 8px 24px rgba(26, 23, 20, .06);
	--rana-t: .2s ease;
}

/* --------------------------------------------------------------- base ---- */

body.rana-site,
body {
	background: var(--rana-ivory);
	color: var(--rana-ink-2);
	font-family: var(--rana-body);
	font-size: 17px;
	line-height: 1.85;
	-webkit-font-smoothing: antialiased;
}

.rana-main { display: block; }

.rana-wrap {
	width: min(100% - 2.5rem, var(--rana-wrap));
	margin-inline: auto;
}

h1, h2, h3, h4,
.rana-h1, .rana-h2, .rana-h3 {
	font-family: var(--rana-display);
	color: var(--rana-ink);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0;
}

.rana-h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.28; }
.rana-h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); margin-block-end: .8em; }
.rana-h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }

.rana-eyebrow {
	font-family: var(--rana-body);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--rana-bronze-text);
	margin-block-end: .7em;
}

/* The hairline rule under a section title is the site's quiet signature. */
.rana-eyebrow::after {
	content: "";
	display: inline-block;
	inline-size: 2.2rem;
	block-size: 1px;
	background: var(--rana-bronze);
	margin-inline-start: .7rem;
	vertical-align: middle;
}

.rana-lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--rana-ink-2); }

a { color: var(--rana-bronze-text); }
a:hover { color: var(--rana-ink); }

.rana-sr {
	position: absolute;
	inline-size: 1px; block-size: 1px;
	overflow: hidden; clip-path: inset(50%);
	white-space: nowrap;
}

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--rana-bronze-dark);
	outline-offset: 3px;
}

/* ------------------------------------------------------------ buttons ---- */

.rana-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-family: var(--rana-body);
	font-size: .97rem;
	font-weight: 600;
	line-height: 1;
	padding: .95rem 1.7rem;
	border-radius: var(--rana-r);
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--rana-t), color var(--rana-t), border-color var(--rana-t);
}

.rana-btn--solid { background: var(--rana-bronze-dark); color: var(--rana-white); }
.rana-btn--solid:hover { background: var(--rana-ink); color: var(--rana-white); }

.rana-btn--outline {
	background: transparent;
	color: var(--rana-ink);
	border-color: var(--rana-line);
}
.rana-btn--outline:hover { border-color: var(--rana-bronze); color: var(--rana-bronze-text); }

.rana-btn--ghost { background: transparent; color: var(--rana-bronze-text); padding-inline: .4rem; }
.rana-btn--ghost:hover { color: var(--rana-ink); }

.rana-btn--block { display: flex; inline-size: 100%; }
.rana-btn--lg { padding: 1.1rem 2.2rem; font-size: 1.03rem; }

.rana-link {
	background: none; border: 0; padding: 0;
	font: inherit; color: var(--rana-bronze-text);
	text-decoration: underline; cursor: pointer;
}

/* -------------------------------------------------------------- cards ---- */

.rana-grid-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
	gap: clamp(20px, 2.5vw, 34px);
}
.rana-grid-cards--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }

.rana-card { background: transparent; }
.rana-card[hidden] { display: none; }

.rana-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.rana-card__media {
	position: relative;
	aspect-ratio: 4 / 3.2;
	overflow: hidden;
	border-radius: var(--rana-arch-sm);
	background: var(--rana-sand);
	border: 1px solid var(--rana-line-soft);
}

.rana-card__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}
.rana-card__link:hover .rana-card__img { transform: scale(1.03); }

.rana-card__img--empty {
	background:
		repeating-linear-gradient(135deg, var(--rana-sand) 0 12px, var(--rana-sand-2) 12px 24px);
}

.rana-tag,
.rana-badge,
.rana-count {
	position: absolute;
	font-family: var(--rana-body);
	font-size: .74rem;
	font-weight: 600;
	line-height: 1;
	padding: .45rem .75rem;
	border-radius: var(--rana-r);
}

.rana-tag {
	inset-block-start: 12px;
	inset-inline-start: 12px;
	background: rgba(251, 248, 243, .94);
	color: var(--rana-ink);
	border: 1px solid var(--rana-line);
}

.rana-badge {
	inset-block-start: 12px;
	inset-inline-end: 12px;
	background: var(--rana-ink);
	color: var(--rana-white);
}
.rana-badge--sold, .rana-badge--rented { background: #6d2f2f; }
.rana-badge--reserved { background: var(--rana-bronze-dark); }

.rana-badge--inline {
	position: static;
	display: inline-block;
	margin-block-start: .6rem;
}

.rana-count {
	inset-block-end: 12px;
	inset-inline-end: 12px;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	background: rgba(26, 23, 20, .72);
	color: var(--rana-white);
}

.rana-card__body { padding-block-start: 1.05rem; }

.rana-card__eyebrow {
	font-size: .8rem;
	color: var(--rana-ink-3);
	margin: 0 0 .3rem;
	letter-spacing: .02em;
}

.rana-card__title {
	font-size: 1.18rem;
	line-height: 1.5;
	margin: 0 0 .45rem;
	color: var(--rana-ink);
}

.rana-card__price {
	font-family: var(--rana-display);
	font-size: 1.32rem;
	font-weight: 700;
	color: var(--rana-bronze-text);
	margin: 0 0 .7rem;
}
.rana-card__price small { font-family: var(--rana-body); font-size: .72rem; color: var(--rana-ink-3); font-weight: 400; }

.rana-specs {
	list-style: none;
	margin: 0;
	padding: .7rem 0 0;
	border-block-start: 1px solid var(--rana-line-soft);
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.4rem;
	font-size: .86rem;
}
.rana-specs li { display: flex; gap: .35rem; align-items: baseline; }
.rana-specs__k { color: var(--rana-ink-3); }
.rana-specs__v { color: var(--rana-ink); font-weight: 600; }

/* ------------------------------------------------------ listing layout ---- */

.rana-listing {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	gap: var(--rana-gap);
	align-items: start;
	padding-block: clamp(28px, 4vw, 48px) var(--rana-band);
}

.rana-listing__rail { position: sticky; inset-block-start: 96px; }

.rana-listing__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block-end: 1.1rem;
	margin-block-end: 1.6rem;
	border-block-end: 1px solid var(--rana-line);
}

.rana-listing__count { margin: 0; font-size: .95rem; color: var(--rana-ink-3); }
.rana-listing__count #rana-shown { color: var(--rana-ink); font-weight: 700; }

.rana-filters__open { display: none; }

/* --------------------------------------------------------- filter rail ---- */

.rana-filters {
	background: var(--rana-white);
	border: 1px solid var(--rana-line);
	border-radius: var(--rana-r);
	padding: 1.3rem 1.2rem 1.5rem;
}

.rana-filters__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	margin-block-end: 1.1rem;
	padding-block-end: .8rem;
	border-block-end: 1px solid var(--rana-bronze-pale);
}

.rana-filters__title { font-size: 1.12rem; margin: 0; }

.rana-filters__reset {
	background: none; border: 0; padding: 0;
	font: inherit; font-size: .85rem;
	color: var(--rana-bronze-text);
	text-decoration: underline;
	cursor: pointer;
}

.rana-field { margin: 0 0 1.05rem; display: block; }
.rana-field > label,
.rana-field > legend,
.rana-field__label {
	display: block;
	font-size: .86rem;
	font-weight: 600;
	color: var(--rana-ink);
	margin-block-end: .4rem;
	padding: 0;
}

.rana-field input[type="text"],
.rana-field input[type="tel"],
.rana-field input[type="url"],
.rana-field input[type="email"],
.rana-field input[type="number"],
.rana-field input[type="search"],
.rana-field select,
.rana-field textarea {
	inline-size: 100%;
	font: inherit;
	font-size: .93rem;
	color: var(--rana-ink);
	background: var(--rana-white);
	border: 1px solid var(--rana-line);
	border-radius: var(--rana-r);
	padding: .62rem .75rem;
	transition: border-color var(--rana-t);
}
.rana-field input:focus,
.rana-field select:focus,
.rana-field textarea:focus { border-color: var(--rana-bronze); }

.rana-field textarea { resize: vertical; line-height: 1.7; }

.rana-field--pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
	border: 0;
	padding: 0;
	margin: 0 0 1.05rem;
}
.rana-field--pair legend { grid-column: 1 / -1; }

fieldset.rana-field { border: 0; padding: 0; margin: 0 0 1.05rem; }

.rana-hint {
	display: block;
	font-size: .78rem;
	color: var(--rana-ink-3);
	margin-block-start: .35rem;
	line-height: 1.6;
}

.rana-chips { display: flex; flex-wrap: wrap; gap: .4rem; }

.rana-chip { position: relative; }
.rana-chip input {
	position: absolute;
	opacity: 0;
	inline-size: 100%; block-size: 100%;
	margin: 0; cursor: pointer;
}
.rana-chip span {
	display: block;
	font-size: .85rem;
	padding: .42rem .85rem;
	border: 1px solid var(--rana-line);
	border-radius: var(--rana-r);
	color: var(--rana-ink-2);
	transition: all var(--rana-t);
}
.rana-chip input:checked + span {
	background: var(--rana-ink);
	border-color: var(--rana-ink);
	color: var(--rana-white);
}
.rana-chip input:focus-visible + span { outline: 2px solid var(--rana-bronze-dark); outline-offset: 2px; }

.rana-checks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr));
	gap: .45rem 1rem;
}
.rana-checks label {
	display: flex;
	align-items: center;
	gap: .45rem;
	font-size: .9rem;
	font-weight: 400;
	color: var(--rana-ink-2);
	cursor: pointer;
}

.rana-empty {
	padding: 2.5rem 1.5rem;
	text-align: center;
	color: var(--rana-ink-3);
	border: 1px dashed var(--rana-line);
	border-radius: var(--rana-r);
}
.rana-empty--first { padding-block: 4rem; }
.rana-empty--first h3 { font-size: 1.5rem; margin-block-end: .5rem; }
.rana-empty--first p { max-inline-size: 46ch; margin-inline: auto; margin-block-end: 1.4rem; }

/* --------------------------------------------------------- page header ---- */

.rana-pagehead {
	background: var(--rana-sand);
	border-block-end: 1px solid var(--rana-line);
	padding-block: clamp(48px, 7vw, 88px) clamp(40px, 5vw, 64px);
}
.rana-pagehead__title { font-size: clamp(2rem, 4.4vw, 3.1rem); margin: 0 0 .5rem; }
.rana-pagehead__intro { max-inline-size: 62ch; margin: 0; font-size: 1.06rem; }

.rana-crumbs {
	font-size: .84rem;
	color: var(--rana-ink-3);
	padding-block: 1.2rem;
	border-block-end: 1px solid var(--rana-line-soft);
}
.rana-crumbs a { color: var(--rana-ink-3); text-decoration: none; }
.rana-crumbs a:hover { color: var(--rana-bronze-text); }
.rana-crumbs span { margin-inline: .45rem; }

/* ------------------------------------------------------ single property ---- */

.rana-single__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 336px;
	gap: var(--rana-gap);
	align-items: start;
	padding-block: clamp(30px, 4vw, 52px) var(--rana-band);
}

.rana-single__head { margin-block-end: 1.8rem; }
.rana-single__title { font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin: 0; }

.rana-gallery { margin: 0 0 2.4rem; }

.rana-gallery__main {
	display: block;
	inline-size: 100%;
	padding: 0;
	border: 1px solid var(--rana-line-soft);
	border-radius: var(--rana-arch);
	overflow: hidden;
	background: var(--rana-sand);
	cursor: zoom-in;
	aspect-ratio: 4 / 3;
}
.rana-gallery__img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.rana-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: .55rem;
	margin-block-start: .7rem;
}
.rana-gallery__thumb {
	padding: 0;
	border: 1px solid var(--rana-line-soft);
	border-radius: var(--rana-r);
	overflow: hidden;
	background: var(--rana-sand);
	cursor: pointer;
	aspect-ratio: 1;
	transition: border-color var(--rana-t);
}
.rana-gallery__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.rana-gallery__thumb.is-active { border-color: var(--rana-bronze); }

.rana-prose { margin-block-end: 2.6rem; }
.rana-prose p { margin-block-end: 1.1em; }

.rana-spectable {
	margin: 0 0 2.6rem;
	border-block-start: 1px solid var(--rana-line);
}
.rana-spectable__row {
	display: grid;
	grid-template-columns: 11rem minmax(0, 1fr);
	gap: 1rem;
	padding-block: .8rem;
	border-block-end: 1px solid var(--rana-line-soft);
}
.rana-spectable dt { color: var(--rana-ink-3); font-size: .92rem; margin: 0; }
.rana-spectable dd { margin: 0; color: var(--rana-ink); font-weight: 600; }

.rana-features { margin-block-end: 2.6rem; }
.rana-features__list {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
	gap: .55rem 1.2rem;
}
.rana-features__list li {
	position: relative;
	padding-inline-start: 1.3rem;
	font-size: .95rem;
}
.rana-features__list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: .62em;
	inline-size: .5rem; block-size: .5rem;
	border: 1px solid var(--rana-bronze);
	transform: rotate(45deg);
}

.rana-single__rail { position: sticky; inset-block-start: 96px; display: grid; gap: 1.2rem; }

.rana-actionbox {
	background: var(--rana-white);
	border: 1px solid var(--rana-line);
	border-radius: var(--rana-r);
	padding: 1.5rem 1.35rem;
	box-shadow: var(--rana-shadow);
}
.rana-actionbox__price {
	font-family: var(--rana-display);
	font-size: 1.85rem;
	font-weight: 700;
	color: var(--rana-ink);
	margin: 0;
	line-height: 1.3;
}
.rana-actionbox__price small { font-family: var(--rana-body); font-size: .72rem; color: var(--rana-ink-3); }
.rana-actionbox__note { font-size: .85rem; color: var(--rana-ink-3); margin: .2rem 0 0; }
.rana-actionbox__ref {
	font-size: .82rem;
	color: var(--rana-ink-3);
	margin: .9rem 0 1.2rem;
	padding-block-end: 1.1rem;
	border-block-end: 1px solid var(--rana-line-soft);
}
.rana-actionbox__ref code { background: var(--rana-sand); padding: .15rem .45rem; border-radius: 2px; color: var(--rana-ink); }
.rana-actionbox .rana-btn { margin-block-end: .6rem; }
.rana-actionbox__fine {
	font-size: .82rem;
	line-height: 1.7;
	color: var(--rana-ink-3);
	margin: .9rem 0 0;
	padding-block-start: .9rem;
	border-block-start: 1px solid var(--rana-line-soft);
}

.rana-related {
	background: var(--rana-sand);
	border-block-start: 1px solid var(--rana-line);
	padding-block: var(--rana-band);
}

/* ---------------------------------------------------------- lightbox ---- */

.rana-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(26, 23, 20, .94);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4vmin;
}
.rana-lightbox[hidden] { display: none; }
.rana-lightbox__img { max-inline-size: 100%; max-block-size: 88vh; object-fit: contain; }
.rana-lightbox__close,
.rana-lightbox__nav {
	position: absolute;
	background: none;
	border: 0;
	color: #fff;
	font-size: 2.6rem;
	line-height: 1;
	cursor: pointer;
	padding: .4rem .9rem;
	opacity: .8;
}
.rana-lightbox__close { inset-block-start: 1rem; inset-inline-end: 1.4rem; font-size: 2.2rem; }
.rana-lightbox__nav--prev { inset-inline-start: 1rem; }
.rana-lightbox__nav--next { inset-inline-end: 1rem; }
.rana-lightbox__close:hover, .rana-lightbox__nav:hover { opacity: 1; }

/* ------------------------------------------------------------- forms ---- */

.rana-form__group { border: 0; padding: 0; margin: 0 0 2.2rem; }
.rana-form__legend {
	font-family: var(--rana-display);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--rana-ink);
	padding: 0 0 .7rem;
	margin-block-end: 1.2rem;
	inline-size: 100%;
	border-block-end: 1px solid var(--rana-bronze-pale);
}

.rana-form__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap: 0 1.2rem;
}
.rana-field--wide { grid-column: 1 / -1; }
.rana-field--check label { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .95rem; }

.rana-req { color: #a33; }

.rana-hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }

.rana-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .8rem;
	margin-block-start: 1.5rem;
}

.rana-terms {
	background: var(--rana-sand);
	border: 1px solid var(--rana-line);
	border-radius: var(--rana-r);
	padding: 1.6rem 1.5rem;
	margin-block-end: 1.6rem;
}
.rana-terms__title { font-size: 1.2rem; margin: 0 0 .9rem; }
.rana-terms__list { margin: 0 0 1.2rem; padding-inline-start: 1.2rem; }
.rana-terms__list li { margin-block-end: .6rem; font-size: .95rem; line-height: 1.75; }

.rana-notice {
	border-radius: var(--rana-r);
	padding: 1.2rem 1.3rem;
	margin-block-end: 1.6rem;
	border: 1px solid;
}
.rana-notice h3 { margin: 0 0 .35rem; font-size: 1.25rem; }
.rana-notice p { margin: 0; }
.rana-notice--ok { background: #f1f6f0; border-color: #b9d0b2; color: #2c4426; }
.rana-notice--ok h3 { color: #2c4426; }
.rana-notice--err { background: #fbf1f1; border-color: #ddb4b4; color: #7a2d2d; }

.rana-leadform {
	background: var(--rana-white);
	border: 1px solid var(--rana-line);
	border-radius: var(--rana-r);
	padding: 1.4rem 1.35rem;
}
.rana-leadform__title { font-size: 1.2rem; margin: 0 0 .3rem; }
.rana-leadform__intro { font-size: .9rem; color: var(--rana-ink-3); margin: 0 0 1rem; }
.rana-leadform--compact .rana-form__grid { grid-template-columns: 1fr; }

/* ------------------------------------------------------- hero search ---- */

.rana-hero-search {
	background: var(--rana-white);
	border: 1px solid var(--rana-line);
	border-radius: var(--rana-r);
	padding: 1.1rem 1.2rem 1.3rem;
	box-shadow: var(--rana-shadow);
}
.rana-hero-search__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	gap: .8rem;
	align-items: end;
}
.rana-hero-search .rana-field { margin: 0; }
.rana-hero-search .rana-btn { block-size: 2.9rem; }

/* ------------------------------------------------------------- stats ---- */

.rana-stats {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	gap: 1px;
	background: var(--rana-line);
	border: 1px solid var(--rana-line);
}
.rana-stat {
	background: var(--rana-ivory);
	padding: 1.5rem 1.2rem;
	text-align: center;
}
.rana-stat__n {
	display: block;
	font-family: var(--rana-display);
	font-size: clamp(1.9rem, 3.4vw, 2.7rem);
	font-weight: 700;
	color: var(--rana-bronze-text);
	line-height: 1.15;
}
.rana-stat__k {
	display: block;
	font-size: .85rem;
	color: var(--rana-ink-3);
	margin-block-start: .35rem;
}

/* --------------------------------------------------------------- blog ---- */

.rana-postgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
	gap: clamp(24px, 3vw, 40px);
}

.rana-post__link { display: block; color: inherit; text-decoration: none; }

.rana-post__media {
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--rana-arch-sm);
	border: 1px solid var(--rana-line-soft);
	background: var(--rana-sand);
	margin-block-end: 1rem;
}
.rana-post__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }

.rana-post__date { font-size: .8rem; color: var(--rana-ink-3); margin: 0 0 .3rem; }
.rana-post__title { font-size: 1.22rem; line-height: 1.5; margin: 0 0 .5rem; }
.rana-post__excerpt { font-size: .94rem; margin: 0 0 .7rem; color: var(--rana-ink-2); }
.rana-post__more { font-size: .88rem; font-weight: 600; color: var(--rana-bronze-text); }
.rana-post__link:hover .rana-post__more { text-decoration: underline; }

/* Hello Elementor ships an intentionally bare blog. Style its markup rather
   than overriding the templates — far less code to keep in step. */
.blog .site-main,
.archive .site-main,
.single-post .site-main,
.search .site-main {
	width: min(100% - 2.5rem, 780px);
	margin-inline: auto;
	padding-block: clamp(40px, 6vw, 76px);
}

.blog .site-main article,
.archive .site-main article {
	padding-block-end: clamp(28px, 4vw, 44px);
	margin-block-end: clamp(28px, 4vw, 44px);
	border-block-end: 1px solid var(--rana-line);
}

.site-main .entry-title { font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.4; margin-block-end: .4rem; }
.site-main .entry-title a { color: var(--rana-ink); text-decoration: none; }
.site-main .entry-title a:hover { color: var(--rana-bronze-text); }
.site-main .entry-meta { font-size: .84rem; color: var(--rana-ink-3); margin-block-end: 1rem; }
.site-main .post-thumbnail { display: block; margin-block-end: 1.3rem; }
.site-main .post-thumbnail img {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--rana-arch-sm);
	border: 1px solid var(--rana-line-soft);
}
.site-main .entry-content > * + * { margin-block-start: 1.1em; }
.site-main .entry-content h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin-block-start: 1.8em; }
.site-main .entry-content h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin-block-start: 1.5em; }
.site-main .entry-content ul,
.site-main .entry-content ol { padding-inline-start: 1.4rem; }
.site-main .entry-content li { margin-block-end: .5em; }
.site-main .entry-content blockquote {
	margin-inline: 0;
	padding-inline-start: 1.2rem;
	border-inline-start: 2px solid var(--rana-bronze);
	font-family: var(--rana-display);
	font-size: 1.15rem;
	color: var(--rana-ink);
}
.site-main .pagination, .site-main .nav-links { padding-block: 1.5rem; }

/* ------------------------------------------------------------ mobile ---- */

@media (max-width: 1024px) {
	.rana-single__layout { grid-template-columns: 1fr; }
	.rana-single__rail { position: static; }
}

@media (max-width: 860px) {
	.rana-listing { grid-template-columns: 1fr; }
	.rana-listing__rail {
		position: fixed;
		inset: 0;
		z-index: 500;
		background: var(--rana-ivory);
		padding: 1.2rem;
		overflow-y: auto;
		display: none;
	}
	.rana-listing__rail.is-open { display: block; }
	.rana-filters__open { display: inline-flex; }
	.rana-filters { border: 0; padding: 0; }
	.rana-hero-search__row { grid-template-columns: 1fr; }
	.rana-spectable__row { grid-template-columns: 8.5rem minmax(0, 1fr); }
}

@media (max-width: 480px) {
	body { font-size: 16px; }
	.rana-wrap { width: min(100% - 1.6rem, var(--rana-wrap)); }
	.rana-spectable__row { grid-template-columns: 1fr; gap: .1rem; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
	.rana-card__link:hover .rana-card__img { transform: none; }
}

@media print {
	.rana-listing__rail, .rana-lightbox, .rana-leadform { display: none !important; }
}

/* ==========================================================================
   Header and footer.
   These live here rather than inside the Theme Builder HTML widgets so the
   chrome is cache-busted by RANA_VER along with everything else, and a restyle
   is one file instead of two template edits.
   ========================================================================== */

.rana-header {
	position: sticky;
	inset-block-start: 0;
	z-index: 400;
	background: var(--rana-ivory);
	border-block-end: 1px solid transparent;
	transition: border-color var(--rana-t), box-shadow var(--rana-t);
}
.rana-header.is-stuck {
	border-block-end-color: var(--rana-line);
	box-shadow: 0 1px 12px rgba(26, 23, 20, .05);
}

.rana-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: .85rem;
}

.rana-brand { display: flex; align-items: center; flex-shrink: 0; }
.rana-brand img {
	block-size: clamp(46px, 5.4vw, 62px);
	inline-size: auto;
	display: block;
}

.rana-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: clamp(.9rem, 2vw, 1.9rem);
}

.rana-nav a {
	position: relative;
	display: block;
	font-size: .96rem;
	font-weight: 500;
	color: var(--rana-ink);
	text-decoration: none;
	padding-block: .35rem;
	transition: color var(--rana-t);
}
.rana-nav a:hover { color: var(--rana-bronze-text); }

/* A drawn hairline instead of a colour swap — the site's one recurring motion. */
.rana-nav a::after {
	content: "";
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 0;
	inline-size: 0;
	block-size: 1px;
	background: var(--rana-bronze);
	transition: inline-size .25s ease;
}
.rana-nav a:hover::after,
.rana-nav .is-current a::after { inline-size: 100%; }
.rana-nav .is-current a { color: var(--rana-bronze-text); }

.rana-header__cta { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }

.rana-header__phone {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .95rem;
	font-weight: 600;
	color: var(--rana-ink);
	text-decoration: none;
	white-space: nowrap;
}
.rana-header__phone:hover { color: var(--rana-bronze-text); }

.rana-navtoggle {
	display: none;
	background: none;
	border: 1px solid var(--rana-line);
	border-radius: var(--rana-r);
	padding: .55rem .7rem;
	cursor: pointer;
	line-height: 0;
}
.rana-navtoggle span {
	display: block;
	inline-size: 20px;
	block-size: 2px;
	background: var(--rana-ink);
	margin: 4px 0;
}

/* The "add your property" CTA is a header button on desktop and a menu row
   inside the drawer on mobile — never both. */
.rana-nav__cta { display: none; }

@media (max-width: 1000px) {
	.rana-navtoggle { display: block; }
	.rana-header__phone span:first-child { display: none; }
	.rana-header__cta .rana-btn { display: none; }
	.rana-nav__cta { display: block; }
	.rana-nav__cta a { color: var(--rana-bronze-text); font-weight: 600; }

	.rana-nav {
		position: fixed;
		inset: 0;
		background: var(--rana-ivory);
		display: none;
		padding: 5.5rem 2rem 2rem;
		overflow-y: auto;
	}
	.rana-nav.is-open { display: block; }
	.rana-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.rana-nav li { border-block-end: 1px solid var(--rana-line-soft); }
	.rana-nav a { font-size: 1.15rem; padding-block: 1rem; }
	.rana-nav a::after { display: none; }
}

/* -------------------------------------------------------------- footer ---- */

.rana-footer {
	background: var(--rana-ink);
	color: #cfc7bd;
	padding-block: clamp(48px, 6vw, 76px) 0;
	font-size: .94rem;
}

.rana-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: clamp(28px, 4vw, 56px);
	padding-block-end: clamp(32px, 4vw, 52px);
}

.rana-footer h3 {
	font-family: var(--rana-body);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--rana-bronze-light);
	margin: 0 0 1.1rem;
}

.rana-footer__brand img {
	block-size: 70px;
	inline-size: auto;
	margin-block-end: 1rem;
	/* The logo is dark-on-transparent; lifting it keeps it legible on ink. */
	filter: brightness(0) invert(1) sepia(.35) saturate(2.2) hue-rotate(3deg);
	opacity: .92;
}

.rana-footer__slogan {
	font-family: var(--rana-display);
	font-size: 1.12rem;
	line-height: 1.75;
	color: #e8e0d4;
	margin: 0 0 1rem;
	max-inline-size: 34ch;
}

.rana-footer ul { list-style: none; margin: 0; padding: 0; }
.rana-footer li { margin-block-end: .6rem; }
.rana-footer a { color: #cfc7bd; text-decoration: none; transition: color var(--rana-t); }
.rana-footer a:hover { color: var(--rana-bronze-light); }

.rana-footer__contact strong { color: #fff; display: block; font-size: 1.15rem; margin-block-end: .2rem; }

.rana-footer__note {
	border-block-start: 1px solid rgba(255, 255, 255, .1);
	padding-block: 1.1rem;
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.5rem;
	justify-content: space-between;
	font-size: .84rem;
	color: #9a938a;
}

@media (max-width: 900px) {
	.rana-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.rana-footer__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------- floating whatsapp ---- */

.rana-wa {
	position: fixed;
	inset-block-end: 20px;
	inset-inline-start: 20px;
	z-index: 450;
	inline-size: 54px;
	block-size: 54px;
	border-radius: 50%;
	background: #25d366;
	display: grid;
	place-items: center;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
	transition: transform var(--rana-t);
}
.rana-wa:hover { transform: translateY(-2px); }
.rana-wa svg { inline-size: 28px; block-size: 28px; fill: #fff; }