/* ============================================================================
   Edynamics — caribbean.edynamicsmarketing.com
   v4.0.0 — Warm editorial. Cream / charcoal / terracotta. Aspirational premium.
   ========================================================================== */

/* ----------------------------- Design system ---------------------------- */
:root {
	--cream: #FAFAF7;
	--warm: #F5F0E8;
	--sand: #EDE6D6;
	--stone: #E0D8C8;
	--charcoal: #141210;
	--ink: #1E1B18;
	--mid: #6B6358;
	--light: #A09888;
	--border: #E5DDD0;
	--terra: #C85A2A;
	--terra-light: rgba(200,90,42,0.08);
	--terra-glow: rgba(200,90,42,0.2);
	--olive: #4A5240;
	--olive-light: rgba(74,82,64,0.08);
	--whatsapp: #25D366;
	--white: #FFFFFF;
	--f-display: 'Cormorant Garamond', Georgia, serif;
	--f-body: 'Plus Jakarta Sans', sans-serif;
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--dur: 0.7s;
	--radius: 4px;
	--radius-lg: 20px;
}
/* Legacy aliases — keep older components (contact/legal pages, buttons) working
   under the new palette without rewriting every rule. */
:root {
	--serif: var(--f-display);
	--sans: var(--f-body);
	--mono: 'Space Mono', 'SF Mono', monospace;
	--wrap: 1240px;
	--pad: clamp(24px, 6vw, 80px);
	--black: var(--charcoal);
	--surface: #1E1B18;
	--surface-2: #26221D;
	--orange: var(--terra);
	--orange-dark: #A8481F;
	--orange-light: var(--terra-light);
	--blue: var(--terra);
	--blue-dark: #A8481F;
	--blue-tint: var(--terra-light);
	--teal: var(--terra);
	--gold: var(--terra);
	--forest: var(--olive);
	--border-light: var(--border);
	--border-dark: #2A2620;
}

/* ------------------------------- Reset ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
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 {
	font-family: var(--f-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--cream);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul { list-style: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.wrap--narrow { max-width: 780px; }
.section { padding: clamp(60px, 9vw, 100px) 0; }

/* Shared display + label primitives */
.eyebrow {
	display: inline-block;
	font-family: var(--f-body);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--terra);
	margin-bottom: 1.25rem;
}
.eyebrow--gold { color: var(--terra); }
.h-display {
	font-family: var(--f-display);
	font-style: italic;
	font-weight: 600;
	font-size: clamp(2.4rem, 5.2vw, 3.5rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: var(--charcoal);
}
.h-display--light { color: var(--white); }
.lead-in { font-size: clamp(1rem, 1.6vw, 1.15rem); font-weight: 300; color: var(--mid); margin-top: 1rem; max-width: 46ch; }
.section-title { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.08; color: var(--charcoal); }
.section-title--light { color: var(--white); }
.section-head__title { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.1; color: var(--charcoal); }
.section-head--left { margin-bottom: 2.5rem; }
.char { display: inline-block; }

/* ------------------------------- Buttons --------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	padding: 16px 32px;
	font-family: var(--f-body);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	border-radius: 50px;
	transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
	white-space: nowrap;
}
.btn svg { flex-shrink: 0; }
.btn--wa { background: var(--whatsapp); color: #fff; box-shadow: 0 10px 30px -8px rgba(37,211,102,0.45); }
.btn--wa:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -8px rgba(37,211,102,0.55); }
.btn--wa-inverse { background: var(--white); color: var(--terra); font-weight: 700; font-size: 17px; padding: 20px 40px; box-shadow: 0 8px 40px rgba(0,0,0,0.2); }
.btn--wa-inverse:hover { transform: scale(1.04); box-shadow: 0 12px 50px rgba(0,0,0,0.28); }
.btn--terra, .btn--teal { background: var(--terra); color: #fff; box-shadow: 0 10px 30px -10px var(--terra-glow); }
.btn--terra:hover, .btn--teal:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -10px var(--terra-glow); }
.btn--outline { background: transparent; color: var(--terra); border: 1px solid var(--terra); }
.btn--outline:hover { background: var(--terra); color: #fff; transform: translateY(-3px); }
.btn--outline-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.2); }
.btn--outline-light:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.5); }
.btn--ghost, .btn--ghost-dark, .btn--ghost-teal { background: transparent; color: var(--terra); border: 1px solid rgba(200,90,42,0.4); }
.btn--ghost:hover, .btn--ghost-dark:hover, .btn--ghost-teal:hover { background: var(--terra); color: #fff; border-color: var(--terra); transform: translateY(-3px); }
.btn--lg { padding: 18px 36px; font-size: 16px; }
.btn--full { width: 100%; }

/* -------------------------- Grain + custom cursor ------------------------ */
.site-grain {
	position: fixed; inset: 0; pointer-events: none; z-index: 9998; opacity: 0.03;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cursor-ring, .cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; transform: translate(-50%,-50%); will-change: transform; }
.cursor-ring { width: 32px; height: 32px; border: 1.5px solid rgba(200,90,42,0.55); transition: width 0.25s var(--ease), height 0.25s var(--ease), background 0.25s var(--ease); }
.cursor-dot { width: 6px; height: 6px; background: var(--terra); }
body.cursor-active .cursor-ring { width: 52px; height: 52px; background: rgba(200,90,42,0.1); }
@media (hover: none), (max-width: 900px) { .cursor-ring, .cursor-dot { display: none; } }

/* ============================ SITE HEADER ================================= */
.site-header {
	position: sticky; top: 0; z-index: 200;
	background: rgba(250,250,247,0.82);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--border);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 1.5rem; }
.brand__name { font-family: var(--f-display); font-style: italic; font-size: 1.55rem; font-weight: 600; color: var(--charcoal); }
.site-nav { display: flex; align-items: center; gap: 2rem; }
.site-nav a { font-size: 14px; font-weight: 500; color: var(--mid); transition: color 0.25s var(--ease); }
.site-nav a:hover { color: var(--terra); }

/* Services dropdown */
.site-nav__dd-wrap { position: relative; display: inline-flex; align-items: center; }
.site-nav__dd-head { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 500; color: var(--mid); cursor: pointer; transition: color 0.25s var(--ease); }
.site-nav__dd-wrap:hover .site-nav__dd-head,
.site-nav__dd-wrap:focus-within .site-nav__dd-head { color: var(--terra); }
.site-nav__dd-caret { transition: transform 0.25s var(--ease); }
.site-nav__dd-wrap:hover .site-nav__dd-caret { transform: rotate(180deg); }
.site-nav__dd-panel { position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%) translateY(8px); min-width: 252px; background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 26px 54px -22px rgba(12,26,43,0.42); padding: 8px; display: grid; gap: 2px; opacity: 0; visibility: hidden; transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s; z-index: 300; }
.site-nav__dd-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.site-nav__dd-wrap:hover .site-nav__dd-panel,
.site-nav__dd-wrap:focus-within .site-nav__dd-panel { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.site-nav__dd-panel a { display: block; padding: 10px 14px; border-radius: 9px; font-size: 14px; font-weight: 500; color: var(--charcoal); white-space: nowrap; }
.site-nav__dd-panel a:hover { background: rgba(249,115,22,0.1); color: var(--terra); }
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; z-index: 1000; }
.nav-toggle__bar { width: 24px; height: 2px; background: #C9A84C; border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.wa-btn {
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.6rem 1.1rem; background: var(--whatsapp); color: #fff;
	font-weight: 600; font-size: 0.9rem; border-radius: 50px;
	transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.wa-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px -6px rgba(37,211,102,0.5); }

/* ======================= SECTION 1 — HERO ================================ */
.hero { display: grid; grid-template-columns: 52% 48%; min-height: 100vh; overflow: hidden; }
.hero__left {
	background: var(--charcoal); color: #fff;
	display: flex; flex-direction: column; justify-content: center;
	padding: 80px 60px;
}
.hero__label { font-family: var(--f-body); font-size: 10px; font-weight: 500; letter-spacing: 0.3em; color: var(--terra); margin-bottom: 1.75rem; }
.hero__title { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: clamp(52px, 6.6vw, 92px); line-height: 0.95; letter-spacing: -0.01em; color: #fff; }
.hero__title-accent { display: block; color: var(--terra); }
.hero__line { width: 60px; height: 2px; margin: 28px 0; background: linear-gradient(to right, var(--terra), transparent); }
.hero__sub { font-weight: 300; font-size: 18px; line-height: 1.8; color: rgba(255,255,255,0.6); max-width: 400px; margin-bottom: 2.25rem; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 2.5rem; }
.hero__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem; font-weight: 300; font-size: 12px; color: rgba(255,255,255,0.4); }
.hero__trust .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--terra); }
.hero__right { position: relative; overflow: hidden; }
.hero__img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform-origin: center; will-change: transform; }
.hero__card {
	position: absolute; left: 32px; bottom: 32px;
	background: rgba(255,255,255,0.95);
	backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
	border-radius: 16px; padding: 20px 24px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.hero__card-num { display: block; font-family: var(--f-display); font-style: italic; font-size: 36px; font-weight: 600; color: var(--charcoal); line-height: 1; }
.hero__card-label { display: block; font-weight: 300; font-size: 12px; color: var(--mid); margin-top: 4px; }

/* ==================== SECTION 2 — MARQUEE TICKER ========================= */
.ticker { background: var(--terra); height: 44px; display: flex; align-items: center; overflow: hidden; }
.ticker__track { display: flex; flex-shrink: 0; align-items: center; white-space: nowrap; animation: tickerScroll 35s linear infinite; }
.ticker__item { font-weight: 600; font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase; color: #fff; padding: 0 1.75rem; }
.ticker__item::after { content: '·'; color: rgba(255,255,255,0.55); margin-left: 3.5rem; }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==================== SECTION 3 — PAIN POINTS =========================== */
.pains { background: var(--cream); }
.pains__head { margin-bottom: 3rem; }
.pains__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.pain-card {
	background: var(--white); border: 1px solid var(--border);
	border-left: 3px solid transparent; border-radius: var(--radius-lg);
	padding: 28px; transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.pain-card:hover { border-color: var(--terra); border-left-color: var(--terra); transform: translateY(-4px); box-shadow: 0 22px 50px -24px rgba(20,18,16,0.25); }
.pain-card__q { font-weight: 600; font-size: 16px; line-height: 1.45; color: var(--charcoal); }
.pain-card__a { font-weight: 300; font-size: 14px; color: var(--mid); margin-top: 0.65rem; }
.pains__cta {
	margin-top: 2rem; background: var(--charcoal); border-radius: var(--radius-lg);
	padding: 32px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
}
.pains__cta p { font-family: var(--f-display); font-style: italic; font-size: 28px; color: #fff; max-width: 30ch; }

/* ==================== SECTION 4 — SERVICES GRID ========================= */
.services { background: var(--white); }
.services__head { margin-bottom: 3rem; }
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.service-card {
	position: relative; overflow: hidden; display: flex; flex-direction: column;
	min-height: 220px; padding: 28px;
	background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg);
	transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.service-card::before {
	content: ''; position: absolute; inset: 0; z-index: 0;
	background-image: var(--card-bg); background-size: cover; background-position: center;
	opacity: 0.08; transition: opacity 0.4s var(--ease);
}
.service-card > * { position: relative; z-index: 1; }
.service-card:hover { border-color: var(--terra); transform: translateY(-6px); box-shadow: 0 28px 60px -28px rgba(20,18,16,0.3); }
.service-card:hover::before { opacity: 0.16; }
.service-card__num { font-weight: 300; font-size: 13px; color: var(--light); }
.service-card__icon { color: var(--terra); margin-top: 6px; }
.service-card__name { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 26px; color: var(--charcoal); margin-top: 34px; }
.service-card__desc { font-weight: 300; font-size: 13px; line-height: 1.5; color: var(--mid); margin-top: 0.5rem; }
.service-card__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1rem; }
.service-card__pills .pill { font-size: 11px; font-weight: 400; color: var(--terra); background: var(--terra-light); border-radius: 50px; padding: 3px 10px; }
.service-card__link { margin-top: auto; padding-top: 1.25rem; font-size: 13px; font-weight: 600; color: var(--terra); }
.service-card__bar { display: none; }

/* ==================== SECTION 5 — EDITORIAL BREAK ======================= */
.editorial { position: relative; display: flex; align-items: center; justify-content: center; min-height: 480px; padding: 60px 24px; overflow: hidden; }
.editorial::before {
	content: ''; position: absolute; inset: 0; z-index: 0;
	background-image: url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1600&q=90');
	background-size: cover; background-position: center;
	filter: sepia(0.15) saturate(0.9);
}
.editorial__card {
	position: relative; z-index: 1; max-width: 640px; text-align: center;
	background: rgba(250,250,247,0.88); padding: 48px 60px;
}
.editorial__title { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.1; color: var(--charcoal); }
.editorial__sub { font-weight: 300; font-size: 16px; color: var(--mid); margin-top: 1.25rem; }

/* ==================== SECTION 6 — HOW IT WORKS ========================== */
.how { background: var(--charcoal); color: #fff; }
.how__head { margin-bottom: 3.5rem; }
.how__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.step { position: relative; padding: 0 1.5rem; overflow: hidden; }
.step + .step { border-left: 1px solid rgba(255,255,255,0.08); }
.step__num { position: absolute; top: -40px; right: 8px; font-family: var(--f-display); font-style: italic; font-size: 160px; line-height: 1; color: rgba(255,255,255,0.04); pointer-events: none; z-index: 0; }
.step__name, .step__text { position: relative; z-index: 1; }
.step__name { font-weight: 600; font-size: 20px; color: #fff; margin-bottom: 0.85rem; }
.step__text { font-weight: 300; font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.5); max-width: 260px; }
.how__note { margin-top: 3rem; font-family: var(--f-display); font-style: italic; font-size: 22px; color: var(--terra); }

/* ==================== SECTION 7 — WORK SHOWCASE ========================= */
.work { background: var(--warm); overflow: hidden; }
.work__head { margin-bottom: 2.5rem; }
.work__row { overflow: hidden; margin-bottom: 1.5rem; }
.work__track { display: flex; width: max-content; gap: 1.5rem; padding: 0.5rem 0; }
.work__row--a .work__track { animation: marqueeMove 35s linear infinite; }
.work__row--b .work__track { animation: marqueeMove 45s linear infinite reverse; }
.work__card {
	flex-shrink: 0; width: 280px; height: 200px; border-radius: 16px; overflow: hidden;
	box-shadow: 0 16px 40px -18px rgba(20,18,16,0.28);
	transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.work__card:nth-child(3n+1) { transform: rotate(-2deg); }
.work__card:nth-child(3n+2) { transform: rotate(1.5deg); }
.work__card:nth-child(3n) { transform: rotate(2deg); }
.work__card:hover { transform: rotate(0deg) scale(1.05); box-shadow: 0 26px 60px -20px rgba(20,18,16,0.4); }
.work__card img { width: 100%; height: 100%; object-fit: cover; }
.work__cta { text-align: center; margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; }
.work__cta p { font-weight: 300; font-size: 16px; color: var(--mid); }
@keyframes marqueeMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==================== SECTION 8 — WHATSAPP CTA ========================= */
.cta-wa { position: relative; background: var(--terra); color: #fff; overflow: hidden; }
.cta-wa::before {
	content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cta-wa__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; }
.cta-wa__title { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: clamp(2.6rem, 5.5vw, 64px); line-height: 1.0; color: #fff; }
.cta-wa__sub { font-weight: 300; font-size: 18px; color: rgba(255,255,255,0.75); margin-top: 20px; max-width: 42ch; }
.cta-wa__trust { font-weight: 300; font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 1.25rem; }
.cta-wa__action { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.cta-wa__email { font-weight: 300; font-size: 13px; color: rgba(255,255,255,0.55); }
.cta-wa__email a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.4); }

/* ==================== SECTION 9 / CONTACT — LEAD FORM =================== */
.lead { background: var(--cream); }
.lead__head { margin-bottom: 2.5rem; }
.lead__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3rem; align-items: start; }
.lead__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field, .lead__field { display: flex; flex-direction: column; }
.lead__field--full, .field--full { grid-column: 1 / -1; }
.field label, .lead__field label { font-family: var(--f-body); font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid); margin-bottom: 0.5rem; }
.field__opt, .lead__opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--light); }
.field input, .field select, .field textarea,
.lead__field input, .lead__field select, .lead__field textarea {
	background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
	padding: 0.85rem 1rem; font-family: var(--f-body); font-size: 1rem; color: var(--charcoal);
	transition: border-color 0.25s var(--ease);
}
.field textarea, .lead__field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus,
.lead__field input:focus, .lead__field select:focus, .lead__field textarea:focus { outline: none; border-color: var(--terra); }
.field--hp, .lead__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead__actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.lead__alt { background: var(--charcoal); color: #fff; border-radius: var(--radius-lg); padding: 40px; }
.lead__alt h3 { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 30px; color: #fff; margin-bottom: 0.85rem; }
.lead__alt p { font-weight: 300; font-size: 15px; color: rgba(255,255,255,0.6); margin-bottom: 1.5rem; }
.contact-status, .contact-form__status { font-size: 14px; color: var(--mid); margin: 0; }
.contact-status.is-ok { color: var(--olive); }
.contact-status.is-error { color: var(--terra); }

/* ============================ SERVICE PAGE =============================== */
.service { background: var(--cream); }
.svc-banner { display: grid; grid-template-columns: 1fr 1fr; min-height: 60vh; overflow: hidden; }
.svc-banner__text { display: flex; flex-direction: column; justify-content: center; padding: clamp(3rem, 6vw, 5rem) clamp(28px, 5vw, 64px); background: var(--cream); }
.svc-banner__eyebrow { font-family: var(--f-body); font-size: 10px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--terra); margin-bottom: 1.25rem; }
.svc-banner__title { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: clamp(2.8rem, 6vw, 64px); line-height: 0.98; color: var(--charcoal); margin-bottom: 1.25rem; }
.svc-banner__desc { font-weight: 300; font-size: 1.05rem; line-height: 1.7; color: var(--mid); max-width: 46ch; margin-bottom: 2rem; }
.svc-banner__wa { align-self: flex-start; }
.svc-banner__media { position: relative; overflow: hidden; }
.svc-banner__img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.svc-inc { background: var(--white); }
.svc-inc__head { margin-bottom: 2.5rem; }
.svc-inc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.svc-inc__card { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; border-radius: var(--radius-lg); background: var(--cream); border: 1px solid var(--border); transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); }
.svc-inc__card:hover { transform: translateY(-3px); border-color: var(--terra); box-shadow: 0 16px 36px -20px rgba(20,18,16,0.22); }
.svc-inc__check { flex-shrink: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--terra-light); color: var(--terra); }
.svc-inc__label { font-weight: 600; font-size: 15px; line-height: 1.35; color: var(--charcoal); }

.svc-quote { background: var(--terra); color: #fff; text-align: center; }
.svc-quote__title { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.4rem); color: #fff; }
.svc-quote__sub { font-weight: 300; font-size: 17px; color: rgba(255,255,255,0.8); margin: 1rem auto 2rem; max-width: 44ch; }
.svc-quote__actions { display: flex; align-items: center; justify-content: center; gap: 1.25rem; flex-wrap: wrap; }
.svc-quote__email { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.4); font-size: 14px; }

.svc-related { background: var(--white); }
.svc-related .services__head { margin-bottom: 2.5rem; }
.services__grid--three { grid-template-columns: repeat(3, 1fr); }

/* ==================== CONTACT PAGE ====================================== */
.contact__hero { background: var(--charcoal); color: #fff; padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem); }
.contact__hero .section-head__title { color: #fff; }
.contact__hero .eyebrow { color: var(--terra); }
.contact__body { background: var(--cream); padding: clamp(3rem, 7vw, 5rem) 0 clamp(4rem, 9vw, 7rem); }
.contact__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: start; }
.contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
.contact-wa { background: var(--charcoal); color: #fff; border-radius: var(--radius-lg); padding: 40px; }
.contact-wa__head { font-family: var(--f-display); font-style: italic; font-weight: 600; font-size: 30px; color: #fff; margin-bottom: 0.75rem; }
.contact-wa__body { font-weight: 300; font-size: 15px; color: rgba(255,255,255,0.6); margin-bottom: 1.5rem; }
.contact-wa__note { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 1rem; }
.contact-wa__email { font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 0.5rem; }
.contact-wa__email a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.4); }

/* ==================== GENERIC PAGE / 404 =============================== */
.page__body { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(4rem, 9vw, 7rem); }
.prose { font-weight: 300; font-size: 1.05rem; line-height: 1.8; color: var(--mid); margin-top: 1.5rem; }
.prose h2 { font-family: var(--f-display); font-style: italic; font-size: 1.9rem; color: var(--charcoal); margin: 2rem 0 0.75rem; }
.prose h3 { font-size: 1.2rem; color: var(--charcoal); margin: 1.5rem 0 0.5rem; }
.prose p { margin-bottom: 1rem; }
.prose a { color: var(--terra); border-bottom: 1px solid var(--terra); }
.error404 .hero__sub { color: var(--mid); }
.error404 .hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ==================== SITE FOOTER ====================================== */
.site-footer { background: var(--charcoal); color: rgba(255,255,255,0.6); padding: clamp(3.5rem, 7vw, 5.5rem) 0 2rem; }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 2.5rem; }
.site-footer__logo { display: block; font-family: var(--f-display); font-style: italic; font-size: 1.7rem; font-weight: 600; color: #fff; }
.site-footer__tag { display: block; font-weight: 300; font-size: 14px; color: rgba(255,255,255,0.5); margin-top: 0.5rem; }
.site-footer__col-title { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 1rem; }
.site-footer__links { display: flex; flex-direction: column; gap: 0.6rem; }
.site-footer__links a, .site-footer__email { font-size: 14px; color: rgba(255,255,255,0.6); transition: color 0.25s var(--ease); }
.site-footer__links a:hover, .site-footer__email:hover { color: #fff; }
.site-footer__email { display: inline-block; margin-top: 0.75rem; }
.site-footer__contact .wa-btn { margin-top: 1.25rem; }
.site-footer__bottom { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.08); font-size: 13px; color: rgba(255,255,255,0.45); }
.site-footer__bottom a { color: rgba(255,255,255,0.5); }
.site-footer__bottom a:hover { color: #fff; }

/* ==================== FLOATING WHATSAPP ================================ */
.whatsapp-float {
	position: fixed; right: 20px; bottom: 22px; z-index: 300;
	width: 60px; height: 60px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--whatsapp); color: #fff;
	box-shadow: 0 4px 24px rgba(37,211,102,0.4);
	animation: floatBob 3s ease-in-out infinite;
}
.whatsapp-float__tip {
	position: absolute; right: 72px; white-space: nowrap;
	background: var(--charcoal); color: #fff; font-size: 13px; font-weight: 500;
	padding: 8px 14px; border-radius: 50px; opacity: 0; transform: translateX(8px);
	transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); pointer-events: none;
}
.whatsapp-float:hover .whatsapp-float__tip { opacity: 1; transform: translateX(0); }
@keyframes floatBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ============================ RESPONSIVE =============================== */
@media (max-width: 980px) {
	.site-nav {
		display: none;
		position: fixed;
		top: 0; left: 0; right: 0;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2rem;
		background: #141210;
		z-index: 999;
		padding: 2rem;
		overflow-y: auto;
	}
	.site-nav.is-open { display: flex; }
	.site-nav a { font-size: 1.25rem; color: #FFFFFF; }
	.site-nav a:hover { color: #C9A84C; }
	.site-nav__dd-wrap { flex-direction: column; gap: 1.1rem; }
	.site-nav__dd-head { font-size: 1.25rem; color: #FFFFFF; }
	.site-nav__dd-caret { display: none; }
	.site-nav__dd-panel { position: static; transform: none; opacity: 1; visibility: visible; min-width: 0; background: transparent; border: none; box-shadow: none; padding: 0; gap: 0.85rem; justify-items: center; }
	.site-nav__dd-panel::before { display: none; }
	.site-nav__dd-panel a { padding: 0; font-size: 1rem; color: rgba(255,255,255,0.7); }
	.site-nav__dd-panel a:hover { background: transparent; color: #C9A84C; }
	.nav-toggle { display: flex; }
	.site-header__inner { gap: 0.75rem; }
	.wa-btn--header { margin-left: auto; }
	.hero { grid-template-columns: 1fr; min-height: auto; }
	.hero__right { order: -1; height: 55vw; min-height: 240px; max-height: 380px; }
	.hero__left { padding: 48px 28px; }
	.cta-wa__inner { grid-template-columns: 1fr; gap: 2rem; }
	.cta-wa__action { align-items: flex-start; }
	.lead__grid { grid-template-columns: 1fr; gap: 2rem; }
	.contact__grid { grid-template-columns: 1fr; gap: 2rem; }
	.svc-banner { grid-template-columns: 1fr; min-height: auto; }
	.svc-banner__media { order: -1; height: 50vw; min-height: 200px; max-height: 340px; }
	.how__steps { grid-template-columns: 1fr; gap: 2.5rem; }
	.step + .step { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 2rem; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 680px) {
	.pains__grid, .services__grid, .services__grid--three, .svc-inc__grid { grid-template-columns: 1fr 1fr; }
	.pains__cta { flex-direction: column; align-items: flex-start; }
	.lead__form { grid-template-columns: 1fr; }
	.editorial__card { padding: 32px 28px; }
	.work__card { width: 200px; height: 140px; }
	.hero__ctas .btn, .hero__ctas .btn--wa, .hero__ctas .btn--outline-light { width: 100%; }
	.btn { min-height: 52px; }
	.site-footer__grid { grid-template-columns: 1fr; }
}
@media (max-width: 460px) {
	:root { --pad: 24px; }
	.pains__grid, .services__grid, .services__grid--three, .svc-inc__grid { grid-template-columns: 1fr; }
	.hero__title { font-size: clamp(44px, 13vw, 56px); }
	.whatsapp-float__tip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
	.ticker__track, .work__track { animation: none !important; }
	.whatsapp-float { animation: none !important; }
}

/* ============================================================
   SERVICE PAGE (page-service.php) — premium 7-section layout
   ============================================================ */

/* 1. Hero split */
.svc-page-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 70vh; }
.svc-page-hero__left { background: #141210; padding: 80px 60px; display: flex; flex-direction: column; justify-content: center; }
.svc-page-hero__eyebrow { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; color: #C85A2A; margin: 0 0 20px; }
.svc-page-hero__title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: clamp(44px, 6vw, 72px); line-height: 1.02; color: #FFF; margin: 0 0 20px; }
.svc-page-hero__sub { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.6); max-width: 420px; margin: 0 0 32px; }
.svc-page-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.svc-page-hero__right { position: relative; overflow: hidden; }
.svc-page-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 2. Problem statement */
.svc-problem { background: #FAFAF7; padding: 60px 80px; text-align: center; }
.svc-problem__text { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: clamp(24px, 4vw, 40px); line-height: 1.3; color: #1E1B18; max-width: 700px; margin: 0 auto; }

/* 3. What is included */
.svc-items { background: #FFF; padding: 80px; }
.svc-items .eyebrow { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: #C85A2A; text-align: center; margin: 0 0 12px; }
.svc-items .section-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(32px, 4vw, 48px); text-align: center; color: #1E1B18; margin: 0 0 48px; }
.svc-items__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; }
.svc-item-card { background: #FFF; border: 1px solid #E5DDD0; border-radius: 16px; padding: 24px; transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
.svc-item-card:hover { border-color: #C85A2A; transform: translateY(-4px); box-shadow: 0 16px 40px rgba(20,18,16,0.08); }
.svc-item-card__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(200,90,42,0.08); border-radius: 12px; font-size: 22px; margin: 0 0 16px; }
.svc-item-card__name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 16px; color: #1E1B18; margin: 0 0 6px; }
.svc-item-card__desc { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 300; font-size: 13px; line-height: 1.55; color: #6B655D; margin: 0; }

/* 4. Sample images */
.svc-images { background: #F5F0E8; padding: 80px; }
.svc-images .section-title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(32px, 4vw, 48px); text-align: center; color: #1E1B18; margin: 0 0 48px; }
.svc-images__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; }
.svc-images__item { border-radius: 16px; overflow: hidden; aspect-ratio: 1; }
.svc-images__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.svc-images__item:hover img { transform: scale(1.05); }

/* 5. Turnaround */
.svc-turnaround { background: #141210; padding: 80px; text-align: center; }
.svc-turnaround .section-title--light { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(32px, 4vw, 48px); color: #FFF; margin: 0 0 48px; }
.svc-turnaround__grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; max-width: 900px; margin: 0 auto; overflow: hidden; }
.svc-turnaround__item { padding: 40px 24px; border-right: 1px solid rgba(255,255,255,0.08); }
.svc-turnaround__item:last-child { border-right: none; }
.svc-turnaround__num { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 40px; color: #C85A2A; margin: 0 0 8px; }
.svc-turnaround__label { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0; }

/* 6. Get a quote CTA */
.svc-cta { background: #C85A2A; padding: 100px 80px; text-align: center; }
.svc-cta__title { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 500; font-size: clamp(36px, 5vw, 56px); color: #FFF; margin: 0 0 16px; }
.svc-cta__sub { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.85); max-width: 520px; margin: 0 auto 32px; }
.svc-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.svc-cta__guarantee { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.1em; color: rgba(255,255,255,0.7); margin: 28px 0 0; }

/* 7. Related services */
.svc-related { background: #FFF; padding: 80px; }
.svc-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1100px; margin: 40px auto 0; }

@media (max-width: 768px) {
	.svc-page-hero { grid-template-columns: 1fr; }
	.svc-page-hero__left { padding: 56px 28px; order: 1; }
	.svc-page-hero__right { order: -1; height: 55vw; }
	.svc-page-hero__img { position: relative; }
	.svc-problem { padding: 48px 28px; }
	.svc-items, .svc-images, .svc-turnaround, .svc-related { padding: 56px 28px; }
	.svc-cta { padding: 72px 28px; }
	.svc-items__grid, .svc-images__grid, .svc-related__grid { grid-template-columns: 1fr; }
	.svc-turnaround__grid { grid-template-columns: 1fr; }
	.svc-turnaround__item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
	.svc-turnaround__item:last-child { border-bottom: none; }
}

/* ===== FLIP CARDS ===== */
.pains {
	background: #0F0F0F;
	padding: 100px 80px;
}
.pains__inner {
	max-width: 1200px;
	margin: 0 auto;
}
.pains__eyebrow {
	color: #C85A2A !important;
	font-size: 10px !important;
	letter-spacing: 0.3em !important;
	text-transform: uppercase;
	font-weight: 600;
	display: block;
	margin-bottom: 16px;
}
.pains__title {
	font-family: 'Cormorant Garamond', serif;
	font-size: clamp(36px, 5vw, 56px);
	font-style: italic;
	font-weight: 600;
	color: #FFFFFF !important;
	margin-bottom: 12px;
}
.pains__sub {
	font-size: 15px;
	color: rgba(255,255,255,0.4);
	margin-bottom: 48px;
}
.pains__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 48px;
}

/* Flip card */
.flip-card {
	height: 220px;
	perspective: 1000px;
	cursor: pointer;
}
.flip-card__inner {
	position: relative;
	width: 100%; height: 100%;
	transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
	transform-style: preserve-3d;
}
.flip-card.flipped .flip-card__inner {
	transform: rotateY(180deg);
}
.flip-card__front,
.flip-card__back {
	position: absolute;
	inset: 0;
	border-radius: 20px;
	padding: 28px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.flip-card__front {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
}
.flip-card__back {
	background: #C85A2A;
	border: 1px solid rgba(255,255,255,0.1);
	transform: rotateY(180deg);
}
.flip-card__num {
	font-family: 'Cormorant Garamond', serif;
	font-size: 13px;
	color: rgba(255,255,255,0.25);
	letter-spacing: 0.1em;
	font-weight: 400;
}
.flip-card__pain {
	font-size: 15px;
	color: #FFFFFF;
	line-height: 1.5;
	font-weight: 400;
	flex: 1;
	padding: 12px 0;
}
.flip-card__tap {
	font-size: 11px;
	color: rgba(255,255,255,0.3);
	font-weight: 500;
	letter-spacing: 0.05em;
}
.flip-card__check {
	font-size: 24px;
	color: rgba(255,255,255,0.9);
	margin-bottom: 8px;
}
.flip-card__solution {
	font-size: 14px;
	color: rgba(255,255,255,0.9);
	line-height: 1.5;
	flex: 1;
	padding: 8px 0;
}
.flip-card__service {
	font-size: 10px;
	color: rgba(255,255,255,0.65);
	letter-spacing: 0.15em;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 10px;
	display: block;
}
.flip-card__wa {
	display: inline-flex;
	align-items: center;
	background: rgba(255,255,255,0.15);
	color: #FFFFFF;
	border: 1px solid rgba(255,255,255,0.3);
	border-radius: 50px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease;
	width: fit-content;
}
.flip-card__wa:hover {
	background: rgba(255,255,255,0.25);
}

/* Pains CTA */
.pains__cta {
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 20px;
	padding: 32px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.pains__cta p {
	font-family: 'Cormorant Garamond', serif;
	font-size: 24px;
	font-style: italic;
	color: #FFFFFF;
}
.pains__cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #25D366;
	color: #FFFFFF;
	padding: 14px 28px;
	border-radius: 50px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: transform 0.2s ease;
}
.pains__cta-btn:hover { transform: translateY(-2px); }

/* Mobile flip cards */
@media (max-width: 768px) {
	.pains { padding: 60px 24px; }
	.pains__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.flip-card { height: 240px; }
	.flip-card__front, .flip-card__back { padding: 20px; }
	.flip-card__pain { font-size: 13px; }
	.flip-card__solution { font-size: 13px; }
	.pains__cta { flex-direction: column; text-align: center; }
	.pains__cta-btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
	.pains__grid { grid-template-columns: 1fr; }
	.flip-card { height: 180px; }
}
/* ===== END FLIP CARDS ===== */

/* ===== COMBO CARDS: SCRAMBLE + FLIP ===== */
.pains {
background: #0F0F0F;
padding: 100px 80px;
overflow: hidden;
}
.pains__inner { max-width: 1200px; margin: 0 auto; }
.pains__eyebrow {
color: #C85A2A !important;
font-size: 10px !important;
letter-spacing: 0.3em !important;
text-transform: uppercase;
font-weight: 600;
display: block;
margin-bottom: 16px;
}
.pains__title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(36px, 5vw, 56px);
font-style: italic;
font-weight: 600;
color: #FFFFFF !important;
margin-bottom: 48px;
}
.pains__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 48px;
}
.combo-card {
height: 230px;
perspective: 1200px;
cursor: pointer;
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.combo-card.visible {
opacity: 1;
transform: translateY(0);
}
.combo-card__inner {
position: relative;
width: 100%; height: 100%;
transform-style: preserve-3d;
transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.combo-card.flipped .combo-card__inner {
transform: rotateY(180deg);
}
.combo-card__front,
.combo-card__back {
position: absolute;
inset: 0;
border-radius: 20px;
padding: 24px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.combo-card__front {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
transition: border-color 0.3s ease;
}
.combo-card.scrambled .combo-card__front {
border-color: rgba(200,90,42,0.25);
}
.combo-card__back {
background: #C85A2A;
transform: rotateY(180deg);
}
.combo-card__top {
display: flex;
justify-content: space-between;
align-items: center;
}
.combo-card__num {
font-family: 'Cormorant Garamond', serif;
font-size: 12px;
color: rgba(255,255,255,0.25);
letter-spacing: 0.1em;
}
.combo-card__status {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.2em;
color: rgba(200,90,42,0.5);
text-transform: uppercase;
}
.combo-card__status--sorted {
color: rgba(255,255,255,0.8);
}
.combo-card__text {
font-size: 14px;
color: #FFFFFF;
line-height: 1.55;
flex: 1;
padding: 10px 0 8px;
font-family: 'Plus Jakarta Sans', sans-serif;
min-height: 68px;
font-feature-settings: 'tnum';
}
.combo-card__hint {
font-size: 11px;
color: rgba(255,255,255,0.0);
font-weight: 500;
letter-spacing: 0.04em;
transition: color 0.6s ease;
display: block;
}
.combo-card.scrambled .combo-card__hint {
color: rgba(200,90,42,0.7);
}
.combo-card__solution {
font-size: 13px;
color: rgba(255,255,255,0.9);
line-height: 1.55;
flex: 1;
padding: 10px 0 8px;
}
.combo-card__footer {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.combo-card__service {
font-size: 9px;
color: rgba(255,255,255,0.65);
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.combo-card__wa {
font-size: 12px;
color: #FFFFFF;
font-weight: 600;
text-decoration: none;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.3);
border-radius: 50px;
padding: 6px 14px;
transition: background 0.2s ease;
}
.combo-card__wa:hover { background: rgba(255,255,255,0.25); }
.combo-card.scrambling .combo-card__front::after {
content: '';
position: absolute;
left: 0; right: 0; height: 1px;
background: linear-gradient(to right, transparent, rgba(200,90,42,0.7), transparent);
animation: comboScan 1.2s linear forwards;
pointer-events: none;
z-index: 2;
border-radius: 0;
}
@keyframes comboScan {
0% { top: 0; opacity: 0; }
5% { opacity: 1; }
95% { opacity: 1; }
100% { top: 100%; opacity: 0; }
}
.pains__cta {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
padding: 28px 36px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.pains__cta p {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
font-style: italic;
color: #FFFFFF;
}
.pains__cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: #25D366;
color: #FFFFFF;
padding: 14px 28px;
border-radius: 50px;
font-size: 14px;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.pains__cta-btn:hover { transform: translateY(-2px); }
@media (max-width: 1024px) {
.pains { padding: 80px 40px; }
.pains__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.pains { padding: 60px 24px; }
.pains__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.combo-card { height: 240px; }
.combo-card__front, .combo-card__back { padding: 18px; }
.combo-card__text { font-size: 13px; }
.combo-card__solution { font-size: 13px; }
.pains__cta { flex-direction: column; text-align: center; }
.pains__cta-btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
.pains__grid { grid-template-columns: 1fr; }
.combo-card { height: 200px; }
}
/* ===== END COMBO CARDS ===== */

/* ===== HERO VIDEO (cinematic background) ===== */
.hero__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__scrim {
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(105deg, rgba(20,18,16,0.32) 0%, rgba(20,18,16,0.10) 45%, rgba(20,18,16,0.30) 100%);
}
.hero__card { z-index: 2; }
@media (max-width: 768px) {
	.hero__scrim { background: linear-gradient(180deg, rgba(20,18,16,0.12), rgba(20,18,16,0.30)); }
}

/* ============================================
   AURORA HERO 2026 — CARIBBEAN SITE
   ============================================ */

.aurora-hero {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	overflow: hidden;
	background: #FAF7F2;
}

.aurora-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.aurora-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0;
	animation: auroraBreathe var(--dur) ease-in-out infinite alternate;
	will-change: transform, opacity;
}

.aurora-blob--1 {
	width: 65vw; height: 65vw;
	max-width: 750px; max-height: 750px;
	background: radial-gradient(circle, rgba(200,90,42,0.25) 0%, transparent 70%);
	top: -20%; left: -15%;
	--dur: 9.2s;
	animation-delay: 0s;
}

.aurora-blob--2 {
	width: 55vw; height: 55vw;
	max-width: 650px; max-height: 650px;
	background: radial-gradient(circle, rgba(225,150,70,0.2) 0%, transparent 70%);
	bottom: -15%; right: -15%;
	--dur: 12.6s;
	animation-delay: -5s;
}

.aurora-blob--3 {
	width: 40vw; height: 40vw;
	max-width: 480px; max-height: 480px;
	background: radial-gradient(circle, rgba(240,220,190,0.4) 0%, transparent 70%);
	top: 25%; left: 35%;
	--dur: 10.4s;
	animation-delay: -3s;
}

.aurora-blob--4 {
	width: 30vw; height: 30vw;
	max-width: 380px; max-height: 380px;
	background: radial-gradient(circle, rgba(180,65,25,0.15) 0%, transparent 70%);
	top: 0; right: 20%;
	--dur: 14s;
	animation-delay: -7s;
}

.aurora-grain {
	position: absolute; inset: 0;
	opacity: 0.025;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 200px;
	pointer-events: none; z-index: 1;
}

.aurora-hero__content {
	position: relative; z-index: 2;
	width: 100%; max-width: 1200px;
	margin: 0 auto;
	padding: 120px 80px;
}

.aurora-hero__inner { max-width: 640px; }

.aurora-hero__eyebrow {
	display: block;
	font-size: 10px; font-weight: 600;
	letter-spacing: 0.28em; text-transform: uppercase;
	color: #C85A2A; margin-bottom: 28px; opacity: 0;
}

.aurora-hero__headline {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: clamp(56px, 9vw, 110px);
	font-style: italic; font-weight: 600;
	line-height: 0.95; color: #1A1714;
	letter-spacing: -0.02em; margin: 0;
}

.aurora-hero__headline .line { display: block; }
.aurora-accent { color: #C85A2A; }

.aurora-hero__line {
	width: 0; height: 2px;
	background: linear-gradient(to right, #C85A2A, rgba(200,90,42,0.2));
	border-radius: 1px; margin: 24px 0;
}

.aurora-hero__sub {
	font-size: 18px; font-weight: 300;
	color: #6B6358; line-height: 1.75;
	max-width: 500px; margin-bottom: 40px; opacity: 0;
}

.aurora-hero__ctas {
	display: flex; gap: 12px;
	flex-wrap: wrap; margin-bottom: 40px; opacity: 0;
}

.aurora-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 14px 28px; border-radius: 50px;
	font-size: 14px; font-weight: 600;
	text-decoration: none; transition: all 0.3s ease;
	cursor: pointer; border: none;
}

.aurora-btn--primary { background: #1A1714; color: #FFFFFF; }
.aurora-btn--primary:hover { background: #C85A2A; transform: translateY(-2px); }
.aurora-btn--ghost { background: transparent; color: #1A1714; border: 1.5px solid #E5DDD0; }
.aurora-btn--ghost:hover { border-color: #C85A2A; color: #C85A2A; }
.aurora-btn--wa { background: #25D366; color: #FFFFFF; box-shadow: 0 4px 20px rgba(37,211,102,0.25); }
.aurora-btn--wa:hover { background: #20BA5A; transform: translateY(-2px); }

.aurora-hero__trust {
	display: flex; align-items: center; gap: 12px;
	font-size: 12px; color: #A09888; flex-wrap: wrap; opacity: 0;
}

.aurora-trust-dot {
	width: 3px; height: 3px; border-radius: 50%;
	background: #C85A2A; flex-shrink: 0;
}

.aurora-glass-card {
	position: absolute;
	bottom: 80px; right: 80px;
	background: rgba(255,255,255,0.75);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border: 1px solid rgba(255,255,255,0.9);
	border-radius: 20px; padding: 24px 28px;
	box-shadow: 0 8px 32px rgba(200,90,42,0.08), 0 2px 8px rgba(0,0,0,0.06);
	opacity: 0;
}

.aurora-glass-card__num {
	display: block;
	font-family: 'Cormorant Garamond', serif;
	font-size: 42px; font-style: italic; font-weight: 600;
	color: #1A1714; line-height: 1; margin-bottom: 4px;
}

.aurora-glass-card__label {
	display: block; font-size: 12px; color: #A09888;
}

@media (max-width: 900px) {
	.aurora-hero__content { padding: 80px 24px 120px; }
	.aurora-hero__inner { max-width: 100%; }
	.aurora-hero__ctas { flex-direction: column; }
	.aurora-btn { justify-content: center; width: 100%; }
	.aurora-glass-card {
		position: relative; bottom: auto; right: auto;
		margin-top: 48px; display: inline-flex;
		align-items: center; gap: 12px; padding: 16px 20px;
	}
	.aurora-glass-card__num { font-size: 32px; }
	.aurora-blob { filter: blur(60px); }
}

/* ============================================
   AURORA HERO — VIDEO-BEHIND OVERRIDES
   Layer order: video 0, blobs 1, grain 2, text 3.
   ============================================ */

.aurora-hero { background: transparent !important; }

.aurora-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	z-index: 0;
}

.aurora-hero__bg { z-index: 1; }
.aurora-grain { z-index: 2; }
.aurora-hero__content { z-index: 3; }

/* Cap aurora blob opacity at 0.65 max so the video reads through */
@keyframes auroraBreathe {
	0%   { opacity: 0.35; transform: translate(0,0) scale(1) rotate(0deg); }
	33%  { opacity: 0.60; transform: translate(4%,6%) scale(1.09) rotate(4deg); }
	66%  { opacity: 0.45; transform: translate(-4%,3%) scale(0.95) rotate(-3deg); }
	100% { opacity: 0.65; transform: translate(5%,-4%) scale(1.05) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
	.aurora-blob { animation: none; opacity: 0.5; }
	.aurora-hero__eyebrow,
	.aurora-hero__sub,
	.aurora-hero__ctas,
	.aurora-hero__trust,
	.aurora-glass-card { opacity: 1 !important; }
}

/* ============ END AURORA HERO CARIBBEAN ============ */


/* ============================================
   AURORA HERO — TEXT READABILITY SCRIM
   Warm veil behind the text column (above video + blobs,
   below text). Left-anchored on desktop so the video still
   shows through on the right with a warm tint; a gentle
   top-down veil on mobile where text is full-bleed.
   ============================================ */
.aurora-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background: linear-gradient(100deg,
		rgba(250,249,246,0.88) 0%,
		rgba(250,249,246,0.62) 32%,
		rgba(250,249,246,0.22) 60%,
		rgba(250,249,246,0) 88%);
}

@media (max-width: 900px) {
	.aurora-hero::before {
		background: linear-gradient(180deg,
			rgba(250,249,246,0.62) 0%,
			rgba(250,249,246,0.50) 40%,
			rgba(250,249,246,0.42) 100%);
	}
}
/* ============ END READABILITY SCRIM ============ */

/* CARIBBEAN HERO TEXT — FULL OPACITY FIX */
.aurora-hero .aurora-hero__headline,
.aurora-hero .aurora-hero__headline .line,
.aurora-hero--caribbean .aurora-hero__headline,
.aurora-hero--caribbean .aurora-hero__headline .line {
color: #FFFFFF !important;
opacity: 1 !important;
text-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
}

.aurora-hero--caribbean .aurora-accent {
color: #FF8C5A !important;
opacity: 1 !important;
text-shadow: 0 0 40px rgba(255,107,53,0.4) !important;
}

.aurora-hero .aurora-hero__eyebrow,
.aurora-hero--caribbean .aurora-hero__eyebrow {
color: #FF8C5A !important;
opacity: 1 !important;
}

.aurora-hero .aurora-hero__sub,
.aurora-hero--caribbean .aurora-hero__sub {
color: rgba(255,255,255,0.85) !important;
opacity: 1 !important;
}

.aurora-hero .aurora-hero__trust,
.aurora-hero--caribbean .aurora-hero__trust,
.aurora-hero .aurora-hero__trust span,
.aurora-hero--caribbean .aurora-hero__trust span {
color: rgba(255,255,255,0.7) !important;
opacity: 1 !important;
}

/* REDUCE VIDEO OPACITY instead of text */
.aurora-hero__video {
opacity: 0.45 !important;
}

/* STRENGTHEN SCRIM so text always readable */
.aurora-hero::before {
background: linear-gradient(
to right,
rgba(14,12,10,0.72) 0%,
rgba(14,12,10,0.55) 50%,
rgba(14,12,10,0.2) 100%
) !important;
opacity: 1 !important;
}

/* ============================================================================
   GX GROWTH REDESIGN - navy / orange growth-agency homepage + service pages.
   Self-contained, prefixed .gx-, does not affect existing cream/terracotta pages.
   ========================================================================== */
:root {
	--gx-navy: #0C1A2B;
	--gx-navy2: #132438;
	--gx-orange: #F97316;
	--gx-orange-d: #EA6407;
	--gx-ink: #0C1A2B;
	--gx-muted: #5A6676;
	--gx-line: #E6E8EC;
	--gx-soft: #F4F6F9;
}

.gx { color: var(--gx-ink); font-family: var(--f-body); }
.gx-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding-left: clamp(20px, 5vw, 64px); padding-right: clamp(20px, 5vw, 64px); }
.gx-wrap--narrow { max-width: 860px; }

.gx-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gx-orange); margin-bottom: 14px; }
.gx-eyebrow--light { color: var(--gx-orange); }

.gx-head { text-align: center; max-width: 720px; margin: 0 auto clamp(36px, 5vw, 56px); }
.gx-head__title { font-family: var(--f-body); font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--gx-ink); }
.gx-head__title--light { color: #fff; }
.gx-head__title--left { text-align: left; }
.gx-head__sub { color: var(--gx-muted); margin-top: 12px; font-size: 1.05rem; }

/* ----- Buttons ----- */
.gx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 15px 30px; border-radius: 50px; font-weight: 700; font-size: 0.95rem; line-height: 1; white-space: nowrap; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); }
.gx-btn svg { flex-shrink: 0; }
.gx-btn--orange { background: var(--gx-orange); color: #fff; box-shadow: 0 12px 30px -10px rgba(249,115,22,0.6); }
.gx-btn--orange:hover { background: var(--gx-orange-d); transform: translateY(-3px); box-shadow: 0 18px 40px -10px rgba(249,115,22,0.7); }
.gx-btn--ghost { background: transparent; color: var(--gx-ink); border: 1.5px solid var(--gx-line); }
.gx-btn--ghost:hover { border-color: var(--gx-navy); transform: translateY(-3px); }
.gx-btn--ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.3); }
.gx-btn--ghost-light:hover { background: rgba(255,255,255,0.08); border-color: #fff; transform: translateY(-3px); }
.gx-btn--wa { background: var(--whatsapp); color: #fff; box-shadow: 0 12px 30px -10px rgba(37,211,102,0.5); }
.gx-btn--wa:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -10px rgba(37,211,102,0.6); }
.gx-btn--lg { padding: 18px 38px; font-size: 1.02rem; }

/* ----- Reveal ----- */
.gx-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.gx-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .gx-reveal { opacity: 1 !important; transform: none !important; } }

/* ----- 1. Hero ----- */
.gx-hero { background: #fff; padding: clamp(72px, 11vh, 132px) 0 clamp(56px, 8vw, 100px); }
.gx-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.gx-hero__title { font-size: clamp(2.4rem, 5.2vw, 4rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.025em; color: var(--gx-ink); }
.gx-hero__sub { color: var(--gx-muted); font-size: clamp(1.05rem, 1.6vw, 1.2rem); line-height: 1.55; margin: 22px 0 30px; max-width: 46ch; }
.gx-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Hero mosaic */
.gx-hero__mosaic { display: grid; grid-template-columns: 130px 1fr 130px; grid-template-rows: 250px 170px; gap: 14px; }
.gx-m { border-radius: 16px; padding: 22px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
.gx-m--1 { grid-column: 1; grid-row: 1; background: linear-gradient(155deg, var(--gx-navy), var(--gx-navy2)); color: #fff; }
.gx-m--2 { grid-column: 2; grid-row: 1 / span 2; background: linear-gradient(155deg, var(--gx-orange), var(--gx-orange-d)); color: #fff; justify-content: center; align-items: flex-start; }
.gx-m--3 { grid-column: 3; grid-row: 1; background: var(--gx-soft); color: var(--gx-ink); border: 1px solid var(--gx-line); justify-content: space-between; }
.gx-m--3 svg { color: var(--gx-orange); }
.gx-m--4 { grid-column: 1; grid-row: 2; background: linear-gradient(155deg, var(--gx-navy), var(--gx-navy2)); color: #fff; }
.gx-m--5 { grid-column: 3; grid-row: 2; background: linear-gradient(155deg, var(--gx-orange), var(--gx-orange-d)); color: #fff; justify-content: center; }
.gx-m__num { font-size: 2rem; font-weight: 800; line-height: 1; }
.gx-m__label { font-size: 0.74rem; color: rgba(255,255,255,0.75); margin-top: 6px; }
.gx-m__big { font-size: 1.5rem; font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; }
.gx-m__big--sm { font-size: 1.15rem; }
.gx-m__tag { font-size: 0.9rem; font-weight: 700; }
.gx-m__tag--light { color: rgba(255,255,255,0.9); }
.gx-bars { display: flex; align-items: flex-end; gap: 6px; height: 54px; margin-top: 12px; }
.gx-bars span { flex: 1; background: rgba(255,255,255,0.28); border-radius: 3px 3px 0 0; }
.gx-bars span:last-child { background: var(--gx-orange); }
.gx-m__pulse { position: absolute; top: 20px; right: 20px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,0.7); animation: gxPulse 2s infinite; }
@keyframes gxPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.6); } 70% { box-shadow: 0 0 0 14px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

/* ----- 2. Positioning ----- */
.gx-position { background: #fff; padding: clamp(48px, 7vw, 90px) 0; }
.gx-position__text { text-align: center; font-size: clamp(1.4rem, 3vw, 2.15rem); font-weight: 700; line-height: 1.32; letter-spacing: -0.01em; color: var(--gx-ink); }

/* ----- 3. Trust strip ----- */
.gx-trust { background: var(--gx-soft); border-top: 1px solid var(--gx-line); border-bottom: 1px solid var(--gx-line); padding: 22px 0; }
.gx-trust__row { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; }
.gx-trust__item { font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gx-muted); }
.gx-trust__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gx-orange); }

/* ----- 4. Stats bar ----- */
.gx-stats { background: linear-gradient(135deg, var(--gx-navy), var(--gx-navy2)); padding: clamp(48px, 7vw, 82px) 0; }
.gx-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.gx-stats__grid--trio { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 760px; margin: 0 auto; gap: 40px; }
.gx-stat__num { display: block; font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; color: #fff; line-height: 1; }
.gx-stat__label { display: block; margin-top: 10px; color: rgba(255,255,255,0.62); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.76rem; font-weight: 600; }

/* ----- 5. Services ----- */
.gx-services { background: #fff; padding: clamp(60px, 9vw, 110px) 0; }
.gx-services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gx-card { background: #fff; border: 1px solid var(--gx-line); border-radius: 16px; padding: 34px 30px; display: flex; flex-direction: column; align-items: flex-start; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); }
.gx-card:hover { transform: translateY(-5px); border-color: var(--gx-orange); box-shadow: 0 24px 50px -24px rgba(12,26,43,0.3); }
.gx-card__icon { width: 54px; height: 54px; border-radius: 12px; background: var(--gx-navy); color: #fff; display: grid; place-items: center; margin-bottom: 18px; transition: background 0.3s var(--ease); }
.gx-card:hover .gx-card__icon { background: var(--gx-orange); }
.gx-card__name { font-size: 1.18rem; font-weight: 700; color: var(--gx-ink); margin-bottom: 10px; }
.gx-card__outcome { color: var(--gx-muted); font-size: 0.96rem; line-height: 1.55; flex: 1; }
.gx-card__link { margin-top: 18px; color: var(--gx-orange); font-weight: 700; font-size: 0.9rem; }

/* Homepage "What we do" cards - orange transparent glass */
#gx-services .gx-card { background: rgba(249,115,22,0.07); border-color: rgba(249,115,22,0.28); }
#gx-services .gx-card:hover { background: rgba(249,115,22,0.12); border-color: var(--gx-orange); box-shadow: 0 24px 50px -24px rgba(249,115,22,0.35); }
#gx-services .gx-card__icon { background: var(--gx-orange); }

/* Service-page cards (index + related) - navy "image" treatment, distinct from homepage */
.gx-services--index .gx-card,
.gx-services--related .gx-card { position: relative; overflow: hidden; background: linear-gradient(155deg, var(--gx-navy), var(--gx-navy2)); border-color: rgba(255,255,255,0.08); }
.gx-services--index .gx-card::before,
.gx-services--related .gx-card::before { content: ''; position: absolute; top: -46px; right: -46px; width: 150px; height: 150px; border: 32px solid rgba(249,115,22,0.16); border-radius: 50%; pointer-events: none; }
.gx-services--index .gx-card > *,
.gx-services--related .gx-card > * { position: relative; }
.gx-services--index .gx-card__name,
.gx-services--related .gx-card__name { color: #fff; }
.gx-services--index .gx-card__outcome,
.gx-services--related .gx-card__outcome { color: rgba(255,255,255,0.72); }
.gx-services--index .gx-card__icon,
.gx-services--related .gx-card__icon { background: rgba(255,255,255,0.1); }
.gx-services--index .gx-card:hover,
.gx-services--related .gx-card:hover { border-color: var(--gx-orange); box-shadow: 0 26px 54px -24px rgba(12,26,43,0.55); }
.gx-services--index .gx-card:hover .gx-card__icon,
.gx-services--related .gx-card:hover .gx-card__icon { background: var(--gx-orange); }

/* Index service cards - themed visual media band (imagery on main services page) */
.gx-card--media { padding-top: 0; }
.gx-card--media .gx-card__media { display: block; align-self: stretch; position: relative; margin: 0 -30px 24px; height: 150px; overflow: hidden; border-bottom: 1px solid rgba(255,255,255,0.1); background: linear-gradient(150deg, #0C1A2B, #1B3350); }
.gx-card--media .gx-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,26,43,0) 55%, rgba(12,26,43,0.55)); pointer-events: none; }
.gx-card--media .gx-card__media--bars, .gx-card--media .gx-card__media--posts { background: linear-gradient(150deg, #132438, #0C1A2B); }
.gx-card--media .gx-card__media--wire, .gx-card--media .gx-card__media--ledger, .gx-card--media .gx-card__media--search { background: linear-gradient(150deg, #1B3350, #0C1A2B); }
.gx-card--media .gx-card__media-art { position: absolute; top: 50%; left: 50%; width: 300px; transform: translate(-50%, -50%) scale(0.5); transform-origin: center; }
.gx-card--media .gx-card__media-art .gx-viz { width: 300px; max-width: none; margin: 0; }
.gx-card--media .gx-card__icon { margin-top: 4px; }

/* ----- 6. Growth showcase ----- */
.gx-showcase { background: var(--gx-soft); padding: clamp(60px, 9vw, 110px) 0; }
.gx-showcase__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.gx-showcase__lead { color: var(--gx-muted); font-size: 1.08rem; line-height: 1.6; margin: 16px 0 22px; }
.gx-checklist { margin: 0 0 28px; }
.gx-checklist li { position: relative; padding-left: 32px; margin-bottom: 13px; font-weight: 600; color: var(--gx-ink); }
.gx-checklist li::before { content: ''; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(249,115,22,0.15); background-image: linear-gradient(transparent, transparent); }
.gx-checklist li::after { content: ''; position: absolute; left: 6px; top: 7px; width: 7px; height: 4px; border-left: 2px solid var(--gx-orange); border-bottom: 2px solid var(--gx-orange); transform: rotate(-45deg); }
.gx-dash { background: linear-gradient(155deg, var(--gx-navy), var(--gx-navy2)); border-radius: 20px; padding: 32px; color: #fff; box-shadow: 0 34px 64px -34px rgba(12,26,43,0.55); }
.gx-dash__top { display: flex; justify-content: space-between; align-items: center; }
.gx-dash__label { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: rgba(255,255,255,0.6); font-weight: 600; }
.gx-dash__chip { background: rgba(249,115,22,0.18); color: var(--gx-orange); padding: 5px 14px; border-radius: 50px; font-size: 0.72rem; font-weight: 700; }
.gx-dash__hero { display: block; font-size: clamp(2.4rem, 5vw, 3rem); font-weight: 800; margin: 14px 0 22px; }
.gx-dash__bars { display: flex; align-items: flex-end; gap: 8px; height: 110px; margin-bottom: 24px; }
.gx-dash__bars span { flex: 1; background: rgba(255,255,255,0.16); border-radius: 4px 4px 0 0; }
.gx-dash__bars span:last-child { background: var(--gx-orange); }
.gx-dash__row { display: flex; gap: 16px; }
.gx-dash__metric { flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 16px; }
.gx-dash__mnum { display: block; font-size: 1.4rem; font-weight: 800; }
.gx-dash__mlabel { font-size: 0.74rem; color: rgba(255,255,255,0.6); }

/* ----- 7. Insights ----- */
.gx-insights { background: #fff; padding: clamp(60px, 9vw, 110px) 0; }
.gx-insights__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gx-post { display: flex; flex-direction: column; border: 1px solid var(--gx-line); border-radius: 16px; overflow: hidden; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); }
.gx-post:hover { transform: translateY(-5px); border-color: var(--gx-orange); box-shadow: 0 24px 50px -24px rgba(12,26,43,0.3); }
.gx-post__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--gx-navy); }
.gx-post__media img { width: 100%; height: 100%; object-fit: cover; }
.gx-post__ph { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(135deg, var(--gx-navy), var(--gx-navy2)); }
.gx-post__ph::before { content: ''; position: absolute; top: -34%; right: -14%; width: 56%; aspect-ratio: 1; border: 14px solid rgba(255,255,255,0.12); border-radius: 50%; }
.gx-post__ph::after { content: ''; position: absolute; left: 16px; bottom: 16px; width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,0.92); box-shadow: 0 0 0 7px rgba(255,255,255,0.16); }
/* distinct art per insight card */
.gx-post:nth-child(3n+1) .gx-post__ph { background: radial-gradient(circle at 80% 26%, rgba(249,115,22,0.6), transparent 44%), linear-gradient(135deg, #0C1A2B, #1a3350); }
.gx-post:nth-child(3n+2) .gx-post__ph { background: radial-gradient(circle at 24% 76%, rgba(255,255,255,0.16), transparent 46%), linear-gradient(135deg, #F97316, #C04E0A); }
.gx-post:nth-child(3n+2) .gx-post__ph::after { background: var(--gx-navy); box-shadow: 0 0 0 7px rgba(12,26,43,0.18); }
.gx-post:nth-child(3n+3) .gx-post__ph { background: linear-gradient(120deg, #132438 0 46%, #F97316 46% 56%, #132438 56% 100%); }
.gx-post__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.gx-post__date { color: var(--gx-orange); font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.gx-post__title { font-size: 1.15rem; font-weight: 700; color: var(--gx-ink); margin: 8px 0 14px; line-height: 1.26; flex: 1; }
.gx-post__link { color: var(--gx-orange); font-weight: 700; font-size: 0.9rem; }

/* ----- 8. CTA ----- */
.gx-cta { background: linear-gradient(135deg, var(--gx-navy), var(--gx-navy2)); padding: clamp(60px, 9vw, 110px) 0; }
.gx-cta__inner { text-align: center; max-width: 760px; margin: 0 auto; }
.gx-cta__title { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; color: #fff; line-height: 1.14; letter-spacing: -0.02em; }
.gx-cta__sub { color: rgba(255,255,255,0.72); font-size: 1.08rem; margin: 16px 0 28px; }
.gx-cta__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ----- Service page ----- */
.gx-svc-hero { position: relative; overflow: hidden; background: linear-gradient(155deg, var(--gx-navy), var(--gx-navy2)); padding: clamp(118px, 18vh, 208px) 0 clamp(76px, 11vw, 128px); }
.gx-svc-hero__overlay { position: absolute; inset: 0; pointer-events: none; }
.gx-svc-hero__overlay::before { content: ''; position: absolute; top: -120px; right: -120px; width: 420px; height: 420px; border: 70px solid rgba(249,115,22,0.1); border-radius: 50%; }
.gx-svc-hero__overlay::after { content: ''; position: absolute; bottom: -160px; left: -80px; width: 320px; height: 320px; border: 56px solid rgba(255,255,255,0.04); border-radius: 50%; }
.gx-svc-hero__inner { position: relative; max-width: 860px; }
.gx-svc-hero__title { font-size: clamp(2.6rem, 6vw, 4.2rem); font-weight: 800; color: #fff; line-height: 1.05; letter-spacing: -0.03em; }
.gx-svc-hero__sub { color: rgba(255,255,255,0.74); font-size: clamp(1.12rem, 1.6vw, 1.3rem); line-height: 1.55; margin: 22px 0 32px; max-width: 62ch; }
.gx-svc-hero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.gx-pains { background: #fff; padding: clamp(56px, 9vw, 100px) 0; }
.gx-pains__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gx-pain { background: rgba(249,115,22,0.06); border: 1px solid rgba(249,115,22,0.2); border-left: 4px solid var(--gx-orange); border-radius: 12px; padding: 28px; }
.gx-pain__num { color: var(--gx-orange); font-weight: 800; font-size: 1.05rem; }
.gx-pain__text { color: var(--gx-ink); font-weight: 600; margin-top: 10px; line-height: 1.45; }

.gx-gets { background: var(--gx-soft); padding: clamp(56px, 9vw, 100px) 0; }
.gx-gets__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.gx-get { position: relative; overflow: hidden; border-radius: 14px; background: linear-gradient(155deg, var(--gx-navy), var(--gx-navy2)); color: #fff; padding: 30px 26px; min-height: 196px; display: flex; flex-direction: column; justify-content: flex-end; }
.gx-get__deco { position: absolute; top: -40px; right: -40px; width: 150px; height: 150px; border: 34px solid rgba(249,115,22,0.14); border-radius: 50%; }
.gx-get__name { position: relative; font-size: 1.12rem; font-weight: 700; }
.gx-get__desc { position: relative; color: rgba(255,255,255,0.72); font-size: 0.92rem; line-height: 1.5; margin-top: 8px; }

.gx-how { background: linear-gradient(135deg, var(--gx-navy), var(--gx-navy2)); padding: clamp(56px, 9vw, 100px) 0; }
.gx-how__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.gx-how__grid--4 { grid-template-columns: repeat(4, 1fr); }
.gx-step__num { width: 48px; height: 48px; border-radius: 50%; background: var(--gx-orange); color: #fff; font-weight: 800; font-size: 1.2rem; display: grid; place-items: center; margin-bottom: 16px; }
.gx-step__name { color: #fff; font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.gx-step__text { color: rgba(255,255,255,0.68); line-height: 1.55; }

.gx-results { background: #fff; padding: clamp(56px, 9vw, 100px) 0; }
.gx-results__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gx-result { text-align: center; background: rgba(27,51,80,0.05); border: 1px solid rgba(27,51,80,0.14); border-radius: 16px; padding: 42px 24px; }
.gx-result__num { display: block; font-size: clamp(2.2rem, 4.5vw, 3rem); font-weight: 800; color: var(--gx-orange); line-height: 1; }
.gx-result__label { display: block; color: var(--gx-muted); margin-top: 10px; }
.gx-results__note { text-align: center; color: var(--gx-muted); font-size: 0.82rem; margin-top: 26px; }

/* ----- Responsive ----- */
@media (max-width: 980px) {
	.gx-hero__grid { grid-template-columns: 1fr; }
	.gx-hero__mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
	.gx-m { min-height: 128px; justify-content: flex-end; }
	.gx-m--1, .gx-m--2, .gx-m--3, .gx-m--4, .gx-m--5 { grid-column: auto; grid-row: auto; }
	.gx-m--2 { grid-column: 1 / span 2; min-height: 100px; justify-content: center; }
	.gx-showcase__grid { grid-template-columns: 1fr; }
	.gx-services__grid, .gx-gets__grid { grid-template-columns: repeat(2, 1fr); }
	.gx-insights__grid, .gx-pains__grid, .gx-how__grid, .gx-results__grid { grid-template-columns: repeat(2, 1fr); }
	.gx-insights__grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
	.gx-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
	.gx-stats__grid--trio { grid-template-columns: 1fr; gap: 28px; }
	.gx-services__grid, .gx-services__grid--3, .gx-gets__grid, .gx-pains__grid, .gx-how__grid, .gx-results__grid { grid-template-columns: 1fr; }
	.gx-hero__ctas .gx-btn, .gx-cta__actions .gx-btn, .gx-svc-hero__ctas .gx-btn { width: 100%; }
}

/* ===========================================================================
   GX v2 - paradox-style homepage additions (fonts, badges, feature block,
   stacked showcase, insights excerpt, footer social). Still .gx- scoped.
   ========================================================================= */
.gx { font-family: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.gx-hero__title, .gx-position__title, .gx-head__title, .gx-cta__title, .gx-cta__title,
.gx-m__big, .gx-feat__title, .gx-stat__num, .gx-dash__hero, .gx-result__num,
.gx-svc-hero__title, .gx-feature__word, .gx-card__name, .gx-post__title,
.gx-step__name, .gx-get__name { font-family: 'Space Grotesk', system-ui, sans-serif; }

/* Buttons - new variants */
.gx-btn--dark { background: var(--gx-navy); color: #fff; box-shadow: 0 12px 30px -12px rgba(12,26,43,0.55); }
.gx-btn--dark:hover { background: var(--gx-navy2); transform: translateY(-3px); box-shadow: 0 18px 40px -12px rgba(12,26,43,0.6); }
.gx-btn--text { background: transparent; color: var(--gx-ink); padding: 15px 8px; font-weight: 700; }
.gx-btn--text:hover { color: var(--gx-orange); transform: translateX(2px); }

/* Hero mosaic block 1 decorative ring */
.gx-m__ring { position: absolute; top: -26px; right: -26px; width: 110px; height: 110px; border: 22px solid rgba(249,115,22,0.18); border-radius: 50%; pointer-events: none; }

/* Positioning block - heading + supporting line + CTA + badges */
.gx-position__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.gx-position__title { font-size: clamp(1.5rem, 3.2vw, 2.35rem); font-weight: 800; line-height: 1.22; letter-spacing: -0.02em; color: var(--gx-ink); max-width: 20ch; }
.gx-position__inner .gx-position__text { font-size: 1.08rem; font-weight: 400; line-height: 1.6; color: var(--gx-muted); max-width: 56ch; margin: 18px 0 28px; }
.gx-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 30px; margin-top: 46px; }
.gx-badge { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gx-muted); }
.gx-badge svg { color: var(--gx-orange); flex-shrink: 0; }

/* Feature block */
.gx-feature { background: #fff; padding: clamp(60px, 9vw, 110px) 0; }
.gx-feature__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.gx-feats { margin-top: 28px; display: flex; flex-direction: column; gap: 22px; }
.gx-feat { display: flex; gap: 18px; align-items: flex-start; }
.gx-feat__icon { flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; background: var(--gx-soft); border: 1px solid var(--gx-line); color: var(--gx-orange); display: grid; place-items: center; }
.gx-feat__title { font-size: 1.08rem; font-weight: 700; color: var(--gx-ink); margin-bottom: 4px; }
.gx-feat__text { color: var(--gx-muted); font-size: 0.96rem; line-height: 1.5; }
.gx-feature__visual { position: relative; overflow: hidden; border-radius: 18px; min-height: 420px; background: linear-gradient(155deg, var(--gx-navy), var(--gx-navy2)); color: #fff; padding: 44px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 34px 64px -34px rgba(12,26,43,0.5); }
.gx-feature__shape { position: absolute; border-radius: 50%; pointer-events: none; }
.gx-feature__shape--a { top: -60px; right: -60px; width: 220px; height: 220px; border: 44px solid rgba(249,115,22,0.14); }
.gx-feature__shape--b { bottom: -80px; left: -50px; width: 200px; height: 200px; border: 40px solid rgba(255,255,255,0.05); }
.gx-feature__kicker { position: relative; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.74rem; font-weight: 700; color: var(--gx-orange); }
.gx-feature__word { position: relative; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin: 14px 0; }
.gx-feature__foot { position: relative; color: rgba(255,255,255,0.7); font-size: 0.95rem; }

/* Showcase - stacked visuals */
.gx-showcase__stack { display: flex; flex-direction: column; gap: 22px; }
.gx-abstract { position: relative; overflow: hidden; border-radius: 18px; min-height: 160px; background: linear-gradient(155deg, var(--gx-orange), var(--gx-orange-d)); display: flex; align-items: flex-end; padding: 26px; box-shadow: 0 24px 50px -28px rgba(249,115,22,0.5); }
.gx-abstract__ring { position: absolute; top: -40px; right: -30px; width: 150px; height: 150px; border: 30px solid rgba(255,255,255,0.18); border-radius: 50%; pointer-events: none; }
.gx-abstract__ring--2 { top: 36px; right: 64px; width: 90px; height: 90px; border-width: 20px; border-color: rgba(12,26,43,0.12); }
.gx-abstract__label { position: relative; color: #fff; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; }

/* Insights - category tag + excerpt + more */
.gx-post .gx-post__title { flex: 0 0 auto; margin: 8px 0 10px; }
.gx-post__tag { color: var(--gx-orange); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.gx-post__excerpt { color: var(--gx-muted); font-size: 0.92rem; line-height: 1.55; margin-bottom: 14px; flex: 1; }
.gx-insights__more { text-align: center; margin-top: 42px; }

/* CTA sub-note */
.gx-cta__note { color: rgba(255,255,255,0.6); font-size: 0.86rem; margin-top: 18px; }

/* Footer social icons */
.site-footer__social { display: flex; gap: 12px; margin-top: 16px; }
.site-footer__social a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: rgba(255,255,255,0.75); border: 1px solid rgba(255,255,255,0.14); transition: color 0.25s, border-color 0.25s, background 0.25s; }
.site-footer__social a:hover { color: #fff; border-color: #F97316; background: rgba(249,115,22,0.14); }

/* GX v2 responsive */
@media (max-width: 980px) {
	.gx-feature__grid { grid-template-columns: 1fr; }
	.gx-feature__visual { min-height: 300px; }
}
@media (max-width: 620px) {
	.gx-badges { gap: 12px 18px; }
	.gx-feat__icon { width: 42px; height: 42px; }
}

/* ===========================================================================
   GX v3 - hybrid homepage (cinematic video hero, marquee ticker,
   letter-reveal, mosaic split). .gx- scoped; reveal states gated under .gx-js.
   ========================================================================= */

/* ----- Cinematic video hero ----- */
.gx-vhero { position: relative; overflow: hidden; min-height: 92vh; display: flex; align-items: center; background: var(--gx-navy); }
.gx-vhero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gx-vhero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,18,30,0.88) 0%, rgba(10,18,30,0.72) 46%, rgba(10,18,30,0.5) 100%); }
.gx-vhero__inner { position: relative; z-index: 2; max-width: 700px; padding-top: 128px; padding-bottom: 96px; }
.gx-vhero__eyebrow { display: block; color: rgba(255,255,255,0.72); font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 24px; }
.gx-vhero__title { font-family: 'Space Grotesk', system-ui, sans-serif; color: #fff; font-size: clamp(2.4rem, 5.6vw, 4.4rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.028em; margin: 0; }
.gx-vhero__title .gx-words { display: block; }
.gx-vhero__sub { color: rgba(255,255,255,0.82); font-size: clamp(1.05rem, 1.6vw, 1.25rem); line-height: 1.55; margin: 28px 0 34px; max-width: 50ch; }
.gx-vhero__ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.gx-btn--white { background: #fff; color: var(--gx-navy); box-shadow: 0 12px 30px -14px rgba(0,0,0,0.5); }
.gx-btn--white:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -16px rgba(0,0,0,0.55); }
.gx-btn--outline-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.5); }
.gx-btn--outline-light:hover { background: rgba(255,255,255,0.1); border-color: #fff; transform: translateY(-3px); }

/* reveal gating: fade sub + ctas only once JS is active */
.gx-js .gx-vhero__sub { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease 0.8s, transform 0.6s ease 0.8s; }
.gx-js .gx-vhero__ctas { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease 1s, transform 0.6s ease 1s; }
.gx-js .gx-vhero.is-ready .gx-vhero__sub,
.gx-js .gx-vhero.is-ready .gx-vhero__ctas { opacity: 1; transform: none; }

/* ----- Letter / word reveal ----- */
.gx-word { display: inline-block; overflow: hidden; vertical-align: top; }
.gx-js .gx-word > span { display: inline-block; transform: translateY(105%); opacity: 0; transition: transform 0.7s cubic-bezier(0.22,0.61,0.36,1), opacity 0.5s ease; transition-delay: var(--wd, 0s); }
.gx-js .gx-word.in > span { transform: translateY(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.gx-js .gx-word > span { transform: none !important; opacity: 1 !important; }
	.gx-js .gx-vhero__sub, .gx-js .gx-vhero__ctas { opacity: 1 !important; transform: none !important; }
}

/* ----- Scrolling ticker banner ----- */
.gx-ticker { background: var(--gx-navy); overflow: hidden; padding: 14px 0; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); white-space: nowrap; }
.gx-ticker__inner { display: inline-block; white-space: nowrap; will-change: transform; animation: gxMarquee 30s linear infinite; }
.gx-ticker:hover .gx-ticker__inner { animation-play-state: paused; }
.gx-ticker__item { font-family: 'Space Grotesk', system-ui, sans-serif; color: #fff; font-weight: 500; font-size: 13px; letter-spacing: 0.06em; }
@keyframes gxMarquee { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
@media (prefers-reduced-motion: reduce) { .gx-ticker__inner { animation: none; } }

/* ----- Mosaic split (section 3) ----- */
.gx-split { background: #fff; padding: clamp(60px, 9vw, 110px) 0; }
.gx-split__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.gx-split__lead { color: var(--gx-muted); font-size: 1.08rem; line-height: 1.6; margin: 16px 0 26px; max-width: 48ch; }

@media (max-width: 980px) {
	.gx-split__grid { grid-template-columns: 1fr; }
	.gx-vhero { min-height: 80vh; }
	.gx-vhero__inner { padding-top: 112px; padding-bottom: 72px; }
}

/* "You get" bullet inside offer cards (still used by all service pages) */
.gx-get__youget{ display:flex; gap:8px; align-items:flex-start; margin:12px 0 0; padding-top:12px; border-top:1px solid rgba(255,255,255,.14); font-size:13.5px; line-height:1.45; font-weight:500; color:#fff; }
.gx-get__check{ flex:0 0 auto; color:#F97316; font-weight:700; }

/* ============================================================
   SERVICE PAGE - THEMED CSS VISUAL BANNER (gx-svc-viz / gx-viz-*)
   One large static "image" block per service, keyed by visual.
   ============================================================ */
.gx-svc-viz-sec{ background:#fff; padding:clamp(40px,6vw,80px) 0; }
.gx-svc-viz__frame{ position:relative; overflow:hidden; border-radius:18px; min-height:clamp(300px,42vw,420px); display:flex; align-items:center; justify-content:center; padding:clamp(28px,5vw,64px); background:linear-gradient(155deg,#0C1A2B,#132438); border:1px solid rgba(12,26,43,.08); }
.gx-svc-viz__frame::before{ content:''; position:absolute; top:-140px; right:-120px; width:380px; height:380px; border:64px solid rgba(249,115,22,.12); border-radius:50%; pointer-events:none; }
.gx-svc-viz__frame::after{ content:''; position:absolute; bottom:-150px; left:-90px; width:260px; height:260px; border:48px solid rgba(255,255,255,.05); border-radius:50%; pointer-events:none; }
.gx-svc-viz__cap{ position:absolute; left:clamp(20px,4vw,40px); bottom:clamp(20px,4vw,40px); z-index:3; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(14px,1.6vw,18px); letter-spacing:.01em; color:#fff; background:rgba(12,26,43,.55); backdrop-filter:blur(4px); padding:8px 16px; border-radius:999px; }

/* light-frame variants read like documents/screens */
.gx-svc-viz-sec--search .gx-svc-viz__frame,
.gx-svc-viz-sec--wire .gx-svc-viz__frame,
.gx-svc-viz-sec--ledger .gx-svc-viz__frame,
.gx-svc-viz-sec--print .gx-svc-viz__frame{ background:#F6F4F0; border-color:#E3E0DA; }
.gx-svc-viz-sec--search .gx-svc-viz__cap,
.gx-svc-viz-sec--wire .gx-svc-viz__cap,
.gx-svc-viz-sec--ledger .gx-svc-viz__cap,
.gx-svc-viz-sec--print .gx-svc-viz__cap{ background:rgba(12,26,43,.82); }

.gx-viz{ position:relative; z-index:2; width:100%; max-width:560px; }

/* SEO - search / SERP */
.gx-viz--search{ display:flex; flex-direction:column; gap:20px; }
.gx-viz__searchbar{ position:relative; height:56px; border-radius:999px; background:#fff; border:1px solid #E3E0DA; box-shadow:0 10px 30px rgba(12,26,43,.08); display:flex; align-items:center; padding:0 24px; }
.gx-viz__mag{ width:22px; height:22px; border:3px solid #0C1A2B; border-radius:50%; position:relative; }
.gx-viz__mag::after{ content:''; position:absolute; right:-8px; bottom:-6px; width:12px; height:3px; border-radius:2px; background:#0C1A2B; transform:rotate(45deg); }
.gx-viz__cursor{ width:120px; height:10px; border-radius:4px; background:rgba(12,26,43,.14); margin-left:16px; }
.gx-viz__results{ display:flex; flex-direction:column; gap:14px; }
.gx-viz__results span{ display:block; height:14px; border-radius:5px; background:rgba(12,26,43,.14); }
.gx-viz__results span:first-child{ background:#F97316; }

/* Google Ads - bar chart */
.gx-viz--bars{ display:flex; align-items:flex-end; justify-content:space-between; gap:clamp(10px,2.5vw,26px); height:clamp(180px,26vw,260px); }
.gx-viz--bars span{ flex:1; border-radius:8px 8px 0 0; background:linear-gradient(180deg,#F97316,#C04E0A); }
.gx-viz--bars span:last-child{ background:linear-gradient(180deg,#FB923C,#F97316); box-shadow:0 0 0 2px rgba(249,115,22,.3); }

/* Social - post grid */
.gx-viz--posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gx-viz--posts span{ aspect-ratio:1; border-radius:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); }
.gx-viz--posts span:nth-child(1){ background:linear-gradient(155deg,#F97316,#C04E0A); }
.gx-viz--posts span:nth-child(4){ background:rgba(249,115,22,.22); }
.gx-viz--posts span:nth-child(5){ background:linear-gradient(155deg,#F97316,#C04E0A); }

/* Brand - wireframe */
.gx-viz--wire{ display:flex; flex-direction:column; gap:14px; background:#fff; border-radius:12px; padding:clamp(20px,3vw,34px); box-shadow:0 14px 36px rgba(12,26,43,.1); }
.gx-viz__wbar{ height:12px; width:42%; border-radius:4px; background:rgba(12,26,43,.16); }
.gx-viz__whero{ height:clamp(80px,12vw,120px); border-radius:10px; background:linear-gradient(135deg,#0C1A2B,#132438); }
.gx-viz__wrow{ height:12px; border-radius:4px; background:rgba(12,26,43,.14); }
.gx-viz__wrow--s{ width:62%; }
.gx-viz__wrow:first-of-type{ background:rgba(249,115,22,.55); width:80%; }
.gx-viz__wcards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:4px; }
.gx-viz__wcards span{ height:clamp(44px,7vw,64px); border-radius:8px; background:#F0EDE8; border:1px solid #E3E0DA; }
.gx-viz__wcards span:nth-child(2){ background:rgba(249,115,22,.16); }

/* Operations - ledger rows */
.gx-viz--ledger{ display:flex; flex-direction:column; gap:12px; background:#fff; border-radius:12px; padding:clamp(20px,3vw,34px); box-shadow:0 14px 36px rgba(12,26,43,.1); }
.gx-viz__lrow{ display:flex; align-items:center; gap:16px; padding-bottom:12px; border-bottom:1px solid rgba(12,26,43,.08); }
.gx-viz__lrow:last-child{ border-bottom:none; padding-bottom:0; }
.gx-viz__lrow i{ display:block; height:12px; border-radius:4px; background:rgba(12,26,43,.16); flex:1; }
.gx-viz__lrow b{ display:block; height:12px; width:72px; border-radius:4px; background:#F97316; }
.gx-viz__lrow:nth-child(even) b{ background:rgba(249,115,22,.4); }

/* CRM - conversion funnel */
.gx-viz--funnel{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.gx-viz--funnel span{ height:clamp(40px,6vw,58px); border-radius:10px; background:linear-gradient(180deg,#F97316,#C04E0A); display:block; }
.gx-viz--funnel span:nth-child(1){ opacity:.55; }
.gx-viz--funnel span:nth-child(2){ opacity:.7; }
.gx-viz--funnel span:nth-child(3){ opacity:.85; }

/* Print - stacked card mockups */
.gx-viz--print{ position:relative; height:clamp(220px,32vw,320px); }
.gx-viz__card{ position:absolute; left:50%; top:50%; width:clamp(150px,22vw,220px); height:clamp(200px,30vw,290px); border-radius:14px; background:#fff; box-shadow:0 22px 50px rgba(12,26,43,.22); transform:translate(-50%,-50%) rotate(6deg); }
.gx-viz__card::before{ content:''; position:absolute; inset:18px 18px auto 18px; height:38%; border-radius:8px; background:linear-gradient(135deg,#F97316,#C04E0A); }
.gx-viz__card::after{ content:''; position:absolute; left:18px; right:18px; bottom:24px; height:10px; border-radius:4px; background:rgba(12,26,43,.18); box-shadow:0 20px 0 rgba(12,26,43,.12),0 40px 0 rgba(12,26,43,.08); }
.gx-viz__card--back{ background:#F0EDE8; transform:translate(-50%,-50%) rotate(-9deg); box-shadow:0 16px 40px rgba(12,26,43,.14); }
.gx-viz__card--back::before{ background:rgba(249,115,22,.4); }

@media (max-width:620px){
  .gx-viz--posts{ grid-template-columns:repeat(2,1fr); }
  .gx-svc-viz__frame{ min-height:280px; }
}

/* ── gx-results metrics grid ── */
.gx-results{padding:100px 0;background:transparent;}
.gx-res-hd{text-align:center;margin-bottom:56px;}
.gx-res-hd h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(28px,4vw,48px);font-weight:700;color:#0C1A2B;margin:12px 0 16px;}
.gx-res-hd p{color:#4A5A6E;font-size:16px;max-width:480px;margin:0 auto;}
.gx-res-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:900px){.gx-res-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:500px){.gx-res-grid{grid-template-columns:1fr;}}
.gx-rc{border-radius:16px;padding:28px 24px;display:flex;flex-direction:column;gap:8px;min-height:180px;overflow:hidden;}
.gx-rc--wide{grid-column:span 2;}
@media(max-width:500px){.gx-rc--wide{grid-column:span 1;}}
.gx-rc--dark{background:#0C1A2B;color:#fff;}
.gx-rc--orange{background:#F97316;color:#fff;}
.gx-rc--light{background:#F6F4F0;color:#0C1A2B;}
.gx-rc--mid{background:#1E2E42;color:#fff;}
.gx-rc-svc{font-size:11px;font-weight:600;letter-spacing:.06em;opacity:.5;text-transform:uppercase;}
.gx-rc-num{font-family:'Space Grotesk',sans-serif;font-size:clamp(32px,4vw,48px);font-weight:700;line-height:1;}
.gx-rc-lbl{font-size:13px;opacity:.7;}
.gx-rc-note{font-size:11px;opacity:.4;margin-top:auto;}
.gx-rc-bars{display:flex;align-items:flex-end;gap:4px;height:40px;margin-top:auto;}
.gx-rc-bars span{flex:1;background:currentColor;opacity:.3;border-radius:2px 2px 0 0;}
.gx-rc-bars span:last-child{opacity:1;}
.gx-rc-dots{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;}
.gx-rc-dots span{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.25;}
.gx-rc-dots span:nth-child(1),.gx-rc-dots span:nth-child(2),.gx-rc-dots span:nth-child(3){opacity:1;}
.gx-rc-wave{height:30px;margin-top:auto;background:linear-gradient(90deg,transparent,currentColor,transparent);opacity:.15;border-radius:2px;}
.gx-rc-ring{width:50px;height:50px;border-radius:50%;border:6px solid currentColor;opacity:.2;margin-top:auto;position:relative;}
.gx-rc-ring::after{content:'';position:absolute;top:4px;left:4px;right:4px;bottom:4px;border-radius:50%;border:4px solid;border-color:#F97316 transparent transparent transparent;}
.gx-rc-steps{display:flex;gap:4px;align-items:flex-end;margin-top:auto;}
.gx-rc-steps span{width:12px;background:currentColor;border-radius:2px 2px 0 0;}
.gx-rc-steps span:nth-child(1){height:10px;opacity:.2;}
.gx-rc-steps span:nth-child(2){height:20px;opacity:.4;}
.gx-rc-steps span:nth-child(3){height:30px;opacity:.7;}
.gx-rc-steps span:nth-child(4){height:40px;opacity:1;}
.gx-feat__title { font-size: 1.05rem; font-weight: 700; color: var(--dark, #0C1A2B); margin-bottom: 6px; }
.gx-feat__text { color: var(--fg-mid, #4A5A6E); font-size: 0.94rem; line-height: 1.6; }