/* Services listing: hero, filterable catalogue, process. Cards are visible without JS;
   the filter only hides cards and sets aria-pressed on the tabs. */

/* ---------- Hero ---------- */
.ramah-services-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-block-size: 595px; overflow: hidden; background: var(--ramah-paper); }
.ramah-services-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(260.9deg, rgb(233 224 212 / 0.9) 4.5%, rgb(233 224 212 / 0) 59%), linear-gradient(180deg, #e0ddd8 0%, rgb(224 221 216 / 0) 24%); }
.ramah-services-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.ramah-services-hero__img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 40% 50%; }
.ramah-services-hero__inner { position: relative; z-index: 1; padding-block: calc(var(--ramah-header-h) + 40px) 64px; }
.ramah-services-hero__body { display: flex; flex-direction: column; align-items: flex-start; gap: 21px; max-inline-size: 519px; }
.ramah-services-hero__title { font-size: clamp(2.5rem, 1.7rem + 2.9vw, 4.625rem); line-height: 1.31; color: var(--ramah-text); }
.ramah-services-hero__text { font-size: 1.25rem; font-weight: 500; line-height: 1.6; color: var(--ramah-text); }

/* ---------- Catalogue ---------- */
.ramah-services-catalog { position: relative; isolation: isolate; padding-block: 64px; /* Figma 142:2799: 64px to the header, 64px to the process */ background-color: #eee7df; background-image:
	radial-gradient(145px 78px at 50% 50%, rgb(255 255 255 / 0.45), rgb(238 231 223 / 0.7)),
	linear-gradient(17.16deg, #dfd6cc 12%, rgb(223 214 204 / 0) 12.5%, rgb(223 214 204 / 0) 87%, #dfd6cc 87.5%),
	linear-gradient(162.84deg, #dfd6cc 12%, rgb(223 214 204 / 0) 12.5%, rgb(223 214 204 / 0) 87%, #dfd6cc 87.5%);
	background-size: 100% 100%, 100% 100%, 100% 100%; background-repeat: no-repeat; }
.ramah-services-catalog__head { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.ramah-services-catalog__eyebrow { flex-direction: row; align-items: center; gap: 17px; font-size: 1rem; font-weight: 600; line-height: 1.6; }
.ramah-services-catalog__eyebrow::before, .ramah-services-catalog__eyebrow::after { content: ""; flex: none; inline-size: 114px; block-size: 7px; background: no-repeat center / 100% 100%; }
.ramah-services-catalog__eyebrow::before { background-image: url("../../images/services/eyebrow-right.svg"); }
.ramah-services-catalog__eyebrow::after { background-image: url("../../images/services/eyebrow-left.svg"); }
.ramah-services-catalog__title { font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.75rem); line-height: 1.02; color: #161616; letter-spacing: -0.025em; }
.ramah-services-catalog__text { font-size: 1rem; line-height: 1.6; color: #7a7571; }

.ramah-services-catalog__tabs { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-block: 38px 32px; padding-block-end: 2px; border-block-end: 2px solid #161616; }
.ramah-svc-tab { display: inline-flex; flex: none; align-items: center; gap: 8px; min-block-size: 44px; padding: 8px 16px; white-space: nowrap; border: 0; border-radius: 0; background: transparent; color: #7a7571; font-size: 0.875rem; font-weight: 500; line-height: 1.4; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; }
.ramah-svc-tab[hidden] { display: none; }
.ramah-svc-tab:hover { color: #161616; }
.ramah-svc-tab:focus-visible { outline: 2px solid #941c1e; outline-offset: 2px; }
.ramah-svc-tab[aria-pressed="true"] { background: #941c1e; color: #fff; font-weight: 700; }
.ramah-svc-tab__count { font-size: 0.75rem; opacity: 0.75; }
.ramah-services-catalog__status { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.ramah-services-catalog__empty { text-align: center; color: #7a7571; }

.ramah-services-catalog__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ramah-svc-card { position: relative; display: flex; flex-direction: column; min-block-size: 310px; padding: 29px 31px 0 29px; background: #eae3db; transform-style: preserve-3d; border: 1px solid #a31b26; border-inline-start-width: 3px; box-shadow: 0 1px 1px rgb(0 0 0 / 0.05); transition: box-shadow 0.4s ease; }
.ramah-svc-card[hidden] { display: none; }
/* Red trace: the border draws itself on hover and focus (no extra markup). */
.ramah-svc-card::before { content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 1;
	background:
		linear-gradient(#941c1e, #941c1e) top left / 0% 2px no-repeat,
		linear-gradient(#941c1e, #941c1e) bottom right / 0% 2px no-repeat,
		linear-gradient(#941c1e, #941c1e) top right / 2px 0% no-repeat,
		linear-gradient(#941c1e, #941c1e) bottom left / 2px 0% no-repeat;
	transition: background-size 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.ramah-svc-card:hover::before, .ramah-svc-card:focus-within::before {
	background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%; }
.ramah-svc-card:hover { box-shadow: 0 18px 36px -18px rgb(90 11 22 / 0.35); }
.ramah-svc-card__tilt { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; flex: 1; min-block-size: 0; }
.ramah-svc-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ramah-svc-card__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ramah-svc-card__icon { inline-size: 24px; block-size: 24px; color: #a31b26; }
.ramah-svc-card__stage { font-size: 0.6875rem; line-height: 1.5; color: #7a7571; white-space: nowrap; }
.ramah-svc-card__num { font-size: 4.5rem; font-weight: 700; line-height: 1; color: #a6192e; translate: 0 -12px; } /* Figma 144:3130 numerals sit 12px higher */
.ramah-svc-card__body { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 1; text-align: end; }
.ramah-svc-card__en { font-size: 1.25rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.025em; color: #161616; }
.ramah-svc-card__ar { font-size: 1rem; font-weight: 600; line-height: 1.4; color: #7a7571; }
.ramah-svc-card__text { max-inline-size: 216px; margin-block-start: 8px; font-size: 0.75rem; line-height: 1.625; color: #4b4743; }

.ramah-svc-card__more { border-block-start: 0; }
.ramah-svc-card__toggle { display: flex; align-items: center; justify-content: center; gap: 6px; padding-block: 11px 16px; color: #a31b26; font-size: 0.75rem; font-weight: 700; cursor: pointer; list-style: none; }
.ramah-svc-card__toggle::-webkit-details-marker { display: none; }
.ramah-svc-card__toggle:focus-visible { outline: 2px solid #a31b26; outline-offset: 2px; }
.ramah-svc-card__chevron { inline-size: 14px; block-size: 14px; transition: rotate 0.25s ease; }
.ramah-svc-card__more[open] .ramah-svc-card__chevron { rotate: 180deg; }
.ramah-svc-card__panel { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-block: 0 20px; border-block-start: 1px solid rgb(161 27 38 / 0.2); padding-block-start: 16px; }
.ramah-svc-card__list { display: flex; flex-direction: column; gap: 6px; }
.ramah-svc-card__list li { position: relative; padding-inline-start: 14px; font-size: 0.8125rem; line-height: 1.6; color: #4b4743; }
.ramah-svc-card__list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.7em; inline-size: 6px; block-size: 6px; border-radius: 50%; background: #a31b26; }
.ramah-svc-card__panel .ramah-btn--link { font-size: 0.8125rem; }

/* ---------- Process ---------- */
.ramah-services-process { position: relative; isolation: isolate; padding-block: 84px 64px; overflow: hidden; background-color: #fff5eb; }
.ramah-services-process::before, .ramah-services-process::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ramah-services-process::before { background: url("../../images/services/paper.webp") center / cover; opacity: 0.18; }
.ramah-services-process::after { background: url("../../images/services/mountains.webp") center bottom / cover no-repeat; mix-blend-mode: multiply; opacity: 0.77; }
.ramah-services-process__edge { position: absolute; inset-block: 0; inset-inline-end: 100%; inline-size: 84px; overflow: hidden; pointer-events: none; }
.ramah-services-process__edge img { position: absolute; inset-block-start: -0.37%; inset-inline-end: 0; inline-size: 507.69%; block-size: 152.31%; max-inline-size: none; }
.ramah-services-process__inner { position: relative; z-index: 1; }
.ramah-services-process__title { margin-block-start: 8px; font-size: clamp(2.5rem, 2.5rem + 4.5vw, 5.25rem); line-height: 1; color: #121212; letter-spacing: -0.025em; }
.ramah-services-process__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 0; margin-block-start: 116px; }
.ramah-services-process__step { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-inline: 48px; }
.ramah-services-process__step + .ramah-services-process__step { border-inline-start: 1px solid rgb(18 18 18 / 0.9); }
.ramah-services-process__num { font-size: 3.75rem; font-weight: 700; line-height: 1; color: #8b0a1e; }
.ramah-services-process__name { font-size: 1.875rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; color: #121212; }
.ramah-services-process__text { font-size: 1.125rem; line-height: 28px; color: #444; }
/* Figma 153:3438: the three steps sit unevenly, each divider follows its own padding. */
@media (min-width: 768px) {
	.ramah-services-process__steps { grid-template-columns: repeat(3, auto); justify-content: center; gap: 40px 0; }
	.ramah-services-process__step { padding-inline: 0; }
	.ramah-services-process__step:nth-child(1) { padding-inline-end: 106px; }
	.ramah-services-process__step:nth-child(2) { padding-inline: 57px 106px; }
	.ramah-services-process__step:nth-child(3) { padding-inline: 57px 50px; padding-block-end: 36px; }
}

/* ---------- Narrow screens ---------- */
@media (max-width: 1100px) {
	.ramah-services-catalog__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.ramah-services-hero { min-block-size: 0; }
	.ramah-services-hero::before { background: linear-gradient(180deg, rgb(233 224 212 / 0.5) 0%, rgb(233 224 212 / 0.94) 62%); }
	.ramah-services-hero__inner { padding-block: calc(var(--ramah-header-h) + 150px) 56px; }
	.ramah-services-catalog__grid { grid-template-columns: 1fr; }
	.ramah-services-catalog__tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
	.ramah-services-catalog__eyebrow::before, .ramah-services-catalog__eyebrow::after { inline-size: 56px; }
	.ramah-services-process { padding-block: 64px; }
	.ramah-services-process__edge { display: none; }
	.ramah-services-process__steps { grid-template-columns: 1fr; margin-block-start: 48px; }
	.ramah-services-process__step { padding-inline: 0; padding-block: 24px; }
	.ramah-services-process__step + .ramah-services-process__step { border-inline-start: 0; border-block-start: 1px solid rgb(18 18 18 / 0.9); }
}
@media (prefers-reduced-motion: reduce) {
	.ramah-svc-card::before { transition: none; }
}