/* page-home.css
   Homepage-only glue. Everything here used to be inline in <style> at the top
   of index.php. Section helpers, video-bg overlays, contact form, work-section
   geometry positioning, dark-alfa overlays, free-standing stat helpers,
   responsive heading scale. */


/* ============================================================
   Section dividers
   ============================================================ */
.banner-section { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }

/* Offset smooth scroll targets so the sticky 90px nav doesn't cover them. */
section[id],
[id="our-work"] { scroll-margin-top: 90px; }


/* ============================================================
   SEO section bg image anchor
   ============================================================ */
#seo { background-position: center top !important; }


/* ============================================================
   Stack label helper (used in Selected Work / The Stack)
   ============================================================ */
.mm-stack-label {
	color: rgba(255, 255, 255, 0.4);
	font-size: 10px;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	margin-bottom: 14px;
	font-weight: 600;
}


/* ============================================================
   Case study list (used in the hidden mm-cases-data block that
   the geo-facets panel reads from)
   ============================================================ */
.mm-case {
	display: flex;
	gap: 36px;
	padding: 36px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mm-case:last-child { border-bottom: 0; }
.mm-case-num {
	flex: 0 0 60px;
	color: var(--mm-accent);
	font-size: 14px;
	letter-spacing: 0.2em;
	font-weight: 700;
	padding-top: 6px;
}
.mm-case-body { flex: 1; }
.mm-case-title {
	color: #fff;
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 14px;
}
.mm-case-body p {
	color: rgba(255, 255, 255, 0.75);
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 16px;
}
.mm-case-body ul.mm-bullets-inline { margin-top: 8px; }


/* ============================================================
   Contact form: square corners, faint borders, light placeholders
   ============================================================ */
#contact .form-control,
#contact input.input-lg,
#contact textarea.input-lg {
	border-radius: 0 !important;
	border-color: rgba(255, 255, 255, 0.22) !important;
	font-weight: 300 !important;
	font-size: 14px !important;
}
#contact .form-control:focus,
#contact input.input-lg:focus,
#contact textarea.input-lg:focus {
	border-color: rgba(255, 255, 255, 0.45) !important;
}
#contact .form-control::placeholder,
#contact input.input-lg::placeholder,
#contact textarea.input-lg::placeholder {
	color: rgba(255, 255, 255, 0.35) !important;
	font-weight: 300 !important;
	font-size: 13px !important;
}


/* ============================================================
   Work section + geometry SVG positioning
   ============================================================ */
#work { position: relative; overflow: hidden; }

.geo-stage { position: static; }

/* .geo-svg-wrap rules live in components/geo-facets/geo-facets.css */

.geo-stage > .row,
.geo-stage > .mt-90,
.geo-stage > .mb-30 { position: relative; z-index: 1; pointer-events: none; }
.geo-stage > .mt-90 > *,
.geo-stage > .mb-30 > * { pointer-events: auto; }
.geo-stage .constellation-wrap { position: relative; z-index: 2; pointer-events: auto; }

.mm-cases-data { display: none; }


/* ============================================================
   Custom intermediate dark overlay (theme only ships 30/50/70/90)
   ============================================================ */
.bg-dark-alfa-55 { position: relative; }
.bg-dark-alfa-55:before {
	content: '';
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background: rgba(0, 0, 0, 0.55);
	z-index: 0;
}
.bg-dark-alfa-55 > * { position: relative; z-index: 1; }


/* ============================================================
   Free-standing stat helpers (NOT inside .mm-stat-card; legacy)
   ============================================================ */
.mm-stat-num {
	font-size: 56px;
	font-weight: 700;
	color: var(--mm-accent);
	line-height: 1;
	letter-spacing: -0.02em;
}
.mm-stat-label {
	font-size: 13px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(245, 242, 236, 0.6);
	margin-top: 8px;
}


/* ============================================================
   Mobile small-screen tweaks
   ============================================================ */
@media (max-width: 767px) {
	.mm-case { flex-direction: column; gap: 14px; padding: 28px 0; }
	.mm-case-num { padding-top: 0; }
}


/* ============================================================
   Utility classes replacing inline style attributes
   ============================================================ */

/* White text container (replaces every style="color:#fff;" on column wrappers).
   Set on the container only so .mm-lede-* color helpers still win on descendants. */
.mm-text-white { color: #fff; }


/* ============================================================
   Section h2 size variants
   ============================================================ */
.mm-h2-xl { font-size: 52px !important; color: #fff; }
.mm-h2-lg { font-size: 44px !important; color: #fff; }
.mm-h2-md { font-size: 40px !important; color: #fff; }
.mm-h2-lg-nowrap { font-size: 44px !important; color: #fff; white-space: nowrap; }


/* Hero h1 and lede size variants live in /components/mm-headline-lede/. */


/* .mm-hero-cta-row base lives in /components/mm-hero-cta-row/. Home-specific
   override: tighter gap and a smaller top margin since the home hero packs
   denser than case-study heroes. */
.mm-hero-cta-row {
	gap: 13px;
	margin-top: 28px;
}


/* .mm-bullets-mt-* margin helpers live in /css/mm-utilities.css. */


/* ============================================================
   Section-level layout
   ============================================================ */
#work {
	background: #000;
	padding: 120px 0 0;
	margin-bottom: 0;
	border: 0;
}
#journal {
	background: #000;
	padding: 120px 0;
}
#contact {
	margin-top: 0;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	position: relative;
	z-index: 2;
	background: radial-gradient(ellipse at center top, #08080a 0%, #030303 60%, #000 100%);
}


/* ============================================================
   Geo facet vertical spacer
   ============================================================ */
.geo-facet-spacer { height: calc(55vh + 250px); }


/* ============================================================
   Honeypot field (visually hidden but still focusable for bots)
   ============================================================ */
.mm-honeypot {
	position: absolute;
	left: -9999px;
}