/* ────────────────────────────────────────────────────────────────
   TOKENS
──────────────────────────────────────────────────────────────── */
:root {
	--black: lch(2.74% 0 296.81);
	--black-mid: #111111;
	--black-soft: #1a1a1a;
	--white: #fafafa;
	--white-dim: rgba(250, 250, 250, .65);
	--white-faint: rgba(250, 250, 250, .08);
	--off-white: #f4f4f2;
	--off-white2: #ececea;
	--dark-text: #111111;
	--mid-text: #555555;
	--glass-bg: rgba(0, 0, 0, .15);
	--glass-bg-w: rgba(255, 255, 255, .55);
	--glass-bd: rgba(250, 250, 250, .12);
	--glass-bd-w: rgba(0, 0, 0, .08);
	--font-serif: 'KyivType Sans', Georgia, serif;
	--font-sans: 'Albert Sans', system-ui, sans-serif;
	--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
	--t-fast: .25s;
	--t-mid: .55s;
	--t-slow: .9s;
	--section-pad: 140px 80px;
	--display-width: 1400px;
}

/* ────────────────────────────────────────────────────────────────
   RESET
──────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0
}

html {
	scroll-behavior: auto;
	overflow-x: hidden;
}

body {
	background: var(--black);
	color: var(--white);
	font-family: var(--font-sans);
	font-weight: 300;
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased
}

@media(hover:hover)and(pointer:fine) {
	body {
		cursor: none
	}
}

a {
	text-decoration: none;
	color: inherit
}

ul {
	list-style: none
}

em {
	font-style: italic;
	font-family: var(--font-serif)
}

strong {
	font-weight: 700;
}

.section-inner {
	max-width: var(--display-width);
	margin: auto
}

.font-sans {
	font-family: var(--font-sans);
}

/* ────────────────────────────────────────────────────────────────
   WHITE / LIGHT SECTIONS
──────────────────────────────────────────────────────────────── */
.section-white {
	background: var(--off-white) !important
}

.dark {
	color: var(--dark-text) !important
}

.section-title.dark {
	color: var(--dark-text) !important
}

.section-title.dark em {
	color: var(--mid-text) !important
}

.section-label {
	display: inline-block;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--white-dim);
	margin-bottom: 20px
}

.section-white .section-label {
	color: var(--mid-text) !important
}

.section-title {
	font-family: var(--font-serif);
	font-size: clamp(32px, 5vw, 60px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -1px;
	color: var(--white);
	margin-bottom: 32px
}

.section-title em {
	color: var(--white-dim)
}

.section-intro {
	margin-bottom: 80px
}

.section-intro.center {
	text-align: center
}

/* ── Privacy / Legal pages — constrained readable layout ── */
.page-template-default main,
.single-page,
body .wp-block-post-content,
body main,
body main>article {
	max-width: var(--display-width);
	margin-inline: auto;
}

body main {
	padding-inline: clamp(20px, 5vw, 60px);
	padding-block: 60px;
}

/* Fix stretched paragraph/heading text on these pages */
body p,
body li,
body h1,
body h2,
body h3,
body h4 {
	max-width: none;
	/* allow full width of the constrained container */
	line-height: 1.75;
}

body h1,
body h2,
body h3 {
	margin-top: 2rem;
	margin-bottom: 0.5rem;
	font-weight: 700;
}

body p,
body li {
	color: var(--white, rgba(255, 255, 255));
	font-size: 15px;
	margin-bottom: 0.5rem;
}

body hr {
	margin-block-end: 1rem;
	border-top: 1px solid var(--glass-bd) !important;
}

/* ────────────────────────────────────────────────────────────────
   PAGE TRANSITION
──────────────────────────────────────────────────────────────── */
.page-transition {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	flex-direction: column;
	pointer-events: none
}

.pt-bar {
	flex: 1;
	background: var(--white);
	transform: scaleY(1);
	transform-origin: top;
	transition: transform var(--t-slow) var(--ease-expo)
}

.pt-bar:nth-child(2) {
	transition-delay: .06s
}

.pt-bar:nth-child(3) {
	transition-delay: .12s
}

.page-transition.is-out .pt-bar {
	transform: scaleY(0)
}

/* ────────────────────────────────────────────────────────────────
   CURSOR
──────────────────────────────────────────────────────────────── */
.cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 8px;
	height: 8px;
	background: var(--white);
	border-radius: 50%;
	pointer-events: none;
	z-index: 9999;
	transform: translate(-50%, -50%);
	transition: width var(--t-fast) var(--ease-back), height var(--t-fast) var(--ease-back), background var(--t-fast);
	mix-blend-mode: difference
}

.cursor.is-link {
	width: 48px;
	height: 48px
}

.cursor.is-button {
	width: 56px;
	height: 56px
}

.cursor.is-hidden {
	opacity: 0
}

.cursor-follower {
	position: fixed;
	top: 0;
	left: 0;
	width: 36px;
	height: 36px;
	border: 1px solid rgba(250, 250, 250, .4);
	border-radius: 50%;
	pointer-events: none;
	z-index: 9998;
	transform: translate(-50%, -50%);
	transition: width var(--t-fast) var(--ease-back), height var(--t-fast) var(--ease-back)
}

/* ────────────────────────────────────────────────────────────────
   NAVBAR
──────────────────────────────────────────────────────────────── */
.sos-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 800;
	padding: 28px 80px;
	transition: padding var(--t-mid) var(--ease-expo), background var(--t-mid)
}

.sos-nav.scrolled {
	padding: 16px 80px;
	background: rgba(10, 10, 10, .85);
	backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--glass-bd)
}

.nav-wrap {
	max-width: var(--display-width);
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: space-between
}

.nav-logo {
	display: flex;
	align-items: baseline;
	gap: 6px
}

.logo-sos {
	font-family: var(--font-serif);
	font-size: 22px;
	font-weight: 900;
	letter-spacing: -1px;
	color: var(--white)
}

.logo-full {
	font-size: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--white-dim)
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 40px
}

.nav-link {
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--white-dim);
	transition: color var(--t-fast);
	position: relative
}

.nav-link::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--white);
	transition: width var(--t-mid) var(--ease-expo)
}

.nav-link:hover {
	color: var(--white)
}

.nav-link:hover::after {
	width: 100%
}

.nav-cta {
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	border: 1px solid rgba(250, 250, 250, .3);
	padding: 10px 24px;
	border-radius: 50px;
	color: var(--white);
	transition: all var(--t-fast)
}

.nav-cta:hover {
	background: var(--white);
	color: var(--black)
}

.nav-burger {
	display: none;
	flex-direction: column;
	gap: 6px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	z-index: 1;
}

.burger-line {
	display: block;
	width: 24px;
	height: 1px;
	background: var(--white);
	transition: all .3s
}

.sos-nav.on-white .logo-sos,
.sos-nav.on-white .logo-full,
.sos-nav.on-white .nav-link,
.sos-nav.on-white .nav-cta {
	color: var(--dark-text);
}

.sos-nav.on-white.scrolled {
	background-color: var(--white-dim);
}

.sos-nav.on-white .logo-sos img {
	filter: brightness(0) invert(0);
}

.sos-nav.on-white .nav-cta {
	border-color: rgba(0, 0, 0, .25);
}

.sos-nav.on-white .nav-cta:hover {
	background: var(--dark-text);
	color: var(--white);
}

.sos-nav.on-white .burger-line {
	background: var(--dark-text);
}

/* ────────────────────────────────────────────────────────────────
   GLASS CARD
──────────────────────────────────────────────────────────────── */
.glass-card {
	/* background: var(--glass-bg); */
	background-color: rgba(0, 0, 0, .1);
	border: 1px solid var(--glass-bd);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 20px
}

/* ────────────────────────────────────────────────────────────────
   BUTTONS
──────────────────────────────────────────────────────────────── */
.cta-primary {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--black);
	color: var(--white);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 16px 32px;
	border-radius: 50px;
	border: none;
	cursor: pointer;
	transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast) var(--ease-back);
	position: relative;
	overflow: hidden
}

.cta-primary::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--black-soft);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--t-mid) var(--ease-expo);
	border-radius: inherit
}

.cta-primary:hover::before {
	transform: scaleX(1);
	transform-origin: left
}

.cta-primary:hover {
	color: var(--white)
}

.cta-primary:hover .cta-arrow {
	transform: translateX(4px)
}

.cta-primary span {
	position: relative;
	z-index: 1
}

.cta-arrow {
	transition: transform var(--t-fast)
}

.cta-ghost {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--glass-bg-w);
	color: var(--black-mid);
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 16px 24px;
	border: 1px solid var(--glass-bg);
	border-radius: 50px;
	transition: all var(--t-fast)
}

.cta-ghost:hover {
	color: var(--white);
	border-color: var(--white)
}

.full-w {
	width: 100%;
	justify-content: center;
	border-radius: 14px
}

/* ────────────────────────────────────────────────────────────────
   REVEAL ANIMATIONS
──────────────────────────────────────────────────────────────── */
.reveal-text .char,
.reveal-text .word {
	display: inline-block;
	/* overflow: hidden */
}

/* .reveal-line {
	overflow: hidden
} */

.reveal-card {
	opacity: 0;
	transform: translateY(40px)
}

.magnetic {
	will-change: transform
}

/* ────────────────────────────────────────────────────────────────
   HERO
──────────────────────────────────────────────────────────────── */
.hero-section-wrapper {
	width: 100%;
	margin-inline: auto;
	background-color: var(--off-white);
}

.hero {
	min-height: 100svh;
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	align-items: center;
	padding: 140px 80px 80px;
	position: relative;
	/* overflow: hidden; */
	max-width: var(--display-width);
	margin: auto;
	gap: 60px;
	background: var(--off-white);
}

.hero-bg-text {
	position: absolute;
	font-family: var(--font-serif);
	font-size: clamp(200px, 30vw, 400px);
	font-weight: 400;
	color: rgba(0, 0, 0, .04);
	right: -60px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	user-select: none;
	letter-spacing: -20px;
	line-height: 1
}

.hero-content {
	z-index: 2;
	max-width: 620px
}

.hero-eyebrow {
	font-size: 11px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--dark-text);
	margin-bottom: 28px
}

.hero-title {
	font-family: var(--font-serif);
	font-size: clamp(64px, 9vw, 130px);
	font-weight: 400;
	line-height: .95;
	letter-spacing: -4px;
	color: var(--white);
	margin-bottom: 32px;
	color: var(--dark-text);
}

.ht-line {
	display: block;
	overflow: visible;
}

.ht-italic {
	font-style: italic;
	color: var(--mid-text);
	margin-right: 16px;
}

.hero-sub {
	font-size: 16px;
	line-height: 1.25;
	color: var(--mid-text);
	max-width: 460px;
	margin-bottom: 48px
}

.hero-actions {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap
}

.hero-scroll-hint {
	position: absolute;
	bottom: 48px;
	left: 80px;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--mid-text);
	font-size: 10px;
	letter-spacing: 3px;
	text-transform: uppercase
}

.scroll-line {
	width: 48px;
	height: 1px;
	background: var(--white-dim);
	position: relative;
	overflow: hidden;
	background: rgba(0, 0, 0, .2);
}

.scroll-line::after {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: var(--dark-text);
	animation: scrollLine 2s var(--ease-expo) infinite
}

@keyframes scrollLine {
	0% {
		left: -100%
	}

	100% {
		left: 100%
	}
}

/* ────────────────────────────────────────────────────────────────
   HERO RIGHT — wraps BA slider + stat cards
──────────────────────────────────────────────────────────────── */
.hero-right {
	position: relative;
	height: 520px;
	display: flex;
	align-items: center;
	justify-content: center
}

/* floating stat cards */
.hi-card {
	position: absolute;
	padding: 20px 24px;
	min-width: 160px
}

.hi-card--1 {
	top: 25%;
	right: 20px;
	z-index: 10
}

.hi-card--3 {
	bottom: 20px;
	left: 20px;
	z-index: 10;
	text-align: right
}

.hi-card-label {
	font-size: 10px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--black-mid);
	margin-bottom: 8px
}

.hi-card-val {
	font-family: var(--font-serif);
	font-size: 32px;
	font-weight: 700;
	color: var(--mid-text)
}

.hi-card-val span {
	font-size: 13px;
	font-family: var(--font-sans);
	color: var(--mid-text)
}

.hi-score {
	font-family: var(--font-serif);
	font-size: 44px;
	font-weight: 900;
	color: var(--mid-text)
}

/* ────────────────────────────────────────────────────────────────
   BEFORE / AFTER SLIDER
──────────────────────────────────────────────────────────────── */
.ba-slider {
	position: relative;
	width: 100%;
	height: 420px;
	border-radius: 24px;
	overflow: hidden;
	user-select: none;
	cursor: ew-resize;
	border: 1px solid var(--glass-bd);
	flex-shrink: 0;
	max-width: 440px
}

.ba-before,
.ba-after {
	position: absolute;
	inset: 0
}

.ba-before-img,
.ba-after-img {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center
}

.ba-before-img {
	/* background: linear-gradient(135deg, #1a1a2e, #2d1b4e); */
	background-color: #f8f8f7;

	img {
		object-fit: contain;
	}
}

.ba-after-img {
	/* background: linear-gradient(135deg, #0a0a0a, #1a1a1a); */
	background-color: #f8f8f7;

	img {
		object-fit: contain;
	}
}

.ba-after {
	clip-path: inset(0 50% 0 0);
	transition: clip-path 0s
}

/* placeholder visuals */
.ba-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	color: var(--white-dim);
	text-align: center
}

.ba-ph-icon {
	font-size: 48px
}

.ba-placeholder p {
	font-size: 14px;
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height: 1.6
}

.ba-placeholder--after p {
	color: var(--white)
}

.ba-placeholder--after {
	color: var(--white)
}

/* labels */
.ba-label {
	position: absolute;
	top: 20px;
	z-index: 5;
	font-size: 10px;
	letter-spacing: 3px;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 20px;
	backdrop-filter: blur(10px)
}

.ba-label--before {
	left: 16px;
	background: var(--glass-bd-w);
	color: var(--black-mid);
}

.ba-label--after {
	right: 16px;
	background: var(--glass-bd-w);
	color: var(--black-mid);
}

/* handle */
.ba-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: ew-resize
}

.ba-handle-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2px;
	background: var(--white)
}

.ba-handle-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--white);
	color: var(--black);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 20px rgba(0, 0, 0, .4);
	transition: transform var(--t-fast) var(--ease-back)
}

.ba-slider:active .ba-handle-btn,
.ba-handle:hover .ba-handle-btn {
	transform: translateY(-50%) scale(1.1)
}

/* ────────────────────────────────────────────────────────────────
   SCROLL DOT TRANSITION
──────────────────────────────────────────────────────────────── */
.dot-transition {
	position: relative;
	height: 160px;
	background: var(--off-white);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	z-index: 0;
}

.dot-ball {
	width: 200vmax;
	height: 200vmax;
	transform: scale(0.01);
	z-index: 0;
}

/* ────────────────────────────────────────────────────────────────
   MARQUEE
──────────────────────────────────────────────────────────────── */
.marquee-wrap {
	overflow: hidden;
	border-top: 1px solid var(--glass-bd);
	border-bottom: 1px solid var(--glass-bd);
	padding: 18px 0;
	background: var(--black-mid)
}

.marquee-wrap--white {
	background: var(--off-white2);
	border-top-color: var(--glass-bd-w);
	border-bottom-color: var(--glass-bd-w)
}

.marquee-wrap--white .marquee-item {
	color: var(--mid-text)
}

.marquee-wrap--white .marquee-item em {
	color: rgba(0, 0, 0, .15)
}

.marquee-wrap--reverse .marquee-track {
	animation-direction: reverse
}

.marquee-track {
	display: flex;
	white-space: nowrap;
	animation: marqueeScroll 28s linear infinite;
	will-change: transform
}

@keyframes marqueeScroll {
	from {
		transform: translateX(0)
	}

	to {
		transform: translateX(-50%)
	}
}

.marquee-item {
	font-family: var(--font-serif);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--white-dim);
	padding: 0 24px;
	display: inline-flex;
	align-items: center;
	gap: 24px
}

.marquee-item em {
	font-style: normal;
	color: var(--white-faint);
	font-size: 18px
}

.marquee-wrap:hover .marquee-track {
	animation-play-state: paused
}

/* ────────────────────────────────────────────────────────────────
   ABOUT US  — Convex Curved Slider
──────────────────────────────────────────────────────────────── */
.about-us-section {
	background: var(--black);
	padding: var(--section-pad);
	overflow: hidden;
}

.aus-inner {
	max-width: var(--display-width);
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 80px;
	align-items: center;
	display: flex;
	flex-direction: column;
}

.aus-text-col {
	max-width: 64%;
	margin-right: auto;
}

.aus-body {
	font-size: 15px;
	line-height: 1.9;
	color: var(--white-dim);
	margin-bottom: 40px;
}

.aus-stats {
	display: flex;
	gap: 40px;
}

.aus-stat {
	display: flex;
	flex-direction: column;
}

.aus-stat strong {
	font-family: var(--font-serif);
	font-size: 28px;
	font-weight: 700;
	color: var(--white);
}

.aus-stat span {
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--white-dim);
	margin-top: 4px;
}

/* ── Curved / Convex Slider ── */
.aus-slider {
	position: relative;
	width: 100%;
	height: 500px;
	perspective: 1200px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.aus-track {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}

.aus-slide {
	position: absolute;
	top: 50%;
	left: 50%;
	transform-origin: center center;
	border-radius: 20px;
	/* overflow: hidden; */
	cursor: pointer;
	transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
	color: var(--white);
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.aus-slide .service-content {
	display: flex;
	flex-direction: column;
	position: absolute;
	bottom: 0;
	background: rgba(0 0 0 / 0.75);
	width: 100%;
	padding: 20px;
	border-radius: 20px;
	transition: all 0.3s ease;
	opacity: 0;

	background: linear-gradient(to top,
			rgba(0, 0, 0, 0.65),
			rgba(0, 0, 0, 0.8),
			transparent);
	backdrop-filter: blur(8px);
}

.aus-slide.active .service-content {
	opacity: 1;
}

.aus-slide:hover .service-content {
	opacity: 0;
}

.aus-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 20px;
	transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.aus-slide:hover img {
	transform: scale(1.04);
}

.aus-slide .service-title {
	color: var(--white);
	font-weight: 700;
	font-size: 0.8rem;
}

.aus-slide .service-description {
	color: var(--white);
	font-size: 0.75rem;
}

/* ── AUS SLIDE — matches features card layout ── */
.aus-slide {
	background: var(--black-soft);
	border: 1px solid var(--glass-bd);
	border-radius: 16px;
	padding: .5rem;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex-shrink: 0;
}

/* ── Capsule label ── */
.aus-slide .fm-capsule {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(250, 250, 250, .08);
	border: 1px solid var(--glass-bd);
	border-radius: 12px;
	padding: 6px 14px;
	align-self: flex-start;
	flex-shrink: 0;
	padding: 12px;
	width: 100%;
}

.aus-slide .fm-cap-num {
	font-size: 10px;
	letter-spacing: 2px;
	color: var(--white-dim);
	font-family: var(--font-serif);
}

.aus-slide .fm-cap-name {
	font-size: 12px;
	font-weight: 600;
	color: var(--white);
	letter-spacing: 0.3px;
}

/* ── Image enclosed in padded frame ── */
.aus-slide .fm-img-frame {
	background: rgba(250, 250, 250, .04);
	border-radius: 12px;
	flex-shrink: 0;
}

.aus-slide .fm-img-inner {
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.aus-slide .fm-img-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

/* ── Brief text ── */
.aus-slide .fm-brief {
	font-size: 14px;
	line-height: 1.25;
	color: var(--white-dim);
	margin: 0;
}

/* prev / next arrows */
.aus-prev,
.aus-next {
	position: absolute;
	bottom: -48px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--glass-bg);
	border: 1px solid var(--glass-bd);
	color: var(--white);
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: all 0.25s;
	backdrop-filter: blur(10px);
	z-index: 10;
}

.aus-prev {
	left: calc(50% - 52px);
}

.aus-next {
	left: calc(50% + 8px);
}

.aus-prev:hover,
.aus-next:hover {
	background: var(--white);
	color: var(--black);
}

/* Responsive */
@media (max-width: 1024px) {
	.aus-inner {
		grid-template-columns: 1fr;
		gap: 60px;
	}

	.aus-slider {
		height: 380px;
	}
}

@media (max-width: 768px) {
	.aus-slider {
		height: 500px;
		margin-top: -50px;
	}
}

/* ────────────────────────────────────────────────────────────────
   SERVICES (white bg)
──────────────────────────────────────────────────────────────── */
.services-section {
	padding: var(--section-pad)
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 2px
}

.service-card {
	position: relative;
	padding: 48px;
	border: 1px solid var(--glass-bd-w);
	background: var(--off-white);
	overflow: hidden;
	transition: background var(--t-mid);
	display: flex;
	gap: 24px;
	align-items: center;
}

.service-card--white {
	background: var(--off-white)
}

.service-card--white:hover {
	background: var(--white)
}

.sc-image-wrap {
	position: relative;
	width: 100%;
	height: 260px;
	overflow: hidden;
	border-radius: 16px;
	margin-bottom: 32px;
	background: var(--off-white2)
}

.sc-image {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .8s var(--ease-expo), filter .8s
}

.service-card:hover .sc-image {
	transform: scale(1.06);
	filter: brightness(.95)
}

.sc-image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%
}

.sc-num {
	font-family: var(--font-serif);
	font-size: 96px;
	font-weight: 900;
	color: rgba(0, 0, 0, .06)
}

.sc-hover-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .12);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity var(--t-mid);
	border-radius: 16px
}

.service-card:hover .sc-hover-overlay {
	opacity: 1
}

.sc-hover-label {
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--white);
	border: 1px solid rgba(255, 255, 255, .6);
	padding: 10px 24px;
	border-radius: 50px
}

.sc-title {
	font-family: var(--font-serif);
	font-size: 24px;
	font-weight: 700;
	margin-bottom: 12px
}

.sc-title.dark {
	color: var(--dark-text)
}

.sc-desc {
	font-size: 14px;
	line-height: 1.8
}

.sc-desc.dark {
	color: var(--mid-text)
}

/* ────────────────────────────────────────────────────────────────
   ABOUT (dark)
──────────────────────────────────────────────────────────────── */
.about-section {
	padding: var(--section-pad);
	background: var(--black)
}

.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 100px;
	align-items: center
}

.about-visual {
	position: relative;
	height: 520px
}

.av-main {
	position: absolute;
	top: 0;
	left: 0;
	right: 60px;
	padding: 32px
}

.av-label {
	font-size: 10px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--white-dim);
	margin-bottom: 24px
}

.av-bars {
	display: flex;
	flex-direction: column;
	gap: 16px
}

.av-bar-row {
	display: flex;
	align-items: center;
	gap: 16px
}

.av-bar-row span {
	font-size: 11px;
	letter-spacing: 1px;
	color: var(--white-dim);
	width: 50px;
	flex-shrink: 0
}

.av-bar {
	flex: 1;
	height: 4px;
	background: var(--glass-bd);
	border-radius: 2px;
	position: relative;
	overflow: hidden
}

.av-bar::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: var(--w, 50%);
	height: 100%;
	background: var(--white);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1.2s var(--ease-expo) .3s
}

.av-bar.is-visible::after {
	transform: scaleX(1)
}

.av-badge {
	position: absolute;
	bottom: 60px;
	right: 0;
	padding: 20px 28px;
	text-align: center
}

.av-badge-num {
	font-family: var(--font-serif);
	font-size: 40px;
	font-weight: 900;
	color: var(--white);
	line-height: 1
}

.av-badge-lbl {
	font-size: 10px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--white-dim);
	margin-top: 6px
}

.av-tag {
	position: absolute;
	top: 60px;
	right: -20px;
	padding: 12px 20px;
	font-size: 13px;
	color: var(--white)
}

.about-body {
	font-size: 15px;
	line-height: 1.9;
	color: var(--white-dim);
	margin-bottom: 36px
}

.about-stats {
	display: flex;
	gap: 40px;
	margin-bottom: 48px
}

.as-item {
	display: flex;
	flex-direction: column
}

.as-item strong {
	font-family: var(--font-serif);
	font-size: 28px;
	font-weight: 700;
	color: var(--white)
}

.as-item span {
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--white-dim);
	margin-top: 4px
}

/* ────────────────────────────────────────────────────────────────
   TESTIMONIALS (white bg)
──────────────────────────────────────────────────────────────── */
.testimonials-section {
	padding: var(--section-pad)
}

.testi-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px
}

.testi-card {
	padding: 40px;
	transition: transform var(--t-mid) var(--ease-expo);
	border-radius: 20px
}

.testi-card--white {
	background: var(--white);
	border: 1px solid var(--glass-bd-w)
}

.testi-card--white:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .08)
}

.testi-stars {
	color: #333;
	font-size: 14px;
	letter-spacing: 3px;
	margin-bottom: 20px
}

.testi-quote {
	font-family: var(--font-serif);
	font-size: 18px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.7;
	margin-bottom: 32px
}

.testi-quote.dark {
	color: var(--dark-text)
}

.testi-author {
	display: flex;
	align-items: center;
	gap: 16px
}

.testi-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--off-white2);
	border: 1px solid var(--glass-bd-w);
	flex-shrink: 0
}

.testi-author strong {
	display: block;
	font-size: 14px;
	margin-bottom: 2px
}

.testi-author strong.dark {
	color: var(--dark-text)
}

.testi-author span {
	font-size: 12px;
	color: var(--mid-text)
}

/* ────────────────────────────────────────────────────────────────
   SHOWCASE SECTION  (image hover popover)
──────────────────────────────────────────────────────────────── */
.showcase-section {
	padding: var(--section-pad);
	background: var(--black-mid);
	position: relative;
	overflow: hidden;
}

/* ambient bg circles */
.showcase-bg-circle {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	filter: blur(100px);
	opacity: .12;
}

.sc-c1 {
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, #fff, transparent);
	top: -200px;
	right: -200px;
}

.sc-c2 {
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, #aaa, transparent);
	bottom: -100px;
	left: -100px;
}

.showcase-intro {
	margin-bottom: 64px
}

/* glass card wrapping all items */
.showcase-items {
	padding: 0;
	overflow: hidden;
}

/* individual row items */
.showcase-item {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 28px 40px;
	border-bottom: 1px solid var(--glass-bd);
	position: relative;
	transition: background var(--t-mid);
	cursor: default;
}

.showcase-item:last-child {
	border-bottom: none
}

.showcase-item:hover {
	background: rgba(250, 250, 250, .05)
}

.si-number {
	font-family: var(--font-serif);
	font-size: 13px;
	color: rgba(250, 250, 250, .2);
	letter-spacing: 2px;
	min-width: 36px;
	flex-shrink: 0;
}

.si-content {
	flex: 1
}

.si-title {
	font-family: var(--font-serif);
	font-size: clamp(22px, 3vw, 38px);
	font-weight: 700;
	color: var(--white);
	line-height: 1.1;
	margin-bottom: 4px;
	transition: letter-spacing var(--t-mid) var(--ease-expo);
}

.showcase-item:hover .si-title {
	letter-spacing: 1px
}

.si-sub {
	font-size: 13px;
	letter-spacing: 1px;
	color: var(--white-dim);
	text-transform: uppercase;
}

.si-arrow {
	font-size: 22px;
	color: rgba(250, 250, 250, .15);
	transition: color var(--t-mid), transform var(--t-mid) var(--ease-back);
}

.showcase-item:hover .si-arrow {
	color: var(--white);
	transform: translateX(8px)
}

/* ── POPOVER IMAGE ── */
.showcase-img-popover {
	position: fixed;
	top: 0;
	left: 0;
	width: 260px;
	height: 340px;
	border-radius: 16px;
	overflow: hidden;
	pointer-events: none;
	z-index: 700;
	opacity: 0;
	transform: scale(.85) rotate(-4deg);
	transition: opacity .25s var(--ease-expo), transform .25s var(--ease-expo);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
	border: 1px solid var(--glass-bd);
	will-change: transform;
}

.showcase-img-popover.is-visible {
	opacity: 1;
	transform: scale(1) rotate(-2deg);
}

.showcase-img-popover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ────────────────────────────────────────────────────────────────
   FEATURES SECTION
──────────────────────────────────────────────────────────────── */
.features-section {
	padding: var(--section-pad);
	position: relative;
	overflow: hidden;

	.section-intro {
		margin-block-end: 0;
	}
}

.features-inner {
	max-width: var(--display-width);
	margin: auto;
}

/* ────────────────────────────────────────────────────────────────
   FEATURES DESKTOP — Left list + Right sticky image panel
──────────────────────────────────────────────────────────────── */
.features-desktop {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	min-height: 80vh;
	align-items: start;
}

/* Desktop features section replaced by fan deck */
.features-desktop {
	display: none !important;
}

/* LEFT column — scrollable list */
.fd-list {
	padding-right: 60px;
	border-right: 1px solid var(--glass-bd);
}

.fd-item {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 32px 0;
	border-bottom: 1px solid var(--glass-bd);
	cursor: pointer;
	position: relative;
	transition: padding-left var(--t-mid) var(--ease-expo);
}

.fd-item:first-child {
	border-top: 1px solid var(--glass-bd);
}

.fd-item:hover,
.fd-item.is-active {
	padding-left: 16px;
}

.fd-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--white);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform var(--t-mid) var(--ease-expo);
}

.fd-item.is-active::before,
.fd-item:hover::before {
	transform: scaleY(1);
}

.fd-num {
	font-family: var(--font-serif);
	font-size: 12px;
	color: rgba(250, 250, 250, .2);
	letter-spacing: 2px;
	min-width: 36px;
	flex-shrink: 0;
	transition: color var(--t-mid);
}

.fd-item.is-active .fd-num {
	color: var(--white-dim);
}

.fd-content {
	flex: 1;
}

.fd-title {
	font-family: var(--font-serif);
	font-size: clamp(20px, 2.2vw, 32px);
	font-weight: 700;
	color: rgba(250, 250, 250, .35);
	line-height: 1.1;
	margin-bottom: 6px;
	transition: color var(--t-mid) var(--ease-expo), letter-spacing var(--t-mid) var(--ease-expo);
}

.fd-item.is-active .fd-title,
.fd-item:hover .fd-title {
	color: var(--white);
	letter-spacing: 0.5px;
}

.fd-sub {
	font-size: 13px;
	letter-spacing: 1px;
	color: rgba(250, 250, 250, .2);
	text-transform: uppercase;
	transition: color var(--t-mid);
}

.fd-item.is-active .fd-sub,
.fd-item:hover .fd-sub {
	color: var(--white-dim);
}

.fd-arrow {
	font-size: 20px;
	color: rgba(250, 250, 250, .1);
	transition: color var(--t-mid), transform var(--t-mid) var(--ease-back);
}

.fd-item.is-active .fd-arrow,
.fd-item:hover .fd-arrow {
	color: var(--white);
	transform: translateX(6px);
}

/* RIGHT column — sticky image panel */
.fd-images {
	position: sticky;
	top: 100px;
	padding-left: 60px;
	height: 520px;
	overflow: hidden;
}

.fd-images-inner {
	position: relative;
	width: 100%;
	height: 100%;
}

.fd-img-slide {
	position: absolute;
	inset: 0;
	border-radius: 20px;
	overflow: hidden;
	opacity: 0;
	transform: translateY(30px) scale(0.97);
	transition: opacity 0.55s var(--ease-expo), transform 0.55s var(--ease-expo);
	pointer-events: none;
}

.fd-img-slide.is-active {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

.fd-img-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fd-img-caption {
	position: absolute;
	bottom: 24px;
	left: 24px;
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(0, 0, 0, .55);
	backdrop-filter: blur(10px);
	border: 1px solid var(--glass-bd);
	padding: 10px 20px;
	border-radius: 50px;
}

.fd-cap-num {
	font-size: 11px;
	letter-spacing: 2px;
	color: var(--white-dim);
	font-family: var(--font-serif);
}

.fd-cap-title {
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
	letter-spacing: 0.5px;
}

.fd-popover {
	display: none !important;
}

/* ═══════════════════════════════════════════════════════
   FEATURES MOBILE — Fan Deck
═══════════════════════════════════════════════════════ */
.features-mobile {
	display: block;
}

/* ── Fan deck desktop sizing ── */
@media (min-width: 769px) {
	.fm-stage {
		height: 600px;
		max-width: 480px;
		margin-inline: auto;
	}

	.fm-card {
		max-width: 420px;
	}

	.fm-brief p {
		font-size: 15px;
	}

	.fm-cap-name {
		font-size: 14px;
	}
}

/* @media (max-width: 768px) { */
.features-desktop {
	display: none !important;
}

.features-mobile {
	display: block;
	padding-top: 20px;
}

/* Stage is the fixed-size area the fan lives inside */
.fm-stage {
	position: relative;
	width: 100%;
	min-height: 550px;
	height: 100%;
	margin-bottom: 120px;
}

/* Every card: absolute, full stage width, centred */
.fm-card {
	position: absolute;
	left: 50%;
	top: 0;
	width: calc(100% - 48px);
	max-width: 320px;
	/* translate(-50%) is added by JS along with the rotation */
	background: var(--black-soft);
	border: 1px solid var(--glass-bd);
	border-radius: 24px;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transform-origin: 50% 110%;
	/* pivot below card bottom = fan arc */
	box-shadow: 0 8px 32px rgba(0, 0, 0, .5);
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
	/* we own all touch events */
	will-change: transform;
	/* transition set by JS to avoid fighting with drag */
}

/* ── Alternating black/white card theme ── */

/* Even-indexed cards: WHITE card, black text */
.fm-card[data-theme-card="light"] {
	background: #ffffff;
	border-color: rgba(0, 0, 0, .10);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
	color: #0a0a0a;
}

.fm-card[data-theme-card="light"] .fm-capsule {
	background-color: var(--glass-bd-w);
	border-color: var(--glass-bd-w);
}

.fm-card[data-theme-card="light"] .fm-cap-num,
.fm-card[data-theme-card="light"] .fm-cap-name {
	color: #0a0a0a;
}

.fm-card[data-theme-card="light"] .fm-brief {
	color: rgba(0, 0, 0, .60);
}

/* Odd-indexed cards: BLACK card, white text (already your default dark style) */
.fm-card[data-theme-card="dark"] {
	background: #111111;
	border-color: rgba(255, 255, 255, .10);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .55);
	color: #f5f5f5;
}

.fm-card[data-theme-card="dark"] .fm-capsule {
	background-color: var(--glass-bd);
	border-color: var(--glass-bd);
}

.fm-card[data-theme-card="dark"] .fm-cap-num,
.fm-card[data-theme-card="dark"] .fm-cap-name {
	color: #f5f5f5;
}

.fm-card[data-theme-card="dark"] .fm-brief {
	color: rgba(255, 255, 255, .60);
}

.fm-card:active {
	cursor: grabbing;
}

/* ── capsule label ── */
.fm-capsule {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(250, 250, 250, .08);
	border: 1px solid var(--glass-bd);
	border-radius: 50px;
	padding: 6px 14px;
	align-self: flex-start;
	flex-shrink: 0;
}

.fm-cap-num {
	font-size: 10px;
	letter-spacing: 2px;
	color: var(--white-dim);
	font-family: var(--font-serif);
}

.fm-cap-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--white);
}

/* ── image enclosed in padded frame ── */
.fm-img-frame {
	border-radius: 18px;
	flex-shrink: 0;
}

.fm-img-inner {
	border-radius: 11px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	max-height: 350px;
}

.fm-img-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

/* ── brief ── */
.fm-brief {
	font-size: 14px;
	line-height: 1.7;
	color: var(--white-dim);
	max-width: none;
	margin: 0;
}

/* ── Swipe nav ── */
.fm-swipe-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-top: 8px;
}

.fm-nav-btn {
	background: none;
	border: none;
	color: var(--black-mid);
	font-size: 18px;
	cursor: pointer;
	padding: 8px 12px;
	transition: color 0.2s;
}

.fm-nav-btn:hover {
	color: var(--black);
}

.fm-nav-label {
	font-size: 14px;
	letter-spacing: 2px;
	color: var(--black-mid);
	font-family: var(--font-sans, sans-serif);
	text-transform: uppercase;
}

/* } */

/* ═══════════════════════════════════════════════════════════════
   PRICING SECTION
═══════════════════════════════════════════════════════════════ */
.pricing-section {
	background: var(--off-white, #f5f5f3);
	padding: clamp(60px, 8vw, 120px) clamp(24px, 5vw, 80px);
	display: none;
}

.pricing-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: 60px;
	align-items: center;
}

/* ── Left column ── */
.pricing-left {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.pricing-icon {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #111;
	opacity: 0.5;
}

.pricing-heading {
	font-family: var(--font-sans, sans-serif);
	font-size: clamp(28px, 3.5vw, 42px);
	font-weight: 700;
	color: #111;
	line-height: 1.1;
	margin: 0;
}

.pricing-desc {
	font-size: 14px;
	line-height: 1.7;
	color: #666;
	max-width: 30ch;
	margin: 0;
}

/* ── Right: stacked cards container ── */
.pricing-cards {
	position: relative;
	height: 260px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ── Individual card base ── */
.pc-card {
	position: absolute;
	width: 200px;
	background: #fff;
	border-radius: 20px;
	padding: 24px 22px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-shadow:
		0 2px 8px rgba(0, 0, 0, .06),
		0 8px 24px rgba(0, 0, 0, .05);
}

.pc-label {
	font-size: 13px;
	font-weight: 500;
	color: #999;
	letter-spacing: 0.2px;
}

.pc-price {
	display: flex;
	align-items: flex-start;
	line-height: 1;
	color: #111;
	margin: 4px 0;
}

.pc-price sup {
	font-size: 16px;
	font-weight: 600;
	margin-top: 6px;
	margin-right: 1px;
}

.pc-price .pc-amount {
	font-size: 52px;
	font-weight: 800;
	letter-spacing: -2px;
	line-height: 1;
}

.pc-price sub {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 4px;
	align-self: flex-end;
}

.pc-note {
	font-size: 11px;
	color: #aaa;
	margin: 4px 0 8px;
	line-height: 1.4;
}

.pc-btn {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 50px;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	background: #f0f0ee;
	color: #111;
	transition: background 0.2s, transform 0.2s;
	align-self: flex-start;
}

.pc-btn:hover {
	background: #e0e0de;
}

/* ── Monthly: back-left ── */
.pc-monthly {
	left: 0;
	top: 50%;
	transform: translateY(-50%) rotate(-6deg) scale(0.92);
	z-index: 1;
	transform-origin: bottom center;
}

/* ── Annually: back-right ── */
.pc-annually {
	right: 0;
	top: 50%;
	transform: translateY(-50%) rotate(6deg) scale(0.92);
	z-index: 1;
	transform-origin: bottom center;
}

/* ── Quarterly: front-centre, accent ── */
.pc-quarterly.pc-featured {
	position: relative;
	/* break out of absolute stack */
	background: #f26522;
	/* accent — replace with your brand colour */
	z-index: 3;
	transform: none;
	box-shadow:
		0 8px 24px rgba(242, 101, 34, .3),
		0 2px 8px rgba(0, 0, 0, .08);
}

.pc-quarterly.pc-featured .pc-label,
.pc-quarterly.pc-featured .pc-note {
	color: rgba(255, 255, 255, .65);
}

.pc-quarterly.pc-featured .pc-price {
	color: #fff;
}

/* Top row: label + badge */
.pc-top-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.pc-badge {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	background: #fff;
	color: #f26522;
	padding: 3px 10px;
	border-radius: 50px;
	text-transform: uppercase;
}

/* Inverted button for featured card */
.pc-btn-inv {
	background: rgba(255, 255, 255, .2);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .3);
}

.pc-btn-inv:hover {
	background: rgba(255, 255, 255, .32);
}

/* ── Responsive ── */
@media (max-width: 768px) {
	.pricing-inner {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.pricing-desc {
		max-width: 100%;
	}

	.pricing-cards {
		height: 300px;
	}

	.pc-card {
		width: 175px;
	}

	.pc-amount {
		font-size: 42px !important;
	}

	.pc-monthly {
		left: -10px;
	}

	.pc-annually {
		right: -10px;
	}
}

/* ────────────────────────────────────────────────────────────────
   CONTACT
──────────────────────────────────────────────────────────────── */
.contact-section {
	padding: var(--section-pad);
	background: var(--black);
	position: relative;
	overflow: hidden
}

.contact-bg-text {
	position: absolute;
	font-family: var(--font-serif);
	font-size: clamp(120px, 20vw, 280px);
	font-weight: 400;
	color: rgba(250, 250, 250, .025);
	bottom: -40px;
	right: -40px;
	letter-spacing: -10px;
	pointer-events: none;
	user-select: none
}

.contact-content {
	position: relative;
	z-index: 1;
	max-width: 720px
}

.contact-title {
	font-family: var(--font-serif);
	font-size: clamp(40px, 6vw, 80px);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -2px;
	color: var(--white);
	margin-bottom: 24px
}

.contact-title em {
	color: var(--white-dim)
}

.contact-sub {
	font-size: 15px;
	line-height: 1.9;
	color: var(--white-dim);
	max-width: 520px;
	margin-bottom: 40px
}

.contact-actions {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 64px
}

.contact-form-wrap {
	padding: 48px
}

.contact-form-wrap h3 {
	font-family: var(--font-serif);
	font-size: 22px;
	color: var(--white);
	margin-bottom: 32px
}

.cf-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 24px
}

.cf-field {
	position: relative;
	margin-bottom: 24px
}

.cf-field:last-child {
	margin-bottom: 32px
}

.cf-field input,
.cf-field textarea {
	width: 100%;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--glass-bd);
	padding: 12px 0;
	color: var(--white);
	font-family: var(--font-sans);
	font-size: 14px;
	outline: none;
	resize: none;
	transition: border-color var(--t-fast)
}

.cf-field input::placeholder,
.cf-field textarea::placeholder {
	color: rgba(250, 250, 250, .2)
}

.cf-field input:focus,
.cf-field textarea:focus {
	border-bottom-color: var(--white)
}

.cf-line {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--white);
	transition: width var(--t-mid) var(--ease-expo)
}

.cf-field:focus-within .cf-line {
	width: 100%
}

/* ────────────────────────────────────────────────────────────────
   FOOTER
──────────────────────────────────────────────────────────────── */
.sos-footer {
	border-top: 1px solid var(--glass-bd);
	padding-block: 64px 40px;
	padding-inline: 0;
	background: var(--black);
	width: 100%;
	max-width: var(--display-width);
	margin-inline: auto;
}

.footer-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 32px;
	margin-bottom: 48px
}

.footer-links-row {
	display: flex;
	gap: 36px
}

.footer-links-row a {
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--white-dim);
	transition: color var(--t-fast)
}

.footer-links-row a:hover {
	color: var(--white)
}

.footer-socials {
	display: flex;
	gap: 12px
}

.social-dot {
	width: 40px;
	height: 40px;
	border: 1px solid var(--glass-bd);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 600;
	color: var(--white-dim);
	transition: all var(--t-fast)
}

.social-dot:hover {
	background: var(--white);
	color: var(--black);
	border-color: var(--white)
}

.footer-bottom {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 12px;
	color: rgba(250, 250, 250, .25)
}

.footer-bottom a {
	color: var(--white-dim)
}

.footer-tagline {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 14px;
	color: rgba(250, 250, 250, .15)
}

/* ────────────────────────────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────────────────────────────── */
@media(max-width:1024px) {
	.hero {
		grid-template-columns: 1fr;
		padding: 120px 40px 80px;
		gap: 60px
	}

	.hero-right {
		height: 400px;
		width: 100%;
		max-width: 500px
	}

	.about-grid {
		grid-template-columns: 1fr;
		gap: 60px
	}

	.about-visual {
		height: 360px
	}

	:root {
		--section-pad: 100px 40px
	}

	.sos-nav {
		padding: 20px 40px
	}

	.sos-nav.scrolled {
		padding: 14px 40px
	}

	.hero-scroll-hint {
		left: 40px
	}

	.features-desktop {
		grid-template-columns: 1fr;
	}

	.fd-list {
		padding-right: 0;
		border-right: none;
		border-bottom: 1px solid var(--glass-bd);
		padding-bottom: 40px;
		margin-bottom: 40px;
	}

	.fd-images {
		position: relative;
		top: 0;
		padding-left: 0;
		height: 400px;
	}
}

@media(max-width:768px) {
	.service-card {
		flex-direction: column;
	}

	.services-grid,
	.testi-grid {
		grid-template-columns: 1fr
	}

	.cf-row {
		grid-template-columns: 1fr
	}

	.hero {
		padding: 120px 24px 60px
	}

	.hero-title {
		letter-spacing: -2px
	}

	.hero-right {
		max-width: 100%
	}

	.ba-slider {
		height: 350px;
		max-width: 600px;
	}

	.nav-links {
		display: none;
		flex-direction: column;
		position: fixed;
		inset: 0;
		background: var(--black);
		align-items: center;
		justify-content: center;
		gap: 40px
	}

	.nav-links.is-open {
		display: flex
	}

	.nav-burger {
		display: flex
	}

	:root {
		--section-pad: 80px 24px
	}

	.sos-nav,
	.sos-nav.scrolled {
		padding: 20px 24px
	}

	.hi-card--1 {
		scale: 0.75;
		right: -20px;
		top: 0;
	}

	.hi-card--3 {
		scale: 0.75;
		left: -20px;
	}

	.ba-label--after {
		top: auto;
		bottom: 20px;
	}

	.aus-text-col {
		max-width: 100%;
	}

	.sos-footer {
		padding: 48px 24px 32px
	}

	.footer-top {
		flex-direction: column;
		align-items: flex-start
	}

	.footer-links-row {
		flex-wrap: wrap;
		gap: 20px
	}

	.showcase-item {
		padding: 20px 24px;
		gap: 16px
	}

	.showcase-img-popover {
		width: 200px;
		height: 260px
	}

	.hero-scroll-hint {
		left: 24px
	}
}