/*!
 * BrandForge Webflow Foundation
 *
 * Award-winning, cinematic design layer for the BrandForge marketing site.
 * Replaces brandforge-app-restyle.css as the last (winning) layer in the
 * cascade. Establishes the token system, oversized display type scale,
 * glass components, gradient mesh + grain + glow utilities, and the
 * scroll-reveal base that every homepage section builds on.
 *
 * Design thesis: Linear's darkness, Raycast's glass, Vercel's type
 * confidence, tied together with the BrandForge cyan (#7CF1F8), used
 * with restraint so it always reads as the one accent that matters.
 *
 * Rules of the house:
 *   - No em dashes or en dashes anywhere.
 *   - No dark mode. Light canvas, dark chrome (header/footer/full-bleed).
 *   - Cyan and teal only. No purple, no blue.
 *   - Self-hosted Rubik only. No external fonts.
 *   - Un-layered so it beats Tailwind @layer utilities without !important,
 *     and uses !important only to beat overrides.css rules that already
 *     carry !important.
 *   - Animation contracts preserved: data-ns-animate reveals, .header-one
 *     scroll header (.scroll-header), .footer-divider draw, and the
 *     .brandforge-anim-ready failsafe handshake all still work.
 *
 * Cascade position (see inc/enqueue.php):
 *   1. fonts.css
 *   2. main.css                       (Tailwind, @layer)
 *   3. brandforge-design-system.css   (bf- components)
 *   4. overrides.css                  (theme.json neutralisation, !important)
 *   5. brandforge-webflow.css         (this file, wins)
 *
 * @package BrandForge
 * @since 0.5.0
 */

/* ============================================================
 * 1. Token system
 * ============================================================ */
:root {
	/* --- Surfaces (light canvas) --- */
	--bf-white:          #FFFFFF;
	--bf-paper:          #FFFFFF;
	--bf-paper-subtle:   #FAFBFC;
	--bf-paper-mist:     #F6FDFE;   /* faint cyan wash */
	--bf-cyan-mist:      #F0FEFF;

	/* --- Ink (text on light) --- */
	--bf-ink:            #111111;
	--bf-ink-2:          #3A3D42;
	--bf-ink-muted:      #6B7075;
	--bf-ink-faint:      #8C8C8C;

	/* --- Cyan accent ramp (the one accent that matters) --- */
	--bf-cyan:           #7CF1F8;
	--bf-cyan-hover:     #5DE8F0;
	--bf-cyan-soft:      #AAF5FF;
	--bf-cyan-deep:      #0D9BA3;   /* accessible cyan for text on white */

	/* --- Dark chrome (header pill, footer, full-bleed sections) --- */
	--bf-dark:           #0A0B0D;   /* near black, the cinematic base */
	--bf-dark-2:         #111318;
	--bf-dark-3:         #16181F;
	--bf-dark-elev:      #1C1F27;   /* elevated dark card */

	/* --- Text on dark --- */
	--bf-on-dark:        rgba(255, 255, 255, 0.94);
	--bf-on-dark-2:      rgba(255, 255, 255, 0.62);
	--bf-on-dark-muted:  rgba(255, 255, 255, 0.42);

	/* --- Borders + hairlines --- */
	--bf-border:         #E5E7EB;
	--bf-border-soft:    #F0F1F3;
	--bf-border-dark:    rgba(255, 255, 255, 0.08);
	--bf-border-dark-2:  rgba(255, 255, 255, 0.14);

	/* --- Glass --- */
	--bf-glass-light:    rgba(255, 255, 255, 0.72);
	--bf-glass-dark:     rgba(16, 18, 24, 0.62);
	--bf-glass-blur:     blur(22px) saturate(180%);

	/* --- Radii --- */
	--bf-r-sm:    10px;
	--bf-r-md:    14px;
	--bf-r-lg:    20px;
	--bf-r-xl:    28px;
	--bf-r-2xl:   36px;
	--bf-r-pill:  9999px;

	/* --- Shadows (soft, layered depth) --- */
	--bf-sh-sm:   0 1px 3px rgba(10, 11, 13, 0.05);
	--bf-sh-md:   0 6px 24px rgba(10, 11, 13, 0.07);
	--bf-sh-lg:   0 18px 48px rgba(10, 11, 13, 0.10);
	--bf-sh-xl:   0 32px 80px rgba(10, 11, 13, 0.16);

	/* --- Cyan glow (the halo behind key elements) --- */
	--bf-glow-sm:  0 0 24px rgba(124, 241, 248, 0.28);
	--bf-glow-md:  0 0 48px rgba(124, 241, 248, 0.32);
	--bf-glow-lg:  0 0 90px rgba(124, 241, 248, 0.30);

	/* --- Type --- */
	--bf-font:     "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Display scale (fluid, clamps between mobile and 1400px+ desktop). */
	--bf-fs-display-1: clamp(3rem, 1.2rem + 7.5vw, 7.5rem);    /* 48 -> 120 */
	--bf-fs-display-2: clamp(2.6rem, 1.3rem + 5.4vw, 5.5rem);  /* ~42 -> 88 */
	--bf-fs-display-3: clamp(2.2rem, 1.4rem + 3.4vw, 4rem);    /* ~35 -> 64 */
	--bf-fs-h2:        clamp(1.9rem, 1.3rem + 2.6vw, 3.25rem); /* ~30 -> 52 */
	--bf-fs-h3:        clamp(1.4rem, 1.1rem + 1.3vw, 2rem);    /* ~22 -> 32 */
	--bf-fs-lead:      clamp(1.075rem, 1rem + 0.35vw, 1.3rem); /* ~17 -> 21 */
	--bf-fs-body:      1rem;
	--bf-fs-eyebrow:   0.8125rem;

	/* Tracking (tight on display, open on eyebrows). */
	--bf-tr-display:  -0.035em;
	--bf-tr-tight:    -0.02em;
	--bf-tr-eyebrow:   0.02em;

	/* Line heights. */
	--bf-lh-display:  0.98;
	--bf-lh-heading:  1.08;
	--bf-lh-body:     1.65;

	/* --- Rhythm (section spacing) --- */
	--bf-section-y:      clamp(5rem, 3rem + 8vw, 11.25rem);  /* 80 -> 180 */
	--bf-section-y-sm:   clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
	--bf-content-max:    1400px;
	--bf-measure:        68ch;

	/* --- Motion --- */
	--bf-ease:       cubic-bezier(0.22, 1, 0.36, 1);
	--bf-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
	--bf-dur-fast:   180ms;
	--bf-dur:        300ms;
	--bf-dur-slow:   600ms;
}

/* ============================================================
 * 2. Global canvas + typography base
 * ============================================================ */
body {
	font-family: var(--bf-font) !important;
	background-color: var(--bf-paper) !important;
	color: var(--bf-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

body.bg-background-2 {
	background-color: var(--bf-paper) !important;
}

/* Selection carries the brand. */
::selection {
	background-color: var(--bf-cyan-soft);
	color: var(--bf-ink);
}

/* Display type helpers (opt-in, used by section partials). */
.bf-display,
.bf-display-1,
.bf-display-2,
.bf-display-3 {
	font-family: var(--bf-font);
	font-weight: 600;
	letter-spacing: var(--bf-tr-display);
	line-height: var(--bf-lh-display);
	text-wrap: balance;
}

.bf-display-1 { font-size: var(--bf-fs-display-1); }
.bf-display-2 { font-size: var(--bf-fs-display-2); }
.bf-display-3 { font-size: var(--bf-fs-display-3); }

.bf-h2 {
	font-family: var(--bf-font);
	font-weight: 600;
	font-size: var(--bf-fs-h2);
	letter-spacing: var(--bf-tr-tight);
	line-height: var(--bf-lh-heading);
	text-wrap: balance;
}

.bf-h3 {
	font-family: var(--bf-font);
	font-weight: 500;
	font-size: var(--bf-fs-h3);
	letter-spacing: var(--bf-tr-tight);
	line-height: 1.2;
}

.bf-lead {
	font-size: var(--bf-fs-lead);
	line-height: 1.55;
	font-weight: 300;
	color: var(--bf-ink-muted);
	max-width: var(--bf-measure);
}

.bf-body {
	font-size: var(--bf-fs-body);
	line-height: var(--bf-lh-body);
	font-weight: 400;
	color: var(--bf-ink-2);
}

/* Subtle white-to-cyan text gradient for full-bleed dark display type. */
.bf-text-gradient {
	background: linear-gradient(180deg, #FFFFFF 40%, var(--bf-cyan-soft) 130%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Cyan text that stays readable on white (uses the deep cyan). */
.bf-text-cyan {
	color: var(--bf-cyan-deep);
}

/* ============================================================
 * 3. Layout primitives
 * ============================================================ */
.bf-container {
	width: 100%;
	max-width: var(--bf-content-max);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
}

.bf-section {
	position: relative;
	padding-block: var(--bf-section-y);
}

.bf-section--sm {
	padding-block: var(--bf-section-y-sm);
}

/* Full-bleed dark section base. */
.bf-section--dark {
	background-color: var(--bf-dark);
	color: var(--bf-on-dark);
	overflow: hidden;
	isolation: isolate;
}

.bf-section--dark .bf-lead {
	color: var(--bf-on-dark-2);
}

/* ============================================================
 * 4. Eyebrow pill (shared section device)
 * ============================================================ */
.bf-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.875rem;
	border-radius: var(--bf-r-pill);
	font-size: var(--bf-fs-eyebrow);
	font-weight: 500;
	letter-spacing: var(--bf-tr-eyebrow);
	line-height: 1;
	color: var(--bf-cyan-deep);
	background-color: var(--bf-cyan-mist);
	border: 1px solid var(--bf-cyan-soft);
}

.bf-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--bf-cyan);
	box-shadow: var(--bf-glow-sm);
}

/* On dark surfaces. */
.bf-section--dark .bf-eyebrow,
.bf-eyebrow--on-dark {
	color: var(--bf-cyan);
	background-color: rgba(124, 241, 248, 0.10);
	border-color: rgba(124, 241, 248, 0.22);
}

/* ============================================================
 * 5. Glass card component
 *    Semi-transparent, backdrop-blur, subtle border, glow on hover.
 * ============================================================ */
.bf-glass-card {
	position: relative;
	background: var(--bf-glass-light);
	-webkit-backdrop-filter: var(--bf-glass-blur);
	backdrop-filter: var(--bf-glass-blur);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: var(--bf-r-lg);
	box-shadow: var(--bf-sh-md);
	transition: transform var(--bf-dur) var(--bf-ease),
	            box-shadow var(--bf-dur) var(--bf-ease),
	            border-color var(--bf-dur) var(--bf-ease);
}

.bf-glass-card:hover {
	transform: translateY(-4px);
	border-color: var(--bf-cyan-soft);
	box-shadow: var(--bf-sh-lg), 0 0 0 1px rgba(124, 241, 248, 0.18);
}

/* Dark glass, for full-bleed sections. */
.bf-glass-card--dark {
	background: var(--bf-glass-dark);
	border: 1px solid var(--bf-border-dark-2);
	color: var(--bf-on-dark);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.bf-glass-card--dark:hover {
	border-color: rgba(124, 241, 248, 0.4);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), var(--bf-glow-md);
}

/* Solid white card variant. */
.bf-card {
	background: var(--bf-paper);
	border: 1px solid var(--bf-border);
	border-radius: var(--bf-r-lg);
	box-shadow: var(--bf-sh-sm);
	transition: transform var(--bf-dur) var(--bf-ease),
	            box-shadow var(--bf-dur) var(--bf-ease),
	            border-color var(--bf-dur) var(--bf-ease);
}

.bf-card:hover {
	transform: translateY(-3px);
	border-color: var(--bf-cyan-soft);
	box-shadow: var(--bf-sh-md);
}

/* ============================================================
 * 6. Background treatments (mesh, grain, dot grid)
 * ============================================================ */

/* Gradient mesh: soft cyan orbs on a near-black base. Attach to a
   dark section; place content above with position/z-index. */
.bf-mesh {
	position: relative;
	isolation: isolate;
}

.bf-mesh::before {
	content: "";
	position: absolute;
	inset: -20%;
	z-index: -2;
	background:
		radial-gradient(38% 44% at 18% 22%, rgba(124, 241, 248, 0.16), transparent 70%),
		radial-gradient(34% 40% at 82% 30%, rgba(93, 232, 240, 0.12), transparent 72%),
		radial-gradient(50% 55% at 50% 96%, rgba(124, 241, 248, 0.10), transparent 70%);
	filter: blur(8px);
	pointer-events: none;
}

/* Standalone floating orb (decorative, place inside a positioned parent). */
.bf-orb {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: -1;
	background: radial-gradient(circle at 50% 50%, rgba(124, 241, 248, 0.32), rgba(124, 241, 248, 0) 68%);
	filter: blur(24px);
	will-change: transform;
}

/* Grain overlay: very subtle noise for dark sections (~6% opacity). */
.bf-grain::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.06;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 180px 180px;
}

/* Faint dot grid for light sections. */
.bf-dotgrid {
	position: relative;
}

.bf-dotgrid::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient(circle, rgba(17, 17, 17, 0.05) 1px, transparent 1px);
	background-size: 30px 30px;
	-webkit-mask-image: radial-gradient(ellipse 72% 62% at 50% 42%, black 18%, transparent 72%);
	mask-image: radial-gradient(ellipse 72% 62% at 50% 42%, black 18%, transparent 72%);
}

/* Cyan glow utility (for buttons, prompt box, key cards). */
.bf-glow      { box-shadow: var(--bf-glow-md); }
.bf-glow-lg   { box-shadow: var(--bf-glow-lg); }

/* ============================================================
 * 7. Scroll reveal base
 *
 * Works alongside the existing GSAP data-ns-animate system. main.js adds
 * .brandforge-anim-ready to <html> the moment its reveal init runs; until
 * then (or when JS fails) the header.php failsafe forces opacity:1. These
 * .bf-reveal rules are a CSS-only progressive layer for NEW markup that
 * opts in with the .bf-reveal class and flips to .is-visible via
 * IntersectionObserver (added in a later session) or GSAP.
 *
 * Critical: reveals only hide when JS is confirmed present AND GSAP has
 * signalled ready, so no-JS users always see content.
 * ============================================================ */
.bf-reveal {
	opacity: 1;
	transform: none;
}

html.brandforge-anim-ready .bf-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity var(--bf-dur-slow) var(--bf-ease-out),
	            transform var(--bf-dur-slow) var(--bf-ease-out);
	will-change: opacity, transform;
}

html.brandforge-anim-ready .bf-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Stagger children: set --bf-i on each child for an incremental delay. */
html.brandforge-anim-ready .bf-reveal-stagger > * {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity var(--bf-dur-slow) var(--bf-ease-out),
	            transform var(--bf-dur-slow) var(--bf-ease-out);
	transition-delay: calc(var(--bf-i, 0) * 70ms);
}

html.brandforge-anim-ready .bf-reveal-stagger.is-visible > * {
	opacity: 1;
	transform: none;
}

/* ============================================================
 * 8. Button system
 *
 * Keeps the existing .btn / .btn-primary / .btn-secondary contract and the
 * critical child-inherit fix (button <span> children would otherwise pick
 * up white text from the .bg-secondary dark-surface rule in overrides.css).
 * ============================================================ */
.btn {
	font-family: var(--bf-font) !important;
	font-weight: 500 !important;
	letter-spacing: var(--bf-tr-tight);
	transition: transform var(--bf-dur-fast) var(--bf-ease),
	            background-color var(--bf-dur-fast) var(--bf-ease),
	            border-color var(--bf-dur-fast) var(--bf-ease),
	            box-shadow var(--bf-dur) var(--bf-ease) !important;
}

/* Force button children to inherit the button's own color. */
.btn > *,
.btn span,
.btn:hover > *,
.btn:hover span {
	color: inherit !important;
}

.btn-md,
.btn-lg {
	border-radius: var(--bf-r-pill) !important;
}

/* Primary: cyan fill, dark text, lift + glow on hover. */
.btn-primary,
a.btn-primary {
	background-color: var(--bf-cyan) !important;
	border-color: var(--bf-cyan) !important;
	color: var(--bf-ink) !important;
}

.btn-primary:hover,
a.btn-primary:hover {
	background-color: var(--bf-cyan-hover) !important;
	border-color: var(--bf-cyan-hover) !important;
	color: var(--bf-ink) !important;
	transform: translateY(-1px);
	box-shadow: var(--bf-glow-sm);
}

/* Secondary: dark fill, white text, hover to cyan. */
.btn-secondary,
a.btn-secondary {
	background-color: var(--bf-ink) !important;
	border-color: var(--bf-ink) !important;
	color: #FFFFFF !important;
}

.btn-secondary:hover,
a.btn-secondary:hover {
	background-color: var(--bf-cyan) !important;
	border-color: var(--bf-cyan) !important;
	color: var(--bf-ink) !important;
	transform: translateY(-1px);
	box-shadow: var(--bf-glow-sm);
}

/* Hover utility overrides (win against base :hover). */
[class*="hover\:btn-primary"]:hover,
.hover\:btn-primary:hover {
	background-color: var(--bf-cyan) !important;
	border-color: var(--bf-cyan) !important;
	color: var(--bf-ink) !important;
}

[class*="hover\:btn-secondary"]:hover,
.hover\:btn-secondary:hover {
	background-color: var(--bf-ink) !important;
	border-color: var(--bf-ink) !important;
	color: #FFFFFF !important;
}

[class*="hover\:btn-white"]:hover,
.hover\:btn-white:hover {
	background-color: #FFFFFF !important;
	border-color: #FFFFFF !important;
	color: var(--bf-ink) !important;
}

/* ============================================================
 * 9. Header - elevated frosted glass floating pill
 * ============================================================ */
.header-one {
	background-color: var(--bf-glass-light) !important;
	-webkit-backdrop-filter: blur(24px) saturate(190%);
	backdrop-filter: blur(24px) saturate(190%);
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.6) inset,
		var(--bf-sh-md);
	transition: background-color var(--bf-dur) var(--bf-ease),
	            box-shadow var(--bf-dur) var(--bf-ease),
	            border-color var(--bf-dur) var(--bf-ease),
	            top var(--bf-dur) var(--bf-ease) !important;
}

/* Scrolled state (main.js adds .scroll-header past 100px): tighten the
   glass, deepen the shadow, add a whisper of cyan in the border. */
.header-one.scroll-header {
	background-color: rgba(255, 255, 255, 0.82) !important;
	border-color: rgba(124, 241, 248, 0.28) !important;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.7) inset,
		var(--bf-sh-lg);
}

/* Nav trigger buttons: refined, quiet until hovered. */
.header-one .nav-trigger {
	color: var(--bf-ink-muted) !important;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: var(--bf-tr-tight);
	transition: color var(--bf-dur-fast) var(--bf-ease),
	            background-color var(--bf-dur-fast) var(--bf-ease),
	            border-color var(--bf-dur-fast) var(--bf-ease);
}

.header-one .nav-item:hover .nav-trigger,
.header-one .nav-trigger:hover,
.header-one .nav-trigger:focus-visible,
.header-one .nav-trigger[aria-expanded="true"] {
	color: var(--bf-ink) !important;
	background-color: rgba(17, 17, 17, 0.04) !important;
	border-color: rgba(17, 17, 17, 0.06) !important;
}

/* Arrow rotates when the menu is open. */
.header-one .nav-trigger[aria-expanded="true"] .nav-arrow {
	transform: rotate(180deg);
}

/* Desktop CTA in the pill: cyan. */
.header-one .btn.btn-secondary {
	background-color: var(--bf-cyan) !important;
	border-color: var(--bf-cyan) !important;
	color: var(--bf-ink) !important;
	font-weight: 500;
	font-size: 14px;
	border-radius: var(--bf-r-pill);
}

.header-one .btn.btn-secondary:hover {
	background-color: var(--bf-cyan-hover) !important;
	border-color: var(--bf-cyan-hover) !important;
	color: var(--bf-ink) !important;
	transform: translateY(-1px);
	box-shadow: var(--bf-glow-sm);
}

/* Hamburger. */
.header-one .nav-hamburger {
	background-color: rgba(17, 17, 17, 0.04) !important;
	border: 1px solid var(--bf-border) !important;
	transition: background-color var(--bf-dur-fast) var(--bf-ease);
}

.header-one .nav-hamburger:hover {
	background-color: var(--bf-cyan-mist) !important;
	border-color: var(--bf-cyan-soft) !important;
}

.header-one .nav-hamburger span {
	background-color: var(--bf-ink) !important;
}

/* Mega menu panels: glass treatment. The parent theme markup uses various
   dropdown/mega-menu class names; catch the common ones. */
.nav-item .mega-menu,
.nav-item .dropdown-menu,
.nav-item [class*="mega-menu"],
.nav-item [class*="mega_menu"] {
	background-color: rgba(255, 255, 255, 0.86) !important;
	-webkit-backdrop-filter: var(--bf-glass-blur) !important;
	backdrop-filter: var(--bf-glass-blur) !important;
	border: 1px solid rgba(255, 255, 255, 0.6) !important;
	border-radius: var(--bf-r-lg) !important;
	box-shadow: var(--bf-sh-xl) !important;
}

/* ============================================================
 * 10. Mobile menu
 * ============================================================ */
.sidebar {
	background-color: var(--bf-paper) !important;
	border-left: 1px solid var(--bf-border);
}

.sidebar .mobile-menu-toggle span {
	color: var(--bf-ink-muted) !important;
	transition: color var(--bf-dur-fast) var(--bf-ease);
}

.sidebar .mobile-menu-toggle:hover span,
.sidebar .mobile-menu-toggle[aria-expanded="true"] span {
	color: var(--bf-ink) !important;
}

.sidebar .mobile-submenu a {
	color: var(--bf-ink) !important;
	transition: color var(--bf-dur-fast) var(--bf-ease);
}

.sidebar .mobile-submenu a:hover {
	color: var(--bf-cyan-deep) !important;
}

.sidebar .btn.btn-primary {
	background-color: var(--bf-cyan) !important;
	border-color: var(--bf-cyan) !important;
	color: var(--bf-ink) !important;
	border-radius: var(--bf-r-pill) !important;
}

.sidebar .btn.btn-secondary {
	background-color: var(--bf-ink) !important;
	border-color: var(--bf-ink) !important;
	color: #FFFFFF !important;
	border-radius: var(--bf-r-pill) !important;
}

/* ============================================================
 * 11. Footer - dark, grain overlay, hover-to-cyan links
 * ============================================================ */
.footer {
	background-color: var(--bf-dark) !important;
	border-top: 1px solid var(--bf-border-dark) !important;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Grain overlay on the dark footer (very subtle). */
.footer::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.05;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='fn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23fn)'/%3E%3C/svg%3E");
	background-size: 180px 180px;
}

/* Single soft cyan orb bleeding up from the base, for depth. */
.footer::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -240px;
	width: 900px;
	height: 480px;
	transform: translateX(-50%);
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(circle at 50% 50%, rgba(124, 241, 248, 0.12), rgba(124, 241, 248, 0) 68%);
	filter: blur(20px);
}

/* Keep footer content above the texture layers. */
.footer > .main-container,
.footer > div {
	position: relative;
	z-index: 1;
}

/* Hide the legacy decorative background image. */
.footer > figure[aria-hidden="true"] {
	display: none !important;
}

.footer .footer-link {
	color: var(--bf-on-dark-2) !important;
	font-size: 14px;
	font-weight: 400;
	transition: color var(--bf-dur-fast) var(--bf-ease),
	            padding-left var(--bf-dur-fast) var(--bf-ease);
}

.footer .footer-link:hover {
	color: var(--bf-cyan) !important;
}

/* Column headings. */
.footer .text-primary-50 {
	color: var(--bf-on-dark) !important;
	font-weight: 500 !important;
	font-size: 14px;
	letter-spacing: var(--bf-tr-eyebrow);
}

/* Tagline. */
.footer .text-accent\/60,
.footer p.text-tagline-1 {
	color: var(--bf-on-dark-2) !important;
}

/* Animated divider line (main.js draws its width via .footer-divider). */
.footer .footer-divider {
	background: linear-gradient(90deg,
		transparent,
		rgba(124, 241, 248, 0.5) 50%,
		transparent) !important;
	height: 1px !important;
}

/* Bottom bar copyright + legal. */
.footer .text-tagline-2 {
	color: var(--bf-on-dark-muted) !important;
	font-size: 13px;
}

.footer nav[aria-label="Legal"] a {
	color: var(--bf-on-dark-muted) !important;
	font-size: 13px;
	transition: color var(--bf-dur-fast) var(--bf-ease);
}

.footer nav[aria-label="Legal"] a:hover {
	color: var(--bf-cyan) !important;
}

/* Social icons. */
.footer img.size-5 {
	opacity: 0.42 !important;
	transition: opacity var(--bf-dur-fast) var(--bf-ease);
}

.footer a:hover img.size-5 {
	opacity: 0.95 !important;
}

/* ============================================================
 * 12. Skip link + focus visibility (quality floor)
 * ============================================================ */
.skip-link:focus {
	background-color: var(--bf-cyan) !important;
	color: var(--bf-ink) !important;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
	outline: 2px solid var(--bf-cyan-deep);
	outline-offset: 2px;
}

.header-one a:focus-visible,
.header-one button:focus-visible {
	outline-offset: 3px;
}

/* ============================================================
 * 13. Reduced motion
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	html.brandforge-anim-ready .bf-reveal,
	html.brandforge-anim-ready .bf-reveal-stagger > * {
		opacity: 1 !important;
		transform: none !important;
	}

	.btn:hover,
	.btn-primary:hover,
	.btn-secondary:hover,
	.bf-glass-card:hover,
	.bf-card:hover,
	.header-one .btn.btn-secondary:hover {
		transform: none !important;
	}
}