/* WTT keeps its own imagery and content density while using the site palette. */
.wtt-page {
    --hgc-ink: #142238;
    --hgc-copy: #465c71;
    --hgc-muted: #6e8195;
    --hgc-blue: #006eff;
    --hgc-blue-dark: #0056cc;
    --hgc-blue-soft: #8fc3ff;
    --hgc-red: #006eff;
    --hgc-canvas: #f4f7fb;
    --hgc-border: #dce5ef;
    --hgc-night: #071426;
    --hgc-night-soft: #0d2139;
}

.wtt-page .hgc-hero::before {
    background-image:
        linear-gradient(90deg, rgba(6, 26, 43, 0.98) 0%, rgba(6, 26, 43, 0.87) 45%, rgba(6, 26, 43, 0.5) 100%),
        url('../../images/datacenter/wtt/hero.webp');
    background-position: center, 80% center;
    background-size: cover, cover;
}

.wtt-page .hgc-hero::after {
    background-image:
        linear-gradient(rgba(143, 195, 255, 0.11) 1px, transparent 1px),
        linear-gradient(90deg, rgba(143, 195, 255, 0.11) 1px, transparent 1px);
}

.wtt-page .hgc-eyebrow span {
    background: var(--hgc-red);
}

.wtt-page .hgc-hero h1 strong,
.wtt-page .hgc-heading-light h2 em,
.wtt-page .hgc-network-copy h2 em {
    color: var(--hgc-blue-soft);
}

.wtt-page .hgc-hero-media figure {
    border-color: rgba(143, 195, 255, 0.35);
}

.wtt-page .hgc-hero-media figure::after {
    background: linear-gradient(180deg, transparent 40%, rgba(3, 21, 35, 0.86));
}

.wtt-page .hgc-hero-status {
    border-color: rgba(143, 195, 255, 0.42);
}

.wtt-page .hgc-hero-status > div + div {
    border-left-color: rgba(143, 195, 255, 0.24);
}

.wtt-page .hgc-hero-status span,
.wtt-page .hgc-hero-media-index,
.wtt-page .hgc-gallery-slide figcaption > span {
    color: var(--hgc-blue-soft);
}

.wtt-page .hgc-facility-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wtt-page .hgc-facility-card {
    border-top-color: var(--hgc-blue);
}

.wtt-page .hgc-facility-card-accent {
    border-top-color: var(--hgc-blue);
}

.wtt-page .hgc-facility-card-accent li i,
.wtt-page .hgc-usecase-grid article:nth-child(2) i {
    color: var(--hgc-blue);
}

.wtt-page .hgc-gallery-section {
    background: #071d30;
}

.wtt-page .hgc-gallery-progress span,
.wtt-page .hgc-gallery-thumbs button[aria-selected="true"]::after {
    background: var(--hgc-blue-soft);
}

.wtt-page .hgc-gallery-thumbs button:hover,
.wtt-page .hgc-gallery-thumbs button[aria-selected="true"] {
    border-color: var(--hgc-blue-soft);
}

.wtt-page .hgc-gallery-thumbs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wtt-page .hgc-network-section {
    background: #0d2742;
}

.wtt-page .hgc-network-node-hk {
    border-color: var(--hgc-blue-soft);
    background: #0e355a;
}

.wtt-page .hgc-network-node-hk i,
.wtt-page .hgc-network-node-hk small,
.wtt-page .hgc-network-copy .hgc-kicker,
.wtt-page .hgc-network-pills span {
    color: #b8ddff;
}

.wtt-page .hgc-network-line {
    background: var(--hgc-blue-soft);
}

.wtt-page .hgc-cta-section {
    background: var(--hgc-blue-dark);
}

.wtt-page .hgc-btn-primary {
    color: #ffffff;
    background: var(--hgc-blue);
}

.wtt-page .hgc-btn-primary:hover {
    background: var(--hgc-blue-dark);
}

.wtt-page .hgc-btn-white {
    color: var(--hgc-blue-dark);
}

@media (max-width: 1100px) {
    .wtt-page .hgc-facility-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .wtt-page .hgc-facility-card:last-child {
        grid-column: auto;
    }
}

@media (max-width: 560px) {
    .wtt-page .hgc-facility-grid {
        grid-template-columns: 1fr;
    }
}