/**
 * Spectrum Worldwide — global stylesheet.
 *
 * Every rule below is ported verbatim from the approved Claude Design
 * export's shared <style> block (verified directly in
 * "Spectrum Homepage.dc.html", lines ~14-82). This file intentionally
 * contains ONLY the global/shared rules confirmed identical across
 * pages — base reset, brand tokens, the two responsive breakpoints,
 * animations, hover/focus behavior, and reduced-motion overrides.
 *
 * Per-page section layout (hero grids, card grids, etc.) is NOT ported
 * here — that markup/CSS is built per template-part during Phases 3-6
 * as each page's real content is migrated, so nothing is invented ahead
 * of the content it belongs to.
 *
 * Do not change these values without also updating the source-of-truth
 * .dc.html files' documented design tokens — this file exists to
 * de-duplicate, not to diverge from, the approved design.
 */

/* ---- base / reset ---- */
body {
	margin: 0;
	font-family: 'Plus Jakarta Sans', sans-serif;
	color: #001D3A;
	background: #FFFFFF;
}

a {
	color: #E10600;
	text-decoration: none;
}

a:hover {
	color: #b30500;
}

* {
	box-sizing: border-box;
}

input::placeholder,
textarea::placeholder {
	color: #7E8CA3;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid #E10600;
	outline-offset: 3px;
}

a,
button,
[tabindex],
label {
	-webkit-tap-highlight-color: transparent;
}

/* ---- animations ---- */
@keyframes marqueeScroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.marquee-track {
	animation: marqueeScroll 32s linear infinite;
}

@keyframes logoMarquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.logo-marquee {
	animation: logoMarquee 45s linear infinite;
}

@keyframes panelIn {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}
.mega-panel {
	animation: panelIn 0.2s ease-out;
}

@keyframes noteIn {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}
.note-in {
	animation: noteIn 0.3s ease;
}

@keyframes spin {
	to { transform: rotate(360deg); }
}
.spin {
	display: inline-block;
	width: 13px;
	height: 13px;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin 0.7s linear infinite;
	vertical-align: -2px;
	margin-right: 9px;
}

/* ---- insight rail ---- */
.insight-rail {
	scrollbar-width: thin;
	scrollbar-color: #D3D9E2 transparent;
	scroll-behavior: smooth;
}
.insight-rail::-webkit-scrollbar {
	height: 4px;
}
.insight-rail::-webkit-scrollbar-thumb {
	background: #D3D9E2;
	border-radius: 2px;
}
.insight-rail image-slot,
.insight-rail img {
	transition: transform 0.5s ease;
}
.insight-rail a:hover image-slot,
.insight-rail a:hover img {
	transform: scale(1.04);
}

/* ---- links / buttons / interaction ---- */
.arrow-link span {
	display: inline-block;
	transition: transform 0.25s ease;
}
.arrow-link:hover span {
	transform: translateX(5px);
}

.btn {
	transition: box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease, transform 0.1s ease;
}
/*
 * Source declares .btn:active twice (Spectrum Homepage.dc.html:37 then
 * :65) — translateY(1px), then scale(0.975). Same specificity, so the
 * later rule is what actually renders; keeping only that one here
 * reproduces the true visual outcome rather than inventing a combined
 * transform neither original rule produced.
 */
.btn:active {
	transform: scale(0.975);
}
.btn-1:hover {
	box-shadow: 0 6px 18px rgba(225, 6, 0, 0.28);
}
.btn-2:hover {
	border-color: #E10600;
}

.nav-caret {
	display: inline-block;
	margin-left: 5px;
	font-size: 8px;
	transition: transform 0.22s ease;
}

.card-lift {
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.card-lift:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(0, 29, 58, 0.10);
}
.card-lift:active {
	transform: translateY(-1px);
}

.panel-row:hover {
	background: #FAFBFC;
}
.panel-row:active {
	background: #F2F4F7;
}

.field-in {
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.field-in:focus {
	border-color: #E10600;
	box-shadow: 0 0 0 3px rgba(225, 6, 0, 0.12);
	outline: none;
}
.field-in.err {
	border-color: #E10600;
	background: #FFF7F6;
}
.fld-msg {
	display: block;
	margin-top: 7px;
	font-size: 12px;
	font-weight: 600;
	color: #E10600;
}

.swap {
	transition: opacity 0.16s ease;
}
.swap.dim {
	opacity: 0.4;
}

/* ---- responsive visibility helpers ---- */
.mobile-only {
	display: none !important;
}

/* ---- hover/interaction utility classes confirmed in C-TPAT.dc.html
   (present identically on every non-homepage page's shared <style>
   block — not ported in the Phase 1 pass, which only read the
   homepage's own style block) ---- */
.zoom {
	overflow: hidden;
}
.zoom img {
	transition: transform 0.55s ease;
}
.zoom:hover img {
	transform: scale(1.04);
}
.res-row {
	transition: border-color 0.25s ease, padding-left 0.25s ease;
}
.res-row:hover {
	border-color: #E10600;
	padding-left: 10px;
}
.card-hov {
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.card-hov:hover {
	border-color: #C9D2DE;
	box-shadow: 0 10px 30px rgba(0, 29, 58, 0.07);
}

/* ---- breakpoint: 1180px (nav compression only) ---- */
@media (max-width: 1180px) {
	.nav-compact {
		gap: 12px !important;
	}
}

/* ---- breakpoint: 1000px (desktop/mobile swap) ---- */
@media (max-width: 1000px) {
	.desktop-only {
		display: none !important;
	}
	.mobile-only {
		display: block !important;
	}
	.mobile-only.hamburger {
		display: flex !important;
	}
	.stack {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
	.pad {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	.h1 {
		font-size: 34px !important;
	}
	.h2 {
		font-size: 26px !important;
	}
	.stat-band {
		grid-template-columns: 1fr 1fr !important;
	}
	/* Confirmed present in C-TPAT.dc.html's breakpoint block, not
	   previously ported (Phase 1 only read the homepage's <style>). */
	.two {
		grid-template-columns: 1fr !important;
	}
	.three {
		grid-template-columns: 1fr !important;
	}
	.hero-split {
		grid-template-columns: 1fr !important;
	}
	.hero-img {
		min-height: 240px !important;
	}
	.tall {
		padding-top: 72px !important;
		padding-bottom: 72px !important;
	}
}

/* =========================================================
 * Section layout — verified anchor values only.
 *
 * The source repeats `max-width:1440px; margin:0 auto; padding:120px
 * 56px` (or `44px 56px` for the stat band) as an INLINE style on each
 * section, with the `.pad` class used only as the mobile-breakpoint
 * hook (main.css already has `.pad { padding-left/right: 24px }` under
 * the 1000px breakpoint). Centralizing the desktop values here as real
 * CSS rather than repeating them inline per section is a maintainability
 * improvement consistent with "one stylesheet" (WORDPRESS-MIGRATION-
 * SPEC.md §14) — the visual gutters/max-width are unchanged from the
 * source, verified at Spectrum Homepage.dc.html:191/206/228.
 *
 * IMPORTANT — fidelity scope note (see Phase 2 report §18): this covers
 * the container pattern, hero typography, and stat-band grid, which
 * were directly verified. It does NOT yet reproduce every section's
 * exact spacing/grid values across all 22 pages — that remains
 * per-template work for Phases 3+ as each page's full markup is built,
 * not silently assumed complete here.
 * ========================================================= */

.pad {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 56px;
}

.sw-hero {
	position: relative;
	padding: 0;
}
.sw-hero__content {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
	padding: 120px 56px;
}
.sw-hero--home .sw-hero__content {
	color: #fff;
}
.sw-hero__eyebrow {
	color: #E10600;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.sw-hero__body {
	max-width: 500px;
	font-size: 19px;
	line-height: 1.6;
	font-weight: 400;
}
.sw-hero__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}
.sw-hero__image {
	position: absolute;
	inset: 0;
	z-index: -1;
}
.sw-hero__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* h1/h2 base sizes — confirmed 58px/38px on the homepage hero/stat
   values; the shared .h1/.h2 mobile overrides (34px/26px) already live
   in the breakpoint block above. */
.h1 {
	font-size: 58px;
	font-weight: 800;
	line-height: 1.06;
	margin: 0;
}
.h2 {
	font-size: 38px;
	font-weight: 800;
	margin: 0;
}

/* Stat band — confirmed 4-column desktop grid (Spectrum
   Homepage.dc.html:207), collapsing to 2 columns under 1000px (already
   in the breakpoint block above). */
.sw-stat-band {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
	background: #001D3A;
	padding-top: 44px;
	padding-bottom: 44px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.sw-stat-band__item {
	padding-right: 24px;
	border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.sw-stat-band__item:last-child {
	border-right: none;
	padding-right: 0;
}
.sw-stat-band__value {
	display: block;
	color: #fff;
	font-size: 38px;
	font-weight: 800;
}
.sw-stat-band__label {
	display: block;
	margin-top: 4px;
	color: #AEB9CB;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Cards — generic reusable treatment shared by service, resource and
   insight cards used in real grids (page-service.php's related
   services, the Insights archive grid, the homepage Insights rail).
   Previously this had no visible shape at all (no border, no padding,
   no image sizing) — every card sitewide rendered as bare stacked text
   under an unstyled image, which read as "broken" in any dense layout
   like a mega-menu or a grid. */
.sw-card {
	display: block;
	color: inherit;
	border: 1px solid #E5E9EF;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
}
.sw-card__image {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #F2F4F7;
}
.sw-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sw-card__body {
	padding: 20px;
}
.sw-card__title {
	color: #001D3A;
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}
.sw-card__desc {
	color: #4A5568;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
}
.sw-card__meta {
	display: flex;
	gap: 12px;
	color: #7E8CA3;
	font-size: 13px;
	margin-top: 10px;
}

/* Mega-menu panel layouts — confirmed two distinct source patterns
   (Spectrum Homepage.dc.html:114-142): "isList" (Services, the
   Insights "Sobre Spectrum Worldwide" entry) is a single column of
   num+title+description rows; "isGrid" (Resources) is a 2-column grid
   of num+title rows with no description. Both reuse the same
   .panel-row building block, just with different modifiers. */
.sw-mega-panel__grid--list {
	display: flex;
	flex-direction: column;
}
.sw-mega-panel__grid--2col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 32px;
}
.sw-mega-panel__row {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 56px;
}

.panel-row {
	display: grid;
	grid-template-columns: 36px 1fr auto;
	gap: 20px;
	align-items: center;
	padding: 18px 8px;
	border-top: 1px solid #F2F4F7;
	color: inherit;
}
.panel-row__num {
	font-size: 12px;
	font-weight: 700;
	color: #E10600;
}
.panel-row__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.panel-row__title {
	font-size: 17px;
	font-weight: 700;
	color: #001D3A;
}
.panel-row__desc {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: #4A5568;
}
.panel-row__arrow {
	color: #E10600;
	font-size: 15px;
	font-weight: 700;
}
/* Resources' "isGrid" rows: 32px num column, no description, tighter
   gap/padding — confirmed distinct from the "isList" rows above. */
.panel-row--compact {
	grid-template-columns: 32px 1fr auto;
	gap: 14px;
	padding: 15px 8px;
}
.panel-row--compact .panel-row__title {
	font-size: 15px;
}
.panel-row--compact .panel-row__arrow {
	font-size: 14px;
}
/* A resource with neither a confirmed real URL nor a local post yet
   (see inc/production-urls.php) — its title still occupies its normal
   nav-list position (never hidden), but it is not a link, and it must
   never carry an internal status label like "(not yet published)". */
.panel-row--pending {
	cursor: default;
	color: #8895AC;
}
.panel-row--pending .panel-row__title {
	color: #8895AC;
}
.panel-row--pending:hover {
	background: transparent;
}

/* Mega-menu aside box (Spectrum Homepage.dc.html:143-155) — the
   #F2F4F7 featured-content box beside the Insights panel's list. */
.sw-mega-panel__aside {
	background: #F2F4F7;
	border-radius: 10px;
	padding: 28px;
}
.sw-mega-panel__aside-kicker {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: #E10600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.sw-mega-panel__aside-image {
	height: 170px;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 18px;
}
.sw-mega-panel__aside-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sw-mega-panel__aside-title {
	margin: 0 0 18px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.4;
	color: #001D3A;
}
.sw-mega-panel__aside-link {
	font-size: 14px;
	font-weight: 700;
	color: #E10600;
}

.sw-capability {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sw-capability img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
}

.sw-footer {
	background: #001D3A;
	color: #AEB9CB;
	padding-top: 64px;
	padding-bottom: 64px;
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	justify-content: space-between;
}
.sw-footer a {
	color: #AEB9CB;
	font-size: 14px;
}
.sw-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
.sw-footer__offices {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 32px;
}
.sw-footer__office {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13px;
}

/* =========================================================
 * Phase 3 sections — layout values below are copied verbatim from the
 * inline styles captured during extraction (cited per block), not
 * approximated. Colors/spacing reuse the same tokens already ported
 * above; only the grid ratios and component-specific rules are new.
 * ========================================================= */

.sw-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #E10600;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.sw-kicker::before {
	content: '';
	width: 28px;
	height: 2px;
	background: #E10600;
}
.sw-kicker--inverse {
	color: #E10600;
}

/* Differentiators (Spectrum Homepage.dc.html:260-278) — real click-to-
 * select tabs (state.activeAdv). Source has no explicit `transition`
 * property on the tab's border-bottom/title-color, so none is added
 * here either — faithful to the omission, not an oversight. */
.sw-differentiators-section {
	background: #001D3A;
	padding-top: 120px;
	padding-bottom: 120px;
}
.sw-differentiators-section .h2 {
	color: #fff;
	max-width: 640px;
	margin-bottom: 56px;
}
.sw-differentiators-section__tabs {
	display: flex;
	gap: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	margin-bottom: 48px;
	overflow-x: auto;
}
.sw-differentiators-section__tab {
	appearance: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 16px 24px;
	border-bottom: 2px solid transparent;
	display: flex;
	align-items: center;
	gap: 10px;
	white-space: nowrap;
}
.sw-differentiators-section__tab.is-active {
	border-bottom-color: #E10600;
}
.sw-differentiators-section__num {
	font-size: 13px;
	font-weight: 700;
	color: #E10600;
}
.sw-differentiators-section__tab-title {
	font-size: 14px;
	font-weight: 700;
	color: #8895AC;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.sw-differentiators-section__tab.is-active .sw-differentiators-section__tab-title {
	color: #fff;
}
.sw-differentiators-section__panels {
	position: relative;
	min-height: 120px;
}
.sw-differentiators-section__desc {
	display: none;
	margin: 0;
	color: #E7EAF0;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.5;
	max-width: 820px;
}
.sw-differentiators-section__desc.is-active {
	display: block;
}

/* About/Experience (Spectrum Homepage.dc.html:284-320) */
.sw-about-experience-section {
	padding-top: 120px;
	padding-bottom: 0;
}
.sw-about-experience-section__intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	margin-bottom: 64px;
}
.sw-about-experience-section__intro h2 {
	font-size: 42px;
	color: #001D3A;
}
.sw-about-experience-section__intro p {
	font-size: 16px;
	line-height: 1.7;
	color: #4A5568;
}
.sw-about-experience-section__image {
	border-radius: 10px;
	overflow: hidden;
	height: 480px;
	margin-bottom: 80px;
}
.sw-about-experience-section__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sw-about-experience-section__pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: #E5E9EF;
}
.sw-about-experience-section__pillar {
	appearance: none;
	text-align: left;
	cursor: pointer;
	background: #fff;
	padding: 40px 32px;
	border: none;
	border-top: 3px solid #E5E9EF;
	transition: background 0.25s;
}
.sw-about-experience-section__pillar.is-active {
	border-top-color: #E10600;
}
.sw-about-experience-section__pillar h3 {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #001D3A;
	margin: 0 0 12px;
}
.sw-about-experience-section__pillar.is-active h3 {
	color: #E10600;
}
.sw-about-experience-section__pillar p {
	font-size: 15px;
	line-height: 1.65;
	color: #4A5568;
	margin: 0;
}

/* Homepage Services showcase (Spectrum Homepage.dc.html:227-251,
 * state.activeService) — real click-to-select tabs; row background/
 * border transitions 0.3s, panel cross-fade 0.4s, both confirmed. */
.sw-services-showcase {
	padding-top: 120px;
	padding-bottom: 120px;
}
.sw-services-showcase .h2 {
	max-width: 640px;
	margin-bottom: 56px;
	color: #001D3A;
}
.sw-services-showcase__grid {
	display: grid;
	grid-template-columns: 0.9fr 1.6fr;
	gap: 0;
	border-top: 1px solid #F2F4F7;
}
.sw-services-showcase__tab {
	appearance: none;
	width: 100%;
	text-align: left;
	cursor: pointer;
	background: transparent;
	border: none;
	border-left: 3px solid transparent;
	border-bottom: 1px solid #F2F4F7;
	padding: 28px 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	transition: background 0.3s;
}
.sw-services-showcase__tab.is-active {
	border-left-color: #E10600;
	background: #F2F4F7;
}
.sw-services-showcase__tab-num {
	font-size: 13px;
	font-weight: 700;
	color: #B7BFCC;
}
.sw-services-showcase__tab.is-active .sw-services-showcase__tab-num {
	color: #E10600;
}
.sw-services-showcase__tab-title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	color: #8892A3;
}
.sw-services-showcase__tab.is-active .sw-services-showcase__tab-title {
	color: #001D3A;
}
.sw-services-showcase__panels {
	position: relative;
	min-height: 460px;
	border-bottom: 1px solid #F2F4F7;
	overflow: hidden;
}
.sw-services-showcase__panel {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s;
}
.sw-services-showcase__panel.is-active {
	opacity: 1;
	pointer-events: auto;
}
.sw-services-showcase__panel img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sw-services-showcase__panel::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 29, 58, 0.92) 0%, rgba(0, 29, 58, 0) 55%);
	pointer-events: none;
}
.sw-services-showcase__overlay {
	position: absolute;
	left: 32px;
	right: 32px;
	bottom: 32px;
	color: #fff;
	z-index: 1;
}
.sw-services-showcase__overlay h3 {
	margin: 0 0 10px;
	font-size: 24px;
	font-weight: 700;
}
.sw-services-showcase__overlay p {
	margin: 0 0 14px;
	font-size: 15px;
	line-height: 1.6;
	color: #E7EAF0;
	max-width: 460px;
}
.sw-services-showcase__overlay a {
	color: #fff;
}

/* Certifications (Spectrum Homepage.dc.html:326-337) */
.sw-certifications-section {
	background: #F2F4F7;
	padding-top: 80px;
	padding-bottom: 80px;
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 64px;
	align-items: center;
}
.sw-certifications-section__intro .h2 {
	font-size: 30px;
	color: #001D3A;
}
.sw-certifications-section__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.sw-certifications-section__card {
	display: block;
	background: #fff;
	border: 1px solid #E5E9EF;
	border-radius: 10px;
	padding: 28px;
}
.sw-certifications-section__name {
	display: block;
	font-size: 20px;
	font-weight: 800;
	color: #001D3A;
	margin-bottom: 10px;
}
.sw-certifications-section__card p {
	font-size: 14px;
	line-height: 1.6;
	color: #4A5568;
	margin: 0 0 14px;
}
.sw-certifications-section__more {
	font-size: 13px;
	font-weight: 700;
	color: #E10600;
}

/* Clients (Spectrum Homepage.dc.html:313-337) */
.sw-clients-section {
	background: #001D3A;
	padding-top: 110px;
	padding-bottom: 110px;
	text-align: center;
}
.sw-clients-section__intro {
	max-width: 1000px;
	margin: 0 auto;
}
.sw-clients-section__intro .sw-kicker {
	justify-content: center;
}
.sw-clients-section__intro .h2 {
	color: #fff;
	font-size: 34px;
}
.sw-clients-section__intro p {
	color: #AEB9CB;
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 56px;
}
.sw-clients-section__marquee-viewport {
	padding-top: 32px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	overflow: hidden;
}
.sw-clients-section__logo-row {
	display: flex;
	align-items: center;
	gap: 112px;
	padding-right: 112px;
	flex-shrink: 0;
}
.sw-clients-section__logo-row img {
	height: 42px;
	width: auto;
	object-fit: contain;
	filter: brightness(0) invert(1);
	opacity: 0.9;
}

/* Homepage Insights showcase (Spectrum Homepage.dc.html:408-444) —
   kicker+intro, category filter tabs, active category description,
   one featured/rail panel per category (toggled via the shared
   data-sw-tab-group handler, same mechanism as the Services showcase
   and differentiators tabs above). */
.sw-insights-showcase__intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: end;
	margin-bottom: 56px;
}
.sw-insights-showcase__intro .h1 {
	font-size: 42px;
	line-height: 1.15;
}
.sw-insights-showcase__intro p {
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
	color: #4A5568;
	max-width: 460px;
}
.sw-insights-showcase__cats {
	display: flex;
	gap: 32px;
	border-bottom: 1px solid #E5E9EF;
	margin-bottom: 20px;
}
.sw-insights-showcase__cat-tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	padding: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8892A3;
	white-space: nowrap;
	transition: color 0.25s ease;
}
.sw-insights-showcase__cat-tab.is-active {
	border-bottom-color: #E10600;
	color: #E10600;
}
.sw-insights-showcase__cat-desc {
	display: none;
	margin: 0 0 56px;
	font-size: 15px;
	line-height: 1.6;
	color: #4A5568;
	max-width: 640px;
	min-height: 48px;
}
.sw-insights-showcase__cat-desc.is-active {
	display: block;
}
.sw-insights-showcase__panel {
	display: none;
}
.sw-insights-showcase__panel.is-active {
	display: block;
}
/* Empty-state variant of .sw-insight-featured — same 520px footprint
   as the real featured card so the section never collapses when a
   category (or the whole install, pre-seed) has no articles yet. */
.sw-insight-featured--empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	text-align: center;
	padding: 0 48px;
	background: #F7F8FA;
	border: 1px dashed #D3D9E2;
}
.sw-insight-featured--empty::after {
	content: none;
}
.sw-insights-showcase__empty {
	margin: 0;
	font-size: 15px;
	color: #8892A3;
}
.sw-insights-showcase__empty-admin-hint {
	margin: 0;
	font-size: 13px;
	color: #8895AC;
	max-width: 480px;
}
.sw-insights-showcase__empty-admin-hint a {
	font-weight: 700;
}

.sw-insight-featured {
	position: relative;
	display: block;
	border-radius: 10px;
	overflow: hidden;
	height: 520px;
	margin-bottom: 88px;
	color: inherit;
}
.sw-insight-featured img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sw-insight-featured::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 29, 58, 0.1) 20%, rgba(0, 29, 58, 0.92) 100%);
	pointer-events: none;
}
.sw-insight-featured__overlay {
	position: absolute;
	left: 48px;
	right: 48px;
	bottom: 48px;
	z-index: 1;
	color: #fff;
}
.sw-insight-featured__cat {
	font-size: 12px;
	font-weight: 700;
	color: #FF8A85;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.sw-insight-featured__overlay .h1 {
	margin: 14px 0 0;
	font-size: 40px;
	line-height: 1.15;
	max-width: 720px;
}
.sw-insight-featured__cta {
	display: inline-block;
	margin-top: 18px;
	font-size: 15px;
	font-weight: 700;
}
.sw-insights-showcase__rail-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 28px;
}
.sw-insights-showcase__rail-head h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #001D3A;
}
.sw-insights-showcase__swipe-hint {
	font-size: 13px;
	color: #8892A3;
	font-weight: 600;
}
.sw-insights-showcase__rail {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	padding-bottom: 24px;
	scroll-snap-type: x mandatory;
}
.sw-insights-showcase__rail .sw-insight-card {
	flex: 0 0 320px;
	scroll-snap-align: start;
}

/* Homepage Resources intro (Spectrum Homepage.dc.html:447-451) */
.sw-front-page__resources-intro {
	margin-bottom: 48px;
}
.sw-front-page__resources-intro .h2 {
	margin: 0;
	font-size: 36px;
	max-width: 620px;
	line-height: 1.2;
	color: #001D3A;
}

/* Library / Knowledge (Spectrum Homepage.dc.html:395-411) */
.sw-library-section {
	background: #001D3A;
	padding: 100px 56px;
	margin-top: 120px;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 64px;
	align-items: center;
}
.sw-library-section .h2 {
	color: #fff;
	font-size: 36px;
	max-width: 520px;
}
.sw-library-section__main p {
	color: #AEB9CB;
	font-size: 16px;
	line-height: 1.7;
	max-width: 480px;
	margin: 0 0 28px;
}
.sw-library-section__portal {
	border-left: 1px solid rgba(255, 255, 255, 0.14);
	padding-left: 48px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sw-library-section__portal-title {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	margin: 0 0 20px;
}
.sw-library-section__portal a {
	color: #fff;
	font-size: 15px;
	font-weight: 700;
}

/* CTA band (template-parts/sections/cta-band.php) — two confirmed
 * treatments: dimmed 0.28-opacity background (service pages) vs.
 * full-opacity + .zoom (About page) — see the file's own docblock. */
.sw-cta-band {
	position: relative;
	overflow: hidden;
	background: #001D3A;
}
.sw-cta-band__image {
	position: absolute;
	inset: 0;
}
.sw-cta-band__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sw-cta-band--dim .sw-cta-band__image {
	opacity: 0.28;
}
.sw-cta-band__scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(15deg, rgba(0, 29, 58, 0.94) 0%, rgba(0, 29, 58, 0.6) 60%, rgba(0, 29, 58, 0.35) 100%);
}
.sw-cta-band--dim .sw-cta-band__scrim {
	background: linear-gradient(90deg, rgba(0, 29, 58, 0.96) 0%, rgba(0, 29, 58, 0.7) 100%);
}
.sw-cta-band__content {
	position: relative;
	padding-top: 120px;
	padding-bottom: 120px;
	max-width: 720px;
}
.sw-cta-band__content .h1 {
	color: #fff;
	font-size: 40px;
	margin-bottom: 18px;
}
.sw-cta-band__body {
	color: #AEB9CB;
	font-size: 16px;
	line-height: 1.75;
	margin: 0 0 32px;
}
.sw-cta-band__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

/* Split-editorial hero (template-parts/sections/hero-split.php) —
 * confirmed distinct from the full-bleed hero, used by resource pages
 * (1.1fr/0.9fr columns) and the About page (1.05fr/1fr columns). */
.sw-hero-split {
	background: #001D3A;
}
.sw-hero-split__grid {
	display: grid;
	gap: 64px;
	align-items: center;
}
.sw-hero-split--resource .sw-hero-split__grid {
	grid-template-columns: 1.1fr 0.9fr;
}
.sw-hero-split--about .sw-hero-split__grid {
	grid-template-columns: 1.05fr 1fr;
}
.sw-hero-split__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.sw-hero-split__crumbs {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	font-weight: 600;
	color: #8895AC;
	flex-wrap: wrap;
}
.sw-hero-split__crumbs a {
	color: #8895AC;
}
.sw-hero-split__crumbs .is-current {
	color: #fff;
}
.sw-hero-split .h1 {
	color: #fff;
	font-size: 58px;
	line-height: 1.05;
}
.sw-hero-split__subtitle {
	margin: 0;
	color: #8895AC;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.03em;
}
.sw-hero-split__intro {
	margin: 0;
	color: #E7EAF0;
	font-size: 18px;
	line-height: 1.65;
	max-width: 540px;
}
.sw-hero-split__image {
	position: relative;
	align-self: stretch;
	min-height: 460px;
}
.sw-hero-split__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Expert Support / Expert CTA (shared pattern) */
.sw-expert-support-section,
.sw-page-about__expert-cta,
.sw-single-insight__cta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
	padding-top: 96px;
	padding-bottom: 96px;
}
.sw-single-insight__cta {
	grid-template-columns: 1.2fr 1fr;
	background: #F2F4F7;
	padding-top: 80px;
	padding-bottom: 80px;
}
.sw-expert-support-section p,
.sw-page-about__expert-cta p {
	font-size: 16px;
	line-height: 1.7;
	color: #4A5568;
	margin: 0 0 28px;
}

/* Other Resources (C-TPAT.dc.html) */
.sw-other-resources-section {
	display: grid;
	grid-template-columns: 0.85fr 1.35fr;
	gap: 80px;
	align-items: start;
	padding-top: 110px;
	padding-bottom: 110px;
}
.sw-other-resources-section__intro .h2 {
	font-size: 30px;
	color: #001D3A;
}
.sw-other-resources-section__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 56px;
}
.sw-other-resources-section__row {
	display: grid;
	grid-template-columns: 34px 1fr auto;
	gap: 14px;
	align-items: center;
	padding: 20px 0;
	border-top: 1px solid #E5E9EF;
}
.sw-other-resources-section__num {
	font-size: 12px;
	font-weight: 700;
	color: #E10600;
}
.sw-other-resources-section__title {
	font-size: 17px;
	font-weight: 700;
	color: #001D3A;
}

/* Visual Explanation (Agencia Aduanal.dc.html:05) */
.sw-visual-explanation-section {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 24px;
	padding-bottom: 120px;
}
.sw-visual-explanation-section__image {
	border-radius: 10px;
	overflow: hidden;
	height: 520px;
}
.sw-visual-explanation-section__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Why Spectrum (Agencia Aduanal.dc.html:06) */
.sw-why-spectrum-section {
	background: #001D3A;
	padding: 120px 56px;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 80px;
	align-items: start;
}
.sw-why-spectrum-section .h1 {
	color: #fff;
	font-size: 40px;
	margin-bottom: 28px;
}
.sw-why-spectrum-section__cert-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
.sw-why-spectrum-section__cert-grid a {
	display: block;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 10px;
	padding: 22px;
}
.sw-why-spectrum-section__cert-grid span {
	display: block;
	font-size: 17px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 8px;
}
.sw-why-spectrum-section__cert-grid p {
	margin: 0;
	font-size: 13px;
	line-height: 1.55;
	color: #AEB9CB;
}
.sw-why-spectrum-section__advantage {
	display: grid;
	grid-template-columns: 44px 1fr;
	gap: 18px;
	padding: 28px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.sw-why-spectrum-section__advantage > span {
	font-size: 13px;
	font-weight: 700;
	color: #E10600;
	padding-top: 4px;
}
.sw-why-spectrum-section__advantage h3 {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
}
.sw-why-spectrum-section__advantage p {
	margin: 0;
	font-size: 15px;
	line-height: 1.7;
	color: #AEB9CB;
}

/* Newsletter section (Spectrum Homepage.dc.html:736) */
.sw-newsletter-section {
	background: #00142B;
	padding-top: 80px;
	padding-bottom: 80px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	flex-wrap: wrap;
}
.sw-newsletter-section__intro {
	max-width: 480px;
}
.sw-newsletter-section .h2 {
	color: #fff;
	font-size: 28px;
	margin: 0 0 12px;
}
.sw-newsletter-form {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	flex: 1 1 280px;
	max-width: 480px;
}
.sw-newsletter-form__body {
	color: #AEB9CB;
	font-size: 15px;
	line-height: 1.6;
	flex: 1 1 100%;
	margin: 0 0 4px;
}
.sw-newsletter-form__row {
	display: flex;
	gap: 12px;
	flex: 1 1 100%;
}
.sw-newsletter-form__row input {
	flex: 1 1 200px;
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.25);
	color: #fff;
}

/* Contact teaser section (Spectrum Homepage.dc.html:520-566) */
.sw-contact-teaser-section {
	background: #F2F4F7;
	padding-top: 120px;
	padding-bottom: 120px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
}
.sw-contact-teaser-section .h2 {
	font-size: 38px;
	color: #001D3A;
}
.sw-contact-teaser-section__body {
	color: #4A5568;
	font-size: 16px;
	line-height: 1.7;
	max-width: 440px;
	margin: 0 0 40px;
}
.sw-contact-teaser-form {
	background: #fff;
	border-radius: 10px;
	padding: 36px;
	border: 1px solid #E5E9EF;
}
.sw-contact-teaser-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}
.sw-contact-teaser-form label span,
.sw-contact-form label span {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: #001D3A;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: 8px;
}
.sw-contact-teaser-form__message {
	display: block;
	margin-bottom: 28px;
}
.sw-contact-teaser-section__map {
	border-radius: 10px;
	overflow: hidden;
	height: 340px;
	margin-bottom: 36px;
}
.sw-contact-teaser-section__map img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sw-contact-teaser-section__location-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	border-top: 1px solid #E5E9EF;
}
.sw-contact-teaser-section__location-row span {
	color: #001D3A;
	font-size: 15px;
	font-weight: 700;
}
.sw-contact-teaser-section__location-row a {
	color: #4A5568;
	font-size: 14px;
	font-weight: 600;
}
.sw-contact-teaser-section__email {
	margin: 28px 0 0;
	color: #4A5568;
	font-size: 14px;
	line-height: 1.7;
}

/* Service page intro (Agencia Aduanal.dc.html:02 INTRODUCTION) */
.sw-page-service__intro {
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	gap: 80px;
	align-items: start;
	padding-top: 120px;
	padding-bottom: 120px;
}
.sw-page-service__intro h2 {
	font-size: 40px;
	color: #001D3A;
}
.sw-page-service__intro-side p {
	font-size: 16px;
	line-height: 1.75;
	color: #4A5568;
}
.sw-page-service__meta-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 0;
	border-top: 1px solid #E5E9EF;
}
.sw-page-service__meta-label {
	font-size: 12px;
	font-weight: 700;
	color: #8892A3;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.sw-page-service__meta-value {
	font-size: 15px;
	font-weight: 700;
	color: #001D3A;
}

/* Insight article (Insight Agencia Aduanal.dc.html) */
.sw-single-insight__hero {
	background: #001D3A;
	max-width: 1080px;
	padding-top: 88px;
	padding-bottom: 56px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.sw-single-insight__crumbs {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	font-weight: 600;
	color: #8895AC;
	flex-wrap: wrap;
}
.sw-single-insight__crumbs a {
	color: #8895AC;
}
.sw-single-insight__hero .h1 {
	color: #fff;
	font-size: 44px;
	line-height: 1.14;
}
.sw-single-insight__lead {
	color: #E7EAF0;
	font-size: 19px;
	line-height: 1.65;
	max-width: 760px;
	margin: 0;
}
.sw-single-insight__meta {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
}
.sw-single-insight__meta-label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: #E10600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 5px;
}
.sw-single-insight__lead-image {
	background: #001D3A;
	max-width: 1080px;
}
.sw-single-insight__lead-image img {
	width: 100%;
	height: 440px;
	object-fit: cover;
	border-radius: 10px;
	transform: translateY(48px);
}
.sw-single-insight__body {
	max-width: 1080px;
	padding-top: 96px;
}
.sw-single-insight__body p {
	font-size: 16px;
	line-height: 1.78;
	color: #4A5568;
	max-width: 900px;
}

/* Privacy notice (Aviso de Privacidad.dc.html) */
.sw-page-privacy__section {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 40px;
	align-items: start;
	padding: 48px 0;
	border-top: 1px solid #E5E9EF;
}
.sw-page-privacy__numeral {
	font-size: 26px;
	font-weight: 800;
	color: #E10600;
}
.sw-page-privacy__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 40px;
	margin-top: 14px;
}
.sw-page-privacy__list-item {
	padding: 14px 0;
	border-top: 1px solid #E5E9EF;
	font-size: 16px;
	font-weight: 600;
	color: #001D3A;
}
.sw-page-privacy__consent {
	background: #001D3A;
	padding-top: 96px;
	padding-bottom: 96px;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 72px;
	align-items: center;
	color: #fff;
}
.sw-page-privacy__consent .h2 {
	color: #fff;
}
.sw-page-privacy__updated {
	color: #8895AC;
	font-size: 14px;
	font-weight: 600;
}

/* =========================================================
 * Hardening pass — global header/nav chrome and .btn base styles.
 *
 * These were never ported: Phase 1's "global tokens" pass only captured
 * the shared <style> block's rules (which in the source are ONLY the
 * :hover/:active states for .btn/.btn-1/.btn-2 and .mega-panel's
 * animation — Spectrum Homepage.dc.html:31-34/28). The actual visible
 * appearance (background, color, padding, the whole sticky navy nav bar)
 * was applied as a repeated INLINE style on each of the 22 exported
 * pages' nav markup, and was never centralized here when header.php
 * consolidated that markup into real classes in Phase 1. The practical
 * effect: every .btn/.btn-1/.btn-2 rendered as a bare unstyled link, and
 * the header rendered with no background/position at all — white text
 * (and a white, `filter:invert(1)` logo) on a white body background is
 * effectively invisible. This is the root cause found for "the homepage
 * becomes blank" — it isn't page-specific, it's sitewide; it just reads
 * as "blank" because the header (the first thing visible on any page,
 * including after clicking the 'Inicio' link) disappears.
 * ========================================================= */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 30px; /* verified: C-TPAT.dc.html:347 (.btn-1), Insights.dc.html:311 (.btn-2) */
	border-radius: 6px;
	font-size: 16px;
	font-weight: 700;
	font-family: 'Plus Jakarta Sans', sans-serif;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	white-space: nowrap;
}
.btn-1 {
	/* verified identical (background/color only vary by none) across
	   every .btn-1 instance checked: Agencia Aduanal.dc.html:101/169/193/393/413/471 */
	background: #E10600;
	color: #fff;
}
.btn-2 {
	/* light-background variant — verified: Insight Agencia Aduanal.dc.html:221, Insights.dc.html:311 */
	background: transparent;
	border-color: #001D3A;
	color: #001D3A;
}
/* dark-background variant — verified: Spectrum Homepage.dc.html:200/481,
   Agencia Aduanal.dc.html:194/394 (used wherever .btn-2 sits on the navy
   hero/library-section background rather than a light section). */
.sw-hero--home .btn-2,
.sw-hero-split .btn-2,
.sw-library-section .btn-2 {
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

/* Nav-compact CTA sizing — verified: Spectrum Homepage.dc.html:101
   ("Hablemos" in the desktop nav bar / mobile drawer uses a smaller
   size than the same button placed in page body content). */
.sw-header__aside .btn,
.sw-mobile-nav__aside .btn {
	padding: 10px 18px;
	font-size: 13px;
}

/* ---- Header / nav (Spectrum Homepage.dc.html:90-97) ---- */
.sw-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: #001D3A;
}
.sw-header__bar.pad {
	display: flex;
	align-items: center;
	gap: 20px;
	padding: 14px 24px;
	max-width: none; /* the nav bar itself is full-width in the source; only its inner content areas use the 1440px .pad rule */
}
.sw-header__logo {
	display: block;
	flex-shrink: 0;
	margin-right: auto;
	line-height: 0;
}
.sw-header__logo img {
	height: 26px;
	object-fit: contain;
	filter: brightness(0) invert(1);
}
.sw-header__nav {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-shrink: 0;
}
.sw-header__link,
.sw-header__trigger {
	display: inline-flex;
	align-items: center;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	font-family: 'Plus Jakarta Sans', sans-serif;
	white-space: nowrap;
	padding: 6px 0;
	cursor: pointer;
	transition: color 0.2s ease;
}
.sw-header__link:hover,
.sw-header__trigger:hover,
.sw-header__trigger[aria-expanded="true"] {
	color: #AEB9CB;
}
.sw-header__trigger[aria-expanded="true"] .nav-caret {
	transform: rotate(180deg);
}
.sw-header__aside {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}
.sw-header__hamburger {
	background: none;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	padding: 8px;
}
.sw-header__hamburger-bar {
	display: block;
	width: 22px;
	height: 2px;
	background: #fff;
}

/* ---- Mega panel (Spectrum Homepage.dc.html:114-155) ---- */
.sw-header__item .mega-panel {
	/* Positioned relative to .sw-header (sticky counts as a positioned
	   containing block) rather than the individual trigger, so the panel
	   spans the header the way the source's own full-width panel does,
	   regardless of which nav item (left, middle, or right) opened it.
	   BUG FIX (Live Preview pass): .sw-header__item previously also had
	   `position: relative`, which made IT (not .sw-header) the nearest
	   positioned ancestor — so `width: 100%` below resolved against a
	   single nav item's own width (~100px) instead of the full header,
	   rendering the panel as a barely-visible sliver. That's what looked
	   like an "empty white rectangle" and a non-functioning dropdown:
	   the panel WAS opening, just squeezed to almost nothing. Removed
	   .sw-header__item's position so .sw-header (sticky) is once again
	   the actual containing block. */
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1440px;
	/* Defensive hardening (Live Preview pass) — explicit rather than
	   relying on stacking-context defaults, in case any ancestor this
	   theme doesn't control (e.g. a WordPress/Customizer wrapper)
	   introduces its own stacking or clipping context. */
	z-index: 61;
	overflow: visible;
	max-height: none;
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	background: #fff;
	box-shadow: 0 18px 44px rgba(0, 29, 58, 0.14);
	padding: 44px 56px;
}
.sw-mega-panel__grid a {
	color: inherit;
}
/* Empty-state message (no sw_service/sw_resource posts published yet —
   e.g. before the manual content seed has been run/published). Was
   previously unstyled plain <p> text; not a redesign, just applying the
   same body-copy tokens already used everywhere else so a legitimately
   pre-content panel reads as "no services published yet" rather than
   looking like an unstyled/broken blank area. */
.sw-mega-panel__empty {
	margin: 0;
	color: #4A5568;
	font-size: 15px;
	font-weight: 600;
}

/* ---- Language switcher (Spectrum Homepage.dc.html:99-101) ---- */
.sw-lang-switcher {
	display: flex;
	align-items: center;
	gap: 8px;
	padding-left: 10px;
	border-left: 1px solid rgba(255, 255, 255, 0.18);
	flex-shrink: 0;
}
.sw-lang-switcher__link {
	color: #5F6B80;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
}
.sw-lang-switcher__link.is-active {
	color: #fff;
}

/* ---- Mobile menu / accordion (Spectrum Homepage.dc.html:159-190) ----
 * Note: the source's mobile drawer is a full takeover of the nav bar's
 * own width (`.mobile-only`, not a fixed overlay), matching the
 * "accordion, not full-screen takeover" note already in mobile-nav.php.
 */
.sw-header__mobile-menu {
	background: #00142B;
	padding: 8px 24px 28px;
	max-height: 75vh;
	overflow-y: auto;
}
.sw-mobile-nav {
	display: flex;
	flex-direction: column;
}
.sw-mobile-nav__item {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.sw-mobile-nav__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: none;
	border: none;
	padding: 18px 0;
	min-height: 52px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	font-family: 'Plus Jakarta Sans', sans-serif;
	cursor: pointer;
}
.sw-mobile-nav__toggle [data-sw-mobile-sign] {
	color: #E10600;
	font-size: 20px;
}
.sw-mobile-nav__item > div[id] {
	padding: 0 0 18px 12px;
}
.sw-mobile-nav__item > div[id] .sw-mega-panel__grid,
.sw-mobile-nav__item > div[id] .sw-mega-panel__row {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.sw-mobile-nav__item > div[id] a {
	color: #AEB9CB;
	font-size: 15px;
	font-weight: 600;
	padding: 6px 0;
}
.sw-mobile-nav__link {
	display: block;
	padding: 18px 0;
	min-height: 52px;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.sw-mobile-nav__aside {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 22px 0;
}

@media (max-width: 1000px) {
	.sw-header__bar.pad {
		padding: 14px 24px;
	}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.marquee-track {
		animation: none;
	}
	.logo-marquee {
		animation-duration: 300s;
	}
	.mega-panel {
		animation: none;
	}
	.insight-rail a:hover image-slot,
	.insight-rail a:hover img {
		transform: none;
	}
	.arrow-link:hover span {
		transform: none;
	}
	.btn:active,
	.card-lift:hover,
	.card-lift:active {
		transform: none;
	}
	.nav-caret,
	.card-lift,
	.field-in,
	.swap {
		transition: none;
	}
	.note-in {
		animation: none;
	}
	.spin {
		animation-duration: 2s;
	}
}