/* =========================================================================
   Anchor v2 — Base styles
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--surface);
	overflow-x: hidden;
}

/* Hello Elementor parent theme caps .site-main, .site-header and .site-footer
   at 1140px on screens ≥1200px (theme.css). That crops every edge-to-edge
   section the design uses (hero, page-head, footer, hero-controls). Our
   content already uses an inner .container with its own max-width, so the
   outer wrappers must be free to span the viewport. */
body .site-main,
body:not([class*="elementor-page-"]) .site-main,
body .site-header:not(.dynamic-header),
body .site-footer:not(.dynamic-footer),
body .site-footer .footer-inner,
body .site-header .header-inner,
body .page-header .entry-title {
	max-width: none !important;
	width: 100% !important;
	margin-inline: 0 !important;
}
body .site-main { padding: 0 !important; }


/* ============================================================
   Neutralize Hello Elementor's pink (#c36) defaults
   The parent theme's reset.css uses #cc3366 as the global link color
   AND as button :hover background. Our components define their own
   colors — wipe the pink so nothing in our chrome inherits it.
   ============================================================ */

a,
a:hover,
a:active,
a:focus {
	color: inherit;
}

/* Bare <button>, <input type="button|submit"> defaults — keep them
   transparent and color-inherited. Our own .btn / .site-header__cta /
   etc. paint their own backgrounds. */
button,
[type="button"],
[type="submit"],
[type="reset"] {
	background-color: transparent;
	border: 0;
	color: inherit;
}
button:hover,
button:focus,
[type="button"]:hover,
[type="button"]:focus,
[type="submit"]:hover,
[type="submit"]:focus,
[type="reset"]:hover,
[type="reset"]:focus {
	background-color: transparent;
	color: inherit;
	text-decoration: none;
}

img, video, svg {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--dur-base) var(--ease);
}

button {
	font-family: inherit;
	cursor: pointer;
	border: none;
	background: none;
	color: inherit;
	padding: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: var(--lh-tight);
	color: var(--brand-primary);
	margin: 0 0 0.4em;
}

p { margin: 0 0 1em; }

.container {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}

.section { padding-block: clamp(48px, 7vw, 80px); }

/* --- Buttons (match live site: 17px Jost 500, padding 18px 30px, radius 10px) --- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 28px;
	min-height: 44px;
	border-radius: 10px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: var(--fs-button);
	line-height: 1;
	white-space: nowrap;
	border: 2px solid transparent;
	cursor: pointer;
	transition:
		background-color var(--dur-base) var(--ease),
		color var(--dur-base) var(--ease),
		border-color var(--dur-base) var(--ease);
	touch-action: manipulation;
}

.btn:focus-visible {
	outline: 3px solid var(--brand-secondary);
	outline-offset: 2px;
}

.btn--primary {
	background: var(--brand-secondary);
	color: #fff;
}

.btn--primary:hover {
	background: var(--brand-primary);
	color: #fff;
}

.btn--outline {
	background: transparent;
	color: var(--brand-primary);
	border-color: var(--brand-primary);
}

.btn--outline:hover {
	background: var(--brand-primary);
	color: #fff;
}

.btn--outline-light {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.6);
}

.btn--outline-light:hover {
	background: #fff;
	color: var(--brand-primary);
	border-color: #fff;
}

/* --- Eyebrows / labels --- */

.eyebrow {
	display: inline-block;
	font-size: var(--fs-eyebrow);
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--brand-secondary);
}

.sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* =========================================================================
   HEAD-SAFE IMAGE CROPPING
   Many photo containers crop to fit (object-fit: cover). The browser default
   `object-position: center` puts the vertical center of the photo at the
   middle of the box, which on portrait subjects often clips heads at the
   top. Override the default for image containers across the site so faces
   stay visible. Specific exceptions (founder full-body, page-head bg with
   its own 30% override) keep their existing rules thanks to specificity. */
.tcard__img,
.svc-tile img,
.svc-hub__media img,
.gcard__media img,
.team-feature__img,
.vstatement__photo img,
.believe__media img,
.ft__media img,
.tquote__photo img,
.jennie__photo img,
.founder-v2__bg img,
.metrics__bg img {
	object-position: center 22%;
}