/* ==========================================================================
   LAYOUT — container, sections, grids, header, footer.
   ========================================================================== */

/* Containers & sections ---------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--section-y); }
.section--compact { padding-block: clamp(48px, 6vw, 80px); }
.section--tint { background: var(--c-mint-50); }
.section--dark {
	position: relative; overflow: hidden; color: var(--c-white);
	background: linear-gradient(135deg, var(--c-brand-600) 0%, var(--c-brand-800) 55%, var(--c-brand-900) 100%);
}
.section--dark__watermark {
	position: absolute; right: -80px; bottom: -60px; width: 620px; max-width: none;
	opacity: 0.07; pointer-events: none;
}

.section-head { display: flex; flex-direction: column; gap: 14px; max-width: 680px; margin-bottom: var(--gap-lg); }
.section-head--center { text-align: center; align-items: center; margin-inline: auto; }
.section-head--split {
	max-width: none; flex-direction: row; flex-wrap: wrap;
	justify-content: space-between; align-items: flex-end; gap: var(--gap);
}
.section-head--split > div { display: flex; flex-direction: column; gap: 14px; max-width: 680px; }

/* Grids --------------------------------------------------------------------- */
.grid { display: grid; gap: var(--gap); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.split {
	position: relative; display: grid; align-items: center; gap: clamp(40px, 5vw, 72px);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
}

/* Header ---------------------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--c-line);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--gap); padding-block: 14px; }
.site-header__logo { display: flex; align-items: center; flex-shrink: 0; }
.site-header__logo .logo { height: 44px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 32px; }
.site-nav__list { display: flex; gap: 32px; }
.site-nav__list a { color: var(--c-ink-soft); font-weight: 500; text-decoration: none; }
.site-nav__list a:hover { color: var(--c-brand-600); }

.site-header__toggle {
	display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
	border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: var(--c-white); color: var(--c-ink); cursor: pointer;
}
.site-header__toggle-close { display: none; }

@media (max-width: 900px) {
	.site-header__toggle { display: inline-flex; }
	.site-nav {
		position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 8px;
		padding: 16px var(--gutter) 24px; background: var(--c-white); border-bottom: 1px solid var(--c-line);
		box-shadow: var(--shadow-sm);
		display: none;
	}
	.site-nav__list { flex-direction: column; gap: 0; }
	.site-nav__list a { display: block; padding: 12px 4px; border-bottom: 1px solid var(--c-line); }
	.site-nav__cta { margin-top: 8px; }
	.menu-open .site-nav { display: flex; }
	.menu-open .site-header__toggle-open { display: none; }
	.menu-open .site-header__toggle-close { display: inline; }
}

/* Footer ---------------------------------------------------------------------- */
.site-footer { background: var(--c-brand-900); color: var(--c-footer-text); font-size: var(--fs-sm); }
.site-footer a { color: var(--c-footer-text); text-decoration: none; }
.site-footer a:hover { color: var(--c-white); }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; padding-block: 56px 36px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 16px; max-width: 360px; }
.site-footer__logo { height: 52px; width: auto; }
.site-footer__cols { display: flex; flex-wrap: wrap; gap: 56px; }
.site-footer__col { display: flex; flex-direction: column; gap: 12px; }
.site-footer__heading { font-size: var(--fs-sm); color: var(--c-white); }
.site-footer__list { display: flex; flex-direction: column; gap: 10px; }
.site-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-block: 22px 32px; color: var(--c-footer-muted); }