/* =========================================================================
   BorneOut Design Lab — Design System
   ========================================================================= */

:root {
	--bg:            #eae8e3;
	--bg-alt:        #e6e4de;
	--hero:          #e8e6a0;
	--ink:           #14120e;
	--ink-soft:      #33312b;
	--muted-head:    #a3a29a;
	--muted-text:    #6f6e67;
	--line:          #cfcdc6;
	--orange:        #e9662b;
	--blue:          #c6ddee;
	--brown:         #40200e;
	--brown-link:    #e0662e;
	--tag:           #f2ee9e;
	--white:         #ffffff;
	--black:         #111111;

	--sticker-1:     #f2ee9e;
	--sticker-2:     #c9d89a;
	--sticker-3:     #c9bee4;
	--sticker-4:     #f0a35a;

	--maxw:          100%;
	--pad:           clamp(20px, 4.5vw, 110px);
	--radius:        14px;
	--radius-lg:     26px;

	--font:          "Zalando Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	--ease:          cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Lenis smooth-scroll (required base styles) */
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-smooth iframe { pointer-events: none; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--orange); color: #fff; }

/* ---------- Layout ---------- */
.container {
	width: 100%;
	max-width: var(--maxw);
	margin-inline: auto;
	padding-inline: var(--pad);
}
.section { padding-block: clamp(60px, 9vw, 150px); }
.section--tight { padding-block: clamp(40px, 6vw, 90px); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; }

.display {
	font-size: clamp(3.2rem, 12vw, 9.5rem);
	font-weight: 700;
	line-height: 0.92;
	letter-spacing: -0.03em;
}
.headline {
	font-size: clamp(1.7rem, 4.4vw, 3.4rem);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.02em;
}
.section-title {
	font-size: clamp(1.5rem, 3vw, 2.3rem);
	font-weight: 400;
	letter-spacing: -0.02em;
}
.statement {
	font-size: clamp(2rem, 5.4vw, 4.6rem);
	font-weight: 700;
	line-height: 1.14;
	letter-spacing: -0.01em;
	text-align: center;
	max-width: 19ch;
	margin-inline: auto;
}
/* Words: black wipes in left-to-right (driven by scroll), not a fade */
.statement .sw {
	background-image: linear-gradient(to right, var(--ink) 50%, #cccbc4 50%);
	background-size: 200% 100%;
	background-position: 100% 0;     /* start fully grey; JS slides it toward 0% */
	background-repeat: no-repeat;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
/* Inline images: full height always; JS grows only the WIDTH from the centre.
   Rounded corners + shadow live on the wrapper so they stay crisp while the
   image is scaled on X. */
.statement .si {
	display: inline-block;
	width: 0; overflow: hidden;
	vertical-align: middle;
	white-space: nowrap;
	border-radius: 10px;
	box-shadow: 0 8px 20px rgba(0,0,0,.18);
}
.statement .si .ico {
	display: block;
	width: clamp(58px, 7.2vw, 116px);
	height: clamp(40px, 4.8vw, 76px);
	max-width: none;   /* override base img{max-width:100%} — parent is width:0 */
	object-fit: cover;
	will-change: margin-left;
}
.eyebrow {
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted-text);
	font-weight: 500;
}
.lead { font-size: clamp(1rem, 1.4vw, 1.15rem); color: var(--muted-text); max-width: 60ch; }

/* ---------- Buttons / pills ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	padding: .7em 1.4em;
	border: 1.5px solid var(--ink);
	border-radius: 999px;
	background: transparent;
	color: var(--ink);
	font-size: .92rem;
	font-weight: 500;
	transition: background .35s var(--ease), color .35s var(--ease), transform .3s var(--ease);
	will-change: transform;
}
.btn:hover { background: var(--ink); color: #fff; }
.btn--solid { background: var(--ink); color: #fff; }
.btn--solid:hover { background: var(--orange); border-color: var(--orange); }

.tag {
	display: inline-block;
	padding: .34em .85em;
	border-radius: 999px;
	background: var(--tag);
	color: var(--ink);
	font-size: .72rem;
	font-weight: 500;
	line-height: 1;
	border: 1px solid rgba(0,0,0,.06);
}
.tag--ghost { background: transparent; border: 1px solid var(--line); color: var(--muted-text); }

.link-underline {
	position: relative;
	font-weight: 500;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 100% 1px;
	background-repeat: no-repeat;
	background-position: 0 100%;
	padding-bottom: 2px;
	transition: background-size .4s var(--ease);
}
.link-underline:hover { background-size: 0 1px; }

/* =========================================================================
   HEADER
   ========================================================================= */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 100;
	transition: transform .5s var(--ease), background .4s var(--ease);
}
.site-header.is-hidden { transform: translateY(-105%); }
.site-header.is-scrolled { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); }
.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 20px;
}
.brand { display: flex; flex-direction: column; line-height: .9; }
.brand__name { font-size: clamp(1.5rem, 2vw, 1.95rem); font-weight: 700; letter-spacing: -0.03em; }
.brand__name em { font-style: normal; }
.brand__sub { font-size: .78rem; font-weight: 300; letter-spacing: .04em; color: var(--ink-soft); margin-top: 3px; padding-left: 2px; }
.brand img { max-height: 54px; width: auto; }
/* WordPress custom logo (has its own <a class="custom-logo-link">) */
.brand--logo { line-height: 0; }
.custom-logo-link { display: inline-block; line-height: 0; }
.custom-logo { max-height: 54px; width: auto; height: auto; display: block; }

.header-actions { display: flex; align-items: center; gap: 16px; }
.menu-toggle {
	width: 44px; height: 40px;
	border: none; background: transparent;
	display: grid; place-content: center; gap: 5px;
}
.menu-toggle span {
	display: block; width: 26px; height: 2px; background: var(--ink);
	transition: transform .4s var(--ease), opacity .3s var(--ease);
}
body.nav-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .menu-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Fullscreen nav overlay */
.nav-overlay {
	position: fixed; inset: 0; z-index: 90;
	background: var(--brown);
	color: #f3ede7;
	display: flex; flex-direction: column; justify-content: center;
	padding: var(--pad);
	clip-path: circle(0% at calc(100% - 60px) 40px);
	transition: clip-path .7s var(--ease);
	pointer-events: none;
}
body.nav-open .nav-overlay { clip-path: circle(150% at calc(100% - 60px) 40px); pointer-events: auto; }
.nav-overlay ul { list-style: none; margin: 0; padding: 0; }
/* li carries the fade + slide entrance (staggered); a carries magnetic hover */
.nav-overlay li {
	opacity: 0; transform: translateY(40px);
	transition: opacity .6s var(--ease), transform .6s var(--ease);
	will-change: transform, opacity;
}
body.nav-open .nav-overlay li { opacity: 1; transform: none; transition-delay: calc(.3s + var(--i, 0) * .08s); margin-bottom: 15px; }
.nav-overlay a {
	font-size: clamp(1.6rem, 5vw, 3.4rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.18;
	display: inline-block;
	transition: color .3s var(--ease), transform .3s var(--ease);   /* magnetic follow */
}
.nav-overlay a:hover { color: var(--sticker-4); }
.nav-overlay__foot { margin-top: 48px; display: flex; gap: 40px; flex-wrap: wrap; color: var(--brown-link); opacity: 0; transition: opacity .6s var(--ease) .7s; }
body.nav-open .nav-overlay__foot { opacity: 1; }
.nav-overlay__foot a { font-size: clamp(1rem, 1.8vw, 1.35rem); font-weight: 500; }

/* Header sits above the dark overlay — make its controls light while open */
body.nav-open .site-header { background: transparent; backdrop-filter: none; }
body.nav-open .menu-toggle span { background: #f3ede7; }
body.nav-open .brand__name, body.nav-open .brand__sub { color: #f3ede7; }
body.nav-open .custom-logo { filter: brightness(0) invert(1); }   /* dark logo → white on the overlay */
body.nav-open .header-actions .btn { color: #f3ede7; border-color: rgba(243,237,231,.55); }
body.nav-open .header-actions .btn:hover { background: #f3ede7; color: var(--brown); border-color: #f3ede7; }

/* =========================================================================
   HERO (home)
   ========================================================================= */
.hero {
	background: var(--hero);
	min-height: clamp(600px, 90vh, 960px);
	display: flex;
	flex-direction: column;
	padding-top: clamp(140px, 15vh, 210px);
	padding-bottom: clamp(24px, 3.5vh, 44px);
	position: relative;
	overflow: hidden;
}
.hero > .container { width: 100%; flex: 1; display: flex; flex-direction: column; }
.hero__title {
	position: relative;
	text-align: center;
	color: var(--muted-head);
	z-index: 1;
	margin: auto 0;            /* centre the headline in the yellow */
}
.hero__title .display { display: block; font-size: clamp(3.6rem, 14vw, 13rem); line-height: .9; letter-spacing: -0.035em; }
/* Cursor image-trail (hidden until the mouse moves over the hero) */
.hero__trail {
	position: absolute; inset: 0; z-index: 2;
	pointer-events: none; overflow: hidden;
}
.trail-img {
	position: absolute; top: 0; left: 0;
	width: clamp(150px, 14vw, 230px);
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 26px 60px rgba(0,0,0,.30);
	opacity: 0;
	will-change: transform, opacity;   /* JS drives transform + opacity every frame */
	pointer-events: none;
}
.hero__meta {
	display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
	margin-top: 0;
	font-size: .82rem; color: var(--ink-soft);
}
.hero__meta .tags { display: flex; gap: 18px; flex-wrap: wrap; }

/* Sub-hero band */
.subhero { background: var(--bg); }
.subhero__row {
	display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap;
	padding-block: clamp(48px, 8vw, 120px);
}
.subhero__row h2 { max-width: 22ch; }

/* =========================================================================
   HORIZONTAL SCROLL GALLERY
   ========================================================================= */
.hscroll {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 6px var(--pad) 30px;
	cursor: grab;
	scrollbar-width: none;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.hcard {
	flex: 0 0 clamp(260px, 26vw, 380px);
	scroll-snap-align: start;
}
.hcard__img {
	position: relative;
	aspect-ratio: 5/8;
	border-radius: 8px;
	overflow: hidden;
	background: var(--bg-alt);
}
.hcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.hcard:hover .hcard__img img { transform: scale(1.05); }
.hcard__img::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 52%, rgba(0,0,0,.55) 100%);
	pointer-events: none;
}
.hcard__title {
	position: absolute; top: 20px; left: 22px; right: 22px; z-index: 2;
	color: #fff; font-size: clamp(1.2rem, 1.6vw, 1.7rem); font-weight: 500; line-height: 1.15; letter-spacing: -.01em;
}
.hcard__tags {
	position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2;
	display: flex; flex-wrap: wrap; gap: 8px;
}
.hcard__tags .pill {
	background: rgba(0,0,0,.2);           /* translucent "light black" */
	border: 1px solid rgba(255,255,255,.12);
	color: #fff;
	font-size: .72rem; font-weight: 400; line-height: 1;
	padding: .6em 1em; border-radius: 999px;
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	white-space: nowrap;
}

/* Gallery marquee (auto-looping, full-bleed) */
.hgallery { overflow: hidden; padding-block: 6px 30px; }
.hgallery__track { display: flex; gap: 18px; width: max-content; will-change: transform; }

/* =========================================================================
   HELP CARDS (numbered, horizontal)
   ========================================================================= */
.help-swiper { overflow: hidden; padding-block: 10px 30px; }
.help-track {
	display: flex;
	gap: 20px;
	width: max-content;
	padding-inline: var(--pad);
	transition: transform .8s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
	user-select: none;
	touch-action: pan-y;   /* allow vertical page scroll, horizontal handled by drag */
}
.help-track img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.help-card {
	flex: 0 0 clamp(280px, 68vw, 1120px);
	scroll-snap-align: center;
	background: var(--orange);
	color: var(--ink);
	border-radius: var(--radius-lg);
	padding: clamp(28px, 3vw, 52px);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(26px, 3.5vw, 60px);
	min-height: clamp(400px, 40vw, 620px);
	align-items: stretch;
}
.help-card:nth-child(even) { background: var(--blue); }
.help-card__num { color: var(--ink); font-size: clamp(4.5rem, 9.5vw, 9.5rem); font-weight: 400; line-height: .8; letter-spacing: -.03em; }
.help-card__body { display: flex; flex-direction: column; }
.help-card__title { font-size: clamp(1.5rem, 2.2vw, 2.1rem); font-weight: 500; margin-top: auto; }
.help-card__text { font-size: clamp(.85rem, 1vw, .95rem); opacity: .92; margin-top: 20px; max-width: 46ch; }
.help-card__media { position: relative; align-self: stretch; border-radius: var(--radius); overflow: hidden; }
.help-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }

/* ---- Modern hover: 3D cursor-tilt + light spotlight + image zoom (JS-driven) ---- */
.help-card {
	position: relative;
	transition: transform .4s var(--ease);
	will-change: transform;
}

.help-card__media { position: relative; }
.help-card__media img { transition: transform 1.1s var(--ease); }
.help-card.is-hover .help-card__media img { transform: scale(1.09); }

/* Soft light that follows the cursor across the card */
.help-card::after {
	content: ""; position: absolute; inset: 0; z-index: 4;
	pointer-events: none; border-radius: var(--radius-lg);
	background: radial-gradient( 480px circle at var(--mx, 50%) var(--my, 50%),
		rgba(255,255,255,.28), rgba(255,255,255,0) 45% );
	opacity: 0; transition: opacity .4s var(--ease);
}
.help-card.is-hover::after { opacity: 1; }

/* =========================================================================
   PROJECTS GRID
   ========================================================================= */
.filters {
	display: flex; gap: clamp(14px, 2.5vw, 40px); flex-wrap: wrap;
	margin-bottom: clamp(24px, 3vw, 48px);
	border-bottom: 1px solid var(--line);
	padding-bottom: 18px;
}
.filters button {
	border: none; background: none; font-size: .95rem; color: var(--muted-text);
	position: relative; padding: 0 0 4px;
	transition: color .3s var(--ease);
}
.filters button.is-active { color: var(--ink); }
.filters button.is-active::after {
	content: ""; position: absolute; left: 0; bottom: -19px; height: 2px; width: 100%; background: var(--ink);
}

.projects-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 48px) clamp(24px, 3vw, 40px); }
.project-card { display: block; }
.project-card__img {
	aspect-ratio: 16/11;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--bg-alt);
}
.project-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.project-card:hover .project-card__img img { transform: scale(1.05); }
.project-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 14px; }
.project-card__title { font-size: 1.05rem; font-weight: 500; }
.project-card__tags { display: flex; gap: 8px; flex-wrap: wrap; }
.project-card__tags .tag { text-transform: uppercase; letter-spacing: .06em; font-size: .64rem; padding: .5em 1em; }
.see-more { text-align: center; margin-top: clamp(40px, 6vw, 80px); }

/* =========================================================================
   CLIENTS
   ========================================================================= */
.clients { background: var(--blue); }
/* Two logo rows that marquee in opposite directions */
.client-marquee { overflow: hidden; }
.client-marquee:first-of-type { margin-top: clamp(44px, 6vw, 84px); }
.client-marquee + .client-marquee { margin-top: clamp(22px, 2.6vw, 42px); }
.client-marquee__track { display: flex; width: max-content; gap: clamp(24px, 3vw, 60px); will-change: transform; }
.client {
	flex: 0 0 auto;
	width: clamp(150px, 14vw, 210px);
	height: clamp(52px, 5.5vw, 82px);
	display: grid; place-items: center;
	color: var(--ink);
}
.client img {
	max-width: 80%; max-height: 46px;         /* every logo fits the same box */
	width: auto; height: auto; object-fit: contain;
	opacity: .85; transition: opacity .3s var(--ease);
}
.client:hover img { opacity: 1; }
.client span { font-size: clamp(1.05rem, 2vw, 1.6rem); font-weight: 700; white-space: nowrap; letter-spacing: -.01em; }

/* =========================================================================
   TESTIMONIALS
   ========================================================================= */
.quotes { text-align: center; }
.quote { display: none; }
.quote.is-active { display: block; animation: fade .5s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.quote__text { font-size: clamp(1.05rem, 2vw, 1.4rem); font-style: italic; max-width: 40ch; margin: 0 auto 26px; }
.quote__name { font-weight: 500; }
.quote__co { color: var(--muted-text); font-size: .9rem; }
.quotes__nav { display: flex; align-items: center; justify-content: center; gap: 40px; margin-top: 28px; }
.quotes__nav button { width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line); background: none; font-size: 1.1rem; }
.quotes__nav button:hover { background: var(--ink); color: #fff; }
.quotes__count { font-size: .85rem; color: var(--muted-text); }

/* =========================================================================
   AWARDS TABLE
   ========================================================================= */
.awards-table { width: 100%; border-collapse: collapse; margin-top: clamp(28px, 4vw, 50px); }
.awards-table th {
	text-align: left; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--muted-text); font-weight: 500; padding: 12px 10px; border-bottom: 1px solid var(--line);
}
.awards-table th:last-child, .awards-table td:last-child { text-align: right; }
.awards-table td { padding: 20px 10px; font-size: 1rem; border-bottom: 1px solid var(--line); }
.awards-table tr.is-dark td { background: var(--ink); color: #fff; }
.awards-table tbody tr td { transition: background .35s var(--ease), color .35s var(--ease), padding .35s var(--ease); }
.awards-table tbody tr:hover td { background: var(--ink); color: #fff; }
.awards-table tbody tr:hover td:first-child { padding-left: 22px; }
.awards-table tbody tr { cursor: default; }

/* Cursor-following image preview (awards certificates + other-projects) */
.cursor-preview {
	position: fixed; top: 0; left: 0; z-index: 70;
	width: clamp(210px, 20vw, 300px); aspect-ratio: 4/3;
	pointer-events: none; opacity: 0;
	border-radius: 10px; overflow: hidden;
	box-shadow: 0 34px 66px rgba(0,0,0,.34);
	transition: opacity .3s var(--ease);
	will-change: transform, opacity;
}
.cursor-preview.is-on { opacity: 1; }
.cursor-preview img { width: 100%; height: 100%; object-fit: cover; background: #fff; display: block; transform-origin: center; }

/* =========================================================================
   CTA STICKER BLOCK
   ========================================================================= */
.cta { text-align: center; position: relative; }
.cta__text { font-size: clamp(1.5rem, 3.2vw, 2.6rem); font-weight: 400; letter-spacing: -.02em; position: relative; display: inline-block; max-width: 26ch; }

/* Wrapper carries the scroll-parallax (JS transform); inner sticker floats (CSS). */
.sticker-wrap { position: absolute; z-index: 2; will-change: transform; pointer-events: none; }
.sticker {
	display: inline-block;
	padding: .42em .95em;
	border-radius: 999px;
	font-size: .82rem; font-weight: 500;
	white-space: nowrap;
	box-shadow: 0 10px 24px rgba(0,0,0,.16);
	transform: rotate(var(--rot, 0deg));
	animation: sticker-float 5s ease-in-out infinite;
	will-change: transform;
}
.sticker--1 { background: var(--sticker-1); --rot: -6deg; }
.sticker--2 { background: var(--sticker-2); --rot:  5deg; }
.sticker--3 { background: var(--sticker-3); --rot: -3deg; }
.sticker--4 { background: var(--sticker-4); --rot:  7deg; }
@keyframes sticker-float {
	0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
	50%      { transform: translateY(-9px) rotate(calc(var(--rot, 0deg) * 1.7)); }
}
@media (prefers-reduced-motion: reduce) {
	.sticker { animation: none; }
}

/* Contact "creative designer" block */
.designer-block {
	background: var(--hero);
	border-radius: 6px;
	text-align: center;
	padding: clamp(50px, 8vw, 110px) var(--pad);
}
.designer-block h2 { font-size: clamp(2.2rem, 6vw, 4.4rem); font-weight: 400; letter-spacing: -.02em; }
.designer-block .btn { margin-top: 30px; }
.designer-block p { max-width: 46ch; margin: 30px auto 0; font-size: .92rem; font-weight: 500; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.site-footer {
	--footer-bg: #3c1b0c;
	--footer-text: #e6e5e3;
	--footer-accent: #fa7f43;
	background: var(--footer-bg);
	color: var(--footer-text);
}
.site-footer > .container {
	position: relative;
	min-height: clamp(352px, 36vw, 560px);
	padding-inline: clamp(40px, 4.2vw, 92px);
}
.site-footer a { color: var(--footer-accent); }
.footer-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding-top: 29px;
}
.footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(34px, 3.7vw, 56px);
	padding-top: 3px;
	font-size: 14px;
	line-height: 1;
}
.footer-nav a {
	position: relative;
	color: var(--footer-text);
}
.footer-nav li { display: contents; list-style: none; }
.footer-nav a::after {
	position: absolute;
	right: 0;
	bottom: -5px;
	left: 0;
	height: 1px;
	background: currentColor;
	content: "";
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .45s var(--ease), color .3s var(--ease);
}
.footer-nav a:hover { color: var(--footer-accent); }
.footer-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.to-top {
	display: grid;
	width: 30px;
	height: 36px;
	margin: -1px -4px 0 0;
	padding: 0;
	place-items: start center;
	border: 0;
	background: transparent;
	color: var(--footer-text);
}
.to-top__icon {
	display: block;
	width: 16px;
	height: 20px;
	transition: transform .45s var(--ease), color .3s ease;
}
.to-top svg { display: block; width: 100%; height: 100%; overflow: visible; }
.to-top path { fill: none; stroke: currentColor; stroke-width: 1.15; vector-effect: non-scaling-stroke; }
.to-top:hover { color: var(--footer-accent); }
.to-top:hover .to-top__icon { transform: translateY(-4px); }
.to-top:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
.to-top.is-scrolling .to-top__icon { animation: to-top-launch .8s var(--ease); }
@keyframes to-top-launch {
	0% { opacity: 1; transform: translateY(0); }
	38% { opacity: 0; transform: translateY(-15px); }
	39% { opacity: 0; transform: translateY(12px); }
	100% { opacity: 1; transform: translateY(0); }
}
.footer-cols {
	display: grid;
	grid-template-columns: 26.2% 50.5% 23.3%;
	padding-top: 32px;
}
.footer-cols h4 {
	margin-bottom: 12px;
	color: var(--footer-text);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.2;
}
.footer-cols p { margin: 0; color: var(--footer-accent); }
.footer-cols p { font-size: 17px; line-height: 1.4; }
.footer-cols a { font-size: 17px; line-height: 1.58; }
.footer-cols a { transition: color .3s ease; }
.footer-cols a:hover { color: #fff; }
.footer-bottom {
	position: absolute;
	bottom: 28px;
	left: clamp(40px, 4.2vw, 92px);
	color: var(--footer-text);
	font-size: 10px;
	line-height: 1;
}

/* =========================================================================
   ABOUT
   ========================================================================= */
.page-hero { background: var(--bg); padding-top: clamp(130px, 18vh, 220px); padding-bottom: clamp(40px, 6vw, 90px); }
.about-hero { background: #e7e3ee; }
.about-hero.page-hero { background: #e7e3ee; }
.about-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.about-split__text { max-width: 42ch; color: var(--ink-soft); font-size: .95rem; padding-left: 8%; }
.about-media { position: relative; }
.about-media img { border-radius: var(--radius); }
.about-media__sm { position: absolute; width: 42%; left: -6%; bottom: -12%; border: 6px solid var(--bg); }

/* =========================================================================
   SERVICES (dark list)
   ========================================================================= */
.services { background: #262017; color: #f0ece5; }
.services .page-hero { background: transparent; }
.svc-row {
	display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(30px, 5vw, 80px);
	padding-block: clamp(30px, 4vw, 54px);
	border-top: 1px solid rgba(255,255,255,.14);
	align-items: start;
}
.svc-row__num { font-size: .8rem; color: #9d968b; margin-bottom: 20px; }
.svc-row__title { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 400; margin-bottom: 16px; }
.svc-row__text { color: #c4bdb2; font-size: .92rem; max-width: 52ch; }
.svc-row__tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0; }
.svc-row__tags .tag { background: transparent; border: 1px solid #f2ee9e; color: #f2ee9e; }
.svc-row__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3/2; }
.svc-row__media img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================================
   CONTACT
   ========================================================================= */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); }
.contact-info p { font-size: 1.15rem; line-height: 1.5; margin: 0 0 6px; }
.contact-block { margin-top: 40px; }
.contact-media { border-radius: var(--radius); overflow: hidden; margin-top: 40px; }
.form { }
.form h3 { font-weight: 400; font-size: 1.3rem; margin-bottom: 24px; }
.form .field { margin-bottom: 6px; position: relative; }
.form label { display: block; font-size: .72rem; color: var(--muted-text); margin-bottom: 4px; }
.form input, .form textarea {
	width: 100%; border: none; border-bottom: 1px solid var(--line); background: transparent;
	padding: 12px 0; font-family: inherit; font-size: 1rem; color: var(--ink);
	transition: border-color .3s var(--ease);
}
.form input:focus, .form textarea:focus { outline: none; border-color: var(--ink); }
.form textarea { resize: vertical; min-height: 60px; }
.form .field + .field { margin-top: 14px; }
.form button { margin-top: 26px; }
.form__note { margin-top: 16px; font-size: .85rem; }

/* =========================================================================
   SINGLE PROJECT
   ========================================================================= */
.proj-head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; }
.proj-head__meta { display: flex; flex-direction: column; gap: 22px; }
.proj-head__meta .eyebrow { margin-bottom: 4px; }
.proj-hero { border-radius: var(--radius); overflow: hidden; margin-top: clamp(30px, 5vw, 60px); }
.proj-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 40px); margin-top: clamp(30px, 5vw, 60px); }
.proj-gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); }
.proj-gallery figure:nth-child(3n) { grid-column: span 2; }
.other-projects { margin-top: clamp(50px, 7vw, 100px); }
.other-projects h3 { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-text); display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.other-row {
	display: flex; align-items: center; justify-content: space-between;
	padding: 22px 4px; border-bottom: 1px solid var(--line);
	font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 400;
	transition: padding .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.other-row:hover { background: var(--ink); color: #fff; padding-inline: 22px; }
.other-row .arrow { transition: transform .35s var(--ease); }
.other-row:hover .arrow { transform: translate(4px,-4px); }

/* =========================================================================
   ANIMATION UTILITIES
   ========================================================================= */
.reveal { opacity: 0; transform: translateY(38px); transition: opacity .9s var(--ease), transform .9s var(--ease); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal--right { transform: translateX(-48px); }
.reveal--right.is-in { transform: none; }
.reveal--scale { transform: scale(.94); }
.reveal--scale.is-in { transform: none; }
[data-stagger] > * { opacity: 0; transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-stagger].is-in > * { opacity: 1; transform: none; }
[data-stagger].is-in > *:nth-child(1){transition-delay:.05s}
[data-stagger].is-in > *:nth-child(2){transition-delay:.12s}
[data-stagger].is-in > *:nth-child(3){transition-delay:.19s}
[data-stagger].is-in > *:nth-child(4){transition-delay:.26s}
[data-stagger].is-in > *:nth-child(5){transition-delay:.33s}
[data-stagger].is-in > *:nth-child(6){transition-delay:.40s}
[data-stagger].is-in > *:nth-child(7){transition-delay:.47s}
[data-stagger].is-in > *:nth-child(8){transition-delay:.54s}

[data-parallax] { will-change: transform; }

.char-reveal { display: inline-block; }
.char-reveal .word { display: inline-block; overflow: hidden; vertical-align: top; }
.char-reveal .word > span { display: inline-block; transform: translateY(105%); transition: transform .8s var(--ease); }
.char-reveal.is-in .word > span { transform: none; }
.char-reveal.is-in .word:nth-child(2) > span { transition-delay: .06s; }
.char-reveal.is-in .word:nth-child(3) > span { transition-delay: .12s; }
.char-reveal.is-in .word:nth-child(4) > span { transition-delay: .18s; }
.char-reveal.is-in .word:nth-child(5) > span { transition-delay: .24s; }
.char-reveal.is-in .word:nth-child(6) > span { transition-delay: .30s; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 900px) {
	.about-split, .contact-grid, .proj-head, .svc-row { grid-template-columns: 1fr; }
	.site-footer > .container { min-height: 470px; }
	.footer-cols { grid-template-columns: 1fr 1fr; gap: 30px; }
	.footer-cols > :last-child { grid-column: 2; }
	.help-card { grid-template-columns: 1fr; }
	.help-card__media { order: -1; aspect-ratio: 16/10; }
	.about-split__text { padding-left: 0; }
	.about-media__sm { position: static; width: 55%; margin-top: 16px; border: none; }
}
@media (max-width: 640px) {
	.projects-grid, .proj-gallery { grid-template-columns: 1fr; }
	.proj-gallery figure:nth-child(3n) { grid-column: auto; }
	.site-footer > .container { min-height: 600px; padding-inline: 22px; }
	.footer-top { padding-top: 24px; }
	.footer-nav { max-width: 260px; gap: 18px 28px; line-height: 1.3; }
	.footer-cols { grid-template-columns: 1fr; gap: 28px; padding-top: 34px; }
	.footer-cols > :last-child { grid-column: auto; }
	.footer-bottom { right: 22px; bottom: 24px; left: 22px; line-height: 1.4; }
}

@media (prefers-reduced-motion: reduce) {
	.reveal, [data-stagger] > *, .char-reveal .word > span { opacity: 1 !important; transform: none !important; }
	.marquee__track { animation: none; }
	.to-top__icon { animation: none !important; transition: none; }
	html { scroll-behavior: auto; }
}

/* =========================================================================
   Spacing utilities (Tailwind-style margins) — m / mt / mr / mb / ml / mx / my
   Scale: 1 = 0.25rem (e.g. m-2 = 0.5rem). Plus *-auto.
   ========================================================================= */
.m-0{margin:0}.mt-0{margin-top:0}.mr-0{margin-right:0}.mb-0{margin-bottom:0}.ml-0{margin-left:0}.mx-0{margin-left:0;margin-right:0}.my-0{margin-top:0;margin-bottom:0}
.m-1{margin:0.25rem}.mt-1{margin-top:0.25rem}.mr-1{margin-right:0.25rem}.mb-1{margin-bottom:0.25rem}.ml-1{margin-left:0.25rem}.mx-1{margin-left:0.25rem;margin-right:0.25rem}.my-1{margin-top:0.25rem;margin-bottom:0.25rem}
.m-2{margin:0.5rem}.mt-2{margin-top:0.5rem}.mr-2{margin-right:0.5rem}.mb-2{margin-bottom:0.5rem}.ml-2{margin-left:0.5rem}.mx-2{margin-left:0.5rem;margin-right:0.5rem}.my-2{margin-top:0.5rem;margin-bottom:0.5rem}
.m-3{margin:0.75rem}.mt-3{margin-top:0.75rem}.mr-3{margin-right:0.75rem}.mb-3{margin-bottom:0.75rem}.ml-3{margin-left:0.75rem}.mx-3{margin-left:0.75rem;margin-right:0.75rem}.my-3{margin-top:0.75rem;margin-bottom:0.75rem}
.m-4{margin:1rem}.mt-4{margin-top:1rem}.mr-4{margin-right:1rem}.mb-4{margin-bottom:1rem}.ml-4{margin-left:1rem}.mx-4{margin-left:1rem;margin-right:1rem}.my-4{margin-top:1rem;margin-bottom:1rem}
.m-5{margin:1.25rem}.mt-5{margin-top:1.25rem}.mr-5{margin-right:1.25rem}.mb-5{margin-bottom:1.25rem}.ml-5{margin-left:1.25rem}.mx-5{margin-left:1.25rem;margin-right:1.25rem}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}
.m-6{margin:1.5rem}.mt-6{margin-top:1.5rem}.mr-6{margin-right:1.5rem}.mb-6{margin-bottom:1.5rem}.ml-6{margin-left:1.5rem}.mx-6{margin-left:1.5rem;margin-right:1.5rem}.my-6{margin-top:1.5rem;margin-bottom:1.5rem}
.m-7{margin:1.75rem}.mt-7{margin-top:1.75rem}.mr-7{margin-right:1.75rem}.mb-7{margin-bottom:1.75rem}.ml-7{margin-left:1.75rem}.mx-7{margin-left:1.75rem;margin-right:1.75rem}.my-7{margin-top:1.75rem;margin-bottom:1.75rem}
.m-8{margin:2rem}.mt-8{margin-top:2rem}.mr-8{margin-right:2rem}.mb-8{margin-bottom:2rem}.ml-8{margin-left:2rem}.mx-8{margin-left:2rem;margin-right:2rem}.my-8{margin-top:2rem;margin-bottom:2rem}
.m-9{margin:2.25rem}.mt-9{margin-top:2.25rem}.mr-9{margin-right:2.25rem}.mb-9{margin-bottom:2.25rem}.ml-9{margin-left:2.25rem}.mx-9{margin-left:2.25rem;margin-right:2.25rem}.my-9{margin-top:2.25rem;margin-bottom:2.25rem}
.m-10{margin:2.5rem}.mt-10{margin-top:2.5rem}.mr-10{margin-right:2.5rem}.mb-10{margin-bottom:2.5rem}.ml-10{margin-left:2.5rem}.mx-10{margin-left:2.5rem;margin-right:2.5rem}.my-10{margin-top:2.5rem;margin-bottom:2.5rem}
.m-11{margin:2.75rem}.mt-11{margin-top:2.75rem}.mr-11{margin-right:2.75rem}.mb-11{margin-bottom:2.75rem}.ml-11{margin-left:2.75rem}.mx-11{margin-left:2.75rem;margin-right:2.75rem}.my-11{margin-top:2.75rem;margin-bottom:2.75rem}
.m-12{margin:3rem}.mt-12{margin-top:3rem}.mr-12{margin-right:3rem}.mb-12{margin-bottom:3rem}.ml-12{margin-left:3rem}.mx-12{margin-left:3rem;margin-right:3rem}.my-12{margin-top:3rem;margin-bottom:3rem}
.m-14{margin:3.5rem}.mt-14{margin-top:3.5rem}.mr-14{margin-right:3.5rem}.mb-14{margin-bottom:3.5rem}.ml-14{margin-left:3.5rem}.mx-14{margin-left:3.5rem;margin-right:3.5rem}.my-14{margin-top:3.5rem;margin-bottom:3.5rem}
.m-16{margin:4rem}.mt-16{margin-top:4rem}.mr-16{margin-right:4rem}.mb-16{margin-bottom:4rem}.ml-16{margin-left:4rem}.mx-16{margin-left:4rem;margin-right:4rem}.my-16{margin-top:4rem;margin-bottom:4rem}
.m-20{margin:5rem}.mt-20{margin-top:5rem}.mr-20{margin-right:5rem}.mb-20{margin-bottom:5rem}.ml-20{margin-left:5rem}.mx-20{margin-left:5rem;margin-right:5rem}.my-20{margin-top:5rem;margin-bottom:5rem}
.m-24{margin:6rem}.mt-24{margin-top:6rem}.mr-24{margin-right:6rem}.mb-24{margin-bottom:6rem}.ml-24{margin-left:6rem}.mx-24{margin-left:6rem;margin-right:6rem}.my-24{margin-top:6rem;margin-bottom:6rem}
.m-28{margin:7rem}.mt-28{margin-top:7rem}.mr-28{margin-right:7rem}.mb-28{margin-bottom:7rem}.ml-28{margin-left:7rem}.mx-28{margin-left:7rem;margin-right:7rem}.my-28{margin-top:7rem;margin-bottom:7rem}
.m-32{margin:8rem}.mt-32{margin-top:8rem}.mr-32{margin-right:8rem}.mb-32{margin-bottom:8rem}.ml-32{margin-left:8rem}.mx-32{margin-left:8rem;margin-right:8rem}.my-32{margin-top:8rem;margin-bottom:8rem}
.m-auto{margin:auto}.mt-auto{margin-top:auto}.mr-auto{margin-right:auto}.mb-auto{margin-bottom:auto}.ml-auto{margin-left:auto}.mx-auto{margin-left:auto;margin-right:auto}.my-auto{margin-top:auto;margin-bottom:auto}