/**
 * HERMA — shell.css
 * Top bar, header, navigation, mobile menu, page banner, breadcrumbs, footer,
 * back-to-top and preloader. Loaded everywhere (handle: hrm-shell).
 */

/* ---- Top bar ---- */
.hrm-topbar { background: var(--hrm-darker); color: #CFE4E5; font-size: .8125rem; }
.hrm-topbar__in { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; min-block-size: 40px; flex-wrap: wrap; }
.hrm-topbar__contact { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.hrm-topbar a, .hrm-topbar__msg { display: inline-flex; align-items: center; gap: 8px; color: #E6F3F3; }
.hrm-topbar a:hover { color: var(--hrm-accent); }
.hrm-topbar__msg { color: #A9CDCF; }

/* ---- Header ---- */
.hrm-header { position: relative; z-index: 50; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-block-end: 1px solid color-mix(in srgb, var(--hrm-line) 75%, transparent); transition: box-shadow .4s ease; }
.hrm-header-sticky .hrm-header { position: sticky; inset-block-start: 0; }
.admin-bar.hrm-header-sticky .hrm-header { inset-block-start: 32px; }
.hrm-header.is-scrolled { box-shadow: 0 14px 34px -26px rgba(var(--hrm-ink-rgb), .45); }
.hrm-header__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; block-size: var(--hrm-header-h); transition: block-size .35s ease; }
.hrm-header.is-scrolled .hrm-header__in { block-size: 70px; }
.hrm-logo { display: inline-flex; align-items: center; flex: none; }
.hrm-logo img { block-size: var(--hrm-logo-h); inline-size: auto; }
.hrm-logo--footer img { block-size: calc(var(--hrm-logo-h) + 6px); }

.hrm-nav__list { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 30px); margin: 0; padding: 0; list-style: none; }
.hrm-nav__item { position: relative; }
.hrm-nav__link { position: relative; display: inline-flex; align-items: center; gap: 4px; padding-block: 8px; color: #28464B; font-size: .906rem; font-weight: 500; }
.hrm-nav__link::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 2px; block-size: 1.5px; background: var(--hrm-primary); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--hrm-ease); }
.hrm-nav__link:hover, .hrm-nav__item.is-active > .hrm-nav__link { color: var(--hrm-primary-dark); }
.hrm-nav__link:hover::after, .hrm-nav__item.is-active > .hrm-nav__link::after { transform: scaleX(1); }
.hrm-nav__caret { opacity: .6; }
.hrm-nav__sub { position: absolute; inset-block-start: 100%; inset-inline-start: -16px; min-inline-size: 230px; margin: 0; padding: 8px; list-style: none; background: #fff; border: 1px solid var(--hrm-line); border-radius: var(--hrm-radius); box-shadow: var(--hrm-shadow-m); opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .3s var(--hrm-ease); }
.hrm-nav__item:hover > .hrm-nav__sub, .hrm-nav__item:focus-within > .hrm-nav__sub { opacity: 1; visibility: visible; transform: none; }
.hrm-nav__sub .hrm-nav__link { display: flex; padding: 10px 12px; border-radius: 10px; }
.hrm-nav__sub .hrm-nav__link::after { display: none; }
.hrm-nav__sub .hrm-nav__link:hover { background: var(--hrm-bg-soft); }

.hrm-header__actions { display: flex; align-items: center; gap: 10px; }
.hrm-lang { display: inline-flex; align-items: center; gap: 8px; block-size: 44px; padding-inline: 14px; border-radius: var(--hrm-r-sm); border: 1px solid var(--hrm-line); background: #fff; color: #28464B; font-size: .875rem; font-weight: 600; transition: border-color .3s ease, color .3s ease; }
.hrm-lang:hover { border-color: var(--hrm-primary); color: var(--hrm-primary-dark); }
.hrm-lang[lang="ar"] { font-family: var(--hrm-font-ar); }
.hrm-lang[lang="en"] { font-family: 'Archivo', sans-serif; }

.hrm-burger { display: none; inline-size: 44px; block-size: 44px; border-radius: var(--hrm-r-sm); border: 1px solid var(--hrm-line); background: #fff; cursor: pointer; align-items: center; justify-content: center; }
.hrm-burger__bars { position: relative; inline-size: 18px; block-size: 12px; }
.hrm-burger__bars i { position: absolute; inset-inline-start: 0; block-size: 1.6px; border-radius: 2px; background: var(--hrm-ink); transition: transform .35s var(--hrm-ease), opacity .25s ease, inline-size .35s var(--hrm-ease); }
.hrm-burger__bars i:nth-child(1) { inset-block-start: 0; inline-size: 18px; }
.hrm-burger__bars i:nth-child(2) { inset-block-start: 5px; inline-size: 18px; }
.hrm-burger__bars i:nth-child(3) { inset-block-start: 10px; inline-size: 11px; }
.hrm-burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.hrm-burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.hrm-burger[aria-expanded="true"] i:nth-child(3) { inline-size: 18px; transform: translateY(-5px) rotate(-45deg); }

/* ---- Mobile menu (full-height sheet) ---- */
.hrm-mnav { position: fixed; inset-inline: 0; inset-block-start: var(--hrm-mnav-top, var(--hrm-header-h)); inset-block-end: 0; z-index: 49; background: #fff; overflow-y: auto; overscroll-behavior: contain; border-block-start: 1px solid var(--hrm-line); padding-block-end: env(safe-area-inset-bottom, 0px); }
.hrm-mnav[hidden] { display: none; }
.hrm-mnav.is-open { animation: hrmSheet .45s var(--hrm-ease) both; }
@keyframes hrmSheet { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.hrm-mnav__in { display: flex; flex-direction: column; min-block-size: 100%; padding-block: 12px 28px; }
.hrm-mnav__list { margin: 0; padding: 0; list-style: none; }
.hrm-mnav__list > li { opacity: 0; transform: translateY(10px); }
.hrm-mnav.is-open .hrm-mnav__list > li { animation: hrmUp .5s var(--hrm-ease) both; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }
.hrm-mnav__list .hrm-nav__link { display: flex; align-items: center; justify-content: space-between; min-block-size: 56px; padding-block: 14px; font-size: 1.125rem; font-weight: 500; color: var(--hrm-ink); border-block-end: 1px solid color-mix(in srgb, var(--hrm-line) 70%, transparent); }
.hrm-mnav__list .hrm-nav__link::after { content: ""; position: static; display: block; inline-size: 8px; block-size: 8px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--hrm-line) 40%, var(--hrm-primary)); background: transparent; transform: none; transition: background .3s ease, border-color .3s ease; }
.hrm-mnav__list .hrm-nav__item.is-active > .hrm-nav__link { color: var(--hrm-primary-dark); }
.hrm-mnav__list .hrm-nav__item.is-active > .hrm-nav__link::after { background: var(--hrm-primary); border-color: var(--hrm-primary); }
.hrm-mnav__list .hrm-nav__sub { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0; padding-inline-start: 14px; }
.hrm-mnav__list .hrm-nav__caret { display: none; }
.hrm-mnav__foot { display: flex; flex-direction: column; gap: 14px; margin-block-start: auto; padding-block-start: 28px; }
.hrm-mnav__foot .hrm-btn { inline-size: 100%; justify-content: space-between; block-size: 52px; }
.hrm-mnav__contact { display: grid; grid-template-columns: 1fr; gap: 8px; }
.hrm-mnav__contact a { display: flex; align-items: center; gap: 10px; min-block-size: 48px; padding-inline: 16px; border-radius: var(--hrm-r-sm); background: var(--hrm-bg-soft); color: var(--hrm-ink); font-size: .94rem; font-weight: 500; }
.hrm-mnav__contact a .hrm-icon { color: var(--hrm-primary); }
body.hrm-menu-open { overflow: hidden; }

/* ---- Page banner (approved inset card) ---- */
.hrm-banner { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-block-size: var(--hrm-banner-h); color: #fff;
	background: radial-gradient(640px 420px at 0% 0%, rgba(var(--hrm-accent-rgb), .17), transparent 62%), radial-gradient(520px 360px at 30% 120%, rgba(var(--hrm-primary-rgb), .22), transparent 65%), var(--hrm-dark); }
.hrm-banner-inset .hrm-banner { margin: 14px 14px 0; border-radius: var(--hrm-r-xl); }
.hrm-banner__media { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 62%; z-index: -1;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 22%, #000 46%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 22%, #000 46%); }
.hrm-banner__media img { inline-size: 100%; block-size: 100%; object-fit: cover; animation: hrmKb 12s ease-out both; }
@keyframes hrmKb { from { transform: scale(1.08); } to { transform: scale(1); } }
.hrm-banner__fade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(var(--hrm-darker-rgb), .55) 0%, rgba(var(--hrm-darker-rgb), 0) 42%), linear-gradient(180deg, rgba(var(--hrm-darker-rgb), .25) 0%, rgba(var(--hrm-darker-rgb), 0) 30%); }
.hrm-banner__bp { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px); background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(620px 420px at 12% 55%, #000 0%, transparent 75%); mask-image: radial-gradient(620px 420px at 12% 55%, #000 0%, transparent 75%); }
.hrm-banner__in { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-block: clamp(56px, 7vw, 92px); }
.hrm-banner__title { color: #fff; font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem); line-height: 1.08; max-inline-size: 16ch; letter-spacing: -.018em; animation: hrmUp .95s .1s var(--hrm-ease) both; }
.hrm-banner__sub { max-inline-size: 50ch; color: #BFD8DA; font-size: 1.0625rem; line-height: 1.75; animation: hrmUp .95s .22s var(--hrm-ease) both; }
.hrm-banner--line .hrm-banner__in::after { content: ""; display: block; inline-size: 56px; block-size: 2px; border-radius: 2px; background: var(--hrm-accent); margin-block-start: 10px; transform-origin: left; animation: hrmDraw 1.1s .5s var(--hrm-ease) both; }
@keyframes hrmUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hrmDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- Breadcrumbs ---- */
.hrm-crumb { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 16px; margin-block-end: 8px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); font-size: .78rem; color: #A9CDCF; animation: hrmUp .9s var(--hrm-ease) both; }
.hrm-crumb a { color: #E2F0F0; } .hrm-crumb a:hover { color: var(--hrm-accent); }
.hrm-crumb__sep { display: inline-flex; opacity: .6; }

/* ---- Footer ---- */
.hrm-footer { background: var(--hrm-bg-soft); border-block-start: 1px solid var(--hrm-line); }
.hrm-footer__grid { display: grid; grid-template-columns: 1.3fr repeat(3, 1fr); gap: 40px; padding-block: 64px 48px; }
.hrm-footer__grid--3 { grid-template-columns: 1.3fr repeat(2, 1fr); } .hrm-footer__grid--2 { grid-template-columns: 1.3fr 1fr; } .hrm-footer__grid--1 { grid-template-columns: 1fr; }
.hrm-footer__col { display: flex; flex-direction: column; gap: 12px; }
.hrm-footer__col--about { gap: 18px; }
.hrm-footer__about { font-size: .875rem; color: var(--hrm-muted); max-inline-size: 34ch; line-height: 1.75; }
.hrm-footer__title { font-size: .875rem; font-weight: 600; margin-block-end: 4px; }
.hrm-footer__links { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.hrm-footer__links a { color: #46646A; font-size: .906rem; }
.hrm-footer__links a:hover { color: var(--hrm-primary-dark); }
.hrm-footer__offices { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: .906rem; color: #46646A; }
.hrm-footer__offices li { display: flex; flex-direction: column; gap: 2px; }
.hrm-footer__offices strong { color: var(--hrm-ink); font-weight: 600; }
.hrm-footer__offices a { color: #46646A; } .hrm-footer__offices a:hover { color: var(--hrm-primary-dark); }
.hrm-social { display: flex; gap: 8px; }
.hrm-social__link { display: inline-flex; align-items: center; justify-content: center; inline-size: 36px; block-size: 36px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--hrm-line) 80%, var(--hrm-primary)); color: #28464B; transition: all .3s ease; }
.hrm-social__link:hover { border-color: var(--hrm-primary); color: var(--hrm-primary); }
.hrm-footer__bar { background: var(--hrm-dark); color: #A9C6C8; font-size: .8125rem; }
.hrm-footer__bar-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-block: 18px; }

/* ---- Back to top / preloader ---- */
.hrm-totop { position: fixed; inset-inline-end: 20px; inset-block-end: 20px; z-index: 40; display: inline-flex; align-items: center; justify-content: center; inline-size: 44px; block-size: 44px; border-radius: 50%; border: 0; background: var(--hrm-dark); color: #fff; cursor: pointer; box-shadow: var(--hrm-shadow-m); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .4s var(--hrm-ease); }
.hrm-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.hrm-totop:hover { background: var(--hrm-primary); }
.hrm-preloader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--hrm-bg); transition: opacity .5s ease, visibility .5s ease; }
.hrm-preloader.is-done { opacity: 0; visibility: hidden; }
.hrm-preloader__mark { inline-size: 42px; block-size: 42px; border-radius: 50%; border: 2px solid var(--hrm-line); border-block-start-color: var(--hrm-primary); animation: hrmSpin .9s linear infinite; }
@keyframes hrmSpin { to { transform: rotate(360deg); } }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
	.hrm-nav, .hrm-header__actions [data-hrm-header-cta] { display: none; }
	.hrm-burger { display: inline-flex; }
}
@media (max-width: 1020px) {
	.hrm-banner { min-block-size: var(--hrm-banner-h-m); }
	.hrm-banner-inset .hrm-banner { margin: 10px 10px 0; border-radius: var(--hrm-r-lg); }
	.hrm-banner__media { inline-size: 100%; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .35) 100%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .35) 100%); }
	.hrm-banner__fade { background: linear-gradient(180deg, rgba(var(--hrm-dark-rgb), .3) 0%, rgba(var(--hrm-dark-rgb), .85) 100%); }
	.hrm-footer__grid, .hrm-footer__grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 782px) { .admin-bar.hrm-header-sticky .hrm-header { inset-block-start: 46px; } }
@media (max-width: 700px) {
	:root { --hrm-header-h: 70px; }
	.hrm-topbar__msg { display: none; }
	.hrm-logo img { block-size: var(--hrm-logo-h-m); }
	.hrm-lang { padding-inline: 12px; }
	.hrm-lang .hrm-icon { display: none; }
	.hrm-banner__sub { font-size: .97rem; }
}


/* ==========================================================================
   Shell refinements (v1.3): hover polish and mobile chrome
   ========================================================================== */
.hrm-burger { -webkit-tap-highlight-color: transparent; transition: border-color .3s ease, background .3s ease; }
.hrm-burger[aria-expanded="true"] { background: var(--hrm-dark); border-color: var(--hrm-dark); }
.hrm-burger[aria-expanded="true"] .hrm-burger__bars i { background: #fff; }
.hrm-footer__links a, .hrm-footer__offices a { display: inline-flex; transition: color .3s ease, translate .45s var(--hrm-ease-out); }
.hrm-totop { padding: 0; }
.hrm-totop .hrm-icon { transition: translate .45s var(--hrm-ease-out); }

@media (hover: hover) and (pointer: fine) {
	.hrm-nav__link { transition: color .3s ease; }
	.hrm-footer__links a:hover { translate: calc(4px * var(--hrm-dir)) 0; }
	.hrm-social__link:hover { background: var(--hrm-primary); border-color: var(--hrm-primary); color: #fff; }
	.hrm-lang:hover { background: var(--hrm-bg-soft); }
	.hrm-burger:hover { border-color: var(--hrm-primary); }
	.hrm-totop:hover .hrm-icon { translate: 0 -3px; }
	.hrm-crumb a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--hrm-ease-out), color .3s ease; }
	.hrm-crumb a:hover { background-size: 100% 1px; }
	.hrm-topbar a { transition: color .3s ease; }
}

@media (max-width: 1100px) {
	.hrm-header__in { gap: 12px; }
}
@media (max-width: 700px) {
	:root { --hrm-header-h: 64px; }
	.hrm-topbar__in { justify-content: center; min-block-size: 34px; }
	.hrm-topbar__contact { gap: 4px 18px; justify-content: center; font-size: .78rem; }
	.hrm-header.is-scrolled .hrm-header__in { block-size: 60px; }
	.hrm-header__actions { gap: 8px; }
	.hrm-lang, .hrm-burger { block-size: 40px; }
	.hrm-burger { inline-size: 40px; }
	.hrm-lang span { font-size: .8125rem; }

	.hrm-banner { min-block-size: 0; }
	.hrm-banner-inset .hrm-banner { margin: 8px 8px 0; border-radius: var(--hrm-r-lg); }
	.hrm-banner__in { gap: 12px; padding-block: 44px 40px; }
	.hrm-banner__title { font-size: 1.75rem; line-height: 1.15; max-inline-size: 18ch; }
	.hrm-banner__sub { font-size: .9375rem; line-height: 1.65; }
	.hrm-crumb { max-inline-size: 100%; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font-size: .75rem; padding: 6px 12px; }
	.hrm-crumb::-webkit-scrollbar { display: none; }

	.hrm-footer__grid, .hrm-footer__grid--3, .hrm-footer__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; padding-block: 44px 32px; }
	.hrm-footer__col--about, .hrm-footer__grid > .hrm-footer__col:last-child { grid-column: 1 / -1; }
	.hrm-footer__offices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
	.hrm-footer__bar-in { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding-block: 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
	.hrm-totop { inset-inline-end: 14px; inset-block-end: calc(14px + env(safe-area-inset-bottom, 0px)); inline-size: 42px; block-size: 42px; }
}

.hrm-footer__copy a { color: inherit; font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: color .3s ease, background-size .5s var(--hrm-ease-out, ease); }
.hrm-footer__copy a:hover, .hrm-footer__copy a:focus-visible { color: var(--hrm-accent); background-size: 100% 1px; }
.hrm-rtl .hrm-footer__copy a { background-position: 100% 100%; }

/* Footer offices (v1.8) */
.hrm-footer__office { display: flex; flex-direction: column; gap: 2px; }
.hrm-footer__offices { gap: 14px; }
.hrm-footer__company { color: var(--hrm-primary); font-size: .78rem; font-weight: 600; }
.hrm-footer__addr { font-size: .8125rem; line-height: 1.55; opacity: .85; }
.hrm-footer__office a { font-size: .8125rem; inline-size: fit-content; }