/**
 * About page (من نحن) — markup من about.html مُدخل عبر إعداد الموقع.
 * يُكمّل inner-pages.css: أنماط page-hero__grid، السيرة، المؤهلات، إلخ.
 *
 * المشكلة التي يعالجها: inner-pages يفرض على .page-hero__visual شكل بطل آخر
 * (aspect-ratio، overflow، طبقة ::after مائلة) بينما محتوى about يستخدم
 * .page-hero__frame + .page-hero__img — فيظهر شكل ضخم / مثلث وSVG بلا حدود.
 */

/* إلغاء أنماط البطل العامة عند وجود الإطار البورتريه */
.page-hero__visual:has(.page-hero__frame){
	position: relative;
	display: flex;
	justify-content: center;
	aspect-ratio: unset;
	border-radius: 0;
	overflow: visible;
	box-shadow: none;
}
.page-hero__visual:has(.page-hero__frame)::after{
	display: none;
}

.page-hero__grid{
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: clamp(40px, 6vw, 90px);
	align-items: center;
}
.page-hero__text .eyebrow{ margin-bottom: 24px; }
.page-hero__title{
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(36px, 5vw, 62px);
	line-height: 1.2;
	color: var(--sage-900);
	letter-spacing: -.01em;
	margin-bottom: 10px;
}
.page-hero__subtitle{
	font-family: var(--font-display);
	font-size: clamp(17px, 2vw, 22px);
	font-weight: 400;
	font-style: italic;
	color: var(--accent-deep);
	margin-bottom: 26px;
	line-height: 1.5;
}
.page-hero__lead{
	font-size: clamp(15.5px, 1.3vw, 17.5px);
	color: var(--ink-soft);
	line-height: 1.95;
	max-width: 54ch;
	margin-bottom: 36px;
}
.page-hero__ctas{
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
}
.page-hero__license{
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--line-soft);
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	color: var(--muted);
}
.page-hero__license svg{
	width: 16px;
	height: 16px;
	color: var(--gold);
	flex-shrink: 0;
}
.page-hero__license b{
	color: var(--sage-900);
	font-weight: 600;
	font-family: var(--font-latin);
	font-size: 14px;
	letter-spacing: .04em;
}
.page-hero__frame{
	position: relative;
	max-width: 420px;
	width: 100%;
	aspect-ratio: 4/5;
}
.page-hero__frame::before{
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 260px 260px 20px 20px;
	background: linear-gradient(180deg, rgba(138,154,141,.18), rgba(184,158,117,.1));
	z-index: 0;
	filter: blur(3px);
}
.page-hero__frame::after{
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 240px 240px 16px 16px;
	border: 1px solid rgba(168,145,122,.35);
	z-index: 3;
	pointer-events: none;
}
.page-hero__img{
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 240px 240px 16px 16px;
	box-shadow: var(--shadow-lg);
}
.page-hero__stats{
	position: absolute;
	bottom: 30px;
	left: -10px;
	background: var(--cream-soft);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: 20px 22px;
	box-shadow: var(--shadow-md);
	z-index: 4;
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 20px 28px;
}
.page-hero__stat-item .n{
	font-family: var(--font-display);
	font-size: 26px;
	font-weight: 700;
	color: var(--sage-800);
	line-height: 1;
	display: block;
}
.page-hero__stat-item span{
	font-size: 11.5px;
	color: var(--muted);
	display: block;
	margin-top: 5px;
	line-height: 1.4;
}

.section--dark{
	background: var(--sage-900);
	color: var(--cream-soft);
}

.bio__grid{
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: clamp(40px, 6vw, 90px);
	align-items: start;
}
.bio__aside{
	position: sticky;
	top: 110px;
}
.bio__aside-label{
	font-family: var(--font-latin);
	font-style: italic;
	font-size: 86px;
	line-height: .9;
	color: var(--line-soft);
	display: block;
	margin-bottom: 28px;
	user-select: none;
}
.bio__aside-note{
	font-size: 14px;
	color: var(--muted);
	line-height: 1.8;
	border-right: 3px solid var(--accent);
	padding-right: 18px;
}
.bio__body p{
	font-size: 17px;
	color: var(--ink-soft);
	line-height: 2;
	margin: 0 0 26px;
}
.bio__body p:last-child{ margin-bottom: 0; }
.bio__body strong{
	color: var(--sage-900);
	font-weight: 600;
}
.bio__body em{
	font-style: italic;
	color: var(--accent-deep);
}
.bio__quote{
	margin: 36px 0;
	padding: 28px 32px;
	border-right: 3px solid var(--gold);
	background: linear-gradient(to left, transparent, rgba(184,158,117,.06));
	border-radius: 0 4px 4px 0;
}
.bio__quote p{
	font-family: var(--font-display);
	font-size: 20px;
	line-height: 1.8;
	color: var(--sage-900);
	margin: 0 0 12px !important;
	font-style: italic;
	font-weight: 400;
}
.bio__quote figcaption{
	font-size: 12.5px;
	color: var(--muted);
	letter-spacing: .06em;
}

.quals__grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.qual{
	background: var(--white);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.qual:hover{
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
	border-color: var(--sage-400);
}
.qual__icon{
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--cream-deep);
	display: grid;
	place-items: center;
	color: var(--sage-800);
	margin-bottom: 22px;
	transition: background .35s var(--ease);
	flex-shrink: 0;
}
.qual:hover .qual__icon{
	background: var(--sage-800);
	color: var(--cream-soft);
}
.qual__icon svg{ width: 22px; height: 22px; }
.qual__tag{
	font-size: 11px;
	letter-spacing: .2em;
	color: var(--accent-deep);
	margin-bottom: 12px;
	display: block;
}
.qual__title{
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 700;
	color: var(--sage-900);
	line-height: 1.4;
	margin-bottom: 10px;
}
.qual__desc{
	font-size: 14px;
	color: var(--muted);
	line-height: 1.8;
	flex-grow: 1;
}
.qual__badge{
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--line-soft);
	font-size: 12px;
	color: var(--sage-600);
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
}
.qual__badge svg{ width: 13px; height: 13px; flex-shrink: 0; }

.exp__grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(40px, 5vw, 80px);
	align-items: start;
}
.exp__intro .eyebrow{ margin-bottom: 22px; }
.exp__intro-title{
	font-family: var(--font-display);
	font-size: clamp(28px, 3.5vw, 42px);
	line-height: 1.28;
	color: var(--cream-soft);
	margin-bottom: 20px;
	font-weight: 700;
}
.exp__intro-title em{
	font-style: italic;
	color: var(--gold);
	font-weight: 400;
}
.exp__intro-body{
	font-size: 16px;
	color: rgba(245,239,228,.75);
	line-height: 1.9;
}
.exp__metrics{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
.exp__metric{
	background: rgba(245,239,228,.06);
	border: 1px solid rgba(245,239,228,.12);
	border-radius: var(--radius-lg);
	padding: 26px 22px;
	transition: border-color .35s var(--ease), background .35s var(--ease);
}
.exp__metric:hover{
	background: rgba(245,239,228,.1);
	border-color: var(--gold);
}
.exp__metric .n{
	font-family: var(--font-display);
	font-size: 38px;
	font-weight: 700;
	color: var(--cream-soft);
	line-height: 1;
	display: block;
	margin-bottom: 10px;
}
.exp__metric .n em{
	font-style: italic;
	font-weight: 400;
	color: var(--gold);
	font-size: .6em;
}
.exp__metric p{
	font-size: 13.5px;
	color: rgba(245,239,228,.68);
	line-height: 1.7;
	margin: 0;
}
.exp__areas{ margin-top: 32px; }
.exp__areas-title{
	font-size: 12px;
	letter-spacing: .2em;
	color: var(--gold);
	margin-bottom: 16px;
	display: block;
}
.exp__tags{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.exp__tags span{
	display: inline-block;
	padding: 7px 15px;
	background: rgba(245,239,228,.07);
	border: 1px solid rgba(245,239,228,.15);
	border-radius: 999px;
	font-size: 13px;
	color: rgba(245,239,228,.8);
	transition: all .3s var(--ease);
}
.exp__tags span:hover{
	background: var(--gold);
	color: var(--sage-900);
	border-color: var(--gold);
}

.philosophy__layout{
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(40px, 6vw, 90px);
	align-items: center;
}
.philosophy__visual{
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 4/5;
	box-shadow: var(--shadow-md);
}
.philosophy__visual img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.philosophy__visual::after{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(46,59,49,.35), transparent 50%);
	pointer-events: none;
}
.philosophy__visual-caption{
	position: absolute;
	bottom: 24px;
	right: 24px;
	left: 24px;
	z-index: 2;
	font-family: var(--font-display);
	font-style: italic;
	font-size: 18px;
	color: var(--cream-soft);
	line-height: 1.55;
}
.philosophy__text .eyebrow{ margin-bottom: 22px; }
.philosophy__title{
	font-family: var(--font-display);
	font-size: clamp(28px, 3.5vw, 42px);
	line-height: 1.28;
	color: var(--sage-900);
	margin-bottom: 22px;
	font-weight: 700;
}
.philosophy__title em{
	font-style: italic;
	color: var(--accent-deep);
	font-weight: 400;
}
.philosophy__intro{
	font-size: 16.5px;
	color: var(--ink-soft);
	line-height: 1.9;
	margin-bottom: 32px;
}
.philosophy__pillars{ display: grid; gap: 0; }
.philosophy__pillar{
	display: flex;
	gap: 20px;
	padding: 22px 0;
	border-top: 1px solid var(--line-soft);
}
.philosophy__pillar:last-child{ border-bottom: 1px solid var(--line-soft); }
.philosophy__pillar-num{
	font-family: var(--font-latin);
	font-style: italic;
	font-size: 20px;
	color: var(--accent-deep);
	flex-shrink: 0;
	padding-top: 2px;
	width: 28px;
}
.philosophy__pillar-body h4{
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--sage-900);
	margin-bottom: 6px;
}
.philosophy__pillar-body p{
	font-size: 14.5px;
	color: var(--muted);
	line-height: 1.8;
	margin: 0;
}

.for-whom__grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	margin-top: 10px;
}
.for-card{
	padding: 30px 26px;
	background: var(--white);
	border: 1px solid var(--line-soft);
	border-radius: var(--radius-lg);
	transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.for-card:hover{
	transform: translateY(-4px);
	box-shadow: var(--shadow-md);
}
.for-card__icon{
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--cream-deep);
	color: var(--sage-800);
	display: grid;
	place-items: center;
	margin-bottom: 18px;
}
.for-card__icon svg{ width: 20px; height: 20px; }
.for-card__title{
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--sage-900);
	margin-bottom: 10px;
	line-height: 1.4;
}
.for-card__desc{
	font-size: 14px;
	color: var(--muted);
	line-height: 1.8;
}
.for-whom__note{
	text-align: center;
	margin-top: 42px;
	padding: 28px 32px;
	background: linear-gradient(135deg, rgba(168,145,122,.1), rgba(138,154,141,.08));
	border-radius: var(--radius-lg);
	border: 1px solid var(--line-soft);
}
.for-whom__note p{
	font-family: var(--font-display);
	font-size: 19px;
	font-style: italic;
	color: var(--sage-900);
	line-height: 1.7;
	margin: 0;
}

.trust__grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.trust-card{
	padding: 30px 24px;
	border-radius: var(--radius-lg);
	border: 1px solid rgba(245,239,228,.12);
	background: rgba(245,239,228,.06);
	transition: border-color .4s var(--ease), background .4s var(--ease);
}
.trust-card:hover{
	border-color: var(--gold);
	background: rgba(245,239,228,.1);
}
.trust-card__num{
	font-family: var(--font-display);
	font-size: 38px;
	font-weight: 700;
	color: var(--cream-soft);
	line-height: 1;
	display: block;
	margin-bottom: 14px;
}
.trust-card__num sub{
	font-size: .45em;
	color: var(--gold);
	font-family: var(--font-latin);
	font-style: italic;
	vertical-align: baseline;
}
.trust-card__title{
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--cream-soft);
	margin-bottom: 10px;
	line-height: 1.4;
}
.trust-card__desc{
	font-size: 14px;
	color: rgba(245,239,228,.65);
	line-height: 1.8;
}

.page-cta__ornament{
	font-family: var(--font-latin);
	font-style: italic;
	font-size: 64px;
	color: rgba(245,239,228,.08);
	line-height: 1;
	margin-bottom: 28px;
	display: block;
	position: relative;
}

@media (max-width: 1024px){
	.page-hero__grid,
	.bio__grid,
	.philosophy__layout{ grid-template-columns: 1fr; }
	.page-hero__grid{ gap: 52px; }
	.page-hero__visual:has(.page-hero__frame){ order: -1; }
	.page-hero__frame{ max-width: 360px; margin: 0 auto; }
	.page-hero__stats{
		left: 50%;
		transform: translateX(-50%);
		bottom: -20px;
		grid-template-columns: repeat(3, auto);
		white-space: nowrap;
	}
	.bio__aside{ position: relative; top: 0; }
	.bio__aside-label{ font-size: 64px; }
	.quals__grid{ grid-template-columns: repeat(2, 1fr); }
	.exp__grid{ grid-template-columns: 1fr; }
	.for-whom__grid{ grid-template-columns: repeat(2, 1fr); }
	.trust__grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px){
	.page-hero{ padding: 34px 0 70px; }
	.page-hero__grid{ gap: 40px; }
	.page-hero__frame{ max-width: 260px; }
	.page-hero__frame::before{ inset: -3px; }
	.page-hero__title{ font-size: 30px; }
	.page-hero__subtitle{ font-size: 16px; margin-bottom: 18px; }
	.page-hero__lead{ font-size: 15px; margin-bottom: 28px; }
	.page-hero__ctas{ gap: 10px; }
	.page-hero__ctas .btn{ flex: 1 1 auto; justify-content: center; }
	.page-hero__stats{
		position: static;
		transform: none;
		margin-top: 28px;
		display: flex;
		gap: 18px;
		flex-wrap: wrap;
		white-space: normal;
		border-radius: var(--radius-lg);
		padding: 18px;
	}
	.page-hero__stat-item .n{ font-size: 22px; }
	.page-hero__license{ font-size: 12.5px; gap: 10px; flex-wrap: wrap; }

	.bio__body p{ font-size: 15.5px; }
	.bio__quote p{ font-size: 17px; }
	.bio__quote{ padding: 20px 20px; }
	.bio__aside-label{ font-size: 52px; }

	.quals__grid{ grid-template-columns: 1fr; }
	.qual{ padding: 26px 22px; }
	.exp__metrics{ grid-template-columns: 1fr 1fr; gap: 12px; }
	.exp__metric .n{ font-size: 30px; }
	.exp__metric{ padding: 20px 18px; }
	.philosophy__title{ font-size: 26px; }
	.for-whom__grid{ grid-template-columns: 1fr; }
	.trust__grid{ grid-template-columns: 1fr 1fr; gap: 14px; }
	.trust-card{ padding: 22px 18px; }
	.trust-card__num{ font-size: 30px; }
}