/* =============================================================
   Al Hakmani — premium theme styles
   Brand palette & typography per the 2025 brand guideline.
   Built with CSS logical properties so a single sheet serves
   both RTL (Arabic, default) and LTR (English).
   ============================================================= */

:root {
	/* Brand palette */
	--navy:        #14243e;  /* الأزرق الملكي — primary */
	--navy-700:    #1b3050;
	--navy-900:    #0e1a2e;
	--copper:      #c17f59;  /* النحاسي الأرضي */
	--copper-soft: #d49d7d;
	--emerald:     #0b4f43;  /* أخضر زمردي */
	--gold:        #d4af37;  /* ذهبي الرمال */
	--gold-soft:   #e2c873;
	--platinum:    #e1e4e8;  /* بلاتينيوم */
	--sand:        #f6f4f0;
	--ink:         #1a2233;
	--muted:       #5d6677;
	--line:        #e7e9ee;
	--white:       #ffffff;

	/* Typography */
	--font-ar: "Readex Pro", "Segoe UI", Tahoma, sans-serif;
	--font-en: "Work Sans", "Segoe UI", system-ui, sans-serif;
	--font: var(--font-ar);

	/* Rhythm */
	--container: 1240px;
	--gutter: clamp(1.1rem, 4vw, 2.4rem);
	--sec-y: clamp(4.5rem, 9vw, 8rem);
	--radius: 18px;
	--radius-sm: 12px;
	--shadow-sm: 0 10px 30px -18px rgba(20, 36, 62, .35);
	--shadow:    0 30px 70px -40px rgba(20, 36, 62, .55);
	--ease: cubic-bezier(.22, 1, .36, .58);
	--header-h: 86px;
}

.alh-ltr { --font: var(--font-en); }

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust: 100%; overflow-x: hidden; max-width: 100%; }
body {
	margin: 0;
	font-family: var(--font);
	color: var(--ink);
	background: var(--white);
	line-height: 1.7;
	font-size: 17px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.18; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 4px; }

.alh-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

.alh-skip {
	position: fixed; inset-block-start: -60px; inset-inline-start: 1rem; z-index: 200;
	background: var(--navy); color: #fff; padding: .6rem 1rem; border-radius: 8px; transition: .2s;
}
.alh-skip:focus { inset-block-start: 1rem; }

/* ---------- Typography scale ---------- */
.alh-eyebrow {
	font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
	color: var(--copper); margin: 0 0 1.1rem; display: inline-flex; align-items: center; gap: .6rem;
}
.alh-ltr .alh-eyebrow { letter-spacing: .18em; }
.alh-eyebrow::before { content: ""; inline-size: 26px; block-size: 2px; background: var(--copper); display: inline-block; }
.alh-eyebrow--light { color: var(--gold-soft); }
.alh-eyebrow--light::before { background: var(--gold-soft); }

.alh-h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); color: var(--navy); }
.alh-h2--light { color: #fff; }
.alh-h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--navy); }
.alh-lead { font-size: clamp(1.05rem, 1.7vw, 1.25rem); color: var(--ink); margin-block-start: 1.1rem; }
.alh-body { color: var(--muted); margin-block-start: 1rem; }

.alh-accent { color: var(--copper); }

/* ---------- Buttons ---------- */
.alh-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
	padding: .95rem 1.8rem; border-radius: 100px; font-weight: 600; font-size: .98rem;
	transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s, color .3s;
	will-change: transform; white-space: nowrap;
}
.alh-btn--gold { background: var(--gold); color: var(--navy-900); box-shadow: 0 14px 30px -14px rgba(212,175,55,.7); }
.alh-btn--gold:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -16px rgba(212,175,55,.85); }
.alh-btn--outline { border: 1.5px solid rgba(255,255,255,.5); color: #fff; }
.alh-btn--outline:hover { background: #fff; color: var(--navy); transform: translateY(-3px); }
.alh-btn--ghost { border: 1.5px solid var(--navy); color: var(--navy); padding: .7rem 1.3rem; }
.alh-btn--ghost:hover { background: var(--navy); color: #fff; }
.alh-btn--block { width: 100%; padding-block: 1.1rem; }

/* ---------- Header ---------- */
.alh-header {
	position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
	transition: background .4s var(--ease), box-shadow .4s, padding .4s;
	padding-block: 1.1rem;
}
.alh-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.alh-logo__img { height: 46px; width: auto; transition: opacity .3s; }
.alh-logo__img--dark { display: none; }
.alh-header.is-stuck { background: rgba(255,255,255,.92); backdrop-filter: blur(14px); box-shadow: 0 10px 40px -28px rgba(20,36,62,.5); padding-block: .65rem; }
.alh-header.is-stuck .alh-logo__img--light { display: none; }
.alh-header.is-stuck .alh-logo__img--dark { display: block; }
.alh-header.is-stuck .alh-logo__img { height: 40px; }

.alh-nav { display: flex; align-items: center; gap: 2rem; }
.alh-nav__list { display: flex; align-items: center; gap: 1.8rem; }
.alh-nav__close { display: none; }
.alh-nav__link {
	position: relative; color: rgba(255,255,255,.9); font-weight: 500; font-size: .98rem; padding-block: .4rem;
}
.alh-nav__link::after {
	content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: 0; block-size: 2px;
	background: var(--gold); transition: inline-size .35s var(--ease);
}
.alh-nav__link:hover::after, .alh-nav__link.is-active::after { inline-size: 100%; }
.alh-header.is-stuck .alh-nav__link { color: var(--navy); }
.alh-nav__cta { display: none; }

.alh-header__actions { display: flex; align-items: center; gap: 1rem; }
.alh-lang {
	border: 1.5px solid rgba(255,255,255,.45); color: #fff; padding: .45rem .9rem; border-radius: 100px;
	font-size: .85rem; font-weight: 600; letter-spacing: .04em; transition: .3s;
}
.alh-lang:hover { background: #fff; color: var(--navy); }
.alh-header.is-stuck .alh-lang { border-color: var(--navy); color: var(--navy); }
.alh-header.is-stuck .alh-lang:hover { background: var(--navy); color: #fff; }

.alh-burger { display: none; flex-direction: column; gap: 5px; padding: 6px; }
.alh-burger span { inline-size: 24px; block-size: 2px; background: #fff; border-radius: 2px; transition: .3s; }
.alh-header.is-stuck .alh-burger span { background: var(--navy); }

/* ---------- Hero ---------- */
.alh-hero {
	position: relative; min-block-size: 100svh; display: flex; align-items: center;
	background: radial-gradient(120% 120% at 80% 0%, var(--navy-700) 0%, var(--navy) 45%, var(--navy-900) 100%);
	color: #fff; overflow: hidden; padding-block: calc(var(--header-h) + 3rem) 4rem;
}
.alh-hero__bg { position: absolute; inset: 0; pointer-events: none; }
.alh-hero__grid {
	position: absolute; inset: 0;
	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: 64px 64px; mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 80%);
}
.alh-hero__glow { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.alh-hero__glow--1 { inline-size: 420px; block-size: 420px; background: var(--copper); inset-block-start: -120px; inset-inline-end: -80px; opacity: .35; }
.alh-hero__glow--2 { inline-size: 360px; block-size: 360px; background: var(--emerald); inset-block-end: -140px; inset-inline-start: -60px; opacity: .4; }
.alh-hero__mark {
	position: absolute; inset-block-start: 50%; inset-inline-end: -4%; transform: translateY(-50%);
	inline-size: min(46vw, 560px); opacity: .05; filter: drop-shadow(0 0 1px #fff);
}
.alh-ltr .alh-hero__mark { inset-inline-end: auto; inset-inline-start: -4%; }

.alh-hero__inner { position: relative; max-inline-size: 760px; }
.alh-hero__title {
	font-size: clamp(2.6rem, 7vw, 5.2rem); font-weight: 700; line-height: 1.08; letter-spacing: -.02em;
	margin-block: .4rem 1.5rem;
}
.alh-hero__sub { font-size: clamp(1.05rem, 1.9vw, 1.35rem); color: rgba(255,255,255,.82); max-inline-size: 60ch; }
.alh-hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-block-start: 2.4rem; }
.alh-hero__pillars {
	display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem; margin-block-start: 3.2rem;
	padding-block-start: 1.8rem; border-block-start: 1px solid rgba(255,255,255,.14);
}
.alh-hero__pillars li { position: relative; color: rgba(255,255,255,.75); font-weight: 500; font-size: .95rem; padding-inline-start: 1.1rem; }
.alh-hero__pillars li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .65em; inline-size: 6px; block-size: 6px; background: var(--gold); border-radius: 50%; }

.alh-hero__scroll { position: absolute; inset-block-end: 1.8rem; inset-inline-start: 50%; transform: translateX(-50%); inline-size: 26px; block-size: 42px; border: 2px solid rgba(255,255,255,.4); border-radius: 100px; display: grid; place-items: start center; padding-block-start: 7px; }
.alh-hero__scroll span { inline-size: 4px; block-size: 8px; background: var(--gold); border-radius: 4px; animation: alh-scroll 1.8s var(--ease) infinite; }
@keyframes alh-scroll { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ---------- Section base ---------- */
.alh-section { padding-block: var(--sec-y); position: relative; }
.alh-sec-head { max-inline-size: 720px; margin-block-end: 3.2rem; }
.alh-sec-head--center { margin-inline: auto; text-align: center; }
.alh-sec-head--center .alh-eyebrow { justify-content: center; }
.alh-sec-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; max-inline-size: none; }
.alh-sec-head__sub { color: var(--muted); margin-block-start: 1rem; font-size: 1.08rem; }

/* ---------- About ---------- */
.alh-about { background: var(--white); }
.alh-about__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.alh-about__cards { display: grid; gap: 1.2rem; }
.alh-vm {
	background: var(--sand); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem;
	position: relative; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s, border-color .4s;
}
.alh-vm::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 4px; block-size: 100%; background: linear-gradient(var(--copper), var(--gold)); }
.alh-vm:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); border-color: transparent; }
.alh-vm__icon { display: inline-grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-sm); margin-block-end: 1rem; }
.alh-vm h3 { margin-block-end: .6rem; }
.alh-vm p { color: var(--muted); }

/* ---------- Services ---------- */
.alh-services { background: linear-gradient(180deg, var(--white), var(--sand)); }
.alh-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.alh-service {
	position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
	padding: 2.2rem 2rem; overflow: hidden; transition: transform .45s var(--ease), box-shadow .45s, border-color .45s;
}
.alh-service::after { content: ""; position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: 100%; block-size: 3px; background: linear-gradient(90deg, var(--copper), var(--gold)); transform: scaleX(0); transform-origin: inline-start; transition: transform .5s var(--ease); }
.alh-service:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: transparent; }
.alh-service:hover::after { transform: scaleX(1); }
.alh-service__icon { display: grid; place-items: center; inline-size: 60px; block-size: 60px; border-radius: 16px; background: linear-gradient(140deg, var(--navy), var(--navy-700)); color: var(--gold-soft); margin-block-end: 1.3rem; transition: transform .45s var(--ease); }
.alh-service:hover .alh-service__icon { transform: scale(1.06) rotate(-3deg); }
.alh-service__icon svg { inline-size: 28px; block-size: 28px; }
.alh-service h3 { margin-block-end: .7rem; }
.alh-service p { color: var(--muted); font-size: .98rem; }
.alh-service__index { position: absolute; inset-block-start: 1.4rem; inset-inline-end: 1.6rem; font-family: var(--font-en); font-size: 2.4rem; font-weight: 800; color: var(--platinum); opacity: .7; line-height: 1; }

/* ---------- Projects ---------- */
.alh-projects { background: var(--sand); }
.alh-projects__nav { display: flex; gap: .7rem; }
.alh-arrow { inline-size: 50px; block-size: 50px; border: 1.5px solid var(--line); border-radius: 50%; display: grid; place-items: center; color: var(--navy); background: #fff; transition: .3s; }
.alh-arrow svg { inline-size: 22px; block-size: 22px; }
.alh-arrow:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.alh-ltr .alh-arrow svg { transform: scaleX(-1); }
.alh-projects__wrap { margin-block-start: .5rem; }
.alh-proj-swiper { overflow: visible; padding-block-end: .5rem; }
/* Swiper gives slides height:100%, which lets each card size to its own content
   and leaves the row ragged. height:auto + stretch equalises them to the tallest,
   so the spec chips line up across every card. */
.alh-proj-swiper .swiper-wrapper { align-items: stretch; }
.alh-proj-swiper .swiper-slide { block-size: auto; }
.alh-proj {
	background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
	block-size: 100%; display: flex; flex-direction: column; transition: transform .45s var(--ease), box-shadow .45s;
}
.alh-proj:hover { transform: translateY(-8px); box-shadow: var(--shadow); }
.alh-proj__media { position: relative; aspect-ratio: 16 / 11; display: grid; place-items: center; overflow: hidden; }
.alh-proj__media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 100% at 100% 0%, rgba(255,255,255,.18), transparent 60%); }
.alh-proj__mark { inline-size: 42%; opacity: .14; transition: transform .6s var(--ease); }
.alh-proj:hover .alh-proj__mark { transform: scale(1.08) translateY(-4px); }
.alh-proj__photo { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.alh-proj:hover .alh-proj__photo { transform: scale(1.06); }
.alh-proj__media.has-image::after { background: linear-gradient(180deg, rgba(20,36,62,.25) 0%, transparent 35%, rgba(20,36,62,.45) 100%); }
.alh-proj__status { position: absolute; inset-block-start: 1rem; inset-inline-start: 1rem; background: rgba(255,255,255,.95); color: var(--navy); font-size: .76rem; font-weight: 600; padding: .35rem .85rem; border-radius: 100px; backdrop-filter: blur(4px); }
.alh-proj__status--selling { background: var(--gold); color: var(--navy-900); }
.alh-proj__status--ready { background: var(--gold); color: var(--navy-900); }
.alh-proj__status--soon { background: var(--copper); color: #fff; }
.alh-proj__status--done { background: var(--emerald); color: #fff; }
.alh-proj__body { padding: 1.6rem 1.5rem 1.8rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.alh-proj__type { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--copper); }
.alh-proj__loc { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .9rem; }
.alh-proj__desc { color: var(--muted); font-size: .95rem; margin-block-start: .2rem; }

/* Unit-mix chips: the concrete specs that make a developer card credible. */
.alh-proj__specs {
	display: flex; flex-wrap: wrap; gap: .45rem;
	margin-block-start: auto; padding-block-start: 1.1rem;
}
.alh-proj__spec {
	display: inline-flex; align-items: center; gap: .35rem;
	font-size: .78rem; font-weight: 600; color: var(--navy);
	background: var(--sand); border: 1px solid var(--line);
	padding: .32rem .7rem; border-radius: 100px; white-space: nowrap;
}
.alh-proj__spec--date { background: rgba(193,127,89,.1); border-color: rgba(193,127,89,.3); color: var(--copper); }
.alh-proj__spec--date svg { flex: none; }
.alh-proj-pagination { display: flex; justify-content: center; gap: .5rem; margin-block-start: 2rem; }
.alh-proj-pagination .swiper-pagination-bullet { inline-size: 9px; block-size: 9px; background: var(--navy); opacity: .25; transition: .3s; border-radius: 100px; }
.alh-proj-pagination .swiper-pagination-bullet-active { opacity: 1; inline-size: 28px; background: var(--copper); }

/* ---------- Why / stats / values ---------- */
.alh-why { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-900) 100%); color: #fff; overflow: hidden; }
.alh-why__bg { position: absolute; inset: 0; pointer-events: none; opacity: .04; }
.alh-why__bg img { position: absolute; inset-inline-end: -6%; inset-block-start: 50%; transform: translateY(-50%); inline-size: min(50vw, 620px); }
.alh-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; margin-block-end: 4rem; }
.alh-stat { text-align: center; padding: 1.6rem 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius); background: rgba(255,255,255,.03); }
.alh-stat__num { display: block; font-family: var(--font-en); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; color: var(--gold-soft); line-height: 1; letter-spacing: -.02em; }
.alh-stat__label { display: block; margin-block-start: .7rem; color: rgba(255,255,255,.78); font-size: .95rem; }
.alh-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.alh-value { padding: 1.6rem; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); transition: transform .4s var(--ease), background .4s; }
.alh-value:hover { transform: translateY(-6px); background: rgba(255,255,255,.07); }
.alh-value__bar { display: block; inline-size: 36px; block-size: 3px; background: var(--gold); border-radius: 4px; margin-block-end: 1rem; }
.alh-value__title { font-size: 1.1rem; color: #fff; margin-block-end: .5rem; }
.alh-value p { color: rgba(255,255,255,.72); font-size: .92rem; }

/* ---------- Partners marquee ---------- */
.alh-partners { background: var(--white); }
/* padding-block gives vertical slack inside the clip: the track hugs the logo height
   exactly, so without it any logo touching its viewBox edge grazes the hidden overflow. */
.alh-marquee { overflow: hidden; padding-block: .75rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
/* The track holds two identical copies and slides by -50%. The trailing padding
   matches the gap so the second copy starts exactly one gap after the first —
   without it the loop is short by half a gap and visibly jumps each cycle. */
.alh-marquee__track {
	--marq-gap: clamp(2.6rem, 6vw, 5rem);
	display: flex; align-items: center; gap: var(--marq-gap); padding-inline-end: var(--marq-gap);
	inline-size: max-content; animation: alh-marq 44s linear infinite;
}
.alh-marquee:hover .alh-marquee__track { animation-play-state: paused; }
/* Fixed optical box + object-fit:contain. Sizing lives on the wrapper, not the
   image, so a logo can never collapse when its SVG lacks intrinsic width/height. */
.alh-partner {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	block-size: clamp(34px, 4.2vw, 46px);
	max-inline-size: clamp(104px, 12vw, 140px);
}
/* Logos are normalised on BOTH axes. Height alone is not enough: a wide wordmark
   (Bank Muscat, ~4:1) renders 4x wider than a square emblem (Vision 2040, 1:1),
   which makes the strip look lopsided. Capping the width and letting object-fit
   letterbox keeps every mark within a consistent optical box. */
.alh-partner img {
	inline-size: auto; block-size: 100%;
	max-inline-size: clamp(104px, 12vw, 140px);
	object-fit: contain;
	filter: grayscale(1); opacity: .45;
	transition: opacity .35s var(--ease), filter .35s var(--ease);
}
/* Colour reveal only — no vertical lift. The track is clipped (overflow:hidden),
   so translating a logo upward crops taller marks against the strip's edge. */
.alh-partner:hover img { opacity: 1; filter: grayscale(0); }
/* The track is 3 copies wide and slides by exactly one copy (33.333%), then repeats.
   Direction matters: in LTR the track starts at the left edge and overflows right, so it
   travels negative. In RTL it starts at the right edge and already overflows left, so it
   must travel POSITIVE — reversing the LTR keyframes instead starts it a copy-width too
   far left and empties the strip. */
@keyframes alh-marq     { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
@keyframes alh-marq-rtl { from { transform: translateX(0); } to { transform: translateX(33.3333%); } }
.alh-rtl .alh-marquee__track { animation-name: alh-marq-rtl; }

/* ---------- Contact ---------- */
.alh-contact { background: linear-gradient(180deg, var(--sand), var(--white)); }
.alh-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; }
.alh-contact__list { display: grid; gap: 1.2rem; margin-block: 2rem; }
.alh-contact__list li { display: flex; align-items: center; gap: 1rem; }
.alh-contact__ic { flex: none; inline-size: 48px; block-size: 48px; border-radius: 12px; display: grid; place-items: center; background: #fff; box-shadow: var(--shadow-sm); color: var(--copper); }
.alh-contact__ic svg { inline-size: 22px; block-size: 22px; }
.alh-contact__list small { display: block; color: var(--muted); font-size: .82rem; }
.alh-contact__list a, .alh-contact__list span { color: var(--navy); font-weight: 600; }
.alh-map {
	block-size: 240px; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
	border: 1px solid var(--line); margin-block-start: 1.5rem; position: relative;
	background: var(--navy) url(../img/icon-white.svg) center / 70px no-repeat;
}
.alh-map iframe { display: block; position: relative; z-index: 1; filter: grayscale(.15); }

.alh-contact__formwrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.6rem); box-shadow: var(--shadow); }
.alh-form { display: grid; gap: 1.1rem; }
.alh-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.alh-field { display: grid; gap: .4rem; }
.alh-field > span { font-size: .88rem; font-weight: 600; color: var(--navy); }
.alh-field input, .alh-field select, .alh-field textarea {
	font-family: inherit; font-size: 1rem; padding: .85rem 1rem; border: 1.5px solid var(--line);
	border-radius: var(--radius-sm); background: var(--sand); color: var(--ink); transition: border-color .25s, background .25s; width: 100%;
}
.alh-field input:focus, .alh-field select:focus, .alh-field textarea:focus { outline: none; border-color: var(--copper); background: #fff; }
.alh-field textarea { resize: vertical; }
.alh-form__note { font-size: .82rem; color: var(--muted); text-align: center; margin-block-start: .2rem; }
.alh-hp { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Footer ---------- */
.alh-footer { background: var(--navy-900); color: rgba(255,255,255,.7); padding-block-start: clamp(3.5rem, 6vw, 5.5rem); }
.alh-footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-block-end: 3rem; }
.alh-footer__logo { height: 48px; width: auto; margin-block-end: 1.2rem; }
.alh-footer__tag { max-inline-size: 36ch; font-size: .98rem; line-height: 1.8; }
.alh-footer__col h4 { color: #fff; font-size: 1rem; margin-block-end: 1.2rem; }
.alh-footer__col ul { display: grid; gap: .7rem; }
.alh-footer__col a:hover { color: var(--gold-soft); }
.alh-footer__contact a:hover { color: var(--gold-soft); }
.alh-social { display: flex; gap: .7rem; margin-block-start: 1.5rem; }
.alh-social a { inline-size: 42px; block-size: 42px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; display: grid; place-items: center; color: rgba(255,255,255,.8); transition: .3s; }
.alh-social a:hover { background: var(--gold); color: var(--navy-900); border-color: var(--gold); transform: translateY(-3px); }
.alh-footer__bar { border-block-start: 1px solid rgba(255,255,255,.1); padding-block: 1.5rem; }
.alh-footer__bar-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .85rem; }

/* ---------- Floating WhatsApp ---------- */
.alh-wa {
	position: fixed; inset-block-end: 1.4rem; inset-inline-end: 1.4rem; z-index: 90;
	inline-size: 58px; block-size: 58px; border-radius: 50%; display: grid; place-items: center;
	background: #25d366; color: #fff; box-shadow: 0 14px 30px -10px rgba(37,211,102,.7);
	transition: transform .35s var(--ease); animation: alh-wa-pulse 2.6s infinite;
}
.alh-wa:hover { transform: scale(1.08); }
@keyframes alh-wa-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.5); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }

/* ---------- Reveal animation (JS-driven) ---------- */
/* Hidden only once JS confirms it can animate them back in — fails open. */
.alh-js [data-reveal] { opacity: 0; transform: translateY(26px); }

/* ---------- Mobile nav ---------- */
@media (max-width: 1024px) {
	.alh-services__grid { grid-template-columns: repeat(2, 1fr); }
	.alh-about__grid { grid-template-columns: 1fr; }
	.alh-stats, .alh-values { grid-template-columns: repeat(2, 1fr); }
	.alh-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
	:root { --header-h: 72px; }
	.alh-burger { display: flex; }
	.alh-nav {
		position: fixed; top: 0; bottom: 0; inline-size: min(82vw, 360px);
		background: var(--navy); flex-direction: column; align-items: stretch; justify-content: center;
		gap: 1.5rem; padding: 4rem 2rem; transition: transform .45s var(--ease); z-index: 110;
	}
	/* Physical positioning per direction (translateX is not affected by `dir`, so logical
	   props alone left the drawer peeking). The drawer docks to the same side as the burger. */
	.alh-ltr .alh-nav { right: 0; left: auto; transform: translateX(105%); box-shadow: -20px 0 60px -30px rgba(0,0,0,.6); }
	.alh-rtl .alh-nav { left: 0; right: auto; transform: translateX(-105%); box-shadow: 20px 0 60px -30px rgba(0,0,0,.6); }
	.alh-ltr .alh-nav.is-open, .alh-rtl .alh-nav.is-open { transform: translateX(0); }
	.alh-nav__list { flex-direction: column; align-items: stretch; gap: 1.2rem; }
	.alh-nav__link { color: #fff; font-size: 1.2rem; }
	.alh-nav__close { display: block; position: absolute; inset-block-start: 1rem; inset-inline-end: 1.4rem; font-size: 2rem; color: #fff; line-height: 1; }
	.alh-nav__cta { display: inline-flex; border-color: rgba(255,255,255,.5); color: #fff; }
	.alh-nav__cta:hover { background: #fff; color: var(--navy); }
	.alh-contact__grid { grid-template-columns: 1fr; }
	.alh-sec-head--row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 600px) {
	body { font-size: 16px; }
	.alh-services__grid { grid-template-columns: 1fr; }
	.alh-stats, .alh-values, .alh-footer__grid { grid-template-columns: 1fr; }
	.alh-form__row { grid-template-columns: 1fr; }
	.alh-hero__pillars { gap: .8rem 1.6rem; }
	.alh-footer__bar-inner { flex-direction: column; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto; }
	[data-reveal] { opacity: 1 !important; transform: none !important; }
}