/* NAL — custom styles (header, mega menu, αρχική). Φορτώνεται μετά τα CSS του Crafto. */
/* Manrope, τοπικά (fonts/manrope/, από το @fontsource/manrope): χωρίς σύνδεση στο Google Fonts */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/manrope/manrope-greek-400-normal.woff2) format('woff2');
    unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/manrope/manrope-latin-ext-400-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/manrope/manrope-latin-400-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/manrope/manrope-greek-500-normal.woff2) format('woff2');
    unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/manrope/manrope-latin-ext-500-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(../fonts/manrope/manrope-latin-500-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/manrope/manrope-greek-600-normal.woff2) format('woff2');
    unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/manrope/manrope-latin-ext-600-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/manrope/manrope-latin-600-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/manrope/manrope-greek-700-normal.woff2) format('woff2');
    unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/manrope/manrope-latin-ext-700-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/manrope/manrope-latin-700-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* Plus Jakarta Sans (μόνο για τα κουμπιά Eshop/B2B του template), τοπικά: fonts/plus-jakarta-sans/ */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-ext-600-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-600-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-ext-700-normal.woff2) format('woff2');
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/plus-jakarta-sans/plus-jakarta-sans-latin-700-normal.woff2) format('woff2');
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

        :root {
            --nal-blue: #1769aa;
            --nal-blue-dark: #0d4d81;
            --nal-blue-light: #6bb8f2;
            --nal-black: #080a0a;
            --nal-panel: #0b0d0d;
            --nal-white: #ffffff;
        }

        body {
            background: var(--nal-black);
            font-family: "Manrope", sans-serif;
        }

        /* ---------- Header bar ---------- */
        .nal-header .navbar {
            min-height: 92px;
            background: var(--nal-black);
            border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        }

        .nal-header .navbar-brand {
            padding: 0;
        }

        .nal-header .navbar-brand img {
            width: auto;
            max-height: 58px;
            filter: brightness(0) invert(1);
        }

        .nal-header .navbar-nav .nav-link {
            position: relative;
            color: rgba(255, 255, 255, 0.86);
            font-size: 16px;
            font-weight: 500;
            padding-left: 13px;
            padding-right: 13px;
            white-space: nowrap; /* «Η NAL» σε μία γραμμή (έσπαγε στα 992–1360px) */
        }

        /* Υπογράμμιση ενεργού μενού */
        .nal-header .navbar-nav > .nav-item > .nav-link::after {
            content: "";
            position: absolute;
            left: 13px;
            right: 13px;
            bottom: -6px;
            height: 1px;
            background: var(--nal-blue-light);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.25s ease;
        }

        .nal-header .navbar-nav > .nav-item:hover > .nav-link,
        .nal-header .navbar-nav > .nav-item.open > .nav-link,
        .nal-header .navbar-nav > .nav-item.active > .nav-link {
            color: var(--nal-blue-light);
        }

        .nal-header .navbar-nav > .nav-item:hover > .nav-link::after,
        .nal-header .navbar-nav > .nav-item.open > .nav-link::after,
        .nal-header .navbar-nav > .nav-item.active > .nav-link::after {
            transform: scaleX(1);
        }

        .nal-header .dropdown-toggle {
            color: rgba(255, 255, 255, 0.6);
        }

        /* ---------- Απλό dropdown (Η NAL) ---------- */
        .nal-header .navbar-nav .simple-dropdown .dropdown-menu {
            background: var(--nal-panel);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-top: 2px solid var(--nal-blue);
            box-shadow: 0 22px 55px rgba(0, 0, 0, 0.35);
        }

        .nal-header .navbar-nav .simple-dropdown .dropdown-menu li a {
            color: rgba(255, 255, 255, 0.85);
            font-size: 15px;
            font-weight: 600;
        }

        .nal-header .navbar-nav .simple-dropdown .dropdown-menu li a:hover {
            color: var(--nal-blue-light);
            background: transparent;
        }

        /* ---------- Mega menu ---------- */
        .nal-header .navbar-nav .nal-mega-menu {
            position: static;
        }

        .nal-header .navbar-nav .nal-mega-menu > .dropdown-menu {
            width: 100%;
            left: 0;
            right: 0;
            padding: 0;
            overflow: hidden;
            background: var(--nal-panel);
            border: 0;
            border-radius: 0;
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
        }

        .nal-mega-inner {
            display: grid;
            grid-template-columns: minmax(280px, 26%) minmax(0, 1fr);
            min-height: 470px;
            border-bottom: 2px solid var(--nal-blue);
        }

        /* Μεγάλη εικόνα αριστερά */
        .nal-mega-lead {
            position: relative;
            overflow: hidden;
            background: #171a1a;
        }

        .nal-mega-lead img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 6s ease;
        }

        .nal-mega-menu.open .nal-mega-lead img {
            transform: scale(1.04);
        }

        .nal-mega-lead.is-product {
            display: flex;
            flex-direction: column;
            background: #eeedea;
        }

        .nal-mega-lead.is-product img {
            position: relative;
            inset: auto;
            flex: 1 1 0;
            min-height: 0;
            padding: 44px;
            object-fit: contain;
            mix-blend-mode: multiply;
        }

        .nal-mega-lead::after {
            content: "";
            position: absolute;
            inset: 45% 0 0;
            background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.85));
            pointer-events: none;
        }

        .nal-mega-lead.is-product::after {
            display: none;
        }

        .nal-mega-lead.is-product .nal-mega-lead-copy {
            position: relative;
            background: var(--nal-black);
        }

        .nal-mega-lead-copy {
            position: absolute;
            z-index: 1;
            right: 0;
            bottom: 0;
            left: 0;
            padding: 24px 30px 26px;
        }

        .nal-mega-lead-copy span {
            display: block;
            margin-bottom: 6px;
            color: var(--nal-blue-light);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.8px;
            text-transform: uppercase;
        }

        .nal-mega-lead-copy strong {
            display: block;
            margin-bottom: 10px;
            color: var(--nal-white);
            font-size: 21px;
            font-weight: 600;
            line-height: 1.3;
        }

        .nal-header .navbar-nav .nal-mega-menu .dropdown-menu .nal-mega-lead-copy a {
            display: inline-block;
            padding: 0 0 2px;
            color: var(--nal-white);
            font-size: 14px;
            font-weight: 700;
            border-bottom: 1px solid rgba(255, 255, 255, 0.55);
        }

        .nal-header .navbar-nav .nal-mega-menu .dropdown-menu .nal-mega-lead-copy a:hover {
            padding-left: 0;
            color: var(--nal-blue-light);
            border-color: var(--nal-blue-light);
        }

        /* Δεξί μέρος: τίτλος + στήλες */
        .nal-mega-content {
            padding: 34px 56px 40px;
        }

        .nal-mega-heading {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 30px;
            padding-bottom: 18px;
            border-bottom: 1px solid rgba(107, 184, 242, 0.55);
        }

        .nal-mega-heading .nal-mega-heading-title {
            margin: 0;
            color: var(--nal-white);
            font-size: 31px;
            font-weight: 600;
            line-height: 1.1;
            letter-spacing: -0.3px;
        }

        .nal-header .navbar-nav .nal-mega-menu .dropdown-menu .nal-mega-heading a {
            padding: 0;
            color: rgba(255, 255, 255, 0.65);
            font-size: 14px;
            font-weight: 600;
            white-space: nowrap;
        }

        .nal-header .navbar-nav .nal-mega-menu .dropdown-menu .nal-mega-heading a:hover {
            padding-left: 0;
            color: var(--nal-blue-light);
        }

        .nal-mega-cols {
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 30px;
            max-width: 1180px;
        }

        .nal-col {
            min-width: 0;
        }

        .nal-header .navbar-nav .nal-mega-menu .dropdown-menu .nal-col a {
            padding: 0;
        }

        .nal-header .navbar-nav .nal-mega-menu .dropdown-menu .nal-col .nal-col-title {
            display: block;
            min-height: 24px;
            margin-bottom: 18px;
            color: var(--nal-white);
            font-size: 17px;
            font-weight: 700;
            line-height: 1.3;
        }

        .nal-header .navbar-nav .nal-mega-menu .dropdown-menu .nal-col .nal-col-media {
            display: block;
            overflow: hidden;
            aspect-ratio: 1 / 1;
            background: var(--nal-white);
        }

        .nal-col-media img {
            display: block;
            width: 100% !important;
            height: 100%;
            padding: 14px;
            object-fit: contain;
            transition: transform 0.45s ease;
        }

        .nal-col-media img.is-cover {
            padding: 0;
            object-fit: cover;
        }

        .nal-col:hover .nal-col-media img {
            transform: scale(1.05);
        }

        .nal-header .navbar-nav .nal-mega-menu .dropdown-menu .nal-col .nal-col-media:has(.nal-col-placeholder) {
            background: #151818;
            border: 1px dashed rgba(255, 255, 255, 0.16);
        }

        .nal-col-placeholder {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            color: rgba(255, 255, 255, 0.22);
            font-size: 34px;
        }

        .nal-header .navbar-nav .nal-mega-menu .dropdown-menu ul.nal-col-links {
            display: block;
            margin: 22px 0 0;
            padding: 0;
            list-style: none;
        }

        .nal-header .navbar-nav .nal-mega-menu .dropdown-menu ul.nal-col-links::before {
            display: none;
        }

        .nal-header .navbar-nav .nal-mega-menu .dropdown-menu ul.nal-col-links li {
            display: block;
            width: 100%;
            margin: 0 0 11px;
            padding: 0;
            border: 0;
        }

        .nal-header .navbar-nav .nal-mega-menu .dropdown-menu .nal-col-links a {
            display: inline-block;
            padding-bottom: 0;
            color: rgba(255, 255, 255, 0.85);
            font-size: 15px;
            font-weight: 600;
            line-height: 1.4;
            transition: color 0.2s ease, transform 0.2s ease;
        }

        .nal-header .navbar-nav .nal-mega-menu .dropdown-menu .nal-col .nal-col-title:hover,
        .nal-header .navbar-nav .nal-mega-menu .dropdown-menu .nal-col-links a:hover {
            padding-left: 0;
            color: var(--nal-blue-light);
        }

        .nal-header .navbar-nav .nal-mega-menu .dropdown-menu .nal-col-links a:hover {
            transform: translateX(3px);
        }

        /* ---------- Eshop / B2B / γλώσσα ---------- */
        .nal-commerce {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
        }

        .nal-commerce .btn {
            min-width: 84px;
            padding: 11px 18px;
            border-radius: 0;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .nal-commerce .btn-eshop {
            color: var(--nal-white);
            border: 1px solid rgba(255, 255, 255, 0.55);
            background: transparent;
        }

        .nal-commerce .btn-eshop:hover {
            color: var(--nal-black);
            background: var(--nal-white);
            border-color: var(--nal-white);
        }

        .nal-commerce .btn-b2b {
            color: var(--nal-white);
            border: 1px solid var(--nal-blue);
            background: var(--nal-blue);
        }

        .nal-commerce .btn-b2b:hover {
            color: var(--nal-white);
            background: var(--nal-blue-dark);
            border-color: var(--nal-blue-dark);
        }

        .nal-language {
            margin-left: 10px;
            color: rgba(255, 255, 255, 0.65);
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 1px;
        }

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

        .nal-header .navbar-toggler-line {
            background-color: var(--nal-white);
        }

        .header-spacer {
            min-height: 280px;
            background: var(--nal-black);
        }

        /* ---------- Responsive ---------- */
        @media (max-width: 1399px) {
            .nal-mega-content { padding-right: 36px; padding-left: 36px; }
            .nal-mega-cols { gap: 22px; }
        }

        @media (max-width: 1199px) {
            .nal-header .navbar-nav .nav-link {
                padding-left: 10px;
                padding-right: 10px;
                font-size: 15px;
            }

            .nal-header .navbar-nav > .nav-item > .nav-link::after { left: 10px; right: 10px; }

            .nal-commerce .btn {
                min-width: 72px;
                padding-left: 12px;
                padding-right: 12px;
            }

            .nal-mega-inner { grid-template-columns: 240px minmax(0, 1fr); min-height: 420px; }
            .nal-mega-content { padding: 28px 26px 32px; }
            .nal-mega-heading .nal-mega-heading-title { font-size: 26px; }
            .nal-mega-cols { gap: 16px; }
            .nal-header .navbar-nav .nal-mega-menu .dropdown-menu .nal-col .nal-col-title { font-size: 15px; min-height: 40px; }
            .nal-header .navbar-nav .nal-mega-menu .dropdown-menu .nal-col-links a { font-size: 14px; }
        }

        /* 992–1099px: επτά στοιχεία μενού (με την «Επικοινωνία») χωρούν πριν από τα κουμπιά Eshop/B2B */
        @media (min-width: 992px) and (max-width: 1099px) {
            .nal-header .navbar-nav .nav-link {
                padding-left: 7px;
                padding-right: 7px;
                font-size: 14px;
            }

            .nal-header .navbar-nav > .nav-item > .nav-link::after { left: 7px; right: 7px; }
        }

        @media (max-width: 991px) {
            .nal-header .navbar {
                min-height: 76px;
            }

            .nal-header .navbar-brand img {
                max-height: 48px;
            }

            .nal-header .navbar-collapse {
                background: #101313;
            }

            .nal-header .navbar-nav > .nav-item > .nav-link::after { display: none; }

            .nal-header .navbar-nav .nal-mega-menu > .dropdown-menu {
                overflow: visible;
                background: transparent;
                box-shadow: none;
            }

            .nal-mega-inner { display: block; min-height: 0; border-bottom: 0; }
            .nal-mega-lead { display: none; }
            .nal-mega-content { padding: 6px 0 22px; }
            .nal-mega-heading { display: none; }
            .nal-mega-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
            .nal-header .navbar-nav .nal-mega-menu .dropdown-menu .nal-col .nal-col-media { display: none; }
            .nal-header .navbar-nav .nal-mega-menu .dropdown-menu .nal-col .nal-col-title { min-height: 0; margin-bottom: 6px; font-size: 14px; }
            .nal-header .navbar-nav .nal-mega-menu .dropdown-menu ul.nal-col-links { margin-top: 8px; }
            .nal-header .navbar-nav .nal-mega-menu .dropdown-menu ul.nal-col-links li { margin-bottom: 6px; }
            .nal-header .navbar-nav .nal-mega-menu .dropdown-menu .nal-col-links a { font-weight: 500; color: rgba(255, 255, 255, 0.7); }

            .nal-header .navbar-nav .nav-link {
                color: var(--nal-white);
                padding-left: 0;
                padding-right: 0;
            }

            .nal-commerce { gap: 5px; }

            .nal-commerce .btn {
                min-width: auto;
                padding: 9px 11px;
                font-size: 9px;
            }

            .nal-language { display: none; }
        }

        @media (max-width: 575px) {
            .nal-mega-cols { grid-template-columns: 1fr; }
        }

        /* ---------- Mobile (Crafto modern menu clone) ---------- */
        @media (max-width: 991px) {
            .navbar-modern-inner .nal-mega-lead,
            .navbar-modern-inner .nal-mega-heading,
            .navbar-modern-inner .nal-col-media { display: none !important; }
            .navbar-modern-inner .nal-mega-inner { display: block; min-height: 0; border: 0; }
            .navbar-modern-inner .nal-mega-content { padding: 4px 0 18px; }
            .navbar-modern-inner .nal-mega-menu > .dropdown-menu { padding: 0 !important; background: transparent !important; box-shadow: none !important; }
            .navbar-modern-inner .nal-mega-cols { display: block; }
            .navbar-modern-inner .nal-col { margin-bottom: 18px; }
            .navbar-modern-inner .navbar-nav .dropdown .dropdown-menu a.nal-col-title {
                padding: 0 0 4px;
                color: #ffffff;
                font-size: 17px;
                font-weight: 700;
            }
            .navbar-modern-inner .navbar-nav .dropdown .dropdown-menu ul.nal-col-links { margin: 4px 0 0; padding: 0 0 0 12px; border-left: 1px solid rgba(107, 184, 242, 0.45); }
            .navbar-modern-inner .navbar-nav .dropdown .dropdown-menu ul.nal-col-links::before { display: none; }
            .navbar-modern-inner .navbar-nav .dropdown .dropdown-menu ul.nal-col-links li { display: block; margin: 0; padding: 0; }
            .navbar-modern-inner .navbar-nav .dropdown .dropdown-menu ul.nal-col-links a {
                padding: 5px 0;
                color: rgba(255, 255, 255, 0.72);
                font-size: 16px;
                font-weight: 500;
                line-height: 1.4;
            }
            .navbar-modern-inner .navbar-nav .nav-item > .nav-link { color: #ffffff; font-size: 22px; }
            .navbar-modern-inner .navbar-nav .nav-item > .nav-link::after { display: none; }
        }

        /* ---------- Βάση: header, κουμπιά, κίνηση προόδου ---------- */
        /* Το nav του Crafto είναι absolute: δίνουμε ύψος στο header ώστε η σελίδα να ξεκινά από κάτω του */
        .nal-header {
            position: relative;
            min-height: 92px;
        }

        @keyframes nal-progress {
            from { transform: scaleX(0); }
            to { transform: scaleX(1); }
        }

        .nal-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 50px;
            padding: 0 28px;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            border: 1px solid transparent;
            transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
        }

        .nal-btn-primary {
            color: var(--nal-white);
            background: var(--nal-blue);
            border-color: var(--nal-blue);
        }

        .nal-btn-primary:hover {
            color: var(--nal-white);
            background: var(--nal-blue-dark);
            border-color: var(--nal-blue-dark);
        }

        .nal-btn-ghost {
            color: var(--nal-white);
            border-color: rgba(255, 255, 255, 0.5);
        }

        .nal-btn-ghost:hover {
            color: var(--nal-black);
            background: var(--nal-white);
            border-color: var(--nal-white);
        }

        @media (max-width: 991px) {
            .nal-header { min-height: 76px; }
        }

        /* ---------- Sticky header ----------
           Το nav είναι fixed (κλάση fixed-header του Crafto). Το .nal-header κρατά το ύψος του στη ροή,
           οπότε η σελίδα δεν «πηδάει». Όταν κυλήσει η σελίδα, το Crafto βάζει την κλάση .sticky στο header
           και η μπάρα γίνεται πιο χαμηλή, με διακριτική σκιά. */
        html {
            scroll-padding-top: 76px;
        }

        .nal-header .navbar {
            transition: min-height 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
        }

        .nal-header .navbar-brand img {
            transition: max-height 0.35s ease;
        }

        /* το Crafto δίνει padding στο logo όταν το header είναι sticky: το ακυρώνουμε */
        .nal-header.sticky .navbar .navbar-brand {
            padding: 0;
        }

        .nal-header.sticky .navbar {
            box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
        }

        @media (min-width: 992px) {
            .nal-header.sticky .navbar {
                min-height: 72px;
                background-color: rgba(8, 10, 10, 0.9) !important;
                border-bottom-color: rgba(107, 184, 242, 0.18);
                -webkit-backdrop-filter: saturate(140%) blur(14px);
                backdrop-filter: saturate(140%) blur(14px);
            }

            .nal-header.sticky .navbar-brand img {
                max-height: 44px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .nal-header .navbar, .nal-header .navbar-brand img { transition: none; }
        }

        /* =====================================================================
           HERO: εταιρικό μήνυμα (μόνιμο) + slider «Προϊόντα που ξεχωρίζουν»
           Αριστερά η στήλη κειμένου, δεξιά η φωτογραφία σε όλο το ύψος.
           Το πλάτος της στήλης κειμένου ακολουθεί το container (--nal-gutter).
           ===================================================================== */
        .nal-feature {
            --nal-gutter: max(40px, calc((100vw - 1320px) / 2));
            --nal-side: calc(var(--nal-gutter) + min(680px, 44vw));
            position: relative;
            padding: 0;
            color: var(--nal-white);
            background: var(--nal-black);
            overflow: hidden;
        }

        /* Full height: όλο το ύψος της οθόνης κάτω από το header (το ύψος του header το μετράει το js/nal.js) */
        .nal-feature-wrap {
            position: relative;
            display: grid;
            grid-template-columns: var(--nal-side) minmax(0, 1fr);
            height: calc(100vh - var(--nal-header-h, 92px));
            height: calc(100svh - var(--nal-header-h, 92px));
            min-height: 600px;
        }

        /* ---------- Στήλη κειμένου ---------- */
        .nal-feature-side {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            min-width: 0;
            padding: clamp(36px, 6.5vh, 72px) 56px clamp(26px, 4.5vh, 44px) var(--nal-gutter);
        }

        /* Εταιρικό μήνυμα: η κύρια επικεφαλίδα της σελίδας */
        .nal-hero-title {
            margin: 0;
            color: var(--nal-white);
            font-family: "Manrope", sans-serif;
            font-size: clamp(27px, 2.31vw, 36px); /* −30% */
            font-weight: 600;
            line-height: 1.06;
            letter-spacing: -0.025em;
        }

        .nal-hero-l1,
        .nal-hero-l2 {
            display: block;
        }

        /* Δεύτερη γραμμή: μικρότερη, ως συμπλήρωμα του «Εξοπλισμός ξενοδοχείων.»
           Σπάει μόνο ανάμεσα στις δύο φράσεις («Από τη μελέτη» / «μέχρι την υποστήριξη.») */
        .nal-hero-l2 {
            margin-top: 0.22em;
            color: rgba(255, 255, 255, 0.72);
            font-size: min(0.66em, 24px);
            line-height: 1.18;
            letter-spacing: -0.015em;
        }

        .nal-hero-l2 > span {
            white-space: nowrap;
        }

        .nal-hero-solutions {
            gap: 10px;
            margin-top: clamp(24px, 3.8vh, 34px);
        }

        .nal-hero-solutions i {
            font-size: 16px;
            transition: transform 0.25s ease;
        }

        .nal-hero-solutions:hover i {
            transform: translateX(3px);
        }

        /* Προϊόν */
        .nal-feature-product {
            margin-top: clamp(44px, 8vh, 92px);
            padding-top: 20px;
            border-top: 1px solid rgba(255, 255, 255, 0.16);
        }

        .nal-feature-kicker {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 16px;
            margin-bottom: clamp(14px, 2.4vh, 22px);
        }

        .nal-feature-kicker h2 {
            margin: 0;
            color: var(--nal-blue-light);
            font-family: "Manrope", sans-serif;
            font-size: 13px;
            font-weight: 700;
            line-height: 1.3;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .nal-feature-count {
            flex: 0 0 auto;
            color: rgba(255, 255, 255, 0.6);
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 1px;
        }

        .nal-feature-count b {
            color: var(--nal-white);
            font-weight: 700;
        }

        .nal-feature-texts {
            display: grid;
        }

        .nal-feature-slide {
            grid-area: 1 / 1;
            min-width: 0;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.6s ease, visibility 0s linear 0.6s;
        }

        .nal-feature-slide.is-active {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.6s ease, visibility 0s;
        }

        .nal-feature-slide > * {
            opacity: 0;
            transform: translateY(12px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .nal-feature-slide.is-active > * {
            opacity: 1;
            transform: none;
        }

        .nal-feature-slide.is-active > :nth-child(2) { transition-delay: 0.06s; }
        .nal-feature-slide.is-active > :nth-child(3) { transition-delay: 0.12s; }
        .nal-feature-slide.is-active > :nth-child(4) { transition-delay: 0.18s; }
        .nal-feature-slide.is-active > :nth-child(5) { transition-delay: 0.24s; }

        .nal-feature-brand {
            display: block;
            margin-bottom: 8px;
            color: rgba(255, 255, 255, 0.72);
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1.4px;
            text-transform: uppercase;
        }

        .nal-feature-slide .nal-feature-title {
            margin: 0 0 10px;
            color: var(--nal-white);
            font-family: "Manrope", sans-serif;
            font-size: clamp(26px, 2vw, 34px);
            font-weight: 600;
            line-height: 1.1;
            letter-spacing: -0.6px;
        }

        .nal-feature-lead {
            margin: 0 0 18px;
            color: rgba(255, 255, 255, 0.86);
            font-size: 18px;
            line-height: 1.5;
        }

        .nal-feature-points {
            margin: 0 0 22px;
            padding: 0;
            list-style: none;
        }

        .nal-feature-points li {
            position: relative;
            margin: 0;
            padding: 9px 0 9px 30px;
            color: rgba(255, 255, 255, 0.82);
            font-size: 16px;
            line-height: 1.45;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }

        .nal-feature-points li:last-child {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .nal-feature-points li::before {
            content: "";
            position: absolute;
            top: 16px;
            left: 2px;
            width: 12px;
            height: 7px;
            border-bottom: 2px solid var(--nal-blue-light);
            border-left: 2px solid var(--nal-blue-light);
            transform: rotate(-45deg);
        }

        .nal-feature-actions {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 14px 26px;
        }

        .nal-link-arrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding-bottom: 2px;
            color: var(--nal-white);
            font-size: 15px;
            font-weight: 600;
            border-bottom: 1px solid rgba(255, 255, 255, 0.45);
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .nal-link-arrow:hover {
            color: var(--nal-blue-light);
            border-color: var(--nal-blue-light);
        }

        /* Πλοήγηση slider (κάτω μέρος της στήλης) */
        .nal-feature-nav {
            display: flex;
            align-items: flex-end;
            gap: 24px;
            margin-top: auto;
            padding-top: 26px;
        }

        .nal-feature-tabs {
            flex: 1 1 auto;
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            gap: 8px;
        }

        .nal-feature-tabs button {
            position: relative;
            display: block;
            min-width: 0;
            padding: 14px 0 0;
            color: rgba(255, 255, 255, 0.55);
            text-align: left;
            background: transparent;
            border: 0;
            border-top: 1px solid rgba(255, 255, 255, 0.22);
            transition: color 0.25s ease;
        }

        .nal-feature-tabs button span {
            display: block;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1px;
        }

        /* Στις καρτέλες μόνο οι αριθμοί */
        .nal-feature-tabs button em {
            display: none;
        }

        .nal-feature-tabs button::before {
            content: "";
            position: absolute;
            top: -1px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--nal-blue-light);
            transform: scaleX(0);
            transform-origin: left;
        }

        .nal-feature-tabs button:hover,
        .nal-feature-tabs button.is-active {
            color: var(--nal-white);
        }

        .nal-feature-tabs button.is-active span {
            color: var(--nal-blue-light);
        }

        .nal-feature-tabs button.is-active::before {
            animation: nal-progress var(--nal-feature-interval, 7s) linear forwards;
        }

        .nal-feature.is-paused .nal-feature-tabs button.is-active::before {
            animation: none;
            transform: scaleX(1);
        }

        .nal-feature-arrows {
            display: flex;
            flex: 0 0 auto;
            gap: 8px;
        }

        .nal-feature-arrows button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 48px;
            height: 48px;
            padding: 0;
            color: var(--nal-white);
            font-size: 19px;
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.32);
            transition: background 0.25s ease, border-color 0.25s ease;
        }

        .nal-feature-arrows button:hover,
        .nal-feature-arrows button:focus-visible {
            background: var(--nal-blue);
            border-color: var(--nal-blue);
        }

        /* ---------- Φωτογραφίες ---------- */
        .nal-feature-stage {
            position: relative;
            display: grid;
            min-width: 0;
            overflow: hidden;
            background: #171a1a;
        }

        .nal-feature-media {
            grid-area: 1 / 1;
            position: relative;
            overflow: hidden;
            background: #171a1a;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.7s ease, visibility 0s linear 0.7s;
        }

        .nal-feature-media.is-active {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.7s ease, visibility 0s;
        }

        .nal-feature-media img {
            position: absolute;
            inset: 0;
            width: 100%;
            max-width: none;
            height: 100%;
            object-fit: cover;
            transform: scale(1.05);
            transition: transform 7s ease-out;
        }

        .nal-feature-media.is-active img {
            transform: scale(1);
        }

        /* Προϊόν σε λευκό φόντο: ολόκληρο, μεγάλο, χωρίς crop */
        .nal-feature-media.is-product {
            background: var(--nal-white);
        }

        .nal-feature-media.is-product img {
            padding: 6% 8%;
            object-fit: contain;
        }

        /* Lockin G30: κρύβουμε τη μαύρη μπάρα με το logo στο πάνω μέρος της φωτογραφίας */
        .nal-feature-media.is-crop-g30 img {
            inset: auto auto 0 0;
            width: 147%;
            max-width: none;
            height: auto;
            object-fit: fill;
            transform-origin: left bottom;
        }

        /* RentYourSafe: φαρδιά φωτογραφία, κρατάμε στο κάδρο το tablet και το χρηματοκιβώτιο */
        .nal-feature-media.is-pos-rys img {
            object-position: 82% 50%;
        }

        /* ---------- Responsive ---------- */
        /* Χαμηλές οθόνες: τα bullets κρύβονται, ώστε να χωρά άνετα το μήνυμα και το προϊόν */
        @media (min-width: 992px) and (max-height: 949px) {
            .nal-feature-points { display: none; }
            .nal-feature-lead { margin-bottom: 20px; }
        }

        @media (min-width: 992px) and (max-height: 820px) {
            .nal-feature-side { padding-top: 28px; padding-bottom: 22px; }
            .nal-hero-title { font-size: clamp(25px, 2.24vw, 32px); }
            .nal-hero-solutions { margin-top: 18px; }
            .nal-feature-product { margin-top: 34px; padding-top: 16px; }
            .nal-feature-kicker { margin-bottom: 12px; }
            .nal-feature-lead { font-size: 17px; margin-bottom: 14px; }
            .nal-feature-nav { padding-top: 18px; }
        }

        @media (max-width: 1199px) and (min-width: 992px) {
            .nal-feature { --nal-side: calc(var(--nal-gutter) + 48vw); }
            .nal-feature-side { padding-right: 40px; }
            .nal-hero-title { font-size: 25px; }
        }

        /* Tablet & κινητό: μήνυμα → φωτογραφία → προϊόν → πλοήγηση */
        @media (max-width: 991px) {
            .nal-feature { --nal-gutter: 24px; }
            .nal-feature-wrap {
                display: flex;
                flex-direction: column;
                height: auto;
                min-height: 0;
                padding-bottom: 36px;
            }
            .nal-feature-side { display: contents; }
            .nal-feature-intro { order: 1; padding: 34px 24px 30px; }
            .nal-feature-stage { order: 2; flex: 0 0 auto; height: 72vw; max-height: 560px; }
            .nal-feature-product { order: 3; margin: 0; padding: 26px 24px 0; border-top: 0; }
            .nal-feature-nav { order: 4; margin-top: 0; padding: 34px 24px 0; }
            .nal-hero-title { font-size: clamp(21px, 4.34vw, 35px); }
            .nal-feature-slide .nal-feature-title { font-size: 32px; }
            .nal-feature-lead { font-size: 17px; }
            .nal-feature-arrows button { width: 44px; height: 44px; font-size: 17px; }
        }

        @media (max-width: 575px) {
            .nal-feature-intro, .nal-feature-product, .nal-feature-nav { padding-left: 15px; padding-right: 15px; }
            .nal-feature-intro { padding-top: 30px; padding-bottom: 28px; }
            .nal-hero-title { font-size: clamp(18px, 5.32vw, 24px); line-height: 1.12; }
            .nal-hero-l2 { font-size: max(0.72em, 16px); }
            .nal-feature-stage { height: 84vw; }
            .nal-feature-slide .nal-feature-title { font-size: 30px; }
            .nal-feature .nal-btn { flex: 1 1 100%; }
            .nal-feature-actions { gap: 16px; }
            .nal-feature-points li { font-size: 16px; }
        }

        @media (prefers-reduced-motion: reduce) {
            .nal-feature-slide, .nal-feature-slide > *, .nal-feature-media, .nal-feature-media img { transition: none; }
            .nal-feature-tabs button.is-active::before { animation: none; transform: scaleX(1); }
        }

/* =====================================================================
   NAL — Αρχική σελίδα: sections 1–4
   Παλέτα: μαύρο, off-white, μπλε NAL. Ορθές γωνίες, γραμμές 1px.
   ===================================================================== */

:root {
    --nal-offwhite: #f4f2ee;
    --nal-ink: #111414;
    --nal-muted: #4f5454;
    --nal-line: rgba(17, 20, 20, 0.14);
    --nal-line-light: rgba(255, 255, 255, 0.14);
}

.nal-hero h1, .nal-hero h2, .nal-hero h3,
.nal-cats h2, .nal-cats h3,
.nal-solutions h2, .nal-solutions h3,
.nal-signature h2, .nal-signature h3 {
    font-family: "Manrope", sans-serif;
    text-wrap: balance;
}

/* ---------- Κοινά στοιχεία ---------- */
.nal-eyebrow {
    display: flex;
    align-items: center;
    margin: 0 0 22px;
    color: var(--nal-blue);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.nal-eyebrow span {
    display: inline-flex;
    align-items: center;
}

.nal-eyebrow span::after {
    content: "";
    width: 32px;
    height: 1px;
    margin: 0 14px;
    background: currentColor;
    opacity: 0.6;
}

.nal-eyebrow--light {
    color: var(--nal-blue-light);
}

.nal-num {
    display: block;
    color: var(--nal-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.nal-sec-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 28px;
    align-items: end;
    margin-bottom: 64px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--nal-line);
}

.nal-sec-head .nal-eyebrow {
    grid-column: 1 / -1;
}

.nal-sec-head h2 {
    grid-column: 1 / span 7;
    margin: 0;
    color: var(--nal-ink);
    font-size: clamp(34px, 3.6vw, 58px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -1.2px;
}

.nal-sec-aside {
    grid-column: 9 / -1;
}

.nal-sec-aside p {
    margin: 0 0 20px;
    color: var(--nal-muted);
    font-size: 17px;
    line-height: 1.7;
}

.nal-sec-head--dark {
    border-color: var(--nal-line-light);
}

.nal-sec-head--dark h2 {
    color: var(--nal-white);
}

.nal-sec-head--dark .nal-sec-aside p {
    color: rgba(255, 255, 255, 0.8);
}

.nal-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 3px;
    color: var(--nal-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    border-bottom: 1px solid currentColor;
    transition: color 0.25s ease;
}

.nal-link i {
    transition: transform 0.25s ease;
}

.nal-link:hover {
    color: var(--nal-blue);
}

.nal-link:hover i {
    transform: translateX(4px);
}

.nal-link--light {
    color: var(--nal-white);
}

.nal-link--light:hover {
    color: var(--nal-blue-light);
}

.nal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
}

.nal-btn-dark {
    color: var(--nal-white);
    background: var(--nal-ink);
    border-color: var(--nal-ink);
}

.nal-btn-dark:hover {
    color: var(--nal-white);
    background: var(--nal-blue);
    border-color: var(--nal-blue);
}

/* Εικόνες: φωτογραφία (cover) ή προϊόν σε λευκό φόντο (contain) */
.nal-media-photo img,
.nal-media-product img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nal-media-photo img {
    object-fit: cover;
}

.nal-media-product {
    background: var(--nal-white);
}

.nal-media-product img {
    padding: 9%;
    object-fit: contain;
}

/* ---------- 1. HERO ---------- */
.nal-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(640px, calc(100vh - 92px), 960px);
    padding: 0;
    overflow: hidden;
    color: var(--nal-white);
    background: var(--nal-black);
}

.nal-hero-media {
    position: absolute;
    inset: 0;
    margin: 0;
}

.nal-hero-media img {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: cover;
    object-position: 62% 50%;
    animation: nal-hero-zoom 14s ease-out both;
}

@keyframes nal-hero-zoom {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
}

/* Σκίαση μόνο όσο χρειάζεται για να διαβάζεται το κείμενο */
.nal-hero::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 10, 10, 0.86) 0%, rgba(8, 10, 10, 0.6) 42%, rgba(8, 10, 10, 0.12) 78%),
        linear-gradient(0deg, rgba(8, 10, 10, 0.75) 0%, rgba(8, 10, 10, 0) 38%);
    pointer-events: none;
}

.nal-hero-inner {
    position: relative;
    z-index: 2;
    display: block;
    padding-top: 120px;
}

.nal-hero-copy {
    max-width: 880px;
    padding-bottom: 64px;
}

.nal-hero h1 {
    margin: 0 0 26px;
    color: var(--nal-white);
    font-size: clamp(40px, 5.2vw, 82px);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -2px;
}

.nal-hero-lead {
    max-width: 640px;
    margin: 0 0 38px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 19px;
    line-height: 1.6;
}

.nal-hero-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.nal-hero-facts > div {
    padding: 24px 28px 34px 0;
}

.nal-hero-facts > div + div {
    padding-left: 28px;
    border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.nal-hero-facts dt {
    margin: 0 0 4px;
    color: var(--nal-white);
    font-size: clamp(26px, 2.3vw, 36px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.nal-hero-facts dd {
    margin: 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 14px;
    line-height: 1.45;
}

/* ---------- 2. ΒΑΣΙΚΕΣ ΚΑΤΗΓΟΡΙΕΣ ---------- */
.nal-cats {
    padding: 130px 0 140px;
    background: var(--nal-offwhite);
}

.nal-cats-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    gap: 48px 28px;
}

.nal-cat {
    grid-column: span 3;
    min-width: 0;
}

.nal-cat--lead {
    grid-column: 1 / span 6;
    grid-row: 1 / span 2;
}

.nal-cat > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--nal-ink);
}

.nal-cat-media {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.nal-cat--lead .nal-cat-media {
    flex: 1 1 auto;
    min-height: 420px;
    aspect-ratio: auto;
}

.nal-cat--lead .nal-cat-media img {
    position: absolute;
    inset: 0;
}

.nal-cat-body {
    position: relative;
    display: block;
    padding: 22px 56px 0 0;
}

.nal-cat-body .nal-num {
    margin-bottom: 8px;
}

.nal-cat-body h3 {
    margin: 0 0 8px;
    color: var(--nal-ink);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.3px;
    transition: color 0.25s ease;
}

.nal-cat--lead .nal-cat-body h3 {
    font-size: clamp(26px, 2.2vw, 34px);
}

.nal-cat-body p {
    margin: 0;
    color: var(--nal-muted);
    font-size: 16px;
    line-height: 1.6;
}

.nal-cat-cta {
    position: absolute;
    top: 22px;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--nal-ink);
    font-size: 16px;
    border: 1px solid var(--nal-line);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.nal-cat > a:hover .nal-cat-media img,
.nal-cat > a:focus-visible .nal-cat-media img {
    transform: scale(1.05);
}

.nal-cat > a:hover h3,
.nal-cat > a:focus-visible h3 {
    color: var(--nal-blue);
}

.nal-cat > a:hover .nal-cat-cta,
.nal-cat > a:focus-visible .nal-cat-cta {
    color: var(--nal-white);
    background: var(--nal-blue);
    border-color: var(--nal-blue);
}

/* ---------- 3. ΟΛΟΚΛΗΡΩΜΕΝΕΣ ΛΥΣΕΙΣ ---------- */
.nal-solutions {
    padding: 130px 0 140px;
    color: var(--nal-white);
    background: var(--nal-black);
}

.nal-solutions-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 72px;
}

.nal-solution {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nal-solution + .nal-solution::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -36px;
    width: 1px;
    background: var(--nal-line-light);
}

.nal-solution-media {
    position: relative;
    margin: 0 0 30px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.nal-solution:hover .nal-solution-media img {
    transform: scale(1.05);
}

.nal-solution h3 {
    margin: 0 0 14px;
    color: var(--nal-white);
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.4px;
}

.nal-solution > p {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    line-height: 1.7;
}

.nal-solution-list {
    flex: 1 1 auto;
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

.nal-solution-list li {
    position: relative;
    margin: 0;
    padding: 10px 0 10px 22px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.45;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.nal-solution-list li::before {
    content: "";
    position: absolute;
    top: 21px;
    left: 0;
    width: 10px;
    height: 1px;
    background: var(--nal-blue-light);
}

.nal-solution .nal-link {
    align-self: flex-start;
}

.nal-process {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 110px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.nal-process li {
    position: relative;
    margin: 0;
    padding: 30px 32px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.nal-process li::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 48px;
    height: 2px;
    background: var(--nal-blue-light);
    transition: width 0.5s ease;
}

.nal-process li:hover::before {
    width: calc(100% - 32px);
}

.nal-process .nal-num {
    margin-bottom: 14px;
    color: var(--nal-blue-light);
}

.nal-process h3 {
    margin: 0 0 10px;
    color: var(--nal-white);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
}

.nal-process p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    line-height: 1.6;
}

.nal-process p a {
    color: var(--nal-white);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.nal-process p a:hover {
    color: var(--nal-blue-light);
    border-color: var(--nal-blue-light);
}

/* ---------- 4. SIGNATURE PRODUCT ---------- */
.nal-signature {
    padding: 140px 0 170px;
    background: var(--nal-offwhite);
}

.nal-signature-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 28px;
    align-items: center;
}

.nal-signature-visual {
    position: relative;
    grid-column: 1 / span 7;
    padding-right: 12%;
}

.nal-signature-main {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: #e9e6e0;
}

.nal-signature-main img,
.nal-signature-detail img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: cover;
}

.nal-signature-main img {
    object-position: 50% 30%;
    transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nal-signature-visual:hover .nal-signature-main img {
    transform: scale(1.04);
}

.nal-signature-detail {
    position: absolute;
    right: 0;
    bottom: -56px;
    width: 40%;
    margin: 0;
    padding: 12px 12px 0;
    background: var(--nal-offwhite);
}

.nal-signature-detail img {
    aspect-ratio: 1 / 1;
}

.nal-signature-detail figcaption {
    padding: 12px 0 0;
    color: var(--nal-muted);
    font-size: 13px;
    line-height: 1.4;
}

.nal-signature-copy {
    grid-column: 9 / -1;
}

.nal-signature-brand {
    margin: 0 0 6px;
    color: var(--nal-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
}

.nal-signature h2 {
    margin: 0 0 12px;
    color: var(--nal-ink);
    font-size: clamp(56px, 6.4vw, 104px);
    font-weight: 600;
    line-height: 0.95;
    letter-spacing: -3px;
}

.nal-signature-sub {
    margin: 0 0 26px;
    color: var(--nal-ink);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
}

.nal-signature-copy > p:not([class]) {
    margin: 0 0 30px;
    color: var(--nal-muted);
    font-size: 16px;
    line-height: 1.7;
}

.nal-specs {
    margin: 0 0 38px;
    border-bottom: 1px solid var(--nal-line);
}

.nal-specs > div {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 16px;
    padding: 13px 0;
    border-top: 1px solid var(--nal-line);
}

.nal-specs dt {
    color: var(--nal-muted);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.nal-specs dd {
    margin: 0;
    color: var(--nal-ink);
    font-size: 15px;
    line-height: 1.5;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .nal-hero-media img { object-position: 80% 50%; }
    .nal-cat { grid-column: span 6; }
    .nal-cat--lead { grid-column: 1 / -1; grid-row: auto; }
    .nal-cat--lead .nal-cat-media { flex: none; min-height: 0; aspect-ratio: 21 / 9; }
    .nal-cat-media { aspect-ratio: 16 / 10; }
    .nal-sec-head h2 { grid-column: 1 / span 8; }
    .nal-sec-aside { grid-column: 9 / -1; }
    .nal-cat-body h3 { font-size: 19px; }
    .nal-solutions-grid { column-gap: 48px; }
    .nal-solution + .nal-solution::before { left: -24px; }
    .nal-signature-copy { grid-column: 8 / -1; }
    .nal-signature-visual { padding-right: 8%; }
}

@media (max-width: 991px) {
    .nal-sec-head { display: block; margin-bottom: 44px; padding-bottom: 30px; }
    .nal-sec-head h2 { margin-bottom: 22px; }
    .nal-sec-aside { max-width: 560px; }

    .nal-hero { min-height: clamp(600px, calc(100svh - 76px), 900px); }
    .nal-hero-inner { padding-top: 90px; }
    .nal-hero-copy { padding-bottom: 44px; }
    .nal-hero-lead { font-size: 17px; }
    .nal-hero::before {
        background: linear-gradient(0deg, rgba(8, 10, 10, 0.92) 0%, rgba(8, 10, 10, 0.72) 55%, rgba(8, 10, 10, 0.3) 100%);
    }

    .nal-cats, .nal-solutions { padding: 90px 0 100px; }
    .nal-cats-grid { gap: 40px 20px; }
    .nal-cat--lead .nal-cat-media { aspect-ratio: 16 / 10; }

    .nal-solutions-grid { grid-template-columns: 1fr; gap: 56px; }
    .nal-solution + .nal-solution::before { display: none; }
    .nal-solution-media { aspect-ratio: 16 / 9; }
    .nal-process { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; margin-top: 80px; }

    .nal-signature { padding: 90px 0 120px; }
    .nal-signature-grid { display: block; }
    .nal-signature-visual { padding-right: 18%; margin-bottom: 110px; }
    .nal-signature-detail { width: 42%; }
}

@media (max-width: 575px) {
    .nal-hero-media img { object-position: 84% 50%; }
    .nal-hero h1 { font-size: 34px; letter-spacing: -0.8px; }
    .nal-hero .nal-eyebrow { font-size: 11px; letter-spacing: 1.4px; }
    .nal-hero-facts > div { padding: 18px 12px 24px 0; }
    .nal-hero-facts > div + div { padding-left: 12px; }
    .nal-hero-facts dt { font-size: 22px; }
    .nal-hero-facts dd { font-size: 12px; }
    .nal-hero .nal-btn { flex: 1 1 100%; }

    .nal-sec-head h2 { font-size: 32px; letter-spacing: -0.6px; }
    .nal-cat { grid-column: 1 / -1; }
    .nal-cat-media { aspect-ratio: 16 / 10; }
    .nal-process { grid-template-columns: 1fr; }
    .nal-signature h2 { font-size: 64px; }
    .nal-signature-visual { padding-right: 14%; }
    .nal-specs > div { grid-template-columns: 1fr; gap: 2px; }
    .nal-signature .nal-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .nal-hero-media img { animation: none; }
    .nal-media-photo img, .nal-media-product img, .nal-signature-main img { transition: none; }
}

/* Lockin G30: η αρχική φωτογραφία έχει μαύρη μπάρα με logo στο πάνω μέρος — δείχνουμε μόνο το κάτω-αριστερά τμήμα */
.nal-crop-g30 img {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 147%;
    height: auto;
}

.nal-nowrap {
    white-space: nowrap;
}

/* Το eyebrow του hero δεν έχει αριθμό: χωρίς τη γραμμή μετά το span */
.nal-eyebrow .nal-nowrap::after {
    content: none;
}

.nal-eyebrow--plain {
    display: block;
    line-height: 1.6;
}

/* =====================================================================
   NAL — Αρχική σελίδα: sections 5–8
   ===================================================================== */

.nal-why h2, .nal-why h3,
.nal-projects h2, .nal-projects h3,
.nal-brands h2, .nal-brands h3,
.nal-cta h2, .nal-cta h3 {
    font-family: "Manrope", sans-serif;
    text-wrap: balance;
}

/* ---------- 5. ΓΙΑΤΙ NAL ---------- */
.nal-why {
    padding: 140px 0;
    color: var(--nal-white);
    background: var(--nal-black);
}

.nal-why-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 28px;
    align-items: start;
}

.nal-why-intro {
    grid-column: 1 / span 5;
    position: sticky;
    top: 40px;
}

.nal-why h2 {
    margin: 0 0 26px;
    color: var(--nal-white);
    font-size: clamp(34px, 3.4vw, 54px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -1.2px;
}

.nal-why-lead {
    margin: 0 0 44px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 18px;
    line-height: 1.7;
}

.nal-why-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid var(--nal-line-light);
}

.nal-why-facts > div {
    padding: 22px 20px 24px 0;
    border-bottom: 1px solid var(--nal-line-light);
}

.nal-why-facts > div:nth-child(even) {
    padding-left: 24px;
    border-left: 1px solid var(--nal-line-light);
}

.nal-why-facts dt {
    margin: 0 0 4px;
    color: var(--nal-white);
    font-size: clamp(28px, 2.4vw, 38px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.6px;
}

.nal-why-facts dd {
    margin: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 15px;
    line-height: 1.5;
}

.nal-why-list {
    grid-column: 7 / -1;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--nal-line-light);
}

.nal-why-list li {
    position: relative;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    margin: 0;
    padding: 34px 0 36px;
    border-top: 1px solid var(--nal-line-light);
}

.nal-why-list li::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--nal-blue-light);
    transition: width 0.6s ease;
}

.nal-why-list li:hover::before {
    width: 100%;
}

.nal-why-list .nal-num {
    padding-top: 7px;
    color: var(--nal-blue-light);
}

.nal-why-list h3 {
    margin: 0 0 12px;
    color: var(--nal-white);
    font-size: clamp(22px, 1.9vw, 28px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.4px;
}

.nal-why-list p {
    max-width: 580px;
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 17px;
    line-height: 1.72;
}

.nal-why-list .nal-link {
    margin-top: 18px;
}

/* ---------- 6. ΕΠΙΛΕΓΜΕΝΑ ΕΡΓΑ: στο projects.css ---------- */

/* ---------- 7. BRANDS ---------- */
.nal-brands {
    padding: 140px 0;
    background: var(--nal-white);
}

.nal-brands-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--nal-line);
    border-left: 1px solid var(--nal-line);
}

.nal-brands-grid li {
    margin: 0;
    padding: 0;
    border-right: 1px solid var(--nal-line);
    border-bottom: 1px solid var(--nal-line);
}

.nal-brands-grid a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    min-height: 230px;
    padding: 34px 24px 30px;
    color: var(--nal-ink);
    text-align: center;
    transition: background 0.3s ease;
}

/* Κοινή ζώνη λογοτύπου: όλα τα λογότυπα κεντραρισμένα στο ίδιο ύψος.
   Το πλάτος κάθε λογοτύπου ορίζεται ανά brand (στο HTML) για ίσο οπτικό βάρος. */
.nal-brand-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 88px;
}

.nal-brand-mark img {
    display: block;
    max-width: 100%;
    height: auto;
    mix-blend-mode: multiply;
}

.nal-brand-name {
    display: block;
    color: var(--nal-ink);
    font-size: clamp(22px, 1.8vw, 26px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.3px;
}

.nal-brand-what {
    display: block;
    max-width: 210px;
    margin-top: 22px;
    color: var(--nal-muted);
    font-size: 15px;
    line-height: 1.5;
}

.nal-brands-grid a > i {
    position: absolute;
    top: 20px;
    right: 20px;
    color: var(--nal-blue);
    font-size: 15px;
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.nal-brands-grid a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: var(--nal-blue);
    transform: translateX(-50%);
    transition: width 0.4s ease;
}

.nal-brands-grid a:hover,
.nal-brands-grid a:focus-visible {
    color: var(--nal-ink);
    background: var(--nal-offwhite);
}

.nal-brands-grid a:hover > i,
.nal-brands-grid a:focus-visible > i {
    opacity: 1;
    transform: none;
}

.nal-brands-grid a:hover::after,
.nal-brands-grid a:focus-visible::after {
    width: calc(100% - 48px);
}

.nal-brands-grid a:focus-visible {
    outline: 2px solid var(--nal-blue);
    outline-offset: -2px;
}

/* ---------- 8. ΤΕΛΙΚΟ CTA ---------- */
.nal-cta {
    position: relative;
    padding: 110px 0 100px;
    overflow: hidden;
    color: var(--nal-white);
    background: var(--nal-black);
    border-top: 4px solid var(--nal-blue);
}

.nal-cta-main {
    max-width: 980px;
}

.nal-cta h2 {
    margin: 0 0 28px;
    color: var(--nal-white);
    font-size: clamp(40px, 5.2vw, 84px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -2px;
}

.nal-cta-lead {
    max-width: 660px;
    margin: 0 0 42px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 18px;
    line-height: 1.65;
}

.nal-btn-lg {
    min-height: 60px;
    padding: 0 36px;
    font-size: 15px;
}

.nal-cta-offices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--nal-line-light);
}

.nal-cta-offices address {
    margin: 0;
    padding: 34px 28px 60px 0;
    font-style: normal;
}

.nal-cta-offices address + address {
    padding-left: 28px;
    border-left: 1px solid var(--nal-line-light);
}

.nal-cta-offices h3 {
    margin: 0 0 14px;
    color: var(--nal-blue-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.nal-cta-offices p {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.68);
    font-size: 15px;
    line-height: 1.6;
}

.nal-cta-offices a {
    color: var(--nal-white);
    font-size: 17px;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.nal-cta-offices a:hover {
    color: var(--nal-blue-light);
    border-color: var(--nal-blue-light);
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .nal-why-intro { grid-column: 1 / span 5; }
    .nal-why-list { grid-column: 7 / -1; }
    .nal-brands-grid a { padding: 30px 18px 26px; }
    .nal-brand-name { font-size: 22px; }
}

@media (max-width: 991px) {
    .nal-why, .nal-projects, .nal-brands { padding: 90px 0 100px; }
    .nal-why-grid { display: block; }
    .nal-why-intro { position: static; margin-bottom: 64px; }


    .nal-brands-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nal-brands-grid a { min-height: 210px; }

    .nal-cta { padding: 80px 0 80px; }
    .nal-cta-offices { grid-template-columns: 1fr; }
    .nal-cta-offices address { padding: 26px 0 28px; }
    .nal-cta-offices address + address { padding-left: 0; border-left: 0; border-top: 1px solid var(--nal-line-light); }
    .nal-cta-offices address:last-child { padding-bottom: 60px; }
}

@media (max-width: 575px) {
    .nal-why h2 { font-size: 32px; letter-spacing: -0.6px; }
    .nal-why-list li { grid-template-columns: 44px minmax(0, 1fr); padding: 28px 0 30px; }
    .nal-why-facts > div { padding-right: 12px; }
    .nal-why-facts > div:nth-child(even) { padding-left: 16px; }


    .nal-brands-grid a { min-height: 190px; padding: 24px 12px 22px; }
    .nal-brands-grid a:hover::after { width: calc(100% - 24px); }
    .nal-brand-mark { height: 76px; }
    .nal-brand-mark img { zoom: 0.86; }
    .nal-brand-what { margin-top: 16px; font-size: 14px; }

    .nal-cta h2 { font-size: 36px; letter-spacing: -1px; }
    .nal-cta .nal-btn { flex: 1 1 100%; }
}

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

/* =====================================================================
   NAL — 05 Επιλεγμένα έργα: οριζόντια γκαλερί
   Η λωρίδα ξεκινά στοιχισμένη με το container και «βγαίνει» από τη δεξιά
   άκρη της οθόνης. Το αριστερό περιθώριο (--nal-proj-gutter) το υπολογίζει
   το js/nal.js από τη θέση του container.
   ===================================================================== */
.nal-projects {
    --nal-proj-gutter: max(15px, calc((100vw - 1320px) / 2 + 12px));
    --nal-proj-card: clamp(280px, 31vw, 470px);
    padding: 96px 0 88px;
    overflow: hidden;
    background: var(--nal-white);
}

.nal-projects-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-bottom: 36px;
}

.nal-projects-head h2 {
    max-width: 720px;
    margin: 0;
    color: var(--nal-ink);
    font-size: clamp(32px, 3.2vw, 50px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -1.2px;
}

.nal-projects-tools {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 28px;
}

.nal-projects-arrows {
    display: flex;
    gap: 8px;
}

.nal-projects-arrows button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    color: var(--nal-ink);
    font-size: 19px;
    background: transparent;
    border: 1px solid rgba(17, 20, 20, 0.25);
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.nal-projects-arrows button:hover:not(:disabled) {
    color: var(--nal-white);
    background: var(--nal-ink);
    border-color: var(--nal-ink);
}

.nal-projects-arrows button:disabled {
    opacity: 0.3;
    cursor: default;
}

/* ---------- Λωρίδα ---------- */
.nal-projects-track {
    display: flex;
    gap: 28px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--nal-proj-gutter);
    padding: 0 var(--nal-proj-gutter) 6px;
    scrollbar-width: none;
    cursor: grab;
}

.nal-projects-track::-webkit-scrollbar {
    display: none;
}

.nal-projects-track.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
}

.nal-projects-track.is-dragging a {
    pointer-events: none;
}

.nal-projects-track:focus-visible {
    outline: 2px solid var(--nal-blue);
    outline-offset: 4px;
}

.nal-projects-card {
    flex: 0 0 var(--nal-proj-card);
    scroll-snap-align: start;
}

.nal-projects-card > a {
    display: block;
    color: var(--nal-ink);
    user-select: none;
}

.nal-projects-media {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: #e3e0da;
}

.nal-projects-media img {
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: cover;
    transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* λεπτή γαλάζια γραμμή που «γεμίζει» στο κάτω μέρος της φωτογραφίας στο hover */
.nal-projects-media::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--nal-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.nal-projects-cap {
    position: relative;
    padding: 18px 34px 0 0;
}

.nal-projects-place {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    color: var(--nal-muted);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.nal-projects-place b {
    color: var(--nal-blue);
    font-weight: 700;
}

.nal-projects-place b::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 1px;
    margin-left: 10px;
    vertical-align: middle;
    background: currentColor;
    opacity: 0.6;
}

.nal-projects-cap h3 {
    margin: 0;
    color: var(--nal-ink);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.3px;
    transition: color 0.3s ease;
}

.nal-projects-cap > i {
    position: absolute;
    top: 20px;
    right: 0;
    color: var(--nal-ink);
    font-size: 17px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.nal-projects-card > a:hover .nal-projects-media img,
.nal-projects-card > a:focus-visible .nal-projects-media img {
    transform: scale(1.05);
}

.nal-projects-card > a:hover .nal-projects-media::after,
.nal-projects-card > a:focus-visible .nal-projects-media::after {
    transform: scaleX(1);
}

.nal-projects-card > a:hover h3,
.nal-projects-card > a:hover .nal-projects-cap > i {
    color: var(--nal-blue);
}

.nal-projects-card > a:hover .nal-projects-cap > i {
    transform: translate(3px, -3px);
}

/* Τελευταία κάρτα: σύνολο πελατών */
.nal-projects-all {
    display: flex;
    flex: 0 0 calc(var(--nal-proj-card) * 0.62);
    flex-direction: column;
    justify-content: space-between;
    align-self: flex-start;
    height: calc(var(--nal-proj-card) / 1.5);
    padding: 28px 26px;
    color: var(--nal-white);
    background: var(--nal-ink);
    scroll-snap-align: start;
    transition: background 0.3s ease;
    user-select: none;
}

.nal-projects-all:hover {
    color: var(--nal-white);
    background: var(--nal-blue);
}

.nal-projects-all-num {
    display: block;
    font-size: clamp(36px, 3.2vw, 52px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1.2px;
}

.nal-projects-all-text {
    display: block;
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.5;
}

.nal-projects-all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
}

/* ---------- Μπάρα προόδου ---------- */
.nal-projects-bar {
    position: relative;
    height: 2px;
    margin-top: 32px;
    overflow: hidden;
    background: rgba(17, 20, 20, 0.12);
}

.nal-projects-bar span {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--nal-proj-thumb, 30%);
    background: var(--nal-blue);
    transform: translateX(var(--nal-proj-pos, 0%));
    transition: width 0.2s ease;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .nal-projects { --nal-proj-card: 46vw; padding: 80px 0 72px; }
    .nal-projects-head { flex-direction: column; align-items: flex-start; gap: 22px; margin-bottom: 32px; }
    .nal-projects-tools { width: 100%; justify-content: space-between; }
    .nal-projects-track { gap: 20px; }
}

@media (max-width: 575px) {
    .nal-projects { --nal-proj-card: 78vw; padding: 70px 0 64px; }
    .nal-projects-head h2 { font-size: 30px; letter-spacing: -0.6px; }
    .nal-projects-arrows button { width: 44px; height: 44px; font-size: 17px; }
    .nal-projects-track { gap: 14px; cursor: auto; }
    .nal-projects-cap h3 { font-size: 19px; }
    .nal-projects-all { flex-basis: 56vw; padding: 22px 20px; }
    .nal-projects-bar { margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .nal-projects-media img, .nal-projects-media::after { transition: none; }
}

/* =====================================================================
   NAL — «Ένα δωμάτιο»: φωτογραφία δωματίου + ο εξοπλισμός του σε κάρτες.
   Τα προϊόντα δεν «φυτεύονται» στη φωτογραφία: κάθε κάρτα έχει τη δική
   της πραγματική εικόνα προϊόντος και οδηγεί στη σωστή κατηγορία.
   ===================================================================== */
.nal-room {
    padding: 130px 0 140px;
    background: var(--nal-offwhite);
}

.nal-room h2, .nal-room h3 {
    font-family: "Manrope", sans-serif;
    text-wrap: balance;
}

.nal-room-head {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 28px;
    align-items: end;
    margin-bottom: 56px;
}

.nal-room-heading {
    grid-column: 1 / span 7;
}

.nal-room-head h2 {
    margin: 0;
    color: var(--nal-ink);
    font-size: clamp(36px, 3.8vw, 62px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -1.4px;
}

.nal-room-head h2 span {
    display: block;
}

.nal-room-head h2 span + span {
    color: var(--nal-muted);
}

.nal-room-aside {
    grid-column: 8 / -1;
    padding-left: 28px;
    border-left: 1px solid var(--nal-line);
}

.nal-room-aside p {
    margin: 0 0 26px;
    color: #3d4242;
    font-size: 18px;
    line-height: 1.65;
}

/* ---------- Φωτογραφία + κάρτες ---------- */
.nal-room-photo {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 2000 / 711;
    background: #2a2622;
}

.nal-room-photo img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    filter: brightness(1.18) saturate(1.05);
}

/* Οι κάρτες «πατούν» στο κάτω μέρος της φωτογραφίας */
.nal-room-items {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    margin: -110px 40px 0;
    padding: 0;
    list-style: none;
    counter-reset: nal-room;
}

.nal-room-items li {
    margin: 0;
    padding: 0;
}

.nal-room-item {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--nal-ink);
    background: var(--nal-white);
    border: 1px solid var(--nal-line);
    box-shadow: 0 18px 40px rgba(17, 20, 20, 0.08);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.nal-room-thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 5 / 4;
    background: var(--nal-white);
    border-bottom: 1px solid var(--nal-line);
}

.nal-room-thumb img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 10% 14%;
    object-fit: contain;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nal-room-text {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 18px 20px 20px;
}

.nal-room-num {
    margin-bottom: 8px;
    color: var(--nal-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.nal-room-name {
    margin: 0 0 14px;
    color: var(--nal-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.2px;
}

.nal-room-cat {
    display: block;
    margin-top: auto;
    color: #3d4242;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    transition: color 0.25s ease;
}

.nal-room-cat i {
    display: inline-block;
    margin-left: 6px;
    font-size: 15px;
    vertical-align: -1px;
    transition: transform 0.25s ease;
}

.nal-room-item:hover,
.nal-room-item:focus-visible {
    color: var(--nal-ink);
    border-color: var(--nal-blue);
    box-shadow: 0 22px 46px rgba(17, 20, 20, 0.14);
    transform: translateY(-4px);
}

.nal-room-item:focus-visible {
    outline: 2px solid var(--nal-blue);
    outline-offset: 3px;
}

.nal-room-item:hover .nal-room-thumb img,
.nal-room-item:focus-visible .nal-room-thumb img {
    transform: scale(1.05);
}

.nal-room-item:hover .nal-room-cat,
.nal-room-item:focus-visible .nal-room-cat {
    color: var(--nal-blue);
}

.nal-room-item:hover .nal-room-cat i,
.nal-room-item:focus-visible .nal-room-cat i {
    transform: translateX(4px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .nal-room-items { gap: 12px; margin: -80px 24px 0; }
    .nal-room-text { padding: 16px 16px 18px; }
    .nal-room-name { font-size: 17px; }
    .nal-room-cat { font-size: 14px; }
}

/* Tablet & κινητό: καθαρή λίστα, χωρίς hover */
@media (max-width: 991px) {
    .nal-room { padding: 90px 0 100px; }
    .nal-room-head { display: block; margin-bottom: 40px; }
    .nal-room-aside { margin-top: 26px; padding-left: 0; border-left: 0; }
    .nal-room-photo { aspect-ratio: 16 / 9; }
    .nal-room-photo img { object-position: 62% 50%; }
    .nal-room-items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 28px;
        margin: 8px 0 0;
    }
    .nal-room-item {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 14px 0;
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--nal-line);
        box-shadow: none;
    }
    .nal-room-item:hover, .nal-room-item:focus-visible { box-shadow: none; transform: none; }
    .nal-room-thumb {
        flex: 0 0 92px;
        width: 92px;
        aspect-ratio: 1;
        border: 1px solid var(--nal-line);
    }
    .nal-room-thumb img { padding: 8%; }
    .nal-room-text { padding: 0; }
    .nal-room-num { margin-bottom: 4px; }
    .nal-room-name { margin-bottom: 6px; font-size: 18px; }
    .nal-room-cat { font-size: 15px; }
}

@media (max-width: 575px) {
    .nal-room-head h2 { font-size: 34px; letter-spacing: -0.8px; }
    .nal-room-aside p { font-size: 17px; }
    .nal-room .nal-btn { width: 100%; }
    .nal-room-photo { aspect-ratio: 4 / 3; }
    .nal-room-items { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .nal-room-item, .nal-room-thumb img { transition: none; }
}

@media (max-width: 575px) {
    .nal-room .nal-btn { min-height: 56px; padding: 12px 18px; line-height: 1.35; text-align: center; }
}

/* =====================================================================
   NAL — Footer: όλα τα links του live site, συμπαγές και premium.
   Κάθετες γαλάζιες γραμμές ανάμεσα στις στήλες: κάθε στήλη έχει γραμμή
   μέσα στο κενό στα αριστερά της· η γραμμή της πρώτης στήλης κάθε σειράς
   πέφτει έξω από το container και κρύβεται (overflow: hidden).
   ===================================================================== */
.nal-footer {
    --nal-footer-rule: linear-gradient(180deg, rgba(107, 184, 242, 0.65) 0%, rgba(107, 184, 242, 0.12) 100%);
    position: relative;
    padding: 60px 0 0;
    color: rgba(255, 255, 255, 0.74);
    font-family: "Manrope", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    background:
        radial-gradient(60% 120% at 0% 0%, rgba(23, 105, 170, 0.1), transparent 60%),
        #050606;
}

/* Λεπτή γαλάζια γραμμή στην κορυφή */
.nal-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(107, 184, 242, 0.7), rgba(107, 184, 242, 0.15) 60%, rgba(107, 184, 242, 0));
}

.nal-footer a {
    color: rgba(255, 255, 255, 0.74);
    transition: color 0.25s ease;
}

.nal-footer a:hover,
.nal-footer a:focus-visible {
    color: var(--nal-white);
}

/* ---------- Πάνω σειρά: λογότυπο, γραφεία, Eshop/B2B ---------- */
.nal-footer-top {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) repeat(3, minmax(0, 1.2fr)) auto;
    column-gap: 56px;
    align-items: stretch;
    overflow: hidden;
    padding-bottom: 44px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.nal-footer-top > * {
    position: relative;
    min-width: 0;
}

.nal-footer-top > *::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 0;
    left: -28px;
    width: 1px;
    background: var(--nal-footer-rule);
}

.nal-footer-logo img {
    width: auto;
    max-width: none;
    height: 56px;
    margin: -6px 0 14px -6px;
    filter: brightness(0) invert(1);
}

.nal-footer-brand p {
    max-width: 290px;
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: -0.1px;
}

.nal-footer-office {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    font-style: normal;
}

.nal-footer-office strong {
    margin-bottom: 8px;
    color: var(--nal-blue-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.nal-footer-office span {
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
}

.nal-footer .nal-footer-office a {
    color: var(--nal-white);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.1px;
}

.nal-footer .nal-footer-office a:hover {
    color: var(--nal-blue-light);
}

.nal-footer-shop {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nal-footer .nal-footer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 104px;
    min-height: 40px;
    padding: 0 18px;
    color: var(--nal-white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.35);
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.nal-footer .nal-footer-btn:hover {
    color: var(--nal-black);
    background: var(--nal-white);
    border-color: var(--nal-white);
}

.nal-footer .nal-footer-btn--blue {
    background: var(--nal-blue);
    border-color: var(--nal-blue);
}

.nal-footer .nal-footer-btn--blue:hover {
    color: var(--nal-white);
    background: var(--nal-blue-dark);
    border-color: var(--nal-blue-dark);
}

/* ---------- Στήλες με links ---------- */
.nal-footer-nav {
    display: grid;
    /* πλάτη ανάλογα με το μεγαλύτερο link κάθε στήλης (μετρημένα σε Manrope 13px) */
    grid-template-columns: minmax(0, 161fr) minmax(0, 191fr) minmax(0, 163fr) minmax(0, 334fr) minmax(0, 162fr) minmax(0, 165fr);
    column-gap: 32px;
    row-gap: 32px;
    overflow: hidden;
    padding: 40px 0 38px;
}

.nal-footer-group {
    position: relative;
    min-width: 0;
}

.nal-footer-group::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -16px;
    width: 1px;
    background: var(--nal-footer-rule);
}

.nal-footer-group summary {
    display: block;
    margin-bottom: 16px;
    color: var(--nal-white);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    list-style: none;
    pointer-events: none;
}

.nal-footer-group summary::-webkit-details-marker {
    display: none;
}

/* Ίδιο ύψος τίτλων (έως 2 γραμμές), ώστε οι λίστες να ξεκινούν στην ίδια ευθεία */
@media (min-width: 992px) {
    .nal-footer-group summary { min-height: calc(1.35em * 2 + 6px + 1.35em); }
}

.nal-footer-idx {
    display: block;
    margin-bottom: 6px;
    color: var(--nal-blue-light);
    font-size: 11px;
    letter-spacing: 1.5px;
}

.nal-footer-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nal-footer-group--wide ul {
    column-count: 2;
    column-gap: 24px;
}

.nal-footer-group li {
    margin: 0;
    padding: 0 0 7px;
    break-inside: avoid;
    font-size: 14px;
    line-height: 1.45;
}

.nal-footer-group li a {
    position: relative;
    display: inline-block;
    transition: color 0.25s ease, transform 0.25s ease;
}

.nal-footer-group li a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -12px;
    width: 0;
    height: 1px;
    background: var(--nal-blue-light);
    transition: width 0.25s ease;
}

.nal-footer-group li a:hover,
.nal-footer-group li a:focus-visible {
    color: var(--nal-white);
    transform: translateX(10px);
}

.nal-footer-group li a:hover::before,
.nal-footer-group li a:focus-visible::before {
    width: 7px;
}

/* ---------- Κάτω μπάρα ---------- */
.nal-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 32px;
    padding: 20px 0 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nal-footer-copy {
    margin: 0;
    color: rgba(255, 255, 255, 0.64);
    font-size: 13px;
    letter-spacing: 0.2px;
}

.nal-footer-company {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nal-footer-company li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    font-size: 13px;
    letter-spacing: 0.3px;
}

.nal-footer-company li + li::before {
    content: "";
    width: 1px;
    height: 12px;
    margin: 0 14px;
    background: rgba(107, 184, 242, 0.5);
}

.nal-footer-social {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nal-footer .nal-footer-social a:not(.nal-footer-credit) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    border: 1px solid rgba(107, 184, 242, 0.35);
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.nal-footer .nal-footer-social a:not(.nal-footer-credit):hover {
    color: var(--nal-white);
    background: var(--nal-blue);
    border-color: var(--nal-blue);
}

.nal-footer .nal-footer-credit {
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
}

.nal-footer .nal-footer-credit:hover {
    color: var(--nal-white);
}

/* ---------- Responsive ---------- */
@media (max-width: 1599px) {
    .nal-footer-group li { font-size: 13.5px; }
    .nal-footer-nav { column-gap: 28px; }
    .nal-footer-group::before { left: -14px; }
}

@media (max-width: 1399px) {
    .nal-footer-top { column-gap: 44px; }
    .nal-footer-top > *::before { left: -22px; }
    .nal-footer-nav { column-gap: 24px; }
    .nal-footer-group::before { left: -12px; }
    .nal-footer-group li { font-size: 13px; }
    .nal-footer-group summary { letter-spacing: 1.2px; }
}

@media (max-width: 1199px) {
    .nal-footer-top { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 32px; }
    .nal-footer-brand { grid-column: 1 / -1; display: flex; align-items: center; gap: 28px; }
    .nal-footer-logo img { margin: 0; }
    .nal-footer-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; column-gap: 40px; }
    .nal-footer-group::before { left: -20px; }
    .nal-footer-group--wide { grid-column: span 2; }
}

@media (max-width: 991px) {
    .nal-footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nal-footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nal-footer-shop { flex-direction: row; }
}

/* Tablet & κινητό: οι ομάδες links γίνονται αναδιπλούμενες (accordion) */
@media (max-width: 991px) {
    .nal-footer-nav { display: block; padding: 6px 0 16px; overflow: visible; }
    .nal-footer-group::before { display: none; }
    .nal-footer-group { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
    .nal-footer-group[open] { box-shadow: inset 2px 0 0 var(--nal-blue-light); padding-left: 14px; }
    .nal-footer-group summary {
        position: relative;
        display: flex;
        align-items: baseline;
        gap: 12px;
        margin: 0;
        padding: 16px 30px 16px 0;
        cursor: pointer;
        pointer-events: auto;
    }
    .nal-footer-idx { margin: 0; }
    .nal-footer-group summary::after {
        content: "+";
        position: absolute;
        top: 50%;
        right: 2px;
        color: var(--nal-blue-light);
        font-size: 18px;
        font-weight: 400;
        transform: translateY(-50%);
    }
    .nal-footer-group[open] summary::after { content: "−"; }
    .nal-footer-group ul { padding-bottom: 14px; }
    .nal-footer-group li { padding-bottom: 10px; font-size: 14px; }
}

/* Κινητό: χωρίς κάθετες γραμμές */
@media (max-width: 767px) {
    .nal-footer { padding-top: 44px; }
    .nal-footer-brand { display: block; }
    .nal-footer-brand::before { display: none; }
    .nal-footer-logo img { margin: -4px 0 10px -4px; }
    .nal-footer-top { column-gap: 32px; row-gap: 26px; padding-bottom: 30px; }
    .nal-footer-top > *::before { left: -16px; }
    .nal-footer-shop { grid-column: 1 / -1; }
    .nal-footer-shop::before { display: none; }
    .nal-footer-bottom { display: block; padding-top: 22px; }
    .nal-footer-copy { margin-bottom: 14px; }
    .nal-footer-company { margin-bottom: 18px; gap: 8px 20px; }
    .nal-footer-company li + li::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .nal-footer-group li a, .nal-footer-group li a::before { transition: none; }
}

/* 1200–1299px: οι 6 στήλες δεν χωρούν χωρίς αναδίπλωση, περνάμε σε 4 */
@media (min-width: 1200px) and (max-width: 1299px) {
    .nal-footer-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; column-gap: 40px; }
    .nal-footer-group::before { left: -20px; }
    .nal-footer-group--wide { grid-column: span 2; }
    .nal-footer-group li { font-size: 13.5px; }
}

@media (max-width: 400px) {
    .nal-footer-group--wide ul { column-count: 1; }
}

/* =====================================================================
   NAL — Σελίδα κατηγορίας (πρότυπο: Κλειδαριές ξενοδοχείων)
   Δομή εμπνευσμένη από τις σελίδες κατηγορίας της B‑TRAY:
   hero 50/50 → μοντέλα → εναλλασσόμενες ενότητες 50/50 → έργα → κατάλογοι → FAQ → επικοινωνία.
   ===================================================================== */
/* κενό ώστε τα κείμενα των full-width ενοτήτων να ευθυγραμμίζονται με το container (1190 / 1110 / 930 px περιεχόμενο) */
.cp {
    --cp-gut: max(40px, calc((100vw - 1190px) / 2));
}

.cp h1, .cp h2, .cp h3 {
    font-family: "Manrope", sans-serif;
    text-wrap: balance;
}

.cp picture {
    display: block;
}

.cp-rule {
    display: block;
    width: 56px;
    height: 2px;
    margin: 26px 0 28px;
    background: var(--nal-blue);
}

.cp-dark .cp-rule,
.cp-hero .cp-rule {
    background: var(--nal-blue-light);
}

/* ---------- Hero 50/50 ---------- */
.cp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: min(calc(100svh - var(--nal-header-h, 92px)), 860px);
    padding: 0;
    color: var(--nal-white);
    background: var(--nal-black);
}

.cp-hero-media {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: #171a1a;
}

.cp-hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

.cp-hero-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px var(--cp-gut) 48px 64px;
}

.cp-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    margin: 0 0 34px;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 1.4;
}

.cp-crumbs li {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.78);
}

.cp-crumbs li + li::before {
    content: "/";
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.4);
}

.cp-crumbs a {
    color: rgba(255, 255, 255, 0.78);
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.cp-crumbs a:hover {
    color: var(--nal-white);
    border-color: currentColor;
}

.cp-crumbs [aria-current] {
    color: var(--nal-blue-light);
}

.cp-hero h1 {
    margin: 0;
    color: var(--nal-white);
    font-size: clamp(36px, 3.4vw, 56px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -0.025em;
}

.cp-hero-sub {
    margin: 16px 0 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: clamp(18px, 1.35vw, 21px);
    font-weight: 600;
    line-height: 1.4;
}

.cp-hero-text p {
    max-width: 600px;
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 17px;
    line-height: 1.7;
}

.cp-hero .nal-actions {
    margin-top: 30px;
}

.cp-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 640px;
    margin: 44px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.cp-facts > div {
    padding: 18px 16px 0 0;
}

.cp-facts > div + div {
    padding-left: 18px;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.cp-facts dt {
    margin: 0 0 4px;
    color: var(--nal-white);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

.cp-facts dd {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.45;
}

.cp-facts a {
    color: var(--nal-blue-light);
}

/* ---------- Μοντέλα ---------- */
.cp-models {
    padding: 120px 0 130px;
    background: var(--nal-white);
}

.cp-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0 0 34px;
}

.cp-filter-label {
    margin-right: 6px;
    color: var(--nal-muted);
    font-size: 14px;
    font-weight: 600;
}

.cp-filter button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 18px;
    color: var(--nal-ink);
    font-size: 14px;
    font-weight: 600;
    background: var(--nal-white);
    border: 1px solid rgba(17, 20, 20, 0.22);
    border-radius: 0;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cp-filter button span {
    color: var(--nal-muted);
    font-weight: 700;
}

.cp-filter button:hover {
    border-color: var(--nal-ink);
}

.cp-filter button[aria-pressed="true"] {
    color: var(--nal-white);
    background: var(--nal-ink);
    border-color: var(--nal-ink);
}

.cp-filter button[aria-pressed="true"] span {
    color: rgba(255, 255, 255, 0.7);
}

.cp-filter button:focus-visible {
    outline: 2px solid var(--nal-blue);
    outline-offset: 2px;
}

.cp-filter-status {
    margin-left: auto;
    color: var(--nal-muted);
    font-size: 14px;
}

.cp-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-grid li {
    margin: 0;
}

.cp-grid li[hidden] {
    display: none;
}

.cp-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--nal-ink);
    background: var(--nal-white);
    border: 1px solid var(--nal-line);
    transition: border-color 0.3s ease;
}

.cp-card-media {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--nal-white);
    border-bottom: 1px solid var(--nal-line);
}

.cp-card-media img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 8%;
    object-fit: contain;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* RentYourSafe: φαρδιά φωτογραφία σε χώρο, γεμίζει το τετράγωνο (tablet και χρηματοκιβώτιο στο κάδρο) */
.cp-card-media img[src*="rentyoursafe-diaxeirisi-enoikiasis"] {
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 0;
    object-fit: cover;
    object-position: 82% 50%;
}

/* φωτογραφία σε χώρο (όχι cut-out): εστίαση στην πόρτα με την κλειδαριά */
.cp-card-media.is-scene img {
    padding: 0;
    object-fit: cover;
    transform: scale(1.7);
    transform-origin: 100% 47%;
}

.cp-card:hover .cp-card-media.is-scene img,
.cp-card:focus-visible .cp-card-media.is-scene img {
    transform: scale(1.76);
}

.cp-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 18px 18px 20px;
}

.cp-card-brand {
    margin-bottom: 4px;
    color: var(--nal-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.cp-card h3 {
    margin: 0 0 8px;
    color: var(--nal-ink);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.cp-card p {
    margin: 0 0 14px;
    color: var(--nal-muted);
    font-size: 14.5px;
    line-height: 1.55;
}

.cp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.cp-tags li {
    padding: 4px 8px;
    color: #2c3131;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    background: var(--nal-offwhite);
}

.cp-card-link {
    margin-top: auto;
    color: var(--nal-blue);
    font-size: 14px;
    font-weight: 700;
}

.cp-card-link i {
    display: inline-block;
    margin-left: 6px;
    transition: transform 0.25s ease;
}

.cp-card:hover,
.cp-card:focus-visible {
    color: var(--nal-ink);
    border-color: var(--nal-blue);
}

.cp-card:focus-visible {
    outline: 2px solid var(--nal-blue);
    outline-offset: 2px;
}

.cp-card:hover .cp-card-media img,
.cp-card:focus-visible .cp-card-media img {
    transform: scale(1.04);
}

.cp-card:hover .cp-card-link i,
.cp-card:focus-visible .cp-card-link i {
    transform: translateX(4px);
}

/* ---------- Ενότητες 50/50 ---------- */
.cp-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 680px;
    padding: 0;
}

.cp-split-media {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: #d9d6d0;
}

.cp-split-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

.cp-split-media.is-product {
    background: var(--nal-white);
}

.cp-split-media.is-product img {
    padding: 10%;
    object-fit: contain;
}

.cp-split-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 96px var(--cp-gut) 96px 72px;
}

/* κείμενο αριστερά, φωτογραφία δεξιά */
.cp-split--rev .cp-split-media {
    order: 2;
}

.cp-split--rev .cp-split-body {
    padding: 96px 72px 96px var(--cp-gut);
}

.cp-split-body > * {
    max-width: 600px;
}

.cp-light {
    color: var(--nal-ink);
    background: var(--nal-offwhite);
}

.cp-dark {
    color: var(--nal-white);
    background: var(--nal-black);
}

.cp-split h2 {
    margin: 0;
    font-size: clamp(32px, 3vw, 48px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.cp-light h2 { color: var(--nal-ink); }
.cp-dark h2 { color: var(--nal-white); }

.cp-split-sub {
    margin: 14px 0 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.cp-light .cp-split-sub { color: #2c3131; }
.cp-dark .cp-split-sub { color: rgba(255, 255, 255, 0.86); }

.cp-split-body p:not([class]) {
    margin: 0 0 16px;
    font-size: 17px;
    line-height: 1.7;
}

.cp-light .cp-split-body p:not([class]) { color: #3d4242; }
.cp-dark .cp-split-body p:not([class]) { color: rgba(255, 255, 255, 0.8); }

/* λίστα με «τικ» */
.cp-checks {
    margin: 6px 0 30px;
    padding: 0;
    list-style: none;
}

.cp-checks li {
    position: relative;
    margin: 0;
    padding: 11px 0 11px 32px;
    font-size: 16px;
    line-height: 1.5;
    border-top: 1px solid var(--nal-line);
}

.cp-checks li:last-child {
    border-bottom: 1px solid var(--nal-line);
}

.cp-dark .cp-checks li {
    color: rgba(255, 255, 255, 0.88);
    border-color: var(--nal-line-light);
}

.cp-light .cp-checks li {
    color: #2c3131;
}

.cp-checks li::before {
    content: "";
    position: absolute;
    top: 19px;
    left: 2px;
    width: 12px;
    height: 7px;
    border-bottom: 2px solid var(--nal-blue);
    border-left: 2px solid var(--nal-blue);
    transform: rotate(-45deg);
}

.cp-dark .cp-checks li::before {
    border-color: var(--nal-blue-light);
}

.cp-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
}

.cp-dark .nal-link {
    color: var(--nal-white);
}

.cp-dark .nal-link:hover {
    color: var(--nal-blue-light);
}

/* τρόποι πρόσβασης */
.cp-methods {
    margin: 4px 0 32px;
    padding: 0;
    list-style: none;
    counter-reset: cp-m;
}

.cp-methods li {
    position: relative;
    margin: 0;
    padding: 18px 0 18px 46px;
    border-top: 1px solid var(--nal-line);
    counter-increment: cp-m;
}

.cp-methods li:last-child {
    border-bottom: 1px solid var(--nal-line);
}

.cp-methods li::before {
    content: "0" counter(cp-m);
    position: absolute;
    top: 21px;
    left: 0;
    color: var(--nal-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.cp-methods h3 {
    margin: 0 0 6px;
    color: var(--nal-ink);
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
}

.cp-methods p {
    margin: 0 !important;
    font-size: 16px !important;
}

/* ---------- Κατάλογοι ---------- */
.cp-docs {
    padding: 120px 0 120px;
    background: var(--nal-white);
}

.cp-doc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--nal-line);
    border-left: 1px solid var(--nal-line);
}

.cp-doc-grid li {
    margin: 0;
    border-right: 1px solid var(--nal-line);
    border-bottom: 1px solid var(--nal-line);
}

.cp-doc {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    height: 100%;
    padding: 26px 26px 28px;
    color: var(--nal-ink);
    transition: background 0.25s ease;
}

.cp-doc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--nal-blue);
    font-size: 22px;
    border: 1px solid var(--nal-line);
}

.cp-doc strong {
    display: block;
    margin-bottom: 4px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.cp-doc strong + span {
    display: block;
    color: var(--nal-muted);
    font-size: 14px;
    line-height: 1.5;
}

.cp-doc em {
    display: inline-block;
    margin-top: 10px;
    color: var(--nal-blue);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1px;
}

.cp-doc:hover,
.cp-doc:focus-visible {
    color: var(--nal-ink);
    background: var(--nal-offwhite);
}

.cp-doc:focus-visible {
    outline: 2px solid var(--nal-blue);
    outline-offset: -2px;
}

.cp-docs-foot {
    margin-top: 30px;
}

/* ---------- FAQ ---------- */
.cp-faq {
    padding: 120px 0 130px;
    background: var(--nal-offwhite);
}

.cp-faq-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 28px;
}

.cp-faq-intro {
    grid-column: 1 / span 4;
}

.cp-faq-intro h2 {
    margin: 0 0 18px;
    color: var(--nal-ink);
    font-size: clamp(32px, 3vw, 46px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.cp-faq-intro p:not([class]) {
    margin: 0 0 22px;
    color: var(--nal-muted);
    font-size: 17px;
    line-height: 1.7;
}

.cp-faq-list {
    grid-column: 6 / -1;
    border-top: 1px solid var(--nal-line);
}

.cp-faq-list details {
    border-bottom: 1px solid var(--nal-line);
}

.cp-faq-list summary {
    position: relative;
    padding: 22px 48px 22px 0;
    color: var(--nal-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    list-style: none;
    cursor: pointer;
}

.cp-faq-list summary::-webkit-details-marker {
    display: none;
}

.cp-faq-list summary::after {
    content: "+";
    position: absolute;
    top: 50%;
    right: 6px;
    color: var(--nal-blue);
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    transform: translateY(-50%);
}

.cp-faq-list details[open] summary::after {
    content: "−";
}

.cp-faq-list summary:hover {
    color: var(--nal-blue);
}

.cp-faq-list summary:focus-visible {
    outline: 2px solid var(--nal-blue);
    outline-offset: 4px;
}

.cp-faq-list details > div {
    padding: 0 48px 24px 0;
}

.cp-faq-list details p {
    margin: 0;
    color: #3d4242;
    font-size: 16.5px;
    line-height: 1.7;
}

/* ---------- Επικοινωνία ---------- */
.cp-contact {
    padding: 110px 0 100px;
    color: var(--nal-white);
    background: var(--nal-black);
    border-top: 4px solid var(--nal-blue);
}

.cp-contact-head {
    max-width: 760px;
    margin-bottom: 48px;
}

.cp-contact-head h2 {
    margin: 0 0 16px;
    color: var(--nal-white);
    font-size: clamp(34px, 3.6vw, 56px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.cp-contact-head p:not([class]) {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 18px;
    line-height: 1.65;
}

.cp-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--nal-line-light);
}

.cp-contact-grid li {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 30px 30px 34px 0;
}

.cp-contact-grid li + li {
    padding-left: 30px;
    border-left: 1px solid var(--nal-line-light);
}

.cp-contact-grid i.cp-ci {
    margin-bottom: 18px;
    color: var(--nal-blue-light);
    font-size: 26px;
}

.cp-contact-grid h3 {
    margin: 0 0 10px;
    color: var(--nal-white);
    font-size: 21px;
    font-weight: 600;
}

.cp-contact-grid p {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    line-height: 1.6;
}

.cp-contact-grid .nal-link {
    align-self: flex-start;
    margin-top: auto;
    color: var(--nal-white);
}

.cp-contact-grid .nal-link:hover {
    color: var(--nal-blue-light);
}

.cp-phones {
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
}

.cp-phones li {
    display: block !important;
    padding: 0 0 10px !important;
    border: 0 !important;
}

.cp-phones span {
    display: block;
    color: rgba(255, 255, 255, 0.66);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.cp-phones a {
    color: var(--nal-white);
    font-size: 19px;
    font-weight: 600;
}

.cp-phones a:hover {
    color: var(--nal-blue-light);
}

.cp-related {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 10px;
    margin-top: 44px;
    padding-top: 30px;
    border-top: 1px solid var(--nal-line-light);
}

.cp-related strong {
    margin-right: 10px;
    color: var(--nal-blue-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.cp-related a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.22);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.cp-related a:hover {
    color: var(--nal-black);
    background: var(--nal-white);
    border-color: var(--nal-white);
}

/* ---------- Responsive ---------- */
@media (max-width: 1399px) {
    .cp { --cp-gut: max(40px, calc((100vw - 1110px) / 2)); }
    .cp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1199px) {
    .cp { --cp-gut: max(40px, calc((100vw - 930px) / 2)); }
    .cp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cp-hero-panel { padding-left: 48px; }
    .cp-split-body { padding-left: 56px; }
    .cp-split--rev .cp-split-body { padding-right: 56px; }
    .cp-doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .cp-hero { display: block; min-height: 0; }
    .cp-hero-media { aspect-ratio: 4 / 3; max-height: 560px; }
    .cp { --cp-gut: max(15px, calc((100vw - 690px) / 2)); }
    .cp-hero-panel { padding: 36px var(--cp-gut) 56px; }
    .cp-split { display: flex; flex-direction: column; min-height: 0; }
    .cp-split-media { order: -1 !important; aspect-ratio: 4 / 3; max-height: 560px; }
    .cp-split-body,
    .cp-split--rev .cp-split-body { padding: 48px var(--cp-gut) 64px; }
    .cp-models, .cp-docs, .cp-faq { padding: 90px 0 100px; }
    .cp-faq-grid { display: block; }
    .cp-faq-intro { margin-bottom: 30px; }
    .cp-contact-grid { grid-template-columns: 1fr; }
    .cp-contact-grid li,
    .cp-contact-grid li + li { padding: 26px 0 28px; border-left: 0; border-bottom: 1px solid var(--nal-line-light); }
    .cp-filter-status { width: 100%; margin-left: 0; }
}

@media (max-width: 767px) {
    .cp { --cp-gut: max(15px, calc((100vw - 510px) / 2)); }
    .cp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .cp-card-body { padding: 14px 14px 16px; }
    .cp-card h3 { font-size: 18px; }
    .cp-card p { font-size: 14px; }
    .cp-doc-grid { grid-template-columns: 1fr; }
    .cp-facts { grid-template-columns: 1fr; }
    .cp-facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); margin-top: 16px; }
}

@media (max-width: 575px) {
    .cp { --cp-gut: 15px; }
    .cp-hero h1 { font-size: 32px; }
    .cp-split h2 { font-size: 30px; }
    .cp .nal-btn { flex: 1 1 100%; }
    .cp-filter button { min-height: 40px; padding: 0 14px; font-size: 13px; }
    .cp-faq-list summary { font-size: 17px; }
    .cp-card-media img { padding: 6%; }
}

@media (prefers-reduced-motion: reduce) {
    .cp-card-media img, .cp-card-link i { transition: none; }
}

/* Λίγες λύσεις (π.χ. κλειδαριές για Airbnb): τρεις στήλες */
.cp-grid.cp-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 767px) {
    .cp-grid.cp-grid--3 { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
}

/* «Ποια κάρτα για ποια κλειδαριά» */
.cp-match {
    padding: 110px 0 120px;
    background: var(--nal-offwhite);
}

.cp-match-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cp-match-col {
    padding: 34px 34px 26px;
    background: var(--nal-white);
    border: 1px solid var(--nal-line);
}

.cp-match-col h3 {
    margin: 0 0 8px;
    color: var(--nal-ink);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
}

.cp-match-col > p {
    margin: 0 0 20px;
    color: var(--nal-muted);
    font-size: 15px;
    line-height: 1.6;
}

.cp-match-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--nal-line);
}

.cp-match-col li a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    color: var(--nal-ink);
    border-bottom: 1px solid var(--nal-line);
    transition: color 0.2s ease;
}

.cp-match-col li strong {
    flex: 0 0 auto;
    font-size: 16px;
    font-weight: 700;
}

.cp-match-col li span {
    color: var(--nal-muted);
    font-size: 14px;
    line-height: 1.45;
    text-align: right;
}

.cp-match-col li a:hover strong,
.cp-match-col li a:focus-visible strong {
    color: var(--nal-blue);
}

@media (max-width: 991px) {
    .cp-match { padding: 80px 0 90px; }
    .cp-match-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575px) {
    .cp-match-col { padding: 26px 18px 18px; }
    .cp-match-col li a { flex-direction: column; gap: 2px; }
    .cp-match-col li span { text-align: left; }
}

/* Τέσσερις λύσεις (έλεγχος πρόσβασης): τέσσερις στήλες, δύο σε μικρότερες οθόνες */
.cp-grid.cp-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

@media (max-width: 1199px) {
    .cp-grid.cp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .cp-grid.cp-grid--4 { gap: 12px; }
}

/* Τέσσερα έγγραφα: δύο στήλες */
.cp-doc-grid.cp-doc-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 767px) {
    .cp-doc-grid.cp-doc-grid--2 { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- κεντρική σελίδα αξεσουάρ: κάρτες κατηγοριών */
.cp-models.cp-models--alt {
    padding-top: 0;
}

.cp-grid.cp-grid--cats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.cp-grid--cats .cp-card-media {
    aspect-ratio: 4 / 3;
}

/* το picture παίρνει όλο το ύψος του πλαισίου 4:3, ώστε η φωτογραφία να χωράει ολόκληρη (χωρίς κόψιμο στο κάτω μέρος) */
.cp-grid--cats .cp-card-media picture {
    height: 100%;
}

/* φωτογραφία σε χώρο: γεμίζει την κάρτα (cover, χωρίς παραμόρφωση) */
.cp-card-media.is-cover img {
    padding: 0;
    object-fit: cover;
}

.cp-grid--cats .cp-card-media:not(.is-cover) img {
    padding: 6%;
    object-fit: scale-down;
}

@media (max-width: 1199px) {
    .cp-grid.cp-grid--cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

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

@media (max-width: 767px) {
    .cp-grid.cp-grid--cats { gap: 12px; }
    .cp-models.cp-models--alt { padding-top: 0; }
}

/* =====================================================================
   NAL — Σελίδα προϊόντος (πρότυπο για όλα τα προϊόντα)
   hero → πλοήγηση σελίδας → περιγραφή + gallery → χαρακτηριστικά →
   τεχνικά → βίντεο → έγγραφα → παρόμοια προϊόντα → επικοινωνία.
   Χρησιμοποιεί τα κοινά μέρη της σελίδας κατηγορίας (cp-hero, cp-card, cp-doc, cp-contact).
   ===================================================================== */
.pp [id] {
    scroll-margin-top: calc(var(--nal-header-h, 80px) + 16px);
}

/* ---------- Hero ---------- */
.pp-hero h1 {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pp-kind {
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(17px, 1.25vw, 20px);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
}

.pp-name {
    font-size: clamp(42px, 4.4vw, 72px);
    line-height: 1.02;
}

.pp-hero .cp-hero-sub {
    max-width: 560px;
    font-weight: 500;
    line-height: 1.55;
}

/* φωτογραφία προϊόντος σε λευκό φόντο (χωρίς φωτογραφία χώρου) */
.pp-hero-media--studio {
    background: #f4f3f0;
}

.pp-hero-media--studio img {
    padding: 9% 12%;
    object-fit: scale-down; /* όπως contain, αλλά χωρίς μεγέθυνση μικρών φωτογραφιών */
    mix-blend-mode: multiply; /* το λευκό φόντο της φωτογραφίας «δένει» με το φόντο */
}

.pp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.pp-chips li {
    padding: 7px 12px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid rgba(255, 255, 255, 0.22);
}

/* Hero πλήρους πλάτους: για προϊόντα με δική τους φωτογραφία hero */
.pp-hero-wide {
    position: relative;
    padding: 0 0 90px;
    background: var(--nal-offwhite);
}

.pp-hero-wide-media {
    position: relative;
    margin: 0;
    overflow: hidden;
    height: clamp(420px, 72vh, 780px);
    background: #d9d4cc;
}

.pp-hero-wide-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

.pp-hero-card {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 0 56px;
    margin-top: -150px;
    padding: 48px 56px 50px;
    color: var(--nal-ink);
    background: var(--nal-white);
    box-shadow: 0 30px 60px rgba(17, 20, 20, 0.08);
}

.pp-hero-card .cp-crumbs li,
.pp-hero-card .cp-crumbs a {
    color: var(--nal-muted);
}

.pp-hero-card .cp-crumbs li + li::before {
    color: rgba(17, 20, 20, 0.3);
}

.pp-hero-card .cp-crumbs a:hover {
    color: var(--nal-ink);
}

.pp-hero-card .cp-crumbs [aria-current] {
    color: var(--nal-blue);
}

.pp-hero-card .cp-crumbs ol {
    margin-bottom: 26px;
}

.pp-hero-card h1 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    color: var(--nal-ink);
    font-weight: 600;
    letter-spacing: -0.025em;
}

.pp-hero-card .pp-kind {
    color: var(--nal-muted);
}

.pp-hero-card .pp-name {
    font-size: clamp(36px, 3.6vw, 60px);
}

.pp-hero-card-aside {
    align-self: end;
    padding-left: 32px;
    border-left: 1px solid var(--nal-line);
}

.pp-hero-card-aside p {
    margin: 0 0 24px;
    color: #3d4242;
    font-size: 18px;
    line-height: 1.6;
}

.pp-hero-card .pp-chips li {
    color: #2c3131;
    border-color: var(--nal-line);
}

.pp-hero-card .pp-chips {
    margin: 0 0 24px;
}

/* ---------- Πλοήγηση σελίδας ---------- */
.pp-subnav {
    padding: 0;
    background: var(--nal-white);
    border-bottom: 1px solid var(--nal-line);
}

.pp-hero-wide + .pp-subnav {
    border-top: 1px solid var(--nal-line);
}

.pp-subnav ul {
    display: flex;
    gap: 0 36px;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: none;
}

.pp-subnav ul::-webkit-scrollbar {
    display: none;
}

.pp-subnav li {
    flex: 0 0 auto;
}

.pp-subnav a {
    display: block;
    padding: 20px 0 18px;
    color: var(--nal-ink);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.pp-subnav a:hover,
.pp-subnav a:focus-visible {
    color: var(--nal-blue);
    border-color: var(--nal-blue);
}

/* ---------- Περιγραφή + gallery ---------- */
/* χωρίς gallery (μία φωτογραφία, ίδια με το hero): τίτλος αριστερά, κείμενο δεξιά */
.pp-overview--text .pp-overview-grid {
    align-items: start;
}

.pp-overview--text .pp-overview-head {
    grid-column: 1 / span 5;
}

.pp-overview--text .pp-overview-text {
    grid-column: 7 / -1;
}

.pp-overview--text .pp-overview-head h2 {
    margin: 0;
    color: var(--nal-ink);
    font-size: clamp(32px, 3vw, 50px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.02em;
}

.pp-overview {
    padding: 110px 0 120px;
    background: var(--nal-white);
}

.pp-overview-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 28px;
    align-items: start;
}

.pp-gallery {
    grid-column: 1 / span 6;
}

.pp-overview-text {
    grid-column: 8 / -1;
}

.pp-gallery-main {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--nal-white);
    border: 1px solid var(--nal-line);
}

.pp-gallery-main picture {
    display: block;
    height: 100%; /* ώστε και οι φαρδιές φωτογραφίες να κεντράρονται μέσα στο τετράγωνο */
}

.pp-gallery-main img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: scale-down; /* σμίκρυνση όπου χρειάζεται, ποτέ μεγέθυνση πάνω από το φυσικό μέγεθος */
}

.pp-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.pp-thumbs button {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 0;
    overflow: hidden;
    background: var(--nal-white);
    border: 1px solid var(--nal-line);
    border-radius: 0;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.pp-thumbs button img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pp-thumbs button:hover {
    border-color: rgba(17, 20, 20, 0.45);
}

.pp-thumbs button[aria-pressed="true"] {
    border: 2px solid var(--nal-blue);
}

.pp-thumbs button:focus-visible {
    outline: 2px solid var(--nal-blue);
    outline-offset: 2px;
}

.pp-gallery-count {
    margin: 12px 0 0;
    color: var(--nal-muted);
    font-size: 14px;
}

.pp-overview-text h2 {
    margin: 0 0 26px;
    color: var(--nal-ink);
    font-size: clamp(30px, 2.6vw, 44px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.pp-overview-text p:not([class]) {
    margin: 0 0 18px;
    color: #3d4242;
    font-size: 17px;
    line-height: 1.75;
}

.pp-ask {
    margin-top: 34px;
    padding: 28px 30px 30px;
    background: var(--nal-offwhite);
    border-left: 3px solid var(--nal-blue);
}

.pp-ask h3 {
    margin: 0 0 8px;
    color: var(--nal-ink);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
}

.pp-ask p {
    margin: 0 0 20px;
    color: #3d4242;
    font-size: 16px;
    line-height: 1.6;
}

.pp-ask .nal-actions {
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

/* Δευτερεύον κουμπί σε ανοιχτό φόντο (π.χ. «Αγορά από το Eshop») */
.nal-btn-outline {
    color: var(--nal-ink);
    background: transparent;
    border-color: var(--nal-ink);
}

.nal-btn-outline:hover,
.nal-btn-outline:focus-visible {
    color: var(--nal-white);
    background: var(--nal-ink);
    border-color: var(--nal-ink);
}

.nal-btn-outline i {
    margin-left: 8px;
}

.pp-ask-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: var(--nal-ink);
    font-size: 15px;
    font-weight: 700;
}

.pp-ask-phone i {
    color: var(--nal-blue);
}

/* ---------- Χαρακτηριστικά / τεχνικά (ομάδες σε γραμμές) ---------- */
.pp-features {
    padding: 110px 0 120px;
    background: var(--nal-offwhite);
}

.pp-tech {
    padding: 110px 0 120px;
    background: var(--nal-white);
}

.pp-group {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 28px;
    padding: 34px 0 30px;
    border-top: 1px solid var(--nal-line);
}

.pp-groups > .pp-group:first-child {
    padding-top: 0;
    border-top: 0;
}

.pp-group:last-child {
    border-bottom: 1px solid var(--nal-line);
}

.pp-group h3 {
    grid-column: 1 / span 4;
    margin: 0 0 16px;
    padding-right: 20px;
    color: var(--nal-ink);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.3;
}

.pp-group > ul {
    grid-column: 5 / -1;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-features .pp-group > ul {
    column-count: 2;
    column-gap: 40px;
}

.pp-features .pp-group > ul.is-short {
    column-count: 1;
}

.pp-group li {
    position: relative;
    margin: 0;
    padding: 8px 0 8px 30px;
    color: #2c3131;
    font-size: 16px;
    line-height: 1.6;
    break-inside: avoid;
}

.pp-group li strong {
    color: var(--nal-ink);
    font-weight: 700;
}

.pp-features .pp-group li::before {
    content: "";
    position: absolute;
    top: 16px;
    left: 2px;
    width: 12px;
    height: 7px;
    border-bottom: 2px solid var(--nal-blue);
    border-left: 2px solid var(--nal-blue);
    transform: rotate(-45deg);
}

.pp-tech .pp-group li,
.pp-features .pp-group--spec li {
    padding-left: 0;
    border-bottom: 1px solid rgba(17, 20, 20, 0.07);
}

.pp-tech .pp-group li:last-child,
.pp-features .pp-group--spec li:last-child {
    border-bottom: 0;
}

.pp-features .pp-group--spec li::before {
    content: none;
}

.pp-features .pp-group--spec > ul {
    column-count: 1;
}

/* έγγραφα μέσα στην περιγραφή */
.pp-dl {
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--nal-line);
}

.pp-dl a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    color: var(--nal-ink);
    font-size: 15px;
    line-height: 1.45;
    border-bottom: 1px solid var(--nal-line);
    transition: color 0.2s ease;
}

.pp-dl i {
    flex: 0 0 auto;
    color: var(--nal-blue);
    font-size: 20px;
}

.pp-dl strong {
    font-weight: 700;
}

.pp-dl span {
    flex: 1 1 auto;
}

.pp-dl em {
    flex: 0 0 auto;
    color: var(--nal-blue);
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: 1px;
}

.pp-dl a:hover,
.pp-dl a:focus-visible {
    color: var(--nal-blue);
}

/* ---------- Βίντεο ---------- */
.pp-videos {
    padding: 110px 0 120px;
    color: var(--nal-white);
    background: var(--nal-black);
}

.pp-videos .nal-sec-head {
    border-color: var(--nal-line-light);
}

.pp-videos .nal-sec-head h2 {
    color: var(--nal-white);
}

.pp-videos .nal-sec-aside p {
    color: rgba(255, 255, 255, 0.75);
}

.pp-video-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pp-video-grid.is-single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 960px;
}

.pp-video-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #000;
}

.pp-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.pp-video {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: #000;
    border: 0;
    cursor: pointer;
}

.pp-video img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    opacity: 0.82;
    transition: opacity 0.3s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pp-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    color: var(--nal-white);
    font-size: 30px;
    background: var(--nal-blue);
    transform: translate(-50%, -50%);
    transition: background 0.25s ease;
}

.pp-video:hover img,
.pp-video:focus-visible img {
    opacity: 1;
    transform: scale(1.03);
}

.pp-video:hover .pp-video-play,
.pp-video:focus-visible .pp-video-play {
    background: var(--nal-blue-light);
}

.pp-video:focus-visible {
    outline: 2px solid var(--nal-blue-light);
    outline-offset: 3px;
}

.pp-video-grid h3 {
    margin: 16px 0 0;
    color: var(--nal-white);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
}

.pp-video-note {
    margin: 26px 0 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

/* ---------- Παρόμοια προϊόντα ---------- */
.pp-related {
    padding: 110px 0 120px;
    background: var(--nal-white);
}

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

.pp-related-foot {
    margin-top: 36px;
}

.pp-docs + .pp-related {
    border-top: 1px solid var(--nal-line);
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .pp-hero-card { grid-template-columns: minmax(0, 1fr); padding: 40px 40px 44px; }
    .pp-hero-card-aside { margin-top: 28px; padding: 26px 0 0; border-top: 1px solid var(--nal-line); border-left: 0; }
    .pp-gallery { grid-column: 1 / span 6; }
    .pp-overview-text { grid-column: 7 / -1; padding-left: 12px; }
    .pp-features .pp-group > ul { column-count: 1; }
}

@media (max-width: 991px) {
    .pp-overview, .pp-features, .pp-tech, .pp-videos, .pp-related { padding: 80px 0 90px; }
    .pp-overview-grid { display: block; }
    .pp-overview-text { margin-top: 44px; padding-left: 0; }
    .pp-overview--text .pp-overview-text { margin-top: 28px; }
    .pp-group { display: block; }
    .pp-group h3 { margin-bottom: 12px; }
    .pp-related .cp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-hero-wide { padding-bottom: 60px; }
    .pp-hero-wide-media { height: auto; aspect-ratio: 16 / 9; }
    .pp-hero-card { margin-top: -60px; padding: 32px 28px 34px; }
}

@media (max-width: 767px) {
    .pp-video-grid { grid-template-columns: minmax(0, 1fr); }
    .pp-hero-wide-media { aspect-ratio: 4 / 3; }
    .pp-hero-card { box-shadow: none; }
}

@media (max-width: 767px) {
    .pp-subnav ul { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); padding-right: 40px; }
}

@media (max-width: 575px) {
    .pp-name { font-size: 40px; }
    .pp-hero-card .pp-name { font-size: 36px; }
    .pp-hero-card { padding: 28px 15px 32px; }
    .pp-subnav ul { gap: 0 24px; }
    .pp-ask { padding: 24px 20px 26px; }
    .pp-group li { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-video img { transition: none; }
}

/* =====================================================================
   NAL — Σελίδα επικοινωνίας (epikoinonia-nal.html)
   Hero με τηλέφωνα → φόρμα → γραφεία → εξυπηρέτηση. Ορθές γωνίες, γραμμές 1px, όπως το υπόλοιπο site.
   ===================================================================== */
.ct h1, .ct h2, .ct h3 {
    font-family: "Manrope", sans-serif;
    text-wrap: balance;
}

/* ---------- Hero ---------- */
.ct-hero {
    position: relative;
    padding: 72px 0 96px;
    overflow: hidden;
    color: var(--nal-white);
    background:
        radial-gradient(900px 520px at 88% -8%, rgba(23, 105, 170, 0.34), transparent 62%),
        radial-gradient(700px 420px at -6% 110%, rgba(107, 184, 242, 0.1), transparent 60%),
        var(--nal-black);
}

.ct-hero::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);
}

.ct-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 72px;
    align-items: end;
}

.ct-hero .cp-crumbs ol {
    margin-bottom: 44px;
}

.ct-hero h1 {
    max-width: 720px;
    margin: 0;
    color: var(--nal-white);
    font-size: clamp(44px, 5.2vw, 82px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.ct-lead {
    max-width: 600px;
    margin: 30px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.65;
}

.ct-hero .nal-actions {
    margin-top: 40px;
}

/* τηλέφωνα */
.ct-direct {
    padding: 34px 34px 30px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
}

.ct-direct-title {
    margin: 0 0 14px;
    color: var(--nal-blue-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ct-direct ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ct-direct li + li {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ct-direct li a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label icon" "num icon";
    align-items: center;
    column-gap: 18px;
    padding: 18px 0;
    color: var(--nal-white);
}

.ct-direct-label {
    grid-area: label;
    color: rgba(255, 255, 255, 0.66);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.ct-direct-num {
    grid-area: num;
    margin-top: 2px;
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.2;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.ct-direct-icon {
    grid-area: icon;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-size: 18px;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 50%;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.ct-direct li a:hover .ct-direct-num,
.ct-direct li a:focus-visible .ct-direct-num {
    color: var(--nal-blue-light);
}

.ct-direct li a:hover .ct-direct-icon,
.ct-direct li a:focus-visible .ct-direct-icon {
    color: var(--nal-white);
    background: var(--nal-blue);
    border-color: var(--nal-blue);
}

.ct-direct-mail {
    margin: 18px 0 0;
    padding-top: 18px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ct-direct-mail a {
    color: var(--nal-white);
    font-weight: 700;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.ct-direct-mail a:hover {
    color: var(--nal-blue-light);
    border-color: currentColor;
}

/* ---------- Φόρμα ---------- */
.ct-form-sec {
    padding: 120px 0;
    background: var(--nal-offwhite);
}

.ct-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 80px;
    align-items: start;
}

.ct-form-intro {
    position: sticky;
    top: 110px;
}

.ct-form-intro h2 {
    margin: 0;
    color: var(--nal-ink);
    font-size: clamp(34px, 3.4vw, 54px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -1.2px;
}

.ct-form-intro > p:not(.nal-eyebrow) {
    margin: 22px 0 0;
    color: var(--nal-muted);
    font-size: 17px;
    line-height: 1.7;
}

.ct-tips {
    margin-top: 40px;
}

.ct-tips-title {
    margin: 0 0 12px;
    color: var(--nal-ink);
    font-size: 15px;
    font-weight: 700;
}

.ct-tips .cp-checks {
    margin: 0;
}

.ct-tips .cp-checks li {
    color: #2c3131;
    font-size: 15px;
}

.ct-form-intro .ct-alt {
    margin-top: 30px;
    font-size: 15px;
}

.ct-alt a {
    color: var(--nal-ink);
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 1px solid currentColor;
}

.ct-alt a:hover {
    color: var(--nal-blue);
}

.ct-form {
    padding: 48px;
    background: var(--nal-white);
    border: 1px solid var(--nal-line);
    box-shadow: 0 30px 60px -40px rgba(17, 20, 20, 0.35);
}

.ct-topics {
    margin: 0 0 34px;
    padding: 0;
    border: 0;
}

.ct-topics legend {
    float: none;
    width: auto;
    margin: 0 0 14px;
    padding: 0;
    color: var(--nal-ink);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.ct-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ct-chip {
    min-height: 42px;
    padding: 0 18px;
    color: var(--nal-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    background: var(--nal-white);
    border: 1px solid rgba(17, 20, 20, 0.22);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ct-chip:hover {
    border-color: var(--nal-ink);
}

.ct-chip[aria-pressed="true"] {
    color: var(--nal-white);
    background: var(--nal-ink);
    border-color: var(--nal-ink);
}

.ct-chip:focus-visible,
.ct-form button[type="submit"]:focus-visible {
    outline: 2px solid var(--nal-blue);
    outline-offset: 3px;
}

.ct-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 22px;
}

.ct-field--wide {
    grid-column: 1 / -1;
}

.ct-field label {
    display: block;
    margin: 0 0 8px;
    color: var(--nal-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ct-star {
    color: var(--nal-blue);
}

.ct-form input,
.ct-form textarea {
    display: block;
    width: 100%;
    margin: 0;
    padding: 14px 16px;
    color: var(--nal-ink);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    background: #fbfaf8;
    border: 1px solid rgba(17, 20, 20, 0.2);
    border-radius: 0;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    appearance: none;
}

.ct-form input {
    height: 54px;
}

.ct-form textarea {
    min-height: 168px;
    resize: vertical;
}

.ct-form input:hover,
.ct-form textarea:hover {
    border-color: rgba(17, 20, 20, 0.4);
}

.ct-form input:focus,
.ct-form textarea:focus {
    background: var(--nal-white);
    border-color: var(--nal-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(23, 105, 170, 0.16);
}

.ct-err {
    min-height: 22px;
    margin: 6px 0 0;
    color: #b42318;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.ct-field.is-invalid input,
.ct-field.is-invalid textarea {
    border-color: #b42318;
    box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.1);
}

.ct-submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
    margin-top: 18px;
    padding-top: 28px;
    border-top: 1px solid var(--nal-line);
}

.ct-submit .nal-btn {
    gap: 12px;
    min-height: 56px;
    padding: 0 34px;
}

.ct-submit .nal-btn i {
    transition: transform 0.25s ease;
}

.ct-submit .nal-btn:hover i {
    transform: translateX(4px);
}

.ct-submit .nal-btn[disabled] {
    opacity: 0.7;
    cursor: progress;
}

.ct-req {
    margin: 0;
    color: var(--nal-muted);
    font-size: 14px;
}

.ct-status {
    min-height: 0;
    margin: 14px 0 0;
    color: var(--nal-ink);
    font-size: 15px;
    font-weight: 600;
}

.ct-status:empty {
    margin: 0;
}

.ct-status.is-error {
    color: #b42318;
}

/* ---------- Γραφεία ---------- */
.ct-offices {
    padding: 120px 0;
    background: var(--nal-white);
}

.ct-offices .nal-sec-aside .nal-link {
    font-size: inherit;
    white-space: nowrap;
}

.ct-office-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.ct-office {
    display: flex;
    flex-direction: column;
    padding: 44px 44px 40px;
    background: var(--nal-offwhite);
    border-top: 2px solid var(--nal-ink);
    transition: border-color 0.3s ease;
}

.ct-office:hover {
    border-top-color: var(--nal-blue);
}

.ct-office-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ct-office-num {
    color: var(--nal-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.ct-office-region {
    margin: 0;
    color: var(--nal-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.ct-office h3 {
    margin: 30px 0 0;
    color: var(--nal-ink);
    font-size: clamp(40px, 4vw, 64px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.035em;
}

.ct-office address {
    margin: 22px 0 0;
    color: #2c3131;
    font-size: 18px;
    font-style: normal;
    line-height: 1.6;
}

.ct-office-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin: 32px 0 0;
    padding: 24px 0 0;
    border-top: 1px solid var(--nal-line);
}

.ct-office-info dt {
    margin: 0 0 6px;
    color: var(--nal-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ct-office-info dd {
    margin: 0;
}

.ct-office-info a {
    color: var(--nal-ink);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: color 0.2s ease;
}

.ct-office-info a:hover {
    color: var(--nal-blue);
}

.ct-office-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;
    margin-top: 34px;
}

.ct-office-actions .nal-btn {
    gap: 10px;
}

/* ---------- Εξυπηρέτηση ---------- */
.ct-more {
    padding: 120px 0;
    background: var(--nal-black);
}

.ct-more-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--nal-line-light);
    border-left: 1px solid var(--nal-line-light);
}

.ct-more-grid li {
    border-right: 1px solid var(--nal-line-light);
    border-bottom: 1px solid var(--nal-line-light);
}

.ct-tile {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 40px 36px 36px;
    color: var(--nal-white);
    transition: background 0.3s ease;
}

.ct-tile:hover {
    color: var(--nal-white);
    background: rgba(255, 255, 255, 0.04);
}

.ct-tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    color: var(--nal-blue-light);
    font-size: 22px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.ct-tile h3 {
    margin: 30px 0 0;
    color: var(--nal-white);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.ct-tile p {
    margin: 12px 0 30px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 16px;
    line-height: 1.65;
}

.ct-tile-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    margin-top: auto;
    padding-bottom: 3px;
    font-size: 15px;
    font-weight: 700;
    border-bottom: 1px solid currentColor;
    transition: color 0.25s ease;
}

.ct-tile-link i {
    transition: transform 0.25s ease;
}

.ct-tile:hover .ct-tile-link {
    color: var(--nal-blue-light);
}

.ct-tile:hover .ct-tile-link i {
    transform: translate(3px, -1px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .ct-hero-grid { gap: 48px; }
    .ct-form-grid { gap: 56px; }
    .ct-form { padding: 40px; }
    .ct-office { padding: 38px 34px 34px; }
}

@media (max-width: 991px) {
    .ct-hero { padding: 48px 0 72px; }
    .ct-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .ct-hero .cp-crumbs ol { margin-bottom: 30px; }
    .ct-form-sec, .ct-offices, .ct-more { padding: 88px 0; }
    .ct-form-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .ct-form-intro { position: static; }
    .ct-office-grid { grid-template-columns: minmax(0, 1fr); }
    .ct-more-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575px) {
    .ct-hero h1 { font-size: 40px; }
    .ct-direct { padding: 24px 22px 20px; }
    .ct-direct-num { font-size: 24px; }
    .ct-direct-icon { width: 44px; height: 44px; }
    .ct-form-sec, .ct-offices, .ct-more { padding: 72px 0; }
    .ct-form { padding: 28px 20px; }
    .ct-fields { grid-template-columns: minmax(0, 1fr); }
    .ct-submit .nal-btn { width: 100%; }
    .ct-office { padding: 32px 22px 28px; }
    .ct-office address { font-size: 17px; }
    .ct-office-info { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .ct-tile { padding: 32px 22px 28px; }
}

/* =====================================================================
   NAL — Εταιρικό προφίλ (profile-nal.html)
   Hero με αριθμούς → ιστορία → φωτογραφία με απόσπασμα → ημερομηνίες → πώς δουλεύουμε → κατηγορίες → brands → έργα → επικοινωνία.
   ===================================================================== */
.pf h1, .pf h2, .pf h3 {
    font-family: "Manrope", sans-serif;
    text-wrap: balance;
}

/* ---------- Hero ---------- */
.pf-hero {
    position: relative;
    padding: 72px 0 104px;
    overflow: hidden;
    color: var(--nal-white);
    background:
        radial-gradient(900px 520px at 90% -10%, rgba(23, 105, 170, 0.32), transparent 62%),
        var(--nal-black);
}

/* διακοσμητικό «1950» στο φόντο */
.pf-hero::before {
    content: "1950";
    position: absolute;
    right: -2vw;
    bottom: -7vw;
    color: transparent;
    font-family: "Manrope", sans-serif;
    font-size: 26vw;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.06em;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.07);
    pointer-events: none;
    user-select: none;
}

.pf-hero .container {
    position: relative;
}

.pf-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 72px;
    align-items: end;
}

.pf-hero .cp-crumbs ol {
    margin-bottom: 44px;
}

.pf-hero h1 {
    max-width: 760px;
    margin: 0;
    color: var(--nal-white);
    font-size: clamp(42px, 5vw, 78px);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -0.035em;
}

.pf-lead {
    max-width: 620px;
    margin: 30px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.65;
}

.pf-hero .nal-actions {
    margin-top: 40px;
}

.pf-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.pf-facts > div {
    padding: 28px 26px 26px;
    background: rgba(8, 10, 10, 0.55);
    border-right: 1px solid rgba(255, 255, 255, 0.16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(4px);
}

.pf-facts dt {
    color: var(--nal-white);
    font-size: clamp(34px, 3vw, 48px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
}

.pf-facts dd {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.5;
}

/* ---------- Ιστορία ---------- */
.pf-story {
    padding: 130px 0 120px;
    background: var(--nal-offwhite);
}

.pf-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 80px;
    align-items: start;
}

.pf-story-head {
    position: sticky;
    top: 110px;
}

.pf-story-head h2 {
    margin: 0;
    color: var(--nal-ink);
    font-size: clamp(32px, 3.2vw, 50px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -1.1px;
}

.pf-story-text p {
    margin: 0 0 26px;
    color: #2c3131;
    font-size: 19px;
    line-height: 1.75;
}

.pf-story-text p:first-child {
    color: var(--nal-ink);
    font-size: clamp(21px, 1.7vw, 25px);
    font-weight: 500;
    line-height: 1.6;
}

.pf-story-text p:last-child {
    margin-bottom: 0;
}

/* ---------- Φωτογραφία με απόσπασμα ---------- */
.pf-band {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: clamp(420px, 42vw, 620px);
    overflow: hidden;
    background: var(--nal-black);
}

.pf-band picture {
    position: absolute;
    inset: 0;
}

.pf-band-img {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.pf-band::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 10, 10, 0.1) 0%, rgba(8, 10, 10, 0.55) 55%, rgba(8, 10, 10, 0.88) 100%);
}

.pf-band .container {
    position: relative;
    z-index: 1;
    padding-bottom: 72px;
}

.pf-quote {
    max-width: 880px;
    margin: 0;
    padding: 0 0 0 34px;
    border-left: 2px solid var(--nal-blue-light);
}

.pf-quote blockquote {
    margin: 0;
    padding: 0;
    border: 0;
}

.pf-quote p {
    margin: 0;
    color: var(--nal-white);
    font-size: clamp(24px, 2.4vw, 38px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

.pf-quote figcaption {
    margin-top: 20px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ---------- Ημερομηνίες ---------- */
.pf-timeline {
    padding: 130px 0;
    background: var(--nal-white);
}

.pf-tl {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-tl li {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 28px;
    padding: 40px 0;
    border-bottom: 1px solid var(--nal-line);
}

.pf-tl li:first-child {
    padding-top: 0;
}

.pf-year {
    margin: 0;
    color: var(--nal-ink);
    font-size: clamp(48px, 5.4vw, 88px);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.05em;
    transition: color 0.3s ease;
}

.pf-tl li:hover .pf-year {
    color: var(--nal-blue);
}

.pf-tl-body h3 {
    margin: 4px 0 12px;
    color: var(--nal-ink);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.pf-tl-body p {
    max-width: 680px;
    margin: 0 0 12px;
    color: var(--nal-muted);
    font-size: 17px;
    line-height: 1.7;
}

.pf-tl-body p:last-child {
    margin-bottom: 0;
}

/* ---------- Πώς δουλεύουμε ---------- */
.pf-steps {
    padding: 130px 0 110px;
    background: var(--nal-black);
}

.pf-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--nal-line-light);
}

.pf-steps-grid li {
    padding: 34px 30px 10px 0;
}

.pf-steps-grid li + li {
    padding-left: 30px;
    border-left: 1px solid var(--nal-line-light);
}

.pf-steps-grid .nal-num {
    color: var(--nal-blue-light);
}

.pf-steps-grid h3 {
    margin: 22px 0 12px;
    color: var(--nal-white);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.pf-steps-grid p {
    margin: 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 16px;
    line-height: 1.7;
}

.pf-steps-support {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 56px 0 0;
    padding-top: 28px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 16px;
    border-top: 1px solid var(--nal-line-light);
}

.pf-steps-support i {
    color: var(--nal-blue-light);
}

.pf-steps-support a {
    color: var(--nal-white);
    font-size: 20px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.pf-steps-support a:hover {
    color: var(--nal-blue-light);
    border-color: currentColor;
}

/* ---------- Κατηγορίες ---------- */
.pf-cats {
    padding: 130px 0;
    background: var(--nal-offwhite);
}

.pf-cat-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.pf-cat-grid .cp-card-media {
    aspect-ratio: 4 / 3;
}

.pf-cat-grid .cp-card-body {
    padding: 24px 26px 26px;
}

.pf-cat-grid .cp-card-body h3 {
    font-size: 22px;
}

/* ---------- Brands / έργα ---------- */
.pf-brands {
    padding: 130px 0;
}

.pf-projects {
    padding: 130px 0;
    background: var(--nal-offwhite);
}

.pf-proj-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 40px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pf-proj-grid .nal-projects-card {
    flex: none;
}

.pf-proj-grid .nal-projects-cap h3 {
    font-size: 20px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .pf-hero-grid { gap: 48px; }
    .pf-story-grid { gap: 56px; }
    .pf-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-steps-grid li { padding: 30px 26px 30px 0; }
    .pf-steps-grid li + li { padding-left: 0; border-left: 0; }
    .pf-steps-grid li:nth-child(even) { padding-left: 26px; border-left: 1px solid var(--nal-line-light); }
    .pf-steps-grid li:nth-child(n + 3) { border-top: 1px solid var(--nal-line-light); }
    .pf-proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .pf-hero { padding: 48px 0 72px; }
    .pf-hero::before { font-size: 40vw; bottom: -10vw; }
    .pf-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
    .pf-hero .cp-crumbs ol { margin-bottom: 30px; }
    .pf-story, .pf-timeline, .pf-steps, .pf-cats, .pf-brands, .pf-projects { padding: 88px 0; }
    .pf-story-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .pf-story-head { position: static; }
    .pf-tl li { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .pf-cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pf-band .container { padding-bottom: 48px; }
}

@media (max-width: 575px) {
    .pf-hero h1 { font-size: 38px; }
    .pf-facts > div { padding: 22px 18px 20px; }
    .pf-facts dt { font-size: 32px; }
    .pf-story, .pf-timeline, .pf-steps, .pf-cats, .pf-brands, .pf-projects { padding: 72px 0; }
    .pf-story-text p { font-size: 17px; }
    .pf-band { min-height: 460px; }
    .pf-quote { padding-left: 20px; }
    .pf-quote p { font-size: 22px; }
    .pf-tl li { padding: 30px 0; }
    .pf-steps-grid { grid-template-columns: minmax(0, 1fr); }
    .pf-steps-grid li, .pf-steps-grid li:nth-child(even) { padding: 26px 0; border-left: 0; }
    .pf-steps-grid li + li { border-top: 1px solid var(--nal-line-light); }
    .pf-cat-grid { grid-template-columns: minmax(0, 1fr); }
    .pf-proj-grid { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   NAL — Λύσεις ανά χώρο (exoplismos-ktirion-egkatastaseon.html)
   Hero με φωτογραφία → 8 χώροι → προϊόντα → έργα → επικοινωνία.
   ===================================================================== */
/* ---------- Hero ---------- */
.sl-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(calc(100svh - var(--nal-header-h, 92px)), 780px);
    padding: 120px 0 64px;
    overflow: hidden;
    color: var(--nal-white);
    background: var(--nal-black);
}

.sl-hero-media {
    position: absolute;
    inset: 0;
}

.sl-hero-media img {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
}

.sl-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8, 10, 10, 0.88) 0%, rgba(8, 10, 10, 0.62) 46%, rgba(8, 10, 10, 0.2) 100%),
        linear-gradient(0deg, rgba(8, 10, 10, 0.9) 0%, rgba(8, 10, 10, 0) 45%);
}

.sl-hero .container {
    position: relative;
    z-index: 1;
}

.sl-hero .cp-crumbs ol {
    margin-bottom: 34px;
}

.sl-hero h1 {
    max-width: 820px;
    margin: 0;
    color: var(--nal-white);
    font-size: clamp(42px, 5vw, 80px);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -0.035em;
}

.sl-lead {
    max-width: 640px;
    margin: 26px 0 0;
    color: rgba(255, 255, 255, 0.84);
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.65;
}

.sl-jump {
    margin-top: 46px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.sl-jump p {
    margin: 0 0 14px;
    color: var(--nal-blue-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.sl-jump ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sl-jump a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    color: var(--nal-white);
    font-size: 14px;
    font-weight: 600;
    background: rgba(8, 10, 10, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(4px);
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sl-jump a:hover,
.sl-jump a:focus-visible {
    color: var(--nal-black);
    background: var(--nal-white);
    border-color: var(--nal-white);
}

/* ---------- Χώροι ---------- */
.sl-spaces {
    padding: 130px 0;
    background: var(--nal-white);
}

.sl-space-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sl-space {
    display: flex;
    flex-direction: column;
    scroll-margin-top: 110px;
}

.sl-space-media {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 700 / 435;
    background: #e3e0da;
}

/* το picture παίρνει όλο το πλαίσιο 700:435 (κάρτες χώρων εδώ και «Λύσεις για άλλους χώρους» στις σελίδες χώρων) */
.sl-space-media picture,
.sp-other-media picture {
    display: block;
    height: 100%;
}

.sl-space-media img {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sl-space-media::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: var(--nal-blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.sl-space:hover .sl-space-media img {
    transform: scale(1.04);
}

.sl-space:hover .sl-space-media::after {
    transform: scaleX(1);
}

.sl-space-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 28px 0 0;
}

.sl-space-num {
    color: var(--nal-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}

.sl-space h3 {
    margin: 10px 0 0;
    font-size: clamp(28px, 2.4vw, 38px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.sl-space h3 a {
    color: var(--nal-ink);
    transition: color 0.2s ease;
}

.sl-space h3 a:hover {
    color: var(--nal-blue);
}

.sl-space-body > p:not(.sl-focus-label) {
    margin: 16px 0 0;
    color: var(--nal-muted);
    font-size: 17px;
    line-height: 1.7;
}

.sl-focus-label {
    margin: 24px 0 10px;
    color: var(--nal-ink);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.sl-focus {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.sl-focus li {
    padding: 7px 12px;
    color: #2c3131;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    background: var(--nal-offwhite);
    border: 1px solid var(--nal-line);
}

.sl-space .nal-link {
    align-self: flex-start;
    margin-top: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .sl-hero { min-height: 0; padding: 96px 0 48px; }
    .sl-hero::after { background: linear-gradient(0deg, rgba(8, 10, 10, 0.92) 0%, rgba(8, 10, 10, 0.55) 60%, rgba(8, 10, 10, 0.35) 100%); }
    .sl-spaces { padding: 88px 0; }
    .sl-space-grid { gap: 48px 24px; }
}

@media (max-width: 767px) {
    .sl-space-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 575px) {
    .sl-hero { padding: 72px 0 40px; }
    .sl-hero h1 { font-size: 38px; }
    .sl-jump { margin-top: 34px; }
    .sl-jump a { min-height: 36px; padding: 0 12px; font-size: 13px; }
    .sl-spaces { padding: 72px 0; }
    .sl-space-body > p:not(.sl-focus-label) { font-size: 16px; }
}

/* =====================================================================
   NAL — Εξοπλισμός ξενοδοχείων (exoplismos-xenodoxeion.html)
   Hero (ίδιο με «Λύσεις ανά χώρο») → 4 σημεία → ένα δωμάτιο → γιατί NAL → έργα → επικοινωνία.
   ===================================================================== */
.ht-hero .nal-actions {
    margin-top: 36px;
}

.ht-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, max-content));
    gap: 0;
    margin: 48px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.ht-facts > div {
    min-width: 200px;
    padding: 22px 40px 0 0;
}

.ht-facts > div + div {
    padding-left: 32px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.ht-facts dt {
    color: var(--nal-white);
    font-size: clamp(26px, 2.2vw, 36px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}

.ht-facts dt a {
    color: var(--nal-blue-light);
}

.ht-facts dt a:hover {
    color: var(--nal-white);
}

.ht-facts dd {
    max-width: 220px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.74);
    font-size: 14px;
    line-height: 1.5;
}

/* ---------- 4 σημεία ---------- */
.ht-zones {
    padding: 130px 0;
    background: var(--nal-white);
}

.ht-zone-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ht-zone {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
    gap: 40px;
    padding: 44px 0;
    border-bottom: 1px solid var(--nal-line);
}

.ht-zone:first-child {
    padding-top: 0;
}

.ht-zone-num {
    display: block;
    color: var(--nal-blue);
    font-size: clamp(44px, 4.4vw, 72px);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.05em;
}

.ht-zone h3 {
    margin: 18px 0 0;
    color: var(--nal-ink);
    font-size: clamp(26px, 2.2vw, 34px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.ht-zone-text {
    margin: 0;
    color: #2c3131;
    font-size: 18px;
    line-height: 1.75;
}

.ht-zone-prods p {
    margin: 0 0 10px;
    color: var(--nal-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.ht-zone-prods ul {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--nal-line);
}

.ht-zone-prods li {
    border-bottom: 1px solid var(--nal-line);
}

.ht-zone-prods a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    color: var(--nal-ink);
    font-size: 15px;
    font-weight: 700;
    transition: color 0.2s ease, padding 0.25s ease;
}

.ht-zone-prods a i {
    color: var(--nal-blue);
    transition: transform 0.25s ease;
}

.ht-zone-prods a:hover {
    color: var(--nal-blue);
}

.ht-zone-prods a:hover i {
    transform: translateX(4px);
}

/* ---------- Γιατί NAL ---------- */
.ht-proof {
    padding: 130px 0 120px;
    background: var(--nal-black);
}

.ht-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--nal-line-light);
}

.ht-proof-grid li {
    display: flex;
    flex-direction: column;
    padding: 34px 28px 10px 0;
}

.ht-proof-grid li + li {
    padding-left: 28px;
    border-left: 1px solid var(--nal-line-light);
}

.ht-proof-big {
    margin: 0;
    color: var(--nal-blue-light);
    font-size: clamp(27px, 2.4vw, 38px); /* −20% (ήταν clamp(34px, 3vw, 48px)), ώστε το «Υποστήριξη» να χωράει σε μία γραμμή */
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
}

.ht-proof-grid h3 {
    margin: 22px 0 12px;
    color: var(--nal-white);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.ht-proof-grid p:not(.ht-proof-big) {
    margin: 0 0 18px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 15px;
    line-height: 1.7;
}

.ht-proof-grid .nal-link {
    align-self: flex-start;
    margin-top: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .ht-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ht-proof-grid li { padding: 30px 26px 30px 0; }
    .ht-proof-grid li + li { padding-left: 0; border-left: 0; }
    .ht-proof-grid li:nth-child(even) { padding-left: 26px; border-left: 1px solid var(--nal-line-light); }
    .ht-proof-grid li:nth-child(n + 3) { border-top: 1px solid var(--nal-line-light); }
}

@media (max-width: 991px) {
    .ht-zones, .ht-proof { padding: 88px 0; }
    .ht-zone { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .ht-zone h3 { margin-top: 10px; }
}

@media (max-width: 767px) {
    .ht-facts { grid-template-columns: minmax(0, 1fr); }
    .ht-facts > div, .ht-facts > div + div { padding: 18px 0; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
    .ht-facts dd { max-width: none; }
}

@media (max-width: 575px) {
    .ht-zones, .ht-proof { padding: 72px 0; }
    .ht-zone { padding: 34px 0; }
    .ht-zone-text { font-size: 16px; }
    .ht-proof-grid { grid-template-columns: minmax(0, 1fr); }
    .ht-proof-grid li, .ht-proof-grid li:nth-child(even) { padding: 26px 0; border-left: 0; }
    .ht-proof-grid li + li { border-top: 1px solid var(--nal-line-light); }
}

/* =====================================================================
   Σελίδες χώρων (build_spaces.py): ίδια δομή με τα ξενοδοχεία + «Λύσεις για άλλους χώρους»
   ===================================================================== */
.sp-others {
    padding: 130px 0;
    background: var(--nal-offwhite);
}

.sp-other-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sp-other {
    display: block;
    color: var(--nal-ink);
}

.sp-other-media {
    display: block;
    overflow: hidden;
    aspect-ratio: 700 / 435;
    background: #d9d4cc;
}

.sp-other-media img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sp-other-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0 14px;
    border-bottom: 1px solid var(--nal-line);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.sp-other-name i {
    color: var(--nal-blue);
    transition: transform 0.25s ease;
}

.sp-other:hover .sp-other-media img,
.sp-other:focus-visible .sp-other-media img {
    transform: scale(1.04);
}

.sp-other:hover .sp-other-name,
.sp-other:focus-visible .sp-other-name {
    color: var(--nal-blue);
}

.sp-other:hover .sp-other-name i,
.sp-other:focus-visible .sp-other-name i {
    transform: translateX(4px);
}

@media (max-width: 1199px) {
    .sp-other-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .sp-others { padding: 88px 0; }
    .sp-other-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .sp-others { padding: 72px 0; }
    .sp-other-grid { gap: 24px 16px; }
    .sp-other-name { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .sp-other-media img, .sp-other-name i { transition: none; }
}

/* =====================================================================
   NAL — Όλα τα προϊόντα (proionta-exoplismos-ktirion-egkatastaseon.html)
   Hero με αναζήτηση → 5 ενότητες με κατηγορίες και υποκατηγορίες → λύσεις ανά χώρο → επικοινωνία.
   ===================================================================== */
.pa h1, .pa h2, .pa h3 {
    font-family: "Manrope", sans-serif;
    text-wrap: balance;
}

/* ---------- Hero ---------- */
.pa-hero {
    padding: 72px 0 0;
    color: var(--nal-white);
    background:
        radial-gradient(900px 520px at 85% -10%, rgba(23, 105, 170, 0.3), transparent 62%),
        var(--nal-black);
}

/* hero χωρίς αναζήτηση και μενού ενοτήτων (Προϊόντα για ξενοδοχεία) */
.pa-hero--plain {
    padding-bottom: 72px;
}

.pa-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 72px;
    align-items: end;
}

.pa-hero .cp-crumbs ol {
    margin-bottom: 44px;
}

.pa-hero h1 {
    margin: 0;
    color: var(--nal-white);
    font-size: clamp(44px, 5.2vw, 82px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.pa-lead {
    max-width: 640px;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.65;
}

.pa-search label {
    display: block;
    margin: 0 0 12px;
    color: var(--nal-blue-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.pa-search-box {
    position: relative;
}

.pa-search-box i {
    position: absolute;
    top: 50%;
    left: 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    transform: translateY(-50%);
    pointer-events: none;
}

.pa-search input {
    display: block;
    width: 100%;
    height: 62px;
    margin: 0;
    padding: 0 20px 0 54px;
    color: var(--nal-white);
    font-family: inherit;
    font-size: 17px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 0;
    box-shadow: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
}

.pa-search input:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

.pa-search input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--nal-blue-light);
    outline: none;
    box-shadow: 0 0 0 3px rgba(107, 184, 242, 0.22);
}

.pa-status {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 14px;
}

.pa-jump {
    margin-top: 56px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.pa-jump ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pa-jump li {
    flex: 1 1 0;
}

.pa-jump li + li {
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.pa-jump a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 64px;
    padding: 0 16px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease;
}

.pa-jump a:hover,
.pa-jump a:focus-visible {
    color: var(--nal-white);
    background: rgba(255, 255, 255, 0.06);
}

/* ---------- Ενότητες ---------- */
.pa-group {
    padding: 110px 0;
    background: var(--nal-white);
    scroll-margin-top: 76px;
}

.pa-group--alt {
    background: var(--nal-offwhite);
}

.pa-group[hidden] {
    display: none;
}

.pa-group-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 28px;
    align-items: end;
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--nal-line);
}

.pa-group-head .nal-eyebrow {
    grid-column: 1 / -1;
}

.pa-group-head h2 {
    margin: 0;
    color: var(--nal-ink);
    font-size: clamp(28px, 2.8vw, 44px);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.pa-group-head .nal-link {
    white-space: nowrap;
}

.pa-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pa-group:has(.pa-cat:nth-child(4):last-child) .pa-grid,
.pa-group:has(.pa-cat:nth-child(3):last-child) .pa-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pa-cat {
    display: flex;
    flex-direction: column;
    background: var(--nal-white);
    border: 1px solid var(--nal-line);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.pa-cat[hidden] {
    display: none;
}

.pa-cat:hover {
    border-color: rgba(17, 20, 20, 0.3);
    box-shadow: 0 24px 50px -36px rgba(17, 20, 20, 0.45);
}

.pa-cat-media {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--nal-white);
    border-bottom: 1px solid var(--nal-line);
}

.pa-cat-media picture {
    display: block;
    height: 100%;
}

.pa-cat-media img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 10%;
    object-fit: contain;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pa-cat:hover .pa-cat-media img {
    transform: scale(1.04);
}

.pa-cat-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 20px 20px 22px;
}

.pa-cat h3 {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.pa-cat h3 a {
    color: var(--nal-ink);
    transition: color 0.2s ease;
}

.pa-cat h3 a:hover {
    color: var(--nal-blue);
}

.pa-sub {
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.pa-sub li + li {
    margin-top: 6px;
}

.pa-sub a {
    color: var(--nal-muted);
    font-size: 14px;
    line-height: 1.4;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.pa-sub a:hover {
    color: var(--nal-ink);
    border-color: currentColor;
}

.pa-cat-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    color: var(--nal-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.pa-cat-link i {
    transition: transform 0.25s ease;
}

.pa-cat-link:hover i {
    transform: translateX(4px);
}

.pa-empty {
    padding: 90px 0;
    background: var(--nal-white);
}

.pa-empty p {
    max-width: 620px;
    margin: 0 0 22px;
    color: var(--nal-ink);
    font-size: 20px;
    line-height: 1.6;
}

/* ---------- Λύσεις ανά χώρο ---------- */
.pa-band {
    padding: 96px 0;
    color: var(--nal-white);
    background:
        radial-gradient(700px 400px at 100% 100%, rgba(23, 105, 170, 0.3), transparent 60%),
        var(--nal-black);
}

.pa-band-inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
    align-items: end;
}

.pa-band h2 {
    margin: 0;
    color: var(--nal-white);
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.pa-band p:not(.nal-eyebrow) {
    max-width: 620px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 17px;
    line-height: 1.65;
}

.pa-band .nal-actions {
    justify-content: flex-end;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .pa-grid,
    .pa-group:has(.pa-cat:nth-child(4):last-child) .pa-grid,
    .pa-group:has(.pa-cat:nth-child(3):last-child) .pa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .pa-hero { padding-top: 48px; }
    .pa-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .pa-hero .cp-crumbs ol { margin-bottom: 30px; }
    .pa-jump { margin-top: 40px; }
    .pa-jump li { flex: 1 1 33%; }
    .pa-jump li + li { border-left: 0; }
    .pa-jump li { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
    .pa-group { padding: 80px 0; }
    .pa-grid,
    .pa-group:has(.pa-cat:nth-child(4):last-child) .pa-grid,
    .pa-group:has(.pa-cat:nth-child(3):last-child) .pa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pa-band-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .pa-band .nal-actions { justify-content: flex-start; }
}

@media (max-width: 575px) {
    .pa-hero h1 { font-size: 40px; }
    .pa-jump li { flex: 1 1 50%; }
    .pa-jump a { min-height: 54px; font-size: 14px; }
    .pa-group { padding: 64px 0; }
    .pa-group-head { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
    .pa-group-head .nal-link { justify-self: start; }
    .pa-grid,
    .pa-group:has(.pa-cat:nth-child(4):last-child) .pa-grid,
    .pa-group:has(.pa-cat:nth-child(3):last-child) .pa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .pa-cat-body { padding: 14px 14px 16px; }
    .pa-cat h3 { font-size: 16px; }
    .pa-sub a { font-size: 13px; }
    .pa-band { padding: 72px 0; }
}

/* =====================================================================
   NAL — Πελατολόγιο (xenodoxeiakos-exoplismos-pelatologio.html)
   Hero με κολάζ έργων → ορόσημο (Laguna 2011) → όλο το πελατολόγιο με αναζήτηση και περιοχές → κατηγορίες → επικοινωνία.
   ===================================================================== */
.pl h1, .pl h2, .pl h3 {
    font-family: "Manrope", sans-serif;
    text-wrap: balance;
}

/* ---------- Hero ---------- */
.pl-hero {
    padding: 72px 0 96px;
    overflow: hidden;
    color: var(--nal-white);
    background:
        radial-gradient(900px 560px at 90% -10%, rgba(23, 105, 170, 0.32), transparent 62%),
        var(--nal-black);
}

.pl-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: end;
}

.pl-hero .cp-crumbs ol {
    margin-bottom: 40px;
}

.pl-hero h1 {
    margin: 0;
    color: var(--nal-white);
    font-size: clamp(42px, 4.2vw, 62px);
    text-wrap: pretty;
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -0.035em;
}

.pl-lead {
    max-width: 600px;
    margin: 26px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(17px, 1.3vw, 19px);
    line-height: 1.65;
}

.pl-hero .nal-actions {
    margin-top: 34px;
}

.pl-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 64px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.pl-facts > div {
    padding: 22px 24px 0 0;
}

.pl-facts > div + div {
    padding-left: 24px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.pl-facts dt {
    color: var(--nal-white);
    font-size: clamp(26px, 2.2vw, 36px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}

.pl-facts dd {
    max-width: 240px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.5;
}

/* κολάζ: ένα μεγάλο έργο και μια σειρά με τέσσερα — όλα στην αναλογία των εικόνων (720×400) */
.pl-mosaic {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.pl-shot {
    position: relative;
    margin: 0;
    overflow: hidden;
    aspect-ratio: 720 / 400;
    background: #1a1e1e;
}

.pl-shot--lead {
    grid-column: 1 / -1;
}

.pl-shot img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pl-shot:hover img {
    transform: scale(1.04);
}

.pl-shot figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    padding: 40px 22px 18px;
    background: linear-gradient(0deg, rgba(8, 10, 10, 0.82), rgba(8, 10, 10, 0));
}

.pl-shot figcaption strong {
    color: var(--nal-white);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.pl-shot figcaption span {
    color: rgba(255, 255, 255, 0.76);
    font-size: 13px;
}

.pl-shot:not(.pl-shot--lead) figcaption {
    padding: 26px 10px 8px;
}

.pl-shot:not(.pl-shot--lead) figcaption strong {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
}

.pl-shot:not(.pl-shot--lead) figcaption span {
    display: none;
}

/* ---------- Ορόσημο ---------- */
.pl-mile {
    padding: 130px 0;
    background: var(--nal-white);
}

.pl-mile-grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: 80px;
    align-items: center;
}

.pl-mile-media {
    position: relative;
    margin: 0;
    aspect-ratio: 720 / 400;
    background: #e9e6e0;
}

.pl-mile-media img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

.pl-mile-media::after {
    content: "2011";
    position: absolute;
    right: -1px;
    bottom: -1px;
    padding: 14px 20px 12px;
    color: var(--nal-white);
    font-family: "Manrope", sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    background: var(--nal-blue);
}

.pl-mile-text h2 {
    margin: 0;
    color: var(--nal-ink);
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.pl-mile-text > p:not(.nal-eyebrow) {
    margin: 24px 0 0;
    color: #2c3131;
    font-size: 18px;
    line-height: 1.75;
}

.pl-mile-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 32px 0 0;
    border-top: 1px solid var(--nal-line);
}

.pl-mile-facts > div {
    padding: 16px 16px 16px 0;
    border-bottom: 1px solid var(--nal-line);
}

.pl-mile-facts > div:nth-child(even) {
    padding-left: 20px;
    border-left: 1px solid var(--nal-line);
}

.pl-mile-facts dt {
    color: var(--nal-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.pl-mile-facts dd {
    margin: 6px 0 0;
    color: var(--nal-ink);
    font-size: 17px;
    font-weight: 600;
}

.pl-mile-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
    margin-top: 30px;
}

/* ---------- Όλο το πελατολόγιο ---------- */
.pl-dir {
    padding: 120px 0 130px;
    background: var(--nal-offwhite);
    scroll-margin-top: 76px;
}

.pl-tools {
    display: grid;
    grid-template-columns: minmax(280px, 4fr) minmax(0, 8fr);
    gap: 32px;
    align-items: end;
    padding: 0 0 28px;
    border-bottom: 1px solid var(--nal-line);
}

.pl-search label {
    display: block;
    margin: 0 0 10px;
    color: var(--nal-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.pl-search-box {
    position: relative;
}

.pl-search-box i {
    position: absolute;
    top: 50%;
    left: 18px;
    color: var(--nal-muted);
    font-size: 17px;
    transform: translateY(-50%);
    pointer-events: none;
}

.pl-search input {
    display: block;
    width: 100%;
    height: 54px;
    margin: 0;
    padding: 0 18px 0 50px;
    color: var(--nal-ink);
    font-family: inherit;
    font-size: 16px;
    background: var(--nal-white);
    border: 1px solid rgba(17, 20, 20, 0.2);
    border-radius: 0;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
}

.pl-search input:hover {
    border-color: rgba(17, 20, 20, 0.4);
}

.pl-search input:focus {
    border-color: var(--nal-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(23, 105, 170, 0.18);
}

.pl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pl-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin: 0;
    padding: 0 14px;
    color: var(--nal-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    background: transparent;
    border: 1px solid rgba(17, 20, 20, 0.2);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.pl-chip span {
    color: var(--nal-muted);
    font-size: 12px;
    font-weight: 700;
    transition: color 0.2s ease;
}

.pl-chip:hover {
    border-color: var(--nal-ink);
}

.pl-chip[aria-pressed="true"] {
    color: var(--nal-white);
    background: var(--nal-ink);
    border-color: var(--nal-ink);
}

.pl-chip[aria-pressed="true"] span {
    color: var(--nal-blue-light);
}

.pl-chip:focus-visible {
    outline: 2px solid var(--nal-blue);
    outline-offset: 2px;
}

.pl-status {
    margin: 22px 0 22px;
    color: var(--nal-muted);
    font-size: 14px;
    font-weight: 600;
}

.pl-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pl-card {
    display: flex;
    flex-direction: column;
    background: var(--nal-white);
    border: 1px solid var(--nal-line);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.pl-card[hidden] {
    display: none;
}

.pl-card:hover {
    border-color: rgba(17, 20, 20, 0.28);
    box-shadow: 0 24px 50px -36px rgba(17, 20, 20, 0.45);
}

.pl-card-media {
    margin: 0;
    overflow: hidden;
    aspect-ratio: 720 / 400;
    background: #e9e6e0;
}

.pl-card-media img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.pl-card:hover .pl-card-media img {
    transform: scale(1.04);
}

.pl-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 20px 20px;
}

.pl-card h3 {
    margin: 0;
    color: var(--nal-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.pl-card h3:focus {
    outline: none;
}

.pl-card h3:focus-visible {
    outline: 2px solid var(--nal-blue);
    outline-offset: 4px;
}

.pl-card-place {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    margin: 6px 0 0;
    color: var(--nal-muted);
    font-size: 14px;
    line-height: 1.4;
}

.pl-card-place i {
    color: var(--nal-blue);
    font-size: 13px;
    line-height: 1.4;
}

/* οι κατηγορίες σε λευκό, για να ξεχωρίζουν από το πελατολόγιο */
.pl .pf-cats {
    background: var(--nal-white);
}

.pl-card-site {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 14px;
    color: var(--nal-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.pl-card-site i {
    transition: transform 0.25s ease;
}

.pl-card-site:hover {
    color: var(--nal-blue-dark);
}

.pl-card-site:hover i {
    transform: translate(2px, -2px);
}

.pl-empty {
    padding: 40px 0 10px;
}

.pl-empty[hidden],
.pl-more[hidden] {
    display: none;
}

.pl-empty p {
    max-width: 620px;
    margin: 0 0 22px;
    color: var(--nal-ink);
    font-size: 19px;
    line-height: 1.6;
}

.pl-more {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .pl-hero-grid { gap: 48px; }
    .pl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
    .pl-facts > div:nth-child(n + 3) { margin-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.14); }
    .pl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pl-tools { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

@media (max-width: 991px) {
    .pl-hero { padding: 48px 0 72px; }
    .pl-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .pl-facts { margin-top: 48px; }
    .pl-hero .cp-crumbs ol { margin-bottom: 30px; }
    .pl-mile, .pl-dir { padding: 88px 0; }
    .pl-mile-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .pl-hero { padding: 40px 0 56px; }
    .pl-hero h1 { font-size: 38px; }
    .pl-facts { grid-template-columns: minmax(0, 1fr); }
    .pl-facts > div, .pl-facts > div + div { margin-top: 0; padding: 16px 0; border-top: 0; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
    .pl-facts dd { max-width: none; }
    .pl-mosaic { gap: 6px; }
    .pl-shot--lead figcaption { padding: 30px 14px 12px; }
    .pl-shot--lead figcaption strong { font-size: 15px; }
    .pl-shot:not(.pl-shot--lead) figcaption { display: none; }
    .pl-mile, .pl-dir { padding: 72px 0; }
    .pl-mile-text > p:not(.nal-eyebrow) { font-size: 16px; }
    .pl-mile-facts dd { font-size: 15px; }
    .pl-mile-media::after { padding: 10px 14px 8px; font-size: 20px; }
    .pl-chips { flex-wrap: nowrap; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
    .pl-chips::-webkit-scrollbar { display: none; }
    .pl-chip { flex: 0 0 auto; }
    .pl-grid { gap: 12px; }
    .pl-card-body { padding: 12px 12px 14px; }
    .pl-card h3 { font-size: 15px; }
    .pl-card-place { font-size: 13px; }
    .pl-card-site { padding-top: 10px; font-size: 12px; }
}

/* =====================================================================
   NAL — Νέα (ilektronikes-kleidaries-nea.html)
   Hero με το πιο πρόσφατο νέο και χρονιές → αρχείο ανά χρονιά με φίλτρα → επικοινωνία.
   ===================================================================== */
.nw h1, .nw h2, .nw h3, .nw h4 {
    font-family: "Manrope", sans-serif;
    text-wrap: balance;
}

/* ---------- Hero ---------- */
.nw-hero {
    padding: 72px 0 0;
    color: var(--nal-white);
    background:
        radial-gradient(900px 560px at 90% -10%, rgba(23, 105, 170, 0.3), transparent 62%),
        var(--nal-black);
}

.nw-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 72px;
    align-items: end;
}

.nw-hero .cp-crumbs ol {
    margin-bottom: 40px;
}

.nw-hero h1 {
    margin: 0;
    color: var(--nal-white);
    font-size: clamp(46px, 5.6vw, 92px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
}

.nw-lead {
    max-width: 520px;
    margin: 26px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(17px, 1.3vw, 20px);
    line-height: 1.65;
}

.nw-latest {
    margin: 0;
}

.nw-latest-media {
    display: block;
    overflow: hidden;
    aspect-ratio: 730 / 515;
    background: #1a1e1e;
}

.nw-latest-media img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nw-latest:hover .nw-latest-media img {
    transform: scale(1.03);
}

.nw-latest figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 20px;
    padding: 18px 0 0;
}

.nw-latest-label {
    color: var(--nal-blue-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.nw-latest figcaption a {
    color: var(--nal-white);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}

.nw-latest figcaption a:hover {
    color: var(--nal-blue-light);
}

.nw-latest figcaption a i {
    display: inline-block;
    margin-left: 4px;
    font-size: 15px;
    transition: transform 0.25s ease;
}

.nw-latest figcaption a:hover i {
    transform: translate(2px, 2px);
}

.nw-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 64px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.nw-facts > div {
    padding: 22px 24px 26px 0;
}

.nw-facts > div + div {
    padding-left: 24px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.nw-facts dt {
    color: var(--nal-white);
    font-size: clamp(26px, 2.2vw, 36px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}

.nw-facts dd {
    max-width: 280px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.5;
}

.nw-jump {
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.nw-jump ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nw-jump li {
    flex: 1 1 0;
}

.nw-jump li + li {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
}

.nw-jump a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    transition: background 0.2s ease, color 0.2s ease;
}

.nw-jump a:hover,
.nw-jump a:focus-visible {
    color: var(--nal-white);
    background: rgba(255, 255, 255, 0.06);
}

/* ---------- Αρχείο ---------- */
.nw-archive {
    padding: 120px 0 130px;
    background: var(--nal-offwhite);
    scroll-margin-top: 76px;
}

.nw-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 0 0 28px;
    border-bottom: 1px solid var(--nal-line);
}

.nw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nw-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    margin: 0;
    padding: 0 16px;
    color: var(--nal-ink);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    background: transparent;
    border: 1px solid rgba(17, 20, 20, 0.2);
    border-radius: 999px;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.nw-chip span {
    color: var(--nal-muted);
    font-size: 12px;
    font-weight: 700;
    transition: color 0.2s ease;
}

.nw-chip:hover {
    border-color: var(--nal-ink);
}

.nw-chip[aria-pressed="true"] {
    color: var(--nal-white);
    background: var(--nal-ink);
    border-color: var(--nal-ink);
}

.nw-chip[aria-pressed="true"] span {
    color: var(--nal-blue-light);
}

.nw-chip:focus-visible {
    outline: 2px solid var(--nal-blue);
    outline-offset: 2px;
}

.nw-status {
    margin: 0;
    color: var(--nal-muted);
    font-size: 14px;
    font-weight: 600;
}

.nw-year {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 40px;
    padding: 56px 0;
    border-bottom: 1px solid var(--nal-line);
    scroll-margin-top: 76px;
}

.nw-year[hidden],
.nw-item[hidden] {
    display: none;
}

.nw-year-label {
    position: sticky;
    top: 110px;
    align-self: start;
    margin: 0;
    color: var(--nal-ink);
    font-size: clamp(44px, 4.4vw, 72px);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.05em;
    font-variant-numeric: tabular-nums;
}

.nw-list {
    display: grid;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nw-item {
    scroll-margin-top: 96px;
}

.nw-card {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    background: var(--nal-white);
    border: 1px solid var(--nal-line);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.nw-card:hover {
    border-color: rgba(17, 20, 20, 0.28);
    box-shadow: 0 24px 50px -36px rgba(17, 20, 20, 0.45);
}

.nw-item:target .nw-card {
    border-color: var(--nal-blue);
    box-shadow: 0 0 0 1px var(--nal-blue);
}

/* η εικόνα γεμίζει όλο το ύψος της κάρτας· το ::before κρατά το ελάχιστο ύψος στην αναλογία των εικόνων του live */
.nw-media {
    position: relative;
    margin: 0;
    overflow: hidden;
    background: #e9e6e0;
}

.nw-media::before {
    content: "";
    display: block;
    padding-top: 70.55%;
}

.nw-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nw-media--contain {
    background: var(--nal-white);
    border-right: 1px solid var(--nal-line);
}

.nw-media--contain img {
    padding: 6%;
    object-fit: contain;
}

.nw-card:hover .nw-media img {
    transform: scale(1.03);
}

.nw-badge {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 240px;
    padding: 28px;
    color: var(--nal-white);
    background:
        radial-gradient(420px 260px at 100% 0%, rgba(107, 184, 242, 0.35), transparent 65%),
        var(--nal-blue);
}

.nw-badge strong {
    font-family: "Manrope", sans-serif;
    font-size: clamp(56px, 5vw, 84px);
    font-weight: 600;
    line-height: 0.9;
    letter-spacing: -0.05em;
}

.nw-badge span {
    margin-top: 10px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.nw-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 32px 30px;
}

.nw-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 0 0 14px;
    color: var(--nal-muted);
    font-size: 13px;
    font-weight: 600;
}

.nw-tag {
    padding: 5px 10px 4px;
    color: var(--nal-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    background: rgba(23, 105, 170, 0.08);
}

.nw-card h4 {
    margin: 0;
    color: var(--nal-ink);
    font-size: clamp(21px, 1.7vw, 26px);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.nw-text {
    margin: 12px 0 0;
    color: #2c3131;
    font-size: 16px;
    line-height: 1.7;
}

.nw-new {
    align-self: stretch;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--nal-line);
}

.nw-new p {
    margin: 0 0 8px;
    color: var(--nal-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.nw-new ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nw-new li {
    position: relative;
    padding-left: 20px;
    color: var(--nal-ink);
    font-size: 15px;
    line-height: 1.55;
}

.nw-new li + li {
    margin-top: 6px;
}

.nw-new li::before {
    content: "";
    position: absolute;
    top: 0.68em;
    left: 0;
    width: 10px;
    height: 1px;
    background: var(--nal-blue);
}

.nw-hotels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.nw-hotels li {
    padding: 6px 10px;
    color: var(--nal-ink);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid var(--nal-line);
}

.nw-rel {
    margin-top: 20px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .nw-year { grid-template-columns: 150px minmax(0, 1fr); gap: 28px; }
    .nw-card { grid-template-columns: minmax(0, 1fr); }
    .nw-card--badge .nw-badge { min-height: 150px; }
    .nw-media--contain { border-right: 0; border-bottom: 1px solid var(--nal-line); }
}

@media (max-width: 991px) {
    .nw-hero { padding-top: 48px; }
    .nw-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .nw-hero .cp-crumbs ol { margin-bottom: 30px; }
    .nw-facts { margin-top: 48px; }
    .nw-jump ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .nw-jump ul::-webkit-scrollbar { display: none; }
    .nw-jump li { flex: 0 0 auto; }
    .nw-jump a { min-height: 54px; padding: 0 18px; }
    .nw-archive { padding: 88px 0; }
    .nw-year { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 44px 0; }
    .nw-year-label { position: static; }
}

@media (max-width: 575px) {
    .nw-hero h1 { font-size: 44px; }
    .nw-latest figcaption a { font-size: 17px; }
    .nw-facts { grid-template-columns: minmax(0, 1fr); }
    .nw-facts > div, .nw-facts > div + div { padding: 16px 0; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
    .nw-facts > div:last-child { border-bottom: 0; }
    .nw-facts dd { max-width: none; }
    .nw-archive { padding: 72px 0; }
    .nw-chips { flex-wrap: nowrap; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
    .nw-chips::-webkit-scrollbar { display: none; }
    .nw-chip { flex: 0 0 auto; }
    .nw-year { padding: 36px 0; }
    .nw-year-label { font-size: 40px; }
    .nw-list { gap: 14px; }
    .nw-body { padding: 20px 18px 22px; }
    .nw-text { font-size: 15px; }
    .nw-badge { padding: 20px; }
    .nw-card--badge .nw-badge { min-height: 120px; }
}

/* =====================================================================
   NAL — Ηλεκτρονικές κλειδαριές (hlektronikes-kleidaries/ilektronikes-kleidaries.html)
   Hero → τρεις χώροι (ξενοδοχεία, Airbnb, ντουλάπια) → όλες οι κλειδαριές με φίλτρο → τρόποι πρόσβασης → FAQ → επικοινωνία.
   ===================================================================== */

/* ---------- Τρεις χώροι ---------- */
.lk-ways-sec {
    padding: 120px 0 130px;
    background: var(--nal-offwhite);
}

.lk-ways {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lk-way {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--nal-ink);
    background: var(--nal-white);
    border: 1px solid var(--nal-line);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.lk-way:hover,
.lk-way:focus-visible {
    color: var(--nal-ink);
    border-color: rgba(17, 20, 20, 0.3);
    box-shadow: 0 30px 60px -40px rgba(17, 20, 20, 0.5);
}

.lk-way-media {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #e9e6e0;
}

.lk-way-media picture {
    display: block;
    height: 100%;
}

.lk-way-media img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.lk-way:hover .lk-way-media img {
    transform: scale(1.04);
}

.lk-way-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 30px 30px;
}

.lk-way-count {
    color: var(--nal-blue);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.lk-way h3 {
    margin: 12px 0 0;
    color: var(--nal-ink);
    font-family: "Manrope", sans-serif;
    font-size: clamp(24px, 2vw, 30px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.lk-way p {
    margin: 14px 0 24px;
    color: var(--nal-muted);
    font-size: 16px;
    line-height: 1.65;
}

.lk-way:hover .cp-card-link i {
    transform: translateX(4px);
}

/* ---------- Τρόποι πρόσβασης ---------- */
.lk-access {
    padding: 130px 0 120px;
    background:
        radial-gradient(800px 480px at 100% 0%, rgba(23, 105, 170, 0.28), transparent 62%),
        var(--nal-black);
}

.lk-access .nal-sec-head h2,
.lk-access h3 {
    font-family: "Manrope", sans-serif;
}

.lk-acc-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--nal-line-light);
}

.lk-acc {
    display: flex;
    flex-direction: column;
    padding: 36px 32px 38px 0;
    border-bottom: 1px solid var(--nal-line-light);
}

.lk-acc:not(:nth-child(3n + 1)) {
    padding-left: 32px;
    border-left: 1px solid var(--nal-line-light);
}

.lk-acc-icon {
    color: var(--nal-blue-light);
    font-size: 30px;
    line-height: 1;
}

.lk-acc h3 {
    margin: 22px 0 10px;
    color: var(--nal-white);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.lk-acc p {
    margin: 0 0 22px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    line-height: 1.7;
}

.lk-acc-models {
    margin: auto 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.lk-acc-models li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.lk-acc-models a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    color: var(--nal-white);
    font-size: 15px;
    font-weight: 600;
    transition: color 0.2s ease;
}

.lk-acc-models a i {
    color: var(--nal-blue-light);
    transition: transform 0.25s ease;
}

.lk-acc-models a:hover {
    color: var(--nal-blue-light);
}

.lk-acc-models a:hover i {
    transform: translateX(4px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .lk-acc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lk-acc:not(:nth-child(3n + 1)) { padding-left: 0; border-left: 0; }
    .lk-acc:nth-child(even) { padding-left: 28px; border-left: 1px solid var(--nal-line-light); }
    .lk-acc { padding-right: 28px; }
}

@media (max-width: 991px) {
    .lk-ways-sec, .lk-access { padding: 88px 0; }
    .lk-ways { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .lk-way { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
    .lk-way-media { aspect-ratio: auto; min-height: 100%; }
}

@media (max-width: 575px) {
    .lk-ways-sec, .lk-access { padding: 72px 0; }
    .lk-way { grid-template-columns: minmax(0, 1fr); }
    .lk-way-media { aspect-ratio: 16 / 10; }
    .lk-way-body { padding: 22px 20px 24px; }
    .lk-way p { font-size: 15px; }
    .lk-acc-grid { grid-template-columns: minmax(0, 1fr); }
    .lk-acc, .lk-acc:nth-child(even) { padding: 28px 0 30px; border-left: 0; }
}

/* =====================================================================
   NAL — Video (ilektronikes-kleidaries-videos.html)
   Hero με προβεβλημένο video → οδηγοί εγκατάστασης → παρουσιάσεις → υποστήριξη → επικοινωνία.
   Τα video φορτώνουν μόνο με το πάτημα (youtube-nocookie).
   ===================================================================== */
.vd h1, .vd h2, .vd h3 {
    font-family: "Manrope", sans-serif;
    text-wrap: balance;
}

/* ---------- Player (μικρογραφία → iframe) ---------- */
.vd-player {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #111414;
}

.vd-facade {
    position: absolute;
    inset: 0;
    display: block;
}

.vd-facade img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.3s ease;
}

.vd-facade::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(8, 10, 10, 0.45), rgba(8, 10, 10, 0) 55%);
    transition: opacity 0.3s ease;
}

.vd-play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 68px;
    height: 68px;
    color: var(--nal-white);
    font-size: 34px;
    background: var(--nal-blue);
    border-radius: 50%;
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.6);
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, background 0.3s ease;
}

.vd-play i {
    margin-left: 4px;
}

.vd-player--big .vd-play {
    width: 88px;
    height: 88px;
    font-size: 44px;
}

.vd-facade:hover img,
.vd-facade:focus-visible img {
    transform: scale(1.04);
}

.vd-facade:hover .vd-play,
.vd-facade:focus-visible .vd-play {
    background: var(--nal-blue-dark);
    transform: translate(-50%, -50%) scale(1.08);
}

.vd-facade:focus-visible {
    outline: 3px solid var(--nal-blue-light);
    outline-offset: -3px;
}

.vd-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ---------- Hero ---------- */
.vd-hero {
    padding: 72px 0 0;
    color: var(--nal-white);
    background:
        radial-gradient(900px 560px at 90% -10%, rgba(23, 105, 170, 0.32), transparent 62%),
        var(--nal-black);
}

.vd-hero .cp-crumbs ol {
    margin-bottom: 40px;
}

.vd-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 64px;
    align-items: center;
}

.vd-hero h1 {
    margin: 0;
    color: var(--nal-white);
    font-size: clamp(40px, 4.4vw, 70px);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -0.035em;
}

.vd-lead {
    max-width: 520px;
    margin: 26px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(17px, 1.3vw, 19px);
    line-height: 1.65;
}

.vd-hero .nal-actions {
    margin-top: 34px;
}

.vd-feature {
    margin: 0;
}

.vd-feature figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    padding-top: 16px;
    color: var(--nal-white);
    font-size: 17px;
    font-weight: 600;
}

.vd-feature figcaption span {
    color: var(--nal-blue-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.vd-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 64px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.vd-facts > div {
    padding: 22px 24px 30px 0;
}

.vd-facts > div + div {
    padding-left: 24px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.vd-facts dt {
    color: var(--nal-white);
    font-size: clamp(26px, 2.2vw, 36px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
}

.vd-facts dt a {
    color: var(--nal-blue-light);
}

.vd-facts dt a:hover {
    color: var(--nal-white);
}

.vd-facts dd {
    max-width: 280px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.5;
}

/* ---------- Ενότητες ---------- */
.vd-sec {
    padding: 120px 0 130px;
    background: var(--nal-white);
    scroll-margin-top: 76px;
}

.vd-sec--alt {
    background: var(--nal-offwhite);
}

.vd-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vd-card {
    display: flex;
    flex-direction: column;
    background: var(--nal-white);
    border: 1px solid var(--nal-line);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.vd-sec:not(.vd-sec--alt) .vd-card {
    background: var(--nal-offwhite);
}

.vd-card:hover {
    border-color: rgba(17, 20, 20, 0.28);
    box-shadow: 0 24px 50px -36px rgba(17, 20, 20, 0.45);
}

.vd-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px 24px 24px;
}

.vd-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0 0 10px;
    color: var(--nal-muted);
    font-size: 13px;
    font-weight: 600;
}

.vd-meta span {
    color: var(--nal-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.vd-card h3 {
    margin: 0;
    color: var(--nal-ink);
    font-size: 21px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.vd-text {
    margin: 10px 0 0;
    color: #2c3131;
    font-size: 15px;
    line-height: 1.65;
}

.vd-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 22px;
    margin-top: auto;
    padding-top: 20px;
}

.vd-yt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--nal-muted);
    font-size: 13px;
    font-weight: 700;
    transition: color 0.2s ease;
}

.vd-yt:hover {
    color: var(--nal-ink);
}

/* ---------- Υποστήριξη ---------- */
.vd-help {
    padding: 88px 0;
    color: var(--nal-white);
    background:
        radial-gradient(600px 360px at 100% 100%, rgba(107, 184, 242, 0.32), transparent 62%),
        var(--nal-blue-dark);
}

.vd-help-inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px;
    align-items: end;
}

.vd-help h2 {
    margin: 0;
    color: var(--nal-white);
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.vd-help p:not(.nal-eyebrow) {
    max-width: 600px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 17px;
    line-height: 1.65;
}

.vd-help .nal-eyebrow span {
    color: var(--nal-white);
}

.vd-help .nal-actions {
    justify-content: flex-end;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .vd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .vd-hero { padding-top: 48px; }
    .vd-hero .cp-crumbs ol { margin-bottom: 30px; }
    .vd-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .vd-facts { margin-top: 48px; }
    .vd-sec { padding: 88px 0; }
    .vd-help-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .vd-help .nal-actions { justify-content: flex-start; }
}

@media (max-width: 767px) {
    .vd-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

@media (max-width: 575px) {
    .vd-hero h1 { font-size: 38px; }
    .vd-facts { grid-template-columns: minmax(0, 1fr); }
    .vd-facts > div, .vd-facts > div + div { padding: 16px 0; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
    .vd-facts > div:last-child { border-bottom: 0; }
    .vd-facts dd { max-width: none; }
    .vd-player--big .vd-play { width: 68px; height: 68px; font-size: 34px; }
    .vd-sec { padding: 72px 0; }
    .vd-body { padding: 18px 18px 20px; }
    .vd-card h3 { font-size: 19px; }
    .vd-help { padding: 72px 0; }
}

/* στο μπλε φόντο το κύριο κουμπί γίνεται λευκό, για να ξεχωρίζει */
.vd-help .nal-btn-primary {
    color: var(--nal-blue-dark);
    background: var(--nal-white);
    border-color: var(--nal-white);
}

.vd-help .nal-btn-primary:hover,
.vd-help .nal-btn-primary:focus-visible {
    color: var(--nal-white);
    background: transparent;
    border-color: var(--nal-white);
}

/* =====================================================================
   NAL — Υποστήριξη (ilektronikes-kleidaries-support.html)
   Hero με γραμμή υποστήριξης → κατάλογοι → εγχειρίδιο υποδοχής → συχνές ερωτήσεις → και ακόμη → επικοινωνία.
   ===================================================================== */
.su h1, .su h2, .su h3 {
    font-family: "Manrope", sans-serif;
    text-wrap: balance;
}

/* ---------- Hero ---------- */
.su-hero {
    padding: 72px 0 96px;
    color: var(--nal-white);
    background:
        radial-gradient(900px 560px at 90% -10%, rgba(23, 105, 170, 0.32), transparent 62%),
        var(--nal-black);
}

.su-hero .cp-crumbs ol {
    margin-bottom: 40px;
}

.su-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 72px;
    align-items: end;
}

.su-hero h1 {
    max-width: 720px;
    margin: 0;
    color: var(--nal-white);
    font-size: clamp(40px, 4.4vw, 70px);
    font-weight: 600;
    line-height: 1.04;
    letter-spacing: -0.035em;
}

.su-lead {
    max-width: 580px;
    margin: 26px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(17px, 1.3vw, 19px);
    line-height: 1.65;
}

.su-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 34px;
}

.su-jump a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 999px;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.su-jump a:hover,
.su-jump a:focus-visible {
    color: var(--nal-black);
    background: var(--nal-white);
    border-color: var(--nal-white);
}

.su-line {
    padding: 36px 36px 38px;
    background:
        radial-gradient(420px 260px at 100% 0%, rgba(107, 184, 242, 0.3), transparent 65%),
        var(--nal-blue);
}

.su-line-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.su-line-label i {
    font-size: 18px;
}

.su-line-phone {
    display: block;
    margin: 14px 0 24px;
    color: var(--nal-white);
    font-family: "Manrope", sans-serif;
    font-size: clamp(36px, 3.4vw, 54px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.su-line-phone:hover {
    color: var(--nal-white);
    opacity: 0.86;
}

.su-line-offices {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.su-line-offices li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}

.su-line-offices span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
}

.su-line-offices a {
    color: var(--nal-white);
    font-size: 17px;
    font-weight: 600;
}

.su-line .nal-btn-primary {
    width: 100%;
    color: var(--nal-blue-dark);
    background: var(--nal-white);
    border-color: var(--nal-white);
}

.su-line .nal-btn-primary:hover,
.su-line .nal-btn-primary:focus-visible {
    color: var(--nal-white);
    background: transparent;
}

/* ---------- Ενότητες ---------- */
.su-sec {
    padding: 120px 0 130px;
    background: var(--nal-white);
    scroll-margin-top: 76px;
}

.su-sec--alt {
    background: var(--nal-offwhite);
}

.su-doc-brand {
    margin: 0 0 8px;
    color: var(--nal-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.su-doc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 16px 0 0;
}

.su-doc-meta span {
    padding: 5px 9px;
    color: var(--nal-muted);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    background: var(--nal-white);
    border: 1px solid var(--nal-line);
}

/* προβεβλημένος κατάλογος */
.su-feature {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    margin-bottom: 24px;
    background: var(--nal-white);
    border: 1px solid var(--nal-line);
}

.su-feature-mark {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 340px;
    padding: 34px;
    color: var(--nal-white);
    background:
        radial-gradient(520px 320px at 100% 0%, rgba(107, 184, 242, 0.35), transparent 65%),
        var(--nal-black);
}

.su-feature-mark span {
    font-family: "Manrope", sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.su-feature-mark strong {
    margin-top: auto;
    font-family: "Manrope", sans-serif;
    font-size: clamp(72px, 7vw, 120px);
    font-weight: 600;
    line-height: 0.85;
    letter-spacing: -0.05em;
}

.su-feature-mark em {
    margin-top: 14px;
    color: var(--nal-blue-light);
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.su-feature-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 44px;
}

.su-feature-body h3 {
    margin: 0;
    color: var(--nal-ink);
    font-size: clamp(28px, 2.6vw, 40px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.su-feature-body > p:not(.su-doc-brand):not(.su-doc-meta) {
    max-width: 560px;
    margin: 14px 0 0;
    color: #2c3131;
    font-size: 17px;
    line-height: 1.65;
}

.su-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 18px 0 0;
    padding: 0;
    list-style: none;
}

.su-toc li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--nal-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.su-toc li::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    background: var(--nal-blue);
    border-radius: 50%;
}

.su .nal-btn i {
    margin-left: 10px;
}

.su-feature-body .nal-actions {
    margin-top: 26px;
}

/* υπόλοιποι κατάλογοι */
.su-docs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.su-doc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 26px 26px;
    background: var(--nal-white);
    border: 1px solid var(--nal-line);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.su-doc:hover {
    border-color: rgba(17, 20, 20, 0.28);
    box-shadow: 0 24px 50px -36px rgba(17, 20, 20, 0.45);
}

.su-doc-icon {
    margin-bottom: 22px;
    color: var(--nal-blue);
    font-size: 30px;
    line-height: 1;
}

.su-doc h3 {
    margin: 0;
    color: var(--nal-ink);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.su-doc > p:not(.su-doc-brand):not(.su-doc-meta) {
    margin: 10px 0 0;
    color: var(--nal-muted);
    font-size: 15px;
    line-height: 1.6;
}

.su-doc .su-doc-meta span {
    background: var(--nal-offwhite);
}

.su-doc-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 22px;
    color: var(--nal-blue);
    font-size: 14px;
    font-weight: 700;
}

.su-doc-link i {
    transition: transform 0.25s ease;
}

.su-doc-link:hover i {
    transform: translateY(2px);
}

/* ---------- Εγχειρίδιο υποδοχής ---------- */
.su-manual-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 80px;
    align-items: start;
}

.su-manual-intro {
    position: sticky;
    top: 110px;
}

.su-manual-intro h2 {
    margin: 0;
    color: var(--nal-ink);
    font-size: clamp(30px, 3vw, 46px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.su-manual-intro > p:not(.nal-eyebrow) {
    margin: 20px 0 0;
    color: #2c3131;
    font-size: 17px;
    line-height: 1.7;
}

.su-manual-dl {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 28px 0 22px;
    padding: 18px 20px;
    background: var(--nal-offwhite);
    border: 1px solid var(--nal-line);
}

.su-manual-dl > i {
    color: var(--nal-blue);
    font-size: 30px;
}

.su-manual-dl strong {
    color: var(--nal-ink);
    font-size: 16px;
}

.su-manual-dl .su-doc-meta {
    margin-top: 8px;
}

.su-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: su-step;
    border-top: 1px solid var(--nal-line);
}

.su-steps li {
    position: relative;
    padding: 30px 0 30px 84px;
    border-bottom: 1px solid var(--nal-line);
    counter-increment: su-step;
}

.su-steps li::before {
    content: counter(su-step, decimal-leading-zero);
    position: absolute;
    top: 26px;
    left: 0;
    color: var(--nal-blue);
    font-family: "Manrope", sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
}

.su-steps h3 {
    margin: 0;
    color: var(--nal-ink);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.su-steps p {
    margin: 8px 0 0;
    color: #2c3131;
    font-size: 16px;
    line-height: 1.7;
}

/* ---------- Συχνές ερωτήσεις ---------- */
.su-faq {
    background: var(--nal-white);
    border-top: 1px solid var(--nal-line);
}

.su-faq .cp-faq-intro .su-doc-meta {
    margin: 22px 0 16px;
}

.su-faq .cp-faq-intro .su-doc-meta span {
    background: var(--nal-offwhite);
}

/* ---------- Και ακόμη ---------- */
.su-more-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.su-more-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 32px 30px 30px;
    color: var(--nal-ink);
    background: var(--nal-white);
    border: 1px solid var(--nal-line);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.su-more-card:hover,
.su-more-card:focus-visible {
    color: var(--nal-ink);
    border-color: rgba(17, 20, 20, 0.28);
    box-shadow: 0 24px 50px -36px rgba(17, 20, 20, 0.45);
}

.su-more-card > i {
    color: var(--nal-blue);
    font-size: 30px;
    line-height: 1;
}

.su-more-card h3 {
    margin: 22px 0 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.su-more-card p {
    margin: 10px 0 24px;
    color: var(--nal-muted);
    font-size: 15px;
    line-height: 1.65;
}

.su-more-card:hover .cp-card-link i {
    transform: translateX(4px);
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .su-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .su-manual-grid { gap: 48px; }
}

@media (max-width: 991px) {
    .su-hero { padding: 48px 0 72px; }
    .su-hero .cp-crumbs ol { margin-bottom: 30px; }
    .su-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .su-sec { padding: 88px 0; }
    .su-feature { grid-template-columns: minmax(0, 1fr); }
    .su-feature-mark { min-height: 220px; }
    .su-manual-grid { grid-template-columns: minmax(0, 1fr); }
    .su-manual-intro { position: static; }
    .su-more-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

@media (max-width: 575px) {
    .su-hero h1 { font-size: 36px; }
    .su-line { padding: 28px 22px 26px; }
    .su-line-phone { font-size: 38px; }
    .su-sec { padding: 72px 0; }
    .su-feature-mark { min-height: 180px; padding: 24px; }
    .su-feature-body { padding: 28px 22px 30px; }
    .su-docs { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .su-steps li { padding: 24px 0 24px 58px; }
    .su-steps li::before { top: 22px; font-size: 30px; }
    .su-steps h3 { font-size: 19px; }
    .su-steps p { font-size: 15px; }
}

/* =====================================================================
   NAL — Sitemap (sitemap.html)
   Hero με αναζήτηση και ευρετήριο ενοτήτων → Η NAL (κάρτες) → 8 ενότητες προϊόντων
   (εικόνα και τίτλος αριστερά, κατηγορίες σε στήλες δεξιά) → επικοινωνία.
   ===================================================================== */
.sm h1, .sm h2, .sm h3 {
    font-family: "Manrope", sans-serif;
}

/* ---------- Hero ---------- */
.sm-hero {
    padding: 72px 0 0;
    color: var(--nal-white);
    background:
        radial-gradient(1000px 600px at 92% -12%, rgba(23, 105, 170, 0.34), transparent 62%),
        radial-gradient(700px 420px at -10% 120%, rgba(107, 184, 242, 0.12), transparent 60%),
        var(--nal-black);
}

.sm-hero .cp-crumbs ol {
    margin-bottom: 40px;
}

.sm-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 72px;
    align-items: end;
}

.sm-hero h1 {
    margin: 0;
    color: var(--nal-white);
    font-size: clamp(44px, 5vw, 80px);
    font-weight: 600;
    line-height: 1.02;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.sm-lead {
    max-width: 560px;
    margin: 24px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(17px, 1.3vw, 19px);
    line-height: 1.65;
}

.sm-facts {
    display: flex;
    gap: 0;
    margin: 40px 0 0;
}

.sm-facts > div {
    padding: 0 32px 0 0;
}

.sm-facts > div + div {
    padding-left: 32px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.sm-facts dt {
    color: var(--nal-white);
    font-size: clamp(30px, 2.6vw, 44px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
}

.sm-facts dd {
    margin: 8px 0 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 13px;
    letter-spacing: 0.4px;
}

.sm-search {
    padding: 30px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(6px);
}

.sm-search label {
    display: block;
    margin: 0 0 12px;
    color: var(--nal-blue-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.sm-search-box {
    position: relative;
}

.sm-search-box i {
    position: absolute;
    top: 50%;
    left: 20px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    transform: translateY(-50%);
    pointer-events: none;
}

.sm-search input {
    display: block;
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 0 20px 0 54px;
    color: var(--nal-white);
    font-family: inherit;
    font-size: 17px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 0;
    box-shadow: none;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
}

.sm-search input:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

.sm-search input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--nal-blue-light);
    outline: none;
    box-shadow: 0 0 0 3px rgba(107, 184, 242, 0.22);
}

.sm-status {
    margin: 12px 0 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 14px;
}

/* ευρετήριο ενοτήτων */
.sm-index {
    margin-top: 64px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.sm-index ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
}

.sm-index li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sm-index li:not(:nth-child(4n + 1)) {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.sm-index li:nth-last-child(-n + 4) {
    border-bottom: 0;
}

.sm-index a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 14px;
    height: 100%;
    padding: 22px 22px 22px 0;
    color: var(--nal-white);
    transition: background 0.25s ease;
}

.sm-index li:not(:nth-child(4n + 1)) a {
    padding-left: 22px;
}

.sm-index-num {
    grid-row: span 2;
    color: var(--nal-blue-light);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
}

.sm-index-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    transition: color 0.2s ease;
}

.sm-index-count {
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
}

.sm-index a:hover,
.sm-index a:focus-visible {
    background: rgba(255, 255, 255, 0.05);
}

.sm-index a:hover .sm-index-name {
    color: var(--nal-blue-light);
}

/* ---------- Η NAL ---------- */
.sm-nal {
    padding: 110px 0 100px;
    background: var(--nal-white);
}

.sm-nal-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: 56px;
}

.sm-nal-grid[hidden] {
    display: none;
}

.sm-nal-head h2 {
    margin: 0;
    color: var(--nal-ink);
    font-size: clamp(28px, 2.6vw, 40px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.sm-nal-lists {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 40px;
}

.sm-nal-lists h3 {
    margin: 0 0 14px;
    color: var(--nal-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.sm-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sm-nal-lists .sm-block:last-child .sm-tiles {
    grid-template-columns: minmax(0, 1fr);
}

.sm-tiles li[hidden] {
    display: none;
}

.sm-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 58px;
    padding: 0 18px;
    color: var(--nal-ink);
    font-size: 15px;
    font-weight: 600;
    background: var(--nal-offwhite);
    border: 1px solid transparent;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.sm-tile-icon {
    color: var(--nal-blue);
    font-size: 18px;
}

.sm-tile span {
    flex: 1 1 auto;
}

.sm-tile-go {
    color: var(--nal-muted);
    font-size: 13px;
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.sm-tile:hover,
.sm-tile:focus-visible {
    color: var(--nal-ink);
    background: var(--nal-white);
    border-color: rgba(17, 20, 20, 0.2);
}

.sm-tile:hover .sm-tile-go,
.sm-tile:focus-visible .sm-tile-go {
    opacity: 1;
    transform: none;
}

/* ---------- Ενότητες προϊόντων ---------- */
.sm-products {
    padding: 100px 0 120px;
    background: var(--nal-offwhite);
}

.sm-group {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    background: var(--nal-white);
    border: 1px solid var(--nal-line);
    scroll-margin-top: 90px;
}

.sm-group + .sm-group {
    margin-top: 24px;
}

.sm-group[hidden],
.sm-block[hidden],
.sm-block li[hidden] {
    display: none;
}

.sm-group-aside {
    border-right: 1px solid var(--nal-line);
}

.sm-group-stick {
    position: sticky;
    top: 92px;
}

.sm-group-media {
    display: block;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background: var(--nal-white);
    border-bottom: 1px solid var(--nal-line);
}

.sm-group-media picture {
    display: block;
    height: 100%;
}

.sm-group-media img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 12%;
    object-fit: contain;
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sm-group:hover .sm-group-media img {
    transform: scale(1.04);
}

.sm-group-text {
    padding: 26px 28px 30px;
}

.sm-num {
    display: block;
    color: var(--nal-blue);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.sm-group-text h2 {
    margin: 10px 0 0;
    font-size: clamp(22px, 1.8vw, 28px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.sm-group-text h2 a {
    color: var(--nal-ink);
    transition: color 0.2s ease;
}

.sm-group-text h2 a:hover {
    color: var(--nal-blue);
}

.sm-group-text p {
    margin: 10px 0 0;
    color: var(--nal-muted);
    font-size: 14px;
    font-weight: 600;
}

.sm-group-go {
    margin-top: 22px;
}

/* ενότητες με λίγα προϊόντα: μικρή εικόνα δίπλα στον τίτλο, για να μη μένει κενό */
.sm-group--compact .sm-group-stick {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    align-items: center;
}

.sm-group--compact .sm-group-media {
    border-right: 1px solid var(--nal-line);
    border-bottom: 0;
}

.sm-group--compact .sm-group-media img {
    padding: 10%;
}

.sm-group--compact .sm-group-text {
    padding: 18px 20px;
}

.sm-group--compact .sm-group-text h2 {
    margin-top: 4px;
    font-size: 20px;
}

.sm-group--compact .sm-group-go {
    margin-top: 10px;
    font-size: 13px;
}

.sm-group-body {
    padding: 34px 36px 8px;
    column-count: 3;
    column-gap: 36px;
}

.sm-group-body .sm-block {
    margin: 0 0 28px;
}

.sm-group-body h3 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
    padding-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    border-bottom: 1px solid var(--nal-ink);
    break-after: avoid;
    break-inside: avoid;
}

.sm-group-body h3 a {
    color: var(--nal-ink);
    transition: color 0.2s ease;
}

.sm-group-body h3 a:hover {
    color: var(--nal-blue);
}

.sm-count {
    flex: 0 0 auto;
    min-width: 26px;
    padding: 2px 7px;
    color: var(--nal-blue);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    background: rgba(23, 105, 170, 0.08);
}

.sm-group-body ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sm-group-body li {
    break-inside: avoid;
}

.sm-group-body li a {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    color: #3c4141;
    font-size: 14px;
    line-height: 1.45;
    border-bottom: 1px solid var(--nal-line);
    transition: color 0.2s ease, padding 0.25s ease;
}

.sm-group-body li a i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--nal-blue);
    font-size: 12px;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.2s ease, transform 0.25s ease;
}

.sm-group-body li a:hover,
.sm-group-body li a:focus-visible {
    color: var(--nal-ink);
}

.sm-group-body li a:hover i,
.sm-group-body li a:focus-visible i {
    opacity: 1;
    transform: none;
}

.sm-empty {
    padding: 40px 0 0;
}

.sm-empty[hidden] {
    display: none;
}

.sm-empty p {
    max-width: 640px;
    margin: 0;
    color: var(--nal-ink);
    font-size: 19px;
    line-height: 1.6;
}

.sm-empty a {
    color: var(--nal-blue);
    border-bottom: 1px solid currentColor;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .sm-index ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm-index li:not(:nth-child(4n + 1)) { border-left: 0; }
    .sm-index li:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, 0.1); }
    .sm-index li:not(:nth-child(4n + 1)) a { padding-left: 0; }
    .sm-index li:nth-child(even) a { padding-left: 22px; }
    .sm-index li:nth-last-child(-n + 4) { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
    .sm-index li:nth-last-child(-n + 2) { border-bottom: 0; }
    .sm-group-body { column-count: 2; }
    .sm-nal-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 991px) {
    .sm-hero { padding-top: 48px; }
    .sm-hero .cp-crumbs ol { margin-bottom: 30px; }
    .sm-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .sm-index { margin-top: 48px; }
    .sm-nal, .sm-products { padding: 80px 0; }
    .sm-nal-lists { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .sm-nal-lists .sm-block:last-child .sm-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm-group { grid-template-columns: minmax(0, 1fr); }
    .sm-group-aside { border-right: 0; border-bottom: 1px solid var(--nal-line); }
    .sm-group-stick { position: static; display: grid; grid-template-columns: 160px minmax(0, 1fr); }
    .sm-group-media { border-right: 1px solid var(--nal-line); border-bottom: 0; }
    .sm-group-text { align-self: center; }
}

@media (max-width: 575px) {
    .sm-hero h1 { font-size: 38px; }
    .sm-facts > div { padding-right: 18px; }
    .sm-facts > div + div { padding-left: 18px; }
    .sm-search { padding: 20px; }
    .sm-index ul { grid-template-columns: minmax(0, 1fr); }
    .sm-index li:nth-child(even) { border-left: 0; }
    .sm-index li:nth-child(even) a { padding-left: 0; }
    .sm-index li:nth-last-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
    .sm-index li:last-child { border-bottom: 0; }
    .sm-index a { padding: 16px 0; }
    .sm-tiles, .sm-nal-lists .sm-block:last-child .sm-tiles { grid-template-columns: minmax(0, 1fr); }
    .sm-group-stick { grid-template-columns: 110px minmax(0, 1fr); }
    .sm-group-text { padding: 18px 18px 20px; }
    .sm-group-text h2 { font-size: 20px; }
    .sm-group-go { margin-top: 12px; }
    .sm-group-body { column-count: 1; padding: 24px 18px 4px; }
}

/* =====================================================================
   NAL — Κλειδαριές με κωδικό για Airbnb (hlektronikes-kleidaries/kleidaries-airbnb-me-kodiko.html)
   Hero με φωτογραφία → τρεις κλειδαριές → διαχείριση κωδικών → σύγκριση → FAQ → επικοινωνία.
   ===================================================================== */
.ak h1, .ak h2, .ak h3 {
    font-family: "Manrope", sans-serif;
}

/* ---------- Hero ---------- */
.ak-hero {
    padding: 72px 0 0;
    color: var(--nal-white);
    background:
        radial-gradient(900px 560px at 90% -10%, rgba(23, 105, 170, 0.32), transparent 62%),
        var(--nal-black);
}

.ak-hero .cp-crumbs ol {
    margin-bottom: 40px;
}

.ak-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: 64px;
    align-items: center;
}

.ak-hero h1 {
    margin: 0;
    color: var(--nal-white);
    font-size: clamp(42px, 4.6vw, 74px);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.ak-lead {
    max-width: 560px;
    margin: 26px 0 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(17px, 1.3vw, 19px);
    line-height: 1.65;
}

.ak-hero .nal-actions {
    margin-top: 34px;
}

.ak-hero-media {
    position: relative;
    max-width: 700px;
    margin: 0 0 0 auto;
}

.ak-hero-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 700 / 435;
    object-fit: cover;
}

.ak-hero-media figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding-top: 14px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
}

.ak-hero-media figcaption span {
    color: var(--nal-blue-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.ak-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 64px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.ak-facts > div {
    padding: 22px 24px 30px 0;
}

.ak-facts > div + div {
    padding-left: 24px;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.ak-facts dt {
    color: var(--nal-white);
    font-size: clamp(24px, 2vw, 32px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.ak-facts dt a {
    color: var(--nal-blue-light);
}

.ak-facts dt a:hover {
    color: var(--nal-white);
}

.ak-facts dd {
    margin: 10px 0 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    line-height: 1.5;
}

/* ---------- Οι κλειδαριές ---------- */
.ak-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

/* ---------- Διαχείριση κωδικών ---------- */
.ak-modes {
    padding: 130px 0 120px;
    background:
        radial-gradient(800px 480px at 100% 0%, rgba(23, 105, 170, 0.28), transparent 62%),
        var(--nal-black);
}

.ak-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ak-mode {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 34px 32px 32px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    transition: border-color 0.3s ease, background 0.3s ease;
}

.ak-mode:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(107, 184, 242, 0.45);
}

.ak-mode-icon {
    color: var(--nal-blue-light);
    font-size: 30px;
    line-height: 1;
}

.ak-mode h3 {
    margin: 22px 0 0;
    color: var(--nal-white);
    font-size: 23px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.ak-mode-prod {
    margin: 8px 0 0;
    color: var(--nal-blue-light);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ak-mode-list {
    margin: 22px 0 26px;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ak-mode-list li {
    position: relative;
    padding: 13px 0 13px 26px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    line-height: 1.6;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ak-mode-list li::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 2px;
    width: 10px;
    height: 1px;
    background: var(--nal-blue-light);
}

.ak-mode-list--steps {
    counter-reset: ak-step;
}

.ak-mode-list--steps li {
    padding-left: 34px;
    counter-increment: ak-step;
}

.ak-mode-list--steps li::before {
    content: counter(ak-step);
    top: 13px;
    left: 0;
    width: 22px;
    height: 22px;
    color: var(--nal-black);
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    background: var(--nal-blue-light);
    border-radius: 50%;
}

.ak-mode .nal-link {
    margin-top: auto;
    color: var(--nal-white);
}

.ak-mode .nal-link:hover {
    color: var(--nal-blue-light);
}

/* ---------- Σύγκριση ---------- */
.ak-compare {
    padding: 130px 0 120px;
    background: var(--nal-white);
}

.ak-table-wrap {
    overflow-x: auto;
}

.ak-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    table-layout: fixed;
}

.ak-table thead td {
    width: 22%;
}

.ak-table thead th {
    padding: 0 20px 26px;
    vertical-align: bottom;
    text-align: left;
}

.ak-table thead th a {
    display: block;
    color: var(--nal-ink);
}

.ak-th-media {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    margin-bottom: 16px;
    background: var(--nal-offwhite);
}

.ak-th-media picture {
    display: block;
    height: 100%;
}

.ak-th-media img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    padding: 8%;
    object-fit: contain;
    mix-blend-mode: multiply;
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.ak-table thead th a:hover img {
    transform: scale(1.04);
}

.ak-th-brand {
    display: block;
    color: var(--nal-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.ak-th-name {
    display: block;
    margin-top: 6px;
    font-family: "Manrope", sans-serif;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.ak-table tbody th,
.ak-table tbody td {
    padding: 20px;
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid var(--nal-line);
}

.ak-table tbody tr:last-child th,
.ak-table tbody tr:last-child td {
    border-bottom: 1px solid var(--nal-line);
}

.ak-table tbody th {
    padding-left: 0;
    color: var(--nal-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.ak-table tbody td {
    color: var(--nal-ink);
}

.ak-table tbody td:nth-child(odd),
.ak-table thead th:nth-child(odd) {
    background: rgba(244, 242, 238, 0.55);
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .ak-mode-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .ak-mode { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 36px; }
    .ak-mode-icon, .ak-mode h3, .ak-mode-prod, .ak-mode .nal-link { grid-column: 1; }
    .ak-mode-list { grid-column: 2; grid-row: 1 / span 4; margin: 0; }
    .ak-mode .nal-link { margin-top: 22px; align-self: start; }
}

@media (max-width: 991px) {
    .ak-hero { padding-top: 48px; }
    .ak-hero .cp-crumbs ol { margin-bottom: 30px; }
    .ak-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .ak-hero-media { margin: 0; }
    .ak-facts { margin-top: 48px; }
    .ak-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ak-modes, .ak-compare { padding: 88px 0; }
    .ak-mode { display: flex; }
    .ak-mode-list { margin: 22px 0 26px; }
    .ak-mode .nal-link { margin-top: auto; }
}

@media (max-width: 767px) {
    .ak-table-wrap { overflow: visible; }
    .ak-table, .ak-table tbody, .ak-table tr, .ak-table th, .ak-table td { display: block; width: 100%; min-width: 0; }
    .ak-table thead { display: none; }
    .ak-table tbody tr { margin-bottom: 18px; border: 1px solid var(--nal-line); }
    .ak-table tbody th { padding: 14px 16px; background: var(--nal-offwhite); border-top: 0; }
    .ak-table tbody td { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; padding: 12px 16px; background: none !important; border-top: 1px solid var(--nal-line); }
    .ak-table tbody td::before { content: attr(data-label); color: var(--nal-blue); font-size: 13px; font-weight: 700; }
    .ak-table tbody tr:last-child th, .ak-table tbody tr:last-child td { border-bottom: 0; }
}

@media (max-width: 575px) {
    .ak-hero h1 { font-size: 38px; }
    .ak-facts { grid-template-columns: minmax(0, 1fr); }
    .ak-facts > div, .ak-facts > div + div { padding: 16px 0; border-left: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
    .ak-facts > div:last-child { border-bottom: 0; }
    .ak-grid { grid-template-columns: minmax(0, 1fr); }
    .ak-modes, .ak-compare { padding: 72px 0; }
    .ak-mode { padding: 26px 22px; }
}