/*
Theme Name: Hazesoft
Theme URI: https://hbgdesignlab.se/
Author: HDL
Author URI: https://hbgdesignlab.se/
Description: Hazesoft marketing site — dark, engineer-to-engineer FSE block theme. Presentation only; functionality lives in the hdl-kit plugin.
Requires at least: 6.6
Tested up to: 6.6
Requires PHP: 7.4
Version: 0.12.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hazesoft
Tags: full-site-editing, block-patterns, block-styles, editor-style, translation-ready
*/

/*
 * Global chrome rules only. All design values reference theme.json presets
 * (--wp--preset--*) or theme.json custom properties (--wp--custom--*).
 * Section styling lives with its ACF block in hdl-kit/blocks/{name}/style.css.
 */

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
}

::selection {
	background: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--contrast);
}

/* ── Shared utilities ─────────────────────────────────────────────────── */

.hz-container {
	max-width: 1440px;
	margin: 0 auto;
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
}

.hz-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono);
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.hz-eyebrow--hero {
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	color: var(--wp--preset--color--secondary);
}

.hz-section-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--40);
	flex-wrap: wrap;
	margin-bottom: var(--wp--preset--spacing--60);
}

.hz-section-head__heading {
	font-size: var(--wp--preset--font-size--section-title);
	line-height: 1.05;
	letter-spacing: var(--wp--custom--tracking--heading);
	font-weight: 300;
	margin: 0;
	max-width: 780px;
	color: var(--wp--preset--color--contrast);
}

.hz-btn {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	gap: 12px;
	border: 1px solid var(--wp--custom--btn-border);
	color: var(--wp--preset--color--contrast);
	padding: 13px 22px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	text-decoration: none;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.hz-btn:hover,
.hz-btn:focus-visible {
	background: var(--wp--preset--color--blue);
	border-color: var(--wp--preset--color--blue);
	color: var(--wp--preset--color--contrast);
}

.hz-btn--lg {
	gap: 14px;
	padding: 16px 26px;
	font-size: var(--wp--preset--font-size--body-s);
	border-color: var(--wp--custom--btn-border-strong);
}

.hz-btn--xl {
	gap: 14px;
	padding: 18px 28px;
	font-size: var(--wp--preset--font-size--body);
}

.hz-btn__arrow {
	font-size: 0.85em;
	opacity: 0.8;
}

/* ── Header ───────────────────────────────────────────────────────────── */

/* The sticky element must be the template-part wrapper: .hz-header's own
 * parent is exactly its own height, so sticky on .hz-header has no travel. */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 60;
}

.hz-header {
	height: var(--wp--custom--header-height);
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background 0.35s ease, border-bottom-color 0.35s ease;
}

.hz-header.is-scrolled {
	background: var(--wp--custom--header-scrolled-bg);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom-color: var(--wp--custom--hairline-soft);
}

.hz-header__inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 var(--wp--preset--spacing--40);
	height: 100%;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 24px;
}

.hz-header__nav {
	font-size: var(--wp--preset--font-size--nav);
	letter-spacing: 0.01em;
}

.hz-header__nav-list {
	display: flex;
	align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hz-header__nav a {
	color: var(--wp--preset--color--secondary);
	padding: 6px 0;
}

.hz-header__nav a:hover {
	color: var(--wp--preset--color--contrast);
}

.hz-header__logo {
	display: block;
	justify-self: start;
}

.hz-header__logo img {
	height: 24px;
	width: auto;
	display: block;
}

.hz-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 28px;
}

.hz-header__lang {
	font-size: 13.5px;
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.04em;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: default;
}

.hz-header__lang-caret {
	font-size: 9px;
	color: var(--wp--preset--color--faint);
}

.hz-header .hz-btn {
	padding: 12px 20px;
}

.hz-header__burger {
	display: none;
	background: transparent;
	border: 0;
	padding: 8px 4px;
	margin: 0;
	cursor: pointer;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
}

.hz-header__burger span {
	display: block;
	width: 22px;
	height: 1.5px;
	background: var(--wp--preset--color--contrast);
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.hz-header.is-open .hz-header__burger span:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.hz-header.is-open .hz-header__burger span:nth-child(2) {
	opacity: 0;
}

.hz-header.is-open .hz-header__burger span:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 900px) {
	.hz-header {
		position: relative;
	}

	.hz-header__inner {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.hz-header__actions {
		margin-left: auto;
		gap: 16px;
	}

	.hz-header__lang {
		display: none;
	}

	.hz-header .hz-btn {
		padding: 10px 16px;
	}

	.hz-header__burger {
		display: inline-flex;
	}

	/* Mobile nav: hamburger dropdown under the bar, items centered. */
	.hz-header__nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--wp--preset--color--base);
		border-bottom: 1px solid var(--wp--custom--hairline);
		padding: 26px 0 34px;
	}

	.hz-header.is-open .hz-header__nav {
		display: block;
	}

	.hz-header__nav-list {
		flex-direction: column;
		align-items: center;
		gap: 24px;
	}

	.hz-header__nav a {
		font-size: var(--wp--preset--font-size--body-m);
	}
}

/* On small phones the bar CTA doesn't fit next to logo + toggle + burger;
 * the floating pill already carries the same CTA on every page. */
@media (max-width: 520px) {
	.hz-header .hz-btn {
		display: none;
	}
}

/* ── Footer ───────────────────────────────────────────────────────────── */

/* Same flare treatment as the hero behind the header; self-contained because
 * the hero block's stylesheet doesn't load on every page. Keyframes are the
 * shared hz-flare-* set (also used by the 404).
 */
.hz-footer {
	position: relative;
	overflow: clip;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.hz-footer__bg {
	position: absolute;
	inset: 0;
	filter: contrast(1.35) saturate(1.1);
	background: var(--wp--preset--color--base);
}

.hz-footer__blob {
	position: absolute;
	will-change: transform;
}

/* Unlike the hero, the composition is bottom-anchored: the blue glow rises
 * from the bottom edge and the dark carver keeps the top edge quiet. */
.hz-footer__blob--a {
	left: -14%;
	bottom: -20%;
	width: 66%;
	height: 130%;
	background: radial-gradient(ellipse at 42% 62%, rgba(24, 120, 240, 0.52), rgba(24, 120, 240, 0) 60%);
	filter: blur(64px);
}

.hz-footer__blob--red {
	right: -10%;
	bottom: -26%;
	width: 42%;
	height: 84%;
	background: radial-gradient(ellipse, rgba(245, 37, 77, 0.34), transparent 58%);
	filter: blur(70px);
	will-change: transform, opacity;
}

.hz-footer__blob--dark {
	left: 30%;
	top: -28%;
	width: 56%;
	height: 128%;
	background: radial-gradient(ellipse, rgba(5, 7, 12, 0.88), transparent 60%);
	filter: blur(56px);
}

.hz-footer__grainlayer {
	position: absolute;
	inset: -6%;
	background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22300%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix type=%22saturate%22 values=%220%22/%3E%3C/filter%3E%3Crect width=%22300%22 height=%22300%22 filter=%22url(%23n)%22/%3E%3C/svg%3E');
	background-size: 280px;
	opacity: 0.16;
	mix-blend-mode: overlay;
	pointer-events: none;
	will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {

	.hz-footer__blob--a { animation: hz-flare-a 7.5s ease-in-out infinite; animation-delay: -6s; }
	.hz-footer__blob--red { animation: hz-flare-red 6s ease-in-out infinite; animation-delay: -10s; }
	.hz-footer__blob--dark { animation: hz-flare-a 9s ease-in-out infinite; animation-delay: -3s; }
	.hz-footer__grainlayer { animation: hz-flare-grain 1.1s steps(4) infinite; }
}

.hz-footer__inner {
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) 0;
}

.hz-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 48px;
	padding-bottom: 80px;
}

.hz-footer__logo {
	height: 44px;
	width: auto;
	display: block;
	margin-bottom: 24px;
}

.hz-footer__desc {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--custom--footer-soft);
	max-width: 300px;
	margin: 0 0 28px;
}

.hz-footer__contact {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	color: var(--wp--custom--footer-muted);
	line-height: 2;
}

.hz-footer__group {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--custom--footer-hairline);
	padding-bottom: 2px;
}

.hz-footer__group:hover {
	color: var(--wp--preset--color--blue-light);
}

.hz-footer__col {
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: var(--wp--preset--font-size--small);
}

.hz-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 14px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hz-footer__colhead {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--custom--footer-muted);
	margin-bottom: 6px;
}

.hz-footer__col a {
	color: var(--wp--custom--footer-link);
}

.hz-footer__col a:hover {
	color: var(--wp--preset--color--blue-light);
}

.hz-footer__bottom {
	border-top: 1px solid var(--wp--custom--footer-hairline);
	padding: 26px 0 32px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.hz-footer__copy {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--mono);
	color: var(--wp--custom--footer-muted);
}

@media (max-width: 1000px) {
	.hz-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.hz-footer__grid {
		grid-template-columns: 1fr;
	}
}

/* ── Floating contact pill ────────────────────────────────────────────── */

.hz-pill {
	position: fixed;
	bottom: 28px;
	right: 28px;
	z-index: 70;
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--contrast);
	border-radius: 999px;
	padding: 16px 28px;
	font-size: var(--wp--preset--font-size--nav);
	font-weight: 500;
	box-shadow: var(--wp--custom--pill-shadow);
	transition: background 0.2s ease;
}

.hz-pill:hover,
.hz-pill:focus-visible {
	background: var(--wp--preset--color--red-hover);
	color: var(--wp--preset--color--contrast);
}

/* ── Light tone sections ──────────────────────────────────────────────────
 * A section block with tone=light gets .hz-tone--light, which remaps the
 * palette custom properties for everything inside it. Values live in
 * theme.json → settings.custom.light (single source of truth).
 */

.hz-tone--light {
	--wp--preset--color--base: var(--wp--custom--light--base);
	--wp--preset--color--raised: var(--wp--custom--light--raised);
	--wp--preset--color--pill: var(--wp--custom--light--pill);
	--wp--preset--color--contrast: var(--wp--custom--light--contrast);
	--wp--preset--color--body: var(--wp--custom--light--body);
	--wp--preset--color--secondary: var(--wp--custom--light--secondary);
	--wp--preset--color--muted: var(--wp--custom--light--muted);
	--wp--preset--color--faint: var(--wp--custom--light--faint);
	--wp--preset--color--disabled: var(--wp--custom--light--disabled);
	--wp--preset--color--slash: var(--wp--custom--light--slash);
	--wp--preset--color--blue-light: var(--wp--custom--light--blue-light);
	--wp--custom--hairline-soft: var(--wp--custom--light--hairline-soft);
	--wp--custom--hairline: var(--wp--custom--light--hairline);
	--wp--custom--hairline-strong: var(--wp--custom--light--hairline-strong);
	--wp--custom--pill-border: var(--wp--custom--light--pill-border);
	--wp--custom--pill-outline: var(--wp--custom--light--pill-outline);
	--wp--custom--btn-border: var(--wp--custom--light--btn-border);
	--wp--custom--btn-border-strong: var(--wp--custom--light--btn-border-strong);
	--wp--custom--row-hover: var(--wp--custom--light--row-hover);
	background: var(--wp--custom--light--base);
	color: var(--wp--custom--light--body);
}

/* Buttons: hover fills brand blue — text must stay white, not remapped dark. */
.hz-tone--light .hz-btn:hover,
.hz-tone--light .hz-btn:focus-visible,
.hz-tone--light .hz-newsletter__submit:hover,
.hz-tone--light .hz-newsletter__submit:focus-visible {
	color: var(--wp--custom--light--on-accent);
}

/* Literal-rgba borders in specific blocks, retinted for light surfaces. */
.hz-tone--light .hz-team__photo,
.hz-tone--light .hz-blog__featured-cover,
.hz-tone--light .hz-blog__card-cover {
	border-color: var(--wp--custom--light--card-border);
}

.hz-tone--light .hz-chips__chip,
.hz-tone--light .hz-blog__pill {
	border-color: var(--wp--custom--light--pill-outline);
}

.hz-tone--light .hz-chips__chip.is-active,
.hz-tone--light .hz-blog__pill.is-active {
	border-color: var(--wp--preset--color--blue);
}

.hz-tone--light .hz-apply__input,
.hz-tone--light .hz-newsletter__input {
	background: var(--wp--custom--light--input-bg);
	border-color: var(--wp--custom--light--input-border);
}

.hz-tone--light .hz-apply__input:focus,
.hz-tone--light .hz-newsletter__input:focus {
	border-color: var(--wp--preset--color--blue);
	background: rgba(24, 120, 240, 0.06);
}

.hz-tone--light .hz-apply__select option {
	color: var(--wp--custom--light--contrast);
}

/* ── Site-wide light mode ─────────────────────────────────────────────────
 * The header toggle adds .hz-tone--light to <html>; the section remap above
 * then cascades everywhere. The signature dark surfaces — header bar, hero
 * lava fields, and the mastery-map artifact — reset back to the dark palette
 * so the brand look survives in light mode.
 */

.hz-theme-toggle {
	background: transparent;
	border: 0;
	padding: 6px;
	margin: 0;
	cursor: pointer;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--body-m);
	line-height: 1;
	display: inline-flex;
	align-items: center;
	transition: color 0.2s ease;
}

.hz-theme-toggle:hover,
.hz-theme-toggle:focus-visible {
	color: #FFFFFF;
}

.hz-theme-toggle__to-dark {
	display: none;
}

html.hz-tone--light .hz-theme-toggle__to-light {
	display: none;
}

html.hz-tone--light .hz-theme-toggle__to-dark {
	display: inline;
}

/* Dark islands: reset the palette custom properties to their dark values. */
html.hz-tone--light .hz-header,
html.hz-tone--light .hz-hero,
html.hz-tone--light .hz-map,
html.hz-tone--light .hz-footer {
	--wp--preset--color--base: #0B0D12;
	--wp--preset--color--raised: #0D1017;
	--wp--preset--color--pill: #151A23;
	--wp--preset--color--contrast: #FFFFFF;
	--wp--preset--color--body: #E8EAEE;
	--wp--preset--color--secondary: #C8CDD6;
	--wp--preset--color--muted: #8B919D;
	--wp--preset--color--faint: #6A707C;
	--wp--preset--color--disabled: #565C68;
	--wp--preset--color--slash: #3A404C;
	--wp--preset--color--blue-light: #5FA3F5;
	--wp--custom--hairline-soft: rgba(255,255,255,0.08);
	--wp--custom--hairline: rgba(255,255,255,0.10);
	--wp--custom--hairline-strong: rgba(255,255,255,0.14);
	--wp--custom--pill-border: rgba(255,255,255,0.15);
	--wp--custom--pill-outline: rgba(255,255,255,0.22);
	--wp--custom--btn-border: rgba(255,255,255,0.35);
	--wp--custom--btn-border-strong: rgba(255,255,255,0.4);
	--wp--custom--row-hover: rgba(255,255,255,0.03);
	color: var(--wp--preset--color--body);
}

html.hz-tone--light .hz-map {
	background: var(--wp--preset--color--base);
}

/* Page background + anything outside sections follows the light palette. */
html.hz-tone--light body {
	background: var(--wp--custom--light--base);
	color: var(--wp--custom--light--body);
}

/* ── Article (single post) ────────────────────────────────────────────── */

.hz-article__kicker {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: var(--wp--custom--tracking--kicker);
	text-transform: uppercase;
}

.hz-article__kicker a {
	color: var(--wp--preset--color--blue-light);
}

.hz-article__meta {
	font-family: var(--wp--preset--font-family--mono);
	padding-bottom: 8px;
	border-bottom: 1px solid var(--wp--custom--hairline);
}

.hz-article h2 {
	margin-top: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--cell-title);
	font-weight: 400;
	letter-spacing: var(--wp--custom--tracking--item);
}

.hz-article h3 {
	margin-top: var(--wp--preset--spacing--30);
}

.hz-article .wp-block-post-content a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--blue-light);
}

.hz-article .wp-block-post-content a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--contrast);
}

.hz-article .wp-block-post-content ul {
	color: var(--wp--preset--color--muted);
	padding-left: 22px;
}

.hz-article .wp-block-post-content li {
	margin-bottom: 10px;
}

.hz-article .wp-block-post-content p {
	color: var(--wp--preset--color--secondary);
	line-height: 1.7;
}

/* ── 404 ──────────────────────────────────────────────────────────────────
 * Self-contained (its own keyframes): the hero block's stylesheet does not
 * load on the 404 template.
 */

section.hz-404.hz-404 {
	position: relative;
	overflow: clip;
	margin-block-start: calc( -1 * var(--wp--custom--header-height) );
	min-height: 100vh;
	display: flex;
	align-items: flex-end;
	background: var(--wp--preset--color--base);
}

.hz-404__bg {
	position: absolute;
	inset: 0;
	filter: contrast(1.35) saturate(1.1);
	background: var(--wp--preset--color--base);
}

.hz-404__blob {
	position: absolute;
	will-change: transform;
}

.hz-404__blob--a {
	left: -14%;
	top: -20%;
	width: 66%;
	height: 130%;
	background: radial-gradient(ellipse at 42% 48%, rgba(24, 120, 240, 0.45), rgba(24, 120, 240, 0) 60%);
	filter: blur(64px);
}

.hz-404__blob--red {
	right: -12%;
	top: -20%;
	width: 44%;
	height: 100%;
	background: radial-gradient(ellipse, rgba(245, 37, 77, 0.3), transparent 58%);
	filter: blur(70px);
	will-change: transform, opacity;
}

.hz-404__blob--dark {
	left: 30%;
	top: -28%;
	width: 56%;
	height: 128%;
	background: radial-gradient(ellipse, rgba(5, 7, 12, 0.88), transparent 60%);
	filter: blur(56px);
}

.hz-404__grain {
	position: absolute;
	inset: -6%;
	background-image: url('data:image/svg+xml;utf8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22300%22 height=%22300%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix type=%22saturate%22 values=%220%22/%3E%3C/filter%3E%3Crect width=%22300%22 height=%22300%22 filter=%22url(%23n)%22/%3E%3C/svg%3E');
	background-size: 280px;
	opacity: 0.16;
	mix-blend-mode: overlay;
	pointer-events: none;
	will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {

	.hz-404__blob--a { animation: hz-flare-a 7.5s ease-in-out infinite; animation-delay: -6s; }
	.hz-404__blob--red { animation: hz-flare-red 6s ease-in-out infinite; animation-delay: -10s; }
	.hz-404__blob--dark { animation: hz-flare-a 9s ease-in-out infinite; animation-delay: -3s; }
	.hz-404__grain { animation: hz-flare-grain 1.1s steps(4) infinite; }
}

@keyframes hz-flare-a {
	0% { transform: translate(0%, 26%) scale(1, 1.05); }
	33% { transform: translate(5%, -8%) scale(1.15, 0.95); }
	66% { transform: translate(-3%, -34%) scale(0.92, 1.18); }
	100% { transform: translate(0%, 26%) scale(1, 1.05); }
}

@keyframes hz-flare-red {
	0% { transform: translate(0%, 34%) scale(1); opacity: 0.55; }
	45% { transform: translate(-10%, -16%) scale(1.3, 1.1); opacity: 1; }
	75% { transform: translate(6%, -40%) scale(0.9, 1.25); opacity: 0.8; }
	100% { transform: translate(0%, 34%) scale(1); opacity: 0.55; }
}

@keyframes hz-flare-grain {
	0% { transform: translate(0, 0); }
	25% { transform: translate(-1.5%, 1%); }
	50% { transform: translate(1%, -1.5%); }
	75% { transform: translate(-1%, 1.5%); }
	100% { transform: translate(1.5%, -1%); }
}

.hz-404__content {
	position: relative;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 200px var(--wp--preset--spacing--40) 110px;
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 80px;
	align-items: end;
}

.hz-404__eyebrow {
	margin-bottom: 30px;
}

.hz-404__heading {
	font-size: clamp(90px, 13vw, 240px);
	line-height: 0.9;
	letter-spacing: -0.04em;
	font-weight: 300;
	margin: 0;
	color: var(--wp--preset--color--contrast);
}

.hz-404__aside {
	padding-bottom: 12px;
}

.hz-404__paragraph {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.65;
	color: var(--wp--preset--color--secondary);
	margin: 0 0 36px;
	max-width: 420px;
	text-wrap: pretty;
}

.hz-404__actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.hz-404__corner {
	position: absolute;
	bottom: 30px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--caption);
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--faint);
}

.hz-404__corner--left {
	left: 40px;
}

.hz-404__corner--right {
	right: 40px;
	display: flex;
	gap: 26px;
}

.hz-404__corner--right a {
	color: var(--wp--preset--color--muted);
}

.hz-404__corner--right a:hover {
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 860px) {
	.hz-404__content {
		grid-template-columns: 1fr;
		gap: 44px;
		padding-bottom: 130px;
	}

	.hz-404__corner--right {
		display: none;
	}
}