/* ===== TechnikAL — design tokens ===== */
:root {
	--color-bg: #111111;
	--color-bg-dark: #0c0c0c;
	--color-offwhite: #f3f1ec;
	--color-text: #f2f2f0;
	--color-text-dark: #161616;
	--color-text-muted: #9a9a95;
	--color-border: #2c2c2c;
	--color-yellow: #f2c14e;
	--font-heading: 'Neue Haas Grotesk', 'Helvetica Neue', Arial, sans-serif;
	--font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
	--wrap-width: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.shell { max-width: var(--wrap-width); margin: 0 auto; padding: 0 24px; }
svg { flex-shrink: 0; }

h1, h2, h3 { font-family: var(--font-heading); font-weight: 500; line-height: 1.15; margin: 0 0 16px; }
h1 { font-size: clamp(2.2rem, 4vw, 3.6rem); color: #fff; }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.4rem); }
h3 { font-size: 1.15rem; margin: 0 0 8px; }
p { margin: 0 0 16px; color: var(--color-text-muted); }
.section-label { display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--color-yellow); margin-bottom: 10px; }
.section-label span { width: 18px; height: 1px; background: var(--color-yellow); display: inline-block; }

/* Buttons / links */
.button { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 2px; font-size: .95rem; font-weight: 500; }
.button--yellow { background: var(--color-yellow); color: #161616; }
.button--yellow:hover { opacity: .88; }
.button--ghost { border: 1px solid rgba(255,255,255,.3); color: #fff; }
.button--ghost:hover { border-color: var(--color-yellow); color: var(--color-yellow); }
.arrow-link { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text); border-bottom: 1px solid var(--color-border); padding-bottom: 4px; }
.arrow-link:hover { color: var(--color-yellow); border-color: var(--color-yellow); }
.section-dark .arrow-link, .section-dark p, .section-dark h2, .section-dark h3 { color: #fff; }

/* ===== Header ===== */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(17,17,17,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-border); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; gap: 24px; }
.brand img { height: 32px; width: auto; }
.desktop-nav { display: flex; gap: 28px; flex: 1; justify-content: center; }
.desktop-nav a { font-size: .92rem; color: var(--color-text-muted); }
.desktop-nav a:hover { color: #fff; }
.header-actions { display: flex; align-items: center; gap: 20px; }
.language-link { font-size: .85rem; color: var(--color-text-muted); }
.header-cta { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; color: #fff; border: 1px solid rgba(255,255,255,.3); padding: 10px 18px; border-radius: 2px; }
.header-cta:hover { border-color: var(--color-yellow); color: var(--color-yellow); }
.mobile-menu { display: none; }
.mobile-menu summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; color: #fff; font-size: .85rem; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu__panel { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: 20px 24px; }
.mobile-menu__panel nav { display: flex; flex-direction: column; gap: 16px; }
.mobile-language { display: block; margin-top: 16px; color: var(--color-text-muted); font-size: .85rem; }

/* ===== Hero ===== */
.home-hero { position: relative; min-height: 88vh; display: flex; align-items: flex-end; }
.home-hero__media { position: absolute; inset: 0; overflow: hidden; }
.home-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.home-hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(17,17,17,.15), rgba(17,17,17,.95)); }
.home-hero__content { position: relative; display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 70px; gap: 32px; flex-wrap: wrap; }
.home-hero__copy p { color: #e4e4e0; max-width: 600px; }
.hero-actions { display: flex; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.hero-project-tag { display: flex; align-items: center; gap: 16px; color: #fff; border-left: 1px solid rgba(255,255,255,.3); padding-left: 16px; }
.hero-project-tag span { color: var(--color-yellow); font-family: var(--font-heading); }
.hero-project-tag small { display: block; color: var(--color-text-muted); font-size: .8rem; }

/* ===== Metrics ===== */
.metrics-strip { border-bottom: 1px solid var(--color-border); background: var(--color-bg-dark); }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 40px 24px; gap: 24px; }
.metrics-grid > div { border-left: 1px solid var(--color-border); padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.metrics-grid strong { font-family: var(--font-heading); font-size: 2.2rem; color: var(--color-yellow); }
.metrics-grid span { color: var(--color-text-muted); font-size: .88rem; }

/* ===== Generic section spacing ===== */
.section-space { padding: 90px 0; }
.section-dark { background: var(--color-bg-dark); }
.section-offwhite { background: var(--color-offwhite); color: var(--color-text-dark); }
.section-offwhite p, .section-offwhite h2, .section-offwhite h3 { color: var(--color-text-dark); }
.section-heading--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 48px; flex-wrap: wrap; }
.section-heading--split p:not(.section-label) { max-width: 380px; }

/* Statement */
.statement-grid { max-width: 900px; }
.statement-copy h2 { max-width: 720px; }

/* Capabilities */
.capability-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border); }
.capability-list article { background: var(--color-bg-dark); padding: 32px; position: relative; }
.capability-list span { color: var(--color-yellow); font-family: var(--font-heading); font-size: .9rem; }
.capability-list svg { position: absolute; top: 28px; right: 28px; color: var(--color-text-muted); }
.section-tail-link { margin-top: 40px; }

/* Systems */
.systems-preview__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.image-frame { position: relative; overflow: hidden; border-radius: 2px; }
.image-frame img { width: 100%; height: 100%; object-fit: cover; }
.image-caption { position: absolute; bottom: 16px; left: 16px; font-size: .75rem; color: #fff; background: rgba(0,0,0,.55); padding: 4px 10px; letter-spacing: .05em; }
.text-list { list-style: none; padding: 0; margin: 24px 0; }
.text-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--color-text); }
.text-list svg { color: var(--color-yellow); }

/* Projects */
.project-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; }
.project-card--feature { position: relative; display: block; min-height: 420px; overflow: hidden; border-radius: 2px; }
.project-card--feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-card__overlay { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.75), transparent 60%); }
.project-card__meta { position: absolute; bottom: 24px; left: 24px; right: 24px; display: flex; align-items: flex-end; justify-content: space-between; color: #fff; }
.project-card__meta span { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.7); display: block; margin-bottom: 4px; }
.project-card__meta h3 { margin: 0; color: #fff; }
.project-card--type { background: #1c1c1c; padding: 28px; border-radius: 2px; min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end; }
.project-card--type.project-card--yellow { background: var(--color-yellow); color: #161616; }
.project-card--type.project-card--yellow h3, .project-card--type.project-card--yellow p, .project-card--type.project-card--yellow span { color: #161616; }
.project-number { font-family: var(--font-heading); color: var(--color-yellow); font-size: 1.1rem; margin-bottom: 16px; }
.project-card--yellow .project-number { color: #161616; opacity: .6; }

/* Production */
.factory-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.mini-metrics { display: flex; gap: 32px; margin: 24px 0; }
.mini-metrics strong { color: var(--color-yellow); font-family: var(--font-heading); }
.factory-image { aspect-ratio: 4/3; }

/* Insight */
.insight-preview__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; }
.insight-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--color-text-muted); }

/* Contact band */
.contact-band { padding: 90px 0; border-top: 1px solid var(--color-border); }
.contact-band__inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.contact-band__inner h2 { max-width: 520px; margin: 0; }

/* ===== Page hero (generic pages) ===== */
.page-hero { padding: 150px 0 60px; }
.page-hero.project-hero { position: relative; min-height: 55vh; display: flex; align-items: flex-end; padding: 0 0 60px; }
.page-hero.project-hero .hero-media { position: absolute; inset: 0; }
.page-hero.project-hero .hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.page-hero.project-hero .shell { position: relative; }
.page-content { max-width: 820px; padding: 0 0 40px; }
.article-content img { margin-bottom: 32px; border-radius: 2px; }

/* Archives */
.projects-grid, .insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-bottom: 60px; }
.project-card { display: block; }
.project-thumb { position: relative; aspect-ratio: 4/5; background: #1c1c1c; overflow: hidden; margin-bottom: 16px; border-radius: 2px; }
.project-thumb img { width: 100%; height: 100%; object-fit: cover; }
.project-meta { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-text-muted); margin-bottom: 6px; }
.insight-card { background: #1c1c1c; border: 1px solid var(--color-border); padding: 20px; display: block; border-radius: 2px; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; padding-bottom: 40px; }
.contact-info p { color: var(--color-text); }
.contact-form-wrap input, .contact-form-wrap textarea, .contact-form-wrap select {
	width: 100%; padding: 12px 14px; margin-bottom: 16px; background: #1c1c1c;
	border: 1px solid var(--color-border); color: var(--color-text); font-family: var(--font-body);
}

/* ===== Footer ===== */
.site-footer { background: var(--color-bg-dark); padding-top: 70px; border-top: 1px solid var(--color-border); }
.footer-main { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--color-border); }
.footer-brand p { max-width: 260px; }
.footer-label { text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--color-text-muted); margin-bottom: 16px; }
.footer-column { display: flex; flex-direction: column; gap: 10px; }
.footer-column a { color: var(--color-text-muted); font-size: .9rem; }
.footer-column a:hover { color: var(--color-yellow); }
.footer-contact a, .footer-contact p { display: flex; align-items: center; gap: 8px; color: var(--color-text-muted); font-size: .9rem; }
.footer-contact svg { flex-shrink: 0; margin-top: 2px; }
.footer-bottom { display: flex; justify-content: space-between; padding: 24px; font-size: .8rem; color: var(--color-text-muted); flex-wrap: wrap; gap: 10px; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
	.desktop-nav, .header-actions .language-link { display: none; }
	.mobile-menu { display: block; }
	.metrics-grid, .capability-list, .project-grid, .projects-grid, .insights-grid { grid-template-columns: repeat(2, 1fr); }
	.systems-preview__grid, .factory-grid, .contact-grid, .footer-main, .insight-preview__grid, .home-hero__content { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.metrics-grid, .capability-list, .project-grid, .projects-grid, .insights-grid { grid-template-columns: 1fr; }
}

/* ===== Capabilities page ===== */
.page-hero.grid-field { padding: 160px 0 90px; position: relative; border-bottom: 1px solid var(--color-border); }
.page-hero__grid { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: flex-end; }
.page-hero__index { font-family: var(--font-heading); font-size: clamp(4rem, 10vw, 8rem); color: var(--color-border); line-height: 1; }
.page-hero__copy { max-width: 640px; }
.page-hero__marker { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--color-text-muted); font-size: .75rem; letter-spacing: .1em; }
.page-hero__marker svg { color: var(--color-yellow); }

.process-map { border-bottom: 1px solid var(--color-border); }
.process-steps { display: grid; grid-template-columns: repeat(6, 1fr); list-style: none; padding: 0; margin: 0; gap: 1px; background: var(--color-border); counter-reset: none; }
.process-steps li { background: var(--color-bg); padding: 24px 16px; display: flex; flex-direction: column; gap: 8px; }
.process-steps span { color: var(--color-yellow); font-family: var(--font-heading); font-size: .85rem; }
.process-steps strong { font-family: var(--font-heading); font-weight: 500; }

.capability-detail__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
.capability-detail__list article { padding-top: 8px; }
.capability-detail__number { font-family: var(--font-heading); font-size: .85rem; color: var(--color-text-muted); margin-bottom: 12px; }
.capability-detail__list svg { color: var(--color-text-dark); margin-bottom: 16px; }

.proof-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: flex-start; }
.proof-grid h2 { max-width: 420px; }
.proof-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.proof-points svg { color: var(--color-yellow); margin-bottom: 16px; }
.proof-points h3 { color: #fff; }

@media (max-width: 900px) {
	.page-hero__grid { grid-template-columns: 1fr; }
	.page-hero__marker { flex-direction: row; }
	.process-steps { grid-template-columns: repeat(3, 1fr); }
	.capability-detail__list { grid-template-columns: repeat(2, 1fr); }
	.proof-grid, .proof-points { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.process-steps, .capability-detail__list { grid-template-columns: 1fr; }
}

/* ===== Production page ===== */
.production-intro__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.production-intro__grid h2 { max-width: 380px; }
.production-facts { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 24px; }
.production-facts span { display: flex; flex-direction: column; gap: 4px; color: var(--color-text-muted); font-size: .85rem; }
.production-facts strong { font-family: var(--font-heading); color: var(--color-yellow); font-size: 1.2rem; }

.production-flow__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.production-flow__grid article { background: #fff; padding: 28px; border-radius: 2px; }
.production-flow__grid span { display: block; color: var(--color-text-muted); font-family: var(--font-heading); font-size: .85rem; margin-bottom: 8px; }
.production-flow__grid svg { color: var(--color-text-dark); margin-bottom: 14px; }
.production-flow__grid h3 { font-size: 1.05rem; }

.software-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: flex-start; }
.software-grid h2, .software-grid p { color: #fff; }
.software-grid p { color: var(--color-text-muted); }
.criteria-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.criteria-list li { display: flex; gap: 16px; color: var(--color-text); padding-bottom: 16px; border-bottom: 1px solid var(--color-border); }
.criteria-list span { color: var(--color-yellow); font-family: var(--font-heading); font-size: .85rem; flex-shrink: 0; }

.detail-image-section { position: relative; }
.detail-image-section img { width: 100%; height: 60vh; object-fit: cover; }
.detail-image-section__caption { position: absolute; bottom: 32px; left: 0; right: 0; display: flex; justify-content: space-between; color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; flex-wrap: wrap; gap: 8px; }

@media (max-width: 900px) {
	.production-intro__grid, .software-grid { grid-template-columns: 1fr; }
	.production-flow__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.production-flow__grid { grid-template-columns: 1fr; }
}

/* ===== Systems page ===== */
.systems-catalogue__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border); }
.system-card { background: var(--color-bg); padding: 32px; }
.system-card--dark { background: #000; }
.system-card span { display: block; color: var(--color-yellow); font-family: var(--font-heading); font-size: .85rem; margin-bottom: 14px; }
.system-card svg { color: var(--color-text-muted); margin-bottom: 14px; }

.extended-systems__grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
.extended-systems__grid > * { display: block; padding: 32px; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.extended-systems__grid span { display: block; color: var(--color-text-muted); font-family: var(--font-heading); font-size: .8rem; margin-bottom: 10px; }
.extended-systems__grid h3 { font-size: 1.05rem; }
.extended-systems__grid a:hover { background: #fff; }
.extended-systems__grid a:hover h3 { color: var(--color-yellow); }

.system-reference__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; }
.system-reference__grid h2 { max-width: 380px; }
.system-reference__list { display: flex; flex-direction: column; }
.system-reference__list article { display: flex; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--color-border); }
.system-reference__list span { color: var(--color-yellow); font-family: var(--font-heading); font-size: .85rem; flex-shrink: 0; }
.system-reference__list h3 { font-size: 1rem; margin-bottom: 4px; }
.system-reference__list p { font-size: .85rem; margin: 0; }

.performance-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.performance-grid h2, .performance-grid p { color: #fff; }
.performance-grid p { color: var(--color-text-muted); }

@media (max-width: 900px) {
	.systems-catalogue__grid, .extended-systems__grid { grid-template-columns: repeat(2, 1fr); }
	.system-reference__grid, .performance-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.systems-catalogue__grid, .extended-systems__grid { grid-template-columns: 1fr; }
}

/* ===== Projects page ===== */
.featured-case__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.featured-case__image { display: block; position: relative; aspect-ratio: 4/3; overflow: hidden; border-radius: 2px; }
.project-type { color: var(--color-text-muted); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; }

.project-index__list { display: flex; flex-direction: column; }
.project-index__row { display: grid; grid-template-columns: 60px 1fr 1fr 24px; align-items: center; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--color-border); }
.project-index__number { color: var(--color-yellow); font-family: var(--font-heading); font-size: .95rem; }
.project-index__row h2 { margin: 0; font-size: 1.2rem; }
.project-index__row p { margin: 0; }
.project-index__row svg { color: var(--color-text-dark); justify-self: end; }
.project-index__row:hover h2 { color: var(--color-yellow); }

.legacy-projects__grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-border); }
.legacy-projects__grid li { background: var(--color-bg); padding: 16px 20px; display: flex; gap: 14px; align-items: baseline; }
.legacy-projects__grid span { color: var(--color-yellow); font-family: var(--font-heading); font-size: .8rem; flex-shrink: 0; }
.legacy-projects__grid strong { font-weight: 400; font-size: .92rem; }

.sectors-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.sectors-grid h2 { color: #fff; max-width: 400px; }
.sectors-grid ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sectors-grid li { display: flex; gap: 12px; color: #fff; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.sectors-grid span { color: var(--color-yellow); font-family: var(--font-heading); font-size: .85rem; }

@media (max-width: 900px) {
	.featured-case__grid, .sectors-grid { grid-template-columns: 1fr; }
	.legacy-projects__grid { grid-template-columns: repeat(2, 1fr); }
	.project-index__row { grid-template-columns: 40px 1fr; }
	.project-index__row p:nth-child(3), .project-index__row svg { display: none; }
}
@media (max-width: 560px) {
	.legacy-projects__grid { grid-template-columns: 1fr; }
}

/* ===== Insights page ===== */
.article-feature__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: center; }
.article-feature__visual { position: relative; aspect-ratio: 4/3; background: var(--color-bg-dark); display: flex; flex-direction: column; justify-content: space-between; padding: 24px; border-radius: 2px; }
.technical-word { font-family: var(--font-heading); font-size: 2.4rem; color: var(--color-border); letter-spacing: .05em; }
.technical-lines { flex: 1; background: repeating-linear-gradient(180deg, transparent, transparent 18px, var(--color-border) 19px); }
.article-feature__visual > span:last-child { font-size: .75rem; color: var(--color-text-muted); letter-spacing: .06em; }
.article-date { font-size: .78rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }

.topics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.topics-grid h2 { max-width: 380px; }
.topics-grid ul { list-style: none; padding: 0; margin: 0; }
.topics-grid li { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--color-border); color: var(--color-text-dark); }
.topics-grid span { color: var(--color-yellow); font-family: var(--font-heading); font-size: .85rem; }

.resource-callout__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.resource-callout__inner h2 { max-width: 380px; }

@media (max-width: 900px) {
	.article-feature__grid, .topics-grid, .resource-callout__inner { grid-template-columns: 1fr; }
}