/* ==========================================================================
   Om Sai Technology - data centre build & infrastructure theme
   Scoped under .dc-* so it cannot collide with the inherited "basic" CSS.
   ========================================================================== */

:root {
    /* --dc-accent is the CONTRAST-SAFE accent: the layout darkens the admin's
       chosen base_color until white text on it clears WCAG AA (4.5:1). Use it for
       anything on a light surface. --dc-accent-bright is the original hue, for dark
       surfaces only, where the bright value has plenty of contrast already. */
    --dc-accent:        #17703d;
    --dc-accent-bright: #1f8f4e;
    --dc-accent-ink:    #ffffff;
    --dc-accent-soft:   rgba(31, 143, 78, .10);
    --dc-accent-line:   rgba(31, 143, 78, .28);

    --dc-ink:           #0c1524;
    --dc-ink-2:         #16233a;
    --dc-body:          #45536b;
    --dc-muted:         #5e6b82;   /* 5.01:1 on #f4f7fb, 5.38:1 on white - #6c7a92 failed AA at 4.04 */

    --dc-surface:       #ffffff;
    --dc-surface-2:     #f4f7fb;
    --dc-surface-3:     #e9eef6;
    --dc-line:          #dbe3ee;

    --dc-radius:        14px;
    --dc-radius-lg:     22px;
    --dc-shadow:        0 1px 2px rgba(12,21,36,.05), 0 8px 24px rgba(12,21,36,.06);
    --dc-shadow-lg:     0 24px 60px rgba(12,21,36,.14);

    --dc-maxw:          1200px;
    --dc-ease:          cubic-bezier(.4, 0, .2, 1);

    /* Barlow is a signage/transport grotesque - slightly condensed, so long
       technical labels fit without shrinking. Plex Mono carries the data:
       specs, region codes, figures. */
    --dc-font-ui:       "Barlow", "Helvetica Neue", Arial, sans-serif;
    --dc-font-mono:     "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* Scoped to .dc-* so the inherited "basic" typography is left alone. */
[class^="dc-"], [class*=" dc-"] { font-family: var(--dc-font-ui); }

.dc-section__title, .dc-hero__title, .dc-loc-card__city, .dc-build__card-title,
.dc-service-card__title, .dc-offer-card__title, .dc-map__detail h3,
.dc-cta__copy h2, .dc-build__cta h3, .dc-why__item h3, .dc-process__body h3 {
    font-family: var(--dc-font-ui);
    font-weight: 700;
    letter-spacing: -.018em;
}

.dc-eyebrow, .dc-chip, .dc-stat__label, .dc-process__marker, .dc-anatomy__sub,
.dc-map__row-region, .dc-map__legend, .dc-loc-card__specs dt, .dc-footer__col h3 {
    font-family: var(--dc-font-mono);
    font-weight: 500;
}

.dc-stat__value, .dc-loc-card__specs dd, .dc-service-card__price strong {
    font-variant-numeric: tabular-nums;
}

/* ---------- primitives ---------------------------------------------------- */

.dc-section {
    padding: clamp(56px, 7vw, 104px) 0;
    background: var(--dc-surface);
    color: var(--dc-body);
}
.dc-section:nth-of-type(even) { background: var(--dc-surface-2); }

.dc-section .container { max-width: var(--dc-maxw); }

.dc-section__head { max-width: 720px; margin: 0 auto clamp(32px, 4vw, 56px); text-align: center; }
.dc-section__head--tight { margin-bottom: 32px; }

.dc-eyebrow {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dc-accent);
    background: var(--dc-accent-soft);
    border: 1px solid var(--dc-accent-line);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 18px;
}
.dc-eyebrow--accent { color: #b4341f; background: rgba(180,52,31,.08); border-color: rgba(180,52,31,.25); }

.dc-section__title {
    font-size: clamp(1.65rem, 3.2vw, 2.6rem);
    line-height: 1.18;
    font-weight: 700;
    color: var(--dc-ink);
    margin: 0 0 14px;
}

.dc-section__sub { font-size: 1.03rem; line-height: 1.7; color: var(--dc-muted); margin: 0; }
.dc-section__sub--left { text-align: left; }

.dc-empty {
    text-align: center;
    color: var(--dc-muted);
    background: var(--dc-surface-2);
    border: 1px dashed var(--dc-line);
    border-radius: var(--dc-radius);
    padding: 40px 20px;
    margin: 0;
}

.dc-btn {
    --_bg: transparent; --_fg: var(--dc-ink); --_bd: var(--dc-line);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px;
    font-size: .95rem; font-weight: 600; line-height: 1.2;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    border: 1px solid var(--_bd); border-radius: 10px;
    background: var(--_bg); color: var(--_fg);
    transition: transform .18s var(--dc-ease), box-shadow .18s var(--dc-ease), background .18s var(--dc-ease), color .18s var(--dc-ease);
}
.dc-btn:hover { transform: translateY(-2px); box-shadow: var(--dc-shadow); color: var(--_fg); }
.dc-btn:focus-visible {
    /* Solid ink ring plus a white spacer, so it stays visible on light surfaces,
       on the accent itself, and on the dark hero. The old 28%-alpha accent ring
       measured 1.48:1 against the page and was effectively invisible. */
    outline: 3px solid var(--dc-ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff;
}
.dc-btn--solid   { --_bg: var(--dc-accent); --_fg: var(--dc-accent-ink); --_bd: var(--dc-accent); }
.dc-btn--outline { --_bg: transparent; --_fg: var(--dc-ink); --_bd: var(--dc-line); }
.dc-btn--ghost   { --_bg: transparent; --_fg: #dbe4f2; --_bd: rgba(255,255,255,.22); }
.dc-btn--lg      { padding: 15px 30px; font-size: 1rem; }
.dc-btn--sm      { padding: 9px 17px; font-size: .875rem; }

.dc-chip {
    font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 999px; white-space: nowrap;
    background: var(--dc-surface-3); color: var(--dc-body);
}
.dc-chip--live               { background: rgba(31,143,78,.12);  color: #17703d; }
.dc-chip--under-construction { background: rgba(214,143,17,.14); color: #8a5b04; }
.dc-chip--planned            { background: rgba(41,98,196,.12);  color: #244f9c; }

/* ---------- header -------------------------------------------------------- */

.dc-header { position: relative; z-index: 60; background: var(--dc-ink); }
.dc-header .container { max-width: var(--dc-maxw); }

.dc-header__topbar { background: #07101c; border-bottom: 1px solid rgba(255,255,255,.07); font-size: .82rem; }
.dc-header__topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; }
.dc-header__tagline { color: #8fa0b8; }
.dc-header__topbar-links { display: flex; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; }
.dc-header__topbar-links a { color: #c6d2e2; text-decoration: none; }
.dc-header__topbar-links a:hover { color: #fff; }
.dc-header__cur { color: #8fa0b8; display: inline-flex; align-items: center; gap: 6px; }

.dc-header__main-inner { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.dc-header__logo { flex: 0 0 auto; }
.dc-header__logo img { max-height: 46px; width: auto; }

.dc-nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.dc-nav__close { display: none; }
.dc-nav__list { display: flex; align-items: center; gap: 17px; list-style: none; margin: 0; padding: 0; }
.dc-nav__list > li > a {
    color: #dbe4f2; text-decoration: none; font-size: .9rem; font-weight: 500; white-space: nowrap;
    padding: 8px 0; display: inline-flex; align-items: center; gap: 6px;
    border-bottom: 2px solid transparent; transition: color .18s var(--dc-ease), border-color .18s var(--dc-ease);
}
.dc-nav__list > li > a:hover,
.dc-nav__list > li > a.active { color: #fff; border-bottom-color: var(--dc-accent); }

.dc-nav__actions { display: flex; align-items: center; gap: 10px; }
.dc-nav__cart, .dc-nav__lang { color: #dbe4f2; display: inline-flex; align-items: center; }

.dc-header__burger { background: none; border: 0; padding: 8px; display: none; flex-direction: column; gap: 5px; }
.dc-header__burger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; }

/* mega menu */
.dc-mega {
    position: absolute; inset: 100% 0 auto 0;
    background: var(--dc-surface); border-top: 3px solid var(--dc-accent);
    box-shadow: var(--dc-shadow-lg);
}
.dc-mega[hidden] { display: none; }
.dc-mega__inner { display: grid; grid-template-columns: 1fr 300px; gap: 32px; padding: 30px 0; max-width: var(--dc-maxw); }
.dc-mega__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; }
.dc-mega__item {
    display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
    padding: 16px 10px; border-radius: var(--dc-radius); text-decoration: none;
    color: var(--dc-ink); border: 1px solid transparent; transition: background .18s var(--dc-ease), border-color .18s var(--dc-ease);
}
.dc-mega__item:hover { background: var(--dc-surface-2); border-color: var(--dc-line); color: var(--dc-ink); }
.dc-mega__item img { width: 34px; height: 34px; object-fit: contain; }
.dc-mega__item span { font-size: .86rem; font-weight: 600; text-transform: capitalize; }
.dc-mega__detail { background: var(--dc-surface-2); border-radius: var(--dc-radius); padding: 24px; align-self: start; }
.dc-mega__detail h3,
.dc-mega__detail-title { font-family: var(--dc-font-ui); font-weight: 700; font-size: 1.1rem; color: var(--dc-ink); margin: 0 0 8px; text-transform: capitalize; }
.dc-mega__price { color: var(--dc-accent); font-weight: 700; margin: 0 0 10px; }
.dc-mega__desc { font-size: .9rem; color: var(--dc-muted); margin: 0; line-height: 1.6; }

/* ---------- hero ---------------------------------------------------------- */

.dc-hero { position: relative; background: var(--dc-ink); overflow: hidden; }
.dc-hero__track { display: grid; min-height: clamp(460px, 64vh, 680px); }
.dc-hero__slide {
    grid-area: 1 / 1; display: flex; align-items: center; position: relative; overflow: hidden;
    opacity: 0; visibility: hidden; transition: opacity .7s var(--dc-ease), visibility .7s var(--dc-ease);
}
.dc-hero__slide.is-active { opacity: 1; visibility: visible; }
.dc-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dc-hero__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(7,16,28,.90) 0%, rgba(7,16,28,.62) 46%, rgba(7,16,28,.18) 100%);
}
.dc-hero__body { position: relative; max-width: var(--dc-maxw); padding-block: clamp(56px, 8vw, 96px); }
.dc-hero__copy { max-width: 620px; }
.dc-hero__title {
    font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1.12; font-weight: 700;
    color: #fff; margin: 0 0 16px; text-wrap: balance;
}
.dc-hero__text { font-size: clamp(1rem, 1.5vw, 1.18rem); line-height: 1.65; color: #c8d4e6; margin: 0 0 28px; }
.dc-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.dc-hero__actions .dc-btn--outline { --_fg: #fff; --_bd: rgba(255,255,255,.4); }
.dc-hero__actions .dc-btn--outline:hover { --_bg: rgba(255,255,255,.1); }

.dc-hero__nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 46px; height: 46px; display: grid; place-items: center;
    background: rgba(255,255,255,.12); color: #fff; font-size: 1.3rem;
    border: 1px solid rgba(255,255,255,.24); border-radius: 50%; cursor: pointer;
    transition: background .18s var(--dc-ease);
}
.dc-hero__nav:hover { background: rgba(255,255,255,.24); }
.dc-hero__nav--prev { left: 18px; }
.dc-hero__nav--next { right: 18px; }

.dc-hero__dots { position: absolute; left: 0; right: 0; bottom: 22px; z-index: 3; display: flex; justify-content: center; gap: 10px; }
.dc-hero__dot { width: 42px; height: 4px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,.3); cursor: pointer; overflow: hidden; }
.dc-hero__dot.is-active { background: rgba(255,255,255,.5); }
.dc-hero__dot.is-active .dc-hero__dot-fill { display: block; height: 100%; background: var(--dc-accent); animation: dcDotFill 6.5s linear forwards; }
.dc-hero__dot-fill { display: none; }
@keyframes dcDotFill { from { width: 0 } to { width: 100% } }

/* ---------- locations ----------------------------------------------------- */

.dc-locations__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 20px; }
.dc-loc-card {
    background: var(--dc-surface); border: 1px solid var(--dc-line); border-radius: var(--dc-radius-lg);
    padding: 24px; display: flex; flex-direction: column; gap: 16px;
    transition: transform .22s var(--dc-ease), box-shadow .22s var(--dc-ease), border-color .22s var(--dc-ease);
}
.dc-loc-card:hover { transform: translateY(-4px); box-shadow: var(--dc-shadow); border-color: var(--dc-accent-line); }
.dc-loc-card__top { display: flex; align-items: flex-start; gap: 12px; }
.dc-loc-card__pin { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 11px; background: var(--dc-accent-soft); color: var(--dc-accent); font-size: 1.2rem; }
.dc-loc-card__city { font-size: 1.2rem; font-weight: 700; color: var(--dc-ink); margin: 0; }
.dc-loc-card__country { font-size: .86rem; color: var(--dc-muted); margin: 2px 0 0; }
.dc-loc-card__top .dc-chip { margin-left: auto; }
.dc-loc-card__desc { font-size: .92rem; line-height: 1.65; color: var(--dc-body); margin: 0; }
.dc-loc-card__specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 0; padding-top: 16px; border-top: 1px solid var(--dc-line); }
.dc-loc-card__specs dt { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dc-muted); }
.dc-loc-card__specs dd { font-size: .9rem; font-weight: 600; color: var(--dc-ink); margin: 2px 0 0; }
.dc-loc-card__link { margin-top: auto; font-size: .9rem; font-weight: 600; color: var(--dc-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.dc-loc-card__link:hover { color: var(--dc-accent); gap: 10px; }

/* ---------- build capabilities -------------------------------------------- */

.dc-build__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.dc-build__card {
    background: var(--dc-surface); border: 1px solid var(--dc-line); border-radius: var(--dc-radius-lg);
    padding: 28px; position: relative; overflow: hidden;
    transition: transform .22s var(--dc-ease), box-shadow .22s var(--dc-ease);
}
.dc-build__card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--dc-accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--dc-ease); }
.dc-build__card:hover { transform: translateY(-4px); box-shadow: var(--dc-shadow); }
.dc-build__card:hover::before { transform: scaleX(1); }
.dc-build__icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 13px; background: var(--dc-accent-soft); color: var(--dc-accent); font-size: 1.5rem; margin-bottom: 18px; }
.dc-build__card-title { font-size: 1.16rem; font-weight: 700; color: var(--dc-ink); margin: 0 0 10px; }
.dc-build__card-desc { font-size: .93rem; line-height: 1.68; color: var(--dc-body); margin: 0; }
.dc-build__points { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 9px; }
.dc-build__points li { display: flex; gap: 9px; font-size: .89rem; color: var(--dc-body); line-height: 1.5; }
.dc-build__points i { color: var(--dc-accent); margin-top: 2px; flex: 0 0 auto; }

.dc-build__cta {
    margin-top: 40px; padding: 32px; border-radius: var(--dc-radius-lg);
    background: var(--dc-ink); color: #c8d4e6;
    display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.dc-build__cta h3 { color: #fff; font-size: 1.32rem; margin: 0 0 6px; }
.dc-build__cta p { margin: 0; font-size: .95rem; }

/* ---------- process ------------------------------------------------------- */

.dc-process__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 24px; counter-reset: dcstep; }
.dc-process__step { position: relative; padding-top: 28px; }
.dc-process__step::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: var(--dc-line); }
.dc-process__step::after { content: ""; position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--dc-accent); }
.dc-process__marker { font-size: .82rem; font-weight: 700; letter-spacing: .1em; color: var(--dc-accent); margin-bottom: 8px; }
.dc-process__body h3 { font-size: 1.06rem; font-weight: 700; color: var(--dc-ink); margin: 0 0 8px; }
.dc-process__body p { font-size: .9rem; line-height: 1.65; color: var(--dc-muted); margin: 0; }

/* ---------- stats --------------------------------------------------------- */

.dc-stats { background: var(--dc-ink) !important; }
.dc-stats .dc-section__title { color: #fff; }
.dc-stats .dc-section__sub { color: #93a3ba; }
.dc-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.dc-stat { text-align: center; padding: 26px 16px; border: 1px solid rgba(255,255,255,.1); border-radius: var(--dc-radius); background: rgba(255,255,255,.03); }
.dc-stat__value { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 700; color: #fff; line-height: 1; display: flex; align-items: baseline; justify-content: center; gap: 2px; }
.dc-stat__suffix { font-size: .5em; color: var(--dc-accent); font-weight: 700; }
.dc-stat__label { margin: 12px 0 0; font-size: .86rem; letter-spacing: .04em; color: #93a3ba; }

/* ---------- gallery ------------------------------------------------------- */

.dc-gallery__viewport { position: relative; max-width: calc(var(--dc-maxw) + 80px); margin: 0 auto; padding: 0 40px; }
.dc-gallery__rail {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 33%);
    gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 12px; scrollbar-width: thin;
}
.dc-gallery__rail::-webkit-scrollbar { height: 6px; }
.dc-gallery__rail::-webkit-scrollbar-thumb { background: var(--dc-line); border-radius: 99px; }
.dc-gallery__item { scroll-snap-align: start; margin: 0; }
.dc-gallery__open {
    position: relative; display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in;
    border-radius: var(--dc-radius); overflow: hidden; background: var(--dc-surface-3); aspect-ratio: 4 / 3;
}
.dc-gallery__open img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--dc-ease); }
.dc-gallery__open:hover img { transform: scale(1.05); }
.dc-gallery__zoom {
    position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px;
    display: grid; place-items: center; border-radius: 9px;
    background: rgba(7,16,28,.72); color: #fff; font-size: 1rem;
}
.dc-gallery__cap { margin-top: 12px; font-size: .88rem; line-height: 1.5; }
.dc-gallery__cap strong { display: block; color: var(--dc-ink); }
.dc-gallery__cap span { color: var(--dc-muted); }
.dc-gallery__nav {
    position: absolute; top: 38%; transform: translateY(-50%); z-index: 2;
    width: 40px; height: 40px; display: grid; place-items: center;
    background: var(--dc-surface); border: 1px solid var(--dc-line); border-radius: 50%;
    color: var(--dc-ink); cursor: pointer; box-shadow: var(--dc-shadow);
}
.dc-gallery__nav--prev { left: 0; }
.dc-gallery__nav--next { right: 0; }

.dc-lightbox { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 32px; background: rgba(5,10,18,.92); }
.dc-lightbox[hidden] { display: none; }
.dc-lightbox__figure { margin: 0; max-width: 1100px; text-align: center; }
.dc-lightbox__figure img { max-width: 100%; max-height: 78vh; border-radius: var(--dc-radius); }
.dc-lightbox__figure figcaption { color: #c8d4e6; margin-top: 14px; font-size: .95rem; }
.dc-lightbox__close { position: absolute; top: 20px; right: 24px; width: 44px; height: 44px; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24); border-radius: 50%; color: #fff; font-size: 1.4rem; cursor: pointer; }

/* ---------- services / offers --------------------------------------------- */

.dc-services__grid, .dc-offers__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.dc-service-card, .dc-offer-card {
    background: var(--dc-surface); border: 1px solid var(--dc-line); border-radius: var(--dc-radius-lg);
    padding: 26px; display: flex; flex-direction: column; gap: 12px; text-align: center;
    transition: transform .22s var(--dc-ease), box-shadow .22s var(--dc-ease), border-color .22s var(--dc-ease);
}
.dc-service-card:hover, .dc-offer-card:hover { transform: translateY(-4px); box-shadow: var(--dc-shadow); border-color: var(--dc-accent-line); }
.dc-service-card__icon { width: 56px; height: 56px; margin: 0 auto; display: grid; place-items: center; border-radius: 14px; background: var(--dc-accent-soft); color: var(--dc-accent); font-size: 1.5rem; }
.dc-service-card__icon img { width: 30px; height: 30px; object-fit: contain; }
.dc-service-card__title { font-size: 1.08rem; font-weight: 700; color: var(--dc-ink); margin: 0; text-transform: capitalize; }
.dc-service-card__desc { font-size: .89rem; line-height: 1.6; color: var(--dc-muted); margin: 0; }
.dc-service-card__price { margin: 0; font-size: .84rem; color: var(--dc-muted); }
.dc-service-card__price strong { display: block; font-size: 1.3rem; color: var(--dc-ink); margin-top: 2px; }
.dc-service-card .dc-btn, .dc-offer-card .dc-btn { margin-top: auto; align-self: center; }

.dc-offer-card { text-align: left; }
.dc-offer-card__title { font-size: 1.1rem; font-weight: 700; color: var(--dc-ink); margin: 0; }
.dc-offer-card__spec { display: grid; gap: 8px; margin: 0; }
.dc-offer-card__spec > div { display: flex; justify-content: space-between; gap: 12px; font-size: .88rem; padding-bottom: 8px; border-bottom: 1px dashed var(--dc-line); }
.dc-offer-card__spec dt { color: var(--dc-muted); margin: 0; }
.dc-offer-card__spec dd { color: var(--dc-ink); font-weight: 600; margin: 0; text-align: right; }

/* ---------- why / cta ----------------------------------------------------- */

.dc-why__layout { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.dc-why__intro .dc-section__title { text-align: left; }
.dc-why__intro .dc-btn { margin-top: 22px; }
.dc-why__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.dc-why__item { display: flex; gap: 16px; }
.dc-why__icon { width: 46px; height: 46px; flex: 0 0 46px; display: grid; place-items: center; border-radius: 12px; background: var(--dc-accent-soft); color: var(--dc-accent); font-size: 1.25rem; }
.dc-why__item h3 { font-size: 1.05rem; font-weight: 700; color: var(--dc-ink); margin: 0 0 6px; }
.dc-why__item p { font-size: .92rem; line-height: 1.65; color: var(--dc-muted); margin: 0; }

.dc-cta__panel {
    background: linear-gradient(120deg, var(--dc-ink) 0%, var(--dc-ink-2) 100%);
    border-radius: var(--dc-radius-lg); padding: clamp(32px, 5vw, 56px);
    display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
}
.dc-cta__copy h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); color: #fff; margin: 0 0 10px; }
.dc-cta__copy p { color: #a8b7cc; margin: 0; font-size: 1rem; }
.dc-cta__actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dc-cta__phone { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font-weight: 600; font-size: 1.05rem; }
.dc-cta__phone:hover { color: var(--dc-accent); }

/* ---------- responsive ---------------------------------------------------- */

@media (max-width: 1199.98px) {
    .dc-header__burger { display: flex; }
    .dc-nav {
        position: fixed; inset: 0 0 0 auto; width: min(340px, 88vw); z-index: 90;
        background: var(--dc-ink); flex-direction: column; align-items: stretch; gap: 0;
        padding: 72px 24px 32px; overflow-y: auto;
        transform: translateX(100%); transition: transform .3s var(--dc-ease), visibility .3s var(--dc-ease);
        box-shadow: -20px 0 60px rgba(0,0,0,.4);
    }
    .dc-nav { visibility: hidden; }
    .dc-nav.is-open { transform: translateX(0); visibility: visible; }
    .dc-nav__close { display: grid; place-items: center; position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; background: rgba(255,255,255,.1); border: 0; border-radius: 50%; color: #fff; font-size: 1.3rem; }
    .dc-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .dc-nav__list > li > a { padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); justify-content: space-between; }
    .dc-nav__actions { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 24px; }
    .dc-nav__actions .dc-btn { width: 100%; }
    .dc-mega__inner { grid-template-columns: 1fr; }
    .dc-mega__detail { display: none; }
    .dc-why__layout { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .dc-header__tagline { display: none; }
    .dc-hero__track { min-height: 480px; }
    .dc-hero__scrim { background: linear-gradient(180deg, rgba(7,16,28,.62) 0%, rgba(7,16,28,.93) 78%); }
    .dc-hero__body { padding-block: 48px 76px; }
    .dc-hero__nav { display: none; }
    .dc-hero__actions .dc-btn { flex: 1 1 100%; }
    .dc-gallery__viewport { padding: 0 16px; }
    .dc-gallery__nav { display: none; }
    .dc-gallery__rail { grid-auto-columns: 82%; }
    .dc-loc-card__specs { grid-template-columns: 1fr; }
    .dc-build__cta, .dc-cta__panel { flex-direction: column; align-items: flex-start; }
    .dc-cta__actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-hero__slide { transition: none; }
    .dc-hero__dot.is-active .dc-hero__dot-fill { animation: none; width: 100%; }
    .dc-btn, .dc-loc-card, .dc-build__card, .dc-service-card, .dc-offer-card, .dc-gallery__open img { transition: none; }
    .dc-btn:hover, .dc-loc-card:hover, .dc-build__card:hover, .dc-service-card:hover, .dc-offer-card:hover { transform: none; }
}

/* ---------- footer -------------------------------------------------------- */

.dc-footer { background: var(--dc-ink); color: #a8b7cc; }
.dc-footer .container { max-width: var(--dc-maxw); }
.dc-footer__inner {
    display: grid; grid-template-columns: minmax(260px, 1.6fr) repeat(3, minmax(150px, 1fr));
    gap: clamp(28px, 4vw, 56px); padding: clamp(48px, 6vw, 76px) 0;
}
.dc-footer__logo { display: inline-block; margin-bottom: 18px; }
.dc-footer__logo img { max-height: 46px; width: auto; }
.dc-footer__about { font-size: .92rem; line-height: 1.72; margin: 0 0 20px; max-width: 42ch; }
.dc-footer__contact-line { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; margin: 0 0 10px; }
.dc-footer__contact-line i { color: var(--dc-accent); margin-top: 3px; flex: 0 0 auto; }
.dc-footer__contact-line a { color: #a8b7cc; text-decoration: none; }
.dc-footer__contact-line a:hover { color: #fff; }
.dc-footer__col h3 { font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; margin: 0 0 16px; }
.dc-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dc-footer__col a { color: #a8b7cc; text-decoration: none; font-size: .92rem; text-transform: capitalize; }
.dc-footer__col a:hover { color: var(--dc-accent); }
.dc-footer__bar { border-top: 1px solid rgba(255,255,255,.09); font-size: .86rem; }
.dc-footer__bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; min-height: 60px; padding: 12px 0; }
.dc-footer__policies { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; }
.dc-footer__policies a { color: #a8b7cc; text-decoration: none; }
.dc-footer__policies a:hover { color: #fff; }

@media (max-width: 991.98px) {
    .dc-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
    .dc-footer__inner { grid-template-columns: 1fr; }
    .dc-footer__bar-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- shared: status dot ------------------------------------------- */

.dc-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 8px; background: var(--dc-muted); position: relative; }
.dc-dot--live { background: #24a35a; }
.dc-dot--live::after {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    border: 1px solid #24a35a; opacity: .55; animation: dcPulse 2.4s ease-out infinite;
}
@keyframes dcPulse { 0% { transform: scale(.6); opacity: .7 } 100% { transform: scale(1.5); opacity: 0 } }

/* ---------- locations map ------------------------------------------------ */

.dc-map { background: var(--dc-ink) !important; color: #a8b7cc; }
.dc-map .dc-section__title { color: #fff; }
.dc-map .dc-section__sub { color: #93a3ba; }
.dc-map .dc-eyebrow { color: #7fd4a4; background: rgba(36,163,90,.12); border-color: rgba(36,163,90,.3); }

.dc-map__layout { display: grid; grid-template-columns: 1fr minmax(280px, 350px); gap: clamp(24px, 4vw, 48px); align-items: start; }

.dc-map__figure {
    margin: 0; position: relative; border-radius: var(--dc-radius-lg);
    background: radial-gradient(120% 100% at 30% 0%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 60%), #070f1a;
    border: 1px solid rgba(255,255,255,.09); padding: 18px; overflow: hidden;
}
.dc-map__legend {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    font-family: inherit; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase;
    color: #8fa0b8; margin-bottom: 12px;
}
.dc-map__legend-item { display: inline-flex; align-items: center; gap: 7px; }
.dc-map__legend-sep { width: 1px; height: 12px; background: rgba(255,255,255,.18); }

.dc-map__svg { display: block; width: 100%; height: auto; }
.dc-map__grid line { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.dc-map__links path { fill: none; stroke: url(#dcLink); stroke-width: 1.6; }

.dc-map__site { cursor: pointer; }
.dc-map__site:focus { outline: none; }
.dc-map__site:focus-visible .dc-map__core { stroke: #fff; stroke-width: 3; }
.dc-map__halo { opacity: 0; transition: opacity .3s var(--dc-ease); }
.dc-map__site.is-active .dc-map__halo, .dc-map__site:hover .dc-map__halo { opacity: 1; }
.dc-map__core { fill: #24a35a; stroke: #071018; stroke-width: 2; transition: fill .3s var(--dc-ease); }
.dc-map__site.is-active .dc-map__core { fill: #fff; }
.dc-map__ping { fill: none; stroke: #24a35a; stroke-width: 1.4; transform-origin: center; transform-box: fill-box; animation: dcRipple 3.2s ease-out infinite; }
@keyframes dcRipple { 0% { transform: scale(.5); opacity: .8 } 100% { transform: scale(2.6); opacity: 0 } }
.dc-map__label {
    fill: #c8d4e6; font-family: var(--dc-font-ui, inherit); font-size: 19px; font-weight: 600;
    paint-order: stroke; stroke: #070f1a; stroke-width: 4px; stroke-linejoin: round;
    transition: fill .3s var(--dc-ease);
}
.dc-map__site.is-active .dc-map__label { fill: #fff; }

.dc-map__panel { display: flex; flex-direction: column; gap: 18px; }
.dc-map__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dc-map__row {
    width: 100%; display: flex; align-items: center; gap: 11px; cursor: pointer;
    background: transparent; border: 0; border-left: 2px solid transparent;
    padding: 11px 14px; text-align: left; color: #a8b7cc; font-size: .95rem;
    border-radius: 0 8px 8px 0; transition: background .2s var(--dc-ease), color .2s var(--dc-ease), border-color .2s var(--dc-ease);
}
.dc-map__row:hover { background: rgba(255,255,255,.04); color: #fff; }
.dc-map__row.is-active { background: rgba(255,255,255,.07); border-left-color: #24a35a; color: #fff; }
.dc-map__row-city { font-weight: 600; }
.dc-map__row-region { margin-left: auto; font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: #7b8ba1; }

.dc-map__detail { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: var(--dc-radius); padding: 20px; }
.dc-map__detail[hidden] { display: none; }
.dc-map__detail h3 { color: #fff; font-size: 1.2rem; margin: 0 0 3px; }
.dc-map__detail-country { font-size: .84rem; color: #7b8ba1; margin: 0 0 12px; }
.dc-map__detail-desc { font-size: .92rem; line-height: 1.65; color: #a8b7cc; margin: 0 0 16px; }
.dc-map__detail .dc-btn--outline { --_fg: #fff; --_bd: rgba(255,255,255,.3); }
.dc-map__detail .dc-btn--outline:hover { --_bg: rgba(255,255,255,.1); }

/* ---------- facility anatomy --------------------------------------------- */

.dc-anatomy__tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 34px; }
.dc-anatomy__tab {
    display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
    padding: 11px 20px; border-radius: 999px; font-size: .93rem; font-weight: 600;
    background: var(--dc-surface); color: var(--dc-body);
    border: 1px solid var(--dc-line);
    transition: background .2s var(--dc-ease), color .2s var(--dc-ease), border-color .2s var(--dc-ease);
}
.dc-anatomy__tab i { font-size: 1.1rem; }
.dc-anatomy__tab:hover { border-color: var(--dc-accent-line); color: var(--dc-ink); }
.dc-anatomy__tab.is-active { background: var(--dc-accent); border-color: var(--dc-accent); color: var(--dc-accent-ink); }

.dc-anatomy__chain[hidden] { display: none; }

.dc-anatomy__line {
    list-style: none; margin: 0 0 26px; padding: 0;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
    position: relative;
}
.dc-anatomy__line::before {
    content: ""; position: absolute; left: 6%; right: 6%; top: 21px; height: 2px;
    background: var(--dc-line);
}
.dc-anatomy__node { position: relative; }
.dc-anatomy__btn {
    width: 100%; background: none; border: 0; cursor: pointer; padding: 0;
    display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
}
.dc-anatomy__marker {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
    background: var(--dc-surface); border: 2px solid var(--dc-line); position: relative; z-index: 1;
    transition: border-color .22s var(--dc-ease), background .22s var(--dc-ease), transform .22s var(--dc-ease);
}
.dc-anatomy__marker::after {
    content: ""; width: 10px; height: 10px; border-radius: 50%;
    background: var(--dc-line); transition: background .22s var(--dc-ease);
}
.dc-anatomy__node.is-active .dc-anatomy__marker { border-color: var(--dc-accent); background: var(--dc-accent-soft); transform: scale(1.08); }
.dc-anatomy__node.is-active .dc-anatomy__marker::after { background: var(--dc-accent); }
.dc-anatomy__btn:hover .dc-anatomy__marker { border-color: var(--dc-accent-line); }
.dc-anatomy__btn:focus-visible .dc-anatomy__marker { outline: 3px solid var(--dc-accent-line); outline-offset: 3px; }

.dc-anatomy__label { font-family: var(--dc-font-ui, inherit); font-size: .88rem; font-weight: 700; color: var(--dc-ink); line-height: 1.3; }
.dc-anatomy__sub { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--dc-muted); }
.dc-anatomy__node.is-active .dc-anatomy__label { color: var(--dc-accent); }

.dc-anatomy__readout {
    background: var(--dc-surface); border: 1px solid var(--dc-line);
    border-left: 4px solid var(--dc-accent); border-radius: 0 var(--dc-radius) var(--dc-radius) 0;
    padding: 22px 26px; min-height: 96px; display: flex; align-items: center;
}
.dc-anatomy__detail { margin: 0; font-size: .98rem; line-height: 1.7; color: var(--dc-body); }
.dc-anatomy__detail[hidden] { display: none; }
.dc-anatomy__detail strong { display: block; color: var(--dc-ink); font-weight: 700; margin-bottom: 4px; }

@media (max-width: 991.98px) {
    .dc-map__layout { grid-template-columns: 1fr; }
    .dc-anatomy__line { grid-auto-flow: row; grid-auto-columns: auto; gap: 4px; }
    .dc-anatomy__line::before { left: 21px; right: auto; top: 6%; bottom: 6%; width: 2px; height: auto; }
    .dc-anatomy__btn { flex-direction: row; align-items: center; gap: 14px; text-align: left; padding: 6px 0; }
    .dc-anatomy__btn > span:not(.dc-anatomy__marker) { flex: 0 1 auto; }
    .dc-anatomy__label { flex: 0 0 auto; }
    .dc-anatomy__sub { margin-left: auto; }
}
@media (max-width: 575.98px) {
    .dc-map__figure { padding: 10px; }
    .dc-map__label { font-size: 34px; }
    .dc-anatomy__sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .dc-map__ping, .dc-dot--live::after { animation: none; opacity: 0; }
    .dc-anatomy__node.is-active .dc-anatomy__marker { transform: none; }
}

/* ---------- inherited widgets, brought onto the theme -------------------- */

/* The subscribe bell is a fixed floating widget from the base template with a
   hardcoded #01b30e background. Retint it and move it clear of the CTA column. */
.subscribe .subscribe-btn {
    background: var(--dc-accent) !important;
    border-color: var(--dc-accent) !important;
    color: var(--dc-accent-ink) !important;
    box-shadow: var(--dc-shadow-lg);
    border-radius: 999px;
}
.subscribe .subscribe-box {
    border-radius: var(--dc-radius); border: 1px solid var(--dc-line);
    box-shadow: var(--dc-shadow-lg);
}
.subscribe .subscribe-box__title { font-family: var(--dc-font-ui); font-weight: 700; color: var(--dc-ink); }

/* The base template's mobile-menu backdrop. The new header has its own drawer,
   so make sure a stale .active class can never black out the page. */
.overlay { pointer-events: none; }

/* Breadcrumb on inner pages: match the new header rather than the old theme. */
.breadcrumb-bg { background: var(--dc-surface-2); border-bottom: 1px solid var(--dc-line); }

/* ---------- authenticated header dropdowns ------------------------------- */

.dc-nav__has-sub { position: relative; }
.dc-nav__sub-toggle {
    background: none; border: 0; cursor: pointer;
    color: #dbe4f2; font-size: .9rem; font-weight: 500; font-family: var(--dc-font-ui);
    white-space: nowrap; padding: 8px 0;
    display: inline-flex; align-items: center; gap: 6px;
    border-bottom: 2px solid transparent;
    transition: color .18s var(--dc-ease), border-color .18s var(--dc-ease);
}
.dc-nav__sub-toggle:hover,
.dc-nav__has-sub.is-open > .dc-nav__sub-toggle { color: #fff; border-bottom-color: var(--dc-accent); }
.dc-nav__sub-toggle i { font-size: .78em; transition: transform .18s var(--dc-ease); }
.dc-nav__has-sub.is-open > .dc-nav__sub-toggle i { transform: rotate(180deg); }

.dc-nav__sub {
    list-style: none; margin: 0; padding: 8px;
    position: absolute; top: calc(100% + 10px); left: -12px; z-index: 70;
    min-width: 218px;
    background: var(--dc-surface); border: 1px solid var(--dc-line);
    border-radius: var(--dc-radius); box-shadow: var(--dc-shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .18s var(--dc-ease), visibility .18s var(--dc-ease), transform .18s var(--dc-ease);
}
.dc-nav__has-sub.is-open > .dc-nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.dc-nav__sub a {
    display: block; padding: 9px 12px; border-radius: 8px;
    color: var(--dc-ink); text-decoration: none; font-size: .9rem; white-space: nowrap;
}
.dc-nav__sub a:hover { background: var(--dc-surface-2); color: var(--dc-accent); }

.dc-header--auth .dc-header__topbar { background: #07101c; }

@media (max-width: 1199.98px) {
    .dc-nav__has-sub { width: 100%; }
    .dc-nav__sub-toggle { width: 100%; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
    .dc-nav__sub {
        position: static; opacity: 1; visibility: visible; transform: none;
        display: none; min-width: 0; margin: 0 0 6px;
        background: rgba(255,255,255,.04); border: 0; box-shadow: none; border-radius: 8px;
    }
    .dc-nav__has-sub.is-open > .dc-nav__sub { display: block; }
    .dc-nav__sub a { color: #c8d4e6; }
    .dc-nav__sub a:hover { background: rgba(255,255,255,.06); color: #fff; }
}


/* ---------- dark surfaces use the bright accent -------------------------- */
/* On the ink background the original hue scores ~9:1, so it is used unchanged;
   the darkened accent is reserved for light surfaces where white text sits on it. */

.dc-hero__actions .dc-btn--solid,
.dc-stats .dc-stat__suffix,
.dc-map .dc-loc-card__link,
.dc-build__cta .dc-btn--solid,
.dc-cta__panel .dc-btn--solid,
.dc-cta__phone:hover,
.dc-footer__col a:hover,
.dc-footer__contact-line i {
    color: var(--dc-accent-ink);
}
.dc-stats .dc-stat__suffix,
.dc-cta__phone:hover,
.dc-footer__col a:hover,
.dc-footer__contact-line i { color: var(--dc-accent-bright); }

.dc-hero__actions .dc-btn--solid,
.dc-build__cta .dc-btn--solid,
.dc-cta__panel .dc-btn--solid {
    background: var(--dc-accent-bright);
    border-color: var(--dc-accent-bright);
    color: #08130a;
}
.dc-hero__dot.is-active .dc-hero__dot-fill { background: var(--dc-accent-bright); }
.dc-map .dc-eyebrow { color: var(--dc-accent-bright); }
.dc-mega { border-top-color: var(--dc-accent-bright); }


.dc-map__detail-specs { display: grid; gap: 10px; margin: 0 0 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.12); }
.dc-map__detail-specs > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.dc-map__detail-specs dt { font-family: var(--dc-font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #7b8ba1; margin: 0; }
.dc-map__detail-specs dd { font-size: .9rem; font-weight: 600; color: #fff; margin: 0; text-align: right; font-variant-numeric: tabular-nums; }


/* ---------- focus visibility on dark surfaces ---------------------------- */

.dc-header a:focus-visible,
.dc-header button:focus-visible,
.dc-hero a:focus-visible,
.dc-hero button:focus-visible,
.dc-map a:focus-visible,
.dc-map button:focus-visible,
.dc-stats a:focus-visible,
.dc-footer a:focus-visible,
.dc-cta__panel a:focus-visible,
.dc-build__cta a:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 5px rgba(0, 0, 0, .55);
    border-radius: 4px;
}

/* The SVG markers are real controls; give them a ring too. */
.dc-map__site:focus-visible { outline: none; }
.dc-map__site:focus-visible .dc-map__core { stroke: #fff; stroke-width: 4; }
.dc-map__site:focus-visible .dc-map__label { fill: #fff; }