/* =================================================================
 * Jindal Polyweaves — HOME overlay header + cinematic hero.
 * 17 Jun 2026. Visual direction from the reference (dark overlay pill
 * nav + cinematic hero); ALL content stays the existing site's.
 * Uses existing DESIGN.md v1.1 tokens (magenta #E5077D / gold #FAC306,
 * existing Cal type) — no new fonts, no new content. Scoped to
 * body.home so only the homepage hero/header change; the footer is
 * already the dark multi-column build and is left untouched.
 * ================================================================= */

/* ---------- Overlay pill header (floats over the hero) ---------- */
.jp-header {
	position: fixed; top: 0; left: 0; right: 0; z-index: 50;
	background: transparent;
	border-bottom: 0;
	backdrop-filter: none; -webkit-backdrop-filter: none;
}
.jp-header__inner {
	margin: 14px auto 0;
	max-width: var(--jp-container);   /* match page container so logo aligns with content left edge */
	background: var(--jp-white);
	border: 1px solid var(--jp-hairline);
	border-radius: var(--jp-radius-md);   /* match button radius — not a full pill */
	padding: 9px 24px;   /* 24px = .jp-container side padding → logo/CTA align with page content */
	box-shadow: 0 12px 40px -16px rgba(20,24,28,.18), 0 4px 12px -6px rgba(20,24,28,.08);
}
.jp-header__brand img { filter: none; height: 34px; }
.jp-header__nav-link { color: var(--jp-charcoal); font-size: 14px; }
.jp-header__nav-link:hover,
.jp-header__nav-link.current-menu-item { color: var(--jp-primary); }
.jp-header__chev { color: var(--jp-stone); }
.jp-header__toggle { color: var(--jp-charcoal); border-color: var(--jp-hairline); background: transparent; }
.jp-header__cta.jp-btn { padding: 10px 18px; }

/* Dropdown panels + mobile drawer use the light site.css defaults (white
   panel, charcoal text). The dark-overlay treatment was removed 27 Jun 2026
   so the overlay menus read white over the dark floating header pill. */

/* ---------- Cinematic hero (existing copy / image preserved) ---------- */
body.home .jp-hero {
	background: #0F0D0D;
	position: relative;
	min-height: 80vh; min-height: 80dvh;
}
/* 3-slide background slider */
body.home .jp-hero__slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
body.home .jp-hero__slide {
	position: absolute; inset: 0;
	background-size: cover; background-position: 72% 26%;
	opacity: 0; transition: opacity 1.2s ease;
}
body.home .jp-hero__slide.is-active { opacity: 1; }
/* video slide — fills the hero like the image slides */
body.home .jp-hero__slide--video { background: #0F0D0D; }
body.home .jp-hero__video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
body.home .jp-hero__overlay,
body.home .jp-hero__inner { position: relative; z-index: 2; }
/* slide pagination — line segments */
body.home .jp-hero__dots {
	position: absolute; left: 0; right: 0; bottom: 30px; z-index: 4;
	display: flex; justify-content: center; gap: 12px;
}
body.home .jp-hero__dots .jp-slideshow__dot {
	width: 46px; height: 3px; padding: 0; border: 0; border-radius: 2px;
	background: rgba(255,255,255,.35); cursor: pointer; transition: background .3s ease, width .3s ease;
}
body.home .jp-hero__dots .jp-slideshow__dot:hover { background: rgba(255,255,255,.6); }
body.home .jp-hero__dots .jp-slideshow__dot.is-active { background: #fff; width: 64px; }
/* warm magenta->gold directional glow + legibility scrims, replaces the flat overlay */
body.home .jp-hero__overlay {
	background:
		radial-gradient(56% 52% at 80% 26%, rgba(229,7,125,.32) 0%, rgba(250,150,50,.14) 44%, transparent 72%),
		linear-gradient(90deg, rgba(15,13,13,.92) 0%, rgba(15,13,13,.52) 40%, rgba(15,13,13,.08) 70%, transparent 88%),
		linear-gradient(0deg, rgba(15,13,13,.96) 2%, rgba(15,13,13,.22) 40%, transparent 64%),
		linear-gradient(0deg, rgba(0,0,0,.32), rgba(0,0,0,.32));
}
body.home .jp-hero__inner { padding-top: 132px; }
body.home .jp-hero__meta-line { background: var(--jp-secondary); }
body.home .jp-hero__meta-text { color: rgba(255,255,255,.78); }
/* primary CTA = brand magenta pill; secondary stays the quiet text link */
body.home .jp-hero__ctas .jp-btn--white { background: var(--jp-primary); color: #fff; }
body.home .jp-hero__ctas .jp-btn--white:hover { background: #c2056a; color: #fff; }
/* remove the diagonal shape divider at the hero bottom (per client) */
body.home .jp-hero__slash { display: none; }

/* === HERO LEGIBILITY — glassy dark panel (option 2 tint + 1px blur) === */
body.home .jp-hero__content {
	display: block;
	background: rgba(16,17,19,.4);
	-webkit-backdrop-filter: blur(1px) saturate(57%);
	backdrop-filter: blur(1px) saturate(57%);
	border: 1px solid rgba(255,255,255,.18);
	box-shadow: 0 18px 50px -28px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
	padding: 30px 34px 34px;
	border-radius: var(--jp-radius-lg, 16px);
	max-width: 600px;
}
body.home .jp-hero h1 {
	display: block;
	background: none;
	padding: 0;
	line-height: 1.02;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0,0,0,.45);
}
body.home .jp-hero__meta-text {
	background: none;
	padding: 0;
	border-radius: 0;
	color: rgba(255,255,255,.9);
	text-shadow: 0 1px 6px rgba(0,0,0,.5);
}
body.home .jp-hero__meta-line { background: var(--jp-secondary); }
body.home .jp-hero p.jp-hero__sub {
	color: rgba(255,255,255,.9);
	margin-top: 0;
	text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
body.home .jp-hero__textlink { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
body.home .jp-hero__textlink:hover { color: var(--jp-primary); }

@media (max-width: 880px) {
	.jp-header__inner { margin: 10px 14px 0; padding: 8px 10px 8px 16px; border-radius: var(--jp-radius-md); }
}
@media (max-width: 600px) {
	body.home .jp-hero__inner { padding-top: 104px; }
}