/* ==========================================================================
   Cross-cutting responsive rules, reduced motion, no-JS and print.
   Component breakpoints live with their components:
     720px  tablet adjustments
     900px  project cards go side by side
     1024px desktop art direction (hero window, services list, process line)
     1200px footer in one row (720 to 1199px: three columns; below: stacked)
     1280px inline header links
   ========================================================================== */

/* Short desktop viewports (e.g. 1366 x 700 laptops) ---------------------- */

@media (min-width: 1024px) and (max-height: 760px) {
	.hero__copy {
		margin-top: 14px;
	}

	.hero__actions {
		margin-top: 20px;
	}

	.hero__scroll {
		bottom: 22px;
	}

	.hero__scroll-line {
		height: 44px;
	}

	.home-projects__list {
		padding-top: 32px;
	}
}

/* Very narrow phones ----------------------------------------------------- */

@media (max-width: 360px) {
	:root {
		--page-gutter: 18px;
	}

	.dw-btn {
		padding-inline: 22px;
		gap: 14px;
	}

	.hero__cta,
	.home-contact__cta {
		padding-inline: 28px 24px;
		gap: 22px;
	}

	.project-card__link {
		grid-template-columns: 26px minmax(84px, 34%) minmax(0, 1fr) 24px;
		gap: 12px;
	}

	.home-contact__details li {
		gap: 12px;
		font-size: 14px;
		letter-spacing: 0.08em;
	}

	.home-contact__rule {
		margin-inline: 2px 6px;
	}

	.home-contact__details a {
		min-width: 0;
		overflow-wrap: anywhere;
	}
}

/* Tablet: interpolate between the two art directions --------------------- */

@media (min-width: 720px) and (max-width: 1023px) {
	.hero {
		padding-bottom: clamp(130px, 18vh, 200px);
	}

	.hero__content {
		max-width: 680px;
		margin-inline: 0;
	}

	.service__thin,
	.service__heavy {
		font-size: clamp(54px, 8vw, 76px);
	}

	.home-contact__title {
		font-size: 104px;
	}
}

/* Reduced motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}

	.dusk-img--clouds,
	.dusk-img--haze,
	.hero__scroll-line {
		animation: none !important;
	}

	.dw-menu__item,
	.dw-menu__info {
		transform: none !important;
	}

	.project-card__media img,
	.post-row__media img,
	.process-step {
		transition: none !important;
		transform: none !important;
	}

	.service__panel {
		transition: none !important;
	}
}

/* Smooth in-page jumps when motion is welcome ---------------------------- */

@media (prefers-reduced-motion: no-preference) {
	html:not(.dw-motion) {
		scroll-behavior: smooth;
	}
}

/* No-JS: the sky stays at golden hour, so the night sections bring their own dusk. */
.no-js .home-about,
.no-js .home-contact {
	background: linear-gradient(180deg, rgba(9, 12, 32, 0) 0, rgba(9, 12, 32, 0.86) 18%, rgba(9, 12, 32, 0.94) 100%);
}

/* Print ------------------------------------------------------------------ */

@media print {
	.dusk-env,
	.site-header,
	.dw-menu,
	.hero__arch,
	.hero__scroll,
	.home-breath,
	.footer-bar__social {
		display: none !important;
	}

	body,
	.site-main {
		background: #fff !important;
		color: #111 !important;
	}

	.dw-home .site-main > section,
	.process,
	.project-card,
	.site-footer {
		--fg: #111;
		--fg-soft: #333;
		--fg-faint: #999;
	}

	.dw-heavy,
	.dw-logo__dusk,
	.process-step__num {
		-webkit-text-fill-color: #5b3fa8 !important;
		color: #5b3fa8 !important;
		background: none !important;
		filter: none !important;
	}

	.process-step,
	.service__panel {
		opacity: 1 !important;
		visibility: visible !important;
		grid-template-rows: 1fr !important;
		position: static !important;
	}
}