/* ==========================================================================
   HYPE core — design tokens, shared components, site-wide interactions.
   Tokens read Elementor Global Colors / Fonts first (Site Settings), so the
   whole site follows changes made in Elementor → Site Settings.
     Primary  = HYPE Red      Secondary = Ink (background)
     Text     = Paper         Accent    = Slate
   ========================================================================== */
:root {
	--hype-red: var(--e-global-color-primary, #E92A2A);
	--hype-ink: var(--e-global-color-secondary, #0B0B0D);
	--hype-paper: var(--e-global-color-text, #F4F2EE);
	--hype-slate: var(--e-global-color-accent, #8A8A90);
	--hype-ink-2: color-mix(in srgb, var(--hype-ink) 92%, #fff 8%);
	--hype-line: color-mix(in srgb, var(--hype-paper) 14%, transparent);
	--hype-glass: color-mix(in srgb, var(--hype-ink) 58%, transparent);
	--hype-glass-border: color-mix(in srgb, var(--hype-paper) 12%, transparent);

	--hype-f-display: var(--e-global-typography-primary-font-family, "Barlow Condensed"), "Arial Narrow", sans-serif;
	--hype-f-serif: var(--e-global-typography-secondary-font-family, "Instrument Serif"), Georgia, serif;
	--hype-f-body: var(--e-global-typography-text-font-family, "Barlow"), system-ui, sans-serif;

	--hype-gutter: clamp(20px, 4.2vw, 64px);
	--hype-max: 1680px;
	--hype-ease: cubic-bezier(.65, .05, .2, 1);
	--hype-ease-out: cubic-bezier(.16, 1, .3, 1);
	--hype-header-h: 84px;
}
@media (max-width: 767px) { :root { --hype-header-h: 68px; } }

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--hype-red); color: #fff; }

/* Shared section shell ---------------------------------------------------- */
.hype-w { position: relative; color: var(--hype-paper); font-family: var(--hype-f-body); }
.hype-w *, .hype-w *::before, .hype-w *::after { box-sizing: border-box; }
.hype-wrap { width: 100%; max-width: var(--hype-max); margin-inline: auto; padding-inline: var(--hype-gutter); }
.hype-w em, .hype-em { font-family: var(--hype-f-serif); font-style: italic; font-weight: 400; text-transform: none; letter-spacing: 0; }
.hype-w img { max-width: 100%; height: auto; }

.hype-eyebrow {
	display: inline-flex; align-items: center; gap: .75em;
	font-family: var(--hype-f-display); font-weight: 500; font-size: 13px; line-height: 1.45;
	letter-spacing: .22em; text-transform: uppercase; color: var(--hype-slate); margin: 0 0 28px;
}
.hype-eyebrow::before { content: ""; width: 18px; height: 6px; background: var(--hype-red); flex: none; align-self: center; }
@media (max-width: 767px) { .hype-eyebrow { font-size: 11px; letter-spacing: .18em; align-items: flex-start; } .hype-eyebrow::before { margin-top: .5em; align-self: flex-start; } }

.hype-h2 {
	font-family: var(--hype-f-display); font-weight: 600; text-transform: uppercase;
	font-size: clamp(40px, 6.2vw, 104px); line-height: .9; letter-spacing: -.01em; margin: 0; color: var(--hype-paper);
}
.hype-h2 em { text-transform: none; font-size: 1.04em; letter-spacing: -.01em; }
.hype-lead { font-size: clamp(16px, 1.25vw, 19px); line-height: 1.65; color: color-mix(in srgb, var(--hype-paper) 78%, transparent); max-width: 34em; }

/* Buttons ---------------------------------------------------------------- */
.hype-btn {
	--b: var(--hype-red);
	position: relative; display: inline-flex; align-items: center; gap: 14px; isolation: isolate; overflow: hidden;
	padding: 18px 26px; min-height: 56px; border: 1px solid var(--b); border-radius: 0;
	background: var(--b); color: #fff; text-decoration: none; cursor: pointer;
	font-family: var(--hype-f-display); font-weight: 600; font-size: 15px; letter-spacing: .16em; text-transform: uppercase; line-height: 1;
	transition: color .5s var(--hype-ease), border-color .5s var(--hype-ease);
}
.hype-btn::before {
	content: ""; position: absolute; inset: 0; z-index: -1; background: var(--hype-paper);
	transform: scaleY(0); transform-origin: 50% 100%; transition: transform .55s var(--hype-ease);
}
.hype-btn:hover, .hype-btn:focus-visible { color: var(--hype-ink); border-color: var(--hype-paper); }
.hype-btn:hover::before, .hype-btn:focus-visible::before { transform: scaleY(1); }
.hype-btn__bars { display: inline-grid; grid-template-rows: repeat(3, 3px); gap: 3px; width: 16px; flex: none; }
.hype-btn__bars i { display: block; background: currentColor; transform-origin: 0 50%; transition: transform .5s var(--hype-ease); }
.hype-btn:hover .hype-btn__bars i:nth-child(2) { transform: scaleX(.6); }
.hype-btn:hover .hype-btn__bars i:nth-child(3) { transform: scaleX(.3); }
.hype-btn--ghost { --b: var(--hype-glass-border); background: color-mix(in srgb, var(--hype-ink) 30%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hype-btn--ghost .hype-btn__bars i:first-child { background: var(--hype-red); }

.hype-link {
	display: inline-flex; align-items: center; gap: 12px; color: var(--hype-paper); text-decoration: none;
	font-family: var(--hype-f-display); font-weight: 600; font-size: 15px; letter-spacing: .16em; text-transform: uppercase;
	padding-bottom: 6px; background: linear-gradient(var(--hype-red), var(--hype-red)) 0 100% / 100% 2px no-repeat;
	transition: background-size .5s var(--hype-ease);
}
.hype-link:hover { background-size: 30% 2px; }
.hype-link svg { transition: transform .5s var(--hype-ease); }
.hype-link:hover svg { transform: translateX(6px); }

/* Focus ------------------------------------------------------------------ */
.hype-w a:focus-visible, .hype-w button:focus-visible, .hype-float:focus-visible {
	outline: 2px solid var(--hype-red); outline-offset: 4px;
}
.hype-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Split-text line masks -------------------------------------------------- */
.hype-line-mask { overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }

/* Page transition (bars) ------------------------------------------------- */
.hype-transition { position: fixed; inset: 0; z-index: 10000; display: grid; grid-template-columns: repeat(7, 1fr); pointer-events: none; }
.hype-transition span { background: var(--hype-ink); transform: scaleY(0); transform-origin: 50% 0; }
.hype-transition span:nth-child(7) { background: var(--hype-red); }
.hype-transition.is-covering { pointer-events: all; }
.hype-arrive .hype-transition span { transform: scaleY(1); }

/* Cursor ---------------------------------------------------------------- */
.hype-cursor { position: fixed; top: 0; left: 0; z-index: 10001; pointer-events: none; mix-blend-mode: normal; }
.hype-cursor__dot { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--hype-red); border-radius: 50%; }
.hype-cursor__ring {
	position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid color-mix(in srgb, var(--hype-paper) 45%, transparent); border-radius: 50%;
	display: grid; place-items: center; transition: width .4s var(--hype-ease), height .4s var(--hype-ease), margin .4s var(--hype-ease), background .4s, border-color .4s;
}
.hype-cursor__label { font: 600 11px/1 var(--hype-f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--hype-ink); opacity: 0; transition: opacity .3s; }
.hype-cursor.is-link .hype-cursor__ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; border-color: var(--hype-red); }
.hype-cursor.has-label .hype-cursor__ring { width: 92px; height: 92px; margin: -46px 0 0 -46px; background: var(--hype-paper); border-color: var(--hype-paper); }
.hype-cursor.has-label .hype-cursor__label { opacity: 1; }
.hype-cursor.is-hidden { opacity: 0; }
@media (hover: none), (pointer: coarse) { .hype-cursor { display: none; } }

/* Floating WhatsApp (glass) --------------------------------------------- */
.hype-float {
	position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 990;
	display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; min-height: 48px;
	color: var(--hype-paper); text-decoration: none; background: var(--hype-glass); border: 1px solid var(--hype-glass-border);
	backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
	font: 600 13px/1 var(--hype-f-display); letter-spacing: .16em; text-transform: uppercase;
	transition: transform .5s var(--hype-ease-out), background .3s, opacity .4s;
}
.hype-float svg { color: #25D366; }
.hype-float:hover { background: color-mix(in srgb, var(--hype-ink) 80%, transparent); transform: translateY(-3px); }
.hype-float.is-hidden { opacity: 0; transform: translateY(20px); pointer-events: none; }
@media (max-width: 767px) { .hype-float span { display: none; } .hype-float { padding: 13px; } }

/* Reduced motion --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.hype-transition { display: none; }
	.hype-btn, .hype-btn::before, .hype-link, .hype-float { transition-duration: .01ms !important; }
}