/* =========================================================
   Maydan Homes — main stylesheet
   Design language: editorial, uppercase, navy + paper,
   masked reveals, cubic-bezier(.7,0,.3,1).
   ========================================================= */

:root {
	--navy: #0f2821;
	--ink: #0c1f1a;
	--paper: #ffffff;
	--stone: #f4f3ef;
	--mist: #e3e6eb;
	--gray: #5a5f65;
	--gold: #b8955a;

	--font: "Figtree", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--ease: cubic-bezier(.7, 0, .3, 1);
	--ease-soft: cubic-bezier(.55, 0, .1, 1);
	--dur: 1s;

	--pad: clamp(20px, 4vw, 64px);
	--max: 1600px;
	--gap: clamp(16px, 2vw, 32px);
	--section: clamp(88px, 12vw, 180px);
	--header-h: 84px;
	--notch: 12px;
	--notch-lg: clamp(28px, 3vw, 44px);

}
/* Stepped corner cuts (Likova-style). Declared on every element so each one
   resolves var(--n) against its own notch size. */
* {
	--cut-tr: polygon(0 0, calc(100% - var(--n, var(--notch))) 0, calc(100% - var(--n, var(--notch))) var(--n, var(--notch)), 100% var(--n, var(--notch)), 100% 100%, 0 100%);
	--cut-br: polygon(0 0, 100% 0, 100% calc(100% - var(--n, var(--notch))), calc(100% - var(--n, var(--notch)) * 2) calc(100% - var(--n, var(--notch))), calc(100% - var(--n, var(--notch)) * 2) 100%, 0 100%);
	--cut-tl: polygon(calc(var(--n, var(--notch)) * 2) 0, 100% 0, 100% 100%, 0 100%, 0 var(--n, var(--notch)), calc(var(--n, var(--notch)) * 2) var(--n, var(--notch)));
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
	margin: 0;
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.55;
	color: var(--ink);
	background: var(--paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}
body.is-loading { overflow: hidden; }
body.menu-open { overflow: hidden; }
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure { margin: 0; }
::selection { background: var(--navy); color: #fff; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(32px, 4vw, 56px); }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-6.col-offset-1 { grid-column: 7 / span 6; }
.col-8.col-offset-4 { grid-column: 5 / span 8; }
.section { padding: var(--section) 0; position: relative; }
.section--tight { padding-top: calc(var(--section) * .55); }
.section__head { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap); align-items: end; margin-bottom: clamp(40px, 5vw, 72px); }
.section__head-aside { max-width: 420px; justify-self: end; display: flex; flex-direction: column; gap: 28px; }
.section__head-aside p { color: var(--gray); }

/* ---------- Type ---------- */
.label, .eyebrow, .card__meta, .chip, .btn, .header__link, .header__nav, .specs span, .footer__col .label, .stat__label, .hero__scroll, .project__crumbs, .gallery__count, .list__num, .tile__num {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-weight: 500;
}
.label { display: block; color: var(--gray); margin-bottom: 14px; }
.eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(24px, 3vw, 40px); color: var(--ink); }
.eyebrow__num { font-variant-numeric: tabular-nums; }
.eyebrow__line { width: 40px; height: 1px; background: currentColor; opacity: .5; }
.eyebrow__label { color: var(--gray); }

.h-display {
	font-size: clamp(2.1rem, 4.6vw, 5rem);
	line-height: 1.02;
	font-weight: 400;
	letter-spacing: -.02em;
	text-transform: uppercase;
	margin-bottom: clamp(24px, 3vw, 40px);
}
.h-display--xl { font-size: clamp(2.6rem, 7vw, 7.4rem); letter-spacing: -.025em; }
.h-small { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; margin: 48px 0 20px; }
.lead { font-size: clamp(1.05rem, 1.4vw, 1.3rem); line-height: 1.5; color: var(--gray); max-width: 640px; }
.prose { font-size: clamp(1rem, 1.15vw, 1.15rem); line-height: 1.7; color: #2b3431; max-width: 720px; }
.prose p + p { margin-top: 1.2em; }
.prose h2, .prose h3 { text-transform: uppercase; font-weight: 500; letter-spacing: -.01em; margin: 2em 0 .8em; }
.prose h2 { font-size: 1.6rem; }
.prose h3 { font-size: 1.15rem; }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

/* Split text reveal */
.split__line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.split__inner { display: block; transform: translateY(110%); transition: transform 1.1s var(--ease); }
.split.is-in .split__inner { transform: translateY(0); }
.split.is-in .split__line:nth-child(2) .split__inner { transition-delay: .08s; }
.split.is-in .split__line:nth-child(3) .split__inner { transition-delay: .16s; }
.split.is-in .split__line:nth-child(4) .split__inner { transition-delay: .24s; }

/* Generic reveal */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--i, 0) * .1s); }
[data-reveal].is-in { opacity: 1; transform: none; }
.eyebrow[data-reveal] { transform: translateX(-16px); }

/* Image reveal */
.img-reveal { position: relative; overflow: hidden; background: var(--stone); }
.img-reveal__in { position: absolute; inset: 0; clip-path: polygon(0 100%, 60% 100%, 60% 130%, 100% 130%, 100% 100%, 0 100%); transition: clip-path 1.4s var(--ease); }
.img-reveal img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transition: transform 1.6s var(--ease); will-change: transform; }
.img-reveal.is-in .img-reveal__in { clip-path: polygon(0 0, 60% 0, 60% -30%, 100% -30%, 100% 100%, 0 100%); }
.img-reveal.is-in img { transform: scale(1); }
.img-reveal[data-parallax].is-in img { transform: scale(1.12); }

/* ---------- Buttons ---------- */
.btn {
	--n: 10px;
	display: inline-flex; align-items: center; gap: 14px;
	height: 52px; padding: 0 26px;
	border: 0; border-radius: 0;
	position: relative; overflow: hidden; isolation: isolate;
	clip-path: var(--cut-tr);
	/* 1px outline drawn with gradients so it follows the notch */
	background:
		linear-gradient(currentColor, currentColor) 0 0 / calc(100% - var(--n)) 1px no-repeat,
		linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat,
		linear-gradient(currentColor, currentColor) 0 0 / 1px 100% no-repeat,
		linear-gradient(currentColor, currentColor) 100% 100% / 1px calc(100% - var(--n)) no-repeat,
		linear-gradient(currentColor, currentColor) calc(100% - var(--n)) 0 / 1px var(--n) no-repeat,
		linear-gradient(currentColor, currentColor) 100% var(--n) / var(--n) 1px no-repeat;
	transition: color .5s var(--ease);
	white-space: nowrap;
}
.btn::before { content: ""; position: absolute; inset: 0; background: currentColor; transform: translateY(101%); transition: transform .6s var(--ease); z-index: -1; }
.btn:hover::before { transform: translateY(0); }
.btn__label { position: relative; display: block; overflow: hidden; height: 1.4em; line-height: 1.4em; }
.btn__label > span { display: block; transition: transform .6s var(--ease); }
.btn__label > span + span { position: absolute; left: 0; top: 100%; }
.btn:hover .btn__label > span { transform: translateY(-100%); }
.btn__arrow { width: 16px; height: 16px; display: inline-flex; transition: transform .5s var(--ease); }
.btn__arrow svg { width: 100%; height: 100%; }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--primary, .btn--dark { color: var(--navy); }
.btn--primary:hover, .btn--dark:hover { color: #fff; }
.btn--primary::before, .btn--dark::before { background: var(--navy); }
.btn--light { color: #fff; }
.btn--light:hover { color: var(--navy); }
.btn--light::before { background: #fff; }
.btn--line { --n: 8px; color: var(--navy); height: 44px; padding: 0 20px; }
.btn--fill { color: #fff; background: var(--navy); }
.btn--fill::before { background: var(--ink); }
.btn--line:hover { color: #fff; }
.btn--line::before { background: var(--navy); }
.btn[disabled] { opacity: .5; pointer-events: none; }

/* ---------- Preloader (Likova-style moving rectangles) ----------
   Two white rectangles share one reference box (--pb-*) and cycle through
   five stepped compositions while the counter runs. On exit they expand
   into the hero's white band + bookmark tab and the small logo scales up
   into the hero wordmark, so the page underneath matches pixel for pixel. */
.preloader {
	--pb-w: clamp(220px, 30vw, 440px);
	--pb-h: calc(var(--pb-w) * 1.07);
	--pb-x: calc(50vw - var(--pb-w) * .56);
	--pb-y: calc(50vh - var(--pb-h) * .32);
	position: fixed; inset: 0; z-index: 1000; background: var(--navy); color: var(--navy);
	transition: opacity .8s var(--ease), clip-path 1.2s var(--ease);
	clip-path: polygon(0 0, 100% 0, 100% 133svh, 50% 133svh, 50% 100%, 0 100%);
}
.preloader__bg { position: absolute; inset: 0; opacity: .6; transition: opacity 1s var(--ease); }
.preloader__bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 70% 30%, rgba(255,255,255,.08), transparent 70%); }
.preloader__rect {
	position: absolute; left: var(--pb-x); top: var(--pb-y); width: var(--pb-w); height: var(--pb-h);
	background: #fff; display: block; transform-origin: 0 0; will-change: transform;
	transition: transform .75s var(--ease);
}
/* state 1 (default) → 5: values from the reference */
.preloader__rect--a { transform: translate(47.82609%, -9.375%) scaleX(.65217) scaleY(.4375); }
.preloader__rect--b { transform: translateY(21.875%) scaleX(1.06522) scaleY(.4375); }
.preloader--state-2 .preloader__rect--a { transform: translateY(-18.75%) scaleX(.3913) scaleY(.53125); }
.preloader--state-2 .preloader__rect--b { transform: translateY(-9.375%) scaleX(.73913) scaleY(.75); }
.preloader--state-3 .preloader__rect--a { transform: translateY(15.625%) scaleX(.3913) scaleY(.53125); }
.preloader--state-3 .preloader__rect--b { transform: translateY(-12.5%) scaleX(.6087) scaleY(.875); }
.preloader--state-4 .preloader__rect--a { transform: translateY(15.625%) scaleX(1.06522) scaleY(.59375); }
.preloader--state-4 .preloader__rect--b { transform: translate(34.78261%, -12.5%) scaleX(.78261) scaleY(.59375); }
.preloader--state-5 .preloader__rect--a { transform: translate(0) scaleX(1.13043) scaleY(.75); }
.preloader--state-5 .preloader__rect--b { transform: translate(47.82609%, -12.5%) scaleX(.5) scaleY(.59375); }
.preloader__logo { position: absolute; left: calc(var(--pb-x) + var(--pb-w) * .08); top: calc(var(--pb-y) + var(--pb-h) * .25); width: calc(var(--pb-w) * .36); height: auto; transform-origin: 0 0; z-index: 2; }
.preloader__percent { position: absolute; left: calc(var(--pb-x) + var(--pb-w) * .58); top: calc(var(--pb-y) + var(--pb-h) * .56); transform: translateX(-100%); font-size: 12px; letter-spacing: .12em; font-variant-numeric: tabular-nums; z-index: 2; transition: opacity .4s var(--ease); }
/* landing exit: rectangles → band + bookmark, logo → hero wordmark */
.preloader.is-exiting .preloader__rect { transition: transform 1s var(--ease), left 1s var(--ease), top 1s var(--ease), width 1s var(--ease), height 1s var(--ease); }
.preloader.is-exiting .preloader__logo { transition: transform 1s var(--ease); }
.preloader.is-exiting .preloader__bg, .preloader.is-exiting .preloader__percent { opacity: 0; }
.preloader.is-gone { opacity: 0; pointer-events: none; }
/* inner-page exit: stepped wipe upwards */
.preloader.is-done { clip-path: polygon(0 0, 100% 0, 100% 0svh, 50% 0svh, 50% 0, 0 0); pointer-events: none; }
.preloader.is-done .preloader__bg { opacity: 0; }
/* Page-transition curtain */
.curtain { position: fixed; inset: 0; z-index: 900; background: var(--navy); pointer-events: none; clip-path: polygon(0 133%, 50% 133%, 50% 100%, 100% 100%, 100% 200%, 0 200%); transition: clip-path 1s var(--ease); }
.curtain.is-active { clip-path: polygon(0 0, 50% 0, 50% -33%, 100% -33%, 100% 100%, 0 100%); }

/* Custom cursor */
.cursor { --n: 12px; position: fixed; left: 0; top: 0; z-index: 950; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--navy); pointer-events: none; opacity: 0; transition: width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background .4s, opacity .3s; display: grid; place-items: center; mix-blend-mode: normal; }
.cursor span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #fff; opacity: 0; transition: opacity .3s; }
.cursor.is-label { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--navy); clip-path: var(--cut-tr); }
.cursor.is-label span { opacity: 1; }
@media (hover: none), (max-width: 900px) { .cursor { display: none; } }

/* ---------- Header ---------- */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 800; height: var(--header-h); transition: transform .8s var(--ease), background .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease); color: var(--navy); border-bottom: 1px solid transparent; }
.header__inner { height: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 32px; }
.header.is-scrolled { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-color: var(--mist); }
.header.is-hidden { transform: translateY(-100%); }
.header.is-hidden.is-forced { transform: none; }
.brand { display: block; width: 132px; position: relative; opacity: 0; transition: opacity .8s var(--ease) .2s; justify-self: start; }
.brand img { width: 100%; height: auto; }
.brand__light { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease); }
body:not(.is-loading) .brand { opacity: 1; }
/* Landing: the hero wordmark is the logo, so the header only shows it once scrolled (reference behaviour). */
.is-landing .header:not(.is-scrolled) .brand { opacity: 0; pointer-events: none; }
.has-dark-header .header:not(.is-scrolled) { color: #fff; }
.has-dark-header .header:not(.is-scrolled) .brand__light { opacity: 1; }
.has-dark-header .header:not(.is-scrolled) .btn--line { color: #fff; }
.has-dark-header .header:not(.is-scrolled) .btn--line::before { background: #fff; }
.has-dark-header .header:not(.is-scrolled) .btn--line:hover { color: var(--navy); }
.has-dark-header .header:not(.is-scrolled) .burger span { background: #fff; }
.header__nav { justify-self: center; }
.header__nav ul { display: flex; gap: 32px; }
.header__nav a { position: relative; padding: 6px 0; }
.header__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.header__nav a:hover::after, .header__nav .current-menu-item a::after { transform: scaleX(1); transform-origin: left; }
.header__cta { display: flex; align-items: center; gap: 28px; justify-self: end; }
.header__link { position: relative; }
.header__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.header__link:hover::after { transform: scaleX(1); transform-origin: left; }

.burger { width: 40px; height: 40px; display: grid; place-items: center; gap: 0; position: relative; z-index: 2; }
.burger span { position: absolute; width: 24px; height: 1.5px; background: var(--navy); transition: transform .6s var(--ease), background .4s; }
.burger span:first-child { transform: translateY(-4px); }
.burger span:last-child { transform: translateY(4px); }
.menu-open .burger span { background: #fff !important; }
.menu-open .burger span:first-child { transform: rotate(45deg); }
.menu-open .burger span:last-child { transform: rotate(-45deg); }

/* ---------- Overlay menu ---------- */
.menu { position: fixed; inset: 0; z-index: 790; visibility: hidden; pointer-events: none; color: #fff; }
.menu__bg { position: absolute; inset: 0; background: var(--navy); clip-path: polygon(0 -33%, 50% -33%, 50% 0, 100% 0, 100% -100%, 0 -100%); transition: clip-path 1s var(--ease); }
.menu.is-open { visibility: visible; pointer-events: auto; }
.menu.is-open .menu__bg { clip-path: polygon(0 100%, 50% 100%, 50% 133%, 100% 133%, 100% -100%, 0 -100%); }
.menu__inner { position: relative; height: 100%; max-width: var(--max); margin: 0 auto; padding: calc(var(--header-h) + 40px) var(--pad) 48px; display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--gap); align-items: end; }
.menu__nav li { overflow: hidden; }
.menu__nav a { display: inline-block; font-size: clamp(2.4rem, 7vw, 6.4rem); line-height: 1.02; text-transform: uppercase; letter-spacing: -.025em; transform: translateY(110%); transition: transform 1s var(--ease), opacity .3s; padding: .02em 0; opacity: .95; }
.menu.is-open .menu__nav a { transform: translateY(0); }
.menu.is-open .menu__nav li:nth-child(1) a { transition-delay: .25s; }
.menu.is-open .menu__nav li:nth-child(2) a { transition-delay: .32s; }
.menu.is-open .menu__nav li:nth-child(3) a { transition-delay: .39s; }
.menu.is-open .menu__nav li:nth-child(4) a { transition-delay: .46s; }
.menu.is-open .menu__nav li:nth-child(5) a { transition-delay: .53s; }
.menu__nav a:hover { opacity: .5; }
.menu__aside { display: flex; flex-direction: column; gap: 28px; opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease) .5s, transform .8s var(--ease) .5s; }
.menu.is-open .menu__aside { opacity: 1; transform: none; }
.menu__block .label { color: rgba(255,255,255,.5); }
.menu__block a, .menu__block p { display: block; font-size: 1.05rem; color: #fff; }
.menu__block a + a { margin-top: 4px; }
.socials { display: flex; gap: 22px; }
.socials a { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }

/* ---------- Hero (landing) ---------- */
.hero { padding-top: calc(var(--header-h) + 40px); }
.hero { --bookmark: clamp(36px, 5vw, 72px); }
.hero__wordmark { margin: 0; padding-bottom: clamp(24px, 3.4vw, 48px); padding-bottom: round(clamp(24px, 3.4vw, 48px), 1px); }
.hero__logo { display: block; width: clamp(240px, 46vw, 700px); height: auto; height: round(down, clamp(240px, 46vw, 700px) / 3.41, 1px); width: auto; }
.hero__tab { position: absolute; left: 0; top: -2px; width: 52%; height: calc(var(--bookmark) + 2px); background: var(--paper); z-index: 3; }
.hero__media.is-settled { clip-path: none; }
.hero__media { position: relative; height: max(440px, calc(100svh - var(--header-h) - 40px - clamp(240px, 46vw, 700px) / 3.41 - clamp(24px, 3.4vw, 48px))); overflow: hidden; background: var(--paper); clip-path: polygon(var(--pad) 100%, 55% 100%, 55% 130%, calc(100% - var(--pad)) 130%, calc(100% - var(--pad)) 100%, var(--pad) 100%); transition: clip-path .9s var(--ease); }
body:not(.is-loading) .hero__media { clip-path: polygon(0 0, 55% 0, 55% -30%, 100% -30%, 100% 100%, 0 100%); }
.hero__media > img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; transform: scale(1.15); transition: transform 2s var(--ease); }
body:not(.is-loading) .hero__media > img { transform: scale(1); }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,40,33,0) 40%, rgba(15,40,33,.55) 100%); }
.hero__copy { position: absolute; right: var(--pad); bottom: clamp(40px, 6vw, 96px); left: var(--pad); z-index: 2; color: #fff; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; }
.hero__title { font-size: clamp(1.8rem, 4vw, 4rem); line-height: 1.02; text-transform: uppercase; letter-spacing: -.02em; }
.hero__sub { max-width: 380px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.7; opacity: .9; grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: 8px; }
.hero__copy .btn { grid-column: 1; justify-self: start; }
.hero__scroll { position: absolute; left: var(--pad); top: calc(var(--bookmark) + 32px); z-index: 2; color: #fff; display: flex; align-items: center; gap: 12px; }
.hero__scroll i { width: 48px; height: 1px; background: currentColor; position: relative; overflow: hidden; }
.hero__scroll i::after { content: ""; position: absolute; inset: 0; background: var(--navy); animation: scrollhint 2s var(--ease) infinite; }
@keyframes scrollhint { 0% { transform: translateX(-100%); } 50% { transform: translateX(0); } 100% { transform: translateX(100%); } }

/* ---------- About / stats ---------- */
.about__lead { columns: 2; column-gap: var(--gap); color: var(--gray); max-width: 900px; }
.about__lead p { break-inside: avoid; margin-bottom: 1em; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--mist); margin-top: clamp(56px, 8vw, 120px); }
.stat { padding: 36px 24px 36px 0; border-right: 1px solid var(--mist); }
.stat:last-child { border-right: 0; }
.stat + .stat { padding-left: 24px; }
.stat__num { display: block; font-size: clamp(2.6rem, 5vw, 5rem); line-height: 1; letter-spacing: -.03em; margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.stat__label { color: var(--gray); display: block; max-width: 200px; line-height: 1.6; }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); row-gap: clamp(40px, 5vw, 72px); }
.cards--archive { margin-top: clamp(40px, 5vw, 64px); }
.card__link { display: block; }
.card__media { --n: 22px; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); clip-path: var(--cut-br); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.card__link:hover .card__media img { transform: scale(1.06); }
.card__status { --n: 6px; position: absolute; top: 0; left: 0; z-index: 2; background: #fff; color: var(--navy); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; padding: 10px 14px; clip-path: var(--cut-tr); }
.card__status--sold-out { background: var(--navy); color: #fff; }
.card__status--coming-soon { background: var(--gold); color: #fff; }
.card__status--selling-fast { background: #ce1d20; color: #fff; }
.card__body { padding-top: 20px; }
.card__meta { display: flex; gap: 14px; color: var(--gray); margin-bottom: 10px; }
.card__meta span + span::before { content: "·"; margin-right: 14px; }
.card__title { font-size: clamp(1.15rem, 1.6vw, 1.5rem); font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.15; }
.card__specs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 13px; color: var(--gray); }
.card__price { color: var(--ink); }
.cards .card:nth-child(3n+2) { transform: translateY(clamp(0px, 6vw, 80px)); }
.cards .card:nth-child(3n+2)[data-reveal] { transform: translateY(calc(clamp(0px, 6vw, 80px) + 28px)); }
.cards .card:nth-child(3n+2)[data-reveal].is-in { transform: translateY(clamp(0px, 6vw, 80px)); }

/* ---------- Services list ---------- */
.services__img { aspect-ratio: 4 / 5; max-width: 420px; margin-top: 24px; }
.services__img, .about__banner-img, .about__duo .img-reveal { clip-path: var(--cut-br); --n: var(--notch-lg); }
.list { border-top: 1px solid var(--mist); }
.list__item { display: grid; grid-template-columns: 64px 1fr; gap: 24px; padding: clamp(28px, 3vw, 44px) 0; border-bottom: 1px solid var(--mist); }
.list__num { color: var(--gray); padding-top: 6px; }
.list__item h3 { font-size: clamp(1.3rem, 2vw, 1.9rem); font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 12px; }
.list__item p { color: var(--gray); max-width: 520px; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; margin-top: clamp(48px, 6vw, 96px); border-top: 1px solid var(--mist); border-bottom: 1px solid var(--mist); padding: 20px 0; }
.marquee__track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: flex; align-items: center; gap: 40px; padding-right: 40px; font-size: clamp(2.4rem, 6vw, 6rem); line-height: 1; text-transform: uppercase; letter-spacing: -.02em; white-space: nowrap; transition: color .4s; }
.marquee__item:hover { color: var(--gray); }
.marquee__item i { width: 8px; height: 8px; background: var(--navy); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--mist); border: 1px solid var(--mist); }
.tile { --n: 22px; background: #fff; padding: clamp(28px, 3vw, 48px); min-height: 340px; display: flex; flex-direction: column; position: relative; clip-path: var(--cut-tr); transition: background .6s var(--ease), color .6s var(--ease); }
.tile:hover { background: var(--navy); color: #fff; }
.tile__num { color: var(--gray); margin-bottom: auto; transition: color .6s; }
.tile:hover .tile__num { color: rgba(255,255,255,.5); }
.tile h3 { font-size: clamp(1.3rem, 2vw, 1.8rem); font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; margin: 40px 0 14px; }
.tile p { color: var(--gray); transition: color .6s; }
.tile:hover p { color: rgba(255,255,255,.7); }

/* ---------- CTA ---------- */
.cta { background: var(--navy); color: #fff; }
.cta .eyebrow, .cta .eyebrow__label { color: rgba(255,255,255,.6); }
.cta .h-display { color: #fff; }
.cta__row { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; margin-top: 12px; }
.cta__phone { font-size: clamp(1.3rem, 2.4vw, 2.2rem); letter-spacing: -.01em; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.cta--light { background: var(--stone); color: var(--ink); }
.cta--light .eyebrow { color: var(--ink); }
.cta--light .eyebrow__label { color: var(--gray); }
.cta--light .h-display { color: var(--ink); }

/* ---------- Page hero ---------- */
.page-hero { padding: calc(var(--header-h) + clamp(56px, 8vw, 120px)) 0 clamp(24px, 3vw, 40px); }
.page-hero--tall { min-height: 80vh; display: flex; align-items: center; }
.page-hero .lead { margin-top: 8px; }

/* ---------- Filters ---------- */
.filters { display: flex; flex-direction: column; gap: 18px; padding-bottom: 32px; border-bottom: 1px solid var(--mist); }
.filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filters__group .label { margin: 0 16px 0 0; min-width: 64px; }
.chip { --n: 7px; display: inline-flex; align-items: center; height: 36px; padding: 0 16px; background: var(--stone); color: var(--ink); clip-path: var(--cut-tr); transition: background .4s var(--ease), color .4s var(--ease); }
.chip:hover { background: var(--mist); }
.chip.is-active { background: var(--navy); color: #fff; }
.pagination { margin-top: clamp(48px, 6vw, 96px); display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 8px; }
.pagination .page-numbers { --n: 8px; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; background: var(--stone); clip-path: var(--cut-tr); font-size: 13px; }
.pagination .page-numbers.current { background: var(--navy); color: #fff; }
.empty { color: var(--gray); padding: 80px 0; text-align: center; }

/* ---------- Single project ---------- */
.project__hero { position: relative; height: clamp(560px, 100vh, 1000px); color: #fff; background: var(--navy); display: flex; align-items: flex-end; }
.project__hero-media { position: absolute; inset: 0; overflow: hidden; }
.project__hero::after { content: ""; position: absolute; right: 0; bottom: 0; width: clamp(80px, 12vw, 180px); height: clamp(40px, 6vw, 90px); background: var(--paper); z-index: 3; }
.project__hero-media img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; transform: scale(1.12); transition: transform 2.2s var(--ease); }
body:not(.is-loading) .project__hero-media img { transform: scale(1); }
.project__hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,40,33,.25) 0%, rgba(15,40,33,0) 30%, rgba(15,40,33,.7) 100%); }
.project__hero-copy { position: relative; z-index: 2; padding-bottom: clamp(40px, 6vw, 96px); }
.project__crumbs { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.project__crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.project__crumbs .card__status { position: static; margin-left: 12px; }
.project__title { color: #fff; margin-bottom: 16px; max-width: 14ch; }
.project__tagline { font-size: clamp(1rem, 1.3vw, 1.25rem); max-width: 520px; opacity: .85; }
.specs { border-top: 1px solid var(--mist); margin-bottom: 32px; }
.specs li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--mist); }
.specs span { color: var(--gray); }
.specs strong { font-weight: 400; text-align: right; }
.features { columns: 2; column-gap: var(--gap); max-width: 720px; }
.features li { break-inside: avoid; padding: 10px 0 10px 20px; position: relative; color: #2b3431; }
.features li::before { content: ""; position: absolute; left: 0; top: 19px; width: 8px; height: 1px; background: var(--gold); }

/* Gallery */
.gallery { position: relative; padding-left: var(--pad); overflow: hidden; cursor: grab; }
.gallery:active { cursor: grabbing; }
.gallery__track { display: flex; gap: var(--gap); will-change: transform; }
.gallery__item { --n: var(--notch-lg); flex: none; width: min(72vw, 1100px); aspect-ratio: 16 / 10; overflow: hidden; background: var(--stone); clip-path: var(--cut-br); }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; }
.gallery__nav { display: flex; gap: 8px; margin: 32px var(--pad) 0 0; justify-content: flex-end; }
.gallery__nav button { --n: 10px; width: 56px; height: 56px; background: var(--stone); clip-path: var(--cut-tr); display: grid; place-items: center; font-size: 18px; transition: background .4s var(--ease), color .4s var(--ease); }
.gallery__nav button:hover { background: var(--navy); color: #fff; }
.gallery__nav button[disabled] { opacity: .3; pointer-events: none; }
.gallery__count { color: var(--gray); font-variant-numeric: tabular-nums; }

.map { --n: var(--notch-lg); aspect-ratio: 16 / 9; background: var(--stone); overflow: hidden; clip-path: var(--cut-tl); }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05); transition: filter .6s; }
.map:hover iframe { filter: none; }
.map--full { aspect-ratio: 21 / 8; }

.project__nav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--mist); }
.project__nav-link { position: relative; padding: clamp(40px, 5vw, 80px) var(--pad); min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; color: var(--ink); }
.project__nav-link + .project__nav-link { border-left: 1px solid var(--mist); }
.project__nav-link--next { text-align: right; align-items: flex-end; }
.project__nav-link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .8s var(--ease), transform 1.4s var(--ease); }
.project__nav-link::after { content: ""; position: absolute; inset: 0; background: rgba(15,40,33,.55); opacity: 0; transition: opacity .8s var(--ease); }
.project__nav-link:hover img { opacity: 1; transform: scale(1); }
.project__nav-link:hover::after { opacity: 1; }
.project__nav-link:hover { color: #fff; }
.project__nav-link .label, .project__nav-link strong { position: relative; z-index: 2; }
.project__nav-link:hover .label { color: rgba(255,255,255,.6); }
.project__nav-link strong { font-weight: 400; font-size: clamp(1.4rem, 2.4vw, 2.4rem); text-transform: uppercase; letter-spacing: -.01em; line-height: 1.05; }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 24px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.form__trap { position: absolute; left: -9999px; opacity: 0; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--gray); font-weight: 500; }
.field input, .field textarea { font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid #c7cbd4; padding: 12px 0; border-radius: 0; outline: none; transition: border-color .4s; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--navy); }
.field.is-error input, .field.is-error textarea { border-color: #ce1d20; }
.form__foot { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-top: 8px; }
.form__status { font-size: 14px; color: var(--gray); }
.form__status.is-ok { color: #1c7c3e; }
.form__status.is-error { color: #ce1d20; }
.form.is-sending { opacity: .6; pointer-events: none; }

/* ---------- Contact ---------- */
.contact__block { padding: 24px 0; border-top: 1px solid var(--mist); }
.contact__block:first-child { border-top: 0; padding-top: 0; }
.contact__block a, .contact__block p { display: block; margin-top: 4px; }
.contact__big { font-size: clamp(1.3rem, 2vw, 1.8rem); letter-spacing: -.01em; }
.contact__form .prose { margin-bottom: 40px; }
.contact__map { margin-top: clamp(48px, 6vw, 96px); }

/* ---------- About page ---------- */
.about__banner { padding: 0 var(--pad); }
.about__banner-img { aspect-ratio: 21 / 9; }
.about__duo .img-reveal { aspect-ratio: 4 / 5; }
.about__duo-late { margin-top: clamp(40px, 8vw, 140px); }

/* ---------- Footer ---------- */
.footer { background: var(--navy); color: #fff; padding: clamp(64px, 8vw, 120px) 0 32px; overflow: hidden; }
.footer__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--gap); padding-bottom: clamp(40px, 5vw, 72px); }
.footer__brand img { width: 150px; margin-bottom: 24px; }
.footer__brand p { color: rgba(255,255,255,.6); max-width: 360px; font-size: 14px; line-height: 1.7; }
.footer__col .label { color: rgba(255,255,255,.45); }
.footer__col li, .footer__col p { color: rgba(255,255,255,.85); margin-bottom: 8px; font-size: 15px; }
.footer__col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer__hours-label { margin-top: 28px; }
.footer__bottom { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; color: rgba(255,255,255,.5); letter-spacing: .04em; }
.footer__bottom a:hover, .footer__top-btn:hover { color: #fff; }
.footer__top-btn { font-size: 12px; letter-spacing: .04em; }

.whatsapp { --n: 9px; position: fixed; right: 24px; bottom: 24px; z-index: 700; width: 52px; height: 52px; clip-path: var(--cut-tr); background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.18); transition: transform .5s var(--ease), opacity .5s; opacity: 0; transform: translateY(20px); }
.whatsapp svg { width: 26px; height: 26px; }
body:not(.is-loading) .whatsapp { opacity: 1; transform: none; }
.whatsapp:hover { transform: translateY(-3px); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
	.header__nav { display: none; }
	.header__inner { grid-template-columns: 1fr auto 1fr; }
	.brand { justify-self: center; grid-column: 2; }
	.header__cta { grid-column: 3; }
	.header__link { display: none; }
}
@media (max-width: 900px) {
	:root { --header-h: 72px; }
	.grid { row-gap: 32px; }
	.col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: 1 / -1; }
	.col-6.col-offset-1, .col-8.col-offset-4 { grid-column: 1 / -1; }
	.section__head { grid-template-columns: 1fr; }
	.section__head-aside { justify-self: start; }
	.about__lead { columns: 1; }
	.stats { grid-template-columns: 1fr 1fr; }
	.stat:nth-child(2) { border-right: 0; }
	.stat:nth-child(3) { padding-left: 0; border-top: 1px solid var(--mist); }
	.stat:nth-child(4) { border-top: 1px solid var(--mist); }
	.cards { grid-template-columns: 1fr 1fr; }
	.cards .card:nth-child(3n+2), .cards .card:nth-child(3n+2)[data-reveal], .cards .card:nth-child(3n+2)[data-reveal].is-in { transform: none; }
	.cards .card:nth-child(3n+2)[data-reveal] { transform: translateY(28px); }
	.cards .card:nth-child(3n+2)[data-reveal].is-in { transform: none; }
	.tiles { grid-template-columns: 1fr; }
	.tile { min-height: 0; }
	.tile h3 { margin-top: 24px; }
	.hero__copy { grid-template-columns: 1fr; gap: 16px; bottom: 72px; }
	.hero__sub { grid-column: 1; grid-row: auto; margin-top: 0; font-size: 12px; max-width: 320px; }
	.hero__media { height: max(420px, calc(100svh - var(--header-h) - 40px - clamp(240px, 46vw, 700px) / 3.41 - clamp(24px, 3.4vw, 48px))); }
	.menu__inner { grid-template-columns: 1fr; align-content: end; }
	.menu__aside { gap: 18px; }
	.footer__top { grid-template-columns: 1fr 1fr; }
	.footer__brand { grid-column: 1 / -1; }
	.project__nav { grid-template-columns: 1fr; }
	.project__nav-link + .project__nav-link { border-left: 0; border-top: 1px solid var(--mist); }
	.features { columns: 1; }
	.gallery__item { width: 84vw; }
	.about__duo-late { margin-top: 0; }
}
@media (max-width: 640px) {
	.cards { grid-template-columns: 1fr; }
	.form__row { grid-template-columns: 1fr; }
	.stats { grid-template-columns: 1fr; }
	.stat { border-right: 0; padding-left: 0 !important; border-top: 1px solid var(--mist); }
	.stat:first-child { border-top: 0; }
	.header__cta .btn { height: 40px; padding: 0 16px; }
	.brand { width: 108px; }
	.header__inner { grid-template-columns: auto 1fr auto; gap: 16px; }
	.brand { grid-column: 2; justify-self: center; }
	.header__cta { grid-column: 3; }
	.footer__top { grid-template-columns: 1fr; }
	.whatsapp { right: 16px; bottom: 16px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
	[data-reveal], .split__inner { opacity: 1 !important; transform: none !important; }
	.preloader { display: none !important; }
	.img-reveal__in, .hero__media { clip-path: none !important; }
}