/**
 * Base — reset, document, typography primitives.
 * Every value here resolves to a token from tokens.css.
 *
 * @package Chelure_Enterprise
 */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ce-nav-h) + 20px);
}

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

body {
	margin: 0;
	background: var(--ce-bg);
	color: var(--ce-text);
	font-family: var(--ce-font-body);
	font-size: var(--ce-fs-body);
	line-height: var(--ce-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	transition: background var(--ce-dur) var(--ce-ease), color var(--ce-dur) var(--ce-ease);
}

::selection {
	background: var(--ce-magenta);
	color: #fff;
}

/* --- Headings ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--ce-font-heading);
	color: var(--ce-heading);
	font-weight: var(--ce-fw-bold);
	line-height: var(--ce-lh-heading);
	margin: 0 0 .5em;
}

h1 { font-size: var(--ce-fs-h1); letter-spacing: var(--ce-ls-h1); line-height: var(--ce-lh-tight); }
h2 { font-size: var(--ce-fs-h2); letter-spacing: var(--ce-ls-h2); }
h3 { font-size: var(--ce-fs-h3); letter-spacing: -.5px; }
h4 { font-size: var(--ce-fs-h4); }
h5 { font-size: var(--ce-fs-lead); }
h6 { font-size: var(--ce-fs-body); }

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

/* --- Links --------------------------------------------------------------- */
a {
	color: var(--ce-accent);
	text-decoration: none;
	transition: color var(--ce-dur-fast) var(--ce-ease), opacity var(--ce-dur-fast) var(--ce-ease);
}

a:hover { opacity: .82; }

/* Visible focus for keyboard users. Never remove this. */
:focus-visible {
	outline: 2px solid var(--ce-magenta);
	outline-offset: 3px;
	border-radius: 4px;
}

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

/* --- Lists --------------------------------------------------------------- */
ul, ol { margin: 0 0 1.2em; padding-left: 1.2em; }

/* Browsers indent blockquotes by 40px by default, which pushed every
   testimonial off its own card. */
blockquote, figure { margin: 0; }

/* --- Forms --------------------------------------------------------------- */
input, textarea, select, button {
	font: inherit;
	color: inherit;
}

button { cursor: pointer; }

/* --- Utility ------------------------------------------------------------- */
.ce-eyebrow {
	display: inline-block;
	font-family: var(--ce-font-body);
	font-size: var(--ce-fs-xs);
	font-weight: var(--ce-fw-bold);
	letter-spacing: var(--ce-ls-eyebrow);
	text-transform: uppercase;
	color: var(--ce-accent);
	margin-bottom: 16px;
}

.ce-gradient-text {
	background: var(--ce-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

.ce-lead {
	font-size: var(--ce-fs-lead);
	color: var(--ce-muted);
	line-height: var(--ce-lh-loose);
}

.ce-muted { color: var(--ce-muted); }

/* Screen-reader-only text, WordPress convention. */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: var(--ce-bg);
	clip-path: none;
	color: var(--ce-heading);
	display: block;
	font-size: var(--ce-fs-sm);
	font-weight: var(--ce-fw-bold);
	height: auto;
	left: 20px;
	line-height: normal;
	padding: 14px 22px;
	text-decoration: none;
	top: 20px;
	width: auto;
	z-index: 100000;
	border-radius: var(--ce-radius-pill);
	border: 1px solid var(--ce-border-3);
}

/* Honeypot field — hidden from humans, visible to bots. Deliberately not
   display:none, since some bots skip those. */
.ce-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Scroll reveal -------------------------------------------------------
 *
 * The hidden state is scoped to .ce-js, which an inline script in <head> adds
 * before first paint. That ordering matters: if the hidden state applied
 * unconditionally, then any JS failure — a blocked script, a syntax error, an
 * ad blocker, a slow CDN — would leave every section below the hero at
 * opacity 0 and the site would look empty. Scoping it this way means no JS
 * simply equals no animation, which is the correct failure mode.
 * ---------------------------------------------------------------------- */
.ce-js [data-ce-reveal] {
	opacity: 0;
	transform: translateY(var(--ce-reveal-y));
	transition: opacity var(--ce-dur-slow) var(--ce-ease), transform var(--ce-dur-slow) var(--ce-ease);
	will-change: opacity, transform;
}

.ce-js [data-ce-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* Sections revealed on first paint skip the animation entirely, so anything
   already on screen never fades in under the visitor. */
.ce-js [data-ce-reveal].is-instant {
	transition: none;
}

/* Printing and reduced motion always show everything. */
@media print {
	.ce-js [data-ce-reveal] { opacity: 1 !important; transform: none !important; }
}