/*
Theme Name: Mardag Construct
Theme URI: https://www.mardag.ro
Author: MARDAG CONSTRUCT S.R.L.
Description: Tema site-ului MARDAG CONSTRUCT — antreprenor general din 1994. O singură pagină, cu antet fix, lucrarea în execuție, servicii, etapele de lucru, portofoliu cu filtre și panouri de proiect, utilaje și formular de cerere de ofertă.
Version: 2.0.1
Requires at least: 6.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mardag-construct
*/

/* ==========================================================================
   Fonturi (găzduite în temă; reduse la caracterele folosite în română)
   ========================================================================== */
@font-face {
	font-family: "Archivo";
	src: url("assets/fonts/archivo-latin.woff2") format("woff2");
	font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2010-203A, U+20AC, U+2122, U+2190-2193, U+2212;
}
@font-face {
	font-family: "Archivo";
	src: url("assets/fonts/archivo-ro.woff2") format("woff2");
	font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
	unicode-range: U+0102-0103, U+015E-015F, U+0162-0163, U+0218-021B;
}
@font-face {
	font-family: "Inter";
	src: url("assets/fonts/inter-latin.woff2") format("woff2");
	font-weight: 100 900; font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2010-203A, U+20AC, U+2122, U+2190-2193, U+2212;
}
@font-face {
	font-family: "Inter";
	src: url("assets/fonts/inter-ro.woff2") format("woff2");
	font-weight: 100 900; font-display: swap;
	unicode-range: U+0102-0103, U+015E-015F, U+0162-0163, U+0218-021B;
}

/* ==========================================================================
   Variabile
   ========================================================================== */
:root {
	/* Culori: cărbune cu tenta indigoului din siglă, alb cald, gri beton; roșul și indigoul siglei ca accente */
	--ink: #121118;
	--ink-2: #1c1a26;
	--ink-3: #2d2b39;
	--ink-deep: #0c0b11;
	--paper: #f5f3ee;
	--paper-hi: #fbfaf7;
	--paper-2: #ebe7df;
	--concrete: #d6d1c7;
	--stone: #8d897f;
	--text: #1b1a20;
	--text-2: #5a564e;
	--on-ink: #f5f3ee;
	--on-ink-2: #aeaab8;
	--on-indigo-2: #cdc8ec;
	--red: #c8232a;
	--red-2: #a81c22;
	--red-text: #a51c22;
	--indigo: #312972;
	--indigo-2: #3b3283;
	--outline-image: oklch(0 0 0 / 0.1);
	--ring: var(--indigo);

	/* Tipografie */
	--font-display: "Archivo", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--fs-h1: clamp(2.8rem, 1rem + 6.4vw, 7.6rem);
	--fs-h2: clamp(2.3rem, 1.2rem + 4.2vw, 5rem);
	--fs-h3: clamp(1.35rem, 1.05rem + 0.9vw, 1.8rem);
	--wide: 112%;

	/* Spațiere și grilă */
	--wrap: 1320px;
	--gutter: clamp(20px, 4.4vw, 64px);
	--edge: calc((100% - min(100%, var(--wrap) + 2 * var(--gutter))) / 2 + var(--gutter));
	--sec: clamp(88px, 11vw, 168px);
	--header-h: 78px;
	--r-sm: 4px;
	--r-pill: 999px;

	/* Mișcare */
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}
@media (max-width: 760px) { :root { --header-h: 66px; } }

/* ==========================================================================
   Bază
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
	margin: 0; background: var(--paper); color: var(--text);
	font-family: var(--font-text); font-size: 1.0625rem; line-height: 1.6;
	font-feature-settings: "cv11", "ss01"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
h1, h2, h3 {
	margin: 0; font-family: var(--font-display); font-stretch: var(--wide); font-weight: 620;
	line-height: 1; letter-spacing: -0.03em; text-wrap: balance;
}
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.1; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl, dd, figure { margin: 0; }
button { font: inherit; color: inherit; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.lead { font-size: clamp(1.12rem, 1rem + 0.4vw, 1.3rem); line-height: 1.55; max-width: 60ch; }

:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; }
.hero, .about, .process, .machines, .site-footer, .menu-panel, .lightbox, .site-header.is-top { --ring: #fff; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 18px; background: var(--ink); color: #fff; border-radius: var(--r-sm); }
.skip-link:focus { top: 12px; }

/* Înlocuitor pentru o poză care nu a fost încă încărcată */
.ph {
	display: block; width: 100%; height: 100%; min-height: 160px; aspect-ratio: 4 / 3; background-color: var(--paper-2);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 12L12 0' stroke='%23d6d1c7' stroke-width='1'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Etichete de secțiune, butoane
   ========================================================================== */
.label {
	display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px;
	font: 600 0.84rem/1 var(--font-text); letter-spacing: 0.01em; color: var(--text-2);
}
.label::before { content: ""; width: 8px; height: 8px; background: var(--red); flex: none; }
.label--dark { color: var(--on-ink-2); }
.label--live { color: var(--red-text); }
.label--live::before { display: none; }
.live-dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex: none; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--red); animation: ping 1.8s var(--ease-out) 4; }
@keyframes ping { from { transform: scale(1); opacity: 0.6; } to { transform: scale(2.8); opacity: 0; } }

.section-head { max-width: 860px; }
.section-head h2 { margin-bottom: 24px; }
.section-head > p:last-child { color: var(--text-2); font-size: 1.15rem; max-width: 56ch; margin: 0; }
.section-head--light > p:last-child { color: var(--on-ink-2); }
.process .section-head--light > p:last-child { color: var(--on-indigo-2); }

.btn {
	--fill: var(--red-2);
	position: relative; isolation: isolate; overflow: hidden;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 48px; padding: 12px 24px; border: 1px solid transparent; border-radius: var(--r-pill);
	font: 600 1rem/1.1 var(--font-text); text-decoration: none; text-align: center; cursor: pointer;
	transition: color 250ms ease, border-color 250ms ease, background-color 250ms ease, transform 160ms var(--ease-out);
}
.btn::before {
	content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--fill);
	transform: translateY(101%); transition: transform 350ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn--lg { min-height: 56px; padding: 14px 30px; font-size: 1.05rem; }
.btn--sm { min-height: 42px; padding: 8px 18px; font-size: 0.95rem; }
.btn--red { background: var(--red); color: #fff; }
.btn--dark { --fill: var(--red); background: var(--ink); color: var(--paper); }
.btn--line { --fill: var(--paper); border-color: rgb(245 243 238 / 0.55); color: var(--on-ink); background: transparent; }
.btn--line-dark { --fill: var(--ink); border-color: var(--text); color: var(--text); background: transparent; }
@media (hover: hover) and (pointer: fine) {
	.btn:hover::before { transform: translateY(0); }
	.btn--line:hover { color: var(--ink); border-color: var(--paper); }
	.btn--line-dark:hover { color: var(--paper); }
	.btn--red:hover, .btn--dark:hover { color: #fff; }
}

.round-btn {
	display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; padding: 0;
	border: 1px solid currentColor; border-radius: 50%; background: transparent; cursor: pointer; opacity: 0.85;
	transition: background-color 200ms ease, color 200ms ease, opacity 200ms ease, transform 160ms var(--ease-out);
}
.round-btn:active { transform: scale(0.95); }
.round-btn[disabled] { opacity: 0.3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .round-btn:not([disabled]):hover { opacity: 1; background: var(--ink); color: var(--paper); border-color: var(--ink); } .round-btn--light:not([disabled]):hover, .machines .round-btn:not([disabled]):hover { background: var(--paper); color: var(--ink); border-color: var(--paper); } }

/* ==========================================================================
   Antet fix
   ========================================================================== */
.site-header {
	position: fixed; inset: 0 0 auto; z-index: 60; height: var(--header-h);
	color: var(--text); background: rgb(245 243 238 / 0.94); border-bottom: 1px solid var(--concrete);
	-webkit-backdrop-filter: saturate(1.3) blur(12px); backdrop-filter: saturate(1.3) blur(12px);
	transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.site-header.is-top { color: var(--on-ink); background: rgb(12 11 17 / 0.3); border-bottom-color: rgb(255 255 255 / 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
.header-inner { display: flex; align-items: center; gap: 20px; height: 100%; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; margin-right: auto; border-radius: var(--r-sm); }
.brand-tile { display: grid; place-items: center; width: 48px; height: 48px; background: #fff; border-radius: var(--r-sm); flex: none; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06); }
.brand-tile img { width: 38px; height: auto; }
.brand-text { display: grid; line-height: 1.15; }
.brand-name { font: 650 1.06rem/1.1 var(--font-display); font-stretch: 115%; letter-spacing: -0.01em; white-space: nowrap; }
.brand-sub { font-size: 0.78rem; opacity: 0.78; }
.site-nav { position: relative; }
.nav-list { display: flex; gap: 2px; }
.nav-link {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
	font-size: 0.94rem; font-weight: 520; text-decoration: none; color: inherit; border-radius: var(--r-sm);
	opacity: 0.8; transition: opacity 200ms ease;
}
.nav-link:hover, .nav-link.is-active { opacity: 1; }
.nav-link--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.nav-marker {
	position: absolute; left: 0; bottom: 4px; height: 2px; width: 1px; background: var(--red);
	transform-origin: left; transform: translateX(var(--x, 0)) scaleX(var(--w, 0)); opacity: 0;
	transition: transform 450ms var(--ease-in-out), opacity 200ms ease;
}
.nav-marker.is-on { opacity: 1; }
.header-actions { display: flex; align-items: center; gap: 14px; }
.header-phone { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 0.95rem; text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.header-phone:hover { text-decoration: underline; }
.menu-toggle {
	display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
	border: 1px solid currentColor; border-radius: var(--r-pill); background: transparent; color: inherit; font-weight: 600; cursor: pointer;
}
.menu-toggle-icon { display: grid; gap: 5px; width: 18px; }
.menu-toggle-icon span { height: 1.5px; background: currentColor; transition: transform 250ms var(--ease-out); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.scroll-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red); transform-origin: left; transform: scaleX(var(--p, 0)); }
.site-header.is-top .scroll-progress { opacity: 0; }

@media (max-width: 1280px) { .header-phone { display: none; } }
@media (max-width: 1100px) {
	.site-nav { display: none; }
	.menu-toggle { display: inline-flex; }
}
@media (max-width: 560px) {
	.header-cta { display: none; }
	.brand-sub { display: none; }
	.brand-tile { width: 42px; height: 42px; }
	.brand-tile img { width: 33px; }
}

/* Meniul pentru telefon */
.menu-panel {
	position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
	padding: calc(var(--header-h) + 24px) var(--gutter) max(32px, env(safe-area-inset-bottom));
	background: var(--ink); color: var(--on-ink); overflow-y: auto;
}
.menu-panel[hidden] { display: none; }
.menu-nav a {
	display: block; padding: 10px 0; border-bottom: 1px solid var(--ink-3);
	font: 600 clamp(1.8rem, 7vw, 2.6rem)/1.15 var(--font-display); font-stretch: var(--wide); letter-spacing: -0.02em; text-decoration: none;
}
.menu-contact { display: grid; gap: 14px; justify-items: start; color: var(--on-ink-2); }
.menu-contact a:not(.btn) { color: inherit; }
.menu-phone { font: 650 1.6rem/1.1 var(--font-display); font-stretch: 115%; color: var(--on-ink) !important; text-decoration: none; }
.menu-open .site-header { color: var(--on-ink); background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; --ring: #fff; }
.menu-open .header-cta { display: none; }
.menu-open { overflow: hidden; }
.js .menu-panel.is-opening { animation: menu-in 450ms var(--ease-drawer); }
.js .menu-panel.is-opening .menu-nav li { animation: rise 500ms var(--ease-out) both; animation-delay: calc(80ms + var(--i, 0) * 45ms); }
@keyframes menu-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Deschidere
   ========================================================================== */
.hero { position: relative; display: grid; grid-template-rows: minmax(64svh, 1fr) auto; min-height: 100svh; background: var(--ink); color: var(--on-ink); }
.hero-photo { position: relative; overflow: hidden; background: var(--ink-2); }
.hero-photo-inner { position: absolute; inset: -8% 0 0; will-change: transform; }
.hero-img, .hero-photo-inner .ph { width: 100%; height: 100%; object-fit: cover; }
.hero-shade { position: absolute; inset: 0; background: rgb(12 11 17 / 0.5); }
.hero-kicker, .hero-caption {
	position: absolute; z-index: 2; margin: 0; display: inline-flex; align-items: center; gap: 10px;
	padding: 7px 12px; background: rgb(12 11 17 / 0.72); font-size: 0.84rem; font-weight: 550; color: var(--on-ink);
}
.hero-kicker { left: var(--edge); bottom: calc(var(--fs-h1) * 1.02 + 22px); }
.hero-kicker .dot { width: 7px; height: 7px; background: var(--red); }
.hero-caption { right: var(--edge); top: calc(var(--header-h) + 18px); color: var(--on-ink-2); font-weight: 500; font-size: 0.8rem; }
.hero-scroll {
	position: absolute; z-index: 2; right: var(--edge); bottom: 22px; display: inline-flex; align-items: center; gap: 12px;
	min-height: 44px; padding: 0 12px; background: rgb(12 11 17 / 0.72); font-size: 0.84rem; font-weight: 550; color: var(--on-ink); text-decoration: none;
}
.hero-scroll-line { position: relative; width: 1px; height: 44px; background: rgb(245 243 238 / 0.35); overflow: hidden; }
.hero-scroll-line::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 16px; background: var(--on-ink); animation: scroll-cue 1.8s var(--ease-in-out) 1.6s 3 both; }
@keyframes scroll-cue { from { transform: translateY(-16px); } to { transform: translateY(44px); } }

/* Notițe tehnice pe fotografie (poziționate de site.js după încadrarea pozei) */
.hero-notes { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: none; }
.js .hero-notes.is-placed { display: block; }
.note.is-off { display: none; }
@media (max-width: 1099px) { .js .hero-notes.is-placed { display: none; } }
.note { position: absolute; left: 0; top: 0; }
.note-dot { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid #fff; background: rgb(200 35 42 / 0.9); }
.note-line { position: absolute; left: 0; top: 0; height: 1px; width: var(--len, 0); background: rgb(255 255 255 / 0.85); transform-origin: 0 50%; transform: rotate(var(--ang, 0deg)) scaleX(var(--draw, 1)); transition: transform 700ms var(--ease-out); }
.note-label {
	position: absolute; left: var(--lx, 0); top: var(--ly, 0); transform: translate(0, -50%); white-space: nowrap;
	padding: 6px 10px; background: rgb(12 11 17 / 0.8); color: #fff; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em;
	border-left: 2px solid var(--red); transition: opacity 400ms ease;
}

.hero-body { position: relative; z-index: 2; display: flow-root; padding-bottom: clamp(36px, 5vw, 64px); }
.hero-title { margin-top: calc(var(--fs-h1) * -1.02); font-size: var(--fs-h1); line-height: 0.98; letter-spacing: -0.045em; font-weight: 640; font-stretch: 114%; color: #fff; }
.hero-title .ln { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero-title .ln > span { display: block; }
.hero-lower { display: grid; gap: 40px; margin-top: clamp(28px, 3.4vw, 48px); }
.hero-lead { max-width: 46ch; color: var(--on-ink-2); font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-facts { display: grid; gap: 28px; align-content: start; }
.dim { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; font-size: 0.85rem; font-weight: 550; color: var(--on-ink-2); font-variant-numeric: tabular-nums; }
.dim-rule { position: relative; display: grid; place-items: center; height: 26px; border-inline: 1px solid var(--on-ink-2); }
.dim-rule::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--on-ink-2); transform: scaleX(var(--dim, 1)); transition: transform 1200ms var(--ease-out); }
.dim-val { position: relative; padding: 0 14px; background: var(--ink); color: var(--on-ink); font: 600 0.95rem/1 var(--font-display); font-stretch: 108%; white-space: nowrap; }
.dim-val b { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink-3); }
.facts > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 18px 16px 0 0; }
.facts > div + div { padding-left: 16px; border-left: 1px solid var(--ink-3); }
.facts dd { font: 700 clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem)/1 var(--font-display); font-stretch: 120%; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.facts dd small { font-size: 0.5em; font-weight: 600; color: var(--on-ink-2); letter-spacing: 0; }
.facts dt { font-size: 0.84rem; line-height: 1.4; color: var(--on-ink-2); max-width: 24ch; }
@media (min-width: 1180px) { .hero-lower { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 64px; } }
@media (max-width: 640px) {
	.hero { grid-template-rows: minmax(48svh, auto) auto; }
	.hero-caption { display: none; }
	.hero-scroll { display: none; }
	.facts { grid-template-columns: 1fr 1fr; }
	.facts > div:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--ink-3); margin-top: 18px; }
	.dim-val { padding: 0 8px; font-size: 0.85rem; }
}

/* Intrarea animată a deschiderii (doar cu JavaScript și fără „mișcare redusă”) */
.js .hero:not(.is-ready) .hero-photo-inner { clip-path: inset(14% 10% 14% 10%); }
.js .hero:not(.is-ready) .hero-img { transform: scale(1.12); }
.js .hero .hero-photo-inner { transition: clip-path 1400ms var(--ease-in-out); }
.js .hero .hero-img { transition: transform 1800ms var(--ease-out); }
.js .hero:not(.is-ready) .hero-title .ln > span { transform: translateY(105%); }
.js .hero .hero-title .ln > span { transition: transform 1000ms var(--ease-out); transition-delay: calc(500ms + var(--i, 0) * 110ms); }
.js .hero:not(.is-ready) :is(.hero-lower, .hero-kicker, .hero-caption, .hero-scroll) { opacity: 0; transform: translateY(14px); }
.js .hero :is(.hero-lower, .hero-kicker, .hero-caption, .hero-scroll) { transition: opacity 700ms ease 900ms, transform 900ms var(--ease-out) 900ms; }
.js .hero:not(.is-ready) .dim-rule::before { transform: scaleX(0); }
.js .hero .dim-rule::before { transition-delay: 1100ms; }
.js .hero:not(.notes-in) .note-line { transform: rotate(var(--ang, 0deg)) scaleX(0); }
.js .hero:not(.notes-in) :is(.note-label, .note-dot) { opacity: 0; }
.note-dot { transition: opacity 300ms ease; }
.note:nth-child(2) .note-line, .note:nth-child(2) .note-label { transition-delay: 150ms; }
.note:nth-child(3) .note-line, .note:nth-child(3) .note-label { transition-delay: 300ms; }

/* ==========================================================================
   Titluri care apar cuvânt cu cuvânt
   ========================================================================== */
[data-count] { display: inline-block; }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.split .w > span { display: inline-block; }
.js .split.is-split:not(.is-in) .w > span { transform: translateY(105%); }
.js .split.is-split .w > span { transition: transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms); }

/* ==========================================================================
   În execuție
   ========================================================================== */
.live { padding-block: var(--sec); background: var(--paper); }
.live-head { max-width: 980px; }
.live-head h2 { margin-bottom: 24px; }
.live-intro { font-size: 1.2rem; color: var(--text-2); max-width: 54ch; margin: 0; }
.live-grid { display: grid; gap: 48px; margin-top: clamp(48px, 6vw, 88px); }
.live-frames { display: none; }
.live-frames { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.live-frame { position: absolute; inset: 0; transition: clip-path 900ms var(--ease-in-out); }
.live-frame img, .live-frame .ph { width: 100%; height: 100%; object-fit: cover; }
.js .live-frame.is-after { clip-path: inset(0 0 0 100%); }
.live-frame figcaption { position: absolute; left: 16px; bottom: 16px; padding: 7px 12px; background: var(--ink); color: var(--on-ink); font-size: 0.85rem; font-weight: 600; }
.live-frames::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--outline-image); pointer-events: none; }
.live-diagram { margin-top: 28px; }
.live-diagram svg { width: 100%; height: auto; overflow: visible; }
.live-diagram figcaption { margin-top: 8px; font-size: 0.82rem; color: var(--text-2); }
.soil-hatch { stroke: var(--concrete); stroke-width: 1.2; }
.ground { stroke: var(--text); stroke-width: 1.4; }
.axes line { stroke: var(--concrete); stroke-width: 1; stroke-dasharray: 4 5; }
.axes circle { fill: var(--paper); stroke: var(--stone); stroke-width: 1; }
.axes text, .lvl text, .tags text { font-family: var(--font-text); font-size: 11px; font-weight: 600; fill: var(--text-2); }
.axes text { text-anchor: middle; }
.lvl path { fill: var(--text); }
.tags .lead { stroke: var(--stone); stroke-width: 1; fill: none; }
.tags text { font-size: 12.5px; transition: fill 400ms ease; }
.ly { opacity: 0.13; transition: opacity 600ms ease; }
.ly-1 .cut { fill: var(--paper); stroke: var(--text); stroke-width: 1.3; stroke-dasharray: 6 4; transition: stroke 400ms ease; }
.ly-2 rect, .ly-3 .slab { fill: var(--text); transition: fill 400ms ease; }
.ly-3 .rebar { stroke: var(--text); stroke-width: 1.2; fill: none; stroke-dasharray: 3 3; transition: stroke 400ms ease; }
[data-stage="0"] .ly-1, [data-stage="1"] :is(.ly-1, .ly-2), [data-stage="2"] .ly { opacity: 1; }
[data-stage="0"] .ly-1 .cut { stroke: var(--red); }
[data-stage="1"] .ly-2 rect { fill: var(--red); }
[data-stage="2"] .ly-3 .slab { fill: var(--red); }
[data-stage="2"] .ly-3 .rebar { stroke: var(--red); }
[data-stage="0"] .tag-1, [data-stage="1"] .tag-2, [data-stage="2"] .tag-3 { fill: var(--red-text); }

.live-steps { display: grid; gap: 56px; counter-reset: etapa; }
.live-step-media { margin-bottom: 20px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-2); }
.live-step-media img { width: 100%; height: 100%; object-fit: cover; }
.live-step-state { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 0.88rem; font-weight: 600; color: var(--text-2); }
.state-mark { position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--text); flex: none; }
.live-step--done .state-mark::after { content: ""; position: absolute; left: 5px; top: 5.5px; width: 7px; height: 4px; border: solid #fff; border-width: 0 0 1.6px 1.6px; transform: rotate(-45deg); }
.live-step--now .state-mark { background: var(--red); }
.live-step--now .state-mark::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--red); animation: ping 1.8s var(--ease-out) 4; }
.live-step--now .live-step-state { color: var(--red-text); }
.live-step h3 { font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); margin-bottom: 14px; }
.live-step p:last-child { color: var(--text-2); max-width: 44ch; margin: 0; font-size: 1.08rem; }
.live-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(48px, 6vw, 80px); padding-top: 32px; border-top: 1px solid var(--concrete); }
.live-foot p { margin: 0; color: var(--text-2); font-size: 0.95rem; }

@media (min-width: 960px) {
	.live-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
	.live-visual { position: sticky; top: calc(var(--header-h) + 28px); }
	.live-frames { display: block; }
	.live-steps { gap: 0; }
	.live-step { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; padding-block: 32px; }
	.live-step:first-child { min-height: 52vh; justify-content: flex-start; padding-top: 0; }
	.live-step-media { display: none; }
	.js .live-step { opacity: 0.32; transition: opacity 500ms ease; }
	.js .live-step.is-active { opacity: 1; }
}

/* ==========================================================================
   Despre noi
   ========================================================================== */
.about { padding-block: var(--sec); background: var(--ink); color: var(--on-ink); }
.about-top { display: grid; gap: 40px; }
.about-years { display: flex; align-items: flex-end; gap: 18px; margin: 0; }
.about-num {
	font: 700 clamp(8rem, 4rem + 17vw, 21rem)/0.78 var(--font-display); font-stretch: 125%; letter-spacing: -0.06em;
	color: transparent; -webkit-text-stroke: 1.5px var(--on-ink); font-variant-numeric: tabular-nums;
}
.about-num-label { padding-bottom: 0.5em; font: 600 clamp(1rem, 0.9rem + 0.4vw, 1.25rem)/1.2 var(--font-display); font-stretch: 108%; color: var(--on-ink-2); }
.about-text h2 { margin-bottom: 28px; font-size: clamp(2.2rem, 1.2rem + 3.2vw, 4.2rem); }
.about-text p { color: var(--on-ink-2); max-width: 58ch; }
.about-text .lead { color: var(--on-ink); }
@media (min-width: 1000px) { .about-top { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 64px; align-items: end; } }

.rules-block { margin-top: clamp(72px, 9vw, 128px); }
.rules-title { font-size: 1rem; font-family: var(--font-text); font-weight: 600; letter-spacing: 0; color: var(--on-ink-2); margin-bottom: 20px; }
.rules { display: grid; border-top: 1px solid var(--ink-3); }
.rule { display: grid; gap: 8px; padding: 28px 0; border-bottom: 1px solid var(--ink-3); }
.rule strong { position: relative; padding-left: 26px; font: 600 clamp(1.3rem, 1rem + 1.1vw, 2rem)/1.15 var(--font-display); font-stretch: 110%; letter-spacing: -0.02em; text-wrap: balance; }
.rule strong::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 10px; height: 10px; background: var(--red); }
.rule span { padding-left: 26px; color: var(--on-ink-2); }
@media (min-width: 860px) {
	.rules { grid-template-columns: 1fr 1fr; column-gap: 56px; }
	.rule { padding: 36px 0; }
}

.map-block { display: grid; gap: 40px; margin-top: clamp(72px, 9vw, 128px); align-items: center; }
.map-text h3 { margin-bottom: 18px; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.map-text p { color: var(--on-ink-2); max-width: 46ch; }
.city-list { display: grid; margin-top: 24px; border-top: 1px solid var(--ink-3); max-width: 420px; }
.city-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ink-3); font-weight: 550; transition: color 200ms ease; cursor: default; }
.city-list li em { font-style: normal; font-weight: 500; font-size: 0.85rem; color: var(--on-ink-2); margin-left: auto; }
.city-mark { width: 9px; height: 9px; border-radius: 50%; background: var(--on-ink-2); transition: background-color 200ms ease, transform 200ms var(--ease-out); }
.city-mark--hq { border-radius: 0; background: var(--red); }
.city-list li.is-hl { color: #fff; }
.city-list li.is-hl .city-mark { background: var(--red); transform: scale(1.4); }
.map-figure svg { width: 100%; height: auto; }
.map-shape { fill: var(--ink-2); stroke: #4d4a5c; stroke-width: 1.4; stroke-linejoin: round; }
.map-city text { font-family: var(--font-text); font-size: 17px; font-weight: 550; fill: var(--on-ink-2); transition: fill 200ms ease; }
.map-dot { fill: var(--on-ink); transition: transform 250ms var(--ease-out), fill 200ms ease; transform-box: fill-box; transform-origin: center; }
.map-city--hq .map-dot { fill: var(--red); }
.map-city--hq text { fill: var(--on-ink); font-weight: 650; }
.map-ring { fill: none; stroke: var(--red); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: ring 2.4s var(--ease-out) 3; }
@keyframes ring { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(2); opacity: 0; } }
.map-city.is-hl .map-dot { fill: var(--red); transform: scale(1.5); }
.map-city.is-hl text { fill: #fff; }
.js .map-city { opacity: 0; transition: opacity 500ms ease; transition-delay: calc(var(--i, 0) * 90ms); }
.js .map-block.is-in .map-city { opacity: 1; }
@media (min-width: 960px) { .map-block { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; } }

/* ==========================================================================
   Servicii
   ========================================================================== */
.services { padding-block: var(--sec); background: var(--paper); }
.svc { margin-top: clamp(48px, 6vw, 80px); }
.svc-tabs { display: none; }
.svc-panels { display: grid; gap: 64px; }
.svc-panel { display: grid; gap: 28px; }
.svc-media { position: relative; overflow: hidden; background: var(--paper-2); }
.svc-media img, .svc-media .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.svc-media::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--outline-image); pointer-events: none; }
.svc-icon { display: block; width: 44px; height: 44px; color: var(--indigo); margin-bottom: 18px; }
.svc-body h3 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); margin-bottom: 18px; }
.svc-body > p { color: var(--text-2); font-size: 1.1rem; max-width: 46ch; }
.svc-items { margin: 24px 0; border-top: 1px solid var(--concrete); }
.svc-items li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--concrete); font-weight: 550; }
.svc-items li::before { content: ""; width: 14px; height: 1.5px; background: var(--red); flex: none; }
.svc-ref { display: grid; gap: 4px; margin: 0 0 28px; font-size: 0.95rem; }
.svc-ref span { color: var(--text-2); font-size: 0.85rem; }
.svc-ref a { font-weight: 600; color: var(--indigo); }
@media (min-width: 760px) {
	.svc-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
	.svc-media img, .svc-media .ph { aspect-ratio: 4 / 5; }
}
@media (min-width: 1080px) {
	.js .svc.is-tabs { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 64px; align-items: start; }
	.js .svc.is-tabs .svc-tabs { display: flex; flex-direction: column; border-top: 1px solid var(--concrete); position: sticky; top: calc(var(--header-h) + 28px); }
	.js .svc.is-tabs .svc-panels { display: block; }
	.js .svc.is-tabs .svc-panel[hidden] { display: none; }
	.js .svc.is-tabs .svc-icon { display: none; }
	.js .svc.is-tabs .svc-panel.is-entering .svc-media { animation: wipe 700ms var(--ease-in-out); }
	.js .svc.is-tabs .svc-panel.is-entering .svc-body { animation: fade-up 500ms var(--ease-out) 120ms both; }
}
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.svc-tab {
	position: relative; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 14px 4px; border: 0; border-bottom: 1px solid var(--concrete);
	background: none; text-align: left; cursor: pointer; color: var(--text-2);
	font: 600 1.15rem/1.15 var(--font-display); font-stretch: 108%; letter-spacing: -0.01em; transition: color 200ms ease;
}
.svc-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 450ms var(--ease-out); }
.svc-tab[aria-selected="true"] { color: var(--text); }
.svc-tab[aria-selected="true"]::after { transform: scaleX(1); }
.svc-tab-icon { width: 34px; height: 34px; color: var(--stone); flex: none; transition: color 200ms ease; }
.svc-tab[aria-selected="true"] .svc-tab-icon { color: var(--red); }
@media (hover: hover) and (pointer: fine) { .svc-tab:hover { color: var(--text); } }

/* ==========================================================================
   Etape
   ========================================================================== */
.process { padding-block: var(--sec); background: var(--indigo); color: #fff; }
.steps { position: relative; display: grid; margin-top: clamp(56px, 7vw, 96px); --progress: 1; }
.steps::before, .steps::after { content: ""; position: absolute; background: rgb(255 255 255 / 0.22); }
.steps::after { background: #fff; transform-origin: 0 0; }
.step { position: relative; padding: 0 0 40px 76px; }
.step-node {
	position: absolute; left: 0; top: 0; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
	border: 1px solid rgb(255 255 255 / 0.4); background: var(--indigo); font-size: 0.85rem; font-weight: 650; font-variant-numeric: tabular-nums;
	transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}
.step.is-on .step-node { background: #fff; color: var(--indigo); border-color: #fff; }
.step:last-child.is-on .step-node { background: var(--red); color: #fff; border-color: var(--red); }
.step h3 { font-size: 1.3rem; margin: 10px 0 10px; }
.step p { margin: 0; color: var(--on-indigo-2); font-size: 0.98rem; max-width: 30ch; }
.steps::before, .steps::after { left: 24px; top: 24px; bottom: 64px; width: 1px; }
.steps::after { transform: scaleY(var(--progress)); }
@media (min-width: 1100px) {
	.steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.step { padding: 76px 24px 0 0; }
	.step h3 { margin-top: 0; }
	.steps::before, .steps::after { left: 0; right: 0; top: 24px; bottom: auto; width: auto; height: 1px; }
	.steps::after { transform: scaleX(var(--progress)); }
}
.js .steps { --progress: 0; }
.js .step { transition: opacity 400ms ease; }

/* ==========================================================================
   Proiecte
   ========================================================================== */
.projects { padding-block: var(--sec); background: var(--paper-hi); }
.projects-head { display: grid; gap: 56px; }
@media (min-width: 1100px) { .projects-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 80px; align-items: end; } }

/* Graficul cu suprafețe */
.chart { padding: 28px 0 0; border-top: 1px solid var(--concrete); }
.chart-title { margin-bottom: 18px; font-size: 0.92rem; font-weight: 600; color: var(--text); }
.chart-bars { display: grid; gap: 16px; }
.chart-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; }
.chart-label { grid-column: 1; grid-row: 1; font-size: 0.9rem; color: var(--text-2); }
.chart-label em { font-style: normal; color: var(--red-text); font-weight: 600; margin-left: 6px; }
.chart-val { grid-column: 2; grid-row: 1 / span 2; align-self: end; font: 650 1.05rem/1 var(--font-display); font-stretch: 112%; font-variant-numeric: tabular-nums; color: var(--text); min-width: 4.2ch; text-align: right; }
.chart-track { grid-column: 1; grid-row: 2; position: relative; height: 14px; border-left: 1px solid var(--stone); }
.chart-fill {
	position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * 100%); background: var(--indigo); border-radius: 0 4px 4px 0;
	transform-origin: left; transition: transform 1000ms var(--ease-out), opacity 200ms ease; transition-delay: calc(var(--i, 0) * 90ms);
}
.chart-row--live .chart-fill {
	background-color: var(--indigo);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M-2 2l4-4M0 8l8-8M6 10l4-4' stroke='%23f5f3ee' stroke-width='1.6'/%3E%3C/svg%3E");
}
.js .chart:not(.is-in) .chart-fill { transform: scaleX(0); }
@media (hover: hover) and (pointer: fine) { .chart-bars:hover .chart-row:not(:hover) .chart-fill { opacity: 0.35; } }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px); }
.filter {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border: 1px solid var(--concrete); border-radius: var(--r-pill);
	background: transparent; color: var(--text); font-weight: 600; font-size: 0.95rem; cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.filter span { font-size: 0.8rem; color: var(--text-2); font-variant-numeric: tabular-nums; transition: color 200ms ease; }
.filter:active { transform: scale(0.97); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.filter[aria-pressed="true"] span { color: var(--on-ink-2); }
@media (hover: hover) and (pointer: fine) { .filter:not([aria-pressed="true"]):hover { border-color: var(--text); } }

.proj-list { display: grid; gap: clamp(72px, 9vw, 140px); }
.proj { display: grid; gap: 28px; }
.proj[hidden] { display: none; }
.proj-media { position: relative; }
.proj-link { position: relative; display: block; overflow: hidden; background: var(--paper-2); }
.proj-link::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--outline-image); pointer-events: none; }
.proj-link img, .proj-link .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1100ms var(--ease-out); }
.proj--lead .proj-link img, .proj--lead .proj-link .ph { aspect-ratio: 3 / 2; }
.proj-link:focus-visible { outline-offset: 4px; }
.credit { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 5px 10px; background: rgb(12 11 17 / 0.78); color: #fff; font-size: 0.78rem; font-weight: 500; }
.proj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 0.88rem; font-weight: 600; }
.proj-cat { color: var(--text-2); }
.status { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border: 1px solid var(--concrete); border-radius: var(--r-pill); color: var(--text); }
.status--live { border-color: var(--red); background: var(--red); color: #fff; }
.status--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.proj-body h3 { font-size: clamp(1.7rem, 1.1rem + 1.9vw, 2.8rem); line-height: 1.02; }
.proj-sub { margin: 10px 0 0; font-weight: 600; color: var(--text-2); font-size: 1.05rem; }
.proj-fig { display: grid; gap: 6px; margin: 26px 0 0; }
.proj-fig-n { font: 700 clamp(2.6rem, 1.6rem + 3vw, 4.4rem)/0.9 var(--font-display); font-stretch: 122%; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.proj-fig-n small { margin-left: 0.15em; font-size: 0.42em; font-weight: 650; letter-spacing: 0; color: var(--red-text); }
.proj-fig-d { color: var(--text-2); font-size: 0.95rem; }
.proj-works { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 26px 0 30px; padding-top: 18px; border-top: 1px solid var(--concrete); }
.proj-works li { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; }
.proj-works li::before { content: ""; width: 5px; height: 5px; background: var(--stone); }
.link-more {
	position: relative; display: inline-flex; align-items: baseline; gap: 10px; min-height: 44px; padding: 10px 0; align-items: center;
	font-weight: 650; text-decoration: none; color: var(--text);
}
.link-more::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1.5px; background: var(--text); transform-origin: right; transition: transform 450ms var(--ease-out); }
.link-more span { font-weight: 500; color: var(--text-2); font-size: 0.9rem; }
@media (hover: hover) and (pointer: fine) {
	.proj-link:hover img { transform: scale(1.04); }
	.link-more:hover::after { transform: scaleX(0.35); }
}
@media (min-width: 960px) {
	.proj { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 32px; align-items: center; }
	.proj-media { grid-column: 1 / span 7; }
	.proj-body { grid-column: 9 / span 4; }
	.proj--lead .proj-media { grid-column: 1 / span 8; }
	.proj--flip .proj-media { grid-column: 6 / span 7; order: 2; }
	.proj--flip .proj-body { grid-column: 1 / span 4; order: 1; }
}
.js .proj-link.rv:not(.is-in) { clip-path: inset(100% 0 0 0); }
.js .proj-link.rv { transition: clip-path 1100ms var(--ease-in-out); }
.js .proj-link.rv:not(.is-in) img { transform: scale(1.18); }
::view-transition-old(*), ::view-transition-new(*) { animation-duration: 380ms; animation-timing-function: var(--ease-out); }

/* Eticheta care urmărește cursorul pe fotografiile proiectelor (doar mouse) */
.cursor-tag {
	position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; display: none;
	padding: 10px 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--paper); font-size: 0.88rem; font-weight: 600;
	transform: translate(var(--cx, -100px), var(--cy, -100px)) translate(-50%, -50%) scale(var(--cs, 0.6)); opacity: var(--co, 0);
	transition: opacity 200ms ease, transform 160ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .cursor-tag { display: block; } }

/* ==========================================================================
   Utilaje
   ========================================================================== */
.machines { padding-block: var(--sec); background: var(--ink); color: var(--on-ink); overflow: hidden; }
.fleet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: clamp(48px, 6vw, 80px); background: var(--ink-3); border-block: 1px solid var(--ink-3); }
.machine { padding: 28px 20px 30px; background: var(--ink); }
.machine-icon { display: block; color: var(--red); margin-bottom: 26px; transition: transform 400ms var(--ease-out); }
.machine-icon svg { width: 100%; max-width: 132px; height: auto; }
.machine h3 { font-size: 1.08rem; line-height: 1.2; font-stretch: 106%; letter-spacing: -0.01em; margin-bottom: 6px; }
.machine p { margin: 0; color: var(--on-ink-2); font-size: 0.92rem; }
@media (hover: hover) and (pointer: fine) { .machine:hover .machine-icon { transform: translateX(6px); } }
@media (min-width: 720px) { .fleet { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .fleet { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.strip { margin-top: clamp(72px, 9vw, 128px); }
.strip-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.strip-title { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem); }
.strip-nav { display: flex; gap: 10px; }
.strip-track {
	display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
	padding: 0 var(--edge) 8px; scroll-padding-inline: var(--edge); scrollbar-width: none; cursor: grab;
}
.strip-track::-webkit-scrollbar { display: none; }
.strip-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.strip-track.is-dragging a { pointer-events: none; }
.strip-item { flex: none; scroll-snap-align: start; }
.strip-link { position: relative; display: block; overflow: hidden; background: var(--ink-2); }
.strip-link img, .strip-link .ph { height: clamp(300px, 52vh, 540px); width: auto; max-width: none; object-fit: cover; transition: transform 900ms var(--ease-out); -webkit-user-drag: none; user-select: none; }
.strip-link .ph { width: clamp(240px, 30vw, 400px); }
.strip-link::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.1); pointer-events: none; }
.strip-cap { margin: 12px 0 0; max-width: 34ch; font-size: 0.88rem; color: var(--on-ink-2); }
@media (hover: hover) and (pointer: fine) { .strip-link:hover img { transform: scale(1.03); } }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact { padding-block: var(--sec); background: var(--paper); }
.contact-grid { display: grid; gap: 64px; }
@media (min-width: 1060px) { .contact-grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 88px; align-items: start; } }
.contact-info h2 { margin-bottom: 24px; }
.contact-info .lead { color: var(--text-2); }
.how { display: grid; gap: 0; margin: 36px 0; border-top: 1px solid var(--concrete); counter-reset: pas; }
.how li { counter-increment: pas; display: grid; grid-template-columns: 40px 1fr; gap: 2px 14px; padding: 16px 0; border-bottom: 1px solid var(--concrete); }
.how li::before { content: counter(pas); grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--text); border-radius: 50%; font-size: 0.82rem; font-weight: 650; }
.how b { font-weight: 650; }
.how span { color: var(--text-2); font-size: 0.95rem; }
.contact-phone {
	display: inline-block; margin: 8px 0 28px; font: 700 clamp(2.1rem, 1.4rem + 2.6vw, 3.6rem)/1 var(--font-display); font-stretch: 115%;
	letter-spacing: -0.035em; color: var(--text); text-decoration: none; font-variant-numeric: tabular-nums;
	border-bottom: 2px solid var(--red); padding-bottom: 6px;
}
.contact-phone:hover { color: var(--red-text); }
.contact-list { display: grid; border-top: 1px solid var(--concrete); }
.contact-list > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--concrete); }
.contact-list dt { color: var(--text-2); }
.contact-list dd { font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 520px) { .contact-list > div { grid-template-columns: 1fr; gap: 0; } }

.contact-card { position: relative; padding: clamp(24px, 4vw, 52px); background: #fff; border: 1px solid var(--concrete); }
.form { display: grid; gap: 22px; }
.field-tip { margin: 0; padding: 0; border: 0; min-width: 0; }
.field-tip legend { padding: 0; margin-bottom: 12px; font-weight: 650; color: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chip span {
	display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--concrete); border-radius: var(--r-pill);
	font-size: 0.93rem; font-weight: 550; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--ring); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .chip input:not(:checked):hover + span { border-color: var(--text); } }
.field { display: grid; gap: 7px; }
.field-row { display: grid; gap: 22px; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field label { font-weight: 650; font-size: 0.95rem; }
.req { color: var(--red-text); }
.field input, .field textarea {
	width: 100%; min-height: 52px; padding: 13px 15px; border: 1px solid #b4afa4; border-radius: var(--r-sm);
	background: var(--paper-hi); color: var(--text); font: inherit; transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.field textarea { min-height: 150px; resize: vertical; }
.field textarea::placeholder { color: #6e6a61; }
.field input:hover, .field textarea:hover { border-color: var(--text-2); }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--indigo); background: #fff; box-shadow: 0 0 0 3px rgb(49 41 114 / 0.25); }
.field [aria-invalid="true"] { border-color: var(--red); background: #fff7f7; }
.field-error { margin: 0; font-size: 0.88rem; font-weight: 550; color: var(--red-text); }
.field-error:empty { display: none; }
.field-hint { margin: -10px 0 0; font-size: 0.88rem; color: var(--text-2); }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 4px; }
.form-privacy { margin: 0; flex: 1 1 220px; font-size: 0.85rem; color: var(--text-2); }
.spinner { display: none; width: 18px; height: 18px; border: 2px solid rgb(255 255 255 / 0.35); border-top-color: #fff; border-radius: 50%; animation: spin 700ms linear infinite; }
.is-sending .spinner { display: inline-block; }
.is-sending [data-submit] { pointer-events: none; opacity: 0.85; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-status:empty { display: none; }
.form-status, .form-notice { margin: 0; padding: 14px 16px; border-left: 3px solid var(--red); background: #fbecec; color: #7d1418; font-weight: 550; font-size: 0.95rem; }
.form-notice--ok { border-left-color: #2d6a43; background: #e8f2eb; color: #1d4a2e; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-done { display: grid; justify-items: start; gap: 6px; }
.form-done[hidden] { display: none; }
.form-done:focus { outline: none; }
.form-done h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); margin: 18px 0 8px; }
.form-done p { color: var(--text-2); max-width: 44ch; }
.form-done .btn { margin-top: 14px; }
.form-done-mark { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); }
.form-done-mark::after { content: ""; position: absolute; left: 19px; top: 18px; width: 18px; height: 10px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }

/* ==========================================================================
   Subsol
   ========================================================================== */
.site-footer { padding: clamp(80px, 10vw, 140px) 0 28px; background: var(--ink-deep); color: var(--on-ink); }
.footer-cta { display: grid; gap: 24px; align-items: end; padding-bottom: clamp(56px, 7vw, 96px); border-bottom: 1px solid var(--ink-3); }
.footer-cta-title { margin: 0; font: 600 clamp(1.4rem, 1rem + 1.4vw, 2.2rem)/1.1 var(--font-display); font-stretch: 110%; color: var(--on-ink-2); }
.footer-phone {
	font: 700 min(clamp(2.4rem, 1rem + 6.4vw, 7.6rem), 8.6vw)/0.95 var(--font-display); font-stretch: 118%; letter-spacing: -0.045em;
	color: var(--on-ink); text-decoration: none; font-variant-numeric: tabular-nums; white-space: nowrap; transition: color 250ms ease;
}
.footer-phone:hover { color: #ff6b63; }
@media (min-width: 1000px) { .footer-cta { grid-template-columns: 1fr auto; } .footer-cta-title { grid-column: 1 / -1; } }
.footer-grid { display: grid; gap: 40px; padding: 56px 0; }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.brand-tile--lg { width: 72px; height: 72px; margin-bottom: 18px; }
.brand-tile--lg img { width: 58px; }
.footer-brand p { color: var(--on-ink-2); line-height: 1.7; margin: 0; }
.footer-nav ul { display: grid; gap: 2px; }
.footer-nav a, .footer-contact a { display: inline-flex; align-items: center; min-height: 40px; color: var(--on-ink); text-decoration: none; }
.footer-nav a:hover, .footer-contact a:hover { text-decoration: underline; }
.footer-contact { display: grid; align-content: start; }
.footer-contact span { color: var(--on-ink-2); padding: 8px 0; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 32px; padding-top: 24px; border-top: 1px solid var(--ink-3); font-size: 0.85rem; color: var(--on-ink-2); }
.footer-bottom p { margin: 0; }
.to-top { margin-left: auto; color: var(--on-ink); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }

/* ==========================================================================
   Panoul de proiect
   ========================================================================== */
.case {
	width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
	background: var(--paper); color: var(--text); overflow-y: auto; overscroll-behavior: contain;
}
.case::backdrop { background: rgb(12 11 17 / 0.6); }
.case[open] { animation: case-in 480ms var(--ease-drawer); }
@keyframes case-in { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
.case-inner { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter) 24px; }
.case-bar {
	position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px;
	margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); background: rgb(245 243 238 / 0.95); border-bottom: 1px solid var(--concrete);
	-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.case-crumb { margin: 0; font-weight: 600; font-size: 0.9rem; color: var(--text-2); }
.case-close { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid var(--text); border-radius: var(--r-pill); background: transparent; font-weight: 600; cursor: pointer; transition: background-color 200ms ease, color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .case-close:hover { background: var(--ink); color: var(--paper); } }
.case-head { padding: clamp(28px, 3.6vw, 48px) 0 clamp(20px, 2.4vw, 32px); }
.case-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 0.88rem; font-weight: 600; color: var(--text-2); }
.case-title { font-size: clamp(2rem, 1.2rem + 2.8vw, 3.8rem); max-width: 22ch; }
.case-sub { margin: 14px 0 0; font-weight: 600; font-size: 1.15rem; color: var(--text-2); }
.case-sub:empty { display: none; }
.case-gallery { margin: 0 calc(var(--gutter) * -1); }
.case-track { position: relative; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 6px; scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
.case-track li { flex: none; scroll-snap-align: start; }
.case-track figure { margin: 0; }
.case-track img { height: min(56vh, 600px); width: auto; max-width: 86vw; object-fit: cover; background: var(--paper-2); }
.case-track figcaption { margin-top: 10px; font-size: 0.9rem; color: var(--text-2); max-width: 60ch; }
.case-track figcaption b { font-weight: 600; color: var(--text); }
.case-nav { display: flex; align-items: center; gap: 14px; padding: 16px var(--gutter) 0; }
.case-count { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 0.92rem; min-width: 4ch; text-align: center; }
.case-info { display: grid; gap: 40px; padding: clamp(40px, 5vw, 72px) 0; }
@media (min-width: 960px) { .case-info { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; } }
.case-fig .proj-fig { margin: 0; }
.case-desc { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.55; max-width: 58ch; }
.case-spec { display: grid; margin: 28px 0 32px; border-top: 1px solid var(--concrete); }
.case-spec > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--concrete); }
.case-spec > div[hidden] { display: none; }
.case-spec dt { color: var(--text-2); }
.case-spec dd { font-weight: 600; }
@media (max-width: 560px) { .case-spec > div { grid-template-columns: 1fr; gap: 2px; } }
.case-next { border-top: 1px solid var(--concrete); }
.case-next button {
	display: grid; gap: 6px; width: 100%; padding: 32px 0; border: 0; background: none; text-align: left; cursor: pointer;
}
.case-next span { font-size: 0.88rem; font-weight: 600; color: var(--text-2); }
.case-next b { font: 620 clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem)/1.05 var(--font-display); font-stretch: var(--wide); letter-spacing: -0.03em; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .case-next button:hover b { color: var(--red-text); } }

/* ==========================================================================
   Galeria foto (dialog)
   ========================================================================== */
.lightbox { width: min(1240px, 100vw - 24px); max-height: calc(100dvh - 24px); padding: 0; border: 0; background: var(--ink); color: var(--on-ink); }
.lightbox::backdrop { background: rgb(8 7 12 / 0.86); }
.lightbox[open] { animation: fade-in 250ms var(--ease-out); }
@keyframes fade-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
.lightbox-inner { display: grid; grid-template-rows: auto 1fr auto; max-height: calc(100dvh - 24px); }
.lightbox-head { display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 22px; }
.lightbox-title { margin-right: auto; font-size: 1.02rem; font-family: var(--font-text); font-weight: 600; letter-spacing: 0; }
.lightbox-count { white-space: nowrap; font-size: 0.9rem; color: var(--on-ink-2); font-variant-numeric: tabular-nums; }
.lightbox-figure { display: grid; place-items: center; min-height: 0; padding: 0 12px; }
.lightbox-figure img { max-height: calc(100dvh - 200px); width: auto; max-width: 100%; object-fit: contain; }
.lightbox-figure figcaption { padding: 12px 0 0; color: var(--on-ink-2); text-align: center; font-size: 0.95rem; }
.lightbox-nav { display: flex; justify-content: center; gap: 12px; padding: 14px 12px 18px; }
.round-btn--light { color: var(--on-ink); }

/* ==========================================================================
   Pagini simple (404, alte pagini)
   ========================================================================== */
.page-simple { padding: calc(var(--header-h) + 80px) 0 120px; min-height: 70vh; }
.entry { max-width: 760px; }
.entry h1 { font-size: clamp(2.4rem, 1.4rem + 4vw, 4.6rem); margin-bottom: 24px; }
.entry p { color: var(--text-2); font-size: 1.1rem; }

/* ==========================================================================
   Mișcare redusă: fără deplasări, doar schimbări scurte de opacitate
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
	.js .hero .hero-photo-inner, .js .hero:not(.is-ready) .hero-photo-inner, .js .hero .hero-img { clip-path: none; transform: none; transition: none; }
	.js .hero .hero-title .ln > span, .js .split.is-split .w > span { transform: none !important; transition: none; }
	.js .hero :is(.hero-lower, .hero-kicker, .hero-caption, .hero-scroll) { transform: none !important; transition: opacity 200ms ease; }
	.js .proj-link.rv, .js .proj-link.rv:not(.is-in), .js .proj-link.rv img { clip-path: none; transform: none; transition: none; }
	.js .chart:not(.is-in) .chart-fill { transform: none; }
	.live-frame, .note-line, .dim-rule::before, .chart-fill, .btn::before, .proj-link img, .strip-link img, .machine-icon { transition: none !important; }
	.btn:active, .filter:active, .round-btn:active { transform: none; }
}