/* About page: hero, story, vision and mission, principles, method, why us.
   Desktop is the 1440 Figma frame (positions kept as percentages of the frame); below 1024px sections stack. */

/* ---------- Hero ---------- */
.ramah-about-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-block-size: 595px; overflow: hidden; background: var(--ramah-paper); }
.ramah-about-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(260.9deg, rgb(233 224 212 / 0.9) 23%, rgb(233 224 212 / 0) 83%); }
.ramah-about-hero__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.ramah-about-hero__img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 50%; }
/* Warrior cut-out: Figma box 856 x 595 at x = 26 of 1440 (after its -50% translate), image inside it at 307.55% x 153.28%, offset -129% / -25%. */
.ramah-about-hero__warrior { position: absolute; inset-block: 0; inset-inline-end: 1.81%; inline-size: 59.44%; overflow: hidden; z-index: 0; pointer-events: none; }
.ramah-about-hero__warrior-img { position: absolute; inset-block-start: -25.38%; inset-inline-end: -129.02%; inline-size: 307.55%; block-size: 153.28%; max-inline-size: none; }
.ramah-about-hero__inner { position: relative; z-index: 1; padding-block: calc(var(--ramah-header-h) + 40px) 64px; }
.ramah-about-hero__body { display: flex; flex-direction: column; align-items: flex-start; gap: 21px; max-inline-size: 498px; }
.ramah-about-hero__title { font-size: clamp(2.75rem, 1.9rem + 3.2vw, 4.625rem); line-height: 1.31; color: var(--ramah-text); }
.ramah-about-hero__subtitle { font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.75rem); font-weight: 700; line-height: 1.3; color: var(--ramah-text); }
.ramah-about-hero__text { font-size: 1.25rem; font-weight: 500; line-height: 1.6; color: var(--ramah-text); }

/* ---------- Story ---------- */
.ramah-about-story { position: relative; isolation: isolate; display: flex; align-items: center; min-block-size: 595px; overflow: hidden; background: var(--ramah-paper); }
.ramah-about-story__media { position: absolute; inset: -6% 0; z-index: -1; overflow: hidden; }
.ramah-about-story__img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 80% 50%; }
.ramah-about-story__inner { position: relative; z-index: 1; display: flex; justify-content: flex-end; padding-block: 80px; }
.ramah-about-story__body { display: flex; flex-direction: column; align-items: flex-start; gap: 21px; max-inline-size: 498px; }
.ramah-about-story__title { font-size: clamp(2.1rem, 1.6rem + 1.9vw, 3.2rem); line-height: 1.31; color: var(--ramah-red-500); }
@media (min-width: 1024px) { .ramah-about-story__title { white-space: nowrap; } } /* Figma 128:947 is one line, wider than its 498px column */
.ramah-about-story__text { font-size: 1.25rem; font-weight: 500; line-height: 1.6; color: var(--ramah-text); }

/* ---------- Vision and mission ---------- */
.ramah-about-vision { position: relative; isolation: isolate; min-block-size: 595px; overflow: hidden; background: var(--ramah-paper); }
.ramah-about-vision__media { position: absolute; inset: 0; z-index: -1; }
.ramah-about-vision__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ramah-about-vision__grid { display: grid; grid-template-columns: 1fr 1fr; min-block-size: 595px; }
.ramah-about-vision__panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 143px var(--ramah-gutter) 72px; text-align: center; }
.ramah-about-vision__label { font-size: 1.875rem; font-weight: 600; line-height: 1.07; }
.ramah-about-vision__panel--vision { color: var(--ramah-text); }
.ramah-about-vision__panel--vision .ramah-about-vision__label { color: var(--ramah-red-500); }
.ramah-about-vision__lead { max-inline-size: 498px; font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.2rem); font-weight: 700; line-height: 1.9; }
.ramah-about-vision__panel--mission { color: var(--ramah-color-beige); }
.ramah-about-vision__headline { max-inline-size: 498px; font-size: clamp(1.4rem, 1.1rem + 1vw, 2.2rem); font-weight: 700; line-height: 1.6; }
.ramah-about-vision__text { max-inline-size: 420px; font-size: 1.25rem; font-weight: 500; line-height: 1.6; opacity: 0.8; }

/* ---------- Principles ---------- */
.ramah-about-principles { position: relative; isolation: isolate; padding-block: 64px 80px; overflow: hidden; background-color: #fff5eb; }
.ramah-about-principles::before, .ramah-about-principles::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ramah-about-principles::before { background: url("../../images/about/principles-texture.webp") center / cover; opacity: 0.18; }
.ramah-about-principles::after { background: url("../../images/about/principles-mountains.webp") center bottom / cover no-repeat; mix-blend-mode: multiply; opacity: 0.77; }
.ramah-about-principles__strip { position: absolute; inset-block: 0; z-index: 0; inline-size: 84px; overflow: hidden; pointer-events: none; }
.ramah-about-principles__strip img { position: absolute; inset-block-start: -26.15%; inset-inline-end: -203.85%; inline-size: 507.69%; block-size: 152.31%; max-inline-size: none; }
.ramah-about-principles__strip--start { inset-inline-start: 0; }
.ramah-about-principles__strip--end { inset-inline-end: 0; }
.ramah-about-principles__inner { position: relative; z-index: 1; }
.ramah-about-principles__head { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-block: 0 40px; text-align: center; } /* Figma 316:4070: heading sits 66px into the section */
.ramah-about-principles__title { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.5rem); line-height: 1.36; color: var(--ramah-red-500); }
.ramah-about-principles__mark { display: inline-flex; flex: none; }
.ramah-about-principles__mark svg { inline-size: 24px; block-size: 24px; }
.ramah-about-principles__text { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.5rem); line-height: 1.4; color: #4a4a4a; }
.ramah-about-principles__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-inline-size: 1136px; margin-inline: auto; }
.ramah-about-principles__item { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 16px 16px; text-align: center; }
.ramah-about-principles__item + .ramah-about-principles__item { border-inline-start: 1px solid rgb(217 201 181 / 0.75); }
.ramah-about-principles__badge { position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: 56px; block-size: 56px; margin-block-end: 12px; border-radius: 50%; background: #731b28; box-shadow: 0 0 0 2px rgb(203 180 147 / 0.7); }
.ramah-about-principles__badge svg:not(.ramah-about-principles__ring) { inline-size: 28px; block-size: 28px; }
.ramah-about-principles__ring { position: absolute; inset: -6px; inline-size: calc(100% + 12px); block-size: calc(100% + 12px); fill: none; overflow: visible; transform: rotate(-90deg); pointer-events: none; }
.ramah-about-principles__ring circle { fill: none; stroke: var(--ramah-red-500); stroke-width: 1.5; }
.ramah-about-principles__name { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.5px; color: #2c2b29; }
.ramah-about-principles__desc { max-inline-size: 210px; font-size: 0.875rem; line-height: 1.625; color: #4a4843; }

/* ---------- Method (dark) ---------- */
.ramah-about-method { position: relative; isolation: isolate; padding-block: 64px 44px; /* Figma 137:976: 526px */ overflow: hidden; background: #1a1a1c; color: var(--ramah-color-beige); }
.ramah-about-method__media { position: absolute; inset: 0; z-index: -1; }
.ramah-about-method__img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.ramah-about-method__body { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-inline-size: 498px; }
.ramah-about-method__title { font-size: 2.2rem; line-height: 1.9; color: var(--ramah-color-beige); }
.ramah-about-method__text { font-size: 1.25rem; font-weight: 500; line-height: 1.6; opacity: 0.8; }
.ramah-about-method__steps { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 24px 0; margin-block-start: 56px; }
.ramah-about-method__step { display: flex; flex-direction: column; align-items: center; gap: 24px; min-inline-size: 0; padding-inline: 27px; text-align: center; }
.ramah-about-method__step + .ramah-about-method__step { border-inline-start: 1px solid rgb(216 211 207 / 0.5); padding-block: 0; }
.ramah-about-method__num { font-size: 1.875rem; font-weight: 600; color: #941c1e; line-height: 32px; transition: color 0.5s ease, transform 0.5s ease; }
.ramah-about-method__step.is-in .ramah-about-method__num { color: #941c1e; }
.ramah-about-method__name { font-size: 1.375rem; font-weight: 600; line-height: 37px; color: var(--ramah-color-beige); white-space: pre-line; }
.ramah-about-method__progress { inline-size: 722px; max-inline-size: 100%; margin-block-start: 40px; }
.ramah-about-method__line { display: block; inline-size: 100%; block-size: auto; overflow: visible; }

/* ---------- Why us ---------- */
.ramah-about-why { position: relative; isolation: isolate; display: flex; align-items: center; min-block-size: 481px; overflow: hidden; background: var(--ramah-paper); }
.ramah-about-why__media { position: absolute; inset: 0; z-index: -1; }
.ramah-about-why__img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 100% 50%; }
.ramah-about-why__inner { position: relative; z-index: 1; display: flex; justify-content: flex-end; padding-block: 72px; }
.ramah-about-why__body { display: flex; flex-direction: column; align-items: flex-start; gap: 21px; max-inline-size: min(498px, 100%); }
.ramah-about-why__title { font-size: 2.5rem; line-height: 1.5; color: var(--ramah-red-500); }
.ramah-about-why__arrow { display: block; inline-size: 110px; block-size: 8px; background: url("../../images/shared/nav-arrow.svg") no-repeat center / 100% 100%; }
.ramah-about-why__text { font-size: 1.5rem; font-weight: 500; line-height: 1.35; color: var(--ramah-text); }

/* Mid widths: widen the photo towards the start so the castle clears the copy. */
@media (min-width: 768px) and (max-width: 1279px) {
	.ramah-about-why__media { inset-inline-start: auto; inset-inline-end: 0; inline-size: 120%; }
	.ramah-about-why__body { max-inline-size: 420px; }
	.ramah-about-hero__warrior { inset-inline-end: 22%; inline-size: 62%; }
}
/* ---------- Narrow screens ---------- */
@media (max-width: 1023px) {
	.ramah-about-vision__grid { grid-template-columns: 1fr; min-block-size: 0; }
	.ramah-about-vision { min-block-size: 0; }
	.ramah-about-vision__media { display: none; }
	.ramah-about-vision__panel { padding: 56px var(--ramah-gutter); }
	.ramah-about-vision__panel--vision { background: var(--ramah-paper-2); }
	.ramah-about-vision__panel--mission { background: #5a0b16; }
	.ramah-about-hero__warrior { display: none; }
	.ramah-about-principles__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
	.ramah-about-principles__item:nth-child(odd) { border-inline-start: 0; }
	.ramah-about-principles__item:nth-child(n + 3) { border-block-start: 1px solid rgb(217 201 181 / 0.75); }
	.ramah-about-principles__item:nth-child(3) { border-inline-start: 0; }
	.ramah-about-principles__item:nth-child(even) { border-inline-start: 1px solid rgb(217 201 181 / 0.75); }
	.ramah-about-principles__item:last-child { grid-column: 1 / -1; border-inline-start: 0; }
}
@media (max-width: 767px) {
	.ramah-about-hero, .ramah-about-story { min-block-size: 0; }
	.ramah-about-hero::before, .ramah-about-story::before, .ramah-about-why::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgb(233 224 212 / 0.45) 0%, rgb(233 224 212 / 0.92) 60%); }
	.ramah-about-hero__inner { padding-block: calc(var(--ramah-header-h) + 150px) 56px; }
	.ramah-about-story__inner { justify-content: flex-start; padding-block: 360px 56px; }
	.ramah-about-story__media { inset-block-end: auto; block-size: 340px; }
	.ramah-about-principles__title { padding-inline: 48px; } /* keeps the heading clear of the side ornament strips */
	.ramah-about-why { flex-direction: column; align-items: stretch; min-block-size: 0; }
	.ramah-about-why::before { display: none; }
	.ramah-about-why__inner { order: 1; padding-block: 56px; justify-content: flex-start; }
	.ramah-about-why__media { position: relative; inset: auto; order: 2; block-size: 320px; }
	.ramah-about-why__body { max-inline-size: 100%; }
	.ramah-about-principles__strip { inline-size: 40px; }
	.ramah-about-method__steps { flex-direction: column; align-items: stretch; }
	.ramah-about-method__step { min-inline-size: 0; padding-inline: 0; flex-direction: row; align-items: baseline; justify-content: flex-start; text-align: start; padding-block: 16px; }
	.ramah-about-method__step + .ramah-about-method__step { border-inline-start: 0; border-block-start: 1px solid rgb(216 211 207 / 0.25); }
	.ramah-about-method__progress { display: none; }
	.ramah-about-principles__list { grid-template-columns: 1fr; }
	.ramah-about-principles__item { border-inline-start: 0 !important; border-block-start: 1px solid rgb(217 201 181 / 0.75); }
	.ramah-about-principles__item:first-child { border-block-start: 0; }
	.ramah-about-principles__item:last-child { grid-column: auto; }
}

/* ---------- Motion (reduced motion: the motion layer leaves everything visible) ---------- */
@media (prefers-reduced-motion: reduce) {
	.ramah-about-method__num { transition: none; }
}

/* Figma 139:1210: every section sits 40px apart on the #e0dad4 page ground (hero, story, ticker, vision, principles, method, why, CTA). */
.ramah-page--about main { background: #e0dad4; padding-block-end: 40px; }
.ramah-page--about main > * + * { margin-block-start: 40px; }
@media (min-width: 1280px) { .ramah-about-hero { block-size: 595px; } }
@media (min-width: 1024px) { .ramah-about-principles { padding-block-end: 40px; } } /* Figma 316:4070: 508px */