/*
 * The group behind the counter — Al Razana section.
 *
 * A drafting table rather than a marketing banner: the artwork is a technical
 * elevation that draws itself when the section arrives, on the same gold-on-ink
 * palette as the rest of the homepage. Cascade defense at the end, because the
 * parent theme paints headings and links with !important.
 */

.hhm-razana {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(58px, 7vw, 104px) 0 clamp(46px, 5vw, 72px);
	background:
		radial-gradient(900px 460px at 78% 26%, rgba(216, 179, 108, .1), transparent 64%),
		linear-gradient(180deg, #0a0a0c 0%, #121011 52%, #0a0a0c 100%);
	color: var(--hg-text, #f2efe7);
}

/* A slow wash of light across the drafting surface. */
.hhm-razana__wash {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(115deg, transparent 34%, rgba(216, 179, 108, .05) 50%, transparent 66%);
	background-size: 260% 100%;
	animation: hhm-rz-wash 14s ease-in-out infinite;
}

@keyframes hhm-rz-wash {
	0%, 100% { background-position: 120% 0; }
	50%      { background-position: -20% 0; }
}

.hhm-razana__layout {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(28px, 4vw, 64px);
}

/* ---------- copy ---------- */

.hhm-razana__kicker,
.hhm-razana__title,
.hhm-razana__lede,
.hhm-razana__stats,
.hhm-razana__services,
.hhm-razana__actions {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .75s ease, transform .75s cubic-bezier(.2, .9, .25, 1);
}

.hhm-razana.is-live .hhm-razana__kicker   { opacity: 1; transform: none; transition-delay: .04s; }
.hhm-razana.is-live .hhm-razana__title    { opacity: 1; transform: none; transition-delay: .14s; }
.hhm-razana.is-live .hhm-razana__lede     { opacity: 1; transform: none; transition-delay: .26s; }
.hhm-razana.is-live .hhm-razana__stats    { opacity: 1; transform: none; transition-delay: .38s; }
.hhm-razana.is-live .hhm-razana__services { opacity: 1; transform: none; transition-delay: .5s; }
.hhm-razana.is-live .hhm-razana__actions  { opacity: 1; transform: none; transition-delay: .6s; }

.hhm-razana__kicker {
	margin: 0 0 14px;
	font: 600 12px/1 Manrope, "Segoe UI", Arial, sans-serif;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--hg-gold, #d8b36c);
}

.hhm-razana__kicker::before {
	content: "";
	display: inline-block;
	width: 26px;
	height: 1px;
	margin-inline-end: 10px;
	vertical-align: 3px;
	background: var(--hg-gold-grad, linear-gradient(140deg, #e6c885, #b98f47));
}

.hhm-razana__title {
	margin: 0 0 18px;
	font: 700 clamp(28px, 3.4vw, 46px)/1.12 Manrope, "Segoe UI", Arial, sans-serif;
	letter-spacing: -.02em;
	color: #f7f4ec;
}

.hhm-razana__title em {
	display: block;
	font: italic 500 clamp(30px, 3.7vw, 50px)/1.08 Newsreader, Georgia, serif;
	margin-inline-start: -.03em;
	background: linear-gradient(176deg, #fff8e6 0%, #e9cf95 24%, #b58f4c 48%, #f4e3b4 66%, #9a7738 88%, #d8b36c 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hhm-razana__lede {
	margin: 0 0 26px;
	max-width: 52ch;
	font: 400 15.5px/1.72 Inter, "Segoe UI", Arial, sans-serif;
	color: var(--hg-text-2, rgba(242, 239, 231, .64));
}

/* ---------- stats ---------- */

.hhm-razana__stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.hhm-razana__stats li {
	position: relative;
	padding: 14px 12px;
	border: 1px solid rgba(216, 179, 108, .22);
	border-radius: 14px;
	background: linear-gradient(165deg, rgba(38, 35, 30, .6), rgba(18, 17, 16, .72));
	text-align: center;
}

.hhm-razana__stats strong {
	display: block;
	font: 700 clamp(19px, 2vw, 25px)/1 Manrope, "Segoe UI", Arial, sans-serif;
	color: #eed49b;
	margin-bottom: 5px;
}

.hhm-razana__stats span {
	display: block;
	font: 500 10.5px/1.35 Inter, "Segoe UI", Arial, sans-serif;
	letter-spacing: .04em;
	color: var(--hg-text-2, rgba(242, 239, 231, .64));
}

/* ---------- services ---------- */

.hhm-razana__services {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}

.hhm-razana__services li {
	padding: 7px 13px;
	border: 1px solid rgba(242, 239, 231, .16);
	border-radius: 999px;
	font: 500 12.5px/1 Inter, "Segoe UI", Arial, sans-serif;
	color: rgba(242, 239, 231, .8);
	background: rgba(242, 239, 231, .03);
}

/* ---------- CTA ---------- */

.hhm-razana__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.hhm-razana__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 14px 28px;
	border-radius: 999px;
	background: var(--hg-gold-grad, linear-gradient(140deg, #e6c885 0%, #d8b36c 55%, #b98f47 100%));
	color: #14100a;
	font: 600 14.5px/1 Manrope, "Segoe UI", Arial, sans-serif;
	text-decoration: none;
	box-shadow: 0 10px 28px rgba(216, 179, 108, .26);
	transition: transform .25s ease, box-shadow .25s ease;
}

.hhm-razana__cta svg {
	width: 17px;
	height: 17px;
	transition: transform .3s cubic-bezier(.2, .9, .25, 1);
}

.hhm-razana__cta:hover {
	transform: translateY(-2px) scale(1.02);
	box-shadow: 0 18px 42px rgba(216, 179, 108, .38);
}

.hhm-razana__cta:hover svg {
	transform: translate(3px, -3px);
}

.hhm-razana__cta:focus-visible {
	outline: 3px solid #f7e7bd;
	outline-offset: 3px;
}

.hhm-razana__domain {
	font: 500 12.5px/1 Inter, "Segoe UI", Arial, sans-serif;
	letter-spacing: .04em;
	color: var(--hg-text-3, rgba(242, 239, 231, .45));
}

/* ---------- the blueprint ---------- */

.hhm-razana__art {
	position: relative;
	padding: clamp(14px, 2vw, 26px);
	border: 1px solid rgba(216, 179, 108, .2);
	border-radius: 20px;
	background:
		radial-gradient(120% 90% at 30% 0%, rgba(216, 179, 108, .07), transparent 62%),
		linear-gradient(165deg, rgba(30, 27, 24, .72), rgba(12, 12, 13, .88));
	box-shadow: inset 0 1px 0 rgba(245, 241, 232, .08), 0 30px 60px rgba(0, 0, 0, .45);
	opacity: 0;
	transform: translateY(26px) scale(.985);
	transition: opacity .9s ease .2s, transform .9s cubic-bezier(.2, .9, .25, 1) .2s;
}

.hhm-razana.is-live .hhm-razana__art {
	opacity: 1;
	transform: none;
}

/* Corner registration marks — the drafting-sheet detail. */
.hhm-razana__art::before,
.hhm-razana__art::after {
	content: "";
	position: absolute;
	width: 16px;
	height: 16px;
	border: 1px solid rgba(230, 200, 133, .5);
	pointer-events: none;
}

.hhm-razana__art::before {
	top: 10px;
	left: 10px;
	border-right: 0;
	border-bottom: 0;
}

.hhm-razana__art::after {
	right: 10px;
	bottom: 10px;
	border-left: 0;
	border-top: 0;
}

.hhm-razana__blueprint {
	display: block;
	width: 100%;
	height: auto;
	color: rgba(230, 200, 133, .82);
}

.hhm-razana__blueprint .hhm-bp-dim { color: rgba(230, 200, 133, .5); }

/* Every stroke draws itself, staggered by its --o index. pathLength is not
   set, so a generous dash length covers the longest path in the set. */
.hhm-bp-l {
	stroke-dasharray: 900;
	stroke-dashoffset: 900;
}

.hhm-razana.is-live .hhm-bp-l {
	animation: hhm-bp-draw 1.25s cubic-bezier(.25, .9, .3, 1) forwards;
	animation-delay: calc(.35s + var(--o, 0) * .085s);
}

@keyframes hhm-bp-draw {
	to { stroke-dashoffset: 0; }
}

.hhm-bp-t {
	font: 600 10px/1 Manrope, "Segoe UI", Arial, sans-serif;
	letter-spacing: .18em;
	fill: rgba(230, 200, 133, .62);
	opacity: 0;
}

.hhm-bp-t--sm { font-size: 8.5px; letter-spacing: .14em; }

.hhm-razana.is-live .hhm-bp-t {
	animation: hhm-bp-fade .7s ease forwards;
	animation-delay: calc(.6s + var(--o, 0) * .06s);
}

@keyframes hhm-bp-fade {
	to { opacity: 1; }
}

/* ---------- branches ---------- */

.hhm-razana__branches {
	position: relative;
	margin-top: clamp(38px, 4.5vw, 66px);
	padding-top: clamp(26px, 3vw, 40px);
	border-top: 1px solid rgba(216, 179, 108, .18);
}

.hhm-razana__branches-head {
	margin: 0 0 18px;
	font: 600 11.5px/1 Manrope, "Segoe UI", Arial, sans-serif;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--hg-gold, #d8b36c);
}

.hhm-razana__branch-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hhm-razana__branch {
	display: flex;
	gap: 14px;
	padding: 20px 22px;
	border: 1px solid rgba(216, 179, 108, .2);
	border-radius: 18px;
	background: linear-gradient(165deg, rgba(34, 31, 27, .74), rgba(15, 14, 14, .82));
	box-shadow: inset 0 1px 0 rgba(245, 241, 232, .06);
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s ease, transform .7s cubic-bezier(.2, .9, .25, 1), border-color .3s ease, box-shadow .3s ease;
}

.hhm-razana.is-live .hhm-razana__branch { opacity: 1; transform: none; }
.hhm-razana.is-live .hhm-razana__branch:nth-child(1) { transition-delay: .7s; }
.hhm-razana.is-live .hhm-razana__branch:nth-child(2) { transition-delay: .8s; }
.hhm-razana.is-live .hhm-razana__branch:nth-child(3) { transition-delay: .9s; }

.hhm-razana__branch:hover {
	border-color: rgba(230, 200, 133, .5);
	box-shadow: inset 0 1px 0 rgba(245, 241, 232, .09), 0 18px 40px rgba(0, 0, 0, .4);
}

.hhm-razana__branch-pin {
	flex: none;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(216, 179, 108, .32);
	background: radial-gradient(circle at 34% 28%, rgba(216, 179, 108, .18), transparent 70%);
	color: #eed49b;
}

.hhm-razana__branch-pin svg { width: 20px; height: 20px; }

.hhm-razana__branch-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.hhm-razana__branch-city {
	font: 700 17px/1.2 Manrope, "Segoe UI", Arial, sans-serif;
	color: #f7f4ec;
}

.hhm-razana__branch-role {
	font: 600 10px/1 Manrope, "Segoe UI", Arial, sans-serif;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hg-gold, #d8b36c);
	margin-bottom: 4px;
}

.hhm-razana__branch-street {
	font: 500 14px/1.5 Inter, "Segoe UI", Arial, sans-serif;
	color: rgba(242, 239, 231, .88);
}

.hhm-razana__branch-detail {
	font: 400 12.5px/1.5 Inter, "Segoe UI", Arial, sans-serif;
	color: var(--hg-text-2, rgba(242, 239, 231, .6));
}

.hhm-razana__branch-map {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 9px;
	font: 600 12.5px/1 Manrope, "Segoe UI", Arial, sans-serif;
	color: #eed49b;
	text-decoration: none;
	transition: gap .25s ease;
}

.hhm-razana__branch-map svg { width: 13px; height: 13px; }

.hhm-razana__branch-map:hover { gap: 10px; }

.hhm-razana__branch-map:focus-visible {
	outline: 3px solid #f7e7bd;
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
	.hhm-razana__layout { grid-template-columns: 1fr; }
	.hhm-razana__art { order: -1; }
	.hhm-razana__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hhm-razana__lede { max-width: none; }
}

@media (max-width: 520px) {
	.hhm-razana__branch { padding: 16px 16px; gap: 12px; }
	.hhm-razana__services li { font-size: 12px; padding: 6px 11px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.hhm-razana__wash { animation: none; }

	.hhm-razana__kicker,
	.hhm-razana__title,
	.hhm-razana__lede,
	.hhm-razana__stats,
	.hhm-razana__services,
	.hhm-razana__actions,
	.hhm-razana__art,
	.hhm-razana__branch {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.hhm-bp-l { stroke-dashoffset: 0; animation: none; }
	.hhm-bp-t { opacity: 1; animation: none; }
}

/* =====================================================================
 * Cascade defense — main.css paints shell headings --hhm-ink !important
 * and Electro forces `a { color: inherit }`.
 * ================================================================== */

.hhm-razana .hhm-razana__copy .hhm-razana__title {
	color: #f7f4ec !important;
}

.hhm-razana .hhm-razana__copy .hhm-razana__title em {
	color: transparent !important;
}

.hhm-razana .hhm-razana__actions .hhm-razana__cta,
.hhm-razana .hhm-razana__actions .hhm-razana__cta:hover,
.hhm-razana .hhm-razana__actions .hhm-razana__cta:focus {
	color: #14100a !important;
}

.hhm-razana .hhm-razana__branch-list .hhm-razana__branch-map,
.hhm-razana .hhm-razana__branch-list .hhm-razana__branch-map:hover,
.hhm-razana .hhm-razana__branch-list .hhm-razana__branch-map:focus {
	color: #eed49b !important;
}