:root {
--white: #f7efe4;
--muted: rgba(247, 239, 228, 0.58);
--faint: rgba(247, 239, 228, 0.14);
--line: rgba(247, 239, 228, 0.13);
--line-strong: rgba(247, 239, 228, 0.26);
--guide-line-color: rgba(247, 239, 228, 0.13);
--black: #000;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
min-height: 100%;
background: #030202;
color: var(--white);
font-family: "Inter", sans-serif;
font-size: var(--type-body, 1.125rem);
line-height: var(--type-line-body, 1.6);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
overflow-x: hidden;
}
/* Keep this class for the intro state, but do not permanently lock the page if a CDN/image hangs. */
body.is-loading {
overflow-x: hidden;
}
body.scroll-locked {
height: 100vh;
overflow: hidden;
}
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;
}
.lenis.lenis-scrolling iframe {
pointer-events: none;
}
::selection {
background: var(--white);
color: #000;
}
::-webkit-scrollbar {
width: 0;
height: 0;
}
.hairline-border {
border-color: var(--line);
}
.text-soft {
color: var(--muted);
}
.text-faint {
color: rgba(244, 244, 240, 0.34);
}
.noise {
pointer-events: none;
position: fixed;
inset: 0;
z-index: 9998;
opacity: 0.055;
mix-blend-mode: screen;
background-image:
radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .26) 0 1px, transparent 1px),
radial-gradient(circle at 80% 70%, rgba(255, 255, 255, .18) 0 1px, transparent 1px);
background-size: 22px 22px, 31px 31px;
}
.scanline {
pointer-events: none;
position: fixed;
inset: 0;
z-index: 9997;
opacity: 0.08;
background: linear-gradient(to bottom, transparent 0, transparent 4px, rgba(255, 255, 255, .16) 5px, transparent 6px);
background-size: 100% 7px;
}
.cross-marker {
position: absolute;
width: 9px;
height: 9px;
pointer-events: none;
}
.cross-marker::before,
.cross-marker::after {
content: "";
position: absolute;
background: rgba(244, 244, 240, .38);
}
.cross-marker::before {
width: 100%;
height: 1px;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.cross-marker::after {
height: 100%;
width: 1px;
top: 0;
left: 50%;
transform: translateX(-50%);
}
.corner {
position: absolute;
width: 10px;
height: 10px;
pointer-events: none;
border-color: var(--line-strong);
}
.corner-tl {
top: -1px;
left: -1px;
border-top: 1px solid;
border-left: 1px solid;
}
.corner-tr {
top: -1px;
right: -1px;
border-top: 1px solid;
border-right: 1px solid;
}
.corner-bl {
bottom: -1px;
left: -1px;
border-bottom: 1px solid;
border-left: 1px solid;
}
.corner-br {
bottom: -1px;
right: -1px;
border-bottom: 1px solid;
border-right: 1px solid;
}
.frame {
position: relative;
border: 1px solid var(--line);
background: #020202;
}
.media-reveal,
.hero-media,
.work-media {
clip-path: inset(0 0 0 0);
will-change: clip-path, transform;
}
.img-cover {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
will-change: transform;
}
.line-mask {
display: block;
overflow: hidden;
}
.line-mask>span {
display: block;
will-change: transform;
}
.label {
font-size: var(--type-micro, 0.875rem);
line-height: var(--type-line-micro, 1.45);
text-transform: uppercase;
letter-spacing: .16em;
color: rgba(244, 244, 240, .44);
font-weight: 500;
}
.mono-label {
font-size: var(--type-micro, 0.875rem);
line-height: var(--type-line-micro, 1.45);
text-transform: uppercase;
letter-spacing: .12em;
color: rgba(244, 244, 240, .52);
font-weight: 500;
}
.accordion-content {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .45s cubic-bezier(.16, 1, .3, 1);
}
.accordion-content>div {
overflow: hidden;
}
.accordion-item.is-open .accordion-content {
grid-template-rows: 1fr;
}
.accordion-item.is-open .accordion-icon {
transform: rotate(45deg);
}
.loader {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
background: #000;
color: var(--white);
}
.loader-frame {
position: relative;
width: min(460px, calc(100vw - 48px));
height: 160px;
border: 1px solid var(--line);
display: flex;
flex-direction: column;
justify-content: center;
padding: 28px;
overflow: hidden;
}
.loader-word {
font-size: var(--type-micro, 0.875rem);
letter-spacing: .18em;
text-transform: uppercase;
margin-bottom: 28px;
}
.loader-track {
position: relative;
width: 100%;
height: 1px;
background: rgba(244, 244, 240, .12);
overflow: hidden;
}
.loader-line {
width: 100%;
height: 100%;
transform-origin: left center;
transform: scaleX(0);
background: var(--white);
}
.loader-meta {
display: flex;
justify-content: space-between;
margin-top: 16px;
font-size: var(--type-micro, 0.875rem);
line-height: var(--type-line-micro, 1.45);
text-transform: uppercase;
letter-spacing: .14em;
color: rgba(244, 244, 240, .42);
}
.site-header {
will-change: transform, opacity;
}
.hero-title {
font-family: "Playfair Display", serif;
letter-spacing: -0.055em;
font-weight: 400;
}
.giant-word {
letter-spacing: -0.095em;
}
.editorial-card {
position: relative;
will-change: transform, opacity;
}
.editorial-media {
clip-path: inset(0 0 0 0);
will-change: transform, clip-path;
}
.editorial-img {
will-change: transform;
}
@media (min-width: 768px) {
.editorial-card:nth-child(even) {
margin-left: auto;
}
}
.nav-link.is-active {
color: #fff;
}
.nav-link {
position: relative;
}
.nav-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -10px;
height: 1px;
transform: scaleX(0);
transform-origin: left center;
background: rgba(247, 239, 228, .85);
transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
.nav-link:hover::after,
.nav-link.is-active::after {
transform: scaleX(1);
}
.mobile-nav-link {
border-bottom: 1px solid var(--line);
}
.mobile-nav-link:hover {
color: #fff;
}
.site-header {
transition: transform .45s cubic-bezier(.16, 1, .3, 1), opacity .45s cubic-bezier(.16, 1, .3, 1);
}
.site-header.is-scrolled > div {
background: rgba(0, 0, 0, .78);
}
.hero-section .gs-hero-copy {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Keep hero clean: no floating labels or background elements leaking behind the main frame */
.hero-section {
isolation: isolate;
}
.hero-section .gs-scatter {
display: none !important;
}
.gs-hero-frame {
overflow: hidden;
}
/* Premium on-load animation */
body.is-ready .load-reveal {
opacity: 1;
}
.load-reveal {
opacity: 0;
will-change: transform, opacity, clip-path;
}
/* Header + hero behave like the reference video:
the hero appears first, then the nav slides down into place on top of the same frame. */
.hero-shell {
position: relative;
transform-origin: center top;
will-change: transform, opacity;
}
.hero-shell .site-header {
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 60;
transform-origin: center top;
will-change: transform, opacity;
}
.hero-shell .site-header > div {
border-color: rgba(247, 239, 228, .22);
background: rgba(0, 0, 0, .72);
}
.hero-shell .gs-hero-frame {
margin-top: 0;
}
@media (max-width: 768px) {
.hero-section { padding-top: 10px; padding-bottom: 10px; }
.hero-shell .gs-hero-frame { min-height: 680px; height: calc(100svh - 20px); }
}
/* Cinematic reference-video inspired hero
This effect is a pinned parallax hero with a tiled mask reveal. */
.hero-section {
min-height: 100svh;
perspective: 1200px;
}
.hero-bg-wash {
position: absolute;
inset: 0;
z-index: 0;
opacity: .72;
background:
radial-gradient(circle at 72% 18%, rgba(247,239,228,.11), transparent 34%),
linear-gradient(180deg, #070605 0%, #030202 52%, #000 100%);
}
.gs-hero-frame.hero-cinematic {
transform-origin: center center;
will-change: transform, opacity, clip-path;
}
.hero-media {
transform-origin: center center;
will-change: transform, clip-path;
}
.gs-hero-img {
transform-origin: 50% 35%;
will-change: transform, opacity, filter;
}
.hero-title-wrap {
overflow: hidden;
}
.hero-title {
will-change: transform, opacity;
}
.hero-kicker,
.hero-bottom-rail,
.hero-top-copy,
.hero-reg-mark {
will-change: transform, opacity;
}
.hero-top-copy {
text-shadow: 0 14px 38px rgba(0,0,0,.75);
}
.hero-reg-mark {
text-shadow: 0 14px 42px rgba(0,0,0,.85);
}
.hero-bottom-rail {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 30;
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1px;
border-top: 1px solid rgba(247,239,228,.16);
background: rgba(0,0,0,.28);
backdrop-filter: blur(14px);
}
.hero-bottom-rail > span {
min-height: 44px;
display: flex;
align-items: center;
padding-left: var(--content-gutter);
padding-right: var(--content-gutter);
font-size: var(--type-micro, 0.875rem);
line-height: var(--type-line-micro, 1.45);
text-transform: uppercase;
letter-spacing: .14em;
color: rgba(247,239,228,.58);
}
.hero-bottom-rail > span:nth-child(2) {
justify-content: center;
border-left: 1px solid rgba(247,239,228,.14);
border-right: 1px solid rgba(247,239,228,.14);
}
.hero-bottom-rail > span:last-child {
justify-content: flex-end;
}
.hero-mask-grid {
pointer-events: none;
position: absolute;
inset: 0;
z-index: 28;
overflow: hidden;
}
.hero-mask-tile {
position: absolute;
background: #030202;
border: 1px solid rgba(247,239,228,.06);
box-shadow: 0 30px 80px rgba(0,0,0,.45);
will-change: transform, opacity, clip-path;
}
.hero-mask-tile:nth-child(1) { left: 0; top: 0; width: 31%; height: 42%; }
.hero-mask-tile:nth-child(2) { left: 31%; top: 0; width: 19%; height: 27%; background: #f7efe4; }
.hero-mask-tile:nth-child(3) { left: 50%; top: 0; width: 24%; height: 34%; }
.hero-mask-tile:nth-child(4) { right: 0; top: 0; width: 26%; height: 46%; background: #f7efe4; }
.hero-mask-tile:nth-child(5) { left: 0; bottom: 0; width: 18%; height: 36%; background: #f7efe4; }
.hero-mask-tile:nth-child(6) { left: 18%; bottom: 0; width: 29%; height: 23%; }
.hero-mask-tile:nth-child(7) { left: 47%; bottom: 0; width: 21%; height: 31%; background: #f7efe4; }
.hero-mask-tile:nth-child(8) { right: 0; bottom: 0; width: 32%; height: 27%; }
.scroll-wipe-section {
position: relative;
z-index: 2;
}
@media (max-width: 768px) {
.hero-bottom-rail {
grid-template-columns: 1fr;
}
.hero-bottom-rail > span {
min-height: 34px;
padding-left: var(--content-gutter);
padding-right: var(--content-gutter);
font-size: var(--type-micro, 0.875rem);
}
.hero-bottom-rail > span:nth-child(2),
.hero-bottom-rail > span:last-child {
justify-content: flex-start;
border-left: 0;
border-right: 0;
border-top: 1px solid rgba(247,239,228,.12);
}
.hero-reg-mark {
display: none;
}
}
@media (max-width: 768px) {
.hero-title {
letter-spacing: -0.055em;
}
.work-grid {
min-height: auto !important;
}
.work-card {
position: relative !important;
top: auto !important;
left: auto !important;
right: auto !important;
width: 100% !important;
margin-bottom: 32px;
}
.loader-frame {
height: 138px;
}
}
/* === Pinned hero fix, no on-load animation === */
.load-reveal {
opacity: 1;
visibility: visible;
}
.hero-section {
z-index: 1;
background: #000;
contain: paint;
}
.hero-shell {
isolation: isolate;
}
.gs-hero-frame.hero-cinematic {
background: #030202;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.gs-hero-frame .hero-media {
clip-path: inset(0% 0% 0% 0%);
}
.gs-hero-frame .hero-top-copy,
.gs-hero-frame .gs-hero-copy,
.gs-hero-frame .hero-bottom-rail {
position: absolute;
z-index: 2;
}
.hero-media {
visibility: visible;
backface-visibility: hidden;
clip-path: inset(0% 0% 0% 0%);
}
.gs-hero-img {
filter: blur(0px);
}
.hero-mask-grid {
display: none !important;
}
.scroll-wipe-section {
position: relative;
z-index: 30;
min-height: auto;
background: #0E1219;
box-shadow: 0 -120px 160px rgba(14,18,25,1);
will-change: transform;
isolation: isolate;
}
.scroll-wipe-section::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 1px;
background: rgba(247, 239, 228, .16);
pointer-events: none;
z-index: 2;
}
#works {
position: relative;
z-index: 10;
isolation: isolate;
background: #0E1219;
}
#works::after {
content: "";
position: absolute;
inset: 0;
left: 50%;
width: 100vw;
transform: translateX(-50%);
background: #0E1219;
z-index: -1;
pointer-events: none;
}
#works,
#works p,
#works .text-soft,
#works .mono-label {
color: rgba(255,255,255,.92);
}
#works .label {
color: rgba(255,255,255,.62);
}
#works .text-neutral-600 {
color: rgba(255,255,255,.78) !important;
}
/* Why EAVEX — reference-style horizontal card slider */
.why-eavex {
position: relative;
background: #0E1219;
padding-top: 3.5rem;
padding-bottom: 3.5rem;
}
@media (min-width: 768px) {
.why-eavex {
padding-top: 4.5rem;
padding-bottom: 4.5rem;
}
}
.why-eavex__head {
margin-bottom: 1.25rem;
}
@media (min-width: 768px) {
.why-eavex__head {
margin-bottom: 1.5rem;
}
}
.why-eavex__kicker {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 1.125rem;
margin-left: var(--section-kicker-offset);
}
.why-eavex__dot {
width: 9px;
height: 9px;
border-radius: 999px;
background: #fff;
flex-shrink: 0;
position: relative;
z-index: 1;
box-shadow: none;
border: 1px solid var(--line);
}
.why-eavex__label {
font-family: var(--f-body, "Inter", sans-serif);
font-size: 14px;
line-height: 1.1;
font-weight: 400;
letter-spacing: 0;
text-transform: uppercase;
color: rgba(255,255,255,.8);
}
.why-eavex__title {
margin: 0;
max-width: 16.375rem;
font-family: var(--f-display, "Archivo", system-ui, sans-serif);
font-size: 28px;
font-weight: 400;
line-height: 1;
letter-spacing: -.0125em;
color: #fff;
}
.why-eavex__head-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.why-eavex__head-row .why-eavex__title {
flex: 1;
min-width: 0;
}
@media (min-width: 640px) {
.why-eavex__title {
max-width: 33.6875rem;
font-size: 36px;
}
}
@media (min-width: 1200px) {
.why-eavex__title {
max-width: 35rem;
font-size: 40px;
}
}
.why-eavex__slider-wrap {
margin-right: calc(var(--content-gutter) * -1);
}
@media (min-width: 640px) {
.why-eavex__slider-wrap {
margin-right: 0;
}
}
.why-eavex__slider {
display: flex;
align-items: flex-start;
gap: 12px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding-bottom: 2px;
padding-right: var(--content-gutter);
scrollbar-width: none;
}
.why-eavex__slider::-webkit-scrollbar { display: none; }
@media (min-width: 640px) {
.why-eavex__slider { padding-right: 0; }
}
/* card: 260×182 mobile, 296×202 tablet, 296×232 desktop */
.why-eavex__card {
position: relative;
flex: 0 0 260px;
width: 260px;
height: 182px;
box-sizing: border-box;
scroll-snap-align: start;
display: flex;
flex-direction: column;
border-radius: 6px;
border: 1px solid rgba(255,255,255,.08);
background:
  radial-gradient(120% 120% at 0% 0%, rgba(28, 35, 64, 0.85), transparent 58%),
  linear-gradient(180deg, #141A26 0%, #0E1219 100%);
box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
padding: 18px;
overflow: hidden;
}
@media (min-width: 640px) {
.why-eavex__card {
flex: 0 0 296px;
width: 296px;
height: 202px;
}
}
@media (min-width: 1200px) {
.why-eavex__card {
height: 232px;
}
}
/* icon: 40×40, top-left corner, thin stroke */
.why-eavex__card-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: flex-start;
justify-content: flex-start;
color: #fff;
}
.why-eavex__card-icon svg {
display: block;
width: 40px;
height: 40px;
stroke-width: 1 !important;
}
/* body: pushed to bottom of card */
.why-eavex__card-body {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 6px;
}
/* title: 20px/400 */
.why-eavex__card h3 {
margin: 0;
font-size: 20px;
font-weight: 400;
line-height: 1.1;
letter-spacing: 0;
text-transform: none;
color: #fff;
font-style: normal;
}
/* description: 12px, uppercase 60% opacity */
.why-eavex__card p {
margin: 0;
font-size: 12px;
font-weight: 400;
line-height: 1.1;
letter-spacing: 0;
text-transform: uppercase;
color: rgba(255,255,255,.6);
font-style: normal;
}
.why-eavex__foot {
margin: 1.5rem 0 0;
font-family: var(--f-body, "Inter", sans-serif);
font-size: 14px;
line-height: 1.1;
font-weight: 400;
letter-spacing: 0;
text-transform: uppercase;
color: rgba(255,255,255,.8);
}
.why-eavex-reveal {
opacity: 0;
transform: translate3d(0, 30px, 0);
will-change: transform, opacity;
}
.why-eavex.is-ready .why-eavex-reveal,
.why-eavex-reveal.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
.why-eavex__head.why-eavex-reveal {
transition: opacity 1.2s ease, transform 1.2s ease;
}
.why-eavex__kicker.why-eavex-reveal,
.why-eavex__title.why-eavex-reveal {
transition: opacity 1.2s ease, transform 1.2s ease;
}
.why-eavex__card.why-eavex-reveal {
transition: opacity 1.2s ease, transform 1.2s ease;
}
.why-eavex__foot.why-eavex-reveal {
transition: opacity 1.2s ease 0.35s, transform 1.2s ease 0.35s;
}
@media (prefers-reduced-motion: reduce) {
.why-eavex-reveal {
opacity: 1;
transform: none;
transition: none !important;
}
}
.hero-section.is-covered {
visibility: hidden;
pointer-events: none;
}
@media (max-width: 768px) {
.gs-hero-copy {
max-width: calc(100vw - 40px);
}
}
/* === Sticky header + hero spacing fix === */
.site-header,
.hero-shell .site-header {
position: fixed !important;
top: 12px;
left: 50%;
right: auto;
z-index: 1000;
width: min(calc(100vw - 32px), 1536px);
margin: 0;
translate: -50% 0;
transform-origin: center top;
}
.site-header > div,
.hero-shell .site-header > div {
border-color: rgba(247, 239, 228, .22);
background: rgba(0, 0, 0, .78);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.hero-section {
align-items: flex-start !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
}
.hero-shell {
padding-top: 72px;
}
.hero-shell .gs-hero-frame {
margin-top: 12px !important;
height: calc(100svh - 108px) !important;
min-height: 620px;
}
/* === Center header navigation fix === */
@media (min-width: 768px) {
.site-header > div > .flex,
.hero-shell .site-header > div > .flex {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: 24px;
}
.site-header > div > .flex > a:first-child,
.hero-shell .site-header > div > .flex > a:first-child {
justify-self: start;
}
.site-header nav,
.hero-shell .site-header nav {
justify-self: center;
}
.site-header > div > .flex > div:last-of-type,
.hero-shell .site-header > div > .flex > div:last-of-type {
justify-self: end;
}
}
@media (max-width: 768px) {
.site-header,
.hero-shell .site-header {
top: 10px;
width: min(calc(100vw - 20px), 1536px);
}
.hero-section {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.hero-shell {
padding-top: 70px;
}
.hero-shell .gs-hero-frame {
margin-top: 10px !important;
height: calc(100svh - 100px) !important;
min-height: 560px;
}
}
/* === FINAL FIX: true centered sticky header ===
The previous left:50% + translate setup could be overwritten by GSAP transforms,
which made the header start from the middle/right side of the screen.
This pins the header with real left/right spacing and centers the nav absolutely. */
:root {
--header-side-gap: 16px;
--header-max-width: 1536px;
}
.site-header,
.hero-shell .site-header {
position: fixed !important;
top: 14px !important;
left: max(var(--header-side-gap), calc((100vw - var(--header-max-width)) / 2)) !important;
right: max(var(--header-side-gap), calc((100vw - var(--header-max-width)) / 2)) !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
translate: none !important;
transform: none !important;
z-index: 1000 !important;
}
.site-header > div,
.hero-shell .site-header > div {
width: 100% !important;
}
@media (min-width: 768px) {
.site-header > div > .flex,
.hero-shell .site-header > div > .flex {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 24px !important;
}
.site-header > div > .flex > a:first-child,
.hero-shell .site-header > div > .flex > a:first-child {
position: relative !important;
z-index: 2 !important;
flex: 0 0 auto !important;
}
.site-header nav,
.hero-shell .site-header nav {
position: absolute !important;
left: 50% !important;
top: 50% !important;
z-index: 1 !important;
display: flex !important;
width: max-content !important;
transform: translate(-50%, -50%) !important;
justify-self: auto !important;
}
.site-header > div > .flex > div:last-of-type,
.hero-shell .site-header > div > .flex > div:last-of-type {
position: relative !important;
z-index: 2 !important;
flex: 0 0 auto !important;
margin-left: auto !important;
justify-self: auto !important;
}
}
@media (max-width: 767px) {
.site-header,
.hero-shell .site-header {
top: 10px !important;
left: 10px !important;
right: 10px !important;
}
}
/* === FINAL LAYOUT FIX: shared page margins for sticky header + hero frame ===
Header and hero now use the same max width and the same left/right gutter,
so the whole opening composition aligns with the sections below. */
:root {
--page-max-width: 1536px;
--page-gutter: clamp(16px, 2.6vw, 48px);
--content-gutter: 16px;
--header-gutter-hero: var(--page-gutter);
--header-gutter-content: var(--content-gutter);
--sticky-header-height: 58px;
--header-hero-gap: 12px;
}
.hero-section {
align-items: flex-start !important;
justify-content: center !important;
min-height: 100svh !important;
padding: 0 !important;
overflow: hidden !important;
}
.hero-shell {
width: min(calc(100vw - (var(--page-gutter) * 2)), var(--page-max-width)) !important;
max-width: var(--page-max-width) !important;
margin-inline: auto !important;
padding-top: calc(var(--page-gutter) + var(--sticky-header-height) + var(--header-hero-gap)) !important;
}
.site-header,
.hero-shell .site-header {
position: fixed !important;
top: var(--page-gutter) !important;
left: max(var(--page-gutter), calc((100vw - var(--page-max-width)) / 2)) !important;
right: max(var(--page-gutter), calc((100vw - var(--page-max-width)) / 2)) !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
translate: none !important;
transform: none !important;
}
.site-header > div,
.hero-shell .site-header > div {
min-height: var(--sticky-header-height) !important;
display: flex !important;
align-items: center !important;
}
.site-header > div > .flex,
.hero-shell .site-header > div > .flex {
width: 100% !important;
}
.hero-shell .gs-hero-frame {
width: 100% !important;
margin-top: 0 !important;
height: calc(100svh - var(--page-gutter) - var(--sticky-header-height) - var(--header-hero-gap) - var(--page-gutter)) !important;
min-height: 620px !important;
}
@media (min-width: 768px) {
.site-header > div > .flex,
.hero-shell .site-header > div > .flex {
position: relative !important;
display: grid !important;
grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr) !important;
align-items: center !important;
gap: 24px !important;
}
.site-header nav,
.hero-shell .site-header nav {
position: static !important;
transform: none !important;
justify-self: center !important;
width: max-content !important;
}
.site-header > div > .flex > a:first-child,
.hero-shell .site-header > div > .flex > a:first-child {
justify-self: start !important;
}
.site-header > div > .flex > div:last-of-type,
.hero-shell .site-header > div > .flex > div:last-of-type {
justify-self: end !important;
margin-left: 0 !important;
}
}
@media (max-width: 767px) {
:root {
--page-gutter: 12px;
--content-gutter: 16px;
--header-gutter-hero: 12px;
--header-gutter-content: 16px;
--sticky-header-height: 58px;
--header-hero-gap: 10px;
}
.hero-shell {
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
padding-top: 0 !important;
}
.hero-shell .gs-hero-frame {
min-height: 100svh !important;
height: 100svh !important;
margin-top: 0 !important;
border-left: none;
border-right: none;
border-top: none;
}
.hero-shell .gs-hero-frame .cross-marker {
display: none;
}
.gs-hero-frame .hero-top-copy {
top: calc(var(--header-gutter-hero) + var(--sticky-header-height) + 12px) !important;
left: var(--content-gutter) !important;
}
}
@media (min-width: 768px) {
:root {
--content-gutter: 48px;
--header-gutter-content: 48px;
}
}
/* ═══════════════ EAVEX — DARK NAVY THEME ═══════════════
   Design tokens: navy-950 #0E1219 (base bg), navy-900 #141A26 (panels),
   navy-800 #1C2340 (dividers/hover). Off-white text kept for editorial contrast. */
:root{
--nv-950:#0E1219; --nv-900:#141A26; --nv-800:#1C2340;
}
html.bg-black,
html,
body{ background:#0E1219 !important; }
.hero-section{ background:#0E1219 !important; }
.gs-hero-frame.hero-cinematic{ background:#141A26 !important; }
.hero-media{ background:#141A26 !important; }
.scroll-wipe-section,
#works{ background:#0E1219 !important; }
.frame{ background:#141A26 !important; }
.hero-bg-wash{
background:
radial-gradient(circle at 72% 18%, rgba(232,200,114,.10), transparent 34%),
linear-gradient(180deg,#141A26 0%,#0E1219 52%,#0A0E15 100%) !important;
}
/* Solid Tailwind surfaces → navy */
.bg-black{ background-color:#0E1219 !important; }
.bg-neutral-900{ background-color:#1C2340 !important; }
.bg-neutral-900\/60{ background-color:rgba(28,35,64,.60) !important; }
.bg-neutral-900\/50{ background-color:rgba(28,35,64,.50) !important; }
.bg-neutral-900\/30{ background-color:rgba(28,35,64,.30) !important; }
.bg-black\/40{ background-color:rgba(14,18,25,.42) !important; }
.bg-black\/72{ background-color:rgba(14,18,25,.78) !important; }
.bg-black\/85{ background-color:rgba(14,18,25,.88) !important; }
.bg-\[\#030303\],
.bg-\[\#030403\],
.bg-\[\#020202\],
.bg-\[\#030202\]{ background-color:#0E1219 !important; }
.site-header > div,
.hero-shell .site-header > div{ background:rgba(14,18,25,.82) !important; }
.site-header.is-scrolled > div{ background:rgba(14,18,25,.9) !important; }

/* ═══════════════ EAVEX MOBILE MENU (same as eavex.us) ═══════════════ */
:root{
--navy-950:#0E1219; --navy-900:#141A26; --navy-800:#1C2340;
--bronze-light:#E8C872; --bronze-mid:#B8860B;
--stone-400:#9E9C96;
--grad-bronze-btn:linear-gradient(180deg,#EFCD84 0%,#DBAA47 42%,#B8860B 72%,#8A5A28 100%);
--f-display:'Archivo',system-ui,sans-serif;
--f-body:'Inter',system-ui,sans-serif;
--f-mono:'JetBrains Mono',ui-monospace,monospace;
--ease-menu:cubic-bezier(.22,1,.36,1);
}
.m-menu{display:none}
.btn{--btn-h:56px;--btn-b:1.5px;position:relative;display:inline-block;height:var(--btn-h);min-width:180px;padding:0;border-radius:999px;border:var(--btn-b) solid rgba(255,255,255,.35);background:transparent;cursor:pointer;font-family:var(--f-display);font-weight:700;font-size:var(--type-micro,0.875rem);letter-spacing:.03em;text-transform:uppercase;transition:border-color .3s var(--ease-menu);text-decoration:none;color:#fff}
.btn:hover{border-color:rgba(255,255,255,.8)}
.btn-circle{position:absolute;top:4px;bottom:4px;left:4px;width:calc(var(--btn-h) - 2*var(--btn-b) - 8px);border-radius:999px;background:var(--grad-bronze-btn);transition:width .5s var(--ease-menu);z-index:0;pointer-events:none}
.btn:hover .btn-circle{width:calc(100% - 8px)}
.btn-icon{position:absolute;top:4px;bottom:4px;left:4px;width:calc(var(--btn-h) - 2*var(--btn-b) - 8px);display:flex;align-items:center;justify-content:center;color:#fff;z-index:1;transition:transform .5s var(--ease-menu);pointer-events:none}
.btn:hover .btn-icon{transform:translateX(6px)}
.btn-label{position:absolute;top:50%;left:50%;transform:translate(calc(-50% + 16px),-50%);color:#fff;white-space:nowrap;z-index:1;pointer-events:none}
.btn-primary{color:#fff}
.m-menu__cta{--btn-h:56px;width:100%;margin-top:28px;font-stretch:64%;letter-spacing:.06em}
.burger{display:none;background:none;border:none;cursor:pointer;width:40px;height:40px;position:relative;z-index:1101;flex-shrink:0;color:#fff}
.burger span{display:block;width:24px;height:2px;background:currentColor;margin:5px auto;transition:.3s var(--ease-menu)}
@media(max-width:767px){
.burger{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:5px;
border:1px solid rgba(130,130,130,1);
border-radius:6px;
background:transparent;
box-sizing:border-box;
}
.burger span{
margin:0;
flex-shrink:0;
}
.m-menu{display:flex;flex-direction:column;position:fixed;inset:0;z-index:1100;background:var(--navy-950);padding:20px clamp(20px,6vw,28px) 30px;transform:translateX(100%);visibility:hidden;transition:transform .4s var(--ease-menu),visibility 0s .4s;overflow-y:auto;overscroll-behavior:contain}
.m-menu.open{transform:none;visibility:visible;transition:transform .4s var(--ease-menu)}
.m-menu__top{display:flex;align-items:center;justify-content:space-between}
.m-menu__logo img{height:44px;width:auto;display:block}
.m-menu__close{display:inline-flex;align-items:center;gap:8px;background:none;border:none;color:#fff;font-family:var(--f-body);font-size:var(--type-small,1rem);cursor:pointer;padding:6px 0}
.m-menu__nav{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:56px;text-align:left}
.m-menu__nav a{font-family:var(--f-display);font-stretch:88%;font-weight:600;font-size:clamp(2rem,9.5vw,2.75rem);line-height:1.24;letter-spacing:-.01em;color:#fff;text-align:left;transition:color .2s;text-decoration:none}
.m-menu__nav a.is-active,.m-menu__nav a:active{color:var(--bronze-light)}
.m-menu__foot{margin-top:auto;padding-top:44px}
.m-menu__info{display:flex;flex-direction:column;gap:20px}
.m-menu__label{display:block;font-family:var(--f-mono);font-size:var(--type-micro,0.875rem);letter-spacing:.14em;text-transform:uppercase;color:var(--stone-400);margin-bottom:8px}
.m-menu__block a,.m-menu__block p{display:block;font-size:var(--type-body,1.125rem);color:rgba(255,255,255,.82);line-height:1.6;text-decoration:none}
.m-menu__areas{display:flex;flex-wrap:wrap;gap:6px 18px}
.m-menu__areas a{display:inline;font-size:var(--type-small,1rem);color:rgba(255,255,255,.82);text-decoration:none}
.m-menu__row{display:flex;align-items:center;margin-top:26px}
.m-menu__social{display:flex;gap:10px}
.m-menu__social a{width:38px;height:38px;border-radius:50%;background:rgba(232,200,114,.12);border:1px solid rgba(232,200,114,.55);display:flex;align-items:center;justify-content:center;color:var(--bronze-light);transition:background .2s,border-color .2s;text-decoration:none}
.m-menu__social a:active{background:rgba(232,200,114,.28);border-color:var(--bronze-light)}
.m-menu__social svg{width:17px;height:17px}
.site-logo{height:40px;width:auto;display:block}
@media(min-width:768px){.site-logo{height:44px}}
@media(max-width:767px){
.gs-hero-copy{
left:var(--content-gutter) !important;
right:auto !important;
bottom:122px !important;
width:auto !important;
max-width:calc(100vw - (var(--content-gutter) * 2)) !important;
text-align:left !important;
}
.gs-hero-copy .hero-kicker,
.gs-hero-copy .gs-hero-subheading{
margin-left:0;
margin-right:0;
min-height:2.15em;
}
.gs-hero-copy .hero-title-wrap{
display:flex;
justify-content:flex-start;
}
.gs-hero-actions{
align-items:flex-start !important;
justify-content:flex-start !important;
}
.hero-bottom-rail{z-index:25}
}
/* Hero copy — left-aligned on all breakpoints */
.gs-hero-copy{
text-align:left;
}
.gs-hero-copy .hero-title-wrap{
display:flex;
justify-content:flex-start;
}
.gs-hero-actions{
align-items:flex-start;
justify-content:flex-start;
}
.typewriter-text{
font-size:48px;
line-height:1.08;
letter-spacing:0;
}
.typewriter-cursor{
display:inline;
margin-left:1px;
font-weight:300;
opacity:.85;
vertical-align:baseline;
}
/* Mobile header CTA — compact square white pill */
.header-cta-mobile{
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
height:40px;
min-height:40px;
padding:0 12px;
border:1px solid #fff;
border-radius:6px;
background:#fff;
font-family:var(--f-display, "Archivo", system-ui, sans-serif);
font-size:11px;
font-weight:600;
line-height:1;
letter-spacing:.06em;
text-transform:uppercase;
text-decoration:none;
color:#000;
white-space:nowrap;
transition:background .2s ease, color .2s ease;
}
.header-cta-mobile:hover{
background:#f7efe4;
}
.header-call-mobile{
display:inline-flex;
align-items:center;
justify-content:center;
flex-shrink:0;
width:40px;
height:40px;
min-width:40px;
min-height:40px;
border:1px solid #fff;
border-radius:6px;
background:#fff;
color:#000;
text-decoration:none;
transition:background .2s ease, color .2s ease;
}
.header-call-mobile:hover{
background:#f7efe4;
color:#000;
}
.header-call-mobile svg,
.header-call-mobile i svg{
width:18px;
height:18px;
stroke-width:2.5 !important;
}
.header-mobile-actions{
margin-left:auto;
}
.gs-hero-cta-secondary{
background:rgba(0,0,0,.28) !important;
-webkit-backdrop-filter:blur(18px);
backdrop-filter:blur(18px);
}
.gs-hero-cta-secondary:hover{
background:rgba(0,0,0,.38) !important;
}
@media(max-width:380px){
.header-cta-mobile{
padding:0 10px;
font-size:10px;
letter-spacing:.05em;
}
}
/* Fixed header — always viewport-level, never inside pinned hero transform */
.site-header > div{
border-radius:6px;
}
.site-header{
position:fixed !important;
top:var(--header-gutter-hero, var(--page-gutter,14px)) !important;
left:max(var(--header-gutter-hero, var(--page-gutter,16px)),calc((100vw - var(--page-max-width,1536px))/2)) !important;
right:max(var(--header-gutter-hero, var(--page-gutter,16px)),calc((100vw - var(--page-max-width,1536px))/2)) !important;
width:auto !important;
z-index:1000 !important;
transform:none !important;
translate:none !important;
will-change:auto;
transition:opacity .35s ease;
}
.site-header.is-scrolled > div{
background:rgba(14,18,25,.92) !important;
}
/* === Vertical guide rails (full-page editorial grid) === */
:root {
--guide-line-color: rgba(247, 239, 228, 0.13);
--site-guide-left: max(var(--header-gutter-hero, var(--page-gutter, 12px)), calc((100vw - var(--page-max-width, 1536px)) / 2));
--section-kicker-offset: calc(var(--site-guide-left) - var(--content-gutter, 16px) - 4px + 0.5px);
}
.site-guides {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 90;
}
.site-guide {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: var(--guide-line-color);
}
.site-guide--left {
left: var(--site-guide-left);
}
.site-guide--right {
right: max(var(--header-gutter-hero, var(--page-gutter, 12px)), calc((100vw - var(--page-max-width, 1536px)) / 2));
}
/* Content blocks align to guide rails */
#app > section:not(.hero-section) {
padding-left: var(--content-gutter) !important;
padding-right: var(--content-gutter) !important;
}
footer > .relative.z-10 {
  box-sizing: border-box;
  width: calc(100vw - (var(--site-guide-left) * 2));
  max-width: var(--page-max-width, 1536px);
  margin-left: var(--site-guide-left);
  margin-right: var(--site-guide-left);
  padding-left: 0 !important;
  padding-right: 0 !important;
}
footer > .relative.z-10 > .mt-8 {
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
}
/* Footer grid gaps: same gray as site guide rails (not navy bg-neutral-900) */
footer .grid.gap-px {
  background-color: var(--guide-line-color) !important;
}
/* ── Services Grid ─────────────────────────────────────────────── */
.services-grid {
  position: relative;
  background: #0E1219;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
@media (min-width: 768px) {
  .services-grid { padding-top: 4.5rem; padding-bottom: 4.5rem; }
}
.services-grid__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 2rem;
}
@media (min-width: 640px) {
  .services-grid__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .services-grid__cards { grid-template-columns: repeat(3, 1fr); }
}
.svc-card {
  border-radius: 6px;
  background: #1c1c1c;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.svc-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex-shrink: 0;
}
.svc-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.svc-card:hover .svc-card__img { transform: scale(1.04); }
.svc-card__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
}
.svc-card h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
}
.svc-card__body > p {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.6);
}
.svc-card__btns {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.svc-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff;
  color: #0E1219;
  padding: 0 18px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease;
}
.svc-btn-primary:hover { background: rgba(255,255,255,.85); }
.svc-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: rgba(255,255,255,.7);
  padding: 0 18px;
  height: 38px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.svc-btn-secondary:hover { border-color: rgba(255,255,255,.5); color: #fff; }
/* CTA card — spans 2 cols on desktop, beige body like site accent */
.svc-card--cta {
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #1c1c1c;
}
.svc-card--cta .svc-card__body {
  background: #f6efe3;
  color: #0E1219;
}
.svc-card--cta .svc-kicker {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.45);
  margin: 0 0 4px;
}
.svc-card--cta h3 {
  color: #0E1219;
}
.svc-card--cta .svc-cta-desc {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(0,0,0,.5);
}
.svc-card--cta .svc-btn-primary { background: #0E1219; color: #fff; border-color: #0E1219; }
.svc-card--cta .svc-btn-primary:hover { background: #1c1c1c; border-color: #1c1c1c; }
.svc-card--cta .svc-btn-secondary { border-color: rgba(0,0,0,.2); color: rgba(0,0,0,.6); }
.svc-card--cta .svc-btn-secondary:hover { border-color: rgba(0,0,0,.5); color: #0E1219; }
@media (min-width: 1024px) {
  .svc-card--cta { grid-column: span 2; }
}
/* Reveal animation */
.svc-reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  will-change: transform, opacity;
}
.svc-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .svc-reveal { opacity: 1; transform: none; transition: none !important; }
}

/* ── Ruler Carousel ─────────────────────────────────────── */
.brc-section {
  position: relative;
  z-index: 5;
  background: #0E1219;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brc-head {
  padding: 1.25rem 0 .5rem;
}
/* Ruler bars */
.brc-ruler {
  position: relative;
  height: 20px;
  overflow: hidden;
}
.brc-ruler-track {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  will-change: transform;
  backface-visibility: hidden;
}
.brc-tick {
  position: absolute;
  width: 1.5px;
  background: rgba(255,255,255,.68);
  transform: translateX(-50%);
}
.brc-ruler--top    .brc-tick { bottom: 0; }
.brc-ruler--bottom .brc-tick { top: 0; }
/* Carousel viewport — fade edges like InfiniteSlider mask */
.brc-viewport {
  position: relative;
  overflow: hidden;
  height: 65px;
  display: flex;
  align-items: center;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
@media (min-width: 640px)  { .brc-viewport { height: 75px; } }
@media (min-width: 1024px) { .brc-viewport { height: 90px; } }
/* InfiniteSlider-style track: duplicated children, linear infinite loop */
@keyframes brc-scroll-reverse {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(-1 * var(--brc-loop, 0px)), 0, 0); }
}
.brc-track.is-running,
.brc-ruler-track.is-running {
  animation: brc-scroll-reverse var(--brc-duration, 80s) linear infinite;
}
.brc-section.is-paused .brc-track.is-running,
.brc-section.is-paused .brc-ruler-track.is-running {
  animation-play-state: paused;
}
.brc-track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 42px;
  will-change: transform;
  backface-visibility: hidden;
}
.brc-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
}
.brc-item img {
  display: block;
  height: 36px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  pointer-events: none;
}
@media (min-width: 640px) {
  .brc-item img { height: 42px; max-width: 220px; }
}
@media (min-width: 1024px) {
  .brc-item img { height: 48px; max-width: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .brc-track.is-running,
  .brc-ruler-track.is-running { animation: none !important; }
}

/* ── Why EAVEX — desktop ──────────────────────────────── */
@media (min-width: 1024px) {
  .why-eavex {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
  .why-eavex__inner {
    display: grid;
    grid-template-columns: 360px 1fr;
    align-items: start;
    gap: 48px;
  }
  .why-eavex__head {
    margin-bottom: 0;
    position: sticky;
    top: 80px;
  }
  .why-eavex__title {
    max-width: 320px;
    font-size: 36px;
  }
  .why-eavex__slider-wrap { margin-right: 0; }
  #whyEavexSwipeHint { display: none; }
  .why-eavex__slider {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    gap: 12px;
    padding-right: 0;
  }
  @media (min-width: 1280px) {
  .why-eavex__slider {
    grid-template-columns: repeat(4, 1fr);
  }
  }
  .why-eavex__card {
    flex: unset;
    width: auto;
    height: auto;
    min-height: 220px;
  }
  .why-eavex__foot { margin-top: 2.5rem; }
}
@media (min-width: 1280px) {
  .why-eavex__inner { grid-template-columns: 420px 1fr; gap: 64px; }
  .why-eavex__title { font-size: 42px; max-width: 360px; }
  .why-eavex__card { min-height: 240px; }
}

/* ── Services Grid — всё устройство ──────────────────── */
.services-grid {
  position: relative;
  background: #0E1219;
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
@media (min-width: 768px) {
  .services-grid { padding-top: 4.5rem; padding-bottom: 4.5rem; }
}
@media (min-width: 1024px) {
  .services-grid { padding-top: 6rem; padding-bottom: 6rem; }
  #services .why-eavex__title {
    max-width: 720px;
    font-size: 40px;
    line-height: 1.05;
  }
}
.services-grid__cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 2rem;
}
@media (min-width: 640px) {
  .services-grid__cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  #services .why-eavex__title {
    max-width: 820px;
    font-size: 42px;
  }
}
@media (min-width: 1024px) {
  .services-grid__cards { grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 2.5rem; }
}

/* Cards */
.svc-card {
  border-radius: 6px;
  background: #1c1c1c;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.svc-card__img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  flex-shrink: 0;
}
.svc-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
.svc-card:hover .svc-card__img { transform: scale(1.04); }
.svc-card__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
}
@media (min-width: 1024px) {
  .svc-card__body { padding: 22px; gap: 8px; }
}
.svc-card h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
}
@media (min-width: 1024px) {
  .svc-card h3 { font-size: 22px; }
}
.svc-card__body > p {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.6);
}
.svc-card__btns {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Buttons */
.svc-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #fff;
  color: #0E1219;
  padding: 0 18px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .2s ease;
}
.svc-btn-primary:hover { background: rgba(255,255,255,.85); }
.svc-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  color: rgba(255,255,255,.7);
  padding: 0 18px;
  height: 38px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease;
}
.svc-btn-secondary:hover { border-color: rgba(255,255,255,.5); color: #fff; }
/* CTA card — spans 2 cols on desktop */
.svc-card--cta {
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #1c1c1c;
}
.svc-card--cta .svc-card__body {
  background: #f6efe3;
  color: #0E1219;
  padding: 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@media (min-width: 1024px) {
  .svc-card--cta {
    grid-column: span 2;
    flex-direction: row;
    align-items: stretch;
  }
  .svc-card--cta .svc-card__img-wrap {
    flex: 1.15;
    width: auto;
    aspect-ratio: auto;
    min-height: 100%;
  }
  .svc-card--cta .svc-card__body {
    flex: 1;
    justify-content: flex-end;
    padding: 32px 28px 32px 24px;
  }
  .svc-card--cta h3 { font-size: 28px; max-width: 420px; }
  .svc-card--cta .svc-cta-desc { max-width: 400px; }
}
.svc-card--cta .svc-kicker {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(0,0,0,.45);
  margin: 0 0 4px;
}
.svc-card--cta h3 {
  color: #0E1219;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.1;
  margin: 0;
}
.svc-card--cta .svc-cta-desc {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(0,0,0,.5);
}
.svc-card--cta .svc-card__btns {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.svc-card--cta .svc-btn-primary { background: #0E1219; color: #fff; border-color: #0E1219; }
.svc-card--cta .svc-btn-primary:hover { background: #1c1c1c; border-color: #1c1c1c; }
.svc-card--cta .svc-btn-secondary { border-color: rgba(0,0,0,.2); color: rgba(0,0,0,.6); }
.svc-card--cta .svc-btn-secondary:hover { border-color: rgba(0,0,0,.5); color: #0E1219; }
/* Reveal */
.svc-reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  will-change: transform, opacity;
}
.svc-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .svc-reveal { opacity: 1; transform: none; transition: none !important; }
}
/* ── How It Works ──────────────────────────────────────────────── */
.how-works {
  position: relative;
  background: #0E1219;
  padding: 3.5rem var(--content-gutter) 4rem;
  border-top: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
@media (min-width: 768px) {
  .how-works { padding-top: 4.5rem; padding-bottom: 5rem; }
}
@media (min-width: 1200px) {
  .how-works { padding-top: 5.5rem; padding-bottom: 6rem; }
}
.how-works__head {
  margin-bottom: 2.5rem;
}
@media (min-width: 768px) {
  .how-works__head { margin-bottom: 3rem; }
}
.how-works__head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.how-works__title {
  margin: 0;
  flex: 1;
  min-width: 0;
  max-width: 16.375rem;
  font-family: var(--f-display, "Archivo", system-ui, sans-serif);
  font-size: clamp(2rem, 6.5vw, 2.5rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-transform: none;
  color: #fff;
}
.how-works__title-muted {
  display: block;
  color: rgba(255,255,255,.45);
}
@media (min-width: 768px) {
  .how-works__title { max-width: 22rem; font-size: 40px; }
}
.how-works__kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 1.125rem;
  margin-left: var(--section-kicker-offset);
}
.how-works__kicker span:last-child {
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 14px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.how-works__swipe-hint {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: center;
  opacity: 1;
  transition: opacity .4s ease;
}
.how-works__swipe-hint.is-hidden { opacity: 0; pointer-events: none; }
.how-works__swipe-track {
  position: relative;
  width: 72px;
  height: 36px;
  overflow: hidden;
}
.how-works__swipe-hand {
  position: absolute;
  left: 8px;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 2px;
  color: rgba(255,255,255,.85);
}
.how-works__swipe-hand svg { width: 18px; height: 18px; flex-shrink: 0; }
.how-works__swipe-label {
  margin: 0;
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.38);
}
.how-works__slider-wrap {
  position: relative;
}
.how-works__slider {
  display: flex;
  align-items: stretch;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 2px;
  padding-right: var(--content-gutter);
  margin-right: calc(var(--content-gutter) * -1);
  scrollbar-width: none;
}
.how-works__slider::-webkit-scrollbar { display: none; }
@media (min-width: 640px) {
  .how-works__slider { padding-right: 0; margin-right: 0; }
}
.how-works__card {
  flex: 0 0 min(78vw, 320px);
  width: min(78vw, 320px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
@media (min-width: 640px) {
  .how-works__card { flex: 0 0 296px; width: 296px; }
}
@media (min-width: 1200px) {
  .how-works__card { flex: 0 0 312px; width: 312px; }
}
.how-works__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: #1c1c1c;
}
.how-works__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(35%) brightness(.72);
  transition: transform .7s ease, filter .7s ease;
}
.how-works__card:hover .how-works__media img {
  transform: scale(1.03);
  filter: grayscale(15%) brightness(.82);
}
.how-works__num {
  position: absolute;
  left: 10px;
  bottom: 2px;
  z-index: 2;
  font-family: var(--f-display, "Archivo", system-ui, sans-serif);
  font-size: clamp(4.5rem, 18vw, 6.5rem);
  font-weight: 500;
  line-height: .85;
  letter-spacing: -.06em;
  color: rgba(255,255,255,.94);
  text-shadow: 0 4px 28px rgba(0,0,0,.55);
  pointer-events: none;
  user-select: none;
}
.how-works__body {
  padding: 18px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.how-works__body h3 {
  margin: 0;
  font-family: var(--f-display, "Archivo", system-ui, sans-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
}
.how-works__desc {
  margin: 0;
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255,255,255,.8);
}
.how-works__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 1.75rem;
}
.how-works__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 2px;
  background: transparent;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.how-works__nav-btn:hover:not(:disabled) {
  border-color: rgba(255,255,255,.45);
  color: #fff;
  background: rgba(255,255,255,.04);
}
.how-works__nav-btn:disabled {
  opacity: .28;
  cursor: default;
}
.how-works__nav-btn svg { width: 16px; height: 16px; }
/* ── Process Timeline (vertical scroll) ───────────────────────── */
.how-works-timeline .how-works__head { margin-bottom: 2rem; }
@media (min-width: 768px) {
  .how-works-timeline .how-works__head { margin-bottom: 2.5rem; }
}
.hw-timeline {
  position: relative;
  max-width: 72rem;
  margin: 0 auto;
  padding-bottom: 1rem;
  --hw-guide-offset: calc(var(--site-guide-left) - var(--content-gutter, 16px));
  --hw-dot-size: 32px;
  --hw-dot-flex: calc(var(--hw-dot-size) / 2 + var(--hw-guide-offset) + 0.5px);
  --hw-media-left: calc(var(--content-gutter) + var(--hw-dot-flex) + 0.75rem);
  --hw-media-side-gap: calc(var(--hw-media-left) - var(--header-gutter-hero, 12px));
}
.hw-timeline__track {
  position: absolute;
  left: 19px;
  top: 0;
  bottom: 0;
  width: 2px;
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 767px) {
  .hw-timeline {
    --hw-dot-size: 26px;
  }
  .how-works-timeline .hw-timeline__track {
    left: calc(var(--hw-guide-offset) + 0.5px - 1px);
    width: 2px;
    z-index: 1;
  }
  .hw-timeline__entries {
    z-index: 2;
  }
  .hw-timeline.is-ready .hw-timeline__line-fill {
    background: #fff;
  }
}
@media (min-width: 768px) {
  .hw-timeline__track { left: 31px; }
}
.hw-timeline__line {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,255,255,.14) 10%,
    rgba(255,255,255,.14) 90%,
    transparent 100%
  );
  border-radius: 999px;
}
@media (max-width: 767px) {
  .hw-timeline__line {
    background: var(--guide-line-color);
    border-radius: 0;
  }
}
.hw-timeline__line-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: top center;
  transform: scaleY(0);
  background: #fff;
  border-radius: 999px;
  will-change: transform, background-color;
}
@media (max-width: 767px) {
  .hw-timeline__line-fill {
    border-radius: 0;
    background: #fff;
  }
}
.hw-timeline.is-ready .hw-timeline__line-fill {
  transform: scaleY(1);
  background: var(--guide-line-color);
}
.hw-timeline__entries {
  position: relative;
  z-index: 2;
}
.hw-timeline__entry {
  display: flex;
  justify-content: flex-start;
  gap: 0;
  padding-top: 2.5rem;
}
.hw-timeline__entry:first-child { padding-top: 0; }
@media (min-width: 768px) {
  .hw-timeline__entry {
    padding-top: 5rem;
    gap: 2.5rem;
  }
  .hw-timeline__entry:first-child { padding-top: 0; }
}
.hw-timeline__sticky {
  position: sticky;
  top: 6.5rem;
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: flex-start;
  flex-shrink: 0;
  width: 40px;
}
@media (max-width: 767px) {
  .hw-timeline__sticky {
    position: relative;
    top: auto;
    width: auto;
    min-width: 0;
    z-index: 92;
  }
}
@media (min-width: 768px) {
  .hw-timeline__sticky {
    flex-direction: row;
    align-items: flex-start;
    width: auto;
    min-width: 11rem;
    max-width: 14rem;
    gap: 0;
  }
}
.hw-timeline__dot {
  position: relative;
  flex-shrink: 0;
  width: var(--hw-dot-size);
  height: var(--hw-dot-size);
  margin-left: 0;
  border-radius: 999px;
  background: #0E1219;
  border: 1px solid rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px #0E1219;
  transition: border-color .35s ease, box-shadow .35s ease;
}
@media (max-width: 767px) {
  .hw-timeline__dot {
    --hw-dot-size: 26px;
    margin-left: calc(var(--hw-guide-offset) + 0.5px - (var(--hw-dot-size) / 2));
    background: #fff;
    border-color: #fff;
    box-shadow: 0 0 0 2px #0E1219;
    z-index: 95;
    isolation: isolate;
  }
  .hw-timeline__dot-num {
    position: relative;
    z-index: 1;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    opacity: 1;
    transform: none;
  }
}
@media (min-width: 768px) {
  .hw-timeline__dot {
    --hw-dot-size: 40px;
    background: #fff;
    border-color: rgba(255,255,255,.85);
    box-shadow: 0 0 0 4px #0E1219;
  }
}
.hw-timeline__dot-num {
  display: block;
  min-width: 1ch;
  font-family: var(--f-display, "Archivo", system-ui, sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  text-align: center;
  color: #000;
  transform: translateY(.5px);
  transition: color .35s ease;
}
@media (min-width: 768px) {
  .hw-timeline__dot-num {
    font-size: 14px;
    color: #000;
  }
}
@media (min-width: 768px) {
  .hw-timeline__entry.is-active .hw-timeline__dot {
    border-color: #fff;
  }
  .hw-timeline__entry.is-active .hw-timeline__dot-num {
    color: #000;
  }
  .hw-timeline__entry.is-passed .hw-timeline__dot {
    border-color: var(--guide-line-color);
  }
  .hw-timeline__entry.is-passed .hw-timeline__dot-num {
    color: #000;
  }
}
.hw-timeline__step-label {
  display: none;
  margin: 0;
  padding-left: 1.25rem;
  font-family: var(--f-display, "Archivo", system-ui, sans-serif);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.04em;
  color: rgba(255,255,255,.32);
}
@media (min-width: 768px) {
  .hw-timeline__step-label { display: block; }
}
.hw-timeline__content {
  flex: 1;
  min-width: 0;
  padding-left: 0.75rem;
  padding-right: 0;
}
@media (min-width: 768px) {
  .hw-timeline__content {
    padding-left: 0;
    padding-right: 0;
    max-width: none;
  }
}
.hw-timeline__title {
  margin: 0 0 10px;
  font-family: var(--f-display, "Archivo", system-ui, sans-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
}
@media (min-width: 768px) {
  .hw-timeline__title { display: none; }
}
.hw-timeline__desc {
  margin: 0 0 1.25rem;
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
  color: rgba(255,255,255,.8);
  max-width: 28rem;
}
@media (min-width: 768px) {
  .hw-timeline__desc { font-size: 13px; margin-bottom: 1.5rem; }
}
.hw-timeline__media {
  position: relative;
  width: calc(100vw - 2 * var(--hw-media-left));
  max-width: none;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  border-radius: 4px;
  background: #1c1c1c;
}
@media (min-width: 768px) {
  .hw-timeline {
    --hw-media-left: calc(
      var(--content-gutter)
      + 11rem
      + 2.5rem
    );
  }
  .hw-timeline__media {
    width: calc(100vw - 2 * var(--hw-media-left));
  }
}
.hw-timeline__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: grayscale(35%) brightness(.72);
  transition: transform .7s ease, filter .7s ease;
}
.hw-timeline__entry[data-step="1"] .hw-timeline__media img {
  object-position: center 48%;
}
.hw-timeline__entry[data-step="2"] .hw-timeline__media img {
  object-position: center 36%;
}
.hw-timeline__entry[data-step="3"] .hw-timeline__media img {
  object-position: center 78%;
}
.hw-timeline__entry[data-step="4"] .hw-timeline__media img {
  object-position: 42% 44%;
}
.hw-timeline__entry:hover .hw-timeline__media img {
  transform: scale(1.03);
  filter: grayscale(15%) brightness(.82);
}
.hw-timeline__num {
  position: absolute;
  top: 8px;
  left: 10px;
  bottom: auto;
  z-index: 2;
  font-family: var(--f-display, "Archivo", system-ui, sans-serif);
  font-size: clamp(3.5rem, 14vw, 5.5rem);
  font-weight: 500;
  line-height: .85;
  letter-spacing: -.06em;
  color: rgba(255,255,255,.94);
  text-shadow: 0 4px 28px rgba(0,0,0,.55);
  pointer-events: none;
  user-select: none;
}
.proc-reveal {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  will-change: transform, opacity;
}
.proc-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.how-works__card.proc-reveal { transition-delay: var(--proc-delay, 0s); }
.hw-timeline__entry.proc-reveal { transition-delay: var(--proc-delay, 0s); }
.projects__card.proc-reveal { transition-delay: var(--proc-delay, 0s); }
@media (prefers-reduced-motion: reduce) {
  .proc-reveal { opacity: 1; transform: none; transition: none !important; }
  .how-works__swipe-hint { display: none; }
}
/* ── Our Projects — before/after cards ─────────────────────────── */
.projects {
  position: relative;
  background: #0E1219;
  padding: 3.5rem var(--content-gutter) 4rem;
  border-top: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
@media (min-width: 768px) {
  .projects { padding-top: 4.5rem; padding-bottom: 5rem; }
}
@media (min-width: 1200px) {
  .projects { padding-top: 5.5rem; padding-bottom: 6rem; }
}
.projects__card {
  flex: 0 0 min(78vw, 320px);
  width: min(78vw, 320px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
@media (min-width: 640px) {
  .projects__card { flex: 0 0 296px; width: 296px; }
}
@media (min-width: 1200px) {
  .projects__card { flex: 0 0 312px; width: 312px; }
}
.projects__body {
  padding: 2px 2px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.projects__tag {
  display: inline-block;
  width: fit-content;
  margin: 0;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 2px;
  background: rgba(255,255,255,.04);
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.projects__body h3 {
  margin: 0;
  font-family: var(--f-display, "Archivo", system-ui, sans-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}
.projects__body p {
  margin: 0;
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 16px;
  line-height: 1.55;
  color: #fff;
}
.projects__more {
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.35);
  text-underline-offset: 5px;
  transition: text-decoration-color .25s ease, opacity .25s ease;
}
.projects__more:hover {
  text-decoration-color: #fff;
  opacity: .88;
}
.projects__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
  margin-top: 6px;
}
.projects__cover {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.1);
  background: #1c1c1c;
}
.projects__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.22,1,.36,1);
}
.projects__card:hover .projects__cover img {
  transform: scale(1.04);
}
.projects__filters-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
}
.projects__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.projects__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.projects__filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 6px;
  background: rgba(255,255,255,.03);
  font-family: var(--f-display, "Archivo", system-ui, sans-serif);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.projects__filter:hover,
.projects__filter.is-active {
  border-color: #fff;
  color: #000;
  background: #fff;
}
.projects__filter.is-active:hover {
  background: #f7efe4;
}
.projects__error {
  margin: 0;
  padding: 2rem 0;
  color: rgba(255,255,255,.55);
}
/* ── Testimonials (Google reviews) ─────────────────────────────── */
.testimonials {
  position: relative;
  background: #0E1219;
  padding: 3.5rem var(--content-gutter) 4.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
@media (min-width: 768px) {
  .testimonials { padding-top: 4.5rem; padding-bottom: 5.5rem; }
}
@media (min-width: 1200px) {
  .testimonials { padding-top: 5.5rem; padding-bottom: 6.5rem; }
}
.projects .how-works__head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.projects #projects-heading {
  max-width: none;
  flex: 1;
  min-width: 0;
}
.projects #projects-heading .how-works__title-muted {
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  margin-top: 0.35em;
}
.projects .how-works__swipe-hint {
  flex-shrink: 0;
  align-self: center;
}
.testimonials .how-works__head-row {
  display: block;
}
.testimonials #reviews-heading {
  max-width: none;
  width: 100%;
}
.testimonials__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin: 0 0 2.5rem;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.06);
}
@media (min-width: 768px) {
  .testimonials__stats { grid-template-columns: repeat(3, 1fr); margin-bottom: 3rem; }
}
.testimonials__stat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 1.25rem 1.5rem;
  background: #141A26;
}
@media (min-width: 768px) {
  .testimonials__stat { padding: 1.5rem 1.75rem; }
}
.testimonials__stat-value {
  font-family: var(--f-display, "Archivo", system-ui, sans-serif);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  color: #fff;
}
.testimonials__stat-value--rating {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.testimonials__stat-star {
  font-size: 0.48em;
  line-height: 1;
  color: #f7efe4;
  transform: translateY(-0.06em);
}
.testimonials__stat-label {
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.52);
}
.testimonials__slider-wrap {
  position: relative;
}
.testimonials__slider {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
}
.testimonials__slider::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  .testimonials__slider {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }
  .testimonials__nav { display: flex; }
}
.testimonials__card {
  flex: 0 0 min(86vw, 360px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-height: 280px;
  padding: 1.5rem;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(28, 35, 64, 0.85), transparent 58%),
    linear-gradient(180deg, #141A26 0%, #0E1219 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.testimonials__card:hover {
  transform: none;
}
@media (min-width: 1024px) {
  .testimonials__card { flex: initial; min-height: 300px; padding: 1.75rem; }
}
.testimonials__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.testimonials__stars {
  display: inline-flex;
  gap: 2px;
}
.testimonials__star {
  font-size: 14px;
  line-height: 1;
  color: rgba(255,255,255,.22);
}
.testimonials__star.is-filled { color: #f7efe4; }
.testimonials__source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.testimonials__google-icon { opacity: .75; }
.testimonials__quote {
  margin: 0;
  flex: 1;
  position: relative;
}
.testimonials__quote-mark {
  position: absolute;
  top: -10px;
  left: -2px;
  font-family: var(--f-display, "Archivo", system-ui, sans-serif);
  font-size: 3rem;
  line-height: 1;
  color: rgba(247,239,228,.12);
  pointer-events: none;
}
.testimonials__quote p {
  margin: 0;
  padding-top: 1.25rem;
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: var(--type-small, 1rem);
  line-height: 1.65;
  color: rgba(255,255,255,.82);
}
.testimonials__author {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.testimonials__avatar-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.testimonials__avatar-wrap .testimonials__avatar {
  position: absolute;
  inset: 0;
}
.testimonials__avatar,
.testimonials__avatar-img {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  flex-shrink: 0;
  background: #1C2340;
  border: 1px solid rgba(255,255,255,.1);
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #f7efe4;
}
.testimonials__avatar-img {
  display: block;
  object-fit: cover;
}
.testimonials__name {
  font-style: normal;
  font-family: var(--f-display, "Archivo", system-ui, sans-serif);
  font-stretch: 88%;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  color: #fff;
}
.testimonials__author-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.testimonials__date {
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}
.testimonials__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
}
.testimonials__nav {
  display: flex;
  gap: 8px;
}
.testimonials__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 2px;
  background: transparent;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.testimonials__nav-btn:hover {
  border-color: rgba(255,255,255,.45);
  color: #fff;
  background: rgba(255,255,255,.04);
}
.testimonials__nav-btn svg { width: 16px; height: 16px; }
.testimonials__error a {
  color: #f7efe4;
}

/* Blog & Tips slider */
.blog-slider {
  margin-top: 0;
  padding-top: 51px;
  padding-bottom: 2.5rem;
  padding-left: 0;
  padding-right: 0;
}
footer #blog.blog-slider .how-works__kicker {
  margin-left: calc(-4px + 0.5px);
}
footer #blog .how-works__title,
footer #blog .blog-slider__sub,
footer #blog .blog-slider__wrap {
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
}
.blog-slider__head {
  margin-bottom: 1.75rem;
}
#blog #blog-heading.how-works__title {
  max-width: none;
  width: 100%;
  line-height: 1.05;
  letter-spacing: -.02em;
}
@media (min-width: 768px) {
  #blog #blog-heading.how-works__title {
    font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  }
}
.blog-slider__head h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -.04em;
  margin: 0 0 .5rem;
  color: #f7efe4;
}
.blog-slider__sub {
  margin: 0;
  font-size: .92rem;
  color: rgba(247,239,228,.58);
  max-width: 36rem;
}
.blog-slider__wrap { position: relative; }
.blog-slider__track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .5rem;
  scrollbar-width: none;
}
.blog-slider__track::-webkit-scrollbar { display: none; }
.blog-slider__card {
  flex: 0 0 calc(100% - 2.5rem);
  scroll-snap-align: start;
  background: #1c1c1c;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 4px;
  overflow: hidden;
  min-height: 100%;
}
@media (min-width: 640px) {
  .blog-slider__card { flex-basis: calc(50% - .5rem); }
}
@media (min-width: 1024px) {
  .blog-slider__card { flex-basis: calc(33.333% - .67rem); }
}
.blog-slider__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.blog-slider__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.blog-slider__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-slider__body { padding: 1.15rem 1.15rem 1.35rem; flex: 1; display: flex; flex-direction: column; }
.blog-slider__title {
  font-size: 1rem;
  line-height: 1.25;
  margin: 0 0 .45rem;
  letter-spacing: -.02em;
  color: #f7efe4;
}
.blog-slider__excerpt {
  margin: 0 0 1rem;
  font-size: .86rem;
  line-height: 1.5;
  color: rgba(247,239,228,.58);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.blog-slider__more {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #f7efe4;
  border: 1px solid rgba(247,239,228,.35);
  padding: .55rem .85rem;
  transition: background .2s, border-color .2s;
}
.blog-slider__link:hover .blog-slider__more {
  background: rgba(247,239,228,.08);
  border-color: rgba(247,239,228,.55);
}
.blog-slider__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.blog-slider__all {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(247,239,228,.72);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.blog-slider__all:hover { color: #f7efe4; }
.blog-slider__nav { display: flex; gap: .5rem; }
.blog-slider__empty { color: rgba(247,239,228,.5); font-size: .9rem; padding: 1rem 0; }

.testimonials__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.22);
  text-underline-offset: 5px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.testimonials__cta:hover {
  color: #f7efe4;
  text-decoration-color: rgba(247,239,228,.45);
}
.testimonials__error {
  margin: 0;
  padding: 1rem 0;
  font-size: 14px;
  color: rgba(255,255,255,.55);
}
.testimonials__error a { color: #f7efe4; }
.testimonials__card.proc-reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.particle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: #fff;
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: #000;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .1s ease, background .2s ease;
}
.particle-btn:hover {
  background: #f7efe4;
}
.particle-btn.is-pressed {
  transform: scale(.95);
}
.particle-btn__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: .9;
}
#particleLayer {
  position: fixed;
  inset: 0;
  z-index: 1300;
  pointer-events: none;
}
.particle-btn__dot {
  position: fixed;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 999px;
  background: #000;
  animation: particleBurst .6s ease-out forwards;
}
@keyframes particleBurst {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0);
  }
  35% {
    opacity: 1;
    transform: translate(calc(var(--dx) * .3), calc(var(--dy) * .3)) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(0);
  }
}
/* CTA band */
.cta-band {
  position: relative;
  background: #0E1219;
  padding: 0 var(--content-gutter);
  border-top: 1px solid rgba(255,255,255,.08);
}
.cta-band__inner {
  position: relative;
  max-width: 62rem;
  margin: 0 auto;
  background: #f7efe4;
  color: #000;
  padding: 2.5rem 1.75rem;
  text-align: center;
}
@media (min-width: 768px) {
  .cta-band__inner { padding: 4rem 3rem; }
}
.cta-band__kicker {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(0,0,0,.5);
  margin-bottom: 1rem;
}
.cta-band__title {
  font-family: var(--f-display, "Archivo", system-ui, sans-serif);
  font-size: clamp(1.9rem, 6vw, 3rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.03em;
  color: #000;
  margin: 0 auto .9rem;
  max-width: 20ch;
}
.cta-band__text {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(0,0,0,.66);
  max-width: 52ch;
  margin: 0 auto 2rem;
}
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .85rem;
}
.cta-band__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cta-band__btn--primary { background: #000; color: #fff; }
.cta-band__btn--primary:hover { background: #1a1a1a; }
.cta-band__btn--ghost { border: 1px solid rgba(0,0,0,.2); color: #000; }
.cta-band__btn--ghost:hover { border-color: #000; background: rgba(0,0,0,.05); }

/* FAQ */
.faq {
  position: relative;
  background: #0E1219;
  padding: 2.5rem var(--content-gutter) 3.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
@media (min-width: 768px) {
  .faq { padding-top: 3rem; padding-bottom: 4.5rem; }
}
.faq .how-works__head {
  margin-bottom: 2rem;
}
.faq .how-works__head-row {
  display: block;
}
.faq #faq-heading {
  max-width: none;
  width: 100%;
}
@media (min-width: 768px) {
  .faq .how-works__head { margin-bottom: 2.5rem; }
}
.faq__list {
  max-width: 60rem;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,.1);
}
.faq__item {
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display, "Archivo", system-ui, sans-serif);
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: #fff;
  transition: color .2s ease;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__item:hover .faq__q { color: rgba(255,255,255,.85); }
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 4px;
}
.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  background: rgba(255,255,255,.55);
  transition: transform .3s ease, opacity .3s ease;
}
.faq__icon::before { top: 8px; left: 0; width: 18px; height: 1.5px; }
.faq__icon::after { top: 0; left: 8px; width: 1.5px; height: 18px; }
.faq__item[open] .faq__icon::after { transform: scaleY(0); opacity: 0; }
.faq__a {
  overflow: hidden;
  padding: 0 0 1.6rem;
  max-width: 56ch;
}
.faq__a p {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.62);
}
.faq__item[open] .faq__a {
  animation: faqReveal .35s ease;
}
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.footer-contact-phone {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255,255,255,.35);
}
.footer-contact-phone:hover {
  text-decoration-color: rgba(255,255,255,.8);
}
.footer-social-icon svg {
  display: block;
}

.area-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .28s ease, visibility .28s ease;
  pointer-events: none;
}
.area-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.area-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.86);
  backdrop-filter: blur(6px);
}
.area-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 440px);
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,.12);
  padding: 40px 32px 32px;
  transform: translateY(12px) scale(.98);
  transition: transform .28s ease;
}
.area-modal.is-open .area-modal__panel { transform: translateY(0) scale(1); }
.area-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.12);
  transition: color .2s ease, border-color .2s ease;
}
.area-modal__close:hover { color: #fff; border-color: rgba(255,255,255,.35); }
.area-modal__close svg { width: 16px; height: 16px; }
.area-modal__kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(255,255,255,.45);
  margin-bottom: 10px;
}
.area-modal__title {
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: 14px;
}
.area-modal__text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
  margin-bottom: 26px;
}
.area-modal__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.area-modal__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #f7efe4;
  color: #000;
  padding: 12px 20px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  cursor: pointer;
  transition: background .2s ease;
}
.area-modal__cta:hover { background: #fff; }
.area-modal__phone {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.75);
  transition: color .2s ease;
}
.area-modal__phone:hover { color: #fff; }

/* Quote form modal */
.quote-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .28s ease, visibility .28s ease;
  pointer-events: none;
}
.quote-modal.is-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}
.quote-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.86);
  backdrop-filter: blur(6px);
}
.quote-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,.12);
  padding: 40px 32px 32px;
  transform: translateY(12px) scale(.98);
  transition: transform .28s ease;
}
.quote-modal.is-open .quote-modal__panel { transform: translateY(0) scale(1); }
.quote-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.12);
  transition: color .2s ease, border-color .2s ease;
}
.quote-modal__close:hover { color: #fff; border-color: rgba(255,255,255,.35); }
.quote-modal__close svg { width: 16px; height: 16px; }
.quote-modal__kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(255,255,255,.45);
  margin-bottom: 10px;
}
.quote-modal__title {
  font-family: var(--f-display, "Archivo", system-ui, sans-serif);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: 10px;
}
.quote-modal__text {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.62);
  margin-bottom: 24px;
}
.quote-form { display: grid; gap: 14px; }
.quote-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 480px) {
  .quote-form__row { grid-template-columns: 1fr; }
}
.quote-form__field { display: grid; gap: 6px; }
.quote-form__field > span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(255,255,255,.5);
}
.quote-form__req { color: rgba(247,239,228,.75); }
.quote-form__field input,
.quote-form__field select,
.quote-form__field textarea {
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 14px;
  padding: 11px 12px;
  transition: border-color .2s ease, background .2s ease;
}
.quote-form__field textarea { resize: vertical; min-height: 78px; }
.quote-form__field input:focus,
.quote-form__field select:focus,
.quote-form__field textarea:focus {
  outline: none;
  border-color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.07);
}
.quote-form__field select option { background: #0a0a0a; color: #fff; }
.quote-form__field input:invalid[data-touched],
.quote-form__field:has(input:invalid[data-touched]) input {
  border-color: rgba(239,68,68,.6);
}
.quote-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
  background: #f7efe4;
  color: #000;
  padding: 14px 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  cursor: pointer;
  transition: background .2s ease;
}
.quote-form__submit:hover { background: #fff; }
.quote-form__note {
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.5);
}
.quote-form__note a { color: rgba(255,255,255,.85); text-decoration: underline; text-underline-offset: 3px; }
.quote-form__note a:hover { color: #fff; }
.quote-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.quote-form__status {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.45;
  display: none;
}
.quote-form__status.is-visible { display: block; }
.quote-form__status--ok {
  background: rgba(45, 106, 79, 0.18);
  border: 1px solid rgba(45, 106, 79, 0.35);
  color: #d8f3e5;
}
.quote-form__status--err {
  background: rgba(224, 82, 82, 0.14);
  border: 1px solid rgba(224, 82, 82, 0.3);
  color: #ffd5d5;
}
.quote-form__submit:disabled { opacity: 0.65; cursor: wait; }

.project-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  visibility: hidden;
  pointer-events: none;
}
.project-lightbox.is-open {
  visibility: visible;
  pointer-events: auto;
}
.project-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.92);
}
.project-lightbox__inner {
  position: relative;
  z-index: 1;
  width: min(100%, 1100px);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.project-lightbox__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 3;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(14,18,25,.75);
  color: #fff;
  cursor: pointer;
}
.project-lightbox__title {
  margin: 0;
  padding-right: 52px;
  font-family: var(--f-display, "Archivo", system-ui, sans-serif);
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}
.project-lightbox__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 4px;
}
.project-lightbox__tag {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 2px;
  background: rgba(255,255,255,.04);
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
}
.project-lightbox__counter {
  margin: 0;
  font-family: var(--f-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
}
.project-lightbox__desc {
  margin: 0 0 8px;
  max-width: 62ch;
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
}
.project-lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(62vh, 640px);
  touch-action: pan-y;
}
.project-lightbox__image {
  display: block;
  max-width: 100%;
  max-height: min(72vh, 760px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}
.project-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: rgba(14,18,25,.72);
  color: #fff;
  cursor: pointer;
}
.project-lightbox__nav--prev { left: 8px; }
.project-lightbox__nav--next { right: 8px; }
.project-lightbox__nav:disabled {
  opacity: .35;
  cursor: default;
}
.project-lightbox__thumbs {
  display: flex;
  gap: 8px;
  padding: 4px 2px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}
.project-lightbox__thumbs::-webkit-scrollbar { display: none; }
.project-lightbox__thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #1c1c1c;
  cursor: pointer;
  opacity: .6;
  transition: opacity .25s ease, border-color .25s ease;
}
.project-lightbox__thumb.is-active {
  opacity: 1;
  border-color: #fff;
}
.project-lightbox__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .project-lightbox__nav--prev { left: 0; }
  .project-lightbox__nav--next { right: 0; }
}
.ba-compare {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.1);
  background: #1c1c1c;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.ba-compare__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ba-compare__before {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.ba-compare__after-wrap {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  width: 50%;
  overflow: hidden;
}
.ba-compare__after {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
.projects__card[data-project-slug="gutters-cottage"] .ba-compare__after {
  transform: scale(1.22);
  transform-origin: 50% 38%;
  object-position: center 38%;
}
.ba-compare__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 4;
  width: 44px;
  margin-left: -22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  touch-action: none;
}
.ba-compare__handle-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 12px rgba(0,0,0,.45);
  pointer-events: none;
}
.ba-compare__handle-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(14,18,25,.82);
  color: #fff;
  backdrop-filter: blur(6px);
  pointer-events: none;
}
.ba-compare__handle-knob svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: .9;
}
.ba-compare__label {
  position: absolute;
  top: 10px;
  z-index: 3;
  padding: 4px 8px;
  border-radius: 2px;
  background: rgba(14,18,25,.72);
  font-family: var(--f-body, "Inter", sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  pointer-events: none;
}
.ba-compare__label--before { left: 10px; }
.ba-compare__label--after { right: 10px; }
.ba-compare.is-dragging .ba-compare__handle-knob {
  border-color: rgba(255,255,255,.65);
  background: rgba(14,18,25,.95);
}
@media (prefers-reduced-motion: reduce) {
  .ba-compare__after-wrap { width: 50% !important; }
  .ba-compare__handle { pointer-events: none; }
}