:root {
    --primary: #1E5A8A;
    --primary-hover: #17466C;
    --primary-active: #10324E;
    --primary-subtle: #EBF2F7;
    --secondary: #4A6B82;
    --secondary-hover: #3D586B;
    --secondary-subtle: #F0F4F8;
    --accent: #00A896;
    --accent-hover: #028074;
    --accent-subtle: #E0F5F2;
    --bg-main: #EBF0F5;
    --bg-surface: #F2F5F8;
    --bg-elevated: #FFFFFF;
    --bg-sunken: #E2E7ED;
    --text-primary: #1D2D3D;
    --text-secondary: #576B7C;
    --text-muted: #8A9BA8;
    --border-subtle: rgba(255, 255, 255, 0.8);
    --border-inset: rgba(180, 195, 210, 0.4);
    --border-active: #1E5A8A;
    --shadow-raised-soft: 6px 6px 14px #cad4df, -6px -6px 14px #ffffff;
    --shadow-raised-medium: 9px 9px 20px #c4cfdb, -9px -9px 20px #ffffff;
    --shadow-raised-float: 12px 12px 28px #bac6d4, -12px -12px 28px #ffffff;
    --shadow-pressed-inset: inset 3px 3px 6px #cad4df, inset -3px -3px 6px #ffffff;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
}

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-color: var(--bg-main);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a[href^="mailto:"] {
    display: inline-block;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.flex > div:has(> a[href^="mailto:"]) {
    min-width: 0;
}

.text-muted {
    color: #8A9BA8 !important;
}

/* ===== header ===== */
.site-header-block {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.site-header-block a:focus-visible,
.site-header-block button:focus-visible {
    outline: 2px solid #1E5A8A;
    outline-offset: 2px;
}

.site-header-block .brand-name {
    display: block;
    max-width: 210px;
    line-height: 1.2;
}

.site-header-block a[href^="mailto:"] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.footer-block .footer-company-name,
.footer-block a[href^="mailto:"],
.site-header-block a[href^="mailto:"],
.contact-page-section a[href^="mailto:"] {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.footer-block a[href^="mailto:"] {
    display: block;
}

@media (min-width: 768px) {
    .footer-block a[href^="mailto:"] {
        max-width: none;
        font-size: clamp(9px, 0.9vw, 12px) !important;
        line-height: 1.25;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
        letter-spacing: -0.025em;
    }
}

@media (min-width: 1024px) {
    .footer-block > div > .grid {
        grid-template-columns: 1fr 1.05fr 1fr 1.45fr;
    }
}

@media (max-width: 767px) {
    .site-header-block .brand-name {
        max-width: 132px;
        font-size: 13px !important;
    }

    .site-header-block .brand-subtitle {
        display: none;
    }

    .filter-controls {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem !important;
        width: 100% !important;
        overflow: visible !important;
        padding-bottom: 0 !important;
    }

    .filter-controls .js-filter-btn {
        width: 100%;
        min-width: 0;
        white-space: normal;
        line-height: 1.25;
    }

    .footer-block a[href^="mailto:"] {
        max-width: none;
        font-size: 11px !important;
        line-height: 1.25;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
        letter-spacing: -0.02em;
    }
}

@media (max-width: 390px) {
    .site-header-block .brand-name {
        max-width: 112px;
        font-size: 12px !important;
    }
}

/* ===== hero ===== */
.hero-section .hero-btn-primary:hover {
    background-color: #17466C;
    box-shadow: 6px 6px 14px #b8c4d2, -6px -6px 14px #ffffff;
}

.hero-section .hero-btn-primary:active {
    box-shadow: inset 2px 2px 5px #10324E, inset -2px -2px 5px #2a72ac;
}

.hero-section .hero-btn-secondary:hover {
    box-shadow: 6px 6px 14px #b8c4d2, -6px -6px 14px #ffffff;
    color: #17466C;
}

.hero-section .hero-btn-secondary:active {
    box-shadow: inset 2px 2px 4px #cad4df, inset -2px -2px 4px #ffffff;
}

/* ===== services-grid ===== */
.services-grid-section {
    position: relative;
}

.services-grid-section .service-card {
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.services-grid-section .service-card:hover {
    transform: translateY(-3px);
}

/* ===== cost-calculator ===== */
.cost-calculator-section select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A6B82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.1em;
}

.cost-calculator-section input::placeholder {
    color: #8A9BA8;
    opacity: 1;
}

.cost-calculator-section input:-ms-input-placeholder {
    color: #8A9BA8;
}

.cost-calculator-section input::-ms-input-placeholder {
    color: #8A9BA8;
}

/* ===== cost-of-inaction ===== */
.cost-of-inaction-block .active-tab {
    background-color: #1E5A8A !important;
    color: #FFFFFF !important;
    box-shadow: 4px 4px 10px #cad4df, -4px -4px 10px #ffffff !important;
}

/* ===== geography ===== */
.geography-section .js-district-btn {
    background-color: #F2F5F8;
    color: #4A6B82;
    box-shadow: 3px 3px 7px #cad4df, -3px -3px 7px #ffffff;
}

.geography-section .js-district-btn:hover {
    color: #1E5A8A;
    box-shadow: 5px 5px 10px #cad4df, -5px -5px 10px #ffffff;
}

.geography-section .js-district-btn.active-district {
    background-color: #EBF2F7;
    color: #1E5A8A;
    border-color: #1E5A8A;
    box-shadow: inset 2px 2px 5px #cad4df, inset -2px -2px 5px #ffffff;
}

.geography-section .js-zone-panel {
    animation: zoneFadeIn 0.25s ease-in-out;
}

@keyframes zoneFadeIn {
    from {
        transform: translateY(4px);
    }

    to {
        transform: translateY(0);
    }
}

/* ===== numbers ===== */
.numbers-section {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.numbers-section .numbers-card {
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.numbers-section .numbers-card:hover {
    box-shadow: 9px 9px 20px #c4cfdb, -9px -9px 20px #ffffff;
    border-color: rgba(255, 255, 255, 1);
}

/* ===== reviews ===== */
.reviews-section .js-filter-btn {
    background-color: #F2F5F8;
    color: #4A6B82;
}

.reviews-section .js-filter-btn:hover {
    color: #1E5A8A;
    box-shadow: 6px 6px 14px #b8c4d2, -6px -6px 14px #ffffff;
}

.reviews-section .js-filter-btn.active-filter {
    background-color: #1E5A8A;
    color: #ffffff;
    box-shadow: inset 2px 2px 4px #10324E, inset -2px -2px 4px #2a72ac;
    border-color: rgba(255, 255, 255, 0.2);
}

.reviews-section .js-review-card {
    transform: translateY(0);
}

.reviews-section .js-review-card:hover {
    transform: translateY(-4px);
}

/* ===== blog-grid ===== */
.blog-grid-section .blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.blog-grid-section .blog-card:hover {
    box-shadow: 9px 9px 20px #c4cfdb, -9px -9px 20px #ffffff;
    transform: translateY(-2px);
}

.blog-grid-section a:focus-visible {
    outline: 2px solid #1E5A8A;
    outline-offset: 2px;
}

/* ===== footer ===== */
.footer-block .footer-logo {
    max-width: 45px;
    max-height: 45px;
}

.footer-block a {
    text-decoration: none;
}

.footer-block a:hover {
    color: #1E5A8A;
}

.site-header-block {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.site-header-block a:focus-visible,
.site-header-block button:focus-visible {
    outline: 2px solid #1E5A8A;
    outline-offset: 2px;
}

.blog-list-block .js-filter-btn.active {
    background-color: #1E5A8A;
    color: #FFFFFF;
    box-shadow: inset 2px 2px 5px #10324E, inset -2px -2px 5px #2a72ac;
}

.blog-list-block .js-filter-btn:not(.active):hover {
    box-shadow: 5px 5px 12px #cad4df, -5px -5px 12px #ffffff;
    color: #1E5A8A;
}

.blog-list-block .js-blog-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-list-block .js-blog-item:hover {
    box-shadow: 9px 9px 20px #c4cfdb, -9px -9px 20px #ffffff;
}

.footer-block .footer-logo {
    max-width: 45px;
    max-height: 45px;
}

.footer-block a {
    text-decoration: none;
}

.footer-block a:hover {
    color: #1E5A8A;
}


/* ===== PAGE: about ===== */
.about-section .js-tab-btn:focus{outline:none}.about-section .js-tab-btn.is-active{background-color:#1E5A8A;color:#FFFFFF;box-shadow:inset 2px 2px 5px #10324E,inset -2px -2px 5px #2a72ac}.about-section .js-tab-btn:not(.is-active){background-color:#EBF0F5;color:#576B7C;box-shadow:4px 4px 8px #cad4df,-4px -4px 8px #ffffff}

/* ===== PAGE: contact ===== */
.contact-page-section input::placeholder, .contact-page-section textarea::placeholder { color: #8A9BA8; opacity: 1; }
.contact-page-section select:invalid { color: #8A9BA8; }
.contact-page-section select option { color: #1D2D3D; background-color: #FFFFFF; }
.contact-page-section .form-input-tactile:focus, .contact-page-section .form-select-tactile:focus, .contact-page-section .form-textarea-tactile:focus { border-color: rgba(30, 90, 138, 0.4); box-shadow: inset 3px 3px 6px #cad4df, inset -3px -3px 6px #ffffff, 0 0 0 2px rgba(30, 90, 138, 0.15); }

/* ===== PAGE: privacy ===== */
.privacy-policy-section { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .privacy-policy-section h1, .privacy-policy-section h2, .privacy-policy-section h3 { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; hyphens: auto; } .privacy-policy-section a.js-privacy-anchor.active { background-color: #EBF2F7; color: #1E5A8A; font-weight: 600; box-shadow: inset 2px 2px 5px #cad4df, inset -2px -2px 5px #ffffff; border-left: 3px solid #1E5A8A; }

/* ===== PAGE: terms ===== */
.terms-page-wrapper { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .terms-page-wrapper h1, .terms-page-wrapper h2, .terms-page-wrapper h3 { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: -0.015em; }

/* ===== PAGE: disclaimer ===== */
.disclaimer-section { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
.disclaimer-section h1, .disclaimer-section h2, .disclaimer-section h3 { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; hyphens: auto; }
.disclaimer-section .disclaimer-card { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.disclaimer-section .disclaimer-card:hover { transform: translateY(-2px); }

.tactile-comment-card {
    box-shadow: 6px 6px 14px #cad4df, -6px -6px 14px #ffffff;
}

.tactile-avatar-wrapper {
    box-shadow: 3px 3px 7px #cad4df, -3px -3px 7px #ffffff;
}

.tactile-comment-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    object-fit: cover;
}

.tactile-btn-action {
    box-shadow: 3px 3px 8px #cad4df, -3px -3px 8px #ffffff;
    transition: box-shadow 0.2s ease, transform 0.1s ease;
}

.tactile-btn-action:hover {
    box-shadow: 5px 5px 12px #b8c4d2, -5px -5px 12px #ffffff;
}

.tactile-btn-action:active {
    box-shadow: inset 2px 2px 4px #cad4df, inset -2px -2px 4px #ffffff;
}

.tactile-verified-badge {
    box-shadow: inset 1px 1px 2px rgba(0, 168, 150, 0.2);
}

.tactile-reply-thread {
    position: relative;
}

.tactile-reply-card {
    box-shadow: inset 2px 2px 5px #cad4df, inset -2px -2px 5px #ffffff;
}

.tactile-avatar-wrapper-reply {
    box-shadow: 2px 2px 5px #cad4df, -2px -2px 5px #ffffff;
}

.tactile-reply-avatar {
    width: 38px;
    height: 38px;
    min-width: 38px;
    object-fit: cover;
}

.tactile-official-badge {
    box-shadow: 2px 2px 4px rgba(30, 90, 138, 0.3);
}

.tactile-btn-action-sm {
    box-shadow: 2px 2px 5px #cad4df, -2px -2px 5px #ffffff;
    transition: box-shadow 0.2s ease;
}

.tactile-btn-action-sm:hover {
    box-shadow: 4px 4px 8px #b8c4d2, -4px -4px 8px #ffffff;
}

.tactile-btn-action-sm:active {
    box-shadow: inset 1px 1px 3px #cad4df, inset -1px -1px 3px #ffffff;
}


/* ===== PAGE TEMPLATE: services ===== */
.site-header-block {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.site-header-block a:focus-visible,
.site-header-block button:focus-visible {
    outline: 2px solid #1E5A8A;
    outline-offset: 2px;
}

.hero-section .hero-btn-primary:hover {
    background-color: #17466C;
    box-shadow: 6px 6px 14px #b8c4d2, -6px -6px 14px #ffffff;
}

.hero-section .hero-btn-primary:active {
    box-shadow: inset 2px 2px 5px #10324E, inset -2px -2px 5px #2a72ac;
}

.hero-section .hero-btn-secondary:hover {
    box-shadow: 6px 6px 14px #b8c4d2, -6px -6px 14px #ffffff;
    color: #17466C;
}

.hero-section .hero-btn-secondary:active {
    box-shadow: inset 2px 2px 4px #cad4df, inset -2px -2px 4px #ffffff;
}

.universal-detail-section .tactile-comment-avatar {
    width: 48px;
    height: 48px;
}

.universal-detail-section .tactile-reply-avatar {
    width: 36px;
    height: 36px;
}

.universal-detail-section .tactile-btn-action:hover,
.universal-detail-section .tactile-btn-action-sm:hover {
    box-shadow: 4px 4px 10px #c4cfdb, -4px -4px 10px #ffffff;
}

.universal-detail-section .tactile-btn-action:active,
.universal-detail-section .tactile-btn-action-sm:active {
    box-shadow: inset 2px 2px 4px #cad4df, inset -2px -2px 4px #ffffff;
}

.footer-block .footer-logo {
    max-width: 45px;
    max-height: 45px;
}

.footer-block a {
    text-decoration: none;
}

.footer-block a:hover {
    color: #1E5A8A;
}

/* ===== PAGE TEMPLATE: blog ===== */
.site-header-block {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.site-header-block a:focus-visible,
.site-header-block button:focus-visible {
    outline: 2px solid #1E5A8A;
    outline-offset: 2px;
}

.hero-section .hero-btn-primary:hover {
    background-color: #17466C;
    box-shadow: 6px 6px 14px #b8c4d2, -6px -6px 14px #ffffff;
}

.hero-section .hero-btn-primary:active {
    box-shadow: inset 2px 2px 5px #10324E, inset -2px -2px 5px #2a72ac;
}

.hero-section .hero-btn-secondary:hover {
    box-shadow: 6px 6px 14px #b8c4d2, -6px -6px 14px #ffffff;
    color: #17466C;
}

.hero-section .hero-btn-secondary:active {
    box-shadow: inset 2px 2px 4px #cad4df, inset -2px -2px 4px #ffffff;
}

.universal-detail-section .tactile-comment-avatar {
    width: 48px;
    height: 48px;
}

.universal-detail-section .tactile-reply-avatar {
    width: 36px;
    height: 36px;
}

.universal-detail-section .tactile-btn-action:hover,
.universal-detail-section .tactile-btn-action-sm:hover {
    box-shadow: 4px 4px 10px #c4cfdb, -4px -4px 10px #ffffff;
}

.universal-detail-section .tactile-btn-action:active,
.universal-detail-section .tactile-btn-action-sm:active {
    box-shadow: inset 2px 2px 4px #cad4df, inset -2px -2px 4px #ffffff;
}

.footer-block .footer-logo {
    max-width: 45px;
    max-height: 45px;
}

.footer-block a {
    text-decoration: none;
}

.footer-block a:hover {
    color: #1E5A8A;
}