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

		:root {
			--black: #0a0a0a;
			--white: #ffffff;
			--g100: #f5f5f2;
			--g200: #e0e0db;
			--g400: #5c5c56;
			--g600: #3d3d3a;
			--g700: #2a2a28;
			--g800: #141412;
			--font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
			--display: var(--font-sans);
			--body: var(--font-sans);
			--mono: var(--font-sans);
			--border: rgba(0, 0, 0, 0.08);
		}

		.hero-headline,
		.decode-title,
		.svc-big-title,
		.port-big-title,
		.process-big-title,
		.testi-big-title,
		.cta-title,
		.case-title,
		.stat-num,
		.stat-display,
		.svc-name,
		.case-metric-num,
		.process-step-name,
		.founder-avatar,
		.founder-info h3,
		.value-card h4,
		.why-item h4,
		.work-detail-title,
		.case-studies-card-title,
		.case-study-title {
			font-weight: 600;
		}

		.process-step-num {
			font-weight: 700;
		}

		.testi-qmark {
			font-weight: 400;
		}

		html {
			scroll-behavior: auto
		}

		body {
			background: var(--white);
			color: var(--black);
			font-family: var(--body);
			font-size: 16px;
			line-height: 1.6;
			overflow-x: hidden;
		}

		/* ── CURSOR (hidden, normal cursor used) ── */
		#cur,
		#cur-ring,
		#cur-lbl {
			display: none;
		}

		/* Grain / scanline removed (performance). */

		/* ── STATUS BADGE ── */
		#status-badge {
			position: fixed;
			bottom: 28px;
			right: 28px;
			z-index: 300;
			display: flex;
			align-items: center;
			gap: 8px;
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: #fff;
			background: #25d366;
			border: 1px solid #20bd5a;
			padding: 8px 16px;
			text-decoration: none;
			cursor: pointer;
			opacity: 1;
			transform: none;
		}

		#status-badge:hover {
			background: #20bd5a;
			border-color: #1da851;
			color: #fff;
		}

		#status-badge.at-footer {
			bottom: 130px;
		}

		#status-badge.visible {
			opacity: 1;
			transform: none
		}

		#status-badge::before {
			content: '';
			width: 7px;
			height: 7px;
			border-radius: 50%;
			background: rgba(255, 255, 255, .9);
		}

		/* ── TERMINAL TOOLTIP ── */
		#term-tip {
			position: fixed;
			pointer-events: none;
			z-index: 400;
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .08em;
			background: rgba(255, 255, 255, .98);
			border: 1px solid rgba(0, 0, 0, .12);
			padding: 10px 14px;
			min-width: 200px;
			opacity: 0;
			transform: none;
		}

		#term-tip.visible {
			opacity: 1;
			transform: none
		}

		.tt-line {
			color: var(--g600);
			margin-bottom: 2px
		}

		.tt-line span {
			color: var(--g200)
		}

		.tt-line.ok span {
			color: #4ade80
		}

		/* ── NAV ── */
		nav {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 10000;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 5vw;
			height: 60px;
			border-bottom: 1px solid var(--border);
			background: #fff;
			transform: translateY(0);
		}

		nav.visible {
			transform: translateY(0)
		}

		.nav-logo {
			text-decoration: none;
			display: flex;
			align-items: center
		}

		.nav-logo-img {
			height: 44px;
			width: auto;
			display: block;
			vertical-align: middle
		}

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

		.nav-links {
			display: flex;
			gap: 28px;
			list-style: none
		}

		.nav-links a {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--g400);
			text-decoration: none;
		}

		.nav-links a:hover {
			color: var(--black)
		}

		#nav-clock {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .1em;
			color: var(--g700);
			white-space: nowrap;
			border-left: 1px solid var(--border);
			padding-left: 20px
		}

		#nav-coords {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .08em;
			color: var(--g700);
			padding-left: 16px
		}

		.nav-menu {
			display: flex;
			align-items: center;
			gap: 32px
		}

		.nav-right {
			display: flex;
			align-items: center;
			gap: 16px
		}

		.nav-toggle {
			display: none;
			flex-direction: column;
			justify-content: center;
			gap: 6px;
			width: 44px;
			height: 44px;
			padding: 10px;
			background: transparent;
			border: 1px solid var(--border);
			cursor: pointer;
		}

		.nav-toggle:hover {
			border-color: var(--g400)
		}

		.nav-toggle-bar {
			display: block;
			width: 100%;
			height: 1.5px;
			background: var(--g600);
		}

		nav.nav-open .nav-toggle-bar:nth-child(1) {
			transform: translateY(7.5px) rotate(45deg)
		}

		nav.nav-open .nav-toggle-bar:nth-child(2) {
			opacity: 0
		}

		nav.nav-open .nav-toggle-bar:nth-child(3) {
			transform: translateY(-7.5px) rotate(-45deg)
		}

		.nav-cta {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .1em;
			text-transform: uppercase;
			color: var(--white);
			background: var(--black);
			border: none;
			padding: 9px 22px;
			cursor: pointer;
			text-decoration: none;
			display: inline-block
		}

		.nav-cta:hover {
			opacity: .85
		}

		/* ── HERO ── */
		.hero {
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			padding: 72px 5vw 72px;
			position: relative;
			overflow: hidden;
			border-bottom: 1px solid var(--border)
		}

		#hero-canvas {
			display: none
		}

		.hero-grid {
			position: absolute;
			inset: 0;
			background-image: linear-gradient(rgba(0, 0, 0, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, .018) 1px, transparent 1px);
			background-size: 72px 72px;
			z-index: 1;
		}

		.hero-line-h {
			position: absolute;
			top: 42%;
			left: 0;
			right: 0;
			height: 1px;
			background: rgba(0, 0, 0, .02);
			z-index: 1
		}

		.hero-line-v {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 5vw;
			width: 1px;
			background: rgba(0, 0, 0, .025);
			z-index: 1
		}

		.hero-ticker {
			border-top: 1px solid var(--border);
			border-bottom: 1px solid var(--border);
			overflow: hidden;
			margin-bottom: 48px;
			position: relative;
			z-index: 2;
		}

		.ticker-track {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 0 8px;
			width: 100%;
			padding: 12px 5vw;
			box-sizing: border-box;
		}

		.ticker-item {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .16em;
			text-transform: uppercase;
			color: var(--g600);
			padding: 0 32px;
			white-space: nowrap
		}

		.ticker-item::after {
			content: '·';
			margin-left: 32px;
			color: var(--g700)
		}

		.hero-tag {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .18em;
			text-transform: uppercase;
			color: var(--g600);
			margin-bottom: 20px;
			display: flex;
			align-items: center;
			gap: 12px;
			opacity: 1;
			transform: none;
			position: relative;
			z-index: 2
		}

		/* Home hero: modest top rhythm after ticker removal; no dash so title aligns flush */
		.hero .hero-tag {
			margin-top: 52px;
		}

		.hero .hero-tag::before {
			display: none;
		}

		.hero-tag::before {
			content: '';
			width: 24px;
			height: 1px;
			background: var(--g600)
		}

		.hero-tag.visible {
			opacity: 1;
			transform: none
		}

		.hero-headline {
			font-family: var(--display);
			font-size: clamp(32px, 6.5vw, 96px);
			line-height: .86;
			letter-spacing: -0.02em;
			color: var(--black);
			margin-bottom: 56px;
			position: relative;
			z-index: 2
		}

		.hero-headline .line {
			overflow: hidden;
			display: block
		}

		.hero-headline .line-inner {
			display: block;
			transform: none;
		}

		.hero-headline .line-inner.visible {
			transform: none
		}

		.glitch-target {
			position: relative;
			display: inline-block
		}

		.glitch-target::before,
		.glitch-target::after {
			display: none;
			content: none;
		}

		.hero-bottom {
			display: flex;
			flex-direction: column;
			gap: 32px;
			align-items: flex-start;
			position: relative;
			z-index: 2;
			opacity: 1;
			transform: none;
		}

		.hero-bottom.visible {
			opacity: 1;
			transform: none
		}

		.hero-desc {
			max-width: 400px;
			font-size: 15px;
			line-height: 1.9;
			color: var(--g400);
			font-weight: 300
		}

		.hero-desc strong {
			color: var(--black);
			font-weight: 400
		}

		.hero-actions {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			align-items: flex-start;
			gap: 12px
		}

		.btn-primary {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--white);
			background: var(--black);
			border: none;
			padding: 16px 40px;
			cursor: pointer;
			text-decoration: none;
			display: inline-block;
		}

		.btn-primary:hover {
			opacity: .9
		}

		.btn-ghost {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--g600);
			background: none;
			border: 1px solid var(--border);
			padding: 16px 40px;
			cursor: pointer;
			text-decoration: none;
			display: inline-block;
		}

		.btn-ghost:hover {
			color: var(--black);
			border-color: var(--g400)
		}

		.scroll-cue {
			position: absolute;
			right: 5vw;
			bottom: 72px;
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .14em;
			color: var(--g700);
			writing-mode: vertical-rl;
			text-transform: uppercase;
			display: flex;
			align-items: center;
			gap: 10px;
			z-index: 2
		}

		.scroll-cue::after {
			content: '';
			width: 1px;
			height: 52px;
			background: var(--g400);
		}

		/* ── EYEBROW ── */
		.eyebrow {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .2em;
			text-transform: uppercase;
			color: var(--g600);
			display: flex;
			align-items: center;
			gap: 12px;
			margin-bottom: 48px
		}

		.eyebrow::before {
			content: '';
			width: 20px;
			height: 1px;
			background: var(--g600)
		}

		/* ── DIAGONAL DIVIDERS (removed) ── */
		.diag-top,
		.diag-bot {
			display: none
		}

		section.diagonal::before,
		section.diagonal::after {
			display: none
		}

		/* ── SERVICES ── */
		.services {
			padding: 96px 5vw;
			border-bottom: 1px solid var(--border)
		}

		.svc-intro {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 48px;
			align-items: end;
			margin-bottom: 72px
		}

		.svc-big-title {
			font-family: var(--display);
			font-size: clamp(44px, 7vw, 80px);
			line-height: .92;
			letter-spacing: .03em;
			color: var(--black)
		}

		.svc-sub {
			font-size: 14px;
			line-height: 1.9;
			color: var(--g400);
			font-weight: 300;
			max-width: 360px;
			margin-left: auto
		}

		.svc-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			border-top: 1px solid var(--border);
			border-left: 1px solid var(--border)
		}

		.svc-card {
			border-right: 1px solid var(--border);
			border-bottom: 1px solid var(--border);
			padding: 44px 36px;
			cursor: pointer;
			overflow: hidden;
			position: relative
		}

		.svc-card:hover .svc-arrow {
			transform: none
		}

		a.svc-card {
			text-decoration: none;
			color: inherit;
			display: block;
		}

		.svc-num {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .12em;
			color: var(--g600);
			margin-bottom: 36px
		}

		.svc-icon {
			margin-bottom: 24px;
			opacity: .45
		}

		.svc-name {
			font-family: var(--display);
			font-size: 34px;
			letter-spacing: .04em;
			color: var(--black);
			margin-bottom: 12px
		}

		.svc-desc {
			font-size: 13px;
			line-height: 1.85;
			color: var(--g400);
			font-weight: 300;
			margin-bottom: 24px
		}

		.svc-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 7px;
			margin-bottom: 32px
		}

		.svc-tag {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .08em;
			text-transform: uppercase;
			color: var(--g600);
			border: 1px solid rgba(0, 0, 0, .07);
			padding: 4px 11px
		}

		.svc-arrow {
			font-size: 18px;
			color: var(--g400);
			display: inline-block
		}

		/* ── CASE STUDY ── */
		.case-study {
			padding: 0 5vw;
			border-bottom: 1px solid var(--border);
			background: var(--g100)
		}

		.case-study::before,
		.case-study::after {
			display: none
		}

		.case-inner {
			display: grid;
			grid-template-columns: 1fr 1fr;
			min-height: 560px;
			border-left: 1px solid var(--border);
			border-right: 1px solid var(--border)
		}

		.case-left {
			padding: 72px 56px;
			border-right: 1px solid var(--border);
			display: flex;
			flex-direction: column;
			justify-content: space-between
		}

		.case-badge {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .14em;
			text-transform: uppercase;
			color: var(--g400);
			border: 1px solid rgba(0, 0, 0, .1);
			padding: 6px 14px;
			margin-bottom: 40px;
			width: fit-content
		}

		.case-badge::before {
			content: '';
			width: 6px;
			height: 6px;
			border-radius: 50%;
			background: #4ade80;
		}

		.case-title {
			font-family: var(--display);
			font-size: clamp(36px, 4vw, 56px);
			line-height: .92;
			letter-spacing: .03em;
			color: var(--black);
			margin-bottom: 24px
		}

		.case-desc {
			font-size: 14px;
			line-height: 1.9;
			color: var(--g400);
			font-weight: 300;
			margin-bottom: 40px;
			max-width: 360px
		}

		.case-metrics {
			display: flex;
			gap: 40px;
			margin-bottom: 48px
		}

		.case-metric-num {
			font-family: var(--display);
			font-size: 40px;
			color: var(--black);
			line-height: 1
		}

		.case-metric-label {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .1em;
			text-transform: uppercase;
			color: var(--g600);
			margin-top: 4px
		}

		.case-link {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .1em;
			text-transform: uppercase;
			color: var(--black);
			text-decoration: none;
			display: inline-flex;
			align-items: center;
			gap: 10px;
			border-bottom: 1px solid rgba(0, 0, 0, .2);
			padding-bottom: 4px;
			width: fit-content
		}

		.case-link:hover {
			border-color: var(--black)
		}

		.case-right {
			position: relative;
			overflow: hidden;
			background: var(--g200);
			display: flex;
			align-items: center;
			justify-content: center
		}

		.case-mock {
			width: 80%;
			border: 1px solid rgba(0, 0, 0, .08);
			background: var(--white);
			position: relative;
			overflow: hidden
		}

		.case-mock--screenshot {
			padding: 0;
			box-shadow: 0 24px 48px rgba(0, 0, 0, .08);
			border-radius: 8px;
		}

		.case-mock-shot {
			display: block;
			width: 100%;
			height: auto;
		}

		.case-mock-bar {
			height: 28px;
			background: var(--g600);
			display: flex;
			align-items: center;
			padding: 0 12px;
			gap: 6px;
			border-bottom: 1px solid rgba(0, 0, 0, .06)
		}

		.case-mock-dot {
			width: 7px;
			height: 7px;
			border-radius: 50%
		}

		.case-mock-dot.dot-red {
			background: #f07070
		}

		.case-mock-dot.dot-yellow {
			background: #f0c070
		}

		.case-mock-dot.dot-green {
			background: #70c070
		}

		.case-mock-content {
			padding: 20px;
			display: flex;
			flex-direction: column;
			gap: 10px
		}

		.case-mock-hero {
			height: 80px;
			background: rgba(0, 0, 0, .04);
			border: 1px solid rgba(0, 0, 0, .06);
			display: flex;
			align-items: flex-end;
			padding: 12px;
			gap: 4px
		}

		.case-mock-bar-item {
			flex: 1;
			background: rgba(0, 0, 0, .1)
		}

		.case-mock-hero .case-mock-bar-item:nth-child(1) {
			height: 30%
		}

		.case-mock-hero .case-mock-bar-item:nth-child(2) {
			height: 60%
		}

		.case-mock-hero .case-mock-bar-item:nth-child(3) {
			height: 45%
		}

		.case-mock-hero .case-mock-bar-item:nth-child(4) {
			height: 80%
		}

		.case-mock-hero .case-mock-bar-item:nth-child(5) {
			height: 55%
		}

		.case-mock-hero .case-mock-bar-item:nth-child(6) {
			height: 70%
		}

		.case-mock-hero .case-mock-bar-item:nth-child(7) {
			height: 40%
		}

		.case-mock-hero .case-mock-bar-item:nth-child(8) {
			height: 90%
		}

		.case-mock-row {
			display: flex;
			gap: 8px
		}

		.case-mock-block {
			flex: 1;
			height: 36px;
			background: rgba(0, 0, 0, .03);
			border: 1px solid rgba(0, 0, 0, .05)
		}

		.case-mock-block.tall {
			height: 52px
		}

		.case-mock-block.tall.flex-2 {
			flex: 2
		}

		.case-mock-text {
			height: 8px;
			background: rgba(0, 0, 0, .06);
			border-radius: 2px;
			width: 70%
		}

		.case-mock-text.short {
			width: 45%
		}

		.case-right-label {
			position: absolute;
			bottom: 24px;
			right: 24px;
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--g600)
		}



		/* ── PORTFOLIO ── */
		.portfolio {
			padding: 96px 5vw;
			border-bottom: 1px solid var(--border)
		}

		.port-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			margin-bottom: 56px
		}

		.port-big-title {
			font-family: var(--display);
			font-size: clamp(44px, 7vw, 80px);
			line-height: .92;
			letter-spacing: .03em;
			color: var(--black)
		}

		.view-all {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .1em;
			text-transform: uppercase;
			color: var(--g400);
			text-decoration: none;
			border-bottom: 1px solid var(--g600);
			padding-bottom: 2px;
		}

		.view-all:hover {
			color: var(--black);
			border-color: var(--black)
		}

		.port-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1px;
			background: rgba(0, 0, 0, .06)
		}

		.port-item {
			background: var(--white);
			border: 1px solid var(--border);
			padding: 36px 30px;
			display: flex;
			flex-direction: column;
			gap: 10px;
			text-decoration: none;
			cursor: pointer;
			position: relative;
			overflow: hidden
		}

		.port-item:hover {
			background: var(--g100)
		}

		.port-item:hover .port-arrow {
			opacity: 1;
			transform: none
		}

		.port-content {
			position: relative;
			z-index: 1;
			display: flex;
			flex-direction: column;
			gap: 10px;
			flex: 1
		}

		.port-num {
			font-family: var(--mono);
			font-size: 10px;
			color: var(--g600);
			letter-spacing: .1em
		}

		.port-name {
			font-size: 15px;
			font-weight: 500;
			color: var(--black);
			line-height: 1.4
		}

		.port-desc {
			font-size: 13px;
			color: var(--g400);
			line-height: 1.65;
			font-weight: 300;
			flex: 1
		}

		.port-collaborators {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 6px;
		}

		.port-collab-label {
			font-family: var(--mono);
			font-size: 9px;
			letter-spacing: .1em;
			text-transform: uppercase;
			color: var(--g600);
			margin-right: 2px;
		}

		.port-collab-tag {
			display: inline-block;
			font-family: var(--mono);
			font-size: 9px;
			letter-spacing: .08em;
			text-transform: uppercase;
			color: var(--g400);
			background: rgba(0, 0, 0, .06);
			border: 1px solid var(--border);
			padding: 4px 8px;
			border-radius: 0;
		}

		.port-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 14px;
			border-top: 1px solid rgba(0, 0, 0, .06)
		}

		.port-industry {
			display: flex;
			align-items: center;
			gap: 7px;
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .07em;
			text-transform: uppercase;
			color: var(--g600)
		}

		.industry-dot {
			width: 6px;
			height: 6px;
			border-radius: 50%;
			flex-shrink: 0
		}

		.port-arrow {
			font-size: 14px;
			color: var(--g400);
			opacity: 1;
			display: inline-block
		}

		.blog-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1px;
			background: rgba(0, 0, 0, .06)
		}

		.blog-card {
			background: var(--white);
			border: 1px solid var(--border);
			display: flex;
			flex-direction: column;
			text-decoration: none;
			cursor: pointer;
			overflow: hidden
		}

		.blog-card:hover {
			background: var(--g100)
		}

		.blog-card:hover .port-arrow {
			opacity: 1;
			transform: none
		}

		.blog-card__img {
			width: 100%;
			aspect-ratio: 16 / 9;
			background: var(--g100);
			overflow: hidden;
			flex-shrink: 0
		}

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

		.blog-card__body {
			display: flex;
			flex-direction: column;
			gap: 10px;
			padding: 24px 24px 28px;
			flex: 1
		}

		.blog-card:not(:has(.blog-card__img)) .blog-card__body {
			padding-top: 28px
		}

		.dot-finance {
			background: #7eb8f7
		}

		.dot-fb {
			background: #f7c27e
		}

		.dot-realestate {
			background: #a8e6b0
		}

		.dot-logistics {
			background: #f7a07e
		}

		.dot-health {
			background: #d4a0f0
		}

		.dot-saas {
			background: #6b6b65
		}

		/* ── STATS ── */
		.stats-wrap {
			background: var(--g100);
			border-top: 1px solid var(--border);
			border-bottom: 1px solid var(--border)
		}

		.stats-diag-edge {
			display: none
		}

		.stats-inner {
			border: none;
			background: var(--g100)
		}

		.stats {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			border-top: 1px solid var(--border);
			border-bottom: 1px solid var(--border);
			background: var(--g100)
		}

		.stats::before,
		.stats::after {
			display: none
		}

		.stat-wrap {
			display: grid;
			grid-template-columns: repeat(3, 1fr)
		}

		.stat-item {
			padding: 52px 5vw;
			border-right: 1px solid var(--border)
		}

		.stat-item:last-child {
			border-right: none
		}

		.stat-num {
			font-family: var(--display);
			font-size: 64px;
			line-height: 1;
			color: var(--black);
			margin-bottom: 8px;
			letter-spacing: .02em
		}

		.stat-num sup {
			font-size: 34px;
			color: var(--g400)
		}

		.stat-label {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .16em;
			text-transform: uppercase;
			color: var(--g600)
		}

		.stat-display {
			font-family: var(--display);
			font-size: 64px;
			line-height: 1;
			color: var(--black);
			margin-bottom: 8px;
			letter-spacing: .02em
		}

		/* ── PROCESS ── */
		.process {
			padding: 96px 5vw;
			border-bottom: 1px solid var(--border)
		}

		.process-intro {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 48px;
			align-items: end;
			margin-bottom: 72px
		}

		.process-big-title {
			font-family: var(--display);
			font-size: clamp(44px, 7vw, 80px);
			line-height: .92;
			letter-spacing: .03em;
			color: var(--black)
		}

		.process-sub {
			font-size: 14px;
			line-height: 1.9;
			color: var(--g400);
			font-weight: 300;
			max-width: 360px;
			margin-left: auto
		}

		.process-steps {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			border-top: 1px solid var(--border);
			border-left: 1px solid var(--border)
		}

		@media (min-width: 1024px) {
			.process-steps--6 {
				grid-template-columns: repeat(6, minmax(0, 1fr));
			}
		}

		.process-step {
			border-right: 1px solid var(--border);
			border-bottom: 1px solid var(--border);
			padding: 40px 32px;
			position: relative;
			cursor: pointer;
			min-width: 0
		}

		.process-step:hover {
			background: rgba(0, 0, 0, .02)
		}

		.process-step-num {
			font-family: var(--display);
			font-size: 72px;
			line-height: 1;
			color: rgba(0, 0, 0, .04);
			margin-bottom: -16px;
			letter-spacing: .02em
		}

		.process-step-name {
			font-family: var(--display);
			font-size: 28px;
			letter-spacing: .04em;
			color: var(--black);
			margin-bottom: 12px
		}

		.process-step-desc {
			font-size: 13px;
			line-height: 1.85;
			color: var(--g400);
			font-weight: 300
		}

		.process-step-bar {
			height: 2px;
			background: rgba(0, 0, 0, .06);
			margin-top: 24px;
			position: relative;
			overflow: hidden
		}

		.process-step-bar::after {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			background: var(--black);
			width: 0;
		}

		.process-step:hover .process-step-bar::after {
			width: 100%
		}

		/* ── CLIENTS ── */
		.clients {
			padding: 64px 0;
			border-bottom: 1px solid var(--border);
			overflow: hidden
		}

		.clients-inner {
			padding: 0 5vw;
			margin-bottom: 36px;
			display: flex;
			justify-content: space-between;
			align-items: center
		}

		.clients-count {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .14em;
			text-transform: uppercase;
			color: var(--g600)
		}

		.marquee-wrap {
			position: relative;
			overflow: hidden;
		}

		.marquee-track {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 0;
			width: 100%;
			padding: 0 5vw;
			box-sizing: border-box;
		}

		.client-chip {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .1em;
			text-transform: uppercase;
			color: var(--g600);
			padding: 12px 28px;
			border-right: 1px solid var(--border);
			white-space: nowrap;
			cursor: pointer
		}

		.client-chip:hover {
			color: var(--black)
		}

		/* ── TECH ── */
		.techstack {
			padding: 64px 5vw;
			border-bottom: 1px solid var(--border)
		}

		.tech-grid {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			margin-top: 40px
		}

		.tech-pill {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .08em;
			text-transform: uppercase;
			color: var(--g400);
			border: 1px solid rgba(0, 0, 0, .08);
			padding: 9px 18px;
			cursor: pointer
		}

		.tech-pill:hover {
			color: var(--black);
			border-color: rgba(0, 0, 0, .3);
			background: rgba(0, 0, 0, .03)
		}

		/* ── TESTIMONIALS ── */
		.testimonials {
			padding: 96px 5vw;
			border-bottom: 1px solid var(--border)
		}

		.testi-intro {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 48px;
			align-items: end;
			margin-bottom: 72px
		}

		.testi-big-title {
			font-family: var(--display);
			font-size: clamp(44px, 7vw, 80px);
			line-height: .92;
			letter-spacing: .03em;
			color: var(--black)
		}

		.testi-sub {
			font-size: 14px;
			line-height: 1.9;
			color: var(--g400);
			font-weight: 300;
			max-width: 340px;
			margin-left: auto
		}

		.testi-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1px;
			background: rgba(0, 0, 0, .06)
		}

		.testi-card {
			background: var(--white);
			border: 1px solid var(--border);
			padding: 44px 36px;
			display: flex;
			flex-direction: column;
			gap: 22px;
			position: relative;
			cursor: pointer
		}

		.testi-card:hover {
			background: var(--g100)
		}

		.testi-qmark {
			font-family: var(--display);
			font-size: 80px;
			line-height: 1;
			color: rgba(0, 0, 0, .05);
			position: absolute;
			top: 24px;
			right: 28px
		}

		.testi-stars {
			display: flex;
			gap: 3px
		}

		.testi-star {
			width: 10px;
			height: 10px;
			background: var(--g600);
			opacity: .85;
			clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)
		}

		.testi-text {
			font-size: 15px;
			line-height: 1.85;
			color: var(--g600);
			font-weight: 400;
			font-style: italic;
			position: relative;
			z-index: 1;
			flex: 1
		}

		.testi-divider {
			width: 28px;
			height: 1px;
			background: rgba(0, 0, 0, .1)
		}

		.testi-name {
			font-size: 14px;
			font-weight: 500;
			color: var(--black)
		}

		.testi-role {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .1em;
			text-transform: uppercase;
			color: var(--g600)
		}

		/* ── CTA ── */
		.cta {
			padding: 120px 5vw;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;
			overflow: hidden
		}

		.cta-glow {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 700px;
			height: 360px;
			background: radial-gradient(ellipse, rgba(0, 0, 0, .035) 0%, transparent 70%);
			pointer-events: none
		}

		.cta-ring {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 600px;
			height: 600px;
			border-radius: 50%;
			border: 1px solid rgba(0, 0, 0, .03);
			pointer-events: none;
		}

		.cta-ring2 {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 380px;
			height: 380px;
			border-radius: 50%;
			border: 1px solid rgba(0, 0, 0, .05);
			pointer-events: none;
		}

		.cta-eyebrow {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .22em;
			text-transform: uppercase;
			color: var(--g600);
			margin-bottom: 28px;
			position: relative;
			z-index: 1
		}

		.cta-title {
			font-family: var(--display);
			font-size: clamp(52px, 10vw, 130px);
			line-height: .88;
			letter-spacing: .01em;
			color: var(--black);
			margin-bottom: 52px;
			position: relative;
			z-index: 1;
			white-space: nowrap
		}

		.cta-actions {
			display: flex;
			gap: 14px;
			flex-wrap: wrap;
			justify-content: center;
			position: relative;
			z-index: 1
		}

		.cta-contact {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .08em;
			color: var(--g400);
			margin-top: 20px;
			position: relative;
			z-index: 1
		}

		.cta-contact a {
			color: var(--g400);
			text-decoration: none;
			border-bottom: 1px solid var(--g600);
			padding-bottom: 1px;
		}

		.cta-contact a:hover {
			color: var(--black)
		}

		/* ── FOOTER ── */
		footer {
			border-top: 1px solid var(--border);
			padding: 36px 5vw;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 24px;
			flex-wrap: wrap
		}

		.footer-logo {
			display: flex;
			align-items: center
		}

		.footer-logo-img {
			height: 48px;
			width: auto;
			display: block
		}

		.about-logo {
			margin-bottom: 32px;
		}

		.about-logo-img {
			height: 160px;
			width: auto;
			display: block;
		}

		.footer-nav {
			display: flex;
			gap: 28px;
			list-style: none
		}

		.footer-nav a {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--g600);
			text-decoration: none;
		}

		.footer-nav a:hover {
			color: var(--black)
		}

		.footer-copy {
			font-family: var(--mono);
			font-size: 10px;
			color: var(--g600);
			letter-spacing: .06em
		}

		.decode-title {
			font-family: var(--display);
			font-size: clamp(32px, 5vw, 64px);
			line-height: .92;
			letter-spacing: .03em;
			color: var(--black);
			white-space: nowrap
		}

		.svc-big-title {
			font-family: var(--display);
			font-size: clamp(32px, 5vw, 64px);
			line-height: .92;
			letter-spacing: .03em;
			color: var(--black);
			white-space: nowrap
		}

		.magnetic {
			display: inline-block;
		}

		.reveal,
		.reveal.in {
			opacity: 1;
			transform: none;
		}

		.nav-links a.active {
			color: var(--black)
		}

		.nav-dropdown {
			position: relative;
		}

		.nav-dropdown-toggle {
			display: inline-flex;
			align-items: center;
			gap: 4px;
		}

		.nav-dropdown-menu {
			position: absolute;
			top: 100%;
			left: 0;
			margin-top: 4px;
			background: #fff;
			border: 1px solid var(--border);
			padding: 8px 0;
			min-width: 180px;
			list-style: none;
			opacity: 0;
			visibility: hidden;
			z-index: 100;
		}

		.nav-dropdown:hover .nav-dropdown-menu {
			opacity: 1;
			visibility: visible;
		}

		.nav-dropdown-menu a {
			display: block;
			padding: 10px 20px;
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--g400);
			text-decoration: none;
		}

		.nav-dropdown-menu a:hover {
			color: var(--black);
			background: rgba(0, 0, 0, .06);
		}

		.dot-creative {
			background: #d4a0f0
		}

		.dot-construction {
			background: #f7c27e
		}

		.dot-travel {
			background: #7eb8f7
		}

		.dot-interiors {
			background: #a8e6b0
		}

		.dot-telecom {
			background: #f7a07e
		}

		.dot-architecture {
			background: #c5c5bc
		}

		.page-hero {
			min-height: 100vh;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding: 100px 5vw 72px;
			position: relative;
			overflow: hidden;
			border-bottom: 1px solid var(--border);
		}

		.page-hero .hero-grid {
			position: absolute;
			inset: 0;
			background-image: linear-gradient(rgba(243, 243, 237, .018) 1px, transparent 1px), linear-gradient(90deg, rgba(243, 243, 237, .018) 1px, transparent 1px);
			background-size: 72px 72px;
			z-index: 0;
		}

		.page-hero .hero-tag {
			position: relative;
			z-index: 1;
		}

		.page-hero .hero-headline {
			position: relative;
			z-index: 1;
			margin-bottom: 24px;
		}

		.page-hero .hero-desc {
			position: relative;
			z-index: 1;
			max-width: 480px;
		}

		.page-hero .hero-actions {
			position: relative;
			z-index: 1;
		}

		.page-hero .hero-headline {
			font-size: clamp(32px, 6vw, 72px);
		}

		.page-hero--vh50 {
			min-height: 50vh;
			justify-content: center;
		}

		.page-hero--vh60 {
			min-height: 60vh;
			justify-content: center;
		}

		/* Work hub: start content under nav (no full-viewport bottom alignment) */
		.page-hero.page-hero--work {
			min-height: 0;
			justify-content: flex-start;
			padding: 88px 5vw 40px;
			border-bottom: none;
		}

		.page-hero.page-hero--work .hero-grid {
			display: none;
		}

		.page-hero.page-hero--work .hero-desc {
			margin-bottom: 28px;
		}

		.page-hero.page-hero--work .hero-actions {
			margin-bottom: 0;
		}

		/* Compact hero + services (about, SaaS, web, marketing): divider where work.php uses .work-filters */
		.page-hero.page-hero--work + .services {
			border-top: 1px solid var(--border);
		}

		.page-hero.page-hero--work + .portfolio {
			border-top: 1px solid var(--border);
		}

		.contact-wrap {
			display: grid;
			grid-template-columns: 1.2fr .8fr;
			gap: 64px;
			padding: 96px 5vw;
			align-items: start;
		}

		.contact-form {
			display: flex;
			flex-direction: column;
			gap: 20px;
		}

		.contact-form label {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .14em;
			text-transform: uppercase;
			color: var(--g600);
			display: block;
			margin-bottom: -8px;
		}

		.contact-form input,
		.contact-form select,
		.contact-form textarea {
			font-family: var(--mono);
			font-size: 12px;
			letter-spacing: .06em;
			background: transparent;
			border: 1px solid var(--border);
			color: var(--black);
			padding: 14px 16px;
			width: 100%;
		}

		.contact-form input:focus,
		.contact-form select:focus,
		.contact-form textarea:focus {
			outline: none;
			border-color: rgba(243, 243, 237, .4);
		}

		.contact-form input::placeholder,
		.contact-form textarea::placeholder {
			color: var(--g600);
		}

		.contact-form textarea {
			min-height: 120px;
			resize: vertical;
		}

		.contact-form .btn-submit {
			width: 100%;
			margin-top: 8px;
			cursor: pointer;
		}

		.contact-info {
			display: flex;
			flex-direction: column;
			gap: 0;
		}

		.contact-block {
			padding: 32px 0;
			border-bottom: 1px solid var(--border);
		}

		.contact-block:first-child {
			padding-top: 0;
		}

		.contact-block h3 {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .2em;
			text-transform: uppercase;
			color: var(--g600);
			margin-bottom: 16px;
		}

		.contact-block p,
		.contact-block a {
			font-size: 14px;
			color: var(--g600);
			line-height: 1.7;
		}

		.contact-block a {
			color: var(--black);
			text-decoration: none;
			border-bottom: 1px solid var(--g600);
		}

		.contact-block a:hover {
			border-color: var(--black);
		}

		.contact-note {
			font-size: 12px;
			color: var(--g600);
			margin-top: 12px;
		}

		.contact-coords {
			font-family: var(--mono);
			font-size: 11px;
			color: var(--g600);
		}

		.contact-form .text-muted {
			color: var(--g600);
			font-weight: 400;
		}

		.contact-steps {
			list-style: none;
		}

		.contact-steps li {
			font-family: var(--mono);
			font-size: 11px;
			color: var(--g400);
			margin-bottom: 8px;
		}

		.contact-steps li strong {
			color: var(--black);
		}

		.form-success {
			font-family: var(--mono);
			font-size: 13px;
			line-height: 1.6;
			padding: 24px;
			background: rgba(6, 6, 6, .9);
			border: 1px solid rgba(37, 211, 102, .3);
			color: var(--g200);
		}

		.form-success .tt-line {
			color: var(--g200);
			margin-bottom: 6px;
		}

		.form-success .tt-line.ok {
			color: #4ade80;
		}

		.founder-page {
			padding: 96px 5vw;
			border-bottom: 1px solid var(--border)
		}

		.founder-section {
			display: grid;
			grid-template-columns: auto 1fr;
			gap: 64px;
			align-items: start
		}

		.founder-avatar {
			width: 200px;
			height: 200px;
			border: 1px solid var(--border);
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: var(--display);
			font-size: 72px;
			color: var(--g600);
			letter-spacing: .02em;
			flex-shrink: 0
		}

		.founder-info {
			min-width: 0
		}

		.founder-info h3 {
			font-family: var(--display);
			font-size: 32px;
			color: var(--black);
			margin-bottom: 8px;
		}

		.founder-info .role {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--g600);
			margin-bottom: 20px;
		}

		.founder-info p {
			font-size: 14px;
			line-height: 1.9;
			color: var(--g400);
			margin-bottom: 20px;
		}

		.founder-links {
			display: flex;
			flex-wrap: wrap;
			gap: 10px 20px
		}

		.founder-links a {
			font-family: var(--mono);
			font-size: 11px;
			color: var(--g400);
			text-decoration: none;
		}

		.founder-links a:hover {
			color: var(--black);
		}

		.values-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 1px;
			background: rgba(0, 0, 0, .06);
			border-top: 1px solid var(--border);
		}

		.value-card {
			background: var(--white);
			padding: 40px 32px;
		}

		.value-card h4 {
			font-family: var(--display);
			font-size: 24px;
			color: var(--black);
			margin-bottom: 12px;
		}

		.value-card p {
			font-size: 13px;
			line-height: 1.85;
			color: var(--g400);
		}

		.why-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			border-top: 1px solid var(--border);
			border-left: 1px solid var(--border);
		}

		.why-item {
			border-right: 1px solid var(--border);
			border-bottom: 1px solid var(--border);
			padding: 40px 32px;
		}

		.why-item h4 {
			font-family: var(--display);
			font-size: 22px;
			color: var(--black);
			margin-bottom: 10px;
		}

		.why-item p {
			font-size: 13px;
			color: var(--g400);
			line-height: 1.8;
		}

		.marquee-strip {
			overflow: hidden;
		}

		.marquee-strip .marquee-inner {
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			gap: 0 8px;
			width: 100%;
			padding: 16px 5vw;
			box-sizing: border-box;
		}

		.marquee-strip span {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--g600);
			padding: 0 28px;
			white-space: nowrap;
		}

		.marquee-strip span::after {
			content: '·';
			margin-left: 28px;
			color: var(--g700);
		}

		/* ── RESPONSIVE ── */
		@media (min-width: 768px) and (max-width: 1023px) {
			.svc-grid {
				grid-template-columns: repeat(2, 1fr);
			}

			.port-grid,
			.blog-grid {
				grid-template-columns: repeat(2, 1fr);
			}

			.process-steps {
				grid-template-columns: repeat(2, 1fr);
			}

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

		@media (max-width: 1023px) {
			.nav-toggle {
				display: flex;
			}

			.nav-logo,
			.nav-toggle {
				position: relative;
				z-index: 201;
			}

			.nav-overlay {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, .5);
				opacity: 0;
				visibility: hidden;
				pointer-events: none;
				z-index: 198;
				-webkit-tap-highlight-color: transparent;
			}

			nav.nav-open .nav-overlay {
				opacity: 1;
				visibility: visible;
				pointer-events: auto;
			}

			.nav-menu {
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100vh;
				height: 100dvh;
				background: #fff;
				flex-direction: column;
				align-items: stretch;
				justify-content: flex-start;
				padding: 80px 5vw 48px;
				gap: 0;
				transform: translateX(100%);
				visibility: hidden;
				z-index: 199;
				overflow-y: auto;
				overflow-x: hidden;
				-webkit-overflow-scrolling: touch;
				touch-action: pan-y;
			}

			nav.nav-open .nav-menu {
				transform: translateX(0);
				visibility: visible;
			}

			.nav-center {
				flex-direction: column;
				align-items: flex-start;
				gap: 24px;
			}

			.nav-links {
				flex-direction: column;
				gap: 4px;
			}

			.nav-links a {
				display: block;
				padding: 14px 0;
				font-size: 14px;
			}

			#nav-clock,
			#nav-coords {
				display: none;
			}

			.nav-dropdown-menu {
				position: static;
				margin-top: 8px;
				margin-left: 16px;
				opacity: 1;
				visibility: visible;
				border: none;
				padding: 0 0 8px;
				min-width: 0;
			}

			.nav-dropdown:hover .nav-dropdown-menu {
				opacity: 1;
				visibility: visible;
			}

			.nav-dropdown-menu a {
				padding: 10px 0;
				font-size: 12px;
			}

			.nav-right {
				margin-top: 24px;
				padding-top: 24px;
				border-top: 1px solid var(--border);
			}

			.nav-cta {
				min-height: 48px;
				padding: 14px 28px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
			}

			.hero {
				min-height: auto;
				padding: 64px 5vw 56px;
			}

			.hero .hero-tag {
				margin-top: 40px;
			}

			.hero-ticker {
				margin-bottom: 32px;
			}

			.hero-headline {
				margin-bottom: 40px;
			}

			.hero-bottom {
				gap: 28px;
			}

			.hero-actions {
				align-items: flex-start;
			}

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

			.scroll-cue {
				display: none;
			}

			.services {
				padding: 64px 5vw;
			}

			.svc-intro {
				grid-template-columns: 1fr;
				gap: 24px;
				margin-bottom: 48px;
			}

			.svc-sub {
				margin-left: 0;
			}

			.svc-grid {
				grid-template-columns: 1fr;
			}

			.svc-card {
				padding: 32px 24px;
			}

			.svc-name {
				font-size: 28px;
			}

			.case-inner {
				grid-template-columns: 1fr;
				min-height: auto;
			}

			.case-left {
				padding: 48px 24px;
			}

			.case-metrics {
				flex-wrap: wrap;
				gap: 24px;
			}

			.portfolio {
				padding: 64px 5vw;
			}

			.port-header {
				flex-direction: column;
				align-items: flex-start;
				gap: 24px;
				margin-bottom: 40px;
			}

			.port-grid,
			.blog-grid {
				grid-template-columns: 1fr;
			}

			.port-item {
				padding: 28px 24px;
			}

			.stats .stat-wrap {
				grid-template-columns: 1fr;
			}

			.stat-item {
				border-right: none;
				border-bottom: 1px solid var(--border);
				padding: 40px 5vw;
			}

			.stat-item:last-child {
				border-bottom: none;
			}

			.stat-num,
			.stat-display {
				font-size: 48px;
			}

			.stat-num sup {
				font-size: 24px;
			}

			.process {
				padding: 64px 5vw;
			}

			.process-intro {
				grid-template-columns: 1fr;
				gap: 24px;
				margin-bottom: 48px;
			}

			.process-sub {
				margin-left: 0;
			}

			.process-steps {
				grid-template-columns: 1fr;
			}

			.process-step {
				padding: 32px 24px;
			}

			.process-step-num {
				font-size: 56px;
			}

			.process-step-name {
				font-size: 24px;
			}

			.clients-inner {
				flex-direction: column;
				align-items: flex-start;
				gap: 12px;
			}

			.testimonials {
				padding: 64px 5vw;
			}

			.testi-intro {
				grid-template-columns: 1fr;
				gap: 24px;
				margin-bottom: 48px;
			}

			.testi-sub {
				margin-left: 0;
			}

			.testi-grid {
				grid-template-columns: 1fr;
			}

			.testi-card {
				padding: 32px 24px;
			}

			.cta {
				padding: 80px 5vw;
			}

			.cta-title {
				white-space: normal;
				font-size: clamp(36px, 10vw, 72px);
			}

			.cta-actions {
				gap: 12px;
			}

			.btn-primary,
			.btn-ghost {
				min-height: 48px;
				padding: 14px 32px;
				display: inline-flex;
				align-items: center;
				justify-content: center;
			}

			footer {
				flex-direction: column;
				align-items: flex-start;
				padding: 32px 5vw;
			}

			.footer-nav {
				flex-wrap: wrap;
			}

			.page-hero {
				min-height: auto;
				justify-content: flex-start;
				padding: 80px 5vw 48px;
			}

			.contact-wrap {
				grid-template-columns: 1fr;
				gap: 48px;
				padding: 64px 5vw;
			}

			.founder-page {
				padding: 64px 5vw;
			}

			.founder-section {
				grid-template-columns: 1fr;
				gap: 40px;
			}

			.founder-avatar {
				width: 140px;
				height: 140px;
				font-size: 52px;
				justify-self: center;
			}

			.founder-info h3 {
				font-size: 26px;
			}

			.values-grid {
				grid-template-columns: repeat(2, 1fr);
			}

			.value-card {
				padding: 28px 20px;
			}

			.value-card h4 {
				font-size: 20px;
			}

			.why-grid {
				grid-template-columns: repeat(2, 1fr);
			}

			.why-item {
				padding: 28px 20px;
			}

			.why-item h4 {
				font-size: 18px;
			}

			.decode-title {
				white-space: normal;
			}

			.svc-big-title {
				white-space: normal;
			}

			#status-badge {
				bottom: 20px;
				right: 20px;
				padding: 10px 14px;
				font-size: 9px;
			}
		}

		@media (max-width: 767px) {
			nav {
				padding: 0 4vw;
			}

			.hero {
				min-height: auto;
				padding: 56px 4vw 48px;
			}

			.hero-headline {
				font-size: clamp(28px, 8vw, 48px);
				margin-bottom: 32px;
			}

			.eyebrow {
				margin-bottom: 32px;
			}

			.services {
				padding: 48px 4vw;
			}

			.svc-intro {
				margin-bottom: 40px;
			}

			.port-big-title,
			.process-big-title,
			.testi-big-title {
				font-size: clamp(32px, 8vw, 44px);
			}

			.case-title {
				font-size: clamp(28px, 6vw, 40px);
			}

			.case-left {
				padding: 36px 20px;
			}

			.cta-title {
				font-size: clamp(32px, 9vw, 52px);
			}

			.page-hero {
				min-height: auto;
				justify-content: flex-start;
				padding: 72px 4vw 40px;
			}

			.page-hero.page-hero--work {
				padding: 76px 4vw 28px;
			}

			.page-hero .hero-headline {
				font-size: clamp(28px, 7vw, 44px);
			}

			.contact-wrap {
				padding: 48px 4vw;
			}

			.contact-block {
				padding: 24px 0;
			}

			.founder-page {
				padding: 48px 4vw;
			}

			.values-grid {
				grid-template-columns: 1fr;
			}

			.why-grid {
				grid-template-columns: 1fr;
			}
		}

		@media (max-width: 479px) {
			.nav-logo-img {
				height: 36px;
			}

			.hero-ticker .ticker-item {
				font-size: 10px;
				padding: 0 20px;
			}

			.hero-tag {
				font-size: 9px;
			}

			.svc-card {
				padding: 24px 20px;
			}

			.port-item {
				padding: 24px 20px;
			}

			.port-name {
				font-size: 14px;
			}

			.testi-card {
				padding: 24px 20px;
			}

			.testi-qmark {
				font-size: 56px;
			}

			.client-chip {
				padding: 10px 20px;
				font-size: 10px;
			}

			.footer-logo-img {
				height: 40px;
			}

			.about-logo-img {
				height: 120px;
			}
		}

		/* ── WORK DETAIL (website project) ── */
		.work-detail {
			/* Account for fixed 60px nav so lead text never sits underneath it */
			padding: 96px max(5vw, 24px) 96px;
			border-bottom: 1px solid var(--border);
		}

		.work-detail-inner {
			max-width: 1400px;
			margin: 0 auto;
			display: grid;
			grid-template-columns: minmax(220px, 280px) 1fr;
			gap: 48px 64px;
			align-items: start;
		}

		.work-detail-meta {
			position: sticky;
			top: 100px;
			/* Prevent rare left-edge clipping with sticky + display font */
			padding-left: 4px;
			overflow: visible;
		}

		.work-detail-back {
			display: inline-block;
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .08em;
			text-transform: uppercase;
			color: var(--g400);
			text-decoration: none;
			margin-bottom: 24px;
		}

		.work-detail-back:hover {
			color: var(--black);
		}

		.work-detail-eyebrow {
			margin-bottom: 12px;
		}

		.work-detail-title {
			font-family: var(--display);
			font-size: clamp(28px, 4vw, 40px);
			line-height: 1.05;
			letter-spacing: .03em;
			padding-top: 6px;
			margin: 0 0 16px;
			color: var(--black);
			position: relative;
			z-index: 2;
		}

		.work-detail-url a {
			font-family: var(--mono);
			font-size: 12px;
			color: var(--black);
			text-decoration: none;
			border-bottom: 1px solid var(--g600);
		}

		.work-detail-url a:hover {
			border-color: var(--black);
		}

		.work-detail-dl {
			margin: 28px 0 0;
			font-size: 13px;
		}

		.work-detail-dl dt {
			font-family: var(--mono);
			font-size: 9px;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--g600);
			margin-top: 16px;
		}

		.work-detail-dl dt:first-child {
			margin-top: 0;
		}

		.work-detail-dl dd {
			margin: 4px 0 0;
			color: var(--black);
			font-weight: 400;
		}

		.work-detail-actions {
			margin-top: 28px;
		}

		.work-detail-pager {
			margin-top: 32px;
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .08em;
			text-transform: uppercase;
			position: relative;
			z-index: 1;
		}

		.work-detail-pager a {
			color: var(--black);
			text-decoration: none;
			border-bottom: 1px solid var(--g600);
		}

		.work-detail-pager a:hover {
			border-color: var(--black);
		}

		.work-detail-pager-muted {
			color: var(--g400);
		}

		.work-detail-pager-sep {
			margin: 0 8px;
			color: var(--g600);
		}

		.work-detail-lead {
			font-size: 16px;
			line-height: 1.65;
			color: var(--g400);
			margin: 0 0 24px;
			max-width: 52ch;
		}

		.work-detail-body {
			font-size: 15px;
			line-height: 1.75;
			color: var(--black);
			margin-bottom: 40px;
			max-width: 60ch;
		}

		.work-detail-shots {
			display: flex;
			flex-direction: column;
			gap: 32px;
		}

		.work-detail-shot {
			margin: 0;
			border: 1px solid var(--border);
			background: var(--g100);
			box-shadow: 0 24px 60px rgba(0, 0, 0, .08);
		}

		.work-detail-shot img {
			display: block;
			width: 100%;
			height: auto;
			vertical-align: middle;
		}

		.work-detail-browser {
			border: 1px solid var(--border);
			background: var(--white);
			overflow: hidden;
		}

		.work-detail-browser-chrome {
			display: flex;
			gap: 6px;
			padding: 10px 12px;
			background: var(--g100);
			border-bottom: 1px solid var(--border);
		}

		.work-detail-browser-chrome span {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: var(--g600);
			opacity: .35;
		}

		.work-detail-browser-body {
			padding: 48px 24px;
			min-height: 200px;
		}

		.work-detail-placeholder {
			color: var(--g400);
			font-size: 14px;
			margin: 0;
		}

		@media (max-width: 991px) {
			.work-detail-inner {
				grid-template-columns: 1fr;
			}

			.work-detail-meta {
				position: static;
			}
		}

		/* Work hub filters + creative grid */
		.work-filters {
			padding: 28px 5vw 32px;
			border-top: 1px solid var(--border);
			border-bottom: 1px solid var(--border);
		}

		.work-filters-inner {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 10px;
		}

		.work-filters-label {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--g600);
			margin-right: 8px;
		}

		.work-filter-chip {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .08em;
			text-transform: uppercase;
			padding: 8px 14px;
			border: 1px solid var(--border);
			color: var(--g400);
			text-decoration: none;
			background: var(--white);
		}

		.work-filter-chip:hover,
		.work-filter-chip.is-active {
			color: var(--black);
			border-color: var(--black);
		}

		.work-creative-block {
			padding-top: 64px;
		}

		.creative-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1px;
			background: rgba(0, 0, 0, .06);
		}

		.creative-card {
			background: var(--white);
			border: 1px solid var(--border);
			text-decoration: none;
			color: inherit;
			display: flex;
			flex-direction: column;
			min-height: 100%;
		}

		.creative-card:hover {
			background: var(--g100);
		}

		/* 4:5 (e.g. 1080×1350) — design / social feed ratio on Work page */
		.creative-card-img-wrap {
			aspect-ratio: 4 / 5;
			overflow: hidden;
			background: var(--g100);
		}

		.creative-card-img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.creative-card-body {
			padding: 24px 22px;
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 8px;
		}

		.creative-card-cat {
			font-family: var(--mono);
			font-size: 9px;
			letter-spacing: .1em;
			text-transform: uppercase;
			color: var(--g600);
		}

		.creative-card-title {
			font-size: 15px;
			font-weight: 500;
			margin: 0;
			color: var(--black);
		}

		.creative-card-brief {
			font-size: 13px;
			color: var(--g400);
			margin: 0;
			line-height: 1.55;
			flex: 1;
		}

		.creative-card-handle {
			font-family: var(--mono);
			font-size: 12px;
			color: var(--black);
			margin: 0;
		}

		@media (max-width: 991px) {
			.creative-grid {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (max-width: 479px) {
			.creative-grid {
				grid-template-columns: 1fr;
			}
		}

		/* Case studies index */
		.case-studies-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1px;
			background: rgba(0, 0, 0, .06);
		}

		.case-studies-card {
			background: var(--white);
			border: 1px solid var(--border);
			text-decoration: none;
			color: inherit;
			display: flex;
			flex-direction: column;
		}

		.case-studies-card:hover {
			background: var(--g100);
		}

		.case-studies-card-img-wrap {
			aspect-ratio: 16 / 10;
			overflow: hidden;
			background: var(--g100);
		}

		.case-studies-card-img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.case-studies-card-body {
			padding: 28px 24px;
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 8px;
		}

		.case-studies-card-client {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .1em;
			text-transform: uppercase;
			color: var(--g600);
		}

		.case-studies-card-title {
			font-family: var(--display);
			font-size: clamp(22px, 3vw, 28px);
			line-height: 1.1;
			margin: 0;
			color: var(--black);
		}

		.case-studies-card-arrow {
			font-family: var(--mono);
			font-size: 11px;
			color: var(--g400);
			margin-top: auto;
		}

		@media (max-width: 991px) {
			.case-studies-grid {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (max-width: 479px) {
			.case-studies-grid {
				grid-template-columns: 1fr;
			}
		}

		/* Case study detail — align with work hub: no dead band under nav, no reveal flash */
		.case-study-page {
			margin: 0;
			padding: 0;
			border-bottom: 1px solid var(--border);
		}

		.case-study-page--no-hero .case-study-hero {
			display: none;
		}

		.case-study-hero {
			margin: 0;
			padding: 0;
			max-height: 420px;
			overflow: hidden;
			background: var(--g100);
		}

		.case-study-hero-img {
			width: 100%;
			height: 100%;
			max-height: 420px;
			object-fit: cover;
			object-position: center top;
			display: block;
		}

		.case-study-wrap {
			padding: 32px 5vw 96px;
		}

		/* No hero image: single column under fixed nav (~same top rhythm as .page-hero--work) */
		.case-study-page--no-hero .case-study-wrap {
			padding-top: 80px;
		}

		.case-study-inner {
			max-width: 1100px;
			margin: 0 auto;
			display: grid;
			grid-template-columns: minmax(200px, 280px) 1fr;
			gap: 48px 64px;
			align-items: start;
		}

		.case-study-sidebar {
			position: sticky;
			top: 100px;
		}

		.case-study-title {
			font-family: var(--display);
			font-size: clamp(28px, 4vw, 40px);
			line-height: 1.05;
			margin: 0 0 12px;
			color: var(--black);
		}

		.case-study-client {
			font-size: 15px;
			color: var(--g400);
			margin: 0 0 8px;
		}

		.case-study-industry {
			font-family: var(--mono);
			font-size: 11px;
			letter-spacing: .08em;
			text-transform: uppercase;
			color: var(--g600);
			margin: 0;
		}

		.case-study-related {
			margin-top: 20px;
			font-size: 13px;
		}

		.case-study-related a {
			color: var(--black);
			text-decoration: none;
			border-bottom: 1px solid var(--g600);
		}

		.case-study-related a:hover {
			border-color: var(--black);
		}

		.case-study-block {
			margin-bottom: 48px;
		}

		.case-study-h2 {
			font-family: var(--mono);
			font-size: 10px;
			letter-spacing: .12em;
			text-transform: uppercase;
			color: var(--g600);
			margin: 0 0 16px;
		}

		.case-study-prose {
			font-size: 16px;
			line-height: 1.75;
			color: var(--black);
			max-width: 62ch;
		}

		.case-study-metrics {
			font-family: var(--mono);
			font-size: 14px;
			line-height: 1.6;
			padding: 24px;
			border: 1px solid var(--border);
			background: var(--g100);
			max-width: 520px;
		}

		@media (max-width: 991px) {
			.case-study-inner {
				grid-template-columns: 1fr;
			}

			.case-study-sidebar {
				position: static;
			}

			.case-study-wrap {
				padding-top: 28px;
				padding-bottom: 72px;
			}

			.case-study-page--no-hero .case-study-wrap {
				padding-top: 72px;
			}
		}