/* ─────────────────────────────────────────────────────
   Design: alb cald · griuri fine · tipografie editorială
   ───────────────────────────────────────────────────── */
:root {
    --bg:          #ffffff;
    --surface:     #ffffff;
    --surface-2:   #ffffff;
    --text:        #1b1916;
    --muted:       #6a6560;
    --subtle:      #a09b97;
    --border:      #e5e1db;
    --border-2:    #cdc8c1;
    --accent:      #a07040;
    --shadow-sm:   0 1px 4px rgba(0,0,0,0.05), 0 2px 10px rgba(0,0,0,0.04);
    --shadow-md:   0 3px 16px rgba(0,0,0,0.07), 0 8px 28px rgba(0,0,0,0.05);
    --shadow-lg:   0 6px 28px rgba(0,0,0,0.1),  0 20px 48px rgba(0,0,0,0.07);
}

*, *::before, *::after { box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: "Aptos", "Segoe UI", system-ui, -apple-system, sans-serif;
    line-height: 1.72;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.is-preview-open {
    overflow: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Layout ────────────────────────────────────────── */
.page-shell {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
    padding-bottom: 28px;
}

.site-main {
    display: flex;
    flex-direction: column;
    padding-top: 0;
}

/* ─── Header ────────────────────────────────────────── */
.site-header-shell {
    position: sticky;
    top: 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    z-index: 2000;
    margin-bottom: 0;
}

.welcome-banner {
    --welcome-progress: 1;
    padding: 10px clamp(24px, 5vw, 64px);
    background: var(--text);
    color: rgba(255,255,255,0.7);
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    line-height: 1.5;
    opacity: var(--welcome-progress);
    pointer-events: none;
    transition: opacity 140ms linear;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px clamp(24px, 5vw, 64px);
    background: rgba(255,255,255,0.97);
    border-bottom: 1px solid var(--border);
    transition: box-shadow 200ms ease;
}

.site-header.is-scrolled {
    box-shadow: 0 2px 14px rgba(0,0,0,0.07);
}

.brand { display: inline-flex; align-items: center; }
.brand-logo { display: block; width: min(82px, 14vw); height: auto; }

.site-nav { display: flex; flex-wrap: wrap; gap: 2px; }
.site-nav a {
    padding: 5px 13px;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--subtle);
    transition: color 150ms;
}
.site-nav a:hover,
.site-nav a.is-active { color: var(--text); }

/* ─── Hero ──────────────────────────────────────────── */
.site-hero {
    order: -2;
    padding: clamp(56px, 9vw, 104px) 0 clamp(48px, 7vw, 84px);
    display: grid;
    justify-items: center;
    gap: 22px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.site-logo {
    width: min(380px, 80vw);
    height: auto;
}

.hero-tagline {
    margin: 0;
    font-size: clamp(0.74rem, 0.9vw, 0.82rem);
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--subtle);
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 6px;
}

/* ─── Social ────────────────────────────────────────── */
.social-links { display: flex; align-items: center; gap: 10px; }

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--subtle);
    transition: color 160ms, border-color 160ms, transform 160ms;
}
.social-link:hover { color: var(--text); border-color: var(--border-2); transform: translateY(-1px); }
.social-link svg { width: 18px; height: 18px; }
.social-link-facebook { fill: currentColor; stroke: none; }
.social-link svg.social-link-instagram { fill: none; stroke: currentColor; stroke-width: 1.9; }
.social-link-dot { fill: currentColor; stroke: none; }

/* ─── Phone CTA ─────────────────────────────────────── */
.cta-phone {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 212px;
    min-height: 54px;
    padding: 0 28px;
    background: var(--text);
    color: #fff;
    transition: background 160ms, transform 160ms;
}
.cta-phone:hover { background: #2d2a25; transform: translateY(-1px); }
.cta-phone-label {
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.6;
}
.cta-phone-number { font-size: 1rem; font-weight: 600; letter-spacing: 0.05em; }

.cta-portfolio {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 212px;
    min-height: 54px;
    padding: 0 28px;
    border: 1px solid var(--text);
    background: #fff;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: background 160ms, color 160ms, transform 160ms;
}

.cta-portfolio:hover {
    background: var(--text);
    color: #fff;
    transform: translateY(-1px);
}

/* ─── Section labels ────────────────────────────────── */
.hero-label,
.card-index {
    display: block;
    margin: 0 0 8px;
    font-size: 0.69rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent);
}

/* ─── Map ───────────────────────────────────────────── */
.map-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: clamp(36px, 5vw, 56px) clamp(24px, 5vw, 64px);
    border-bottom: 1px solid var(--border);
}

.map-section-inner {
    display: grid;
    grid-template-columns: minmax(260px, 0.68fr) 1fr;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    width: min(100%, 1120px);
    margin: 0 auto;
}

.map-info-card {
    padding: clamp(28px, 4vw, 52px);
    background: var(--surface);
    display: grid;
    align-content: center;
    gap: 22px;
}

.map-info-title {
    margin: 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: clamp(1.6rem, 2.6vw, 2.3rem);
    font-weight: 400;
    line-height: 1.15;
    color: var(--text);
}

.map-info-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.map-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    background: var(--accent);
    color: #fff;
    font-size: 0.87rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: background 160ms, transform 160ms;
}
.map-btn-primary:hover { background: #8a5f33; transform: translateY(-1px); }

.map-btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 11px 18px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.87rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: border-color 160ms, background 160ms, transform 160ms;
}
.map-btn-secondary:hover { border-color: var(--border-2); background: var(--surface-2); transform: translateY(-1px); }

.map-info-note {
    margin: 0;
    font-size: 0.81rem;
    color: var(--subtle);
    line-height: 1.62;
    max-width: 36ch;
}

.map-visual {
    position: relative;
    min-height: clamp(300px, 36vw, 480px);
    overflow: hidden;
    background: #e8e6e2;
}

.map-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: rgba(255,255,255,0.93);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    pointer-events: none;
}

.map-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.map-visual-cta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 32px 24px 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.68) 0%, transparent 100%);
    color: #fff;
    display: grid;
    gap: 4px;
    transition: background 200ms;
}
.map-visual-cta:hover {
    background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, transparent 100%);
}

.map-visual-title {
    margin: 0;
    font-weight: 700;
    font-size: 0.96rem;
    line-height: 1.3;
}

.map-visual-sub {
    margin: 0;
    font-size: 0.81rem;
    opacity: 0.8;
    line-height: 1.5;
}

/* ─── News / Video player ────────────────────────────── */
.news-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: clamp(36px, 5vw, 64px) 0 clamp(28px, 4vw, 52px);
    background: #18160f;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.news-inner {
    width: min(100%, 1200px);
    margin: 0 auto;
    padding-inline: clamp(20px, 5vw, 60px);
}

.news-header {
    margin-bottom: clamp(20px, 2.5vw, 32px);
}
.news-header .hero-label { color: var(--accent); }

.news-title {
    margin: 6px 0 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: clamp(1.7rem, 2.8vw, 2.6rem);
    font-weight: 400;
    line-height: 1.1;
    color: #f0ebe3;
}

/* Player layout */
.vp {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: clamp(16px, 2.5vw, 36px);
    align-items: start;
    margin-bottom: clamp(16px, 2vw, 24px);
}

.vp-screen {
    background: #000;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}

.vp-video {
    display: block;
    width: 100%;
    height: auto;
    max-height: 62vh;
    object-fit: contain;
    background: #000;
}

.vp-info {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 2px;
}

.vp-counter {
    display: block;
    font-size: 0.71rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
}

.vp-desc {
    color: rgba(240,235,227,0.68);
    font-size: 0.86rem;
    line-height: 1.65;
    transition: opacity 180ms ease;
}
.vp-desc.is-fading { opacity: 0; }
.vp-desc p { margin: 0 0 10px; }
.vp-desc p:last-child { margin-bottom: 0; }

.vp-fb {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(240,235,227,0.38);
    font-size: 0.79rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: color 150ms;
}
.vp-fb:hover { color: rgba(240,235,227,0.8); }
.vp-fb svg { width: 14px; height: 14px; fill: currentColor; flex: 0 0 auto; }

/* Thumbnail strip */
.vp-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

.vp-thumb {
    flex: 0 0 auto;
    width: 96px;
    padding: 0;
    border: 2px solid rgba(255,255,255,0.07);
    border-radius: 5px;
    background: #111;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 180ms, transform 180ms;
}
.vp-thumb:hover { border-color: rgba(160,112,64,0.5); transform: translateY(-2px); }
.vp-thumb.is-active { border-color: var(--accent); }

.vp-thumb-media {
    height: 126px;
    overflow: hidden;
    background: #0a0a0a;
}
.vp-thumb-media video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.vp-thumb-num {
    display: block;
    padding: 5px 6px 6px;
    font-size: 0.67rem;
    letter-spacing: 0.1em;
    color: rgba(240,235,227,0.35);
    text-align: center;
    transition: color 180ms;
}
.vp-thumb.is-active .vp-thumb-num { color: var(--accent); }

/* Gallery controls (shared) */
.video-carousel-controls { display: flex; align-items: center; gap: 10px; }

.carousel-counter {
    font-size: 0.76rem;
    letter-spacing: 0.1em;
    color: var(--subtle);
    font-variant-numeric: tabular-nums;
    min-width: 48px;
    text-align: center;
}

.video-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--subtle);
    font-size: 1.1rem;
    cursor: pointer;
    transition: color 160ms, border-color 160ms, transform 160ms;
}
.video-arrow:hover { color: var(--text); border-color: var(--border-2); transform: translateY(-1px); }
.video-arrow:disabled { opacity: 0.3; cursor: default; transform: none; }

/* ─── Gallery ───────────────────────────────────────── */
.contact-zone {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 14px;
    position: relative;
    padding-bottom: clamp(34px, 5vw, 56px);
    display: grid;
    gap: 0;
    background: var(--surface);
    overflow: hidden;
    isolation: isolate;
}

.contact-zone > *:not(.contact-visual) {
    position: relative;
    z-index: 1;
}

.project-showcase {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 34px;
    padding: clamp(32px, 4vw, 48px) clamp(24px, 5vw, 64px);
    background: transparent;
}

.project-showcase-inner {
    width: min(100%, 1120px);
    margin: 0 auto;
    display: grid;
    gap: 34px;
}

.project-showcase-inner > .gallery-section,
.project-showcase-inner > .services-section,
.project-showcase-inner > .testimonials-section {
    margin-top: 0;
}

.gallery-section { margin-top: 34px; }

.gallery-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.gallery-copy { margin: 0; }

.gallery-carousel {
    position: relative;
    width: min(100%, 1120px);
    margin: 0 auto;
}

.gallery-carousel::before {
    content: "";
    position: absolute;
    left: -260px;
    bottom: -180px;
    width: 1920px;
    aspect-ratio: 16 / 9;
    background: url("assets/img/galerie-foto-bg.png") left center / contain no-repeat;
    pointer-events: none;
    z-index: 0;
}

.gallery-viewport {
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-height: clamp(220px, 32vw, 460px);
    padding-inline: clamp(40px, 8vw, 120px);
}

.gallery-track {
    position: relative;
    height: clamp(220px, 32vw, 460px);
    perspective: 1600px;
}

.gallery-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.gallery-slide .gallery-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(100%, 760px);
    transform: translate(-50%, -50%) scale(0.7);
    transition:
        transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 360ms ease,
        filter 360ms ease,
        box-shadow 360ms ease;
    opacity: 0;
    filter: blur(10px) saturate(0.72);
}

.gallery-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(36, 83, 101, 0.12);
    border-radius: 24px;
    background:
        radial-gradient(circle at top right, rgba(224, 56, 56, 0.08), transparent 32%),
        linear-gradient(160deg, rgba(255,255,255,0.92), rgba(188,204,204,0.22));
    box-shadow: 0 24px 56px rgba(36, 83, 101, 0.12);
}

.gallery-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 32%);
}

.gallery-frame img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.gallery-slide.is-active,
.gallery-slide.is-prev,
.gallery-slide.is-next { opacity: 1; }

.gallery-slide.is-active { z-index: 3; pointer-events: auto; }

.gallery-slide.is-active .gallery-frame {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    filter: none;
}

.gallery-slide.is-prev,
.gallery-slide.is-next { z-index: 2; }

.gallery-slide.is-prev .gallery-frame {
    transform: translate(calc(-50% - clamp(180px, 20vw, 280px)), -50%) scale(0.76) rotateY(14deg);
    opacity: 0.54;
    filter: blur(9px) saturate(0.78);
}

.gallery-slide.is-next .gallery-frame {
    transform: translate(calc(-50% + clamp(180px, 20vw, 280px)), -50%) scale(0.76) rotateY(-14deg);
    opacity: 0.54;
    filter: blur(9px) saturate(0.78);
}

.gallery-slide.is-hidden { opacity: 0; }

/* ─── Despre ────────────────────────────────────────── */
.despre-section {
    order: -1;
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: 40px;
    padding: clamp(52px, 7vw, 88px) clamp(24px, 5vw, 64px);
    background: url("assets/img/despre-bg.png") center center / cover no-repeat;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.despre-inner { width: min(100%, 1120px); margin: 0 auto; }

.despre-head { margin-bottom: 32px; }

.despre-title {
    margin: 8px 0 20px;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: clamp(2.6rem, 5.5vw, 4.2rem);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--text);
}

.despre-rule { width: 40px; height: 2px; background: var(--accent); }

.despre-lead {
    margin: 0 0 44px;
    max-width: 72ch;
    color: var(--muted);
    font-size: clamp(1rem, 1.15vw, 1.08rem);
    line-height: 1.92;
}

.despre-team {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(16px, 2.5vw, 28px);
    margin-bottom: 44px;
}

.team-card {
    display: grid;
    grid-template-rows: auto 1fr;
    background: var(--surface);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition:
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.team-card-photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--bg);
}
.team-card-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 62%, rgba(0,0,0,0.05));
    pointer-events: none;
}
.team-card-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.team-card:hover .team-card-photo img { transform: scale(1.05); }

.team-card-copy {
    padding: clamp(20px, 2.5vw, 30px);
    display: grid;
    gap: 8px;
    align-content: start;
}

.team-card-role {
    margin: 0;
    font-size: 0.69rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent);
}

.team-card-name {
    margin: 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: clamp(1.25rem, 2vw, 1.6rem);
    font-weight: 400;
    color: var(--text);
    line-height: 1.15;
}

.team-card-rule { width: 30px; height: 1px; background: var(--border-2); margin: 4px 0; }

.team-card-bio {
    margin: 0;
    color: var(--muted);
    font-size: clamp(0.88rem, 1vw, 0.95rem);
    line-height: 1.88;
}

.despre-quote {
    position: relative;
    margin: 0;
    padding: 28px 30px 28px 42px;
    border-left: 2px solid var(--accent);
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.despre-quote::before {
    content: "\201C";
    position: absolute;
    top: -14px;
    left: 26px;
    font-family: "Iowan Old Style", Georgia, serif;
    font-size: 7rem;
    line-height: 1;
    color: rgba(0,0,0,0.04);
    pointer-events: none;
    user-select: none;
}
.despre-quote p {
    position: relative;
    margin: 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: clamp(1.02rem, 1.35vw, 1.15rem);
    line-height: 1.94;
    color: var(--muted);
    font-style: italic;
}

/* ─── Content grid ──────────────────────────────────── */
.services-section,
.testimonials-section {
    margin-top: 34px;
    padding: clamp(28px, 4vw, 44px);
    border: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.services-shell,
.testimonials-shell {
    display: grid;
    gap: clamp(24px, 3vw, 36px);
}

.services-head {
    display: grid;
    gap: 18px;
}

.services-title {
    margin: 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 400;
    line-height: 1.06;
    color: var(--text);
}

.services-lead {
    display: grid;
    gap: 14px;
    max-width: 78ch;
}

.services-lead p,
.service-card p,
.services-commitment-copy p {
    margin: 0;
    color: var(--muted);
    font-size: 0.98rem;
    line-height: 1.9;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 22px);
}

.service-card {
    display: grid;
    gap: 14px;
    padding: clamp(22px, 3vw, 30px);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.service-card-index {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent);
}

.service-card h3 {
    margin: 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: clamp(1.45rem, 2vw, 1.82rem);
    font-weight: 400;
    line-height: 1.14;
    color: var(--text);
}

.services-commitment {
    display: grid;
    gap: 14px;
    padding: clamp(24px, 3vw, 32px);
    border: 1px solid var(--border);
    border-left: 2px solid var(--accent);
    background: var(--surface);
}

.services-commitment-copy {
    display: grid;
    gap: 14px;
    max-width: 82ch;
}

.testimonials-head {
    display: grid;
    gap: 12px;
}

.testimonials-title {
    margin: 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.08;
    color: var(--text);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 2vw, 24px);
}

.testimonial-card {
    display: grid;
    gap: 16px;
    padding: clamp(24px, 3vw, 32px);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.testimonial-card-index {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent);
}

.testimonial-quote {
    position: relative;
    margin: 0;
    display: grid;
    gap: 16px;
    padding: 8px 0 0 28px;
}

.testimonial-quote::before {
    content: "\201C";
    position: absolute;
    top: -10px;
    left: 0;
    font-family: "Iowan Old Style", Georgia, serif;
    font-size: 5rem;
    line-height: 1;
    color: rgba(0,0,0,0.08);
    pointer-events: none;
    user-select: none;
}

.testimonial-quote p {
    position: relative;
    margin: 0;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.92;
}

/* Contact page */
.contact-main {
    padding-top: clamp(32px, 5vw, 64px);
}

.contact-page {
    display: grid;
    gap: clamp(34px, 5vw, 58px);
}

.contact-page-head {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(340px, 0.78fr);
    gap: clamp(30px, 5vw, 70px);
    align-items: center;
    min-height: clamp(360px, 48vw, 520px);
    padding-bottom: clamp(28px, 4vw, 46px);
    border-bottom: 1px solid var(--border);
}

.contact-page-intro {
    display: grid;
    gap: 20px;
    max-width: 680px;
}

.contact-page .hero-label {
    margin: 0;
}

.contact-page .contact-title {
    margin: 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: clamp(3rem, 7vw, 6.2rem);
    font-weight: 400;
    line-height: 0.95;
    color: var(--text);
}

.contact-page .contact-lead {
    max-width: 58ch;
    font-size: clamp(1rem, 1.25vw, 1.1rem);
}

.contact-page-media {
    position: relative;
    min-height: clamp(320px, 42vw, 500px);
    overflow: hidden;
    background: var(--surface);
}

.contact-page-media img {
    width: 100%;
    height: 100%;
    min-height: inherit;
    object-fit: cover;
}

.contact-media-note {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 22px;
    display: grid;
    gap: 4px;
    padding: 16px 18px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.72);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.contact-media-note span {
    color: var(--muted);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.contact-media-note strong {
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.45;
}

.contact-page-body {
    display: grid;
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.18fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: start;
}

.contact-direct-panel {
    position: sticky;
    top: 112px;
    display: grid;
    gap: 26px;
    padding: clamp(24px, 3vw, 34px);
    background: #f7f4ef;
    border: 1px solid var(--border);
}

.contact-panel-kicker,
.contact-social-label {
    margin: 0;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.contact-panel-title {
    margin: 8px 0 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: clamp(1.6rem, 2.5vw, 2.25rem);
    font-weight: 400;
    line-height: 1.08;
    color: var(--text);
}

.contact-direct-list {
    display: grid;
    gap: 12px;
}

.contact-direct-card {
    display: grid;
    gap: 6px;
    padding: 18px 18px;
    border: 1px solid rgba(229, 225, 219, 0.95);
    background: rgba(255, 255, 255, 0.74);
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.contact-direct-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-2);
    background: #fff;
}

.contact-direct-card span {
    color: var(--subtle);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.contact-direct-card strong {
    color: var(--text);
    font-size: clamp(1.08rem, 1.8vw, 1.32rem);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.contact-direct-card.is-primary {
    background: var(--text);
    border-color: var(--text);
}

.contact-direct-card.is-primary span {
    color: rgba(255, 255, 255, 0.58);
}

.contact-direct-card.is-primary strong {
    color: #fff;
}

.contact-social-block {
    display: grid;
    gap: 12px;
    padding-top: 8px;
}

.contact-form-shell {
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid var(--border);
    background: #fff;
    box-shadow: var(--shadow-sm);
}

.contact-form-head {
    display: grid;
    gap: 6px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.contact-form-head p {
    margin: 0;
    color: var(--accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.contact-form-head h2 {
    margin: 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: clamp(1.75rem, 3vw, 2.55rem);
    font-weight: 400;
    line-height: 1.08;
    color: var(--text);
}

.contact-status {
    margin: 0 0 18px;
    padding: 14px 16px;
    background: #f3f8f1;
    border: 1px solid #dbead4;
    color: #3e6a35;
    font-weight: 600;
}

.contact-status.is-error {
    background: #fff3f1;
    border-color: #efd2cc;
    color: #8a3c2f;
}

.contact-form {
    display: grid;
    gap: 18px;
}

.contact-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.contact-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.contact-field {
    display: grid;
    gap: 8px;
}

.contact-field-label {
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.contact-field input,
.contact-field textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 0;
    background: #fbfaf8;
    color: var(--text);
    font: inherit;
    line-height: 1.5;
    padding: 14px 15px;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.contact-field textarea {
    min-height: 180px;
    resize: vertical;
}

.contact-field input:focus,
.contact-field textarea:focus {
    outline: 0;
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(160, 112, 64, 0.12);
}

.contact-field-error {
    color: #9b3b2f;
    font-size: 0.84rem;
    line-height: 1.45;
}

.contact-form-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding-top: 6px;
}

.contact-submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 28px;
    border: 1px solid var(--text);
    border-radius: 0;
    background: var(--text);
    color: #fff;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 160ms ease, background 160ms ease;
}

.contact-submit-button:hover {
    transform: translateY(-1px);
    background: #2d2a25;
}

.contact-form-note {
    max-width: 34ch;
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
}

/* Portfolio page */
.portfolio-main {
    padding-top: clamp(36px, 5vw, 68px);
}

.portfolio-page {
    display: grid;
    gap: clamp(30px, 5vw, 56px);
}

.portfolio-head {
    display: grid;
    gap: 18px;
    max-width: 760px;
    padding-bottom: clamp(24px, 4vw, 42px);
    border-bottom: 1px solid var(--border);
}

.portfolio-head .hero-label {
    margin: 0;
}

.portfolio-title {
    margin: 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: clamp(3rem, 7vw, 6.4rem);
    font-weight: 400;
    line-height: 0.95;
    color: var(--text);
}

.portfolio-lead {
    max-width: 58ch;
    margin: 0;
    color: var(--muted);
    font-size: clamp(1rem, 1.25vw, 1.1rem);
    line-height: 1.86;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 24px);
}

.portfolio-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 0;
    background: var(--surface);
    overflow: hidden;
    cursor: zoom-in;
    box-shadow: none;
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.portfolio-card:hover,
.portfolio-card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--border-2);
    box-shadow: var(--shadow-md);
}

.portfolio-card:focus-visible {
    outline: 2px solid rgba(160, 112, 64, 0.34);
    outline-offset: 3px;
}

.portfolio-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 320ms ease, filter 320ms ease;
}

.portfolio-card:hover img,
.portfolio-card:focus-visible img {
    transform: scale(1.04);
    filter: saturate(1.04);
}

.portfolio-card-index {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 28px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.portfolio-empty {
    padding: 28px;
    border: 1px solid var(--border);
    color: var(--muted);
}

.portfolio-empty p {
    margin: 0;
}

.portfolio-preview {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    place-items: center;
    padding: clamp(20px, 4vw, 56px);
    background: rgba(10, 9, 8, 0.86);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.portfolio-preview.is-open {
    display: grid;
    opacity: 1;
    pointer-events: auto;
}

.portfolio-preview img {
    max-width: min(1180px, 100%);
    max-height: min(760px, 82vh);
    object-fit: contain;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
}

.portfolio-preview-close {
    position: absolute;
    top: 22px;
    right: 22px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
}

.portfolio-preview-close:hover,
.portfolio-preview-close:focus-visible {
    background: rgba(255, 255, 255, 0.18);
}

.contact-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding: clamp(24px, 3vw, 36px) clamp(24px, 5vw, 64px) 0;
}

.contact-shell {
    position: relative;
    width: min(100%, 1120px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(320px, 0.92fr);
    gap: clamp(26px, 4vw, 56px);
    padding: clamp(28px, 4vw, 44px);
    border: 1px solid rgba(229, 225, 219, 0.92);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    overflow: hidden;
}

.contact-shell::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), rgba(160, 112, 64, 0.12));
}

.contact-copy {
    display: grid;
    align-content: center;
    gap: 18px;
    max-width: 44rem;
}

.contact-section .hero-label {
    margin-bottom: 0;
}

.contact-section .contact-title {
    margin: 0;
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: clamp(2.15rem, 4.5vw, 3.6rem);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.02em;
    color: var(--text);
}

.contact-lead {
    margin: 0;
    max-width: 52ch;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1.9;
}

.contact-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-content: start;
}

.contact-card {
    display: grid;
    align-content: start;
    gap: 12px;
    min-height: 168px;
    padding: clamp(22px, 3vw, 28px);
    border: 1px solid rgba(229, 225, 219, 0.96);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-sm);
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease,
        background 220ms ease;
}

.contact-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-2);
    box-shadow: var(--shadow-md);
    background: rgba(255, 255, 255, 0.96);
}

.contact-card:focus-visible {
    outline: 2px solid rgba(160, 112, 64, 0.34);
    outline-offset: 3px;
}

.contact-card-primary {
    grid-column: 1 / -1;
    min-height: 0;
    background: linear-gradient(135deg, rgba(160, 112, 64, 0.96), rgba(124, 84, 47, 0.96));
    border-color: rgba(124, 84, 47, 0.88);
    box-shadow: 0 22px 44px rgba(110, 78, 46, 0.24);
}

.contact-card-primary:hover {
    background: linear-gradient(135deg, rgba(160, 112, 64, 1), rgba(124, 84, 47, 1));
    border-color: rgba(124, 84, 47, 0.98);
}

.contact-card-label {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--accent);
}

.contact-card-title {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: clamp(1.34rem, 2vw, 1.82rem);
    font-weight: 400;
    line-height: 1.12;
    color: var(--text);
}

.contact-card-meta {
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.74;
}

.contact-card-primary .contact-card-label,
.contact-card-primary .contact-card-meta {
    color: rgba(255, 255, 255, 0.78);
}

/* ─── Footer ───────────────────────────────────────── */
.site-footer {
    position: relative;
    width: 100vw;
    margin: 72px 0 0 calc(50% - 50vw);
    padding: clamp(54px, 7vw, 88px) 0 34px;
    background: #fff;
    color: var(--text);
}

.footer-shell {
    position: relative;
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(190px, 0.65fr) minmax(180px, 0.6fr) minmax(300px, 1fr);
    gap: 34px clamp(28px, 5vw, 72px);
    margin-bottom: clamp(46px, 6vw, 72px);
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col--brand {
    padding-right: 0;
    border-right: 0;
    transform: translateY(-18px);
}

.footer-col--company {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.footer-brand-logo {
    width: min(168px, 48vw);
    height: auto;
    margin-bottom: 12px;
}

.footer-logo {
    font-family: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    font-size: clamp(1rem, 1.4vw, 1.16rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text);
    margin: 0;
}

.footer-tagline {
    max-width: 230px;
    font-size: 0.94rem;
    line-height: 1.68;
    color: var(--muted);
    margin: 0;
}

.footer-heading {
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
}

.footer-item {
    font-size: 0.94rem;
    font-weight: 600;
    color: var(--muted);
    margin: 0;
    line-height: 1.55;
}

.footer-item a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-item a:hover { color: var(--text); }

.footer-company-list {
    display: grid;
    gap: 8px;
    margin: 0;
}

.footer-company-list div {
    display: grid;
    grid-template-columns: minmax(92px, 0.8fr) minmax(0, 1.2fr);
    gap: 12px;
    align-items: baseline;
}

.footer-company-list dt {
    margin: 0;
    color: var(--subtle);
    font-size: 0.78rem;
    line-height: 1.4;
}

.footer-company-list dd {
    margin: 0;
    color: var(--text);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.footer-bottom {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding-top: 26px;
    border-top: 1px solid var(--border);
}

.footer-bottom p {
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--subtle);
    margin: 0;
    text-align: center;
}

.footer-credit-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.72;
    transition: opacity 160ms ease, transform 160ms ease;
}

.footer-credit-logo:hover {
    opacity: 1;
    transform: translateY(-1px);
}

.footer-credit-logo img {
    width: 108px;
    height: auto;
}

.contact-card-primary .contact-card-title {
    font-size: clamp(2rem, 3.4vw, 2.9rem);
    letter-spacing: 0.04em;
    color: #fff;
}

.contact-zone > .map-section {
    margin-top: clamp(18px, 3vw, 28px);
}

/* ─── Contact visual ─────────────────────────────────── */
.contact-visual {
    position: absolute;
    left: 50%;
    bottom: clamp(4px, 3vw, 56px);
    width: min(100vw, 1920px);
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 0;
}

.contact-visual img {
    display: block;
    width: 100%;
    height: auto;
}


/* ─── Responsive · 860px ────────────────────────────── */
@media (max-width: 860px) {
    .site-header { flex-direction: column; align-items: flex-start; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .footer-col--brand { grid-column: 1 / -1; border-right: none; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 24px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 4px; }

    .contact-page-head,
    .contact-page-body {
        grid-template-columns: 1fr;
    }

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

    .contact-page-head {
        min-height: 0;
    }

    .contact-page-media {
        min-height: clamp(260px, 58vw, 420px);
    }

    .contact-direct-panel {
        position: relative;
        top: auto;
    }

    .project-showcase { padding-inline: clamp(20px, 4vw, 44px); }

    .map-section { padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 44px); }
    .map-section-inner { grid-template-columns: 1fr; }
    .map-visual { min-height: clamp(260px, 50vw, 380px); }

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

    .gallery-head { align-items: flex-start; }
    .gallery-viewport,
    .gallery-track { min-height: clamp(200px, 44vw, 360px); height: clamp(200px, 44vw, 360px); }
    .gallery-slide.is-prev .gallery-frame,
    .gallery-slide.is-next .gallery-frame { opacity: 0.38; }
    .gallery-carousel::before {
        left: -72px;
        bottom: -42px;
        width: clamp(240px, 40vw, 420px);
    }

    .services-grid { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }

    .despre-team { grid-template-columns: 1fr; }
    .team-card-photo { aspect-ratio: 4 / 3; }
    .despre-quote { padding: 22px 20px 22px 28px; }

    .contact-section { padding-inline: clamp(20px, 4vw, 44px); }
    .contact-shell { grid-template-columns: 1fr; }
    .contact-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .contact-card-primary { grid-column: 1 / -1; }
    .contact-visual { bottom: clamp(0px, 3vw, 40px); }
}

/* ─── Responsive · 540px ────────────────────────────── */
@media (max-width: 540px) {
    .page-shell { width: calc(100% - 24px); }

    .site-header {
        align-items: center;
        justify-content: center;
        padding-inline: 16px;
        text-align: center;
    }
    .brand { justify-content: center; }
    .brand-logo { width: min(72px, 22vw); }
    .site-nav { justify-content: center; width: 100%; }

    .welcome-banner { padding-inline: 16px; font-size: 0.74rem; }

    .hero-actions { flex-direction: column; align-items: center; }

    .contact-main { padding-top: 28px; }
    .contact-page { gap: 28px; }
    .contact-page .contact-title { font-size: clamp(2.55rem, 15vw, 4rem); }
    .contact-page-head { gap: 24px; padding-bottom: 28px; }
    .contact-page-media { min-height: 240px; }
    .contact-media-note {
        left: 14px;
        right: 14px;
        bottom: 14px;
        padding: 13px 14px;
    }
    .contact-page-body { gap: 22px; }
    .contact-direct-panel,
    .contact-form-shell { padding: 22px 18px; }
    .contact-form-grid { grid-template-columns: 1fr; }
    .contact-form-actions { align-items: stretch; }
    .contact-submit-button { width: 100%; }

    .portfolio-main { padding-top: 28px; }
    .portfolio-title { font-size: clamp(2.55rem, 15vw, 4rem); }
    .portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .portfolio-card { aspect-ratio: 1 / 1; }
    .portfolio-card-index {
        left: 10px;
        bottom: 10px;
        min-width: 32px;
        height: 24px;
        font-size: 0.66rem;
    }
    .portfolio-preview {
        padding: 54px 12px 18px;
    }
    .portfolio-preview img {
        max-height: 78vh;
    }
    .portfolio-preview-close {
        top: 12px;
        right: 12px;
    }

    .project-showcase { padding-inline: 16px; }

    .map-section { padding-inline: 16px; }
    .map-info-actions { flex-direction: column; }
    .map-btn-primary, .map-btn-secondary { justify-content: center; }
    .map-visual { min-height: 260px; }

    .vp-thumb { width: 76px; }
    .vp-thumb-media { height: 100px; }

    .gallery-head { flex-direction: column; align-items: flex-start; }
    .gallery-viewport,
    .gallery-track { min-height: auto; height: auto; padding-inline: 0; }
    .gallery-carousel::before {
        left: -36px;
        bottom: -20px;
        width: 220px;
    }
    .gallery-slide { position: relative; inset: auto; display: none; }
    .gallery-slide.is-active { display: block; }
    .gallery-slide .gallery-frame,
    .gallery-slide.is-active .gallery-frame,
    .gallery-slide.is-prev .gallery-frame,
    .gallery-slide.is-next .gallery-frame {
        position: relative;
        top: auto; left: auto;
        width: 100%;
        transform: none;
        opacity: 1;
        filter: none;
    }

    .services-section { padding-inline: 16px; }
    .testimonials-section { padding-inline: 16px; }
    .despre-section { padding-inline: 16px; }
    .contact-section { padding-inline: 16px; }
    .contact-shell { gap: 22px; padding: 24px 20px; }
    .contact-actions { grid-template-columns: 1fr; }
    .contact-card,
    .contact-card-primary { grid-column: auto; min-height: 0; }
    .contact-visual { bottom: -18px; }
    .despre-title { font-size: clamp(2.2rem, 10vw, 3rem); }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-col--brand { padding-bottom: 20px; }
    .footer-company-list div { grid-template-columns: 1fr; gap: 2px; }
    .footer-bottom p { line-height: 1.65; }
}