/* Project pages. The shell stays; the project supplies its own colour. */

.rk-project-page {
	--rk-accent: #1B7A8C;
	--rk-accent-deep: #0F5A69;
	--rk-accent-soft: #E4F1F3;
	--rk-dot: #E8873A;
	background: #fff;
}

.rk-project-page .rk-bar.is-stuck { background: rgba(15, 90, 105, 0.96); }
.rk-project-page .rk-progress__ink { background: linear-gradient(180deg, var(--rk-dot), var(--rk-accent)); }
.rk-project-page .rk-wa { background: #25D366; }

/* Serif wordmark, matching the brochure's own lockup */
.rk-pj-word {
	font-family: "Source Serif 4", Georgia, serif;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.rk-pj-word i { font-style: normal; color: var(--rk-dot); }

.rk-pj-sub {
	display: block;
	font-family: var(--rk-en);
	font-size: 0.3em;
	font-weight: 500;
	letter-spacing: 0.44em;
	text-transform: uppercase;
	opacity: 0.75;
	margin-top: 0.5em;
}

body.rkz-lang-ar .rk-pj-sub { letter-spacing: 0; }

/* Hero --------------------------------------------------------------------- */

.rk-pj-hero { position: relative; min-height: 100svh; display: grid; place-items: center; overflow: hidden; color: #fff; background: var(--rk-accent-deep); }
.rk-pj-hero__bg { position: absolute; inset: 0; z-index: 0; }
.rk-pj-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.rk-pj-hero__veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(9, 46, 54, 0.72) 0%, rgba(9, 46, 54, 0.28) 40%, rgba(9, 46, 54, 0.86) 100%); }
.rk-pj-hero__inner { position: relative; z-index: 2; text-align: center; padding-block: 130px 100px; }

.rk-pj-hero__by { font-family: var(--rk-en); font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; opacity: 0.8; margin: 0 0 20px; }
.rk-pj-hero__name { font-size: clamp(46px, 10vw, 118px); line-height: 1; margin: 0; }
.rk-pj-hero__line { margin: 24px auto 0; max-width: 44ch; font-size: clamp(16px, 2.1vw, 20px); color: rgba(255, 255, 255, 0.86); }
.rk-pj-hero__cta { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.rk-btn--pj { background: var(--rk-dot); border-color: var(--rk-dot); color: #14323a; font-weight: 700; }
.rk-btn--pj::after { background: #fff; }
.rk-btn--pjline { border-color: rgba(255, 255, 255, 0.5); color: #fff; }
.rk-btn--pjline::after { background: #fff; }
.rk-btn--pjline:hover { color: var(--rk-accent-deep); }

/* Facts -------------------------------------------------------------------- */

.rk-pj-facts { background: var(--rk-accent); color: #fff; }
.rk-pj-facts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: rgba(255, 255, 255, 0.2); }
.rk-pj-facts__item { background: var(--rk-accent); padding: clamp(30px, 4.5vw, 48px) 22px; text-align: center; }
.rk-pj-facts__v { display: block; font-family: var(--rk-en); font-size: clamp(30px, 4.4vw, 46px); font-weight: 700; line-height: 1; }
.rk-pj-facts__v em { font-style: normal; font-size: 0.4em; font-weight: 500; opacity: 0.85; margin-inline-start: 6px; }
.rk-pj-facts__l { display: block; margin-top: 10px; font-size: 13.5px; opacity: 0.78; }

/* Sections ----------------------------------------------------------------- */

.rk-pj-sec { padding-block: clamp(60px, 8vw, 110px); }
.rk-pj-sec--soft { background: var(--rk-accent-soft); }
.rk-pj-sec--deep { background: var(--rk-accent-deep); color: #fff; }
.rk-project-page .rk-eyebrow { color: var(--rk-accent); opacity: 1; }
.rk-pj-sec--deep .rk-eyebrow { color: var(--rk-dot); }

.rk-pj-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: clamp(30px, 5vw, 66px); align-items: start; }

/* Uses --------------------------------------------------------------------- */

.rk-uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; margin-top: 42px; }

.rk-use { position: relative; overflow: hidden; background: #fff; border: 1px solid rgba(27, 122, 140, 0.18); display: grid; }
.rk-use__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.rk-use__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); }
.rk-use:hover .rk-use__media img { transform: scale(1.05); }
.rk-use__body { padding: 26px 24px 28px; display: grid; gap: 10px; }
.rk-use__title { margin: 0; font-size: 23px; font-weight: 700; color: var(--rk-accent-deep); }
.rk-use__area { font-family: var(--rk-en); font-size: 15px; font-weight: 600; color: var(--rk-dot); }
.rk-use__meta { display: grid; gap: 6px; font-size: 14.5px; opacity: 0.8; }
.rk-use__meta b { font-weight: 600; opacity: 1; }

/* Location ----------------------------------------------------------------- */

.rk-pj-map { border: 1px solid rgba(27, 122, 140, 0.2); background: #fff; }
.rk-pj-map img { width: 100%; height: auto; }
.rk-near { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 0; }
.rk-near li { display: flex; gap: 14px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid rgba(27, 122, 140, 0.16); font-size: 15.5px; }
.rk-near li::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--rk-dot); transform: translateY(-2px); }

/* Floor plans -------------------------------------------------------------- */

.rk-plans__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }

.rk-plans__tab {
	padding: 12px 20px; border: 1px solid rgba(27, 122, 140, 0.3);
	background: none; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
	color: var(--rk-accent-deep); transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.rk-plans__tab[aria-selected="true"] { background: var(--rk-accent); border-color: var(--rk-accent); color: #fff; }
.rk-plans__tab small { display: block; font-size: 11px; font-weight: 500; opacity: 0.7; margin-top: 3px; }

.rk-plans__panel { margin-top: 22px; border: 1px solid rgba(27, 122, 140, 0.2); background: #fff; }
.rk-plans__panel img { width: 100%; height: auto; }
.rk-plans__panel[hidden] { display: none; }
.rk-plans__note { margin-top: 14px; font-size: 13.5px; opacity: 0.7; }

/* Facilities --------------------------------------------------------------- */

.rk-fac { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 1px; margin-top: 40px; background: rgba(255, 255, 255, 0.16); }
.rk-fac__item { background: var(--rk-accent-deep); padding: 26px 16px; display: grid; justify-items: center; gap: 12px; text-align: center; font-size: 13.5px; }
.rk-fac__item svg { color: var(--rk-dot); }

/* Gallery ------------------------------------------------------------------ */

.rk-gal { margin-top: 36px; display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 560px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; }
.rk-gal__item { margin: 0; scroll-snap-align: center; }
.rk-gal__item img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.rk-gal__item figcaption { margin-top: 10px; font-size: 13.5px; opacity: 0.7; }

/* Register ----------------------------------------------------------------- */

.rk-pj-reg { background: var(--rk-accent-deep); color: #fff; padding-block: clamp(60px, 8vw, 110px); }
.rk-pj-reg .rk-field > span { color: rgba(255, 255, 255, 0.75); }
.rk-pj-reg .rk-field input, .rk-pj-reg .rk-field select { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.32); }
.rk-pj-reg .rk-field input:focus, .rk-pj-reg .rk-field select:focus { border-bottom-color: var(--rk-dot); }
.rk-pj-reg .rk-btn--solid { background: var(--rk-dot); border-color: var(--rk-dot); color: #14323a; }
.rk-pj-reg .rk-btn--solid::after { background: #fff; }
.rk-pj-reg .rk-phone__label { color: rgba(255, 255, 255, 0.75); }
.rk-pj-reg .rk-phone__row { border-bottom-color: rgba(255, 255, 255, 0.32); }
.rk-pj-reg .rk-phone__input, .rk-pj-reg .rk-dial { color: #fff; }

/* Back to company ---------------------------------------------------------- */

.rk-pj-back { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 14px; font-weight: 600; color: var(--rk-accent); text-decoration: none; }
.rk-pj-back i { width: 28px; height: 1px; background: currentColor; display: block; transition: width 0.35s ease; }
.rk-pj-back:hover i { width: 46px; }