/*
 * Data Center page template (page-datacenter.php).
 * Fonts (barlow, stix-two-text) load sitewide via Adobe Fonts.
 *
 * Selectors are prefixed with .datacenter-page because the Elementor kit
 * (post-6.css) styles bare elements at (0,1,1) — `.elementor-kit-6 h2` is
 * uppercase, `.elementor-kit-6 a` is white serif, `.elementor-kit-6 button`
 * is red apotek — and single-class rules lose to it.
 */

.site-main.datacenter-page {
	margin: 0;
	padding: 0;
	float: none;
	width: 100%;
	overflow-x: clip;
	--dc-navy: #001f3f;
	--dc-navy-dark: #001b3e;
	--dc-red: #e9273f;
	--dc-red-dark: #c81830;
	--dc-body: #42484e;
	--dc-font-sans: "barlow", "Barlow", sans-serif;
	--dc-font-serif: "stix-two-text", "STIX Two Text", Georgia, serif;
	font-family: var(--dc-font-sans);
}

/* Undo the Elementor kit's global heading/link treatment inside this page. */
.site-main.datacenter-page h1,
.site-main.datacenter-page h2,
.site-main.datacenter-page h3 {
	text-transform: none;
	letter-spacing: normal;
}
.site-main.datacenter-page a {
	font-family: inherit;
	color: inherit;
}

.datacenter-page .dc-container {
	max-width: 1290px;
	margin: 0 auto;
	padding: 0 20px;
}

/* ------------------------------------------------------------ Buttons. */

.datacenter-page .dc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 45px;
	padding: 0 40px;
	border-radius: 4px;
	font-family: var(--dc-font-sans);
	font-size: 0.92rem;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.datacenter-page .dc-btn--red {
	background: var(--dc-red);
	color: #fff;
}
.datacenter-page .dc-btn--red:hover,
.datacenter-page .dc-btn--red:focus {
	background: var(--dc-red-dark);
	color: #fff;
}
.datacenter-page .dc-btn--outline-white {
	border: 1px solid #fff;
	color: #fff;
	background: transparent;
}
.datacenter-page .dc-btn--outline-white:hover,
.datacenter-page .dc-btn--outline-white:focus {
	background: #fff;
	color: var(--dc-navy);
}
.datacenter-page .dc-btn--outline-navy {
	border: 1px solid var(--dc-navy);
	color: var(--dc-navy);
	background: transparent;
}
/* Fills red on hover, per the design's cursor annotation on the petition button. */
.datacenter-page .dc-btn--outline-navy:hover,
.datacenter-page .dc-btn--outline-navy:focus {
	background: var(--dc-red);
	border-color: var(--dc-red);
	color: #fff;
}

/* ---------------------------------------------------- Section headers. */

.datacenter-page .dc-section-header {
	max-width: 1103px;
	margin: 0 auto;
	text-align: center;
}
.datacenter-page .dc-section-header__title {
	margin: 0;
	font-family: var(--dc-font-sans);
	font-size: clamp(2rem, 3.4vw, 3rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--dc-navy);
}
.datacenter-page .dc-section-header__sub,
.datacenter-page .dc-section-header__sub p {
	margin: 0;
	font-family: var(--dc-font-serif);
	font-size: 1.16rem;
	line-height: 1.5;
	color: var(--dc-body);
}
.datacenter-page .dc-section-header__sub {
	margin-top: 24px;
}
.datacenter-page .dc-section-header--dark .dc-section-header__title,
.datacenter-page .dc-section-header--dark .dc-section-header__sub,
.datacenter-page .dc-section-header--dark .dc-section-header__sub p {
	color: #fff;
}

/* ------------------------------------------------- Carousel machinery. */

.datacenter-page [data-dc-track] {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.datacenter-page [data-dc-track]::-webkit-scrollbar { display: none; }
.datacenter-page [data-dc-item] { scroll-snap-align: start; }

.datacenter-page .dc-carousel-controls {
	display: flex;
	gap: 16px;
}
.datacenter-page .dc-arrow {
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	font-size: 0;
	cursor: pointer;
	transition: opacity .15s ease;
}
.datacenter-page .dc-arrow:hover { background-color: transparent; }
.datacenter-page .dc-arrow:disabled { opacity: .35; cursor: default; }
.datacenter-page .dc-arrow--navy  { background-image: url("../images/datacenter/arrow-outline-navy.svg"); }
.datacenter-page .dc-arrow--white { background-image: url("../images/datacenter/arrow-outline-white.svg"); }
/* Arrows are outline at rest and fill red on hover (per the design's cursor annotations). */
.datacenter-page .dc-arrow--navy:hover:not(:disabled),
.datacenter-page .dc-arrow--white:hover:not(:disabled),
.datacenter-page .dc-arrow--navy:focus-visible:not(:disabled),
.datacenter-page .dc-arrow--white:focus-visible:not(:disabled) {
	background-image: url("../images/datacenter/arrow-solid-red.svg");
}
.datacenter-page .dc-arrow[data-dc-next] { transform: scaleX(-1); }

.datacenter-page .dc-dots {
	display: flex;
	align-items: center;
	gap: 6px;
}
.datacenter-page .dc-dots button {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #444e59;
	font-size: 0;
	cursor: pointer;
	transition: width .2s ease, background-color .2s ease;
}
.datacenter-page .dc-dots--light button { background: #d6dce3; }
.datacenter-page .dc-dots button.is-active {
	width: 24px;
	background: var(--dc-red);
}

.datacenter-page .dc-carousel-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 45px;
}

/* Hide controls entirely when the track doesn't overflow. */
.datacenter-page [data-dc-carousel].dc-no-overflow .dc-carousel-footer,
.datacenter-page [data-dc-carousel].dc-no-overflow .dc-carousel-controls,
.datacenter-page [data-dc-carousel].dc-no-overflow .dc-dots {
	display: none;
}

/* ------------------------------------------------------- Play button. */

.datacenter-page .dc-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 78px;
	height: 78px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--dc-red);
	box-shadow: 0 0 0 14px rgba(233, 39, 63, 0.18);
	transition: background-color .15s ease;
}
.datacenter-page .dc-play::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 53%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #fff;
}
.datacenter-page a:hover .dc-play { background: var(--dc-red-dark); }

/* -------------------------------------------------------------- Hero. */

/* The bg image is the design's flattened hero composite (navy + fibers + gradients). */
.datacenter-page .dc-hero {
	position: relative;
	z-index: 2;
	margin-top: 80px;
	min-height: 540px;
	overflow: hidden;
	background-color: #041425;
	background-image: var(--dc-hero-bg);
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
}
.datacenter-page .dc-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1290px;
	margin: 0 auto;
	padding: 85px 20px;
	display: flex;
	justify-content: flex-end;
}
.datacenter-page .dc-hero__content {
	width: min(770px, 100%);
	margin-right: 2%;
	text-align: center;
	color: #fff;
}
.datacenter-page .dc-hero__title {
	margin: 0;
	font-family: var(--dc-font-sans);
	font-size: clamp(2.6rem, 5vw, 4.5rem);
	font-weight: 700;
	line-height: 1.16;
	color: #fff;
}
.datacenter-page .dc-hero__body {
	margin-top: 38px;
}
.datacenter-page .dc-hero__body p {
	margin: 0;
	font-family: var(--dc-font-serif);
	font-size: 1.17rem;
	line-height: 1.53;
	color: #fff;
}
.datacenter-page .dc-hero__body p + p { margin-top: 1.6em; }
.datacenter-page .dc-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-top: 38px;
}
.datacenter-page .dc-hero__buttons .dc-btn { min-width: 253px; }
/* Bottom-flush with the band, head near the top, whatever the hero's height. */
.datacenter-page .dc-hero__headshot {
	position: absolute;
	left: -2%;
	bottom: 0;
	z-index: 3;
	height: calc(100% - 16px);
	width: auto;
	pointer-events: none;
}

/* --------------------------------------------- "Back room deal" band. */

/* bg-deal-band.jpg is the design's flattened band (gradient + texture streaks). */
.datacenter-page .dc-deal {
	position: relative;
	z-index: 1;
	background: linear-gradient(235deg, #051525 41.7%, #134f8b 112.9%);
	background-image: url("../images/datacenter/bg-deal-band.jpg");
	background-size: cover;
	background-position: center;
}
.datacenter-page .dc-deal__inner {
	position: relative;
	padding-top: 125px;
	padding-bottom: 90px;
}
.datacenter-page .dc-deal__slide {
	flex: 0 0 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 60px;
	padding: 0 20px;
}
.datacenter-page .dc-deal__text {
	max-width: 527px;
	padding-top: 8px;
}
.datacenter-page .dc-deal__title {
	margin: 0;
	max-width: 489px; /* wraps after "back", like the design */
	font-family: var(--dc-font-sans);
	font-size: clamp(1.65rem, 2.65vw, 2.375rem);
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}
.datacenter-page .dc-deal__content,
.datacenter-page .dc-deal__content p {
	font-family: var(--dc-font-serif);
	font-size: 1.16rem;
	line-height: 1.5;
	color: #d3d3d3;
	margin: 0;
}
.datacenter-page .dc-deal__content { margin-top: 25px; }
.datacenter-page .dc-deal__content p + p { margin-top: 1em; }
.datacenter-page .dc-deal__media {
	position: relative;
	flex: 0 0 min(608px, 48%);
	border-radius: 15px;
	overflow: hidden;
}
/* Slide images are flattened design exports — treatment is baked in. */
.datacenter-page .dc-deal__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 608 / 353;
	object-fit: cover;
}
.datacenter-page .dc-deal__media .dc-play { z-index: 1; }
.datacenter-page .dc-deal__media-link {
	display: block;
	position: relative;
}
.datacenter-page .dc-deal__controls { margin-top: 40px; }
.datacenter-page .dc-deal .dc-dots {
	position: absolute;
	right: 40px;
	bottom: 104px;
}

/* ----------------------------------------------------- Feature video. */

/* Full-width video band below the deal slider — same light band as the
   petitions section so the page keeps its navy/gray/white rhythm. */
.datacenter-page .dc-feature {
	background: #f4f6fa;
	padding: 60px 0 70px;
}
.datacenter-page .dc-video-card--wide {
	max-width: 960px;
	margin: 0 auto;
	aspect-ratio: 16 / 9;
}
.datacenter-page .dc-feature .dc-section-header + .dc-video-card--wide { margin-top: 32px; }

@media (max-width: 768px) {
	.datacenter-page .dc-feature { padding: 45px 0 55px; }
	.datacenter-page .dc-feature .dc-section-header + .dc-video-card--wide { margin-top: 24px; }
}

/* -------------------------------------------------------- 5-step plan. */

.datacenter-page .dc-plan {
	position: relative;
	overflow: hidden;
	background: #fff;
	padding: 85px 0 95px;
}
/* Bottom-flush with the section, like the design. */
.datacenter-page .dc-plan__cutout {
	position: absolute;
	left: max(-71px, -5vw);
	bottom: 0;
	z-index: 0;
	width: min(575px, 40vw);
	height: auto;
	pointer-events: none;
}
.datacenter-page .dc-plan .dc-container { position: relative; z-index: 1; }
.datacenter-page .dc-plan__logo {
	display: block;
	margin: 0 auto 8px;
	width: 328px;
	max-width: 70%;
	height: auto;
}
.datacenter-page .dc-plan .dc-section-header__title { max-width: 695px; margin-left: auto; margin-right: auto; }
.datacenter-page .dc-plan__cards { margin-top: 55px; }
.datacenter-page .dc-plan__row {
	display: flex;
	flex-wrap: nowrap; /* cards shrink to keep the 2+3 rows below 1440 */
	justify-content: center;
	gap: 8px;
}
.datacenter-page .dc-plan__row + .dc-plan__row { margin-top: 10px; }
.datacenter-page .dc-step-card {
	position: relative;
	flex: 0 1 410px;
	max-width: 100%;
	min-height: 200px;
	margin-top: 30px; /* room for the overlapping number badge */
	padding: 60px 20px 28px;
	background: #fff;
	border: 0.5px solid #dde2e8;
	border-radius: 10px;
	box-shadow: 0 4px 15.6px 0 rgba(19, 27, 42, 0.09);
	text-align: center;
}
.datacenter-page .dc-step-card__number {
	position: absolute;
	top: -30px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--dc-red);
	color: #fff;
	font-family: var(--dc-font-sans);
	font-size: 2rem;
	font-weight: 700;
}
.datacenter-page .dc-step-card__title {
	margin: 0;
	font-family: var(--dc-font-sans);
	font-size: 1.69rem;
	font-weight: 700;
	line-height: 1.17;
	color: var(--dc-navy);
}
.datacenter-page .dc-step-card__text {
	margin: 10px auto 0;
	max-width: 324px;
	font-family: var(--dc-font-serif);
	font-size: 1rem;
	line-height: 1.31;
	color: var(--dc-body);
}

/* ---------------------------------------------------------- Petitions. */

.datacenter-page .dc-petitions {
	background: #f4f6fa;
	padding: 100px 0 110px;
}
.datacenter-page .dc-petitions__track,
.datacenter-page .dc-petitions .dc-carousel-footer {
	max-width: 1034px;
	margin-left: auto;
	margin-right: auto;
}
.datacenter-page .dc-petitions__track {
	gap: 30px;
	margin-top: 60px;
	align-items: stretch; /* equal-height cards regardless of title/subtitle length */
	padding: 22px 4px; /* keep card shadows unclipped inside the scroll area */
}
.datacenter-page .dc-petition-card {
	flex: 0 0 322px;
	display: flex;
	flex-direction: column;
	padding: 20px 25px 25px;
	background: #fff;
	border-radius: 9px;
	box-shadow: 0 0 21.9px 0 rgba(6, 39, 73, 0.2);
}
.datacenter-page .dc-petition-card__title {
	margin: 0;
	font-family: var(--dc-font-sans);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.17;
	color: var(--dc-navy);
}
.datacenter-page .dc-petition-card__subtitle {
	margin: 10px 0 20px;
	font-family: var(--dc-font-serif);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--dc-body);
}
/* margin-top:auto pins the progress/meta/button group to the card bottom so
   the bars and buttons align across equal-height cards. */
.datacenter-page .dc-petition-card__progress {
	position: relative;
	height: 7px;
	margin-top: auto;
	border-radius: 100px;
	background: #eaeef5;
	overflow: hidden;
}
.datacenter-page .dc-petition-card__progress-fill {
	position: absolute;
	inset: 0 auto 0 0;
	border-radius: 100px;
	background: var(--dc-red);
}
.datacenter-page .dc-petition-card__meta {
	display: flex;
	justify-content: space-between;
	margin-top: 14px;
	font-family: var(--dc-font-sans);
	font-size: 0.75rem;
	color: var(--dc-body);
}
.datacenter-page .dc-petition-card__meta strong {
	font-weight: 700;
	color: var(--dc-navy);
}
/* The per-petition CTA copy is long — let it wrap instead of clipping at
   .dc-btn's fixed 45px height. */
.datacenter-page .dc-petition-card__btn {
	width: 100%;
	height: auto;
	min-height: 45px;
	margin-top: 14px;
	padding: 10px 12px;
	line-height: 1.3;
	text-align: center;
}
/* With the tally hidden the button directly follows the title/subtitle and
   takes over the bottom-anchoring itself (the progress bar carries it otherwise). */
.datacenter-page .dc-petition-card__title + .dc-petition-card__btn,
.datacenter-page .dc-petition-card__subtitle + .dc-petition-card__btn {
	margin-top: auto;
}

/* -------------------------------------- Communities video + story form. */

.datacenter-page .dc-community {
	position: relative;
	padding: 95px 0 105px;
	background-color: #fff;
}
.datacenter-page .dc-community::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--dc-community-bg);
	background-size: cover;
	background-position: center bottom;
	filter: grayscale(1);
	pointer-events: none;
}
.datacenter-page .dc-community::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, #fff 28%, rgba(255, 255, 255, 0.71) 62%, rgba(255, 255, 255, 0) 92%);
	pointer-events: none;
}
.datacenter-page .dc-community .dc-container {
	position: relative;
	z-index: 1;
	max-width: 1070px;
}
.datacenter-page .dc-community__intro {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}
.datacenter-page .dc-community__title {
	margin: 0;
	max-width: 547px;
	font-family: var(--dc-font-sans);
	font-size: clamp(2rem, 3.4vw, 3rem);
	font-weight: 700;
	line-height: 1.25;
	color: var(--dc-navy);
}
.datacenter-page .dc-community__body {
	margin: 0;
	max-width: 526px;
	font-family: var(--dc-font-serif);
	font-size: 1.16rem;
	line-height: 1.5;
	color: var(--dc-body);
}
.datacenter-page .dc-community__grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: 60px;
	align-items: start;
	margin-top: 60px;
}
.datacenter-page .dc-video-card {
	/* Sticks while the (taller) story-form column scrolls; the grid area caps it. */
	position: sticky;
	top: 24px;
	aspect-ratio: 553 / 314;
	border-radius: 15px;
	overflow: hidden;
	background: linear-gradient(140deg, #0d3560 0%, #001b3e 100%) center / cover no-repeat;
	background-size: cover;
	box-shadow: 0 10px 30px rgba(6, 39, 73, 0.25);
}
.datacenter-page .dc-video-card__link {
	position: absolute;
	inset: 0;
	display: block;
}
.datacenter-page .dc-video-card__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 40px 22px 16px;
	background: linear-gradient(to top, rgba(0, 10, 22, 0.75), rgba(0, 10, 22, 0));
	pointer-events: none;
}
.datacenter-page .dc-video-card__title {
	font-family: var(--dc-font-sans);
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
}
.datacenter-page .dc-video-card__meta {
	font-family: var(--dc-font-sans);
	font-size: 0.82rem;
	color: #b9c2cc;
}
.datacenter-page .dc-story-form {
	background: #fff;
	border-radius: 15px;
	border: 1px solid #e6eaf0;
	box-shadow: 0 10px 30px rgba(6, 39, 73, 0.12);
	padding: 24px;
}
.datacenter-page .dc-story-form__heading {
	margin: 0;
	font-family: var(--dc-font-sans);
	font-size: 0.94rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--dc-navy);
}
.datacenter-page .dc-story-form__sub {
	margin: 10px 0 4px;
	font-family: var(--dc-font-serif);
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--dc-body);
}

/* Gravity Forms overrides, scoped to the story panel. */
.datacenter-page .dc-story-form .gform_wrapper { margin: 0; }
.datacenter-page .dc-story-form .gform_wrapper .gform_fields { grid-row-gap: 18px; }
.datacenter-page .dc-story-form .gform_wrapper .gfield_label {
	font-family: var(--dc-font-sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #5c6670;
	margin-bottom: 6px;
}
/* Inputs keep aria-required; the design shows no "(Required)" text. */
.datacenter-page .dc-story-form .gform_wrapper .gfield_required { display: none; }
.datacenter-page .dc-story-form .gform_wrapper input[type="text"],
.datacenter-page .dc-story-form .gform_wrapper input[type="email"],
.datacenter-page .dc-story-form .gform_wrapper input[type="url"],
.datacenter-page .dc-story-form .gform_wrapper input[type="tel"],
.datacenter-page .dc-story-form .gform_wrapper textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid #d5dbe2;
	border-radius: 6px;
	background: #fff;
	font-family: var(--dc-font-sans);
	font-size: 0.9rem;
	color: #1c2430;
	text-transform: none;
}
.datacenter-page .dc-story-form .gform_wrapper input::placeholder,
.datacenter-page .dc-story-form .gform_wrapper textarea::placeholder {
	color: #9aa4af;
	text-transform: none;
}
.datacenter-page .dc-story-form .gform_wrapper textarea { min-height: 92px; }
.datacenter-page .dc-story-form .gform_wrapper input[type="file"] {
	width: 100%;
	padding: 9px 10px;
	border: 1px solid #d5dbe2;
	border-radius: 6px;
	font-family: var(--dc-font-sans);
	font-size: 0.85rem;
	color: #5c6670;
	background: #fff;
}
.datacenter-page .dc-story-form .gform_wrapper .gform_fileupload_rules {
	font-size: 0.72rem;
	color: #9aa4af;
}
.datacenter-page .dc-story-form .gform_footer { margin: 20px 0 0; padding: 0; }
.datacenter-page .dc-story-form .gform_wrapper input[type="submit"],
.datacenter-page .dc-story-form .gform_wrapper .gform_button {
	width: 100%;
	height: 47px;
	border: 0;
	border-radius: 6px;
	background: var(--dc-red);
	color: #fff;
	font-family: var(--dc-font-sans);
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: none;
	cursor: pointer;
	transition: background-color .15s ease;
}
.datacenter-page .dc-story-form .gform_wrapper input[type="submit"]:hover,
.datacenter-page .dc-story-form .gform_wrapper .gform_button:hover { background: var(--dc-red-dark); }

/* Consent checkbox (petition forms). */
.datacenter-page .dc-story-form .gfield--type-consent input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--dc-red);
}
.datacenter-page .dc-story-form .gfield--type-consent .gform-field-label--type-inline {
	font-family: var(--dc-font-sans);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--dc-body);
}
.datacenter-page .dc-story-form .gfield_consent_description {
	max-height: 96px;
	margin-top: 6px;
	padding: 0;
	border: 0;
	overflow-y: auto;
	font-family: var(--dc-font-sans);
	font-size: 0.72rem;
	line-height: 1.5;
	color: #9aa4af;
}

/* ------------------------------------------------------------- Modals. */

/* The overlay itself is the backdrop; the dialog reuses .dc-story-form for
   its Gravity Forms styling, with the panel chrome stripped below. */
.datacenter-page .dc-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(2, 16, 31, 0.62);
}
.datacenter-page .dc-modal[hidden] { display: none; }
.datacenter-page .dc-modal__dialog {
	position: relative;
	width: min(520px, 100%);
	max-height: calc(100vh - 40px);
	overflow-y: auto;
	background: #fff;
	border-radius: 15px;
	padding: 34px 30px 30px;
	box-shadow: 0 20px 60px rgba(0, 10, 22, 0.45);
}
.datacenter-page .dc-modal__close {
	position: absolute;
	top: 12px;
	right: 14px;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--dc-navy);
	font-family: var(--dc-font-sans);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}
.datacenter-page .dc-modal__close:hover,
.datacenter-page .dc-modal__close:focus {
	background: transparent;
	color: var(--dc-red);
}
.datacenter-page .dc-modal__title {
	margin: 0 24px 0 0;
	font-family: var(--dc-font-sans);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--dc-navy);
}
.datacenter-page .dc-modal__text {
	margin: 12px 0 0;
	font-family: var(--dc-font-serif);
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--dc-body);
}
.datacenter-page .dc-modal__form {
	margin-top: 18px;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}
body.dc-modal-locked { overflow: hidden; }

/* ------------------------------------------------ Inline video player. */

.datacenter-page .dc-video-card__iframe {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	border: 0;
}
.datacenter-page .dc-video-card.is-playing .dc-play,
.datacenter-page .dc-video-card.is-playing .dc-video-card__caption { display: none; }

/* -------------------------------------------------------- Social feed. */

.datacenter-page .dc-social {
	position: relative;
	background: var(--dc-navy-dark);
	padding: 95px 0 90px;
}
.datacenter-page .dc-social::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("../images/datacenter/texture-marble.jpg") center / cover no-repeat;
	filter: grayscale(1);
	opacity: 0.16;
	pointer-events: none;
}
.datacenter-page .dc-social .dc-container { position: relative; z-index: 1; }
.datacenter-page .dc-social__track {
	gap: 23px;
	margin-top: 60px;
	align-items: stretch;
	padding: 4px 0;
}
.datacenter-page .dc-social-card {
	flex: 0 0 295px;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 15px;
	padding: 11px 11px 0;
}
.datacenter-page .dc-social-card__media {
	position: relative;
	height: 224px;
	border-radius: 15px;
	overflow: hidden;
	background: linear-gradient(140deg, #12365e, #001b3e);
}
/* Class-targeted (not img:first-child) — on imageless posts the network icon
   is the only img in the box and must not get stretched full-bleed. */
.datacenter-page .dc-social-card__photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.datacenter-page .dc-social-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(140.7deg, rgba(0, 0, 0, 0.6) 22.5%, rgba(0, 0, 0, 0) 43.5%);
}
/* Branded tile for posts without an image: reversed campaign logo centered
   on the navy gradient (distinct from a photo, so repeats read as intentional). */
.datacenter-page .dc-social-card__fallback {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64%;
	height: auto;
}
.datacenter-page .dc-social-card__network {
	position: absolute;
	top: 22px;
	left: 25px;
	z-index: 1;
	height: 34px;
	width: auto;
}
.datacenter-page .dc-social-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 22px 14px 25px;
}
.datacenter-page .dc-social-card__byline {
	display: flex;
	justify-content: space-between;
	font-family: var(--dc-font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	color: #000;
}
.datacenter-page .dc-social-card__text {
	margin: 12px 0 0;
	font-family: var(--dc-font-sans);
	font-size: 0.875rem;
	line-height: 1.75;
	color: #000;
	/* Real network posts run long — clamp so one wordy post can't stretch the row. */
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.datacenter-page .dc-social-card__cta {
	margin-top: auto;
	padding-top: 18px;
	font-family: var(--dc-font-sans);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--dc-red);
	text-decoration: none;
}
.datacenter-page .dc-social-card__cta:hover { color: var(--dc-red-dark); }
.datacenter-page .dc-social-card__cta span { margin-left: 6px; }
.datacenter-page .dc-social .dc-carousel-footer {
	max-width: 1250px;
	margin-left: auto;
	margin-right: auto;
}

/* ---------------------------------------------------------- Responsive. */

@media (max-width: 1024px) {
	.datacenter-page .dc-hero { margin-top: 120px; }
	.datacenter-page .dc-hero__content { margin-right: 0; }
	.datacenter-page .dc-plan__cutout { display: none; }
}

@media (max-width: 900px) {
	.datacenter-page .dc-deal__slide { flex-direction: column-reverse; gap: 35px; }
	.datacenter-page .dc-deal__media { flex: 0 0 auto; width: 100%; }
	.datacenter-page .dc-deal__text { max-width: none; }
	.datacenter-page .dc-deal .dc-dots { right: 20px; bottom: 106px; }
	.datacenter-page .dc-community__intro { flex-direction: column; align-items: flex-start; gap: 20px; }
	.datacenter-page .dc-community__grid { grid-template-columns: 1fr; gap: 40px; }
	.datacenter-page .dc-video-card { max-width: 553px; position: relative; top: auto; }
}

@media (max-width: 768px) {
	.datacenter-page .dc-hero__inner { padding: 60px 20px 40px; justify-content: center; }
	.datacenter-page .dc-hero__headshot { display: none; }
	.datacenter-page .dc-hero__buttons .dc-btn { min-width: 0; flex: 1 1 auto; }
	.datacenter-page .dc-plan__row { flex-wrap: wrap; gap: 20px; }
	.datacenter-page .dc-plan__row + .dc-plan__row { margin-top: 20px; }
	.datacenter-page .dc-step-card { flex: 0 1 auto; width: 410px; }
	.datacenter-page .dc-carousel-footer { margin-top: 30px; }
	.datacenter-page .dc-petitions { padding: 70px 0 80px; }
	.datacenter-page .dc-plan { padding: 65px 0 70px; }
	.datacenter-page .dc-community { padding: 65px 0 75px; }
	.datacenter-page .dc-social { padding: 65px 0 65px; }
	.datacenter-page .dc-deal__inner { padding-top: 70px; padding-bottom: 70px; }
	.datacenter-page .dc-deal .dc-dots { position: static; margin-top: 20px; }
}

@media (max-width: 600px) {
	.datacenter-page .dc-hero { margin-top: 75px; min-height: 0; }
	.datacenter-page .dc-petition-card { flex-basis: 290px; }
	.datacenter-page .dc-social-card { flex-basis: 280px; }
	.datacenter-page .dc-story-form { padding: 18px; }
}

/* ---------------------------------------------------------------- password gate ---
   Shown instead of the page when a post password is set (client review). Prefixed
   like everything else here so the Elementor kit's bare-element rules lose. */
.datacenter-page .dc-password-gate {
	max-width: 560px;
	margin: 0 auto;
	padding: 180px 24px 140px;
	text-align: center;
}

.datacenter-page .dc-password-gate__title {
	margin: 0 0 14px;
	font-family: var(--dc-font-sans);
	font-size: 40px;
	line-height: 1.15;
	font-weight: 700;
	text-transform: none;
	color: var(--dc-navy);
}

/* Core emits <p>intro</p><p><label>…<input></label> <input type=submit></p>,
   so the column lives on the gate and the form just gets a max-width. */
.datacenter-page .dc-password-gate form {
	max-width: 420px;
	margin: 22px auto 0;
}

.datacenter-page .dc-password-gate p {
	margin: 0;
	font-size: 17px;
	line-height: 1.55;
	color: var(--dc-body);
}

.datacenter-page .dc-password-gate p + p { margin-top: 18px; }

.datacenter-page .dc-password-gate label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--dc-navy);
}

.datacenter-page .dc-password-gate input[type="password"] {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid #c2cadb;
	border-radius: 6px;
	background: #fff;
	font-size: 16px;
	color: var(--dc-navy);
}

.datacenter-page .dc-password-gate input[type="password"]:focus {
	outline: 2px solid var(--dc-red);
	outline-offset: 1px;
	border-color: transparent;
}

.datacenter-page .dc-password-gate input[type="submit"] {
	width: 100%;
	margin-top: 12px;
	padding: 14px 30px;
	border: 0;
	border-radius: 6px;
	background: var(--dc-red);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
}

.datacenter-page .dc-password-gate input[type="submit"]:hover,
.datacenter-page .dc-password-gate input[type="submit"]:focus {
	background: var(--dc-red-dark);
}

@media (max-width: 600px) {
	.datacenter-page .dc-password-gate { padding: 130px 20px 100px; }
	.datacenter-page .dc-password-gate__title { font-size: 30px; }
}