/* ==========================================================
   公开页面工程视觉层
   将主页的枪灰玻璃、结构线和 Logo 蓝延伸到所有公开内页。
   本文件最后加载，用于统一旧页面与第三方组件的表面材质。
   ========================================================== */

:root {
    --public-canvas: #0a0f12;
    --public-canvas-rgb: 10, 15, 18;
    --public-frame: #11181c;
    --public-frame-rgb: 17, 24, 28;
    --public-raised: #1d2a30;
    --public-raised-rgb: 29, 42, 48;
    --public-panel-solid: #172126;
    --public-panel-rgb: 23, 33, 38;
    --public-glass: rgba(23, 33, 38, 0.76);
    --public-glass-strong: rgba(10, 15, 18, 0.86);
    --public-glass-soft: rgba(29, 42, 48, 0.72);
    --public-panel: rgba(23, 33, 38, 0.82);
    --public-panel-hover: rgba(29, 42, 48, 0.94);
    --public-line: rgba(183, 199, 205, 0.18);
    --public-line-strong: rgba(183, 199, 205, 0.38);
    --public-line-rgb: 183, 199, 205;
    --public-ink: #f2f5f6;
    --public-muted: #c5d0d4;
    --public-dim: #9dadb4;
    --public-silver-top: #d9e2e5;
    --public-silver-bottom: #bbc8cd;
    --public-silver-ink: #11181c;
    --public-bg-saturation: 0.58;
    --public-bg-brightness: 0.82;
    --public-body-size: 1.03125rem;
    --public-body-mobile: .96875rem;
}

/* Public-only compatibility bridge. Legacy components that still request a
   "light" surface resolve to graphite here; the admin document never loads
   this stylesheet. */
body:has(.public-layout) {
    --ks-background: var(--public-canvas);
    --ks-surface: var(--public-panel-solid);
    --ks-background-gray: var(--public-raised);
    --ks-text-primary: var(--public-ink);
    --ks-text-secondary: var(--public-muted);
    --ks-text-disabled: var(--public-dim);
    --ks-border: var(--public-line);
    --ks-border-light: rgba(var(--public-line-rgb), 0.12);
    --ks-glass-dark: var(--public-glass);
    --ks-glass-dark-strong: var(--public-glass-strong);
    --ks-glass-light: rgba(var(--public-raised-rgb), 0.78);
    --ks-glass-light-strong: rgba(var(--public-raised-rgb), 0.92);
    --ks-glass-border-dark: var(--public-line);
    --ks-glass-border-light: rgba(var(--public-line-rgb), 0.24);
    --ks-glass-ink-dark: var(--public-ink);
    --ks-glass-muted-dark: var(--public-muted);
    --ks-glass-ink-light: var(--public-ink);
    --ks-glass-muted-light: var(--public-muted);
    color: var(--public-ink);
    background: var(--public-canvas);
    color-scheme: dark;
}

/* Header material is centralized in Header.razor.css. */

/* ---------- 公开页统一文字层级 ---------- */
.services-page,
.projects-page,
.news-page,
.about-intro,
.about-why-us,
.about-services,
.contact-page,
.service-detail-page,
.project-detail-page,
.news-detail-page {
    font-size: var(--public-body-size);
    line-height: 1.72;
}

.services-page p,
.projects-page p,
.news-page p,
.about-intro p,
.about-why-us p,
.about-services p,
.contact-page p,
.service-detail-page p,
.project-detail-page p,
.news-detail-page p {
    line-height: 1.72;
}

.section-title,
.about-section-title,
.contact-section-title { font-size: clamp(1.75rem, 2.5vw, 2.25rem) !important; line-height: 1.25 !important; letter-spacing: -.015em; }

.card-title,
.item-title,
.project-title,
.news-title { font-size: clamp(1.125rem, 1.5vw, 1.25rem) !important; line-height: 1.35 !important; }

.mud-typography-caption,
.caption,
.meta-label,
.info-label { font-size: max(.84375rem, 13.5px) !important; }

@media (max-width: 959.95px) {
    .services-page, .projects-page, .news-page, .about-intro, .about-why-us,
    .about-services, .contact-page, .service-detail-page, .project-detail-page,
    .news-detail-page { font-size: var(--public-body-mobile); line-height: 1.68; }
}

/* ---------- 公共标题窗：与主页标题线和工程网格一致 ---------- */
.public-page-masthead {
    border-bottom-color: var(--public-line) !important;
    box-shadow: 0 18px 42px rgba(0, 9, 16, 0.12);
}

.public-page-masthead .masthead-panel {
    background-color: var(--public-glass-strong) !important;
    background-image:
        linear-gradient(rgba(97, 197, 250, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(97, 197, 250, 0.028) 1px, transparent 1px) !important;
    background-size: 56px 56px !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* ---------- 栏目首页的主内容框 ---------- */
.services-page,
.projects-page,
.news-page {
    isolation: isolate;
    color: var(--public-ink) !important;
    background:
        linear-gradient(rgba(97, 197, 250, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(97, 197, 250, 0.025) 1px, transparent 1px),
        var(--public-glass) !important;
    background-size: 56px 56px, 56px 56px, auto !important;
    border-color: var(--public-line) !important;
    border-top: 3px solid var(--ks-primary) !important;
    border-radius: 0 !important;
    box-shadow: 0 24px 64px rgba(0, 10, 18, 0.24) !important;
    -webkit-backdrop-filter: blur(var(--ks-glass-blur-dark)) saturate(100%) !important;
    backdrop-filter: blur(var(--ks-glass-blur-dark)) saturate(100%) !important;
}

.services-page .mud-typography,
.projects-page .mud-typography,
.news-page .mud-typography {
    color: inherit;
}

.services-page .mud-typography-color-secondary,
.projects-page .mud-typography-color-secondary,
.news-page .mud-typography-color-secondary,
.services-page .mud-typography-color-tertiary,
.projects-page .mud-typography-color-tertiary,
.news-page .mud-typography-color-tertiary {
    color: var(--public-muted) !important;
}

/* ---------- 服务页 ---------- */
.services-page .service-cards-container {
    max-width: 860px;
    gap: 0 !important;
    border: 1px solid var(--public-line);
}

.services-page .service-card {
    aspect-ratio: 1.2 / 1;
    color: var(--public-muted) !important;
    background: rgba(10, 37, 52, 0.46) !important;
    border: 0 !important;
    border-right: 1px solid var(--public-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.services-page .service-card:last-child {
    border-right: 0 !important;
}

.services-page .service-card:hover,
.services-page .service-card.selected {
    color: var(--public-ink) !important;
    background: var(--public-panel-hover) !important;
    box-shadow: inset 0 -3px 0 var(--ks-primary) !important;
    transform: none !important;
}

.services-page .service-icon {
    display: grid;
    width: 58px;
    height: 58px;
    margin-bottom: 12px;
    place-items: center;
    color: var(--ks-primary-light) !important;
    opacity: 0.82;
}

.services-page .service-category-icon {
    width: 52px;
    height: 52px;
    stroke-width: 1.65;
}

.services-page .service-title {
    color: inherit !important;
    font-size: 0.94rem !important;
    font-weight: 700 !important;
}

.services-page .service-item-block {
    color: var(--public-ink) !important;
    background: var(--public-panel) !important;
    border: 1px solid var(--public-line) !important;
    border-left: 3px solid rgba(var(--ks-primary-rgb), 0.62) !important;
    border-radius: 0 !important;
    box-shadow: 0 14px 34px rgba(0, 8, 16, 0.16) !important;
}

.services-page .image-gallery,
.services-page .text-only-block {
    color: var(--public-ink) !important;
    background:
        linear-gradient(135deg, rgba(var(--ks-primary-rgb), 0.09), transparent 64%),
        rgba(4, 22, 34, 0.54) !important;
    border-right: 1px solid var(--public-line);
}

.services-page .text-block-icon {
    display: grid;
    width: 78px;
    height: 78px;
    margin-bottom: 18px;
    place-items: center;
    color: var(--ks-primary-light) !important;
    opacity: 0.94;
}

.services-page .service-detail-line-icon {
    width: 64px;
    height: 64px;
    stroke-width: 1.65;
}

.services-page .text-block-title,
.services-page .item-title {
    color: var(--public-ink) !important;
}

.services-page .text-block-subtitle,
.services-page .item-title-en,
.services-page .item-description {
    color: var(--public-muted) !important;
}

.services-page .text-block-badge {
    color: var(--public-ink) !important;
    background: rgba(var(--ks-primary-rgb), 0.20) !important;
    border: 1px solid rgba(var(--ks-primary-rgb), 0.34);
    border-radius: 2px !important;
}

.services-page .detail-actions {
    background: rgba(4, 20, 31, 0.56) !important;
    border: 1px solid var(--public-line);
    border-top: 0;
}

.services-page .mud-divider {
    border-color: var(--public-line) !important;
}

.services-page .mobile-service-nav .service-chips {
    background: rgba(6, 25, 38, 0.84) !important;
    border: 1px solid var(--public-line) !important;
    border-radius: 0 !important;
}

.services-page .mobile-service-nav {
    background: transparent !important;
    box-shadow: none !important;
}

.services-page .mobile-service-nav .service-chip {
    color: var(--public-muted) !important;
    background: rgba(10, 37, 52, 0.58) !important;
    border: 1px solid transparent !important;
    border-radius: 2px !important;
}

.services-page .mobile-service-nav .service-chip.mud-chip-selected {
    color: #fff !important;
    background: var(--ks-primary) !important;
    border-color: var(--ks-primary-light) !important;
}

.services-page .chip-category-icon {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    margin-right: 7px;
    stroke-width: 1.8;
}

/* ---------- 项目与新闻栏目 ---------- */
.projects-page .project-tabs-container,
.news-page .timeline-wrapper {
    color: var(--public-ink) !important;
    background: rgba(7, 27, 40, 0.62) !important;
    border: 1px solid var(--public-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.projects-page .project-tab {
    min-height: 48px;
    color: var(--public-muted) !important;
    border-right: 1px solid rgba(138, 204, 239, 0.10) !important;
    border-radius: 0 !important;
}

.projects-page .project-tab:last-child {
    border-right: 0 !important;
}

.projects-page .project-tab:hover,
.projects-page .project-tab.active {
    color: var(--public-ink) !important;
    background: rgba(var(--ks-primary-rgb), 0.10) !important;
}

@media (min-width: 960px) {
    .projects-page .project-tabs-container {
        padding: 7px 22px !important;
        clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
    }

    .projects-page .project-tabs-wrapper {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        width: 100%;
    }

    .projects-page .project-tab {
        width: 100%;
        max-width: none;
        padding-inline: 16px;
    }
}

@media (max-width: 959.95px) {
    .projects-page .project-tabs-container {
        padding: 7px !important;
        overflow-x: auto;
        clip-path: none;
        scrollbar-width: thin;
    }

    .projects-page .project-tabs-wrapper {
        justify-content: flex-start;
        width: max-content;
        min-width: 100%;
    }

    .projects-page .project-tab {
        flex: 0 0 auto;
        min-width: 148px;
        max-width: none;
    }
}

.projects-page .gallery-card,
.news-page .gallery-card,
.projects-page .gallery-item,
.news-page .news-gallery-card {
    color: var(--public-ink) !important;
    background: rgba(4, 20, 31, 0.76) !important;
    border: 1px solid var(--public-line) !important;
    border-radius: 2px !important;
    box-shadow: none !important;
}

.projects-page .content-notice,
.news-page .content-notice {
    color: var(--public-ink) !important;
    background: rgba(7, 27, 40, 0.72) !important;
    border: 1px solid var(--public-line) !important;
    border-left: 3px solid var(--ks-primary) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.projects-page .notice-title,
.news-page .notice-title {
    color: var(--public-ink) !important;
}

.projects-page .notice-icon,
.news-page .notice-icon {
    color: var(--ks-primary-light) !important;
    background: rgba(var(--ks-primary-rgb), 0.12) !important;
    border: 1px solid rgba(var(--ks-primary-rgb), 0.30);
    border-radius: 2px !important;
    box-shadow: none !important;
}

.news-page .mud-timeline-item-content,
.news-page .news-card-footer {
    color: var(--public-ink) !important;
}

/* ---------- 关于我们 ---------- */
.about-intro,
.about-why-us,
.about-services {
    color: var(--public-ink) !important;
}

.about-panel {
    color: var(--public-ink) !important;
    background:
        linear-gradient(rgba(97, 197, 250, 0.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(97, 197, 250, 0.024) 1px, transparent 1px),
        var(--public-glass) !important;
    background-size: 56px 56px, 56px 56px, auto !important;
    border: 1px solid var(--public-line) !important;
    border-left: 3px solid var(--ks-primary) !important;
    border-radius: 0 !important;
    box-shadow: 0 24px 64px rgba(0, 10, 18, 0.22) !important;
    -webkit-backdrop-filter: blur(var(--ks-glass-blur-dark)) saturate(100%) !important;
    backdrop-filter: blur(var(--ks-glass-blur-dark)) saturate(100%) !important;
}

body .about-panel .section-header .section-title,
.about-panel .card-title {
    color: var(--public-ink) !important;
}

.about-panel .section-subtitle,
.about-panel .intro-content .mud-typography,
.about-panel .card-desc {
    color: var(--public-muted) !important;
}

.about-panel .section-title-line {
    height: 2px;
    background: linear-gradient(90deg, var(--ks-primary-light), var(--ks-primary), transparent) !important;
}

.about-panel .why-us-card {
    color: var(--public-ink) !important;
    background: rgba(7, 27, 40, 0.58) !important;
    border: 1px solid var(--public-line) !important;
    border-radius: 0 !important;
}

.about-panel .why-us-card:hover {
    background: var(--public-panel-hover) !important;
    border-top-color: var(--ks-primary-light) !important;
    box-shadow: none !important;
    transform: translateY(-2px) !important;
}

.about-panel .card-icon {
    color: var(--ks-primary-light) !important;
    background: rgba(var(--ks-primary-rgb), 0.10) !important;
    border-color: rgba(var(--ks-primary-rgb), 0.28) !important;
    border-radius: 2px !important;
}

.about-panel .why-us-icon {
    color: var(--ks-primary-light) !important;
}

.about-panel .services-chips {
    border-color: var(--public-line) !important;
}

.about-panel .service-chip {
    color: var(--public-ink) !important;
    border-color: var(--public-line) !important;
}

.about-panel .service-chip:hover {
    color: #fff !important;
    background: rgba(var(--ks-primary-rgb), 0.12) !important;
}

/* ---------- 联系我们：暗框架＋高可读浅色表单域 ---------- */
.contact-page {
    color: var(--public-ink) !important;
}

body .contact-page .contact-layout .mud-paper.contact-card,
body .contact-page .contact-layout .mud-paper.map-card,
body .contact-page .contact-layout .mud-paper.form-card {
    color: var(--public-ink) !important;
    background: var(--public-glass-strong) !important;
    border: 1px solid var(--public-line) !important;
    border-top: 3px solid rgba(var(--ks-primary-rgb), 0.72) !important;
    border-radius: 0 !important;
    box-shadow: 0 22px 54px rgba(0, 10, 18, 0.22) !important;
    -webkit-backdrop-filter: blur(var(--ks-glass-blur-dark)) saturate(100%) !important;
    backdrop-filter: blur(var(--ks-glass-blur-dark)) saturate(100%) !important;
}

body .contact-page .contact-layout .section-title,
.contact-page .contact-link,
.contact-page .mud-typography {
    color: var(--public-ink) !important;
}

.contact-page .mud-typography-color-secondary {
    color: var(--public-muted) !important;
}

.contact-page .contact-icon {
    color: var(--ks-primary-light) !important;
    background: rgba(var(--ks-primary-rgb), 0.11) !important;
    border: 1px solid rgba(var(--ks-primary-rgb), 0.24);
    border-radius: 2px !important;
}

.contact-page .contact-icon.whatsapp {
    color: #fff !important;
    background: var(--ks-whatsapp) !important;
    border-color: rgba(255, 255, 255, 0.18);
}

.contact-page .mud-divider {
    border-color: var(--public-line) !important;
}

.contact-page .form-card .mud-input-control {
    color: var(--ks-glass-ink-light) !important;
}

.contact-page .form-card .mud-input-outlined {
    color: var(--ks-glass-ink-light) !important;
    background: rgba(248, 250, 250, 0.96) !important;
    border-radius: 2px !important;
}

.contact-page .form-card .mud-input-label,
.contact-page .form-card input,
.contact-page .form-card textarea,
.contact-page .form-card .mud-select-input {
    color: var(--ks-glass-ink-light) !important;
}

/* 服务页的贴边导航也使用同一暗色工程表面。 */
body .floating-service-nav .mud-paper.mud-elevation-3.nav-card {
    color: var(--public-ink) !important;
    background: rgba(6, 25, 38, 0.92) !important;
    border: 1px solid var(--public-line) !important;
    border-left: 0 !important;
    border-radius: 0 2px 2px 0 !important;
    box-shadow: 0 18px 42px rgba(0, 8, 16, 0.26) !important;
    -webkit-backdrop-filter: blur(14px) saturate(100%) !important;
    backdrop-filter: blur(14px) saturate(100%) !important;
}

.floating-service-nav .nav-tab {
    color: var(--ks-primary-light) !important;
    background: rgba(var(--ks-primary-rgb), 0.06);
    border-right: 1px solid var(--public-line);
}

.floating-service-nav .nav-header {
    color: var(--public-muted) !important;
    border-bottom-color: var(--public-line) !important;
}

.floating-service-nav .mud-nav-link {
    color: var(--public-muted) !important;
    border-radius: 0 !important;
}

.floating-service-nav .mud-nav-link:hover,
.floating-service-nav .active-group > .mud-nav-link {
    color: var(--public-ink) !important;
    background: rgba(var(--ks-primary-rgb), 0.12) !important;
}

.floating-service-nav .sub-item {
    display: flex !important;
    align-items: center;
    gap: 8px;
    color: var(--public-muted) !important;
}

.floating-service-nav .nav-category-icon {
    width: 28px;
    height: 28px;
    margin-right: 10px;
    color: var(--ks-primary-light);
    stroke-width: 1.75;
}

.floating-service-nav .nav-service-icon {
    width: 22px;
    height: 22px;
    color: var(--ks-primary-light);
    stroke-width: 1.7;
}

/* ---------- 三类详情页与错误页 ---------- */
.service-detail-shell,
.project-detail-shell,
.news-detail-shell,
.error-page-shell {
    min-height: calc(100svh - 82px);
    padding: clamp(34px, 5vw, 72px) 0;
}

.service-detail-page,
.project-detail-page,
.news-detail-page,
.error-page {
    color: var(--public-ink) !important;
}

.service-detail-shell .content-card,
.project-detail-shell .content-card,
.news-detail-shell .content-card,
.error-page-shell .error-card,
.public-not-found-card,
.service-detail-shell .service-detail-state,
.project-detail-shell .not-found-card,
.news-detail-shell .not-found-card {
    color: var(--public-ink) !important;
    background:
        linear-gradient(rgba(97, 197, 250, 0.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(97, 197, 250, 0.024) 1px, transparent 1px),
        var(--public-glass-strong) !important;
    background-size: 56px 56px, 56px 56px, auto !important;
    border: 1px solid var(--public-line) !important;
    border-top: 3px solid var(--ks-primary) !important;
    border-radius: 0 !important;
    box-shadow: 0 24px 64px rgba(0, 10, 18, 0.26) !important;
    -webkit-backdrop-filter: blur(var(--ks-glass-blur-dark)) saturate(100%) !important;
    backdrop-filter: blur(var(--ks-glass-blur-dark)) saturate(100%) !important;
}

.service-detail-shell .mud-typography,
.project-detail-shell .mud-typography,
.news-detail-shell .mud-typography,
.error-page-shell .mud-typography {
    color: inherit;
}

.public-not-found-card .mud-typography {
    color: var(--public-ink) !important;
}

.public-not-found-card .mud-typography-color-secondary,
.public-not-found-card .mud-icon-root {
    color: var(--public-muted) !important;
}

.service-detail-shell .mud-typography-color-secondary,
.project-detail-shell .mud-typography-color-secondary,
.news-detail-shell .mud-typography-color-secondary,
.error-page-shell .mud-typography-color-secondary,
.service-detail-shell .page-subtitle {
    color: var(--public-muted) !important;
}

.service-detail-shell .page-title,
.service-detail-shell .section-heading,
.project-detail-shell .project-title,
.project-detail-shell .gallery-title,
.news-detail-shell .detail-title,
.service-detail-shell .related-title,
.project-detail-shell .related-title,
.news-detail-shell .related-title {
    color: var(--public-ink) !important;
}

.service-detail-shell .mud-divider,
.project-detail-shell .mud-divider,
.news-detail-shell .mud-divider {
    border-color: var(--public-line) !important;
}

.service-detail-shell .content-section,
.service-detail-shell .service-gallery-section,
.project-detail-shell .info-section,
.project-detail-shell .customer-review-card,
.news-detail-shell .detail-card,
.service-detail-shell .related-section,
.project-detail-shell .related-section,
.news-detail-shell .related-section {
    color: var(--public-ink) !important;
    background: rgba(5, 22, 34, 0.52) !important;
    border: 1px solid var(--public-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.service-detail-shell .content-section,
.service-detail-shell .service-gallery-section,
.service-detail-shell .related-section,
.project-detail-shell .related-section,
.news-detail-shell .related-section {
    padding: clamp(22px, 3vw, 36px);
}

.project-detail-shell .info-item,
.project-detail-shell .customer-review-text,
.project-detail-shell .project-description,
.news-detail-shell .detail-content,
.service-detail-shell .section-text,
.service-detail-shell .section-text-wrapper {
    color: var(--public-muted) !important;
}

.project-detail-shell .related-card,
.news-detail-shell .related-card {
    color: var(--public-ink) !important;
    background: rgba(7, 27, 40, 0.72) !important;
    border: 1px solid var(--public-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ---------- 移动端：提高实体度并减少模糊成本 ---------- */
@media (max-width: 959.95px) {
    .public-page-masthead .masthead-panel {
        background-color: rgba(6, 25, 38, 0.88) !important;
        background-image: none !important;
    }
}

@media (max-width: 760px) {
    .services-page,
    .projects-page,
    .news-page,
    .about-panel,
    body .contact-page .contact-layout .mud-paper.contact-card,
    body .contact-page .contact-layout .mud-paper.map-card,
    body .contact-page .contact-layout .mud-paper.form-card,
    .service-detail-shell .content-card,
    .project-detail-shell .content-card,
    .news-detail-shell .content-card,
    .error-page-shell .error-card,
    .public-not-found-card {
        background-color: rgba(6, 25, 38, 0.88) !important;
        -webkit-backdrop-filter: blur(10px) saturate(100%) !important;
        backdrop-filter: blur(10px) saturate(100%) !important;
    }

    .services-page .service-cards-container {
        display: none;
    }

    .services-page .service-item-block {
        border-left-width: 2px !important;
    }

    .services-page .image-gallery,
    .services-page .text-only-block {
        border-right: 0;
        border-bottom: 1px solid var(--public-line);
    }

    .service-detail-shell,
    .project-detail-shell,
    .news-detail-shell,
    .error-page-shell {
        min-height: calc(100svh - 68px);
        padding: 18px 0 36px;
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .services-page,
    .projects-page,
    .news-page,
    .about-panel,
    body .contact-page .contact-layout .mud-paper.contact-card,
    body .contact-page .contact-layout .mud-paper.map-card,
    body .contact-page .contact-layout .mud-paper.form-card,
    .service-detail-shell .content-card,
    .project-detail-shell .content-card,
    .news-detail-shell .content-card,
    .error-page-shell .error-card,
    .public-not-found-card {
        background: #102630 !important;
    }
}

/* ==========================================================
   Charcoal concrete / cool silver public theme
   One matte hierarchy across every public page. Real project
   photography is intentionally excluded from these filters.
   ========================================================== */

body:has(.public-layout) .mud-layout-root.public-layout,
body:has(.public-layout) .mud-main-content-flex {
    color: var(--public-ink);
    background: transparent !important;
}

body:has(.public-layout) .mega-menu-content {
    color: var(--public-ink);
    background:
        linear-gradient(rgba(183, 199, 205, 0.016) 1px, transparent 1px),
        linear-gradient(90deg, rgba(183, 199, 205, 0.016) 1px, transparent 1px),
        rgba(10, 15, 18, 0.97) !important;
    background-size: 56px 56px, 56px 56px, auto !important;
    border-bottom-color: var(--public-line) !important;
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.30) !important;
}

body:has(.public-layout) .contact-mega-item {
    color: var(--public-ink);
    border-right-color: var(--public-line);
}

body:has(.public-layout) .contact-mega-item small {
    color: var(--public-muted);
}

body:has(.public-layout) .public-page-masthead {
    background: var(--public-frame) !important;
    border-bottom-color: var(--public-line) !important;
}

body:has(.public-layout) .public-page-masthead .masthead-panel {
    background-color: rgba(10, 15, 18, 0.88) !important;
    background-image:
        linear-gradient(rgba(183, 199, 205, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(183, 199, 205, 0.018) 1px, transparent 1px) !important;
}

body:has(.public-layout) :is(.services-page, .projects-page, .news-page, .about-panel) {
    color: var(--public-ink) !important;
    background:
        linear-gradient(rgba(183, 199, 205, 0.016) 1px, transparent 1px),
        linear-gradient(90deg, rgba(183, 199, 205, 0.016) 1px, transparent 1px),
        var(--public-glass) !important;
    background-size: 56px 56px, 56px 56px, auto !important;
    border-color: var(--public-line) !important;
}

body:has(.public-layout) .home-page-shell {
    --home-ink: var(--public-ink);
    --home-muted: var(--public-muted);
    --home-line: var(--public-line);
    --home-line-strong: var(--public-line-strong);
    --home-glass: var(--public-glass);
    --home-glass-strong: var(--public-glass-strong);
}

body:has(.public-layout) .home-page-shell .service-list-grid,
body:has(.public-layout) .home-page-shell .about-content,
body:has(.public-layout) .home-page-shell .projects-glass,
body:has(.public-layout) .home-page-shell .cta-panel {
    color: var(--public-ink) !important;
    background: var(--public-glass) !important;
    border-color: var(--public-line) !important;
}

body:has(.public-layout) .home-page-shell .service-card {
    background: rgba(23, 33, 38, 0.68) !important;
    border-color: var(--public-line) !important;
}

body:has(.public-layout) .home-page-shell .service-card:hover,
body:has(.public-layout) .home-page-shell .service-card:focus-within {
    background: var(--public-panel-hover) !important;
}

body:has(.public-layout) .home-page-shell .projects-glass::before,
body:has(.public-layout) .home-page-shell .projects-glass::after {
    background-color: rgba(183, 199, 205, 0.22) !important;
}

body:has(.public-layout) .home-page-shell :is(.section-footer, .about-text) .mud-button-root {
    color: var(--public-ink) !important;
    background: var(--public-raised) !important;
    border-color: var(--public-line-strong) !important;
}

body:has(.public-layout) .home-page-shell .cta-actions .cta-btn:not(.whatsapp) {
    color: var(--public-silver-ink) !important;
    background: linear-gradient(180deg, var(--public-silver-top), var(--public-silver-bottom)) !important;
    border-color: rgba(232, 239, 241, 0.76) !important;
}

body:has(.public-layout) .home-page-shell .cta-actions .cta-btn:not(.whatsapp):hover {
    color: var(--public-canvas) !important;
    background: linear-gradient(180deg, #e7edef, #cad4d8) !important;
}

body:has(.public-layout) .services-page :is(.service-card, .service-item-block, .image-gallery, .text-only-block, .detail-actions),
body:has(.public-layout) .projects-page :is(.project-tabs-container, .content-notice),
body:has(.public-layout) .news-page :is(.timeline-wrapper, .content-notice),
body:has(.public-layout) .about-panel .why-us-card {
    color: var(--public-ink) !important;
    background: var(--public-panel) !important;
    border-color: var(--public-line) !important;
}

body:has(.public-layout) .services-page :is(.service-card:hover, .service-card.selected),
body:has(.public-layout) .about-panel .why-us-card:hover {
    background: var(--public-panel-hover) !important;
}

body:has(.public-layout) :is(.service-detail-shell, .project-detail-shell, .news-detail-shell, .error-page-shell) :is(.content-card, .error-card, .not-found-card, .service-detail-state),
body:has(.public-layout) .public-not-found-card {
    color: var(--public-ink) !important;
    background:
        linear-gradient(rgba(183, 199, 205, 0.016) 1px, transparent 1px),
        linear-gradient(90deg, rgba(183, 199, 205, 0.016) 1px, transparent 1px),
        var(--public-glass-strong) !important;
    background-size: 56px 56px, 56px 56px, auto !important;
    border-color: var(--public-line) !important;
}

body:has(.public-layout) :is(.service-detail-shell, .project-detail-shell, .news-detail-shell) :is(.content-section, .info-section, .customer-review-card, .detail-card, .related-section, .gallery-section, .related-card, .info-item) {
    color: var(--public-ink) !important;
    background-color: var(--public-panel) !important;
    border-color: var(--public-line) !important;
}

body:has(.public-layout) :is(.service-breadcrumb, .project-breadcrumb) {
    color: var(--public-muted) !important;
    background: rgba(10, 15, 18, 0.88) !important;
    border-color: var(--public-line) !important;
}

body:has(.public-layout) .service-detail-shell .image-label {
    color: var(--public-ink) !important;
    background: rgba(29, 42, 48, 0.96) !important;
    border-top-color: var(--public-line) !important;
}

body:has(.public-layout) :is(.project-detail-shell, .service-detail-shell) .detail-contact-panel {
    background: linear-gradient(115deg, rgba(23, 33, 38, 0.94), rgba(10, 15, 18, 0.88)) !important;
    border-color: var(--public-line) !important;
}

body:has(.public-layout) :is(.quote-nav-cta, .mobile-quote-cta, .hero-btn-primary, .detail-contact-button-primary) {
    color: var(--public-silver-ink) !important;
    background: linear-gradient(180deg, var(--public-silver-top), var(--public-silver-bottom)) !important;
    border-color: rgba(232, 239, 241, 0.76) !important;
}

body:has(.public-layout) :is(.quote-nav-cta, .mobile-quote-cta, .hero-btn-primary, .detail-contact-button-primary):hover {
    color: var(--public-canvas) !important;
    background: linear-gradient(180deg, #e7edef, #cad4d8) !important;
}

body:has(.public-layout) :is(.detail-contact-button-secondary, .scroll-to-top-btn, .contact-main-fab, .contact-fab) {
    color: var(--public-ink);
    background-color: var(--public-raised);
    border-color: var(--public-line-strong);
}

body:has(.public-layout) .mud-dialog:not(:has(.ks-image-lightbox)) {
    color: var(--public-ink) !important;
    background: var(--public-glass-strong) !important;
    border: 1px solid var(--public-line) !important;
    border-radius: 0 !important;
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.44) !important;
}

body:has(.public-layout) .mud-dialog:not(:has(.ks-image-lightbox)) :is(.mud-dialog-title, .mud-dialog-content, .dialog-content, .phone-number) {
    color: var(--public-ink) !important;
}

body:has(.public-layout) .mud-dialog:not(:has(.ks-image-lightbox)) .phone-number {
    background: var(--public-raised) !important;
    border: 1px solid var(--public-line) !important;
}

body:has(.public-layout) .mud-dialog:not(:has(.ks-image-lightbox)) .mud-button-filled-primary {
    color: var(--public-silver-ink) !important;
    background: linear-gradient(180deg, var(--public-silver-top), var(--public-silver-bottom)) !important;
}

body:has(.public-layout) :is(.lightbox-toolbar, .lightbox-nav) {
    background: rgba(10, 15, 18, 0.86) !important;
    border-color: var(--public-line) !important;
}

body:has(.public-layout) .lightbox-stage {
    background-color: rgba(10, 15, 18, 0.70) !important;
    border-color: var(--public-line) !important;
}

body:has(.public-layout) .site-footer {
    color: var(--public-muted);
    background: #080d0f !important;
    border-top-color: var(--public-line) !important;
}

@media (max-width: 760px) {
    body:has(.public-layout) :is(.services-page, .projects-page, .news-page, .about-panel),
    body:has(.public-layout) :is(.service-detail-shell, .project-detail-shell, .news-detail-shell, .error-page-shell) :is(.content-card, .error-card, .not-found-card),
    body:has(.public-layout) .public-not-found-card {
        background-color: rgba(10, 15, 18, 0.91) !important;
        -webkit-backdrop-filter: blur(10px) saturate(100%) !important;
        backdrop-filter: blur(10px) saturate(100%) !important;
    }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body:has(.public-layout) :is(.services-page, .projects-page, .news-page, .about-panel, .contact-system-page .engineering-panel, .contact-system-page .contact-route-card, .contact-system-page .contact-form-panel, .contact-system-page .contact-content-panel),
    body:has(.public-layout) :is(.service-detail-shell, .project-detail-shell, .news-detail-shell, .error-page-shell) :is(.content-card, .error-card, .not-found-card),
    body:has(.public-layout) .public-not-found-card {
        background: var(--public-frame) !important;
    }
}