/*
Theme Name: UX/UI Design Portfolio
Description: A custom block theme scaffolded by Studio Code.
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: uxui-portfolio
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, accessibility-ready, style-variations
*/

/* WordPress inserts margin-block-start: var(--wp--style--block-gap) between the
   template's top-level sections (header part, main, footer part) — a gap that
   exists even when no markup asks for it. Zero it so sections butt edge-to-edge
   and own their vertical rhythm via padding; this does not affect block gaps
   inside nested layouts. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* =====================================================================
   UX/UI Design Portfolio — custom design layer
   ===================================================================== */

/* === tokens === */
:root {
	--line: rgba(237, 233, 219, 0.13);
	--line-strong: rgba(237, 233, 219, 0.32);
	--line-dark: rgba(17, 19, 12, 0.16);
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
	scroll-behavior: smooth;
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
}

/* === base === */

img {
	max-width: 100%;
	height: auto;
}

a {
	transition: color 0.25s ease;
}

.wp-block-image figcaption {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}
/* === typography === */

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.eyebrow::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	flex: none;
}

.lede {
	font-size: clamp(1.06rem, 1.4vw, 1.28rem);
	font-weight: 300;
	line-height: 1.65;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 86%, transparent);
}

.measure {
	max-width: 60ch;
}

.hl {
	color: var(--wp--preset--color--accent);
}

.text-muted {
	color: var(--wp--preset--color--muted);
}

.u-center {
	text-align: center;
}

.u-center .measure {
	margin-inline: auto;
}

.u-center .eyebrow {
	justify-content: center;
}
/* === buttons === */

.wp-element-button {
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease),
		background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.wp-element-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -14px rgba(216, 243, 76, 0.55);
}

.wp-block-button.is-style-outline .wp-element-button {
	background: transparent;
	color: var(--wp--preset--color--contrast);
	border-color: var(--line-strong);
}

.wp-block-button.is-style-outline .wp-element-button:hover {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	box-shadow: none;
	transform: translateY(-2px);
}

/* arrow text link */
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--contrast);
}

.link-arrow .arr {
	transition: transform 0.3s var(--ease);
}

.link-arrow:hover .arr {
	transform: translate(4px, -4px);
}
/* === header === */

.site-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(14, 16, 11, 0.72);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid transparent;
	transition: background 0.3s ease, border-color 0.3s ease;
}

.site-header.is-scrolled {
	background: rgba(14, 16, 11, 0.92);
	border-bottom-color: var(--line);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2.4rem;
	padding-block: 1.05rem;
}

.site-header .wp-block-site-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.08rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1;
	margin: 0;
}

.site-header .wp-block-site-title a {
	color: var(--wp--preset--color--contrast);
}

.site-header .wp-block-site-title a:hover {
	color: var(--wp--preset--color--accent);
}

.site-nav {
	margin-left: auto;
}

.site-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem clamp(1.3rem, 2.4vw, 2.6rem);
}

.site-nav .wp-block-navigation-item a {
	font-size: 0.95rem;
	font-weight: 500;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 82%, transparent);
	padding-block: 0.3rem;
	position: relative;
}

.site-nav .wp-block-navigation-item a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0.1rem;
	height: 2px;
	background: var(--wp--preset--color--accent);
	transition: right 0.3s var(--ease);
}

.site-nav .wp-block-navigation-item a:hover::after,
.site-nav .wp-block-navigation-item.current-menu-item a::after {
	right: 0;
}

.site-nav .wp-block-navigation-item a:hover {
	color: var(--wp--preset--color--contrast);
}

/* === hero === */

.hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(4.5rem, 11vh, 8rem) clamp(3.5rem, 8vh, 6rem);
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		radial-gradient(52rem 30rem at 88% -10%, rgba(216, 243, 76, 0.13), transparent 62%),
		radial-gradient(40rem 26rem at -8% 108%, rgba(216, 243, 76, 0.05), transparent 55%);
}

.hero::after {
	content: "*";
	position: absolute;
	top: 6%;
	right: 7%;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3rem, 8vw, 7rem);
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px rgba(216, 243, 76, 0.5);
	pointer-events: none;
}

.hero-title {
	font-size: clamp(2.6rem, 7vw, 5.4rem);
	font-weight: 650;
	letter-spacing: -0.035em;
	line-height: 1.02;
	margin: 0;
	max-width: 100%;
	overflow-wrap: break-word;
}

.hero .lede {
	max-width: 52ch;
	/* The constrained layout auto-centers any block narrower than the content
	   column; keep the lede pinned to the same left edge as the eyebrow, title
	   and hero buttons instead. */
	margin-inline-start: 0 !important;
	margin-inline-end: auto !important;
}

.hero-avail {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	font-size: 0.86rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 0.5rem 1rem 0.5rem 0.95rem;
	margin: 0;
}

.hero-avail::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	animation: pulse 2.4s var(--ease) infinite;
}

.hero-metrics {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem clamp(2rem, 6vw, 4.5rem);
	border-top: 1px solid var(--line);
	padding-top: 1.8rem;
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

.hero-metrics .metric {
	margin: 0;
}

.hero-metrics .metric-num {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0 0 0.4rem;
}

.hero-metrics .metric-num em {
	color: var(--wp--preset--color--accent);
	font-style: normal;
}

.hero-metrics .metric-label {
	font-size: 0.8rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

@keyframes pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 rgba(216, 243, 76, 0.55);
	}
	55% {
		box-shadow: 0 0 0 7px rgba(216, 243, 76, 0);
	}
}

/* === ticker === */

.ticker-wrap {
	overflow: hidden;
}

.ticker {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ink);
	padding-block: 0.85rem 1rem;
	transform: rotate(-1.1deg) scale(1.04);
	overflow: hidden;
}

.ticker__track {
	display: block;
	width: max-content;
	max-width: none;
	margin: 0;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(0.95rem, 1.7vw, 1.3rem);
	font-weight: 650;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	animation: ticker 34s linear infinite;
	will-change: transform;
}

@keyframes ticker {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* === sections === */

.pad-xl {
	padding-block: clamp(4.5rem, 11vw, 8.5rem);
}

.pad-lg {
	padding-block: clamp(3rem, 7vw, 6rem);
}

.pad-md {
	padding-block: clamp(2rem, 5vw, 3.75rem);
}

.sec-paper {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}

.sec-paper .wp-block-heading {
	color: var(--wp--preset--color--ink);
}

.sec-paper .lede {
	color: color-mix(in srgb, var(--wp--preset--color--ink) 78%, transparent);
}

.sec-paper .eyebrow {
	color: color-mix(in srgb, var(--wp--preset--color--ink) 62%, transparent);
}

.sec-paper .eyebrow::before {
	background: #86b01f;
}

.sec-paper .hl {
	color: #6f9a12;
}

.sec-surface {
	background: var(--wp--preset--color--surface);
}

.hairline-top {
	border-top: 1px solid var(--line);
}
/* === work rows === */

.project-list {
	border-bottom: 1px solid var(--line);
}

.project-list .project-row,
.step-list > .step {
	margin-top: 0;
}

.project-list {
	border-bottom: 1px solid var(--line);
	counter-reset: row;
}

.project-row {
	counter-increment: row;
	position: relative;
	border-top: 1px solid var(--line);
	padding-block: clamp(1.8rem, 4vw, 3rem);
	transition: padding-left 0.35s var(--ease);
}

.project-row:hover {
	padding-left: 1rem;
}

.project-row::after {
	content: "0" counter(row);
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3.5rem, 9vw, 8rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px var(--line);
	pointer-events: none;
}

/* Project rows are kept as single-column text rows; the outlined numeral
   above is the visual marker instead of a thumbnail. */
.project-row .wp-block-columns {
	display: block;
}

.project-row .wp-block-column {
	width: auto !important;
	min-width: 0;
}

.project-row__meta {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.92rem;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--muted);
	margin: 0 0 0.5rem;
}

.project-row__meta em {
	font-style: normal;
	color: var(--wp--preset--color--accent);
}

.project-row h3 {
	font-size: clamp(1.9rem, 4.2vw, 3.4rem);
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.02;
	margin: 0 0 1rem;
}

.project-row h3 a {
	color: var(--wp--preset--color--contrast);
}

.project-row:hover h3 a {
	color: var(--wp--preset--color--accent);
}

.project-row__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem 0.55rem;
}

.project-row__tags p {
	margin: 0;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 0.3rem 0.75rem;
}

.project-row__thumb .mock {
	width: 100%;
	height: auto;
	display: block;
	max-width: 230px;
	margin-inline: auto;
}

/* line-art UI mocks used across thumbnails & case visuals */
.mock {
	display: block;
	width: 100%;
	height: auto;
	color: #7d8570;
}

.mock .sw { fill: none; stroke: currentColor; stroke-width: 1.3; }
.mock .sw--b { stroke-width: 2; }
.mock .sf { fill: currentColor; opacity: 0.35; }
.mock .sf--d { opacity: 0.14; }
.mock .sa { fill: var(--wp--preset--color--accent); }
.mock .sal { fill: none; stroke: var(--wp--preset--color--accent); stroke-width: 1.3; }
.mock .stx { fill: currentColor; opacity: 0.65; }

.project-row:hover .mock {
	color: #98a087;
}

/* detailed case block used on the Work page */
.case {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
	align-items: center;
	border-top: 1px solid var(--line);
	padding-block: clamp(2.75rem, 6vw, 5rem);
}

.case__visual {
	background: color-mix(in srgb, var(--wp--preset--color--surface) 85%, transparent);
	border: 1px solid var(--line);
	border-radius: 1.4rem;
	padding: clamp(1.4rem, 3vw, 2.2rem);
}

.case__visual .mock {
	max-width: 360px;
	margin-inline: auto;
}

.case-metrics {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.1rem;
	margin-top: 1.6rem;
}

.case-metrics .cm {
	border-left: 2px solid var(--wp--preset--color--accent);
	padding-left: 0.85rem;
}

.case-metrics .cm strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.4rem, 2.4vw, 2rem);
	font-weight: 650;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.case-metrics .cm span {
	font-size: 0.8rem;
	color: var(--wp--preset--color--muted);
}

/* === page headers === */

.page-head {
	padding-block: clamp(3.5rem, 9vh, 6rem) clamp(2.5rem, 6vh, 4rem);
}

.page-title {
	font-size: clamp(2.6rem, 7vw, 5.2rem);
	font-weight: 650;
	letter-spacing: -0.035em;
	line-height: 0.99;
	margin: 0.4rem 0 0;
}

.big-statement {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.9rem, 4.4vw, 3.5rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.06;
}

.link-email {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.9rem, 6.4vw, 4.6rem);
	font-weight: 650;
	letter-spacing: -0.03em;
	line-height: 1.02;
	word-break: break-word;
}

.tag {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 0.5rem 1rem;
}

/* === contact === */

.contact-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.4rem;
}

.contact-cell {
	border: 1px solid var(--line);
	border-radius: 1.25rem;
	padding: 1.6rem;
	background: color-mix(in srgb, var(--wp--preset--color--surface) 70%, transparent);
	transition: border-color 0.3s ease, transform 0.3s var(--ease);
}

.contact-cell:hover {
	border-color: var(--line-strong);
	transform: translateY(-4px);
}

.contact-cell .cc-label {
	font-size: 0.76rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
}

.contact-cell h3 {
	font-size: 1.15rem;
	margin: 0.6rem 0 0.4rem;
}

.contact-cell p {
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* === footer === */

.site-footer {
	background: #0a0c07;
	border-top: 1px solid var(--line);
}

.footer-cta {
	padding-block: clamp(3.5rem, 9vw, 6rem) clamp(2.5rem, 6vw, 4.5rem);
}

.footer-grid {
	display: grid;
	grid-template-columns: 2.2fr 1fr 1fr 1.4fr;
	gap: 2.6rem 2rem;
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
	border-top: 1px solid var(--line);
}

.footer-head {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	margin: 0 0 1.1rem;
}

.footer-grid p,
.footer-grid li {
	font-size: 0.95rem;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 64%, transparent);
}

.footer-grid ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.footer-grid li a {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 72%, transparent);
}

.footer-grid li a:hover {
	color: var(--wp--preset--color--accent);
}

.footer-brand .wp-block-site-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 0.6rem;
}

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem 2rem;
	border-top: 1px solid var(--line);
	padding-block: 1.4rem;
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 900px) {
	.case {
		grid-template-columns: 1fr;
	}

	.case__visual {
		order: -1;
	}
}

@media (max-width: 760px) {
	.footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.contact-grid {
		grid-template-columns: 1fr;
	}

	.project-row__thumb {
		flex-basis: 110px;
	}
}

@media (max-width: 460px) {
	.footer-grid {
		grid-template-columns: 1fr;
	}
}
/* === section cards (services / about) === */

.service-card {
	border: 1px solid var(--line);
	border-radius: 1.4rem;
	padding: clamp(1.5rem, 3vw, 2.2rem);
	background: color-mix(in srgb, var(--wp--preset--color--surface) 55%, transparent);
	height: 100%;
	transition: border-color 0.3s ease, transform 0.35s var(--ease);
}

.service-card:hover {
	border-color: var(--line-strong);
	transform: translateY(-5px);
}

.service-card .sc-idx {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9rem;
	color: var(--wp--preset--color--accent);
}

.service-card h3 {
	font-size: clamp(1.35rem, 2.4vw, 1.8rem);
	margin: 1.4rem 0 0.7rem;
}

.service-card p {
	font-size: 0.97rem;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 74%, transparent);
}

.service-card .sc-list {
	list-style: none;
	margin: 1.2rem 0 0;
	padding: 1.1rem 0 0;
	border-top: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.service-card .sc-list li {
	font-size: 0.9rem;
	color: var(--wp--preset--color--muted);
	padding-left: 1.2rem;
	position: relative;
}

.service-card .sc-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.step-num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent);
}

.step-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: steps;
}

.step-list > .step {
	counter-increment: steps;
	border-top: 1px solid var(--line);
	padding: 1.6rem 0;
	display: grid;
	grid-template-columns: 4rem 1fr auto;
	gap: 1.2rem;
	align-items: baseline;
}

.step-list > .step::before {
	content: "0" counter(steps);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.95rem;
	color: var(--wp--preset--color--accent);
}

.step-list h3 {
	margin: 0 0 0.3rem;
	font-size: clamp(1.25rem, 2.4vw, 1.7rem);
}

.step-list p {
	margin: 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--muted);
	max-width: 46ch;
}

.step-list .step-tag {
	font-size: 0.76rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}

@media (max-width: 640px) {
	.step-list > .step {
		grid-template-columns: 2.6rem 1fr;
	}

	.step-list .step-tag {
		display: none;
	}
}

.reveal {
	transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
}

.reveal.is-hidden {
	opacity: 0;
	transform: translateY(20px);
}

.reveal.is-hidden.rv-in {
	opacity: 1;
	transform: none;
}

.st1 { transition-delay: 0.08s; }
.st2 { transition-delay: 0.16s; }
.st3 { transition-delay: 0.24s; }
.st4 { transition-delay: 0.32s; }

/* === quote band === */

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.2rem 1.6rem;
	margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

.hero-actions .hero-avail {
	margin: 0;
}

.q-text {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.6rem, 3.8vw, 2.8rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.18;
	margin: 0;
}

.q-attr {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--ink) 62%, transparent);
	margin: clamp(1.4rem, 3vw, 2rem) 0 0;
}

/* === content helpers === */

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.4rem 2rem;
	margin-bottom: clamp(1.8rem, 4vw, 3rem);
}

.section-head .eyebrow {
	margin-bottom: 1rem;
}

.link-more {
	margin: 0;
	font-weight: 600;
}

.link-more a {
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--contrast);
	padding-bottom: 0.25rem;
	border-bottom: 1px solid var(--line-strong);
}

.link-more a::after {
	content: "\2197";
	margin-left: 0.5rem;
	color: var(--wp--preset--color--accent);
	display: inline-block;
	transition: transform 0.3s var(--ease);
}

.link-more a:hover {
	color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
}

.link-more a:hover::after {
	transform: translate(3px, -3px);
}

/* === responsive === */

@media (max-width: 880px) {
	.site-nav {
		order: 5;
		flex-basis: 100%;
		margin-left: 0;
		border-top: 1px solid var(--line);
		padding-top: 0.85rem;
		margin-top: 0.25rem;
	}

	.site-nav ul {
		justify-content: space-between;
	}
}

@media (max-width: 600px) {
	.hero::after {
		opacity: 0.55;
	}

	.hero-metrics {
		gap: 1.6rem 2.2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}

	.reveal.is-hidden,
	.reveal.is-hidden.rv-in {
		opacity: 1;
		transform: none;
	}

	.ticker__track {
		animation: none;
	}

	.hero-avail::before {
		animation: none;
	}
}

/* =====================================================================
   Boxed container view
   The hero and the tinted bands previously bled edge-to-edge across the
   whole viewport. They are now pulled back into the site's content
   column and framed as rounded panels, so every section lives inside the
   site's single boxed container with the page canvas visible around it.
   ===================================================================== */

.entry-content > .alignfull.hero,
.entry-content > .alignfull.sec-surface,
.entry-content > .alignfull.sec-paper {
	width: auto;
	max-width: var(--wp--style--global--content-size);
	margin-left: auto !important;
	margin-right: auto !important;
	border: 1px solid var(--line);
	border-radius: clamp(1.15rem, 2.2vw, 1.8rem);
	overflow: hidden;
}

/* Give the hero its own panel surface so it no longer reads as plain
   body copy floating on the page background — a designed, boxed opener. */
.entry-content > .alignfull.hero {
	background:
		radial-gradient(58% 130% at 92% -12%, rgba(216, 243, 76, 0.16), transparent 62%),
		radial-gradient(66% 150% at -12% 122%, rgba(216, 243, 76, 0.07), transparent 55%),
		linear-gradient(180deg, #1a2013 0%, var(--wp--preset--color--surface) 100%);
	box-shadow: 0 30px 70px -42px rgba(0, 0, 0, 0.7);
}

.entry-content > .alignfull.sec-surface {
	box-shadow: 0 26px 60px -44px rgba(0, 0, 0, 0.6);
}

/* The paper quote is pale, so it uses its own dark hairline on the fill. */
.entry-content > .alignfull.sec-paper {
	border-color: var(--line-dark);
	box-shadow: 0 30px 70px -46px rgba(0, 0, 0, 0.7);
}

/* Vertical rhythm between the now-boxed panels and the flat sections. */
.entry-content > .alignfull.hero + *,
.entry-content > .alignfull.sec-surface + *,
.entry-content > .alignfull.sec-paper + * {
	margin-top: clamp(1.5rem, 3vw, 2.75rem);
}

/* The footer is a template part that spans the full viewport, so unlike
   the content panels it never picked up the boxed treatment and bled its
   dark band edge-to-edge. Pull it into the same boxed column as the
   framed panels above: inset from the page edges (matching the root
   padding while capped at the content size) and rounded, so the page
   canvas shows around it and its content aligns with the other sections. */
.wp-site-blocks .site-footer {
	width: auto;
	margin-inline: max(
		clamp(1.25rem, 4vw, 3.5rem),
		calc((100% - var(--wp--style--global--content-size)) / 2)
	);
	margin-top: clamp(1.5rem, 3vw, 2.75rem);
	margin-bottom: clamp(1rem, 2vw, 1.75rem);
	border: 1px solid var(--line);
	border-radius: clamp(1.15rem, 2.2vw, 1.8rem);
	overflow: hidden;
	box-shadow: 0 26px 60px -44px rgba(0, 0, 0, 0.6);
}

@media (max-width: 480px) {
	.entry-content > .alignfull.hero,
	.entry-content > .alignfull.sec-surface,
	.entry-content > .alignfull.sec-paper,
	.wp-site-blocks .site-footer {
		border-radius: 0.9rem;
	}
}