/**
 * About page — editorial layout aligned with Hat Bar sand / ink / copper.
 */

.hb-about-page {
	--hb-ab-sand: var(--hatbar-sand, #f5f0e8);
	--hb-ab-sand2: var(--hatbar-sand2, #ede6d6);
	--hb-ab-sand3: var(--hatbar-sand3, #d8ccb4);
	--hb-ab-sand4: var(--hatbar-sand4, #c4b898);
	--hb-ab-ink: var(--hatbar-ink, #1c1712);
	--hb-ab-ink2: var(--hatbar-ink2, #3d3529);
	--hb-ab-ink3: var(--hatbar-ink3, #6b5f4e);
	--hb-ab-copper: var(--hatbar-copper, #b8763a);
	--hb-ab-copper-dim: var(--hatbar-copper-dim, #8a5628);
	--hb-ab-copper-light: #f7ede0;
	--hb-ab-white: var(--hatbar-white, #fff);
	--hb-ab-serif: var(--hatbar-serif, "Playfair Display", Georgia, serif);
	--hb-ab-sans: var(--hatbar-sans, "DM Sans", system-ui, sans-serif);
	/* Legacy aliases used in older rules */
	--hb-brown: var(--hb-ab-ink);
	--hb-muted: var(--hb-ab-ink3);
	--hb-parch: #faf7f1;
	--hb-border: rgba(216, 204, 180, 0.65);
	--hb-primary: var(--hb-ab-copper);
	--hb-gold: #d4b896;

	color: var(--hb-ab-ink2);
	font-family: var(--hb-ab-sans);
	line-height: 1.55;
	overflow-x: clip;
}

.hb-about-page *,
.hb-about-page *::before,
.hb-about-page *::after {
	box-sizing: border-box;
}

.hb-about-page .hb-container {
	width: 100%;
	max-width: 72rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: clamp(1rem, 4vw, 1.75rem);
	padding-right: clamp(1rem, 4vw, 1.75rem);
}

/* ─── Hero ─────────────────────────────────────────────────────────────── */
.hb-about-page .hb-hero--about {
	position: relative;
	isolation: isolate;
	min-height: min(52vh, 28rem);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(2.5rem, 6vw, 4.5rem) 0;
	background:
		radial-gradient(ellipse 120% 80% at 50% -20%, rgba(184, 118, 58, 0.14), transparent 55%),
		linear-gradient(165deg, var(--hb-ab-sand2) 0%, var(--hb-ab-sand) 42%, #ebe4d6 100%);
	border-bottom: 1px solid rgba(196, 184, 152, 0.45);
}

.hb-about-page .hb-hero-bg {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 18% 40%, rgba(184, 118, 58, 0.08), transparent 42%),
		radial-gradient(circle at 88% 65%, rgba(28, 23, 18, 0.06), transparent 38%);
	pointer-events: none;
	z-index: 0;
}

.hb-about-page .hb-hero-grid {
	position: absolute;
	inset: 0;
	opacity: 0.22;
	background-image:
		linear-gradient(rgba(28, 23, 18, 0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(28, 23, 18, 0.04) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse 85% 70% at 50% 45%, black 10%, transparent 72%);
	pointer-events: none;
	z-index: 0;
}

.hb-about-page .hb-hero-glow {
	position: absolute;
	left: 50%;
	bottom: -30%;
	width: min(120%, 64rem);
	height: 55%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse closest-side, rgba(184, 118, 58, 0.12), transparent 70%);
	pointer-events: none;
	z-index: 0;
}

.hb-about-page .hb-hero-inner {
	position: relative;
	z-index: 1;
	padding: 0.5rem 0 1rem;
	text-align: center;
	max-width: 46rem;
	margin: 0 auto;
}

.hb-about-page .hb-hero-eyebrow {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--hb-ab-copper-dim);
	margin: 0 0 0.75rem;
}

.hb-about-page .hb-hero-title {
	font-family: var(--hb-ab-serif);
	font-size: clamp(2.15rem, 4.5vw, 3.1rem);
	font-weight: 500;
	line-height: 1.08;
	margin: 0 0 1rem;
	color: var(--hb-ab-ink);
	letter-spacing: -0.02em;
}

.hb-about-page .hb-hero-title em {
	font-style: italic;
	color: var(--hb-ab-copper);
}

.hb-about-page .hb-hero-sub {
	margin: 0 auto;
	max-width: 34rem;
	font-size: clamp(1rem, 1.35vw, 1.125rem);
	color: var(--hb-ab-ink3);
	line-height: 1.65;
}

/* ─── Story ─────────────────────────────────────────────────────────────── */
.hb-about-page .hb-story {
	position: relative;
	background: linear-gradient(180deg, var(--hb-ab-white) 0%, #fdfcfa 50%, var(--hb-ab-sand) 100%);
}

.hb-about-page .hb-story::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--hb-ab-sand3), transparent);
	opacity: 0.7;
}

.hb-about-page .hb-story-inner {
	display: grid;
	gap: clamp(1.75rem, 4vw, 2.75rem);
	padding: clamp(2.75rem, 6vw, 4.25rem) 0;
	align-items: center;
}

@media (min-width: 880px) {
	.hb-about-page .hb-story-inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
		padding-left: clamp(1rem, 4vw, 1.75rem);
		padding-right: clamp(1rem, 4vw, 1.75rem);
		max-width: 72rem;
		margin: 0 auto;
		column-gap: clamp(2rem, 5vw, 3.5rem);
	}
}

.hb-about-page .hb-story-visual {
	display: flex;
	justify-content: center;
	padding: 0.5rem 1rem 1rem;
}

.hb-about-page .hb-story-hat {
	position: relative;
	width: min(300px, 72vw);
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0 28px 48px rgba(28, 23, 18, 0.12));
}

.hb-about-page .hb-story-ring {
	position: absolute;
	border-radius: 50%;
	border: 1.5px solid rgba(184, 118, 58, 0.28);
	transition: border-color 0.45s ease, box-shadow 0.45s ease;
}

.hb-about-page .hb-story-hat:hover .hb-story-ring {
	border-color: rgba(184, 118, 58, 0.42);
}

.hb-about-page .hb-story-ring:nth-child(1) {
	width: 46%;
	height: 46%;
}

.hb-about-page .hb-story-ring:nth-child(2) {
	width: 72%;
	height: 72%;
}

.hb-about-page .hb-story-ring:nth-child(3) {
	width: 98%;
	height: 98%;
	border-color: rgba(196, 184, 152, 0.55);
}

.hb-about-page .hb-story-hat:hover .hb-story-ring:nth-child(3) {
	box-shadow: 0 0 0 1px rgba(184, 118, 58, 0.12);
}

.hb-about-page .hb-story-icon {
	font-size: clamp(2.75rem, 6vw, 3.75rem);
	position: relative;
	z-index: 1;
	line-height: 1;
}

.hb-about-page .hb-story-copy {
	padding: 0.25rem 0;
}

.hb-about-page .hb-story-copy h2 {
	font-family: var(--hb-ab-serif);
	font-size: clamp(1.75rem, 2.8vw, 2.25rem);
	font-weight: 500;
	margin: 0 0 1rem;
	color: var(--hb-ab-ink);
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.hb-about-page .hb-story-rule {
	display: block;
	width: 3rem;
	height: 3px;
	border-radius: 2px;
	margin-bottom: 1.25rem;
	background: linear-gradient(90deg, var(--hb-ab-copper), rgba(184, 118, 58, 0.25));
}

.hb-about-page .hb-story-body p {
	margin: 0 0 1rem;
	max-width: 38rem;
	color: var(--hb-ab-ink3);
	font-size: 1.02rem;
	line-height: 1.68;
}

.hb-about-page .hb-story-body p:first-of-type {
	color: var(--hb-ab-ink2);
	font-size: 1.08rem;
}

.hb-about-page .hb-story-body p:last-child {
	margin-bottom: 0;
}

/* ─── Values ────────────────────────────────────────────────────────────── */
.hb-about-page .hb-values {
	padding: clamp(3rem, 7vw, 4.5rem) 0;
	background:
		radial-gradient(ellipse 80% 50% at 50% 0%, rgba(184, 118, 58, 0.06), transparent 60%),
		var(--hb-parch);
	position: relative;
}

.hb-about-page .hb-values .hb-section-head {
	margin-bottom: clamp(2rem, 4vw, 2.75rem);
	text-align: center;
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
}

.hb-about-page .hb-section-kicker {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--hb-ab-copper-dim);
	margin: 0 0 0.5rem;
}

.hb-about-page .hb-section-head h2 {
	font-family: var(--hb-ab-serif);
	font-size: clamp(1.65rem, 2.6vw, 2.1rem);
	font-weight: 500;
	margin: 0 0 0.65rem;
	color: var(--hb-ab-ink);
	letter-spacing: -0.02em;
}

.hb-about-page .hb-section-sub {
	margin: 0;
	font-size: 1rem;
	color: var(--hb-ab-ink3);
	line-height: 1.6;
}

.hb-about-page .hb-value-grid {
	display: grid;
	gap: 1.25rem;
}

@media (min-width: 768px) {
	.hb-about-page .hb-value-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 1.35rem;
	}
}

.hb-about-page .hb-value-card {
	position: relative;
	background: var(--hb-ab-white);
	border: 1px solid var(--hb-border);
	border-radius: 1.1rem;
	padding: 1.5rem 1.35rem 1.4rem;
	overflow: hidden;
	box-shadow: 0 2px 0 rgba(255, 255, 255, 0.8) inset, 0 14px 36px rgba(28, 23, 18, 0.06);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) {
	.hb-about-page .hb-value-card:hover {
		transform: translateY(-4px);
		box-shadow: 0 2px 0 rgba(255, 255, 255, 0.9) inset, 0 22px 48px rgba(28, 23, 18, 0.1);
		border-color: rgba(184, 118, 58, 0.35);
	}
}

.hb-about-page .hb-value-card-accent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--hb-ab-copper), #e8c48a, var(--hb-ab-sand3));
}

.hb-about-page .hb-value-icon {
	width: 2.5rem;
	height: 2.5rem;
	color: var(--hb-ab-copper);
	margin-bottom: 0.65rem;
}

.hb-about-page .hb-value-card h3 {
	margin: 0 0 0.45rem;
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--hb-ab-ink);
	letter-spacing: -0.01em;
}

.hb-about-page .hb-value-card p {
	margin: 0;
	font-size: 0.94rem;
	color: var(--hb-ab-ink3);
	line-height: 1.6;
}

/* ─── CTA band ──────────────────────────────────────────────────────────── */
.hb-about-page .hb-cta--about {
	position: relative;
	padding: clamp(3rem, 7vw, 4.75rem) 0;
	overflow: hidden;
	background: linear-gradient(155deg, var(--hb-ab-ink) 0%, #2a241c 48%, #1c1712 100%);
	color: var(--hb-ab-sand);
}

.hb-about-page .hb-cta-glow {
	position: absolute;
	inset: -20% -10% auto;
	height: 70%;
	background: radial-gradient(ellipse 55% 45% at 50% 0%, rgba(184, 118, 58, 0.35), transparent 65%);
	pointer-events: none;
	opacity: 0.9;
}

.hb-about-page .hb-cta-noise {
	position: absolute;
	inset: 0;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	pointer-events: none;
}

.hb-about-page .hb-cta-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: clamp(1.5rem, 3vw, 2rem);
}

.hb-about-page .hb-cta-copy h2 {
	font-family: var(--hb-ab-serif);
	font-size: clamp(1.75rem, 3vw, 2.35rem);
	font-weight: 500;
	margin: 0 0 0.65rem;
	color: var(--hb-ab-white);
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.hb-about-page .hb-cta-copy p {
	margin: 0 auto;
	max-width: 36rem;
	font-size: 1.02rem;
	line-height: 1.65;
	color: rgba(245, 240, 232, 0.78);
}

.hb-about-page .hb-cta-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1rem;
}

.hb-about-page .hb-btn-gold {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.85rem 1.65rem;
	border-radius: 999px;
	background: linear-gradient(165deg, #e8c48a 0%, var(--hb-gold) 45%, #c4a574 100%);
	color: var(--hb-ab-ink);
	font-weight: 700;
	text-decoration: none;
	border: 1px solid rgba(28, 23, 18, 0.12);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
	.hb-about-page .hb-btn-gold:hover {
		filter: brightness(1.06);
		transform: translateY(-1px);
		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
	}
}

.hb-about-page .hb-btn-gold:focus-visible {
	outline: 2px solid var(--hb-ab-white);
	outline-offset: 3px;
}

.hb-about-page .hb-btn-outline {
	display: inline-flex;
	align-items: center;
	padding: 0.82rem 1.5rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	color: var(--hb-ab-sand);
	background: rgba(255, 255, 255, 0.06);
	border: 1.5px solid rgba(245, 240, 232, 0.35);
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
	.hb-about-page .hb-btn-outline:hover {
		background: rgba(255, 255, 255, 0.12);
		border-color: rgba(245, 240, 232, 0.55);
		color: var(--hb-ab-white);
	}
}

.hb-about-page .hb-btn-outline:focus-visible {
	outline: 2px solid rgba(232, 196, 138, 0.9);
	outline-offset: 3px;
}

.hb-about-page .hb-btn-arrow {
	font-size: 1.1em;
}