/* sections/how-it-works.php */
.hw-section {
	position: relative; box-sizing: border-box; width: 100%; overflow: hidden;
	padding: var(--space-section) var(--space-gutter);
	/* Flat reference navy: computes to #061e48. No gradient or glow on top. */
	--hw-blue: color-mix(in srgb, var(--c-primary) 8%, var(--c-primary-dark));
	--hw-soft: color-mix(in srgb, var(--c-on-dark) 82%, transparent);
	--hw-line: color-mix(in srgb, var(--c-primary-light) 32%, transparent);
	--hw-gap: var(--space-5);
	background: var(--hw-blue); color: var(--c-on-dark);
	font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.6;
}
.hw-section *, .hw-section *::before, .hw-section *::after { box-sizing: border-box; }
.hw-icon { flex: none; width: 1.25rem; height: 1.25rem; }

/* Watermark: the logo as a white silhouette, as in the footer. The box follows the mouse, the drawing floats. */
.hw-mark {
	position: absolute; right: -3rem; bottom: -4rem; width: min(34rem, 90vw); aspect-ratio: 350 / 293; pointer-events: none;
	transform: translate3d(calc(var(--hw-x, 0) * 1px), calc(var(--hw-y, 0) * 1px), 0); transition: transform 0.7s ease-out;
}
.hw-mark::before {
	content: ""; position: absolute; inset: 0; background: var(--c-on-dark); opacity: 0.05;
	-webkit-mask: url("/wp-content/uploads/2026/10/deratihome-logo.webp") center / contain no-repeat;
	mask: url("/wp-content/uploads/2026/10/deratihome-logo.webp") center / contain no-repeat;
	animation: hw-float 9s ease-in-out infinite alternate;
}
@keyframes hw-float { from { opacity: 0.04; transform: rotate(-5deg) translateY(0); } to { opacity: 0.075; transform: rotate(3deg) translateY(-1.25rem); } }

.hw-inner { position: relative; display: grid; gap: var(--space-6); max-width: var(--container); margin: 0 auto; }
.hw-inner > * { min-width: 0; }
.hw-label {
	display: inline-flex; align-items: center; gap: var(--space-2);
	margin: 0 0 var(--space-3); padding: var(--space-1) var(--space-3);
	border: 1px solid var(--hw-line); border-radius: var(--radius-pill); color: var(--c-primary-light);
	font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.hw-label::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-accent); }
.hw-section .hw-title {
	margin: 0; color: var(--c-on-dark);
	font-family: var(--f-heading); font-size: var(--fs-2xl); font-weight: 800;
	line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance;
}
.hw-intro { max-width: 40rem; margin: var(--space-3) 0 0; color: var(--hw-soft); font-size: var(--fs-lg); }

/* Steps. Phone: one column, the line runs down the left. */
.hw-steps { display: grid; gap: var(--hw-gap); margin: 0; padding: 0; list-style: none; }
.hw-step { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--space-4); cursor: default; }
/* Line to the next step: a faint track (::before) and the sky-blue fill (::after) */
.hw-step::before, .hw-step::after { content: ""; position: absolute; top: 3rem; bottom: calc(-1 * var(--hw-gap)); left: calc(1.5rem - 1px); width: 2px; }
.hw-step::before { background: var(--hw-line); }
.hw-step::after { background: var(--c-primary-light); transform: scale(0); transform-origin: 0 0; transition: transform 0.6s; }
.hw-step.is-done::after { transform: scale(1); }
.hw-step:last-child::before, .hw-step:last-child::after { display: none; }
.hw-node {
	position: relative; z-index: 1; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
	border: 1px solid var(--hw-line); background: var(--hw-blue); color: var(--c-primary-light);
	font: 800 var(--fs-sm)/1 var(--f-heading); transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.hw-step.is-done .hw-node { border-color: var(--c-primary-light); background: var(--c-primary-light); color: var(--hw-blue); }
.hw-step.is-active .hw-node { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); animation: hw-pulse 1.8s ease-out infinite; }
@keyframes hw-pulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-accent) 55%, transparent); } to { box-shadow: 0 0 0 0.875rem transparent; } }

.hw-card {
	padding: var(--space-5); border: 1px solid var(--hw-line); border-radius: var(--radius-lg); background: var(--hw-blue);
	transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.hw-step.is-active .hw-card { border-color: var(--c-primary-light); box-shadow: var(--shadow-lg); }
.hw-card-icon {
	display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: var(--space-4);
	border-radius: var(--radius); border: 1px solid var(--hw-line); color: var(--c-primary-light);
	transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.hw-step.is-active .hw-card-icon { border-color: var(--c-on-dark); background: var(--c-on-dark); color: var(--c-primary); }
.hw-section .hw-step-title { margin: 0; color: var(--c-on-dark); font: 700 var(--fs-lg)/1.3 var(--f-heading); }
.hw-step-text { margin: var(--space-2) 0 0; color: var(--hw-soft); font-size: var(--fs-sm); }

/* Call to action: white pill with a red round badge + phone link */
.hw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.hw-section .hw-btn {
	display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-5);
	border-radius: var(--radius-pill); background: var(--c-surface); color: var(--c-primary); box-shadow: var(--shadow-md);
	font: 700 var(--fs-base)/1.2 var(--f-body); text-decoration: none; transition: transform 0.25s;
}
.hw-section .hw-btn:hover, .hw-section .hw-btn:focus { background: var(--c-surface); color: var(--c-primary); transform: translateY(-2px); }
.hw-badge { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); }
.hw-badge .hw-icon { transform: rotate(-45deg); transition: transform 0.25s; }
.hw-btn:hover .hw-badge .hw-icon { transform: rotate(0deg); }
.hw-section .hw-phone { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--c-on-dark); font-weight: 700; text-decoration: none; white-space: nowrap; }
.hw-section .hw-phone:hover, .hw-section .hw-phone:focus { color: var(--c-on-dark); text-decoration: underline; text-underline-offset: 0.2em; }
.hw-phone .hw-icon { color: var(--c-primary-light); }
.hw-section a:focus-visible { outline: 2px solid var(--c-on-dark); outline-offset: 3px; }

@media (min-width: 768px) {
	/* The line runs across; each step is a node with its card under it. */
	.hw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-6); }
	.hw-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
	.hw-step::before, .hw-step::after { top: calc(1.5rem - 1px); bottom: auto; left: 3rem; width: calc(100% - 3rem + var(--hw-gap)); height: 2px; }
	.hw-step:nth-child(2n)::before, .hw-step:nth-child(2n)::after { display: none; }
	.hw-step.is-active .hw-card { transform: translateY(-0.375rem); }
}
@media (min-width: 1024px) {
	.hw-inner { grid-template-columns: minmax(0, 1fr) auto; align-items: end; row-gap: var(--space-7); }
	.hw-steps { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.hw-step:nth-child(2n)::before, .hw-step:nth-child(2n)::after { display: block; }
	.hw-step:last-child::before, .hw-step:last-child::after { display: none; }
	.hw-actions { grid-column: 2; grid-row: 1; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
	.hw-section *, .hw-section *::before, .hw-section *::after { animation: none !important; transition: none !important; }
}