/* ==========================================================================
   Reset & base element styles, plus the shared page-layout helper
   classes (.container, .section, .eyebrow, .section-head) used on
   every page of the site.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
	scroll-behavior: smooth;
	/* The off-canvas mobile nav panel is position:fixed + transform (see
	   .primary-navigation in responsive/tablet.css). Transformed fixed
	   elements are measured against the viewport, not clipped by a
	   parent's overflow, so without this the panel — shifted fully off
	   to the right while "closed" — silently doubled the page's
	   scrollable width on every phone/tablet, letting a swipe/scroll
	   reveal blank space past the right edge. Clipping it here (not just
	   on body) is what actually stops that.
	   "clip" rather than "hidden": hidden turns html/body into a scroll
	   container, which silently breaks the sticky header (it scrolls away
	   with the page). clip cuts off the sideways overflow the same way but
	   keeps sticky working. "hidden" stays first as the fallback for old
	   browsers that don't know "clip". */
	overflow-x: hidden;
	overflow-x: clip;
}
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-bg);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-primary-dark);
	line-height: 1.25;
	margin: 0 0 0.6em;
	font-weight: 600;
}
p { margin: 0 0 1.2em; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 1rem; }
:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 2px; }
.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px; overflow: hidden;
}

/* Never let an image, video, iframe or table force horizontal scroll. */
img, video, iframe, table { max-width: 100%; }
table { display: block; overflow-x: auto; white-space: nowrap; }

.container {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}
.section { padding: 88px 0; }
.section--tight { padding: 56px 0; }
.section--alt { background: var(--color-bg-alt); }
.section--dark {
	background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary));
	color: #f3efe4;
}
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-secondary-dark);
	font-weight: 600;
	margin-bottom: 14px;
}
.eyebrow svg { width: 18px; height: 18px; }
.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-head.align-left { margin-left: 0; text-align: left; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.section-head p { color: var(--color-text-light); font-size: 1.05rem; }
.section--dark .section-head p { color: #e4dfd0; }