/*
 * /the-hague/ flagship — bespoke layout. Loaded only on this template.
 *
 * Design rules:
 *   - 1240px max content width, left-aligned
 *   - dark sections for emphasis, white sections for readable copy
 *   - 4:3 / 3:2 photos, never full-bleed banners except the hero strip
 *   - structured cards, dashed borders, no rounded corners
 *   - bracket-style eyebrows in mint
 */

.dfdc-th {
	background: var(--dfdc-surface);
}

/* Hide the inline icon sprite — same guard as product.css.
 * Symbols only paint when referenced via <use href="#icon-…"/>. */
body > svg[aria-hidden="true"] {
	position: absolute !important;
	width: 0 !important;
	height: 0 !important;
	overflow: hidden !important;
	pointer-events: none;
}

.dfdc-th-container {
	width: min(100% - 48px, 1240px);
	margin-inline: auto;
}

/* ---------- type ---------- */

.dfdc-th-h2 {
	margin: 0 0 16px;
	font-family: var(--dfdc-font-sans);
	font-weight: 400;
	letter-spacing: -0.018em;
	line-height: 1.1;
	color: var(--dfdc-text-dark);
	font-size: clamp(28px, 2.4vw + 0.4rem, 44px);
	max-width: 22ch;
}
.dfdc-th-h2--on-dark { color: var(--dfdc-text); }

.dfdc-th-on-dark { color: rgba(233, 244, 240, 0.82); }

.dfdc-th-eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	font-family: var(--dfdc-font-sans);
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--dfdc-text-dark-muted);
}
.dfdc-th-eyebrow--mint     { color: var(--dfdc-mint); }
.dfdc-th-eyebrow--on-dark  { color: var(--dfdc-mint); }

.dfdc-th-eyebrow__icon {
	width: 14px;
	height: 14px;
	margin-right: 6px;
	vertical-align: -2px;
	fill: currentColor;
	stroke: currentColor;
	stroke-width: 0;
}

.dfdc-th-section {
	padding-block: clamp(56px, 6vw, 96px);
}
.dfdc-th-section--light { background: var(--dfdc-surface); color: var(--dfdc-text-dark); }
.dfdc-th-section--dark  { background: var(--dfdc-bg);      color: var(--dfdc-text); }

/* Footer transition — the closing CTA section sits flush against the
 * Elementor footer (also dark). A 1px dashed mint divider at the end
 * of the dfdc-th main makes the boundary intentional and matches the
 * dashed-divider language used inside the page. */
.dfdc-th {
	border-bottom: 1px dashed rgba(45, 212, 163, 0.35);
}

.dfdc-th-section__header {
	margin-bottom: clamp(28px, 3vw, 44px);
	max-width: 760px;
}

.dfdc-th-section__lede {
	margin: 8px 0 0;
	color: var(--dfdc-text-dark-muted);
	line-height: 1.55;
	font-size: 17px;
	max-width: 60ch;
}
.dfdc-th-section--dark .dfdc-th-section__lede { color: rgba(233, 244, 240, 0.78); }

/* ---------- buttons ---------- */

.dfdc-th-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	font-family: var(--dfdc-font-sans);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.dfdc-th-btn--primary {
	background: var(--dfdc-mint);
	color: var(--dfdc-text-dark);
}
.dfdc-th-btn--primary:hover { background: var(--dfdc-mint-300); }

.dfdc-th-btn--ghost {
	background: transparent;
	color: var(--dfdc-text-dark);
	border-color: rgba(15, 21, 19, 0.45);
}
.dfdc-th-btn--ghost:hover { border-color: var(--dfdc-text-dark); }

.dfdc-th-btn--ghost-on-dark {
	color: var(--dfdc-text);
	border-color: rgba(255, 255, 255, 0.35);
}
.dfdc-th-btn--ghost-on-dark:hover { border-color: var(--dfdc-text); }

/* ---------- HERO ---------- */

.dfdc-th-hero {
	background: var(--dfdc-bg);
	color: var(--dfdc-text);
	padding-block: clamp(72px, 9vw, 132px) clamp(48px, 5vw, 72px);
	border-bottom: 1px solid var(--dfdc-line);
}

.dfdc-th-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(32px, 4vw, 80px);
	align-items: end;
}

.dfdc-th-hero__title {
	margin: 0 0 18px;
	font-family: var(--dfdc-font-sans);
	font-weight: 400;
	letter-spacing: -0.022em;
	line-height: 1.05;
	font-size: clamp(36px, 4.4vw, 64px);
	color: var(--dfdc-text);
	max-width: 18ch;
}

.dfdc-th-hero__sub {
	margin: 0 0 28px;
	color: rgba(233, 244, 240, 0.82);
	line-height: 1.5;
	font-size: 18px;
	max-width: 56ch;
}

.dfdc-th-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.dfdc-th-hero__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: 0;
	border-top: 1px dashed rgba(255, 255, 255, 0.18);
	border-left: 1px dashed rgba(255, 255, 255, 0.18);
}
.dfdc-th-hero__facts > div {
	padding: 20px 22px;
	border-right: 1px dashed rgba(255, 255, 255, 0.18);
	border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.dfdc-th-hero__facts dt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(233, 244, 240, 0.6);
}
.dfdc-th-hero__facts dt svg {
	width: 14px;
	height: 14px;
	fill: var(--dfdc-mint);
	stroke: var(--dfdc-mint);
	stroke-width: 0;
}
.dfdc-th-hero__facts dd {
	margin: 0;
	font-size: clamp(28px, 2.4vw + 0.2rem, 36px);
	font-weight: 400;
	color: var(--dfdc-text);
	letter-spacing: -0.018em;
	font-variant-numeric: tabular-nums;
	display: flex;
	align-items: baseline;
	gap: 4px;
}
.dfdc-th-counter {
	display: inline-block;
	min-width: 1.2em;
}
.dfdc-th-unit {
	font-size: 0.65em;
	color: rgba(233, 244, 240, 0.55);
	letter-spacing: 0.04em;
}

@media (max-width: 880px) {
	.dfdc-th-hero__inner { grid-template-columns: 1fr; }
}

/* ---------- TWO-COLUMN SPLIT (text + photo) ---------- */

.dfdc-th-split {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}
.dfdc-th-split--flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }

.dfdc-th-split__copy p {
	margin: 0 0 14px;
	max-width: 56ch;
	color: var(--dfdc-text-dark-muted);
	line-height: 1.6;
	font-size: 17px;
}
.dfdc-th-section--dark .dfdc-th-split__copy p { color: rgba(233, 244, 240, 0.82); }

.dfdc-th-split__media { margin: 0; }
.dfdc-th-split__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	max-height: 420px;
	object-fit: cover;
	display: block;
}
.dfdc-th-split__media figcaption {
	margin-top: 10px;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dfdc-text-dark-muted);
}
.dfdc-th-section--dark .dfdc-th-split__media figcaption { color: rgba(233, 244, 240, 0.55); }

@media (max-width: 880px) {
	.dfdc-th-split,
	.dfdc-th-split--flip { grid-template-columns: 1fr; }
}

/* ---------- CARD GRID ---------- */

.dfdc-th-cards {
	display: grid;
	gap: 0;
	border-top: 1px dashed rgba(15, 21, 19, 0.18);
	border-left: 1px dashed rgba(15, 21, 19, 0.18);
}
.dfdc-th-cards--3up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dfdc-th-cards--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.dfdc-th-card {
	padding: 28px 28px 32px;
	border-right: 1px dashed rgba(15, 21, 19, 0.18);
	border-bottom: 1px dashed rgba(15, 21, 19, 0.18);
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--dfdc-surface);
}
.dfdc-th-card__icon {
	width: 28px;
	height: 28px;
	margin-bottom: 4px;
	fill: var(--dfdc-mint);
	stroke: var(--dfdc-mint);
	stroke-width: 0;
}
.dfdc-th-card h3 {
	margin: 0;
	font-family: var(--dfdc-font-sans);
	font-weight: 400;
	font-size: 20px;
	letter-spacing: -0.01em;
	color: var(--dfdc-text-dark);
}
.dfdc-th-card p {
	margin: 0;
	color: var(--dfdc-text-dark-muted);
	line-height: 1.55;
	font-size: 15px;
}

.dfdc-th-cards--on-dark {
	border-color: rgba(255, 255, 255, 0.16);
}
.dfdc-th-card--on-dark {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.16);
}
.dfdc-th-card--on-dark h3 { color: var(--dfdc-text); }
.dfdc-th-card--on-dark p  { color: rgba(233, 244, 240, 0.78); }

.dfdc-th-link {
	margin-top: 6px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--dfdc-font-sans);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 500;
	text-decoration: none;
	color: var(--dfdc-mint);
}
.dfdc-th-link:hover { color: var(--dfdc-mint-300); }

@media (max-width: 980px) {
	.dfdc-th-cards--3up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.dfdc-th-cards--3up,
	.dfdc-th-cards--2up { grid-template-columns: 1fr; }
}

/* ---------- SPEC TABLE ---------- */

.dfdc-th-spec {
	border: 1px dashed rgba(15, 21, 19, 0.18);
}
.dfdc-th-spec__table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--dfdc-font-sans);
}
.dfdc-th-spec__table tr { border-bottom: 1px dashed rgba(15, 21, 19, 0.14); }
.dfdc-th-spec__table tbody tr:last-child { border-bottom: 0; }

.dfdc-th-spec__table thead th {
	font-family: var(--dfdc-font-sans);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dfdc-text-dark-muted);
	text-align: left;
	padding: 16px 22px 12px;
	background: var(--dfdc-surface-2);
}
.dfdc-th-spec__table thead {
	border-bottom: 1px dashed rgba(15, 21, 19, 0.18);
}

/* Spec table on a dark section — light borders + light text. */
.dfdc-th-section--dark .dfdc-th-spec,
.dfdc-th-spec--on-dark {
	border-color: rgba(255, 255, 255, 0.16);
}
.dfdc-th-section--dark .dfdc-th-spec__table tr,
.dfdc-th-spec--on-dark .dfdc-th-spec__table tr {
	border-color: rgba(255, 255, 255, 0.12);
}
.dfdc-th-section--dark .dfdc-th-spec__table thead,
.dfdc-th-spec--on-dark .dfdc-th-spec__table thead {
	border-color: rgba(255, 255, 255, 0.16);
}
.dfdc-th-section--dark .dfdc-th-spec__table thead th,
.dfdc-th-spec--on-dark .dfdc-th-spec__table thead th {
	background: rgba(255, 255, 255, 0.04);
	color: rgba(233, 244, 240, 0.55);
}
.dfdc-th-section--dark .dfdc-th-spec__table th[scope="row"],
.dfdc-th-spec--on-dark .dfdc-th-spec__table th[scope="row"] {
	color: var(--dfdc-text);
}
.dfdc-th-section--dark .dfdc-th-spec__table td,
.dfdc-th-spec--on-dark .dfdc-th-spec__table td {
	color: rgba(233, 244, 240, 0.78);
}
.dfdc-th-spec__table th,
.dfdc-th-spec__table td {
	padding: 14px 22px;
	text-align: left;
	font-size: 15px;
	line-height: 1.5;
	vertical-align: top;
}
.dfdc-th-spec__table th {
	font-weight: 500;
	color: var(--dfdc-text-dark);
	width: 32%;
	white-space: nowrap;
}
.dfdc-th-spec__table td {
	color: var(--dfdc-text-dark-muted);
}

@media (max-width: 720px) {
	.dfdc-th-spec__table th,
	.dfdc-th-spec__table td { display: block; padding: 10px 18px; }
	.dfdc-th-spec__table th { width: auto; padding-bottom: 0; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dfdc-text-dark-muted); }
	.dfdc-th-spec__table td { padding-top: 4px; padding-bottom: 16px; color: var(--dfdc-text-dark); font-size: 16px; }
}

/* ---------- CALLOUT (insurer-signed plan / security@ etc.) ---------- */

.dfdc-th-callout {
	margin-top: clamp(28px, 3vw, 44px);
	padding: 24px 28px;
	background: var(--dfdc-surface-2);
	border-left: 3px solid var(--dfdc-mint);
}
.dfdc-th-callout__title {
	margin: 0 0 6px;
	font-family: var(--dfdc-font-sans);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dfdc-text-dark);
}
.dfdc-th-callout p {
	margin: 0;
	color: var(--dfdc-text-dark-muted);
	line-height: 1.55;
	font-size: 15px;
	max-width: 70ch;
}
.dfdc-th-callout p a {
	color: var(--dfdc-mint-700);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.dfdc-th-callout p a:hover { color: var(--dfdc-text-dark); }

/* ---------- HERO — video variant (contact page) ---------- */

.dfdc-th-hero__inner--video {
	align-items: stretch;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}
.dfdc-th-hero__video {
	margin: 0;
	display: block;
	overflow: hidden;
}
.dfdc-th-hero__video video {
	width: 100%;
	height: 100%;
	min-height: 280px;
	max-height: 460px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border: 1px dashed rgba(255, 255, 255, 0.18);
}
@media (max-width: 880px) {
	.dfdc-th-hero__inner--video { grid-template-columns: 1fr; }
}

/* ---------- FEATURE BLOCK (resources hub "latest") ---------- */

.dfdc-th-feature {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	padding: clamp(28px, 3vw, 44px);
	background: var(--dfdc-surface-2);
	border-left: 3px solid var(--dfdc-mint);
}
.dfdc-th-feature__copy h2 { margin-bottom: 12px; }
.dfdc-th-feature__copy p {
	margin: 0 0 22px;
	max-width: 56ch;
	color: var(--dfdc-text-dark-muted);
	line-height: 1.6;
	font-size: 17px;
}
.dfdc-th-feature__media { margin: 0; }
.dfdc-th-feature__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	max-height: 320px;
	object-fit: cover;
	display: block;
}
@media (max-width: 880px) {
	.dfdc-th-feature { grid-template-columns: 1fr; }
}

/* ---------- INTENT BANNER (contact page) ---------- */

.dfdc-th-intent {
	margin-bottom: clamp(20px, 2.5vw, 32px);
	border: 1px dashed var(--dfdc-mint);
	background: rgba(45, 212, 163, 0.06);
}
.dfdc-th-intent__inner {
	padding: 18px 24px;
	display: grid;
	gap: 4px;
}
.dfdc-th-intent__label {
	font-family: var(--dfdc-font-sans);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dfdc-mint);
}
.dfdc-th-intent__text {
	margin: 0;
	color: var(--dfdc-text);
	font-size: 16px;
	line-height: 1.5;
}
.dfdc-th-intent__text strong {
	color: var(--dfdc-mint);
	font-weight: 500;
}

/* ---------- ADDRESS / CONTACT details ---------- */

.dfdc-th-address {
	margin: 16px 0 12px;
	padding: 18px 20px;
	background: var(--dfdc-surface-2);
	border-left: 3px solid var(--dfdc-mint);
	font-style: normal;
	font-family: var(--dfdc-font-sans);
	color: var(--dfdc-text-dark);
	line-height: 1.55;
	font-size: 16px;
}
.dfdc-th-address strong { font-weight: 500; }
.dfdc-th-address__lines {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--dfdc-text-dark-muted);
}
.dfdc-th-address__lines a {
	color: var(--dfdc-text-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.dfdc-th-address__lines a:hover { color: var(--dfdc-mint-700); }

/* ---------- WPForms form styling on the contact page ----------
 *
 * WPForms ships its own CSS with selectors like
 *   div.wpforms-container-full .wpforms-form input[type="text"]
 * which has higher specificity than `.dfdc-th-form input[type="text"]`.
 * The legacy theme also sets `body { font-family: Poppins }`. Both
 * win the cascade, so we lift specificity here by using both
 * `.dfdc-th .wpforms-container` and `.dfdc-th-form .wpforms-container`
 * scopes, and use !important only on the few props (mostly font-family)
 * that other plugins like to override globally.
 */

.dfdc-th .wpforms-container,
.dfdc-th-form .wpforms-container {
	max-width: 760px;
	margin-inline: 0;
	font-family: var(--dfdc-font-sans) !important;
	color: var(--dfdc-text);
}
.dfdc-th .wpforms-form,
.dfdc-th-form .wpforms-form {
	font-family: var(--dfdc-font-sans) !important;
}
.dfdc-th .wpforms-field,
.dfdc-th-form .wpforms-field { margin-bottom: 18px; }

/* Labels — Poppins keeps trying to creep in from main.css. !important
 * is the cleanest way to keep this clamped. */
.dfdc-th .wpforms-field-label,
.dfdc-th .wpforms-field-sublabel,
.dfdc-th .wpforms-form label,
.dfdc-th-form .wpforms-field-label,
.dfdc-th-form .wpforms-field-sublabel,
.dfdc-th-form .wpforms-form label,
.dfdc-th-form label {
	color: rgba(233, 244, 240, 0.85) !important;
	font-family: var(--dfdc-font-sans) !important;
	font-weight: 500 !important;
	font-size: 12px !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	line-height: 1.3 !important;
}

/* Inputs — defeat WPForms' div.wpforms-container-full selectors. */
.dfdc-th .wpforms-form input[type="text"],
.dfdc-th .wpforms-form input[type="email"],
.dfdc-th .wpforms-form input[type="tel"],
.dfdc-th .wpforms-form input[type="url"],
.dfdc-th .wpforms-form input[type="number"],
.dfdc-th .wpforms-form input[type="password"],
.dfdc-th .wpforms-form select,
.dfdc-th .wpforms-form textarea,
.dfdc-th-form .wpforms-form input[type="text"],
.dfdc-th-form .wpforms-form input[type="email"],
.dfdc-th-form .wpforms-form input[type="tel"],
.dfdc-th-form .wpforms-form input[type="url"],
.dfdc-th-form .wpforms-form input[type="number"],
.dfdc-th-form .wpforms-form input[type="password"],
.dfdc-th-form .wpforms-form select,
.dfdc-th-form .wpforms-form textarea {
	width: 100%;
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(255, 255, 255, 0.18) !important;
	border-radius: 0 !important;
	color: var(--dfdc-text) !important;
	font-family: var(--dfdc-font-sans) !important;
	font-size: 15px !important;
	line-height: 1.5 !important;
	padding: 12px 14px !important;
	box-shadow: none !important;
}
.dfdc-th .wpforms-form textarea,
.dfdc-th-form .wpforms-form textarea { min-height: 140px; resize: vertical; }

.dfdc-th .wpforms-form input:focus,
.dfdc-th .wpforms-form select:focus,
.dfdc-th .wpforms-form textarea:focus,
.dfdc-th-form .wpforms-form input:focus,
.dfdc-th-form .wpforms-form select:focus,
.dfdc-th-form .wpforms-form textarea:focus {
	outline: none !important;
	border-color: var(--dfdc-mint) !important;
	background: rgba(255, 255, 255, 0.08) !important;
}

.dfdc-th .wpforms-form input::placeholder,
.dfdc-th .wpforms-form textarea::placeholder,
.dfdc-th-form .wpforms-form input::placeholder,
.dfdc-th-form .wpforms-form textarea::placeholder {
	color: rgba(233, 244, 240, 0.4) !important;
	font-family: var(--dfdc-font-sans) !important;
}

/* Submit button — mint, uppercase, square. */
.dfdc-th .wpforms-submit-container,
.dfdc-th-form .wpforms-submit-container { margin-top: 8px; }

.dfdc-th .wpforms-form button[type="submit"],
.dfdc-th .wpforms-form .wpforms-submit,
.dfdc-th-form .wpforms-form button[type="submit"],
.dfdc-th-form .wpforms-form .wpforms-submit {
	position: relative;
	background: var(--dfdc-mint) !important;
	color: var(--dfdc-text-dark) !important;
	border: 0 !important;
	border-radius: 0 !important;
	/* Right padding leaves room for the inline arrow chevron rendered
	 * via ::after below. Without this the legacy customakk.css
	 * absolutely-positioned arrow overlaps the SUBMIT label and
	 * clips the last two characters. */
	padding: 14px 48px 14px 22px !important;
	font-family: var(--dfdc-font-sans) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	cursor: pointer;
	transition: background 160ms ease;
	box-shadow: none !important;
	overflow: visible !important;
}
.dfdc-th .wpforms-form button[type="submit"]:hover,
.dfdc-th .wpforms-form .wpforms-submit:hover,
.dfdc-th-form .wpforms-form button[type="submit"]:hover,
.dfdc-th-form .wpforms-form .wpforms-submit:hover {
	background: var(--dfdc-mint-300) !important;
}
/* Override the legacy customakk.css "learn-more-arrow.svg" pseudo
 * element — that one uses a 34×34 background-image and corner anchor.
 * Replace it with a flat → character glyph so the visual rhythm
 * matches the rest of the .dfdc-th buttons (which use the same
 * arrow marker inline in their text). */
.dfdc-th .wpforms-form button[type="submit"]::after,
.dfdc-th .wpforms-form .wpforms-submit::after,
.dfdc-th-form .wpforms-form button[type="submit"]::after,
.dfdc-th-form .wpforms-form .wpforms-submit::after {
	content: "→" !important;
	background: none !important;
	background-image: none !important;
	width: auto !important;
	height: auto !important;
	right: 20px !important;
	left: auto !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	font-size: 16px !important;
	line-height: 1 !important;
	color: inherit !important;
	pointer-events: none;
}

.dfdc-th .wpforms-error,
.dfdc-th-form .wpforms-error {
	color: #ffb4a2 !important;
	font-size: 13px !important;
	margin-top: 6px;
	font-family: var(--dfdc-font-sans) !important;
}

/* Page-level type override — anything inside .dfdc-th that didn't
 * match a specific selector still gets the dfdc font, not Poppins. */
.dfdc-th,
.dfdc-th p,
.dfdc-th a,
.dfdc-th li,
.dfdc-th span,
.dfdc-th div {
	font-family: var(--dfdc-font-sans);
}

/* ---------- TWO-COLUMN COPY + CHECKLIST ---------- */

.dfdc-th-twocol {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 64px);
	align-items: start;
}
.dfdc-th-twocol p {
	margin: 0 0 14px;
	max-width: 56ch;
	color: var(--dfdc-text-dark-muted);
	line-height: 1.6;
	font-size: 17px;
}

.dfdc-th-checklist {
	margin: 0;
	padding: 24px 28px;
	list-style: none;
	border: 1px dashed rgba(15, 21, 19, 0.18);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.dfdc-th-checklist li {
	position: relative;
	padding-left: 22px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--dfdc-text-dark);
}

/* Dark surfaces — checklist needs light copy + lighter border. */
.dfdc-th-section--dark .dfdc-th-checklist {
	border-color: rgba(255, 255, 255, 0.16);
}
.dfdc-th-section--dark .dfdc-th-checklist li {
	color: rgba(233, 244, 240, 0.9);
}
.dfdc-th-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	background: var(--dfdc-mint);
}

@media (max-width: 880px) {
	.dfdc-th-twocol { grid-template-columns: 1fr; }
}

/* ---------- SUMMARY CARDS (categorised facts) ---------- */

.dfdc-th-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	border-top: 1px dashed rgba(15, 21, 19, 0.18);
	border-left: 1px dashed rgba(15, 21, 19, 0.18);
}

.dfdc-th-summary__card {
	padding: 26px 28px 30px;
	border-right: 1px dashed rgba(15, 21, 19, 0.18);
	border-bottom: 1px dashed rgba(15, 21, 19, 0.18);
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--dfdc-surface);
}

.dfdc-th-summary__card .dfdc-th-card__icon {
	width: 26px;
	height: 26px;
}

.dfdc-th-summary__card h3 {
	margin: 0;
	font-family: var(--dfdc-font-sans);
	font-weight: 400;
	font-size: 18px;
	letter-spacing: -0.005em;
	color: var(--dfdc-text-dark);
}

.dfdc-th-summary__card ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dfdc-th-summary__card li {
	position: relative;
	padding-left: 16px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--dfdc-text-dark-muted);
}

.dfdc-th-summary__card li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	background: var(--dfdc-mint);
}

@media (max-width: 720px) {
	.dfdc-th-summary { grid-template-columns: 1fr; }
}

/* ---------- SPEC SHEETS ---------- */

.dfdc-spec__footer { padding-block: clamp(40px, 4vw, 56px); }
.dfdc-spec__footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}
.dfdc-spec__rev,
.dfdc-spec__contact {
	margin: 0 0 12px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--dfdc-text-dark-muted);
}
.dfdc-spec__rev strong { color: var(--dfdc-text-dark); font-weight: 500; }
.dfdc-spec__contact a { color: var(--dfdc-mint-700); text-decoration: underline; text-underline-offset: 2px; }

.dfdc-spec__downloads ul {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.dfdc-spec__downloads a {
	font-family: var(--dfdc-font-sans);
	font-size: 14px;
	color: var(--dfdc-text-dark);
	text-decoration: none;
	border-bottom: 1px dashed rgba(15, 21, 19, 0.18);
	padding-bottom: 6px;
}
.dfdc-spec__downloads a:hover { color: var(--dfdc-mint-700); border-bottom-color: var(--dfdc-mint); }

@media (max-width: 720px) {
	.dfdc-spec__footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Print-only blocks: hidden on screen, shown on print ----------
 * The cover, running header and footer are markup that only renders on
 * paper. On screen they're collapsed via the @media not print rule at
 * the bottom of this file. */
.dfdc-spec__print-only { display: none; }

/* On-screen visibility — the cover + running banners are print-only,
 * the rest of the spec sheet is the normal HTML.dfdc-th render. */
@media not print {
	.dfdc-spec__cover,
	.dfdc-spec__running-head,
	.dfdc-spec__running-foot { display: none !important; }
}

/* ============================================================
 * PRINT STYLESHEET — media-pack tech-spec sheet.
 *
 * Single dense artifact, modeled on the Equinix IBX tech-spec PDF
 * format: a brand mint band at the top of every page, a hero strip
 * on page 1, then 2-column body flow with all spec tables inline.
 * Aimed at one or two pages total.
 *
 * Behaviour:
 *   - Mint header band repeats on every page via @page top-center.
 *   - Footer band repeats on every page via @page bottom-left.
 *   - Page 1 carries the hero (eyebrow / title / sub / fact grid).
 *   - Body sections flow into a 2-column layout with break-inside:
 *     avoid on each section so we don't split a spec table.
 *   - No section gets its own page.
 *   - Mint accent throughout; no photos.
 *
 * Tested in Chrome / Safari / Firefox print preview.
 * ============================================================ */
@media print {

	@page {
		size: A4;
		margin: 22mm 12mm 18mm 12mm;
		@top-center {
			content: element(dfdcRunningHead);
			vertical-align: bottom;
		}
		@bottom-left {
			content: element(dfdcRunningFoot);
			vertical-align: top;
			width: 100%;
		}
	}

	html, body {
		background: #fff !important;
		color: #0F1513 !important;
		font-family: "Inter Tight", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
		font-size: 9pt;
		line-height: 1.45;
	}

	/* Hide UI chrome */
	.dfdc-nav, .ekit-template-content-header,
	.dfdc-footer, .ekit-template-content-footer,
	.dfdc-th-hero, .dfdc-th-cta, .dfdc-th-latest,
	.dfdc-home-blocks, .dfdc-spec__footer {
		display: none !important;
	}

	/* Show the print-only blocks */
	.dfdc-spec__print-only { display: block !important; }

	/* Capture the running banners into the page margin boxes. */
	.dfdc-spec__running-head { position: running(dfdcRunningHead); }
	.dfdc-spec__running-foot { position: running(dfdcRunningFoot); }

	/* ---------- Hero (page 1 banner) ----------
	 * Re-uses the .dfdc-spec__cover element but renders inline at the
	 * top of page 1 — no longer a forced separate cover page. */
	.dfdc-spec__cover {
		display: block !important;
		margin: 0 0 6mm !important;
		padding: 0 !important;
		background: #fff !important;
		color: #0F1513 !important;
		break-after: avoid;
		page-break-after: avoid;
	}
	/* Hide the in-flow cover masthead (the page header band is
	 * rendered by .dfdc-spec__running-head instead, on every page). */
	.dfdc-spec__cover-mast { display: none !important; }
	/* Cover footer (bigger contact block) is duplicated by the
	 * page-running footer; hide here so we don't show it twice. */
	.dfdc-spec__cover-foot { display: none !important; }

	.dfdc-spec__cover-body { padding: 0 !important; }
	.dfdc-spec__cover-eyebrow {
		display: block;
		font-size: 8.5pt;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: #1FA37D;
		font-weight: 500;
		margin-bottom: 3mm;
	}
	.dfdc-spec__cover-title {
		font-size: 26pt;
		font-weight: 400;
		letter-spacing: -0.018em;
		line-height: 1.05;
		margin: 0 0 4mm;
		max-width: 28ch;
	}
	.dfdc-spec__cover-sub {
		font-size: 10.5pt;
		line-height: 1.45;
		color: #4D5C57;
		margin: 0 0 7mm;
		max-width: 90ch;
	}
	.dfdc-spec__cover-facts {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 0;
		margin: 0 0 6mm;
		border-top: 0.4mm solid #2DD4A3;
		border-left: 1px solid #C5D2CD;
		break-inside: avoid;
	}
	.dfdc-spec__cover-facts > div {
		padding: 3.5mm 4mm;
		border-right: 1px solid #C5D2CD;
		border-bottom: 1px solid #C5D2CD;
	}
	.dfdc-spec__cover-facts dt {
		font-size: 7.5pt;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: #4D5C57;
		margin: 0 0 1mm;
	}
	.dfdc-spec__cover-facts dd {
		margin: 0;
		font-size: 13pt;
		font-weight: 500;
		color: #0F1513;
		letter-spacing: -0.01em;
	}

	/* ---------- Running header — mint band on every page ---------- */
	.dfdc-spec__running-head {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 2mm 4mm;
		background: #2DD4A3 !important;
		color: #0F1513 !important;
		font-size: 8.5pt;
		font-family: "Inter Tight", sans-serif;
		font-weight: 500;
		letter-spacing: 0.04em;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	.dfdc-spec__running-mark {
		font-weight: 600;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}
	.dfdc-spec__running-title { color: #0F1513; opacity: 0.85; }

	/* ---------- Running footer — contact + url + page no ---------- */
	.dfdc-spec__running-foot {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 2mm;
		border-top: 1px solid #C5D2CD;
		font-size: 8pt;
		font-family: "Inter Tight", sans-serif;
		color: #4D5C57;
		letter-spacing: 0.04em;
	}
	.dfdc-spec__running-foot strong { color: #0F1513; }
	.dfdc-spec__page-num::before { content: counter(page); }
	.dfdc-spec__page-num { font-variant-numeric: tabular-nums; }

	/* ---------- Body — 2-column tech spec flow ---------- */
	.dfdc-th, .dfdc-spec {
		background: #fff !important;
		color: #0F1513 !important;
		padding: 0 !important;
		margin: 0 !important;
		border: 0 !important;
	}
	.dfdc-th-container {
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	/* Compact section headers + reset to a 2-column flow. The body
	 * of the spec sheet flows through `column-count: 2` so the spec
	 * tables fill paper top-to-bottom-left-to-right like a printed
	 * datasheet. */
	main.dfdc-spec {
		column-count: 2;
		column-gap: 6mm;
		column-rule: 1px solid #E4ECE8;
	}

	main.dfdc-spec > section.dfdc-th-section {
		display: block !important;
		break-inside: avoid;
		break-before: auto !important;
		page-break-before: auto !important;
		background: #fff !important;
		color: #0F1513 !important;
		padding: 0 0 4mm !important;
		margin: 0 0 4mm !important;
		border-bottom: 1px dashed #C5D2CD;
	}
	main.dfdc-spec > section.dfdc-th-section:last-of-type { border-bottom: 0; }

	/* The cover (hero strip) must span both columns at the top of
	 * page 1. column-span ensures it isn't pushed into a column. */
	.dfdc-spec__cover { column-span: all; }

	.dfdc-th-section__header {
		margin-bottom: 2.5mm !important;
		max-width: none !important;
	}
	.dfdc-th-eyebrow,
	.dfdc-th-eyebrow--on-dark {
		color: #1FA37D !important;
		font-size: 7.5pt !important;
		letter-spacing: 0.16em !important;
		font-weight: 500 !important;
		margin-bottom: 1.5mm !important;
		display: block !important;
	}
	.dfdc-th-eyebrow__icon { display: none !important; }
	.dfdc-th-h2,
	.dfdc-th-h2--on-dark {
		color: #0F1513 !important;
		font-size: 12pt !important;
		font-weight: 500 !important;
		letter-spacing: -0.005em !important;
		margin: 0 0 1mm !important;
		max-width: none !important;
		text-shadow: none !important;
		line-height: 1.2 !important;
	}

	/* Compact spec table — Equinix-style two-column data block. */
	.dfdc-th-spec, .dfdc-th-spec--on-dark {
		border: 0 !important;
		background: #fff !important;
	}
	.dfdc-th-spec__table { width: 100%; border-collapse: collapse; }
	.dfdc-th-spec__table thead { display: none !important; }
	.dfdc-th-spec__table tbody tr {
		border-bottom: 1px solid #E4ECE8 !important;
		break-inside: avoid;
	}
	.dfdc-th-spec__table tbody tr:last-child { border-bottom: 0 !important; }
	.dfdc-th-spec__table th[scope="row"],
	.dfdc-th-spec__table td {
		color: #0F1513 !important;
		padding: 1.6mm 0 !important;
		font-size: 8.75pt !important;
		line-height: 1.4;
		vertical-align: top;
		background: transparent !important;
	}
	.dfdc-th-spec__table th[scope="row"] {
		font-weight: 500;
		width: 50% !important;
		white-space: normal !important;
		padding-right: 4mm !important;
		color: #4D5C57 !important;
	}
	.dfdc-th-spec__table td {
		color: #0F1513 !important;
		font-weight: 500;
	}

	/* Hide stray bits we don't want on paper */
	.dfdc-th-counter,
	.dfdc-th-card__icon,
	.dfdc-blog-share { display: none !important; }

	a { color: #0F1513 !important; text-decoration: none !important; }

	/* Avoid orphan headings */
	h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
}

/* ---------- CARRIER-NEUTRAL — carrier strip ---------- */

.dfdc-th-carriers {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
	margin-bottom: clamp(28px, 3vw, 44px);
}
.dfdc-th-carrier {
	padding: 28px 28px 32px;
	border: 1px dashed rgba(15, 21, 19, 0.18);
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--dfdc-surface);
	transition: border-color 160ms ease;
}
.dfdc-th-carrier:hover { border-color: var(--dfdc-mint); }
.dfdc-th-carrier h3 {
	margin: 0;
	font-family: var(--dfdc-font-sans);
	font-weight: 400;
	font-size: 24px;
	letter-spacing: -0.014em;
	color: var(--dfdc-text-dark);
}
.dfdc-th-carrier__role {
	margin: 0;
	font-family: var(--dfdc-font-sans);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dfdc-mint-700);
}
.dfdc-th-carrier p:not(.dfdc-th-carrier__role) {
	margin: 4px 0 0;
	color: var(--dfdc-text-dark-muted);
	line-height: 1.55;
	font-size: 14px;
}
@media (max-width: 880px) { .dfdc-th-carriers { grid-template-columns: 1fr; } }

/* ---------- ABOUT — journey timeline ---------- */

.dfdc-th-journey {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-top: 1px dashed rgba(255, 255, 255, 0.18);
	border-left: 1px dashed rgba(255, 255, 255, 0.18);
	counter-reset: journey;
}
.dfdc-th-journey__item {
	counter-increment: journey;
	padding: 24px 26px 28px;
	border-right: 1px dashed rgba(255, 255, 255, 0.18);
	border-bottom: 1px dashed rgba(255, 255, 255, 0.18);
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: rgba(233, 244, 240, 0.85);
}
.dfdc-th-journey__year {
	font-family: var(--dfdc-font-sans);
	font-weight: 500;
	font-size: 28px;
	letter-spacing: -0.01em;
	color: var(--dfdc-mint);
	font-variant-numeric: tabular-nums;
}
.dfdc-th-journey__title {
	margin: 0;
	font-family: var(--dfdc-font-sans);
	font-weight: 400;
	font-size: 18px;
	letter-spacing: -0.005em;
	color: var(--dfdc-text);
}
.dfdc-th-journey__body {
	margin: 0;
	color: rgba(233, 244, 240, 0.78);
	line-height: 1.55;
	font-size: 14px;
}

@media (max-width: 980px) { .dfdc-th-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .dfdc-th-journey { grid-template-columns: 1fr; } }

/* ---------- ABOUT — core values 9-card grid ---------- */

.dfdc-th-values {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	border-top: 1px dashed rgba(15, 21, 19, 0.18);
	border-left: 1px dashed rgba(15, 21, 19, 0.18);
}
.dfdc-th-values article {
	padding: 24px 26px 28px;
	border-right: 1px dashed rgba(15, 21, 19, 0.18);
	border-bottom: 1px dashed rgba(15, 21, 19, 0.18);
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.dfdc-th-values h3 {
	margin: 0;
	font-family: var(--dfdc-font-sans);
	font-weight: 400;
	font-size: 18px;
	letter-spacing: -0.005em;
	color: var(--dfdc-text-dark);
	position: relative;
	padding-left: 16px;
}
.dfdc-th-values h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 8px;
	height: 8px;
	background: var(--dfdc-mint);
}
.dfdc-th-values p {
	margin: 0;
	color: var(--dfdc-text-dark-muted);
	line-height: 1.5;
	font-size: 14px;
}
@media (max-width: 880px) { .dfdc-th-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .dfdc-th-values { grid-template-columns: 1fr; } }

/* ---------- ABOUT — sustainability stat cards ---------- */

.dfdc-th-stat {
	gap: 6px !important;
}
.dfdc-th-stat__eyebrow {
	font-family: var(--dfdc-font-sans);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dfdc-mint);
	font-weight: 500;
}
.dfdc-th-stat__value {
	font-family: var(--dfdc-font-sans);
	font-weight: 400;
	font-size: clamp(32px, 3vw + 0.4rem, 48px);
	letter-spacing: -0.018em;
	line-height: 1;
	color: var(--dfdc-text);
	font-variant-numeric: tabular-nums;
	margin: 4px 0 8px;
}

/* ---------- HOMEPAGE BLOCKS (after-content injection) ---------- */

/* Partners / networks strip — placeholder until logo SVGs land */
.dfdc-home-partners__head {
	margin-bottom: clamp(20px, 2vw, 32px);
	max-width: none;
}
.dfdc-home-partners__lede { margin: 8px 0 0; font-size: 15px; }
.dfdc-home-partners__grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0;
	border-top: 1px dashed rgba(15, 21, 19, 0.18);
	border-left: 1px dashed rgba(15, 21, 19, 0.18);
}
.dfdc-home-partners__grid span {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 84px;
	padding: 16px 12px;
	border-right: 1px dashed rgba(15, 21, 19, 0.18);
	border-bottom: 1px dashed rgba(15, 21, 19, 0.18);
	font-family: var(--dfdc-font-sans);
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 0.04em;
	color: var(--dfdc-text-dark-muted);
	text-align: center;
	transition: color 160ms ease, background 160ms ease;
}
.dfdc-home-partners__grid span:hover {
	color: var(--dfdc-text-dark);
	background: var(--dfdc-surface-2);
}
@media (max-width: 980px) { .dfdc-home-partners__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .dfdc-home-partners__grid { grid-template-columns: repeat(2, 1fr); } }

.dfdc-home-blocks__cta {
	margin-top: clamp(28px, 3vw, 44px);
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* ---------- LATEST FROM DFDC (compact strip) ----------
 *
 * Light section, 3-card row. Each card is the whole link surface —
 * thumbnail (3:2) on top, copy below. Hover lifts the title color
 * and slides the arrow.
 */

.dfdc-th-latest__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	max-width: none;
}
.dfdc-th-latest__title { margin: 0; }

.dfdc-th-latest__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(16px, 2vw, 28px);
}

.dfdc-th-latest__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-decoration: none;
	color: inherit;
	border-bottom: 1px dashed rgba(15, 21, 19, 0.18);
	padding-bottom: 16px;
	transition: border-color 160ms ease;
}
.dfdc-th-latest__card:hover {
	border-bottom-color: var(--dfdc-mint);
}
.dfdc-th-latest__card:hover .dfdc-th-latest__h3 { color: var(--dfdc-mint-700); }
.dfdc-th-latest__card:hover .dfdc-th-latest__cta { color: var(--dfdc-mint-700); }

.dfdc-th-latest__media {
	margin: 0;
	overflow: hidden;
}
.dfdc-th-latest__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	max-height: 220px;
	object-fit: cover;
	display: block;
	transition: transform 220ms ease;
}
.dfdc-th-latest__card:hover .dfdc-th-latest__media img { transform: scale(1.02); }

.dfdc-th-latest__copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.dfdc-th-latest__meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--dfdc-font-sans);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dfdc-text-dark-muted);
}
.dfdc-th-latest__h3 {
	margin: 0;
	font-family: var(--dfdc-font-sans);
	font-weight: 400;
	font-size: clamp(16px, 1.2vw + 0.2rem, 20px);
	letter-spacing: -0.005em;
	line-height: 1.3;
	color: var(--dfdc-text-dark);
	transition: color 160ms ease;
}
.dfdc-th-latest__cta {
	font-family: var(--dfdc-font-sans);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dfdc-mint-700);
	margin-top: auto;
	transition: color 160ms ease;
}

@media (max-width: 880px) {
	.dfdc-th-latest__grid { grid-template-columns: 1fr; }
}

/* ---------- FACILITY GALLERY (2x2) ---------- */

.dfdc-th-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 20px);
}
.dfdc-th-gallery figure { margin: 0; }
.dfdc-th-gallery img {
	width: 100%;
	aspect-ratio: 4 / 3;
	max-height: 380px;
	object-fit: cover;
	display: block;
}
.dfdc-th-gallery figcaption {
	margin-top: 10px;
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dfdc-text-dark-muted);
}

@media (max-width: 720px) {
	.dfdc-th-gallery { grid-template-columns: 1fr; }
}

/* ---------- CLOSING CTA ---------- */

.dfdc-th-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(24px, 3vw, 48px);
	align-items: center;
}
.dfdc-th-cta__buttons {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
}
.dfdc-th-cta__buttons .dfdc-th-btn { justify-content: center; }

@media (max-width: 880px) {
	.dfdc-th-cta__inner { grid-template-columns: 1fr; }
	.dfdc-th-cta__buttons { flex-direction: row; flex-wrap: wrap; }
}

/* ---------- /partners/ — archive grid + per-partner page ---------- */

/* Partner archive grid (also reused on /carrier-neutral/). Same dashed-grid
 * pattern as .dfdc-th-cards, but each cell is a clickable card linking to
 * the partner page. */
.dfdc-partner-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	border-top: 1px dashed rgba(15, 21, 19, 0.18);
	border-left: 1px dashed rgba(15, 21, 19, 0.18);
	margin-bottom: clamp(28px, 3vw, 44px);
}
.dfdc-th-section--dark .dfdc-partner-grid {
	border-top-color: rgba(255, 255, 255, 0.16);
	border-left-color: rgba(255, 255, 255, 0.16);
}
.dfdc-partner-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 24px 24px 28px;
	border-right: 1px dashed rgba(15, 21, 19, 0.18);
	border-bottom: 1px dashed rgba(15, 21, 19, 0.18);
	background: var(--dfdc-surface);
	text-decoration: none;
	color: inherit;
	transition: border-color 160ms ease, background 160ms ease;
}
.dfdc-partner-card:hover { border-color: var(--dfdc-mint); }
.dfdc-partner-card:hover .dfdc-partner-card__name { color: var(--dfdc-mint-700); }
.dfdc-th-section--dark .dfdc-partner-card {
	background: transparent;
	border-right-color: rgba(255, 255, 255, 0.16);
	border-bottom-color: rgba(255, 255, 255, 0.16);
}
.dfdc-th-section--dark .dfdc-partner-card:hover .dfdc-partner-card__name { color: var(--dfdc-mint); }

/*
 * Partner logo plate — fixed-height box with the artwork contained
 * inside it. Carrier logos arrive at every imaginable aspect ratio
 * (Verizon is wide, AFiber is a small monogram). `object-fit: contain`
 * + a max-width cap means every card lines up to the same visual
 * baseline regardless of the artwork shape.
 *
 * The wrapper <span> takes the slot dimensions; the <img> sizes itself
 * to fit. Same plate is reused (at larger height) on the partner hero.
 */
.dfdc-partner-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 88px;
	padding: 12px 20px;
	margin: 0 0 14px;
	/* Plain white plate so every carrier logo reads cleanly regardless
	 * of its brand colour. Soft border instead of dashed; subtle inner
	 * shadow gives the plate a sense of physical depth on both light
	 * and dark sections without competing with the brand artwork. */
	background: #FFFFFF;
	border: 1px solid rgba(15, 21, 19, 0.08);
	border-radius: 4px;
	box-sizing: border-box;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8);
	transition: border-color 160ms ease, transform 160ms ease;
}
.dfdc-partner-card:hover .dfdc-partner-logo {
	border-color: rgba(45, 212, 163, 0.45);
	transform: translateY(-1px);
}
.dfdc-partner-logo__img {
	max-width: min(100%, 180px);
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}
.dfdc-th-section--dark .dfdc-partner-logo {
	/* Inside dark sections, keep the same white plate — dark carrier
	 * logos (Cogent, AT&T, Hurricane Electric, RETN, Verizon)
	 * universally assume a light background. A dark plate would lose
	 * half of them. */
	background: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.16);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.9), 0 4px 14px rgba(0, 0, 0, 0.25);
}

.dfdc-partner-logo--placeholder {
	font-family: var(--dfdc-font-serif, "Inter Tight", serif);
	font-style: italic;
	font-weight: 400;
	font-size: 18px;
	letter-spacing: -0.01em;
	color: var(--dfdc-mint-700);
	background: rgba(45, 212, 163, 0.04);
	border-color: rgba(15, 21, 19, 0.20);
}
.dfdc-th-section--dark .dfdc-partner-logo--placeholder {
	background: rgba(45, 212, 163, 0.06);
	border-color: rgba(255, 255, 255, 0.24);
	color: var(--dfdc-mint);
}

.dfdc-partner-card__name {
	margin: 0;
	font-family: var(--dfdc-font-sans);
	font-weight: 500;
	font-size: 18px;
	letter-spacing: -0.01em;
	color: var(--dfdc-text-dark);
	transition: color 160ms ease;
}
.dfdc-th-section--dark .dfdc-partner-card__name { color: var(--dfdc-text); }

.dfdc-partner-card__role {
	margin: 0;
	font-family: var(--dfdc-font-sans);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dfdc-mint-700);
}
.dfdc-th-section--dark .dfdc-partner-card__role { color: var(--dfdc-mint); }

.dfdc-partner-card__cta {
	margin-top: auto;
	font-family: var(--dfdc-font-sans);
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--dfdc-mint);
}

@media (max-width: 1024px) { .dfdc-partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .dfdc-partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .dfdc-partner-grid { grid-template-columns: 1fr; } }

/* Per-partner page — quick-facts strip */
.dfdc-partner-facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	border-top: 1px dashed rgba(15, 21, 19, 0.18);
	border-left: 1px dashed rgba(15, 21, 19, 0.18);
	margin: clamp(20px, 2.4vw, 32px) 0;
	list-style: none;
	padding: 0;
}
.dfdc-partner-facts > li {
	padding: 18px 20px 20px;
	border-right: 1px dashed rgba(15, 21, 19, 0.18);
	border-bottom: 1px dashed rgba(15, 21, 19, 0.18);
	background: var(--dfdc-surface);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.dfdc-partner-facts dt {
	font-family: var(--dfdc-font-sans);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dfdc-text-dark-muted);
}
.dfdc-partner-facts dd {
	margin: 0;
	font-family: var(--dfdc-font-sans);
	font-weight: 500;
	font-size: 16px;
	color: var(--dfdc-text-dark);
}
.dfdc-partner-facts a {
	color: var(--dfdc-mint-700);
	text-decoration: none;
}
.dfdc-partner-facts a:hover { color: var(--dfdc-mint); }

@media (max-width: 880px) { .dfdc-partner-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .dfdc-partner-facts { grid-template-columns: 1fr; } }

/* Per-partner page — wide hero logo block (above-the-fold).
 * Same logo-plate pattern as the cards, but at 2x scale and with the
 * image flush-left so the partner name underneath aligns to the eyebrow. */
.dfdc-partner-hero__logo {
	margin-bottom: 24px;
	max-width: 360px;
}
.dfdc-partner-hero__logo .dfdc-partner-logo {
	height: 120px;
	justify-content: flex-start;
	padding: 16px 28px;
	/* Light backplate inside the dark hero — third-party carrier logos
	 * arrive in their brand colours assuming a light background, and a
	 * dark logo on a dark hero is unreadable. The light plate matches
	 * how a sales deck would print a partner logo on a slide. */
	background: #FFFFFF;
	border-color: rgba(255, 255, 255, 0.16);
	border-radius: 4px;
}
.dfdc-partner-hero__logo .dfdc-partner-logo__img {
	max-width: min(100%, 260px);
}
.dfdc-partner-hero__logo .dfdc-partner-logo--placeholder {
	min-width: 220px;
	font-size: 24px;
	color: var(--dfdc-mint);
	background: rgba(45, 212, 163, 0.06);
	border-color: rgba(255, 255, 255, 0.32);
}