/*
Theme Name:  The Spectrum Brand
Theme URI:   https://spectruminnovativemedia.com
Author:      The Spectrum Brand
Author URI:  https://spectruminnovativemedia.com
Description: Premium luxury umbrella brand theme for The Spectrum Brand — covering Technology & IT, Media & Video Production, Photography & Imaging, and Luxury Real Estate Media. Built for Elementor Pro, fully SEO-optimized, conversion-focused, and mobile-first.
Version: 4.3.14
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 7.4
License:     GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spectrum-brand
Tags:        full-site-editing, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, theme-options, threaded-comments, translation-ready, wide-blocks

/* =====================================================
   SPECTRUM BRAND — GLOBAL DESIGN SYSTEM
   =====================================================
   Primary Blue:     #0A2A66
   Light Blue:       #4A90E2
   Orange Accent:    #F5A623
   Gold:             #c8a96e
   Dark BG:          #0e1624
   Dark Mid:         #14203a
   Dark Card:        #1a2a46
   White:            #ffffff
   Off White:        #f7f6f2
   Light Gray:       #f0eee8
   Text Dark:        #1a1a2e
   Text Mid:         #4a4a6a
   Text Muted:       #8888aa
   ===================================================== */

/* =====================================================
   CSS CUSTOM PROPERTIES
   ===================================================== */
:root {
	/* Brand Colors */
	--clr-navy:        #0A2A66;
	--clr-blue:        #4A90E2;
	--clr-orange:      #F5A623;
	--clr-gold:        #c8a96e;

	/* Backgrounds */
	--clr-dark:        #0e1624;
	--clr-dark-mid:    #14203a;
	--clr-dark-card:   #1a2a46;
	--clr-white:       #ffffff;
	--clr-off-white:   #f7f6f2;
	--clr-light-gray:  #f0eee8;

	/* Text */
	--clr-text-dark:   #1a1a2e;
	--clr-text-mid:    #4a4a6a;
	--clr-text-muted:  #8888aa;

	/* Typography */
	--font-display:    'Cormorant Garamond', Georgia, serif;
	--font-heading:    'Bebas Neue', Impact, sans-serif;
	--font-body:       'Montserrat', 'Helvetica Neue', Arial, sans-serif;

	/* Spacing */
	--section-pad:     6rem 5%;
	--section-pad-sm:  4rem 5%;

	/* Borders */
	--border-light:    rgba(0, 0, 0, 0.08);
	--border-dark:     rgba(255, 255, 255, 0.1);

	/* Shadows */
	--shadow-sm:       0 2px 12px rgba(0, 0, 0, 0.06);
	--shadow-md:       0 8px 32px rgba(0, 0, 0, 0.10);
	--shadow-lg:       0 20px 60px rgba(0, 0, 0, 0.14);

	/* Max width */
	--max-width:       1300px;
}

/* =====================================================
   RESET & BASE
   ===================================================== */
*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-body);
	font-weight: 400;
	color: var(--clr-text-dark);
	background-color: var(--clr-white);
	line-height: 1.7;
	overflow-x: hidden;
}

img, video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--clr-blue);
	text-decoration: none;
	transition: color 0.25s ease;
}

a:hover { color: var(--clr-orange); }

ul, ol { list-style: none; }

input, button, select, textarea {
	font-family: var(--font-body);
	font-size: inherit;
}

h1, h2, h3, h4, h5, h6 {
	line-height: 1.1;
	font-weight: 400;
}

/* =====================================================
   SCROLLBAR
   ===================================================== */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: var(--clr-off-white); }
::-webkit-scrollbar-thumb { background: var(--clr-orange); border-radius: 2px; }

::selection { background: rgba(245, 166, 35, 0.25); }

/* =====================================================
   TYPOGRAPHY SCALE
   ===================================================== */
.display-xl {
	font-family: var(--font-display);
	font-size: clamp(3rem, 8vw, 7rem);
	font-weight: 300;
	line-height: 1.02;
	letter-spacing: -0.01em;
}

.display-lg {
	font-family: var(--font-display);
	font-size: clamp(2.5rem, 6vw, 5.5rem);
	font-weight: 300;
	line-height: 1.06;
}

.display-md {
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 3.5vw, 3.2rem);
	font-weight: 300;
	line-height: 1.1;
}

.heading-xl  { font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2.5rem); letter-spacing: 0.08em; }
.heading-lg  { font-family: var(--font-heading); font-size: 1.5rem; letter-spacing: 0.08em; }
.heading-md  { font-family: var(--font-heading); font-size: 1.1rem; letter-spacing: 0.07em; }

.body-lg  { font-size: 1.05rem; line-height: 1.85; }
.body-md  { font-size: 0.9rem;  line-height: 1.85; }
.body-sm  { font-size: 0.78rem; line-height: 1.8; }

.text-muted { color: var(--clr-text-mid); }
.text-orange { color: var(--clr-orange); }
.text-blue   { color: var(--clr-blue); }
.text-gold   { color: var(--clr-gold); }
.text-white  { color: var(--clr-white); }

/* Italic accent — used in display headlines */
.accent-italic { font-style: italic; color: var(--clr-orange); }

/* =====================================================
   LAYOUT HELPERS
   ===================================================== */
.container {
	max-width: var(--max-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 5%;
	padding-right: 5%;
}

.container-narrow {
	max-width: 820px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 5%;
	padding-right: 5%;
}

.section-pad    { padding: var(--section-pad); }
.section-pad-sm { padding: var(--section-pad-sm); }

/* Section color variants */
.bg-dark      { background-color: var(--clr-dark); color: var(--clr-white); }
.bg-dark-mid  { background-color: var(--clr-dark-mid); color: var(--clr-white); }
.bg-dark-card { background-color: var(--clr-dark-card); color: var(--clr-white); }
.bg-navy      { background-color: var(--clr-navy); color: var(--clr-white); }
.bg-white     { background-color: var(--clr-white); color: var(--clr-text-dark); }
.bg-off-white { background-color: var(--clr-off-white); color: var(--clr-text-dark); }
.bg-light-gray{ background-color: var(--clr-light-gray); color: var(--clr-text-dark); }

/* Grid helpers */
.grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.grid-2-auto { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }

/* =====================================================
   SECTION EYEBROW
   ===================================================== */
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 0.9rem;
}

.eyebrow__line {
	width: 28px;
	height: 1px;
	background: var(--clr-orange);
	flex-shrink: 0;
}

.eyebrow__text {
	font-size: 0.58rem;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--clr-orange);
	font-weight: 600;
}

/* =====================================================
   BUTTONS
   ===================================================== */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.8rem 1.8rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	border-radius: 2px;
	border: none;
	cursor: pointer;
	transition: all 0.25s ease;
	text-decoration: none;
	line-height: 1;
}

.btn-primary   { background: var(--clr-orange); color: #000; }
.btn-primary:hover { background: #ffb93a; color: #000; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(245,166,35,0.3); }

.btn-secondary { background: var(--clr-navy); color: #fff; }
.btn-secondary:hover { background: #0d3580; color: #fff; transform: translateY(-2px); }

.btn-outline-dark  { background: transparent; color: var(--clr-text-dark); border: 1.5px solid rgba(0,0,0,0.2); }
.btn-outline-dark:hover { border-color: var(--clr-navy); color: var(--clr-navy); }

.btn-outline-white { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.3); }
.btn-outline-white:hover { border-color: #fff; color: #fff; }

.btn-gold { background: var(--clr-gold); color: #000; }
.btn-gold:hover { background: #dbbf7a; color: #000; transform: translateY(-2px); }

.btn-group { display: flex; gap: 1rem; flex-wrap: wrap; }

/* =====================================================
   CARDS
   ===================================================== */
.card {
	background: var(--clr-white);
	border: 1px solid var(--border-light);
	border-radius: 4px;
	padding: 2rem;
	transition: all 0.3s ease;
}

.card:hover {
	border-color: rgba(74, 144, 226, 0.25);
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.card--dark {
	background: var(--clr-dark-card);
	border: 1px solid var(--border-dark);
}

.card__icon {
	width: 48px;
	height: 48px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	margin-bottom: 1.2rem;
}

.card__icon--blue   { background: rgba(74, 144, 226, 0.12); }
.card__icon--orange { background: rgba(245, 166, 35, 0.12); }
.card__icon--gold   { background: rgba(200, 169, 110, 0.12); }
.card__icon--navy   { background: rgba(10, 42, 102, 0.1); }
.card__icon--green  { background: rgba(110, 203, 160, 0.12); }

.card__title {
	font-family: var(--font-heading);
	font-size: 1.05rem;
	letter-spacing: 0.07em;
	color: var(--clr-text-dark);
	margin-bottom: 0.5rem;
}

.card--dark .card__title { color: var(--clr-white); }

.card__desc {
	font-size: 0.78rem;
	color: var(--clr-text-mid);
	line-height: 1.8;
	font-weight: 300;
}

.card--dark .card__desc { color: rgba(255, 255, 255, 0.55); }

.card__link {
	font-size: 0.62rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clr-blue);
	font-weight: 600;
	margin-top: 1rem;
	display: inline-block;
	transition: color 0.2s;
}

.card:hover .card__link { color: var(--clr-orange); }

/* =====================================================
   FORM ELEMENTS
   ===================================================== */
.form-group {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-bottom: 1rem;
}

.form-label {
	font-size: 0.58rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
	font-weight: 500;
}

.form-label--dark { color: var(--clr-text-mid); }

.form-input,
.form-select,
.form-textarea {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 2px;
	padding: 0.75rem 0.9rem;
	color: var(--clr-white);
	font-size: 0.83rem;
	outline: none;
	transition: border-color 0.25s;
	width: 100%;
}

.form-input--light,
.form-select--light,
.form-textarea--light {
	background: var(--clr-white);
	border-color: var(--border-light);
	color: var(--clr-text-dark);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
	border-color: rgba(74, 144, 226, 0.5);
}

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

/* =====================================================
   NAVIGATION
   ===================================================== */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 800;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.2rem clamp(1.5rem, 5%, 4rem);
	transition: all 0.35s ease;
}

.site-header.is-scrolled,
.site-header.header--light {
	background: rgba(255, 255, 255, 0.97);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--border-light);
	box-shadow: var(--shadow-sm);
	padding: 0.8rem clamp(1.5rem, 5%, 4rem);
}

.site-header.header--dark {
	background: rgba(14, 22, 36, 0.96);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--border-dark);
}

.site-logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-decoration: none;
}

.site-logo__img {
	width: 42px;
	height: 42px;
	object-fit: contain;
	display: block;
	flex-shrink: 0;
}

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

.site-logo__wordmark { line-height: 1; }
.site-logo__name     { font-family: var(--font-heading); font-size: 1.2rem; letter-spacing: 0.1em; }
.site-logo__tagline  { font-size: 0.5rem; letter-spacing: 0.28em; color: var(--clr-orange); text-transform: uppercase; margin-top: 1px; display: block; }

.header--dark  .site-logo__name { color: var(--clr-white); }
.header--light .site-logo__name { color: var(--clr-text-dark); }

/* Primary Nav */
.primary-nav { display: flex; align-items: center; gap: 2rem; }
.primary-nav__list { display: flex; align-items: center; gap: 1.8rem; list-style: none; }

.primary-nav__link {
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	transition: color 0.25s;
	position: relative;
	padding-bottom: 3px;
	text-decoration: none;
}

.primary-nav__link::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--clr-orange);
	transition: width 0.3s;
}

.primary-nav__link:hover::after,
.primary-nav__link.current-menu-item::after { width: 100%; }

.header--dark  .primary-nav__link { color: rgba(255, 255, 255, 0.75); }
.header--dark  .primary-nav__link:hover { color: var(--clr-white); }
.header--light .primary-nav__link { color: var(--clr-text-mid); }
.header--light .primary-nav__link:hover { color: var(--clr-text-dark); }

/* Mobile toggle */
.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.nav-toggle__bar { display: block; width: 22px; height: 1.5px; border-radius: 1px; transition: all 0.3s; }
.header--dark  .nav-toggle__bar { background: var(--clr-white); }
.header--light .nav-toggle__bar { background: var(--clr-text-dark); }

/* Mobile menu */
.mobile-nav {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 799;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	background: rgba(14, 22, 36, 0.98);
	backdrop-filter: blur(20px);
}

.mobile-nav.is-open { display: flex; }
.mobile-nav__close  {
	position: absolute;
	top: 1.5rem;
	right: 5%;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: var(--clr-white);
	padding: 0.45rem 1rem;
	font-size: 0.65rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 2px;
	font-family: var(--font-body);
}

.mobile-nav__link {
	font-family: var(--font-heading);
	font-size: 2rem;
	letter-spacing: 0.1em;
	color: var(--clr-white);
	text-decoration: none;
	transition: color 0.3s;
}
.mobile-nav__link:hover { color: var(--clr-orange); }

/* =====================================================
   HERO SECTION
   ===================================================== */
.hero {
	position: relative;
	min-height: 90vh;
	display: flex;
	align-items: center;
	background: var(--clr-dark);
	overflow: hidden;
}

.hero__bg-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
	pointer-events: none;
	animation: orbFloat 9s ease-in-out infinite;
}

.hero__bg-orb--1 {
	width: 700px; height: 700px;
	background: radial-gradient(circle, rgba(10,42,102,0.55) 0%, transparent 70%);
	top: -200px; right: -150px;
}

.hero__bg-orb--2 {
	width: 400px; height: 400px;
	background: radial-gradient(circle, rgba(245,166,35,0.07) 0%, transparent 70%);
	bottom: 50px; left: 5%;
	animation-delay: -4s;
	animation-direction: reverse;
}

.hero__grid-lines {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(74,144,226,0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(74,144,226,0.04) 1px, transparent 1px);
	background-size: 70px 70px;
	mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 40%, transparent 100%);
}

.hero__inner {
	position: relative;
	z-index: 2;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 5%;
	padding-top: 8rem;
}

.hero__eyebrow { display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 1.4rem; }
.hero__eyebrow-dash { width: 36px; height: 1px; background: var(--clr-orange); }
.hero__eyebrow-text { font-size: 0.6rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--clr-orange); font-weight: 600; }

.hero__title { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 7rem); font-weight: 300; line-height: 1.02; color: var(--clr-white); max-width: 880px; }
.hero__title em { color: var(--clr-orange); font-style: italic; }
.hero__subtitle { font-size: 1rem; color: rgba(255,255,255,0.6); line-height: 1.8; max-width: 520px; margin: 0.35rem 0 2.2rem; font-weight: 300; }

.hero__stats { display: flex; gap: 3rem; flex-wrap: wrap; margin-top: 1rem; }
.hero__stat-number { font-family: var(--font-heading); font-size: 2.1rem; letter-spacing: 0.04em; color: var(--clr-white); line-height: 1; }
.hero__stat-number span { color: var(--clr-orange); }
.hero__stat-label { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-top: 2px; }

.hero__scroll-indicator {
	position: absolute;
	bottom: 2.5rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	cursor: pointer;
}

.hero__scroll-text { font-size: 0.52rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.35); }
.hero__scroll-line  { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--clr-orange), transparent); animation: scrollPulse 2s ease-in-out infinite; }

/* =====================================================
   PAGE HERO (inner pages)
   ===================================================== */
.page-hero {
	padding: 9rem 5% 5rem;
	background: var(--clr-dark);
	position: relative;
	overflow: hidden;
	min-height: 560px;
	display: flex;
	align-items: center;
}

.page-hero__orb {
	position: absolute;
	width: 500px; height: 500px;
	border-radius: 50%;
	filter: blur(80px);
	background: radial-gradient(circle, rgba(10,42,102,0.5) 0%, transparent 70%);
	top: -100px; right: -100px;
	pointer-events: none;
}

.page-hero__inner { position: relative; z-index: 1; max-width: var(--max-width); margin: 0 auto; }

.page-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}
.page-hero__video--embed { overflow: hidden; }
.page-hero__video--embed iframe {
	position: absolute;
	top: 50%; left: 50%;
	width: 100%; height: 100%;
	min-width: 177.78vh;  /* 16:9 cover-fill trick */
	min-height: 56.25vw;
	transform: translate(-50%, -50%);
	pointer-events: none;
	border: 0;
}

/* =====================================================
   HERO SLIDESHOW — mixed photo/video rotation
   ===================================================== */
.hero-slideshow {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.hero-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-slide__media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.hero-slide__media--embed { position: relative; overflow: hidden; }
.hero-slide__media--embed iframe {
	position: absolute;
	top: 50%; left: 50%;
	width: 100%; height: 100%;
	min-width: 177.78vh;
	min-height: 56.25vw;
	transform: translate(-50%, -50%);
	pointer-events: none;
	border: 0;
}
.hero-slideshow__nav {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}
.hero-slideshow__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px; height: 46px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.25);
	color: #fff;
	cursor: pointer;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
	pointer-events: auto;
}
.hero-slideshow__arrow:hover { background: var(--clr-gold, #c8a96e); color: #1a1030; }
.hero-slideshow__prev { left: 1.25rem; }
.hero-slideshow__next { right: 1.25rem; }
.hero-slideshow__dots {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 0.5rem;
	pointer-events: auto;
}
.hero-slideshow__dot {
	width: 9px; height: 9px;
	border-radius: 50%;
	background: rgba(255,255,255,0.35);
	border: none;
	cursor: pointer;
	padding: 0;
	transition: background 0.2s, transform 0.2s;
}
.hero-slideshow__dot:hover { background: rgba(255,255,255,0.6); }
.hero-slideshow__dot.is-active { background: var(--clr-gold, #c8a96e); transform: scale(1.25); }
@media (max-width: 700px) {
	.hero-slideshow__arrow { width: 36px; height: 36px; font-size: 0.8rem; }
	.hero-slideshow__prev { left: 0.6rem; }
	.hero-slideshow__next { right: 0.6rem; }
}

/* =====================================================
   SUCCESS STORIES — Real Estate carousel
   ===================================================== */
.story-slide { display: none; }
.story-slide.is-active { display: block; }
.story-nav { display: flex; align-items: center; gap: .75rem; }
.story-nav__arrow {
	width: 38px; height: 38px; border-radius: 50%;
	background: rgba(200,169,110,.12); border: 1px solid rgba(200,169,110,.35);
	color: var(--clr-gold); cursor: pointer; font-size: .85rem;
	display: flex; align-items: center; justify-content: center;
	transition: background .2s, color .2s;
}
.story-nav__arrow:hover { background: var(--clr-gold); color: #1a1030; }
.story-nav__count { font-size: .75rem; color: var(--clr-text-muted); letter-spacing: .05em; min-width: 40px; text-align: center; }

/* =====================================================
   PHOTO STRIP — half-hero-height image band, no text
   ===================================================== */
.photo-strip {
	display: flex;
	height: clamp(150px, 20vw, 230px);
	background: #000;
	border-top: 3px solid var(--clr-gold, #c8a96e);
	border-bottom: 3px solid var(--clr-gold, #c8a96e);
	overflow: hidden;
}
.photo-strip__item {
	flex: 1 1 0;
	height: 100%;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}
.photo-strip__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 1px solid rgba(200,169,110,0.35);
	box-sizing: border-box;
	transition: transform 0.35s ease;
}
.photo-strip__item:hover img { transform: scale(1.04); }
.photo-strip__play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 44px; height: 44px;
	border-radius: 50%;
	background: rgba(0,0,0,0.55);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	pointer-events: none;
	transition: background 0.25s ease;
}
.photo-strip__item:hover .photo-strip__play { background: var(--clr-gold, #c8a96e); color: #1a1030; }

/* =====================================================
   STRIP POPUP — medium-size click-to-view, distinct from
   the full-screen site lightbox used elsewhere
   ===================================================== */
.strip-popup {
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: none;
	align-items: center;
	justify-content: center;
	background: rgba(10,10,10,0.82);
	padding: 2rem;
}
.strip-popup.is-open { display: flex; }
.strip-popup__box {
	position: relative;
	width: 100%;
	max-width: 680px;
	max-height: 82vh;
	background: #0e1624;
	border: 1px solid rgba(200,169,110,0.35);
	box-shadow: 0 20px 60px rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.strip-popup__box img { width: 100%; height: auto; max-height: 82vh; object-fit: contain; display: block; }
.strip-popup__box .strip-popup__embed { position: relative; width: 100%; padding-top: 56.25%; }
.strip-popup__box .strip-popup__embed iframe,
.strip-popup__box .strip-popup__embed video { position: absolute; inset: 0; width: 100%; height: 100%; }
.strip-popup__close {
	position: absolute;
	top: 0.6rem; right: 0.6rem;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: rgba(0,0,0,0.55);
	color: #fff;
	border: none;
	cursor: pointer;
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.strip-popup__close:hover { background: var(--clr-gold, #c8a96e); color: #1a1030; }

.strip-popup__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9991;
	width: 46px; height: 46px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.25);
	color: #fff;
	cursor: pointer;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s, transform 0.2s;
}
.strip-popup__nav:hover { background: var(--clr-gold, #c8a96e); color: #1a1030; }
.strip-popup__prev { left: 1rem; }
.strip-popup__next { right: 1rem; }
@media (max-width: 700px) {
	.strip-popup__nav { width: 38px; height: 38px; font-size: 0.85rem; }
	.strip-popup__prev { left: 0.4rem; }
	.strip-popup__next { right: 0.4rem; }
}
@media (max-width: 700px) {
	.photo-strip { height: clamp(90px, 26vw, 140px); }
}

/* =====================================================
   SHOWCASE FILMSTRIP — horizontal scroll, no forced count
   ===================================================== */
.showcase-filmstrip {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	background: #000;
	padding: 4px 0;
	-webkit-overflow-scrolling: touch;
}
.showcase-filmstrip::-webkit-scrollbar { height: 6px; }
.showcase-filmstrip::-webkit-scrollbar-thumb { background: rgba(200,169,110,0.4); border-radius: 3px; }
.showcase-filmstrip__item {
	flex: 0 0 auto;
	width: clamp(140px, 18vw, 220px);
	height: clamp(180px, 22vw, 280px);
	scroll-snap-align: start;
	position: relative;
	cursor: pointer;
	overflow: hidden;
}
.showcase-filmstrip__item img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}
.showcase-filmstrip__item:hover img { transform: scale(1.05); }

/* =====================================================
   SHOWCASE GRID — responsive multi-row gallery
   ===================================================== */
.showcase-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75rem;
}
.showcase-grid__item {
	position: relative;
	cursor: pointer;
	overflow: hidden;
	border-radius: 6px;
	aspect-ratio: 3/4;
}
.showcase-grid__item img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease;
}
.showcase-grid__item:hover img { transform: scale(1.05); }
@media (max-width: 900px) {
	.showcase-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.showcase-grid { grid-template-columns: repeat(2, 1fr); }
}

.page-hero__breadcrumb {
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.35);
	margin-bottom: 1.2rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.page-hero__breadcrumb a { color: rgba(255,255,255,0.35); }
.page-hero__breadcrumb .sep { color: var(--clr-orange); }

.page-hero__title { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 5.5rem); font-weight: 300; color: var(--clr-white); line-height: 1.06; }
.page-hero__title em { font-style: italic; color: var(--clr-orange); }
.page-hero__subtitle { font-size: 0.95rem; color: rgba(255,255,255,0.55); line-height: 1.85; max-width: 550px; margin: 0.8rem 0 2rem; font-weight: 300; }

/* =====================================================
   MARQUEE / TICKER
   ===================================================== */
.marquee-bar { background: var(--clr-navy); padding: 1rem 0; overflow: hidden; }
.marquee-track { display: flex; animation: marqueeScroll 28s linear infinite; white-space: nowrap; }
.marquee-item { display: inline-flex; align-items: center; gap: 1.8rem; padding: 0 1.8rem; font-family: var(--font-heading); font-size: 0.78rem; letter-spacing: 0.22em; color: rgba(255,255,255,0.55); }
.marquee-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--clr-orange); flex-shrink: 0; }

/* =====================================================
   DIVISION CARDS (home)
   ===================================================== */
.divisions-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5px;
	background: rgba(74,144,226,0.07);
	border: 1px solid rgba(74,144,226,0.07);
}

.division-card {
	background: var(--clr-dark-card);
	padding: 3rem;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transition: background 0.3s ease;
	text-decoration: none;
	display: block;
}

.division-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
}

.division-card:nth-child(1)::before { background: var(--clr-blue); }
.division-card:nth-child(2)::before { background: var(--clr-orange); }
.division-card:nth-child(3)::before { background: var(--clr-gold); }
.division-card:nth-child(4)::before { background: #6ecba0; }

.division-card:hover::before { transform: scaleX(1); }
.division-card:hover { background: #1f3055; }

.division-card__number {
	font-family: var(--font-heading);
	font-size: 4rem;
	color: rgba(255,255,255,0.03);
	position: absolute;
	top: 1rem; right: 1.5rem;
	line-height: 1;
	pointer-events: none;
}

.division-card__icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; margin-bottom: 1.4rem; }
.division-card__title { font-family: var(--font-heading); font-size: 1.35rem; letter-spacing: 0.08em; margin-bottom: 0.65rem; color: var(--clr-white); }
.division-card__desc  { font-size: 0.8rem; color: rgba(255,255,255,0.55); line-height: 1.85; margin-bottom: 1.3rem; font-weight: 300; }

.division-card__tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 1.3rem; }
.division-card__tag  { font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.28rem 0.65rem; border-radius: 2px; border: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); transition: all 0.25s; }
.division-card:hover .division-card__tag { border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.75); }

.division-card__cta { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--clr-orange); font-weight: 600; display: inline-flex; align-items: center; gap: 0.4rem; transition: gap 0.25s; }
.division-card:hover .division-card__cta { gap: 0.7rem; }

/* =====================================================
   CHECKLIST
   ===================================================== */
.check-list { display: flex; flex-direction: column; gap: 0.7rem; margin: 1.4rem 0; }
.check-item { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.82rem; line-height: 1.6; }
.check-item__mark { color: var(--clr-blue); font-size: 0.7rem; flex-shrink: 0; margin-top: 0.15rem; }

/* =====================================================
   PROCESS STEPS
   ===================================================== */
.process-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem;
	position: relative;
}

.process-grid::before {
	content: '';
	position: absolute;
	top: 26px; left: 10%; width: 80%; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(74,144,226,0.25), rgba(245,166,35,0.25), transparent);
}

.process-step { text-align: center; }

.process-step__number {
	width: 52px; height: 52px;
	border-radius: 50%;
	border: 1px solid rgba(74,144,226,0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1.3rem;
	font-family: var(--font-heading);
	font-size: 1.2rem;
	color: var(--clr-blue);
	background: var(--clr-white);
	transition: all 0.35s ease;
}

.process-step:hover .process-step__number {
	background: var(--clr-orange);
	border-color: var(--clr-orange);
	color: #000;
	transform: scale(1.1);
}

.process-step__title { font-family: var(--font-heading); font-size: 0.95rem; letter-spacing: 0.09em; margin-bottom: 0.6rem; color: var(--clr-text-dark); }
.process-step__desc  { font-size: 0.75rem; color: var(--clr-text-mid); line-height: 1.8; font-weight: 300; }

/* =====================================================
   TESTIMONIALS
   ===================================================== */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.testimonial-card {
	background: var(--clr-white);
	border: 1px solid var(--border-light);
	border-radius: 4px;
	padding: 2.2rem;
	transition: box-shadow 0.3s ease;
}
.testimonial-card:hover { box-shadow: var(--shadow-md); }

.testimonial-card__stars { color: var(--clr-orange); font-size: 0.75rem; margin-bottom: 0.75rem; }
.testimonial-card__quote { font-size: 2.5rem; color: var(--clr-orange); opacity: 0.35; font-family: var(--font-display); line-height: 1; margin-bottom: 0.75rem; }
.testimonial-card__text  { font-family: var(--font-display); font-size: 0.98rem; font-style: italic; color: var(--clr-text-dark); line-height: 1.75; margin-bottom: 1.3rem; }
.testimonial-card__author { display: flex; align-items: center; gap: 0.65rem; }
.testimonial-card__avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--clr-navy), var(--clr-blue)); flex-shrink: 0; font-size: 0.9rem; }
.testimonial-card__name   { font-size: 0.78rem; font-weight: 600; color: var(--clr-text-dark); }
.testimonial-card__role   { font-size: 0.62rem; color: var(--clr-orange); letter-spacing: 0.07em; }

/* =====================================================
   CTA BAND
   ===================================================== */
.cta-band {
	background: linear-gradient(135deg, var(--clr-navy) 0%, #0a2050 50%, #141e38 100%);
	padding: 5.5rem 5%;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.cta-band::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 700px; height: 350px;
	background: radial-gradient(ellipse, rgba(245,166,35,0.07) 0%, transparent 70%);
	pointer-events: none;
}

.cta-band__inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
.cta-band__title { font-family: var(--font-display); font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 300; color: var(--clr-white); margin-bottom: 0.8rem; }
.cta-band__title em { font-style: italic; color: var(--clr-orange); }
.cta-band__desc  { font-size: 0.88rem; color: rgba(255,255,255,0.6); line-height: 1.8; margin-bottom: 2.2rem; font-weight: 300; }

/* =====================================================
   TRUST LOGOS
   ===================================================== */
.trust-logos { display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.trust-logo { font-family: var(--font-heading); font-size: 1rem; letter-spacing: 0.1em; padding: 0.45rem 1rem; border: 1px solid var(--border-light); border-radius: 2px; color: var(--clr-text-muted); transition: all 0.25s; }
.trust-logo:hover { border-color: rgba(74,144,226,0.3); color: var(--clr-text-mid); }

/* =====================================================
   POPUP / MODAL
   ===================================================== */
.popup-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 1200;
	background: rgba(10, 16, 28, 0.75);
	backdrop-filter: blur(8px);
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.popup-overlay.is-open { display: flex; }

.popup-box {
	background: var(--clr-dark-card);
	border: 1px solid rgba(74, 144, 226, 0.2);
	border-radius: 6px;
	width: 100%;
	max-width: 620px;
	position: relative;
	box-shadow: 0 40px 100px rgba(0,0,0,0.5);
	animation: popIn 0.35s ease;
	max-height: 90vh;
	overflow-y: auto;
}

.popup-close {
	position: absolute;
	top: 1rem; right: 1rem;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	color: rgba(255,255,255,0.6);
	width: 32px; height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 0.8rem;
	transition: all 0.25s;
}
.popup-close:hover { background: rgba(255,255,255,0.12); color: var(--clr-white); }

.popup-inner { padding: 2.5rem; }
.popup-eyebrow { font-size: 0.58rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--clr-orange); font-weight: 600; margin-bottom: 0.8rem; }
.popup-title   { font-family: var(--font-display); font-size: 1.9rem; font-weight: 300; color: var(--clr-white); margin-bottom: 0.4rem; }
.popup-sub     { font-size: 0.76rem; color: rgba(255,255,255,0.45); margin-bottom: 1.8rem; line-height: 1.65; }

/* Exit intent banner */
.exit-banner {
	display: none;
	position: fixed;
	bottom: 6rem; left: 1.5rem;
	z-index: 1100;
	width: 280px;
	max-width: calc(100vw - 8rem);
	background: var(--clr-navy);
	border: 1px solid var(--clr-orange);
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.35);
	padding: 1.1rem 1.2rem;
	transform: translateY(16px);
	opacity: 0;
	transition: transform 0.35s ease, opacity 0.35s ease;
}

.exit-banner.is-visible { display: block; transform: translateY(0); opacity: 1; }
.exit-banner__inner { display: flex; flex-direction: column; gap: 0.75rem; }
.exit-banner__text  { font-size: 0.8rem; line-height: 1.5; color: rgba(255,255,255,0.8); padding-right: 1.2rem; }
.exit-banner__text strong { display: block; margin-bottom: 0.2rem; color: var(--clr-white); }
.exit-banner .js-close-exit[aria-label="Close"] {
	position: absolute;
	top: 0.5rem; right: 0.6rem;
}
.exit-banner .btn { width: 100%; text-align: center; }
@media (max-width: 768px) {
	.exit-banner { left: 1rem; right: 1rem; width: auto; max-width: none; bottom: 5.5rem; }
}

/* Floating CTA */
.floating-cta { position: fixed; bottom: 2rem; right: 2rem; z-index: 700; display: flex; flex-direction: column; gap: 0.45rem; align-items: flex-end; }
.floating-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.65rem 1.1rem; border-radius: 40px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; transition: all 0.25s ease; cursor: pointer; border: none; font-family: var(--font-body); white-space: nowrap; text-decoration: none; }
.floating-btn--primary   { background: var(--clr-orange); color: #000; box-shadow: 0 4px 18px rgba(245,166,35,0.3); }
.floating-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(245,166,35,0.4); }
.floating-btn--secondary { background: var(--clr-dark-card); color: var(--clr-white); border: 1px solid rgba(74,144,226,0.3); }
.floating-btn--secondary:hover { border-color: var(--clr-blue); color: var(--clr-white); }

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer { background: #080f1c; border-top: 1px solid rgba(74,144,226,0.1); }

.footer-main {
	padding: 4.5rem 5% 2.5rem;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 3rem;
	max-width: var(--max-width);
	margin: 0 auto;
}

.footer-brand__tagline { font-size: 0.76rem; color: rgba(255,255,255,0.4); line-height: 1.85; margin: 1.3rem 0; max-width: 270px; font-weight: 300; }
.footer-socials { display: flex; gap: 0.6rem; }
.footer-social { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.5); text-decoration: none; transition: all 0.25s; }
.footer-social:hover { border-color: var(--clr-orange); color: var(--clr-orange); }

.footer-col__heading { font-family: var(--font-heading); font-size: 0.82rem; letter-spacing: 0.14em; color: var(--clr-white); margin-bottom: 1.3rem; }
.footer-links { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-links a { font-size: 0.73rem; color: rgba(255,255,255,0.45); text-decoration: none; transition: color 0.25s; }
.footer-links a:hover { color: rgba(255,255,255,0.8); }

.footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.05);
	padding: 1.4rem 5%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.75rem;
	max-width: var(--max-width);
	margin: 0 auto;
}

.footer-copy  { font-size: 0.63rem; color: rgba(255,255,255,0.22); }
.footer-legal { display: flex; gap: 1.4rem; }
.footer-legal a { font-size: 0.63rem; color: rgba(255,255,255,0.22); text-decoration: none; transition: color 0.25s; }
.footer-legal a:hover { color: rgba(255,255,255,0.5); }

/* =====================================================
   BLOG / ARCHIVE
   ===================================================== */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.blog-card { background: var(--clr-white); border: 1px solid var(--border-light); border-radius: 4px; overflow: hidden; transition: all 0.3s ease; }
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.blog-card a { text-decoration: none; color: inherit; }

.blog-card__thumb  { height: 200px; overflow: hidden; }
.blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.blog-card:hover .blog-card__thumb img { transform: scale(1.05); }

.blog-card__body { padding: 1.4rem; }
.blog-card__cat   { font-size: 0.56rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--clr-orange); display: block; margin-bottom: 0.5rem; }
.blog-card__title { font-family: var(--font-display); font-size: 1.08rem; font-weight: 400; line-height: 1.35; color: var(--clr-text-dark); margin-bottom: 0.65rem; }
.blog-card__excerpt { font-size: 0.73rem; color: var(--clr-text-mid); line-height: 1.8; margin-bottom: 0.9rem; }
.blog-card__meta { display: flex; justify-content: space-between; font-size: 0.6rem; color: var(--clr-text-muted); }
.blog-card__read { color: var(--clr-blue); }

/* Single post */
.post-content { max-width: 780px; margin: 0 auto; }
.post-content h2, .post-content h3 { font-family: var(--font-heading); letter-spacing: 0.05em; color: var(--clr-text-dark); margin: 2rem 0 0.75rem; }
.post-content p  { color: var(--clr-text-mid); line-height: 1.9; margin-bottom: 1.2rem; font-size: 0.95rem; }
.post-content ul { color: var(--clr-text-mid); font-size: 0.9rem; line-height: 2; padding-left: 1.5rem; margin-bottom: 1.2rem; list-style: disc; }
.post-content blockquote { border-left: 3px solid var(--clr-orange); padding: 1rem 1.5rem; margin: 2rem 0; background: var(--clr-off-white); }
.post-content blockquote p { font-family: var(--font-display); font-size: 1.2rem; font-style: italic; color: var(--clr-text-dark); margin: 0; }

/* =====================================================
   PORTFOLIO GRID
   ===================================================== */
.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 200px;
	gap: 0.9rem;
}

.portfolio-item { position: relative; overflow: hidden; border-radius: 3px; cursor: pointer; }
.portfolio-item--tall { grid-row: span 2; }
.portfolio-item--wide { grid-column: span 2; }

.portfolio-item__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.portfolio-item:hover .portfolio-item__img { transform: scale(1.06); }

.portfolio-item__overlay {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.4s ease;
	background: linear-gradient(to top, rgba(14,22,36,0.92) 0%, rgba(14,22,36,0.3) 50%, transparent 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.2rem;
}
.portfolio-item:hover .portfolio-item__overlay { opacity: 1; }
.portfolio-item__cat   { font-size: 0.55rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--clr-orange); margin-bottom: 0.35rem; }
.portfolio-item__title { font-family: var(--font-display); font-size: 1.1rem; color: var(--clr-white); }

/* =====================================================
   UTILITY CLASSES
   ===================================================== */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.mt-1 { margin-top: 1rem; } .mt-2 { margin-top: 2rem; } .mt-3 { margin-top: 3rem; }
.mb-1 { margin-bottom: 1rem; } .mb-2 { margin-bottom: 2rem; }
.max-w-md  { max-width: 580px; }
.max-w-lg  { max-width: 780px; }
.mx-auto   { margin-left: auto; margin-right: auto; }
.sr-only   { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.d-flex    { display: flex; } .flex-wrap { flex-wrap: wrap; }
.align-center { align-items: center; } .justify-center { justify-content: center; }
.gap-1 { gap: 1rem; } .gap-sm { gap: 0.5rem; }
.w-full { width: 100%; }

/* =====================================================
   ANIMATIONS
   ===================================================== */
@keyframes orbFloat    { 0%,100%{transform:scale(1) translateY(0);} 50%{transform:scale(1.06) translateY(-25px);} }
@keyframes scrollPulse { 0%,100%{opacity:1;} 50%{opacity:0.3;} }
@keyframes marqueeScroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }
@keyframes popIn       { from{opacity:0;transform:scale(0.93) translateY(20px);} to{opacity:1;transform:none;} }
@keyframes fadeUp      { from{opacity:0;transform:translateY(28px);} to{opacity:1;transform:none;} }
@keyframes blinkDot    { 0%,100%{opacity:1;} 50%{opacity:0.25;} }

/* Scroll-reveal */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.75s ease, transform 0.75s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1050px) {
	.grid-2-auto   { grid-template-columns: 1fr; }
	.grid-4        { grid-template-columns: 1fr 1fr; }
	.divisions-grid{ grid-template-columns: 1fr; }
	.process-grid  { grid-template-columns: 1fr 1fr; }
	.process-grid::before { display: none; }
	.testimonials-grid { grid-template-columns: 1fr 1fr; }
	.footer-main   { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
	:root { --section-pad: 4rem 5%; --section-pad-sm: 2.5rem 5%; }
	.nav-toggle     { display: flex; }
	.primary-nav__list { display: none; }
	.grid-3         { grid-template-columns: 1fr 1fr; }
	.grid-2         { grid-template-columns: 1fr; }
	.testimonials-grid { grid-template-columns: 1fr; }
	.blog-grid      { grid-template-columns: 1fr 1fr; }
	.portfolio-grid { grid-template-columns: 1fr 1fr; }
	.portfolio-item--wide { grid-column: span 1; }
	.portfolio-item--tall { grid-row: span 1; }
	.hero__stats    { gap: 1.5rem; }
	.floating-cta   { bottom: 1rem; right: 1rem; }
	.footer-main    { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
	.grid-3, .grid-2 { grid-template-columns: 1fr; }
	.blog-grid       { grid-template-columns: 1fr; }
	.portfolio-grid  { grid-template-columns: 1fr; }
}

/* =====================================================
   WORDPRESS CORE ALIGNMENT CLASSES
   ===================================================== */
.alignleft  { float: left; margin: 0 1.5rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.5rem; }
.aligncenter { display: block; margin: 0 auto 1.5rem; }
.alignwide  { margin-left: calc(-5vw); margin-right: calc(-5vw); max-width: none; }
.alignfull  { margin-left: calc(-5%); margin-right: calc(-5%); max-width: none; }

.wp-block-image img { border-radius: 4px; }

/* =====================================================
   WOOCOMMERCE (if needed later)
   ===================================================== */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info { padding: 1rem 1.5rem; border-radius: 4px; margin-bottom: 1.5rem; font-size: 0.85rem; }
.woocommerce-message { background: rgba(16,185,129,0.1); border-left: 3px solid #10b981; color: var(--clr-text-dark); }
.woocommerce-error   { background: rgba(239,68,68,0.1);  border-left: 3px solid #ef4444; color: var(--clr-text-dark); }

/* =====================================================
   HERO VIDEO BACKGROUND + LOGO LOCKUP
   ===================================================== */
.hero__video-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

.hero__photo-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	z-index: 0;
}

.hero__video-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(5, 10, 20, 0.72) 0%,
		rgba(10, 42, 102, 0.45) 50%,
		rgba(5, 10, 20, 0.65) 100%
	);
	z-index: 1;
}

.hero__inner { z-index: 2; }

.hero__logo-lockup {
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.hero__logo-lockup svg { filter: drop-shadow(0 0 12px rgba(74,144,226,0.3)); }
.hero__logo-lockup .custom-logo { height: 52px; width: auto; }

/* =====================================================
   REEL SHOWCASE — Mixed Horizontal + Vertical
   ===================================================== */
.reel-showcase {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 1rem;
	grid-template-rows: auto auto;
}

/* Horizontal featured (top-left) */
.reel-item--horizontal.reel-item--featured {
	grid-column: 1;
	grid-row: 1;
}

/* Verticals column */
.reel-verticals {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Full-width horizontal reel (bottom) */
.reel-item--horizontal.reel-item--wide {
	grid-column: 1 / -1;
	grid-row: 2;
}

.reel-item { position: relative; border-radius: 4px; overflow: hidden; cursor: pointer; }

/* Aspect ratios */
.reel-item--horizontal.reel-item--featured .reel-inner { aspect-ratio: 16 / 9; }
.reel-item--vertical .reel-inner                       { aspect-ratio: 9 / 16; }
.reel-item--horizontal.reel-item--wide .reel-inner     { aspect-ratio: 21 / 6; }

.reel-inner {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--clr-dark-card);
}

/* Video element */
.reel-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.reel-item:hover .reel-video { transform: scale(1.03); }

/* Placeholder (when no video uploaded) */
.reel-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	transition: transform 0.6s ease;
}
.reel-item:hover .reel-placeholder { transform: scale(1.03); }
.reel-placeholder__icon  { font-size: 2.5rem; opacity: 0.5; }
.reel-placeholder__label { font-size: 0.72rem; color: rgba(255,255,255,0.4); letter-spacing: 0.12em; text-transform: uppercase; text-align: center; padding: 0 1rem; }

/* Overlay (visible on hover) */
.reel-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(5,8,16,0.9) 0%, rgba(5,8,16,0.2) 50%, transparent 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	padding: 1.2rem;
	opacity: 0;
	transition: opacity 0.35s ease;
	z-index: 2;
}
.reel-item:hover .reel-overlay { opacity: 1; }
.reel-item--wide:hover .reel-overlay { opacity: 1; } /* always visible hint for wide */

.reel-overlay__cat {
	font-size: 0.58rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--clr-orange);
	margin-bottom: 0.3rem;
}
.reel-overlay__title {
	font-family: var(--font-display);
	font-size: 1rem;
	color: var(--clr-white);
	text-align: center;
	margin-bottom: 0.75rem;
}
.reel-item--wide .reel-overlay__title { font-size: 1.4rem; }

/* Play button */
.reel-play-btn {
	width: 52px; height: 52px;
	border-radius: 50%;
	background: rgba(245, 166, 35, 0.9);
	border: none;
	color: #000;
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.25s ease;
	position: relative;
}
.reel-play-btn::before {
	content: '';
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 1px solid rgba(245,166,35,0.35);
	animation: reel-pulse 2s ease-in-out infinite;
}
@keyframes reel-pulse {
	0%   { transform: scale(1); opacity: 0.7; }
	100% { transform: scale(1.5); opacity: 0; }
}
.reel-play-btn:hover { background: var(--clr-orange); transform: scale(1.12); }
.reel-play-btn--large { width: 68px; height: 68px; font-size: 1.4rem; }

/* Format badge */
.reel-badge {
	position: absolute;
	top: 0.75rem; left: 0.75rem;
	font-size: 0.55rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 0.25rem 0.65rem;
	border-radius: 2px;
	z-index: 3;
	font-weight: 600;
}
.reel-badge--horizontal { background: rgba(74,144,226,0.85); color: #fff; }
.reel-badge--vertical   { background: rgba(245,166,35,0.85); color: #000; }
.reel-badge--featured   { background: rgba(245,166,35,0.92) !important; color: #000 !important; }

/* Reel grid responsive */
@media (max-width: 900px) {
	.reel-showcase {
		grid-template-columns: 1fr 1fr;
	}
	.reel-item--horizontal.reel-item--featured { grid-column: 1 / -1; }
	.reel-verticals { grid-column: 1 / -1; flex-direction: row; }
	.reel-item--vertical .reel-inner { aspect-ratio: 9/12; }
	.reel-item--horizontal.reel-item--wide { grid-column: 1 / -1; }
	.reel-item--wide .reel-inner { aspect-ratio: 16/6; }
}
@media (max-width: 600px) {
	.reel-showcase { grid-template-columns: 1fr; }
	.reel-verticals { flex-direction: column; }
	.reel-item--vertical .reel-inner { aspect-ratio: 9/16; }
	.reel-item--horizontal.reel-item--wide .reel-inner { aspect-ratio: 16/9; }
}

/* Service area grid responsive */
@media (max-width: 768px) {
	#local-seo [style*="grid-template-columns:repeat(4"] {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	#local-seo [style*="grid-template-columns:1fr 1fr"] {
		grid-template-columns: 1fr !important;
	}
}

/* =====================================================
   HERO OVERLAY FIXES — ensure bg image shows
   ===================================================== */
.hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	background: var(--clr-dark);
	overflow: hidden;
}
.hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(5,10,20,0.68) 0%,
		rgba(10,42,102,0.4) 50%,
		rgba(5,10,20,0.60) 100%
	);
	z-index: 1;
}
.hero__overlay--subtle {
	background: linear-gradient(
		to bottom,
		rgba(5,10,20,0.55) 0%,
		rgba(5,10,20,0.35) 50%,
		rgba(5,10,20,0.7) 100%
	);
}
/* SVG fallback bg */
.hero__svg-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.hero__svg-bg svg {
	width: 100%;
	height: 100%;
	display: block;
}
/* Ensure photo bg is visible */
.hero__photo-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* =====================================================
   DIVISIONS — New lighter section style
   ===================================================== */
.divisions-section {
	position: relative;
	padding: 6rem 5%;
	overflow: hidden;
}
.divisions-bg-pattern {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.divisions-bg-pattern svg {
	width: 100%;
	height: 100%;
	display: block;
}
.divisions-grid-new {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}
.div-card-new {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: 8px;
	padding: 2.2rem;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.35s ease;
	text-decoration: none;
	display: block;
	backdrop-filter: blur(6px);
}
.div-card-new:hover {
	background: rgba(255,255,255,0.09);
	border-color: rgba(255,255,255,0.2);
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.div-card-new__icon-wrap {
	width: 52px;
	height: 52px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.2rem;
}
.div-card-new__icon-wrap--blue   { background: rgba(74,144,226,0.18); color: #4A90E2; }
.div-card-new__icon-wrap--orange { background: rgba(245,166,35,0.18); color: #F5A623; }
.div-card-new__icon-wrap--gold   { background: rgba(200,169,110,0.18); color: #c8a96e; }
.div-card-new__icon-wrap--green  { background: rgba(110,203,160,0.18); color: #6ecba0; }
.div-card-new__title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 400;
	color: #fff;
	margin-bottom: 0.6rem;
	line-height: 1.2;
}
.div-card-new__desc {
	font-size: 0.82rem;
	color: rgba(255,255,255,0.6);
	line-height: 1.85;
	margin-bottom: 1.2rem;
	font-weight: 300;
}
.div-card-new__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 1.2rem;
}
.div-card-new__tags span {
	font-size: 0.58rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 0.28rem 0.7rem;
	border-radius: 2px;
	border: 1px solid rgba(255,255,255,0.15);
	color: rgba(255,255,255,0.6);
	transition: all 0.2s;
}
.div-card-new:hover .div-card-new__tags span {
	border-color: rgba(255,255,255,0.28);
	color: rgba(255,255,255,0.85);
}
.div-card-new__cta {
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--clr-orange);
	font-weight: 600;
}
.div-card-new__accent {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	border-radius: 8px 8px 0 0;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s ease;
}
.div-card-new__accent--blue   { background: var(--clr-blue); }
.div-card-new__accent--orange { background: var(--clr-orange); }
.div-card-new__accent--gold   { background: var(--clr-gold); }
.div-card-new__accent--green  { background: #6ecba0; }
.div-card-new:hover .div-card-new__accent { transform: scaleX(1); }

/* =====================================================
   APPROACH VISUAL
   ===================================================== */
.approach-visual {
	background: var(--clr-off-white);
	border-radius: 12px;
	padding: 1.5rem;
	border: 1px solid var(--border-light);
}

/* =====================================================
   WHAT WE DO — Service cards with images
   ===================================================== */
.services-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.svc-card {
	background: var(--clr-white);
	border: 1px solid var(--border-light);
	border-radius: 8px;
	overflow: hidden;
	transition: all 0.35s ease;
	text-decoration: none;
	display: block;
	box-shadow: var(--shadow-sm);
}
.svc-card:hover {
	border-color: rgba(74,144,226,0.3);
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}
.svc-card--cta { border-color: rgba(10,42,102,0.15); }
.svc-card--cta:hover { border-color: var(--clr-orange); }

.svc-card__visual {
	height: 160px;
	overflow: hidden;
	position: relative;
}
.svc-card__visual svg {
	width: 100%;
	height: 100%;
	display: block;
	transition: transform 0.5s ease;
}
.svc-card:hover .svc-card__visual svg { transform: scale(1.04); }

.svc-card__body { padding: 1.4rem; }
.svc-card__icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 0.75rem;
}
.svc-card__icon--blue   { background: rgba(74,144,226,0.1);  color: var(--clr-blue); }
.svc-card__icon--orange { background: rgba(245,166,35,0.1);  color: var(--clr-orange); }
.svc-card__icon--gold   { background: rgba(200,169,110,0.1); color: var(--clr-gold); }
.svc-card__icon--green  { background: rgba(110,203,160,0.1); color: #6ecba0; }
.svc-card__title {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 400;
	color: var(--clr-text-dark);
	margin-bottom: 0.45rem;
	line-height: 1.25;
}
.svc-card__desc {
	font-size: 0.76rem;
	color: var(--clr-text-mid);
	line-height: 1.8;
	margin-bottom: 0.75rem;
	font-weight: 300;
}
.svc-card__link {
	font-size: 0.64rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clr-blue);
	font-weight: 600;
	transition: color 0.2s;
}
.svc-card:hover .svc-card__link { color: var(--clr-orange); }

/* =====================================================
   REEL SHOWCASE — Fixed vertical reel height
   ===================================================== */
.reel-showcase {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 1rem;
	align-items: start;
}
.reel-item { position: relative; border-radius: 6px; overflow: hidden; cursor: pointer; }
.reel-item--horizontal.reel-item--featured .reel-inner { aspect-ratio: 16/9; }
/* FIXED: vertical reels are small preview thumbnails, NOT full portrait */
.reel-verticals {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.reel-item--vertical .reel-inner {
	aspect-ratio: 9/12;  /* shorter than full 9:16 — preview size */
	max-height: 220px;
}
.reel-inner {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--clr-dark-card);
}
.reel-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.reel-item:hover .reel-video { transform: scale(1.04); }
.reel-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
}
.reel-placeholder__icon  { font-size: 2rem; opacity: 0.45; }
.reel-placeholder__label { font-size: 0.65rem; color: rgba(255,255,255,0.4); letter-spacing: 0.12em; text-transform: uppercase; }
.reel-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(5,8,16,0.88) 0%, transparent 60%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	padding: 1rem;
	opacity: 0;
	transition: opacity 0.3s;
	z-index: 2;
}
.reel-item:hover .reel-overlay { opacity: 1; }
.reel-overlay__cat   { font-size: 0.55rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--clr-orange); margin-bottom: 0.2rem; }
.reel-overlay__title { font-family: var(--font-display); font-size: 0.9rem; color: #fff; margin-bottom: 0.6rem; text-align: center; }
.reel-play-btn {
	width: 44px; height: 44px;
	border-radius: 50%;
	background: rgba(245,166,35,0.9);
	border: none;
	color: #000;
	font-size: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.2s;
}
.reel-play-btn:hover { background: var(--clr-orange); transform: scale(1.1); }
.reel-badge {
	position: absolute;
	top: 0.6rem; left: 0.6rem;
	font-size: 0.52rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.22rem 0.55rem;
	border-radius: 2px;
	z-index: 3;
	font-weight: 600;
}
.reel-badge--horizontal { background: rgba(74,144,226,0.85); color: #fff; }
.reel-badge--vertical   { background: rgba(245,166,35,0.85); color: #000; }

/* =====================================================
   BUILT-IN CHAT WIDGET
   ===================================================== */
#spectrum-chat-widget {
	position: fixed;
	bottom: 1.5rem;
	left: 1.5rem;
	z-index: 850;
	font-family: var(--font-body);
}
.chat-toggle {
	width: 52px; height: 52px;
	border-radius: 50%;
	background: var(--clr-navy);
	border: 2px solid var(--clr-blue);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 20px rgba(10,42,102,0.4);
	transition: all 0.3s;
	position: relative;
}
.chat-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(10,42,102,0.5); }
.chat-toggle svg { width: 22px; height: 22px; }
.chat-unread {
	position: absolute;
	top: -3px; right: -3px;
	width: 16px; height: 16px;
	background: var(--clr-orange);
	border-radius: 50%;
	font-size: 0.55rem;
	font-weight: 700;
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: chatPulse 2s ease-in-out infinite;
}
@keyframes chatPulse { 0%,100%{transform:scale(1);} 50%{transform:scale(1.2);} }
.chat-box {
	display: none;
	position: absolute;
	bottom: 64px; left: 0;
	width: 300px;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,0.2);
	border: 1px solid rgba(0,0,0,0.08);
	animation: chatSlideUp 0.3s ease;
}
.chat-box.open { display: block; }
@keyframes chatSlideUp { from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:none;} }
.chat-box-header {
	background: var(--clr-navy);
	padding: 1rem 1.2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.chat-box-header-info { display: flex; align-items: center; gap: 0.6rem; }
.chat-avatar {
	width: 36px; height: 36px;
	border-radius: 50%;
	background: var(--clr-blue);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9rem;
	flex-shrink: 0;
}
.chat-name  { font-size: 0.82rem; font-weight: 600; color: #fff; }
.chat-status{ font-size: 0.62rem; color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 0.3rem; }
.chat-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; display: inline-block; animation: blinkDot 2s infinite; }
.chat-close { background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.chat-close:hover { color: #fff; }
.chat-messages {
	padding: 1rem;
	height: 200px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	background: #f8f7f4;
}
.chat-msg {
	max-width: 85%;
	padding: 0.6rem 0.9rem;
	border-radius: 12px;
	font-size: 0.78rem;
	line-height: 1.6;
}
.chat-msg--bot {
	background: #fff;
	color: var(--clr-text-dark);
	border: 1px solid var(--border-light);
	align-self: flex-start;
	border-bottom-left-radius: 3px;
}
.chat-msg--user {
	background: var(--clr-navy);
	color: #fff;
	align-self: flex-end;
	border-bottom-right-radius: 3px;
}
.chat-typing {
	display: none;
	align-self: flex-start;
	background: #fff;
	border: 1px solid var(--border-light);
	border-radius: 12px;
	border-bottom-left-radius: 3px;
	padding: 0.5rem 0.9rem;
}
.chat-typing span {
	display: inline-block;
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--clr-text-muted);
	margin: 0 1px;
	animation: typingBounce 1.4s infinite;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce { 0%,60%,100%{transform:translateY(0);} 30%{transform:translateY(-6px);} }
.chat-quick-replies {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0.75rem 1rem;
	background: #f8f7f4;
	border-top: 1px solid var(--border-light);
}
.chat-qr {
	font-size: 0.65rem;
	padding: 0.35rem 0.75rem;
	border-radius: 20px;
	border: 1px solid var(--clr-navy);
	color: var(--clr-navy);
	background: #fff;
	cursor: pointer;
	transition: all 0.2s;
	white-space: nowrap;
}
.chat-qr:hover { background: var(--clr-navy); color: #fff; }
.chat-input-row {
	display: flex;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-top: 1px solid var(--border-light);
	background: #fff;
}
.chat-input {
	flex: 1;
	border: 1px solid var(--border-light);
	border-radius: 20px;
	padding: 0.45rem 0.9rem;
	font-size: 0.78rem;
	outline: none;
	font-family: var(--font-body);
	transition: border-color 0.2s;
}
.chat-input:focus { border-color: var(--clr-blue); }
.chat-send {
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--clr-orange);
	border: none;
	color: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 0.8rem;
	transition: all 0.2s;
	flex-shrink: 0;
}
.chat-send:hover { background: #ffb93a; }
.chat-footer {
	text-align: center;
	padding: 0.5rem;
	font-size: 0.58rem;
	color: var(--clr-text-muted);
	background: #fff;
}

/* =====================================================
   RESPONSIVE FIXES
   ===================================================== */
@media (max-width: 1050px) {
	.divisions-grid-new { grid-template-columns: 1fr; }
	.services-card-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
	.reel-showcase { grid-template-columns: 1fr; }
	.reel-verticals { flex-direction: row; }
	.reel-item--vertical .reel-inner { max-height: 180px; }
	#local-seo [style*="grid-template-columns:repeat(4"] { grid-template-columns: repeat(2, 1fr) !important; }
	#local-seo [style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
	.services-card-grid { grid-template-columns: 1fr; }
	.reel-verticals { flex-direction: column; }
	.reel-item--vertical .reel-inner { max-height: 200px; }
	#spectrum-chat-widget { bottom: 1rem; left: 1rem; }
	.page-hero { min-height: 460px; }
}

/* ============================================================
   HOMEPAGE — FINAL PRODUCTION STYLES
   ============================================================ */

/* ── Hero ── */
.hp-hero {
	position:relative;min-height:100vh;display:flex;
	align-items:center;background:var(--clr-dark);overflow:hidden;
}
.hp-hero__video,.hp-hero__photo {
	position:absolute;inset:0;width:100%;height:100%;
	object-fit:cover;background-size:cover;background-position:center;z-index:0;
}
.hp-hero__photo[data-lightbox-group] { cursor:pointer; }
.hp-hero__play.reel-play {
	position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	width:88px;height:88px;z-index:2;font-size:1.6rem;
	box-shadow:0 0 0 0 rgba(245,166,35,.5);
	animation:heroPlayPulse 2.6s ease-out infinite;
}
.hp-hero__play.reel-play:hover { transform:translate(-50%,-50%) scale(1.1); }
@keyframes heroPlayPulse {
	0%   { box-shadow:0 0 0 0 rgba(245,166,35,.45); }
	70%  { box-shadow:0 0 0 22px rgba(245,166,35,0); }
	100% { box-shadow:0 0 0 0 rgba(245,166,35,0); }
}
.hp-hero__overlay {
	position:absolute;inset:0;z-index:1;pointer-events:none;
	background:linear-gradient(135deg,rgba(5,10,20,.72) 0%,rgba(10,42,102,.42) 55%,rgba(5,10,20,.65) 100%);
}
.hp-hero__grid {
	position:absolute;inset:0;z-index:1;pointer-events:none;
	background-image:linear-gradient(rgba(74,144,226,.04) 1px,transparent 1px),
	linear-gradient(90deg,rgba(74,144,226,.04) 1px,transparent 1px);
	background-size:70px 70px;
	mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 40%,transparent 100%);
}
.hp-hero__inner {position:relative;z-index:2;padding-top:8rem;}
.hp-hero__logo {margin-bottom:1.4rem;display:flex;align-items:center;gap:.75rem;}
.hp-hero__logo .custom-logo {height:48px;width:auto;}
.hp-hero__eyebrow {
	display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.3rem;
	font-size:.6rem;letter-spacing:.35em;text-transform:uppercase;color:var(--clr-orange);font-weight:600;
}
.hp-hero__dash {width:34px;height:1px;background:var(--clr-orange);display:block;}
.hp-hero__h1 {
	font-family:var(--font-display);font-size:clamp(2.8rem,7.5vw,6.5rem);
	font-weight:300;line-height:1.03;color:#fff;max-width:860px;margin-bottom:.5rem;
}
.hp-hero__h1 em {font-style:italic;color:var(--clr-orange);}
.hp-hero__sub {font-size:.98rem;color:rgba(255,255,255,.62);line-height:1.82;max-width:520px;font-weight:300;margin-bottom:2rem;}
.hp-hero__btns {display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:3.5rem;}
.hp-hero__stats {display:flex;gap:3rem;flex-wrap:wrap;}
.hp-stat__n {font-family:var(--font-heading);font-size:2rem;color:#fff;letter-spacing:.04em;display:block;line-height:1;}
.hp-stat__l {font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-top:3px;display:block;}
.hp-hero__scroll {
	position:absolute;bottom:2.5rem;left:50%;transform:translateX(-50%);
	display:flex;flex-direction:column;align-items:center;gap:.4rem;cursor:pointer;z-index:2;
	font-size:.52rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.35);
}
.hp-hero__scroll-line {
	width:1px;height:42px;
	background:linear-gradient(to bottom,var(--clr-orange),transparent);
	animation:scrollPulse 2s ease-in-out infinite;
}

/* ── One Ecosystem intro (white) ── */
.eco-intro {border-bottom:1px solid var(--border-light);}

/* ── Four Divisions (navy blue bg) ── */
.eco-divisions {background:var(--clr-navy);padding:4rem 5%;}
.eco-grid {
	display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;
	max-width:1300px;margin:0 auto;
}
.eco-card {
	background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;
	overflow:hidden;text-decoration:none;display:block;transition:all .35s ease;
}
.eco-card:hover {background:rgba(255,255,255,.11);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.3);}
.eco-card__img {height:180px;background-size:cover;background-position:center;position:relative;overflow:hidden;}
.eco-card__img-overlay {
	position:absolute;inset:0;
	background:linear-gradient(to bottom,rgba(10,42,102,.3) 0%,rgba(10,42,102,.6) 100%);
	transition:opacity .3s;
}
.eco-card:hover .eco-card__img-overlay {opacity:.7;}
.eco-card__body {padding:1.4rem;}
.eco-card__icon {width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;}
.eco-card__icon--blue   {background:rgba(74,144,226,.2); color:var(--clr-blue);}
.eco-card__icon--orange {background:rgba(245,166,35,.2); color:var(--clr-orange);}
.eco-card__icon--gold   {background:rgba(200,169,110,.2);color:var(--clr-gold);}
.eco-card__icon--green  {background:rgba(110,203,160,.2);color:#6ecba0;}
.eco-card__title {font-family:var(--font-display);font-size:1.25rem;font-weight:400;color:#fff;margin-bottom:.5rem;line-height:1.2;}
.eco-card__desc {font-size:.76rem;color:rgba(255,255,255,.58);line-height:1.8;margin-bottom:1rem;font-weight:300;}
.eco-card__tags {display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:1rem;}
.eco-card__tags span {
	font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;
	padding:.25rem .6rem;border-radius:2px;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.55);
}
.eco-card__cta {font-size:.65rem;letter-spacing:.13em;text-transform:uppercase;color:var(--clr-orange);font-weight:600;}

/* ── Our Approach — stock photo layout ── */
.two-col-img {display:grid;grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center;}
.approach-photo {width:100%;border-radius:8px;object-fit:cover;height:400px;display:block;}
.approach-stat-bar {
	display:flex;align-items:center;justify-content:center;gap:0;
	background:var(--clr-navy);border-radius:0 0 8px 8px;padding:1.2rem;
}
.approach-stat {text-align:center;flex:1;}
.approach-stat__n {font-family:var(--font-heading);font-size:1.8rem;color:var(--clr-orange);display:block;line-height:1;}
.approach-stat__l {font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:2px;display:block;}
.approach-stat-div {width:1px;height:36px;background:rgba(255,255,255,.12);}

/* ── What We Do — photo cards ── */
.wwd-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;}
.wwd-card {
	background:var(--clr-white);border:1px solid var(--border-light);border-radius:8px;
	overflow:hidden;display:block;transition:all .3s ease;box-shadow:var(--shadow-sm);
}
.wwd-card:hover {box-shadow:var(--shadow-md);transform:translateY(-4px);border-color:rgba(74,144,226,.25);}
.wwd-card--cta {cursor:pointer;}
.wwd-card--cta:hover {border-color:var(--clr-orange);}
.wwd-card__img {position:relative;height:190px;overflow:hidden;}
.wwd-card__img img {width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease;}
.wwd-card:hover .wwd-card__img img {transform:scale(1.06);}
.wwd-card__tag {
	position:absolute;top:.75rem;left:.75rem;
	font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;
	background:var(--clr-navy);color:#fff;padding:.25rem .7rem;border-radius:2px;
}
.wwd-card__body {padding:1.3rem;}
.wwd-card__title {font-family:var(--font-display);font-size:1.15rem;font-weight:400;color:var(--clr-text-dark);margin-bottom:.45rem;line-height:1.3;}
.wwd-card__desc {font-size:.76rem;color:var(--clr-text-mid);line-height:1.8;margin-bottom:.75rem;font-weight:300;}
.wwd-card__link {font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--clr-blue);font-weight:600;transition:color .2s;}
.wwd-card:hover .wwd-card__link {color:var(--clr-orange);}
.wwd-card__link--cta {color:var(--clr-orange) !important;}

/* ── Reel layout ── */
.reel-layout {display:grid;grid-template-columns:1.6fr 1fr;gap:1rem;align-items:stretch;}
.reel-main {position:relative;border-radius:6px;overflow:hidden;background:var(--clr-dark-card);height:100%;min-height:420px;}
.reel-main__video,.reel-main__poster {
	width:100%;height:100%;display:block;object-fit:contain;
}
.reel-main__overlay {
	position:absolute;inset:0;
	background:linear-gradient(to top,rgba(5,8,16,.85) 0%,transparent 55%);
	display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
	padding:1.5rem;opacity:1;transition:opacity .3s;
	pointer-events:none;
}
.reel-main__cat {font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--clr-orange);margin-bottom:.3rem;}
.reel-main__title {font-family:var(--font-display);font-size:1.1rem;color:#fff;margin-bottom:.8rem;}

.reel-rail {display:flex;flex-direction:column;gap:.5rem;}
.reel-scroll-arrow {
	width:100%;height:26px;border:none;border-radius:4px;
	background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);
	cursor:pointer;display:flex;align-items:center;justify-content:center;
	font-size:.7rem;transition:background .2s,color .2s;flex-shrink:0;
}
.reel-scroll-arrow:hover {background:var(--clr-orange);color:#000;}
.reel-scroll-arrow:disabled {opacity:.25;cursor:default;background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);}
.reel-thumbs {display:flex;flex-direction:column;gap:1rem;max-height:420px;overflow-y:auto;scroll-behavior:smooth;padding-right:.2rem;}
.reel-thumbs::-webkit-scrollbar {width:5px;}
.reel-thumbs::-webkit-scrollbar-thumb {background:rgba(245,166,35,.4);border-radius:3px;}
.reel-thumb {position:relative;border-radius:6px;overflow:hidden;background:var(--clr-dark-card);cursor:pointer;border:2px solid transparent;flex-shrink:0;transition:border-color .2s;}
.reel-thumb.is-active {border-color:var(--clr-orange);}
.reel-thumb__video,.reel-thumb__img {width:100%;display:block;height:130px;object-fit:cover;}
.reel-thumb__overlay {
	position:absolute;inset:0;
	background:linear-gradient(to top,rgba(5,8,16,.8) 0%,transparent 55%);
	display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
	padding:.8rem;opacity:0;transition:opacity .3s;
}
.reel-thumb:hover .reel-thumb__overlay,.reel-thumb.is-active .reel-thumb__overlay {opacity:1;}
.reel-thumb__cat {font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--clr-orange);margin-bottom:.15rem;}
.reel-thumb__title {font-family:var(--font-display);font-size:.9rem;color:#fff;margin-bottom:.5rem;}
.reel-thumb__play {
	position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;
	display:flex;align-items:center;justify-content:center;font-size:.85rem;pointer-events:none;
}
.reel-play {
	position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	width:64px;height:64px;border-radius:50%;background:rgba(245,166,35,.92);
	border:none;color:#000;font-size:1.2rem;display:flex;align-items:center;justify-content:center;
	cursor:pointer;transition:all .25s;z-index:2;
}
.reel-play:hover {background:var(--clr-orange);transform:translate(-50%,-50%) scale(1.1);}
.reel-play--sm {width:36px;height:36px;font-size:.8rem;}
.reel-badge {
	position:absolute;top:.6rem;left:.6rem;font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;
	padding:.22rem .55rem;border-radius:2px;font-weight:600;z-index:2;
}
.reel-badge--h {background:rgba(74,144,226,.85);color:#fff;}
.reel-badge--v {background:rgba(245,166,35,.85);color:#000;}
@media (max-width:900px) {
	.reel-layout {grid-template-columns:1fr;}
	.reel-main {height:auto;min-height:0;}
	.reel-main__video,.reel-main__poster {height:auto;aspect-ratio:16/9;}
	.reel-thumbs {max-height:none;overflow-y:visible;flex-direction:row;overflow-x:auto;}
	.reel-thumb {flex:0 0 160px;}
	.reel-rail {flex-direction:column;}
	.reel-scroll-arrow {display:none;}
}

/* ── Trust logos — white text on navy ── */
.trust-logo--white {
	font-family:var(--font-heading);font-size:.95rem;letter-spacing:.1em;
	padding:.4rem .9rem;border:1px solid rgba(255,255,255,.2);border-radius:2px;
	color:rgba(255,255,255,.55);transition:all .25s;
}
.trust-logo--white:hover {border-color:rgba(255,255,255,.45);color:#fff;}

/* ── Service area grid ── */
.area-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:3rem;}
.area-card {border:1px solid var(--border-light);border-radius:4px;padding:1.1rem;text-align:center;background:var(--clr-white);}
.area-card__icon {font-size:1.4rem;margin-bottom:.4rem;}
.area-card__name {font-size:.73rem;font-weight:600;color:var(--clr-text-dark);margin-bottom:.25rem;}
.area-card__desc {font-size:.62rem;color:var(--clr-text-muted);line-height:1.6;}
.seo-copy-grid {display:grid;grid-template-columns:1fr 1fr;gap:3rem;}

/* ── Responsive ── */
@media(max-width:1100px){
	.eco-grid {grid-template-columns:repeat(2,1fr);}
	.two-col-img {grid-template-columns:1fr;}
	.approach-photo {height:300px;}
}
@media(max-width:900px){
	.wwd-grid {grid-template-columns:1fr 1fr;}
	.reel-layout {grid-template-columns:1fr;}
	.reel-thumbs {flex-direction:row;}
	.reel-thumb__video,.reel-thumb__img {height:110px;}
	.area-grid {grid-template-columns:repeat(2,1fr);}
	.seo-copy-grid {grid-template-columns:1fr;}
}
@media(max-width:600px){
	.eco-grid {grid-template-columns:1fr;}
	.wwd-grid {grid-template-columns:1fr;}
	.reel-thumbs {flex-direction:column;}
	.hp-hero__stats {gap:1.5rem;}
}

/* ── Page hero with background image support ── */
.page-hero {
	background-size: cover !important;
	background-position: center !important;
}
.page-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(5,10,20,.75) 0%, rgba(10,42,102,.45) 60%, rgba(5,10,20,.68) 100%);
	z-index: 1;
}
/* navy bg fallback when no bg image set */
.page-hero:not([style*="background-image"]) {
	background: var(--clr-dark) !important;
}

/* =====================================================
   FINAL FIXES — Page rendering and layout
   ===================================================== */

/* Fix: page templates that set background-image inline */
.page-hero[style*="background-image"] {
	background-size: cover !important;
	background-position: center top !important;
	background-repeat: no-repeat !important;
}
/* Show page-hero with dark overlay when bg image is set inline */
.page-hero[style*="background-image"] > .page-hero__overlay { display:block; }
/* Default fallback bg for page-hero */
.page-hero { background-color: var(--clr-dark); }

/* Fix: img loading state - show branded bg while loading */
img[loading="lazy"] { background: var(--clr-light-gray); min-height: 4px; }
.bg-dark img[loading="lazy"],
.bg-dark-mid img[loading="lazy"],
.page-hero img[loading="lazy"] { background: var(--clr-dark-mid); }

/* Fix: section padding consistency */
.section-pad    { padding: 5rem 5%; }
.section-pad-sm { padding: 3rem 5%; }

/* Fix: .container full width on mobile */
@media(max-width:480px) {
    .container { padding-left:1.25rem; padding-right:1.25rem; }
    .section-pad { padding: 3.5rem 1.25rem; }
}

/* Fix: blog preview thumbnails */
.blog-card__thumb { background: var(--clr-light-gray); }
.blog-card__thumb img { min-height:170px; }

/* Fix: wp-post-image (featured image set via meta fallback) */
.blog-card__thumb .wp-post-image { width:100%;height:100%;object-fit:cover;display:block; }

/* Fix: trust logos on navy bg */
.bg-navy .trust-logos { justify-content: center; margin-top: 1rem; }

/* Fix: ensure nav links display with proper color after scrolling on inner pages */
.site-header.is-scrolled .primary-nav__link { color: var(--clr-text-mid); }
.site-header.is-scrolled .primary-nav__link:hover { color: var(--clr-text-dark); }
.site-header.is-scrolled .site-logo__name { color: var(--clr-text-dark); }

/* Fix: About page stock image on dark hero */
.page-hero__orb {
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    filter: blur(80px);
    background: radial-gradient(circle, rgba(10,42,102,0.5) 0%, transparent 70%);
    top: -100px; right: -100px;
    pointer-events: none;
}

/* =====================================================
   CONTACT PAGE — Form left / Info right layout
   ===================================================== */
.contact-layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 5rem;
    align-items: start;
}
.contact-form-col {}
.contact-info-col {}

/* Contact form fields — light bg, dark text, fully readable */
.cf-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 0;
}
.cf-field { margin-bottom: 1.1rem; }
.cf-label {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--clr-text-dark);
    margin-bottom: .35rem;
}
.cf-req { color: var(--clr-orange); }
.cf-input,
.cf-textarea {
    width: 100%;
    background: #ffffff;
    border: 1.5px solid #d1d5db;
    border-radius: 4px;
    padding: .7rem .9rem;
    font-size: .88rem;
    color: #1a1a2e;
    font-family: var(--font-body);
    outline: none;
    transition: border-color .25s, box-shadow .25s;
    -webkit-appearance: none;
}
.cf-input::placeholder,
.cf-textarea::placeholder { color: #9ca3af; }
.cf-input:focus,
.cf-textarea:focus {
    border-color: var(--clr-blue);
    box-shadow: 0 0 0 3px rgba(74,144,226,.15);
}
.cf-textarea { resize: vertical; min-height: 120px; }

/* Custom select wrapper — shows arrow, readable text */
.cf-select-wrap {
    position: relative;
    display: block;
}
.cf-select {
    width: 100%;
    background: #ffffff;
    border: 1.5px solid #d1d5db;
    border-radius: 4px;
    padding: .7rem 2.5rem .7rem .9rem;
    font-size: .88rem;
    color: #1a1a2e;
    font-family: var(--font-body);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color .25s, box-shadow .25s;
}
.cf-select:focus {
    border-color: var(--clr-blue);
    box-shadow: 0 0 0 3px rgba(74,144,226,.15);
}
.cf-select option {
    background: #ffffff;
    color: #1a1a2e;
}
.cf-select optgroup {
    background: #f3f4f6;
    color: #374151;
    font-weight: 600;
    font-style: normal;
}
.cf-select-arrow {
    position: absolute;
    right: .9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--clr-navy);
    font-size: .65rem;
    pointer-events: none;
}
.cf-error {
    background: rgba(239,68,68,.08);
    border: 1px solid rgba(239,68,68,.3);
    border-radius: 4px;
    padding: .75rem 1rem;
    font-size: .8rem;
    color: #dc2626;
    margin-bottom: 1rem;
}

/* Contact info column */
.ci-list { display: flex; flex-direction: column; gap: 1.4rem; margin-bottom: 2rem; }
.ci-item { display: flex; gap: .9rem; align-items: flex-start; }
.ci-icon {
    width: 44px; height: 44px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.ci-icon--blue   { background: rgba(74,144,226,.12);  color: var(--clr-blue); }
.ci-icon--navy   { background: rgba(10,42,102,.1);    color: var(--clr-navy); }
.ci-icon--orange { background: rgba(245,166,35,.12);  color: var(--clr-orange); }
.ci-label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--clr-text-dark); margin-bottom: .2rem; }
.ci-value { font-size: .84rem; color: var(--clr-text-dark); line-height: 1.6; display: block; }
.ci-value--link { color: var(--clr-blue); text-decoration: none; transition: color .2s; }
.ci-value--link:hover { color: var(--clr-orange); }
.ci-note { font-size: .7rem; color: var(--clr-text-muted); margin-top: .15rem; line-height: 1.5; }

.ci-area-box {
    background: var(--clr-navy);
    border-radius: 8px;
    padding: 1.4rem;
}
.ci-area-box__title { font-family: var(--font-heading); font-size: .9rem; letter-spacing: .1em; color: #fff; margin-bottom: .9rem; }
.ci-area-box__grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .75rem;
}
.ci-area-box__grid span { font-size: .72rem; color: rgba(255,255,255,.65); }

@media(max-width:900px) {
    .contact-layout { grid-template-columns: 1fr; gap: 3rem; }
    .cf-row { grid-template-columns: 1fr; }
    .ci-area-box__grid { grid-template-columns: 1fr 1fr; }
}
@media(max-width:480px) {
    .ci-area-box__grid { grid-template-columns: 1fr; }
}

/* =====================================================
   FIX: All select/dropdown fields in DARK forms
   (popup lead form, header form) — white text on dark bg
   ===================================================== */

/* Dark form selects — light text, dark bg, arrow visible */
.form-select,
.popup-inner select,
#spectrum-lead-form select,
#popupForm select {
    background-color: #1e3a5f !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255,255,255,.25) !important;
    border-radius: 4px;
    padding: .75rem 2.2rem .75rem .9rem !important;
    font-size: .85rem;
    font-family: var(--font-body);
    width: 100%;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F5A623' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    transition: border-color .25s;
}
.form-select:focus,
.popup-inner select:focus,
#spectrum-lead-form select:focus,
#popupForm select:focus {
    border-color: var(--clr-blue) !important;
    box-shadow: 0 0 0 3px rgba(74,144,226,.2);
}
/* Options inside dark selects */
.form-select option,
.popup-inner select option,
#spectrum-lead-form select option,
#popupForm select option {
    background-color: #0a1628 !important;
    color: #ffffff !important;
}
.form-select optgroup,
.popup-inner select optgroup,
#spectrum-lead-form select optgroup,
#popupForm select optgroup {
    background-color: #0d1e42 !important;
    color: rgba(255,255,255,.6) !important;
    font-style: normal;
    font-weight: 600;
}

/* Dark text inputs — ensure readable */
.form-input,
.popup-inner input[type="text"],
.popup-inner input[type="email"],
.popup-inner input[type="tel"],
#spectrum-lead-form input,
#popupForm input {
    color: #ffffff !important;
    background-color: rgba(255,255,255,.07) !important;
    border: 1.5px solid rgba(255,255,255,.18) !important;
    border-radius: 4px;
}
.form-input::placeholder,
.popup-inner input::placeholder,
#spectrum-lead-form input::placeholder { color: rgba(255,255,255,.35) !important; }
.form-input:focus,
.popup-inner input:focus,
#spectrum-lead-form input:focus,
#popupForm input:focus {
    border-color: rgba(74,144,226,.6) !important;
    box-shadow: 0 0 0 3px rgba(74,144,226,.15);
    outline: none;
}

/* Dark textarea */
.form-textarea,
.popup-inner textarea,
#spectrum-lead-form textarea,
#popupForm textarea {
    color: #ffffff !important;
    background-color: rgba(255,255,255,.07) !important;
    border: 1.5px solid rgba(255,255,255,.18) !important;
    border-radius: 4px;
}
.form-textarea::placeholder,
.popup-inner textarea::placeholder { color: rgba(255,255,255,.35) !important; }

/* Form labels in dark context */
.form-label,
.popup-inner label,
#spectrum-lead-form label,
#popupForm label {
    color: rgba(255,255,255,.75) !important;
    font-size: .65rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 600;
    display: block;
    margin-bottom: .35rem;
}

/* =====================================================
   NAV DROPDOWN — Insights under Portfolio
   ===================================================== */
.primary-nav__list { position: relative; }
.primary-nav__list > li { position: relative; }

/* Dropdown panel */
.primary-nav__list > li > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    background: transparent;
    z-index: 900;
    list-style: none;
    padding-top: 8px;
    padding-bottom: .4rem;
}
.primary-nav__list > li > ul::after {
    content: '';
    display: block;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    box-shadow: var(--shadow-md);
    position: absolute;
    inset: 8px 0 0 0;
    z-index: -1;
}
/* Show on hover */
.primary-nav__list > li:hover > ul { display: block; }

/* Dropdown items */
.primary-nav__list > li > ul > li > a {
    display: block;
    padding: .55rem 1.1rem;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--clr-text-mid);
    text-decoration: none;
    transition: color .2s, background .2s;
    white-space: nowrap;
}
.primary-nav__list > li > ul > li > a:hover {
    color: var(--clr-orange);
    background: var(--clr-off-white);
}

/* Arrow indicator on parent item that has children */
.primary-nav__list > li:has(> ul) > a::after {
    content: ' ▾';
    font-size: .55rem;
    opacity: .6;
    letter-spacing: 0;
}

/* Mobile: show dropdown items inline */
.mobile-nav__list li ul { display: block; padding-left: 1.2rem; margin-top: .5rem; }
.mobile-nav__list li ul a { font-size: 1.2rem !important; opacity: .75; }

/* =====================================================
   INSIGHTS / BLOG INDEX — Category filter buttons
   ===================================================== */
.insights-cats {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
}
.ins-cat-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    border: 1.5px solid #d1d5db;
    border-radius: 3px;
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--clr-text-mid);
    text-decoration: none;
    transition: all .22s;
    background: transparent;
}
.ins-cat-btn:hover,
.ins-cat-btn--active {
    background: var(--clr-navy);
    border-color: var(--clr-navy);
    color: #fff;
}
.ins-cat-count {
    background: rgba(255,255,255,.2);
    border-radius: 10px;
    padding: .05rem .4rem;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1.4;
}
.ins-cat-btn:not(.ins-cat-btn--active) .ins-cat-count {
    background: #e5e7eb;
    color: var(--clr-text-mid);
}

/* Pagination links */
.nav-links {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    align-items: center;
}
.nav-links a,
.nav-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 .65rem;
    border: 1.5px solid #d1d5db;
    border-radius: 3px;
    font-size: .72rem;
    color: var(--clr-text-mid);
    text-decoration: none;
    transition: all .2s;
}
.nav-links a:hover         { border-color: var(--clr-navy); color: var(--clr-navy); }
.nav-links .current        { background: var(--clr-navy); border-color: var(--clr-navy); color: #fff; }
.nav-links .prev, 
.nav-links .next           { padding: 0 1rem; font-weight: 600; }

/* ── Focus-visible accessibility ── */
:focus-visible {
    outline: 3px solid #e8b400;
    outline-offset: 3px;
    border-radius: 2px;
}
button:focus-visible,
.btn:focus-visible   { border-radius: 4px; }
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #e8b400;
    outline-offset: 0;
}

/* ── Logo sizing — always auto width, fixed height ── */
.site-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.site-logo__img {
    display: block;
    width: auto !important;
    max-width: none;
    object-fit: contain;
}
.site-logo__wordmark {
    display: flex;
    flex-direction: column;
}

/* =====================================================
   SITE LIGHTBOX — click-to-popup image gallery / video player
   ===================================================== */
.site-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: none;
    align-items: center;
    justify-content: center;
}
.site-lightbox.is-open { display: flex; }
.site-lightbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 20, 0.94);
}
.site-lightbox__stage {
    position: relative;
    z-index: 1;
    max-width: min(92vw, 1200px);
    max-height: 82vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.site-lightbox__stage img,
.site-lightbox__stage video {
    max-width: 92vw;
    max-height: 82vh;
    width: auto;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.site-lightbox__caption {
    position: absolute;
    bottom: 2.2rem;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255,255,255,0.75);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    padding: 0 1rem;
    z-index: 1;
}
.site-lightbox__close {
    position: absolute;
    top: 1.2rem;
    right: 1.4rem;
    z-index: 2;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 2.4rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s;
}
.site-lightbox__close:hover { opacity: 1; }
.site-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
}
.site-lightbox__nav:hover { background: rgba(245,166,35,0.85); transform: translateY(-50%) scale(1.06); }
.site-lightbox__prev { left: 1.2rem; }
.site-lightbox__next { right: 1.2rem; }
@media (max-width: 700px) {
    .site-lightbox__nav { width: 38px; height: 38px; }
    .site-lightbox__prev { left: 0.5rem; }
    .site-lightbox__next { right: 0.5rem; }
    .site-lightbox__close { top: 0.7rem; right: 0.9rem; font-size: 2rem; }
}

/* =============================================================
   v2.9.0 — Resource hubs and cornerstone guides
   ============================================================= */
.tsb-resource-hero{padding:clamp(5rem,9vw,8.5rem) 0 clamp(3.5rem,7vw,6rem);background:linear-gradient(135deg,#101114 0%,#202329 100%);color:#fff}
.tsb-resource-hero h1{max-width:980px;margin:.65rem 0 1.25rem;color:#fff;font-size:clamp(2.5rem,6vw,5.5rem);line-height:1.02}
.tsb-resource-deck{max-width:780px;font-size:clamp(1.05rem,2vw,1.3rem);line-height:1.7;color:rgba(255,255,255,.78);margin-bottom:2rem}
.tsb-breadcrumb{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;font-size:.82rem;margin-bottom:1.5rem;color:rgba(255,255,255,.65)}
.tsb-breadcrumb a{color:inherit;text-decoration:none}.tsb-breadcrumb a:hover{color:#fff}
.tsb-resource-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}
.tsb-resource-grid--hubs{grid-template-columns:repeat(2,minmax(0,1fr))}
.tsb-resource-card{padding:clamp(1.5rem,3vw,2.25rem);border:1px solid rgba(18,20,24,.12);border-radius:18px;background:#fff;box-shadow:0 12px 35px rgba(20,24,30,.06);display:flex;flex-direction:column;align-items:flex-start}
.tsb-resource-card h2,.tsb-resource-card h3{margin:.35rem 0 .85rem;line-height:1.18}.tsb-resource-card h2 a,.tsb-resource-card h3 a{color:inherit;text-decoration:none}
.tsb-resource-card p{line-height:1.7}.tsb-resource-card__type{text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;font-weight:700;color:#b65727}
.tsb-resource-card .text-link{margin-top:auto;padding-top:1rem;font-weight:700;text-decoration:none}
.tsb-related-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.tsb-related-links a{display:flex;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;border:1px solid rgba(18,20,24,.12);border-radius:12px;background:#fff;text-decoration:none;font-weight:700}
.tsb-guide-lead{font-size:1.25rem;line-height:1.75;color:#30333a}.tsb-guide-takeaway{padding:1.25rem 1.4rem;margin:1.5rem 0 2rem;border-left:4px solid #c46832;background:#f7f3ef;border-radius:0 10px 10px 0}
@media(max-width:900px){.tsb-resource-grid,.tsb-resource-grid--hubs{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.tsb-resource-grid,.tsb-resource-grid--hubs,.tsb-related-links{grid-template-columns:1fr}}

/* =====================================================
   v3.0 Portfolio Authority Platform
   ===================================================== */
.tsb-authority-hero{padding:clamp(5rem,10vw,9rem) 0;background:#071a3b;color:#fff}.tsb-authority-hero h1{max-width:950px;font-size:clamp(2.7rem,6vw,5.4rem);line-height:.98;margin:.35rem 0 1.25rem}.tsb-authority-hero p{max-width:760px;font-size:1.1rem}.tsb-work-section{padding-top:4rem;padding-bottom:5rem}.tsb-filter-bar{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem}.tsb-filter-bar button{border:1px solid #d7dce5;border-radius:999px;background:#fff;padding:.7rem 1rem;cursor:pointer}.tsb-filter-bar button.is-active{background:#0a2a66;color:#fff;border-color:#0a2a66}.tsb-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}.tsb-project-card{background:#fff;border:1px solid #e2e7ef;border-radius:12px;overflow:hidden;box-shadow:0 12px 35px rgba(7,26,59,.07)}.tsb-project-card img,.tsb-card-placeholder{display:block;width:100%;object-fit:contain;background:#f2f4f8}.tsb-card-placeholder{aspect-ratio:4/3;display:grid;place-items:center;background:#edf1f7;color:#60708a}.tsb-project-card-body{padding:1.3rem}.tsb-project-card h2,.tsb-project-card h3{margin:.4rem 0}.tsb-project-terms{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.tsb-project-hero{padding:7rem 0;background:#071a3b;color:#fff;background-size:cover;background-position:center}.tsb-project-hero h1{font-size:clamp(2.7rem,6vw,5rem);max-width:1000px;line-height:1}.tsb-project-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,.8fr);gap:3rem;padding-top:4rem;padding-bottom:4rem}.tsb-project-section{margin:0 0 2.8rem}.tsb-project-sidebar{position:relative}.tsb-project-facts{position:sticky;top:100px;border:1px solid #e1e6ed;border-radius:12px;padding:1.5rem;background:#fff}.tsb-project-facts dt{font-weight:700;margin-top:1rem}.tsb-project-facts dd{margin:.25rem 0}.tsb-project-facts .btn{display:block;text-align:center;margin-top:1.5rem}.tsb-gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.tsb-gallery-grid img{width:100%;height:auto;object-fit:contain;border-radius:8px}.tsb-project-quote{font-size:1.4rem;border-left:4px solid #f5a623;padding:1.5rem;background:#f7f9fc}.tsb-related-work{padding:4rem 0;background:#f5f7fa}.tsb-industry-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}.tsb-industry-grid article{padding:2rem;border:1px solid #e1e6ed;border-radius:12px;background:#fff}.responsive-embed{position:relative;overflow:hidden;padding-top:56.25%}.responsive-embed iframe,.responsive-embed video{position:absolute;inset:0;width:100%;height:100%}@media(max-width:900px){.tsb-project-grid,.tsb-industry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tsb-project-layout{grid-template-columns:1fr}.tsb-project-facts{position:static}}@media(max-width:620px){.tsb-project-grid,.tsb-industry-grid,.tsb-gallery-grid{grid-template-columns:1fr}}


/* ============================================================
   v4.0.0 — cinematic hero + adaptive video showcase
   ============================================================ */
.hp-hero.has-cinematic-video .hp-hero__photo {
  filter: blur(10px) scale(1.025); opacity:1; transition:filter 1.2s ease,opacity 1.2s ease;
}
.hp-hero.has-cinematic-video .hp-hero__video {
  opacity:0; transition:opacity 1.35s ease; background:#050a14;
}
.hp-hero.has-cinematic-video.is-video-started .hp-hero__video {opacity:1;}
.hp-hero.has-cinematic-video.is-video-started .hp-hero__photo {filter:blur(0) scale(1);opacity:0;}
.hp-hero.has-cinematic-video .hp-hero__inner {transition:opacity .9s ease,transform .9s ease;}
.hp-hero.has-cinematic-video.is-video-started .hp-hero__inner {opacity:0;transform:translateY(-10px);pointer-events:none;}
.hp-hero__video-toggle {position:absolute;right:24px;bottom:24px;z-index:4;width:42px;height:42px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(5,10,20,.5);color:#fff;display:none;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(8px)}
.hp-hero.has-cinematic-video.is-video-started .hp-hero__video-toggle {display:flex;}
.reel-main[data-ratio="9:16"] {min-height:560px;max-height:720px;}
.reel-main[data-ratio="9:16"] .reel-main__video,.reel-main[data-ratio="9:16"] .reel-main__poster {object-fit:contain;}
.reel-main[data-ratio="1:1"] {min-height:480px;max-height:620px;}
.reel-main[data-ratio="21:9"] {min-height:360px;max-height:520px;}
.reel-main[data-ratio="16:9"] {min-height:420px;max-height:620px;}
.reel-thumb[data-reel-ratio="9:16"] .reel-thumb__img {height:170px;object-fit:cover;}
.reel-thumb[data-reel-ratio="1:1"] .reel-thumb__img {height:145px;object-fit:cover;}
@media(max-width:900px){
 .reel-main[data-ratio]{max-height:none;}
 .reel-main[data-ratio="9:16"] .reel-main__video,.reel-main[data-ratio="9:16"] .reel-main__poster{aspect-ratio:9/16;max-height:72vh;object-fit:contain;margin:auto;}
 .reel-main[data-ratio="1:1"] .reel-main__video,.reel-main[data-ratio="1:1"] .reel-main__poster{aspect-ratio:1/1;}
 .reel-main[data-ratio="21:9"] .reel-main__video,.reel-main[data-ratio="21:9"] .reel-main__poster{aspect-ratio:21/9;}
}


/* ============================================================
   v4.1.1 — HOMEPAGE CINEMATIC HERO
   Header/menu intentionally untouched. Only the homepage hero is shortened.
   ============================================================ */
.hp-hero { min-height: 82vh; height: min(82vh, 850px); }
.home .hp-hero .hero-slideshow { inset: 0; }
.home .hp-hero .hero-slide__media { object-fit: cover; object-position: center; }
.home .hp-hero.has-hero-slideshow .hp-hero__inner,
.home .hp-hero:has(.hero-slideshow) .hp-hero__inner { transition: opacity .9s ease, visibility .9s ease; }
.home .hp-hero.tsb-hero-media-playing .hp-hero__inner { opacity: 0; visibility: hidden; pointer-events: none; }
.home .hp-hero.tsb-hero-media-playing .hp-hero__grid { opacity: .22; }
.home .hp-hero.tsb-hero-media-playing .hp-hero__overlay { background: linear-gradient(180deg,rgba(5,10,20,.20),rgba(5,10,20,.34)); }
@media (max-width: 900px) { .hp-hero { min-height: 76vh; height: auto; } }


/* ============================================================
   v4.1.3 — continuous mixed-media homepage hero
   ============================================================ */
.home .hp-hero.has-hero-slideshow .hp-hero__inner { display:none !important; }
.home .hp-hero.has-hero-slideshow .hp-hero__overlay { background:linear-gradient(180deg,rgba(5,10,20,.08),rgba(5,10,20,.18)); }
.home .hp-hero.has-hero-slideshow .hp-hero__grid { opacity:.08; }
.hero-slideshow__pause {
 position:absolute; right:1.25rem; bottom:1.15rem; width:42px; height:42px; border-radius:50%;
 border:1px solid rgba(255,255,255,.34); background:rgba(5,10,20,.48); color:#fff;
 display:flex; align-items:center; justify-content:center; cursor:pointer; pointer-events:auto;
 font-size:.85rem; line-height:1; backdrop-filter:blur(8px); transition:background .2s ease,transform .2s ease;
}
.hero-slideshow__pause:hover{background:var(--clr-gold,#c8a96e);color:#1a1030;transform:scale(1.05)}
@media(max-width:700px){.hero-slideshow__pause{right:.65rem;bottom:.85rem;width:38px;height:38px}}

/* v4.1.5 — captions only on the two corrected real-work slides */
.hero-slide__caption{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;pointer-events:none;background:linear-gradient(90deg,rgba(4,8,15,.78) 0%,rgba(4,8,15,.42) 38%,rgba(4,8,15,.04) 70%);padding:0 7vw 8vh}.hero-slide__caption-inner{max-width:760px}.hero-slide__eyebrow{font-size:clamp(.75rem,1vw,1rem);letter-spacing:.24em;font-weight:700;color:#f2b233;margin-bottom:.7rem}.hero-slide__title{font-family:Georgia,serif;font-size:clamp(2.1rem,4.4vw,4.8rem);line-height:1.02;color:#fff;max-width:900px;text-shadow:0 2px 18px rgba(0,0,0,.35)}.hero-slide__sub{font-size:clamp(.95rem,1.3vw,1.25rem);line-height:1.45;color:rgba(255,255,255,.92);margin-top:1rem;max-width:680px}@media(max-width:700px){.hero-slide__caption{padding:0 1.5rem 6rem;background:linear-gradient(0deg,rgba(4,8,15,.82),rgba(4,8,15,.08) 75%)}.hero-slide__title{font-size:clamp(2rem,10vw,3.2rem)}}

/* ============================================================
   v4.2.2 — Homepage approved slideshow responsive-fit correction
   Preserve the complete baked-in slide composition at narrower desktop widths.
   ============================================================ */
.home .hp-hero.has-hero-slideshow{background:#050a14}
.home .hp-hero.has-hero-slideshow .hero-slide{background:#050a14;display:flex;align-items:center;justify-content:center}
.home .hp-hero.has-hero-slideshow .hero-slide__media{object-fit:contain!important;object-position:center center!important;background:#050a14}
.home .hp-hero.has-hero-slideshow .hero-slide__media--embed iframe{object-fit:contain}


/* v4.3.13 — real approved pillar logos on seamless white cards */
.eco-card__img--logo {
	background:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:clamp(1rem,2.2vw,1.75rem);
}
.eco-card__img--logo img {
	display:block;
	max-width:100%;
	max-height:100%;
	width:100%;
	height:100%;
	object-fit:contain;
}
.eco-card__img--logo::after {
	content:'';
	position:absolute;
	inset:auto 0 0 0;
	height:1px;
	background:rgba(10,42,102,.08);
}
.eco-card__img--itsd img { width:98%; height:84%; }
.eco-card__img--sim  img { width:94%; height:90%; }
.eco-card__img--spi  img { width:92%; height:86%; }
.eco-card__img--lec  img { width:60%; height:86%; }
@media (max-width: 1024px) {
	.eco-card__img--lec img { width:68%; }
}