/* ==========================================================================
   DATILA — components
   Buttons, cards, headings, forms, notices, filters, pagination.
   ========================================================================== */

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

.dt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	padding: 0.85rem 1.4rem;
	border: 1px solid transparent;
	border-radius: var(--dt-r-pill);
	font-size: 0.9375rem;
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: transform var(--dt-fast), background var(--dt-fast), color var(--dt-fast), border-color var(--dt-fast), box-shadow var(--dt-fast);
}

.dt-btn svg {
	flex: 0 0 auto;
	transition: transform var(--dt-fast);
}

.dt-btn:hover {
	transform: translateY(-2px);
}

.dt-btn:hover svg {
	transform: translateX(3px);
}

.dt-btn:active {
	transform: translateY(0);
}

.dt-btn--accent {
	background: var(--dt-yellow);
	color: var(--dt-navy);
	box-shadow: 0 10px 24px -12px rgba(255, 196, 0, 0.9);
}

.dt-btn--accent:hover {
	background: var(--dt-yellow-hi);
	color: var(--dt-navy);
}

.dt-btn--dark {
	background: var(--dt-navy);
	color: var(--dt-white);
}

.dt-btn--dark:hover {
	background: var(--dt-navy-800);
	color: var(--dt-white);
}

.dt-btn--outline {
	border-color: var(--dt-line);
	background: var(--dt-white);
	color: var(--dt-ink);
}

.dt-btn--outline:hover {
	border-color: var(--dt-ink);
	color: var(--dt-ink);
}

.dt-btn--ghost {
	border-color: rgba(255, 255, 255, 0.26);
	background: rgba(255, 255, 255, 0.04);
	color: var(--dt-white);
}

.dt-btn--ghost:hover {
	border-color: var(--dt-white);
	color: var(--dt-white);
}

.dt-btn--block {
	width: 100%;
}

.dt-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
	font-size: var(--fs-sm);
	color: var(--dt-ink);
	border-bottom: 1px solid transparent;
	transition: color var(--dt-fast), border-color var(--dt-fast);
}

.dt-link:hover {
	color: var(--dt-ink);
	border-bottom-color: var(--dt-yellow);
}

/* Headings & eyebrows ---------------------------------------------------- */

.dt-heading {
	max-width: 62ch;
}

.dt-heading--center,
.dt-heading--centered {
	margin-inline: auto;
	text-align: center;
}

.dt-heading__title {
	margin: 0 0 0.75rem;
}

.dt-heading__text {
	margin: 0;
	color: var(--dt-muted);
	font-size: var(--fs-lead);
	line-height: 1.65;
}

.dt-heading--invert .dt-heading__text {
	color: rgba(255, 255, 255, 0.66);
}

.dt-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dt-muted);
}

.dt-eyebrow--light {
	color: rgba(255, 255, 255, 0.6);
}

.dt-eyebrow__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--dt-yellow);
	flex: 0 0 auto;
	box-shadow: 0 0 0 4px rgba(255, 196, 0, 0.16);
}
/* Cards ------------------------------------------------------------------ */

.dt-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1.35rem, 1rem + 1vw, 1.85rem);
	background: var(--dt-white);
	border: 1px solid var(--dt-line);
	border-radius: var(--dt-r-lg);
	transition: transform var(--dt-base), box-shadow var(--dt-base), border-color var(--dt-base);
}

.dt-card:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow: var(--dt-shadow-lg);
}

.dt-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1.15rem;
}

.dt-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--dt-r-sm);
	background: var(--dt-soft);
	color: var(--dt-ink);
	flex: 0 0 auto;
	transition: background var(--dt-base), color var(--dt-base);
}

.dt-card:hover .dt-card__icon {
	background: var(--dt-yellow);
	color: var(--dt-navy);
}

.dt-card__badge {
	padding: 0.35rem 0.65rem;
	border-radius: var(--dt-r-pill);
	background: var(--dt-soft);
	color: var(--dt-muted);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.dt-card__index {
	display: block;
	margin-bottom: 0.6rem;
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	color: var(--dt-yellow);
}

.dt-card__kicker {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dt-muted);
}

.dt-card__title {
	margin: 0 0 0.6rem;
	font-size: var(--fs-h3);
	line-height: 1.25;
}

.dt-card__title a:hover {
	color: var(--dt-ink);
	text-decoration: underline;
	text-decoration-color: var(--dt-yellow);
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

.dt-card__text {
	margin: 0 0 1.25rem;
	color: var(--dt-muted);
	font-size: var(--fs-sm);
	line-height: 1.7;
}

.dt-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: 1.1rem;
	border-top: 1px solid var(--dt-line);
}

.dt-card__link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dt-ink);
	transition: color var(--dt-fast), gap var(--dt-fast);
}

.dt-card:hover .dt-card__link {
	color: var(--dt-ink);
	gap: 0.65rem;
}

.dt-card__quote {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.7rem;
	border: 1px solid var(--dt-line);
	border-radius: var(--dt-r-pill);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dt-muted);
	transition: all var(--dt-fast);
}

.dt-card__quote:hover {
	border-color: var(--dt-ink);
	color: var(--dt-ink);
}

.dt-card__date {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--fs-xs);
	color: var(--dt-muted);
}

/* Card media ------------------------------------------------------------- */

.dt-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--dt-r);
	aspect-ratio: 16 / 10;
	background: var(--dt-navy);
	margin-bottom: 1.25rem;
}

.dt-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--dt-slow);
}

.dt-card__media:hover .dt-card__img {
	transform: scale(1.05);
}

.dt-card__art {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	overflow: hidden;
	background: linear-gradient(135deg, #0b1826, #07111c 60%, #101f31);
}

.dt-card__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 85%);
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 85%);
}

.dt-card__mono,
.dt-card__glyph {
	position: relative;
	font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--dt-yellow);
	text-shadow: 0 6px 30px rgba(255, 196, 0, 0.35);
}

.dt-card__glyph {
	color: rgba(255, 255, 255, 0.85);
	text-shadow: none;
}

.dt-card__art--violet { background: linear-gradient(135deg, #1b1040, #2a1a5e 60%, #140d33); }
.dt-card__art--red    { background: linear-gradient(135deg, #3a0d12, #5c1720 60%, #25090d); }
.dt-card__art--blue   { background: linear-gradient(135deg, #071a33, #0d2f57 60%, #04101f); }
.dt-card__art--teal   { background: linear-gradient(135deg, #04292b, #0a4448 60%, #02181a); }
.dt-card__art--green  { background: linear-gradient(135deg, #062617, #0c3d28 60%, #04160e); }
.dt-card__art--indigo { background: linear-gradient(135deg, #10143a, #1e2670 60%, #0a0d28); }
.dt-card__art--slate  { background: linear-gradient(135deg, #161c26, #28323f 60%, #0d1117); }
.dt-card__art--amber  { background: linear-gradient(135deg, #3a2606, #5d400c 60%, #241803); }

.dt-card__overlay {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: rgba(7, 17, 28, 0.6);
	opacity: 0;
	transition: opacity var(--dt-base);
}

.dt-card__media:hover .dt-card__overlay {
	opacity: 1;
}

.dt-card__overlay-text {
	padding: 0.6rem 1.15rem;
	border-radius: var(--dt-r-pill);
	background: var(--dt-yellow);
	color: var(--dt-navy);
	font-size: 0.8125rem;
	font-weight: 700;
}

.dt-project-hero .dt-card__art,
.dt-project-hero img {
	position: relative;
	aspect-ratio: 21 / 9;
	width: 100%;
	border-radius: var(--dt-r-lg);
	overflow: hidden;
}

.dt-project-hero img {
	object-fit: cover;
}
/* Forms ------------------------------------------------------------------ */

.dt-form-card {
	padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem);
	background: var(--dt-white);
	border: 1px solid var(--dt-line);
	border-radius: var(--dt-r-lg);
	box-shadow: var(--dt-shadow);
}

.dt-form-card__title {
	margin: 0 0 0.5rem;
	font-size: var(--fs-h3);
}

.dt-form-card__text {
	margin: 0 0 1.75rem;
	color: var(--dt-muted);
	font-size: var(--fs-sm);
}

.dt-form-card__foot {
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--dt-line);
	font-size: var(--fs-sm);
	color: var(--dt-muted);
}

.dt-form-card__foot a {
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--dt-yellow);
	text-underline-offset: 3px;
}

.dt-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem 1.25rem;
}

.dt-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
}

.dt-field--full {
	grid-column: 1 / -1;
}

.dt-field label,
.dt-field__label {
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--dt-ink);
}

.dt-field input,
.dt-field select,
.dt-field textarea,
.dt-search__field {
	width: 100%;
	padding: 0.8rem 0.95rem;
	background: var(--dt-white);
	border: 1px solid var(--dt-line);
	border-radius: var(--dt-r-sm);
	font-size: 0.9375rem;
	color: var(--dt-ink);
	transition: border-color var(--dt-fast), box-shadow var(--dt-fast);
	appearance: none;
}

.dt-field textarea {
	min-height: 130px;
	resize: vertical;
	line-height: 1.6;
}

.dt-field select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 9.5L12 15l5.5-5.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.9rem center;
	padding-right: 2.4rem;
}

.dt-field input:focus,
.dt-field select:focus,
.dt-field textarea:focus,
.dt-search__field:focus {
	outline: none;
	border-color: var(--dt-ink);
	box-shadow: 0 0 0 4px rgba(255, 196, 0, 0.35);
}

.dt-field__hint {
	font-size: var(--fs-xs);
	color: var(--dt-muted);
}

.dt-field__output {
	display: inline-flex;
	align-items: center;
	padding: 0.8rem 0.95rem;
	background: var(--dt-soft);
	border: 1px dashed var(--dt-line);
	border-radius: var(--dt-r-sm);
	font-weight: 800;
	font-size: 1.0625rem;
}

.dt-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dt-form__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem 1.25rem;
	margin-top: 1.75rem;
}

.dt-fieldset {
	margin: 0 0 1.75rem;
	padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
	border: 1px solid var(--dt-line);
	border-radius: var(--dt-r);
}

.dt-fieldset legend {
	display: flex;
	align-items: center;
	gap: 0.65rem;
	padding: 0 0.5rem;
	font-size: var(--fs-sm);
	font-weight: 800;
	letter-spacing: -0.01em;
}

.dt-fieldset__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--dt-navy);
	color: var(--dt-white);
	font-size: 0.75rem;
	font-weight: 800;
}

/* Choices ---------------------------------------------------------------- */

.dt-choices {
	display: grid;
	gap: 0.7rem;
}

.dt-choices--row {
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

.dt-choice {
	display: block;
	cursor: pointer;
}

.dt-choice input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.dt-choice__body {
	display: block;
	padding: 0.9rem 1rem;
	border: 1px solid var(--dt-line);
	border-radius: var(--dt-r-sm);
	transition: border-color var(--dt-fast), background var(--dt-fast), box-shadow var(--dt-fast);
}

.dt-choice__body strong {
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
}

.dt-choice__body em {
	display: block;
	margin-top: 0.2rem;
	font-style: normal;
	font-size: var(--fs-xs);
	color: var(--dt-muted);
}

.dt-choice__meta {
	display: inline-block;
	margin-top: 0.5rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--dt-ink);
}

.dt-choice input:checked + .dt-choice__body {
	border-color: var(--dt-yellow);
	background: rgba(255, 196, 0, 0.1);
	box-shadow: 0 0 0 3px rgba(255, 196, 0, 0.22);
}

.dt-choice input:focus-visible + .dt-choice__body {
	outline: 3px solid var(--dt-yellow);
	outline-offset: 2px;
}

.dt-choice--sm .dt-choice__body {
	padding: 0.75rem 0.85rem;
}
/* Notices ---------------------------------------------------------------- */

.dt-notice {
	margin: 0 0 1.5rem;
	padding: 0.95rem 1.15rem;
	border-radius: var(--dt-r-sm);
	border-left: 4px solid;
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.dt-notice--success {
	background: rgba(16, 145, 105, 0.1);
	border-color: #109169;
	color: #0a5f45;
}

.dt-notice--error {
	background: rgba(217, 45, 32, 0.08);
	border-color: #d92d20;
	color: #912018;
}

/* Search ----------------------------------------------------------------- */

.dt-search {
	position: relative;
	display: flex;
	align-items: center;
	min-width: min(100%, 320px);
}

.dt-search__field {
	padding-right: 3rem;
	border-radius: var(--dt-r-pill);
	background: var(--dt-white);
}

.dt-search__submit {
	position: absolute;
	right: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	color: var(--dt-ink);
	transition: background var(--dt-fast), color var(--dt-fast);
}

.dt-search__submit:hover {
	background: var(--dt-yellow);
	color: var(--dt-navy);
}

/* Chips & filters -------------------------------------------------------- */

.dt-chips,
.dt-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.dt-chip,
.dt-filter__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.95rem;
	border: 1px solid var(--dt-line);
	border-radius: var(--dt-r-pill);
	background: var(--dt-white);
	font-size: var(--fs-xs);
	font-weight: 650;
	color: var(--dt-ink);
	transition: all var(--dt-fast);
}

.dt-chip span,
.dt-filter__btn span {
	font-size: 0.6875rem;
	color: var(--dt-muted);
}

.dt-chip:hover,
.dt-filter__btn:hover {
	border-color: var(--dt-ink);
	color: var(--dt-ink);
}

.dt-chip.is-active,
.dt-filter__btn.is-active {
	background: var(--dt-navy);
	border-color: var(--dt-navy);
	color: var(--dt-white);
}

.dt-chip.is-active span,
.dt-filter__btn.is-active span {
	color: rgba(255, 255, 255, 0.7);
}

.dt-filter--center {
	justify-content: center;
	margin-bottom: clamp(1.75rem, 1.25rem + 1.5vw, 2.75rem);
}

.dt-filter__empty {
	margin-top: 2rem;
	text-align: center;
	color: var(--dt-muted);
}

.dt-tag {
	display: inline-flex;
	padding: 0.35rem 0.75rem;
	border: 1px solid var(--dt-line);
	border-radius: var(--dt-r-pill);
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--dt-muted);
	transition: all var(--dt-fast);
}

a.dt-tag:hover {
	border-color: var(--dt-ink);
	color: var(--dt-ink);
}

.dt-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
/* Checklists, feature grids, specs --------------------------------------- */

.dt-checklist {
	display: grid;
	gap: 0.7rem;
}

.dt-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: var(--dt-muted);
	font-size: var(--fs-sm);
	line-height: 1.6;
}

.dt-checklist svg {
	flex: 0 0 auto;
	margin-top: 3px;
	color: #109169;
}

.dt-checklist--tight {
	gap: 0.5rem;
}

.dt-feature-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0.75rem;
}

.dt-feature-grid__item {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	padding: 0.85rem 1rem;
	background: var(--dt-soft);
	border-radius: var(--dt-r-sm);
	font-size: var(--fs-sm);
	line-height: 1.55;
}

.dt-feature-grid__item svg {
	flex: 0 0 auto;
	margin-top: 3px;
	color: var(--dt-ink);
}

.dt-specs {
	display: grid;
	gap: 0;
	margin: 0;
}

.dt-specs__row {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 1rem;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--dt-line);
}

.dt-specs__row:last-child {
	border-bottom: 0;
}

.dt-specs dt {
	font-weight: 700;
	font-size: var(--fs-sm);
}

.dt-specs dd {
	margin: 0;
	color: var(--dt-muted);
	font-size: var(--fs-sm);
}

.dt-linklist {
	display: grid;
	gap: 0.4rem;
	margin-bottom: 1rem;
}

.dt-linklist a {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0;
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--dt-ink);
}

.dt-linklist a svg {
	color: var(--dt-muted);
	flex: 0 0 auto;
	transition: transform var(--dt-fast);
}

.dt-linklist a:hover svg {
	transform: translate(2px, -2px);
	color: var(--dt-yellow);
}

/* Panels ----------------------------------------------------------------- */

.dt-panel {
	margin-top: 2rem;
	padding: clamp(1.25rem, 1rem + 1vw, 2rem);
	background: var(--dt-soft);
	border-radius: var(--dt-r-lg);
}

.dt-panel__title {
	margin: 0 0 1.1rem;
	font-size: var(--fs-h3);
}

.dt-panel__note {
	margin: 1rem 0 0;
	color: var(--dt-muted);
	font-size: var(--fs-xs);
}

.dt-flyer {
	width: 100%;
	max-width: 520px;
	height: auto;
	border-radius: var(--dt-r);
	box-shadow: var(--dt-shadow);
	background: var(--dt-white);
}

/* Aside cards ------------------------------------------------------------ */

.dt-aside-card {
	padding: clamp(1.25rem, 1rem + 0.8vw, 1.75rem);
	background: var(--dt-white);
	border: 1px solid var(--dt-line);
	border-radius: var(--dt-r-lg);
	margin-bottom: 1.25rem;
}

.dt-aside-card--sticky {
	position: sticky;
	top: calc(var(--dt-header-h) + 1.5rem);
}

.dt-aside-card--dark {
	background: var(--dt-navy);
	border-color: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.72);
}

.dt-aside-card__title {
	margin: 0 0 0.75rem;
	font-size: 1.0625rem;
	color: var(--dt-ink);
}

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

.dt-aside-card__lead {
	margin: 0 0 0.25rem;
	font-size: var(--fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dt-muted);
}

.dt-aside-card__price {
	margin: 0 0 1.1rem;
	font-size: 1.75rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--dt-ink);
}

.dt-aside-card__note {
	margin: 1rem 0 0;
	font-size: var(--fs-xs);
	color: var(--dt-muted);
}

.dt-aside-card--dark .dt-aside-card__note {
	color: rgba(255, 255, 255, 0.5);
}

.dt-aside-card .dt-btn + .dt-btn {
	margin-top: 0.6rem;
}

.dt-aside-card .dt-contact-list {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--dt-line);
}

.dt-aside-card--dark .dt-contact-list {
	border-top-color: rgba(255, 255, 255, 0.1);
}

.dt-aside-card--dark .dt-contact-list__label {
	color: rgba(255, 255, 255, 0.42);
}

.dt-aside-card--dark .dt-contact-list a,
.dt-aside-card--dark .dt-contact-list__value {
	color: rgba(255, 255, 255, 0.82);
}

.dt-aside-card--dark .dt-contact-list__icon {
	background: rgba(255, 255, 255, 0.08);
	color: var(--dt-yellow);
}

/* Contact list ----------------------------------------------------------- */

.dt-contact-list {
	display: grid;
	gap: 0.9rem;
	margin: 0;
}

.dt-contact-list__item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.dt-contact-list__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	border-radius: var(--dt-r-sm);
	background: var(--dt-soft);
	color: var(--dt-ink);
}

.dt-contact-list__body {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.dt-contact-list__label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dt-muted);
}

.dt-contact-list a,
.dt-contact-list__value {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--dt-ink);
	overflow-wrap: anywhere;
}

.dt-contact-list a:hover {
	color: var(--dt-ink);
	text-decoration: underline;
	text-decoration-color: var(--dt-yellow);
	text-underline-offset: 3px;
}
/* Meta, share, crumbs ---------------------------------------------------- */

.dt-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1.1rem;
	font-size: var(--fs-xs);
	color: var(--dt-muted);
}

.dt-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.dt-meta__item svg {
	color: var(--dt-yellow);
}

.dt-meta--light,
.dt-page-hero .dt-meta {
	color: rgba(255, 255, 255, 0.62);
}

.dt-meta__dot {
	opacity: 0.5;
}

.dt-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--fs-xs);
}

.dt-crumbs li {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: rgba(255, 255, 255, 0.55);
}

.dt-crumbs a {
	color: rgba(255, 255, 255, 0.72);
	font-weight: 600;
}

.dt-crumbs a:hover {
	color: var(--dt-yellow-hi);
}

.dt-crumbs [aria-current="page"] {
	color: var(--dt-white);
}

.dt-crumbs__sep {
	opacity: 0.4;
	flex: 0 0 auto;
}

.dt-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	padding-block: 1.25rem;
	border-block: 1px solid var(--dt-line);
}

.dt-share__label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dt-muted);
}

.dt-share__list {
	display: flex;
	gap: 0.4rem;
}

.dt-share__list a,
.dt-share__copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--dt-line);
	border-radius: 50%;
	color: var(--dt-ink);
	transition: all var(--dt-fast);
}

.dt-share__list a:hover,
.dt-share__copy:hover {
	background: var(--dt-yellow);
	border-color: var(--dt-yellow);
	color: var(--dt-navy);
}

.dt-share__copy.is-copied {
	background: #109169;
	border-color: #109169;
	color: #fff;
}

/* Pagination ------------------------------------------------------------- */

.dt-pagination {
	margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

.dt-pagination .page-numbers,
.dt-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dt-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: 0.85rem;
	border: 1px solid var(--dt-line);
	border-radius: var(--dt-r-sm);
	font-size: var(--fs-sm);
	font-weight: 650;
	color: var(--dt-ink);
	transition: all var(--dt-fast);
}

.dt-pagination .page-numbers:hover {
	border-color: var(--dt-ink);
	color: var(--dt-ink);
}

.dt-pagination .page-numbers.current {
	background: var(--dt-navy);
	border-color: var(--dt-navy);
	color: var(--dt-white);
}

.dt-pagination .page-numbers.dots {
	border-color: transparent;
}

/* Empty state ------------------------------------------------------------ */

.dt-empty {
	padding: clamp(2rem, 1.5rem + 2vw, 3.5rem);
	text-align: center;
	background: var(--dt-soft);
	border-radius: var(--dt-r-lg);
}

.dt-empty h2 {
	margin-bottom: 0.5rem;
}

.dt-empty p {
	color: var(--dt-muted);
	margin-bottom: 1.5rem;
}

.dt-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

/* Toolbar ---------------------------------------------------------------- */

.dt-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 1.5rem;
	margin-bottom: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
}

.dt-toolbar--center {
	justify-content: center;
	margin-bottom: 2rem;
}

.dt-toolbar__search {
	flex: 1 1 280px;
	max-width: 380px;
}

/* Reveal animation ------------------------------------------------------- */

[data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 0.7s var(--dt-ease), transform 0.7s var(--dt-ease);
	transition-delay: var(--dt-delay, 0ms);
}

[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* If JavaScript is unavailable the reveal class never gets applied, so make
   sure no content is ever left invisible. */
.no-js [data-reveal],
.no-js [style*="--dt-delay"] {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		opacity: 1;
		transform: none;
	}
}