/* ==========================================================================
   Aluna Schrift design layer (as-design.css) — 2026-11-09
   Visual only. Never styles forms, inputs, checkout, chat or quote flows
   (owner's rule: "don't change functionalities, forms").
   Loaded last by onum-child/functions.php (preview with ?as_design=1).
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
	/* colour (from the live brand) */
	--as-ink: #14151a;
	--as-ink-2: #3b3f4a;
	--as-ink-3: #5b6070;
	--as-blue: #1d3fbf;
	--as-indigo: #4a5fd6;
	--as-orange: #f25f2a;
	--as-orange-2: #ff6a2b;
	--as-line: rgba(20, 21, 26, .08);
	--as-focus: #1d3fbf;

	/* gradients: two stops, low saturation drift */
	--as-grad-brand: linear-gradient(135deg, #1d3fbf 0%, #3f5ae0 55%, #4a5fd6 100%);
	--as-grad-cta: linear-gradient(180deg, #ff6a2b 0%, #f25f2a 100%);
	--as-grad-wash: linear-gradient(180deg, #f6f8ff 0%, #ffffff 100%);

	/* type: one family pair, fluid scale (360 → 1440 px) */
	--as-font-display: "Red Hat Display", "Helvetica Neue", Arial, sans-serif;
	--as-font-text: "Red Hat Text", "Helvetica Neue", Arial, sans-serif;
	--as-fs-hero: clamp(32px, 21.6px + 2.9vw, 56px);      /* 32 → 56 */
	--as-fs-h2: clamp(26px, 19.2px + 1.9vw, 44px);    /* 26 → 44 */
	--as-fs-h3: clamp(18px, 16.32px + .45vw, 22px);  /* 18 → 22 */
	--as-fs-lead: clamp(17px, 16px + .3vw, 20px);    /* 17 → 20 */
	--as-fs-body: 16px;                                       /* 16 */
	--as-fs-small: 14px;                                   /* 14 */
	--as-fs-micro: 12px;                                    /* 12 */
	--as-lh-tight: 1.1;
	--as-lh-head: 1.2;
	--as-lh-body: 1.65;
	--as-track-display: -.022em;
	--as-track-h3: -.01em;
	--as-track-eyebrow: .12em;

	/* spacing: 4 px base */
	--as-s1: 4px; --as-s2: 8px; --as-s3: 12px; --as-s4: 16px; --as-s5: 24px;
	--as-s6: 32px; --as-s7: 48px; --as-s8: 64px; --as-s9: 96px;

	/* shape */
	--as-r-sm: 8px; --as-r-md: 14px; --as-r-lg: 20px; --as-r-pill: 999px;
	--as-sh-1: 0 1px 2px rgba(16, 24, 64, .06), 0 1px 1px rgba(16, 24, 64, .04);
	--as-sh-2: 0 10px 30px -14px rgba(16, 24, 64, .22), 0 2px 6px -2px rgba(16, 24, 64, .06);
	--as-sh-3: 0 22px 48px -20px rgba(16, 24, 64, .30), 0 4px 10px -4px rgba(16, 24, 64, .08);

	/* motion */
	--as-ease-out: cubic-bezier(.22, 1, .36, 1);
	--as-ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--as-ease-spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
	--as-t-micro: 160ms;
	--as-t-comp: 280ms;
	--as-t-reveal: 560ms;
}

/* ---------- 2. Base rendering ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
:target, [id] { scroll-margin-top: 96px; }
::selection { background: rgba(74, 95, 214, .18); color: inherit; }
img { height: auto; }

/* Visible, consistent keyboard focus everywhere (mouse clicks show nothing) */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
	outline: 2px solid var(--as-focus);
	outline-offset: 3px;
	border-radius: 6px;
}
.site-footer a:focus-visible, .page-header a:focus-visible, .as-offers a:focus-visible { outline-color: #ffffff; }

/* ---------- 3. Typography hierarchy ---------- */
/* Page hero titles: the visual H1 of every inner page */
.ct-title, .ox-title {
	font-family: var(--as-font-display);
	font-size: var(--as-fs-hero) !important;
	line-height: var(--as-lh-tight) !important;
	letter-spacing: var(--as-track-display) !important;
	font-weight: 800 !important;
	text-wrap: balance;
}
/* Section headings */
.ox-head h2, .aomx-title, .asx-head h1, .adx-copy h2, .ox-wrap > h2, .co-head h2 {
	font-family: var(--as-font-display);
	font-size: var(--as-fs-h2) !important;
	line-height: var(--as-lh-head) !important;
	letter-spacing: var(--as-track-display) !important;
	font-weight: 800 !important;
	text-wrap: balance;
}
/* Card / item headings */
.asx-body h3, .co-pillar h3, .co-value h3, .aqf-col h3 {
	letter-spacing: var(--as-track-h3);
	line-height: 1.3;
	text-wrap: balance;
}
/* Leads: one size */
.ct-lead, .ox-hero-lead, .aomx-lead, .adx-lead {
	font-size: var(--as-fs-lead) !important;
	line-height: 1.6 !important;
	text-wrap: pretty;
}
/* Running text inside Elementor text blocks: one size, one rhythm */
.elementor-widget-text-editor p {
	font-size: var(--as-fs-body);
	line-height: var(--as-lh-body);
	text-wrap: pretty;
}
p { text-wrap: pretty; }

/* Banner title band on inner pages (breadcrumb strip) */
.page-header .page-title {
	font-family: var(--as-font-display);
	font-size: clamp(24px, 19.2px + 1.2vw, 36px) !important;
	line-height: var(--as-lh-head) !important;
	letter-spacing: var(--as-track-display);
	text-wrap: balance;
}

/* ---------- 4. Buttons (links styled as buttons only — form buttons untouched) ---------- */
a.octf-btn, a.ox-btn, a.elementor-button, a.aqf-btn, a.as-offer-btn {
	transition:
		transform var(--as-t-micro) var(--as-ease-out),
		box-shadow var(--as-t-comp) var(--as-ease-out),
		background-color var(--as-t-micro) linear,
		color var(--as-t-micro) linear,
		border-color var(--as-t-micro) linear !important;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	will-change: auto;
}
@media (hover: hover) {
	a.octf-btn:hover, a.ox-btn:hover, a.elementor-button:hover, a.aqf-btn:hover {
		transform: translateY(-1px);
	}
}
a.octf-btn:active, a.ox-btn:active, a.elementor-button:active, a.aqf-btn:active, a.as-offer-btn:active {
	transform: translateY(0) scale(.97);
	transition-duration: 80ms !important;
}
/* Softer, tighter primary shadow (was a 12 px offset drop) */
a.octf-btn { box-shadow: 0 8px 20px -10px rgba(242, 95, 42, .55) !important; }
@media (hover: hover) {
	a.octf-btn:hover { box-shadow: 0 12px 26px -12px rgba(242, 95, 42, .6) !important; }
}
/* Arrow nudge on hover where buttons carry an icon */
a.ox-btn svg, a.octf-btn svg, a.aqf-btn svg { transition: transform var(--as-t-micro) var(--as-ease-out); }
@media (hover: hover) {
	a.ox-btn:hover svg, a.octf-btn:hover svg, a.aqf-btn:hover svg { transform: translateX(2px); }
}

/* ---------- 5. Navigation ---------- */
.main-navigation > ul > li > a, .main-navigation .menu > li > a {
	transition: color var(--as-t-micro) linear, background-color var(--as-t-micro) linear !important;
}
/* Desktop dropdowns: fade + lift instead of a hard cut */
@media (min-width: 1025px) {
	.main-navigation ul ul, .main-navigation .sub-menu {
		transition: opacity var(--as-t-comp) var(--as-ease-out), transform var(--as-t-comp) var(--as-ease-out), visibility 0s linear var(--as-t-comp) !important;
		border-radius: var(--as-r-md);
		box-shadow: var(--as-sh-3) !important;
		border: 1px solid var(--as-line);
	}
	.main-navigation li:hover > ul, .main-navigation li:focus-within > ul,
	.main-navigation li:hover > .sub-menu, .main-navigation li:focus-within > .sub-menu {
		transition: opacity var(--as-t-comp) var(--as-ease-out), transform var(--as-t-comp) var(--as-ease-out), visibility 0s !important;
	}
}
/* Mobile off-canvas menu: smoother slide */
.mmenu-wrapper, .mmenu-inner { transition-timing-function: var(--as-ease-out) !important; }

/* ---------- 6. Cards ---------- */
.asx-card, .co-pillar, .co-value, .aomx-p, .ox-card {
	transition: transform var(--as-t-comp) var(--as-ease-out), box-shadow var(--as-t-comp) var(--as-ease-out), border-color var(--as-t-comp) linear;
}
@media (hover: hover) {
	.asx-card:hover, .co-pillar:hover, .co-value:hover, .ox-card:hover { transform: translateY(-3px); }
}

/* ---------- 7. Scroll reveals ---------- */
/* Existing .rv reveals ran 0.9 s; tightened to the section tier and given a
   no blur (too heavy on long pages). States (.rv / .rv.in) are unchanged. */
.rv, .asx-rv, .aomx-rv {
	transition-duration: var(--as-t-reveal), var(--as-t-reveal), var(--as-t-reveal) !important;
	transition-timing-function: var(--as-ease-out) !important;
}
.rv.d1 { transition-delay: 60ms !important; }
.rv.d2 { transition-delay: 120ms !important; }
.rv.d3 { transition-delay: 180ms !important; }

/* Long decorative loops pause while their section is off screen (as-design.js) */
.as-off, .as-off * { animation-play-state: paused !important; }

/* ---------- 8. Page transitions (supported browsers only) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: as-vt-out 180ms var(--as-ease-in-out) both; }
::view-transition-new(root) { animation: as-vt-in 320ms var(--as-ease-out) both; }
header.site-header, #site-header, .site-header { view-transition-name: as-header; }
::view-transition-group(as-header) { animation-duration: 0s; }
@keyframes as-vt-out { to { opacity: 0; } }
@keyframes as-vt-in { from { opacity: 0; transform: translateY(8px); } }


/* ---------- 10. Responsive refinements ---------- */
@media (max-width: 767px) {
	.ox-head, .asx-head, .aomx-head { margin-bottom: var(--as-s5); }
	.ct-title, .ox-title { letter-spacing: -.018em !important; }
}
/* Horizontal rows of chips / logos: snap gently when they scroll sideways */
.ct-chips, .aqf-pay-row { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.ct-chips > *, .aqf-pay-row > * { scroll-snap-align: start; }

/* ---------- 11. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		transition-delay: 0s !important;
	}
	.rv, .asx-rv, .aomx-rv { opacity: 1 !important; transform: none !important; filter: none !important; }
	@view-transition { navigation: none; }
}

/* ---------- 12. Smoothness (2026-11-09) ---------- */
/* The big animated SVG illustrations (hero .aoi, omics .aomx-viz, data .adx-stage, cards .asx-vis)
   repaint the whole drawing every frame. Keep their repaints inside their own box ... */
.aoi, .aomx-viz, .adx-stage, .asx-vis, .adx-banner { contain: layout paint; }
.aoi-svg, .aomx-svg, .adx-svg { will-change: transform; }
/* ... and pause them while the visitor scrolls, so scrolling stays at full frame rate. */
html.as-scrolling .aoi *, html.as-scrolling .aomx-viz *, html.as-scrolling .aomx-stage *,
html.as-scrolling .adx-stage *, html.as-scrolling .adx-banner *, html.as-scrolling .asx-vis *,
html.as-scrolling .asx-bg * { animation-play-state: paused !important; }
/* Skeleton: once the page is ready its shimmer stops completely */
html.as-ready #as-skel, html.as-ready #as-skel * { animation: none !important; }