/* =========================================================================
   SA Coder — main.css
   Design language: Uxoral-inspired monochrome + vermilion accent
   ========================================================================= */

/* Tokens ----------------------------------------------------------------- */
:root {
	--c-accent: #ff531f;
	--c-star: #ff3d2e;
	--c-ink: #000;
	--c-body: #666;
	--c-muted: #999;
	--c-charcoal: #343330;
	--c-smoke: #eee;
	--c-alabaster: #f3f3f3;
	--c-cultured: #f1f1f1;
	--c-ghost: #f3f3f5;
	--c-hairline: rgba(0, 0, 0, .1);
	--c-hairline-soft: rgba(0, 0, 0, .15);
	--c-white: #fff;

	--font: "Inter", Arial, sans-serif;

	--fs-xxs: .5rem;
	--fs-xs: .75rem;
	--fs-xsm: .875rem;
	--fs-sm: 1rem;
	--fs-md: 1.125rem;
	--fs-base: 1.25rem;
	--fs-lg: 1.5rem;
	--fs-xl: 1.75rem;
	--fs-2xl: 2rem;
	--fs-h2: 3.75rem;
	--fs-inner-h1: 4rem;
	--fs-services-title: 2.5rem;

	--r-sm: .5rem;
	--r-base: .75rem;
	--r-md: 1rem;
	--r-lg: 1.25rem;
	--r-xl: 1.5rem;
	--r-2xl: 2rem;
	--r-pill: 6.25rem;
	--r-full: 999px;

	--container-regular: 84rem;
	--container-large: 120rem;

	--ease-uxoral: cubic-bezier(.165, .84, .44, 1);
	--ease-out-quart: cubic-bezier(.77, 0, .175, 1);

	--nav-h: 5rem;
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: initial; }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--c-ink);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul ul, ol ol { margin: 0; }
input, textarea { font: inherit; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Elements hidden before JS reveals them; CSS-only guard so nothing
   stays invisible when JS fails. */
.js .split-guard { visibility: hidden; }

.screen-reader-text {
	position: absolute !important;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px;
	word-wrap: normal !important;
}
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
	position: fixed; top: 1rem; left: 1rem; z-index: 10000;
	background: var(--c-accent); color: #fff; padding: .75rem 1.25rem;
	border-radius: var(--r-pill);
}

/* Layout ----------------------------------------------------------------- */
.page-wrapper { overflow: clip; }
.container { padding-inline: 1.5rem; margin-inline: auto; }
.container.regular { max-width: var(--container-regular); }
.container.large { max-width: var(--container-large); }
.section { position: relative; }

main { display: block; }

/* Type scale ------------------------------------------------------------- */
.eyebrow {
	font-size: var(--fs-xsm);
	color: var(--c-body);
	letter-spacing: .02em;
	margin-bottom: 1.25rem;
}
.eyebrow .highlight { color: var(--c-accent); font-weight: 600; }

.heading-style-h2 {
	font-size: clamp(2rem, 4.2vw, var(--fs-h2));
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.02em;
}

.font-size-xsm { font-size: var(--fs-xsm); color: var(--c-body); }
.font-size-base { font-size: var(--fs-base); font-weight: 500; }
.font-size-lg { font-size: var(--fs-lg); }
.lemon-grass { color: var(--c-muted); }
.black { color: var(--c-ink); }
.white { color: var(--c-white); }

.inner-heading {
	font-size: clamp(2.25rem, 5vw, var(--fs-inner-h1));
	font-weight: 400;
	line-height: 1.05;
	text-align: center;
	letter-spacing: -.02em;
}

.horizontal-line { height: 1px; background: var(--c-ink); opacity: .15; border: 0; margin: 0; }

/* Buttons ------------------------------------------------------------------ */
.btn-primary, .nav-button, .primary-button {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	position: relative;
	overflow: hidden;
	background: var(--c-accent);
	color: var(--c-white);
	border: 1px solid var(--c-accent);
	border-radius: var(--r-pill);
	font-weight: 600;
	transition: color .3s, border-color .3s;
}
.btn-primary, .primary-button { padding: .75rem 1.5rem; }
.nav-button { padding: .375rem 1.25rem; font-size: var(--fs-sm); }

.nav-button { transition: transform .3s; }
.nav-button:hover { transform: scale(1.05); }

.btn-text-pill { display: block; height: 1.5rem; overflow: hidden; }
.btn-text-stack { display: block; position: relative; transition: transform .3s var(--ease-uxoral); }
.btn-text { display: block; height: 1.5rem; line-height: 1.5rem; white-space: nowrap; }
.btn-primary:hover .btn-text-stack, .primary-button:hover .btn-text-stack { transform: translateY(-1.5rem); }

.btn-arrow-pill { display: flex; flex-direction: column; max-width: 1.2rem; overflow: hidden; }
.btn-arrow { height: 1rem; line-height: 1rem; transition: transform .3s var(--ease-uxoral); }
.btn-arrow + .btn-arrow { margin-top: .1rem; }
.btn-primary:hover .btn-arrow, .primary-button:hover .btn-arrow { transform: translateY(-1.1rem); }

.hover-color-block {
	position: absolute; z-index: 0; left: -1rem; bottom: -1rem;
	width: 1rem; height: 1rem; border-radius: 50%;
	background: var(--c-ink);
	transform: scale(1);
	transition: transform .4s var(--ease-uxoral);
}
.btn-primary:hover .hover-color-block, .primary-button:hover .hover-color-block { transform: scale(100); }
.btn-primary > *, .primary-button > * { position: relative; z-index: 1; }
.btn-primary:hover, .primary-button:hover { color: var(--c-white); }

/* Navbar ------------------------------------------------------------------- */
.hero-area { position: relative; }
.navbar { position: relative; z-index: 999; padding-top: 1.5rem; }
.navbar-container {
	max-width: var(--container-large);
	margin-inline: auto;
	padding: .5rem 1.5rem .5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	border-radius: var(--r-sm);
}
.nav-menu-button {
	display: inline-flex; align-items: center; gap: .6rem;
	background: var(--c-accent); color: var(--c-white);
	border: 0; border-radius: var(--r-pill);
	padding: .5rem 1.1rem;
	font-weight: 600; font-size: var(--fs-sm);
	transition: transform .3s;
}
.nav-menu-button:hover { transform: scale(1.05); }

.brand-logo-wrapper { display: flex; justify-content: center; flex: 1; }
.brand-logo { display: inline-flex; align-items: center; gap: .55rem; color: var(--c-ink); }
.logo-mark { color: var(--c-accent); display: inline-flex; }
.logo-word { font-size: var(--fs-xl); font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }

/* Decorative hero side lines */
.line-wrapper-main { position: absolute; inset: 0; pointer-events: none; }
.line-item-wrap {
	position: absolute; top: 0; bottom: 0;
	display: flex; flex-direction: column; align-items: center;
	padding: 6rem 0 2rem;
}
.line-left { left: 0; padding-left: 9.6rem; }
.line-right { right: 0; padding-right: 9.6rem; }
.line-item-wrap .line { width: 1px; flex: 1; background: var(--c-ink); opacity: .1; }
.circle-dot {
	width: .6rem; height: .6rem; margin-block: .8rem;
	border-radius: var(--r-full);
	background: var(--c-accent);
}
.line-label {
	writing-mode: vertical-rl;
	font-size: var(--fs-xsm); color: var(--c-ink);
	letter-spacing: .08em; text-transform: uppercase;
}

/* Overlay menu --------------------------------------------------------------- */
.nav-menu-overlay {
	position: fixed; inset: 0; z-index: 998;
	display: none;
	background: rgba(0, 0, 0, .1);
	-webkit-backdrop-filter: blur(30px);
	backdrop-filter: blur(30px);
}
.nav-menu-overlay.is-open { display: block; }
.nav-menu-overlay .container { height: 100%; }
.nav-grid {
	display: grid; grid-template-columns: 1fr 1fr;
	height: 100%; align-items: center; gap: 2rem;
}
.nav-links { display: flex; flex-direction: column; gap: .5rem; }
.nav-link-block { padding-block: .35rem; }
.nav-link { display: inline-flex; align-items: baseline; gap: 1.25rem; }
.nav-link-text-stack { display: block; overflow: hidden; height: 2.4rem; }
.nav-link-text {
	display: block; height: 2.4rem; line-height: 2.4rem;
	font-size: var(--fs-2xl); font-weight: 700; text-transform: uppercase;
	letter-spacing: -.01em; color: var(--c-ink);
	transition: transform .5s var(--ease-uxoral);
}
.nav-link:hover .nav-link-text { transform: translateY(-2.4rem); }
.nav-link-index {
	font-size: var(--fs-xsm); color: var(--c-muted);
	font-weight: 500;
}
.nav-image-wrap { display: none; }
@media (min-width: 60rem) {
	.nav-image-wrap { display: block; height: 70vh; border-radius: var(--r-xl); overflow: hidden; }
	.nav-image-inner { height: 100%; }
	.nav-image-inner img { height: 100%; width: 100%; object-fit: cover; border-radius: var(--r-xl); }
}

/* Hero ---------------------------------------------------------------------- */
.home-hero-area { position: relative; overflow: hidden; }
.section.hero { padding-top: 6rem; }

.hero-heading {
	font-size: clamp(3.2rem, 11.4vw, 11.4rem);
	font-weight: 600;
	line-height: 1;
	text-align: center;
	letter-spacing: -.03em;
	margin-inline: auto;
	max-width: 14ch;
}

.hero-middle { position: relative; margin-top: 4rem; }
.hero-image-wrapper {
	display: flex; justify-content: center;
	perspective: 3000px;
}
.image-container {
	position: relative;
	width: 23.1rem; height: 29.1rem;
	transform-style: preserve-3d;
}
.hero-card {
	position: absolute; inset: 0;
	transform-style: preserve-3d;
	will-change: transform;
}
.hero-card .card-image {
	width: 100%; height: 100%;
	border-radius: 1.875rem;
	object-fit: cover;
	background: var(--c-smoke);
}
.hero-title-block {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	z-index: -1;
	pointer-events: none;
}
.hero-text {
	font-size: clamp(6rem, 25vw, 25rem);
	font-weight: 700;
	letter-spacing: -.04em;
	color: var(--c-cultured);
	line-height: .9;
	white-space: nowrap;
}

/* initial 3D fan positions (JS scatters on scroll) */
.hero-card._1 { transform: translate3d(-72%, 0, -800px); }
.hero-card._2 { transform: translate3d(-40%, 0, -550px); }
.hero-card._3 { transform: translate3d(0, 0, 0); }
.hero-card._4 { transform: translate3d(45%, 0, -550px); }
.hero-card._5 { transform: translate3d(72%, 0, -800px); }
.hero-card._6 { transform: translate3d(100%, 0, -800px); }

.hero-bottom { padding: 5rem 0 4rem; }
.hero-bottom-item {
	display: flex; flex-wrap: wrap;
	justify-content: space-between; align-items: flex-end;
	gap: 2rem;
}
.hero-subtitle {
	font-size: var(--fs-xl);
	font-weight: 600;
	max-width: 34ch;
	line-height: 1.3;
}
.hero-review-block { display: flex; align-items: center; gap: 1rem; }
.hero-avatars { display: flex; }
.hero-avatars img {
	width: 2.25rem; height: 2.25rem; border-radius: var(--r-full);
	object-fit: cover; border: 2px solid var(--c-white);
	margin-left: -.5rem;
}
.hero-avatars img:first-child { margin-left: 0; }
.hero-review-text { font-size: var(--fs-xsm); color: var(--c-body); }
.hero-stars { display: flex; gap: .15rem; color: var(--c-star); }

.hero-social-main {
	display: flex; justify-content: space-between; align-items: flex-end;
	padding: 0 1.5rem 2rem;
}
.social-text-stack { display: flex; gap: 1.25rem; }
.social-text {
	font-size: var(--fs-xs); color: var(--c-ink);
	transition: color .3s;
}
.social-text:hover { color: var(--c-accent); }
.scroll-arrow { color: var(--c-ink); opacity: .7; }

/* Logo marquee ---------------------------------------------------------------- */
.logo-marque-main { overflow: hidden; padding-block: 1rem; }
.logo-marque-track { display: flex; width: max-content; }
.logo-marque-list { display: flex; }
.marque-content {
	display: flex; align-items: center; justify-content: center;
	width: 16rem; height: 12.625rem;
	border: 1px solid var(--c-hairline);
	padding: 3rem 5rem;
	flex-shrink: 0;
}
.marque-logo { width: 9rem; opacity: .75; }
.marque-logo svg { width: 100%; height: auto; }

/* Mission / stats --------------------------------------------------------------- */
.inner-wrappar { padding-block: 6rem; }
.misson-top-wrappar {
	display: grid; grid-template-columns: 1fr .75fr;
	gap: 3rem; align-items: end;
	margin-bottom: 3.5rem;
}
.services-header-left p.section-paragraph { max-width: 46ch; color: var(--c-body); margin-top: 1.25rem; margin-bottom: 2rem; }

.mission-grid {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem; perspective: 1000px;
}
.mission-contain-card {
	background: var(--c-white);
	border: 1px solid var(--c-hairline);
	border-radius: var(--r-xl);
	padding: 1.5rem;
	display: flex; flex-direction: column; gap: 1.25rem;
	transform-style: preserve-3d;
}
.contain-bottom-card {
	border-top: 1px solid var(--c-hairline);
	padding-top: 1.25rem;
}
.quote-icon { color: var(--c-ink); margin-bottom: .75rem; }
.quote-text { font-size: var(--fs-md); line-height: 1.45; color: var(--c-charcoal); margin-bottom: 1.25rem; }
.counter-item { display: flex; flex-direction: column; }
.counter-col {
	display: flex; align-items: flex-end;
	height: 3.6rem; overflow: hidden;
}
.counter-wrap { display: flex; flex-direction: column; }
.counter-value {
	font-size: 3.25rem; font-weight: 600; letter-spacing: -.135rem;
	line-height: 3.6rem;
}
.counter-value.is-white { font-size: 2.25rem; line-height: 3.6rem; color: var(--c-white); }
.counter-suffix { font-size: 3.25rem; font-weight: 600; letter-spacing: -.135rem; line-height: 3.6rem; }
.counter-suffix.is-white { font-size: 2.25rem; line-height: 3.6rem; }
.counter-label { font-size: var(--fs-sm); color: var(--c-muted); margin-top: .5rem; }

.robot-image-wrapper {
	border: 1px solid var(--c-hairline);
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--c-ghost);
	height: 14rem;
}
.robot-image-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.counter-main {
	background: var(--c-accent);
	border-radius: var(--r-md);
	padding: 1.5rem;
	display: flex; flex-direction: column; gap: 1.25rem;
	margin-top: 1.25rem;
}
.counter-row { display: flex; align-items: flex-end; gap: .5rem; color: var(--c-white); }
.counter-row .counter-col { height: 3.6rem; overflow: hidden; }

.mission-top-card.aroww-button-stye {
	background: var(--c-white);
	border: 1px solid var(--c-hairline);
	border-radius: var(--r-xl);
	padding: 2rem;
	display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
	gap: 1.5rem;
}
.availability-pill {
	display: inline-flex; align-items: center; gap: .5rem;
	font-size: var(--fs-xsm); font-weight: 600; color: var(--c-ink);
}
.availability-dot { width: .5rem; height: .5rem; border-radius: var(--r-full); background: #2e7d32; }
.target-visual { margin: auto; color: var(--c-ink); opacity: .85; }

/* Featured work cards ----------------------------------------------------------- */
.work-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 3rem; }
.project-collection-list {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}
.project-card {
	display: flex; flex-direction: column;
	background-size: cover; background-position: center;
	border: 1px solid var(--c-hairline);
	border-radius: var(--r-2xl);
	padding: 2.5rem;
	min-height: 34rem;
	color: var(--c-ink);
	position: relative;
	overflow: hidden;
	transition: background-color .5s, border-color .5s;
}
.project-card::before {
	content: "";
	position: absolute; inset: 0;
	background: var(--c-smoke);
	z-index: -1;
}
.project-card-top {
	display: flex; justify-content: space-between;
	font-size: var(--fs-xsm); color: var(--c-body);
}
.project-card-title {
	margin-top: auto;
	font-size: clamp(1.5rem, 2.2vw, 3.25rem);
	font-weight: 600; line-height: 1.05; letter-spacing: -.02em;
}
.project-card-tags { font-size: var(--fs-xsm); color: var(--c-body); margin-top: .75rem; }
.project-card .demo { display: none; }

/* Services (sticky tabs) ---------------------------------------------------------- */
.services-section { padding-block: 6rem; }
.services-header { text-align: center; margin-bottom: 4rem; }
.services-header .heading-style-h2 { margin-bottom: 1rem; }
.services-header p { color: var(--c-body); max-width: 55ch; margin-inline: auto; }

.sticky-wrapper { height: 300vh; }
.services-grid {
	position: sticky; top: 12rem;
	display: grid; grid-template-columns: 1fr 1.25fr;
	gap: 3rem;
}
.services-tab-menu { display: flex; flex-direction: column; }
.services-tab-link {
	display: flex; align-items: baseline; gap: 1rem;
	padding-block: 1.1rem;
	border-bottom: 1px solid var(--c-hairline);
	opacity: .35;
	transition: opacity .3s;
}
.services-tab-link.is-active { opacity: 1; }
.services-tab-number { font-size: var(--fs-xsm); color: var(--c-body); }
.services-title { font-size: clamp(1.5rem, 2.6vw, var(--fs-services-title)); font-weight: 500; letter-spacing: -.01em; }

.services-tab-panes { position: relative; }
.services-right-item-card {
	max-height: 25.625rem;
	overflow: hidden;
	display: none;
	flex-direction: column; gap: 1.25rem;
}
.services-right-item-card.is-active { display: flex; }
.services-pills { display: flex; flex-wrap: wrap; gap: .6rem; }
.services-pill {
	background: var(--c-smoke);
	border-radius: var(--r-full);
	padding: .5rem 1rem;
	font-size: var(--fs-xsm); font-weight: 500;
}
.services-right-item-card p { color: var(--c-body); line-height: 1.6; max-width: 55ch; }
.services-button {
	display: inline-flex; align-items: center; gap: .5rem;
	color: var(--c-accent); font-weight: 600;
}
.services-button .caret-track { display: flex; flex-direction: column; height: 1rem; overflow: hidden; }
.services-button .caret-track svg + svg { margin-top: .05rem; }
.services-button:hover .caret-track { transform: translateY(-.95rem); }
.services-button .caret-track { transition: transform .3s var(--ease-uxoral); }

/* Work process ---------------------------------------------------------------------- */
.process-section {
	background-color: var(--c-ghost);
	background-repeat: no-repeat;
	background-position: 50% 100%;
	padding-block: 6rem;
}
.process-header { margin-bottom: 3.5rem; }
.working-process-step {
	display: grid; grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	perspective: 1000px;
}
.process-card-wrapper {
	background: var(--c-white);
	border-radius: var(--r-md);
	padding: 2.5rem 1.5rem 1.5rem;
	display: flex; flex-direction: column;
	gap: .75rem;
	transform-style: preserve-3d;
}
.step-noumber-wrapper {
	font-size: clamp(4rem, 9vw, 15.625rem);
	font-weight: 600;
	line-height: .9;
	letter-spacing: -.04em;
	color: var(--c-ink);
	opacity: .92;
}
.process-card-title { font-size: var(--fs-lg); font-weight: 600; }
.process-card-title.is-accent { color: var(--c-accent); }
.process-card-text { font-size: var(--fs-xsm); color: var(--c-body); line-height: 1.55; }

/* Testimonials -------------------------------------------------------------------------- */
.testimonials-section { padding-block: 6rem; }
.testimonials-header { text-align: center; margin-bottom: 3rem; }
.testimonials-header p { color: var(--c-body); margin-top: 1rem; }
.marque-card-main { overflow: hidden; }
.marque-list { display: flex; width: max-content; gap: 0; }
.testiomonial-card {
	max-width: 53rem;
	padding: .75rem;
	background: var(--c-ghost);
	border-radius: var(--r-2xl);
	flex-shrink: 0;
	margin-right: 1.5rem;
}
.testiomoniul-card-info-block { padding: 3rem; display: flex; flex-direction: column; gap: 1.25rem; }
.testimonial-quote { font-size: var(--fs-md); line-height: 1.5; color: var(--c-charcoal); }
.testimonial-person { display: flex; align-items: center; gap: 1rem; }
.testimonial-avatar { width: 2.5rem; height: 2.5rem; border-radius: var(--r-full); object-fit: cover; }
.testimonial-name { font-size: var(--fs-sm); font-weight: 600; }
.testimonial-role { font-size: var(--fs-xsm); color: var(--c-muted); }
.testimonial-stars { display: flex; gap: .15rem; color: var(--c-star); }

/* FAQ ------------------------------------------------------------------------------------ */
.faq-section { padding-block: 6rem; }
.faq-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; }
.faq-left .heading-style-h2 { margin-bottom: 1rem; }
.faq-left p { color: var(--c-body); max-width: 40ch; margin-bottom: 2rem; }
.faq-right { display: flex; flex-direction: column; gap: .75rem; }
.faq-tab-link {
	background: var(--c-white);
	border: 1px solid var(--c-hairline);
	border-radius: var(--r-md);
	padding: 1.25rem;
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
	transition: border-color .3s;
}
.faq-tab-link.is-open { border-color: rgba(0, 0, 0, .25); }
.faq-question { font-size: var(--fs-base); font-weight: 500; }
.faq-arrow { color: var(--c-charcoal); transition: transform .5s var(--ease-uxoral); display: inline-flex; }
.faq-tab-link.is-open .faq-arrow { transform: rotate(45deg); }
.faq-answer-wrapper {
	max-height: 0; overflow: hidden;
	transition: max-height .5s var(--ease-uxoral);
}
.faq-answer {
	padding: 0 1.25rem 1.25rem;
	color: var(--c-body); line-height: 1.6;
}
.faq-item { border: 1px solid var(--c-hairline); border-radius: var(--r-md); background: var(--c-white); }
.faq-item.is-open { border-color: rgba(0, 0, 0, .25); }
.faq-item .faq-tab-link { border: 0; }

/* Blog -------------------------------------------------------------------------------------- */
.blog-section { padding-block: 6rem; }
.blog-collection-list {
	display: grid; grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem; perspective: 1000px;
}
.blog-card {
	display: flex; flex-direction: column;
	border-radius: var(--r-md);
	overflow: hidden;
	background: var(--c-ghost);
	transform-origin: 50% 100%;
	transition: transform .3s;
}
.blog-card:hover { transform: translateY(-4px); }
.blog-card-image { height: 22rem; overflow: hidden; }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; }
.bottom-content { padding: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.blog-card-date { font-size: var(--fs-xsm); color: var(--c-body); }
.blog-card-title { font-size: var(--fs-lg); font-weight: 500; line-height: 1.25; }

/* Footer ------------------------------------------------------------------------------------- */
.footer { background: var(--c-white); }
.footer-light { padding-block: 5rem 6rem; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; }
.footer-heading { margin-bottom: 1.5rem; }
.footer-links { display: flex; flex-direction: column; gap: .6rem; }
.footer-link { font-size: var(--fs-md); color: var(--c-charcoal); transition: transform .3s; display: inline-block; }
.footer-link:hover { transform: translateX(5px); color: var(--c-accent); }
.mail { font-size: var(--fs-md); color: var(--c-charcoal); display: inline-block; margin-bottom: 1.5rem; transition: transform .3s; }
.mail:hover { transform: scale(1.1); color: var(--c-accent); }
.social-icons { display: flex; gap: .75rem; }
.social-ichon {
	width: 2.5rem; height: 2.5rem;
	border-radius: var(--r-full);
	border: 1px solid var(--c-hairline-soft);
	display: inline-flex; align-items: center; justify-content: center;
	color: var(--c-ink);
	transition: background .3s, color .3s, border-color .3s;
}
.social-ichon:hover { background: var(--c-ink); color: var(--c-white); border-color: var(--c-ink); }
.footer-address { color: var(--c-charcoal); line-height: 1.6; }

.footer-dark-wrappar {
	position: relative;
	background: var(--c-ink);
	overflow: hidden;
	padding: 6rem 0 2rem;
}
.footer-logo {
	position: absolute; top: -6rem; left: 50%;
	transform: translateX(-50%);
	width: 12rem; height: 12rem;
	opacity: .9;
}
.pill-wraapr { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: center; margin-bottom: 4rem; }
.pill-devider { display: flex; gap: 1rem; }
.social-link {
	display: inline-flex;
	padding: .75rem 1.5rem;
	border: 4px solid var(--c-white);
	border-radius: var(--r-full);
	color: var(--c-white);
	font-weight: 500;
	transition: border-color .3s, color .3s;
}
.social-link:hover { border-color: var(--c-accent); color: var(--c-accent); }
.social-link-stack { display: block; overflow: hidden; height: 1.5rem; }
.social-link-stack span { display: block; height: 1.5rem; line-height: 1.5rem; }
.social-link:hover .social-link-stack span { transform: translateY(-1.5rem); }
.social-link-stack span { transition: transform .3s var(--ease-uxoral); }

.footer-desplay-wrapper { text-align: center; }
.display {
	font-size: clamp(5rem, 20.75vw, 20.75rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--c-white);
	white-space: nowrap;
}
.fotter-copy-right {
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
	margin-top: 2.5rem;
	color: rgba(255, 255, 255, .7);
	font-size: var(--fs-xsm);
}
.fotter-copy-right p { color: rgba(255, 255, 255, .7); }

/* Inner pages ---------------------------------------------------------------------------------- */
.inner-hero { padding-block: 6rem 4rem; text-align: center; }
.inner-hero .inner-heading { margin-bottom: 1.5rem; }
.inner-hero p { color: var(--c-body); max-width: 60ch; margin-inline: auto; }

/* About -------------------------------------------------------------------------------------------- */
.about-header-bottom {
	display: grid; grid-template-columns: 1fr 1.5fr 1fr;
	gap: 2rem; align-items: stretch;
	margin-top: 4rem;
}
.about-info-left { display: flex; flex-direction: column; gap: 1.5rem; text-align: left; }
.about-info-left .starburst { color: var(--c-accent); }
.about-info-text { font-size: var(--fs-md); line-height: 1.5; color: var(--c-charcoal); }
.about-buttons { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .5rem; }
.about-image-wrap { height: 54.4rem; border-radius: var(--r-md); overflow: hidden; }
.about-image-wrap img { width: 100%; height: 100%; object-fit: cover; }
.about-social-column { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.about-social-link {
	display: inline-flex; padding: .5rem 1.25rem;
	border: 1px solid var(--c-hairline-soft);
	border-radius: var(--r-full);
	font-size: var(--fs-xsm); font-weight: 500;
	transition: border-color .3s, color .3s;
}
.about-social-link:hover { border-color: var(--c-accent); color: var(--c-accent); }

.team-section { padding-block: 6rem; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; perspective: 1000px; }
.team-card { transform-style: preserve-3d; }
.team-img { height: 30rem; border-radius: var(--r-md); overflow: hidden; }
.team-img img { width: 100%; height: 100%; object-fit: cover; }
.team-meta { padding-top: 1rem; }
.team-name { font-size: var(--fs-lg); font-weight: 600; }
.team-role { font-size: var(--fs-xsm); color: var(--c-muted); }

.awards-section { padding-block: 6rem; }
.award-grid { display: grid; grid-template-columns: 1fr 3fr; gap: 3rem; }
.award-grid h2 { font-size: clamp(1.75rem, 3vw, 3rem); font-weight: 500; line-height: 1.15; letter-spacing: -.01em; }
.award-list { display: flex; flex-direction: column; }
.award-item-blaock {
	display: flex; justify-content: space-between; align-items: center; gap: 2rem;
	padding-block: 1.25rem;
	border-bottom: 1px solid var(--c-hairline-soft);
}
.award-name { font-size: var(--fs-md); font-weight: 500; }
.award-detail { font-size: var(--fs-xsm); color: var(--c-muted); text-align: right; }

/* Project listing ----------------------------------------------------------------------------------- */
.project-grid-v2 {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
}
.project-collection-wrap { display: flex; flex-direction: column; gap: 1.5rem; perspective: 1000px; }
.project-card-v2 {
	position: relative;
	display: flex; flex-direction: column;
	min-height: 40rem;
	border-radius: var(--r-2xl);
	background-size: cover; background-position: center;
	overflow: hidden;
	color: var(--c-white);
	padding: 2.5rem;
	transform-style: preserve-3d;
}
.project-card-v2::before {
	content: "";
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, .5);
}
.project-card-v2 > * { position: relative; }
.project-card-v2-top { display: flex; justify-content: space-between; font-size: var(--fs-xsm); color: rgba(255, 255, 255, .85); }
.project-card-v2-center { margin: auto 0; }
.project-card-v2-title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.05; }
.project-card-v2-sub { font-size: var(--fs-xsm); color: rgba(255, 255, 255, .8); margin-top: .75rem; }
.project-card-v2 .arrow {
	position: absolute; right: 2.5rem; bottom: 2.5rem;
	width: 3.75rem; height: 3.75rem;
	border: 1px solid rgba(255, 255, 255, .8);
	border-radius: var(--r-full);
	display: flex; align-items: center; justify-content: center;
	color: var(--c-white);
}
.project-card-v2 .arrow svg { transform: rotate(45deg); }

/* Project single ------------------------------------------------------------------------------------ */
.project-header { padding-block: 5rem 3rem; }
.project-title { font-size: clamp(2.5rem, 6vw, var(--fs-inner-h1)); font-weight: 400; line-height: 1.05; text-align: center; letter-spacing: -.02em; margin-bottom: 2rem; }
.project-info-main-top {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 4rem;
	font-size: var(--fs-xsm); color: var(--c-body);
	margin-bottom: 2.5rem;
}
.project-info-main-top strong { color: var(--c-ink); font-weight: 600; }
.project-main-img-block { height: 53rem; border-radius: var(--r-2xl); overflow: hidden; background: var(--c-ghost); }
.project-main-img-block img { width: 100%; height: 100%; object-fit: cover; }
.project-body { padding-block: 6rem; }
.project-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 4rem; }
.project-body-content h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 500; margin-bottom: 1.5rem; letter-spacing: -.01em; }
.project-body-content p { color: var(--c-body); line-height: 1.7; margin-bottom: 1.25rem; max-width: 60ch; }
.project-info-list { margin-block: 2.5rem; display: flex; flex-direction: column; }
.project-info-row {
	display: flex; justify-content: space-between; gap: 2rem;
	padding-block: .9rem;
	border-bottom: 1px solid var(--c-hairline);
	font-size: var(--fs-xsm);
}
.project-info-row .label { color: var(--c-muted); }
.project-multi-imgs { display: flex; flex-direction: column; gap: 1.5rem; }
.project-multi-img { border-radius: var(--r-md); overflow: hidden; background: var(--c-ghost); }
.project-multi-img img { width: 100%; object-fit: cover; }

/* Blog single ------------------------------------------------------------------------------------------ */
.blog-body-header { text-align: center; padding-block: 5rem 3rem; }
.date-wrap {
	display: inline-block;
	background: var(--c-ghost);
	border-radius: var(--r-full);
	padding: .5rem 1.25rem;
	font-size: var(--fs-xsm); color: var(--c-body);
	margin-bottom: 1.5rem;
}
.blog-single-title { font-size: clamp(2rem, 5vw, 3.75rem); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; max-width: 22ch; margin-inline: auto; }
.blog-single-excerpt { color: var(--c-body); max-width: 60ch; margin: 1.5rem auto 0; }
.blog-hero-img { height: 40rem; border-radius: var(--r-2xl); overflow: hidden; background: var(--c-ghost); }
.blog-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.blog-single-body { padding-block: 6rem; }
.blog-single-content { max-width: 72ch; margin-inline: auto; font-size: 1.0625rem; line-height: 1.75; color: var(--c-charcoal); }
.blog-single-content p { margin-bottom: 1.5rem; }
.blog-single-content h2 { font-size: 2rem; font-weight: 600; margin: 2.5rem 0 1rem; letter-spacing: -.01em; }
.blog-single-content h3 { font-size: 1.5rem; font-weight: 600; margin: 2rem 0 .75rem; }
.blog-single-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: 1.5rem; display: block; }
.blog-single-content li { margin-bottom: .5rem; }
.blog-single-content blockquote {
	border-left: 3px solid var(--c-accent);
	padding-left: 1.5rem; margin: 2rem 0;
	font-size: 1.25rem; font-style: italic;
}
.more-blog { padding-block: 4rem 6rem; }

/* 404 ----------------------------------------------------------------------------------------------------- */
.error-404 { text-align: center; padding-block: 8rem; }
._404-number {
	font-size: clamp(6rem, 31.875vw, 31.875rem);
	font-weight: 600;
	line-height: 1;
	color: var(--c-white);
	-webkit-text-stroke: 2px var(--c-accent);
	letter-spacing: -.03em;
}
.error-404 h1 { font-size: var(--fs-xl); font-weight: 600; margin-block: 2rem 1rem; }
.error-404 p { color: var(--c-body); max-width: 48ch; margin-inline: auto; margin-bottom: 2.5rem; }

/* Contact page -------------------------------------------------------------------------------------------- */
.contact-section { padding-block: 6rem; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 4rem; }
.contact-info-block { display: flex; flex-direction: column; gap: 2rem; }
.contact-item { display: flex; flex-direction: column; gap: .4rem; }
.contact-item-label { font-size: var(--fs-xsm); color: var(--c-muted); text-transform: uppercase; letter-spacing: .05em; }
.contact-link { font-size: var(--fs-lg); font-weight: 500; transition: color .3s; }
.contact-link:hover { color: var(--c-accent); }
.contact-social-block { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.contact-social-link {
	display: inline-flex; padding: .5rem 1.25rem;
	border: 1px solid var(--c-hairline-soft);
	border-radius: var(--r-full);
	font-size: var(--fs-xsm); font-weight: 500;
	transition: border-color .3s, color .3s;
}
.contact-social-link:hover { border-color: var(--c-accent); color: var(--c-accent); }

.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.form-field { display: flex; flex-direction: column; gap: .5rem; }
.form-field label { font-size: var(--fs-xsm); color: var(--c-body); font-weight: 500; }
.form-field input, .form-form textarea {
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: var(--r-base);
	padding: .9rem 1.1rem;
	background: var(--c-white);
	font-size: var(--fs-sm);
	transition: border-color .3s;
	width: 100%;
}
.form-field input:focus, .contact-form textarea:focus { outline: none; border-color: var(--c-ink); }
.contact-form textarea { min-height: 7.5rem; resize: vertical; }
.form-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.submit-button {
	background: var(--c-accent); color: var(--c-white);
	border: 1px solid var(--c-accent);
	border-radius: var(--r-base);
	padding: 1rem;
	font-weight: 600; font-size: var(--fs-sm);
	width: 100%;
	transition: background .3s, color .3s;
}
.submit-button:hover { background: var(--c-white); color: var(--c-accent); }
.form-status { font-size: var(--fs-xsm); min-height: 1.25rem; }
.form-status.is-ok { color: #2e7d32; }
.form-status.is-error { color: #ea384c; }

/* Blog listing ---------------------------------------------------------------------------------------------- */
.blog-listing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; perspective: 1000px; }

/* Generic reveal helpers (JS applies blur/rise) */
.js .reveal-item { opacity: 0; }
.js .reveal-item.is-revealed { opacity: 1; }
.no-js .reveal-item { opacity: 1; }

/* Safety net: if JS is present but GSAP never runs (blocked/failed),
   force reveal after a short beat so content is never lost. */
@keyframes sa-reveal-fallback {
	to { opacity: 1; }
}
.js .reveal-item { animation: sa-reveal-fallback 0.01s 4s forwards; }

/* Responsive ------------------------------------------------------------------------------------------------- */
@media (max-width: 90rem) {
	.line-left { padding-left: 3rem; }
	.line-right { padding-right: 3rem; }
}

@media (max-width: 78rem) {
	.misson-top-wrappar { grid-template-columns: 1fr; gap: 1.5rem; }
	.mission-grid { grid-template-columns: 1fr 1fr; }
	.mission-top-card.aroww-button-stye { grid-column: 1 / -1; }
	.services-grid { grid-template-columns: 1fr; }
	.working-process-step { grid-template-columns: 1fr 1fr; }
	.project-collection-list { grid-template-columns: 1fr 1fr; }
	.blog-collection-list, .blog-listing-grid { grid-template-columns: 1fr 1fr; }
	.about-header-bottom { grid-template-columns: 1fr; }
	.about-image-wrap { height: 32rem; }
	.about-social-column { flex-direction: row; flex-wrap: wrap; }
	.team-grid { grid-template-columns: 1fr 1fr; }
	.award-grid { grid-template-columns: 1fr; gap: 1.5rem; }
	.project-grid { grid-template-columns: 1fr; }
	.project-main-img-block { height: 32rem; }
	.contact-grid { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.faq-wrapper { grid-template-columns: 1fr; }
	.sticky-wrapper { height: auto; }
	.services-grid { position: static; }
}

@media (max-width: 47.9375rem) {
	.line-wrapper-main { display: none; }
	.hero-bottom-item { flex-direction: column; align-items: flex-start; }
	.mission-grid { grid-template-columns: 1fr; }
	.project-collection-list { grid-template-columns: 1fr; }
	.project-card { min-height: 26rem; }
	.working-process-step { grid-template-columns: 1fr; }
	.blog-collection-list, .blog-listing-grid { grid-template-columns: 1fr; }
	.team-grid { grid-template-columns: 1fr; }
	.project-grid-v2 { grid-template-columns: 1fr; }
	.footer-grid { grid-template-columns: 1fr; }
	.nav-grid { grid-template-columns: 1fr; }
	.nav-image-wrap { display: none; }
	.hero-social-main .social-text-stack { display: none; }
	.pill-wraapr { flex-direction: column; align-items: center; }
	.pill-devider { flex-direction: column; }
	.blog-hero-img { height: 22rem; }
}

/* Reduced motion / no-JS fallbacks ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.logo-marque-track, .marque-list { animation: none !important; }
}
.no-js .hero-card { opacity: 1 !important; transform: none !important; }
.no-js .split-guard { visibility: visible !important; }

/* Marquee keyframes (JS-free base loop; JS marquee prefers transform tween) */
@keyframes sa-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.logo-marque-track { animation: sa-marquee 20s linear infinite; }
.marque-list-track { animation: sa-marquee 30s linear infinite; }

@media (prefers-reduced-motion: reduce) {
	.logo-marque-track, .marque-list-track { animation: none; }
}