/* Reset + base ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
html.drawer-open, body.drawer-open { overflow: hidden; height: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--step-body);
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

img, svg, video, iframe { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol { padding: 0; margin: 0; }

/* Viewport meta is emitted from header.php — the hard requirement lives there. */

h1, h2, h3, h4 {
	font-family: var(--font-display);
	color: var(--primary);
	line-height: 1.15;
	font-weight: 600;
	text-wrap: pretty;
	margin: 0 0 0.5em;
}
h1 { font-size: var(--step-h1); font-weight: 500; letter-spacing: -0.01em; }
h2 { font-size: var(--step-h2); }
h3 { font-size: var(--step-h3); }
h4 { font-size: var(--step-h4); font-family: var(--font-body); font-weight: 700; color: var(--primary); }

p { margin: 0 0 1.1em; text-wrap: pretty; max-width: var(--measure); }
.entry-content > *, .prose > * { max-width: var(--measure); }
.entry-content ul, .entry-content ol { max-width: var(--measure); padding-left: 1.3em; margin: 0 0 1.1em; }
.entry-content li { margin-bottom: 0.4em; }
.entry-content { color: var(--text); }

.eyebrow {
	display: inline-block;
	font-family: var(--font-body);
	font-size: var(--step-small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent-dark);
	margin-bottom: 0.9rem;
}

/* Layout primitives --------------------------------------------------- */
.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); align-items: start; }
.col-span-4 { grid-column: span 4; }
.col-span-5 { grid-column: span 5; }
.col-span-6 { grid-column: span 6; }
.col-span-7 { grid-column: span 7; }
.col-span-8 { grid-column: span 8; }
.col-span-12 { grid-column: span 12; }

.section { padding-block: var(--space-wide); }
.section--tight { padding-block: var(--space-tight); }
.section--surface { background: var(--surface); }

/* Skip link */
.skip-link {
	position: absolute; left: 1rem; top: -4rem; z-index: 100;
	background: var(--primary); color: #fff; padding: 0.75rem 1.25rem; border-radius: var(--radius);
	transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* Header --------------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 40;
	background: var(--bg);
	border-bottom: 1px solid var(--surface-border);
	transition: box-shadow var(--dur-base) var(--ease-out), padding-block var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled { box-shadow: 0 10px 28px -18px rgba(28, 61, 90, 0.35); }
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 1.75rem;
	padding-block: 1.3rem;
	transition: padding-block var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled .site-header__inner { padding-block: 0.7rem; }

.site-logo {
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
	font-weight: 600;
	color: var(--primary);
	text-decoration: none;
	line-height: 1.2;
	white-space: nowrap;
}
.site-logo em { font-style: italic; color: var(--accent-dark); }

.site-nav .nav-menu { display: flex; gap: clamp(1.4rem, 2.5vw, 2.4rem); list-style: none; }
.site-nav .nav-menu a {
	text-decoration: none; font-weight: 600; font-size: 0.98rem; color: var(--primary);
	padding-block: 0.4rem; position: relative;
}
.site-nav .nav-menu a::after {
	content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px; background: var(--accent);
	transition: right var(--dur-base) var(--ease-out);
}
.site-nav .nav-menu a:hover::after, .site-nav .nav-menu a:focus-visible::after { right: 0; }

.header-actions { display: flex; align-items: center; gap: 1.25rem; }

.burger {
	display: none; position: relative; width: 44px; height: 44px; border: none; background: transparent;
	cursor: pointer; padding: 0; border-radius: var(--radius);
}
.burger__box { position: absolute; inset: 0; margin: auto; width: 24px; height: 16px; }
.burger__box span {
	position: absolute; left: 0; width: 100%; height: 2px; background: var(--primary); border-radius: 2px;
	transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out), top var(--dur-base) var(--ease-out);
}
.burger__box span:nth-child(1) { top: 0; }
.burger__box span:nth-child(2) { top: 7px; }
.burger__box span:nth-child(3) { top: 14px; }
.burger[aria-expanded="true"] .burger__box span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger__box span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__box span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

/* Mobile drawer — direct child of <body>, never nested inside .site-header,
   so the sticky header can't swallow its click events or clip it. */
.drawer-overlay {
	position: fixed; inset: 0; background: oklch(20% 0.04 240 / 45%);
	opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); z-index: 55;
}
.drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

.mobile-drawer {
	position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 360px);
	background: var(--bg); z-index: 60; overflow-y: auto;
	box-shadow: -16px 0 40px -20px rgba(10, 20, 30, 0.4);
	transform: translateX(100%);
	transition: transform var(--dur-base) var(--ease-out);
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: 1.3rem 1.5rem; border-bottom: 1px solid var(--surface-border); }
.mobile-drawer__close { width: 44px; height: 44px; border: none; background: var(--surface); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mobile-drawer .nav-menu { list-style: none; display: flex; flex-direction: column; padding: 1rem 1.5rem 1.5rem; gap: 0.1rem; }
.mobile-drawer .nav-menu a { display: block; padding: 0.95rem 0.25rem; font-weight: 600; font-size: 1.08rem; color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--surface-border); }
.mobile-drawer__contact { padding: 1.25rem 1.5rem 2rem; border-top: 1px solid var(--surface-border); display: flex; flex-direction: column; gap: 0.9rem; }
.mobile-drawer__contact a { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; font-weight: 600; color: var(--primary); }
.mobile-drawer__contact a.btn { justify-content: center; }
.mobile-drawer__contact a.btn--primary { color: #fff; }

@media (max-width: 900px) {
	.site-nav { display: none; }
	.header-actions .header-cta { display: none; }
	.burger { display: inline-flex; align-items: center; justify-content: center; }
}

/* Footer ----------------------------------------------------------------- */
.site-footer { background: var(--primary); color: #fff; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer .eyebrow { color: oklch(85% 0.05 160); }
.site-footer__top { padding-block: var(--space-tight); display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap); }
.site-footer__brand { grid-column: span 4; }
.site-footer__brand p { color: oklch(88% 0.02 240); }
.site-footer__col { grid-column: span 4; }
.site-footer__col h4 { color: #fff; }
.site-footer__col ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.site-footer__col a:hover { text-decoration: underline; }
.site-footer__contact-item { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.6rem; color: oklch(88% 0.02 240); }
.site-footer__contact-item .icon { color: var(--accent); flex-shrink: 0; margin-top: 0.15em; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,0.15); padding-block: 1.25rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; font-size: 0.875rem; color: oklch(80% 0.02 240); }
.site-footer__bottom ul { list-style: none; display: flex; gap: 1.5rem; flex-wrap: wrap; }

/* Responsive grid stacking ------------------------------------------------ */
@media (max-width: 900px) {
	.grid-12 { grid-template-columns: 1fr; }
	.grid-12 > * { grid-column: 1 / -1; }
	.site-footer__brand, .site-footer__col { grid-column: 1 / -1; }
	:root { --gap: 1.75rem; }
}

@media (max-width: 600px) {
	.section { padding-block: clamp(3rem, 8vw, 4rem); }
	.section--tight { padding-block: clamp(2.5rem, 7vw, 3.25rem); }
	.site-footer__top { padding-block: 3rem; }
}