/* ==========================================================================
   Homepage sections
   Mobile first. Desktop art direction starts at 1024px.

   Text tone follows the sky behind it. Mobile skies stay deep, so text is cream
   throughout. Desktop skies stay bright up top through the sunset, so headings there
   are ink and switch to cream once the sky turns to dusk.
   ========================================================================== */

:where(.dw-home .site-main > section) {
	--fg: var(--color-cream);
	--fg-soft: var(--color-cream-soft);
	--fg-faint: var(--color-cream-faint);
}

@media (min-width: 1024px) {
	.dw-home .tone-ink,
	.dw-home .hero,
	.dw-home .home-projects__head,
	.dw-home .home-services,
	.dw-home .home-process__head {
		--fg: var(--color-ink);
		--fg-soft: var(--color-ink-soft);
		--fg-faint: var(--color-ink-faint);
		--focus: #7d5cd0;
	}
}

/* Gradient display type: the day variant leans violet and magenta so the warm end
   does not dissolve into a sunset sky; a restrained shadow lifts it on bright skies. */
.dw-home .home-projects,
.dw-home .home-services,
.dw-home .home-process {
	--dusk-text-gradient: var(--dusk-gradient-day);
}

.dw-home .home-projects__title .dw-heavy,
.dw-home .service__heavy,
.dw-home .home-process__title .dw-heavy {
	filter: drop-shadow(0 2px 16px rgba(30, 12, 36, 0.36));
}

@media (min-width: 1024px) {
	.dw-home .hero {
		--dusk-text-gradient: var(--dusk-gradient-day);
	}

	.dw-home .home-projects__title .dw-heavy,
	.dw-home .service__heavy,
	.dw-home .home-process__title .dw-heavy {
		filter: drop-shadow(0 2px 14px rgba(60, 24, 48, 0.2));
	}

	/* Process sits on the brightest sky, so its heading takes a deeper dusk: the
	   same purple-to-rose direction, dark enough to hold against the peach. */
	.dw-home .home-process__title .dw-heavy {
		background-image: linear-gradient(180deg, #34176c 16%, #4d1c82 36%, #6a1f80 54%, #84256f 70%, #9a3160 86%);
		filter: drop-shadow(0 2px 18px rgba(255, 236, 222, 0.35));
	}

	/* Dark supporting copy over the sunset. The readability veils are fixed to the
	   screen while this text scrolls, so on shorter screens it can pass over darker
	   land or saturated sky; a soft ivory halo travels with the words. No edges, and
	   on light sky it disappears into the haze already there. */
	.dw-home .home-projects__eyebrow,
	.dw-home .home-projects__intro,
	.dw-home .home-projects__all-desktop,
	.dw-home .service__desc,
	.dw-home .service__items,
	.dw-home .service__more,
	.dw-home .home-process__eyebrow,
	.dw-home .home-process__intro {
		text-shadow:
			0 0 10px rgba(250, 238, 226, 0.78),
			0 0 24px rgba(250, 238, 226, 0.6),
			0 0 44px rgba(250, 238, 226, 0.32);
	}
}

/* ==========================================================================
   Hero
   The section is the scroll distance; .hero__stage is what you see. On desktop the
   stage is position: sticky, so the browser holds it while the window opens.
   ========================================================================== */

.hero {
	--hero-window-x: 63.3vw;
	--hero-window-y: var(--header-h);
	--hero-radius: clamp(90px, 9.4vw, 170px);
	--hero-line-b: 89.4vw;
	position: relative;
	color: var(--fg);
}

.hero__stage {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: var(--vh-small);
	padding: calc(var(--header-h) + 32px) 0 clamp(110px, 17svh, 170px);
}

.hero__arch {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.hero__cream,
.hero__mask,
.hero__lines {
	display: none;
}

.hero__scrim {
	position: absolute;
	inset: 0;
	z-index: var(--z-hero-cream);
	background:
		radial-gradient(120% 50% at 30% 66%, rgba(14, 10, 30, 0.42) 0%, rgba(14, 10, 30, 0) 70%),
		linear-gradient(180deg, rgba(14, 10, 30, 0) 30%, rgba(14, 10, 30, 0.46) 58%, rgba(12, 9, 26, 0.66) 100%);
}

.hero__content {
	position: relative;
	z-index: var(--z-content);
}

/* Exactly two lines, always: one .dw-line per line, never wrapping inside a line.
   The size is set so the longer line ("From today's ideas to") fits the column. */
.hero__title {
	/* The longer line ("From today's ideas to") is about 8.6em wide. */
	font-size: min(9.6vw, 44px);
	line-height: 1.12;
	letter-spacing: -0.03em;
}

.hero__title .dw-line {
	display: block;
	white-space: nowrap;
}

.hero__title .dw-thin {
	font-weight: 250;
}

.hero__copy {
	max-width: 30em;
	margin-top: 22px;
	font-size: clamp(14px, 3.7vw, 18px);
	line-height: 1.75;
	letter-spacing: 0.16em;
	color: var(--fg);
	text-shadow: 0 1px 14px rgba(10, 8, 22, 0.5);
}

.hero__actions {
	margin-top: 30px;
}

.hero__cta {
	min-height: 58px;
	padding-inline: 32px 28px;
	gap: 26px;
	font-size: 15px;
	letter-spacing: 0.16em;
}

.hero__cta .dw-btn__icon {
	width: 24px;
	height: 24px;
}

.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: clamp(22px, 4svh, 40px);
	z-index: var(--z-content);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	translate: -50% 0;
	font-size: 15px;
	letter-spacing: 0.2em;
	text-decoration: none;
	color: var(--color-cream);
	text-shadow: 0 1px 10px rgba(8, 6, 16, 0.75);
}

/* A soft, local shade behind the scroll cue only (it crosses the sunlit rocks). */
.hero__scroll::before {
	content: "";
	position: absolute;
	inset: -36px -56px;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(10, 8, 20, 0.58) 0%, rgba(10, 8, 20, 0.3) 55%, rgba(10, 8, 20, 0) 100%);
	pointer-events: none;
}

.hero__scroll-line {
	display: block;
	width: 1.5px;
	height: 42px;
	background: currentColor;
	box-shadow: 0 0 8px rgba(8, 6, 16, 0.6);
	transform-origin: top;
	animation: dw-scroll-cue 2.6s var(--ease-in-out) infinite;
}

.hero__scroll-rule,
.hero__scroll-note {
	display: none;
}

@keyframes dw-scroll-cue {
	0% { transform: scaleY(0); opacity: 0; }
	30% { transform: scaleY(1); opacity: 1; }
	70% { transform: scaleY(1); opacity: 1; }
	100% { transform: scaleY(1) translateY(12px); opacity: 0; }
}

@media (min-width: 720px) {
	.hero__title {
		font-size: min(8.4vw, 76px);
	}
}

/* Desktop hero: cream panel, curved window, guide lines ------------------ */

@media (min-width: 1024px) {
	.hero.is-held {
		height: calc(var(--vh-full) * (1 + var(--hero-hold, 0)));
	}

	.hero__stage {
		position: sticky;
		top: 0;
		justify-content: flex-start;
		min-height: 0;
		height: var(--vh-full);
		padding: calc(var(--header-h) + 5vh) 0 clamp(70px, 9vh, 120px);
		overflow: hidden;
	}

	.hero__scrim {
		display: none;
	}

	.hero__cream {
		display: block;
		position: absolute;
		z-index: var(--z-hero-cream);
		background: var(--color-cream);
		will-change: transform;
	}

	/* Left column: solid cream that melts into the sky above the mountains. */
	.hero__cream--side {
		left: 0;
		top: 0;
		bottom: 0;
		width: var(--hero-window-x);
		background: linear-gradient(180deg,
			var(--color-cream) 0%,
			var(--color-cream) 42%,
			rgba(247, 239, 229, 0.92) 52%,
			rgba(247, 239, 229, 0.7) 61%,
			rgba(247, 239, 229, 0.36) 70%,
			rgba(247, 239, 229, 0.1) 79%,
			rgba(247, 239, 229, 0) 86%);
	}

	/* Top strip above the window (the header sits on it). */
	.hero__cream--top {
		left: 0;
		right: 0;
		top: 0;
		height: var(--hero-window-y);
	}

	/* The curved corner of the window: cream everywhere except a quarter circle. */
	.hero__mask {
		display: block;
		position: absolute;
		z-index: var(--z-hero-mask);
		left: var(--hero-window-x);
		top: var(--hero-window-y);
		width: var(--hero-radius);
		height: var(--hero-radius);
		background: radial-gradient(circle var(--hero-radius) at 100% 100%, rgba(247, 239, 229, 0) 99.2%, var(--color-cream) 100%);
		transform-origin: 0 0;
		will-change: transform;
		margin-left: -0.5px;
		margin-top: -0.5px;
	}

	.hero__lines {
		display: block;
		position: absolute;
		inset: 0;
		z-index: var(--z-hero-lines);
	}

	.hero__line {
		position: absolute;
		bottom: 0;
		width: 1.5px;
		background: rgba(255, 249, 240, 0.92);
	}

	.hero__line--a {
		left: var(--hero-window-x);
		top: calc(var(--hero-window-y) + var(--hero-radius));
		margin-left: -0.75px;
	}

	.hero__line--b {
		left: var(--hero-line-b);
		top: var(--hero-window-y);
	}

	/* Two lines sized to the cream column: (column right edge - text left edge - air)
	   divided by the width of the longer line in em. Works when the content column is
	   centered on wide screens too. */
	.hero__title {
		--hero-text-left: max(var(--page-gutter), calc((100vw - var(--container)) / 2 + var(--page-gutter)));
		font-size: min(10.4vh, calc((var(--hero-window-x) - var(--hero-text-left) - 4vw) / 8.75));
		line-height: 1.02;
		letter-spacing: -0.04em;
	}

	.hero__title .dw-thin {
		font-weight: var(--weight-display-light);
	}

	.hero__copy {
		max-width: 27em;
		margin-top: clamp(22px, 3.8vh, 44px);
		font-size: clamp(17px, 1.45vw, 23px);
		line-height: 1.5;
		letter-spacing: 0.035em;
		text-shadow: none;
	}

	.hero__actions {
		margin-top: clamp(24px, 4vh, 44px);
	}

	.dw-btn--hero {
		--btn-bg: var(--color-ink);
		--btn-fg: var(--color-cream);
		--btn-border: var(--color-ink);
		min-height: 58px;
		padding-inline: 34px 30px;
		gap: 26px;
		font-size: 14.5px;
		letter-spacing: 0.2em;
	}

	.dw-btn--hero:hover {
		--btn-bg: #2a2133;
	}

	.hero__cta .dw-btn__icon {
		width: 18px;
		height: 18px;
	}

	.hero__scroll {
		left: var(--page-gutter);
		bottom: clamp(36px, 7vh, 72px);
		flex-direction: row;
		align-items: flex-end;
		gap: 18px;
		translate: none;
		font-size: 13px;
		letter-spacing: 0.3em;
		text-transform: uppercase;
	}

	.hero__scroll::before {
		inset: -44px -70px -40px -60px;
	}

	.hero__scroll-line {
		position: relative;
		height: 72px;
		width: 1.5px;
		margin-bottom: -4px;
	}

	.hero__scroll-line::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: -4px;
		width: 8px;
		height: 8px;
		margin-left: -4px;
		border-radius: 50%;
		background: currentColor;
	}

	.hero__scroll-rule {
		display: inline-block;
		width: 16px;
		height: 1px;
		margin-bottom: 0.45em;
		background: currentColor;
	}

	.hero__scroll-note {
		display: inline;
	}

	.hero__scroll-word,
	.hero__scroll-note {
		line-height: 1;
	}
}

/* ==========================================================================
   Services
   ========================================================================== */

.home-services {
	padding-block: var(--section-space);
}

.home-services__eyebrow {
	margin-bottom: 26px;
}

.services__list {
	border-top: 0;
}

.service {
	border-bottom: 1px solid var(--fg-faint);
}

.service:last-child {
	border-bottom: 0;
}

.service__heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
}

.service__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: clamp(16px, 2.6vw, 24px) 0;
	text-align: left;
	color: var(--fg);
}

.service__name {
	display: grid;
	min-width: 0;
}

.service__thin,
.service__heavy {
	grid-area: 1 / 1;
	font-size: clamp(32px, 8.6vw, 66px);
	line-height: 1.06;
	transition: opacity 0.45s var(--ease-out);
}

.service__thin {
	font-family: var(--font-display-light);
	font-weight: var(--weight-display-light);
	letter-spacing: var(--tracking-display-light);
	color: var(--fg);
}

.service__heavy {
	opacity: 0;
	letter-spacing: -0.05em;
}

.service.is-active .service__thin {
	opacity: 0;
}

.service.is-active .service__heavy {
	opacity: 1;
}

.service__icon {
	position: relative;
	display: grid;
	place-items: center;
	flex: none;
	width: 50px;
	height: 50px;
	border: 1px solid var(--fg);
	border-radius: 50%;
}

.service__icon .dw-icon {
	grid-area: 1 / 1;
	width: 24px;
	height: 24px;
	transition: opacity var(--dur-fast), transform var(--dur) var(--ease-out);
}

.service__icon-minus,
.service__icon-arrow,
.service.is-active .service__icon-plus {
	opacity: 0;
}

.service.is-active .service__icon-minus {
	opacity: 1;
}

.service__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.55s var(--ease-out), visibility 0s linear 0.55s;
	visibility: hidden;
}

.service.is-active .service__panel {
	grid-template-rows: 1fr;
	visibility: visible;
	transition-delay: 0s;
}

.service__panel-inner {
	min-height: 0;
	overflow: hidden;
}

.service__desc {
	max-width: 32em;
	padding-top: 4px;
	font-size: clamp(15px, 3.9vw, 19px);
	line-height: 1.7;
	letter-spacing: 0.14em;
	color: var(--fg);
}

/* A small picture of the work inside the open service (phones and tablets): visual
   relief between the description and the list. Closed services stay type only. */
.service__preview {
	display: block;
	overflow: hidden;
	max-width: 440px;
	aspect-ratio: 2.4;
	margin-top: 20px;
	border: 1px solid rgba(247, 239, 229, 0.28);
	border-radius: var(--radius-sm);
	background: var(--color-night-2);
}

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

.service__items {
	display: grid;
	gap: 10px;
	margin: 22px 0 30px;
	padding-left: 18px;
	border-left: 1px solid var(--fg-faint);
	list-style: none;
}

.service__items li {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--fg);
}

.service__more {
	margin: -8px 0 32px;
}

.service__items li::before {
	content: "";
	flex: none;
	width: 20px;
	height: 1px;
	background: currentColor;
	opacity: 0.8;
}

/* No-JS: show every service open on small screens. */
@media (max-width: 1023px) {
	.no-js .service__panel {
		grid-template-rows: 1fr;
		visibility: visible;
	}
}

@media (min-width: 1024px) {
	.home-services {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		min-height: var(--vh-full);
		padding-block: calc(var(--header-h) + 6vh) 12vh;
	}

	.home-services__eyebrow {
		margin-bottom: clamp(28px, 5vh, 52px);
	}

	.services {
		--panel-w: clamp(300px, 27vw, 440px);
		position: relative;
		padding-right: calc(var(--panel-w) + clamp(40px, 4vw, 72px));
	}

	/* Vertical rule between the list and the details. */
	.services::before {
		content: "";
		position: absolute;
		top: 1.4vh;
		bottom: 1vh;
		right: calc(var(--panel-w) + clamp(20px, 2vw, 36px));
		width: 1px;
		background: var(--fg-faint);
	}

	.service {
		border: 0;
	}

	.service__toggle {
		justify-content: flex-start;
		gap: clamp(20px, 2vw, 32px);
		width: auto;
		max-width: 100%;
		padding: 0.4vh 0;
	}

	.service__thin,
	.service__heavy {
		font-size: min(6.3vw, 9.4vh, 116px);
		line-height: 1.08;
	}

	.service__icon {
		width: clamp(48px, 3.8vw, 60px);
		height: clamp(48px, 3.8vw, 60px);
		opacity: 0;
		transform: scale(0.8);
		transition: opacity var(--dur-fast), transform var(--dur) var(--ease-out);
	}

	.service__icon-plus,
	.service__icon-minus,
	.service.is-active .service__icon-minus {
		opacity: 0;
	}

	.service__icon-arrow,
	.service.is-active .service__icon-arrow {
		opacity: 1;
	}

	.service.is-active .service__icon {
		opacity: 1;
		transform: none;
	}

	/* Details live in the right column, crossfading in place. */
	.service__panel {
		position: absolute;
		top: 1.4vh;
		right: 0;
		width: var(--panel-w);
		display: block;
		opacity: 0;
		transform: translate3d(0, 10px, 0);
		transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-out), visibility 0s linear 0.4s;
	}

	.service.is-active .service__panel {
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	.service__panel-inner {
		overflow: visible;
	}

	.service__preview {
		display: none;
	}

	.service__desc {
		padding-top: 0;
		font-size: clamp(17px, 1.42vw, 22px);
		line-height: 1.45;
		letter-spacing: 0.03em;
	}

	.service__items {
		gap: 16px;
		margin: clamp(26px, 4.4vh, 48px) 0 0;
		padding-left: 0;
		border-left: 0;
	}

	.service__items li {
		font-size: 12.5px;
		letter-spacing: 0.32em;
	}

	.service__more {
		margin: clamp(22px, 3.6vh, 38px) 0 0;
	}
}

/* ==========================================================================
   Process
   Desktop: five stages along one line (unchanged). Phones and tablets: the same
   stages as a short list with thin rules, every other stage stepped in.
   ========================================================================== */

.home-process {
	padding-block: var(--section-space);
}

.home-process__eyebrow {
	margin-bottom: 26px;
}

.home-process__title {
	font-size: clamp(46px, 12.4vw, 96px);
	line-height: 0.98;
}

/* Below desktop each phrase wraps, which puts the "p" of "process," right on top
   of the "&"; a little room between the phrases matches the gap inside them. */
.home-process__title .dw-line + .dw-line {
	margin-top: 0.2em;
}

.home-process__intro {
	margin-top: 20px;
}

.process {
	--fg: var(--color-cream);
	--fg-soft: var(--color-cream-soft);
	--fg-faint: var(--color-cream-faint);
	position: relative;
	margin-top: 36px;
	color: var(--fg);
}

.process__line {
	display: none;
}

.process__steps {
	display: grid;
}

/* Number, then title with its short line; a hairline between stages. */
.process-step {
	display: grid;
	grid-template-columns: 1.5em minmax(0, 1fr);
	align-items: baseline;
	column-gap: 14px;
	padding: 18px 0 20px;
	border-top: 1px solid var(--fg-faint);
	font-size: clamp(36px, 10.4vw, 56px);
}

.process-step:last-child {
	border-bottom: 1px solid var(--fg-faint);
}

/* Every other stage steps in a little: the list reads as a path, not a stack. */
.process-step:nth-child(even) {
	margin-left: clamp(40px, 15vw, 132px);
}

.process-step__num {
	grid-row: 1 / span 2;
	padding-right: 0.08em;
	margin-right: -0.08em;
	font-family: var(--font-display-light);
	font-weight: 300;
	font-size: 1em;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: lining-nums;
	color: var(--color-peach);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.process-step__num {
		background-image: var(--dusk-gradient-solid);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

.process-step__dot {
	display: none;
}

.process-step__title {
	grid-column: 2;
	font-family: var(--font-display-light);
	font-weight: var(--weight-display-light);
	font-size: 1em;
	line-height: 1;
	letter-spacing: -0.035em;
}

.process-step__short {
	grid-column: 2;
	margin-top: 8px;
	font-size: clamp(13px, 3.6vw, 16px);
	line-height: 1.5;
	letter-spacing: 0.12em;
	color: var(--color-cream-soft);
}

@media (min-width: 1024px) {
	.home-process {
		display: flex;
		flex-direction: column;
		min-height: var(--vh-full);
		padding-block: calc(var(--header-h) + 3vh) 12vh;
	}

	.home-process__eyebrow {
		margin-bottom: clamp(16px, 2.6vh, 28px);
	}

	.home-process__title {
		font-size: min(6.8vw, 9.8vh, 132px);
		line-height: 0.96;
		letter-spacing: -0.045em;
	}

	.home-process__title .dw-heavy {
		letter-spacing: -0.055em;
	}

	.home-process__title .dw-line + .dw-line {
		margin-top: 0;
	}

	.home-process__intro {
		margin-top: clamp(16px, 2.6vh, 28px);
		max-width: 26em;
	}

	.process {
		--num-size: clamp(54px, 5.2vw, 92px);
		margin-top: clamp(28px, 5vh, 64px);
	}

	.process__steps {
		position: relative;
		z-index: 1;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		column-gap: clamp(18px, 2vw, 36px);
	}

	/* The line that threads through the dots; the fill is scaled by GSAP (transform). */
	.process__line {
		display: block;
		position: absolute;
		left: 12px;
		right: 0;
		top: calc(var(--num-size) * 1.02 + 22px + 9px);
		height: 1px;
		background: rgba(247, 239, 229, 0.42);
		pointer-events: none;
	}

	.process__fill {
		display: block;
		height: 100%;
		background: linear-gradient(90deg, rgba(251, 179, 106, 0.95), rgba(227, 98, 126, 0.95) 50%, rgba(125, 92, 208, 0.95));
		transform-origin: left center;
	}

	.process-step,
	.process-step:nth-child(even) {
		display: block;
		margin-left: 0;
		padding: 0;
		border: 0;
		font-size: inherit;
	}

	.process-step:last-child {
		border: 0;
	}

	/* The numbers sit on the bright horizon: one solid deep purple (the heading's)
	   keeps them from melting into the sky, and a faint ivory glow travels with them. */
	.process-step__num {
		display: block;
		width: max-content;
		font-size: var(--num-size);
		line-height: 1.02;
		filter: drop-shadow(0 0 9px rgba(250, 238, 226, 0.5)) drop-shadow(0 0 22px rgba(250, 238, 226, 0.28));
	}

	.dw-home .process-step__num {
		background: none;
		-webkit-text-fill-color: #4d1c82;
		color: #4d1c82;
	}

	.process-step__dot {
		position: relative;
		z-index: 1;
		display: block;
		width: 22px;
		height: 22px;
		margin: 20px 0 24px 1px;
		border-radius: 50%;
		border: 1.5px solid transparent;
		background:
			radial-gradient(circle, #fff7ee 0 4px, rgba(255, 247, 238, 0) 4.5px) padding-box,
			radial-gradient(circle, rgba(20, 10, 30, 0.5), rgba(20, 10, 30, 0.5)) padding-box,
			var(--dusk-gradient-solid) border-box;
		box-shadow: 0 0 14px 2px rgba(255, 170, 120, 0.45);
	}

	.process-step__title {
		font-size: clamp(30px, 2.8vw, 46px);
		letter-spacing: -0.03em;
	}

	.process-step__short {
		display: block;
		margin-top: 12px;
		font-size: clamp(14px, 1.1vw, 17px);
		line-height: 1.5;
		letter-spacing: 0.08em;
		color: var(--color-cream-soft);
	}
}

/* ==========================================================================
   Pause between Process and About (phones and tablets)
   A few seconds of landscape with nothing over it while the sun goes down.
   ========================================================================== */

.home-breath {
	position: relative;
	z-index: var(--z-content);
	display: flex;
	align-items: center;
	height: calc(var(--vh-small) * 0.22);
	pointer-events: none;
}

/* The pause is the landscape moment, so the sections either side of it do not add
   their full spacing on top of it: about 30% of the screen is landscape alone. */
@media (max-width: 1023px) {
	.home-process {
		padding-bottom: 40px;
	}

	.home-breath + .home-about {
		padding-top: 40px;
	}
}

.home-breath__label {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 auto;
	font-size: 11px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--color-cream);
	opacity: 0.7;
}

.home-breath__rule {
	flex: none;
	width: 32px;
	height: 1px;
	background: currentColor;
	opacity: 0.8;
}

@media (min-width: 1024px) {
	.home-breath {
		display: none;
	}
}

/* ==========================================================================
   About
   ========================================================================== */

.home-about {
	padding-block: var(--section-space);
}

.home-about__eyebrow {
	margin-bottom: 30px;
	letter-spacing: 0.2em;
	text-transform: none;
	font-size: 14px;
}

.home-about__title {
	font-size: clamp(50px, 13.2vw, 100px);
	line-height: 1;
}

.home-about__title .dw-thin {
	font-weight: 250;
}

.home-about__copy {
	margin-top: 26px;
	letter-spacing: 0.035em;
	font-size: clamp(17px, 4.4vw, 22px);
}

.principles {
	margin-top: 44px;
}

.principle {
	display: grid;
	grid-template-columns: 64px 1px minmax(0, 1fr);
	align-items: center;
	column-gap: clamp(28px, 8vw, 64px);
	padding: 30px 0;
	border-top: 1px solid var(--fg-faint);
}

.principle:first-child {
	border-top: 0;
	padding-top: 10px;
}

.principle__icon .dw-icon {
	width: 58px;
	height: 58px;
	stroke-width: 0.9;
}

.principle__rule {
	align-self: stretch;
	width: 1px;
	background: var(--fg-faint);
}

.principle__title {
	font-family: var(--font-ui);
	font-weight: 400;
	font-size: clamp(22px, 5.6vw, 28px);
	letter-spacing: 0.1em;
	line-height: 1.2;
}

.principle__text {
	margin-top: 8px;
	font-size: clamp(15px, 3.9vw, 17px);
	line-height: 1.65;
	letter-spacing: 0.1em;
	color: var(--fg-soft);
}

@media (max-width: 719px) {
	.principles {
		margin-top: 30px;
	}

	.principle {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas:
			"icon title"
			"text text";
		align-items: center;
		column-gap: 18px;
		row-gap: 12px;
		padding: 24px 0 26px;
	}

	.principle:first-child {
		padding-top: 6px;
	}

	.principle__icon {
		grid-area: icon;
		display: grid;
		place-items: center;
		width: 60px;
		height: 60px;
		border: 1px solid var(--fg-faint);
		border-radius: 50%;
	}

	.principle__icon .dw-icon {
		width: 32px;
		height: 32px;
		stroke-width: 1;
	}

	.principle__rule {
		display: none;
	}

	.principle__body {
		display: contents;
	}

	.principle__title {
		grid-area: title;
	}

	.principle__text {
		grid-area: text;
		margin-top: 0;
		max-width: 30em;
	}
}

@media (min-width: 720px) and (max-width: 1099px) {
	.principles {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 32px;
	}

	.principle {
		grid-template-columns: 1fr;
		align-items: start;
		row-gap: 20px;
		border-top: 0;
		border-left: 1px solid var(--fg-faint);
		padding: 0 0 0 28px;
	}

	.principle__rule {
		display: none;
	}
}

@media (min-width: 1100px) {
	.home-about {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: var(--vh-full);
		padding-block: calc(var(--header-h) + 3vh) 18vh;
	}

	.home-about__eyebrow {
		margin-bottom: clamp(36px, 6vh, 64px);
	}

	.home-about__grid {
		display: grid;
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
		gap: clamp(32px, 3vw, 56px);
		align-items: start;
	}

	.home-about__title {
		font-size: min(6.2vw, 10.4vh, 120px);
		line-height: 0.98;
	}

	.home-about__title .dw-heavy {
		letter-spacing: -0.05em;
	}

	.home-about__copy {
		margin-top: clamp(20px, 3vh, 32px);
		font-size: clamp(18px, 1.45vw, 24px);
		max-width: 25em;
	}

	.principles {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		margin-top: 0;
	}

	.principle {
		grid-template-columns: 1fr;
		align-items: start;
		row-gap: clamp(26px, 4.6vh, 52px);
		padding: 18px clamp(16px, 1.6vw, 28px) 18px clamp(28px, 2.8vw, 48px);
		border-top: 0;
		border-left: 1px solid var(--fg-faint);
		min-height: clamp(240px, 30vh, 300px);
	}

	.principle:first-child {
		padding-top: 18px;
	}

	.principle__rule {
		display: none;
	}

	.principle__icon .dw-icon {
		width: clamp(48px, 3.4vw, 60px);
		height: clamp(48px, 3.4vw, 60px);
	}

	.principle__title {
		font-size: clamp(22px, 1.65vw, 28px);
	}

	.principle__text {
		margin-top: 14px;
		font-size: clamp(14px, 1.08vw, 17px);
		letter-spacing: 0.06em;
	}
}

/* ==========================================================================
   Contact + footer
   ========================================================================== */

.home-contact {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: var(--vh-full);
	padding-top: calc(var(--header-h) + clamp(16px, 4vh, 48px));
	padding-bottom: clamp(48px, 10vh, 120px);
}

.home-contact__inner {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.home-contact__main {
	padding-top: 0;
}

.home-contact__title {
	font-size: clamp(54px, 14.4vw, 110px);
	line-height: 1;
}

.home-contact__title .dw-thin {
	font-weight: 200;
}

.home-contact__copy {
	max-width: 28em;
	margin-top: 22px;
	font-size: clamp(14px, 3.8vw, 18px);
	line-height: 1.8;
	letter-spacing: 0.18em;
}

.home-contact__actions {
	margin-top: 34px;
}

.home-contact__cta {
	min-height: 64px;
	padding-inline: 46px 40px;
	gap: 40px;
	font-size: 17px;
	letter-spacing: 0.18em;
}

.home-contact__cta .dw-btn__icon {
	width: 26px;
	height: 26px;
}

.home-contact__details {
	display: grid;
	gap: 14px;
	margin-top: 40px;
}

.home-contact__details li {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 16px;
	letter-spacing: 0.16em;
}

.home-contact__details .dw-icon {
	width: 30px;
	height: 30px;
	stroke-width: 1.1;
}

.home-contact__rule {
	width: 1px;
	height: 40px;
	margin-inline: 8px 14px;
	background: var(--fg-faint);
}

.home-contact__details a {
	text-decoration: none;
}

.home-contact__details a:hover {
	text-decoration: underline;
}

@media (min-width: 1024px) {
	.home-contact {
		min-height: var(--vh-full);
		padding-top: calc(var(--header-h) + 4vh);
	}

	.home-contact__main {
		padding-top: clamp(20px, 6vh, 80px);
	}

	.home-contact__title {
		font-size: min(8.6vw, 13vh, 168px);
		line-height: 0.96;
		letter-spacing: -0.045em;
	}

	.home-contact__copy {
		margin-top: clamp(20px, 3vh, 32px);
		font-size: clamp(16px, 1.35vw, 21px);
		letter-spacing: 0.22em;
		line-height: 1.65;
	}

	.home-contact__actions {
		margin-top: clamp(26px, 4vh, 44px);
	}

	.home-contact__cta {
		min-height: 62px;
		padding-inline: 46px 40px;
		gap: 22px;
		font-size: 18px;
		letter-spacing: 0.04em;
	}

	.home-contact__details {
		display: none;
	}
}