/* ==========================================================================
   Design tokens
   ========================================================================== */
@font-face {
	font-family: 'Geist';
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/Geist-VariableFont_wght.woff2') format('woff2');
}
@font-face {
	font-family: 'Geist Mono';
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/GeistMono-VariableFont_wght.woff2') format('woff2');
}

:root {
	--ink: #0F1A2E;
	--gold: #F7D002;
	--gold-ink: #0F1A2E;
	--grid-line: rgba(41, 171, 226, 0.07);
	--line: rgba(41, 171, 226, 0.2);
	--elevated: rgba(255, 255, 255, 0.06);
	--sidebar-width: 260px;
	--sidebar-width-tablet: 76px;
	--font-sans: 'Geist', system-ui, -apple-system, sans-serif;
	--font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

* { box-sizing: border-box; }
/* Scrolling is animated in JS (assets/js/smooth-scroll.js) with a controllable,
   slower duration — native scroll-behavior:smooth can't be slowed down. */
body {
	margin: 0;
	background: var(--ink);
	color: #fff;
	font-family: var(--font-sans);
}
img { max-width: 100%; display: block; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: #ffe15c; }

.container { max-width: 880px; padding: 0 56px; }
@media (max-width: 640px) { .container { padding: 0 20px; } }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}
.site-utility-nav { position: relative; }
.skip-link {
	position: absolute; top: -100px; left: 12px; z-index: 1000;
	background: var(--gold); color: var(--gold-ink);
	padding: 10px 16px; border-radius: 4px;
	font-family: var(--font-mono); font-size: 13px;
	transition: top 0.15s ease;
}
.skip-link:focus { top: 12px; }

/* ==========================================================================
   Type + shared components
   ========================================================================== */
.eyebrow {
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 13px;
	font-weight: 500;
	color: var(--gold);
	margin: 0 0 14px 0;
}
.heading, .page-heading, .hero-heading, .section-heading {
	font-family: var(--font-sans);
	font-weight: 700;
	color: #fff;
	margin: 0;
	line-height: 1.15;
}
.hero-heading { font-size: clamp(40px, 6vw, 72px); }
.section-heading { font-size: clamp(24px, 3vw, 30px); margin-bottom: 8px; }
.page-heading { font-size: 36px; }
.page-heading--404 { font-size: 72px; }

.hero-rule, .rule {
	width: 60px; height: 3px; background: var(--gold);
	margin: 22px 0; border: none;
}
.hero-copy, .copy, .contact-copy, .page-content, .about-bio-text {
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.7);
	margin: 0 0 14px 0;
	max-width: 620px;
}
/* Inline links within body copy need a non-color cue too (WCAG 1.4.1) —
   a thin, offset underline reads as "link" without the heavy default look. */
.hero-copy a, .copy a, .contact-copy a, .page-content a, .about-bio-text a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.placeholder-copy {
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.5);
	font-style: italic;
	margin: 0;
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	font-weight: 600;
	padding: 15px 28px;
	border-radius: 6px;
	cursor: pointer;
	white-space: nowrap;
	border: 1px solid transparent;
}
.btn--solid { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
.btn--solid:hover { background: #ffe15c; color: var(--gold-ink); }
.btn--outline { background: transparent; color: var(--gold); border-color: var(--gold); }
.btn--outline:hover { background: rgba(247, 208, 2, 0.08); }
.button-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 28px; }

.has-grid-bg {
	background-color: var(--ink);
	background-image:
		linear-gradient(var(--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size: 20px 20px, 20px 20px;
}
.has-solid-bg { background-color: var(--ink); }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ==========================================================================
   Sidebar
   ========================================================================== */
.menu-toggle {
	display: none;
	position: fixed; top: 16px; left: 16px; z-index: 60;
	width: 44px; height: 44px;
	background: var(--ink);
	border: 1px solid var(--line);
	border-radius: 6px;
	flex-direction: column; align-items: center; justify-content: center;
	gap: 5px;
	cursor: pointer;
}
.menu-toggle__bar {
	width: 20px; height: 2px; background: #fff;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.menu-toggle.is-open .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-open .menu-toggle__bar:nth-child(2) { opacity: 0; }
.menu-toggle.is-open .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.sidebar-backdrop {
	display: none;
	position: fixed; inset: 0; z-index: 40;
	background: rgba(0, 0, 0, 0.5);
}

.site-header {
	position: fixed;
	top: 0; left: 0; bottom: 0;
	width: var(--sidebar-width);
	background: var(--ink);
	z-index: 50;
	overflow-y: auto;
	scrollbar-width: none;
}
.site-header::-webkit-scrollbar { display: none; }
.site-header__inner {
	display: flex; flex-direction: column; justify-content: space-between;
	min-height: 100%;
	padding: 56px 22px 32px;
}

.logo-mark-link { display: block; }
.logo-mark { width: 148px; height: auto; margin: 0 auto 40px; }
.custom-logo { width: 148px; height: auto; margin: 0 auto 40px; }
.logo-avatar { display: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; margin: 0 auto 20px; border: 1px solid rgba(255, 255, 255, 0.08); }

.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.nav-link {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.75);
	padding: 11px 12px;
	border-radius: 6px;
}
.nav-link:hover, .nav-link:focus-visible { background: rgba(255, 255, 255, 0.06); color: #fff; }
.nav-icon { width: 16px; height: 16px; flex: none; }
.sub-nav-list {
	list-style: none; margin: 2px 0 10px 0; padding: 0 0 0 20px;
	display: flex; flex-direction: column; gap: 1px;
	border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.sub-nav-link {
	display: block;
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.6px;
	color: rgba(255, 255, 255, 0.5);
	padding: 8px 12px;
	border-radius: 6px;
}
.sub-nav-link:hover, .sub-nav-link:focus-visible { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.85); }

.sidebar-bottom { display: flex; flex-direction: column; gap: 18px; }
.social-row { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.social-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(255, 255, 255, 0.05);
	color: rgba(255, 255, 255, 0.6);
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.social-link:hover { color: var(--gold); border-color: var(--gold); background: rgba(247, 208, 2, 0.08); }
.social-link__icon { width: 15px; height: 15px; display: block; }
.social-link__icon--img { width: 16px; height: auto; object-fit: contain; }
.social-link__icon--text {
	width: auto; height: auto;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
.social-row--placeholder { gap: 10px; }
.social-placeholder { width: 28px; height: 28px; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.05); }

/* Tablet: icon-only rail */
@media (max-width: 1024px) {
	.site-header { width: var(--sidebar-width-tablet); }
	.site-header__inner { padding: 24px 12px 32px; align-items: center; }
	.logo-mark, .custom-logo { display: none; }
	.logo-avatar { display: block; }
	.nav-link span, .sub-nav-list { display: none; }
	.nav-link { justify-content: center; padding: 12px; }
}

/* Mobile: top bar that drops its nav open vertically (not a left flyout) */
@media (max-width: 640px) {
	.menu-toggle { display: flex; left: auto; right: 16px; }
	.site-header {
		top: 0; left: 0; right: 0; bottom: auto;
		width: 100%;
		max-width: none;
		max-height: 78px;
		overflow: hidden;
		background: transparent;
		transition: max-height 0.3s ease, background 0.3s ease;
	}
	.site-header.is-open {
		max-height: 100vh;
		overflow-y: auto;
		background: var(--ink);
		box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
	}
	.site-header.is-open ~ .sidebar-backdrop,
	.sidebar-backdrop:not([hidden]) { display: block; }
	.site-header__inner { display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; padding: 16px 68px 32px 22px; align-items: stretch; min-height: 0; }
	.site-branding { flex: none; }
	.logo-mark, .custom-logo { display: block; width: 128px; margin: 0; }
	.logo-avatar { display: none; }
	.nav-list { margin-top: 16px; }
	.sidebar-bottom { margin-top: 8px; }
	.nav-link span, .sub-nav-list { display: initial; }
	.nav-link { justify-content: flex-start; }
	body.drawer-open { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
	.site-header { transition: none; }
}

/* ==========================================================================
   Main content
   ========================================================================== */
.site-main {
	margin-left: var(--sidebar-width);
	min-height: 100vh;
}
@media (max-width: 1024px) { .site-main { margin-left: var(--sidebar-width-tablet); } }
@media (max-width: 640px) { .site-main { margin-left: 0; } }

.section-hero,
.section-certifications,
.section-about,
.section-experience,
.section-community,
.section-contact,
.section-404,
.section-page {
	position: relative;
	padding: 96px 0;
	overflow: hidden;
}
.section-hero .container,
.section-certifications .container,
.section-about .container,
.section-experience .container,
.section-community .container,
.section-404 .container,
.section-page .container {
	position: relative; z-index: 2;
}
.section-experience,
.section-community,
.section-contact,
.section-404,
.section-page {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.subsection { margin-top: 56px; padding-top: 48px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.subsection .eyebrow { font-size: 12px; }
.subsection .heading { font-size: 22px; }

/* ==========================================================================
   Hero + gear cluster
   ========================================================================== */
.section-hero { overflow: hidden; }
.hero-content { max-width: 620px; }
.hero-artwork {
	position: absolute;
	top: 28%; right: -240px;
	transform: translateY(-50%);
	width: min(880px, 70vw);
	opacity: 0.7;
	z-index: 1;
	pointer-events: none;
}
.hero-artwork svg { width: 100%; height: auto; display: block; }
@media (max-width: 900px) {
	.hero-artwork { display: none; }
}

.hero-eyebrow-heading { font-size: 15px; margin-bottom: 20px; }
.hero-copy--mono {
	font-family: var(--font-mono);
	font-size: 18px;
}

.section-hero { min-height: 680px; display: flex; align-items: center; }
.hero-cta { display: flex; width: fit-content; margin-top: 32px; }
.scroll-indicator {
	margin-top: 28px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	border: none;
	padding: 0;
	color: rgba(255, 255, 255, 0.6);
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 1.5px;
	font-size: 13px;
	cursor: pointer;
}
.scroll-indicator:hover { color: var(--gold); }
.scroll-indicator:hover .scroll-indicator__bar { background: var(--gold); }
.scroll-indicator__bar {
	width: 2px;
	height: 20px;
	background: rgba(255, 255, 255, 0.4);
}
.scroll-indicator.is-pulsing .scroll-indicator__bar { animation: scroll-indicator-pulse 1.4s ease-in-out 3; }
@keyframes scroll-indicator-pulse {
	0%, 100% { transform: scaleY(1); opacity: 0.6; }
	50% { transform: scaleY(1.6); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.scroll-indicator.is-pulsing .scroll-indicator__bar { animation: none; }
}

/* ==========================================================================
   Certifications
   ========================================================================== */
.cred-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
@media (max-width: 640px) { .cred-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cred-card { display: flex; align-items: center; justify-content: center; padding: 28px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; }
.cred-badge { width: 150px; height: 150px; object-fit: contain; }

/* ==========================================================================
   About
   ========================================================================== */
.about-card {
	display: flex; gap: 48px; align-items: flex-start; flex-wrap: wrap;
	margin-top: 32px;
	padding: 40px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
}
.about-photo { width: 220px; height: 220px; flex: none; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.about-card .about-bio-text { flex: 1 1 320px; max-width: none; }

/* ==========================================================================
   Accordion (Projects / Customer Training)
   ========================================================================== */
.exp-list { display: flex; flex-direction: column; margin-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.exp-item { position: relative; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; }
.exp-item:hover { background: rgba(255, 255, 255, 0.035); }
.exp-item--expanded { background: rgba(255, 255, 255, 0.035); }

.exp-item-row {
	width: 100%;
	display: flex; align-items: center; gap: 20px;
	background: none; border: none; color: inherit; font: inherit; text-align: left;
	padding: 22px 16px; margin: 0; cursor: pointer;
	position: relative; z-index: 1;
}
.exp-item-main { flex: 1; }
.exp-item-title { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 17px; color: #fff; }
.exp-item-date { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.5px; color: rgba(255, 255, 255, 0.5); margin-top: 4px; }
.exp-item-toggle {
	width: 32px; height: 32px; flex: none;
	border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2);
	color: rgba(255, 255, 255, 0.6);
	display: flex; align-items: center; justify-content: center;
	transition: border-color 0.2s ease, color 0.2s ease, transform 0.3s ease;
}
.exp-item-row:hover .exp-item-toggle, .exp-item--expanded .exp-item-toggle { border-color: var(--gold); color: var(--gold); }
.exp-item--expanded .exp-item-toggle { transform: rotate(45deg); }
.exp-item-toggle svg { width: 14px; height: 14px; }

.exp-item-slide { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; position: relative; z-index: 1; }
.exp-item--expanded .exp-item-slide { grid-template-rows: 1fr; }
.exp-item-slide-inner { overflow: hidden; }
.exp-item-body { position: relative; padding: 20px 24px 32px 24px; min-height: 180px; }
.exp-list--no-meta .exp-item-body { padding-left: 24px; }
@media (prefers-reduced-motion: reduce) {
	.exp-item-slide { transition: none; }
}

.exp-item-glow {
	/* A blurred solid circle rather than gradient color-stops: the blur itself
	   guarantees a soft edge no matter where the panel's overflow:hidden
	   happens to clip it, instead of needing the clip line to land at exactly
	   the right point in a gradient's falloff. */
	position: absolute; right: 70px; bottom: -100px;
	width: 160px; height: 160px; border-radius: 50%;
	background: rgba(41, 171, 226, 0.4);
	filter: blur(45px);
	pointer-events: none;
}

.exp-item-link {
	display: inline-block;
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	font-size: 12px;
}

.event-list { display: flex; flex-direction: column; gap: 28px; margin-top: 28px; }
.event-item { padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.event-item:last-child { border-bottom: none; }
.event-item .exp-item-title { margin: 6px 0 0 0; }
.event-item .exp-item-link { margin-top: 10px; }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tag-pill {
	display: inline-flex; align-items: center;
	padding: 7px 14px; border-radius: 999px;
	border: 1px dashed rgba(255, 255, 255, 0.25);
	background: rgba(255, 255, 255, 0.04);
	font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.5px;
	color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Presentations carousel
   ========================================================================== */
.carousel-wrap { margin-top: 28px; position: relative; }
.carousel-track {
	display: flex; gap: 18px; overflow-x: auto;
	scrollbar-width: none; padding-bottom: 4px; cursor: grab;
	/* Fades the right edge so a partially-visible card reads as "more to see"
	   rather than a hard crop, regardless of exact viewport/card math. */
	mask-image: linear-gradient(to right, black calc(100% - 48px), transparent 100%);
	-webkit-mask-image: linear-gradient(to right, black calc(100% - 48px), transparent 100%);
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.carousel-track.is-dragging { cursor: grabbing; user-select: none; }
.carousel-card { flex: none; width: 220px; display: flex; flex-direction: column; gap: 12px; }
.carousel-card__media {
	position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
	border-radius: 8px; overflow: hidden;
	background: rgba(255, 255, 255, 0.04);
	display: flex; align-items: center; justify-content: center;
}
.carousel-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.carousel-card__play {
	position: relative; z-index: 1;
	width: 40px; height: 40px; border-radius: 50%;
	background: rgba(15, 26, 46, 0.6);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.carousel-card__play svg { width: 18px; height: 18px; }
.carousel-card__platform {
	position: absolute; top: 10px; right: 10px; z-index: 1;
	font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.6px;
	color: #fff;
	background: rgba(15, 26, 46, 0.6);
	border-radius: 999px; padding: 3px 8px;
}
.carousel-card__title { font-family: var(--font-sans); font-weight: 600; font-size: 14.5px; color: #fff; margin: 2px 0 0 0; line-height: 1.4; }

.carousel-scrollbar {
	position: relative;
	height: 8px;
	margin-top: 22px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 999px;
	cursor: pointer;
}
.carousel-scrollbar__thumb {
	position: absolute;
	top: 0; left: 0;
	height: 100%;
	background: var(--gold);
	border-radius: 999px;
	cursor: grab;
}
/* Enlarges the thumb's draggable hit area well beyond its visible size,
   without making the bar itself look bulky. */
.carousel-scrollbar__thumb::before {
	content: '';
	position: absolute;
	top: -10px; bottom: -10px; left: 0; right: 0;
}
.carousel-scrollbar__thumb.is-dragging { cursor: grabbing; }

/* ==========================================================================
   Video lightbox
   ========================================================================== */
.video-lightbox {
	position: fixed; inset: 0; z-index: 100;
	display: flex; align-items: center; justify-content: center;
	padding: 40px;
	background: rgba(0, 0, 0, 0.85);
}
.video-lightbox[hidden] { display: none; }
.video-lightbox__frame-wrap {
	position: relative;
	width: 100%; max-width: 960px;
	aspect-ratio: 16 / 9;
	background: #000;
}
.video-lightbox__frame-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.video-lightbox__close {
	position: absolute; top: -44px; right: 0;
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.3);
	background: transparent;
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
}
.video-lightbox__close:hover { border-color: var(--gold); color: var(--gold); }
.video-lightbox__close svg { width: 16px; height: 16px; }

/* ==========================================================================
   Section gear accents — the exact same treatment as the hero's cluster
   (mouse + scroll reactive, edge-bleed, no border/band), just living inside
   a section instead of the hero. Desktop only — see section-gear-accents.js.
   ========================================================================== */
.section-gear-accent {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: min(560px, 48vw);
	opacity: 0.5;
	z-index: 1;
	pointer-events: none;
}
.section-gear-accent svg { width: 100%; height: auto; display: block; }
.section-gear-accent--right { right: -70px; }
.section-gear-accent--left { left: -70px; }
.section-certifications .section-gear-accent--right { right: -190px; }
@media (max-width: 900px) {
	.section-gear-accent { display: none; }
}

/* ==========================================================================
   Contact (Gravity Forms restyle)
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; }

.gform_wrapper { font-family: var(--font-sans); }
/* GF's own (now-disabled, see gform_disable_css) stylesheet was what hid the
   honeypot field — replace that bit of it so the anti-spam trap stays hidden. */
.gform_wrapper .gform_validation_container { display: none !important; }
/* Two fields per row (First/Last, Email/Company), each taking the full
   width of its column; the message field spans both columns on its own row. */
.gform_wrapper .gform_fields {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
	row-gap: 22px;
}
.gform_wrapper .gfield,
.gform_wrapper .gfield.gfield--width-half,
.gform_wrapper .gfield.gf_left_half,
.gform_wrapper .gfield.gf_right_half {
	width: 100% !important;
	max-width: 100% !important;
	margin-bottom: 0 !important;
}
.gform_wrapper .gfield--type-textarea { grid-column: 1 / -1; }
@media (max-width: 600px) {
	.gform_wrapper .gform_fields { grid-template-columns: 1fr; }
}
.gform_wrapper .gfield_label,
.gform_wrapper label {
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 1.3px;
	font-size: 11px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.5);
}
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper textarea,
.gform_wrapper select {
	font-family: var(--font-sans);
	font-size: 14px;
	color: rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 12px;
	width: 100% !important;
	max-width: 100% !important;
}
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
	outline: none;
	border-color: var(--gold);
}
.gform_wrapper .gform_footer { margin-top: 8px; }
.gform_wrapper .gform_button {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 1px;
	font-size: 13px; font-weight: 600;
	padding: 15px 28px; border-radius: 6px; cursor: pointer;
	background: var(--gold); color: var(--gold-ink);
	border: 1px solid var(--gold);
}
.gform_wrapper .gform_button:hover { background: #ffe15c; }
.gform_wrapper .validation_error,
.gform_wrapper .gfield_description.validation_message {
	color: #ff6b6b;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.site-footer__bottom { max-width: 1000px; margin: 0 auto; padding: 24px; display: flex; justify-content: flex-end; }
.site-footer__bottom p { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.5); }

/* ==========================================================================
   Contact page-level bits, 404, generic page
   ========================================================================== */
.contact-form { margin-top: 0; }
@media (max-width: 800px) { .contact-form { margin-top: 8px; } }

.post-card { margin-bottom: 40px; }
.post-card__title { margin: 0 0 8px 0; }
.post-card__excerpt { color: rgba(255, 255, 255, 0.7); }