/**
 * Page and section styles.
 * Node references point back to the DKX Figma file.
 */

/* ====================================================== Section divider == */
/* Every homepage band carries a 1px grey-300 bottom rule (Figma: each section
   frame has `border-b` in #888888). This is the divider running down the page. */

.dkx-band {
	border-bottom: 1px solid var(--dkx-grey-300);
}

/* Per-word emphasis inside display headings and the strapline. */
.dkx-dim {
	color: var(--dkx-grey-300);
}

/* =========================================================== Home: hero == */
/* Figma 0:340 — 1440x900, photo + 50% black scrim, 64px bold centred heading */

.dkx-hero {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 900px;
	padding: calc(var(--dkx-header-h) + 40px) var(--dkx-gutter) 40px;
	overflow: hidden;
	background: var(--dkx-black-900);
	isolation: isolate;
}

.dkx-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

/* Cross-fade: every slide is stacked, only the active one is opaque. Fading
   rather than sliding keeps the centred heading visually still. */
.dkx-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1200ms ease-in-out;
}

.dkx-hero__slide.is-active {
	opacity: 1;
}

.dkx-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
	.dkx-hero__slide {
		transition: none;
	}
}

.dkx-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, 0.5);
	pointer-events: none;
}

.dkx-hero__title {
	max-width: 852px;
	margin: 0 auto;
	color: var(--dkx-white);
	font-size: clamp(28px, 4.4vw, 64px);
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
	overflow-wrap: break-word;
}

@media (max-width: 782px) {
	.dkx-hero {
		min-height: 640px;
	}
}

/* ====================================================== Home: strapline == */
/* Figma 0:343 — px130 py64, centred 1032px block, 36px medium, greyed words */

.dkx-strapline {
	padding-block: var(--dkx-section-y);
}

.dkx-strapline__text {
	max-width: 1032px;
	margin-inline: auto;
	font-size: var(--dkx-fs-4xl);
	font-weight: var(--dkx-fw-medium);
	line-height: 1.15;
	text-align: center;
	text-transform: uppercase;
	text-wrap: balance;
	overflow-wrap: break-word;
	color: var(--dkx-black-900);
}

/* Figma mobile (0:571) sets this block at 320x100 for the full string. */
@media (max-width: 782px) {
	.dkx-strapline__text {
		font-size: var(--dkx-fs-lg);
		line-height: 1.4;
	}
}

/* ========================================================= Home: mosaic == */
/* Figma 0:345 — full-bleed: 3-up 476x280 strip, then two 2-up 717x420 rows,
   6px gutters. Every tile is its own slideshow with white outline arrows. */

.dkx-mosaic {
	display: grid;
	gap: 6px;
	padding-block: var(--dkx-section-y);
}

.dkx-mosaic__row {
	display: grid;
	gap: 6px;
}

.dkx-mosaic__row--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dkx-mosaic__row--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dkx-mosaic__tile {
	position: relative;
	overflow: hidden;
	background: var(--dkx-surface);
}

.dkx-mosaic__slides {
	display: flex;
	height: 100%;
	position: relative;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: auto;
	scrollbar-width: none;
}

.dkx-mosaic__slides::-webkit-scrollbar {
	display: none;
}

/* Height comes from the tile, never the photo's own ratio. */
.dkx-mosaic__slides > * {
	flex: 0 0 100%;
	height: 100%;
	aspect-ratio: auto !important;
	scroll-snap-align: start;
}

/* Figma: transparent at the midpoint down to rgba(0,0,0,0.7) at the base. */
.dkx-mosaic__tile::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%);
	pointer-events: none;
}

.dkx-mosaic__bar {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.dkx-mosaic__label {
	font-size: var(--dkx-fs-3xl);
	font-weight: var(--dkx-fw-medium);
	line-height: 1.1;
	color: var(--dkx-white);
}

.dkx-mosaic__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Figma 0:350 — 48px circles, 1px white border, transparent fill. */
.dkx-mosaic__arrows {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
}

.dkx-mosaic__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 10px;
	border: 1px solid var(--dkx-white);
	border-radius: var(--dkx-radius-pill);
	background: transparent;
	color: var(--dkx-white);
	transition: background-color var(--dkx-transition), color var(--dkx-transition);
}

.dkx-mosaic__arrow:hover:not([disabled]) {
	background: var(--dkx-white);
	color: var(--dkx-black-900);
}

.dkx-mosaic__arrow[disabled] {
	opacity: 0.4;
	cursor: default;
}

.dkx-mosaic__arrow svg {
	width: var(--dkx-icon);
	height: var(--dkx-icon);
}

@media (max-width: 782px) {
	.dkx-mosaic__row--three,
	.dkx-mosaic__row--two {
		grid-template-columns: minmax(0, 1fr);
	}

	.dkx-mosaic__label {
		font-size: var(--dkx-fs-xl);
	}

	.dkx-mosaic__arrow {
		width: 40px;
		height: 40px;
	}
}

/* ===================================================== Home: intro band == */
/* Figma 0:377 — 780px block offset right, 18px copy, right-aligned CTA */

.dkx-intro {
	padding-block: var(--dkx-section-y);
}

.dkx-intro__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: flex-end;
	max-width: 780px;
	margin-left: auto;
}

.dkx-intro__text {
	width: 100%;
	font-size: var(--dkx-fs-lg);
	line-height: var(--dkx-lh-body);
	color: var(--dkx-black-900);
}

@media (max-width: 900px) {
	.dkx-intro__inner {
		margin-left: 0;
		align-items: flex-start;
	}
}

/* ================================================== Home: rental assets == */
/* Figma 0:381 — heading + arrows, then a 380px card carousel, CTA bottom-right */

.dkx-assets {
	padding-block: var(--dkx-section-y);
}

.dkx-assets__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 48px;
}

/* Top-aligned so cards of differing height stagger, as in the design. */
.dkx-assets__track {
	align-items: flex-start;
}

.dkx-assets__track > * {
	width: 380px;
	max-width: 84vw;
}

.dkx-assets__foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 48px;
}

@media (max-width: 782px) {
	.dkx-assets__track > * {
		width: 320px;
	}

	.dkx-assets__head .dkx-arrows {
		display: none;
	}

	.dkx-assets__foot {
		justify-content: space-between;
		align-items: center;
	}
}

/* ======================================================= Home: partners == */
/* Figma 0:391 — heading, 780px lockup block offset right, a tab-card carousel
   with arrows, then a full-bleed image slider with its own centred arrows. */

.dkx-partners {
	padding-block: var(--dkx-section-y) 0;
}

.dkx-partners__lockup {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	max-width: 780px;
	margin: 64px 0 0 auto;
}

.dkx-partners__logo {
	width: 339px;
	max-width: 100%;
}

.dkx-partners__logo img,
.dkx-partners__logo svg {
	width: 100%;
	height: auto;
}

.dkx-partners__text {
	font-size: var(--dkx-fs-lg);
	line-height: var(--dkx-lh-body);
	color: var(--dkx-black-900);
}

.dkx-partners__tabs {
	margin-top: 80px;
}

.dkx-partners__track {
	align-items: flex-start;
}

.dkx-partners__arrows {
	display: flex;
	justify-content: flex-end;
	margin-top: 40px;
}

/* Full-bleed slider (Figma 0:407) with centred white arrows.
   Runs at 16:9 rather than the design's 2.55:1 — the flatter crop read as a
   letterbox strip beside the tiles higher up the page. */
.dkx-slider {
	position: relative;
	margin-top: 48px;
}

.dkx-exp-panel[hidden] {
	display: none;
}

/* Service tabs are buttons when they drive a gallery; strip the button chrome. */
button.dkx-tabtxt {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.dkx-slider__track > * {
	width: 100%;
	flex: 0 0 100%;
}

.dkx-slider__arrows {
	position: absolute;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	gap: 10px;
}

.dkx-slider__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 10px;
	border: 1px solid var(--dkx-white);
	border-radius: var(--dkx-radius-pill);
	background: rgba(0, 0, 0, 0.15);
	color: var(--dkx-white);
	backdrop-filter: blur(2px);
	transition: background-color var(--dkx-transition), color var(--dkx-transition);
}

.dkx-slider__arrow:hover:not([disabled]) {
	background: var(--dkx-white);
	color: var(--dkx-black-900);
}

.dkx-slider__arrow[disabled] {
	opacity: 0.4;
	cursor: default;
}

.dkx-slider__arrow svg {
	width: var(--dkx-icon);
	height: var(--dkx-icon);
}

@media (max-width: 1100px) {
	.dkx-partners__lockup {
		margin-top: 40px;
	}

	.dkx-partners__tabs {
		margin-top: 48px;
	}
}

/* ================================================== Home: good company == */
/* Figma 0:410 — heading, 780px copy block offset right, then a logo carousel */

.dkx-company {
	padding-block: var(--dkx-section-y);
}

.dkx-company__body {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: flex-end;
	max-width: 780px;
	margin: 64px 0 0 auto;
}

.dkx-company__text {
	width: 100%;
	font-size: var(--dkx-fs-lg);
	line-height: var(--dkx-lh-body);
	color: var(--dkx-black-900);
}

.dkx-company__logos {
	gap: 40px;
	align-items: flex-start;
	margin-top: 64px;
}

.dkx-company__arrows {
	display: flex;
	justify-content: flex-end;
	margin-top: 32px;
}

@media (max-width: 1100px) {
	.dkx-company__body {
		margin-top: 32px;
		align-items: flex-start;
	}
}

/* ====================================================== Home: instagram == */
/* Figma 0:422 — heading + pill tabs on one row, then a 3-up card grid */

.dkx-instagram {
	padding-block: var(--dkx-section-y);
}

.dkx-instagram__head {
	display: flex;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
	margin-bottom: 32px;
}

.dkx-instagram__title {
	font-size: var(--dkx-fs-3xl);
	font-weight: var(--dkx-fw-medium);
	line-height: var(--dkx-lh-tight);
}

.dkx-instagram__tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.dkx-instagram__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dkx-grid-gap);
}

@media (max-width: 900px) {
	.dkx-instagram__grid {
		grid-template-columns: minmax(0, 1fr);
		max-width: 380px;
	}
}

/* ======================================================= Section heading == */

.dkx-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
}

/* ================================================ Rental asset: product ==
   Figma 0:434 — tab row, 1180x600 hero, title with a greyed trailing word,
   780px copy offset right with a right-aligned CTA, then SPECIFICATIONS and
   FEATURES. Every band carries the section divider. */

.dkx-product {
	padding-block: var(--dkx-section-y);
}

.dkx-product__tabs {
	margin-bottom: 40px;
}

.dkx-product__media {
	margin-bottom: 40px;
}

.dkx-product__title {
	margin-bottom: 32px;
}

.dkx-product__body {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: flex-end;
	max-width: 780px;
	margin-left: auto;
}

.dkx-product__text {
	width: 100%;
	font-size: var(--dkx-fs-lg);
	line-height: var(--dkx-lh-body);
	color: var(--dkx-black-900);
}

@media (max-width: 900px) {
	.dkx-product__body {
		margin-left: 0;
		align-items: flex-start;
	}
}

/* Figma mobile 0:652 crops the hero to 4:3 rather than the desktop ~2:1.
   Needs !important because dkx_image() sets aspect-ratio inline. */
@media (max-width: 782px) {
	.dkx-product__media .dkx-media {
		aspect-ratio: 320 / 240 !important;
	}
}

/* Specifications — Figma 0:443 */

.dkx-specs {
	padding-block: var(--dkx-section-y);
}

.dkx-specs__model {
	margin: 24px 0 32px;
	font-size: var(--dkx-fs-3xl);
	font-weight: var(--dkx-fw-regular);
	line-height: var(--dkx-lh-tight);
	color: var(--dkx-black-900);
}

.dkx-specs__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 20px;
	align-items: start;
}

@media (max-width: 900px) {
	.dkx-specs__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

/* Features — Figma 0:475 — a 680px lead block beside two stacked 480px ones */

.dkx-features {
	padding-block: var(--dkx-section-y);
}

.dkx-features__grid {
	display: grid;
	grid-template-columns: 680fr 480fr;
	gap: 20px;
	margin-top: 32px;
	align-items: start;
}

.dkx-features__col {
	display: grid;
	grid-template-rows: auto auto;
	gap: 30px;
}

.dkx-feature {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dkx-feature__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dkx-feature__title {
	font-size: var(--dkx-fs-2xl);
	font-weight: var(--dkx-fw-medium);
	line-height: var(--dkx-lh-tight);
	color: var(--dkx-black-900);
}

.dkx-feature__text {
	font-size: var(--dkx-fs-base);
	line-height: var(--dkx-lh-body);
	color: var(--dkx-grey-700);
}

@media (max-width: 900px) {
	.dkx-features__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ============================================================== Gallery == */
/* Figma 0:497 — heading, filter bar, then a repeating four-row mosaic:
   1180x600 full / stacked pair + tall / tall + stacked pair / three 380x320.
   20px gutters throughout (12px on mobile). */

.dkx-gallery {
	padding-block: var(--dkx-section-y);
}

.dkx-gallery__tabs {
	margin: 32px 0 40px;
}

.dkx-gallery__grid {
	display: flex;
	flex-direction: column;
	gap: var(--dkx-grid-gap);
}

.dkx-gallery__row--full {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.dkx-gallery__row--split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--dkx-grid-gap);
}

.dkx-gallery__row--thirds {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dkx-grid-gap);
}

.dkx-gallery__stack {
	display: grid;
	grid-template-rows: repeat(2, minmax(0, 1fr));
	gap: var(--dkx-grid-gap);
}

.dkx-gallery__tile {
	display: block;
	overflow: hidden;
	background: var(--dkx-surface);
}

.dkx-gallery__tile img {
	transition: transform 500ms ease;
}

a.dkx-gallery__tile:hover img {
	transform: scale(1.04);
}

.dkx-gallery__intro {
	margin-top: 48px;
}

.dkx-gallery__foot {
	display: flex;
	justify-content: flex-end;
	margin-top: 40px;
}

.dkx-gallery__empty {
	padding: 64px 0;
	color: var(--dkx-grey-600);
}

/* Figma mobile 0:716 — 12px gutters, and the 3-up strip stacks to one column
   of full-width tiles while the split rows stay side by side. */
@media (max-width: 782px) {
	.dkx-gallery__grid,
	.dkx-gallery__row--split,
	.dkx-gallery__row--thirds,
	.dkx-gallery__stack {
		gap: var(--dkx-grid-gap-sm);
	}

	.dkx-gallery__row--thirds {
		grid-template-columns: minmax(0, 1fr);
	}

	.dkx-gallery__foot {
		justify-content: center;
	}
}

/* ================================================================ About == */
/* Figma 0:518 — 580px copy column left, 500x724 portrait right */

.dkx-about {
	padding-block: var(--dkx-section-y);
}

/* Figma 0:520 is `items-center`: the copy column sits vertically centred
   against the 500x724 portrait, not top-aligned. */
.dkx-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 580px) minmax(0, 500px);
	justify-content: space-between;
	gap: 60px;
	align-items: center;
}

.dkx-about__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
}

/* Figma 0:523 — 36px between the copy block and the button. */
.dkx-about__txtbtn {
	display: flex;
	flex-direction: column;
	gap: 36px;
	align-items: flex-start;
	width: 100%;
}

.dkx-about__text {
	font-size: var(--dkx-fs-base);
	line-height: var(--dkx-lh-body);
	color: var(--dkx-black-900);
}

.dkx-about__text p + p {
	margin-top: 1em;
}

@media (max-width: 900px) {
	.dkx-about__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ============================================================== Contact == */
/* Figma 0:528 — details + image left, 580px form right */

.dkx-contact {
	padding-block: var(--dkx-section-y);
}

.dkx-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 500px) minmax(0, 580px);
	justify-content: space-between;
	gap: 60px;
	align-items: start;
}

.dkx-contact__details {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.dkx-contact__info {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Figma 0:544 — 32px between the field stack and the submit button,
   24px between fields, 20px between the two columns of a row. */

.dkx-form {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: flex-start;
}

.dkx-form__fields {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.dkx-form__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

/* Figma 0:555 — full width, 18px medium label, centred. */
.dkx-btn--submit {
	width: 100%;
	padding: 10px 24px;
	font-size: var(--dkx-fs-lg);
}

.dkx-form__notice {
	padding: 16px 20px;
	border: 1px solid var(--dkx-grey-100);
	border-left: 3px solid var(--dkx-black-900);
	font-size: var(--dkx-fs-base);
}

.dkx-form__notice--error {
	border-left-color: #b3261e;
	color: #b3261e;
}

/* Honeypot — visually and programmatically removed, but present for bots. */
.dkx-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (max-width: 900px) {
	.dkx-contact__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Figma mobile 0:760 — the name pair stays side by side (154px each); every
   other row becomes full width. */
@media (max-width: 560px) {
	.dkx-form__row {
		grid-template-columns: minmax(0, 1fr);
	}

	.dkx-form__row--names {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}
}

/* ================================================== Generic page / 404 === */

.dkx-page {
	padding-block: var(--dkx-section-y);
}

.dkx-page__title {
	margin-bottom: 32px;
}

.dkx-prose {
	max-width: 780px;
	font-size: var(--dkx-fs-base);
	line-height: var(--dkx-lh-body);
}

.dkx-prose > * + * {
	margin-top: 1.25em;
}

.dkx-prose h2 {
	font-size: var(--dkx-fs-3xl);
	font-weight: var(--dkx-fw-medium);
	line-height: var(--dkx-lh-tight);
}

.dkx-prose h3 {
	font-size: var(--dkx-fs-xl);
	font-weight: var(--dkx-fw-medium);
}

.dkx-prose a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dkx-prose ul {
	list-style: disc;
	padding-left: 1.25em;
}

.dkx-prose ol {
	list-style: decimal;
	padding-left: 1.25em;
}

.dkx-404 {
	display: grid;
	place-items: center;
	gap: 24px;
	min-height: 60vh;
	text-align: center;
}