/*
Theme Name: CoreLinkHub Pro Business
Theme URI: https://corelinkhub.com/
Author: CoreLinkHub
Author URI: https://corelinkhub.com/
Description: A professional responsive WordPress business theme for CoreLinkHub with IT support, network infrastructure, CCTV, e-commerce, services, blog, quotation popup, AdSense-ready slots, SEO basics and light/dark mode support.
Version: 2.0.4
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.2
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: corelinkhub
Tags: business, blog, custom-logo, responsive-layout, services, right-sidebar
*/

:root {
    --clh-bg: #f6f9fc;
    --clh-surface: #ffffff;
    --clh-surface-2: #eef6fb;
    --clh-text: #071a33;
    --clh-muted: #5b6980;
    --clh-primary: #041e4f;
    --clh-primary-2: #062c72;
    --clh-accent: #00a9da;
    --clh-accent-2: #59d7ff;
    --clh-border: #dce8f1;
    --clh-shadow: 0 20px 55px rgba(4, 30, 79, 0.12);
    --clh-radius: 24px;
    --clh-header-height: 88px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --clh-bg: #061225;
        --clh-surface: #0b1b35;
        --clh-surface-2: #0f274b;
        --clh-text: #eef7ff;
        --clh-muted: #b8c9dc;
        --clh-primary: #061225;
        --clh-primary-2: #0a2d62;
        --clh-accent: #15c4f4;
        --clh-accent-2: #7ae4ff;
        --clh-border: rgba(255,255,255,0.12);
        --clh-shadow: 0 20px 55px rgba(0, 0, 0, 0.35);
    }
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    background: var(--clh-bg);
    color: var(--clh-text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
}

picture {
    display: contents;
}

a {
    color: var(--clh-primary-2);
    text-decoration: none;
    transition: color .2s ease, transform .2s ease, background .2s ease, border .2s ease;
}

a:hover,
a:focus {
    color: var(--clh-accent);
}

@media (prefers-color-scheme: dark) {
    a {
        color: var(--clh-accent-2);
    }
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

.clh-container {
    width: min(1180px, calc(100% - 40px));
    margin-inline: auto;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link:focus {
    clip: auto;
    height: auto;
    width: auto;
    padding: 12px 16px;
    background: var(--clh-accent);
    color: white;
    z-index: 9999;
}

.clh-header {
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(16px);
}

.clh-policy-bar {
    background: var(--clh-primary);
    color: rgba(255,255,255,.88);
    font-size: 13px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.clh-policy-inner {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.clh-legal-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.clh-legal-menu a,
.clh-policy-bar a {
    color: rgba(255,255,255,.82);
}

.clh-legal-menu a:hover,
.clh-policy-bar a:hover {
    color: white;
}

.clh-date-wrap {
    margin-left: auto;
    white-space: nowrap;
    color: var(--clh-accent-2);
    font-weight: 700;
}

.clh-main-header {
    background: color-mix(in srgb, var(--clh-surface) 92%, transparent);
    border-bottom: 1px solid var(--clh-border);
    box-shadow: 0 8px 28px rgba(4,30,79,.06);
}

.clh-header-inner {
    min-height: var(--clh-header-height);
    display: flex;
    align-items: center;
    gap: 24px;
}

.clh-logo {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    line-height: 0;
}

.clh-logo-img {
    display: block;
    width: min(260px, 44vw);
    max-height: 78px;
    object-fit: contain;
}

.clh-logo-dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    .clh-logo-light {
        display: none;
    }
    .clh-logo-dark {
        display: block;
    }
}

.clh-main-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
}

.clh-menu,
.clh-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.clh-menu {
    display: flex;
    align-items: center;
    gap: 4px;
}

.clh-menu > li {
    position: relative;
}

.clh-menu > li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 999px;
    color: var(--clh-text);
    font-weight: 700;
    font-size: 15px;
}

.clh-menu > li > a:hover,
.clh-menu > li.current-menu-item > a,
.clh-menu > li.current_page_item > a {
    background: var(--clh-surface-2);
    color: var(--clh-primary-2);
}

@media (prefers-color-scheme: dark) {
    .clh-menu > li > a:hover,
    .clh-menu > li.current-menu-item > a,
    .clh-menu > li.current_page_item > a {
        color: white;
    }
}

.clh-menu .menu-item-has-children > a::after {
    content: "▾";
    font-size: 12px;
    margin-left: 7px;
    opacity: .75;
}

.clh-menu .sub-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 270px;
    padding: 10px;
    border: 1px solid var(--clh-border);
    border-radius: 18px;
    background: var(--clh-surface);
    box-shadow: var(--clh-shadow);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.clh-menu li:hover > .sub-menu,
.clh-menu li:focus-within > .sub-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.clh-menu .sub-menu a {
    display: block;
    padding: 11px 12px;
    border-radius: 12px;
    color: var(--clh-text);
    font-weight: 700;
}

.clh-menu .sub-menu a:hover {
    background: var(--clh-surface-2);
    color: var(--clh-accent);
}

.clh-menu-toggle {
    display: none;
    margin-left: auto;
    width: 46px;
    height: 46px;
    border: 1px solid var(--clh-border);
    border-radius: 14px;
    background: var(--clh-surface);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}

.clh-menu-toggle span:not(.screen-reader-text) {
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: var(--clh-text);
}

.clh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 12px 20px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-weight: 800;
    line-height: 1;
    text-align: center;
}

.clh-btn-primary {
    background: linear-gradient(135deg, var(--clh-accent), #0388cf);
    color: white !important;
    box-shadow: 0 14px 30px rgba(0,169,218,.25);
}

.clh-btn-primary:hover {
    transform: translateY(-2px);
    color: white;
    box-shadow: 0 18px 40px rgba(0,169,218,.34);
}

.clh-btn-light {
    background: rgba(255,255,255,.94);
    color: var(--clh-primary) !important;
    border-color: rgba(255,255,255,.28);
}

.clh-btn-ghost {
    background: var(--clh-surface-2);
    color: var(--clh-text);
    border-color: var(--clh-border);
}

.clh-hero {
    position: relative;
    overflow: hidden;
    padding: 92px 0 84px;
    background:
        radial-gradient(circle at 80% 12%, rgba(0,169,218,.32), transparent 26%),
        radial-gradient(circle at 18% 22%, rgba(89,215,255,.2), transparent 28%),
        linear-gradient(135deg, #041e4f 0%, #082d68 52%, #051329 100%);
    color: white;
}

.clh-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 50px 50px;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent);
}

.clh-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
    align-items: center;
    gap: 50px;
}

.clh-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    background: rgba(0,169,218,.12);
    color: var(--clh-accent);
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.clh-hero .clh-kicker {
    background: rgba(255,255,255,.12);
    color: var(--clh-accent-2);
}

h1,
h2,
h3,
h4 {
    margin: 0 0 16px;
    color: inherit;
    line-height: 1.12;
    letter-spacing: -.035em;
}

.clh-hero h1 {
    margin-top: 18px;
    font-size: clamp(40px, 6vw, 74px);
    max-width: 860px;
}

.clh-hero p {
    font-size: clamp(17px, 2vw, 21px);
    max-width: 730px;
    color: rgba(255,255,255,.82);
}

.clh-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px;
}

.clh-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px;
}

.clh-trust-row span {
    padding: 9px 12px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.82);
    font-weight: 700;
    font-size: 14px;
}

.clh-hero-card {
    position: relative;
    min-height: 460px;
    border-radius: 36px;
    border: 1px solid rgba(255,255,255,.16);
    background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
    box-shadow: 0 30px 80px rgba(0,0,0,.22);
    overflow: hidden;
}

.clh-hero-orbit {
    position: absolute;
    inset: 34px;
    border: 1px dashed rgba(255,255,255,.24);
    border-radius: 32px;
}

.clh-hero-orbit span {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 86px;
    min-height: 46px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    color: var(--clh-primary);
    font-weight: 900;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
}

.clh-hero-orbit span:nth-child(1) { left: 7%; top: 10%; }
.clh-hero-orbit span:nth-child(2) { right: 8%; top: 18%; }
.clh-hero-orbit span:nth-child(3) { left: 15%; bottom: 18%; }
.clh-hero-orbit span:nth-child(4) { right: 10%; bottom: 16%; }
.clh-hero-orbit span:nth-child(5) { left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--clh-accent); color: white; }

.clh-status-card {
    position: absolute;
    left: 28px;
    right: 28px;
    bottom: 28px;
    padding: 24px;
    border-radius: 26px;
    background: rgba(4,30,79,.76);
    backdrop-filter: blur(16px);
    color: white;
}

.clh-status-card strong {
    display: block;
    margin-bottom: 6px;
    font-size: 21px;
}

.clh-status-card p {
    margin: 0;
    color: rgba(255,255,255,.78);
}

.clh-section {
    padding: 86px 0;
}

.clh-section-head {
    max-width: 760px;
    margin-bottom: 38px;
}

.clh-section-head.center {
    text-align: center;
    margin-inline: auto;
}

.clh-section-head h2,
.clh-two-col h2,
.clh-page-hero h1,
.clh-final-cta h2 {
    font-size: clamp(32px, 4vw, 52px);
}

.clh-section-head p,
.clh-two-col p,
.clh-page-hero p {
    color: var(--clh-muted);
    font-size: 18px;
}

.clh-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.clh-service-card,
.clh-form-card,
.clh-values-card,
.clh-service-aside,
.clh-widget,
.clh-list-post,
.clh-single-post,
.clh-post-card,
.clh-contact-card,
.clh-project-card {
    background: var(--clh-surface);
    border: 1px solid var(--clh-border);
    border-radius: var(--clh-radius);
    box-shadow: var(--clh-shadow);
}

.clh-service-card {
    padding: 28px;
    min-height: 310px;
    display: flex;
    flex-direction: column;
}

.clh-card-icon {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(0,169,218,.16), rgba(4,30,79,.08));
    color: var(--clh-accent);
    font-size: 13px;
    font-weight: 900;
    letter-spacing: -.02em;
}

.clh-service-card h3,
.clh-service-card h2 {
    font-size: 24px;
}

.clh-service-card p {
    color: var(--clh-muted);
    margin-bottom: 22px;
}

.clh-service-card a {
    margin-top: auto;
    font-weight: 900;
}

.clh-two-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .86fr);
    gap: 46px;
    align-items: center;
}

.clh-reverse {
    grid-template-columns: minmax(340px, .86fr) minmax(0, 1fr);
}

.clh-feature-band {
    background: linear-gradient(180deg, var(--clh-surface-2), transparent);
}

.clh-mini-list {
    padding: 0;
    margin: 26px 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.clh-mini-list li {
    position: relative;
    padding-left: 32px;
    color: var(--clh-muted);
    font-weight: 700;
}

.clh-mini-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,169,218,.12);
    color: var(--clh-accent);
    font-size: 13px;
    font-weight: 900;
}

.clh-visual-panel {
    min-height: 400px;
    padding: 32px;
    border-radius: 34px;
    background:
        radial-gradient(circle at 80% 10%, rgba(0,169,218,.24), transparent 28%),
        linear-gradient(135deg, var(--clh-primary), var(--clh-primary-2));
    color: white;
    box-shadow: var(--clh-shadow);
    overflow: hidden;
    position: relative;
}

.clh-visual-panel p {
    position: absolute;
    left: 32px;
    right: 32px;
    bottom: 28px;
    margin: 0;
    color: rgba(255,255,255,.8);
    font-weight: 700;
}

.clh-network-map {
    position: absolute;
    inset: 44px 44px 110px;
}

.clh-network-map::before,
.clh-network-map::after {
    content: "";
    position: absolute;
    inset: 16%;
    border: 1px dashed rgba(255,255,255,.24);
    border-radius: 30px;
}

.clh-network-map span {
    position: absolute;
    width: 62px;
    height: 62px;
    border-radius: 22px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

.clh-network-map span:nth-child(1) { left: 2%; top: 9%; }
.clh-network-map span:nth-child(2) { right: 8%; top: 14%; background: var(--clh-accent); }
.clh-network-map span:nth-child(3) { left: 46%; top: 40%; }
.clh-network-map span:nth-child(4) { left: 16%; bottom: 4%; background: var(--clh-accent); }
.clh-network-map span:nth-child(5) { right: 14%; bottom: 8%; }

.clh-camera-shape {
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    height: 150px;
    border-radius: 36px;
    background: rgba(255,255,255,.94);
}

.clh-camera-shape::before {
    content: "";
    position: absolute;
    right: -75px;
    top: 34px;
    width: 95px;
    height: 80px;
    clip-path: polygon(0 16%, 100% 0, 100% 100%, 0 84%);
    background: var(--clh-accent);
}

.clh-camera-shape span {
    position: absolute;
    left: 40px;
    top: 36px;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 16px solid var(--clh-primary);
    background: var(--clh-accent);
}

.clh-process {
    background: var(--clh-primary);
    color: white;
}

.clh-process .clh-section-head p,
.clh-process p {
    color: rgba(255,255,255,.72);
}

.clh-process-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.clh-process-grid > div {
    padding: 30px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 26px;
    background: rgba(255,255,255,.06);
}

.clh-process-grid span {
    display: inline-flex;
    margin-bottom: 18px;
    color: var(--clh-accent-2);
    font-weight: 900;
    letter-spacing: .08em;
}

.clh-quote-section {
    background: linear-gradient(180deg, transparent, var(--clh-surface-2));
}

.clh-form-card,
.clh-service-aside {
    padding: 28px;
}

.clh-quote-form {
    display: grid;
    gap: 16px;
}

.clh-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.clh-quote-form label {
    display: grid;
    gap: 8px;
    color: var(--clh-text);
    font-weight: 800;
}

.clh-quote-form span {
    font-size: 14px;
}

.clh-quote-form input,
.clh-quote-form select,
.clh-quote-form textarea,
.clh-search-form input {
    width: 100%;
    border: 1px solid var(--clh-border);
    border-radius: 16px;
    background: var(--clh-bg);
    color: var(--clh-text);
    padding: 13px 14px;
    outline: none;
}

.clh-quote-form input:focus,
.clh-quote-form select:focus,
.clh-quote-form textarea:focus,
.clh-search-form input:focus {
    border-color: var(--clh-accent);
    box-shadow: 0 0 0 4px rgba(0,169,218,.12);
}

.clh-hp-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

.clh-contact-pills,
.clh-socials {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.clh-contact-pills a,
.clh-socials a,
.clh-socials > span {
    padding: 10px 13px;
    border-radius: 999px;
    border: 1px solid var(--clh-border);
    background: var(--clh-surface);
    color: var(--clh-text);
    font-weight: 800;
    font-size: 14px;
}

.clh-socials a:hover,
.clh-contact-pills a:hover {
    border-color: var(--clh-accent);
    color: var(--clh-accent);
}

.clh-post-grid,
.clh-project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.clh-post-card {
    overflow: hidden;
}

.clh-post-thumb,
.clh-list-thumb,
.clh-single-thumb {
    display: block;
    overflow: hidden;
    background: var(--clh-surface-2);
}

.clh-post-thumb img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.clh-post-body {
    padding: 24px;
}

.clh-post-body span,
.clh-post-date {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--clh-accent);
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.clh-post-body h3 {
    font-size: 23px;
}

.clh-post-body p,
.clh-list-post p {
    color: var(--clh-muted);
}

.clh-read-more {
    font-weight: 900;
}

.clh-empty-posts {
    grid-column: 1 / -1;
    padding: 32px;
    border-radius: var(--clh-radius);
    background: var(--clh-surface);
    border: 1px dashed var(--clh-border);
}

.clh-project-card {
    overflow: hidden;
}

.clh-project-thumb {
    display: block;
    min-height: 240px;
    background: var(--clh-surface-2);
    overflow: hidden;
}

.clh-project-thumb img {
    width: 100%;
    height: 260px;
    display: block;
    object-fit: cover;
}

.clh-project-body {
    padding: 24px;
}

.clh-project-body span {
    display: inline-block;
    margin-bottom: 10px;
    color: var(--clh-accent);
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.clh-project-body h2,
.clh-project-body h3 {
    font-size: 24px;
    margin-top: 0;
}

.clh-project-body p {
    color: var(--clh-muted);
}

.clh-project-placeholder {
    position: relative;
    min-height: 260px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(4,30,79,.96), rgba(0,169,218,.82)),
        radial-gradient(circle at 18% 12%, rgba(255,255,255,.22), transparent 30%);
}

.clh-project-placeholder::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;
    height: 72%;
    border-radius: 20px 20px 0 0;
    background: rgba(255,255,255,.92);
    box-shadow: 0 20px 60px rgba(0,0,0,.24);
}

.clh-project-placeholder span {
    position: absolute;
    z-index: 1;
    width: 14%;
    height: 18%;
    border-radius: 8px;
    background: rgba(0,169,218,.72);
    box-shadow: 0 0 0 1px rgba(4,30,79,.08) inset;
}

.clh-project-placeholder span:nth-child(1) { left: 22%; top: 42%; }
.clh-project-placeholder span:nth-child(2) { left: 43%; top: 42%; }
.clh-project-placeholder span:nth-child(3) { left: 64%; top: 42%; }
.clh-project-placeholder span:nth-child(4) { left: 43%; top: 66%; }

.clh-project-placeholder em {
    position: absolute;
    z-index: 1;
    left: 18%;
    right: 18%;
    bottom: 18%;
    height: 8px;
    border-radius: 999px;
    background: var(--clh-primary);
    box-shadow: 0 20px 0 rgba(4,30,79,.18), 0 40px 0 rgba(4,30,79,.12);
}

.clh-project-single-placeholder {
    border-radius: var(--clh-radius);
    overflow: hidden;
    margin-bottom: 26px;
}

.clh-showcase-preview {
    background: linear-gradient(180deg, transparent, var(--clh-surface-2));
}

.clh-showcase-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.clh-final-cta {
    text-align: center;
    background:
        radial-gradient(circle at 20% 20%, rgba(0,169,218,.28), transparent 28%),
        linear-gradient(135deg, var(--clh-primary), #071329);
    color: white;
}

.clh-final-cta p {
    max-width: 720px;
    margin: 0 auto 28px;
    color: rgba(255,255,255,.76);
    font-size: 18px;
}

.clh-page-hero {
    padding: 72px 0;
    background:
        radial-gradient(circle at 90% 18%, rgba(0,169,218,.16), transparent 24%),
        linear-gradient(135deg, var(--clh-surface-2), var(--clh-bg));
    border-bottom: 1px solid var(--clh-border);
}

.clh-page-hero-inner {
    max-width: 900px;
}

.clh-page-hero h1 {
    margin-top: 18px;
}

.clh-content-wrap {
    max-width: 880px;
}

.clh-content-wrap h2,
.clh-content-wrap h3 {
    margin-top: 30px;
}

.clh-content-wrap p,
.clh-content-wrap li {
    color: var(--clh-muted);
    font-size: 17px;
}

.clh-content-wrap a {
    font-weight: 800;
}

.clh-check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 28px;
}

.clh-check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 16px;
    border-radius: 18px;
    background: var(--clh-surface);
    border: 1px solid var(--clh-border);
    color: var(--clh-text);
    font-weight: 800;
}

.clh-check-item span {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,169,218,.12);
    color: var(--clh-accent);
    font-weight: 900;
}

.clh-values-card,
.clh-contact-card {
    padding: 30px;
}

.clh-blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: start;
    gap: 32px;
}

.clh-post-list {
    display: grid;
    gap: 22px;
}

.clh-list-post {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 24px;
    padding: 18px;
}

.clh-list-thumb {
    border-radius: 18px;
}

.clh-list-thumb img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
}

.clh-list-post h2 {
    font-size: 28px;
}

.clh-single-post {
    overflow: hidden;
}

.clh-single-thumb img {
    width: 100%;
    max-height: 470px;
    object-fit: cover;
    display: block;
}

.clh-single-post .clh-content-wrap {
    padding: 34px;
    max-width: none;
}

.clh-post-nav {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 34px 34px;
    font-weight: 900;
}

.clh-sidebar {
    display: grid;
    gap: 20px;
}

.clh-widget {
    padding: 24px;
}

.clh-widget-title {
    font-size: 21px;
}

.clh-widget ul {
    padding-left: 18px;
    margin: 0;
}

.clh-widget li {
    margin-bottom: 10px;
}

.clh-search-form {
    display: flex;
    gap: 10px;
}

.clh-search-form label {
    flex: 1;
}

.clh-search-form button {
    border: 0;
    border-radius: 14px;
    padding: 0 14px;
    background: var(--clh-accent);
    color: white;
    font-weight: 900;
}

.clh-pagination {
    margin-top: 12px;
}

.clh-pagination .nav-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.clh-pagination a,
.clh-pagination span {
    display: inline-flex;
    min-width: 42px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--clh-border);
    background: var(--clh-surface);
    font-weight: 900;
}

.clh-pagination .current {
    background: var(--clh-accent);
    color: white;
}

.clh-ad-slot {
    width: min(1180px, calc(100% - 40px));
    margin: 24px auto;
    min-height: 90px;
    border-radius: 18px;
    overflow: hidden;
}

.clh-sidebar .clh-ad-slot {
    width: 100%;
    margin: 0;
}

.clh-alert {
    position: fixed;
    z-index: 300;
    top: 92px;
    left: 50%;
    transform: translateX(-50%);
    width: min(680px, calc(100% - 40px));
    padding: 14px 18px;
    border-radius: 16px;
    background: var(--clh-surface);
    border: 1px solid var(--clh-border);
    box-shadow: var(--clh-shadow);
    color: var(--clh-text);
    font-weight: 800;
}

.clh-alert-success {
    border-color: rgba(0,169,218,.38);
}

.clh-popup {
    position: fixed;
    inset: 0;
    z-index: 240;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.clh-popup.is-open {
    display: flex;
}

.clh-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 10, 24, .72);
    backdrop-filter: blur(8px);
}

.clh-popup-card {
    position: relative;
    width: min(720px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    padding: 34px;
    border-radius: 30px;
    border: 1px solid var(--clh-border);
    background: var(--clh-surface);
    color: var(--clh-text);
    box-shadow: 0 30px 90px rgba(0,0,0,.36);
}

.clh-popup-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--clh-border);
    border-radius: 50%;
    background: var(--clh-surface-2);
    color: var(--clh-text);
    font-size: 24px;
    line-height: 1;
}

.clh-popup-highlight {
    margin-top: 20px;
    padding: 18px;
    border-radius: 20px;
    background: var(--clh-surface-2);
    border: 1px solid var(--clh-border);
    display: grid;
    gap: 4px;
}

.clh-popup-highlight strong {
    color: var(--clh-text);
}

.clh-popup-highlight span {
    color: var(--clh-muted);
}

.clh-popup-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.clh-popup-form {
    display: none;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--clh-border);
}

.clh-popup-form.is-visible {
    display: block;
}

.clh-footer {
    padding: 68px 0 24px;
    background: #041e4f;
    color: white;
}

.clh-footer a {
    color: rgba(255,255,255,.78);
}

.clh-footer a:hover {
    color: var(--clh-accent-2);
}

.clh-footer-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(0, .75fr));
    gap: 34px;
}

.clh-footer-logo {
    display: inline-flex;
    max-width: 260px;
    margin-bottom: 18px;
}

.clh-footer .clh-logo-light {
    display: none;
}

.clh-footer .clh-logo-dark {
    display: block;
}

.clh-footer-brand p {
    max-width: 360px;
    color: rgba(255,255,255,.72);
}

.clh-footer h3 {
    font-size: 19px;
}

.clh-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
    color: rgba(255,255,255,.72);
}

.clh-footer .clh-socials a,
.clh-footer .clh-socials > span {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.14);
    color: rgba(255,255,255,.82);
}

.clh-footer-bottom {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid rgba(255,255,255,.12);
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    color: rgba(255,255,255,.72);
}

.clh-footer-bottom p {
    margin: 0;
}

.clh-footer-bottom div {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

@media (max-width: 1024px) {
    .clh-header-inner {
        flex-wrap: wrap;
        padding: 16px 0;
    }

    .clh-menu-toggle {
        display: inline-flex;
    }

    .clh-main-nav {
        order: 3;
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        margin-left: 0;
        padding: 16px;
        border: 1px solid var(--clh-border);
        border-radius: 22px;
        background: var(--clh-surface);
    }

    .clh-main-nav.is-open {
        display: flex;
    }

    .clh-menu {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .clh-menu > li > a {
        justify-content: space-between;
        border-radius: 14px;
    }

    .clh-menu .sub-menu {
        position: static;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        min-width: 0;
        box-shadow: none;
        margin: 6px 0 10px 18px;
        background: var(--clh-bg);
    }

    .clh-header-quote {
        width: 100%;
    }

    .clh-hero-grid,
    .clh-two-col,
    .clh-reverse,
    .clh-blog-layout {
        grid-template-columns: 1fr;
    }

    .clh-hero-card {
        min-height: 360px;
    }

    .clh-card-grid,
    .clh-post-grid,
    .clh-project-grid,
    .clh-process-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .clh-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 720px) {
    .clh-container {
        width: min(100% - 28px, 1180px);
    }

    .clh-policy-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 8px 0;
        gap: 6px;
    }

    .clh-date-wrap {
        margin-left: 0;
        white-space: normal;
    }

    .clh-legal-menu {
        gap: 10px;
        font-size: 12px;
    }

    .clh-logo-img {
        width: min(210px, 66vw);
        max-height: 62px;
    }

    .clh-hero {
        padding: 62px 0;
    }

    .clh-hero h1 {
        font-size: clamp(34px, 10vw, 46px);
    }

    .clh-hero-card {
        min-height: 320px;
    }

    .clh-hero-orbit span {
        min-width: 70px;
        min-height: 40px;
        font-size: 12px;
    }

    .clh-section {
        padding: 58px 0;
    }

    .clh-card-grid,
    .clh-post-grid,
    .clh-project-grid,
    .clh-process-grid,
    .clh-form-grid,
    .clh-check-grid,
    .clh-footer-grid {
        grid-template-columns: 1fr;
    }

    .clh-list-post {
        grid-template-columns: 1fr;
    }

    .clh-popup-card {
        padding: 26px 18px;
    }

    .clh-footer-bottom {
        flex-direction: column;
    }
}

@media (max-width: 420px) {
    .clh-hero-actions,
    .clh-popup-actions,
    .clh-showcase-cta {
        flex-direction: column;
    }

    .clh-btn {
        width: 100%;
    }

    .clh-hero-orbit {
        inset: 22px;
    }
}


/* v1.3 professional service images, social network section, and showcase polish */
.clh-service-card {
    padding: 0;
    overflow: hidden;
}

.clh-service-card .clh-card-icon,
.clh-service-card h3,
.clh-service-card p,
.clh-service-card > a:not(.clh-service-image) {
    margin-left: 24px;
    margin-right: 24px;
}

.clh-service-card .clh-card-icon {
    margin-top: 22px;
}

.clh-service-card > a:not(.clh-service-image) {
    margin-bottom: 26px;
}

.clh-service-image {
    display: block;
    width: 100%;
    height: 178px;
    overflow: hidden;
    margin: 0;
    border-radius: var(--clh-radius) var(--clh-radius) 0 0;
    background: var(--clh-primary);
}

.clh-service-card-img,
.clh-feature-img,
.clh-service-main-img,
.clh-project-fallback-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.clh-service-image:hover img {
    transform: scale(1.035);
}

.clh-service-image img {
    transition: transform .35s ease;
}

.clh-visual-image-panel {
    padding: 0;
}

.clh-visual-image-panel .clh-feature-img {
    min-height: 400px;
    object-fit: cover;
}

.clh-visual-image-panel p {
    left: 18px;
    right: 18px;
    bottom: 18px;
    padding: 13px 16px;
    border-radius: 18px;
    background: rgba(4,30,79,.78);
    backdrop-filter: blur(12px);
}

.clh-service-hero-inner {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .82fr);
    align-items: center;
    gap: 46px;
}

.clh-service-hero-image {
    border-radius: 34px;
    overflow: hidden;
    box-shadow: var(--clh-shadow);
    border: 1px solid var(--clh-border);
    background: var(--clh-primary);
}

.clh-service-main-img {
    min-height: 360px;
}

.clh-project-thumb-fallback {
    background: var(--clh-primary);
}

.clh-social-connect {
    background:
        radial-gradient(circle at 8% 14%, rgba(0,169,218,.18), transparent 26%),
        linear-gradient(180deg, var(--clh-surface-2), transparent);
}

.clh-social-connect-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr);
    align-items: center;
    gap: 36px;
    padding: 34px;
    border: 1px solid var(--clh-border);
    border-radius: 34px;
    background: var(--clh-surface);
    box-shadow: var(--clh-shadow);
}

.clh-social-connect h2 {
    margin: 12px 0;
    font-size: clamp(30px, 4vw, 48px);
}

.clh-social-connect p {
    color: var(--clh-muted);
    font-size: 18px;
    margin: 0;
}

.clh-social-connect .clh-socials {
    justify-content: flex-end;
    margin-top: 0;
}

.clh-socials a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.clh-socials a b {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--clh-accent), var(--clh-primary-2));
    color: #fff;
    font-size: 12px;
    line-height: 1;
}

.clh-socials a span {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}

@media (max-width: 1024px) {
    .clh-service-hero-inner,
    .clh-social-connect-inner {
        grid-template-columns: 1fr;
    }

    .clh-social-connect .clh-socials {
        justify-content: flex-start;
    }
}

@media (max-width: 720px) {
    .clh-service-image {
        height: 190px;
    }

    .clh-service-main-img,
    .clh-visual-image-panel .clh-feature-img {
        min-height: 280px;
    }

    .clh-social-connect-inner {
        padding: 22px;
    }
}


/* v1.5 quotation fixes */
.clh-quote-form small {
    color: var(--clh-muted);
    font-weight: 700;
}

.clh-popup-card .clh-popup-form {
    display: block;
    margin-top: 18px;
}

.clh-popup-card .clh-popup-actions {
    justify-content: flex-start;
}

.clh-popup-highlight {
    display: none;
}

.clh-footer-brand .clh-social-links {
    margin-top: 18px;
}

.clh-social-links {
    flex-wrap: wrap;
}


/* v1.6 services page alignment fix */
.clh-service-card h2 {
    margin-left: 24px;
    margin-right: 24px;
    margin-top: 0;
    line-height: 1.22;
}

.clh-services-page-card {
    min-height: 100%;
}

.clh-services-page-card .clh-service-image {
    height: 196px;
}

.clh-services-page-card .clh-card-icon {
    margin-top: 24px;
}

.clh-services-page-card p {
    min-height: 78px;
}

@media (max-width: 980px) {
    .clh-services-page-card p {
        min-height: auto;
    }
}

@media (max-width: 720px) {
    .clh-services-page-card .clh-service-image {
        height: 210px;
    }

    .clh-service-card h2 {
        font-size: 23px;
    }
}


/* v1.6.1 targeted fix: mobile responsive menu + quote popup behavior only */
body.clh-menu-open,
body.clh-popup-open {
    overflow: hidden;
}

.clh-submenu-toggle {
    display: none;
}

@media (max-width: 1024px) {
    .clh-main-nav.is-open {
        max-height: calc(100vh - 130px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .clh-menu .menu-item-has-children {
        position: relative;
    }

    .clh-menu > li.menu-item-has-children > a {
        padding-right: 58px;
    }

    .clh-menu .sub-menu {
        display: none;
        position: static;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        min-width: 0;
        box-shadow: none;
        border: 0;
        margin: 4px 0 12px 14px;
        padding: 6px 0 4px;
        background: transparent;
    }

    .clh-menu .menu-item-has-children.clh-submenu-open > .sub-menu {
        display: block;
    }

    .clh-menu .sub-menu a {
        display: block;
        margin: 6px 0;
        padding: 11px 12px;
        border-radius: 12px;
        background: var(--clh-bg);
    }

    .clh-submenu-toggle {
        display: inline-flex;
        position: absolute;
        top: 6px;
        right: 6px;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--clh-border);
        border-radius: 12px;
        background: var(--clh-surface-2);
        color: var(--clh-text);
        font-size: 22px;
        font-weight: 900;
        line-height: 1;
        z-index: 5;
    }

    .clh-submenu-toggle::before {
        content: "+";
    }

    .clh-submenu-open > .clh-submenu-toggle::before {
        content: "−";
    }
}

@media (max-width: 720px) {
    .clh-popup {
        padding: 10px;
    }

    .clh-popup-card {
        width: min(100%, 96vw);
        max-height: calc(100vh - 20px);
        padding: 24px 18px;
        border-radius: 24px;
    }
}


/* v1.6.2 targeted menu polish: professional arrow dropdown behavior */
.clh-menu .menu-item-has-children > a {
    cursor: pointer;
}

.clh-menu .menu-item-has-children > a::after {
    content: "⌄";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 7px;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
    color: var(--clh-accent);
    transition: transform .2s ease;
}

.clh-menu .menu-item-has-children:hover > a::after,
.clh-menu .menu-item-has-children:focus-within > a::after,
.clh-menu .menu-item-has-children.clh-submenu-open > a::after {
    transform: rotate(180deg);
}

.clh-submenu-toggle {
    display: none !important;
}

@media (max-width: 1024px) {
    .clh-menu > li.menu-item-has-children > a {
        padding-right: 14px;
        justify-content: space-between;
        cursor: pointer;
    }

    .clh-menu .menu-item-has-children > a::after {
        content: "⌄";
        margin-left: auto;
        font-size: 18px;
    }

    .clh-menu .menu-item-has-children.clh-submenu-open > a::after {
        transform: rotate(180deg);
    }

    .clh-menu .sub-menu {
        display: none;
        position: static;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        min-width: 0;
        box-shadow: none;
        border: 0;
        margin: 4px 0 12px 14px;
        padding: 6px 0 4px;
        background: transparent;
    }

    .clh-menu .menu-item-has-children.clh-submenu-open > .sub-menu {
        display: block;
    }
}


/* v1.6.3 final dropdown arrow + stable desktop submenu fix */
.clh-menu .menu-item-has-children > a::after {
    content: "" !important;
    width: 8px;
    height: 8px;
    margin-left: 9px;
    border-right: 2px solid var(--clh-accent);
    border-bottom: 2px solid var(--clh-accent);
    transform: rotate(45deg);
    transition: transform .22s ease, margin-top .22s ease;
    flex: 0 0 auto;
}

/* Desktop: arrow faces up while hover/open */
.clh-menu .menu-item-has-children:hover > a::after,
.clh-menu .menu-item-has-children:focus-within > a::after,
.clh-menu .menu-item-has-children.clh-desktop-submenu-open > a::after,
.clh-menu .menu-item-has-children.clh-submenu-open > a::after {
    transform: rotate(-135deg);
    margin-top: 5px;
}

/* Desktop dropdown: remove the hover gap and allow stable hover */
@media (min-width: 1025px) {
    .clh-menu .menu-item-has-children {
        position: relative;
    }

    .clh-menu .sub-menu {
        top: 100% !important;
        margin-top: 0 !important;
        padding-top: 12px;
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
        visibility: hidden;
        transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    }

    .clh-menu li:hover > .sub-menu,
    .clh-menu li:focus-within > .sub-menu,
    .clh-menu li.clh-desktop-submenu-open > .sub-menu {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
        visibility: visible;
    }

    /* Invisible bridge so cursor can move from Services to submenu without dropdown disappearing */
    .clh-menu .menu-item-has-children > .sub-menu::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: -16px;
        height: 16px;
        background: transparent;
    }
}

/* Mobile: parent click opens submenu; arrow rotates up/down */
@media (max-width: 1024px) {
    .clh-menu .menu-item-has-children > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .clh-menu .menu-item-has-children > a::after {
        width: 8px;
        height: 8px;
        margin-left: auto;
        margin-right: 4px;
        transform: rotate(45deg);
    }

    .clh-menu .menu-item-has-children.clh-submenu-open > a::after {
        transform: rotate(-135deg);
        margin-top: 5px;
    }

    .clh-menu .sub-menu {
        display: none;
    }

    .clh-menu .menu-item-has-children.clh-submenu-open > .sub-menu {
        display: block;
    }
}


/* v1.6.4 targeted fix: no desktop delay; mobile Services click toggles submenu and arrow */
@media (min-width: 1025px) {
    .clh-menu li.clh-desktop-submenu-open > .sub-menu {
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
        visibility: hidden;
    }

    .clh-menu li:hover > .sub-menu,
    .clh-menu li:focus-within > .sub-menu {
        opacity: 1 !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
        visibility: visible !important;
    }

    .clh-menu li.clh-desktop-submenu-open > a::after {
        transform: rotate(45deg);
        margin-top: 0;
    }

    .clh-menu li:hover > a::after,
    .clh-menu li:focus-within > a::after {
        transform: rotate(-135deg) !important;
        margin-top: 5px !important;
    }
}

@media (max-width: 1024px) {
    .clh-menu .menu-item-has-children > a::after {
        transform: rotate(45deg) !important;
        margin-top: 0;
    }

    .clh-menu .menu-item-has-children.clh-submenu-open > a::after {
        transform: rotate(-135deg) !important;
        margin-top: 5px !important;
    }

    .clh-menu .menu-item-has-children > .sub-menu {
        display: none !important;
    }

    .clh-menu .menu-item-has-children.clh-submenu-open > .sub-menu {
        display: block !important;
    }
}


/* v1.6.5 patch: 3D service image series + animated feature strip on homepage */
.clh-feature-ticker {
    overflow: hidden;
    background: linear-gradient(90deg, rgba(4,30,79,.98), rgba(6,44,114,.98));
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.clh-feature-ticker-track {
    display: flex;
    align-items: center;
    gap: 18px;
    width: max-content;
    min-width: 200%;
    padding: 12px 0;
    animation: clhTickerMove 28s linear infinite;
}

.clh-feature-ticker:hover .clh-feature-ticker-track {
    animation-play-state: paused;
}

.clh-feature-ticker-track span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .01em;
    color: rgba(255,255,255,.92);
}

.clh-feature-ticker-track span::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clh-accent), var(--clh-accent-2));
    box-shadow: 0 0 0 6px rgba(0,169,218,.14);
    flex: 0 0 auto;
}

@keyframes clhTickerMove {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.clh-service-image {
    display: block;
    overflow: hidden;
    border-radius: 22px;
    background: var(--clh-surface-2);
    border: 1px solid var(--clh-border);
}

.clh-service-card-img,
.clh-feature-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.clh-service-card .clh-service-image .clh-service-card-img {
    aspect-ratio: 16 / 10;
    min-height: 190px;
}

.clh-visual-image-panel .clh-feature-img {
    border-radius: 24px;
    box-shadow: 0 16px 38px rgba(4,30,79,.14);
}

@media (max-width: 1024px) {
    .clh-feature-ticker-track {
        gap: 16px;
        min-width: 240%;
        animation-duration: 24s;
    }
}

@media (max-width: 720px) {
    .clh-feature-ticker-track {
        padding: 10px 0;
        min-width: 300%;
        animation-duration: 22s;
    }

    .clh-feature-ticker-track span {
        font-size: 13px;
    }

    .clh-service-card .clh-service-image .clh-service-card-img {
        min-height: 170px;
    }
}


/* v1.6.5.1 minimal patch: keep hero design, only reduce gap and improve hero text spacing */
.clh-feature-ticker + .clh-hero {
    padding-top: 56px;
}

.clh-hero {
    padding-bottom: 42px;
}

.clh-hero-grid {
    gap: 34px;
    align-items: center;
}

.clh-hero-content {
    max-width: 680px;
}

.clh-hero h1 {
    max-width: 720px;
    margin-bottom: 16px;
    line-height: 1.08;
}

.clh-hero p {
    max-width: 620px;
    margin-bottom: 0;
    line-height: 1.72;
}

.clh-hero-actions {
    margin-top: 24px;
}

.clh-trust-row {
    margin-top: 20px;
}

.clh-services-overview {
    padding-top: 40px;
}

.clh-section-head {
    margin-bottom: 30px;
}

.clh-section-head p {
    max-width: 720px;
    line-height: 1.7;
}

@media (max-width: 1024px) {
    .clh-feature-ticker + .clh-hero {
        padding-top: 46px;
    }

    .clh-hero {
        padding-bottom: 36px;
    }

    .clh-hero-grid {
        gap: 28px;
    }

    .clh-services-overview {
        padding-top: 34px;
    }
}

@media (max-width: 720px) {
    .clh-feature-ticker + .clh-hero {
        padding-top: 34px;
    }

    .clh-hero {
        padding-bottom: 28px;
    }

    .clh-hero-grid {
        gap: 22px;
    }

    .clh-hero h1 {
        margin-bottom: 12px;
        line-height: 1.1;
    }

    .clh-hero p {
        line-height: 1.66;
    }

    .clh-hero-actions {
        margin-top: 18px;
    }

    .clh-trust-row {
        margin-top: 16px;
    }

    .clh-services-overview {
        padding-top: 28px;
    }

    .clh-section-head {
        margin-bottom: 24px;
    }
}


/* v1.6.5.2 minimal patch: remove hero trust/support text row */
.clh-trust-row {
    display: none !important;
}


/* v1.6.5.3 hero polish patch: better alignment + typing style heading */
.clh-hero-content {
    max-width: 700px;
}

.clh-hero .clh-kicker {
    margin-bottom: 12px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}

.clh-hero-title {
    position: relative;
    max-width: 760px;
    margin: 0 0 18px;
    font-size: clamp(40px, 6vw, 78px);
    line-height: 1.02;
    letter-spacing: -.045em;
    text-wrap: balance;
    text-shadow: 0 8px 24px rgba(0, 0, 0, .20);
}

.clh-hero-title-text {
    display: inline;
    color: #ffffff;
}

.clh-typing-caret {
    display: inline-block;
    width: 3px;
    height: 1em;
    margin-left: 8px;
    vertical-align: -0.08em;
    border-radius: 999px;
    background: var(--clh-accent);
    box-shadow: 0 0 16px rgba(0, 169, 218, .5);
    animation: clhCaretBlink .85s step-end infinite;
}

@keyframes clhCaretBlink {
    0%, 48% { opacity: 1; }
    49%, 100% { opacity: 0; }
}

.clh-hero-subtitle {
    position: relative;
    max-width: 635px;
    margin: 0;
    padding-left: 18px;
    font-size: clamp(17px, 2vw, 21px);
    line-height: 1.76;
    color: rgba(255,255,255,.86);
}

.clh-hero-subtitle::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    bottom: 0.2em;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--clh-accent), var(--clh-accent-2));
    box-shadow: 0 0 18px rgba(0, 169, 218, .24);
}

.clh-hero-actions {
    align-items: center;
    margin-top: 28px;
}

.clh-hero-actions .clh-btn {
    min-width: 180px;
    justify-content: center;
}

@media (max-width: 1024px) {
    .clh-hero-title {
        max-width: 100%;
        margin-bottom: 16px;
        line-height: 1.04;
    }

    .clh-hero-subtitle {
        max-width: 100%;
        padding-left: 16px;
        line-height: 1.72;
    }
}

@media (max-width: 720px) {
    .clh-hero .clh-kicker {
        margin-bottom: 10px;
    }

    .clh-hero-title {
        font-size: clamp(34px, 11vw, 54px);
        margin-bottom: 14px;
        line-height: 1.05;
        text-wrap: pretty;
    }

    .clh-typing-caret {
        width: 2px;
        margin-left: 6px;
    }

    .clh-hero-subtitle {
        padding-left: 14px;
        font-size: 15.5px;
        line-height: 1.68;
    }

    .clh-hero-actions {
        gap: 12px;
        margin-top: 22px;
    }

    .clh-hero-actions .clh-btn {
        min-width: 0;
        width: auto;
    }
}


/* v1.6.5.4 hero typing refine patch: balanced speed, no end-caret, cleaner heading scale */
.clh-hero-title {
    max-width: 740px;
    margin: 0 0 16px;
    font-size: clamp(38px, 5.6vw, 70px);
    line-height: 1.04;
    letter-spacing: -0.04em;
    font-weight: 800;
    text-wrap: balance;
    text-shadow: 0 8px 22px rgba(0, 0, 0, .18);
}

.clh-hero-title-text {
    display: inline;
    color: #ffffff;
}

.clh-typing-caret {
    display: inline-block;
    width: 3px;
    height: 0.98em;
    margin-left: 7px;
    vertical-align: -0.08em;
    border-radius: 999px;
    background: var(--clh-accent);
    box-shadow: 0 0 16px rgba(0, 169, 218, .44);
    animation: clhCaretBlink .9s step-end infinite;
}

.clh-hero-title.is-typing-complete .clh-typing-caret,
.clh-typing-caret.is-hidden {
    display: none !important;
}

.clh-hero-subtitle {
    max-width: 625px;
    line-height: 1.74;
}

@media (max-width: 1024px) {
    .clh-hero-title {
        max-width: 100%;
        font-size: clamp(36px, 6.3vw, 58px);
        line-height: 1.05;
    }
}

@media (max-width: 720px) {
    .clh-hero-title {
        font-size: clamp(32px, 10vw, 48px);
        margin-bottom: 12px;
        line-height: 1.07;
        letter-spacing: -0.035em;
    }

    .clh-typing-caret {
        width: 2px;
        margin-left: 5px;
    }

    .clh-hero-subtitle {
        font-size: 15.5px;
        line-height: 1.66;
    }
}


/* v1.6.5.5 patch: slower typing, retrigger on re-enter, slightly smaller hero title */
.clh-hero-title {
    max-width: 720px;
    margin: 0 0 16px;
    font-size: clamp(36px, 5.1vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.038em;
    font-weight: 800;
    text-wrap: balance;
}

.clh-hero-subtitle {
    max-width: 620px;
}

@media (max-width: 1024px) {
    .clh-hero-title {
        font-size: clamp(34px, 6vw, 54px);
        line-height: 1.06;
    }
}

@media (max-width: 720px) {
    .clh-hero-title {
        font-size: clamp(30px, 9.2vw, 44px);
        margin-bottom: 12px;
        line-height: 1.08;
        letter-spacing: -0.03em;
    }

    .clh-hero-subtitle {
        font-size: 15px;
        line-height: 1.64;
    }
}


/* v1.6.5.6 patch: hero heading wraps better and right info box aligned cleaner */
.clh-hero-grid {
    grid-template-columns: minmax(0, 1.28fr) minmax(320px, .72fr);
    gap: 34px;
    align-items: center;
}

.clh-hero-content {
    max-width: 780px;
}

.clh-hero-title {
    max-width: 860px;
    font-size: clamp(34px, 4.9vw, 60px);
    line-height: 1.06;
    letter-spacing: -0.038em;
}

.clh-hero-subtitle {
    max-width: 640px;
}

.clh-hero-card {
    min-height: 430px;
}

.clh-status-card {
    left: auto;
    right: 22px;
    bottom: 22px;
    width: min(360px, calc(100% - 44px));
    padding: 22px 24px;
    border-radius: 24px;
}

.clh-status-card strong {
    margin-bottom: 8px;
    font-size: 22px;
}

.clh-status-card p {
    max-width: none;
    line-height: 1.72;
}

@media (max-width: 1180px) {
    .clh-hero-grid {
        grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
        gap: 30px;
    }

    .clh-hero-title {
        max-width: 760px;
        font-size: clamp(34px, 5.3vw, 56px);
    }

    .clh-status-card {
        width: min(330px, calc(100% - 38px));
        right: 19px;
        bottom: 19px;
        padding: 20px 22px;
    }
}

@media (max-width: 1024px) {
    .clh-hero-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .clh-hero-content {
        max-width: 100%;
    }

    .clh-hero-title {
        max-width: 100%;
        font-size: clamp(33px, 6.1vw, 50px);
        line-height: 1.07;
    }

    .clh-status-card {
        left: 18px;
        right: 18px;
        width: auto;
        bottom: 18px;
        padding: 18px 20px;
    }
}

@media (max-width: 720px) {
    .clh-hero-title {
        font-size: clamp(29px, 8.8vw, 42px);
        line-height: 1.08;
        letter-spacing: -0.028em;
    }

    .clh-hero-card {
        min-height: 400px;
    }

    .clh-status-card {
        left: 14px;
        right: 14px;
        bottom: 14px;
        padding: 15px 16px;
        border-radius: 20px;
    }

    .clh-status-card strong {
        font-size: 18px;
    }

    .clh-status-card p {
        line-height: 1.64;
    }
}


/* v1.6.5.7 patch: redesigned hero right-side info box with visual + subtle animation */
.clh-status-card {
    overflow: hidden;
    background:
        radial-gradient(circle at top right, rgba(0,169,218,.18), transparent 34%),
        linear-gradient(180deg, rgba(4,30,79,.88), rgba(4,30,79,.78));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 40px rgba(0,0,0,.24);
}

.clh-status-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent, rgba(255,255,255,.03), transparent);
    transform: translateX(-100%);
    animation: clhStatusSheen 5.8s linear infinite;
    pointer-events: none;
}

@keyframes clhStatusSheen {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.clh-status-visual {
    position: relative;
    min-height: 112px;
    margin-bottom: 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}

.clh-status-visual::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 14px;
    border: 1px dashed rgba(255,255,255,.12);
}

.clh-status-node,
.clh-status-line {
    position: absolute;
}

.clh-status-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--clh-primary);
    background: rgba(255,255,255,.96);
    box-shadow: 0 10px 24px rgba(0,0,0,.16);
    animation: clhNodeFloat 4.2s ease-in-out infinite;
    z-index: 2;
}

.clh-status-node-main {
    left: 50%;
    top: 50%;
    min-width: 88px;
    height: 38px;
    transform: translate(-50%, -50%);
    color: white;
    background: linear-gradient(135deg, var(--clh-accent), var(--clh-accent-2));
    box-shadow: 0 12px 28px rgba(0,169,218,.32);
    animation-duration: 4.8s;
}

.clh-status-node-1 {
    left: 20px;
    top: 18px;
    animation-delay: .2s;
}

.clh-status-node-2 {
    right: 20px;
    top: 18px;
    animation-delay: .9s;
}

.clh-status-node-3 {
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    animation-delay: 1.5s;
}

.clh-status-line {
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0,169,218,.15), rgba(0,169,218,.95), rgba(255,255,255,.18));
    box-shadow: 0 0 14px rgba(0,169,218,.22);
    z-index: 1;
    animation: clhLinePulse 2.8s ease-in-out infinite;
}

.clh-status-line-1 {
    left: 86px;
    top: 46px;
    width: 94px;
    transform: rotate(16deg);
}

.clh-status-line-2 {
    right: 86px;
    top: 46px;
    width: 94px;
    transform: rotate(-16deg);
}

.clh-status-line-3 {
    left: 50%;
    bottom: 45px;
    width: 98px;
    transform: translateX(-50%) rotate(90deg);
}

@keyframes clhNodeFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -5px; }
}

@keyframes clhLinePulse {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

.clh-status-copy strong {
    display: block;
    margin-bottom: 8px;
    font-size: 22px;
    line-height: 1.18;
    color: #fff;
    letter-spacing: -.02em;
}

.clh-status-copy p {
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 16px;
    line-height: 1.72;
}

@media (max-width: 1024px) {
    .clh-status-visual {
        min-height: 102px;
        margin-bottom: 14px;
    }

    .clh-status-copy strong {
        font-size: 20px;
    }

    .clh-status-copy p {
        font-size: 15px;
        line-height: 1.66;
    }
}

@media (max-width: 720px) {
    .clh-status-visual {
        min-height: 92px;
        margin-bottom: 12px;
        border-radius: 16px;
    }

    .clh-status-node {
        min-width: 56px;
        height: 30px;
        font-size: 12px;
        padding: 0 10px;
    }

    .clh-status-node-main {
        min-width: 74px;
        height: 34px;
    }

    .clh-status-node-1 {
        left: 14px;
        top: 14px;
    }

    .clh-status-node-2 {
        right: 14px;
        top: 14px;
    }

    .clh-status-node-3 {
        bottom: 12px;
    }

    .clh-status-line-1,
    .clh-status-line-2 {
        width: 74px;
        top: 38px;
    }

    .clh-status-line-3 {
        width: 76px;
        bottom: 38px;
    }

    .clh-status-copy strong {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .clh-status-copy p {
        font-size: 14px;
        line-height: 1.58;
    }
}


/* v1.6.5.8 patch: redesigned hero right card + flexible static ad areas */
.clh-hero-card {
    min-height: 470px;
    padding: 24px;
    border-radius: 34px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.05)),
        radial-gradient(circle at top right, rgba(0,169,218,.18), transparent 34%);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 28px 80px rgba(0,0,0,.22);
}

.clh-hero-panel {
    position: relative;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 8px;
}

.clh-hero-panel-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.clh-hero-panel-kicker,
.clh-hero-panel-live {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
}

.clh-hero-panel-live {
    color: var(--clh-accent-2);
}

.clh-hero-network {
    position: relative;
    min-height: 220px;
    border-radius: 28px;
    padding: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(0,169,218,.20), transparent 30%),
        linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.10);
}

.clh-hero-network::before {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 22px;
    border: 1px dashed rgba(255,255,255,.14);
}

.clh-network-node,
.clh-network-beam {
    position: absolute;
    z-index: 2;
}

.clh-network-node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    color: var(--clh-primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.01em;
    box-shadow: 0 14px 32px rgba(0,0,0,.16);
    white-space: nowrap;
}

.clh-network-node-center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-height: 48px;
    padding-inline: 22px;
    color: white;
    background: linear-gradient(135deg, var(--clh-accent), var(--clh-accent-2));
    box-shadow: 0 16px 34px rgba(0,169,218,.30);
}

.clh-network-node-it {
    left: 22px;
    top: 26px;
}

.clh-network-node-network {
    right: 22px;
    top: 34px;
}

.clh-network-node-cctv {
    right: 28px;
    bottom: 30px;
}

.clh-network-node-web {
    left: 32px;
    bottom: 34px;
}

.clh-network-beam {
    height: 2px;
    border-radius: 999px;
    z-index: 1;
    background: linear-gradient(90deg, rgba(0,169,218,.08), rgba(0,169,218,.92), rgba(255,255,255,.10));
    box-shadow: 0 0 16px rgba(0,169,218,.24);
    animation: clhBeamPulse 3s ease-in-out infinite;
}

.clh-network-beam-1 {
    left: 120px;
    top: 82px;
    width: 122px;
    transform: rotate(18deg);
}

.clh-network-beam-2 {
    right: 128px;
    top: 88px;
    width: 116px;
    transform: rotate(-18deg);
}

.clh-network-beam-3 {
    right: 128px;
    bottom: 84px;
    width: 116px;
    transform: rotate(18deg);
}

.clh-network-beam-4 {
    left: 124px;
    bottom: 88px;
    width: 116px;
    transform: rotate(-18deg);
}

@keyframes clhBeamPulse {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

.clh-status-card {
    position: static;
    padding: 24px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(4,30,79,.88), rgba(4,30,79,.78));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 36px rgba(0,0,0,.20);
}

.clh-status-copy strong {
    display: block;
    margin-bottom: 10px;
    font-size: 28px;
    line-height: 1.06;
    letter-spacing: -.03em;
    color: #ffffff;
}

.clh-status-copy p {
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 16px;
    line-height: 1.7;
}

.clh-status-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.clh-status-highlights span {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.07);
}

.clh-custom-ad-slot {
    padding: 20px 0 0;
}

.clh-custom-ad-slot.hero-bottom-ad {
    padding-top: 22px;
}

.clh-custom-ad-slot.services-bottom-ad {
    padding-top: 6px;
    padding-bottom: 10px;
}

.clh-custom-ad-slot.footer-center-ad {
    padding-top: 22px;
    padding-bottom: 6px;
}

.clh-custom-ad-card {
    padding: 16px;
    border-radius: 24px;
    border: 1px solid var(--clh-border);
    background: var(--clh-surface);
    box-shadow: var(--clh-shadow);
    overflow: hidden;
}

.clh-custom-ad-card > *:first-child {
    margin-top: 0;
}

.clh-custom-ad-card > *:last-child {
    margin-bottom: 0;
}

.clh-custom-ad-card img,
.clh-custom-ad-card iframe,
.clh-custom-ad-card ins,
.clh-custom-ad-card .adsbygoogle {
    max-width: 100%;
}

.clh-custom-ad-card iframe,
.clh-custom-ad-card img {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 14px;
}

.clh-custom-ad-card .adsbygoogle {
    display: block !important;
}

@media (max-width: 1180px) {
    .clh-hero-card {
        min-height: 448px;
        padding: 20px;
    }

    .clh-network-node {
        font-size: 12px;
        min-height: 40px;
        padding: 0 14px;
    }

    .clh-network-node-center {
        padding-inline: 18px;
    }

    .clh-network-beam-1,
    .clh-network-beam-2,
    .clh-network-beam-3,
    .clh-network-beam-4 {
        width: 98px;
    }

    .clh-status-copy strong {
        font-size: 25px;
    }
}

@media (max-width: 1024px) {
    .clh-hero-card {
        min-height: auto;
    }

    .clh-hero-panel {
        padding: 0;
    }

    .clh-hero-network {
        min-height: 205px;
    }

    .clh-network-node-it {
        left: 16px;
        top: 20px;
    }

    .clh-network-node-network {
        right: 16px;
        top: 24px;
    }

    .clh-network-node-cctv {
        right: 20px;
        bottom: 24px;
    }

    .clh-network-node-web {
        left: 20px;
        bottom: 26px;
    }

    .clh-network-beam-1 {
        left: 108px;
        top: 76px;
        width: 92px;
    }

    .clh-network-beam-2 {
        right: 108px;
        top: 80px;
        width: 90px;
    }

    .clh-network-beam-3 {
        right: 108px;
        bottom: 76px;
        width: 90px;
    }

    .clh-network-beam-4 {
        left: 108px;
        bottom: 78px;
        width: 90px;
    }

    .clh-status-copy strong {
        font-size: 24px;
    }
}

@media (max-width: 720px) {
    .clh-hero-card {
        padding: 16px;
        border-radius: 28px;
    }

    .clh-hero-panel-head {
        gap: 10px;
    }

    .clh-hero-panel-kicker,
    .clh-hero-panel-live {
        min-height: 34px;
        padding: 0 12px;
        font-size: 11px;
        letter-spacing: .04em;
    }

    .clh-hero-network {
        min-height: 220px;
        padding: 14px;
        border-radius: 22px;
    }

    .clh-network-node {
        min-height: 34px;
        padding: 0 11px;
        font-size: 10px;
    }

    .clh-network-node-center {
        min-height: 40px;
        padding-inline: 14px;
    }

    .clh-network-node-it {
        left: 10px;
        top: 16px;
    }

    .clh-network-node-network {
        right: 10px;
        top: 20px;
    }

    .clh-network-node-cctv {
        right: 10px;
        bottom: 18px;
    }

    .clh-network-node-web {
        left: 10px;
        bottom: 20px;
    }

    .clh-network-beam-1 {
        left: 70px;
        top: 70px;
        width: 72px;
    }

    .clh-network-beam-2 {
        right: 72px;
        top: 74px;
        width: 68px;
    }

    .clh-network-beam-3 {
        right: 72px;
        bottom: 68px;
        width: 68px;
    }

    .clh-network-beam-4 {
        left: 72px;
        bottom: 72px;
        width: 68px;
    }

    .clh-status-card {
        padding: 18px;
        border-radius: 20px;
    }

    .clh-status-copy strong {
        font-size: 21px;
        margin-bottom: 8px;
    }

    .clh-status-copy p {
        font-size: 14px;
        line-height: 1.58;
    }

    .clh-status-highlights {
        gap: 8px;
        margin-top: 12px;
    }

    .clh-status-highlights span {
        min-height: 32px;
        padding: 0 11px;
        font-size: 11px;
    }

    .clh-custom-ad-card {
        padding: 12px;
        border-radius: 18px;
    }
}


/* v1.6.5.9 patch: replace hero text box with second visual box + visible ad settings support */
.clh-status-card-visual {
    position: static;
    padding: 18px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(4,30,79,.84), rgba(4,30,79,.76)),
        radial-gradient(circle at top right, rgba(0,169,218,.16), transparent 36%);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 34px rgba(0,0,0,.18);
}

.clh-visual-box-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.clh-visual-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.9);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.clh-visual-pill.is-accent {
    color: var(--clh-accent-2);
}

.clh-visual-box-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.clh-visual-tile {
    position: relative;
    min-height: 92px;
    padding: 16px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.08);
    overflow: hidden;
}

.clh-visual-tile::after {
    content: "";
    position: absolute;
    inset: auto -18px -18px auto;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,169,218,.20), transparent 70%);
}

.clh-visual-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clh-accent), var(--clh-accent-2));
    box-shadow: 0 0 14px rgba(0,169,218,.32);
}

.clh-visual-tile strong {
    display: block;
    margin-bottom: 4px;
    color: #fff;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.clh-visual-tile small {
    display: block;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    line-height: 1.4;
}

@media (max-width: 1024px) {
    .clh-status-card-visual {
        padding: 16px;
    }
}

@media (max-width: 720px) {
    .clh-status-card-visual {
        padding: 14px;
        border-radius: 20px;
    }

    .clh-visual-box-head {
        gap: 8px;
        margin-bottom: 12px;
    }

    .clh-visual-pill {
        min-height: 30px;
        padding: 0 10px;
        font-size: 10px;
    }

    .clh-visual-box-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .clh-visual-tile {
        min-height: 84px;
        padding: 12px;
        border-radius: 16px;
    }

    .clh-visual-tile strong {
        font-size: 14px;
    }

    .clh-visual-tile small {
        font-size: 12px;
    }
}


/* v1.6.6.0 patch: compact landscape hero visual */
.clh-hero-card-landscape {
    min-height: auto;
    padding: 18px;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)),
        radial-gradient(circle at top right, rgba(0,169,218,.16), transparent 38%);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 22px 54px rgba(0,0,0,.20);
}

.clh-hero-landscape {
    display: grid;
    gap: 14px;
}

.clh-hero-screen {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    background:
        linear-gradient(180deg, rgba(4,30,79,.86), rgba(4,30,79,.76)),
        radial-gradient(circle at center, rgba(0,169,218,.12), transparent 45%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

.clh-hero-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent, rgba(255,255,255,.03), transparent);
    transform: translateX(-100%);
    animation: clhHeroScreenSweep 6s linear infinite;
    pointer-events: none;
}

@keyframes clhHeroScreenSweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.clh-hero-screen-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
}

.clh-screen-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,.36);
}

.clh-screen-dot:nth-child(2) {
    background: rgba(0,169,218,.72);
}

.clh-screen-label {
    margin-left: 4px;
    color: rgba(255,255,255,.78);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
}

.clh-hero-screen-body {
    padding: 18px 18px 16px;
}

.clh-hero-screen-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--clh-accent-2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.clh-hero-typed-line {
    position: relative;
    min-height: 56px;
    margin-bottom: 14px;
}

.clh-hero-typed-text {
    display: inline-block;
    max-width: 100%;
    color: #ffffff;
    font-size: 18px;
    line-height: 1.45;
    font-weight: 700;
    letter-spacing: -.015em;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid rgba(0,169,218,.85);
    animation:
        clhHeroTyping 7s steps(70, end) infinite,
        clhHeroCaret .9s step-end infinite;
}

@keyframes clhHeroTyping {
    0% { width: 0; }
    55% { width: 100%; }
    80% { width: 100%; }
    100% { width: 0; }
}

@keyframes clhHeroCaret {
    0%, 49% { border-color: rgba(0,169,218,.85); }
    50%, 100% { border-color: transparent; }
}

.clh-hero-screen-lines {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.clh-screen-line {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255,255,255,.24), rgba(255,255,255,.06));
}

.clh-screen-line.is-long { width: 94%; }
.clh-screen-line.is-mid { width: 76%; }
.clh-screen-line.is-short { width: 58%; }

.clh-hero-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.clh-hero-chip-row span {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.94);
    color: var(--clh-primary);
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

.clh-hero-mini-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.clh-mini-stat {
    padding: 14px 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    border: 1px solid rgba(255,255,255,.08);
    text-align: center;
}

.clh-mini-stat strong {
    display: block;
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
    margin-bottom: 3px;
}

.clh-mini-stat small {
    display: block;
    color: rgba(255,255,255,.72);
    font-size: 12px;
    line-height: 1.35;
}

@media (min-width: 1025px) {
    .clh-hero-grid {
        align-items: center;
    }

    .clh-hero-card-landscape {
        max-width: 470px;
        margin-left: auto;
    }

    .clh-hero-typed-line {
        min-height: 32px;
    }

    .clh-hero-typed-text {
        font-size: 17px;
    }
}

@media (max-width: 1024px) {
    .clh-hero-card-landscape {
        max-width: 100%;
    }

    .clh-hero-typed-text {
        white-space: normal;
        border-right: 0;
        animation: none;
    }

    .clh-hero-typed-line {
        min-height: auto;
    }
}

@media (max-width: 720px) {
    .clh-hero-card-landscape {
        padding: 14px;
        border-radius: 24px;
    }

    .clh-hero-screen {
        border-radius: 18px;
    }

    .clh-hero-screen-bar {
        min-height: 38px;
        padding: 0 12px;
        gap: 7px;
    }

    .clh-screen-dot {
        width: 8px;
        height: 8px;
    }

    .clh-screen-label {
        font-size: 11px;
    }

    .clh-hero-screen-body {
        padding: 14px;
    }

    .clh-hero-screen-kicker {
        min-height: 28px;
        padding: 0 10px;
        margin-bottom: 10px;
        font-size: 10px;
    }

    .clh-hero-typed-text {
        font-size: 15px;
        line-height: 1.45;
    }

    .clh-hero-chip-row {
        gap: 8px;
    }

    .clh-hero-chip-row span {
        min-height: 30px;
        padding: 0 10px;
        font-size: 11px;
    }

    .clh-hero-mini-stats {
        gap: 8px;
    }

    .clh-mini-stat {
        padding: 11px 8px;
        border-radius: 14px;
    }

    .clh-mini-stat strong {
        font-size: 13px;
    }

    .clh-mini-stat small {
        font-size: 11px;
    }
}


/* v1.6.6.1 patch: align hero landscape box and replace inner content with stable live-preview visual */
.clh-hero-grid {
    align-items: flex-start;
}

.clh-hero-card-landscape {
    position: relative;
    align-self: flex-start;
    margin-top: 6px;
    min-height: auto;
    max-width: 485px;
    padding: 16px;
    border-radius: 28px;
}

.clh-hero-landscape {
    gap: 12px;
}

.clh-hero-media-screen {
    overflow: hidden;
}

.clh-hero-screen-body {
    padding: 16px 16px 15px;
}

.clh-hero-screen-kicker {
    margin-bottom: 12px;
}

.clh-hero-media-stage {
    position: relative;
    min-height: 196px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.08);
    background:
        radial-gradient(circle at top right, rgba(0,169,218,.18), transparent 36%),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    overflow: hidden;
}

.clh-hero-media-stage::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 16px;
    border: 1px dashed rgba(255,255,255,.10);
}

.clh-hero-media-card {
    position: relative;
    z-index: 2;
    max-width: 82%;
    padding: 16px 16px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(4,30,79,.90), rgba(4,30,79,.80));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 14px 32px rgba(0,0,0,.18);
}

.clh-hero-media-tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: var(--clh-accent-2);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.clh-hero-media-play {
    display: inline-flex;
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clh-accent), var(--clh-accent-2));
    box-shadow: 0 12px 26px rgba(0,169,218,.22);
    position: relative;
}

.clh-hero-media-play::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 15px;
    border-left: 13px solid white;
    border-top: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

.clh-hero-media-card strong {
    display: block;
    margin-bottom: 8px;
    color: #fff;
    font-size: 16px;
    line-height: 1.42;
    letter-spacing: -.02em;
}

.clh-hero-media-card small {
    display: block;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    line-height: 1.42;
}

.clh-hero-media-bubbles {
    position: absolute;
    right: 14px;
    top: 18px;
    bottom: 16px;
    width: 112px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2;
}

.clh-hero-media-bubbles span {
    display: inline-flex;
    align-self: flex-end;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.95);
    color: var(--clh-primary);
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(0,0,0,.14);
    animation: clhMediaBubbleFloat 4.8s ease-in-out infinite;
}

.clh-hero-media-bubbles span:nth-child(2) {
    align-self: flex-start;
    animation-delay: .6s;
}

.clh-hero-media-bubbles span:nth-child(3) {
    align-self: flex-end;
    animation-delay: 1.2s;
}

.clh-hero-media-bubbles span:nth-child(4) {
    align-self: flex-start;
    animation-delay: 1.8s;
}

@keyframes clhMediaBubbleFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.clh-hero-service-ticker {
    position: relative;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
}

.clh-hero-service-track {
    display: inline-flex;
    gap: 22px;
    min-width: max-content;
    padding: 10px 16px;
    animation: clhServiceTicker 18s linear infinite;
    will-change: transform;
}

.clh-hero-service-track span {
    color: rgba(255,255,255,.86);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

@keyframes clhServiceTicker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.clh-hero-mini-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.clh-mini-stat {
    padding: 12px 10px;
    border-radius: 16px;
}

.clh-mini-stat strong {
    font-size: 14px;
}

.clh-mini-stat small {
    font-size: 11px;
}

@media (min-width: 1025px) {
    .clh-hero-card-landscape {
        margin-top: 2px;
    }
}

@media (max-width: 1180px) {
    .clh-hero-card-landscape {
        max-width: 460px;
    }

    .clh-hero-media-stage {
        min-height: 186px;
    }

    .clh-hero-media-card {
        max-width: 80%;
    }
}

@media (max-width: 1024px) {
    .clh-hero-grid {
        align-items: stretch;
    }

    .clh-hero-card-landscape {
        max-width: 100%;
        margin-top: 0;
    }

    .clh-hero-media-stage {
        min-height: 182px;
    }
}

@media (max-width: 720px) {
    .clh-hero-card-landscape {
        padding: 13px;
        border-radius: 22px;
    }

    .clh-hero-screen-body {
        padding: 13px;
    }

    .clh-hero-media-stage {
        min-height: 170px;
        padding: 12px;
        border-radius: 16px;
    }

    .clh-hero-media-card {
        max-width: 100%;
        padding: 12px;
        border-radius: 14px;
    }

    .clh-hero-media-play {
        width: 40px;
        height: 40px;
        margin-bottom: 10px;
    }

    .clh-hero-media-play::before {
        left: 16px;
        top: 12px;
        border-left-width: 11px;
        border-top-width: 8px;
        border-bottom-width: 8px;
    }

    .clh-hero-media-card strong {
        font-size: 14px;
        line-height: 1.38;
    }

    .clh-hero-media-card small {
        font-size: 12px;
    }

    .clh-hero-media-bubbles {
        position: static;
        width: auto;
        margin-top: 12px;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .clh-hero-media-bubbles span {
        align-self: auto !important;
        min-height: 30px;
        padding: 0 10px;
        font-size: 10px;
        animation: none;
    }

    .clh-hero-service-track {
        gap: 18px;
        padding: 9px 12px;
    }

    .clh-hero-service-track span {
        font-size: 11px;
    }

    .clh-mini-stat {
        padding: 10px 8px;
    }

    .clh-mini-stat strong {
        font-size: 12px;
    }

    .clh-mini-stat small {
        font-size: 10px;
    }
}


/* v1.6.6.2 patch: reference-inspired hero right-side card */
.clh-hero-card-reference {
    position: relative;
    max-width: 500px;
    padding: 22px;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.15), rgba(255,255,255,.05)),
        radial-gradient(circle at top right, rgba(0,169,218,.18), transparent 40%);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 24px 60px rgba(0,0,0,.22);
}

.clh-hero-ref-layout {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(200px, 1.05fr);
    align-items: center;
    gap: 18px;
}

.clh-hero-ref-copy {
    position: relative;
    z-index: 2;
}

.clh-hero-ref-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.92);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.clh-hero-ref-title {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(26px, 2.3vw, 36px);
    line-height: .98;
    letter-spacing: -.04em;
}

.clh-hero-ref-title span {
    display: block;
}

.clh-hero-ref-title .is-accent {
    color: #28d978;
}

.clh-hero-ref-text {
    margin: 0;
    max-width: 290px;
    color: rgba(255,255,255,.82);
    font-size: 14px;
    line-height: 1.6;
}

.clh-hero-ref-actions {
    margin-top: 18px;
}

.clh-hero-ref-actions .clh-btn {
    min-height: 42px;
    padding-inline: 18px;
    font-size: 14px;
}

.clh-hero-ref-visual {
    position: relative;
    min-height: 270px;
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(0,169,218,.12), transparent 48%),
        linear-gradient(180deg, rgba(4,30,79,.18), rgba(4,30,79,.02));
}

.clh-hero-ref-map {
    position: absolute;
    inset: 6px;
    opacity: .28;
    background:
        radial-gradient(circle, rgba(0,169,218,.55) 18%, transparent 20%) 0 0 / 12px 12px;
    -webkit-mask-image:
        radial-gradient(circle at 18% 40%, #000 0 16%, transparent 17%),
        radial-gradient(circle at 42% 28%, #000 0 20%, transparent 21%),
        radial-gradient(circle at 60% 60%, #000 0 22%, transparent 23%),
        radial-gradient(circle at 80% 35%, #000 0 16%, transparent 17%);
    mask-image:
        radial-gradient(circle at 18% 40%, #000 0 16%, transparent 17%),
        radial-gradient(circle at 42% 28%, #000 0 20%, transparent 21%),
        radial-gradient(circle at 60% 60%, #000 0 22%, transparent 23%),
        radial-gradient(circle at 80% 35%, #000 0 16%, transparent 17%);
}

.clh-hero-ref-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(40,217,120,.52);
    pointer-events: none;
}

.clh-hero-ref-ring.ring-1 {
    width: 184px;
    height: 184px;
    right: 32px;
    top: 42px;
}

.clh-hero-ref-ring.ring-2 {
    width: 128px;
    height: 128px;
    right: 60px;
    top: 70px;
    border-style: dotted;
}

.clh-hero-ref-ring.ring-3 {
    width: 82px;
    height: 82px;
    right: 83px;
    top: 93px;
}

.clh-hero-ref-center {
    position: absolute;
    right: 93px;
    top: 103px;
    width: 110px;
    height: 110px;
    padding: 10px;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(0,0,0,.18), rgba(4,30,79,.92)),
        linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
    border: 4px solid rgba(40,217,120,.72);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 16px 36px rgba(0,0,0,.22);
    text-align: center;
}

.clh-hero-ref-core {
    display: block;
    color: #fff;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.04em;
}

.clh-hero-ref-center small {
    margin-top: 5px;
    color: rgba(255,255,255,.72);
    font-size: 11px;
    font-weight: 700;
}

.clh-hero-ref-note {
    position: absolute;
    right: 152px;
    top: 110px;
    z-index: 2;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    background: rgba(255,255,255,.96);
    color: var(--clh-primary);
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 12px 26px rgba(0,0,0,.14);
}

.clh-hero-ref-chip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    color: var(--clh-primary);
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(0,0,0,.14);
    animation: clhRefChipFloat 5s ease-in-out infinite;
}

.clh-hero-ref-chip.chip-it {
    left: 12px;
    top: 56px;
}

.clh-hero-ref-chip.chip-network {
    right: 6px;
    top: 84px;
    animation-delay: .8s;
}

.clh-hero-ref-chip.chip-cctv {
    right: 16px;
    bottom: 64px;
    animation-delay: 1.3s;
}

.clh-hero-ref-chip.chip-web {
    left: 26px;
    bottom: 48px;
    animation-delay: 2s;
}

@keyframes clhRefChipFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@media (max-width: 1180px) {
    .clh-hero-card-reference {
        max-width: 470px;
        padding: 18px;
    }

    .clh-hero-ref-layout {
        grid-template-columns: minmax(0, .92fr) minmax(190px, 1.08fr);
        gap: 16px;
    }

    .clh-hero-ref-title {
        font-size: clamp(24px, 2.1vw, 34px);
    }

    .clh-hero-ref-visual {
        min-height: 248px;
    }
}

@media (max-width: 1024px) {
    .clh-hero-card-reference {
        max-width: 100%;
    }

    .clh-hero-ref-layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .clh-hero-ref-text {
        max-width: none;
    }

    .clh-hero-ref-visual {
        min-height: 260px;
    }
}

@media (max-width: 720px) {
    .clh-hero-card-reference {
        padding: 14px;
        border-radius: 22px;
    }

    .clh-hero-ref-kicker {
        min-height: 30px;
        padding: 0 10px;
        margin-bottom: 12px;
        font-size: 10px;
    }

    .clh-hero-ref-title {
        font-size: 28px;
        line-height: 1;
        margin-bottom: 10px;
    }

    .clh-hero-ref-text {
        font-size: 13px;
        line-height: 1.55;
    }

    .clh-hero-ref-actions {
        margin-top: 14px;
    }

    .clh-hero-ref-actions .clh-btn {
        width: 100%;
        justify-content: center;
    }

    .clh-hero-ref-visual {
        min-height: 220px;
        border-radius: 18px;
    }

    .clh-hero-ref-ring.ring-1 {
        width: 150px;
        height: 150px;
        right: 18px;
        top: 34px;
    }

    .clh-hero-ref-ring.ring-2 {
        width: 104px;
        height: 104px;
        right: 41px;
        top: 57px;
    }

    .clh-hero-ref-ring.ring-3 {
        width: 68px;
        height: 68px;
        right: 59px;
        top: 75px;
    }

    .clh-hero-ref-center {
        right: 67px;
        top: 83px;
        width: 88px;
        height: 88px;
        border-width: 3px;
    }

    .clh-hero-ref-core {
        font-size: 22px;
    }

    .clh-hero-ref-center small {
        font-size: 10px;
    }

    .clh-hero-ref-note {
        right: 116px;
        top: 76px;
        min-height: 30px;
        padding: 0 10px;
        font-size: 10px;
    }

    .clh-hero-ref-chip {
        min-height: 30px;
        padding: 0 10px;
        font-size: 10px;
    }

    .clh-hero-ref-chip.chip-it {
        left: 10px;
        top: 46px;
    }

    .clh-hero-ref-chip.chip-network {
        right: 4px;
        top: 68px;
    }

    .clh-hero-ref-chip.chip-cctv {
        right: 10px;
        bottom: 48px;
    }

    .clh-hero-ref-chip.chip-web {
        left: 14px;
        bottom: 38px;
    }
}


/* v1.6.6.3 patch: landscape hero box with uploaded tech image */
.clh-hero-card-showcase {
    position: relative;
    max-width: 560px;
    padding: 18px;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)),
        radial-gradient(circle at top right, rgba(0,169,218,.16), transparent 40%);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 24px 60px rgba(0,0,0,.22);
    overflow: hidden;
}

.clh-hero-showcase {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(250px, 1.05fr);
    align-items: center;
    gap: 18px;
}

.clh-hero-showcase-copy {
    position: relative;
    z-index: 2;
}

.clh-hero-showcase-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.92);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.clh-hero-showcase-title {
    margin: 0 0 12px;
    color: #fff;
    font-size: clamp(28px, 2.45vw, 38px);
    line-height: .98;
    letter-spacing: -.04em;
}

.clh-hero-showcase-title span {
    display: block;
}

.clh-hero-showcase-title .is-accent {
    color: var(--clh-accent-2);
}

.clh-hero-showcase-text {
    margin: 0;
    max-width: 275px;
    color: rgba(255,255,255,.82);
    font-size: 14px;
    line-height: 1.6;
}

.clh-hero-showcase-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.clh-hero-showcase-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.08);
    color: rgba(255,255,255,.9);
    font-size: 11px;
    font-weight: 700;
}

.clh-hero-showcase-actions {
    margin-top: 18px;
}

.clh-hero-showcase-actions .clh-btn {
    min-height: 42px;
    padding-inline: 18px;
    font-size: 14px;
}

.clh-hero-showcase-visual {
    position: relative;
    min-height: 270px;
}

.clh-hero-showcase-frame {
    position: relative;
    height: 100%;
    min-height: 270px;
    border-radius: 24px;
    padding: 14px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
        radial-gradient(circle at center, rgba(0,169,218,.12), transparent 46%);
    border: 1px solid rgba(255,255,255,.10);
    overflow: hidden;
}

.clh-hero-showcase-frame::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 18px;
    border: 1px dashed rgba(255,255,255,.12);
    pointer-events: none;
}

.clh-hero-showcase-image {
    position: relative;
    z-index: 1;
    height: 100%;
    min-height: 240px;
    border-radius: 18px;
    background-image:
        linear-gradient(180deg, rgba(4,30,79,.08), rgba(4,30,79,.22)),
        url('assets/images/hero-tech-touch.png');
    background-size: cover;
    background-position: center;
    box-shadow: 0 18px 40px rgba(0,0,0,.20);
}

.clh-hero-showcase-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background:
        radial-gradient(circle at 65% 36%, rgba(0,169,218,.28), transparent 16%),
        linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
    pointer-events: none;
}

.clh-hero-showcase-badge,
.clh-hero-showcase-chip {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 24px rgba(0,0,0,.14);
}

.clh-hero-showcase-badge {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.96);
    color: var(--clh-primary);
    font-size: 12px;
    font-weight: 800;
}

.clh-hero-showcase-badge.badge-top {
    top: 26px;
    left: 22px;
}

.clh-hero-showcase-badge.badge-bottom {
    bottom: 20px;
    right: 20px;
}

.clh-hero-showcase-chip {
    min-height: 32px;
    padding: 0 11px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--clh-accent), var(--clh-accent-2));
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    animation: clhShowcaseFloat 5s ease-in-out infinite;
}

.clh-hero-showcase-chip.chip-one {
    top: 88px;
    right: 18px;
}

.clh-hero-showcase-chip.chip-two {
    bottom: 84px;
    left: 18px;
    animation-delay: .8s;
}

.clh-hero-showcase-chip.chip-three {
    top: 136px;
    left: 34px;
    animation-delay: 1.4s;
}

@keyframes clhShowcaseFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@media (max-width: 1180px) {
    .clh-hero-card-showcase {
        max-width: 520px;
        padding: 16px;
    }

    .clh-hero-showcase {
        grid-template-columns: minmax(0, .92fr) minmax(230px, 1.08fr);
        gap: 16px;
    }

    .clh-hero-showcase-visual,
    .clh-hero-showcase-frame {
        min-height: 248px;
    }

    .clh-hero-showcase-image {
        min-height: 218px;
    }
}

@media (max-width: 1024px) {
    .clh-hero-card-showcase {
        max-width: 100%;
    }

    .clh-hero-showcase {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .clh-hero-showcase-text {
        max-width: none;
    }

    .clh-hero-showcase-visual,
    .clh-hero-showcase-frame {
        min-height: 280px;
    }

    .clh-hero-showcase-image {
        min-height: 248px;
    }
}

@media (max-width: 720px) {
    .clh-hero-card-showcase {
        padding: 14px;
        border-radius: 22px;
    }

    .clh-hero-showcase-kicker {
        min-height: 30px;
        padding: 0 10px;
        margin-bottom: 12px;
        font-size: 10px;
    }

    .clh-hero-showcase-title {
        font-size: 30px;
        margin-bottom: 10px;
    }

    .clh-hero-showcase-text {
        font-size: 13px;
        line-height: 1.55;
    }

    .clh-hero-showcase-tags {
        margin-top: 12px;
        gap: 7px;
    }

    .clh-hero-showcase-tags span {
        min-height: 28px;
        padding: 0 9px;
        font-size: 10px;
    }

    .clh-hero-showcase-actions {
        margin-top: 14px;
    }

    .clh-hero-showcase-actions .clh-btn {
        width: 100%;
        justify-content: center;
    }

    .clh-hero-showcase-visual,
    .clh-hero-showcase-frame {
        min-height: 220px;
        border-radius: 18px;
    }

    .clh-hero-showcase-image {
        min-height: 190px;
        border-radius: 14px;
    }

    .clh-hero-showcase-badge {
        min-height: 30px;
        padding: 0 10px;
        font-size: 10px;
    }

    .clh-hero-showcase-badge.badge-top {
        top: 18px;
        left: 18px;
    }

    .clh-hero-showcase-badge.badge-bottom {
        bottom: 16px;
        right: 16px;
    }

    .clh-hero-showcase-chip {
        min-height: 28px;
        padding: 0 9px;
        font-size: 10px;
    }

    .clh-hero-showcase-chip.chip-one {
        top: 72px;
        right: 14px;
    }

    .clh-hero-showcase-chip.chip-two {
        bottom: 70px;
        left: 14px;
    }

    .clh-hero-showcase-chip.chip-three {
        top: 108px;
        left: 22px;
    }
}


/* v1.6.6.4 patch: clean right-side hero box with image only */
.clh-hero-card-clean-visual {
    position: relative;
    max-width: 560px;
    padding: 16px;
    border-radius: 30px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)),
        radial-gradient(circle at top right, rgba(0,169,218,.14), transparent 40%);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 24px 60px rgba(0,0,0,.22);
    overflow: hidden;
}

.clh-hero-clean-visual {
    position: relative;
    min-height: 300px;
}

.clh-hero-clean-frame {
    position: relative;
    min-height: 300px;
    border-radius: 24px;
    padding: 12px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
        radial-gradient(circle at center, rgba(0,169,218,.10), transparent 46%);
    border: 1px solid rgba(255,255,255,.10);
    overflow: hidden;
}

.clh-hero-clean-frame::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 18px;
    border: 1px dashed rgba(255,255,255,.12);
    pointer-events: none;
}

.clh-hero-clean-frame::after {
    content: "";
    position: absolute;
    inset: auto 18px 18px auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,169,218,.18), transparent 70%);
    pointer-events: none;
}

.clh-hero-clean-image {
    position: relative;
    z-index: 1;
    min-height: 274px;
    border-radius: 18px;
    background-image:
        linear-gradient(180deg, rgba(4,30,79,.10), rgba(4,30,79,.24)),
        url('assets/images/hero-tech-touch.png');
    background-size: cover;
    background-position: center;
    box-shadow: 0 18px 40px rgba(0,0,0,.20);
}

.clh-hero-clean-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background:
        radial-gradient(circle at 74% 34%, rgba(0,169,218,.24), transparent 18%),
        linear-gradient(90deg, transparent, rgba(255,255,255,.03), transparent);
    pointer-events: none;
}

@media (max-width: 1180px) {
    .clh-hero-card-clean-visual {
        max-width: 520px;
    }

    .clh-hero-clean-visual,
    .clh-hero-clean-frame {
        min-height: 280px;
    }

    .clh-hero-clean-image {
        min-height: 254px;
    }
}

@media (max-width: 1024px) {
    .clh-hero-card-clean-visual {
        max-width: 100%;
    }

    .clh-hero-clean-visual,
    .clh-hero-clean-frame {
        min-height: 320px;
    }

    .clh-hero-clean-image {
        min-height: 294px;
    }
}

@media (max-width: 720px) {
    .clh-hero-card-clean-visual {
        padding: 14px;
        border-radius: 22px;
    }

    .clh-hero-clean-visual,
    .clh-hero-clean-frame {
        min-height: 220px;
        border-radius: 18px;
    }

    .clh-hero-clean-frame {
        padding: 10px;
    }

    .clh-hero-clean-frame::before {
        inset: 10px;
        border-radius: 14px;
    }

    .clh-hero-clean-image {
        min-height: 198px;
        border-radius: 14px;
    }
}


/* v1.6.6.5 patch: proper 3D hero illustration + smaller hero typing title */
.clh-hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
    gap: 42px;
    align-items: center;
}

.clh-hero-content {
    max-width: 620px;
}

.clh-hero-title {
    max-width: 620px;
    margin: 0 0 16px;
    font-size: clamp(34px, 4.9vw, 64px);
    line-height: 1.06;
    letter-spacing: -.04em;
    text-wrap: balance;
}

.clh-hero-subtitle {
    max-width: 600px;
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 1.72;
}

.clh-hero-card-clean-visual {
    max-width: 590px;
    min-height: 320px;
    padding: 16px;
    border-radius: 30px;
}

.clh-hero-clean-visual,
.clh-hero-clean-frame {
    min-height: 320px;
}

.clh-hero-clean-frame {
    padding: 12px;
    border-radius: 24px;
}

.clh-hero-clean-image {
    min-height: 294px;
    border-radius: 18px;
    background-image:
        linear-gradient(180deg, rgba(4,30,79,.08), rgba(4,30,79,.20)),
        url('assets/images/hero-tech-touch.png');
    background-size: cover;
    background-position: center center;
}

.clh-hero-clean-image::after {
    background:
        radial-gradient(circle at 74% 34%, rgba(0,169,218,.18), transparent 18%),
        linear-gradient(90deg, transparent, rgba(255,255,255,.025), transparent);
}

@media (max-width: 1180px) {
    .clh-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(320px, .96fr);
        gap: 34px;
    }

    .clh-hero-content,
    .clh-hero-title {
        max-width: 560px;
    }

    .clh-hero-title {
        font-size: clamp(32px, 4.8vw, 56px);
    }

    .clh-hero-card-clean-visual {
        max-width: 540px;
        min-height: 300px;
    }

    .clh-hero-clean-visual,
    .clh-hero-clean-frame {
        min-height: 300px;
    }

    .clh-hero-clean-image {
        min-height: 274px;
    }
}

@media (max-width: 1024px) {
    .clh-hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
        align-items: stretch;
    }

    .clh-hero-content,
    .clh-hero-title,
    .clh-hero-subtitle {
        max-width: 100%;
    }

    .clh-hero-title {
        font-size: clamp(32px, 7vw, 54px);
        line-height: 1.07;
    }

    .clh-hero-card-clean-visual {
        max-width: 100%;
        min-height: 320px;
    }

    .clh-hero-clean-visual,
    .clh-hero-clean-frame {
        min-height: 320px;
    }

    .clh-hero-clean-image {
        min-height: 294px;
    }
}

@media (max-width: 720px) {
    .clh-hero-content {
        max-width: 100%;
    }

    .clh-hero-title {
        max-width: 100%;
        font-size: clamp(30px, 9.4vw, 44px);
        margin-bottom: 14px;
        line-height: 1.08;
        letter-spacing: -.035em;
    }

    .clh-typing-caret {
        width: 2px;
        margin-left: 5px;
    }

    .clh-hero-subtitle {
        font-size: 15px;
        line-height: 1.66;
    }

    .clh-hero-card-clean-visual {
        padding: 12px;
        border-radius: 22px;
        min-height: 220px;
    }

    .clh-hero-clean-visual,
    .clh-hero-clean-frame {
        min-height: 220px;
        border-radius: 18px;
    }

    .clh-hero-clean-frame {
        padding: 10px;
    }

    .clh-hero-clean-image {
        min-height: 196px;
        border-radius: 14px;
        background-position: center;
    }
}


/* v1.6.6.7 patch: force hero image to render as real image, not CSS background */
.clh-hero-clean-frame {
    display: flex;
    align-items: center;
    justify-content: center;
}

.clh-hero-clean-img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 294px;
    max-height: 360px;
    object-fit: cover;
    object-position: center;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,.20);
}

.clh-hero-clean-image {
    display: none !important;
}

@media (max-width: 1180px) {
    .clh-hero-clean-img {
        min-height: 274px;
        max-height: 340px;
    }
}

@media (max-width: 1024px) {
    .clh-hero-clean-img {
        min-height: 294px;
        max-height: 380px;
    }
}

@media (max-width: 720px) {
    .clh-hero-clean-img {
        min-height: 198px;
        max-height: 260px;
        border-radius: 14px;
    }
}


/* v1.6.6.8 patch: replace hero image and improve centering/alignment */
.clh-hero-card-clean-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 620px;
    min-height: 360px;
    margin-left: auto;
}

.clh-hero-clean-visual,
.clh-hero-clean-frame {
    width: 100%;
    min-height: 330px;
}

.clh-hero-clean-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    border-radius: 26px;
}

.clh-hero-clean-frame::before {
    inset: 14px;
    border-radius: 20px;
}

.clh-hero-clean-img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    object-position: center center;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,.20);
}

@media (max-width: 1180px) {
    .clh-hero-card-clean-visual {
        max-width: 580px;
        min-height: 340px;
    }

    .clh-hero-clean-visual,
    .clh-hero-clean-frame {
        min-height: 310px;
    }
}

@media (max-width: 1024px) {
    .clh-hero-card-clean-visual {
        max-width: 100%;
        min-height: 360px;
        margin-left: 0;
    }

    .clh-hero-clean-visual,
    .clh-hero-clean-frame {
        min-height: 330px;
    }

    .clh-hero-clean-img {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 720px) {
    .clh-hero-card-clean-visual {
        min-height: 240px;
        border-radius: 22px;
    }

    .clh-hero-clean-visual,
    .clh-hero-clean-frame {
        min-height: 220px;
        border-radius: 18px;
    }

    .clh-hero-clean-frame {
        padding: 10px;
    }

    .clh-hero-clean-frame::before {
        inset: 10px;
        border-radius: 14px;
    }

    .clh-hero-clean-img {
        border-radius: 14px;
    }
}


/* v1.6.6.9 patch: hero text sizing + alignment polish */
.clh-hero-grid {
    align-items: center;
    gap: 44px;
}

.clh-hero-content {
    max-width: 610px;
}

.clh-hero .clh-kicker {
    margin-bottom: 12px;
}

.clh-hero-title {
    max-width: 610px;
    margin: 0 0 14px;
    font-size: clamp(34px, 4.9vw, 60px);
    line-height: 1.08;
    letter-spacing: -0.038em;
    font-weight: 800;
    text-wrap: balance;
}

.clh-hero-subtitle {
    max-width: 560px;
    padding-left: 16px;
    font-size: clamp(15.5px, 1.55vw, 18px);
    line-height: 1.72;
}

.clh-hero-actions {
    gap: 12px;
    margin-top: 20px;
}

.clh-hero-actions .clh-btn {
    min-width: 168px;
    min-height: 44px;
}

@media (max-width: 1180px) {
    .clh-hero-grid {
        gap: 34px;
    }

    .clh-hero-content,
    .clh-hero-title {
        max-width: 560px;
    }

    .clh-hero-title {
        font-size: clamp(32px, 4.7vw, 54px);
    }

    .clh-hero-subtitle {
        max-width: 520px;
        font-size: clamp(15px, 1.7vw, 17.5px);
    }
}

@media (max-width: 1024px) {
    .clh-hero-grid {
        gap: 28px;
    }

    .clh-hero-content,
    .clh-hero-title,
    .clh-hero-subtitle {
        max-width: 100%;
    }

    .clh-hero-title {
        font-size: clamp(32px, 7vw, 50px);
        margin-bottom: 12px;
        line-height: 1.08;
    }

    .clh-hero-subtitle {
        padding-left: 14px;
        font-size: 15.5px;
        line-height: 1.68;
    }

    .clh-hero-actions {
        margin-top: 18px;
    }

    .clh-hero-actions .clh-btn {
        min-width: 152px;
    }
}

@media (max-width: 720px) {
    .clh-hero .clh-kicker {
        margin-bottom: 10px;
    }

    .clh-hero-title {
        font-size: clamp(30px, 9vw, 42px);
        margin-bottom: 12px;
        line-height: 1.1;
        letter-spacing: -0.03em;
    }

    .clh-hero-subtitle {
        padding-left: 12px;
        font-size: 14.5px;
        line-height: 1.64;
    }

    .clh-hero-actions {
        gap: 10px;
        margin-top: 16px;
    }

    .clh-hero-actions .clh-btn {
        min-width: 0;
        min-height: 42px;
    }
}


/* v1.6.7.1 patch: remove hero text phrase and show image without decorative frame */
.clh-hero-card-clean-visual {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-height: auto;
    max-width: 620px;
}

.clh-hero-clean-visual,
.clh-hero-clean-frame {
    width: 100%;
    min-height: auto;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.clh-hero-clean-frame {
    padding: 0;
    border-radius: 0;
    overflow: visible;
}

.clh-hero-clean-frame::before,
.clh-hero-clean-frame::after {
    display: none !important;
    content: none !important;
}

.clh-hero-clean-img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    object-fit: contain;
    object-position: center center;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

@media (max-width: 1180px) {
    .clh-hero-card-clean-visual {
        max-width: 580px;
    }
}

@media (max-width: 1024px) {
    .clh-hero-card-clean-visual {
        max-width: 100%;
    }
}

@media (max-width: 720px) {
    .clh-hero-card-clean-visual {
        max-width: 100%;
    }

    .clh-hero-clean-img {
        width: 100%;
    }
}


/* v1.6.7.2 patch: hero heading smaller, 2-line desktop balance, image shifted right */
@media (min-width: 1025px) {
    .clh-hero-grid {
        grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
        gap: 52px;
        align-items: center;
    }

    .clh-hero-content {
        max-width: 720px;
    }

    .clh-hero-title {
        max-width: 720px;
        font-size: clamp(38px, 4.45vw, 56px);
        line-height: 1.08;
        letter-spacing: -0.035em;
        margin-bottom: 14px;
        text-wrap: balance;
    }

    .clh-hero-subtitle {
        max-width: 560px;
        font-size: 16.5px;
        line-height: 1.68;
    }

    .clh-hero-card-clean-visual {
        justify-self: end;
        margin-left: auto;
        transform: translateX(28px);
        max-width: 660px;
    }

    .clh-hero-clean-img {
        width: 100%;
        max-width: 660px;
    }
}

@media (min-width: 1181px) {
    .clh-hero-title {
        max-width: 760px;
        font-size: clamp(40px, 4.15vw, 58px);
    }

    .clh-hero-card-clean-visual {
        transform: translateX(36px);
        max-width: 700px;
    }

    .clh-hero-clean-img {
        max-width: 700px;
    }
}

@media (max-width: 1024px) {
    .clh-hero-title {
        font-size: clamp(32px, 6.3vw, 48px);
        line-height: 1.08;
        max-width: 100%;
    }

    .clh-hero-card-clean-visual {
        transform: none;
        justify-self: stretch;
    }
}

@media (max-width: 720px) {
    .clh-hero-title {
        font-size: clamp(28px, 8.5vw, 38px);
        line-height: 1.1;
        letter-spacing: -0.028em;
    }
}


/* v1.6.7.3 patch: keep hero title height within image bottom line on desktop */
@media (min-width: 1025px) {
    .clh-hero-grid {
        grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.96fr);
        gap: 44px;
        align-items: start;
    }

    .clh-hero-content {
        max-width: 780px;
        padding-top: 6px;
    }

    .clh-hero-title {
        max-width: 780px;
        font-size: clamp(34px, 3.75vw, 50px);
        line-height: 1.03;
        letter-spacing: -0.04em;
        margin-bottom: 14px;
        text-wrap: balance;
    }

    .clh-hero-subtitle {
        max-width: 560px;
        font-size: 16px;
        line-height: 1.6;
        padding-left: 14px;
        margin-top: 0;
    }

    .clh-hero-actions {
        margin-top: 16px;
        gap: 12px;
    }

    .clh-hero-actions .clh-btn {
        min-height: 42px;
    }
}

@media (min-width: 1181px) {
    .clh-hero-grid {
        grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
        gap: 40px;
    }

    .clh-hero-content,
    .clh-hero-title {
        max-width: 820px;
    }

    .clh-hero-title {
        font-size: clamp(34px, 3.45vw, 48px);
        line-height: 1.02;
    }

    .clh-hero-subtitle {
        max-width: 540px;
        font-size: 15.5px;
        line-height: 1.58;
    }
}

@media (max-width: 1024px) {
    .clh-hero-title {
        font-size: clamp(32px, 6.2vw, 48px);
        line-height: 1.07;
    }
}

@media (max-width: 720px) {
    .clh-hero-title {
        font-size: clamp(28px, 8.2vw, 38px);
        line-height: 1.08;
    }
}


/* v1.6.7.4 patch: hero typed heading removed, spacing adjusted */
.clh-hero .clh-kicker {
    margin-bottom: 18px;
}

.clh-hero-subtitle {
    margin-top: 0;
}

.clh-hero-actions {
    margin-top: 22px;
}


/* v1.6.8.2 patch: minimal, UX-friendly ad containers */
.clh-ad-slot,
.clh-custom-ad-slot {
    display: block;
    width: 100%;
    margin: 0;
    padding: 18px 0;
}

.clh-ad-slot.top-ad {
    padding-top: 10px;
    padding-bottom: 14px;
}

.clh-custom-ad-slot.hero-bottom-ad {
    padding-top: 18px;
    padding-bottom: 0;
}

.clh-custom-ad-slot.services-bottom-ad {
    padding-top: 8px;
    padding-bottom: 16px;
}

.clh-ad-slot.footer-ad,
.clh-custom-ad-slot.footer-center-ad {
    padding-top: 10px;
    padding-bottom: 18px;
}

.clh-ad-inner,
.clh-custom-ad-card {
    width: min(100%, 728px);
    margin-inline: auto;
    text-align: center;
}

.clh-ad-slot.is-minimal-ad .clh-ad-inner,
.clh-custom-ad-slot.is-minimal-ad .clh-custom-ad-card {
    width: min(100%, 728px);
}

.clh-custom-ad-card {
    padding: 12px;
    border-radius: 18px;
    border: 1px solid rgba(15, 23, 42, .08);
    background: rgba(255,255,255,.78);
    box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
    overflow: hidden;
}

.clh-footer .clh-custom-ad-card,
.clh-footer .clh-ad-inner {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.10);
}

.clh-ad-label {
    display: block;
    margin: 0 auto 8px;
    color: rgba(100, 116, 139, .85);
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: center;
}

.clh-footer .clh-ad-label {
    color: rgba(255,255,255,.55);
}

.clh-ad-slot ins.adsbygoogle,
.clh-custom-ad-card ins.adsbygoogle,
.clh-custom-ad-content ins.adsbygoogle {
    display: block !important;
    width: 100% !important;
    min-height: 90px;
    margin-inline: auto;
}

.clh-ad-slot.top-ad ins.adsbygoogle,
.clh-ad-slot.footer-ad ins.adsbygoogle,
.clh-custom-ad-slot.hero-bottom-ad ins.adsbygoogle,
.clh-custom-ad-slot.footer-center-ad ins.adsbygoogle {
    min-height: 90px;
}

.clh-custom-ad-content {
    width: 100%;
    margin-inline: auto;
}

.clh-custom-ad-content > * {
    max-width: 100%;
}

.clh-custom-ad-content img,
.clh-custom-ad-content iframe {
    display: block;
    max-width: 100%;
    margin-inline: auto;
    border: 0;
    border-radius: 12px;
}

.clh-custom-ad-content iframe {
    min-height: 90px;
}

@media (min-width: 1025px) {
    .clh-ad-slot.top-ad .clh-ad-inner,
    .clh-ad-slot.footer-ad .clh-ad-inner,
    .clh-custom-ad-slot.hero-bottom-ad .clh-custom-ad-card,
    .clh-custom-ad-slot.footer-center-ad .clh-custom-ad-card {
        width: min(100%, 728px);
    }

    .clh-custom-ad-slot.services-bottom-ad .clh-custom-ad-card {
        width: min(100%, 760px);
    }
}

@media (max-width: 720px) {
    .clh-ad-slot,
    .clh-custom-ad-slot {
        padding: 12px 0;
    }

    .clh-ad-inner,
    .clh-custom-ad-card,
    .clh-ad-slot.is-minimal-ad .clh-ad-inner,
    .clh-custom-ad-slot.is-minimal-ad .clh-custom-ad-card {
        width: min(100%, 336px);
    }

    .clh-custom-ad-card {
        padding: 10px;
        border-radius: 14px;
    }

    .clh-ad-label {
        margin-bottom: 7px;
        font-size: 10px;
    }

    .clh-ad-slot ins.adsbygoogle,
    .clh-custom-ad-card ins.adsbygoogle,
    .clh-custom-ad-content ins.adsbygoogle {
        min-height: 90px;
    }
}

/* Keep Google Auto Ads from visually crushing layout where possible.
   Overlay / anchor / vignette formats are still controlled inside AdSense. */
.google-auto-placed {
    max-width: 100%;
}

.google-auto-placed > ins.adsbygoogle {
    max-width: 100%;
    margin-inline: auto;
}


/* v1.6.8.3 patch: Auto Ads safe mode + responsive ad polish */
.clh-auto-ads-safe-mode {
    overflow-x: clip;
}

/* Keep theme UI above normal content so ads don't visually break menus/popups */
.clh-auto-ads-safe-mode .site-header,
.clh-auto-ads-safe-mode .clh-header,
.clh-auto-ads-safe-mode .clh-site-header,
.clh-auto-ads-safe-mode .clh-main-nav,
.clh-auto-ads-safe-mode .clh-menu-wrap {
    position: relative;
    z-index: 1000;
}

.clh-auto-ads-safe-mode .clh-popup,
.clh-auto-ads-safe-mode #clh-popup {
    z-index: 99999;
}

/* Theme-side handling for Google auto-placed in-page ads.
   This does not hide ads; it keeps them from causing horizontal overflow. */
.clh-auto-ads-safe-mode .google-auto-placed {
    max-width: 100%;
    overflow-x: clip;
    margin-left: auto !important;
    margin-right: auto !important;
}

.clh-auto-ads-safe-mode .google-auto-placed > ins.adsbygoogle,
.clh-auto-ads-safe-mode ins.adsbygoogle {
    max-width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Keep manual/static ad zones clean and not oversized */
.clh-minimal-ads-enabled .clh-ad-slot,
.clh-minimal-ads-enabled .clh-custom-ad-slot {
    clear: both;
}

.clh-minimal-ads-enabled .clh-ad-inner,
.clh-minimal-ads-enabled .clh-custom-ad-card {
    max-width: 728px;
}

.clh-minimal-ads-enabled .clh-custom-ad-card {
    min-height: 0;
}

/* Prevent ad wrappers from creating a large blank area before Google fills ads */
.clh-minimal-ads-enabled .clh-ad-slot:empty,
.clh-minimal-ads-enabled .clh-custom-ad-slot:empty {
    display: none;
}

.clh-minimal-ads-enabled .clh-custom-ad-content:empty {
    display: none;
}

@media (min-width: 1025px) {
    .clh-minimal-ads-enabled .clh-ad-slot,
    .clh-minimal-ads-enabled .clh-custom-ad-slot {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .clh-minimal-ads-enabled .clh-ad-inner,
    .clh-minimal-ads-enabled .clh-custom-ad-card {
        width: min(100%, 728px);
    }
}

@media (min-width: 721px) and (max-width: 1024px) {
    .clh-minimal-ads-enabled .clh-ad-inner,
    .clh-minimal-ads-enabled .clh-custom-ad-card {
        width: min(100%, 640px);
    }

    .clh-minimal-ads-enabled .clh-ad-slot,
    .clh-minimal-ads-enabled .clh-custom-ad-slot {
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

@media (max-width: 720px) {
    .clh-auto-ads-safe-mode {
        overflow-x: hidden;
    }

    .clh-minimal-ads-enabled .clh-ad-inner,
    .clh-minimal-ads-enabled .clh-custom-ad-card {
        width: min(100%, 336px);
    }

    .clh-minimal-ads-enabled .clh-ad-slot,
    .clh-minimal-ads-enabled .clh-custom-ad-slot {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .clh-minimal-ads-enabled .clh-ad-slot ins.adsbygoogle,
    .clh-minimal-ads-enabled .clh-custom-ad-card ins.adsbygoogle,
    .clh-minimal-ads-enabled .clh-custom-ad-content ins.adsbygoogle {
        max-width: 336px;
        min-height: 90px;
    }
}


/* v1.6.8.4 patch: footer social links row */
.clh-footer-socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    max-width: 430px;
    margin-top: 22px;
}

.clh-footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 15px 0 11px;
    border-radius: 999px;
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.10);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.clh-footer-social-link:hover,
.clh-footer-social-link:focus-visible {
    transform: translateY(-2px);
    background: rgba(0,169,218,.16);
    border-color: rgba(0,169,218,.34);
    color: #fff;
    outline: none;
}

.clh-footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--clh-accent), var(--clh-accent-2));
    box-shadow: 0 8px 18px rgba(0,169,218,.22);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.clh-footer-social-link.is-whatsapp .clh-footer-social-icon {
    background: linear-gradient(135deg, #25D366, #128C7E);
}

.clh-footer-social-link.is-facebook .clh-footer-social-icon {
    background: linear-gradient(135deg, #1877F2, #0B5EC8);
}

.clh-footer-social-link.is-instagram .clh-footer-social-icon {
    background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #515BD4);
}

.clh-footer-social-link.is-linkedin .clh-footer-social-icon {
    background: linear-gradient(135deg, #0A66C2, #004182);
}

.clh-footer-social-link.is-youtube .clh-footer-social-icon {
    background: linear-gradient(135deg, #FF0000, #B50000);
}

.clh-footer-social-link.is-tiktok .clh-footer-social-icon {
    background: linear-gradient(135deg, #00F2EA, #FF0050);
}

@media (max-width: 900px) {
    .clh-footer-socials {
        max-width: 100%;
    }
}

@media (max-width: 620px) {
    .clh-footer-socials {
        gap: 8px;
        margin-top: 18px;
    }

    .clh-footer-social-link {
        min-height: 40px;
        padding: 0 12px 0 9px;
        gap: 8px;
        font-size: 13px;
    }

    .clh-footer-social-icon {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }
}


/* v1.6.8.5 patch: footer social links show only when saved in settings */
.clh-footer-socials:empty {
    display: none !important;
}

.clh-footer-socials {
    min-height: 0;
}


/* v1.6.8.6 patch: single clean footer social box */
.clh-footer-social-box {
    max-width: 430px;
    margin-top: 24px;
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.10);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.clh-footer-social-title {
    display: inline-block;
    margin-bottom: 12px;
    color: rgba(255,255,255,.78);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.clh-footer-socials {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    margin-top: 0;
    min-height: 0;
}

.clh-footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 13px 0 10px;
    border-radius: 999px;
    color: rgba(255,255,255,.94);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.09);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.clh-footer-social-link:hover,
.clh-footer-social-link:focus-visible {
    transform: translateY(-2px);
    background: rgba(0,169,218,.14);
    border-color: rgba(0,169,218,.34);
    color: #fff;
    outline: none;
}

.clh-footer-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--clh-accent), var(--clh-accent-2));
    box-shadow: 0 8px 16px rgba(0,169,218,.22);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

@media (max-width: 620px) {
    .clh-footer-social-box {
        max-width: 100%;
        margin-top: 18px;
        padding: 14px;
        border-radius: 18px;
    }

    .clh-footer-social-link {
        min-height: 38px;
        padding: 0 11px 0 9px;
        gap: 7px;
        font-size: 12px;
    }

    .clh-footer-social-icon {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }
}


/* v1.6.8.7 patch: footer social links fixed max 3 per row */
.clh-footer-social-box {
    max-width: 465px;
}

.clh-footer-socials {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: stretch;
}

.clh-footer-social-link {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    padding: 0 12px 0 9px;
    white-space: nowrap;
}

.clh-footer-social-link span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 900px) {
    .clh-footer-social-box {
        max-width: 100%;
    }

    .clh-footer-socials {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .clh-footer-socials {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
}

@media (max-width: 390px) {
    .clh-footer-socials {
        grid-template-columns: 1fr;
    }
}


/* v1.6.8.8 patch: keep footer social links 3 per row on all screen sizes */
.clh-footer-socials {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px;
}

.clh-footer-social-link {
    width: 100%;
    min-width: 0;
    justify-content: center;
}

.clh-footer-social-link span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 620px) {
    .clh-footer-social-box {
        padding: 12px;
    }

    .clh-footer-socials {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px;
    }

    .clh-footer-social-link {
        min-height: 35px;
        padding: 0 7px;
        gap: 5px;
        font-size: 10.5px;
        border-radius: 999px;
    }

    .clh-footer-social-icon {
        width: 20px;
        height: 20px;
        font-size: 9px;
        flex: 0 0 20px;
    }
}

@media (max-width: 390px) {
    .clh-footer-socials {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px;
    }

    .clh-footer-social-link {
        min-height: 32px;
        padding: 0 5px;
        gap: 4px;
        font-size: 9.5px;
    }

    .clh-footer-social-icon {
        width: 18px;
        height: 18px;
        font-size: 8px;
        flex-basis: 18px;
    }
}


/* v1.6.8.9 patch: make footer social wrapper invisible and align naturally */
.clh-footer-social-box {
    max-width: 430px;
    margin-top: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.clh-footer-social-title {
    display: block;
    margin: 0 0 10px;
    color: rgba(255,255,255,.72);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.clh-footer-socials {
    max-width: 405px;
}

.clh-footer-social-link {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.11);
    box-shadow: none;
}

.clh-footer-social-link:hover,
.clh-footer-social-link:focus-visible {
    background: rgba(0,169,218,.16);
    border-color: rgba(0,169,218,.34);
}

@media (max-width: 620px) {
    .clh-footer-social-box {
        max-width: 100%;
        margin-top: 18px;
        padding: 0;
    }

    .clh-footer-socials {
        max-width: 100%;
    }
}


/* v1.6.9.0 patch: clean single social settings source and footer output */
.clh-footer-social-box {
    padding: 0;
    margin-top: 22px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.clh-footer-socials {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px;
    max-width: 405px;
}

.clh-footer-social-link {
    min-width: 0;
    width: 100%;
    justify-content: center;
}

.clh-footer-social-link span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 620px) {
    .clh-footer-socials {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px;
        max-width: 100%;
    }

    .clh-footer-social-link {
        min-height: 34px;
        padding: 0 6px;
        font-size: 10px;
        gap: 5px;
    }

    .clh-footer-social-icon {
        width: 19px;
        height: 19px;
        font-size: 8px;
        flex: 0 0 19px;
    }
}


/* v1.6.9.1 patch: professional 3D service illustrations */
.clh-service-card .clh-service-image,
.clh-services-page-card .clh-service-image {
    background: linear-gradient(135deg, #051d4d 0%, #063b78 52%, #00a9da 180%);
    border-color: rgba(0,169,218,.14);
}

.clh-service-card .clh-service-image .clh-service-card-img,
.clh-services-page-card .clh-service-image .clh-service-card-img,
.clh-visual-image-panel .clh-feature-img {
    object-fit: cover;
    object-position: center center;
}

.clh-service-card .clh-service-image .clh-service-card-img {
    transition: transform .35s ease, filter .35s ease;
}

.clh-service-card:hover .clh-service-image .clh-service-card-img {
    transform: scale(1.035);
    filter: saturate(1.05) contrast(1.02);
}

@media (max-width: 720px) {
    .clh-service-card .clh-service-image .clh-service-card-img {
        min-height: 170px;
    }
}


/* v1.6.9.2 patch: forced service image replacement + responsive 3D image fitting */
.clh-service-card .clh-service-image,
.clh-services-page-card .clh-service-image {
    background: linear-gradient(135deg, #061c4d 0%, #073d80 100%);
}

.clh-service-card .clh-service-image .clh-service-card-img,
.clh-services-page-card .clh-service-image .clh-service-card-img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 10;
    min-height: 190px;
    object-fit: cover;
    object-position: center center;
}

.clh-visual-image-panel .clh-feature-img {
    width: 100%;
    object-fit: cover;
    object-position: center center;
}


/* v1.6.9.3 patch: force service 3D images visible and responsive on all devices */
.clh-services-overview .clh-service-image,
.clh-card-grid .clh-service-image,
.clh-services-page-grid .clh-service-image,
.clh-services-page-card .clh-service-image,
.clh-service-card .clh-service-image {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(135deg, #061c4d 0%, #073d80 100%);
}

.clh-services-overview .clh-service-image img,
.clh-card-grid .clh-service-image img,
.clh-services-page-grid .clh-service-image img,
.clh-services-page-card .clh-service-image img,
.clh-service-card .clh-service-image img,
.clh-service-card-img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center center;
}

/* Homepage service cards: keep images clean on desktop/tablet/mobile */
.clh-service-card .clh-service-image .clh-service-card-img {
    min-height: 0 !important;
}

/* Services page cards */
.clh-services-page-card .clh-service-image {
    margin-bottom: 0;
}

/* Feature image panels also remain responsive */
.clh-visual-image-panel .clh-feature-img {
    display: block !important;
    width: 100%;
    height: auto;
    min-height: clamp(220px, 30vw, 400px);
    object-fit: cover;
    object-position: center center;
}

@media (min-width: 1025px) {
    .clh-service-card .clh-service-image,
    .clh-services-page-card .clh-service-image {
        aspect-ratio: 16 / 10;
    }
}

@media (min-width: 721px) and (max-width: 1024px) {
    .clh-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .clh-service-card .clh-service-image,
    .clh-services-page-card .clh-service-image {
        aspect-ratio: 16 / 10;
    }

    .clh-visual-image-panel .clh-feature-img {
        min-height: 300px;
    }
}

@media (max-width: 720px) {
    .clh-card-grid {
        grid-template-columns: 1fr;
    }

    .clh-service-card .clh-service-image,
    .clh-services-page-card .clh-service-image {
        aspect-ratio: 16 / 10;
        border-radius: 18px;
    }

    .clh-service-card .clh-service-image img,
    .clh-services-page-card .clh-service-image img,
    .clh-service-card-img {
        aspect-ratio: 16 / 10;
        border-radius: 18px;
    }

    .clh-visual-image-panel .clh-feature-img {
        min-height: 240px;
        border-radius: 18px;
    }
}


/* v1.6.9.5 patch: ensure Get Quote popup opens reliably */
body.clh-popup-open {
    overflow: hidden;
}

.clh-popup.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.clh-popup[aria-hidden="false"] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.clh-popup.is-visible .clh-popup-card,
.clh-popup[aria-hidden="false"] .clh-popup-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.clh-popup-form.is-visible {
    display: block;
}


/* v1.6.9.6 patch: hard fix for Get Quote popup visibility */
body.clh-popup-open {
    overflow: hidden;
}

.clh-popup {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.clh-popup.is-open,
.clh-popup.is-visible,
.clh-popup[aria-hidden="false"] {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 999999 !important;
}

.clh-popup.is-open .clh-popup-card,
.clh-popup.is-visible .clh-popup-card,
.clh-popup[aria-hidden="false"] .clh-popup-card {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
}

.clh-popup-form.is-visible {
    display: block !important;
}


/* v1.7.0 patch: complete quotation popup trigger/display fix */
body.clh-popup-open {
    overflow: hidden !important;
}

.clh-popup {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.clh-popup.is-open,
.clh-popup.is-visible,
.clh-popup[aria-hidden="false"] {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2147483000 !important;
}

.clh-popup.is-open .clh-popup-card,
.clh-popup.is-visible .clh-popup-card,
.clh-popup[aria-hidden="false"] .clh-popup-card {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
}

.clh-popup-form.is-visible,
#clh-popup-form.is-visible {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


/* v1.7.1 patch: quotation form submit/loading state */
.clh-quote-form .clh-btn.is-loading,
.clh-quote-form button.is-loading {
    opacity: .78;
    cursor: wait;
    pointer-events: none;
}


/* v1.7.2 patch: quote AJAX status messages */
.clh-quote-form-status {
    display: none;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 700;
}

.clh-quote-form-status.is-loading,
.clh-quote-form-status.is-success,
.clh-quote-form-status.is-error {
    display: block;
}

.clh-quote-form-status.is-loading {
    background: rgba(0,169,218,.10);
    color: var(--clh-primary);
    border: 1px solid rgba(0,169,218,.20);
}

.clh-quote-form-status.is-success {
    background: rgba(34,197,94,.12);
    color: #166534;
    border: 1px solid rgba(34,197,94,.22);
}

.clh-quote-form-status.is-error {
    background: rgba(239,68,68,.10);
    color: #991b1b;
    border: 1px solid rgba(239,68,68,.22);
}

.clh-quote-form button.is-loading,
.clh-quote-form .clh-btn.is-loading {
    opacity: .78;
    cursor: wait;
    pointer-events: none;
}


/* v1.7.3 patch: quote form validation fields */
.clh-quote-form select,
.clh-quote-form input[type="tel"],
.clh-quote-form input[type="email"],
.clh-quote-form input[type="text"],
.clh-quote-form textarea {
    width: 100%;
}

.clh-quote-form select {
    min-height: 46px;
    border-radius: 14px;
}

.clh-quote-form-status.is-success {
    background: rgba(34,197,94,.13);
    color: #14532d;
    border-color: rgba(34,197,94,.28);
}

.clh-quote-form-status.is-error {
    background: rgba(239,68,68,.10);
    color: #7f1d1d;
    border-color: rgba(239,68,68,.26);
}

.clh-quote-form-status.is-loading {
    background: rgba(0,169,218,.11);
    color: var(--clh-primary);
    border-color: rgba(0,169,218,.24);
}


/* v1.7.4 patch: polished quotation form layout and validation UI */
.clh-quote-form {
    gap: 18px;
}

.clh-quote-form .clh-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.clh-quote-form .clh-field {
    display: grid;
    gap: 8px;
    margin: 0;
}

.clh-quote-form .clh-field > span {
    color: var(--clh-text);
    font-size: 13px;
    font-weight: 900;
    line-height: 1.25;
}

.clh-quote-form .clh-field small {
    color: rgba(4,30,79,.72);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.2;
}

.clh-quote-form .clh-field em {
    display: block;
    color: var(--clh-muted);
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.35;
    margin-top: 1px;
}

.clh-quote-form input,
.clh-quote-form select,
.clh-quote-form textarea {
    width: 100%;
    min-height: 48px;
    border-radius: 15px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.35;
}

.clh-quote-form select {
    appearance: auto;
    min-height: 48px !important;
    height: 48px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.clh-quote-form textarea {
    min-height: 132px;
    resize: vertical;
}

.clh-quote-form .clh-phone-field {
    grid-column: span 1;
}

.clh-quote-form .clh-phone-row {
    display: grid;
    grid-template-columns: minmax(94px, .42fr) minmax(0, 1fr);
    gap: 10px;
    align-items: end;
}

.clh-quote-form .clh-phone-row label {
    display: grid;
    gap: 6px;
    margin: 0;
}

.clh-quote-form .clh-phone-row input[name="country_code"] {
    text-align: center;
    font-weight: 900;
}

.clh-quote-form input:invalid:not(:placeholder-shown),
.clh-quote-form textarea:invalid:not(:placeholder-shown),
.clh-quote-form select:invalid:not(:focus) {
    border-color: rgba(239,68,68,.45);
}

.clh-quote-form input:valid:not(:placeholder-shown),
.clh-quote-form textarea:valid:not(:placeholder-shown),
.clh-quote-form select:valid {
    border-color: rgba(34,197,94,.35);
}

.clh-quote-form .clh-btn[type="submit"] {
    width: 100%;
    min-height: 50px;
    justify-content: center;
}

@media (max-width: 820px) {
    .clh-quote-form .clh-form-grid {
        grid-template-columns: 1fr;
    }

    .clh-quote-form .clh-phone-row {
        grid-template-columns: minmax(92px, .38fr) minmax(0, 1fr);
    }

    .clh-quote-form input,
    .clh-quote-form select {
        min-height: 46px;
        height: 46px;
    }
}

@media (max-width: 420px) {
    .clh-quote-form .clh-phone-row {
        grid-template-columns: 1fr;
    }

    .clh-quote-form .clh-phone-row input[name="country_code"] {
        text-align: left;
    }

    .clh-quote-form textarea {
        min-height: 120px;
    }
}


/* v1.7.6 patch: remove blank social buttons from contact section */
.clh-socials-clean .clh-social-link:not([href]),
.clh-socials-clean .clh-social-link[href=""],
.clh-socials-clean .clh-social-link[href="#"] {
    display: none !important;
}

.clh-socials-clean:empty {
    display: none !important;
}


/* v1.7.7 patch: force-hide empty / icon-only contact social buttons */
.clh-socials-clean .clh-social-link:not([href]),
.clh-socials-clean .clh-social-link[href=""],
.clh-socials-clean .clh-social-link[href="#"],
.clh-socials-clean .clh-social-link:empty {
    display: none !important;
}

/* If a social link has no readable label, hide it. */
.clh-socials-clean .clh-social-link:not(:has(.clh-social-label)) {
    display: none !important;
}

.clh-socials-clean .clh-social-link .clh-social-label:empty {
    display: none !important;
}

.clh-socials-clean .clh-social-link:has(.clh-social-label:empty) {
    display: none !important;
}

/* Fallback for browsers without :has - hide tiny icon-only ghost buttons by class if URL is invalid/empty. */
.clh-contact .clh-social-link:not([href]),
.clh-contact .clh-social-link[href=""],
.clh-contact .clh-social-link[href="#"],
.clh-contact-section .clh-social-link:not([href]),
.clh-contact-section .clh-social-link[href=""],
.clh-contact-section .clh-social-link[href="#"] {
    display: none !important;
}

.clh-socials-clean:empty {
    display: none !important;
}


/* v1.7.8 patch: contact social buttons styled like footer social buttons */
.clh-contact .clh-socials-clean,
.clh-contact-section .clh-socials-clean,
.clh-contact-details .clh-socials-clean,
.clh-contact-card + .clh-socials-clean,
.clh-socials-clean {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}

.clh-contact .clh-socials-clean .clh-social-link,
.clh-contact-section .clh-socials-clean .clh-social-link,
.clh-contact-details .clh-socials-clean .clh-social-link,
.clh-contact-card + .clh-socials-clean .clh-social-link,
.clh-socials-clean .clh-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 15px 0 11px;
    border-radius: 999px;
    color: var(--clh-primary);
    background: rgba(255,255,255,.90);
    border: 1px solid rgba(4,30,79,.10);
    box-shadow: 0 10px 26px rgba(4,30,79,.08);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
    text-decoration: none;
    transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.clh-contact .clh-socials-clean .clh-social-link:hover,
.clh-contact .clh-socials-clean .clh-social-link:focus-visible,
.clh-contact-section .clh-socials-clean .clh-social-link:hover,
.clh-contact-section .clh-socials-clean .clh-social-link:focus-visible,
.clh-socials-clean .clh-social-link:hover,
.clh-socials-clean .clh-social-link:focus-visible {
    transform: translateY(-2px);
    background: #fff;
    border-color: rgba(0,169,218,.28);
    box-shadow: 0 14px 34px rgba(4,30,79,.12);
    color: var(--clh-primary);
    outline: none;
}

.clh-contact .clh-socials-clean .clh-social-icon,
.clh-contact-section .clh-socials-clean .clh-social-icon,
.clh-contact-details .clh-socials-clean .clh-social-icon,
.clh-contact-card + .clh-socials-clean .clh-social-icon,
.clh-socials-clean .clh-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--clh-accent), var(--clh-accent-2));
    box-shadow: 0 8px 18px rgba(0,169,218,.20);
    font-size: 12px;
    font-weight: 950;
    line-height: 1;
    text-transform: uppercase;
}

.clh-socials-clean .clh-social-link.is-whatsapp .clh-social-icon {
    background: linear-gradient(135deg, #25D366, #128C7E);
}

.clh-socials-clean .clh-social-link.is-facebook .clh-social-icon {
    background: linear-gradient(135deg, #1877F2, #0B5EC8);
}

.clh-socials-clean .clh-social-link.is-instagram .clh-social-icon {
    background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #515BD4);
}

.clh-socials-clean .clh-social-link.is-linkedin .clh-social-icon {
    background: linear-gradient(135deg, #0A66C2, #004182);
}

.clh-socials-clean .clh-social-link.is-youtube .clh-social-icon {
    background: linear-gradient(135deg, #FF0000, #B50000);
}

.clh-socials-clean .clh-social-link.is-tiktok .clh-social-icon {
    background: linear-gradient(135deg, #00F2EA, #FF0050);
}

.clh-socials-clean .clh-social-link.is-twitter .clh-social-icon {
    background: linear-gradient(135deg, #111827, #334155);
}

.clh-socials-clean .clh-social-label {
    display: inline-block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Keep footer color behavior intact on dark footer */
.clh-footer .clh-socials-clean .clh-social-link,
.clh-footer-socials .clh-social-link,
.clh-footer-social-box .clh-social-link {
    color: rgba(255,255,255,.94);
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.11);
    box-shadow: none;
}

.clh-footer .clh-socials-clean .clh-social-link:hover,
.clh-footer-socials .clh-social-link:hover,
.clh-footer-social-box .clh-social-link:hover {
    background: rgba(0,169,218,.16);
    border-color: rgba(0,169,218,.34);
    color: #fff;
}

@media (max-width: 620px) {
    .clh-contact .clh-socials-clean,
    .clh-contact-section .clh-socials-clean,
    .clh-socials-clean {
        gap: 8px;
        margin-top: 18px;
    }

    .clh-contact .clh-socials-clean .clh-social-link,
    .clh-contact-section .clh-socials-clean .clh-social-link,
    .clh-socials-clean .clh-social-link {
        min-height: 40px;
        padding: 0 12px 0 9px;
        gap: 8px;
        font-size: 13px;
    }

    .clh-contact .clh-socials-clean .clh-social-icon,
    .clh-contact-section .clh-socials-clean .clh-social-icon,
    .clh-socials-clean .clh-social-icon {
        width: 24px;
        height: 24px;
        flex-basis: 24px;
        font-size: 11px;
    }
}

/* =====================================================================
   CoreLinkHub Premium Polish (v1.8)
   Corporate cleanliness + modern tech feel. Additive, non-breaking.
   ===================================================================== */

/* Hero headline (sizing inherited from responsive .clh-hero h1 rules) */
.clh-hero .clh-hero-headline {
    margin: 14px 0 18px;
    text-wrap: balance;
}

.clh-hero-content .clh-hero-subtitle,
.clh-hero-content p.clh-hero-subtitle {
    margin-top: 0;
}

/* Reveal-on-scroll (only hidden when JS is active, so no-JS users see content) */
.clh-js .clh-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
    will-change: opacity, transform;
}

.clh-js .clh-reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .clh-js .clh-reveal,
    .clh-js .clh-reveal.is-visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Premium card interaction */
.clh-service-card {
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.clh-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(4, 30, 79, 0.16);
    border-color: color-mix(in srgb, var(--clh-accent) 40%, var(--clh-border));
}

/* Process steps subtle lift */
.clh-process-grid > div {
    transition: transform .28s ease, box-shadow .28s ease;
}

.clh-process-grid > div:hover {
    transform: translateY(-4px);
}

/* Refined trust chips in hero */
.clh-hero .clh-trust-row span {
    backdrop-filter: blur(6px);
    transition: transform .2s ease, background .2s ease;
}

.clh-hero .clh-trust-row span:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.14);
}

/* Slightly tighter, more premium section rhythm on large screens */
@media (min-width: 1025px) {
    .clh-section {
        padding: 96px 0;
    }
}

/* =====================================================================
   CoreLinkHub Blog Experience (v1.8 — Phase 4)
   ===================================================================== */

.clh-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    color: rgba(255, 255, 255, 0.82);
    font-weight: 600;
    font-size: 15px;
}

.clh-post-hero a.clh-kicker {
    text-decoration: none;
}

.clh-post-meta-sep {
    opacity: 0.55;
}

/* Category + tag chips */
.clh-post-terms {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 30px 0;
    padding-top: 24px;
    border-top: 1px solid var(--clh-border);
}

.clh-post-cats a,
.clh-post-tag {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
}

.clh-post-cats a {
    background: linear-gradient(135deg, var(--clh-accent), #0388cf);
    color: #fff;
}

.clh-post-tag {
    background: var(--clh-surface-2);
    color: var(--clh-muted);
    border: 1px solid var(--clh-border);
}

.clh-post-tag:hover {
    color: var(--clh-accent);
    border-color: var(--clh-accent);
}

/* Share buttons */
.clh-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 26px 0;
}

.clh-share-label {
    font-weight: 800;
    color: var(--clh-text);
}

.clh-share-link {
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--clh-border);
    background: var(--clh-surface);
    color: var(--clh-text);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}

.clh-share-link:hover {
    transform: translateY(-2px);
    color: #fff;
}

.clh-share-link.is-facebook:hover { background: #1877f2; border-color: #1877f2; }
.clh-share-link.is-x:hover        { background: #000; border-color: #000; }
.clh-share-link.is-linkedin:hover { background: #0a66c2; border-color: #0a66c2; }
.clh-share-link.is-whatsapp:hover { background: #25d366; border-color: #25d366; }

/* Author box */
.clh-author-box {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 34px 0;
    padding: 26px;
    border-radius: var(--clh-radius);
    background: var(--clh-surface-2);
    border: 1px solid var(--clh-border);
}

.clh-author-avatar img {
    border-radius: 50%;
    width: 72px;
    height: 72px;
    object-fit: cover;
}

.clh-author-kicker {
    display: block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--clh-accent);
}

.clh-author-name {
    margin: 4px 0 8px;
    font-size: 20px;
}

.clh-author-bio {
    margin: 0 0 10px;
    color: var(--clh-muted);
}

.clh-author-link {
    font-weight: 800;
}

/* Post navigation */
.clh-post-nav {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin: 30px 0;
    padding-top: 24px;
    border-top: 1px solid var(--clh-border);
}

.clh-post-nav a {
    font-weight: 800;
}

.clh-post-nav-next {
    text-align: right;
    margin-left: auto;
}

/* Related posts */
.clh-related-posts {
    margin: 20px 0 80px;
}

/* Comments */
.clh-comments {
    margin: 40px 0 0;
    padding-top: 30px;
    border-top: 1px solid var(--clh-border);
}

.clh-comments-title {
    font-size: 24px;
}

.clh-comment-list {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
}

.clh-comment-list .comment-body {
    padding: 18px 0;
    border-bottom: 1px solid var(--clh-border);
}

.clh-comments .comment-author .fn {
    font-weight: 800;
}

.clh-comments .comment-respond {
    margin-top: 24px;
}

.clh-comments input[type="text"],
.clh-comments input[type="email"],
.clh-comments input[type="url"],
.clh-comments textarea {
    width: 100%;
    max-width: 100%;
    padding: 12px 14px;
    margin-top: 6px;
    border: 1px solid var(--clh-border);
    border-radius: 14px;
    background: var(--clh-surface);
    color: var(--clh-text);
}

@media (max-width: 720px) {
    .clh-author-box {
        flex-direction: column;
    }

    .clh-post-nav-next {
        text-align: left;
        margin-left: 0;
    }
}

/* =====================================================================
   CoreLinkHub Service Pages Premium (v1.8 — Phase 5)
   ===================================================================== */

/* Trust cards */
.clh-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.clh-trust-card {
    padding: 26px 22px;
    border-radius: var(--clh-radius);
    background: var(--clh-surface);
    border: 1px solid var(--clh-border);
    box-shadow: var(--clh-shadow);
    transition: transform .28s ease, box-shadow .28s ease;
}

.clh-trust-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 56px rgba(4, 30, 79, 0.16);
}

.clh-trust-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
    color: var(--clh-primary-2);
}

.clh-trust-card p {
    margin: 0;
    color: var(--clh-muted);
}

/* Process timeline */
.clh-timeline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.clh-timeline-step {
    position: relative;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 24px;
    border-radius: var(--clh-radius);
    background: var(--clh-surface);
    border: 1px solid var(--clh-border);
    box-shadow: var(--clh-shadow);
}

.clh-timeline-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--clh-accent), #0388cf);
    color: #fff;
    font-weight: 900;
    font-size: 18px;
}

.clh-timeline-step h3 {
    margin: 4px 0 8px;
    font-size: 20px;
}

.clh-timeline-step p {
    margin: 0;
    color: var(--clh-muted);
}

/* FAQ accordion */
.clh-faq-wrap {
    max-width: 880px;
}

.clh-faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.clh-faq-item {
    border: 1px solid var(--clh-border);
    border-radius: 18px;
    background: var(--clh-surface);
    overflow: hidden;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.clh-faq-item[open] {
    border-color: color-mix(in srgb, var(--clh-accent) 45%, var(--clh-border));
    box-shadow: var(--clh-shadow);
}

.clh-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 18px 22px;
    font-weight: 800;
    font-size: 17px;
    color: var(--clh-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.clh-faq-item summary::-webkit-details-marker {
    display: none;
}

.clh-faq-item summary::after {
    content: "+";
    font-size: 24px;
    font-weight: 400;
    color: var(--clh-accent);
    transition: transform .25s ease;
    line-height: 1;
}

.clh-faq-item[open] summary::after {
    transform: rotate(45deg);
}

.clh-faq-answer {
    padding: 0 22px 20px;
    color: var(--clh-muted);
}

.clh-faq-answer p {
    margin: 0;
    line-height: 1.7;
}

@media (max-width: 1024px) {
    .clh-trust-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .clh-trust-grid,
    .clh-timeline {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   CoreLinkHub Portfolio + Ad Slots (v1.9 — Phase 7)
   ===================================================================== */

/* Ad slots: stay invisible until a code/ad is placed inside, so layout never breaks */
.adsense-slot:empty {
    display: none !important;
}

.adsense-slot {
    margin: 26px auto;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
}

.adsense-slot-sidebar {
    margin: 0 0 24px;
}

/* Portfolio grid + cards */
.clh-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.clh-portfolio-card {
    display: flex;
    flex-direction: column;
    background: var(--clh-surface);
    border: 1px solid var(--clh-border);
    border-radius: var(--clh-radius);
    box-shadow: var(--clh-shadow);
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.clh-portfolio-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(4, 30, 79, 0.18);
    border-color: color-mix(in srgb, var(--clh-accent) 40%, var(--clh-border));
}

.clh-portfolio-thumb {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, var(--clh-primary), var(--clh-primary-2));
}

.clh-portfolio-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.clh-portfolio-card:hover .clh-portfolio-thumb img {
    transform: scale(1.05);
}

.clh-portfolio-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
    color: #fff;
    font-weight: 800;
    font-size: 20px;
    text-align: center;
}

.clh-portfolio-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    flex: 1;
}

.clh-portfolio-tag {
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(0, 169, 218, 0.12);
    color: var(--clh-accent);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.clh-portfolio-body h3 {
    margin: 4px 0 0;
    font-size: 22px;
}

.clh-portfolio-body p {
    margin: 0;
    color: var(--clh-muted);
}

.clh-portfolio-tech {
    font-size: 13px;
    font-weight: 700;
    color: var(--clh-primary-2);
    opacity: .85;
}

.clh-portfolio-body .clh-read-more {
    margin-top: auto;
    font-weight: 900;
}

.clh-portfolio-more {
    margin-top: 36px;
    text-align: center;
}

/* Portfolio filter bar */
.clh-portfolio-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 34px;
}

.clh-portfolio-filter-link {
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--clh-border);
    background: var(--clh-surface);
    color: var(--clh-text);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.clh-portfolio-filter-link:hover,
.clh-portfolio-filter-link.is-active {
    background: linear-gradient(135deg, var(--clh-accent), #0388cf);
    color: #fff;
    border-color: transparent;
}

/* Single project layout */
.clh-project-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, .42fr);
    gap: 40px;
    align-items: start;
}

.clh-single-project {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.clh-single-project .clh-single-thumb {
    margin-bottom: 26px;
    border-radius: var(--clh-radius);
    overflow: hidden;
}

.clh-project-sidebar {
    position: sticky;
    top: calc(var(--clh-header-height) + 20px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.clh-project-card-box,
.clh-project-cta-box {
    padding: 26px;
    border-radius: var(--clh-radius);
    background: var(--clh-surface);
    border: 1px solid var(--clh-border);
    box-shadow: var(--clh-shadow);
}

.clh-project-card-title {
    font-size: 20px;
    margin-bottom: 16px;
}

.clh-project-meta {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.clh-project-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.clh-project-meta-label {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--clh-accent);
}

.clh-project-meta-item strong {
    font-size: 16px;
    color: var(--clh-text);
}

.clh-project-live {
    align-self: flex-start;
    margin-top: 4px;
}

.clh-project-cta-box h3 {
    font-size: 19px;
}

.clh-project-cta-box p {
    color: var(--clh-muted);
    margin-bottom: 16px;
}

@media (max-width: 1024px) {
    .clh-portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .clh-project-layout {
        grid-template-columns: 1fr;
    }

    .clh-project-sidebar {
        position: static;
    }
}

@media (max-width: 620px) {
    .clh-portfolio-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   CoreLinkHub Premium Service Card + Icon (v1.9.1)
   ===================================================================== */

/* Floating gradient icon badge (replaces the old flat text label) */
.clh-service-card .clh-card-icon {
    position: relative;
    z-index: 2;
    margin-top: -34px;
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--clh-accent), #0388cf);
    color: #fff;
    border: 4px solid var(--clh-surface);
    box-shadow: 0 14px 30px rgba(0, 169, 218, 0.35);
    transition: transform .3s ease, box-shadow .3s ease;
    font-size: 0; /* hide any leftover text, show only the SVG */
}

.clh-card-icon-svg {
    width: 27px;
    height: 27px;
    display: block;
}

.clh-service-card:hover .clh-card-icon {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 18px 38px rgba(0, 169, 218, 0.45);
}

/* Card content rhythm */
.clh-service-card h3,
.clh-service-card h2 {
    margin-top: 14px;
    margin-bottom: 10px;
    font-size: 21px;
    letter-spacing: -.02em;
}

.clh-service-card p {
    color: var(--clh-muted);
    line-height: 1.65;
}

/* Image: subtle zoom + smoother corners on hover */
.clh-service-image {
    position: relative;
}

.clh-service-image .clh-service-card-img {
    transition: transform .45s ease;
}

.clh-service-card:hover .clh-service-image .clh-service-card-img {
    transform: scale(1.06);
}

/* "Learn more" link with animated arrow */
.clh-service-card > a:not(.clh-service-image) {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--clh-accent);
}

.clh-service-card > a:not(.clh-service-image) span {
    transition: transform .25s ease;
}

.clh-service-card:hover > a:not(.clh-service-image) span {
    transform: translateX(5px);
}

@media (prefers-color-scheme: dark) {
    .clh-service-card .clh-card-icon {
        border-color: var(--clh-surface);
    }
}

/* =====================================================================
   CoreLinkHub Premium Hero Polish (v1.9.1)
   ===================================================================== */

/* Gradient-accented keyword in the hero headline */
.clh-hero-accent {
    background: linear-gradient(118deg, var(--clh-accent-2), var(--clh-accent) 55%, #7ae4ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Larger, more confident hero buttons */
.clh-hero-actions .clh-btn {
    min-height: 52px;
    padding: 14px 26px;
    font-size: 15.5px;
    border-radius: 14px;
}

.clh-hero-actions .clh-btn-light {
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}

/* Trust chips: add a soft status dot */
.clh-hero .clh-trust-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 12px;
}

.clh-hero .clh-trust-row span::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--clh-accent-2);
    box-shadow: 0 0 0 3px rgba(0, 169, 218, 0.18);
    flex: 0 0 auto;
}

/* Floating glass "trust" badge on the hero visual */
.clh-hero-float-badge {
    position: absolute;
    left: 18px;
    bottom: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 11px 15px;
    border-radius: 16px;
    background: rgba(4, 30, 79, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.clh-hero-float-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #28e07b;
    box-shadow: 0 0 0 4px rgba(40, 224, 123, 0.2);
    flex: 0 0 auto;
    animation: clh-pulse 2.4s ease-in-out infinite;
}

@keyframes clh-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(40, 224, 123, 0.2); }
    50%      { box-shadow: 0 0 0 7px rgba(40, 224, 123, 0.08); }
}

@media (prefers-reduced-motion: reduce) {
    .clh-hero-float-dot { animation: none; }
}

.clh-hero-float-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.clh-hero-float-text strong {
    color: #fff;
    font-size: 14px;
    font-weight: 800;
}

.clh-hero-float-text small {
    color: rgba(255, 255, 255, 0.72);
    font-size: 11.5px;
    letter-spacing: .02em;
}

@media (max-width: 480px) {
    .clh-hero-float-badge {
        left: 12px;
        bottom: 12px;
        padding: 9px 12px;
    }

    .clh-hero-float-text strong { font-size: 13px; }
    .clh-hero-float-text small { font-size: 10.5px; }
}

/* =====================================================================
   CoreLinkHub Hero Showcase Slider (v1.9.2)
   ===================================================================== */

.clh-hero-slider {
    position: relative;
    z-index: 1;
}

/* Keep the slider clean inside the frame */
.clh-hero-clean-frame:has(.clh-hero-slider)::before,
.clh-hero-clean-frame:has(.clh-hero-slider)::after {
    display: none;
}

.clh-hero-slides {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: 18px;
    overflow: hidden;
    background: var(--clh-primary);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.clh-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity .9s ease, transform 5.5s ease;
    pointer-events: none;
}

.clh-hero-slide.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.clh-hero-slide-img,
.clh-hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.clh-hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 52%, rgba(4, 30, 79, 0.58));
    pointer-events: none;
}

.clh-hero-slide-caption {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(4, 30, 79, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
    max-width: calc(100% - 32px);
}

.clh-hero-dots {
    position: absolute;
    right: 16px;
    bottom: 20px;
    z-index: 3;
    display: flex;
    gap: 8px;
}

.clh-hero-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
}

.clh-hero-dot.is-active {
    width: 26px;
    background: var(--clh-accent);
}

.clh-hero-dot:hover {
    background: rgba(255, 255, 255, 0.75);
}

@media (prefers-reduced-motion: reduce) {
    .clh-hero-slide {
        transition: opacity .4s ease;
        transform: none;
    }
    .clh-hero-slide.is-active {
        transform: none;
    }
}

@media (max-width: 480px) {
    .clh-hero-slide-caption {
        left: 12px;
        bottom: 12px;
        padding: 8px 11px;
        gap: 9px;
    }
    .clh-hero-dots {
        right: 12px;
        bottom: 14px;
    }
}

/* =====================================================================
   CoreLinkHub Premium Footer / Blog / Sidebar / Contact (v1.9.3)
   ===================================================================== */

/* ---- Footer ---- */
.clh-footer {
    position: relative;
    background:
        radial-gradient(circle at 12% 0%, rgba(0, 169, 218, 0.16), transparent 40%),
        linear-gradient(180deg, #052561 0%, #041e4f 58%, #03142f 100%);
}

.clh-footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--clh-accent), var(--clh-accent-2), transparent);
}

.clh-footer h3 {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.clh-footer h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 34px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--clh-accent), var(--clh-accent-2));
}

.clh-footer-links li a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: color .2s ease, transform .2s ease;
}

.clh-footer-links li a::before {
    content: "›";
    color: var(--clh-accent-2);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .2s ease, transform .2s ease;
    font-weight: 900;
}

.clh-footer-links li a:hover {
    transform: translateX(2px);
}

.clh-footer-links li a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

/* ---- Blog list cards ---- */
.clh-list-post {
    align-items: center;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.clh-list-post:hover {
    transform: translateY(-4px);
    box-shadow: 0 26px 56px rgba(4, 30, 79, 0.16);
    border-color: color-mix(in srgb, var(--clh-accent) 35%, var(--clh-border));
}

.clh-list-thumb {
    overflow: hidden;
}

.clh-list-thumb img {
    transition: transform .45s ease;
}

.clh-list-post:hover .clh-list-thumb img {
    transform: scale(1.06);
}

.clh-list-post .clh-post-date {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--clh-accent);
}

.clh-list-post h2 {
    margin-bottom: 10px;
    line-height: 1.2;
}

.clh-list-post h2 a:hover {
    color: var(--clh-accent);
}

/* Blog hero gets a soft accent backdrop + tighter, balanced spacing */
.clh-page-hero {
    position: relative;
    padding: 52px 0 44px;
    background:
        radial-gradient(circle at 85% 10%, rgba(0, 169, 218, 0.10), transparent 42%),
        linear-gradient(180deg, var(--clh-surface-2), transparent);
}

.clh-page-hero h1 {
    margin-top: 10px;
}

/* Reduce the large empty band between a page hero and the first section */
.clh-page-hero + .clh-section {
    padding-top: 52px;
}

@media (max-width: 720px) {
    .clh-page-hero {
        padding: 36px 0 30px;
    }

    .clh-page-hero + .clh-section {
        padding-top: 40px;
    }
}

/* ---- Sidebar widgets ---- */
.clh-widget {
    position: relative;
    overflow: hidden;
}

.clh-widget-title {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 14px;
}

.clh-widget-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--clh-accent), var(--clh-accent-2));
}

.clh-widget ul {
    list-style: none;
    padding-left: 0;
}

.clh-widget li {
    padding: 9px 0;
    border-bottom: 1px solid var(--clh-border);
}

.clh-widget li:last-child {
    border-bottom: 0;
}

.clh-widget li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

.clh-widget li a:hover {
    color: var(--clh-accent);
}

.clh-search-form input {
    border-radius: 14px;
}

/* ---- Contact page premium ---- */
.clh-contact-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 44px;
}

.clh-contact-tile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 24px;
    border-radius: var(--clh-radius);
    background: var(--clh-surface);
    border: 1px solid var(--clh-border);
    box-shadow: var(--clh-shadow);
    color: var(--clh-text);
    text-decoration: none;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

a.clh-contact-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 56px rgba(4, 30, 79, 0.16);
    border-color: color-mix(in srgb, var(--clh-accent) 40%, var(--clh-border));
}

.clh-contact-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 8px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--clh-accent), #0388cf);
    color: #fff;
    box-shadow: 0 12px 26px rgba(0, 169, 218, 0.32);
}

.clh-contact-tile-label {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--clh-muted);
}

.clh-contact-tile strong {
    font-size: 16px;
    color: var(--clh-text);
    word-break: break-word;
}

.clh-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr);
    gap: 40px;
    align-items: start;
}

.clh-contact-intro .clh-mini-list {
    margin: 18px 0;
}

@media (max-width: 1024px) {
    .clh-contact-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .clh-contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .clh-contact-cards {
        grid-template-columns: 1fr;
    }
    .clh-list-post {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   CoreLinkHub Spacing + Hero Showcase Refinement (v1.9.5)
   Tighter, premium, consistent rhythm on every page.
   ===================================================================== */

/* Homepage hero: tighter, more balanced */
.clh-hero {
    padding: 72px 0 64px;
}

/* Global section rhythm (override the earlier 96px desktop rule) */
.clh-section {
    padding: 64px 0;
}

@media (min-width: 1025px) {
    .clh-section {
        padding: 74px 0;
    }
}

/* Less empty space directly under the homepage hero */
.clh-services-overview {
    padding-top: 56px;
}

/* Strengthen the hero showcase so dark images stand out on the dark hero */
.clh-hero-slides {
    background: linear-gradient(135deg, #08306f, #041e4f 70%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        0 22px 48px rgba(0, 0, 0, 0.34);
}

.clh-hero-card-clean-visual {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)),
        radial-gradient(circle at top right, rgba(0, 169, 218, 0.22), transparent 45%);
}

/* Keep hero visual a confident, consistent size on large screens */
@media (min-width: 1025px) {
    .clh-hero-grid {
        grid-template-columns: minmax(0, 1.05fr) minmax(420px, .95fr);
        align-items: center;
    }
    .clh-hero-card-clean-visual {
        max-width: 100%;
    }
}

/* Section heads: a touch tighter for a cleaner landing feel */
.clh-section-head {
    margin-bottom: 34px;
}

/* =====================================================================
   CoreLinkHub Pure-CSS Hero Slider + Heading polish (v1.9.6)
   Works without JavaScript so it always animates.
   ===================================================================== */

/* Remove the old scrolling capability ticker entirely */
.clh-feature-ticker {
    display: none !important;
}

.clh-hero-slides {
    min-height: 300px;
}

/* CSS-driven crossfade: each of the 4 slides shows for ~1/4 of the cycle */
.clh-hero-slide {
    opacity: 0;
    transform: scale(1.06);
    animation: clh-heroSlide 20s infinite;
    transition: none;
}

.clh-hero-slide:nth-child(1) { animation-delay: 0s; }
.clh-hero-slide:nth-child(2) { animation-delay: 5s; }
.clh-hero-slide:nth-child(3) { animation-delay: 10s; }
.clh-hero-slide:nth-child(4) { animation-delay: 15s; }

@keyframes clh-heroSlide {
    0%   { opacity: 0; transform: scale(1.06); }
    3%   { opacity: 1; transform: scale(1); }
    22%  { opacity: 1; transform: scale(1); }
    25%  { opacity: 0; transform: scale(1.04); }
    100% { opacity: 0; transform: scale(1.04); }
}

/* Pause on hover */
.clh-hero-slider:hover .clh-hero-slide {
    animation-play-state: paused;
}

/* Dots become a synced visual progress indicator */
.clh-hero-dots {
    pointer-events: none;
}

.clh-hero-dot {
    animation: clh-heroDot 20s infinite;
}

.clh-hero-dot:nth-child(1) { animation-delay: 0s; }
.clh-hero-dot:nth-child(2) { animation-delay: 5s; }
.clh-hero-dot:nth-child(3) { animation-delay: 10s; }
.clh-hero-dot:nth-child(4) { animation-delay: 15s; }

@keyframes clh-heroDot {
    0%        { width: 9px; background: rgba(255, 255, 255, 0.4); }
    3%, 22%   { width: 26px; background: var(--clh-accent); }
    25%, 100% { width: 9px; background: rgba(255, 255, 255, 0.4); }
}

@media (prefers-reduced-motion: reduce) {
    .clh-hero-slide,
    .clh-hero-dot {
        animation: none;
    }
    .clh-hero-slide {
        opacity: 0;
        transform: none;
    }
    .clh-hero-slide:nth-child(1) {
        opacity: 1;
    }
}

/* ---- Heading + alignment polish across all landing pages ---- */
.clh-page-hero-inner {
    margin-left: 0;
    margin-right: auto;
    text-align: left;
}

.clh-page-hero h1,
.clh-section-head h2,
.clh-two-col h2,
.clh-hero-headline {
    text-wrap: balance;
}

.clh-page-hero p,
.clh-section-head p {
    text-wrap: pretty;
}

/* Centered section heads stay centered (services trust, FAQ, etc.) */
.clh-section-head.center {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* =====================================================================
   CoreLinkHub Agency Sections (v1.9.7)
   Stats, Why-Choose, Team, Testimonials, CTA banner
   ===================================================================== */

/* ---- Stats / counters ---- */
.clh-stats-band {
    padding: 0;
    margin-top: -34px;
    position: relative;
    z-index: 5;
}

.clh-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--clh-border);
    border: 1px solid var(--clh-border);
    border-radius: var(--clh-radius);
    overflow: hidden;
    box-shadow: var(--clh-shadow);
}

.clh-stat {
    background: var(--clh-surface);
    padding: 30px 20px;
    text-align: center;
}

.clh-stat strong {
    display: block;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.03em;
    background: linear-gradient(120deg, var(--clh-accent), #0388cf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.clh-stat span {
    display: block;
    margin-top: 8px;
    color: var(--clh-muted);
    font-weight: 700;
    font-size: 14px;
}

/* ---- Why choose us ---- */
.clh-why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.clh-why-card {
    padding: 28px;
    border-radius: var(--clh-radius);
    background: var(--clh-surface);
    border: 1px solid var(--clh-border);
    box-shadow: var(--clh-shadow);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.clh-why-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(4, 30, 79, 0.16);
    border-color: color-mix(in srgb, var(--clh-accent) 40%, var(--clh-border));
}

.clh-why-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(0, 169, 218, 0.16), rgba(4, 30, 79, 0.08));
    color: var(--clh-accent);
}

.clh-why-card h3 {
    font-size: 20px;
    margin-bottom: 8px;
}

.clh-why-card p {
    color: var(--clh-muted);
    margin: 0;
}

/* ---- Team / expertise ---- */
.clh-team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.clh-team-card {
    text-align: center;
    padding: 30px 22px;
    border-radius: var(--clh-radius);
    background: var(--clh-surface);
    border: 1px solid var(--clh-border);
    box-shadow: var(--clh-shadow);
    transition: transform .28s ease, box-shadow .28s ease;
}

.clh-team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(4, 30, 79, 0.16);
}

.clh-team-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clh-accent), #0388cf);
    color: #fff;
    font-weight: 900;
    font-size: 18px;
    letter-spacing: .02em;
    box-shadow: 0 12px 28px rgba(0, 169, 218, 0.32);
}

.clh-team-card h3 {
    font-size: 18px;
    margin-bottom: 6px;
}

.clh-team-card p {
    color: var(--clh-muted);
    margin: 0;
    font-size: 15px;
}

/* ---- CTA banner ---- */
.clh-cta-banner {
    padding: 30px 0;
}

.clh-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    flex-wrap: wrap;
    padding: 40px 44px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 85% 20%, rgba(0, 169, 218, 0.35), transparent 40%),
        linear-gradient(135deg, #041e4f, #062c72 60%, #03142f);
    color: #fff;
    box-shadow: 0 26px 60px rgba(4, 30, 79, 0.28);
}

.clh-cta-text h2 {
    margin: 0 0 8px;
    font-size: clamp(24px, 3vw, 34px);
}

.clh-cta-text p {
    margin: 0;
    color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 1024px) {
    .clh-why-grid,
    .clh-team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .clh-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .clh-why-grid,
    .clh-team-grid {
        grid-template-columns: 1fr;
    }
    .clh-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .clh-cta-inner {
        flex-direction: column;
        align-items: flex-start;
        padding: 30px 26px;
    }
}

/* =====================================================================
   CoreLinkHub Consistency + Hero + Footer refinement (v1.9.8)
   Clean rhythm: only hero, CTA banner, final CTA and footer are dark.
   ===================================================================== */

/* Process section: convert from dark navy to a clean light section */
.clh-process {
    background: var(--clh-surface-2);
    color: var(--clh-text);
}

.clh-process .clh-section-head p,
.clh-process p {
    color: var(--clh-muted);
}

.clh-process-grid > div {
    background: var(--clh-surface);
    border: 1px solid var(--clh-border);
    box-shadow: var(--clh-shadow);
    border-radius: var(--clh-radius);
}

.clh-process-grid > div h3 {
    color: var(--clh-text);
}

.clh-process-grid span {
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--clh-accent), #0388cf);
    color: #fff;
    font-size: 16px;
    box-shadow: 0 10px 24px rgba(0, 169, 218, 0.3);
}

/* Subtle, consistent alternation for light bands */
.clh-feature-band {
    background: var(--clh-surface-2);
}

/* ---- Hero slider: bigger, cleaner, not cramped ---- */
.clh-hero-card-clean-visual {
    padding: 10px;
    min-height: auto;
}

.clh-hero-clean-frame {
    padding: 0;
    min-height: auto;
    border: 0;
    background: none;
}

.clh-hero-slides {
    aspect-ratio: 16 / 11;
    min-height: 360px;
    border-radius: 20px;
}

@media (min-width: 1025px) {
    .clh-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(460px, 0.92fr);
    }
    .clh-hero-slides {
        min-height: 400px;
    }
}

@media (max-width: 1024px) {
    .clh-hero-clean-visual,
    .clh-hero-clean-frame {
        min-height: auto;
    }
}

/* ---- Footer: more premium spacing + polish ---- */
.clh-footer {
    padding: 78px 0 28px;
}

.clh-footer-grid {
    gap: 44px;
}

.clh-footer-brand p {
    line-height: 1.75;
    font-size: 15px;
}

.clh-footer-links li {
    margin-bottom: 4px;
}

.clh-footer-bottom {
    margin-top: 50px;
    align-items: center;
}

.clh-footer-bottom p,
.clh-footer-bottom a {
    font-size: 14px;
}

/* =====================================================================
   CoreLinkHub Premium Blog Landing (v1.9.9)
   ===================================================================== */

.clh-blog-main {
    min-width: 0;
}

.clh-blog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.clh-blog-card {
    display: flex;
    flex-direction: column;
    background: var(--clh-surface);
    border: 1px solid var(--clh-border);
    border-radius: var(--clh-radius);
    box-shadow: var(--clh-shadow);
    overflow: hidden;
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.clh-blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(4, 30, 79, 0.16);
    border-color: color-mix(in srgb, var(--clh-accent) 35%, var(--clh-border));
}

.clh-blog-card-thumb {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: linear-gradient(135deg, var(--clh-primary), var(--clh-primary-2));
}

.clh-blog-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.clh-blog-card:hover .clh-blog-card-thumb img {
    transform: scale(1.06);
}

.clh-blog-card-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 14px;
}

.clh-blog-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px;
    flex: 1;
}

.clh-blog-card-body .clh-post-date {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--clh-accent);
}

.clh-blog-card-body h2 {
    font-size: 20px;
    line-height: 1.25;
    margin: 0;
}

.clh-blog-card-body h2 a:hover {
    color: var(--clh-accent);
}

.clh-blog-card-body p {
    color: var(--clh-muted);
    margin: 0;
}

.clh-blog-card-body .clh-read-more {
    margin-top: auto;
    font-weight: 800;
}

/* Featured first post: full width, horizontal on larger screens */
.clh-blog-card.is-featured {
    grid-column: 1 / -1;
}

@media (min-width: 721px) {
    .clh-blog-card.is-featured {
        flex-direction: row;
        align-items: stretch;
    }
    .clh-blog-card.is-featured .clh-blog-card-thumb {
        flex: 1 1 54%;
        aspect-ratio: auto;
        min-height: 300px;
    }
    .clh-blog-card.is-featured .clh-blog-card-body {
        flex: 1 1 46%;
        justify-content: center;
        padding: 32px;
    }
    .clh-blog-card.is-featured h2 {
        font-size: 28px;
    }
    .clh-blog-card.is-featured .clh-blog-card-body p {
        font-size: 16px;
    }
}

/* Premium empty state */
.clh-blog-empty {
    text-align: center;
    padding: 64px 30px;
    border: 1px dashed var(--clh-border);
    border-radius: var(--clh-radius);
    background: var(--clh-surface);
}

.clh-blog-empty-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 86px;
    margin-bottom: 18px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(0, 169, 218, 0.16), rgba(4, 30, 79, 0.08));
    color: var(--clh-accent);
}

.clh-blog-empty h2 {
    font-size: 26px;
    margin-bottom: 10px;
}

.clh-blog-empty p {
    color: var(--clh-muted);
    max-width: 520px;
    margin: 0 auto 22px;
}

.clh-blog-empty-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 720px) {
    .clh-blog-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   CoreLinkHub Industries + Pricing (v2.0.0)
   ===================================================================== */

/* Industries grid (premium cards) */
.clh-industry-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.clh-industry-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 26px 24px;
    border-radius: var(--clh-radius);
    background: var(--clh-surface);
    border: 1px solid var(--clh-border);
    box-shadow: var(--clh-shadow);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

.clh-industry-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(4, 30, 79, 0.16);
    border-color: color-mix(in srgb, var(--clh-accent) 40%, var(--clh-border));
}

.clh-industry-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(0, 169, 218, 0.16), rgba(4, 30, 79, 0.08));
    color: var(--clh-accent);
    transition: background .28s ease, color .28s ease;
}

.clh-industry-card:hover .clh-industry-ico {
    background: linear-gradient(135deg, var(--clh-accent), #0388cf);
    color: #fff;
}

.clh-industry-card h3 {
    font-size: 18px;
    margin: 4px 0 0;
}

.clh-industry-card p {
    margin: 0;
    color: var(--clh-muted);
    font-size: 14.5px;
    line-height: 1.6;
}

@media (max-width: 1024px) {
    .clh-industry-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 460px) {
    .clh-industry-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   CoreLinkHub Premium Hero — on-load motion + ambient background (v2.0.1)
   ===================================================================== */

/* Soft floating accent glow behind the hero (clipped by .clh-hero overflow) */
.clh-hero::after {
    content: "";
    position: absolute;
    z-index: 0;
    width: 440px;
    height: 440px;
    top: -130px;
    right: -90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 169, 218, 0.30), transparent 70%);
    filter: blur(18px);
    pointer-events: none;
    animation: clh-hero-float 16s ease-in-out infinite;
}

@keyframes clh-hero-float {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(-34px, 30px); }
}

/* Keep content/visual above the ambient layers */
.clh-hero-content,
.clh-hero-card {
    position: relative;
    z-index: 1;
}

/* On-load staggered entrance for hero text (opacity is fine — not the LCP element) */
@keyframes clh-hero-in {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}

.clh-hero-content > .clh-kicker,
.clh-hero-content > .clh-hero-headline,
.clh-hero-content > .clh-hero-subtitle,
.clh-hero-content > .clh-hero-actions,
.clh-hero-content > .clh-trust-row {
    animation: clh-hero-in 0.7s cubic-bezier(0.16, 0.84, 0.44, 1) backwards;
}

.clh-hero-content > .clh-kicker        { animation-delay: 0.05s; }
.clh-hero-content > .clh-hero-headline { animation-delay: 0.15s; }
.clh-hero-content > .clh-hero-subtitle { animation-delay: 0.28s; }
.clh-hero-content > .clh-hero-actions  { animation-delay: 0.40s; }
.clh-hero-content > .clh-trust-row     { animation-delay: 0.52s; }

/* Hero visual: transform-only entrance so the LCP image is painted immediately */
@keyframes clh-hero-card-in {
    from { transform: translateY(24px) scale(0.985); }
    to   { transform: none; }
}

.clh-hero-card-clean-visual {
    animation: clh-hero-card-in 0.8s cubic-bezier(0.16, 0.84, 0.44, 1) 0.12s backwards;
}

/* Prevent any long-word overflow in the headline on small screens */
.clh-hero-headline {
    overflow-wrap: break-word;
}

/* Accessibility: disable hero motion when the user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
    .clh-hero::after,
    .clh-hero-content > .clh-kicker,
    .clh-hero-content > .clh-hero-headline,
    .clh-hero-content > .clh-hero-subtitle,
    .clh-hero-content > .clh-hero-actions,
    .clh-hero-content > .clh-trust-row,
    .clh-hero-card-clean-visual {
        animation: none;
    }
}

/* =====================================================================
   CoreLinkHub Lower-section polish (v2.0.4)
   Blog empty state, final CTA, footer spacing/responsive
   ===================================================================== */

/* Homepage blog "coming soon" card spans the full preview grid */
.clh-blog-empty-inline {
    grid-column: 1 / -1;
}

/* Final CTA: stronger, distinct from the mid CTA strip */
.clh-final-cta {
    padding-top: 88px;
    padding-bottom: 88px;
    background:
        radial-gradient(circle at 18% 12%, rgba(0, 169, 218, 0.30), transparent 32%),
        radial-gradient(circle at 84% 88%, rgba(89, 215, 255, 0.18), transparent 36%),
        linear-gradient(135deg, var(--clh-primary), #071329);
}

.clh-final-cta h2 {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.clh-final-cta .clh-btn {
    min-height: 54px;
    padding: 15px 30px;
}

/* Footer: cleaner columns + readable contact + tidy mobile stacking */
.clh-footer-grid {
    row-gap: 36px;
}

.clh-footer .clh-footer-links li a {
    line-height: 1.5;
}

.clh-footer-brand {
    max-width: 360px;
}

@media (max-width: 880px) {
    .clh-footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .clh-footer-brand {
        grid-column: 1 / -1;
        max-width: none;
    }
}

@media (max-width: 520px) {
    .clh-footer-grid {
        grid-template-columns: 1fr;
    }
    .clh-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}