:root {
            --navy: #071527;
            --ink: #102033;
            --steel: #66758a;
            --line: #dce5ee;
            --mist: #f5f8fb;
            --gold: #c79a46;
            --sand: #f2e8d5;
            --white: #ffffff;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            background: #f8fafc;
            color: var(--ink);
            font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            letter-spacing: 0;
        }

        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        .container { width: min(1220px, calc(100% - 32px)); margin: 0 auto; }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 30;
            border-bottom: 1px solid rgba(220, 229, 238, 0.9);
            background: rgba(255, 255, 255, 0.96);
            backdrop-filter: blur(16px);
        }

        .topbar {
            border-bottom: 1px solid rgba(220, 229, 238, 0.82);
            background: var(--navy);
            color: var(--white);
        }

        .topbar-inner {
            display: flex;
            min-height: 38px;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            font-size: 12px;
        }

        .topbar strong { color: var(--gold); }
        .topbar nav {
            display: flex;
            flex-wrap: wrap;
            gap: 18px;
            color: rgba(255, 255, 255, 0.68);
        }

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

        .nav {
            display: flex;
            min-height: 88px;
            align-items: center;
            justify-content: space-between;
            gap: 24px;
        }

        .brand {
            display: flex;
            min-width: 330px;
            align-items: center;
            gap: 14px;
            color: var(--navy);
            font-weight: 900;
        }

        .brand-mark {
            display: grid;
            width: 220px;
            height: 78px;
            place-items: center;
            border-radius: 8px;
            background: var(--white);
            padding: 8px 10px;
            box-shadow: 0 12px 34px rgba(15, 23, 42, 0.1);
        }

        .brand-mark img {
            width: 100%;
            max-height: 64px;
            object-fit: contain;
            filter: contrast(1.18) saturate(1.08);
        }

        .brand small {
            display: block;
            margin-top: 2px;
            color: var(--steel);
            font-size: 11px;
            font-weight: 850;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        .nav-links {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            color: var(--navy);
            font-size: 14px;
            font-weight: 760;
        }

        .nav-item { position: static; }

        .nav-button,
        .nav-link {
            display: inline-flex;
            min-height: 44px;
            align-items: center;
            border: 0;
            border-radius: 6px;
            background: transparent;
            padding: 0 12px;
            color: inherit;
            cursor: pointer;
            font: inherit;
        }

        .nav-button::after {
            margin-left: 7px;
            color: var(--steel);
            content: "⌄";
            font-size: 12px;
        }

        .nav-button:hover,
        .nav-link:hover {
            background: var(--mist);
            color: #8b6421;
        }

        .mega {
            position: absolute;
            top: 126px;
            left: 0;
            display: none;
            width: 100%;
            border-top: 1px solid rgba(220, 229, 238, 0.9);
            background: rgba(255, 255, 255, 0.985);
            box-shadow: 0 28px 80px rgba(7, 21, 39, 0.14);
        }

        .nav-item:hover .mega,
        .nav-item:focus-within .mega {
            display: block;
        }

        .mega-panel {
            display: grid;
            gap: 22px;
            grid-template-columns: 0.78fr 1.2fr 0.76fr;
            padding: 28px 0;
        }

        .mega-intro,
        .mega-route {
            border-radius: 8px;
            padding: 22px;
        }

        .mega-intro {
            border: 1px solid var(--line);
            background: var(--mist);
        }

        .mega-route {
            background:
                linear-gradient(135deg, rgba(7, 21, 39, 0.98), rgba(7, 21, 39, 0.86)),
                url("assets/project-cyprus-coast.jpeg") center / cover no-repeat;
            color: var(--white);
        }

        .mega-intro b,
        .mega-route b {
            color: var(--gold);
            font-size: 12px;
            font-weight: 900;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        .mega-intro h3,
        .mega-route h3 {
            margin-top: 10px;
            font-size: 24px;
            line-height: 1.16;
        }

        .mega-intro h3 { color: var(--navy); }
        .mega-route h3 { color: var(--white); }

        .mega-intro p,
        .mega-card p,
        .mega-route p {
            margin-top: 10px;
            color: var(--steel);
            font-size: 14px;
            line-height: 1.6;
        }

        .mega-route p { color: rgba(255, 255, 255, 0.7); }

        .mega-grid {
            display: grid;
            gap: 12px;
            grid-template-columns: repeat(2, 1fr);
        }

        .mega-card {
            border: 1px solid var(--line);
            border-radius: 8px;
            background: var(--white);
            padding: 17px;
            transition: 180ms ease;
        }

        .mega-card:hover {
            transform: translateY(-2px);
            border-color: rgba(199, 154, 70, 0.48);
            box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
        }

        .mega-card strong {
            display: block;
            color: var(--navy);
            font-size: 15px;
        }

        .actions, .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .button {
            display: inline-flex;
            min-height: 44px;
            align-items: center;
            justify-content: center;
            border-radius: 6px;
            border: 1px solid transparent;
            padding: 12px 18px;
            font-size: 14px;
            font-weight: 850;
            transition: 180ms ease;
        }

        .button.primary { background: var(--gold); color: var(--navy); }
        .button.dark { background: var(--navy); color: var(--white); }
        .button.outline { border-color: var(--line); background: var(--white); color: var(--navy); }
        .button:hover { transform: translateY(-1px); box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12); }

        .hero {
            position: relative;
            overflow: hidden;
            background: linear-gradient(180deg, #ffffff 0%, #f4f0e8 100%);
        }

        .hero::before { position:absolute; inset:0; content:""; background:linear-gradient(120deg,#fff 5%,#f2e8d5 100%); }

        .hero-inner {
            position: relative;
            display: grid;
            min-height: 690px;
            align-items: center;
            gap: 44px;
            padding: 80px 0;
            grid-template-columns: 0.9fr 0.68fr;
        }

        h1, h2, h3, p { margin: 0; }
        .eyebrow {
            color: var(--gold);
            font-size: 12px;
            font-weight: 950;
            letter-spacing: 0.18em;
            text-transform: uppercase;
        }

        h1 {
            max-width: 780px;
            margin-top: 18px;
            color: var(--navy);
            font-size: clamp(42px, 6.6vw, 70px);
            line-height: 1.02;
            font-weight: 900;
        }

        .lead {
            max-width: 700px;
            margin-top: 24px;
            color: var(--steel);
            font-size: 19px;
            line-height: 1.72;
        }

        .hero-actions { margin-top: 34px; }

        .hero-panel {
            border: 1px solid rgba(220, 229, 238, 0.88);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.9);
            padding: 26px;
            box-shadow: 0 24px 80px rgba(7, 21, 39, 0.14);
            backdrop-filter: blur(18px);
        }

        .hero-panel h2 {
            color: var(--navy);
            font-size: 27px;
            line-height: 1.15;
        }

        .hero-stats {
            display: grid;
            gap: 12px;
            margin-top: 22px;
            grid-template-columns: repeat(2, 1fr);
        }

        .hero-stats div {
            border: 1px solid var(--line);
            border-radius: 8px;
            background: var(--mist);
            padding: 16px;
        }

        .hero-stats strong {
            display: block;
            color: var(--navy);
            font-size: 24px;
        }

        .hero-stats span {
            display: block;
            margin-top: 4px;
            color: var(--steel);
            font-size: 13px;
            line-height: 1.4;
        }

        section { padding: 86px 0; }
        .section-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 32px;
            margin-bottom: 34px;
        }

        .section-head h2 {
            max-width: 820px;
            margin-top: 10px;
            color: var(--navy);
            font-size: clamp(30px, 4vw, 46px);
            line-height: 1.08;
        }

        .section-head p {
            max-width: 560px;
            color: var(--steel);
            line-height: 1.7;
        }

        .project-grid {
            display: grid;
            gap: 18px;
            grid-template-columns: repeat(3, 1fr);
        }

        .project-card {
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: var(--white);
            box-shadow: 0 14px 44px rgba(15, 23, 42, 0.07);
        }

        .project-card img {
            width: 100%;
            aspect-ratio: 16 / 10;
            object-fit: cover;
        }

        .project-body { padding: 22px; }
        .project-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 14px;
        }

        .project-meta span {
            border-radius: 6px;
            background: #f7efe0;
            padding: 7px 9px;
            color: #8b6421;
            font-size: 12px;
            font-weight: 850;
        }

        .project-card h3 {
            color: var(--navy);
            font-size: 23px;
            line-height: 1.14;
        }

        .project-card p {
            margin-top: 12px;
            color: var(--steel);
            font-size: 15px;
            line-height: 1.65;
        }

        .services {
            background: var(--mist);
        }

        .service-grid, .process-grid {
            display: grid;
            gap: 16px;
            grid-template-columns: repeat(4, 1fr);
        }

        .card {
            border: 1px solid var(--line);
            border-radius: 8px;
            background: var(--white);
            padding: 24px;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
        }

        .card b {
            color: var(--gold);
            font-size: 13px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .card h3 {
            margin-top: 12px;
            color: var(--navy);
            font-size: 20px;
        }

        .card p {
            margin-top: 10px;
            color: var(--steel);
            font-size: 14px;
            line-height: 1.6;
        }

        .band {
            background:
                linear-gradient(90deg, rgba(7, 21, 39, 0.96), rgba(7, 21, 39, 0.82)),
                url("assets/project-cyprus-coast.jpeg") center / cover no-repeat;
            color: var(--white);
        }

        .band-grid {
            display: grid;
            align-items: center;
            gap: 44px;
            grid-template-columns: 0.88fr 1.12fr;
        }

        .band h2 {
            margin-top: 12px;
            color: var(--white);
            font-size: clamp(34px, 4.4vw, 54px);
            line-height: 1.08;
        }

        .band p { margin-top: 16px; color: rgba(255, 255, 255, 0.7); line-height: 1.75; }
        .process-grid .card { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.14); }
        .process-grid .card h3 { color: var(--white); }
        .process-grid .card p { color: rgba(255,255,255,0.66); }

        .cta {
            background: linear-gradient(135deg, #ffffff 0%, #f4efe5 100%);
        }

        .cta-box {
            display: grid;
            align-items: start;
            gap: 36px;
            grid-template-columns: 0.85fr 1.15fr;
        }

        form {
            display: grid;
            gap: 14px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: var(--white);
            padding: 26px;
            box-shadow: 0 20px 60px rgba(15, 23, 42, 0.09);
        }

        .field-grid {
            display: grid;
            gap: 14px;
            grid-template-columns: repeat(2, 1fr);
        }

        input, select, textarea {
            width: 100%;
            border: 1px solid var(--line);
            border-radius: 6px;
            padding: 13px 14px;
            color: var(--ink);
            font: inherit;
        }

        textarea { min-height: 118px; resize: vertical; }

        .site-footer {
            background: var(--navy);
            color: var(--white);
            padding: 64px 0 28px;
        }

        .footer-grid {
            display: grid;
            gap: 34px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            padding-bottom: 42px;
            grid-template-columns: 1.3fr 0.78fr 0.78fr 0.9fr 0.72fr;
        }

        .footer-brand { display: flex; align-items: center; gap: 14px; }
        .footer-brand-logo {
            display: grid;
            width: 170px;
            height: 78px;
            place-items: center;
            border-radius: 8px;
            background: var(--white);
            padding: 8px 10px;
        }

        .footer-brand-logo img {
            width: 100%;
            max-height: 60px;
            object-fit: contain;
        }

        .footer-title { color: var(--white); font-size: 18px; font-weight: 850; }
        .footer-kicker, .footer-col h3 {
            color: var(--gold);
            font-size: 12px;
            font-weight: 900;
            letter-spacing: 0.16em;
            text-transform: uppercase;
        }

        .footer-col p { margin-top: 20px; color: rgba(255,255,255,0.62); line-height: 1.65; }
        .footer-col ul {
            display: grid;
            gap: 11px;
            margin: 16px 0 0;
            padding: 0;
            color: rgba(255,255,255,0.62);
            font-size: 14px;
            list-style: none;
        }

        .footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
        .footer-social span {
            border: 1px solid rgba(255,255,255,0.12);
            border-radius: 6px;
            padding: 8px 10px;
            color: rgba(255,255,255,0.66);
            font-size: 12px;
            font-weight: 800;
        }

        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding-top: 22px;
            color: rgba(255,255,255,0.45);
            font-size: 12px;
        }

        .footer-bottom nav { display: flex; flex-wrap: wrap; gap: 18px; }

        @media (max-width: 980px) {
            .topbar, .nav-links, .actions { display: none; }
            .hero-inner, .band-grid, .cta-box, .footer-grid { grid-template-columns: 1fr; }
            .project-grid, .service-grid, .process-grid { grid-template-columns: 1fr; }
            .section-head { display: block; }
            .section-head p { margin-top: 16px; }
        }

        @media (max-width: 640px) {
            .hero-inner { min-height: auto; padding: 58px 0; }
            .field-grid, .hero-stats { grid-template-columns: 1fr; }
            .footer-bottom { align-items: flex-start; flex-direction: column; }
        }
    section[id] { scroll-margin-top:145px; }
.brand { min-width:0; }
.brand-mark { width:180px; height:70px; }
.brand > span:last-child { display:none; }
.hero-panel h2 { margin-top:16px; }
.hero-panel > p:last-child { margin-top:18px; line-height:1.7; color:var(--steel); }
.project-cover { min-height:180px; padding:28px; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(135deg,#102033,#304b5d); color:white; }
.project-cover .place { font-size:30px; font-weight:800; letter-spacing:.04em; }
.project-cover small { color:#eee1c7; letter-spacing:.15em; text-transform:uppercase; }
.project-cover.completed { background:linear-gradient(135deg,#334b41,#667d65); }
.status-note { margin-top:24px; padding:20px; border-left:3px solid var(--gold); background:var(--sand); line-height:1.7; }
.footer-grid { grid-template-columns:2fr 1fr 1fr; }
.contact-links { display:grid; gap:14px; align-content:center; overflow-wrap:anywhere; }
.contact-links p { line-height:1.8; color:var(--steel); }
a:focus-visible { outline:3px solid #9d742d; outline-offset:5px; }
.skip { position:absolute; top:-80px; left:16px; background:white; padding:12px; z-index:100; }
.skip:focus { top:8px; }
@media(max-width:980px) { .nav { flex-wrap:wrap; gap:8px; padding:12px 0; } .nav-links { display:flex; flex-wrap:wrap; justify-content:flex-start; } .footer-grid { grid-template-columns:1fr; } section[id] { scroll-margin-top:180px; } }
@media(max-width:640px) { .brand-mark { width:150px; height:55px; } .nav-links { width:100%; gap:0; } .nav-link { padding:0 8px; font-size:12px; } .hero-actions { display:flex; flex-wrap:wrap; gap:10px; } h1 { font-size:44px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } }