/* ==========================================================================
   Dhahran Techno Valley interactive map case study
   Voila's own system: Night Ink / Studio Black stages, white reading sections,
   Black Mango headlines with one red word, Inter for everything read or clicked,
   square actions, soft containers, hairlines. Tenant brand colours live only on
   the map, the flags and the directory swatches.
   ========================================================================== */

.dt-page {
    --dt-ink: #0d1114;            /* Night Ink */
    --dt-black: #151515;          /* Studio Black */
    --dt-white: #ffffff;
    --dt-smoke: #d0d0d0;
    --dt-smoke-soft: #a9adb4;     /* secondary text on Night Ink, 7.6:1 */
    --dt-text: #656372;           /* body on white */
    --dt-muted: #6f6e77;
    --dt-red: var(--main-color, #ec1e24);
    --dt-line: rgba(21, 21, 21, .11);
    --dt-line-night: rgba(255, 255, 255, .12);
    --dt-plate: rgba(13, 17, 20, .9);
    --dt-title: var(--title-font-family, 'Black Mango'), serif;
    --dt-body: var(--main-font-family, 'Inter'), sans-serif;
    --dt-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --dt-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --dt-gutter: clamp(16px, 4vw, 56px);
    --dt-header: 90px;
    --dt-radius: 14px;

    display: block;
    background: var(--dt-ink);
    color: var(--dt-text);
    font-family: var(--dt-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* The theme sets overflow-x:hidden on html and body, which breaks position:sticky.
   Clip instead, on this page only. */
body:has(#dtv-case-study) { overflow: visible; overflow-x: clip; }

.dt-page ::selection { background: var(--dt-red); color: #fff; }
.dt-page :focus-visible { outline: 2px solid var(--dt-red); outline-offset: 3px; }
.dt-page img { display: block; max-width: 100%; height: auto; }
.dt-page figure, .dt-page p { margin: 0; }
.dt-page h1, .dt-page h2, .dt-page h3, .dt-page dt { color: inherit; margin: 0; }
.dt-page ul, .dt-page dl, .dt-page dd { margin: 0; padding: 0; list-style: none; }
:where(.dt-page) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.dt-page em { font-style: normal; color: var(--dt-red); }
.dt-page svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.dt-page code, .dt-page kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; }
.dt-page kbd { padding: 1px 6px; border: 1px solid var(--dt-line); border-bottom-width: 2px; }

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

.dt-wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--dt-gutter); }

.dt-h2 {
    font-family: var(--dt-title);
    font-weight: 500;
    font-size: clamp(2rem, 3.6vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    text-wrap: balance;
}
.dt-h3 {
    font-family: var(--dt-title);
    font-weight: 500;
    font-size: 1.35rem;
    line-height: 1.2;
    margin: 0 0 .9rem;
}

/* ---------------------------------------------------------------- actions */
.dt-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 30px;
    border: 1px solid var(--dt-red);
    color: var(--dt-smoke);
    font-weight: 600; font-size: 1rem; letter-spacing: .3px;
    text-decoration: none;
    overflow: hidden;
    transition: transform 160ms var(--dt-ease-out), background-color 200ms ease;
}
.dt-btn > span { position: relative; display: block; transition: transform 300ms var(--dt-ease-out); }
.dt-btn > span::after { content: attr(data-text); position: absolute; left: 0; top: 160%; white-space: nowrap; }
.dt-btn:active { transform: scale(0.97); }
.dt-btn--solid { background: var(--dt-red); color: #fff; }
@media (hover: hover) and (pointer: fine) {
    .dt-btn:hover > span { transform: translateY(-160%); }
    .dt-btn:hover { color: var(--dt-smoke); }
    .dt-btn--solid:hover { color: #fff; }
}

.dt-link {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: .95rem;
    color: inherit; text-decoration: none;
    text-underline-offset: 5px;
}
.dt-link svg { width: 15px; height: 15px; color: var(--dt-red); transition: transform 200ms var(--dt-ease-out); }
@media (hover: hover) and (pointer: fine) {
    .dt-link:hover { text-decoration: underline; text-decoration-color: var(--dt-red); }
    .dt-link:hover svg { transform: translate(2px, -2px); }
    a.dt-link[href^="/"]:hover svg, a.dt-link:not([target]):hover svg { transform: translateX(4px); }
}

/* ==========================================================================
   STAGE
   ========================================================================== */
.dt-stage {
    position: relative;
    background:
        radial-gradient(60% 55% at 64% 52%, #1a2130 0%, rgba(26, 33, 48, 0) 70%),
        var(--dt-ink);
    color: var(--dt-smoke);
}
.dt-stage__sticky {
    position: sticky; top: 0;
    height: 100vh; height: 100svh;
    overflow: hidden;
    z-index: 0;
}
/* Legibility scrim behind the copy column (left on desktop, bottom on phones) */
.dt-stage__sticky::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background: linear-gradient(90deg, rgba(13, 17, 20, .92) 0%, rgba(13, 17, 20, .55) 30%, rgba(13, 17, 20, 0) 52%);
    transition: opacity 600ms ease;
}
.dt-stage__canvas { position: absolute; inset: 0; z-index: 0; }
.dt-stage__canvas canvas { display: block; width: 100% !important; height: 100% !important; outline: none; pointer-events: none; touch-action: pan-y; }

.dt-stage__steps {
    position: relative; z-index: 2;
    margin-top: -100vh; margin-top: -100svh;
    pointer-events: none;           /* let the canvas take the pointer between cards */
}
.dt-stage__steps a, .dt-stage__steps button, .dt-stage__steps input,
.dt-chapter__card, .dt-panel, .dt-hero__copy, .dt-facts { pointer-events: auto; }

.dt-step { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }

/* ---------------------------------------------------------------- loader */
.dt-loader {
    position: absolute; z-index: 3;
    left: 0; right: 0; top: var(--dt-header);
    height: 2px;
    --p: 0;
    transition: opacity 500ms ease 200ms;
}
.dt-loader__bar { position: absolute; inset: 0; background: var(--dt-red); transform-origin: 0 50%; transform: scaleX(var(--p)); transition: transform 200ms linear; }
.dt-loader__value {
    position: absolute; right: var(--dt-gutter); top: 12px;
    font-size: .78rem; font-weight: 600; letter-spacing: .08em;
    color: var(--dt-smoke-soft);
    font-variant-numeric: tabular-nums;
}
.dt-page:not([data-3d="loading"]) .dt-loader { opacity: 0; pointer-events: none; }

/* ---------------------------------------------------------------- fallback (no WebGL) */
.dt-stage__fallback {
    position: absolute; z-index: 0;
    right: var(--dt-gutter); top: calc(var(--dt-header) + 32px);
    width: min(34vw, 600px);
    border-radius: var(--dt-radius); overflow: hidden;
    display: none;
}
.dt-page[data-3d="off"] .dt-stage__fallback { display: block; }
.dt-page[data-3d="off"] .dt-flags,
.dt-page[data-3d="off"] .dt-tools { display: none; }

/* ---------------------------------------------------------------- logo flags */
.dt-flags { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.dt-flag {
    position: absolute; left: 0; top: 0;
    display: flex; flex-direction: column; align-items: center;
    --stem: 0;
    /* scale about the point that sits on the map: the centre on the wall, the stem's foot once docked */
    transform-origin: 50% calc(50% + var(--stem) * 50%);
    opacity: 0;
    transition: opacity 450ms var(--dt-ease-out), filter 300ms ease;
    will-change: transform;
}
.dt-flag__plate {
    display: flex; align-items: center; justify-content: center;
    width: 150px; height: 64px; padding: 10px 16px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .6);
    outline: 2px solid transparent; outline-offset: 2px;
    transition: outline-color 180ms ease, transform 200ms var(--dt-ease-out);
}
.dt-flag__plate img { max-width: 118px; max-height: 42px; width: auto; height: auto; object-fit: contain; }
.dt-flag::after {
    content: ''; width: 2px;
    height: calc(var(--stem) * 30px + var(--lift, 0px));
    background: linear-gradient(rgba(255, 255, 255, .85), rgba(255, 255, 255, .35));
}
.dt-flag.is-off, .dt-flag.is-tucked { opacity: 0 !important; pointer-events: none !important; }

.dt-page[data-3d="ready"]:not([data-step="intro"]) .dt-flag { opacity: 1; }
.dt-page[data-step="wall"] .dt-flag { transition-delay: calc(var(--i, 0) * 25ms); }
.dt-page[data-step="campus"] .dt-flag:not([data-key="sabic"]) { opacity: .22; }
.dt-page[data-step="campus"] .dt-flag[data-key="sabic"] .dt-flag__plate { outline-color: var(--brand); }
.dt-page[data-step="explore"] .dt-flag { pointer-events: auto; }
.dt-page[data-step="explore"].has-selection .dt-flag:not(.is-selected):not(.is-hot) { opacity: .45; }
.dt-flag.is-hot .dt-flag__plate,
.dt-flag.is-selected .dt-flag__plate { outline-color: var(--brand); transform: scale(1.08); }
.dt-flag.is-hot, .dt-flag.is-selected { z-index: 2; }
.dt-page.is-past-stage .dt-flag { transition-duration: 0ms; }

/* ---------------------------------------------------------------- tour progress (the red signal on the stage) */
.dt-tour {
    position: absolute; z-index: 3;
    left: 0; right: 0; top: var(--dt-header);
    height: 2px;
    background: var(--dt-red);
    transform-origin: 0 50%;
    transform: scaleX(var(--tour, 0));
    opacity: 0;
    transition: opacity 400ms ease;
}
.dt-page[data-3d="ready"] .dt-tour { opacity: 1; }

/* ---------------------------------------------------------------- map tools */
.dt-tools {
    position: absolute; z-index: 3;
    right: var(--dt-gutter); top: calc(var(--dt-header) + 24px);
    display: flex; gap: 8px;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity 250ms ease, transform 250ms var(--dt-ease-out), visibility 0s linear 250ms;
}
.dt-page[data-3d="ready"][data-step="explore"] .dt-tools { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.dt-tool {
    display: grid; place-items: center;
    min-width: 44px; height: 44px; padding: 0 12px;
    background: var(--dt-plate);
    border: 1px solid var(--dt-line-night);
    color: var(--dt-smoke);
    font-size: .85rem; font-weight: 600;
    transition: transform 160ms var(--dt-ease-out), border-color 200ms ease;
}
.dt-tool svg { width: 16px; height: 16px; }
.dt-tool:active { transform: scale(0.95); }
@media (hover: hover) and (pointer: fine) { .dt-tool:hover { border-color: var(--dt-red); } }

/* ---------------------------------------------------------------- A. hero */
.dt-hero { align-items: flex-end; padding: calc(var(--dt-header) + 6vh) 0 7vh; }
.dt-hero .dt-wrap { display: grid; gap: 40px; }
.dt-hero__copy { max-width: 62rem; }
.dt-page .dt-hero__title {
    font-family: var(--dt-title); font-weight: 500;
    font-size: clamp(2.75rem, 5.3vw, 4.6rem);
    line-height: .98; letter-spacing: -0.02em;
    color: #fff;
}
.dt-line { display: block; overflow: hidden; padding-bottom: .06em; }
.dt-line > span { display: block; }
.dt-hero__lede { margin-top: 24px; max-width: 38ch; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.6; color: var(--dt-smoke); }
.dt-hero__actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.dt-hero__actions .dt-link { color: #fff; }

.dt-facts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 34rem;
    border-top: 1px solid var(--dt-line-night);
}
.dt-facts > div { padding: 16px 20px 0 0; }
.dt-facts dt { font-size: .78rem; font-weight: 600; color: var(--dt-smoke-soft); margin-bottom: 4px; }
.dt-facts dd { font-size: .95rem; color: #fff; line-height: 1.4; }

/* ---------------------------------------------------------------- B. chapters */
.dt-chapter { min-height: 130vh; min-height: 130svh; align-items: flex-start; }
/* the card rides with its chapter, so every camera state has its words on screen */
.dt-chapter .dt-wrap { position: sticky; top: 30vh; top: 30svh; }
.dt-chapter__card { transition: opacity 350ms ease, transform 450ms var(--dt-ease-out); }
.dt-page.has-tour .dt-chapter:not(.is-active) .dt-chapter__card { opacity: 0; transform: translateY(12px); }
.dt-chapter__card {
    max-width: 27rem;
    padding: 30px 32px 32px;
    background: var(--dt-plate);
    border: 1px solid var(--dt-line-night);
    border-radius: var(--dt-radius);
}
.dt-chapter__card .dt-h2 { color: #fff; font-size: clamp(1.8rem, 2.8vw, 2.5rem); }
.dt-chapter__card p { margin-top: 16px; line-height: 1.7; color: var(--dt-smoke); }

/* ---------------------------------------------------------------- C. explorer */
.dt-explore { padding: calc(var(--dt-header) + 24px) 0 28px; align-items: stretch; }
.dt-explore .dt-wrap { display: flex; flex-direction: column; gap: 14px; }
.dt-panel {
    width: min(26rem, 100%);
    height: calc(100svh - var(--dt-header) - 100px);
    min-height: 460px;
    display: flex; flex-direction: column;
    background: var(--dt-plate);
    border: 1px solid var(--dt-line-night);
    border-radius: var(--dt-radius);
    overflow: hidden;
}
.dt-panel__head { padding: 26px 26px 16px; border-bottom: 1px solid var(--dt-line-night); }
.dt-panel__head .dt-h2 { color: #fff; }
.dt-panel__hint { margin-top: 10px; font-size: .88rem; line-height: 1.55; color: var(--dt-smoke-soft); }
.dt-hint-touch { display: none; }
@media (hover: none), (pointer: coarse) { .dt-hint-fine { display: none; } .dt-hint-touch { display: inline; } }

.dt-search {
    display: flex; align-items: center; gap: 10px;
    margin-top: 16px; padding: 0 14px;
    height: 46px;
    border: 1px solid var(--dt-line-night);
    background: rgba(255, 255, 255, .03);
    transition: border-color 200ms ease;
}
.dt-search:focus-within { border-color: var(--dt-red); }
.dt-search svg { width: 16px; height: 16px; color: var(--dt-smoke-soft); flex: none; }
.dt-search input {
    flex: 1; min-width: 0; height: 100%;
    background: none; border: 0; outline: none;
    color: #fff; font: inherit; font-size: 16px;   /* 16px stops iOS zooming in */
    caret-color: var(--dt-red);
}
.dt-page .dt-search input:focus-visible { outline: none; }
.dt-search input::placeholder { color: var(--dt-smoke-soft); opacity: 1; }
.dt-search input::-webkit-search-cancel-button { filter: invert(1) grayscale(1); opacity: .6; }

.dt-list {
    flex: 1 1 auto; min-height: 120px;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 6px 0;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.dt-list li[hidden] { display: none; }
.dt-list__item {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 11px 26px;
    text-align: left; font-size: .95rem; line-height: 1.35;
    color: var(--dt-smoke);
    transition: background-color 150ms ease, color 150ms ease;
}
.dt-list__swatch { width: 10px; height: 10px; flex: none; background: var(--brand); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); transition: transform 180ms var(--dt-ease-out); }
.dt-list__item.is-hot, .dt-list__item:focus-visible { background: rgba(255, 255, 255, .05); color: #fff; }
.dt-list__item.is-hot .dt-list__swatch { transform: scale(1.3); }
.dt-list__item[aria-pressed="true"] { background: rgba(255, 255, 255, .09); color: #fff; }
.dt-list__item[aria-pressed="true"] .dt-list__swatch { box-shadow: 0 0 0 2px var(--dt-ink), 0 0 0 3px var(--dt-red); }
.dt-list__item:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .dt-list__item:hover { background: rgba(255, 255, 255, .05); color: #fff; } }
.dt-list__empty { padding: 14px 26px; font-size: .9rem; color: var(--dt-smoke-soft); }

.dt-profile {
    flex: 0 1 auto; max-height: 46%;
    overflow-y: auto; overscroll-behavior: contain;
    border-top: 1px solid var(--dt-line-night);
    padding: 20px 26px 24px;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
/* a pick hands the panel to the profile; the list keeps a short strip */
.dt-page.has-selection .dt-list { flex: 0 0 auto; max-height: 24%; }
.dt-page.has-selection .dt-profile { flex: 1 1 auto; max-height: none; }
.dt-profile__back { display: none; }
.dt-profile__empty { font-size: .9rem; line-height: 1.55; color: var(--dt-smoke-soft); }
.dt-profile__card { animation: dt-profile-in 320ms var(--dt-ease-out); }
@keyframes dt-profile-in { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }
.dt-profile__logo {
    display: flex; align-items: center; justify-content: center;
    width: 128px; height: 58px; padding: 8px 12px;
    background: #fff; border-radius: 4px;
    box-shadow: 0 0 0 2px var(--dt-ink), 0 0 0 3px var(--brand);
}
.dt-profile__logo img { max-width: 104px; max-height: 42px; width: auto; height: auto; object-fit: contain; }
.dt-profile__name { margin-top: 16px !important; font-family: var(--dt-title); font-weight: 500; font-size: 1.3rem; line-height: 1.2; color: #fff; }
.dt-profile__card p { margin-top: 10px; font-size: .9rem; line-height: 1.6; color: var(--dt-smoke); }
.dt-profile__card .dt-link { margin-top: 14px; color: #fff; }
.dt-explore__live { align-self: flex-start; color: #fff; }

/* ==========================================================================
   AFTER THE STAGE
   ========================================================================== */
.dt-features, .dt-embed, .dt-outcome, .dt-services { background: var(--dt-white); color: var(--dt-text); }
.dt-features .dt-h2, .dt-embed .dt-h2, .dt-outcome .dt-h2, .dt-services .dt-h2 { color: var(--dt-ink); }

/* ---------------------------------------------------------------- D. features */
.dt-features { padding: 120px 0 110px; }
.dt-features__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px 72px;
    align-items: start;
}
.dt-features__intro { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 72px; align-items: end; }
.dt-features__intro p { font-size: 1.05rem; line-height: 1.7; max-width: 44ch; }
.dt-features__shot { position: sticky; top: calc(var(--dt-header) + 40px); }

.dt-browser {
    border-radius: var(--dt-radius);
    background: #f1f1f4;
    border: 1px solid var(--dt-line);
    overflow: hidden;
}
.dt-browser__bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--dt-line); }
.dt-browser__bar span { width: 10px; height: 10px; border-radius: 50%; background: #d6d6dc; }
.dt-browser__bar p { margin-left: 12px !important; font-size: .78rem; color: var(--dt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-browser__view { position: relative; aspect-ratio: 16 / 10; background: #fff; }
.dt-shot { position: absolute; inset: 0; opacity: 0; filter: blur(6px); transition: opacity 420ms ease, filter 420ms ease; }
.dt-shot.is-active { opacity: 1; filter: none; }
.dt-shot img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }

.dt-features__list { border-top: 1px solid var(--dt-line); }
.dt-feature {
    position: relative;
    padding: 22px 0 22px 26px;
    border-bottom: 1px solid var(--dt-line);
    transition: background-color 200ms ease;
}
.dt-feature::before {
    content: ''; position: absolute; left: 0; top: 31px;
    width: 8px; height: 8px;
    background: var(--dt-line);
    transition: background-color 200ms ease, transform 200ms var(--dt-ease-out);
}
.dt-feature dt { font-family: var(--dt-title); font-weight: 500; font-size: 1.35rem; line-height: 1.2; color: var(--dt-text); transition: color 200ms ease; }
.dt-feature dd { margin-top: 6px; font-size: .95rem; line-height: 1.6; color: var(--dt-muted); }
.dt-feature.is-active dt { color: var(--dt-ink); }
.dt-feature.is-active::before { background: var(--dt-red); transform: scale(1.15); }

/* ---------------------------------------------------------------- E. devices */
.dt-devices { background: var(--dt-black); color: var(--dt-smoke); padding: 120px 0; overflow: hidden; }
.dt-devices__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px 80px; align-items: center; }
.dt-devices .dt-h2 { color: #fff; }
.dt-devices__copy p { margin-top: 18px; line-height: 1.75; max-width: 46ch; }
.dt-devices__phones { display: flex; justify-content: center; gap: clamp(16px, 3vw, 40px); }
.dt-phone { width: min(260px, 44vw); }
.dt-phone:nth-child(2) { margin-top: 72px; }
.dt-phone picture {
    display: block;
    padding: 9px;
    border-radius: 38px;
    background: #24262a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 60px -40px rgba(0, 0, 0, .8);
}
.dt-phone img { border-radius: 30px; }
.dt-phone figcaption { margin-top: 14px !important; text-align: center; font-size: .85rem; color: var(--dt-smoke-soft); }

.dt-controls { width: 100%; margin-top: 32px; border-collapse: collapse; font-size: .95rem; }
.dt-controls th, .dt-controls td { padding: 13px 12px 13px 0; text-align: left; border-bottom: 1px solid var(--dt-line-night); }
.dt-controls thead th { font-size: .78rem; font-weight: 600; color: var(--dt-smoke-soft); }
.dt-controls tbody th { font-weight: 600; color: #fff; }
.dt-controls td { color: var(--dt-smoke); }

/* ---------------------------------------------------------------- F. embed */
.dt-embed { padding: 120px 0 100px; }
.dt-embed__head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 24px 72px; align-items: end; margin-bottom: 44px; }
.dt-embed__head p { line-height: 1.75; max-width: 54ch; }
.dt-embed__head code { color: var(--dt-ink); background: #f1f1f4; padding: 2px 6px; }
.dt-embed__frame .dt-browser__view { aspect-ratio: 16 / 9; }
.dt-embed__poster { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.dt-embed__play {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    text-decoration: none;
    background: rgba(13, 17, 20, .28);
    transition: background-color 250ms ease;
}
.dt-embed__note { font-size: .8rem; font-weight: 600; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
@media (hover: hover) and (pointer: fine) {
    .dt-embed__play:hover { background: rgba(13, 17, 20, .4); }
    .dt-embed__play:hover .dt-btn > span { transform: translateY(-160%); }
}
.dt-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 400ms ease; }
.dt-embed__frame.is-loaded iframe { opacity: 1; }
.dt-embed__frame.is-live .dt-embed__play { display: none; }

/* ---------------------------------------------------------------- G. outcome */
.dt-outcome { padding: 20px 0 120px; }
.dt-outcome .dt-wrap { border-top: 1px solid var(--dt-line); padding-top: 100px; }
.dt-outcome__lede { margin-top: 18px; font-size: 1.1rem; line-height: 1.65; max-width: 52ch; }
.dt-outcome__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--dt-line); }
.dt-outcome__grid > div { padding: 34px 40px 36px 0; border-bottom: 1px solid var(--dt-line); }
.dt-outcome__grid > div:nth-child(odd) { border-right: 1px solid var(--dt-line); }
.dt-outcome__grid > div:nth-child(even) { padding-left: 40px; }
.dt-outcome__grid dt { font-family: var(--dt-title); font-weight: 500; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.15; color: var(--dt-ink); }
.dt-outcome__grid dd { margin-top: 12px; line-height: 1.7; max-width: 46ch; }

/* ---------------------------------------------------------------- H. tech */
.dt-tech { background: var(--dt-ink); color: var(--dt-smoke); padding: 120px 0; }
.dt-tech .dt-h2 { color: #fff; }
.dt-tech .dt-h3 { color: #fff; margin-top: 44px; }
.dt-tech__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 80px; margin-top: 12px; }
.dt-tech p { line-height: 1.75; max-width: 54ch; }
.dt-tech code { color: #fff; }
.dt-stack { width: 100%; border-collapse: collapse; font-size: .93rem; }
.dt-stack th, .dt-stack td { padding: 13px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--dt-line-night); }
.dt-stack th { width: 34%; font-weight: 600; color: #fff; padding-right: 16px; }
.dt-stack td { color: var(--dt-smoke); line-height: 1.55; }
.dt-code {
    margin: 22px 0 0; padding: 20px 22px;
    background: var(--dt-black);
    border: 1px solid var(--dt-line-night);
    border-radius: var(--dt-radius);
    overflow-x: auto;
    font-size: .85rem; line-height: 1.6; color: var(--dt-smoke);
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.dt-code code { color: inherit; font-size: inherit; }
.dt-arch { margin-top: 22px; }
.dt-arch svg { width: 100%; max-width: 520px; height: auto; stroke-linecap: butt; }
.dt-arch__lines path { stroke: rgba(255, 255, 255, .2); stroke-width: 1; }
.dt-arch__node rect { fill: var(--dt-black); stroke: rgba(255, 255, 255, .28); stroke-width: 1; }
.dt-arch__core rect { fill: var(--dt-black); stroke: var(--dt-red); stroke-width: 1.5; }
.dt-arch text { fill: var(--dt-smoke); stroke: none; font-family: var(--dt-body); font-size: 13px; font-weight: 600; text-anchor: middle; }
.dt-arch__core text { fill: #fff; font-size: 14px; }
.dt-arch__notes { margin-top: 18px; }
.dt-arch__notes li { padding: 12px 0; border-bottom: 1px solid var(--dt-line-night); line-height: 1.6; font-size: .93rem; }
.dt-arch__notes b { color: #fff; font-weight: 600; }

/* ---------------------------------------------------------------- I. services + CTA */
.dt-services { padding: 110px 0 90px; }
.dt-services__list { margin-top: 36px; border-top: 1px solid var(--dt-line); }
.dt-services__list a {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) 24px; gap: 8px 32px; align-items: center;
    padding: 24px 0; border-bottom: 1px solid var(--dt-line);
    color: inherit; text-decoration: none;
}
.dt-services__name { font-family: var(--dt-title); font-weight: 500; font-size: 1.35rem; color: var(--dt-ink); transition: color 200ms ease; }
.dt-services__desc { font-size: .95rem; line-height: 1.55; }
.dt-services__list svg { width: 18px; height: 18px; color: var(--dt-red); transition: transform 200ms var(--dt-ease-out); }
@media (hover: hover) and (pointer: fine) {
    .dt-services__list a:hover .dt-services__name { color: var(--dt-red); }
    .dt-services__list a:hover svg { transform: translateX(5px); }
}

.dt-cta { background: var(--dt-black); color: var(--dt-smoke); padding: 130px 0; }
.dt-cta__inner { max-width: 1000px; }
.dt-cta__title { font-family: var(--dt-title); font-weight: 500; font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.06; color: #fff; text-wrap: balance; }
.dt-cta p { margin-top: 22px; max-width: 54ch; font-size: 1.1rem; line-height: 1.65; }
.dt-cta__actions { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.dt-cta__actions .dt-link { color: #fff; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991px) {
    .dt-features__grid, .dt-features__intro, .dt-devices__grid, .dt-embed__head, .dt-tech__grid { grid-template-columns: minmax(0, 1fr); }
    .dt-features__shot { position: sticky; top: calc(var(--dt-header) + 12px); z-index: 1; }
    .dt-features__list { background: #fff; }
    .dt-devices__phones { order: 2; }
}

@media (max-width: 767px) {
    .dt-page { --dt-header: 76px; }
    .dt-stage__sticky::after { background: linear-gradient(0deg, rgba(13, 17, 20, .97) 0%, rgba(13, 17, 20, .88) 38%, rgba(13, 17, 20, 0) 60%); }
    .dt-hero .dt-facts { display: none; }
    .dt-stage__fallback { left: var(--dt-gutter); right: var(--dt-gutter); top: calc(var(--dt-header) + 16px); width: auto; transform: none; }
    .dt-page[data-step="explore"] .dt-stage__sticky::after { opacity: 0; }

    .dt-hero { padding-bottom: 32px; }
    .dt-page .dt-hero__title { font-size: clamp(2.3rem, 10.6vw, 3.1rem); }
    .dt-hero__lede { margin-top: 16px; }
    .dt-hero__actions { margin-top: 24px; }
    .dt-hero .dt-wrap { gap: 28px; }
    .dt-facts > div { padding-top: 12px; }

    .dt-chapter { min-height: 110vh; min-height: 110svh; }
    .dt-chapter .dt-wrap { top: 50vh; top: 50svh; }
    .dt-chapter__card { padding: 22px 22px 24px; }

    .dt-explore { align-items: flex-end; padding-bottom: 12px; }
    .dt-panel { width: 100%; height: 56svh; min-height: 360px; }
    .dt-panel__head { padding: 18px 18px 12px; }
    .dt-panel__head .dt-h2 { font-size: 1.7rem; }
    .dt-panel__hint { font-size: .82rem; }
    .dt-list__item { padding: 10px 18px; }
    .dt-profile { padding: 16px 18px 18px; }
    .dt-page.has-selection .dt-list { display: none; }
    .dt-profile__back {
        display: inline-flex; align-items: center; gap: 8px;
        min-height: 40px; margin: -6px 0 10px;
        font-size: .88rem; font-weight: 600; color: #fff;
    }
    .dt-profile__back svg { width: 16px; height: 16px; color: var(--dt-red); }
    .dt-tool { min-width: 40px; height: 40px; }
    /* phones: tools sit on the lower edge of the map strip, clear of the framed tenant and its flag */
    .dt-tools { top: auto; bottom: calc(56svh + 24px); right: 12px; }
    .dt-explore__live { display: none; }

    .dt-flag__plate { width: 132px; height: 58px; }
    .dt-flag__plate img { max-width: 104px; max-height: 38px; }

    .dt-features, .dt-devices, .dt-embed, .dt-tech, .dt-cta { padding: 80px 0; }
    .dt-outcome { padding-bottom: 80px; }
    .dt-outcome .dt-wrap { padding-top: 72px; }
    .dt-outcome__grid { grid-template-columns: minmax(0, 1fr); }
    .dt-outcome__grid > div, .dt-outcome__grid > div:nth-child(even) { padding: 26px 0 28px; border-right: 0 !important; }
    .dt-phone:nth-child(2) { margin-top: 40px; }
    .dt-services__list a { grid-template-columns: minmax(0, 1fr) 24px; }
    .dt-services__desc { grid-column: 1; grid-row: 2; }
    .dt-services__list svg { grid-column: 2; grid-row: 1 / span 2; }
}

@media (prefers-reduced-motion: reduce) {
    .dt-page *, .dt-page *::before, .dt-page *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
    .dt-shot { transition: opacity 200ms ease !important; filter: none; }
}