/**
 * Section/component styles. Grouped by area; nothing here duplicates
 * base.css. Dark sections use --color-dark / --color-dark-soft rather than
 * a navy, per the Al Meh-Rab brand; gold is used as an accent only.
 */

/* ==========================================================================
   Header — floating pill at rest, docks flush full-width on scroll.
   ========================================================================== */
.site-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 100;
	padding-top: 18px;
	background: transparent;
	border-bottom: none;
	transition: padding-top 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.site-header__bar {
	width: 100%;
	background: transparent;
	border-radius: var(--radius-pill);
	box-shadow: none;
	padding: 10px 12px 10px 28px;
	transition:
		max-width 0.45s cubic-bezier(0.23, 1, 0.32, 1),
		border-radius 0.45s cubic-bezier(0.23, 1, 0.32, 1),
		background 0.35s var(--ease-standard),
		box-shadow 0.45s cubic-bezier(0.23, 1, 0.32, 1),
		padding 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header__bar {
		transition-duration: 0.15s !important;
		transition-timing-function: ease-out !important;
	}
}
@media (max-width: 880px) {
	.site-header { padding-top: 14px; }
	.site-header__bar { border-radius: 22px; padding: 10px 16px; gap: 12px; }
	/* main-navigation is hidden at this width (replaced by the toggle), so
	   the 48px gap base.css uses to separate it from the branding/actions on
	   desktop is no longer doing that job -- left this wide, it crowded the
	   CTA button against the hamburger until the button's own text wrapped
	   onto two lines inside the pill. Tightening it, plus a smaller/nowrap
	   CTA button below, keeps everything on one line down to narrow phones. */
	.site-header__actions { gap: 10px; }
	.site-header__actions .btn {
		padding: 10px 16px;
		font-size: var(--text-xs);
		white-space: nowrap;
	}
}
.site-header.is-stuck { padding-top: 0; }
.site-header.is-stuck .site-header__bar {
	max-width: 100vw;
	border-radius: 0;
	background: var(--color-dark);
	box-shadow: var(--shadow-header-stuck);
}
@media (max-width: 880px) {
	.site-header.is-stuck .site-header__bar { border-radius: 0; }
}
.site-header__actions .btn { padding: 12px 22px; }

/* Resting-state text on pages where a dark hero/breadcrumb band sits
   directly behind the now-transparent header (home + every interior page
   built on hero-breadcrumb — about, divisions, import & export, industries,
   global sourcing, contact). Switches to white/gold so it stays legible
   against the dark image; once the header docks solid (.is-stuck) everything
   reverts to the normal dark-on-white pill colours from base.css. */
.home .site-header:not(.is-stuck) .site-branding .site-title,
.has-breadcrumb-hero .site-header:not(.is-stuck) .site-branding .site-title,
.home .site-header:not(.is-stuck) .main-navigation a,
.has-breadcrumb-hero .site-header:not(.is-stuck) .main-navigation a,
.home .site-header:not(.is-stuck) .site-header__phone,
.has-breadcrumb-hero .site-header:not(.is-stuck) .site-header__phone {
	color: #fff;
}
.home .site-header:not(.is-stuck) .site-branding .site-title span,
.has-breadcrumb-hero .site-header:not(.is-stuck) .site-branding .site-title span {
	color: var(--color-gold-light);
}
.home .site-header:not(.is-stuck) .main-navigation a:hover,
.has-breadcrumb-hero .site-header:not(.is-stuck) .main-navigation a:hover,
.home .site-header:not(.is-stuck) .site-header__phone:hover,
.has-breadcrumb-hero .site-header:not(.is-stuck) .site-header__phone:hover {
	color: var(--color-gold-light);
}
.home .site-header:not(.is-stuck) .menu-toggle,
.has-breadcrumb-hero .site-header:not(.is-stuck) .menu-toggle {
	border-color: rgba(255, 255, 255, 0.4);
}
.home .site-header:not(.is-stuck) .menu-toggle:not([aria-expanded="true"]) .menu-toggle__bars,
.has-breadcrumb-hero .site-header:not(.is-stuck) .menu-toggle:not([aria-expanded="true"]) .menu-toggle__bars,
.home .site-header:not(.is-stuck) .menu-toggle__bars::before,
.home .site-header:not(.is-stuck) .menu-toggle__bars::after,
.has-breadcrumb-hero .site-header:not(.is-stuck) .menu-toggle__bars::before,
.has-breadcrumb-hero .site-header:not(.is-stuck) .menu-toggle__bars::after {
	background: #fff;
}

/* Docked state: the bar itself now stays on-brand dark (not a white strip)
   once it docks flush on scroll, so nav text/icons switch to white/gold
   here too, on every page — the resting-state rules above only need to
   handle the transparent pre-scroll moment. */
.site-header.is-stuck .site-branding .site-title,
.site-header.is-stuck .main-navigation a,
.site-header.is-stuck .site-header__phone {
	color: #fff;
}
.site-header.is-stuck .site-branding .site-title span {
	color: var(--color-gold-light);
}
.site-header.is-stuck .main-navigation a:hover,
.site-header.is-stuck .site-header__phone:hover {
	color: var(--color-gold-light);
}
.site-header.is-stuck .menu-toggle {
	border-color: rgba(255, 255, 255, 0.4);
}
.site-header.is-stuck .menu-toggle:not([aria-expanded="true"]) .menu-toggle__bars,
.site-header.is-stuck .menu-toggle__bars::before,
.site-header.is-stuck .menu-toggle__bars::after {
	background: #fff;
}

/* A page's first section sits directly under the floating header, so it
   needs breathing room the fixed header no longer reserves in normal flow. */
.site-content { padding-top: 92px; }
.home .site-content,
.has-breadcrumb-hero .site-content { padding-top: 0; }
@media (max-width: 880px) {
	.site-content { padding-top: 84px; }
}

/* Back-to-top */
.back-to-top {
	position: fixed;
	left: 24px;
	bottom: 24px;
	z-index: 90;
	width: 46px; height: 46px;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-dark);
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--shadow-card);
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard), background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-dark); }

/* ==========================================================================
   Homepage hero
   ========================================================================== */
.hero-home {
	position: relative;
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding-block: 64px 48px;
	background: var(--color-dark);
}
.hero-home__media { position: absolute; inset: 0; overflow: hidden; }
.hero-home__media img { width: 100%; height: 100%; object-fit: cover; }
/* The background image above always renders first (instant paint, video
   poster, and the fallback if a video is skipped). A video or embed, when
   set, is layered directly on top of it at the same size and always plays,
   since it's muted and silent either way. */
.hero-home__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-home__video-embed { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Base guess before JS measures the box (assets/js/hero-video.js) and sets
   an exact pixel size — Chrome ignores `object-fit` on <iframe>, so this
   can't be done in CSS alone once the hero grows taller than 100vh (small
   screens, once the heading/copy/buttons need more room than the viewport). */
.hero-home__video-embed iframe {
	position: absolute; top: 50%; left: 50%;
	width: 177.78vh; height: 100vh; /* 16:9, oversized to roughly cover a 100vh box */
	transform: translate(-50%, -50%);
	border: 0;
}
/* Vimeo's own `background=1` mode already scales its video to cover a
   100%-sized iframe, so it skips the oversize-and-center trick above (and
   the JS sizing only targets the --youtube variant). */
.hero-home__video-embed--vimeo iframe { position: absolute; inset: 0; width: 100%; height: 100%; top: 0; left: 0; transform: none; }
.hero-home__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(16,17,19,0.55) 0%, rgba(16,17,19,0.92) 100%);
}
.hero-home__scrim::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(115deg, rgba(212,167,44,0.16) 0%, rgba(212,167,44,0) 42%);
}
.hero-home__content { position: relative; max-width: 780px; margin-inline: 0; }
.hero-home__content h1 { color: #fff; font-weight: 500; font-size: clamp(2.4rem, 5vw, 3.75rem); }
.hero-home__lede { color: rgba(255,255,255,0.78); font-size: var(--text-lg); max-width: 58ch; }
.hero-home__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.hero-home__scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	color: rgba(255,255,255,0.6);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.hero-home__scroll-cue::after {
	content: "";
	width: 1px; height: 34px;
	background: linear-gradient(180deg, var(--color-gold) 0%, rgba(255,255,255,0) 100%);
}

/* ==========================================================================
   Who We Are (About split — homepage + About page)
   ========================================================================== */
.who-we-are { padding-block: var(--section-spacing); }
.who-we-are__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.who-we-are__media { position: relative; }
.who-we-are__media img { display: block; width: 100%; border-radius: var(--radius-card); box-shadow: var(--shadow-card); aspect-ratio: 4 / 3; object-fit: cover; }
.who-we-are__badge {
	position: absolute;
	left: 24px;
	bottom: -22px;
	background: var(--color-dark);
	color: #fff;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 16px 22px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.who-we-are__badge strong { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-gold-light); line-height: 1; }
.who-we-are__badge span { font-size: var(--text-xs); color: rgba(255,255,255,0.7); text-transform: uppercase; letter-spacing: 0.08em; }
.who-we-are__content-col h2 { max-width: 22ch; }
.who-we-are__content-col p:last-of-type { margin-bottom: 24px; }
@media (max-width: 860px) {
	.who-we-are__grid { grid-template-columns: 1fr; gap: 44px; }
	.who-we-are__badge { left: 16px; bottom: -18px; padding: 12px 18px; }
}

/* Trust stats belt */
.stats-belt { padding-block: 0 var(--section-spacing); }
.stats-belt__figures {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin: 0;
	padding: 40px 8px;
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
}
.stats-belt__item { text-align: center; }
.stats-belt__item dt { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-ink); font-weight: 500; }
.stats-belt__item dd { margin: 4px 0 0; font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 640px) {
	.stats-belt__figures { grid-template-columns: 1fr; gap: 20px; text-align: center; }
}

/* ==========================================================================
   Business Divisions grid (homepage + archive)
   ========================================================================== */
.divisions-section { padding-block: var(--section-spacing); }
.divisions-section__head { max-width: 60ch; margin-bottom: 44px; }
.divisions-section__head h2 { max-width: 20ch; }
.divisions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.division-card {
	position: relative;
	display: block;
	border-radius: var(--radius-card);
	overflow: hidden;
	text-decoration: none;
	background: var(--color-dark);
	aspect-ratio: 4 / 3.4;
	transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.division-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.division-card__media { position: absolute; inset: 0; }
.division-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-standard); }
.division-card:hover .division-card__media img { transform: scale(1.06); }
.division-card__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(16,17,19,0.15) 0%, rgba(16,17,19,0.92) 78%);
}
.division-card__body { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 26px 26px 24px; color: #fff; }
.division-card__index { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-gold-light); letter-spacing: 0.1em; margin-bottom: auto; }
.division-card__body h3 { color: #fff; margin: 0 0 6px; font-size: var(--text-xl); }
.division-card__body p { color: rgba(255,255,255,0.72); font-size: var(--text-sm); margin: 0; max-width: 34ch; }
.division-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	color: var(--color-gold-light);
	font-weight: 600;
	font-size: var(--text-sm);
}
.division-card__link svg { transition: transform var(--duration-fast) var(--ease-standard); }
.division-card:hover .division-card__link svg { transform: translateX(4px); }

@media (max-width: 960px) { .divisions-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) {
	.divisions-grid { grid-template-columns: 1fr; }
	.division-card { aspect-ratio: 4 / 3; }
}

.divisions-section__cta { margin-top: 40px; text-align: center; }

/* ==========================================================================
   Commitment split (dark, "Why Businesses Trust Al Meh-Rab")
   ========================================================================== */
.commitment-split { position: relative; background: var(--color-dark); color: #fff; padding-block: var(--section-spacing); }
.commitment-split--has-bg { background-size: cover; background-position: center; background-repeat: no-repeat; }
/* Dark scrim over an optional section background image, so the text and
   the foreground photo card stay readable at the same contrast as the
   plain dark background. */
.commitment-split--has-bg::before { content: ""; position: absolute; inset: 0; background: rgba(16, 17, 19, 0.85); }
.commitment-split__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.commitment-split__media img { display: block; width: 100%; border-radius: var(--radius-card); box-shadow: var(--shadow-card); aspect-ratio: 4 / 3; object-fit: cover; }
.commitment-split__body h2 { color: #fff; max-width: 20ch; }
.commitment-split__lede { color: rgba(255,255,255,0.72); font-size: var(--text-lg); max-width: 52ch; margin-top: 4px; }
.commitment-list { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.commitment-list__item { display: flex; gap: 16px; align-items: flex-start; }
.commitment-list__mark {
	flex: 0 0 auto;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--gradient-gold);
	color: var(--color-dark);
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: var(--text-sm);
}
.commitment-list__item strong { color: #fff; }
.commitment-list__item p { margin: 2px 0 0; color: rgba(255,255,255,0.68); font-size: var(--text-sm); }
@media (max-width: 860px) {
	.commitment-split__grid { grid-template-columns: 1fr; }
	.commitment-split__media { margin-bottom: 8px; }
}

/* ==========================================================================
   CTA band — reusable across homepage, division and service pages.
   ========================================================================== */
.cta-band { position: relative; overflow: hidden; background: var(--color-dark); color: #fff; text-align: center; padding-block: 88px; }
.cta-band--gold { background: var(--gradient-gold); color: var(--color-dark); }
.cta-band--gold h2, .cta-band--gold p { color: var(--color-dark); }
.cta-band__media { position: absolute; inset: 0; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; }
.cta-band__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,17,19,0.75) 0%, rgba(16,17,19,0.95) 100%); }
.cta-band__inner { position: relative; z-index: 1; max-width: 720px; margin-inline: auto; }
.cta-band h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.cta-band p { color: rgba(255,255,255,0.75); margin-inline: auto; margin-bottom: 1.3em; max-width: 56ch; }
.cta-band__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ==========================================================================
   Numbered process steps — Import & Export, Global Sourcing
   ========================================================================== */
.process-steps { padding-block: var(--section-spacing); }
.process-steps__head { text-align: center; max-width: 60ch; margin: 0 auto 48px; }
.process-steps__head .eyebrow, .process-steps__head h2 { display: block; }
.process-steps__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; position: relative; }
.process-step { position: relative; padding: 30px 22px 24px; border-top: 3px solid var(--color-border); transition: border-color var(--duration-base) var(--ease-standard); }
.process-step:hover { border-top-color: var(--color-gold); }
.process-step__num { display: block; font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-gold-dark); font-weight: 500; margin-bottom: 10px; }
.process-step h3 { font-size: var(--text-lg); margin-bottom: 8px; }
.process-step p { font-size: var(--text-sm); color: var(--color-ink-soft); margin: 0; }
@media (max-width: 960px) {
	.process-steps__grid { grid-template-columns: repeat(3, 1fr); gap: 24px 4px; }
}
@media (max-width: 620px) {
	.process-steps__grid { grid-template-columns: 1fr; gap: 0; }
	.process-step { padding: 24px 0; border-top: none; border-left: 3px solid var(--color-border); padding-left: 22px; }
	.process-step:hover { border-left-color: var(--color-gold); border-top-color: transparent; }
}

/* ==========================================================================
   Industries grid — Industries We Serve page + homepage teaser
   ========================================================================== */
.industries-section { padding-block: var(--section-spacing); }
.industries-section__head { max-width: 62ch; margin-bottom: 44px; }
.industries-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.industry-card {
	position: relative;
	border-radius: var(--radius-card);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: var(--shadow-card);
}
.industry-card img { width: 100%; height: 100%; object-fit: cover; }
.industry-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(16,17,19,0.05) 0%, rgba(16,17,19,0.85) 85%); }
.industry-card__label { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; }
.industry-card__label h3 { color: #fff; margin: 0; font-size: var(--text-lg); }
@media (max-width: 860px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .industries-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Value grid — "Why Source From Al Meh-Rab", reused across pages
   ========================================================================== */
.value-grid-section { padding-block: var(--section-spacing); }
.value-grid-section--wash { background: var(--color-wash); }
.value-grid-section__head { text-align: center; max-width: 62ch; margin: 0 auto 44px; }
.value-grid-section__head .eyebrow, .value-grid-section__head h2 { display: block; }
.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.value-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 30px 28px;
	transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.value-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(16, 17, 19, 0.35); }
.value-card__index { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-gold-dark); font-weight: 600; }
.value-card h3 { margin-top: 10px; }
.value-card p { margin-bottom: 0; }
@media (max-width: 860px) { .value-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .value-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Group of Companies — About page. Al Meh-Rab (the group's head office)
   alongside its branches, as plain name/role/description cards; the head
   office card gets a thin gold outline so it reads as the parent of the
   group at a glance.
   ========================================================================== */
.group-companies { padding-block: var(--section-spacing); }
.group-companies__head { text-align: center; max-width: 68ch; margin: 0 auto 44px; }
.group-companies__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: stretch; }
.company-card {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-card);
	padding: 36px 32px;
	text-align: center;
	transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.company-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(16, 17, 19, 0.35); }
.company-card--head { border-color: var(--color-gold); box-shadow: 0 0 0 1px var(--color-gold) inset, var(--shadow-card); }
.company-card__role {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-gold-dark);
	font-weight: 600;
	margin-bottom: 12px;
}
.company-card h3 { margin: 0 0 12px; font-size: var(--text-xl); }
.company-card p { margin: 0; }
@media (max-width: 860px) {
	.group-companies__grid { grid-template-columns: repeat(2, 1fr); }
	.company-card--head { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.group-companies__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Division row — alternating image/text blocks (division archive listing,
   product-types inside a single division page).
   ========================================================================== */
.division-row { padding-block: 56px; }
.division-row:nth-child(odd) { background: var(--color-wash); }
.division-row__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.division-row--reverse .division-row__grid { direction: rtl; }
.division-row--reverse .division-row__grid > * { direction: ltr; }
.division-row__media img { border-radius: var(--radius-card); box-shadow: var(--shadow-card); aspect-ratio: 4/3; object-fit: cover; }
.division-row__body .eyebrow { margin-bottom: 10px; }
.division-row__body h3 { font-size: var(--text-2xl); }
.division-row__body h3 a { color: var(--color-ink); text-decoration: none; }
.division-row__link { font-weight: 700; }
@media (max-width: 780px) {
	.division-row__grid, .division-row--reverse .division-row__grid { grid-template-columns: 1fr; direction: ltr; }
}

/* Single division intro + aside CTA */
.division-single__intro { padding-top: 48px; text-align: center; }
.division-single__lede { font-size: var(--text-lg); color: var(--color-ink-soft); max-width: 64ch; margin-inline: auto; }
.division-single__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 56px; padding-block: 40px var(--section-spacing); }
.division-single__aside { position: sticky; top: 120px; align-self: start; display: flex; flex-direction: column; gap: 20px; }
.division-single__aside img { border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.division-single__cta-card { background: var(--color-wash); border-radius: var(--radius-card); padding: 30px 26px; }
.division-single__cta-card .btn { margin-top: 12px; width: 100%; justify-content: center; }
.division-single__list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.division-single__list li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--text-sm); color: var(--color-ink-soft); }
.division-single__list li::before {
	content: "";
	flex: 0 0 auto;
	width: 6px; height: 6px;
	margin-top: 8px;
	border-radius: 50%;
	background: var(--gradient-gold);
}
@media (max-width: 900px) {
	.division-single__grid { grid-template-columns: 1fr; }
	.division-single__aside { position: static; }
}
/* "Why Source From Al Meh-Rab" always has exactly 4 points on the division
   single template, so it reads better as an even 2x2 grid here than the
   3-column default (which leaves the 4th card alone on its own row). Scoped
   to this template only -- the shared .value-grid used on About, Global
   Sourcing and Import & Export keeps its 3-column layout. */
.division-single__main .value-grid { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) {
	.division-single__main .value-grid { grid-template-columns: 1fr; }
}
/* "Explore More / Other Business Divisions" cross-link block at the foot of
   every division page. It had no padding of its own, so it sat flush
   against the grid above and the CTA band below; this gives it the same
   breathing room every other section on the page gets. */
.division-single__related { padding-block: 32px 64px; }
@media (max-width: 640px) {
	.division-single__related { padding-block: 16px 40px; }
}

/* ==========================================================================
   Client / partner logo strip (optional, only renders when set)
   ========================================================================== */
.logo-strip { padding-block: 64px; text-align: center; }
.logo-strip__caption { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: 28px; }
.logo-strip__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px; }
.logo-strip__logo { max-height: 36px; width: auto; filter: grayscale(1); opacity: 0.55; }

/* ==========================================================================
   Proven Success — dark capability band (homepage)
   ========================================================================== */
.capability-band { background: var(--color-dark); color: #fff; padding-block: var(--section-spacing); }
.capability-band__head { max-width: 62ch; margin-bottom: 56px; }
.capability-band__head h2 { color: #fff; max-width: 20ch; margin: 12px 0 0; }
.capability-band__lede { color: rgba(255,255,255,0.7); font-size: var(--text-lg); max-width: 56ch; margin: 16px 0 0; }
.capability-band__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 64px; }
.capability-item { padding-top: 20px; border-top: 2px solid var(--color-gold); }
.capability-item h3 { color: #fff; font-size: var(--text-xl); margin-bottom: 10px; }
.capability-item p { color: rgba(255,255,255,0.62); font-size: var(--text-base); margin: 0; max-width: 42ch; }
.capability-band__cta { text-align: left; margin-top: 56px; }
@media (max-width: 620px) {
	.capability-band__grid { grid-template-columns: 1fr; gap: 32px; }
	.capability-band__cta { text-align: center; }
}

/* ==========================================================================
   Product photography showcase — hover-expand image accordion pulling
   division photos (matches the reference site's Unlimited Elements "Image
   Accordion" widget behaviour, reproduced in native CSS: every item sits at
   equal width at rest; hovering/focusing one item grows it and reveals its
   caption while the rest shrink back down to plain photo strips).
   ========================================================================== */
.product-showcase { padding-block: var(--section-spacing); }
.product-showcase__heading { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 3vw, var(--text-3xl)); max-width: 28ch; margin: 0 0 44px; }

.product-accordion-viewport {
	overflow: hidden;
}
.product-accordion {
	display: flex;
	transition: transform var(--duration-base) var(--ease-standard);
}
.product-accordion-page {
	display: flex;
	align-items: stretch;
	/* flex-basis needs to be auto, not a percentage, so the explicit
	   pixel width product-carousel.js sets on each slide actually wins --
	   flex-basis, when it isn't auto, overrides width outright. Without
	   JS this still renders at full viewport width via the width: 100%
	   fallback below. */
	flex: 0 0 auto;
	width: 100%;
	height: 480px;
	gap: 6px;
}
.product-accordion__item {
	position: relative;
	display: block;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--radius-card);
	transition: flex var(--duration-base) var(--ease-standard);
}
.product-accordion__item img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Stacked in DOM order after the overlay text (::after generated content is
   always painted last), so it needs an explicit z-index to sit BETWEEN the
   photo and the caption rather than on top of everything — otherwise it
   darkens the text along with the image instead of sitting behind it. */
.product-accordion__item::after {
	content: "";
	position: absolute; inset: 0;
	z-index: 1;
	background: linear-gradient(0deg, rgba(16,17,19,0.94) 0%, rgba(16,17,19,0.7) 42%, rgba(16,17,19,0.25) 72%, rgba(16,17,19,0) 100%);
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-standard);
}
.product-accordion__overlay {
	position: absolute;
	z-index: 2;
	left: 24px; right: 24px; bottom: 22px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
	white-space: normal;
}
.product-accordion__title {
	color: #fff;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--text-lg);
	line-height: 1.2;
}
.product-accordion__tagline {
	color: rgba(255,255,255,0.78);
	font-size: var(--text-sm);
	max-width: 32ch;
}
.product-accordion__item:hover,
.product-accordion__item:focus-visible {
	flex: 3.4;
}
.product-accordion__item:hover::after,
.product-accordion__item:focus-visible::after,
.product-accordion__item:hover .product-accordion__overlay,
.product-accordion__item:focus-visible .product-accordion__overlay {
	opacity: 1;
	transform: translateY(0);
}
/* .is-featured marks whichever item should read expanded at rest --
   server-rendered onto the very first item of the very first slide as a
   sane no-JS default, then reassigned by product-carousel.js to lead
   whichever slide is currently in view. Scoped per .product-accordion-page
   (rather than the whole track) so hovering an item on the active slide
   never reaches into an off-screen one. */
.product-accordion-page .product-accordion__item.is-featured { flex: 3.4; }
.product-accordion-page .product-accordion__item.is-featured::after,
.product-accordion-page .product-accordion__item.is-featured .product-accordion__overlay {
	opacity: 1;
	transform: translateY(0);
}
.product-accordion-page:hover .product-accordion__item.is-featured:not(:hover):not(:focus-visible) {
	flex: 1;
}
.product-accordion-page:hover .product-accordion__item.is-featured:not(:hover):not(:focus-visible)::after,
.product-accordion-page:hover .product-accordion__item.is-featured:not(:hover):not(:focus-visible) .product-accordion__overlay {
	opacity: 0;
	transform: translateY(10px);
}

/* ---------- Product showcase: pager nav ---------- */
.product-accordion-wrap { position: relative; }
.product-accordion-nav {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 18px;
}
.product-accordion-nav__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	border: 1px solid var(--color-border);
	background: var(--color-surface);
	color: var(--color-ink);
	cursor: pointer;
	transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.product-accordion-nav__btn svg { width: 20px; height: 20px; }
.product-accordion-nav__btn:hover:not(:disabled),
.product-accordion-nav__btn:focus-visible {
	border-color: var(--color-gold);
	color: var(--color-gold-dark);
}
.product-accordion-nav__btn:active:not(:disabled) { transform: scale(0.93); }
.product-accordion-nav__btn:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; }
.product-accordion-nav__btn:disabled { opacity: 0.35; cursor: default; }

@media (max-width: 620px) {
	.product-accordion-nav { display: none; }
}

@media (max-width: 860px) {
	.product-accordion-page { height: 420px; }
}
@media (max-width: 620px) {
	/* No sliding on mobile -- there's no hover to page through with, so
	   every division just stacks in one long list instead (see
	   product-carousel.js, which turns paging off at this same breakpoint).
	   display: contents on the slide wrapper removes it from the box tree
	   entirely, so its items become direct children of .product-accordion
	   and the plain stacked-column rules below apply exactly as they did
	   before slides existed. */
	.product-accordion-viewport { overflow: visible; }
	.product-accordion {
		flex-direction: column;
		height: auto;
		transform: none !important;
		/* .product-accordion-page's own 6px gap doesn't apply here -- display:
		   contents (below) removes the page wrapper as a box entirely, so its
		   gap property goes with it. This is the real gap between the stacked
		   cards themselves. */
		gap: 16px;
	}
	.product-accordion-page {
		display: contents;
	}
	.product-accordion__item,
	.product-accordion__item:first-child {
		flex: none;
		height: 220px;
	}
	/* .is-featured wins the cascade over the plain rule above (three classes
	   of specificity vs. one/two), so without this override the featured
	   item would keep its desktop flex: 3.4 and collapse to 0 height once
	   the mobile column layout gives it no sibling to size itself against. */
	.product-accordion-page .product-accordion__item.is-featured {
		flex: none;
		height: 220px;
	}
	/* Captions stay visible permanently on mobile (no hover to reveal them),
	   so the scrim needs to be strong and tall enough to keep the whole
	   title/tagline/button block legible against busy product photos. */
	.product-accordion__item::after,
	.product-accordion__item:first-child::after {
		background: linear-gradient(0deg, rgba(16,17,19,0.96) 0%, rgba(16,17,19,0.85) 55%, rgba(16,17,19,0.4) 82%, rgba(16,17,19,0.05) 100%);
	}
	.product-accordion__item::after,
	.product-accordion__item .product-accordion__overlay,
	.product-accordion__item:first-child::after,
	.product-accordion__item:first-child .product-accordion__overlay {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Business Division panels — "Our Expertise" style large stacked showcase
   (homepage). The compact .division-card grid above stays in use elsewhere
   (Our Products archive, About page, Industries page).
   ========================================================================== */
/* A bit tighter than the shared --section-spacing token up top -- this
   section's own head (eyebrow + heading) already reads as a natural page
   break against the wash background above it, so it doesn't need the full
   sitewide gap on top of that. max() keeps a sane floor so it never gets
   cramped against the section above once --section-spacing drops to its
   mobile value. */
.division-panels { padding-block: max(32px, calc(var(--section-spacing) - 64px)) 0; }
.division-panels__head { max-width: 64ch; margin: 0 auto 48px; text-align: center; }
.division-panels__head h2 { max-width: 22ch; margin-inline: auto; }
/* Full viewport height per panel (matches hero-home's 100vh/100dvh pairing
   so mobile browser chrome doesn't clip the panel). Also reused, standalone,
   by template-parts/sections/full-panel.php for the Import & Export and
   Global Sourcing page intro panels. */
.division-panel { position: relative; display: block; min-height: 100vh; min-height: 100dvh; overflow: hidden; color: #fff; }
.division-panel + .division-panel { border-top: 1px solid rgba(255,255,255,0.08); }
.division-panel__media { position: absolute; inset: 0; }
.division-panel__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-standard); }
.division-panel:hover .division-panel__media img { transform: scale(1.04); }
.division-panel__scrim {
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(16,17,19,0.92) 0%, rgba(16,17,19,0.58) 45%, rgba(16,17,19,0.22) 100%);
}
.division-panel__inner { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding-block: 56px; max-width: 640px; margin-inline: 0; }
.division-panel__inner h2,
.division-panel__inner h3 { color: #fff; font-size: clamp(1.9rem, 3.4vw, var(--text-3xl)); margin-bottom: 12px; }
.division-panel__inner p { color: rgba(255,255,255,0.74); font-size: var(--text-lg); max-width: 44ch; margin-bottom: 20px; }
.division-panel__cta { align-self: flex-start; }
.division-panels__cta { text-align: center; padding-block: 56px; }
@media (max-width: 780px) {
	/* Keep the container's normal side gutter here — this used to zero it
	   out, which (combined with margin-inline: 0 above, for left-alignment)
	   left the heading, text and CTA sitting flush against the screen edge
	   on phones and small tablets with no breathing room. */
	.division-panel__inner { padding-inline: var(--container-padding); }
}

/* Sticky overlap: within the homepage's two-panel stack (Import & Export /
   Global Sourcing), each panel pins to the top of the viewport as it's
   reached, and the next panel then scrolls up over it — its opaque photo
   and scrim covering the pinned panel beneath rather than the usual plain
   scroll-past. Scoped to .division-panels so the same .division-panel
   markup, reused standalone on the Import & Export / Global Sourcing /
   Industries pages, keeps its normal (non-sticky) scroll behavior there. */
.division-panels .division-panel {
	position: sticky;
	top: 0;
}
.division-panels .division-panel:nth-of-type(1) { z-index: 1; }
.division-panels .division-panel:nth-of-type(2) { z-index: 2; }
.division-panels .division-panel:nth-of-type(3) { z-index: 3; }

/* Sticky overlap for the homepage's "Industries We Serve" pair: the plain
   title band pins to the top of the viewport, then the photo panel that
   follows it scrolls up over it, same stacking-cards mechanic as the two
   service panels above but scoped to its own wrapper (.industries-stack,
   added around both parts in front-page.php) so it doesn't reach the
   .division-panel markup reused standalone on the Import & Export / Global
   Sourcing / Industries pages. */
.industries-stack {
	position: relative;
}
.industries-stack .industries-title,
.industries-stack .division-panel {
	position: sticky;
	top: 0;
}
.industries-stack .industries-title { z-index: 1; }
.industries-stack .division-panel { z-index: 2; }

/* ==========================================================================
   Global Reach — dark markets/regions band (homepage)
   ========================================================================== */
.global-reach { background: var(--color-dark-soft); color: #fff; padding-block: var(--section-spacing); }
.global-reach__head { max-width: 60ch; margin: 0 auto 40px; text-align: center; }
.global-reach__head h2 { color: #fff; margin: 0 0 10px; }
.global-reach__head p { color: rgba(255,255,255,0.68); margin: 0; }
.global-reach__head .eyebrow--on-dark { color: var(--color-gold); }
/* --gr-cols is set inline per-instance to the actual number of items (see
   template-parts/sections/global-reach.php), so a short list (e.g. two
   offices) lays out in one even row instead of a 6-column grid with empty
   trailing cells. min() caps it against each breakpoint's own max column
   count so a longer list still compacts down as before. */
.global-reach__list { list-style: none; margin: 0; padding: 36px 0 0; display: grid; grid-template-columns: repeat(min(var(--gr-cols, 6), 6), 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.14); }
.global-reach__list li { padding: 22px 12px; text-align: center; font-family: var(--font-display); font-size: var(--text-lg); color: #fff; border-left: 1px solid rgba(255,255,255,0.14); }
.global-reach__list li:first-child { border-left: none; }
@media (max-width: 860px) {
	.global-reach__list { grid-template-columns: repeat(min(var(--gr-cols, 3), 3), 1fr); }
	.global-reach__list li { border-left: 1px solid rgba(255,255,255,0.14); border-top: none; }
	.global-reach__list li:nth-child(3n+1) { border-left: none; }
}
@media (max-width: 560px) {
	.global-reach__list { grid-template-columns: 1fr; }
	.global-reach__list li { border-left: none; border-top: 1px solid rgba(255,255,255,0.14); }
	.global-reach__list li:first-child { border-top: none; }
}

/* ==========================================================================
   Industries We Serve — full-height photo banner/divider (homepage). A
   heavy black scrim over a wide industry photo, matching the reference
   site's full-bleed section breaks, with the eyebrow and heading in the
   brand's gold instead of a generic white.
   ========================================================================== */
.industries-banner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100vh;
	min-height: 100dvh;
	color: #fff;
	overflow: hidden;
	background: var(--color-dark);
}
.industries-banner__media { position: absolute; inset: 0; z-index: 0; }
.industries-banner__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.industries-banner__scrim {
	position: absolute; inset: 0;
	z-index: 1;
	background: linear-gradient(90deg, rgba(16,17,19,0.9) 0%, rgba(16,17,19,0.72) 55%, rgba(16,17,19,0.45) 100%);
}
.industries-banner__inner { position: relative; z-index: 2; max-width: 720px; padding-block: 64px; }
.industries-banner__inner h2 {
	color: var(--color-gold-light);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(2.2rem, 4.6vw, 3.75rem);
	max-width: 16ch;
	margin: 12px 0 0;
}
.industries-banner__inner p {
	color: rgba(255,255,255,0.78);
	font-size: var(--text-lg);
	max-width: 54ch;
	margin: 20px 0 28px;
}
@media (max-width: 620px) {
	.industries-banner__inner { padding-block: 48px; }
}

/* ==========================================================================
   Industries We Serve — plain black title band (homepage). A short,
   text-only section break in the brand's gold announcing the topic,
   immediately followed by its own full-height photo panel (reuses
   .division-panel, same component as the Import & Export / Global
   Sourcing panels above it).
   ========================================================================== */
.industries-title {
	background: var(--color-dark);
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.industries-title h2 {
	color: var(--color-gold-light);
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(2.2rem, 4.6vw, 3.75rem);
	max-width: 20ch;
	margin: 0 auto;
}

/* ==========================================================================
   Contact page
   ========================================================================== */
/* Matches the 64px top gap .prose gives every other hero-breadcrumb page
   (About, Import & Export, etc.) — without it, this was the one page whose
   content sat flush against the banner below. */
.page-contact__split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: stretch; padding-top: 64px; padding-bottom: var(--section-spacing); }
/* Left column stacks the info panel above the map; the map (or, until one
   is set, an admin-only reminder) grows to fill whatever room is left
   below the panel, instead of leaving a bare gap next to the taller form. */
.page-contact__left { display: flex; flex-direction: column; gap: 24px; }
.page-contact__left .page-contact__map { flex: 1; }
.contact-info-panel {
	/* Sized to its own content (heading, lede, detail list, social icons)
	   rather than forced to match the enquiry form's height — with height:
	   100% here, a short list (or one still waiting on real contact details
	   to be filled in via the Customizer) left a large empty void at the
	   bottom of this dark card instead of a naturally-proportioned panel. */
	background: var(--color-dark);
	color: #fff;
	border-radius: var(--radius-card);
	padding: 40px 36px;
}
.contact-info-panel h2 { color: #fff; }
.contact-info-panel__lede { color: rgba(255,255,255,0.7); }
.contact-info-panel__list { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.contact-info-panel__list li { display: flex; gap: 14px; align-items: flex-start; }
.contact-info-panel__list svg { flex-shrink: 0; color: var(--color-gold); margin-top: 2px; }
.contact-info-panel__list a, .contact-info-panel__list span { color: rgba(255,255,255,0.85); text-decoration: none; }
.contact-info-panel__list a:hover { color: var(--color-gold-light); }
.contact-info-panel__label { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin-bottom: 3px; }
.contact-info-panel__social { margin-top: 28px; display: flex; gap: 12px; }
.contact-form-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 40px 38px; }
.page-contact__map { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); min-height: 260px; }
.page-contact__map iframe { width: 100%; height: 100%; min-height: 260px; border: 0; }
@media (max-width: 860px) {
	.page-contact__split { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Responsive pass — deliberate mobile layouts.
   ========================================================================== */
@media (max-width: 640px) {
	.hero-home { min-height: 94vh; min-height: 94dvh; padding-block: 100px 56px; }
	.hero-home__actions .btn { width: 100%; justify-content: center; }
	.hero-home__actions { flex-direction: column; }
	.hero-home__scroll-cue { display: none; }

	.division-single__cta-card .btn,
	.divisions-section__cta .btn { width: 100%; justify-content: center; }

	.back-to-top { left: 16px; bottom: 16px; width: 42px; height: 42px; }

	:root { --section-spacing: var(--section-spacing-mobile); }

	/* Trim the enquiry form card's fixed padding so it doesn't eat into an
	   already-narrow phone viewport. */
	.contact-form-wrap { padding: 28px 20px; }
}

@media (pointer: coarse) {
	.btn, .menu-toggle, .back-to-top { min-height: 44px; }
	.main-navigation.is-open a { padding-block: 12px; }
}

/* Stronger focus ring on dark sections. */
.hero-home :focus-visible,
.hero-breadcrumb :focus-visible,
.cta-band :focus-visible,
.commitment-split :focus-visible,
.contact-info-panel :focus-visible,
.capability-band :focus-visible,
.division-panel__cta:focus-visible,
.product-accordion__item:focus-visible,
.global-reach :focus-visible,
.site-footer :focus-visible {
	outline-color: var(--color-gold-light);
	outline-offset: 3px;
}