/* ==========================================================================
   Raval Group — design tokens
   Navy/gold values below were sampled directly from the real Figma export
   of the Home page, so they're exact. Font family names (Poppins/Inter)
   are still a visual match, not confirmed against the file — swap them
   here if the real names turn out to be different.
   ========================================================================== */
:root {
	/* Exact values sampled from the real Figma export (Home page PNG) */
	--raval-navy: #292458; /* footer background */
	--raval-navy-dark: #1c1940; /* glance panel / story card / hero scrim */
	--raval-gold: #f3c059; /* button + eyebrow accent, sampled from real button fill */
	--raval-ink: #211632; /* body headings on light background */
	--raval-body: #5b5570; /* paragraph text on light background */
	--raval-white: #ffffff;
	--raval-bg-light: #f7f6fb;
	--raval-border: #e7e4f0;

	--font-heading: 'Poppins', 'Segoe UI', sans-serif;
	--font-body: 'Inter', 'Segoe UI', sans-serif;

	--container-width: 1200px;
	--gutter: 24px;
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--raval-body);
	background: var(--raval-white);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	color: var(--raval-ink);
	margin: 0 0 16px;
	line-height: 1.2;
}

p {
	margin: 0 0 16px;
}

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

.eyebrow {
	display: block;
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--raval-gold);
	margin-bottom: 12px;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 28px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	border: 1px solid transparent;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn:hover {
	opacity: 0.85;
}

.btn-dark {
	background: var(--raval-navy);
	color: var(--raval-white);
}

/* The header's "Contact Us" button sits inside .primary-nav, and
 * `.primary-nav a { color: var(--raval-ink) }` below (class+tag, more
 * specific than .btn-dark's single class) was winning the cascade and
 * rendering its label in dark ink instead of white on its navy pill —
 * same "more specific selector elsewhere wins" cascade gotcha as the
 * image-fill rules fixed in the responsiveness pass. */
.primary-nav a.btn-dark {
	color: var(--raval-white);
}

.btn-outline {
	border-color: var(--raval-navy);
	color: var(--raval-navy);
	background: transparent;
}

.btn-outline-light {
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--raval-white);
	background: transparent;
}

.btn-gold {
	background: var(--raval-gold);
	color: var(--raval-navy-dark);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var(--raval-navy);
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

/* Placeholder image block — swap in real exported photography */
.raval-placeholder {
	width: 100%;
	background: repeating-linear-gradient(
		45deg,
		#eceafb,
		#eceafb 10px,
		#e3e0f7 10px,
		#e3e0f7 20px
	);
	border: 1px dashed #b9b2d9;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #6d6690;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	padding: 12px;
}

/* ==========================================================================
   Site header / nav
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--raval-white);
	border-bottom: 1px solid var(--raval-border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 16px;
	padding-bottom: 16px;
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 20px;
	color: var(--raval-navy);
	letter-spacing: 0.02em;
}

/* Full icon+wordmark lockup (replaces the old separate icon-image +
 * text-span combo) — logo-full-light.png (navy/gold) for the white header,
 * logo-full-dark.png (navy recolored to white, gold unchanged) for the
 * navy footer, same icon-only convention the old logo-mark-*.png pair
 * used. Sized by height with width:auto so it never distorts. */
.site-logo__img {
	height: 36px;
	width: auto;
	display: block;
}

.footer-brand .site-logo__img {
	height: 40px;
}

.site-logo__mark {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--raval-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--raval-navy);
	font-weight: 800;
}

.primary-nav {
	display: flex;
	align-items: center;
	gap: 36px;
}

.primary-nav ul {
	list-style: none;
	display: flex;
	gap: 32px;
	margin: 0;
	padding: 0;
}

.primary-nav a {
	font-weight: 500;
	font-size: 15px;
	color: var(--raval-ink);
}

.primary-nav a:hover,
.primary-nav .current-menu-item > a {
	color: var(--raval-navy);
	font-weight: 600;
}

.nav-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
}

.nav-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--raval-ink);
	margin: 5px 0;
}

/* ==========================================================================
   Hero sections
   ========================================================================== */
.hero {
	position: relative;
	color: var(--raval-white);
	background: var(--raval-navy);
	padding: 96px 0;
	overflow: hidden;
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hero__media .raval-placeholder {
	/* In a hero, the placeholder sits directly behind real headline copy,
	 * so the busy diagonal-stripe pattern and a centered label fight with
	 * the text. Swap to a plain dark panel with a small note tucked in
	 * the corner instead, until a real export replaces it. */
	height: 100%;
	border-radius: 0;
	border: none;
	background: var(--raval-navy-dark);
	align-items: flex-end;
	justify-content: flex-end;
	color: rgba(255, 255, 255, 0.4);
	font-size: 11px;
	font-weight: 500;
	text-align: right;
	padding: 16px 24px;
}

.hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hero__scrim {
	/* The hero photo is cropped straight out of the Figma export, which has
	 * the design's own headline/body copy baked into the pixels. Our real
	 * HTML text sits on top in roughly the same spot, so this scrim has to
	 * go fully opaque under the text zone (not just dim) or the original
	 * baked-in letters ghost through behind our text. Different hero photos
	 * bake their headline at different widths/positions (this isn't just
	 * the Home hero), so the opaque band is kept wide and only fades out
	 * near the very right edge. */
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(28, 25, 64, 0.99) 0%, rgba(28, 25, 64, 0.99) 68%, rgba(28, 25, 64, 0.85) 80%, rgba(28, 25, 64, 0.45) 92%, rgba(28, 25, 64, 0.2) 100%);
	z-index: 1;
}

.hero__content {
	position: relative;
	z-index: 2;
	max-width: 640px;
}

.hero__content .eyebrow {
	color: var(--raval-gold);
}

/* Small decorative bar above the hero eyebrow — present in the real
 * Figma hero (a 56x3 rounded rectangle), missing from the earlier build. */
.hero__overline {
	width: 56px;
	height: 3px;
	border-radius: 2px;
	background: var(--raval-gold);
	margin-bottom: 20px;
}

.hero h1 {
	color: var(--raval-white);
	font-size: 44px;
	font-weight: 800;
}

.hero p {
	color: rgba(255, 255, 255, 0.85);
	font-size: 16px;
	max-width: 520px;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 12px;
}

/* Stat strip under hero (Elementor build: page-home.php's $stat_strip_html,
 * a single raw-HTML widget). Real Figma data: the 5 items are auto-width
 * (sized to their own content) with an exact 120px gap between them —
 * left-aligned, NOT stretched into 5 even columns — so this is a plain
 * flex row with a fixed gap, not a grid. */
.stat-strip {
	display: flex;
	flex-wrap: wrap;
	gap: 120px;
}

.stat-strip__item {
	position: relative;
	padding-top: 16px;
}

.stat-strip__bar {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 28px;
	height: 3px;
	background: var(--raval-gold);
}

.stat-strip__number {
	font-family: var(--font-heading);
	font-size: 40px;
	font-weight: 800;
	color: var(--raval-navy);
	display: block;
}

.stat-strip__label {
	display: block;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--raval-body);
}

@media (max-width: 900px) {
	.stat-strip {
		gap: 40px;
	}
}

/* ==========================================================================
   Sections / layout helpers
   ========================================================================== */
.section {
	padding: 72px 0;
}

.section--tight {
	padding: 48px 0;
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}

.section-head__copy {
	max-width: 560px;
}

.grid {
	display: grid;
	gap: 24px;
}

.grid--2 {
	grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
	grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
	grid-template-columns: repeat(4, 1fr);
}

/* Business / sector cards */
.card {
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	color: var(--raval-white);
	min-height: 320px;
	display: flex;
	align-items: flex-end;
}

.card .raval-placeholder {
	position: absolute;
	inset: 0;
	border-radius: 0;
	border: none;
	align-items: flex-start;
	padding-top: 20px;
}

.card__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(32, 19, 56, 0) 40%, rgba(32, 19, 56, 0.9) 100%);
}

.card__body {
	position: relative;
	z-index: 2;
	padding: 24px;
}

.card__body .eyebrow {
	color: var(--raval-gold);
	margin-bottom: 8px;
}

.card__body h3 {
	color: var(--raval-white);
	font-size: 20px;
	margin: 0;
}

/* ==========================================================================
   Split sections — "Raval at a Glance" and "Our Story"
   (photo on one side, panel or navy card on the other)
   ========================================================================== */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
}

/* Two stacked bugs here, found via a Playwright geometry audit across
 * mobile/tablet breakpoints (a 307px-wide column rendering the photo at
 * only 191px tall inside a 435px-tall column, leaving a blank gap below
 * it):
 *  1. The column (.split__media) does stretch to match its sibling panel's
 *     height via flex, but Elementor wraps its image WIDGET in its own
 *     `.elementor-element` / `.elementor-widget-container` divs, which are
 *     height:auto by default and don't inherit that stretch — fixed by
 *     forcing them to 100% below.
 *  2. Even with that fixed, Elementor's own frontend.min.css ships
 *     `.elementor img { height: auto; ... }`, same specificity as our
 *     `.split__media img` rule and loaded AFTER main.css, so on a tie it
 *     wins and silently overrides our height:100% back to auto — the img
 *     keeps rendering at its own natural aspect ratio instead of filling
 *     the box. This affects every "cover-fill photo" rule site-wide
 *     (.story__media, .sector-panel__media, .biz-card, the leader photos,
 *     the Impact closing photo), not just this one — all given the same
 *     `!important` below rather than leaving them to pass or fail per
 *     viewport by coincidence of each photo's own aspect ratio. */
.split__media {
	position: relative;
	overflow: hidden;
}

.split__media .elementor-widget-wrap,
.split__media .elementor-element,
.split__media .elementor-widget-container {
	height: 100%;
}

.split__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

.split__panel {
	background: var(--raval-navy-dark);
	color: var(--raval-white);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 64px;
}

.split__panel .eyebrow {
	color: var(--raval-gold);
}

.split__panel h2 {
	color: var(--raval-white);
}

.split__panel p {
	color: rgba(255, 255, 255, 0.82);
}

/* "Our Story" variant, matched to the real Figma export: the photo is a
 * full-height bleed on the right two-thirds only (the upper-left corner of
 * the section is plain white, not photo), and the navy card floats at the
 * bottom-left, overlapping the photo's left edge slightly rather than
 * sitting in its own full-height column. */
.story {
	position: relative;
	min-height: 480px;
	overflow: hidden;
}

.story__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 67%;
	z-index: 0;
}

.story__media img {
	/* !important: Elementor's own frontend.min.css ships
	 * `.elementor img { height: auto; }` at the same selector specificity,
	 * loaded after this stylesheet — on the tie it silently wins and the
	 * photo falls back to its natural aspect ratio instead of filling the
	 * box (found via the responsive audit; see the .split__media comment
	 * nearby for the full explanation). */
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

.story__inner {
	position: relative;
	z-index: 2;
	min-height: 480px;
	display: flex;
	align-items: center;
	/* Matches the site-wide ~120px (6.25% at 1920) left margin used
	 * everywhere else (header logo, stat numbers, business grid). This
	 * used to be the theme's centered .container (max-width 1200px,
	 * margin:auto), which put the card way too far from the true left
	 * edge on wide screens — this section needs a left-aligned inset,
	 * not a centered fixed-width column. */
	padding-left: 6.25%;
	box-sizing: border-box;
}

.story__card {
	position: relative;
	background: var(--raval-navy-dark);
	color: var(--raval-white);
	padding: 48px;
	max-width: 560px;
	width: 100%;
}

.story__card .eyebrow {
	color: var(--raval-gold);
}

.story__card h2 {
	color: var(--raval-white);
}

.story__card p {
	color: rgba(255, 255, 255, 0.82);
}

/* ==========================================================================
   Business teaser intro row (page-home.php) — real data: the heading
   (520px) and the paragraph+link (420px) sit at OPPOSITE ends of the
   1680px row with ~740px of blank space between, i.e. space-between, not
   a 60/40 percentage split where the aside hugs the heading.
   ========================================================================== */
.biz-teaser {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 32px;
}

.biz-teaser__heading {
	max-width: 520px;
}

.biz-teaser__heading h2 {
	margin-top: 8px;
}

.biz-teaser__aside {
	max-width: 420px;
}

.biz-teaser__link {
	font-weight: 600;
	color: var(--raval-ink);
	border-bottom: 1px solid currentColor;
}

/* ==========================================================================
   Business grid — the real Figma file decodes these as a photo PLUS a
   separate bottom gradient scrim and two text layers (sector label +
   company name) overlaid on top, not a label baked into the export as
   assumed earlier. Built on the Elementor page (page-home.php) as one
   <a class="biz-card"> raw-HTML widget per tile.
   ========================================================================== */
.biz-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

.biz-grid .biz-card--wide {
	grid-column: span 2;
}

.biz-card {
	position: relative;
	display: block;
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
	line-height: 0;
}

.biz-card img {
	/* !important: see the .split__media comment — Elementor's
	 * `.elementor img { height: auto; }` ties this rule's specificity and
	 * loads later, so it silently wins without this. */
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.biz-card:hover img {
	transform: scale(1.03);
}

.biz-card__scrim {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 45%;
	background: linear-gradient(to top, rgba(20, 18, 45, 0.88), rgba(20, 18, 45, 0));
	pointer-events: none;
}

.biz-card__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px 28px;
	line-height: 1.3;
}

.biz-card__label {
	display: block;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--raval-gold);
	margin-bottom: 8px;
}

.biz-card__title {
	display: block;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 19px;
	color: var(--raval-white);
}

.biz-card__title--lg {
	font-size: 30px;
}

/* Simple stat card used on Our Impact */
.impact-stat {
	border: 1px solid var(--raval-border);
	border-radius: 10px;
	padding: 24px;
}

.impact-stat__label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--raval-gold);
	font-weight: 700;
	margin-bottom: 12px;
}

.impact-stat__row {
	display: flex;
	gap: 32px;
}

.impact-stat__number {
	font-family: var(--font-heading);
	font-size: 30px;
	font-weight: 800;
	color: var(--raval-navy);
	display: block;
}

.impact-stat__sub {
	font-size: 13px;
	color: var(--raval-body);
}

/* ==========================================================================
   Hero filter tabs — "Our Sectors" hero on Our Businesses
   ========================================================================== */
.hero__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
	position: relative;
	z-index: 2;
}

.hero__tab {
	display: inline-flex;
	align-items: center;
	padding: 12px 22px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--raval-white);
}

.hero__tab--active {
	background: var(--raval-gold);
	border-color: var(--raval-gold);
	color: var(--raval-navy-dark);
}

/* ==========================================================================
   Sector panels — Our Businesses detail page. Photo on one side (full-
   bleed, badge number in the corner), copy on the other. Rows alternate
   a light-gray / white background exactly as in the real export; the
   Healthcare panel additionally flips the photo to the right.
   ========================================================================== */
.sector-panel {
	display: grid;
	grid-template-columns: 5fr 7fr;
	align-items: stretch;
}

.sector-panel--alt {
	background: var(--raval-bg-light);
}

.sector-panel--flip {
	grid-template-columns: 7fr 5fr;
}

.sector-panel--flip .sector-panel__media {
	order: 2;
}

.sector-panel--flip .sector-panel__body {
	order: 1;
}

.sector-panel__media {
	position: relative;
	min-height: 320px;
	overflow: hidden;
}

.sector-panel__media img {
	/* !important: on top of the wrapper-nesting fix below, Elementor's own
	 * `.elementor img { height: auto; }` ties this rule's specificity and
	 * loads later in the cascade, so it silently wins without this (see
	 * the .split__media comment for the full explanation). */
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
}

/* When this class lands on an Elementor column (the "Our Businesses" page
 * builder), Elementor gives its own per-widget wrapper divs `position:
 * relative`, which sit closer in the DOM than the column itself and win
 * out as the nearest positioned ancestor for anything absolutely
 * positioned inside — so plain `.sector-panel__media img{height:100%}`
 * has nothing to be 100% OF (the image widget only grows to its natural
 * aspect-ratio height), and the badge ends up positioned against its own
 * zero-height widget instead of the photo. Elementor's own
 * `.elementor-widget-wrap` genuinely does stretch to the column's full
 * row height already, so pin the image widget and the badge widget to
 * fill that wrap directly instead of fighting the cascade. */
.sector-panel__media > .elementor-widget-wrap {
	position: relative;
}

.sector-panel__media > .elementor-widget-wrap > .elementor-widget-image {
	position: absolute;
	inset: 0;
}

.sector-panel__media > .elementor-widget-wrap > .elementor-widget-html {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

.sector-panel__badge {
	position: absolute;
	top: 32px;
	left: 32px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: var(--raval-gold);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 13px;
	padding: 8px 14px;
}

.sector-panel__body {
	padding: 64px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sector-panel__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--raval-body);
	margin-bottom: 14px;
}

.sector-panel__body h2 {
	font-size: 28px;
	margin-bottom: 18px;
}

.portfolio-heading {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--raval-ink);
	margin: 8px 0 12px;
}

.portfolio-list {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 24px;
}

.portfolio-list li {
	position: relative;
	padding-left: 16px;
	font-size: 15px;
}

.portfolio-list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 10px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--raval-navy);
}

.sector-panel__subitem {
	margin-bottom: 16px;
}

.sector-panel__subitem h4 {
	font-family: var(--font-heading);
	color: var(--raval-ink);
	font-size: 16px;
	margin: 0 0 4px;
}

.sector-panel__subitem p {
	margin: 0;
	font-size: 14px;
}

.mini-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	margin-top: 24px;
}

/* mini-stats' own number/label pair (sector_panel() in
 * page-our-businesses.php) — restored after being accidentally dropped
 * when the unrelated Home page stat strip was renamed to .stat-strip__*. */
.mini-stats .stat {
	display: block;
}

.mini-stats .stat__number {
	display: block;
	font-family: var(--font-heading);
	font-size: 22px;
	font-weight: 800;
	color: var(--raval-navy);
}

.mini-stats .stat__label {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--raval-body);
}

/* ==========================================================================
   Timeline — Who We Are "Where We Started / How We Grew / Where We Are
   Today" rows: a left-hand rule + label, a paragraph on the right.
   ========================================================================== */
.timeline__row {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 40px;
	padding: 28px 0;
	border-top: 1px solid var(--raval-border);
}

.timeline__row:last-child {
	border-bottom: 1px solid var(--raval-border);
}

.timeline__label {
	font-family: var(--font-heading);
	font-size: 18px;
	color: var(--raval-ink);
	margin: 0;
}

.timeline__copy {
	margin: 0;
}

/* "Where We're Going" pill-card grid */
.pill-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2px;
	background: var(--raval-border);
	margin-top: 32px;
}

.pill-card {
	background: var(--raval-bg-light);
	padding: 28px 24px;
}

.pill-card h4 {
	font-family: var(--font-heading);
	color: var(--raval-navy);
	font-size: 16px;
	margin: 0 0 10px;
}

.pill-card p {
	font-size: 14px;
	margin: 0;
}

/* Leadership grid */
.leadership-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	margin-top: 40px;
}

.leadership-card__photo {
	border-radius: 10px;
	overflow: hidden;
	margin-bottom: 20px;
}

.leadership-card__photo img {
	width: 100%;
	display: block;
}

.leadership-card h3 {
	font-size: 19px;
	margin: 0 0 4px;
}

.leadership-card__title {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 13px;
	color: var(--raval-navy);
	margin-bottom: 12px;
}

.leadership-card p {
	font-size: 14px;
	margin: 0;
}

/* Elementor-built leader cards on Who We Are (page-who-we-are.php) — the
 * real Figma file's three headshots are cropped to very close to the same
 * ~552x560 box; the actual source photos we have vary in native aspect
 * ratio, so force the same box via object-fit rather than letting each
 * card's height drift with its source image. The box (nearly square) is
 * much shorter than any of the three source portraits, so object-fit:cover
 * has to crop a lot of height off — the default center/center position
 * split that evenly top and bottom, which clipped into foreheads/hairlines
 * (reported by the user). Each photo gets its own object-position, tuned
 * per source image, biased toward the top of the frame since there's far
 * more spare room below the shoulders than above the head. */
#leader-photo-1 img,
#leader-photo-2 img,
#leader-photo-3 img {
	width: 100%;
	aspect-ratio: 552 / 560;
	object-fit: cover;
	display: block;
}

#leader-photo-1 img {
	object-position: center top;
}

#leader-photo-2 img {
	/* This photo (replaced per the user's request) is a wide landscape
	 * shot with the subject sitting left-of-center on a lot of empty
	 * background — cover-fit crops it down to this near-square box by
	 * width, not height, so the position that matters here is horizontal,
	 * not vertical: centered on the subject (~41% across the source image)
	 * rather than the box's own 50% middle, which left him shifted right
	 * with too much blank space on the left. */
	object-position: 41% center;
}

#leader-photo-3 img {
	object-position: center top;
}

/* Our Impact page's full-bleed closing photo (page-our-impact.php) — plain
 * Elementor image widgets don't stretch to their column's width on their
 * own (that only happens via the .sector-panel__media rule below), so
 * this needs its own explicit full-width/object-fit rule matching the
 * real Figma image's 1920x767 (2.5:1) aspect ratio. */
#impact-closing-photo img {
	width: 100%;
	aspect-ratio: 1920 / 767;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   Our Impact — paired stat cards + full-bleed community photo
   ========================================================================== */
.impact-stat__title {
	font-family: var(--font-heading);
	font-size: 19px;
	color: var(--raval-ink);
	margin: 0 0 24px;
}

.impact-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--raval-border);
	margin-top: 24px;
}

.impact-cards > div {
	padding: 40px;
}

.impact-cards > div:first-child {
	border-right: 1px solid var(--raval-border);
}

.impact-photo {
	line-height: 0;
}

.impact-photo img {
	width: 100%;
	display: block;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	background: var(--raval-navy);
	color: rgba(255, 255, 255, 0.85);
	padding-top: 64px;
}

.site-footer a {
	color: rgba(255, 255, 255, 0.85);
}

.site-footer a:hover {
	color: var(--raval-white);
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 32px;
	padding-bottom: 48px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand .site-logo {
	color: var(--raval-white);
	margin-bottom: 16px;
}

.footer-col h4 {
	color: var(--raval-white);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 16px;
}

.footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 24px 0;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.6);
}

.footer-bottom .social {
	display: flex;
	gap: 16px;
}

/* ==========================================================================
   Responsive — Figma has Desktop / Tablet / Mobile frames.
   Breakpoints: >=1200 desktop, 768-1199 tablet, <768 mobile.
   ========================================================================== */
@media (max-width: 1199px) {
	.container {
		padding: 0 20px;
	}

	.grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid--3 {
		grid-template-columns: repeat(2, 1fr);
	}

	.hero h1 {
		font-size: 34px;
	}

	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}

	.split {
		grid-template-columns: 1fr;
	}

	.split__panel {
		padding: 40px;
	}

	/* Below desktop width the floating-card layout gets cramped, so stack:
	 * full-width photo on top, full-width card underneath in normal flow. */
	.story {
		min-height: 0;
	}

	.story__media {
		position: static;
		width: 100%;
		height: 320px;
	}

	.story__inner {
		min-height: 0;
		display: block;
	}

	.story__card {
		max-width: none;
		padding: 40px;
		right: 0;
	}

	.biz-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.biz-grid .biz-card--wide {
		grid-column: span 2;
	}

	.sector-panel,
	.sector-panel--flip {
		grid-template-columns: 1fr;
	}

	.sector-panel--flip .sector-panel__media,
	.sector-panel--flip .sector-panel__body {
		order: initial;
	}

	.sector-panel__media {
		min-height: 280px;
	}

	.sector-panel__body {
		padding: 48px 40px;
	}

	.pill-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.leadership-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 24px;
	}

	.timeline__row {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

@media (max-width: 767px) {
	.primary-nav ul {
		display: none;
	}

	.nav-toggle {
		display: block;
	}

	.site-header__inner .btn-dark {
		display: none;
	}

	.hero {
		padding: 56px 0;
	}

	.hero h1 {
		font-size: 28px;
	}

	.grid--4,
	.grid--3,
	.grid--2 {
		grid-template-columns: 1fr;
	}

	.stat-strip {
		gap: 24px;
	}

	.section {
		padding: 48px 0;
	}

	.footer-grid {
		grid-template-columns: 1fr;
	}

	.impact-stat__row {
		flex-wrap: wrap;
		gap: 20px;
	}

	.biz-grid {
		grid-template-columns: 1fr;
	}

	.biz-grid .biz-card--wide {
		grid-column: span 1;
	}

	.story__card {
		padding: 32px 24px;
	}

	.sector-panel__body {
		padding: 40px 24px;
	}

	.sector-panel__body h2 {
		font-size: 24px;
	}

	.portfolio-list {
		grid-template-columns: 1fr;
	}

	.pill-grid {
		grid-template-columns: 1fr;
	}

	.leadership-grid {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.mini-stats {
		gap: 24px;
	}

	.hero__tabs {
		flex-direction: column;
		align-items: flex-start;
	}

	.impact-cards {
		grid-template-columns: 1fr;
	}

	.impact-cards > div:first-child {
		border-right: none;
		border-bottom: 1px solid var(--raval-border);
	}
}

/* Home hero/section responsive guard — 2026-10-06.
 * The mobile/tablet responsive sizing for the Home page was originally
 * delivered as Elementor per-post settings (padding_tablet/mobile,
 * typography_font_size_tablet/mobile in _elementor_data). That approach
 * turned out not to be durable: opening and saving the Home page again
 * in the Elementor editor regenerates the whole _elementor_data tree
 * from the editor's own state and silently drops any responsive keys
 * the editor UI doesn't surface, which is exactly what happened here —
 * the hero's side padding and heading size reverted to their flat
 * desktop-only values (120px padding, 76px heading, no breakpoint
 * variants), reproducing the original clipping/one-word-per-line
 * wrapping bug. Rather than re-inject fragile per-post JSON again, this
 * is plain theme CSS scoped to the Home page via Elementor's own stable
 * `raval-page-home` body class, so it survives any number of future edits
 * made directly in the Elementor editor. If the Home page is ever
 * re-created as a different post ID, update the selector below. */
@media (max-width: 1024px) {
	.raval-page-home .elementor-top-section {
		padding-left: 48px !important;
		padding-right: 48px !important;
	}

	.raval-page-home h1 {
		font-size: 52px !important;
		line-height: 58px !important;
	}
}

@media (max-width: 767px) {
	.raval-page-home .elementor-top-section {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.raval-page-home .elementor-top-section:first-of-type {
		padding-top: 95px !important;
		padding-bottom: 85px !important;
	}

	.raval-page-home h1 {
		font-size: 34px !important;
		line-height: 40px !important;
	}
}

/* Business-grid "three-up" row size match — 2026-10-06.
 * The bottom row of the Home business grid (Angola Iron and Steel /
 * Raval Pharmaceutical / National Polymer) is set to three nearly-equal
 * Elementor column widths (33% / 33% / 34%), but Elementor's own column
 * math doesn't split evenly across that 1% difference — the 34% column
 * renders noticeably wider AND taller than the other two (confirmed
 * live: ~535x310 vs ~491x289), making National Polymer look like a
 * different, bigger tile next to its two neighbors.
 * Rather than edit the percentage in Elementor's stored page data again
 * (the same kind of per-post setting that was silently wiped by a
 * routine Elementor-editor save earlier this week), this is a plain CSS
 * override keyed off the actual page content: "the business-grid row
 * that has plain (non-wide) biz-cards" rather than a specific element
 * ID, so it holds regardless of what column widths Elementor re-saves
 * in the future. Forces all three columns to equal thirds and matches
 * every card in the row to the same photo aspect ratio.
 * Scoped to "the row that contains a 34%-width column" (`.elementor-
 * col-34`), which only ever appears on this three-up row — the other
 * business-grid row (Raval Steel + Habesha Steel Mills) uses col-66/
 * col-33 and is untouched by this rule. (There is no `.biz-card--wide`
 * class on the card itself — only on its title text — so don't reuse
 * that as a row discriminator.)
 *
 * Fixed 2026-10-06 (follow-up): the original rule had no breakpoint
 * guard, so it forced all three columns to 33.333% width at EVERY
 * screen size — including phones, where Elementor's own responsive
 * behaviour is to stack columns to 100% and show one per row. That
 * unconditional !important was winning over Elementor's mobile stacking
 * rule, squeezing all three cards into one cramped, overlapping row on
 * phones (confirmed via a client screenshot: titles overlapping, photos
 * shrunk to thumbnails). Wrapping it in the same 768px breakpoint used
 * everywhere else in this file keeps the equal-thirds fix for
 * desktop/tablet while letting phones fall back to Elementor's normal
 * full-width stacked cards. */
@media (min-width: 768px) {
	.elementor-top-section:has(.elementor-col-34) .elementor-column {
		width: 33.333% !important;
		flex: 0 0 33.333% !important;
		max-width: 33.333% !important;
	}

	.elementor-top-section:has(.elementor-col-34) .biz-card {
		aspect-ratio: 544 / 320 !important;
	}
}

/* Intro-hero background photos too dark to read — 2026-10-06, revised x3.
 * The "Who We Are" / "Our Businesses" / "Our Impact" title sections
 * (the one with the eyebrow + H1 + sector tabs, e.g. "OUR BUSINESSES" /
 * "Our Sectors") all share one helper (hero_overlay()) that puts a flat
 * navy overlay at 0.97 alpha over the background photo — at that
 * opacity the photo was essentially invisible, just a faint hint of
 * texture. Went through two approximations (a flat 0.6, then a 2-stop
 * 0.65→0.1 gradient, then a reverse-engineered-from-screenshot 3-stop
 * curve) before the client supplied the actual Figma layer values
 * directly: color #1C1940 (= rgb(28,25,64), already a match) with three
 * gradient stops at 97%, 86% and 35% opacity. This is now that exact
 * spec — a straight linear-gradient(90deg) with those three stops at
 * their default 0% / 50% / 100% positions — rather than an approximation.
 * Scoped by page ID (stable) rather than editing the opacity in
 * Elementor's stored page data, which only survives until the next time
 * someone saves that page in the Elementor editor (see the padding/
 * typography fixes earlier this build for the full story on why). */
.raval-page-who-we-are .elementor-background-overlay,
.raval-page-our-businesses .elementor-background-overlay,
.raval-page-our-impact .elementor-background-overlay {
	background-color: transparent !important;
	background-image: linear-gradient(90deg, rgba(28, 25, 64, 0.97) 0%, rgba(28, 25, 64, 0.86) 50%, rgba(28, 25, 64, 0.35) 100%) !important;
}

/* ==========================================================================
   Contact page — 2026-10-06
   New page modeled on a short reference recording the client sent of
   ravalgroups.com/contact (a flat-navy "Let's Connect" hero over a
   gold CTA, then a "Let's Hear From You" section with an icon + label +
   value info list). The recording cut off before showing the actual form
   or map, so everything from "Let's Hear From You" down past the info
   list (two-column layout, the form itself, the map) is this build's own
   design, kept consistent with the rest of the site's navy/gold/
   Poppins-Inter system rather than copied from an unseen source.
   ========================================================================== */

/* Info list (left column): icon-in-circle + label + value rows, same
 * navy-dark circle treatment used for the business-grid scrim text. */
.contact-info-item {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin-bottom: 30px;
}

.contact-info-item:last-child {
	margin-bottom: 0;
}

.contact-info-icon {
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--raval-navy-dark);
	display: flex;
	align-items: center;
	justify-content: center;
}

.contact-info-icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: var(--raval-white);
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.contact-info-label {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 15px;
	color: var(--raval-ink);
	margin: 0 0 4px;
}

.contact-info-value {
	font-size: 14px;
	color: var(--raval-body);
	line-height: 1.6;
}

.contact-info-value a {
	color: var(--raval-body);
}

.contact-info-value a:hover {
	color: var(--raval-navy);
}

/* Form (right column): white card, soft shadow, same radius language as
 * the pill/leadership cards elsewhere on the site. */
.contact-form-card {
	background: var(--raval-white);
	border: 1px solid var(--raval-border);
	border-radius: 16px;
	padding: 40px;
	box-shadow: 0 20px 48px rgba(28, 25, 64, 0.08);
}

.contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.contact-form label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--raval-ink);
	margin: 0 0 8px;
}

.contact-form .field {
	margin-bottom: 20px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--raval-ink);
	background: var(--raval-bg-light);
	border: 1px solid var(--raval-border);
	border-radius: 8px;
	padding: 13px 16px;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.contact-form textarea {
	resize: vertical;
	min-height: 130px;
}

.contact-form input:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: var(--raval-navy);
	background: var(--raval-white);
}

.contact-form button[type="submit"] {
	width: 100%;
	justify-content: center;
	border: none;
}

.contact-form__notice {
	margin: 0 0 20px;
	padding: 14px 18px;
	border-radius: 8px;
	font-size: 14px;
}

.contact-form__notice--success {
	background: #eaf6ee;
	color: #1f7a3e;
	border: 1px solid #c3e6cd;
}

.contact-form__notice--error {
	background: #fdeeee;
	color: #a32626;
	border: 1px solid #f4caca;
}

/* Map */
.contact-map {
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--raval-border);
	line-height: 0;
}

.contact-map iframe {
	width: 100%;
	height: 420px;
	border: 0;
	display: block;
}

@media (max-width: 767px) {
	.contact-form__row {
		grid-template-columns: 1fr;
	}

	.contact-form-card {
		padding: 28px 22px;
	}
}