/* ============================================================
   VLAD ISOLIERTECHNIK — DESIGN SYSTEM
   Phase 1
   Native HTML / CSS / Vanilla JS
   ============================================================ */

/* ============================================================
   01. DESIGN TOKENS
   ============================================================ */
:root {
    /* Brand / surfaces */
    --color-ink: #0b1116;
    --color-navy: #0d1b24;
    --color-navy-2: #122631;
    --color-anthracite: #171d21;
    --color-steel: #7d8991;
    --color-steel-light: #c8cfd3;
    --color-line: #d9dddf;
    --color-off-white: #f4f2ed;
    --color-paper: #fbfaf7;
    --color-white: #ffffff;

    /* Brand accent — centralized so it can be matched to the final logo in one place */
    --color-accent: #cf2e2e;
    --color-accent-hover: #ae2323;
    --color-accent-soft: #f5dfdf;

    /* Semantic colors */
    --color-text: var(--color-ink);
    --color-text-muted: #5f6970;
    --color-text-on-dark: #f7f8f8;
    --color-bg: var(--color-paper);
    --color-surface: var(--color-white);
    --color-surface-dark: var(--color-navy);
    --color-success: #276749;
    --color-warning: #8a5a00;
    --color-danger: #b42318;
    --color-focus: #2f80ed;

    /* Typography */
    --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-display: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;

    --fs-100: 0.75rem;
    --fs-200: 0.875rem;
    --fs-300: 1rem;
    --fs-400: 1.125rem;
    --fs-500: clamp(1.25rem, 1.4vw, 1.5rem);
    --fs-600: clamp(1.75rem, 2.8vw, 2.6rem);
    --fs-700: clamp(2.5rem, 5vw, 4.75rem);
    --fs-800: clamp(3.25rem, 7.2vw, 7rem);

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 800;

    --lh-tight: 0.96;
    --lh-heading: 1.05;
    --lh-body: 1.6;

    --tracking-tight: -0.035em;
    --tracking-normal: 0;
    --tracking-wide: 0.08em;
    --tracking-wider: 0.14em;

    /* Spacing — 4px base rhythm */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    --space-40: 10rem;

    /* Layout */
    --container: 82rem;
    --container-narrow: 58rem;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --section-space: clamp(4.5rem, 9vw, 9rem);
    --grid-gap: clamp(1rem, 2vw, 2rem);

    /* Radius — intentionally restrained */
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-pill: 999px;

    /* Borders / shadows */
    --border: 1px solid var(--color-line);
    --border-dark: 1px solid rgba(255, 255, 255, 0.14);
    --shadow-sm: 0 6px 24px rgba(8, 17, 24, 0.08);
    --shadow-md: 0 18px 48px rgba(8, 17, 24, 0.12);

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --duration-fast: 160ms;
    --duration: 280ms;
    --duration-slow: 520ms;

    /* Z-index scale */
    --z-base: 1;
    --z-sticky: 100;
    --z-overlay: 500;
    --z-modal: 1000;
}

/* ============================================================
   02. RESET
   ============================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img,
picture,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    border: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

/* ============================================================
   03. BASE
   ============================================================ */
body {
    min-width: 20rem;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--fs-300);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--color-accent);
    color: var(--color-white);
}

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 4px;
}

[hidden] {
    display: none !important;
}

/* ============================================================
   04. TYPOGRAPHY
   ============================================================ */
h1,
h2,
h3,
h4,
.heading-display,
.heading-xl,
.heading-lg,
.heading-md {
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
}

.heading-display {
    font-size: var(--fs-800);
    line-height: var(--lh-tight);
    text-transform: uppercase;
}

.heading-xl,
h1 {
    font-size: var(--fs-700);
}

.heading-lg,
h2 {
    font-size: var(--fs-600);
}

.heading-md,
h3 {
    font-size: var(--fs-500);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--fs-100);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wider);
    line-height: 1.2;
    text-transform: uppercase;
}

.eyebrow::before {
    width: 2rem;
    height: 1px;
    background: currentColor;
    content: "";
}

.lead {
    max-width: 44rem;
    font-size: var(--fs-400);
    line-height: 1.7;
}

.text-muted {
    color: var(--color-text-muted);
}

.text-accent {
    color: var(--color-accent);
}

.text-on-dark {
    color: var(--color-text-on-dark);
}

.text-uppercase {
    text-transform: uppercase;
}

/* ============================================================
   05. LAYOUT
   ============================================================ */
.container,
.container-narrow {
    width: min(100% - (2 * var(--gutter)), var(--container));
    margin-inline: auto;
}

.container-narrow {
    max-width: var(--container-narrow);
}

.section {
    padding-block: var(--section-space);
}

.section-dark {
    background: var(--color-surface-dark);
    color: var(--color-text-on-dark);
}

.section-off-white {
    background: var(--color-off-white);
}

.grid {
    display: grid;
    gap: var(--grid-gap);
}

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

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

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

.stack > * + * {
    margin-top: var(--stack-space, var(--space-6));
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-4));
}

.split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

/* ============================================================
   06. BUTTONS / LINKS
   ============================================================ */
.btn {
    --btn-bg: var(--color-accent);
    --btn-color: var(--color-white);
    --btn-border: var(--color-accent);

    display: inline-flex;
    min-height: 3.25rem;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: 0.85rem 1.35rem;
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-xs);
    background: var(--btn-bg);
    color: var(--btn-color);
    cursor: pointer;
    font-size: var(--fs-200);
    font-weight: var(--fw-bold);
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
    transition:
        background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-out);
}

.btn:hover {
    --btn-bg: var(--color-accent-hover);
    --btn-border: var(--color-accent-hover);
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn-secondary {
    --btn-bg: transparent;
    --btn-color: var(--color-ink);
    --btn-border: var(--color-ink);
}

.btn-secondary:hover {
    --btn-bg: var(--color-ink);
    --btn-color: var(--color-white);
    --btn-border: var(--color-ink);
}

.btn-light {
    --btn-bg: var(--color-white);
    --btn-color: var(--color-ink);
    --btn-border: var(--color-white);
}

.btn-light:hover {
    --btn-bg: var(--color-off-white);
    --btn-border: var(--color-off-white);
}

.btn-ghost-light {
    --btn-bg: transparent;
    --btn-color: var(--color-white);
    --btn-border: rgba(255, 255, 255, 0.48);
}

.btn-ghost-light:hover {
    --btn-bg: var(--color-white);
    --btn-color: var(--color-ink);
    --btn-border: var(--color-white);
}

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--fs-200);
    font-weight: var(--fw-bold);
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.link-arrow::after {
    content: "→";
    transition: transform var(--duration) var(--ease-out);
}

.link-arrow:hover::after {
    transform: translateX(0.35rem);
}

/* ============================================================
   07. CARDS / SURFACES
   ============================================================ */
.card {
    position: relative;
    overflow: hidden;
    border: var(--border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.card-body {
    padding: clamp(1.25rem, 3vw, 2rem);
}

.card-interactive {
    transition:
        border-color var(--duration) var(--ease-standard),
        box-shadow var(--duration) var(--ease-standard),
        transform var(--duration) var(--ease-out);
}

.card-interactive:hover {
    border-color: #bcc4c8;
    box-shadow: var(--shadow-sm);
    transform: translateY(-4px);
}

.media-frame {
    position: relative;
    overflow: hidden;
    background: var(--color-anthracite);
}

.media-frame > img,
.media-frame > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ratio-4-3 {
    aspect-ratio: 4 / 3;
}

.ratio-16-9 {
    aspect-ratio: 16 / 9;
}

.ratio-3-4 {
    aspect-ratio: 3 / 4;
}

/* ============================================================
   08. FORMS
   ============================================================ */
.form-group {
    display: grid;
    gap: var(--space-2);
}

.form-label {
    font-size: var(--fs-200);
    font-weight: var(--fw-semibold);
}

.form-control,
.form-select,
.form-textarea {
    width: 100%;
    border: 1px solid #b8c0c5;
    border-radius: var(--radius-xs);
    background: var(--color-white);
    color: var(--color-text);
    transition:
        border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
}

.form-control,
.form-select {
    min-height: 3.25rem;
    padding-inline: var(--space-4);
}

.form-textarea {
    min-height: 9rem;
    padding: var(--space-4);
    resize: vertical;
}

.form-control::placeholder,
.form-textarea::placeholder {
    color: #89939a;
}

.form-control:hover,
.form-select:hover,
.form-textarea:hover {
    border-color: #7e8990;
}

.form-control:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px rgba(47, 128, 237, 0.16);
    outline: 0;
}

.form-help,
.form-error {
    font-size: var(--fs-100);
}

.form-help {
    color: var(--color-text-muted);
}

.form-error {
    color: var(--color-danger);
}

/* ============================================================
   09. DIVIDERS / LABELS / SMALL COMPONENTS
   ============================================================ */
.divider {
    width: 100%;
    height: 1px;
    border: 0;
    background: var(--color-line);
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding-inline: 0.65rem;
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    font-size: var(--fs-100);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
    line-height: 1;
    text-transform: uppercase;
}

.number-label {
    color: var(--color-steel);
    font-size: var(--fs-100);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wider);
}

/* ============================================================
   10. ACCESSIBILITY HELPERS
   ============================================================ */
.skip-link {
    position: fixed;
    top: var(--space-4);
    left: var(--space-4);
    z-index: var(--z-modal);
    padding: var(--space-3) var(--space-4);
    background: var(--color-white);
    color: var(--color-ink);
    box-shadow: var(--shadow-md);
    transform: translateY(-200%);
}

.skip-link:focus {
    transform: translateY(0);
}

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

/* ============================================================
   11. UTILITIES
   ============================================================ */
.flow-xs { --stack-space: var(--space-2); }
.flow-sm { --stack-space: var(--space-4); }
.flow-md { --stack-space: var(--space-6); }
.flow-lg { --stack-space: var(--space-10); }
.flow-xl { --stack-space: var(--space-16); }

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

.w-full { width: 100%; }
.max-text { max-width: 42rem; }

.align-start { align-items: flex-start; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* ============================================================
   12. RESPONSIVE RULES
   ============================================================ */
@media (max-width: 63.99rem) {
    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (max-width: 47.99rem) {
    :root {
        --section-space: clamp(4rem, 15vw, 6rem);
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .split {
        align-items: flex-start;
        flex-direction: column;
    }

    .btn {
        min-height: 3rem;
    }
}

/* ============================================================
   13. USER PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (forced-colors: active) {
    .btn,
    .card,
    .form-control,
    .form-select,
    .form-textarea {
        border: 1px solid CanvasText;
    }
}
/* ============================================================
   14. SITE HEADER
   Phase 2
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    width: 100%;
}

.site-header::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: rgba(11, 17, 22, 0.08);
    content: "";
    pointer-events: none;
}


/* ============================================================
   14.1 TOPBAR
   ============================================================ */

.topbar {
    position: relative;
    z-index: 2;
    background: var(--color-ink);
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.75rem;
}

.topbar__inner {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}

.topbar__contact {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
}

.topbar__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: color var(--duration-fast) var(--ease-standard);
}

.topbar__item svg {
    flex: 0 0 auto;
    color: var(--color-accent);
}

.topbar__item:hover {
    color: var(--color-white);
}

.topbar__hours {
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.54);
    font-weight: var(--fw-medium);
    letter-spacing: 0.04em;
}


/* ============================================================
   14.2 MAIN NAVBAR
   ============================================================ */

.navbar {
    position: relative;
    z-index: 3;
    background: rgba(251, 250, 247, 0.98);
    transition:
        background var(--duration) var(--ease-standard),
        box-shadow var(--duration) var(--ease-standard);
}

.site-header.is-scrolled .navbar {
    background: rgba(251, 250, 247, 0.96);
    box-shadow: 0 10px 35px rgba(11, 17, 22, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.navbar__inner {
    display: flex;
    min-height: 5.5rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    transition: min-height var(--duration) var(--ease-standard);
}

.site-header.is-scrolled .navbar__inner {
    min-height: 4.75rem;
}


/* ============================================================
   14.3 BRAND
   ============================================================ */

.brand {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.8rem;
    color: var(--color-ink);
}

.brand__name {
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: var(--fw-black);
    letter-spacing: -0.055em;
    line-height: 1;
}

.brand__divider {
    width: 1px;
    height: 2rem;
    background: var(--color-line);
}

.brand__description {
    max-width: 7.5rem;
    font-size: 0.65rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.18em;
    line-height: 1.35;
}


/* ============================================================
   14.4 DESKTOP NAV
   ============================================================ */

.desktop-nav {
    margin-left: auto;
}

.desktop-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(1.25rem, 2vw, 2.25rem);
}

.desktop-nav__link {
    position: relative;
    display: flex;
    min-height: 5.5rem;
    align-items: center;
    color: var(--color-ink);
    font-size: 0.83rem;
    font-weight: var(--fw-semibold);
    transition:
        color var(--duration-fast) var(--ease-standard),
        min-height var(--duration) var(--ease-standard);
}

.site-header.is-scrolled .desktop-nav__link {
    min-height: 4.75rem;
}

.desktop-nav__link::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--color-accent);
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--duration) var(--ease-out);
}

.desktop-nav__link:hover,
.desktop-nav__link.is-active {
    color: var(--color-accent);
}

.desktop-nav__link:hover::after,
.desktop-nav__link.is-active::after {
    transform: scaleX(1);
    transform-origin: left;
}


/* ============================================================
   14.5 NAV ACTIONS
   ============================================================ */

.navbar__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-3);
}

.navbar__cta {
    gap: var(--space-3);
    white-space: nowrap;
}

.navbar__cta svg {
    transition: transform var(--duration) var(--ease-out);
}

.navbar__cta:hover svg {
    transform: translateX(0.2rem);
}


/* ============================================================
   14.6 LANGUAGE SWITCHER
   ============================================================ */

.language-switcher {
    position: relative;
}

.language-switcher__button {
    display: inline-flex;
    min-width: 3.75rem;
    min-height: 2.75rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border: 1px solid var(--color-line);
    background: transparent;
    color: var(--color-ink);
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
    transition:
        border-color var(--duration-fast) var(--ease-standard),
        background var(--duration-fast) var(--ease-standard);
}

.language-switcher__button:hover {
    border-color: var(--color-steel);
    background: var(--color-off-white);
}

.language-switcher__button svg {
    transition: transform var(--duration-fast) var(--ease-standard);
}

.language-switcher__button[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.language-menu {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    z-index: var(--z-overlay);
    width: 12rem;
    border: 1px solid var(--color-line);
    background: var(--color-white);
    box-shadow: var(--shadow-md);
}

.language-menu__item {
    display: grid;
    width: 100%;
    min-height: 3.25rem;
    cursor: pointer;
    grid-template-columns: 2.2rem 1fr;
    align-items: center;
    padding-inline: var(--space-4);
    background: transparent;
    color: var(--color-text);
    text-align: left;
    transition:
        background var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}

.language-menu__item + .language-menu__item {
    border-top: 1px solid var(--color-line);
}

.language-menu__item span:first-child {
    font-size: 0.7rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.08em;
}

.language-menu__item span:last-child {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.language-menu__item:hover,
.language-menu__item.is-active {
    background: var(--color-off-white);
}

.language-menu__item.is-active {
    color: var(--color-accent);
}


/* ============================================================
   14.7 MOBILE MENU TOGGLE
   ============================================================ */

.menu-toggle {
    position: relative;
    display: none;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    background: var(--color-ink);
}

.menu-toggle span {
    position: absolute;
    width: 1.25rem;
    height: 1px;
    background: var(--color-white);
    transition:
        transform var(--duration) var(--ease-out),
        opacity var(--duration-fast) var(--ease-standard);
}

.menu-toggle span:nth-child(1) {
    transform: translateY(-0.35rem);
}

.menu-toggle span:nth-child(2) {
    transform: translateY(0);
}

.menu-toggle span:nth-child(3) {
    transform: translateY(0.35rem);
}

.menu-toggle.is-open span:nth-child(1) {
    transform: rotate(45deg);
}

.menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.is-open span:nth-child(3) {
    transform: rotate(-45deg);
}


/* ============================================================
   14.8 MOBILE NAVIGATION
   ============================================================ */

.mobile-navigation {
    position: fixed;
    inset: 0;
    z-index: -1;
    visibility: hidden;
    overflow-y: auto;
    background: var(--color-ink);
    color: var(--color-white);
    opacity: 0;
    transform: translateY(-1rem);
    transition:
        opacity var(--duration) var(--ease-standard),
        transform var(--duration-slow) var(--ease-out),
        visibility var(--duration) var(--ease-standard);
}

.mobile-navigation.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.mobile-navigation__inner {
    display: flex;
    width: min(100% - (2 * var(--gutter)), var(--container));
    min-height: 100%;
    margin-inline: auto;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 8rem;
    padding-bottom: var(--space-8);
}

.mobile-navigation__list {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.mobile-navigation__list li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.mobile-navigation__link {
    display: flex;
    min-height: 4.75rem;
    align-items: center;
    gap: var(--space-5);
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 8vw, 3rem);
    font-weight: var(--fw-bold);
    letter-spacing: -0.025em;
    line-height: 1;
    transition:
        color var(--duration-fast) var(--ease-standard),
        padding-left var(--duration) var(--ease-out);
}

.mobile-navigation__link span {
    width: 1.5rem;
    color: rgba(255, 255, 255, 0.38);
    font-family: var(--font-sans);
    font-size: 0.65rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.1em;
}

.mobile-navigation__link:hover {
    padding-left: 0.35rem;
    color: var(--color-accent);
}

.mobile-navigation__bottom {
    display: grid;
    gap: var(--space-6);
    padding-top: var(--space-12);
}

.mobile-navigation__languages {
    display: flex;
    gap: var(--space-2);
}

.mobile-language {
    min-width: 3rem;
    min-height: 2.5rem;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: transparent;
    color: rgba(255, 255, 255, 0.64);
    font-size: 0.7rem;
    font-weight: var(--fw-bold);
}

.mobile-language:hover,
.mobile-language.is-active {
    border-color: var(--color-white);
    color: var(--color-white);
}

.mobile-navigation__contact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-8);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.8rem;
}

.mobile-navigation__contact a:hover {
    color: var(--color-white);
}


/* ============================================================
   14.9 BODY NAVIGATION STATE
   ============================================================ */

body.menu-open {
    overflow: hidden;
}


/* ============================================================
   14.10 PHASE PLACEHOLDER
   temporary — removed in Phase 3
   ============================================================ */

.phase-placeholder {
    display: flex;
    min-height: 75vh;
    align-items: center;
    padding-block: var(--section-space);
}

.phase-placeholder .container {
    display: grid;
    gap: var(--space-8);
}


/* ============================================================
   14.11 HEADER RESPONSIVE
   ============================================================ */

@media (max-width: 74rem) {

    .desktop-nav__list {
        gap: 1.25rem;
    }

    .navbar__cta {
        display: none;
    }
}


@media (max-width: 63.99rem) {

    .topbar__item:first-child {
        display: none;
    }

    .desktop-nav {
        display: none;
    }

    .language-switcher {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .navbar__inner,
    .site-header.is-scrolled .navbar__inner {
        min-height: 4.75rem;
    }

    .mobile-navigation {
        z-index: 1;
    }
}


@media (max-width: 47.99rem) {

    .topbar {
        display: none;
    }

    .brand__name {
        font-size: 1.8rem;
    }

    .brand__description {
        font-size: 0.58rem;
    }

    .brand__divider {
        height: 1.75rem;
    }

    .mobile-navigation__inner {
        padding-top: 6.75rem;
    }
}


@media (max-width: 25rem) {

    .brand__divider,
    .brand__description {
        display: none;
    }
}
/* ============================================================
   15. HOMEPAGE
   Phase 3
   ============================================================ */


/* ============================================================
   15.1 SHARED SECTION ELEMENTS
   ============================================================ */

.section-index {
    display: block;
    margin-bottom: var(--space-3);
    color: var(--color-accent);
    font-size: 0.7rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.14em;
}

.section-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.section-header {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) 3fr;
    gap: var(--grid-gap);
    margin-bottom: clamp(3rem, 7vw, 6rem);
}

.section-header__main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-8);
}

.section-header__main h2 {
    max-width: 50rem;
    font-size: clamp(2.5rem, 5vw, 5.5rem);
    line-height: 0.98;
    text-transform: uppercase;
}

.section-header--dark {
    color: var(--color-white);
}

.section-header--dark .section-label {
    color: rgba(255, 255, 255, 0.55);
}

.text-accent {
    color: var(--color-accent);
}


/* ============================================================
   15.2 HERO
   ============================================================ */

.hero {
    position: relative;
    display: flex;
    min-height: calc(100svh - 8rem);
    overflow: hidden;
    align-items: stretch;
    background: var(--color-ink);
    color: var(--color-white);
}

.hero__background {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            115deg,
            #101b22 0%,
            #142731 42%,
            #213742 100%
        );
    background-image:
        linear-gradient(
            90deg,
            rgba(7, 13, 17, 0.97) 0%,
            rgba(7, 13, 17, 0.88) 35%,
            rgba(7, 13, 17, 0.42) 68%,
            rgba(7, 13, 17, 0.3) 100%
        ),
        url("../images/hero/hero-industrial.webp");
    background-position: center;
    background-size: cover;
    transform: scale(1.015);
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.05),
            rgba(0, 0, 0, 0.25)
        );
}

.hero__overlay::after {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.035) 1px,
            transparent 1px
        );
    background-size: 5rem 5rem;
    content: "";
    mask-image: linear-gradient(
        to right,
        black,
        transparent 75%
    );
}

.hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: inherit;
    flex-direction: column;
    justify-content: space-between;
    padding-top: clamp(5rem, 10vh, 8.5rem);
    padding-bottom: var(--space-8);
}

.hero__content {
    width: min(100%, 68rem);
}

.hero__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: clamp(1.5rem, 4vw, 3rem);
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.72rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hero__eyebrow-line {
    width: 3.5rem;
    height: 1px;
    background: var(--color-accent);
}

.hero__title {
    display: flex;
    flex-direction: column;
    max-width: 68rem;
    font-size: clamp(3.2rem, 7.1vw, 7.8rem);
    font-weight: var(--fw-bold);
    letter-spacing: -0.055em;
    line-height: 0.86;
    text-transform: uppercase;
}

.hero__title-accent {
    color: var(--color-accent);
}

.hero__lead {
    max-width: 42rem;
    margin-top: clamp(2rem, 5vw, 3rem);
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(1rem, 1.4vw, 1.3rem);
    line-height: 1.65;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

.hero__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-8);
    margin-top: clamp(5rem, 10vh, 8rem);
    padding-top: var(--space-6);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.hero__principles {
    display: flex;
    gap: clamp(2rem, 5vw, 5rem);
}

.hero-principle {
    display: grid;
    gap: 0.3rem;
}

.hero-principle span {
    color: var(--color-accent);
    font-size: 0.65rem;
    font-weight: var(--fw-bold);
}

.hero-principle strong {
    font-size: 0.78rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero__scroll {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.65rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero__scroll-line {
    position: relative;
    width: 4rem;
    height: 1px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.25);
}

.hero__scroll-line::after {
    position: absolute;
    inset: 0;
    background: var(--color-white);
    content: "";
    transform: translateX(-100%);
    animation: scroll-line 2.2s infinite;
}

@keyframes scroll-line {

    0% {
        transform: translateX(-100%);
    }

    50% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}


/* ============================================================
   15.3 INTRO
   ============================================================ */

.intro {
    background: var(--color-paper);
}

.intro__grid {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) 3fr;
    gap: var(--grid-gap);
}

.intro__content {
    display: grid;
    gap: clamp(3rem, 6vw, 6rem);
}

.intro__heading {
    display: flex;
    max-width: 62rem;
    flex-direction: column;
    font-size: clamp(2.8rem, 6vw, 6.5rem);
    letter-spacing: -0.05em;
    line-height: 0.92;
    text-transform: uppercase;
}

.intro__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.intro__body p {
    grid-column: 2;
    max-width: 34rem;
    color: var(--color-text-muted);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: clamp(5rem, 10vw, 9rem);
    border-top: var(--border);
    border-bottom: var(--border);
}

.trust-item {
    min-height: 18rem;
    padding: var(--space-8);
}

.trust-item + .trust-item {
    border-left: var(--border);
}

.trust-item__number {
    display: block;
    margin-bottom: clamp(3rem, 5vw, 5rem);
    color: var(--color-accent);
    font-size: 0.7rem;
    font-weight: var(--fw-bold);
}

.trust-item h3 {
    margin-bottom: var(--space-4);
    font-size: clamp(1.4rem, 2vw, 2rem);
    text-transform: uppercase;
}

.trust-item p {
    max-width: 24rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}


/* ============================================================
   15.4 SERVICES
   ============================================================ */

.services-section {
    padding-block: var(--section-space);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-4);
}

.service-card {
    position: relative;
    display: flex;
    min-height: 35rem;
    overflow: hidden;
    grid-column: span 4;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-6);
    background: var(--color-navy-2);
    color: var(--color-white);
}

.service-card:nth-child(1),
.service-card:nth-child(2) {
    grid-column: span 6;
}

.service-card__visual,
.service-card__overlay {
    position: absolute;
    inset: 0;
}

.service-card__visual {
    background-position: center;
    background-size: cover;
    transition: transform 700ms var(--ease-out);
}

.service-card--heat .service-card__visual {
    background-image:
        linear-gradient(
            135deg,
            #223842,
            #0b1116
        ),
        url("../images/services/service-waerme.webp");
}

.service-card--cold .service-card__visual {
    background-image:
        linear-gradient(
            135deg,
            #1c303a,
            #111b21
        ),
        url("../images/services/service-kaelte.webp");
}

.service-card--sound .service-card__visual {
    background-image:
        linear-gradient(
            135deg,
            #24323a,
            #11181d
        ),
        url("../images/services/service-schall.webp");
}

.service-card--fire .service-card__visual {
    background-image:
        linear-gradient(
            135deg,
            #3a2828,
            #11181d
        ),
        url("../images/services/service-brand.webp");
}

.service-card--vent .service-card__visual {
    background-image:
        linear-gradient(
            135deg,
            #263942,
            #11181d
        ),
        url("../images/services/service-lueftung.webp");
}

.service-card__overlay {
    background:
        linear-gradient(
            180deg,
            rgba(4, 9, 12, 0.12) 0%,
            rgba(4, 9, 12, 0.2) 45%,
            rgba(4, 9, 12, 0.92) 100%
        );
}

.service-card__top,
.service-card__content {
    position: relative;
    z-index: 2;
}

.service-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.service-card__top > span {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.7rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.1em;
}

.service-card__top svg {
    width: 2.6rem;
    height: 2.6rem;
    padding: 0.65rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition:
        background var(--duration) var(--ease-standard),
        border-color var(--duration) var(--ease-standard),
        transform var(--duration) var(--ease-out);
}

.service-card__content {
    max-width: 32rem;
}

.service-card__content h3 {
    margin-bottom: var(--space-4);
    font-size: clamp(2rem, 3.4vw, 4rem);
    line-height: 0.95;
    text-transform: uppercase;
}

.service-card__content p {
    max-width: 27rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.9rem;
}

.service-card:hover .service-card__visual {
    transform: scale(1.05);
}

.service-card:hover .service-card__top svg {
    border-color: var(--color-accent);
    background: var(--color-accent);
    transform: rotate(45deg);
}


/* ============================================================
   15.5 ABOUT
   ============================================================ */

.about-section {
    overflow: hidden;
}

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: center;
    gap: clamp(3rem, 8vw, 8rem);
}

.about-media {
    position: relative;
    min-height: 44rem;
}

.about-media__image {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            135deg,
            #24353d,
            #11191e
        );
    background-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.05),
            rgba(0, 0, 0, 0.2)
        ),
        url("../images/projects/about-work.webp");
    background-position: center;
    background-size: cover;
}

.about-media__badge {
    position: absolute;
    right: -2rem;
    bottom: 3rem;
    display: grid;
    width: 11rem;
    min-height: 11rem;
    place-content: center;
    background: var(--color-accent);
    color: var(--color-white);
    text-align: center;
}

.about-media__badge span {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: var(--fw-black);
    letter-spacing: -0.06em;
    line-height: 1;
}

.about-media__badge small {
    margin-top: 0.5rem;
    font-size: 0.65rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.about-content__label {
    margin-bottom: clamp(2rem, 5vw, 4rem);
}

.about-content__title {
    display: flex;
    flex-direction: column;
    font-size: clamp(2.7rem, 5vw, 5.4rem);
    line-height: 0.94;
    text-transform: uppercase;
}

.about-content__lead {
    max-width: 37rem;
    margin-top: var(--space-8);
    color: var(--color-text-muted);
    font-size: clamp(1rem, 1.3vw, 1.2rem);
}

.about-values {
    margin-block: clamp(3rem, 6vw, 5rem);
    border-top: var(--border);
}

.about-value {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: var(--space-4);
    padding-block: var(--space-6);
    border-bottom: var(--border);
}

.about-value > span {
    padding-top: 0.15rem;
    color: var(--color-accent);
    font-size: 0.7rem;
    font-weight: var(--fw-bold);
}

.about-value strong {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 1rem;
    font-weight: var(--fw-bold);
}

.about-value p {
    max-width: 35rem;
    color: var(--color-text-muted);
    font-size: 0.88rem;
}


/* ============================================================
   15.6 PROJECTS
   ============================================================ */

.projects-section {
    padding-block: var(--section-space);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.project-card {
    position: relative;
    min-height: 30rem;
    overflow: hidden;
    background: var(--color-navy);
    color: var(--color-white);
}

.project-card--large {
    min-height: 43rem;
    grid-column: 1 / -1;
}

.project-card__image,
.project-card__shade {
    position: absolute;
    inset: 0;
}

.project-card__image {
    background-position: center;
    background-size: cover;
    transition: transform 800ms var(--ease-out);
}

.project-card__image--01 {
    background:
        linear-gradient(
            135deg,
            #20343d,
            #10171b
        );
    background-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0.1)
        ),
        url("../images/projects/project-01.webp");
    background-position: center;
    background-size: cover;
}

.project-card__image--02 {
    background:
        linear-gradient(
            135deg,
            #283942,
            #11181c
        );
    background-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0.1)
        ),
        url("../images/projects/project-02.webp");
    background-position: center;
    background-size: cover;
}

.project-card__image--03 {
    background:
        linear-gradient(
            135deg,
            #1c3039,
            #11181d
        );
    background-image:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0.1)
        ),
        url("../images/projects/project-03.webp");
    background-position: center;
    background-size: cover;
}

.project-card__shade {
    background:
        linear-gradient(
            180deg,
            rgba(5, 9, 12, 0.05) 30%,
            rgba(5, 9, 12, 0.88) 100%
        );
}

.project-card__content {
    position: absolute;
    right: var(--space-8);
    bottom: var(--space-8);
    left: var(--space-8);
    z-index: 2;
}

.project-card__content > span {
    display: block;
    margin-bottom: var(--space-3);
    color: rgba(255, 255, 255, 0.63);
    font-size: 0.68rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.project-card__content h3 {
    max-width: 40rem;
    font-size: clamp(1.8rem, 3vw, 3.7rem);
    line-height: 0.95;
    text-transform: uppercase;
}

.project-card__arrow {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    z-index: 2;
    display: grid;
    width: 3rem;
    height: 3rem;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-size: 1.2rem;
    transition:
        background var(--duration) var(--ease-standard),
        border-color var(--duration) var(--ease-standard),
        transform var(--duration) var(--ease-out);
}

.project-card:hover .project-card__image {
    transform: scale(1.04);
}

.project-card:hover .project-card__arrow {
    border-color: var(--color-accent);
    background: var(--color-accent);
    transform: rotate(45deg);
}


/* ============================================================
   15.7 CTA
   ============================================================ */

.cta-section {
    position: relative;
    overflow: hidden;
    padding-block: clamp(6rem, 12vw, 11rem);
    background: var(--color-ink);
    color: var(--color-white);
}

.cta-section__background {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(207, 46, 46, 0.16),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #0b1116,
            #14232b
        );
}

.cta-section__background::before {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 45rem;
    height: 45rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    content: "";
}

.cta-section__background::after {
    position: absolute;
    top: -5%;
    right: 3%;
    width: 30rem;
    height: 30rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    content: "";
}

.cta-section__inner {
    position: relative;
    z-index: 2;
}

.cta-section__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: clamp(3rem, 7vw, 6rem);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.7rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.cta-section__eyebrow > span {
    width: 3rem;
    height: 1px;
    background: var(--color-accent);
}

.cta-section__content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    align-items: end;
    gap: clamp(3rem, 8vw, 8rem);
}

.cta-section__content h2 {
    display: flex;
    flex-direction: column;
    font-size: clamp(3.5rem, 8vw, 8rem);
    letter-spacing: -0.055em;
    line-height: 0.86;
    text-transform: uppercase;
}

.cta-section__action p {
    max-width: 28rem;
    margin-bottom: var(--space-8);
    color: rgba(255, 255, 255, 0.65);
}


/* ============================================================
   15.8 FOOTER
   ============================================================ */

.site-footer {
    padding-top: clamp(4rem, 8vw, 7rem);
    background: #080d11;
    color: rgba(255, 255, 255, 0.68);
}

.footer-main {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    padding-bottom: clamp(4rem, 8vw, 7rem);
}

.footer-brand {
    max-width: 23rem;
}

.footer-logo {
    display: inline-block;
    margin-bottom: var(--space-6);
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: clamp(3rem, 5vw, 5rem);
    font-weight: var(--fw-black);
    letter-spacing: -0.06em;
    line-height: 0.8;
}

.footer-brand p {
    max-width: 20rem;
    font-size: 0.9rem;
}

.footer-column__title {
    margin-bottom: var(--space-6);
    color: var(--color-white);
    font-size: 0.7rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.footer-column ul {
    display: grid;
    gap: var(--space-3);
}

.footer-column a {
    font-size: 0.85rem;
    transition: color var(--duration-fast) var(--ease-standard);
}

.footer-column a:hover {
    color: var(--color-white);
}

.footer-bottom {
    display: flex;
    min-height: 5rem;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.72rem;
}

.footer-legal {
    display: flex;
    gap: var(--space-6);
}

.footer-legal a:hover {
    color: var(--color-white);
}


/* ============================================================
   15.9 SCROLL REVEAL
   ============================================================ */

.reveal {
    opacity: 0;
    transform: translateY(2rem);
    transition:
        opacity 700ms var(--ease-out),
        transform 700ms var(--ease-out);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal:nth-child(2) {
    transition-delay: 60ms;
}

.reveal:nth-child(3) {
    transition-delay: 120ms;
}

.reveal:nth-child(4) {
    transition-delay: 180ms;
}

.reveal:nth-child(5) {
    transition-delay: 240ms;
}


/* ============================================================
   15.10 RESPONSIVE
   ============================================================ */

@media (max-width: 63.99rem) {

    .hero {
        min-height: calc(100svh - 4.75rem);
    }

    .hero__title {
        font-size: clamp(3rem, 10vw, 6.5rem);
    }

    .intro__grid,
    .section-header {
        grid-template-columns: 1fr;
    }

    .intro__content {
        gap: var(--space-10);
    }

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

    .intro__body p {
        grid-column: auto;
    }

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

    .trust-item {
        min-height: auto;
    }

    .trust-item + .trust-item {
        border-top: var(--border);
        border-left: 0;
    }

    .trust-item__number {
        margin-bottom: var(--space-8);
    }

    .service-card,
    .service-card:nth-child(1),
    .service-card:nth-child(2) {
        min-height: 31rem;
        grid-column: span 6;
    }

    .service-card:nth-child(5) {
        grid-column: 1 / -1;
    }

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

    .about-media {
        min-height: 36rem;
    }

    .about-media__badge {
        right: 2rem;
    }

    .cta-section__content {
        grid-template-columns: 1fr;
    }

    .cta-section__action {
        max-width: 32rem;
    }

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

    .footer-brand {
        grid-column: 1 / -1;
    }

}


@media (max-width: 47.99rem) {

    .hero__inner {
        padding-top: 5rem;
    }

    .hero__eyebrow {
        margin-bottom: var(--space-6);
    }

    .hero__eyebrow-line {
        width: 2rem;
    }

    .hero__title {
        font-size: clamp(2.85rem, 14vw, 5rem);
        line-height: 0.9;
    }

    .hero__lead {
        margin-top: var(--space-6);
    }

    .hero__actions {
        display: grid;
    }

    .hero__actions .btn {
        width: 100%;
    }

    .hero__bottom {
        margin-top: 5rem;
    }

    .hero__principles {
        width: 100%;
        justify-content: space-between;
        gap: var(--space-4);
    }

    .hero__scroll {
        display: none;
    }

    .hero-principle strong {
        font-size: 0.65rem;
    }

    .section-header__main {
        display: grid;
        align-items: start;
    }

    .section-header__main h2 {
        font-size: clamp(2.4rem, 12vw, 4rem);
    }

    .intro__heading {
        font-size: clamp(2.6rem, 12vw, 4.5rem);
    }

    .trust-item {
        padding-inline: 0;
    }

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

    .service-card,
    .service-card:nth-child(1),
    .service-card:nth-child(2),
    .service-card:nth-child(5) {
        min-height: 29rem;
        grid-column: auto;
    }

    .service-card {
        padding: var(--space-5);
    }

    .service-card__content h3 {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .about-media {
        min-height: 29rem;
    }

    .about-media__badge {
        right: 1rem;
        bottom: 1rem;
        width: 8rem;
        min-height: 8rem;
    }

    .about-media__badge span {
        font-size: 2rem;
    }

    .about-content__title {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }

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

    .project-card,
    .project-card--large {
        min-height: 30rem;
        grid-column: auto;
    }

    .project-card__content {
        right: var(--space-5);
        bottom: var(--space-5);
        left: var(--space-5);
    }

    .project-card__content h3 {
        font-size: clamp(1.8rem, 9vw, 2.8rem);
    }

    .cta-section__content h2 {
        font-size: clamp(3.2rem, 15vw, 5.4rem);
    }

    .footer-main {
        grid-template-columns: 1fr;
    }

    .footer-brand {
        grid-column: auto;
    }

    .footer-column {
        padding-top: var(--space-6);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        justify-content: center;
        padding-block: var(--space-5);
    }

}


@media (max-width: 29rem) {

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

    .hero-principle strong {
        font-size: 0.58rem;
    }

}


@media (prefers-reduced-motion: reduce) {

    .hero__scroll-line::after {
        animation: none;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

}
/* ============================================================
   16. RESPONSIVE QA & HARDENING
   Phase 4
   ============================================================ */


/* ============================================================
   16.1 GLOBAL ROBUSTNESS
   ============================================================ */

html {
    scroll-padding-top: 8.5rem;
}

body {
    min-width: 20rem;
    overflow-x: hidden;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

a,
button {
    -webkit-tap-highlight-color: transparent;
}

button,
input,
textarea,
select {
    font: inherit;
}


/*
 * Prevent long translated words / addresses / emails
 * from destroying responsive layouts.
 */
p,
h1,
h2,
h3,
h4,
h5,
h6,
a,
span,
strong {
    overflow-wrap: break-word;
}


/* ============================================================
   16.2 FOCUS / KEYBOARD ACCESSIBILITY
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

.menu-toggle:focus-visible {
    outline-color: var(--color-white);
}

.mobile-language:focus-visible {
    outline-color: var(--color-white);
}


/* ============================================================
   16.3 HEADER HARDENING
   ============================================================ */

.site-header {
    isolation: isolate;
}

.navbar__inner {
    width: 100%;
}

.brand {
    min-width: 0;
}

.navbar__actions {
    min-width: max-content;
}


/*
 * Keep navbar from breaking slightly before
 * tablet breakpoint on laptops with narrower widths.
 */
@media (max-width: 81rem) {

    .navbar__inner {
        gap: var(--space-5);
    }

    .desktop-nav__list {
        gap: 1rem;
    }

    .desktop-nav__link {
        font-size: 0.78rem;
    }

    .brand__description {
        max-width: 6.5rem;
        font-size: 0.6rem;
    }

}


/* ============================================================
   16.4 MOBILE NAV SAFE HEIGHT
   ============================================================ */

.mobile-navigation {
    height: 100dvh;
    min-height: 100svh;
}

.mobile-navigation__inner {
    min-height: 100dvh;
}


/*
 * Allows the nav to remain usable on short landscape phones.
 */
@media (max-height: 42rem) and (max-width: 63.99rem) {

    .mobile-navigation__inner {
        justify-content: flex-start;
        padding-top: 6rem;
    }

    .mobile-navigation__link {
        min-height: 3.6rem;
        font-size: clamp(1.5rem, 6vh, 2rem);
    }

    .mobile-navigation__bottom {
        padding-top: var(--space-7);
        padding-bottom: var(--space-5);
    }

}


/* ============================================================
   16.5 HERO FLUIDITY
   ============================================================ */

.hero__content,
.hero__title,
.hero__lead {
    min-width: 0;
}

.hero__title span {
    width: fit-content;
    max-width: 100%;
}

.hero__actions .btn {
    min-width: 0;
}

@media (min-width: 100rem) {

    .hero__content {
        width: min(100%, 76rem);
    }

    .hero__title {
        max-width: 76rem;
        font-size: clamp(6rem, 6.6vw, 8.8rem);
    }

    .hero__lead {
        max-width: 46rem;
    }

}


@media (max-width: 63.99rem) {

    html {
        scroll-padding-top: 5.5rem;
    }

    .hero__inner {
        min-height: calc(100svh - 4.75rem);
    }

}


/* ============================================================
   16.6 TABLET PORTRAIT
   ============================================================ */

@media (min-width: 48rem) and (max-width: 63.99rem) {

    .hero__title {
        max-width: 50rem;
        font-size: clamp(4.5rem, 9vw, 6.5rem);
    }

    .hero__lead {
        max-width: 38rem;
    }

    .hero__bottom {
        align-items: center;
    }

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

    .service-card,
    .service-card:nth-child(1),
    .service-card:nth-child(2),
    .service-card:nth-child(5) {
        min-height: 30rem;
        grid-column: auto;
    }

    .service-card:last-child {
        grid-column: 1 / -1;
    }

    .projects-grid {
        gap: var(--space-3);
    }

}


/* ============================================================
   16.7 PHONE TYPOGRAPHY
   ============================================================ */

@media (max-width: 47.99rem) {

    html {
        scroll-padding-top: 5.25rem;
    }

    .section {
        padding-block:
            clamp(4.5rem, 18vw, 6.5rem);
    }

    .services-section,
    .projects-section {
        padding-block:
            clamp(4.5rem, 18vw, 6.5rem);
    }

    .section-header {
        margin-bottom:
            clamp(2.5rem, 12vw, 4rem);
    }

    .section-index {
        margin-bottom: var(--space-2);
    }

    .section-label {
        font-size: 0.68rem;
    }

    .hero__title {
        word-break: normal;
        hyphens: auto;
    }

    .hero__lead {
        max-width: 31rem;
        font-size: 1rem;
        line-height: 1.55;
    }

    .hero__bottom {
        padding-top: var(--space-5);
    }

    .hero-principle {
        min-width: 0;
    }

    .hero-principle strong {
        line-height: 1.25;
    }

    .intro__content {
        min-width: 0;
    }

    .intro__heading {
        hyphens: auto;
    }

    .trust-item h3 {
        font-size: clamp(1.5rem, 7vw, 2rem);
    }

    .about-value {
        grid-template-columns: 2rem minmax(0, 1fr);
    }

    .cta-section__content h2 {
        hyphens: auto;
    }

}


/* ============================================================
   16.8 VERY SMALL PHONES — 320–374px
   ============================================================ */

@media (max-width: 23.4375rem) {

    :root {
        --gutter: 1rem;
    }

    .navbar__inner,
    .site-header.is-scrolled .navbar__inner {
        min-height: 4.25rem;
    }

    .brand {
        gap: 0.55rem;
    }

    .brand__name {
        font-size: 1.6rem;
    }

    .menu-toggle {
        width: 2.7rem;
        height: 2.7rem;
    }

    .mobile-navigation__inner {
        padding-top: 5.75rem;
    }

    .mobile-navigation__link {
        min-height: 4.1rem;
        gap: var(--space-3);
        font-size: clamp(1.55rem, 8vw, 2rem);
    }

    .hero {
        min-height: calc(100svh - 4.25rem);
    }

    .hero__inner {
        padding-top: 3.75rem;
        padding-bottom: var(--space-5);
    }

    .hero__eyebrow {
        gap: var(--space-3);
        font-size: 0.61rem;
        letter-spacing: 0.11em;
    }

    .hero__eyebrow-line {
        width: 1.5rem;
    }

    .hero__title {
        font-size: clamp(2.55rem, 13vw, 3.5rem);
        letter-spacing: -0.045em;
    }

    .hero__lead {
        font-size: 0.92rem;
    }

    .hero__actions {
        margin-top: var(--space-6);
    }

    .hero__bottom {
        margin-top: 4rem;
    }

    .hero__principles {
        gap: 0.65rem;
    }

    .hero-principle span {
        font-size: 0.55rem;
    }

    .hero-principle strong {
        font-size: 0.52rem;
        letter-spacing: 0.05em;
    }

    .intro__heading {
        font-size: clamp(2.35rem, 12vw, 3.4rem);
    }

    .service-card,
    .service-card:nth-child(1),
    .service-card:nth-child(2),
    .service-card:nth-child(5) {
        min-height: 26rem;
    }

    .service-card {
        padding: var(--space-4);
    }

    .service-card__content h3 {
        font-size: 1.9rem;
    }

    .about-media {
        min-height: 24rem;
    }

    .about-media__badge {
        width: 6.8rem;
        min-height: 6.8rem;
    }

    .about-media__badge span {
        font-size: 1.7rem;
    }

    .about-media__badge small {
        font-size: 0.52rem;
    }

    .project-card,
    .project-card--large {
        min-height: 26rem;
    }

    .project-card__arrow {
        top: var(--space-4);
        right: var(--space-4);
        width: 2.7rem;
        height: 2.7rem;
    }

    .cta-section {
        padding-block: 5rem;
    }

    .cta-section__content h2 {
        font-size: clamp(2.8rem, 14vw, 4rem);
    }

}


/* ============================================================
   16.9 WIDE DESKTOPS
   ============================================================ */

@media (min-width: 90rem) {

    .service-card {
        min-height: 39rem;
    }

    .project-card {
        min-height: 34rem;
    }

    .project-card--large {
        min-height: 48rem;
    }

    .about-media {
        min-height: 48rem;
    }

}


/* ============================================================
   16.10 ULTRAWIDE PROTECTION
   ============================================================ */

@media (min-width: 120rem) {

    .hero__background {
        background-position: center 45%;
    }

    .hero__inner {
        padding-top: 8rem;
    }

}


/* ============================================================
   16.11 TOUCH DEVICES
   Avoid hover-only interaction assumptions
   ============================================================ */

@media (hover: none) {

    .service-card:hover .service-card__visual,
    .project-card:hover .project-card__image {
        transform: none;
    }

    .service-card__top svg,
    .project-card__arrow {
        border-color: rgba(255, 255, 255, 0.5);
    }

}


/* ============================================================
   16.12 HIGH CONTRAST PREFERENCE
   ============================================================ */

@media (prefers-contrast: more) {

    .hero__lead,
    .service-card__content p,
    .cta-section__action p {
        color: rgba(255, 255, 255, 0.9);
    }

    .section-label,
    .intro__body p,
    .about-content__lead,
    .about-value p {
        color: var(--color-text);
    }

}


/* ============================================================
   16.13 NO-JS / REVEAL FAILSAFE
   ============================================================ */

html:not(.js) .reveal {
    opacity: 1;
    transform: none;
}


/* ============================================================
   16.14 PRINT
   ============================================================ */

@media print {

    .topbar,
    .navbar__actions,
    .mobile-navigation,
    .hero__scroll,
    .cta-section {
        display: none !important;
    }

    .site-header {
        position: static;
    }

    .navbar {
        box-shadow: none !important;
    }

    .hero {
        min-height: auto;
        background: white;
        color: black;
    }

    .hero__background,
    .hero__overlay {
        display: none;
    }

    .hero__lead,
    .hero__eyebrow {
        color: black;
    }

}
/* ============================================================
   17. RESPONSIVE CORRECTIONS
   Phase 4.1 — Final Responsive Hardening
   ============================================================ */


/* ============================================================
   17.1 HEADER HEIGHT TOKENS
   One source of truth for all viewport calculations.
   ============================================================ */

:root {
    --topbar-height: 2.5rem;
    --navbar-height: 5.5rem;
    --navbar-height-scrolled: 4.75rem;

    --header-height-desktop:
        calc(
            var(--topbar-height) +
            var(--navbar-height)
        );

    --header-height-tablet:
        calc(
            var(--topbar-height) +
            var(--navbar-height-scrolled)
        );

    --header-height-mobile:
        4.75rem;
}


/* ============================================================
   17.2 PREVENT UI TEXT FROM WRAPPING
   Content can wrap; navigation controls should not.
   ============================================================ */

.brand,
.desktop-nav__link,
.navbar__cta,
.language-switcher__button,
.topbar__item,
.topbar__hours,
.menu-toggle,
.mobile-language {
    overflow-wrap: normal;
    word-break: normal;
}

.desktop-nav__link,
.navbar__cta,
.language-switcher__button,
.topbar__hours {
    white-space: nowrap;
}


/* ============================================================
   17.3 DESKTOP NAV CONTENT BREAKPOINT
   Break by available content width, not generic device width.
   ============================================================ */

/*
 * Up to 1119px we use the compact/mobile navigation.
 * This gives German, English, Romanian and Polish enough room.
 */

@media (max-width: 69.999rem) {

    .desktop-nav {
        display: none;
    }

    .language-switcher {
        display: none;
    }

    .menu-toggle {
        display: inline-flex;
    }

    .navbar__inner,
    .site-header.is-scrolled .navbar__inner {
        min-height: var(--navbar-height-scrolled);
    }

    .mobile-navigation {
        z-index: 1;
    }

}


/*
 * Project CTA stays hidden slightly longer.
 * There is no value in squeezing the navigation just to show it.
 */

@media (max-width: 83.999rem) {

    .navbar__cta {
        display: none;
    }

}


/* ============================================================
   17.4 MOBILE NAVIGATION POSITION
   Overlay starts BELOW the visible header instead of using
   artificial padding to simulate header space.
   ============================================================ */

@media (max-width: 69.999rem) {

    .mobile-navigation {
        top: var(--header-height-tablet);
        right: 0;
        bottom: 0;
        left: 0;

        width: 100%;
        height: auto;
        min-height: 0;
    }

    .mobile-navigation__inner {
        width:
            min(
                calc(100% - (2 * var(--gutter))),
                var(--container)
            );

        min-height: 100%;
        padding-top: var(--space-8);
        padding-bottom:
            max(
                var(--space-8),
                env(safe-area-inset-bottom)
            );
    }

}


/*
 * Phones do not show the topbar.
 */

@media (max-width: 47.99rem) {

    .mobile-navigation {
        top: var(--header-height-mobile);
    }

    .mobile-navigation__inner {
        padding-top: var(--space-7);
    }

}


/* ============================================================
   17.5 SHORT VIEWPORTS / LANDSCAPE PHONES
   ============================================================ */

@media
    (max-width: 69.999rem)
    and (max-height: 42rem) {

    .mobile-navigation__inner {
        min-height: auto;
        justify-content: flex-start;
        padding-top: var(--space-5);
    }

    .mobile-navigation__link {
        min-height: 3.4rem;
        font-size:
            clamp(
                1.45rem,
                5.5vh,
                2rem
            );
    }

    .mobile-navigation__bottom {
        padding-top: var(--space-6);
    }

    .mobile-navigation__contact {
        padding-bottom:
            env(safe-area-inset-bottom);
    }

}


/* ============================================================
   17.6 HERO HEIGHT — DESKTOP
   ============================================================ */

@media (min-width: 70rem) {

    .hero {
        min-height:
            calc(
                100svh -
                var(--header-height-desktop)
            );
    }

}


/* ============================================================
   17.7 HERO HEIGHT — TABLET
   Topbar is still visible.
   ============================================================ */

@media
    (min-width: 48rem)
    and (max-width: 69.999rem) {

    .hero {
        min-height:
            calc(
                100svh -
                var(--header-height-tablet)
            );
    }

    .hero__inner {
        min-height: inherit;
    }

}


/* ============================================================
   17.8 HERO HEIGHT — PHONE
   Topbar is hidden.
   ============================================================ */

@media (max-width: 47.99rem) {

    .hero {
        min-height:
            calc(
                100svh -
                var(--header-height-mobile)
            );
    }

    .hero__inner {
        min-height: inherit;
    }

}


/* ============================================================
   17.9 ANCHOR OFFSET
   Prevent sticky header covering section headings.
   ============================================================ */

@media (min-width: 70rem) {

    html {
        scroll-padding-top:
            calc(
                var(--header-height-desktop) +
                1rem
            );
    }

}


@media
    (min-width: 48rem)
    and (max-width: 69.999rem) {

    html {
        scroll-padding-top:
            calc(
                var(--header-height-tablet) +
                1rem
            );
    }

}


@media (max-width: 47.99rem) {

    html {
        scroll-padding-top:
            calc(
                var(--header-height-mobile) +
                0.75rem
            );
    }

}


/* ============================================================
   17.10 TABLET NAVBAR
   ============================================================ */

@media
    (min-width: 48rem)
    and (max-width: 69.999rem) {

    .navbar__inner {
        min-height:
            var(--navbar-height-scrolled);
    }

    .brand__name {
        font-size: 1.9rem;
    }

}


/* ============================================================
   17.11 TABLET HERO BALANCE
   ============================================================ */

@media
    (min-width: 48rem)
    and (max-width: 69.999rem) {

    .hero__inner {
        padding-top:
            clamp(
                4rem,
                8vh,
                6rem
            );

        padding-bottom:
            var(--space-7);
    }

    .hero__title {
        width: min(100%, 52rem);

        font-size:
            clamp(
                4.2rem,
                9vw,
                6.4rem
            );
    }

    .hero__lead {
        width: min(100%, 39rem);
    }

    .hero__bottom {
        margin-top:
            clamp(
                4rem,
                8vh,
                6rem
            );
    }

}


/* ============================================================
   17.12 PHONE HERO BALANCE
   ============================================================ */

@media (max-width: 47.99rem) {

    .hero__inner {
        justify-content: space-between;

        padding-top:
            clamp(
                3.5rem,
                10vw,
                5rem
            );
    }

    .hero__content {
        width: 100%;
    }

    .hero__title span {
        max-width: 100%;
    }

    .hero__actions {
        width: 100%;
    }

    .hero__actions .btn {
        justify-content: center;
    }

}


/* ============================================================
   17.13 320px DEVICES
   ============================================================ */

@media (max-width: 23.4375rem) {

    :root {
        --header-height-mobile: 4.25rem;
    }

    .navbar__inner,
    .site-header.is-scrolled .navbar__inner {
        min-height:
            var(--header-height-mobile);
    }

    .mobile-navigation {
        top: var(--header-height-mobile);
    }

    .hero {
        min-height:
            calc(
                100svh -
                var(--header-height-mobile)
            );
    }

    html {
        scroll-padding-top:
            calc(
                var(--header-height-mobile) +
                0.75rem
            );
    }

}


/* ============================================================
   17.14 MOBILE SERVICE CARDS
   Avoid excessive vertical pages on small screens while
   preserving photographic impact.
   ============================================================ */

@media (max-width: 47.99rem) {

    .service-card,
    .service-card:nth-child(1),
    .service-card:nth-child(2),
    .service-card:nth-child(5) {
        min-height:
            clamp(
                25rem,
                105vw,
                31rem
            );
    }

}


/* ============================================================
   17.15 PROJECT CARDS
   ============================================================ */

@media (max-width: 47.99rem) {

    .project-card,
    .project-card--large {
        min-height:
            clamp(
                25rem,
                108vw,
                31rem
            );
    }

}


/* ============================================================
   17.16 ABOUT IMAGE
   Avoid fixed oversized visual on short devices.
   ============================================================ */

@media (max-width: 47.99rem) {

    .about-media {
        min-height:
            clamp(
                24rem,
                110vw,
                32rem
            );
    }

}


/* ============================================================
   17.17 POLISH / ROMANIAN LONG CONTENT
   Allow display headlines to wrap naturally without destroying
   their editorial appearance.
   ============================================================ */

html[lang="pl"] .hero__title,
html[lang="ro"] .hero__title {
    letter-spacing: -0.045em;
}

@media (max-width: 47.99rem) {

    html[lang="pl"] .hero__title,
    html[lang="ro"] .hero__title {
        font-size:
            clamp(
                2.65rem,
                12.5vw,
                4.6rem
            );
    }

    html[lang="pl"] .intro__heading,
    html[lang="ro"] .intro__heading {
        font-size:
            clamp(
                2.35rem,
                11vw,
                4rem
            );
    }

}


/* ============================================================
   17.18 SAFE AREA — MODERN iPHONES
   ============================================================ */

@supports (
    padding-left:
        env(safe-area-inset-left)
) {

    @media (max-width: 47.99rem) {

        .navbar__inner {
            padding-left:
                max(
                    0px,
                    env(safe-area-inset-left)
                );

            padding-right:
                max(
                    0px,
                    env(safe-area-inset-right)
                );
        }

        .mobile-navigation__inner {
            padding-bottom:
                max(
                    var(--space-6),
                    env(safe-area-inset-bottom)
                );
        }

    }

}


/* ============================================================
   17.19 TOUCH TARGETS
   Minimum practical target sizes.
   ============================================================ */

@media (pointer: coarse) {

    .language-switcher__button,
    .mobile-language,
    .menu-toggle {
        min-width: 2.75rem;
        min-height: 2.75rem;
    }

    .footer-column a {
        display: inline-flex;
        min-height: 2.5rem;
        align-items: center;
    }

}


/* ============================================================
   17.20 LARGE DESKTOP TYPOGRAPHY CAP
   Prevent typography becoming comically oversized on ultrawide.
   ============================================================ */

@media (min-width: 120rem) {

    .hero__title {
        font-size: 8.5rem;
    }

    .intro__heading {
        font-size: 6.5rem;
    }

    .cta-section__content h2 {
        font-size: 8rem;
    }

}


/* ============================================================
   17.21 LANDSCAPE MOBILE HERO
   ============================================================ */

@media
    (max-width: 47.99rem)
    and (orientation: landscape)
    and (max-height: 31rem) {

    .hero {
        min-height: auto;
    }

    .hero__inner {
        min-height: auto;
        padding-top: var(--space-10);
        padding-bottom: var(--space-8);
    }

    .hero__title {
        font-size:
            clamp(
                2.5rem,
                9vw,
                4rem
            );
    }

    .hero__lead {
        max-width: 37rem;
    }

    .hero__bottom {
        margin-top: var(--space-10);
    }

}


/* ============================================================
   17.22 REMOVE OBSOLETE MOBILE NAV HEIGHT ASSUMPTIONS
   Overrides earlier Phase 4 rules.
   ============================================================ */

@media (max-width: 69.999rem) {

    .mobile-navigation {
        min-height: unset;
    }

    .mobile-navigation__inner {
        min-height: 100%;
    }

}
/* ============================================================
   18. SERVICES PAGE
   Phase 5
   ============================================================ */


/* ============================================================
   18.1 PAGE HERO
   ============================================================ */

.page-hero {
    position: relative;
    overflow: hidden;
    background: var(--color-ink);
    color: var(--color-white);
}

.page-hero__background,
.page-hero__overlay {
    position: absolute;
    inset: 0;
}

.page-hero__background {
    background:
        linear-gradient(
            125deg,
            #0d171d 0%,
            #172a34 55%,
            #263b45 100%
        );

    background-image:
        linear-gradient(
            90deg,
            rgba(6, 11, 15, 0.96) 0%,
            rgba(6, 11, 15, 0.82) 45%,
            rgba(6, 11, 15, 0.4) 100%
        ),
        url("../images/hero/services-hero.webp");

    background-position: center;
    background-size: cover;
}

.page-hero__overlay {
    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.04),
            rgba(0, 0, 0, 0.22)
        );
}

.page-hero__inner {
    position: relative;
    z-index: 2;

    display: flex;

    min-height:
        clamp(
            42rem,
            75svh,
            56rem
        );

    flex-direction: column;
    justify-content: space-between;

    padding-top:
        clamp(
            3rem,
            8vh,
            6rem
        );

    padding-bottom:
        clamp(
            3rem,
            7vh,
            5rem
        );
}

.page-hero__breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-3);

    color: rgba(255, 255, 255, 0.54);

    font-size: 0.7rem;
    font-weight: var(--fw-semibold);

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-hero__breadcrumb a {
    transition:
        color var(--duration-fast)
        var(--ease-standard);
}

.page-hero__breadcrumb a:hover {
    color: var(--color-white);
}

.page-hero__content {
    width: min(100%, 72rem);
}

.page-hero__eyebrow {
    margin-bottom: var(--space-6);

    color: var(--color-accent);

    font-size: 0.72rem;
    font-weight: var(--fw-bold);

    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.page-hero__title {
    display: flex;
    flex-direction: column;

    max-width: 72rem;

    font-size:
        clamp(
            3.4rem,
            7.5vw,
            8rem
        );

    letter-spacing: -0.055em;
    line-height: 0.87;

    text-transform: uppercase;
}

.page-hero__lead {
    max-width: 43rem;

    margin-top:
        clamp(
            2rem,
            4vw,
            3rem
        );

    color: rgba(255, 255, 255, 0.7);

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.25rem
        );

    line-height: 1.65;
}

.page-hero__number {
    align-self: flex-end;

    color: rgba(255, 255, 255, 0.34);

    font-size: 0.7rem;
    font-weight: var(--fw-bold);

    letter-spacing: 0.16em;
}


/* ============================================================
   18.2 SERVICE INDEX
   ============================================================ */

.service-index {
    position: sticky;

    top: var(--header-height-desktop);

    z-index: calc(var(--z-sticky) - 1);

    border-bottom: var(--border);

    background:
        rgba(251, 250, 247, 0.96);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.service-index__inner {
    display: grid;
    grid-template-columns:
        repeat(5, 1fr);
}

.service-index a {
    display: flex;

    min-width: 0;
    min-height: 5rem;

    align-items: center;

    gap: var(--space-3);

    padding-inline:
        clamp(
            0.8rem,
            1.5vw,
            1.4rem
        );

    border-left: var(--border);

    transition:
        background var(--duration-fast)
        var(--ease-standard),
        color var(--duration-fast)
        var(--ease-standard);
}

.service-index a:last-child {
    border-right: var(--border);
}

.service-index a > span {
    flex: 0 0 auto;

    color: var(--color-accent);

    font-size: 0.62rem;
    font-weight: var(--fw-bold);
}

.service-index a strong {
    min-width: 0;

    font-size: 0.73rem;
    font-weight: var(--fw-bold);

    letter-spacing: 0.04em;

    overflow-wrap: normal;
}

.service-index a:hover {
    background: var(--color-ink);
    color: var(--color-white);
}


/* ============================================================
   18.3 SERVICE DETAIL
   ============================================================ */

.service-detail {
    padding-block:
        clamp(
            6rem,
            11vw,
            11rem
        );

    background: var(--color-paper);

    scroll-margin-top:
        calc(
            var(--header-height-desktop) +
            5rem
        );
}

.service-detail--dark {
    background: var(--color-ink);
    color: var(--color-white);
}

.service-detail__grid {
    display: grid;

    grid-template-columns:
        minmax(8rem, 1fr)
        minmax(0, 3fr);

    gap: var(--grid-gap);
}

.service-detail__meta {
    position: relative;
}

.service-detail__meta > span {
    display: block;

    margin-bottom: var(--space-3);

    color: var(--color-accent);

    font-size: 0.7rem;
    font-weight: var(--fw-bold);

    letter-spacing: 0.12em;
}

.service-detail__meta p {
    color: var(--color-text-muted);

    font-size: 0.72rem;
    font-weight: var(--fw-bold);

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.service-detail--dark
.service-detail__meta p {
    color: rgba(255, 255, 255, 0.48);
}

.service-detail__title {
    max-width: 65rem;

    font-size:
        clamp(
            2.8rem,
            5.8vw,
            6.5rem
        );

    letter-spacing: -0.05em;
    line-height: 0.91;

    text-transform: uppercase;
}

.service-detail__body {
    display: grid;

    grid-template-columns:
        minmax(0, 0.82fr)
        minmax(0, 1.18fr);

    align-items: end;

    gap:
        clamp(
            3rem,
            7vw,
            7rem
        );

    margin-top:
        clamp(
            4rem,
            8vw,
            7rem
        );
}

.service-detail__copy {
    align-self: start;
}

.service-detail__lead {
    margin-bottom: var(--space-6);

    color: var(--color-text);

    font-size:
        clamp(
            1.1rem,
            1.6vw,
            1.4rem
        );

    line-height: 1.55;
}

.service-detail--dark
.service-detail__lead {
    color: rgba(255, 255, 255, 0.92);
}

.service-detail__copy > p:not(.service-detail__lead) {
    color: var(--color-text-muted);

    font-size: 0.95rem;
    line-height: 1.75;
}

.service-detail--dark
.service-detail__copy > p:not(.service-detail__lead) {
    color: rgba(255, 255, 255, 0.58);
}

.service-detail__points {
    display: grid;

    margin-top: var(--space-8);

    border-top: var(--border);
}

.service-detail--dark
.service-detail__points {
    border-color:
        rgba(255, 255, 255, 0.13);
}

.service-detail__points li {
    position: relative;

    padding:
        var(--space-4)
        var(--space-3)
        var(--space-4)
        1.8rem;

    border-bottom: var(--border);

    color: var(--color-text);

    font-size: 0.84rem;
    font-weight: var(--fw-semibold);
}

.service-detail--dark
.service-detail__points li {
    border-color:
        rgba(255, 255, 255, 0.13);

    color: rgba(255, 255, 255, 0.82);
}

.service-detail__points li::before {
    position: absolute;

    top: 50%;
    left: 0;

    width: 0.45rem;
    height: 0.45rem;

    background: var(--color-accent);

    content: "";

    transform:
        translateY(-50%);
}

.service-detail__visual {
    position: relative;

    display: flex;

    min-height:
        clamp(
            27rem,
            42vw,
            43rem
        );

    overflow: hidden;

    align-items: flex-end;

    padding:
        clamp(
            1.5rem,
            3vw,
            2.5rem
        );

    background-position: center;
    background-size: cover;

    color: var(--color-white);
}

.service-detail__visual::before {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(5, 10, 13, 0.05),
            rgba(5, 10, 13, 0.72)
        );

    content: "";
}

.service-detail__visual--heat {
    background:
        linear-gradient(
            135deg,
            #3a474b,
            #172126
        );

    background-image:
        linear-gradient(
            180deg,
            transparent,
            rgba(4, 8, 10, 0.7)
        ),
        url("../images/services/service-waerme.webp");
}

.service-detail__visual--cold {
    background:
        linear-gradient(
            135deg,
            #24404b,
            #111b20
        );

    background-image:
        linear-gradient(
            180deg,
            transparent,
            rgba(4, 8, 10, 0.7)
        ),
        url("../images/services/service-kaelte.webp");
}

.service-detail__visual--sound {
    background:
        linear-gradient(
            135deg,
            #374147,
            #151d21
        );

    background-image:
        linear-gradient(
            180deg,
            transparent,
            rgba(4, 8, 10, 0.7)
        ),
        url("../images/services/service-schall.webp");
}

.service-detail__visual--fire {
    background:
        linear-gradient(
            135deg,
            #493131,
            #171c1f
        );

    background-image:
        linear-gradient(
            180deg,
            transparent,
            rgba(4, 8, 10, 0.7)
        ),
        url("../images/services/service-brand.webp");
}

.service-detail__visual--vent {
    background:
        linear-gradient(
            135deg,
            #31434b,
            #121b20
        );

    background-image:
        linear-gradient(
            180deg,
            transparent,
            rgba(4, 8, 10, 0.7)
        ),
        url("../images/services/service-lueftung.webp");
}

.service-detail__visual > span {
    position: relative;
    z-index: 2;

    font-size:
        clamp(
            1.6rem,
            3vw,
            3rem
        );

    font-weight: var(--fw-bold);

    letter-spacing: -0.025em;
    text-transform: uppercase;
}

.service-detail__visual-number {
    position: absolute;

    top:
        clamp(
            1.5rem,
            3vw,
            2.5rem
        );

    right:
        clamp(
            1.5rem,
            3vw,
            2.5rem
        );

    z-index: 2;

    color: rgba(255, 255, 255, 0.52);

    font-size: 0.7rem;
    font-weight: var(--fw-bold);

    letter-spacing: 0.14em;
}


/* ============================================================
   18.4 PROCESS
   ============================================================ */

.services-process {
    padding-block: var(--section-space);

    background: var(--color-navy);
    color: var(--color-white);
}

.process-grid {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    border-top:
        1px solid
        rgba(255, 255, 255, 0.14);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.14);
}

.process-step {
    min-height: 21rem;

    padding:
        clamp(
            1.5rem,
            3vw,
            2.5rem
        );
}

.process-step + .process-step {
    border-left:
        1px solid
        rgba(255, 255, 255, 0.14);
}

.process-step > span {
    display: block;

    margin-bottom:
        clamp(
            4rem,
            7vw,
            7rem
        );

    color: var(--color-accent);

    font-size: 0.7rem;
    font-weight: var(--fw-bold);
}

.process-step h3 {
    margin-bottom: var(--space-4);

    font-size:
        clamp(
            1.5rem,
            2vw,
            2.2rem
        );

    text-transform: uppercase;
}

.process-step p {
    max-width: 25rem;

    color: rgba(255, 255, 255, 0.56);

    font-size: 0.9rem;
}


/* ============================================================
   18.5 TABLET
   ============================================================ */

@media (max-width: 69.999rem) {

    .service-index {
        top: var(--header-height-tablet);
    }

    .service-detail {
        scroll-margin-top:
            calc(
                var(--header-height-tablet) +
                5rem
            );
    }

    .service-index__inner {
        overflow-x: auto;

        grid-template-columns:
            repeat(
                5,
                minmax(10rem, 1fr)
            );

        scrollbar-width: none;
    }

    .service-index__inner::-webkit-scrollbar {
        display: none;
    }

    .service-detail__grid {
        grid-template-columns: 1fr;
    }

    .service-detail__meta {
        display: flex;

        align-items: center;

        gap: var(--space-3);
    }

    .service-detail__meta > span {
        margin-bottom: 0;
    }

    .service-detail__body {
        grid-template-columns: 1fr 1fr;

        gap:
            clamp(
                2rem,
                5vw,
                4rem
            );
    }

}


/* ============================================================
   18.6 MOBILE
   ============================================================ */

@media (max-width: 47.99rem) {

    .page-hero__inner {
        min-height:
            calc(
                100svh -
                var(--header-height-mobile)
            );

        padding-top: var(--space-10);
        padding-bottom: var(--space-7);
    }

    .page-hero__title {
        font-size:
            clamp(
                3rem,
                13vw,
                5rem
            );

        line-height: 0.9;
    }

    .page-hero__lead {
        font-size: 1rem;
    }

    .service-index {
        top: var(--header-height-mobile);
    }

    .service-index__inner {
        width: 100%;
        padding-inline: 0;
    }

    .service-index a {
        min-height: 4.2rem;

        padding-inline: var(--space-4);
    }

    .service-detail {
        padding-block:
            clamp(
                4.5rem,
                18vw,
                7rem
            );

        scroll-margin-top:
            calc(
                var(--header-height-mobile) +
                4.5rem
            );
    }

    .service-detail__title {
        font-size:
            clamp(
                2.5rem,
                11vw,
                4rem
            );
    }

    .service-detail__body {
        grid-template-columns: 1fr;

        margin-top:
            clamp(
                2.5rem,
                10vw,
                4rem
            );
    }

    .service-detail__visual {
        min-height:
            clamp(
                24rem,
                110vw,
                32rem
            );
    }

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

    .process-step {
        min-height: auto;

        padding-inline: 0;
    }

    .process-step + .process-step {
        border-top:
            1px solid
            rgba(255, 255, 255, 0.14);

        border-left: 0;
    }

    .process-step > span {
        margin-bottom: var(--space-8);
    }

}


/* ============================================================
   18.7 VERY SMALL PHONES
   ============================================================ */

@media (max-width: 23.4375rem) {

    .page-hero__title {
        font-size:
            clamp(
                2.6rem,
                12vw,
                3.6rem
            );
    }

    .service-index a {
        min-width: 9rem;
    }

    .service-detail__title {
        font-size:
            clamp(
                2.25rem,
                10.8vw,
                3.3rem
            );
    }

}


/* ============================================================
   18.8 LANGUAGE HARDENING
   ============================================================ */

@media (max-width: 47.99rem) {

    html[lang="pl"] .page-hero__title,
    html[lang="ro"] .page-hero__title {
        font-size:
            clamp(
                2.7rem,
                11.8vw,
                4.4rem
            );
    }

    html[lang="pl"] .service-detail__title,
    html[lang="ro"] .service-detail__title {
        font-size:
            clamp(
                2.25rem,
                10vw,
                3.8rem
            );
    }

}


/* ============================================================
   18.9 TOUCH DEVICES
   ============================================================ */

@media (pointer: coarse) {

    .service-index a {
        min-height: 4.5rem;
    }

}
/* ============================================================
   19. SERVICE INDEX — SCROLLED HEADER ALIGNMENT
   Fix sticky service navigation gap
   ============================================================ */

/*
 * Desktop header:
 *
 * Normal:
 * 2.5rem topbar + 5.5rem navbar = 8rem
 *
 * Scrolled:
 * 2.5rem topbar + 4.75rem navbar = 7.25rem
 *
 * The service navigation must follow the real header height.
 */

@media (min-width: 70rem) {

    .site-header.is-scrolled
    ~ main
    .service-index {
        top:
            calc(
                var(--topbar-height) +
                var(--navbar-height-scrolled)
            );
    }

}


/*
 * Keep anchor positioning synchronized as well.
 */

@media (min-width: 70rem) {

    .site-header.is-scrolled
    ~ main
    .service-detail {
        scroll-margin-top:
            calc(
                var(--topbar-height) +
                var(--navbar-height-scrolled) +
                5rem
            );
    }

}
/* ============================================================
   20. PROJECTS PAGE
   Phase 6
   ============================================================ */


/* ============================================================
   20.1 PROJECT HERO
   ============================================================ */

.projects-hero__background {
    background:
        linear-gradient(
            120deg,
            #101a20,
            #263b44
        );

    background-image:
        linear-gradient(
            90deg,
            rgba(5, 10, 14, 0.96) 0%,
            rgba(5, 10, 14, 0.8) 45%,
            rgba(5, 10, 14, 0.38) 100%
        ),
        url("../images/hero/projects-hero.webp");

    background-position: center;
    background-size: cover;
}


/* ============================================================
   20.2 PROJECT INTRO
   ============================================================ */

.projects-intro {
    background: var(--color-paper);
}

.projects-intro__grid,
.projects-statement__grid {
    display: grid;

    grid-template-columns:
        minmax(8rem, 1fr)
        minmax(0, 3fr);

    gap: var(--grid-gap);
}

.projects-intro__content h2,
.projects-statement__content h2 {
    max-width: 62rem;

    font-size:
        clamp(
            2.8rem,
            5.8vw,
            6.3rem
        );

    letter-spacing: -0.05em;
    line-height: 0.92;

    text-transform: uppercase;
}

.projects-intro__content p,
.projects-statement__content > p {
    max-width: 38rem;

    margin-top:
        clamp(
            2rem,
            5vw,
            4rem
        );

    margin-left: auto;

    color: var(--color-text-muted);

    font-size:
        clamp(
            1rem,
            1.25vw,
            1.15rem
        );

    line-height: 1.7;
}


/* ============================================================
   20.3 PROJECT GALLERY
   ============================================================ */

.projects-gallery {
    padding-block:
        clamp(
            5rem,
            10vw,
            10rem
        );

    background: var(--color-off-white);
}

.projects-toolbar {
    display: flex;

    align-items: flex-end;
    justify-content: space-between;

    gap: var(--space-8);

    margin-bottom:
        clamp(
            3rem,
            7vw,
            6rem
        );
}

.projects-toolbar h2 {
    font-size:
        clamp(
            2.4rem,
            4.5vw,
            4.8rem
        );

    line-height: 0.95;

    text-transform: uppercase;
}


/* ============================================================
   20.4 FILTERS
   ============================================================ */

.project-filters {
    display: flex;
    flex-wrap: wrap;

    justify-content: flex-end;

    gap: var(--space-2);
}

.project-filter {
    min-height: 2.9rem;

    padding-inline: 1.1rem;

    cursor: pointer;

    border: 1px solid var(--color-line);

    background: transparent;

    color: var(--color-text-muted);

    font-size: 0.7rem;
    font-weight: var(--fw-bold);

    letter-spacing: 0.06em;

    transition:
        background var(--duration-fast)
        var(--ease-standard),
        border-color var(--duration-fast)
        var(--ease-standard),
        color var(--duration-fast)
        var(--ease-standard);
}

.project-filter:hover {
    border-color: var(--color-ink);

    color: var(--color-ink);
}

.project-filter.is-active {
    border-color: var(--color-ink);

    background: var(--color-ink);

    color: var(--color-white);
}


/* ============================================================
   20.5 GALLERY GRID
   ============================================================ */

.project-gallery-grid {
    display: grid;

    grid-template-columns:
        repeat(12, 1fr);

    grid-auto-flow: dense;

    gap: var(--space-4);
}

.gallery-project {
    min-width: 0;

    grid-column: span 6;
}

.gallery-project--wide {
    grid-column: span 12;
}

.gallery-project--tall
.gallery-project__button {
    min-height: 45rem;
}

.gallery-project[hidden] {
    display: none !important;
}


/* ============================================================
   20.6 GALLERY CARD
   ============================================================ */

.gallery-project__button {
    position: relative;

    display: block;

    width: 100%;
    min-height:
        clamp(
            29rem,
            40vw,
            39rem
        );

    overflow: hidden;

    cursor: pointer;

    background: var(--color-navy);

    color: var(--color-white);

    text-align: left;
}

.gallery-project--wide
.gallery-project__button {
    min-height:
        clamp(
            34rem,
            48vw,
            48rem
        );
}

.gallery-project__image,
.gallery-project__overlay {
    position: absolute;
    inset: 0;
}

.gallery-project__image {
    background-position: center;
    background-size: cover;

    transition:
        transform 800ms
        var(--ease-out);
}

.gallery-project__overlay {
    background:
        linear-gradient(
            180deg,
            rgba(4, 8, 11, 0.04) 20%,
            rgba(4, 8, 11, 0.88) 100%
        );
}

.gallery-project__image--01 {
    background:
        linear-gradient(
            135deg,
            #263940,
            #10181c
        );

    background-image:
        linear-gradient(
            180deg,
            transparent,
            rgba(4, 8, 11, 0.15)
        ),
        url("../images/projects/project-01.webp");

    background-position: center;
    background-size: cover;
}

.gallery-project__image--02 {
    background:
        linear-gradient(
            135deg,
            #223841,
            #11191e
        );

    background-image:
        linear-gradient(
            180deg,
            transparent,
            rgba(4, 8, 11, 0.15)
        ),
        url("../images/projects/project-02.webp");

    background-position: center;
    background-size: cover;
}

.gallery-project__image--03 {
    background:
        linear-gradient(
            135deg,
            #31424a,
            #141d21
        );

    background-image:
        linear-gradient(
            180deg,
            transparent,
            rgba(4, 8, 11, 0.15)
        ),
        url("../images/projects/project-03.webp");

    background-position: center;
    background-size: cover;
}

.gallery-project__image--04 {
    background:
        linear-gradient(
            135deg,
            #333d43,
            #131a1e
        );

    background-image:
        linear-gradient(
            180deg,
            transparent,
            rgba(4, 8, 11, 0.15)
        ),
        url("../images/projects/project-04.webp");

    background-position: center;
    background-size: cover;
}

.gallery-project__image--05 {
    background:
        linear-gradient(
            135deg,
            #493433,
            #181c1e
        );

    background-image:
        linear-gradient(
            180deg,
            transparent,
            rgba(4, 8, 11, 0.15)
        ),
        url("../images/projects/project-05.webp");

    background-position: center;
    background-size: cover;
}

.gallery-project__image--06 {
    background:
        linear-gradient(
            135deg,
            #293d44,
            #10181d
        );

    background-image:
        linear-gradient(
            180deg,
            transparent,
            rgba(4, 8, 11, 0.15)
        ),
        url("../images/projects/project-06.webp");

    background-position: center;
    background-size: cover;
}


/* ============================================================
   20.7 GALLERY CONTENT
   ============================================================ */

.gallery-project__top {
    position: absolute;

    top: var(--space-6);
    right: var(--space-6);
    left: var(--space-6);

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: space-between;
}

.gallery-project__top > span:first-child {
    color: rgba(255, 255, 255, 0.65);

    font-size: 0.68rem;
    font-weight: var(--fw-bold);

    letter-spacing: 0.12em;
}

.gallery-project__open {
    display: grid;

    width: 3rem;
    height: 3rem;

    place-items: center;

    border:
        1px solid
        rgba(255, 255, 255, 0.36);

    font-size: 1.15rem;

    transition:
        background var(--duration)
        var(--ease-standard),
        border-color var(--duration)
        var(--ease-standard),
        transform var(--duration)
        var(--ease-out);
}

.gallery-project__content {
    position: absolute;

    right: var(--space-7);
    bottom: var(--space-7);
    left: var(--space-7);

    z-index: 2;

    display: block;
}

.gallery-project__content small {
    display: block;

    margin-bottom: var(--space-3);

    color: rgba(255, 255, 255, 0.62);

    font-size: 0.68rem;
    font-weight: var(--fw-bold);

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.gallery-project__content strong {
    display: block;

    max-width: 44rem;

    font-family: var(--font-display);

    font-size:
        clamp(
            2rem,
            4vw,
            4.6rem
        );

    font-weight: var(--fw-bold);

    letter-spacing: -0.04em;
    line-height: 0.94;

    text-transform: uppercase;
}

.gallery-project:not(.gallery-project--wide)
.gallery-project__content strong {
    font-size:
        clamp(
            1.8rem,
            2.8vw,
            3rem
        );
}

.gallery-project__button:hover
.gallery-project__image {
    transform: scale(1.045);
}

.gallery-project__button:hover
.gallery-project__open {
    border-color: var(--color-accent);

    background: var(--color-accent);

    transform: rotate(45deg);
}


/* ============================================================
   20.8 EMPTY STATE
   ============================================================ */

.projects-empty {
    padding-block: var(--space-12);

    color: var(--color-text-muted);

    text-align: center;

    font-size: 0.9rem;
}


/* ============================================================
   20.9 PROJECT STATEMENT
   ============================================================ */

.projects-statement {
    background: var(--color-paper);
}

.projects-statement__content
.link-arrow {
    margin-top: var(--space-8);
}


/* ============================================================
   20.10 LIGHTBOX
   ============================================================ */

.project-lightbox {
    position: fixed;

    inset: 0;

    z-index: calc(var(--z-overlay) + 100);

    display: grid;

    visibility: hidden;

    place-items: center;

    padding:
        clamp(
            1rem,
            3vw,
            2.5rem
        );

    opacity: 0;

    transition:
        opacity var(--duration)
        var(--ease-standard),
        visibility var(--duration)
        var(--ease-standard);
}

.project-lightbox.is-open {
    visibility: visible;

    opacity: 1;
}

.project-lightbox__backdrop {
    position: absolute;

    inset: 0;

    background:
        rgba(4, 8, 11, 0.9);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.project-lightbox__dialog {
    position: relative;

    z-index: 2;

    display: grid;

    width:
        min(
            100%,
            88rem
        );

    max-height:
        calc(
            100dvh -
            2rem
        );

    overflow: auto;

    grid-template-columns:
        minmax(0, 1.6fr)
        minmax(18rem, 0.7fr);

    background: var(--color-ink);

    color: var(--color-white);

    box-shadow:
        0 2rem 5rem
        rgba(0, 0, 0, 0.35);
}

.project-lightbox__close {
    position: absolute;

    top: 1.25rem;
    right: 1.25rem;

    z-index: 5;

    width: 3rem;
    height: 3rem;

    cursor: pointer;

    background:
        rgba(8, 13, 17, 0.82);

    border:
        1px solid
        rgba(255, 255, 255, 0.3);
}

.project-lightbox__close span {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 1.2rem;
    height: 1px;

    background: var(--color-white);
}

.project-lightbox__close span:first-child {
    transform:
        translate(-50%, -50%)
        rotate(45deg);
}

.project-lightbox__close span:last-child {
    transform:
        translate(-50%, -50%)
        rotate(-45deg);
}

.project-lightbox__media {
    position: relative;

    min-height:
        clamp(
            30rem,
            70vh,
            50rem
        );

    background:
        linear-gradient(
            135deg,
            #22353e,
            #0d1418
        );
}

.project-lightbox__media img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.project-lightbox__media img[hidden] {
    display: none;
}

.project-lightbox__fallback {
    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    color:
        rgba(255, 255, 255, 0.08);

    font-family: var(--font-display);

    font-size:
        clamp(
            5rem,
            12vw,
            12rem
        );

    font-weight: var(--fw-black);

    letter-spacing: -0.06em;
}

.project-lightbox__info {
    display: flex;

    flex-direction: column;
    justify-content: flex-end;

    padding:
        clamp(
            2rem,
            4vw,
            4rem
        );
}

.project-lightbox__number {
    margin-bottom: auto;

    color: var(--color-accent);

    font-size: 0.7rem;
    font-weight: var(--fw-bold);

    letter-spacing: 0.14em;
}

.project-lightbox__category {
    margin-top: 5rem;
    margin-bottom: var(--space-3);

    color: rgba(255, 255, 255, 0.55);

    font-size: 0.7rem;
    font-weight: var(--fw-bold);

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.project-lightbox__info h2 {
    margin-bottom: var(--space-6);

    font-size:
        clamp(
            2rem,
            3.4vw,
            4rem
        );

    line-height: 0.94;

    text-transform: uppercase;
}

.project-lightbox__info > p:last-child {
    color: rgba(255, 255, 255, 0.58);

    font-size: 0.9rem;
    line-height: 1.7;
}

body.lightbox-open {
    overflow: hidden;
}


/* ============================================================
   20.11 TABLET
   ============================================================ */

@media (max-width: 69.999rem) {

    .projects-intro__grid,
    .projects-statement__grid {
        grid-template-columns: 1fr;
    }

    .projects-intro__content p,
    .projects-statement__content > p {
        margin-left: 0;
    }

    .projects-toolbar {
        align-items: flex-start;

        flex-direction: column;
    }

    .project-filters {
        justify-content: flex-start;
    }

    .project-lightbox__dialog {
        grid-template-columns:
            minmax(0, 1.3fr)
            minmax(17rem, 0.7fr);
    }

}


/* ============================================================
   20.12 MOBILE
   ============================================================ */

@media (max-width: 47.99rem) {

    .projects-gallery {
        padding-block:
            clamp(
                4.5rem,
                18vw,
                7rem
            );
    }

    .project-filters {
        width: 100%;

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: var(--space-2);

        scrollbar-width: none;
    }

    .project-filters::-webkit-scrollbar {
        display: none;
    }

    .project-filter {
        flex: 0 0 auto;
    }

    .project-gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-project,
    .gallery-project--wide {
        grid-column: auto;
    }

    .gallery-project__button,
    .gallery-project--wide
    .gallery-project__button,
    .gallery-project--tall
    .gallery-project__button {
        min-height:
            clamp(
                26rem,
                112vw,
                34rem
            );
    }

    .gallery-project__top {
        top: var(--space-4);
        right: var(--space-4);
        left: var(--space-4);
    }

    .gallery-project__content {
        right: var(--space-5);
        bottom: var(--space-5);
        left: var(--space-5);
    }

    .gallery-project__content strong,
    .gallery-project:not(.gallery-project--wide)
    .gallery-project__content strong {
        font-size:
            clamp(
                1.9rem,
                9vw,
                2.8rem
            );
    }

    .project-lightbox {
        padding: 0;
    }

    .project-lightbox__dialog {
        width: 100%;
        max-height: 100dvh;

        grid-template-columns: 1fr;
    }

    .project-lightbox__media {
        min-height:
            min(
                58vh,
                28rem
            );
    }

    .project-lightbox__info {
        min-height: 18rem;
    }

    .project-lightbox__number {
        margin-bottom: var(--space-8);
    }

    .project-lightbox__category {
        margin-top: 0;
    }

}


/* ============================================================
   20.13 SMALL PHONES
   ============================================================ */

@media (max-width: 23.4375rem) {

    .project-filter {
        min-height: 2.7rem;

        padding-inline: 0.9rem;
    }

    .gallery-project__open {
        width: 2.7rem;
        height: 2.7rem;
    }

}


/* ============================================================
   20.14 LANGUAGE HARDENING
   ============================================================ */

@media (max-width: 47.99rem) {

    html[lang="pl"]
    .projects-intro__content h2,

    html[lang="ro"]
    .projects-intro__content h2,

    html[lang="pl"]
    .projects-statement__content h2,

    html[lang="ro"]
    .projects-statement__content h2 {
        font-size:
            clamp(
                2.35rem,
                10.5vw,
                3.9rem
            );
    }

}


/* ============================================================
   20.15 TOUCH
   ============================================================ */

@media (hover: none) {

    .gallery-project__button:hover
    .gallery-project__image {
        transform: none;
    }

}


/* ============================================================
   20.16 REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .gallery-project__image,
    .gallery-project__open,
    .project-lightbox {
        transition: none;
    }

}
/* ============================================================
   21. CONTACT PAGE
   Phase 7
   ============================================================ */


/* ============================================================
   21.1 CONTACT HERO
   ============================================================ */

.contact-hero {
    overflow: hidden;

    padding-block:
        clamp(
            4rem,
            8vw,
            8rem
        );

    background: var(--color-ink);

    color: var(--color-white);
}

.contact-hero__inner {
    display: grid;

    gap:
        clamp(
            4rem,
            9vw,
            8rem
        );
}

.contact-hero__grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(18rem, 0.65fr);

    align-items: end;

    gap:
        clamp(
            3rem,
            8vw,
            8rem
        );
}

.contact-hero__title {
    display: flex;

    flex-direction: column;

    max-width: 70rem;

    font-size:
        clamp(
            3.7rem,
            7.7vw,
            8rem
        );

    letter-spacing: -0.055em;
    line-height: 0.87;

    text-transform: uppercase;
}

.contact-hero__aside {
    padding-bottom: 0.5rem;
}

.contact-hero__aside > p {
    margin-bottom: var(--space-10);

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    font-size:
        clamp(
            1rem,
            1.3vw,
            1.15rem
        );

    line-height: 1.7;
}

.contact-hero__direct {
    position: relative;

    display: grid;

    gap: var(--space-2);

    padding:
        var(--space-5)
        3.5rem
        var(--space-5)
        0;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.18);
}

.contact-hero__direct small {
    color:
        rgba(
            255,
            255,
            255,
            0.48
        );

    font-size: 0.68rem;
    font-weight: var(--fw-bold);

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.contact-hero__direct strong {
    font-size:
        clamp(
            1.2rem,
            2vw,
            1.65rem
        );

    font-weight: var(--fw-semibold);
}

.contact-hero__direct > span {
    position: absolute;

    top: 50%;
    right: 0;

    font-size: 1.25rem;

    transform:
        translateY(-50%);
}


/* ============================================================
   21.2 CONTACT DETAILS
   ============================================================ */

.contact-details {
    background: var(--color-paper);
}

.contact-details__grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    border-bottom: var(--border);
}

.contact-detail {
    position: relative;

    display: flex;

    min-width: 0;
    min-height: 17rem;

    flex-direction: column;

    justify-content: flex-end;

    padding:
        var(--space-7)
        var(--space-6);

    border-left: var(--border);

    transition:
        background var(--duration)
        var(--ease-standard),
        color var(--duration)
        var(--ease-standard);
}

.contact-detail:last-child {
    border-right: var(--border);
}

.contact-detail__number {
    position: absolute;

    top: var(--space-6);
    left: var(--space-6);

    color: var(--color-accent);

    font-size: 0.66rem;
    font-weight: var(--fw-bold);
}

.contact-detail small {
    margin-bottom: var(--space-3);

    color: var(--color-text-muted);

    font-size: 0.65rem;
    font-weight: var(--fw-bold);

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.contact-detail strong {
    max-width: 20rem;

    font-size:
        clamp(
            1rem,
            1.4vw,
            1.35rem
        );

    font-weight: var(--fw-semibold);

    line-height: 1.45;
}

.contact-detail__arrow {
    position: absolute;

    top: var(--space-6);
    right: var(--space-6);

    font-size: 1rem;
}

a.contact-detail:hover {
    background: var(--color-ink);

    color: var(--color-white);
}

a.contact-detail:hover small {
    color:
        rgba(
            255,
            255,
            255,
            0.5
        );
}


/* ============================================================
   21.3 FORM SECTION
   ============================================================ */

.contact-form-section {
    padding-block:
        clamp(
            6rem,
            12vw,
            11rem
        );

    background: var(--color-off-white);

    scroll-margin-top:
        calc(
            var(--header-height-desktop) +
            2rem
        );
}

.contact-form-layout {
    display: grid;

    grid-template-columns:
        minmax(15rem, 0.8fr)
        minmax(0, 1.7fr);

    align-items: start;

    gap:
        clamp(
            4rem,
            10vw,
            10rem
        );
}

.contact-form-intro {
    position: sticky;

    top:
        calc(
            var(--header-height-desktop) +
            3rem
        );
}

.contact-form-intro h2 {
    margin-top:
        clamp(
            2rem,
            4vw,
            3.5rem
        );

    font-size:
        clamp(
            2.7rem,
            4.8vw,
            5rem
        );

    line-height: 0.94;

    text-transform: uppercase;
}

.contact-form-intro > p:last-child {
    margin-top: var(--space-7);

    color: var(--color-text-muted);

    font-size: 0.95rem;

    line-height: 1.7;
}


/* ============================================================
   21.4 FORM
   ============================================================ */

.contact-form {
    min-width: 0;
}

.form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        var(--space-8)
        var(--space-5);
}

.form-field {
    min-width: 0;
}

.form-field--full {
    grid-column: 1 / -1;
}

.form-field label {
    display: flex;

    align-items: center;

    gap: 0.3rem;

    margin-bottom: var(--space-3);

    color: var(--color-text);

    font-size: 0.72rem;
    font-weight: var(--fw-bold);

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.form-field label
span:last-child:not(:first-child) {
    color: var(--color-accent);
}

.form-field input,
.form-field select,
.form-field textarea {
    display: block;

    width: 100%;
    min-width: 0;

    border: 0;
    border-bottom:
        1px solid
        var(--color-line);

    border-radius: 0;

    background: transparent;

    color: var(--color-text);

    outline: none;

    transition:
        border-color
        var(--duration-fast)
        var(--ease-standard);
}

.form-field input,
.form-field select {
    min-height: 3.8rem;
}

.form-field textarea {
    min-height: 12rem;

    padding-block: 1rem;

    resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-bottom-color:
        var(--color-ink);
}

.form-field.is-invalid input,
.form-field.is-invalid select,
.form-field.is-invalid textarea {
    border-bottom-color:
        var(--color-accent);
}

.form-error {
    min-height: 1.2rem;

    margin-top: 0.5rem;

    color: var(--color-accent);

    font-size: 0.72rem;
}

.form-field__bottom {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: var(--space-5);
}

.form-counter {
    flex: 0 0 auto;

    margin-top: 0.5rem;

    color: var(--color-text-muted);

    font-size: 0.7rem;
}


/* ============================================================
   21.5 CONSENT
   ============================================================ */

.form-consent {
    display: grid;

    grid-template-columns:
        auto 1fr;

    gap: var(--space-4);

    margin-top:
        var(--space-10);

    padding-top:
        var(--space-6);

    border-top: var(--border);
}

.form-consent input {
    width: 1.1rem;
    height: 1.1rem;

    margin-top: 0.18rem;

    accent-color:
        var(--color-accent);
}

.form-consent label {
    max-width: 43rem;

    color: var(--color-text-muted);

    font-size: 0.8rem;

    line-height: 1.65;
}

.form-consent a {
    color: var(--color-text);

    text-decoration: underline;

    text-underline-offset: 0.2rem;
}

.form-error--consent {
    margin-left:
        calc(
            1.1rem +
            var(--space-4)
        );
}


/* ============================================================
   21.6 FORM FOOTER
   ============================================================ */

.contact-form__footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: var(--space-8);

    margin-top: var(--space-8);
}

.contact-form__footer > p {
    color: var(--color-text-muted);

    font-size: 0.7rem;
}


/* ============================================================
   21.7 FORM STATUS
   ============================================================ */

.form-status {
    margin-top: var(--space-6);

    padding: var(--space-5);

    border-left:
        3px solid
        var(--color-accent);

    background:
        rgba(
            207,
            46,
            46,
            0.06
        );

    font-size: 0.86rem;
    line-height: 1.6;
}


/* ============================================================
   21.8 DIRECT CONTACT
   ============================================================ */

.contact-direct {
    padding-block:
        clamp(
            6rem,
            11vw,
            10rem
        );

    background: var(--color-paper);
}

.contact-direct__grid {
    display: grid;

    grid-template-columns:
        minmax(8rem, 1fr)
        minmax(0, 3fr);

    gap: var(--grid-gap);
}

.contact-direct__content h2 {
    max-width: 56rem;

    font-size:
        clamp(
            2.8rem,
            5.7vw,
            6rem
        );

    line-height: 0.92;

    text-transform: uppercase;
}

.contact-direct__actions {
    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    margin-top:
        clamp(
            4rem,
            8vw,
            7rem
        );

    border-top: var(--border);
}

.contact-direct__link {
    position: relative;

    display: grid;

    min-height: 11rem;

    align-content: end;

    gap: var(--space-2);

    padding: var(--space-6);

    border-bottom: var(--border);

    transition:
        background
        var(--duration)
        var(--ease-standard),
        color
        var(--duration)
        var(--ease-standard);
}

.contact-direct__link:first-child {
    border-right: var(--border);
}

.contact-direct__link small {
    color: var(--color-text-muted);

    font-size: 0.65rem;
    font-weight: var(--fw-bold);

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.contact-direct__link strong {
    font-size:
        clamp(
            1.1rem,
            2vw,
            1.6rem
        );
}

.contact-direct__link > span {
    position: absolute;

    top: var(--space-6);
    right: var(--space-6);
}

.contact-direct__link:hover {
    background: var(--color-ink);

    color: var(--color-white);
}


/* ============================================================
   21.9 TABLET
   ============================================================ */

@media (max-width: 69.999rem) {

    .contact-hero__grid {
        grid-template-columns:
            minmax(0, 1.3fr)
            minmax(16rem, 0.7fr);
    }

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

    .contact-detail:nth-child(2) {
        border-right: var(--border);
    }

    .contact-detail:nth-child(n + 3) {
        border-top: var(--border);
    }

    .contact-form-section {
        scroll-margin-top:
            calc(
                var(--header-height-tablet) +
                2rem
            );
    }

    .contact-form-layout {
        grid-template-columns:
            minmax(12rem, 0.65fr)
            minmax(0, 1.35fr);

        gap:
            clamp(
                3rem,
                7vw,
                6rem
            );
    }

    .contact-form-intro {
        top:
            calc(
                var(--header-height-tablet) +
                2rem
            );
    }

}


/* ============================================================
   21.10 MOBILE
   ============================================================ */

@media (max-width: 47.99rem) {

    .contact-hero {
        padding-block:
            clamp(
                3.5rem,
                14vw,
                5rem
            );
    }

    .contact-hero__grid {
        grid-template-columns: 1fr;
    }

    .contact-hero__title {
        font-size:
            clamp(
                3rem,
                13vw,
                5rem
            );
    }

    .contact-details__grid {
        width: 100%;

        grid-template-columns: 1fr;

        padding-inline: 0;
    }

    .contact-detail {
        min-height: 11rem;

        border-right: 0 !important;

        border-left: 0;
        border-top: var(--border);
    }

    .contact-detail:last-child {
        border-right: 0;
    }

    .contact-form-section {
        padding-block:
            clamp(
                4.5rem,
                18vw,
                7rem
            );

        scroll-margin-top:
            calc(
                var(--header-height-mobile) +
                1rem
            );
    }

    .contact-form-layout {
        grid-template-columns: 1fr;
    }

    .contact-form-intro {
        position: static;
    }

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

    .form-field--full {
        grid-column: auto;
    }

    .contact-form__footer {
        align-items: stretch;

        flex-direction: column;
    }

    .contact-form__footer .btn {
        width: 100%;

        justify-content: center;
    }

    .contact-direct__grid {
        grid-template-columns: 1fr;
    }

    .contact-direct__actions {
        grid-template-columns: 1fr;
    }

    .contact-direct__link:first-child {
        border-right: 0;
    }

}


/* ============================================================
   21.11 SMALL PHONE
   ============================================================ */

@media (max-width: 23.4375rem) {

    .contact-hero__title {
        font-size:
            clamp(
                2.65rem,
                12vw,
                3.8rem
            );
    }

    .contact-detail {
        padding-inline: var(--space-4);
    }

    .contact-detail__number {
        left: var(--space-4);
    }

    .contact-detail__arrow {
        right: var(--space-4);
    }

}


/* ============================================================
   21.12 LANGUAGE HARDENING
   ============================================================ */

@media (max-width: 47.99rem) {

    html[lang="pl"]
    .contact-hero__title,

    html[lang="ro"]
    .contact-hero__title {
        font-size:
            clamp(
                2.7rem,
                11.5vw,
                4.4rem
            );
    }

}
/* ============================================================
   22. CONTACT FORM API STATES
   Phase 7.5
   ============================================================ */


/* ============================================================
   22.1 HONEYPOT
   Hidden visually, still present in DOM for spambots.
   ============================================================ */

.form-honeypot {
    position: absolute !important;

    left: -10000px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* ============================================================
   22.2 STATUS
   ============================================================ */

.form-status {
    border-left-width: 3px;
    border-left-style: solid;

    transition:
        background
        var(--duration-fast)
        var(--ease-standard),
        border-color
        var(--duration-fast)
        var(--ease-standard);
}


.form-status.is-success {
    border-left-color: #2f7d4a;

    background:
        rgba(
            47,
            125,
            74,
            0.08
        );

    color: #245f39;
}


.form-status.is-error {
    border-left-color:
        var(--color-accent);

    background:
        rgba(
            207,
            46,
            46,
            0.07
        );

    color:
        var(--color-text);
}


/* ============================================================
   22.3 SUBMIT BUTTON
   ============================================================ */

.contact-form__submit {
    position: relative;

    min-width: 12rem;
}


.contact-form__submit:disabled {
    cursor: wait;

    opacity: 0.72;
}


.contact-form__spinner {
    display: none;

    width: 1rem;
    height: 1rem;

    flex: 0 0 auto;

    border:
        2px solid
        rgba(
            255,
            255,
            255,
            0.3
        );

    border-top-color:
        currentColor;

    border-radius: 50%;

    animation:
        contact-spinner
        700ms
        linear
        infinite;
}


.contact-form__submit.is-loading
.contact-form__spinner {
    display: block;
}


.contact-form__submit.is-loading
.contact-form__submit-arrow {
    display: none;
}


@keyframes contact-spinner {

    to {
        transform:
            rotate(360deg);
    }

}


@media (
    prefers-reduced-motion: reduce
) {

    .contact-form__spinner {
        animation: none;
    }

}
/* ============================================================
   23. LEGAL PAGES
   Phase 8
   ============================================================ */

.legal-hero {
    padding-block:
        clamp(
            5rem,
            10vw,
            9rem
        );

    background:
        var(--color-ink);

    color:
        var(--color-white);
}


.legal-hero__breadcrumb {
    display: flex;

    gap: 0.65rem;

    margin-bottom:
        clamp(
            4rem,
            9vw,
            8rem
        );

    color:
        rgba(
            255,
            255,
            255,
            0.5
        );

    font-size: 0.72rem;
}


.legal-hero__eyebrow {
    margin-bottom:
        var(--space-4);

    color:
        var(--color-accent);

    font-size: 0.7rem;

    font-weight:
        var(--fw-bold);

    letter-spacing:
        0.14em;

    text-transform:
        uppercase;
}


.legal-hero h1 {
    font-size:
        clamp(
            4rem,
            10vw,
            9rem
        );

    line-height:
        0.86;

    letter-spacing:
        -0.055em;

    text-transform:
        uppercase;
}


.legal-content {
    padding-block:
        clamp(
            6rem,
            12vw,
            11rem
        );

    background:
        var(--color-paper);
}


.legal-content__grid {
    display: grid;

    grid-template-columns:
        minmax(10rem, 0.75fr)
        minmax(0, 2.25fr);

    align-items:
        start;

    gap:
        clamp(
            4rem,
            9vw,
            9rem
        );
}


.legal-content__index {
    position:
        sticky;

    top:
        calc(
            var(--header-height-desktop)
            +
            3rem
        );
}


.legal-document {
    max-width:
        52rem;
}


.legal-document section {
    padding-block:
        clamp(
            2.5rem,
            5vw,
            4rem
        );

    border-top:
        var(--border);
}


.legal-document section:first-child {
    padding-top:
        0;

    border-top:
        0;
}


.legal-document h2 {
    margin-bottom:
        1.5rem;

    font-size:
        clamp(
            1.65rem,
            3vw,
            2.6rem
        );

    line-height:
        1;

    letter-spacing:
        -0.035em;

    text-transform:
        uppercase;
}


.legal-document p,
.legal-document li,
.legal-document dd {
    color:
        var(--color-text-muted);

    font-size:
        0.95rem;

    line-height:
        1.75;
}


.legal-document p + p {
    margin-top:
        1.25rem;
}


.legal-document ul {
    display:
        grid;

    gap:
        0.7rem;

    margin-top:
        1.25rem;

    padding-left:
        1.25rem;
}


.legal-document a {
    color:
        var(--color-text);

    text-decoration:
        underline;

    text-underline-offset:
        0.2rem;
}


.legal-data {
    border-top:
        var(--border);
}


.legal-data > div {
    display:
        grid;

    grid-template-columns:
        minmax(10rem, 0.7fr)
        minmax(0, 1.3fr);

    gap:
        2rem;

    padding-block:
        1rem;

    border-bottom:
        var(--border);
}


.legal-data dt {
    color:
        var(--color-text);

    font-size:
        0.72rem;

    font-weight:
        var(--fw-bold);

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


.legal-document__note {
    margin-top:
        3rem;

    color:
        var(--color-text-muted);

    font-size:
        0.75rem;
}


@media (max-width: 69.999rem) {

    .legal-content__grid {
        grid-template-columns:
            1fr;
    }

    .legal-content__index {
        position:
            static;
    }

}


@media (max-width: 47.99rem) {

    .legal-hero {
        padding-block:
            4rem
            5rem;
    }

    .legal-content {
        padding-block:
            4.5rem;
    }

    .legal-data > div {
        grid-template-columns:
            1fr;

        gap:
            0.5rem;
    }

}
/* ============================================================
   24. ERROR PAGE
   ============================================================ */

.error-page {
    display:
        grid;

    min-height:
        100dvh;

    place-items:
        center;

    background:
        var(--color-ink);

    color:
        var(--color-white);
}


.error-page__inner {
    padding-block:
        5rem;
}


.error-page__code {
    margin-bottom:
        2rem;

    color:
        var(--color-accent);

    font-size:
        0.75rem;

    font-weight:
        var(--fw-bold);

    letter-spacing:
        0.14em;
}


.error-page h1 {
    max-width:
        55rem;

    font-size:
        clamp(
            3rem,
            8vw,
            7rem
        );

    line-height:
        0.9;

    text-transform:
        uppercase;
}


.error-page p:not(.error-page__code) {
    max-width:
        32rem;

    margin-block:
        2rem;

    color:
        rgba(
            255,
            255,
            255,
            0.6
        );

    line-height:
        1.7;
}