/* ==========================================================================
   Door Tablet + Qbic Technology - collaboration page
   --------------------------------------------------------------------------
   All selectors are namespaced with the `dtx-` prefix so that nothing here
   can collide with, or leak into, dt.css (which is loaded on every page).
   dt.css primitives that ARE reused, unchanged: .container, .btn,
   .btn-primary, .btn-secondary. Anything else is local to this file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

.dtx-page {
    /* Brand colours, mirrored from dt.css so this page stays on-brand
       without depending on variables it does not own. */
    --dtx-purple: #650968;
    --dtx-purple-light: #9e0fa3;
    --dtx-green: #5fa88d;
    --dtx-green-deep: #457f6b;
    --dtx-mint: #b7d8cc;
    --dtx-mint-soft: #e8f2ee;
    --dtx-mint-wash: #f4f9f7;

    --dtx-ink: #0e0e0e;
    --dtx-body: #2e2e2e;
    --dtx-muted: #5f5f5f;
    --dtx-faint: #8a8a8a;
    --dtx-line: #e3e6e5;
    --dtx-grey: #f3f3f3;

    /* Card accents: one hue fading to nothing. Never two brand colours in the
       same gradient - that combination reads as muddy at small sizes. */
    --dtx-accent-green: linear-gradient(90deg, #5fa88d 0%, #5fa88d 55%, rgba(95, 168, 141, 0) 100%);
    --dtx-accent-purple: linear-gradient(90deg, #650968 0%, #650968 55%, rgba(101, 9, 104, 0) 100%);

    /* Centre-out variant: strongest in the middle of the line, fading to
       nothing at both ends. `farthest-side` matters here - the default
       `farthest-corner` sizes the ellipse past the edge of the line, so it
       would still be half-lit where it should have faded out. */
    --dtx-accent-green-center: radial-gradient(ellipse farthest-side at 50% 50%, #5fa88d 0%, #5fa88d 28%, rgba(95, 168, 141, 0) 100%);
    --dtx-accent-purple-center: radial-gradient(ellipse farthest-side at 50% 50%, #650968 0%, #650968 28%, rgba(101, 9, 104, 0) 100%);

    --dtx-ring: 0 0 0 1px rgba(14, 14, 14, .07);
    --dtx-lift: 0 18px 45px -22px rgba(14, 30, 25, .38);
    --dtx-lift-lg: 0 30px 70px -30px rgba(14, 30, 25, .45);
    --dtx-radius: 16px;
    --dtx-radius-lg: 24px;

    color: var(--dtx-body);
}

/* --------------------------------------------------------------------------
   2. Shared building blocks
   -------------------------------------------------------------------------- */

.dtx-section {
    padding: 90px 0;
    position: relative;
}

.dtx-section--tight { padding: 60px 0; }

.dtx-section--grey { background: var(--dtx-grey); }

.dtx-section--mint {
    background: linear-gradient(180deg, var(--dtx-mint-wash) 0%, #ffffff 100%);
}

/* A soft green pool washed across the middle of the section. Deliberately
   faint - it is there to lift the white cards off the page, not to be a
   graphic in its own right. Must follow `--mint` to layer over it. */
.dtx-section--glow {
    background:
        radial-gradient(62% 48% at 50% 60%, rgba(95, 168, 141, .17) 0%, rgba(95, 168, 141, 0) 72%),
        linear-gradient(180deg, var(--dtx-mint-wash) 0%, #ffffff 100%);
}

.dtx-section--edge { border-top: 1px solid var(--dtx-line); }

/* Eyebrow label above a section heading */
.dtx-eyebrow {
    display: inline-block;
    font-family: Mulish, sans-serif;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dtx-green-deep);
    margin: 0 0 14px 0;
    line-height: 1.4;
}

.dtx-eyebrow--onDark { color: var(--dtx-mint); }

/* Headings. Raleway 300 for display, matching dt.css h1/h2 treatment. */
.dtx-h1,
.dtx-h2,
.dtx-h3 {
    font-family: Raleway, sans-serif;
    font-weight: 300;
    color: var(--dtx-ink);
    letter-spacing: .1px;
    margin: 0 0 18px 0;
}

.dtx-h1 { font-size: 3.1rem; line-height: 1.12; }
.dtx-h2 { font-size: 2.45rem; line-height: 1.2; }
.dtx-h3 { font-size: 1.75rem; line-height: 1.28; }

.dtx-h4 {
    font-family: Mulish, sans-serif;
    font-weight: 700;
    font-size: 1.12rem;
    line-height: 1.4;
    color: var(--dtx-ink);
    margin: 0 0 10px 0;
    letter-spacing: .1px;
}

.dtx-lede {
    font-family: Mulish, sans-serif;
    font-size: 1.24rem;
    line-height: 1.72;
    color: var(--dtx-muted);
    margin: 0 0 20px 0;
}

.dtx-p {
    font-family: Mulish, sans-serif;
    font-size: 1.02rem;
    line-height: 1.78;
    color: var(--dtx-body);
    margin: 0 0 18px 0;
}

.dtx-p:last-child,
.dtx-lede:last-child { margin-bottom: 0; }

.dtx-center { text-align: center; }

.dtx-measure {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* Short accent rule used under centred section headings.
   Single-hue fade, matching the card accent language below. */
.dtx-rule {
    width: 68px;
    height: 3px;
    border-radius: 3px;
    background: var(--dtx-accent-green);
    margin: 0 0 26px 0;
}

.dtx-center .dtx-rule { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   2b. One card accent, used everywhere
   --------------------------------------------------------------------------
   Every card on this page carries the same accent: a 3px line across its top
   fading from a single brand hue out to transparent. A section picks one hue
   and every card in it uses that hue - accents never alternate within a
   section. Add `dtx-accentTop--purple` to a card to switch a section over.
   -------------------------------------------------------------------------- */

.dtx-accentTop {
    position: relative;
}

.dtx-accentTop:before {
    content: "";
    position: absolute;
    top: 0;
    /* Pulled up over the card's 1px border so the line sits flush with the
       top edge rather than starting just inside it. */
    margin-top: -1px;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--dtx-accent-green);
    pointer-events: none;
}

.dtx-accentTop--purple:before { background: var(--dtx-accent-purple); }

/* Line radiates out from the centre instead of running left to right. */
.dtx-accentTop--center:before { background: var(--dtx-accent-green-center); }

.dtx-accentTop--center.dtx-accentTop--purple:before {
    background: var(--dtx-accent-purple-center);
}

/* --------------------------------------------------------------------------
   3. Buttons and links (built on dt.css .btn-primary / .btn-secondary)
   -------------------------------------------------------------------------- */

.dtx-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 22px;
    margin-top: 30px;
}

.dtx-center .dtx-actions { justify-content: center; }

/* Neutralise dt.css's `margin: 20px auto` so buttons sit in our flex row. */
.dtx-page .dtx-actions .btn-primary,
.dtx-page .dtx-actions .btn-secondary {
    margin: 0;
    padding: 11px 38px;
    font-size: 1.02rem;
    line-height: 1.5;
    text-decoration: none;
    /* dt.css sets no global box-sizing, so this is required for the
       full-width button treatment at small widths not to overflow. */
    box-sizing: border-box;
}

.dtx-page .dtx-actions .btn-primary a,
.dtx-page .dtx-actions .btn-secondary a { text-decoration: none; }

/* Quiet tertiary link with a chevron */
.dtx-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: Mulish, sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: var(--dtx-green-deep);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .18s ease, gap .18s ease, border-color .18s ease;
}

.dtx-link:after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .18s ease;
}

.dtx-link:hover {
    color: var(--dtx-purple);
    gap: 13px;
    border-bottom-color: currentColor;
}

.dtx-link--onDark { color: var(--dtx-mint); }
.dtx-link--onDark:hover { color: #ffffff; }

/* --------------------------------------------------------------------------
   4. Hero
   -------------------------------------------------------------------------- */

.dtx-hero {
    position: relative;
    overflow: hidden;
    padding: 74px 0 86px 0;
    background:
        radial-gradient(1100px 620px at 82% 12%, var(--dtx-mint-soft) 0%, rgba(232, 242, 238, 0) 62%),
        linear-gradient(180deg, #ffffff 0%, var(--dtx-mint-wash) 100%);
}

.dtx-hero:before {
    /* Soft brand arc bleeding off the right edge */
    content: "";
    position: absolute;
    top: -220px;
    right: -180px;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(101, 9, 104, .07), rgba(101, 9, 104, 0) 68%);
    pointer-events: none;
}

.dtx-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.dtx-hero__copy { min-width: 0; }

.dtx-hero .dtx-h1 { margin-bottom: 20px; }

.dtx-hero__sub {
    font-family: Mulish, sans-serif;
    font-size: 1.32rem;
    line-height: 1.6;
    color: var(--dtx-muted);
    margin: 0;
}

/* "In collaboration with" + Qbic logo lockup */
.dtx-collab {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 46px;
    padding-top: 26px;
    border-top: 1px solid var(--dtx-line);
    max-width: 420px;
}

.dtx-collab__label {
    font-family: Mulish, sans-serif;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dtx-faint);
    line-height: 1.4;
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

.dtx-collab__logo {
    height: 40px;
    width: auto;
    display: block;
}

/* Device compilation ------------------------------------------------------ */

.dtx-stage {
    position: relative;
    min-width: 0;
    aspect-ratio: 1 / .84;
}

.dtx-stage__glow {
    position: absolute;
    inset: 6% 4% 10% 6%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(183, 216, 204, .55) 0%, rgba(183, 216, 204, 0) 68%);
    filter: blur(6px);
}

.dtx-stage__device {
    position: absolute;
    display: block;
    height: auto;
}

/* Door Tablet NXT - the anchor device */
.dtx-stage__device--nxt {
    width: 84%;
    top: 2%;
    right: 0;
    filter: drop-shadow(0 26px 38px rgba(20, 40, 34, .22));
    animation: dtx-float 9s ease-in-out infinite;
}

/* Door Tablet SQR - overlapping foreground.
   Kept low and to the left so it frames the NXT rather than covering its
   screen; both source images carry generous transparent padding. */
.dtx-stage__device--sqr {
    width: 42%;
    left: -4%;
    bottom: -2%;
    filter: drop-shadow(0 20px 30px rgba(20, 40, 34, .28));
    animation: dtx-float 9s ease-in-out infinite;
    animation-delay: -4.5s;
}

@keyframes dtx-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-11px); }
}

/* --------------------------------------------------------------------------
   5. Jump navigation (device shortcuts)
   -------------------------------------------------------------------------- */

.dtx-jump {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0 0 60px 0;
    padding: 0;
    list-style: none;
}

.dtx-jump__item { margin: 0; }

.dtx-jump__link {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--dtx-line);
    font-family: Mulish, sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: var(--dtx-muted);
    text-decoration: none;
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.dtx-jump__link:hover {
    color: #ffffff;
    background: var(--dtx-green);
    border-color: var(--dtx-green);
    transform: translateY(-2px);
}

/* Zero-size marker used where a category starts part-way into a panel. */
.dtx-anchor {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* Keep the site's fixed header from covering a heading that was jumped to. */
.dtx-anchor,
.dtx-page [id^="dtx-"] { scroll-margin-top: 110px; }

/* --------------------------------------------------------------------------
   6. Application cards (Meeting Rooms / Hot Desks / ePaper / Wayfinding)
   -------------------------------------------------------------------------- */

.dtx-apps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
}

/* The whole card is the link, so the image, heading, copy and the button
   inside it are all one target. */
.dtx-app {
    background: #ffffff;
    border-radius: var(--dtx-radius);
    overflow: hidden;
    box-shadow: var(--dtx-ring), var(--dtx-lift);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    transition: transform .25s ease, box-shadow .25s ease;
}

.dtx-app:hover {
    transform: translateY(-4px);
    box-shadow: var(--dtx-ring), var(--dtx-lift-lg);
}

.dtx-app:focus-visible {
    outline: 3px solid var(--dtx-green);
    outline-offset: 3px;
}

.dtx-app__media {
    display: block;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--dtx-grey);
}

.dtx-app__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.dtx-app:hover .dtx-app__media img { transform: scale(1.035); }

.dtx-app__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 28px 30px 30px 30px;
}

.dtx-app__title {
    display: block;
    font-family: Mulish, sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.3;
    color: var(--dtx-ink);
    margin: 0 0 10px 0;
}

.dtx-app__text {
    display: block;
    font-family: Mulish, sans-serif;
    font-size: 1rem;
    line-height: 1.72;
    color: var(--dtx-body);
    margin: 0 0 22px 0;
}

/* Button. `margin-top:auto` pins it to the bottom so buttons line up across
   cards whose copy runs to different lengths. */
.dtx-app__cta {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    border-radius: 999px;
    border: 1px solid var(--dtx-green);
    background: #ffffff;
    color: var(--dtx-green-deep);
    font-family: Mulish, sans-serif;
    font-weight: 700;
    font-size: .95rem;
    line-height: 1.4;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.dtx-app:hover .dtx-app__cta,
.dtx-app:focus-visible .dtx-app__cta {
    background: var(--dtx-green);
    border-color: var(--dtx-green);
    color: #ffffff;
}

.dtx-app__arrow {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Green at rest, white once the card lights up. Set explicitly rather than
   inherited so the arrow keeps its own colour independent of the label. */
.dtx-app__arrow svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: var(--dtx-green);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .25s ease;
}

.dtx-app:hover .dtx-app__arrow svg,
.dtx-app:focus-visible .dtx-app__arrow svg { stroke: #ffffff; }

/* The arrow keeps nudging for as long as the card is hovered. */
.dtx-app:hover .dtx-app__arrow,
.dtx-app:focus-visible .dtx-app__arrow {
    animation: dtx-arrow-nudge 1s ease-in-out infinite;
}

@keyframes dtx-arrow-nudge {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
}

/* --------------------------------------------------------------------------
   7. Ecosystem overview figure
   -------------------------------------------------------------------------- */

.dtx-figure { margin: 0; }

.dtx-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--dtx-radius);
}

.dtx-figure--framed img {
    box-shadow: var(--dtx-ring), var(--dtx-lift);
    background: #ffffff;
}

.dtx-figure__caption {
    font-family: Mulish, sans-serif;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--dtx-faint);
    text-align: center;
    margin-top: 20px;
}

/* --------------------------------------------------------------------------
   7b. Ecosystem overview panel - "One workspace. Multiple solutions."
   --------------------------------------------------------------------------
   A rebuild in markup of what used to be images/ecosystem-overview.png, so the
   text is selectable, searchable and translatable and the panel reflows rather
   than shrinking to nothing on a phone.

   Two custom properties drive the geometry. `--dtx-eco-cols` and
   `--dtx-eco-gap` are read by BOTH the column grid and the connector rail, so
   the drop lines cannot drift away from the column centres - changing the
   column count in a media query moves the rail with it, for free.
   -------------------------------------------------------------------------- */

.dtx-eco {
    --dtx-eco-cols: 5;
    --dtx-eco-gap: 18px;

    background: #ffffff;
    border-radius: var(--dtx-radius-lg);
    box-shadow: var(--dtx-ring), var(--dtx-lift);
    padding: 40px 40px 34px 40px;
}

/* ---------- Masthead ---------- */

/* The building is the middle, fixed-width track. The two outer tracks are
   equal, so the SVG sits dead-centre in the panel with the lockup and the
   headline flanking it. */
.dtx-eco__masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 26px;
}

.dtx-eco__lockup {
    display: flex;
    align-items: center;
    gap: 20px;
}

.dtx-eco__dt {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dtx-eco__dt-mark {
   
    width: auto;
    flex: none;
    display: block;
}

.dtx-eco__lockup-divider {
    width: 1px;
    height: 44px;
    background: var(--dtx-line);
    flex: none;
}

.dtx-eco__qbic {
    height: 46px;
    width: auto;
    display: block;
}

/* The building is fixed-width rather than fluid: it is the anchor the rail
   drops from, and it should stay the same size as the panel gets wider. */
.dtx-eco__building { width: 186px; z-index: 1;}

.dtx-eco__building svg {
    display: block;
    width: 100%;
    height: auto;
}

.dtx-eco__title {
    font-family: Raleway, sans-serif;
    font-weight: 600;
    font-size: 1.72rem;
    line-height: 1.18;
    color: var(--dtx-ink);
    text-wrap: balance;
    margin: 0 0 10px 0;
}

.dtx-eco__sub {
    font-family: Mulish, sans-serif;
    font-size: .98rem;
    line-height: 1.62;
    color: var(--dtx-muted);
    max-width: 40ch;
    margin: 0;
}

/* ---------- Connector rail ---------- */

.dtx-eco__rail {
    position: relative;
    height: 40px;
    margin-top: 10px;
}

/* Stub dropping out of the building, centred on the panel */
.dtx-eco__stem {
    position: absolute;
    top: -15px;
    left: 50%;
    width: 2px;
    height: 29px;
    margin-left: -1px;
    background: var(--dtx-green);
    border-radius: 2px;
}

.dtx-eco__drops {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(var(--dtx-eco-cols), minmax(0, 1fr));
    gap: var(--dtx-eco-gap);
}

.dtx-eco__drops i { position: relative; }

/* The vertical drop into the column below */
.dtx-eco__drops i:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: var(--dtx-green);
    border-radius: 2px;
}

/* The horizontal run to the next column. Measured from this cell's centre to
   the next cell's centre, which is exactly one cell width plus one gap - so it
   stays true whatever `--dtx-eco-cols` is set to. */
.dtx-eco__drops i:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(100% + var(--dtx-eco-gap));
    height: 2px;
    background: var(--dtx-green);
}

.dtx-eco__drops i:last-child:after { content: none; }

/* ---------- The five solution columns ---------- */

.dtx-eco__grid {
    display: grid;
    grid-template-columns: repeat(var(--dtx-eco-cols), minmax(0, 1fr));
    gap: var(--dtx-eco-gap);
}

.dtx-eco__col {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid var(--dtx-mint);
    border-radius: 14px;
    padding: 20px 16px 22px 16px;
}

/* Fixed height, sized for the tallest heading ("Wayfinding & EPS Controller",
   three lines in a narrow column). Without it the one-line headings would sit
   in shorter boxes and every device label below would land at a different
   height across the row. */
.dtx-eco__colhead {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    margin-bottom: 16px;
}

.dtx-eco__colicon {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1.5px solid var(--dtx-mint);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dtx-eco__colicon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--dtx-green-deep);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dtx-eco__coltitle {
    font-family: Mulish, sans-serif;
    font-weight: 600;
    font-size: .84rem;
    line-height: 1.34;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--dtx-green-deep);
    margin: 0;
}

.dtx-eco__item {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.dtx-eco__item + .dtx-eco__item {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px dashed var(--dtx-line);
}

.dtx-eco__device {
    font-family: Mulish, sans-serif;
    font-size: .92rem;
    font-weight: 600;
    color: var(--dtx-body);
    text-align: center;
    margin: 0 0 12px 0;
}

/* A fixed slot with `contain` sizing: the six device shots have six different
   aspect ratios, and this is what keeps them optically on the same baseline. */
.dtx-eco__shot {
    height: 132px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dtx-eco__shot--tall { height: 186px; }

.dtx-eco__shot img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

/* `margin-top: auto` pins the supporting sentences to the bottom of their
   columns, so they line up across the row however tall the imagery is. */
.dtx-eco__note {
    font-family: Mulish, sans-serif;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--dtx-muted);
    text-align: center;
    margin: auto 0 0 0;
    padding-top: 16px;
}

/* ---------- Capability strip ---------- */

.dtx-eco__features {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 24px 0;
    margin-top: 28px;
    padding-top: 26px;
    border-top: 1px solid var(--dtx-line);
}

.dtx-eco__feature {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 0 13px;
    border-left: 1px solid var(--dtx-line);
}

.dtx-eco__feature:first-child {
    border-left: 0;
    padding-left: 0;
}

.dtx-eco__ficon {
    flex: none;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dtx-eco__ficon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--dtx-green-deep);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dtx-eco__ftitle {
    font-family: Mulish, sans-serif;
    font-weight: 700;
    font-size: .72rem;
    line-height: 1.35;
    letter-spacing: .055em;
    text-transform: uppercase;
    color: var(--dtx-green-deep);
    margin: 1px 0 6px 0;
}

.dtx-eco__ftext {
    font-family: Mulish, sans-serif;
    font-size: .8rem;
    line-height: 1.52;
    color: var(--dtx-body);
    margin: 0;
}

/* --------------------------------------------------------------------------
   8. Contribution cards (how the collaboration shaped the technology)
   -------------------------------------------------------------------------- */

/* The three cards sit flush against one another as a single joined panel,
   so only the outer corners are rounded. Each card carries a static accent
   line across its top. */
.dtx-contrib {
    display: flex;
    margin-top: 54px;
    background: #ffffff;
    border: 1px solid var(--dtx-line);
    border-radius: var(--dtx-radius);
    overflow: hidden;
}

.dtx-contrib__card {
    flex: 1 1 0;
    min-width: 0;
    background: #ffffff;
    border-left: 1px solid var(--dtx-line);
    padding: 34px 30px 32px 30px;
    position: relative;
    transition: background .3s ease;
}

.dtx-contrib__card:first-child { border-left: 0; }

.dtx-contrib__card:hover { background: var(--dtx-mint-wash); }

.dtx-contrib__card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--dtx-accent-green);
}

.dtx-contrib__icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--dtx-mint-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}

.dtx-contrib__icon svg {
    width: 27px;
    height: 27px;
    stroke: var(--dtx-green-deep);
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dtx-contrib__text {
    font-family: Mulish, sans-serif;
    font-size: 1rem;
    line-height: 1.72;
    color: var(--dtx-body);
    margin: 0;
}

/* Closing pull-quote for the collaboration section */
.dtx-pullquote {
    margin: 54px auto 0 auto;
    max-width: 860px;
    text-align: center;
    font-family: Raleway, sans-serif;
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.55;
    color: var(--dtx-ink);
    padding: 36px 44px;
    border-radius: var(--dtx-radius);
    /* Deliberately not white: this is the section's closing statement, so it
       sits a shade deeper than the cards above it. */
    background: linear-gradient(135deg, #dff0e8 0%, #cbe4d9 100%);
    border: 1px solid rgba(95, 168, 141, .38);
    overflow: hidden;
    position: relative;
}

/* Centre-out accent: the quote is centred, so a line anchored to the left
   edge would sit off-balance against it. */
.dtx-pullquote:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--dtx-accent-green-center);
    margin-top: -1px;
}

/* --------------------------------------------------------------------------
   9. Device rows (NXT, SL, SQR, DBD, EPS, ABX2)
   -------------------------------------------------------------------------- */

.dtx-group { margin-bottom: 26px; }

.dtx-group__head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0 0 46px 0;
}

.dtx-group__head:after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--dtx-line);
}

.dtx-group__title {
    font-family: Mulish, sans-serif;
    font-weight: 700;
    font-size: .84rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dtx-green-deep);
    margin: 0;
    line-height: 1.4;
    white-space: nowrap;
}

.dtx-device {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 60px;
    align-items: center;
    padding: 52px 0;
    border-top: 1px solid var(--dtx-line);
}

.dtx-device:first-of-type { border-top: 0; padding-top: 0; }

/* Alternate the image to the opposite side on every other device */
.dtx-device--flip .dtx-device__media { order: 2; }

.dtx-device__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.dtx-device__media img {
    position: relative;
    display: block;
    width: 100%;
    max-width: 460px;
    height: auto;
    filter: drop-shadow(0 22px 34px rgba(20, 40, 34, .16));
}

/* Note: several product shots still ship on an opaque white background. Their
   drop-shadow traces that rectangle rather than the product silhouette until
   the backgrounds are removed from the source files. */

/* Mint spotlight behind devices whose source image has no backdrop */
.dtx-device__media--spot:before {
    content: "";
    position: absolute;
    width: 74%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--dtx-mint-soft) 0%, rgba(232, 242, 238, 0) 70%);
}

.dtx-device__body { min-width: 0; }

.dtx-device__name {
    font-family: Raleway, sans-serif;
    font-weight: 300;
    font-size: 2.1rem;
    line-height: 1.2;
    color: var(--dtx-ink);
    margin: 0 0 8px 0;
}

.dtx-device__tagline {
    font-family: Mulish, sans-serif;
    font-weight: 700;
    font-size: 1.08rem;
    line-height: 1.5;
    color: var(--dtx-green-deep);
    margin: 0 0 20px 0;
}

.dtx-device__text {
    font-family: Mulish, sans-serif;
    font-size: 1rem;
    line-height: 1.78;
    color: var(--dtx-body);
    margin: 0 0 16px 0;
}

.dtx-device__foot {
    margin-top: 26px;
    display: flex;
    justify-content: flex-start;
}

/* Highlights ------------------------------------------------------------- */

.dtx-highlights { margin-top: 26px; }

.dtx-highlights__title {
    font-family: Mulish, sans-serif;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dtx-faint);
    margin: 0 0 14px 0;
    line-height: 1.4;
}

.dtx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dtx-chips li {
    font-family: Mulish, sans-serif;
    font-size: .92rem;
    line-height: 1.4;
    color: var(--dtx-body);
    background: var(--dtx-mint-wash);
    border: 1px solid var(--dtx-mint);
    border-radius: 999px;
    padding: 7px 15px;
    margin: 0;
}

/* --------------------------------------------------------------------------
   10. SL Cyber - dark security panel
   -------------------------------------------------------------------------- */

.dtx-cyber {
    background:
        radial-gradient(760px 420px at 88% 8%, rgba(158, 15, 163, .3) 0%, rgba(158, 15, 163, 0) 60%),
        linear-gradient(150deg, #1d1030 0%, #150b23 55%, #100818 100%);
    border-radius: var(--dtx-radius-lg);
    padding: 62px 60px;
    color: #e9e5ef;
    position: relative;
    overflow: hidden;
}

.dtx-cyber:before {
    content: "";
    position: absolute;
    inset: 0;
    /* Faint grid, reinforcing the "hardened device" idea */
    background-image:
        linear-gradient(rgba(183, 216, 204, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(183, 216, 204, .05) 1px, transparent 1px);
    background-size: 46px 46px;
    pointer-events: none;
}

.dtx-cyber__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    position: relative;
    z-index: 1;
}

.dtx-cyber .dtx-device__name { color: #ffffff; margin-bottom: 10px; }

.dtx-cyber__tagline {
    font-family: Mulish, sans-serif;
    font-weight: 700;
    font-size: 1.12rem;
    line-height: 1.5;
    color: var(--dtx-mint);
    margin: 0 0 22px 0;
}

.dtx-cyber__text {
    font-family: Mulish, sans-serif;
    font-size: 1rem;
    line-height: 1.78;
    color: #c9c2d6;
    margin: 0 0 16px 0;
}

.dtx-cyber__media {
    display: flex;
    justify-content: center;
    margin-bottom: 34px;
}

/* The SL Cyber shot has a white background, so on the dark panel it is framed
   as an intentional lit plate rather than left as a bare white rectangle. */
.dtx-cyber__media img {
    display: block;
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 16px;
    padding: 20px;
    box-sizing: border-box;
}

.dtx-cyber__panelTitle {
    font-family: Mulish, sans-serif;
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dtx-mint);
    margin: 0 0 18px 0;
    line-height: 1.4;
}

.dtx-cyber__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1px;
    background: rgba(183, 216, 204, .12);
    border: 1px solid rgba(183, 216, 204, .14);
    border-radius: 12px;
    overflow: hidden;
}

.dtx-cyber__list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 18px;
    margin: 0;
    background: rgba(16, 8, 24, .62);
    font-family: Mulish, sans-serif;
    font-size: .96rem;
    line-height: 1.5;
    color: #ddd7e6;
}

.dtx-cyber__list li:before {
    content: "";
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-top: 4px;
    border-radius: 4px;
    background: var(--dtx-green);
    /* Tick mark, drawn with a mask so it needs no image asset */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 74% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 74% no-repeat;
}

.dtx-cyber__close {
    font-family: Mulish, sans-serif;
    font-size: 1rem;
    line-height: 1.78;
    color: #c9c2d6;
    margin: 28px 0 0 0;
}

.dtx-cyber__foot { margin-top: 26px; }

/* --------------------------------------------------------------------------
   11. EPS - use cases
   -------------------------------------------------------------------------- */

.dtx-eps {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
    gap: 60px;
    align-items: center;
}

.dtx-eps__media { display: flex; justify-content: center; }

.dtx-eps__media img {
    display: block;
    width: 100%;
    max-width: 440px;
    height: auto;
    filter: drop-shadow(0 22px 34px rgba(20, 40, 34, .16));
    box-sizing: border-box;
}

.dtx-useCases {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 44px;
}

.dtx-useCase {
    background: #ffffff;
    border: 1px solid var(--dtx-line);
    border-radius: 14px;
    padding: 25px 24px 22px 24px;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease;
}

.dtx-useCase:hover {
    transform: translateY(-3px);
    box-shadow: var(--dtx-lift);
}

.dtx-useCase__title {
    font-family: Mulish, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.4;
    color: var(--dtx-ink);
    margin: 0 0 7px 0;
}

.dtx-useCase__text {
    font-family: Mulish, sans-serif;
    font-size: .96rem;
    line-height: 1.66;
    color: var(--dtx-body);
    margin: 0;
}

/* Stacked image pair (ABX2). The two shots sit one above the other, each
   filling the column. No frame and no backdrop - just product and shadow. */
.dtx-pair {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.dtx-pair img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 28px rgba(20, 40, 34, .15));
}

/* --------------------------------------------------------------------------
   12. Capability list ("More Than Hardware")
   -------------------------------------------------------------------------- */

/* A soft green blob sits behind the grid so the white cards detach from the
   section and read as floating above it. */
.dtx-capabilities {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
    margin: 44px 0 0 0;
    padding: 0;
}

.dtx-capabilities li {
    display: block;
    margin: 0;
    padding: 18px 22px;
    background: #ffffff;
    border: 1px solid var(--dtx-line);
    border-radius: 12px;
    font-family: Mulish, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--dtx-body);
    box-shadow: 0 12px 26px -14px rgba(20, 40, 34, .4);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.dtx-capabilities li:hover {
    border-color: var(--dtx-mint);
    transform: translateY(-2px);
    box-shadow: var(--dtx-lift);
}

/* Tick sits above the label, left aligned */
.dtx-capabilities li:before {
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    margin: 0 0 12px 0;
    border-radius: 8px;
    background: var(--dtx-green);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
}

/* --------------------------------------------------------------------------
   13. Split section (scheduling platforms / workplace design)
   -------------------------------------------------------------------------- */

.dtx-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}

.dtx-split--flip .dtx-split__media { order: 2; }

.dtx-split__media { min-width: 0; }

.dtx-split__media img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 520px;
    margin: 0 auto;
}

.dtx-split__copy { min-width: 0; }

/* Feature blocks used under "Designed Around Your Workplace" */
.dtx-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
    margin-top: 52px;
}

.dtx-feature {
    background: #ffffff;
    border-radius: var(--dtx-radius);
    padding: 33px 32px 30px 32px;
    box-shadow: var(--dtx-ring), var(--dtx-lift);
    overflow: hidden;
    position: relative;
    transition: transform .22s ease, box-shadow .22s ease;
}

.dtx-feature:hover {
    transform: translateY(-3px);
    box-shadow: var(--dtx-ring), var(--dtx-lift-lg);
}

.dtx-feature__title {
    font-family: Mulish, sans-serif;
    font-weight: 700;
    font-size: 1.12rem;
    line-height: 1.4;
    color: var(--dtx-ink);
    margin: 0 0 10px 0;
}

.dtx-feature__text {
    font-family: Mulish, sans-serif;
    font-size: 1rem;
    line-height: 1.74;
    color: var(--dtx-body);
    margin: 0;
}

/* --------------------------------------------------------------------------
   14. Closing call to action
   -------------------------------------------------------------------------- */

.dtx-close {
    background:
        radial-gradient(800px 460px at 15% 20%, rgba(183, 216, 204, .3) 0%, rgba(183, 216, 204, 0) 62%),
        linear-gradient(140deg, var(--dtx-purple) 0%, #4a0a55 52%, #123b32 100%);
    color: #ffffff;
    padding: 84px 0;
    position: relative;
    overflow: hidden;
}

.dtx-close__inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
}

.dtx-close .dtx-actions { justify-content: center; }

.dtx-close .dtx-h2 { color: #ffffff; }

.dtx-close__text {
    font-family: Mulish, sans-serif;
    font-size: 1.1rem;
    line-height: 1.76;
    color: rgba(255, 255, 255, .85);
    margin: 0 0 18px 0;
}

.dtx-close__logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin-top: 46px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, .18);
}

.dtx-close__logos img {
    height: 34px;
    width: auto;
    display: block;
    /* The Qbic mark is dark-on-transparent; lift it onto the dark panel */
    background: #ffffff;
    border-radius: 8px;
    padding: 6px 12px;
}

/* On-dark button treatment, overriding dt.css's purple fill */
.dtx-page .dtx-close .dtx-actions .btn-primary {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--dtx-purple) !important;
}

.dtx-page .dtx-close .dtx-actions .btn-primary a { color: var(--dtx-purple) !important; }

.dtx-page .dtx-close .dtx-actions .btn-primary:hover {
    background: var(--dtx-mint);
    border-color: var(--dtx-mint);
}

.dtx-page .dtx-close .dtx-actions .btn-secondary {
    background: transparent;
    border-color: rgba(255, 255, 255, .6);
    color: #ffffff !important;
}

.dtx-page .dtx-close .dtx-actions .btn-secondary a { color: #ffffff !important; }

.dtx-page .dtx-close .dtx-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, .12);
    border-color: #ffffff;
}

/* --------------------------------------------------------------------------
   15. Scroll reveal
   -------------------------------------------------------------------------- */

.dtx-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s ease;
}

.dtx-reveal.dtx-is-visible {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .dtx-h1 { font-size: 2.6rem; }
    .dtx-h2 { font-size: 2.1rem; }
    .dtx-hero__grid { gap: 40px; }
    .dtx-device { gap: 42px; }
    .dtx-split { gap: 44px; }
    .dtx-cyber { padding: 50px 42px; }
    .dtx-cyber__grid { gap: 40px; }
    .dtx-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Three solution columns per row. The rail is a single-row device - once
       the columns wrap it would either run off the edge or connect only the
       first three, which reads as if the other two were not part of the
       platform - so it comes out here rather than being redrawn. */
    .dtx-eco { --dtx-eco-cols: 3; padding: 34px 30px 30px 30px; }
    .dtx-eco__rail { display: none; }
    .dtx-eco__grid { row-gap: 22px; }
    .dtx-eco__title { font-size: 1.6rem; }

    /* Stacked and centred: the lockup cannot shrink (fixed-height logos), so
       side by side with the building it would collide. */
    .dtx-eco__masthead {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        text-align: center;
        gap: 18px;
        margin-bottom: 30px;
    }

    .dtx-eco__lockup { order: 0; }
    .dtx-eco__building { order: 1; width: 156px; }
    .dtx-eco__intro { order: 2; }
    .dtx-eco__sub { max-width: 56ch; }

    .dtx-eco__features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dtx-eco__feature { border-left: 1px solid var(--dtx-line); padding-left: 16px; }
    .dtx-eco__feature:nth-child(3n+1) { border-left: 0; padding-left: 0; }
}

@media (max-width: 900px) {
    .dtx-section { padding: 64px 0; }
    .dtx-hero { padding: 48px 0 60px 0; }

    .dtx-hero__grid,
    .dtx-device,
    .dtx-eps,
    .dtx-split,
    .dtx-cyber__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    /* Keep the image above the copy on every stacked row */
    .dtx-device--flip .dtx-device__media,
    .dtx-split--flip .dtx-split__media { order: 0; }

    .dtx-hero__copy { order: 0; }
    .dtx-stage { order: 1; max-width: 480px; margin: 0 auto; width: 100%; }

    /* Stacked, so the cards become a vertical joined panel. */
    .dtx-contrib { flex-direction: column; }

    .dtx-contrib__card {
        flex: 0 0 auto;
        border-left: 0;
        border-top: 1px solid var(--dtx-line);
    }

    .dtx-contrib__card:first-child { border-top: 0; }
    .dtx-apps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
    .dtx-features { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .dtx-useCases { grid-template-columns: minmax(0, 1fr); }

    .dtx-device { padding: 40px 0; }
    .dtx-device__media img { max-width: 380px; }

    .dtx-eco { --dtx-eco-cols: 2; }
    .dtx-eco__building { width: 144px; }

    .dtx-eco__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dtx-eco__feature { border-left: 1px solid var(--dtx-line); padding-left: 16px; }
    .dtx-eco__feature:nth-child(3n+1) { border-left: 1px solid var(--dtx-line); padding-left: 16px; }
    .dtx-eco__feature:nth-child(2n+1) { border-left: 0; padding-left: 0; }
}

@media (max-width: 620px) {
    .dtx-h1 { font-size: 2.1rem; }
    .dtx-h2 { font-size: 1.75rem; }
    .dtx-h3 { font-size: 1.4rem; }
    .dtx-device__name { font-size: 1.65rem; }
    .dtx-hero__sub { font-size: 1.1rem; max-width: none; }
    .dtx-lede { font-size: 1.08rem; }
    .dtx-pullquote { font-size: 1.2rem; padding: 28px 24px; }

    .dtx-capabilities { grid-template-columns: minmax(0, 1fr); }
    .dtx-cyber { padding: 38px 24px; border-radius: var(--dtx-radius); }
    .dtx-app__body { padding: 24px 22px 26px 22px; }
    .dtx-feature { padding: 24px 24px 24px 28px; }

    .dtx-actions { gap: 12px; }
    .dtx-page .dtx-actions .btn-primary,
    .dtx-page .dtx-actions .btn-secondary {
        width: 100%;
        text-align: center;
        padding: 12px 20px;
    }

    .dtx-collab { flex-direction: column; align-items: flex-start; gap: 14px; }
    .dtx-collab__label { max-width: none; }
    .dtx-close__logos { flex-direction: column; gap: 18px; }

    /* One column per row. A rail with a single drop and no horizontal run is
       just a stray tick, so it comes out entirely. */
    .dtx-eco {
        --dtx-eco-cols: 1;
        padding: 26px 20px 24px 20px;
        border-radius: var(--dtx-radius);
    }

    .dtx-eco__rail { display: none; }
    .dtx-eco__grid { row-gap: 20px; }
    .dtx-eco__title { font-size: 1.4rem; }
    .dtx-eco__lockup { gap: 14px; }
    .dtx-eco__qbic { height: 38px; }
    .dtx-eco__dt-mark {width: auto; }
    .dtx-eco__shot { height: 150px; }
    .dtx-eco__shot--tall { height: 200px; }

    .dtx-eco__features { grid-template-columns: minmax(0, 1fr); gap: 22px; }

    .dtx-eco__feature,
    .dtx-eco__feature:nth-child(3n+1) {
        border-left: 0;
        padding-left: 0;
    }
}

/* --------------------------------------------------------------------------
   17. Motion and print preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .dtx-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .dtx-stage__device--nxt,
    .dtx-stage__device--sqr { animation: none; }

    /* No sweeping line and no resizing cards: show all three accents at rest. */
    .dtx-contrib__card { animation: none; flex-grow: 1; }

    .dtx-contrib__card:before {
        animation: none;
        transform: scaleX(1);
        transform-origin: left center;
    }

    .dtx-app:hover .dtx-app__arrow,
    .dtx-app:focus-visible .dtx-app__arrow { animation: none; }

    .dtx-page *,
    .dtx-page *:before,
    .dtx-page *:after {
        transition-duration: .01ms !important;
    }
}

@media print {
    .dtx-reveal { opacity: 1; transform: none; }
    .dtx-jump { display: none; }
    .dtx-cyber,
    .dtx-close { background: #ffffff !important; color: #000000 !important; }
    .dtx-cyber__text,
    .dtx-cyber__close,
    .dtx-close__text { color: #000000 !important; }
    .dtx-cyber .dtx-device__name,
    .dtx-close .dtx-h2 { color: #000000 !important; }
    .dtx-cyber__list li { background: #ffffff !important; color: #000000 !important; }
}

/* ==========================================================================
   ADDITIVE BLOCKS
   --------------------------------------------------------------------------
   Everything below this line was added after the first page shipped. These
   are general-purpose blocks for the shared design system - nothing above
   this line was changed, so any page already using this file is unaffected.
   ========================================================================== */

/* --------------------------------------------------------------------------
   18. Hero shot (a single framed image instead of a device stage)
   -------------------------------------------------------------------------- */

.dtx-heroShot {
    position: relative;
    min-width: 0;
}

/* Soft green pool behind the frame so the image detaches from the hero wash */
.dtx-heroShot:before {
    content: "";
    position: absolute;
    left: -6%;
    right: -6%;
    top: 6%;
    bottom: 6%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(95, 168, 141, .22) 0%, rgba(95, 168, 141, 0) 100%);
    pointer-events: none;
}

.dtx-heroShot img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--dtx-radius-lg);
    box-shadow: var(--dtx-ring), var(--dtx-lift-lg);
    box-sizing: border-box;
}

/* Status chips sitting under the hero copy */
.dtx-hero .dtx-chips { margin-top: 26px; }

/* A centred figure that is allowed to run wider than .dtx-measure */
.dtx-figure--wide img {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   19. Benefit cards (icon over title over copy)
   --------------------------------------------------------------------------
   Three across on desktop. Uses the same white card + top accent language as
   every other card on the site, with the icon treatment borrowed from the
   contribution cards.
   -------------------------------------------------------------------------- */

.dtx-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    margin-top: 48px;
}

.dtx-benefit {
    background: #ffffff;
    border: 1px solid var(--dtx-line);
    border-radius: var(--dtx-radius);
    padding: 32px 30px 30px 30px;
    overflow: hidden;
    box-shadow: 0 12px 26px -18px rgba(20, 40, 34, .4);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.dtx-benefit:hover {
    transform: translateY(-3px);
    border-color: var(--dtx-mint);
    box-shadow: var(--dtx-lift);
}

.dtx-benefit__icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--dtx-mint-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.dtx-benefit__icon svg {
    width: 26px;
    height: 26px;
    stroke: var(--dtx-green-deep);
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dtx-benefit__text {
    font-family: Mulish, sans-serif;
    font-size: 1rem;
    line-height: 1.74;
    color: var(--dtx-body);
    margin: 0;
}

/* --------------------------------------------------------------------------
   20. Process steps (numbered vertical timeline)
   --------------------------------------------------------------------------
   Vertical rather than five-across: the step copy varies in length, and five
   columns of it would be unreadable at any realistic width.
   -------------------------------------------------------------------------- */

.dtx-steps {
    list-style: none;
    margin: 48px auto 0 auto;
    padding: 0;
    max-width: 820px;
    position: relative;
}

.dtx-step {
    position: relative;
    margin: 0;
    padding: 0 0 34px 82px;
}

.dtx-step:last-child { padding-bottom: 0; }

/* The connecting rail. Drawn per-step so the last step has no tail. */
.dtx-step:before {
    content: "";
    position: absolute;
    left: 25px;
    top: 52px;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--dtx-mint) 0%, rgba(183, 216, 204, .35) 100%);
}

.dtx-step:last-child:before { display: none; }

.dtx-step__num {
    position: absolute;
    left: 0;
    top: 0;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--dtx-green);
    color: #ffffff;
    font-family: Mulish, sans-serif;
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 52px;
    text-align: center;
    box-shadow: 0 10px 22px -12px rgba(69, 127, 107, .9);
}

.dtx-step__title {
    font-family: Mulish, sans-serif;
    font-weight: 700;
    font-size: 1.16rem;
    line-height: 1.4;
    color: var(--dtx-ink);
    margin: 12px 0 10px 0;
    letter-spacing: .1px;
}

.dtx-step__text {
    font-family: Mulish, sans-serif;
    font-size: 1rem;
    line-height: 1.76;
    color: var(--dtx-body);
    margin: 0 0 12px 0;
}

.dtx-step__text:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   21. Comparison columns (this option vs that option)
   -------------------------------------------------------------------------- */

.dtx-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
    margin-top: 48px;
}

.dtx-compare__col {
    background: #ffffff;
    border: 1px solid var(--dtx-line);
    border-radius: var(--dtx-radius);
    padding: 36px 34px 36px 34px;
    overflow: hidden;
    box-shadow: 0 14px 30px -20px rgba(20, 40, 34, .42);
}

/* Column header: an icon anchors the choice, the rule under it separates the
   header from the list so the eye reads header -> items rather than one
   undifferentiated stack. */
.dtx-compare__head {
    display: flex;
    align-items: center;
    gap: 15px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--dtx-line);
}

.dtx-compare__headIcon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--dtx-mint-soft);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dtx-compare__headIcon svg {
    width: 23px;
    height: 23px;
    stroke: var(--dtx-green-deep);
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dtx-compare__col--alt .dtx-compare__headIcon { background: #f3e9f4; }
.dtx-compare__col--alt .dtx-compare__headIcon svg { stroke: var(--dtx-purple); }

.dtx-compare__title {
    font-family: Raleway, sans-serif;
    font-weight: 400;
    font-size: 1.3rem;
    line-height: 1.32;
    color: var(--dtx-ink);
    margin: 0;
    letter-spacing: .1px;
}

.dtx-compare__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dtx-compare__item {
    margin: 0;
    padding: 26px 0 0 38px;
    position: relative;
}

/* Marker. Both columns are valid choices, so neither gets a cross - the
   left column is ticked, the right is marked with a neutral brand dot. */
.dtx-compare__item:before {
    content: "";
    position: absolute;
    left: 0;
    top: 30px;
    width: 21px;
    height: 21px;
    border-radius: 6px;
    background: var(--dtx-green);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 82% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 82% no-repeat;
}

/* The right column is a valid choice, not a rejected one, so it gets its own
   subject-matter mark (a server rack) rather than a cross or a bare dot. */
.dtx-compare__col--alt .dtx-compare__item:before {
    background: var(--dtx-purple);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='4.4' width='17.2' height='6.2' rx='2'/%3E%3Crect x='3.4' y='13.4' width='17.2' height='6.2' rx='2'/%3E%3C/g%3E%3C/svg%3E") center / 92% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.4' y='4.4' width='17.2' height='6.2' rx='2'/%3E%3Crect x='3.4' y='13.4' width='17.2' height='6.2' rx='2'/%3E%3C/g%3E%3C/svg%3E") center / 92% no-repeat;
}

.dtx-compare__itemTitle {
    display: block;
    font-family: Mulish, sans-serif;
    font-weight: 700;
    font-size: 1.06rem;
    line-height: 1.45;
    color: var(--dtx-ink);
    margin: 0 0 6px 0;
}

/* Muted and a step smaller: the item title carries the scanning weight, the
   description is there once the reader has stopped on a row. */
.dtx-compare__itemText {
    display: block;
    font-family: Mulish, sans-serif;
    font-size: .95rem;
    line-height: 1.68;
    color: var(--dtx-muted);
    margin: 0;
}

/* --------------------------------------------------------------------------
   22. Responsive and motion for the additive blocks
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .dtx-benefits { gap: 20px; }
    .dtx-compare { gap: 22px; }
    .dtx-compare__col { padding: 28px 26px 26px 26px; }
}

@media (max-width: 900px) {
    .dtx-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dtx-compare { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .dtx-benefits { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .dtx-benefit { padding: 26px 24px 24px 24px; }

    .dtx-step { padding-left: 62px; padding-bottom: 28px; }
    .dtx-step:before { left: 20px; top: 44px; }

    .dtx-step__num {
        width: 42px;
        height: 42px;
        line-height: 42px;
        font-size: .95rem;
    }

    .dtx-step__title { margin-top: 8px; font-size: 1.08rem; }

    .dtx-heroShot:before { display: none; }
    .dtx-figure--wide img { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .dtx-benefit:hover { transform: none; }
}

@media print {
    .dtx-benefit,
    .dtx-compare__col { box-shadow: none !important; }
}

/* Utility: extra breathing room above a closing line */
.dtx-spaceTop { margin-top: 38px; }

/* --------------------------------------------------------------------------
   23. On-dark emphasis line
   --------------------------------------------------------------------------
   dt.css sets `color` via the universal selector (`*,body,form,html{...}`),
   which lands on nested elements directly and so beats inheritance from a
   coloured parent. Any element nested inside an on-dark block therefore needs
   its colour stated explicitly rather than inherited.
   -------------------------------------------------------------------------- */

.dtx-close__cue {
    font-family: Mulish, sans-serif;
    font-weight: 700;
    font-size: 1.24rem;
    line-height: 1.6;
    color: #ffffff;
    margin: 26px 0 0 0;
}

/* --------------------------------------------------------------------------
   24. Panel shot (a diagram that ships with its own white background)
   --------------------------------------------------------------------------
   Several source diagrams are flat artwork on opaque white. Dropped onto a
   tinted section they read as an accidental white rectangle, so they are
   given a deliberate padded panel instead.
   -------------------------------------------------------------------------- */

.dtx-panelShot {
    background: #ffffff;
    border-radius: var(--dtx-radius);
    padding: 30px 28px;
    box-shadow: var(--dtx-ring), var(--dtx-lift);
    box-sizing: border-box;
}

.dtx-panelShot img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 720px) {
    .dtx-panelShot { padding: 20px 18px; }
    .dtx-close__cue { font-size: 1.12rem; }
}

/* A hero sub-heading followed directly by body copy needs a gap; the sub
   itself has `margin: 0` because it is usually followed by the button row. */
.dtx-hero__sub + .dtx-p { margin-top: 16px; }


/* --------------------------------------------------------------------------
   25. Hero shot: 3D tilt and drift
   --------------------------------------------------------------------------
   The perspective lives on the wrapper so the image rotates in depth rather
   than being sheared flat. Kept shallow - enough to read as dimensional
   without making the screenshot inside it hard to look at.
   -------------------------------------------------------------------------- */

.dtx-heroShot { perspective: 1500px; }

.dtx-heroShot img {
    transform: rotateY(-8deg) rotateX(3.5deg);
    transform-origin: 60% 50%;
    animation: dtx-heroDrift 12s ease-in-out infinite;
    will-change: transform;
}

@keyframes dtx-heroDrift {
    0%, 100% { transform: rotateY(-8deg) rotateX(3.5deg) translateY(0); }
    50%      { transform: rotateY(-4.5deg) rotateX(1.5deg) translateY(-13px); }
}

/* --------------------------------------------------------------------------
   26. Spacing corrections
   -------------------------------------------------------------------------- */

/* The heading block above a card grid ends on `.dtx-rule` or a paragraph with
   its bottom margin zeroed, so the grid needs to supply its own gap. */
.dtx-apps { margin-top: 52px; }

/* Same problem for a full-width figure dropped between a heading block and the
   copy below it. `.dtx-figure` itself is `margin: 0`, so the modifier supplies
   the rhythm. */
.dtx-figure--wide {
    margin-top: 52px;
    margin-bottom: 42px;
}

@media (max-width: 720px) {
    .dtx-apps { margin-top: 34px; }

    .dtx-figure--wide {
        margin-top: 34px;
        margin-bottom: 30px;
    }

    /* A tilted image wastes horizontal room at phone widths. */
    .dtx-heroShot img {
        transform: none;
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* Keep the static tilt, drop the drift. */
    .dtx-heroShot img { animation: none; }
}


/* --------------------------------------------------------------------------
   27. Case study: attributed quote
   --------------------------------------------------------------------------
   `.dtx-pullquote` is the centred, tinted closing statement of a section. A
   case study instead carries several quotes from one person mid-narrative, so
   they need a quieter, left-anchored treatment that can repeat down the page
   without competing with the headings.
   -------------------------------------------------------------------------- */

.dtx-quote {
    margin: 0;
    padding: 4px 0 4px 34px;
    position: relative;
    max-width: 820px;
}

.dtx-quote:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--dtx-green) 0%, rgba(95, 168, 141, .28) 100%);
}

.dtx-quote__text {
    font-family: Raleway, sans-serif;
    font-weight: 300;
    font-size: 1.42rem;
    line-height: 1.55;
    color: var(--dtx-ink);
    margin: 0 0 16px 0;
}

/* dt.css italicises nothing by default, and `cite` is only a source label
   here, so it is reset to upright and given the eyebrow's letter treatment. */
.dtx-quote__cite {
    display: block;
    font-family: Mulish, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: .86rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.5;
    color: var(--dtx-faint);
    margin: 0;
}

/* Centred variant for a quote that closes a section on its own. The top
   margin is part of the block rather than left to a utility class: the accent
   rule is pinned to the element's top edge, so without it the rule lands on
   the last line of whatever sits above. */
.dtx-quote--center {
    max-width: 860px;
    margin: 52px auto 0 auto;
    text-align: center;
    padding: 34px 0 0 0;
}

.dtx-quote--center:before {
    left: 50%;
    top: 0;
    bottom: auto;
    width: 68px;
    height: 3px;
    margin-left: -34px;
    background: var(--dtx-accent-green-center);
}

/* --------------------------------------------------------------------------
   28. Case study: video block
   --------------------------------------------------------------------------
   Source clips are 640x360 and tens of megabytes each, so `preload="none"`
   plus a poster frame is doing real work here - nothing is fetched until the
   visitor presses play. The frame is capped rather than stretched because
   upscaling a 360p clip to full column width looks worse, not better.
   -------------------------------------------------------------------------- */

.dtx-videoBlock {
    max-width: 860px;
    margin: 0 auto;
}

.dtx-videoBlock__frame {
    position: relative;
    border-radius: var(--dtx-radius-lg);
    overflow: hidden;
    background: #0e0e0e;
    box-shadow: var(--dtx-ring), var(--dtx-lift-lg);
    line-height: 0;
}

.dtx-videoBlock__frame video {
    display: block;
    width: 100%;
    height: auto;
    /* The clips are all 16:9; declaring it stops the page reflowing once
       metadata arrives. */
    aspect-ratio: 16 / 9;
    background: #0e0e0e;
}

.dtx-videoBlock__caption {
    font-family: Mulish, sans-serif;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--dtx-faint);
    text-align: center;
    margin: 20px 0 0 0;
}

/* --------------------------------------------------------------------------
   29. Case study: screen gallery
   --------------------------------------------------------------------------
   A set of room-display screenshots shown together. They are artwork with
   their own edge-to-edge backgrounds, so they get a thin ring rather than a
   padded panel.
   -------------------------------------------------------------------------- */

.dtx-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dtx-gallery li {
    margin: 0;
    padding: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--dtx-ring), var(--dtx-lift);
    line-height: 0;
    transition: transform .22s ease, box-shadow .22s ease;
}

.dtx-gallery li:hover {
    transform: translateY(-4px);
    box-shadow: var(--dtx-ring), var(--dtx-lift-lg);
}

.dtx-gallery img {
    display: block;
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   30. Case study: pacing
   --------------------------------------------------------------------------
   A narrative page reads better with more air between beats than a product
   page does, and every section here is a single idea.
   -------------------------------------------------------------------------- */

.dtx-section--airy { padding: 118px 0; }

/* The organisation profile that opens the page. */
.dtx-profile {
    /* auto-fit rather than a fixed column count: the hero copy column is
       narrow, so the entries reflow to two-up and then one-up on their own
       without a breakpoint for each step. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 20px 28px;
    margin: 0;
    padding: 26px 0 0 0;
    border-top: 1px solid var(--dtx-line);
}

.dtx-profile div {
    margin: 0;
    min-width: 0;
}

.dtx-profile dt {
    font-family: Mulish, sans-serif;
    font-weight: 700;
    font-size: .76rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dtx-faint);
    line-height: 1.4;
    margin: 0 0 6px 0;
}

.dtx-profile dd {
    font-family: Mulish, sans-serif;
    font-size: 1.02rem;
    line-height: 1.5;
    color: var(--dtx-ink);
    margin: 0;
}

/* --------------------------------------------------------------------------
   31. Case study: responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
    .dtx-gallery { gap: 18px; }
}

@media (max-width: 900px) {
    .dtx-section--airy { padding: 86px 0; }
    .dtx-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .dtx-section--airy { padding: 62px 0; }

    .dtx-quote { padding-left: 22px; }
    .dtx-quote__text { font-size: 1.16rem; }

    .dtx-quote--center { padding-left: 0; }

    .dtx-gallery { grid-template-columns: minmax(0, 1fr); }

    .dtx-profile { gap: 18px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .dtx-gallery li:hover { transform: none; }
}

@media print {
    .dtx-videoBlock__frame,
    .dtx-gallery li { box-shadow: none; }
}


/* --------------------------------------------------------------------------
   32. Case study: stronger section banding
   --------------------------------------------------------------------------
   `.dtx-section--mint` fades to white at the bottom, which reads as almost no
   band at all when sections alternate down a long narrative page. This is a
   flat, slightly deeper tint so each beat is legibly separated from the last.
   Kept as its own modifier rather than a change to `--mint`, which other pages
   rely on.
   -------------------------------------------------------------------------- */

.dtx-section--tint {
    background: linear-gradient(180deg, #edf5f1 0%, #e4f0eb 100%);
}

/* `--glow` sets its own background, so the pairing has to be restated here
   or whichever rule comes last would win outright. */
.dtx-section--tint.dtx-section--glow {
    background:
        radial-gradient(62% 48% at 50% 58%, rgba(95, 168, 141, .26) 0%, rgba(95, 168, 141, 0) 72%),
        linear-gradient(180deg, #edf5f1 0%, #e4f0eb 100%);
}

/* --------------------------------------------------------------------------
   33. Case study: dark section
   --------------------------------------------------------------------------
   Used for the video beats. Every fourth section going dark gives the page a
   rhythm that pale tints alone cannot, and a dark surround is the right frame
   for video anyway.

   Note the descendant selectors below. dt.css sets `color` through the
   universal selector, which lands on each nested element directly, so colour
   cannot be inherited from the section - every element inside has to be named.
   -------------------------------------------------------------------------- */

.dtx-section--dark {
    background:
        radial-gradient(900px 520px at 50% 0%, rgba(95, 168, 141, .22) 0%, rgba(95, 168, 141, 0) 66%),
        linear-gradient(158deg, #13251f 0%, #0f1b18 52%, #101d28 100%);
}

.dtx-section--dark .dtx-h2,
.dtx-section--dark .dtx-h3 { color: #ffffff; }

.dtx-section--dark .dtx-eyebrow { color: var(--dtx-mint); }

.dtx-section--dark .dtx-lede { color: rgba(255, 255, 255, .82); }

.dtx-section--dark .dtx-p { color: rgba(255, 255, 255, .78); }

.dtx-section--dark .dtx-videoBlock__caption { color: rgba(255, 255, 255, .62); }

.dtx-section--dark .dtx-rule { background: var(--dtx-accent-green-center); }

/* The frame already sits on dark, so the ring reads as a seam. Swap it for a
   faint light edge that separates the video from the background instead. */
.dtx-section--dark .dtx-videoBlock__frame {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 34px 70px -28px rgba(0, 0, 0, .8);
}

/* --------------------------------------------------------------------------
   34. Case study: tighter pacing
   --------------------------------------------------------------------------
   The first pass was too loose - with stronger banding doing the separating,
   the sections no longer need as much air inside them.
   -------------------------------------------------------------------------- */

.dtx-section--airy { padding: 92px 0; }

@media (max-width: 900px) {
    .dtx-section--airy { padding: 74px 0; }
}

@media (max-width: 720px) {
    .dtx-section--airy { padding: 56px 0; }
}


/* --------------------------------------------------------------------------
   35. Case study: heading measure and line balancing
   --------------------------------------------------------------------------
   `.dtx-measure` is sized for body copy at ~1rem. A 2.45rem display heading
   set to the same width runs out of room 40-100px short of fitting on one
   line, dropping a single word onto a second line. Headings therefore get
   their own, wider measure while the prose keeps the narrower one.

   `text-wrap: balance` then evens out the headings that genuinely need two
   lines - including the ones in narrow split columns, which cannot be fixed
   by widening anything. Browsers without it simply wrap as before.

   Scoped to `--story` rather than applied to `.dtx-h2` generally: the other
   pages sharing this stylesheet have headings tuned to the current behaviour.
   -------------------------------------------------------------------------- */

/* 980 not 940: at 940 the two longest headings cleared one line by barely
   20px, which font fallback on another machine would eat. */
.dtx-measure--head { max-width: 980px; }

.dtx-page--story .dtx-h1,
.dtx-page--story .dtx-h2,
.dtx-page--story .dtx-h3 {
    text-wrap: balance;
}


/* --------------------------------------------------------------------------
   36. Case study: hero scene
   --------------------------------------------------------------------------
   The corridor photograph with the room displays laid over it. The photo
   supplies the context David describes - status lighting running away down a
   hallway - and the device renders in front show what is actually on those
   screens, which is the customisation story. Between them they cover the two
   things the customer is warmest about.

   The renders overhang the photo deliberately: sitting them fully inside it
   would read as a collage, breaking the edge reads as depth.
   -------------------------------------------------------------------------- */

.dtx-heroArt {
    position: relative;
    min-width: 0;
}

.dtx-heroScene {
    position: relative;
    /* Room for the renders that hang below the photograph. */
    padding-bottom: 9%;
}

.dtx-heroScene__bg {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--dtx-radius-lg);
    box-shadow: var(--dtx-ring), var(--dtx-lift-lg);
}

.dtx-heroScene__tab {
    position: absolute;
    height: auto;
    /* drop-shadow, not box-shadow: the renders are transparent PNGs, so the
       shadow has to follow the bezel rather than the bounding box. */
    filter: drop-shadow(0 16px 26px rgba(12, 24, 20, .5));
}

/* Left, red - a room in use */
.dtx-heroScene__tab--a {
    left: -7%;
    bottom: 7%;
    width: 42%;
    z-index: 2;
    transform: rotate(-3deg);
}

/* Centre, foreground. Kept narrow enough that it does not cover the room name
   on the render to its right. */
.dtx-heroScene__tab--b {
    left: 29%;
    bottom: 0;
    width: 43%;
    z-index: 3;
}

/* Right, green - available */
.dtx-heroScene__tab--c {
    right: -10%;
    bottom: 7%;
    width: 42%;
    z-index: 2;
    transform: rotate(3deg);
}

.dtx-heroScene__tab--b { animation: dtx-heroSceneFloat 9s ease-in-out infinite; }

@keyframes dtx-heroSceneFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

@media (max-width: 900px) {
    .dtx-heroScene__tab--a,
    .dtx-heroScene__tab--c { width: 44%; }
}

/* At phone widths three overlapping renders turn to mush, so the centre one
   carries the point on its own. */
@media (max-width: 620px) {
    .dtx-heroScene { padding-bottom: 12%; }
    .dtx-heroScene__tab--a,
    .dtx-heroScene__tab--c { display: none; }
    .dtx-heroScene__tab--b { left: 12%; width: 76%; animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    .dtx-heroScene__tab--b { animation: none; }
}

/* --------------------------------------------------------------------------
   37. Case study: client logo lockup
   -------------------------------------------------------------------------- */

.dtx-heroLogo {
    display: block;
    height: 46px;
    width: auto;
    margin: 0 0 26px 0;
}

@media (max-width: 720px) {
    .dtx-heroLogo { height: 38px; margin-bottom: 20px; }
}