/* =============================================================================
   NP STUDY — DESIGN SYSTEM
   Base tokens, typography and reusable components for every page.
   Concept: "The Guided Journey" — navy trust, sunrise action, calm rhythm.
   All component classes are namespaced .nps-* so they never collide with Flatsome.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------------- */
:root {
	/* Color */
	--nps-navy: #0A2342;
	--nps-navy-700: #12345B;
	--nps-navy-900: #061627;
	--nps-sunrise: #FF7A2F;
	--nps-sunrise-600: #F26418;
	--nps-aqua: #12B3A8;
	--nps-peach: #FFF6EE;
	--nps-mist: #F3F6FB;
	--nps-slate: #46566F;
	--nps-slate-400: #7A879C;
	--nps-line: #E7ECF3;
	--nps-white: #FFFFFF;

	/* Typography */
	--nps-font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--nps-font-num: "Space Grotesk", ui-monospace, monospace;
	--nps-h1: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);
	--nps-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.375rem);
	--nps-h3: 1.25rem;
	--nps-lead: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
	--nps-body: 1.0625rem;
	--nps-eyebrow: 0.8125rem;

	/* Spacing & layout */
	--nps-section: clamp(3.5rem, 2rem + 6vw, 6rem);
	--nps-container: 1200px;
	--nps-gutter: clamp(1rem, 5vw, 2rem);
	--nps-gap: clamp(1rem, 0.6rem + 1.6vw, 2rem);

	/* Shape & depth (navy-tinted shadows read as premium) */
	--nps-r-sm: 10px;
	--nps-r-md: 16px;
	--nps-r-lg: 24px;
	--nps-r-pill: 999px;
	--nps-shadow-sm: 0 1px 3px rgba(10, 35, 66, .06), 0 1px 2px rgba(10, 35, 66, .04);
	--nps-shadow: 0 12px 32px rgba(10, 35, 66, .10);
	--nps-shadow-lg: 0 24px 60px rgba(10, 35, 66, .14);

	/* Motion */
	--nps-ease: cubic-bezier(.22, .61, .36, 1);
	--nps-dur: .5s;
}

/* ---------------------------------------------------------------------------
   2. GLOBAL BASE — typography lift applied site-wide
   --------------------------------------------------------------------------- */
/* Guard against any element causing a sideways scroll / white edge strips.
   `clip` (not hidden) keeps the sticky header working. */
html, body { overflow-x: clip; max-width: 100%; }

body {
	font-family: var(--nps-font);
	color: var(--nps-slate);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: -0.005em;
}

h1, h2, h3, h4, h5, h6,
.nps-h1, .nps-h2, .nps-h3 {
	font-family: var(--nps-font);
	color: var(--nps-navy);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

::selection { background: var(--nps-sunrise); color: #fff; }

/* Accessible focus ring for keyboard users */
a:focus-visible,
button:focus-visible,
.nps-btn:focus-visible {
	outline: 3px solid var(--nps-aqua);
	outline-offset: 2px;
	border-radius: var(--nps-r-sm);
}

/* ---------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   --------------------------------------------------------------------------- */
.nps-container {
	width: 100%;
	max-width: var(--nps-container);
	margin-inline: auto;
	padding-inline: var(--nps-gutter);
}

.nps-section { padding-block: var(--nps-section); }
.nps-section--mist  { background: var(--nps-mist); }
.nps-section--peach { background: var(--nps-peach); }
.nps-section--navy  { background: var(--nps-navy); color: #d9e2f0; }
.nps-section--navy h1, .nps-section--navy h2, .nps-section--navy h3 { color: #fff; }

.nps-grid {
	display: grid;
	gap: var(--nps-gap);
	grid-template-columns: repeat(var(--nps-cols, 3), minmax(0, 1fr));
}
@media (max-width: 900px) { .nps-grid { --nps-cols: 2; } }
@media (max-width: 600px) { .nps-grid { --nps-cols: 1; } }

/* Section heading block */
.nps-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.nps-head--center { margin-inline: auto; text-align: center; }
.nps-head .nps-h2 { font-size: var(--nps-h2); margin: .25em 0 .4em; }
.nps-head p { font-size: var(--nps-lead); color: var(--nps-slate); margin: 0; line-height: 1.6; }

/* ---------------------------------------------------------------------------
   4. TYPE HELPERS
   --------------------------------------------------------------------------- */
.nps-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-family: var(--nps-font-num);
	font-size: var(--nps-eyebrow);
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nps-sunrise-600);
}
.nps-eyebrow::before {
	content: "";
	width: 1.5rem; height: 2px;
	background: var(--nps-sunrise);
	border-radius: 2px;
}
.nps-h1 { font-size: var(--nps-h1); font-weight: 800; line-height: 1.05; }
.nps-lead { font-size: var(--nps-lead); color: var(--nps-slate); line-height: 1.6; }
.nps-num { font-family: var(--nps-font-num); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------------
   5. BUTTONS
   --------------------------------------------------------------------------- */
.nps-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	font-family: var(--nps-font);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	padding: .95em 1.7em;
	border-radius: var(--nps-r-pill);
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform .2s var(--nps-ease), background-color .2s, box-shadow .2s, color .2s;
	will-change: transform;
}
.nps-btn--primary { background: var(--nps-sunrise); color: #fff; box-shadow: 0 8px 20px rgba(255, 122, 47, .28); }
.nps-btn--primary:hover { background: var(--nps-sunrise-600); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255, 122, 47, .34); color: #fff; }
.nps-btn--ghost { background: transparent; color: var(--nps-navy); border-color: var(--nps-line); }
.nps-btn--ghost:hover { border-color: var(--nps-navy); transform: translateY(-2px); color: var(--nps-navy); }
.nps-btn--light { background: #fff; color: var(--nps-navy); }
.nps-btn--light:hover { transform: translateY(-2px); box-shadow: var(--nps-shadow); color: var(--nps-navy); }

/* ---------------------------------------------------------------------------
   6. CARDS
   --------------------------------------------------------------------------- */
.nps-card {
	background: #fff;
	border: 1px solid var(--nps-line);
	border-radius: var(--nps-r-lg);
	padding: clamp(1.5rem, 3vw, 2rem);
	box-shadow: var(--nps-shadow-sm);
	transition: transform .28s var(--nps-ease), box-shadow .28s var(--nps-ease), border-color .28s;
}
.nps-card--lift:hover {
	transform: translateY(-6px);
	box-shadow: var(--nps-shadow);
	border-color: transparent;
}
.nps-card__icon {
	display: grid; place-items: center;
	width: 3.25rem; height: 3.25rem;
	border-radius: var(--nps-r-md);
	background: var(--nps-peach);
	color: var(--nps-sunrise-600);
	margin-bottom: 1.1rem;
	font-size: 1.4rem;
}
.nps-card h3 { font-size: var(--nps-h3); margin: 0 0 .5rem; }
.nps-card p { margin: 0; color: var(--nps-slate); line-height: 1.65; }

/* Pill badge */
.nps-badge {
	display: inline-flex; align-items: center; gap: .4em;
	padding: .4em .9em;
	border-radius: var(--nps-r-pill);
	background: rgba(18, 179, 168, .12);
	color: var(--nps-aqua);
	font-size: .8125rem; font-weight: 600;
}

/* ---------------------------------------------------------------------------
   7. SCROLL REVEAL (progressive; visible by default if JS/motion off)
   --------------------------------------------------------------------------- */
.nps-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--nps-dur) var(--nps-ease), transform var(--nps-dur) var(--nps-ease); will-change: opacity, transform; }
.nps-reveal.is-in { opacity: 1; transform: none; }
/* Optional direction — add data-reveal="up|left|right|zoom" to any .nps-reveal */
.nps-reveal[data-reveal="up"]    { transform: translateY(24px); }
.nps-reveal[data-reveal="left"]  { transform: translateX(-24px); }
.nps-reveal[data-reveal="right"] { transform: translateX(24px); }
.nps-reveal[data-reveal="zoom"]  { transform: scale(.94); }
.nps-reveal[data-delay="1"] { transition-delay: .08s; }
.nps-reveal[data-delay="2"] { transition-delay: .16s; }
.nps-reveal[data-delay="3"] { transition-delay: .24s; }
/* Never hide content inside the UX Builder canvas while editing.
   The iframe body class is `ux-builder-iframe` (Flatsome sets it in
   builder/core/server/actions/iframe.php) — NOT `ux-builder`, which appears only
   as an id on the outer editor document. The two `.ux-builder` selectors below
   were dead rules; `.ux-builder-iframe` is the one that matches. Without it every
   server-rendered `.nps-reveal` would sit at opacity:0 forever, because nps.js
   only runs its reveal on DOMContentLoaded and never sees builder-injected nodes. */
.ux-builder-iframe .nps-reveal,
.ux-builder .nps-reveal,
html.ux-builder .nps-reveal { opacity: 1 !important; transform: none !important; }

/* ---------------------------------------------------------------------------
   8. REDUCED MOTION — respect the user's OS setting
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.nps-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
	.nps-btn, .nps-card { transition: none !important; }
	* { scroll-behavior: auto !important; }
}