/* Expertall 011: screenshot-inspired professional construction theme */
:root {
    --navy: #09295e;
    --navy-deep: #08245b;
    --blue: #0066bb;
    --blue-hover: #00539d;
    --text: #12274c;
    --muted: #54647a;
    --line: #d7e3f0;
    --light: #f3f8fd;
    --white: #ffffff;
    --container: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--text); background: #fff; font: 15px/1.55 system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: none; }
button, input { font: inherit; }
.container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
h1, h2, h3 { margin: 0; line-height: 1.18; letter-spacing: -.025em; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: inline-block; width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 80; background: #fff; border-bottom: 1px solid #dce9f7; box-shadow: 0 1px 6px #123e710d; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--navy); flex-shrink: 0; }
.brand img { display: block; width: 51px; height: 51px; object-fit: contain; }
.brand-copy strong { display: block; color: var(--navy-deep); font-size: 19px; line-height: 1.04; font-weight: 800; }
.main-nav { display: flex; align-items: center; justify-content: flex-end; gap: clamp(12px, 1.7vw, 26px); }
.main-nav > a, .services-menu > summary { color: var(--navy-deep); font-size: 14px; font-weight: 720; white-space: nowrap; }
.main-nav > a:not(.header-action):not(.header-phone), .services-menu > summary { padding: 14px 0; }
.main-nav > a:hover, .services-menu > summary:hover, .main-nav > a.is-current { color: var(--blue); }
.main-nav > a.is-current { box-shadow: inset 0 -2px var(--blue); }
.services-menu { position: relative; }
.services-menu > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.services-menu > summary::-webkit-details-marker { display: none; }
.chevron { width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.services-menu[open] .chevron { transform: translateY(2px) rotate(225deg); }
.services-dropdown { position: absolute; left: -25px; top: calc(100% + 12px); width: min(360px, 84vw); padding: 15px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 48px #0c36712b; border-radius: 7px; }
.dropdown-heading { padding: 6px 10px 12px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.services-dropdown a { display: block; padding: 11px 10px; color: var(--navy); font-size: 14px; font-weight: 650; border-radius: 4px; }
.services-dropdown a:hover, .services-dropdown a:focus-visible { color: var(--blue); background: var(--light); }
.header-phone { display: flex; align-items: center; gap: 9px; color: var(--navy-deep) !important; font-weight: 750 !important; white-space: nowrap; }
.header-phone .icon { width: 19px; height: 19px; color: var(--blue); }
.header-phone small { display: block; color: var(--blue); font-size: 11px; line-height: 1.2; font-weight: 500; text-decoration: underline; }
.header-action { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 16px; border-radius: 5px; background: linear-gradient(#0879d5, #0057a8); color: white !important; box-shadow: 0 3px 8px #0757a82e; }
.header-action:hover { background: #004987; }
.header-action .icon { width: 17px; height: 17px; }
.menu-toggle { display: none; }

/* Home hero: photograph from selected mockup, but live accessible text and buttons */
.hero-banner { position: relative; isolation: isolate; background: linear-gradient(98deg, #f0f7ff 0%, #d9edff 53%, #a3d5f5 100%); overflow: hidden; }
.hero-banner::before { content: ''; position: absolute; z-index: -2; inset: 0 0 52px 39%; background: url('/assets/hero-construction.webp') center right / cover no-repeat; }
.hero-banner::after { content: ''; position: absolute; z-index: -1; inset: 0 0 52px 0; background: linear-gradient(90deg, #eaf5ff 0%, rgba(235,246,255,.98) 27%, rgba(235,246,255,.82) 39%, rgba(235,246,255,.12) 61%, transparent 75%); }
.hero-content { min-height: 322px; display: flex; align-items: center; }
.hero-copy { max-width: 655px; padding: 30px 0 25px; }
.hero-copy h1 { max-width: 650px; color: #042d6a; font-size: clamp(29px, 3vw, 39px); font-weight: 850; letter-spacing: -.025em; }
.hero-copy p { margin: 17px 0 0; max-width: 640px; color: #263f65; font-size: 15px; line-height: 1.5; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 20px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 43px; padding: 9px 22px; border-radius: 5px; font-size: 14px; font-weight: 720; transition: background .2s, transform .2s; }
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: linear-gradient(#0878d3, #0056a5); border: 1px solid #0058a5; box-shadow: 0 4px 12px #1e61a639; }
.button-primary:hover { color: #fff; background: #004e99; }
.button-outline { color: #075aa9; border: 1px solid #1165b4; background: #edf7ffca; }
.button-outline:hover { background: white; }
.hero-features { background: linear-gradient(90deg, rgba(12,86,144,.84), rgba(8,80,140,.67), rgba(9,78,134,.44)); backdrop-filter: blur(4px); }
.hero-features-grid { min-height: 60px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); align-items: center; max-width: 1160px; margin-left: max(24px, calc((100vw - var(--container))/2)); }
.hero-features-grid > div { display: flex; align-items: center; gap: 13px; min-height: 37px; padding: 0 22px; color: white; border-right: 1px solid #ffffff8e; }
.hero-features-grid > div:first-child { padding-left: 0; }
.hero-features-grid > div:last-child { border-right: 0; }
.hero-features-grid .icon { width: 29px; height: 29px; stroke-width: 1.9; }
.hero-features-grid strong { font-size: 12px; line-height: 1.25; font-weight: 750; }

/* Services: 2 rows × 3 cards with real images */
.services-section { padding-top: 22px; padding-bottom: 20px; }
.section-heading { margin-bottom: 16px; }
.section-heading h2 { color: var(--navy-deep); font-size: clamp(25px, 2.4vw, 34px); font-weight: 850; }
.services-heading { display: flex; align-items: center; gap: 25px; }
.services-heading h2 { white-space: nowrap; }
.services-heading p { margin: 0; padding-left: 22px; color: #304563; border-left: 2px solid #0a75d1; line-height: 1.5; font-size: 13px; }
.services-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; }
.service-card { min-width: 0; min-height: 128px; display: grid; grid-template-columns: 35% minmax(0,1fr); align-items: stretch; overflow: hidden; color: var(--navy-deep); background: #fff; border: 1px solid #dce7f1; border-radius: 7px; box-shadow: 0 2px 5px #1d4d7f10; transition: box-shadow .2s, transform .2s, border-color .2s; }
.service-card:hover, .service-card:focus-visible { transform: translateY(-3px); border-color: #9fc6e7; box-shadow: 0 10px 25px #0b477a20; }
.service-photo { display: block; width: 100%; height: 100%; min-height: 128px; object-fit: cover; transition: transform .35s; }
.service-card:hover .service-photo { transform: scale(1.055); }
.service-card-content { display: flex; flex-direction: column; position: relative; min-width: 0; padding: 15px 14px 13px 15px; }
.service-title-line { display: flex; align-items: flex-start; gap: 11px; }
.service-title-line .icon { width: 27px; height: 27px; color: #0071cf; stroke-width: 1.65; }
.service-card h3 { color: var(--navy-deep); font-size: clamp(13px, 1vw, 16px); font-weight: 800; line-height: 1.25; }
.service-card p { margin: 8px 12px 8px 38px; color: #3e516a; font-size: 12px; line-height: 1.4; }
.service-arrow { position: absolute; right: 14px; bottom: 7px; color: #0072d3; font-size: 23px; font-weight: 400; }

/* Trust strip */
.advantages { background: linear-gradient(90deg, #e2f1fc, #f4f8fc 48%, #e1effa); border-top: 1px solid #d6e8f6; border-bottom: 1px solid #d6e8f6; }
.advantages-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); min-height: 70px; align-items: center; }
.advantages-grid > div { display: flex; align-items: center; gap: 13px; padding: 7px 22px; border-right: 1px solid #b6d0e6; }
.advantages-grid > div:first-child { padding-left: 0; }
.advantages-grid > div:last-child { border-right: 0; }
.advantages-grid .icon { width: 36px; height: 36px; stroke-width: 1.65; color: #0069bf; }
.advantages-grid strong { display: block; color: var(--navy-deep); font-size: 14px; line-height: 1.2; }
.advantages-grid small { display: block; margin-top: 3px; color: #42536b; font-size: 11px; line-height: 1.35; }

/* News */
.news-section { padding-top: 18px; padding-bottom: 22px; }
.heading-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.section-link { color: var(--blue); white-space: nowrap; font-size: 13px; font-weight: 720; }
.section-link span { margin-left: 7px; font-size: 18px; }
.stories-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.story-card { min-height: 116px; display: flex; gap: 13px; padding: 8px; border: 1px solid #dfe9f1; border-radius: 7px; background: #fff; box-shadow: 0 1px 5px #123a7010; transition: border-color .2s, box-shadow .2s; }
.story-card:hover { border-color: #afd0ec; box-shadow: 0 6px 20px #0c47811c; }
.story-photo-link { width: 30%; min-width: 90px; flex: none; overflow: hidden; border-radius: 5px; }
.story-photo-link img { display: block; width: 100%; height: 100%; min-height: 98px; object-fit: cover; }
.story-photo-link.is-neutral { background: #f2f7fb; }
.story-photo-link.is-neutral img { opacity: .45; filter: saturate(.55); }
.story-copy { display: flex; flex-direction: column; min-width: 0; padding: 3px 0 2px; }
.story-meta { align-self: start; padding: 2px 9px; color: #0572b7; background: #e6f5ff; border-radius: 12px; font-size: 10px; font-weight: 700; }
.story-card h3 { margin-top: 5px; color: var(--navy-deep); font-size: 13px; font-weight: 790; line-height: 1.2; }
.story-card h3 a { color: inherit; }
.story-card p { margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #4d5d72; font-size: 11px; line-height: 1.25; }
.read-more { margin-top: auto; align-self: flex-end; color: var(--blue); font-size: 11px; }

/* Article pages */
.content-section { padding-top: 46px; padding-bottom: 58px; }
.inner-page { min-height: 62vh; }
.inner-page h1 { max-width: 1020px; margin: 19px 0 12px; color: var(--navy-deep); font-size: clamp(29px, 3.1vw, 43px); }
.breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; color: var(--muted); font-size: 13px; }
.breadcrumbs a { color: var(--blue); }
.article-meta { margin: 14px 0 8px; color: var(--muted); font-size: 12px; }
.article-body { max-width: 100%; padding-top: 16px; overflow-wrap: anywhere; line-height: 1.8; }
.article-body img { max-width: 100%; height: auto; }
.article-body table { max-width: 100%; display: block; overflow-x: auto; border-collapse: collapse; }
.article-body td, .article-body th { border: 1px solid var(--line); padding: 10px; }
.article-body a { overflow-wrap: anywhere; }
.article-body p { margin: 0 0 18px; }
.article-body h2, .article-body h3 { margin: 32px 0 15px; }
.about-section { background: #f6f9fc; border-top: 1px solid var(--line); }
.homepage-content { padding: 23px 30px; border: 1px solid var(--line); background: #fff; }
.pages { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 30px; }
.pages a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border: 1px solid var(--line); padding: 0 12px; }
.pages .current { color: #fff; background: var(--blue); border-color: var(--blue); }

/* Footer */
.site-footer { color: var(--navy-deep); background: #eaf2f9; border-top: 1px solid #d9e8f4; }
.footer-inner { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding-block: 12px; }
.footer-identity { display: flex; align-items: center; gap: 9px; color: var(--navy-deep); flex-shrink: 0; }
.footer-identity img { display: block; object-fit: contain; }
.footer-identity strong { font-size: 13px; line-height: 1.07; font-weight: 800; }
.footer-inner p { margin: 0; padding-left: 22px; color: #435670; border-left: 1px solid #abc8dd; font-size: 12px; line-height: 1.4; }
.footer-contact { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.footer-contact .icon { width: 18px; height: 18px; color: var(--blue); }
.footer-contact a { color: var(--navy-deep); font-size: 12px; }
.footer-bottom { padding: 7px 0 10px; border-top: 1px solid #d9e8f4; font-size: 11px; color: #78899b; }

/* Responsive */
@media (max-width: 1350px) {
    .header-inner { gap: 12px; }
    .main-nav { gap: 13px; }
    .main-nav > a, .services-menu > summary { font-size: 13px; }
    .header-phone { font-size: 12px !important; }
    .header-action { padding-inline: 12px; }
    .service-card { grid-template-columns: 33% 1fr; }
    .service-card-content { padding: 12px 10px; }
    .service-title-line { gap: 7px; }
    .service-card p { margin-left: 34px; }
}
@media (max-width: 1080px) {
    .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--line); border-radius: 5px; background: white; cursor: pointer; }
    .menu-toggle span { display: block; height: 2px; width: 100%; background: var(--navy); }
    .main-nav { display: none; position: absolute; top: 76px; left: 0; right: 0; z-index: 85; padding: 15px 24px 24px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 15px 35px #052f632a; flex-direction: column; align-items: stretch; gap: 0; }
    .main-nav.is-open { display: flex; }
    .main-nav > a:not(.header-action), .services-menu > summary { display: flex; padding: 11px 4px; font-size: 15px; box-shadow: none; border-bottom: 1px solid #edf1f6; }
    .services-menu { position: static; }
    .services-dropdown { position: static; width: 100%; margin: 5px 0 10px; box-shadow: none; padding: 6px; background: #f7fafd; }
    .dropdown-heading { display: none; }
    .header-phone { justify-content: flex-start; }
    .header-action { margin-top: 12px; }
    .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .advantages-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .advantages-grid > div:nth-child(2) { border-right: 0; }
    .advantages-grid > div { min-height: 62px; }
    .stories-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .footer-inner { flex-wrap: wrap; }
}
@media (max-width: 740px) {
    .container { width: min(var(--container), calc(100% - 30px)); }
    .hero-banner::before { left: 16%; background-position: center right; opacity: .4; }
    .hero-banner::after { background: linear-gradient(90deg, #ebf6ffed, #ebf6ffb8); }
    .hero-content { min-height: 390px; }
    .hero-copy { padding-block: 30px; }
    .hero-copy h1 { font-size: clamp(28px, 6vw, 38px); }
    .hero-copy p { font-size: 14px; }
    .hero-features-grid { margin: 0 auto; grid-template-columns: repeat(2,minmax(0,1fr)); padding-block: 10px; }
    .hero-features-grid > div { padding: 7px 10px; border: 0; }
    .hero-features-grid > div:first-child { padding-left: 10px; }
    .services-heading { flex-direction: column; align-items: flex-start; gap: 9px; }
    .services-heading p { padding-left: 0; border-left: 0; }
    .services-grid, .stories-grid { grid-template-columns: 1fr; }
    .service-card { grid-template-columns: 36% 1fr; }
    .service-card p { margin-left: 0; }
    .service-title-line .icon { display: none; }
    .advantages-grid { grid-template-columns: 1fr; }
    .advantages-grid > div { padding: 10px 0; border-right: 0; border-bottom: 1px solid #c8ddeb; }
    .advantages-grid > div:last-child { border-bottom: 0; }
    .footer-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
    .footer-inner p { border: 0; padding: 0; }
}
@media (max-width: 440px) {
    .hero-content { min-height: 415px; }
    .hero-actions { align-items: stretch; flex-direction: column; }
    .button { text-align: center; }
    .service-card { grid-template-columns: 35% 1fr; min-height: 156px; }
    .service-photo { min-height: 156px; }
    .service-card h3 { font-size: 14px; }
    .service-card p { font-size: 11px; }
    .service-card-content { padding: 12px 10px 20px; }
    .service-arrow { bottom: 0; right: 9px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

/* Project gallery, including fullscreen control alignment from update 009 */
.projects-introduction { max-width: 790px; margin: 20px 0 30px; color: var(--muted); font-size: 16px; }
.projects-introduction p { margin: 0 0 9px; }
.projects-count { font-size: 13px; font-weight: 700; color: var(--navy); }
.project-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 23px; }
.project-card { overflow: hidden; margin: 0; border: 1px solid var(--line); background: #fff; border-radius: 6px; box-shadow: 0 8px 24px rgba(16, 43, 69, .06); }
.project-photo { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border: 0; padding: 0; cursor: zoom-in; background: #e9eff5; }
.project-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.project-photo:hover img, .project-photo:focus-visible img { transform: scale(1.10); }
.project-photo:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.project-photo-zoom { position: absolute; right: 12px; bottom: 12px; padding: 7px 11px; border-radius: 4px; background: rgba(10, 39, 67, .9); color: white; font-size: 12px; font-weight: 650; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.project-photo:hover .project-photo-zoom, .project-photo:focus-visible .project-photo-zoom { opacity: 1; transform: none; }
.project-card figcaption { padding: 17px 18px 20px; line-height: 1.45; font-size: 15px; font-weight: 650; color: var(--navy); }
/* Full-screen gallery: controls remain centered at every viewport size. */
.project-lightbox[hidden] { display: none !important; }
.project-lightbox {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.project-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 18, 31, .94);
}
.project-lightbox-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 1300px);
    height: 100%;
    min-height: 0;
}
.project-lightbox-image {
    display: block;
    max-width: calc(100% - 112px);
    max-height: calc(100% - 70px);
    object-fit: contain;
    box-shadow: 0 12px 45px #0004;
}
.project-lightbox-caption {
    position: absolute;
    bottom: 0;
    left: 60px;
    right: 60px;
    color: #fff;
    text-align: center;
    font-size: 14px;
}
.project-lightbox-close,
.project-lightbox-prev,
.project-lightbox-next {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid #ffffff66;
    border-radius: 50%;
    background: #17334db8;
    color: #fff;
    cursor: pointer;
    font-family: Arial, sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
}
.project-lightbox-close {
    top: 0;
    right: 0;
    font-size: 29px;
}
.project-lightbox-prev {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.project-lightbox-next {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
.project-lightbox-close:hover,
.project-lightbox-prev:hover,
.project-lightbox-next:hover {
    background: #285879;
}
.project-lightbox-close:focus-visible,
.project-lightbox-prev:focus-visible,
.project-lightbox-next:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 3px;
}
@media (max-width: 920px) {
    .project-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .project-gallery { grid-template-columns: 1fr; gap: 16px; }
    .project-lightbox { padding: 14px; }
    .project-lightbox-image {
        max-width: calc(100% - 86px);
        max-height: calc(100% - 76px);
    }
    .project-lightbox-close,
    .project-lightbox-prev,
    .project-lightbox-next {
        width: 38px;
        height: 38px;
        font-size: 27px;
    }
    .project-lightbox-close { top: 0; right: 0; font-size: 25px; }
    .project-lightbox-prev { top: 50%; left: 0; transform: translateY(-50%); }
    .project-lightbox-next { top: 50%; right: 0; transform: translateY(-50%); }
    .project-lightbox-caption { bottom: 0; left: 42px; right: 42px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .project-photo img, .project-photo-zoom { transition: none; } }

/* Brief company intro keeps the homepage focused on services. Full text remains available as an article. */
.about-section .content-section { padding-top: 28px; padding-bottom: 34px; }
.about-section .section-heading { margin-bottom: 12px; }
.about-summary { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }
.about-summary p { max-width: 780px; margin: 0; flex: 1 1 520px; color: #3f526b; font-size: 14px; }
.about-summary .section-link { flex: none; }

/* Update 013: Projects and Contacts — consistent editorial layout */
.projects-hero { display:flex; justify-content:space-between; align-items:center; gap:35px; margin:20px 0 27px; padding:35px 42px; background:linear-gradient(105deg,#e7f4fe,#f8fbff 60%,#deeffc); border:1px solid #d7e8f5; border-radius:9px; }
.projects-hero h1,.contacts-hero h1 { margin:9px 0 14px; color:var(--navy-deep); font-size:clamp(30px,3vw,42px); }
.projects-eyebrow,.contacts-eyebrow { color:#0872bc; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
.projects-hero p { max-width:750px; color:#425b74; margin:0; }
.projects-hero-link { display:inline-flex; gap:15px; align-items:center; margin-top:18px; font-weight:750; }
.projects-hero-counter { min-width:170px; padding-left:25px; border-left:2px solid #acd5f2; }
.projects-hero-counter strong { display:block; color:var(--blue); font-size:56px; line-height:1; }
.projects-hero-counter span { display:block; margin-top:7px; color:#4c657b; font-size:12px; }
.projects-toolbar { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:17px; }
.projects-toolbar strong { display:block; color:var(--navy-deep); font-size:22px; }
.projects-toolbar div > span { display:block; color:var(--muted); font-size:13px; margin-top:4px; }
.projects-toolbar-count { flex:none; background:#e7f4ff; color:var(--blue); padding:5px 13px; border-radius:18px; font-size:12px; font-weight:750; }
.project-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; }
.project-card { display:flex; flex-direction:column; border-radius:8px; border-color:#dfe9f1; box-shadow:0 2px 7px #123a7010; transition:border-color .2s,box-shadow .2s; }
.project-card:hover { border-color:#a7cdec; box-shadow:0 8px 22px #0c47811c; }
.project-photo { aspect-ratio:16/10; }
.project-card figcaption { flex:1; display:flex; flex-direction:column; gap:6px; padding:14px 17px 18px; font-size:14px; }
.project-card-label { color:#0576ba; text-transform:uppercase; font-weight:800; font-size:10px; letter-spacing:.07em; }
.project-card-title { line-height:1.35; }

.contacts-hero { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(270px,.9fr); overflow:hidden; min-height:285px; margin-top:20px; border:1px solid #d7e8f5; border-radius:9px; background:linear-gradient(110deg,#e8f4ff,#f9fcff); }
.contacts-hero-copy { padding:clamp(26px,3vw,46px); }
.contacts-hero-copy p { max-width:690px; color:#3c5874; font-size:16px; line-height:1.65; }
.contacts-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.contacts-hero-photo { min-height:285px; background:url('/assets/hero-construction.webp') center/cover no-repeat; }
.contacts-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:17px; margin-top:23px; }
.contact-info-card { min-width:0; display:flex; flex-direction:column; align-items:flex-start; padding:26px 24px; background:#fff; border:1px solid #dce8f2; border-radius:8px; box-shadow:0 2px 7px #123a7010; }
.contact-card-kicker { color:#0874ba; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.contact-info-card h2 { margin-top:11px; font-size:22px; color:var(--navy-deep); }
.contact-primary-link { display:inline-block; margin-top:14px; font-size:clamp(17px,1.5vw,22px); font-weight:800; overflow-wrap:anywhere; }
.contact-info-card p { color:#51657a; margin:14px 0 20px; font-size:13px; }
.contact-address-card address { margin-top:14px; color:var(--navy); font-style:normal; font-size:16px; line-height:1.55; font-weight:650; }
.contact-card-action { margin-top:auto; font-weight:750; font-size:14px; }
.contact-card-action span { padding-left:7px; }
.contacts-bottom { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:36px; margin-top:26px; padding:32px; border:1px solid #dfebf4; border-radius:8px; background:#f3f8fd; }
.contacts-bottom h2 { margin-top:10px; max-width:490px; color:var(--navy-deep); font-size:clamp(24px,2.5vw,32px); }
.contacts-bottom p { max-width:490px; color:#51667a; }
.contacts-service-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 14px; }
.contacts-service-list a { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:13px 14px; background:#fff; border:1px solid #dce8f2; border-radius:6px; color:var(--navy); font-size:13px; font-weight:750; }
.contacts-service-list a:hover { border-color:#a9cbed; color:var(--blue); }
.contacts-service-list a span { color:var(--blue); font-size:18px; }
@media(max-width:900px) { .contacts-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .contact-address-card { grid-column:1/-1; } .contacts-bottom { grid-template-columns:1fr; } }
@media(max-width:700px) { .project-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } .contacts-hero { grid-template-columns:1fr; } .contacts-hero-photo { min-height:190px; } .contacts-grid { grid-template-columns:1fr; } .contact-address-card { grid-column:auto; } }
@media(max-width:520px) { .projects-hero { display:block; padding:24px 20px; } .projects-hero-counter { display:flex; align-items:center; gap:15px; border-left:0; border-top:2px solid #b5d6ef; padding:15px 0 0; margin-top:18px; } .projects-hero-counter strong { font-size:40px; } .project-gallery { grid-template-columns:1fr; } .contacts-hero-copy { padding:24px 20px; } .contacts-bottom { padding:24px 18px; } .contacts-service-list { grid-template-columns:1fr; } }
