/* ──────────────────────────────────────────────────────────────────────────
Home page sections — Ethereal Glass aesthetic flowing from the hero.
Dark navy throughout. Aqua hairlines. Double-bezel cards. Bento layouts.
Custom cubic-bezier motion. Scroll-fade-up with blur.
────────────────────────────────────────────────────────────────────────── */
@import url('./colors_and_type.css');
/* Re-enforce dark backgrounds — colors_and_type.css's import order resets
html/body to white, and zoom: 0.8 on body lets the html bg show through. */
html, body {
background: var(--dz-navy-deep);
}
body { background: var(--dz-navy-deep); }
/* ── Custom motion curves used everywhere ── */
:root {
--dz-ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
--dz-ease-fade: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ── Section primitive — shared scaffolding ── */
.dz-section {
position: relative;
padding: clamp(96px, 12vw, 180px) clamp(20px, 5vw, 64px);
font-family: var(--dz-font);
background: var(--dz-navy-deep);
color: var(--dz-white);
overflow: hidden;
isolation: isolate;
}
.dz-section--no-pad-top { padding-top: 0; }
.dz-section__inner {
max-width: 1280px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* Subtle radial mesh-gradient ambience — gives every section depth */
.dz-section::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(800px 400px at 80% 0%, rgba(79,200,244,0.06), transparent 60%),
radial-gradient(600px 400px at 0% 100%, rgba(79,200,244,0.04), transparent 65%);
pointer-events: none;
z-index: 1;
}
/* ── Pill-shaped micro eyebrow tag (Apple-tier signature) ── */
.dz-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 999px;
background: rgba(79,200,244,0.08);
border: 1px solid rgba(79,200,244,0.22);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--dz-aqua);
margin-bottom: 22px;
backdrop-filter: blur(8px);
}
.dz-eyebrow::before {
content: "";
width: 5px; height: 5px;
border-radius: 999px;
background: var(--dz-aqua);
box-shadow: 0 0 8px var(--dz-aqua);
}
/* ── Massive editorial heading ── */
.dz-h2 {
font-size: clamp(34px, 4.6vw, 64px);
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.025em;
margin: 0 0 28px;
text-wrap: balance;
color: var(--dz-white);
}
.dz-h2 em {
color: var(--dz-aqua);
font-style: normal;
font-weight: 700;
}
.dz-lead {
font-size: clamp(15px, 1.15vw, 18px);
line-height: 1.6;
color: var(--dz-text-on-dark-muted);
max-width: 620px;
margin: 0 0 36px;
text-wrap: pretty;
}
/* ── Scroll-reveal: fade up + blur out → in, over 900ms ── */
.dz-reveal {
opacity: 0;
transform: translateY(48px);
filter: blur(10px);
transition:
opacity 900ms var(--dz-ease-fade),
transform 900ms var(--dz-ease-spring),
filter 900ms var(--dz-ease-fade);
}
.dz-reveal--in {
opacity: 1;
transform: translateY(0);
filter: blur(0);
}
/* ──────────────────────────────────────────────────────────────────────────
2 · GeoAnswerParagraph — Editorial Index (Mockup B)
Massive 3-word typographic punch on the left + numbered service index
on the right (magazine table-of-contents style).
Lighter navy bg with glass-bordered card; visually distinct from hero.
────────────────────────────────────────────────────────────────────────── */
.dz-geo-answer {
/* Match the hero's navy-deep — no color seam between hero and section.
Tightened vertical padding for a more compact section height. */
background: var(--dz-navy-deep);
padding: clamp(48px, 6vw, 80px) clamp(20px, 5vw, 64px) clamp(40px, 5vw, 64px);
position: relative;
isolation: isolate;
}
.dz-geo-answer::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(700px 400px at 0% 50%, rgba(79,200,244,0.05), transparent 60%);
pointer-events: none;
z-index: 1;
}
/* ── Section header — sits in editorial space ABOVE the card ── */
.dz-geo-answer__header {
max-width: 1180px;
margin: 0 auto clamp(24px, 3vw, 36px);
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: flex-start; /* prevents the eyebrow pill from stretching full-width */
gap: 14px;
}
.dz-geo-answer__header .dz-eyebrow { margin-bottom: 0; }
.dz-geo-answer__title {
font-size: clamp(34px, 4.6vw, 64px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.03em;
margin: 0;
color: var(--dz-white);
max-width: 18ch;
}
.dz-geo-answer__title em {
color: var(--dz-aqua);
font-style: normal;
}
.dz-geo-answer__sub {
font-size: clamp(13px, 1.05vw, 15px); /* per Figma 104:8 — 15px @ 1440 viewport */
line-height: 1.6;
color: rgba(255,255,255,0.62);
margin: 0;
max-width: 640px;
}
.dz-geo-answer__sub strong {
color: var(--dz-white);
font-weight: 500;
}
/* ── Card — pure service-index display, single column, full width ── */
.dz-geo-answer__inner {
max-width: 1180px;
margin: 0 auto;
position: relative;
z-index: 3;
background: rgba(20, 32, 48, 0.92);
border: 1px solid rgba(79,200,244,0.22);
border-radius: 24px;
padding: clamp(16px, 2vw, 28px) clamp(24px, 3vw, 36px);
backdrop-filter: blur(18px) saturate(1.2);
-webkit-backdrop-filter: blur(18px) saturate(1.2);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.05),
inset 0 0 0 1px rgba(79,200,244,0.05),
0 40px 80px -20px rgba(0,0,0,0.6),
0 20px 40px -10px rgba(79,200,244,0.18);
}
/* Service index — full-width, hairline rows */
.dz-geo-index {
list-style: none;
margin: 0;
padding: 0;
}
.dz-geo-index__row {
display: grid;
grid-template-columns: 36px 1fr auto;
gap: 14px;
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
align-items: center;
transition: background 250ms var(--dz-ease-fade), padding-left 350ms var(--dz-ease-spring);
cursor: default;
}
.dz-geo-index__row:first-child { border-top: none; }
.dz-geo-index__row:hover {
background: rgba(79,200,244,0.04);
padding-left: 8px;
}
/* "+27 more services" footer link — anchors the card and signals depth */
.dz-geo-index__more {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 0 2px;
margin-top: 4px;
border-top: 1px solid rgba(79,200,244,0.18);
text-decoration: none;
transition: padding-left 350ms var(--dz-ease-spring);
}
.dz-geo-index__more:hover { padding-left: 8px; }
.dz-geo-index__more-label {
font-size: 13px;
font-weight: 600;
color: var(--dz-aqua);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.dz-geo-index__more-meta {
font-size: 12px;
font-weight: 500;
color: rgba(255,255,255,0.5);
letter-spacing: 0;
}
.dz-geo-index__more-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px; height: 30px;
border-radius: 999px;
background: rgba(79,200,244,0.12);
border: 1px solid rgba(79,200,244,0.32);
color: var(--dz-aqua);
transition: transform 400ms var(--dz-ease-spring), background 300ms var(--dz-ease-fade);
}
.dz-geo-index__more:hover .dz-geo-index__more-icon {
transform: translate(2px, -2px) scale(1.05);
background: rgba(79,200,244,0.22);
}
.dz-geo-index__num {
font-size: 11px;
font-weight: 700;
color: var(--dz-aqua);
letter-spacing: 0.1em;
font-variant-numeric: tabular-nums;
}
.dz-geo-index__name {
font-size: 16px;
font-weight: 500;
color: var(--dz-white);
letter-spacing: -0.01em;
}
.dz-geo-index__desc {
font-size: 12.5px;
color: rgba(255,255,255,0.5);
text-align: right;
}
@media (max-width: 540px) {
.dz-geo-index__row { grid-template-columns: 28px 1fr; }
.dz-geo-index__desc { display: none; }
}
/* ──────────────────────────────────────────────────────────────────────────
3 · Project Showcase Slider — 3-up cards on desktop, prev/next + dots.
Real Saudi giga-projects (AMAALA, Red Sea, Qiddiya, Royal Commission for
Riyadh) + landmark Jeddah projects. Glass card tiles on navy.
────────────────────────────────────────────────────────────────────────── */
.dz-clients {
background: var(--dz-navy-deep);
padding: clamp(40px, 5vw, 64px) clamp(20px, 5vw, 64px) clamp(36px, 4.5vw, 56px);
position: relative;
overflow: hidden;
isolation: isolate;
}
.dz-clients *,
.dz-clients *::before,
.dz-clients *::after { box-sizing: border-box; }
.dz-clients::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(800px 400px at 80% 0%, rgba(79,200,244,0.06), transparent 60%),
radial-gradient(600px 400px at 0% 100%, rgba(79,200,244,0.04), transparent 65%);
pointer-events: none;
z-index: 0;
}
.dz-clients__inner {
max-width: 1280px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* HEADER — title left, meta callout right */
.dz-clients__head {
display: grid;
grid-template-columns: 1fr auto;
gap: clamp(20px, 4vw, 64px);
align-items: end;
margin-bottom: clamp(20px, 2.4vw, 28px);
}
@media (max-width: 760px) {
.dz-clients__head { grid-template-columns: 1fr; align-items: start; gap: 16px; }
}
.dz-clients__head-left {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.dz-clients__head-left .dz-eyebrow { margin-bottom: 0; }
.dz-clients__title {
font-size: clamp(34px, 4.6vw, 64px);
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.025em;
margin: 0;
color: var(--dz-white);
max-width: 18ch;
}
.dz-clients__title em { color: var(--dz-aqua); font-style: normal; }
.dz-clients__meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
text-align: right;
}
@media (max-width: 760px) {
.dz-clients__meta { align-items: flex-start; text-align: left; }
}
.dz-clients__meta-num {
font-size: clamp(26px, 2.8vw, 40px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.03em;
color: var(--dz-aqua);
font-variant-numeric: tabular-nums;
}
.dz-clients__meta-label {
font-size: 11px;
font-weight: 500;
color: rgba(255,255,255,0.62);
letter-spacing: 0.04em;
}
/* CONTROLS — progress + arrows */
.dz-clients__controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 18px;
gap: 16px;
}
.dz-clients__progress {
display: flex;
align-items: center;
gap: 14px;
color: rgba(255,255,255,0.62);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
}
.dz-clients__progress-track {
width: 120px;
height: 2px;
background: rgba(255,255,255,0.08);
border-radius: 999px;
overflow: hidden;
position: relative;
}
.dz-clients__progress-fill {
position: absolute;
inset: 0;
background: var(--dz-aqua);
box-shadow: 0 0 8px var(--dz-aqua);
transition: width 500ms var(--dz-ease-fade);
}
.dz-clients__nav { display: flex; gap: 10px; }
.dz-clients__nav-btn {
width: 44px;
height: 44px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.12);
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(79,200,244,0.02));
color: var(--dz-white);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition:
transform 250ms var(--dz-ease-spring),
background 300ms var(--dz-ease-fade),
border-color 300ms var(--dz-ease-fade),
box-shadow 300ms var(--dz-ease-fade),
opacity 200ms var(--dz-ease-fade);
}
.dz-clients__nav-btn:hover:not(:disabled) {
border-color: rgba(79,200,244,0.5);
background: linear-gradient(135deg, rgba(79,200,244,0.12), rgba(79,200,244,0.04));
color: var(--dz-aqua);
transform: translateY(-1px);
box-shadow: 0 8px 24px -6px rgba(79,200,244,0.3);
}
.dz-clients__nav-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.dz-clients__nav-btn svg { width: 18px; height: 18px; stroke-width: 1.8; }
/* SLIDER
overflow-x: clip + overflow-y: visible lets cards extend vertically
on hover (translateY(-4px) lift + box-shadow glow) without getting
their top edge clipped, while still hiding off-screen cards horizontally. */
.dz-clients__viewport {
overflow-x: clip;
overflow-y: visible;
position: relative;
}
.dz-clients__track {
display: flex;
gap: 16px;
transition: transform 600ms var(--dz-ease-spring);
will-change: transform;
}
/* CARD */
.dz-clients__card {
position: relative;
z-index: 1;
flex: 0 0 calc((100% - 32px) / 3);
min-width: 0;
padding: 24px 22px;
background: linear-gradient(135deg, rgba(255,255,255,0.025), rgba(79,200,244,0.02));
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
overflow: hidden;
cursor: pointer;
transition:
transform 500ms var(--dz-ease-spring),
border-color 400ms var(--dz-ease-fade),
box-shadow 400ms var(--dz-ease-fade);
min-height: 232px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.dz-clients__card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(79,200,244,0.4), transparent);
opacity: 0.6;
transition: opacity 400ms var(--dz-ease-fade);
}
.dz-clients__card::after {
content: "";
position: absolute;
bottom: 14px; right: 14px;
width: 12px; height: 12px;
border-right: 1px solid rgba(79,200,244,0.35);
border-bottom: 1px solid rgba(79,200,244,0.35);
transition: border-color 350ms var(--dz-ease-fade);
}
.dz-clients__card:hover {
z-index: 5;
transform: translateY(-4px);
border-color: rgba(79,200,244,0.4);
box-shadow:
0 14px 40px -12px rgba(0,0,0,0.6),
0 0 0 1px rgba(79,200,244,0.18),
0 0 32px -4px rgba(79,200,244,0.35);
}
.dz-clients__card:hover::before { opacity: 1; }
.dz-clients__card:hover::after { border-color: rgba(79,200,244,0.8); }
.dz-clients__card-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
margin-bottom: 16px;
}
.dz-clients__card-tag-wrap {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
.dz-clients__card-tag {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--dz-aqua);
opacity: 0.85;
}
.dz-clients__card-year {
font-size: 11px;
color: rgba(255,255,255,0.45);
font-variant-numeric: tabular-nums;
}
.dz-clients__card-logo {
flex: 0 0 auto;
width: 64px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: flex-end;
opacity: 0.85;
transition: opacity 350ms var(--dz-ease-fade);
}
.dz-clients__card-logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
/* Normalize multi-colored brand SVGs to a uniform white silhouette
so all logo slots have consistent visual weight on the navy bg. */
filter: brightness(0) invert(1);
opacity: 0.85;
transition: filter 350ms var(--dz-ease-fade), opacity 350ms var(--dz-ease-fade);
}
.dz-clients__card:hover .dz-clients__card-logo { opacity: 1; }
.dz-clients__card:hover .dz-clients__card-logo img {
opacity: 1;
filter: brightness(0) invert(1)
drop-shadow(0 0 8px rgba(79, 200, 244, 0.6));
}
.dz-clients__card-logo-mark {
width: 38px;
height: 38px;
border-radius: 8px;
border: 1px solid rgba(79,200,244,0.35);
background: rgba(79,200,244,0.05);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--dz-aqua);
}
.dz-clients__card-name {
font-size: 26px;
font-weight: 700;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--dz-white);
margin: 0 0 8px;
}
.dz-clients__card-scope {
font-size: 13px;
color: rgba(255,255,255,0.62);
line-height: 1.5;
margin: 0 0 16px;
}
.dz-clients__card-stats {
display: flex;
gap: 20px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.06);
}
.dz-clients__card-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.dz-clients__card-stat-num {
font-size: 17px;
font-weight: 700;
color: var(--dz-aqua);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.dz-clients__card-stat-label {
font-size: 10px;
color: rgba(255,255,255,0.45);
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* DOTS */
.dz-clients__dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 22px;
}
.dz-clients__dot {
width: 24px;
height: 3px;
border-radius: 999px;
background: rgba(255,255,255,0.12);
border: 0;
cursor: pointer;
padding: 0;
transition: background 300ms var(--dz-ease-fade), width 400ms var(--dz-ease-spring);
}
.dz-clients__dot--active {
background: var(--dz-aqua);
width: 36px;
box-shadow: 0 0 10px var(--dz-aqua);
}
/* STAT STRIP */
.dz-clients__strip {
margin-top: 22px;
display: grid;
grid-template-columns: minmax(220px, 1.4fr) repeat(4, 1fr);
align-items: center;
background: linear-gradient(135deg, rgba(255,255,255,0.025), rgba(79,200,244,0.02));
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 16px 24px;
position: relative;
overflow: hidden;
}
.dz-clients__strip::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(79,200,244,0.4), transparent);
}
.dz-clients__strip-label {
display: flex;
flex-direction: column;
gap: 4px;
padding-right: 28px;
border-right: 1px solid rgba(255,255,255,0.06);
}
.dz-clients__strip-eyebrow {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--dz-aqua);
}
.dz-clients__strip-title {
font-size: 15px;
font-weight: 600;
color: var(--dz-white);
letter-spacing: -0.01em;
}
.dz-clients__strip-cell {
text-align: center;
border-right: 1px solid rgba(255,255,255,0.06);
padding: 0 12px;
}
.dz-clients__strip-cell:last-child { border-right: 0; }
.dz-clients__strip-num {
font-size: 28px;
font-weight: 700;
color: var(--dz-aqua);
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.025em;
}
.dz-clients__strip-sub {
font-size: 10px;
color: rgba(255,255,255,0.62);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-top: 6px;
}
/* RESPONSIVE */
@media (max-width: 900px) {
.dz-clients__card { flex: 0 0 calc((100% - 16px) / 2); }
.dz-clients__strip {
grid-template-columns: 1fr 1fr;
gap: 18px;
padding: 22px 18px;
}
.dz-clients__strip-label {
border-right: 0;
padding-right: 0;
grid-column: 1 / -1;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
}
@media (max-width: 600px) {
.dz-clients__card { flex: 0 0 100%; }
}
/* ──────────────────────────────────────────────────────────────────────────
Editorial Split — used for "What is BIM" and "Vision 2030" answer blocks
────────────────────────────────────────────────────────────────────────── */
.dz-split {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(40px, 6vw, 96px);
align-items: start;
}
@media (max-width: 900px) {
.dz-split { grid-template-columns: 1fr; gap: 32px; }
}
.dz-split__head { position: sticky; top: 100px; }
@media (max-width: 900px) {
.dz-split__head { position: static; }
}
.dz-split__body {
font-size: clamp(15px, 1.1vw, 17px);
line-height: 1.7;
color: var(--dz-text-on-dark-muted);
}
.dz-split__body p { margin: 0 0 18px; }
.dz-split__body p:last-child { margin: 0; }
.dz-split__body strong {
color: var(--dz-white);
font-weight: 600;
}
.dz-split__body em {
color: var(--dz-aqua);
font-style: normal;
font-weight: 600;
}
/* ──────────────────────────────────────────────────────────────────────────
Double-Bezel card — used for services bento, products, why DZ
Outer shell + inner core (concentric radii) — looks like machined hardware.
────────────────────────────────────────────────────────────────────────── */
.dz-bezel {
background: rgba(255,255,255,0.025);
border: 1px solid rgba(79,200,244,0.12);
border-radius: 28px;
padding: 6px;
transition: transform 600ms var(--dz-ease-spring), border-color 400ms var(--dz-ease-fade), background 400ms var(--dz-ease-fade);
}
.dz-bezel:hover {
transform: translateY(-4px);
border-color: rgba(79,200,244,0.35);
background: rgba(79,200,244,0.04);
}
.dz-bezel__core {
background: rgba(10,18,30,0.9);
border-radius: 22px;
padding: clamp(22px, 2.4vw, 32px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.06),
inset 0 0 0 1px rgba(79,200,244,0.06);
height: 100%;
display: flex; flex-direction: column;
gap: 14px;
}
/* ──────────────────────────────────────────────────────────────────────────
5 · ServicesGrid — clean 3-row layout (featured full-width hero card on top,
then two 3-up rows). Avoids the lopsided empty-space bento problem.
────────────────────────────────────────────────────────────────────────── */
.dz-services__bento {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 48px;
}
@media (max-width: 900px) {
.dz-services__bento { grid-template-columns: 1fr; }
}
.dz-service { grid-column: span 1; }
.dz-service--featured {
grid-column: 1 / -1; /* full width across all 3 columns, single row */
}
.dz-service-card {
text-decoration: none;
display: block;
height: 100%;
}
.dz-service-card__icon {
width: 44px; height: 44px;
border-radius: 12px;
background: rgba(79,200,244,0.1);
border: 1px solid rgba(79,200,244,0.3);
color: var(--dz-aqua);
display: grid; place-items: center;
font-size: 13px; font-weight: 700;
letter-spacing: 0.02em;
margin-bottom: 6px;
}
.dz-service-card__h3 {
font-size: clamp(17px, 1.4vw, 22px);
font-weight: 600;
color: var(--dz-white);
line-height: 1.25;
margin: 0;
letter-spacing: -0.01em;
}
.dz-service-card__desc {
font-size: 13.5px;
line-height: 1.6;
color: rgba(255,255,255,0.62);
margin: 0;
}
.dz-service-card__arrow {
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
color: var(--dz-aqua);
letter-spacing: -0.005em;
}
.dz-service-card__arrow-pill {
width: 28px; height: 28px;
border-radius: 999px;
background: rgba(79,200,244,0.12);
border: 1px solid rgba(79,200,244,0.3);
display: grid; place-items: center;
transition: transform 400ms var(--dz-ease-spring), background 300ms var(--dz-ease-fade);
}
.dz-service-card:hover .dz-service-card__arrow-pill {
transform: translate(2px, -2px) scale(1.05);
background: rgba(79,200,244,0.2);
}
/* Featured card — wide horizontal layout (icon left, content right) */
.dz-service--featured .dz-bezel__core {
display: grid;
grid-template-columns: auto 1fr auto;
gap: clamp(20px, 3vw, 48px);
align-items: center;
padding: clamp(24px, 2.6vw, 36px) clamp(28px, 3vw, 44px);
}
@media (max-width: 700px) {
.dz-service--featured .dz-bezel__core {
grid-template-columns: 1fr;
gap: 14px;
}
}
.dz-service--featured .dz-service-card__icon {
margin-bottom: 0;
width: 56px; height: 56px;
font-size: 14px;
}
.dz-service-card--featured .dz-service-card__h3 {
font-size: clamp(22px, 2.2vw, 30px);
margin: 0;
}
.dz-service-card--featured .dz-service-card__desc {
font-size: 14.5px;
max-width: 540px;
margin-top: 6px;
}
.dz-service-card--featured .dz-service-card__arrow {
margin-top: 0;
margin-left: auto;
white-space: nowrap;
}
/* ──────────────────────────────────────────────────────────────────────────
5b · Vision 2030 — 4 strategic mandates in a single horizontal row.
Same H2 size as other sections. Pillar cards mirror the Project Showcase
slider's visual treatment (corner brackets, top hairline, hover lift+glow).
────────────────────────────────────────────────────────────────────────── */
.dz-vision {
background: var(--dz-navy-deep);
padding: clamp(48px, 6vw, 72px) clamp(20px, 5vw, 64px) clamp(40px, 5vw, 56px);
position: relative;
overflow: hidden;
isolation: isolate;
}
.dz-vision *,
.dz-vision *::before,
.dz-vision *::after { box-sizing: border-box; }
.dz-vision::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(800px 320px at 80% 0%, rgba(79,200,244,0.06), transparent 60%),
radial-gradient(600px 320px at 10% 100%, rgba(79,200,244,0.04), transparent 65%);
pointer-events: none;
z-index: 0;
}
.dz-vision__inner {
max-width: 1280px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.dz-vision__head {
display: grid;
grid-template-columns: 1fr auto;
gap: clamp(20px, 4vw, 64px);
align-items: end;
margin-bottom: clamp(24px, 2.8vw, 36px);
}
@media (max-width: 760px) {
.dz-vision__head { grid-template-columns: 1fr; align-items: start; gap: 16px; }
}
.dz-vision__head-left {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.dz-vision__head-left .dz-eyebrow { margin-bottom: 0; }
.dz-vision__title {
font-size: clamp(34px, 4.6vw, 64px);
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.025em;
margin: 0;
color: var(--dz-white);
max-width: 18ch;
}
.dz-vision__title em { color: var(--dz-aqua); font-style: normal; }
.dz-vision__meta {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
text-align: right;
}
@media (max-width: 760px) {
.dz-vision__meta { align-items: flex-start; text-align: left; }
}
.dz-vision__meta-num {
font-size: clamp(26px, 2.8vw, 40px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.03em;
color: var(--dz-aqua);
font-variant-numeric: tabular-nums;
}
.dz-vision__meta-label {
font-size: 11px;
font-weight: 500;
color: rgba(255,255,255,0.62);
letter-spacing: 0.04em;
}
.dz-vision__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 900px) {
.dz-vision__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
.dz-vision__grid { grid-template-columns: 1fr; }
}
.dz-vision__pillar {
position: relative;
z-index: 1;
padding: 20px 20px 18px;
background: linear-gradient(135deg, rgba(255,255,255,0.025), rgba(79,200,244,0.02));
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 192px;
cursor: pointer;
transition:
transform 400ms var(--dz-ease-spring),
border-color 350ms var(--dz-ease-fade),
box-shadow 400ms var(--dz-ease-fade);
}
.dz-vision__pillar::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(79,200,244,0.4), transparent);
opacity: 0.6;
transition: opacity 350ms var(--dz-ease-fade);
}
.dz-vision__pillar::after {
content: "";
position: absolute;
bottom: 12px; right: 12px;
width: 10px; height: 10px;
border-right: 1px solid rgba(79,200,244,0.3);
border-bottom: 1px solid rgba(79,200,244,0.3);
transition: border-color 350ms var(--dz-ease-fade);
}
.dz-vision__pillar:hover {
z-index: 5;
transform: translateY(-3px);
border-color: rgba(79,200,244,0.4);
box-shadow:
0 14px 32px -10px rgba(0,0,0,0.5),
0 0 0 1px rgba(79,200,244,0.18),
0 0 24px -4px rgba(79,200,244,0.3);
}
.dz-vision__pillar:hover::before { opacity: 1; }
.dz-vision__pillar:hover::after { border-color: rgba(79,200,244,0.7); }
.dz-vision__pillar-top {
display: flex;
align-items: center;
gap: 12px;
}
.dz-vision__pillar-icon {
flex: 0 0 auto;
width: 38px; height: 38px;
border-radius: 9px;
background: linear-gradient(135deg, rgba(79,200,244,0.15), rgba(79,200,244,0.04));
border: 1px solid rgba(79,200,244,0.3);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--dz-aqua);
}
.dz-vision__pillar-icon svg { width: 18px; height: 18px; stroke-width: 1.6; }
.dz-vision__pillar-heading {
display: flex;
flex-direction: column;
gap: 0;
min-width: 0;
}
.dz-vision__pillar-num {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.18em;
color: var(--dz-aqua);
text-transform: uppercase;
opacity: 0.8;
}
.dz-vision__pillar-title {
font-size: 17px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--dz-white);
margin: 2px 0 0;
}
.dz-vision__pillar-mandate {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.45);
text-transform: uppercase;
margin: 0;
}
.dz-vision__pillar-delivery {
font-size: 12.5px;
line-height: 1.5;
color: rgba(255,255,255,0.62);
margin: 0;
flex: 1;
}
.dz-vision__pillar-delivery strong { color: var(--dz-white); font-weight: 600; }
.dz-vision__pillar-metric {
display: flex;
align-items: baseline;
gap: 8px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.06);
margin-top: auto;
}
.dz-vision__pillar-metric-num {
font-size: 15px;
font-weight: 700;
color: var(--dz-aqua);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.dz-vision__pillar-metric-label {
font-size: 10px;
color: rgba(255,255,255,0.45);
text-transform: uppercase;
letter-spacing: 0.08em;
}
/* ──────────────────────────────────────────────────────────────────────────
6 · StatsBar — minimal, hairline dividers, large numbers
────────────────────────────────────────────────────────────────────────── */
.dz-stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid rgba(255,255,255,0.08);
border-bottom: 1px solid rgba(255,255,255,0.08);
padding: 40px 0;
}
@media (max-width: 768px) {
.dz-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 0; }
}
.dz-stat {
text-align: left;
padding: 0 28px;
position: relative;
}
.dz-stat + .dz-stat::before {
content: "";
position: absolute;
top: 50%; left: 0;
height: 56px; width: 1px;
transform: translateY(-50%);
background: rgba(255,255,255,0.08);
}
@media (max-width: 768px) {
.dz-stat + .dz-stat::before { display: none; }
}
.dz-stat__value {
font-size: clamp(40px, 5vw, 68px);
font-weight: 700;
color: var(--dz-aqua);
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.025em;
margin-bottom: 10px;
}
.dz-stat__label {
font-size: 13px;
font-weight: 400;
color: rgba(255,255,255,0.55);
letter-spacing: 0.02em;
}
/* ──────────────────────────────────────────────────────────────────────────
8 · Products — Tabbed Switcher with full uncropped UI in browser frame.
TwinMs (teal) / TwinMaq (aqua) per-tab color theming via --pa-* vars.
Section is viewport-fit: ~738px tall at 1440×900 (no scroll).
Stats show hero ring (efficiency/reserved) + 2 sparklines (kWh/cost OR inquiries/sessions).
────────────────────────────────────────────────────────────────────────── */
.dz-prod {
--twinms-teal-2: #4FB5A4;
--twinms-glow: rgba(55,152,138,0.4);
--twinms-soft: rgba(55,152,138,0.1);
--twinms-border: rgba(55,152,138,0.45);
--aqua-glow: rgba(79,200,244,0.4);
--aqua-soft: rgba(79,200,244,0.08);
--aqua-border: rgba(79,200,244,0.45);
background: var(--dz-navy-deep);
padding: 22px clamp(20px, 5vw, 64px);
position: relative;
overflow: hidden;
isolation: isolate;
}
.dz-prod *,
.dz-prod *::before,
.dz-prod *::after { box-sizing: border-box; }
/* No background gradient on Products section — keeps it flat navy so it
blends seamlessly with adjacent sections. The browser frame, glass cards,
and sparkline animations already provide enough visual interest. */
.dz-prod__inner {
max-width: 1280px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* HEADER */
.dz-prod__head {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: end;
margin-bottom: 12px;
}
@media (max-width: 760px) {
.dz-prod__head { grid-template-columns: 1fr; align-items: start; gap: 12px; }
}
.dz-prod__head-left {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.dz-prod__head-left .dz-eyebrow { margin-bottom: 0; }
.dz-prod__title {
font-size: clamp(34px, 4.6vw, 64px);
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.025em;
margin: 0;
color: var(--dz-white);
max-width: 22ch;
}
.dz-prod__title em { color: var(--dz-aqua); font-style: normal; }
.dz-prod__meta {
text-align: right;
display: flex;
flex-direction: column;
gap: 2px;
align-items: flex-end;
}
@media (max-width: 760px) {
.dz-prod__meta { align-items: flex-start; text-align: left; }
}
.dz-prod__meta-num {
font-size: clamp(20px, 2.4vw, 30px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: var(--dz-aqua);
font-variant-numeric: tabular-nums;
}
.dz-prod__meta-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.62);
}
/* CARD FRAME */
.dz-prod__frame {
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
overflow: hidden;
background: linear-gradient(135deg, rgba(255,255,255,0.025), rgba(79,200,244,0.02));
position: relative;
}
.dz-prod__frame::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(79,200,244,0.4), transparent);
z-index: 5;
}
/* TABS */
.dz-prod__tabs {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
gap: 16px;
border-bottom: 1px solid rgba(255,255,255,0.06);
background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.dz-prod__tab-pills {
display: inline-flex;
gap: 4px;
padding: 4px;
border-radius: 999px;
background: rgba(0,0,0,0.25);
border: 1px solid rgba(255,255,255,0.06);
}
.dz-prod__tab {
padding: 6px 14px;
border-radius: 999px;
border: 0;
background: transparent;
color: rgba(255,255,255,0.55);
font-size: 12px;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 250ms var(--dz-ease-fade);
white-space: nowrap;
font-family: inherit;
}
.dz-prod__tab--active.dz-prod__tab--teal {
background: var(--twinms-teal-2);
color: var(--dz-navy-deep);
box-shadow: 0 4px 12px -4px var(--twinms-glow);
}
.dz-prod__tab--active.dz-prod__tab--aqua {
background: var(--dz-aqua);
color: var(--dz-navy-deep);
box-shadow: 0 4px 12px -4px var(--aqua-glow);
}
.dz-prod__tab-dot {
width: 5px; height: 5px;
border-radius: 999px;
background: currentColor;
}
.dz-prod__tabs-cta {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 14px;
border-radius: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.12);
color: var(--dz-white);
font-size: 12px;
font-weight: 600;
text-decoration: none;
transition: all 250ms var(--dz-ease-fade);
}
.dz-prod__tabs-cta:hover { border-color: rgba(255,255,255,0.25); }
.dz-prod__tabs-cta svg { width: 11px; height: 11px; }
/* Active product logo (replaces the old "Both demos" CTA) — sits inside the
glass-mark wrapper, swaps with tab change via remount. Height is set
per-logo via inline style for visual-scale parity. mix-blend-mode: multiply
makes JPEG white backgrounds blend cleanly into the white panel — no
visible JPEG-rectangle edge artifacts. */
.dz-prod__active-logo {
display: block;
width: auto;
max-width: 180px;
object-fit: contain;
mix-blend-mode: multiply;
}
.dz-prod__active-logo-mark {
opacity: 0;
transform: translateY(-2px);
animation: dz-prod-logo-fade 400ms var(--dz-ease-spring) 80ms forwards;
}
@keyframes dz-prod-logo-fade {
to { opacity: 1; transform: translateY(0); }
}
/* BODY: info column + browser frame */
.dz-prod__body {
display: grid;
grid-template-columns: 380px 1fr;
align-items: stretch;
}
@media (max-width: 900px) {
.dz-prod__body { grid-template-columns: 1fr; }
}
.dz-prod__body.dz-prod--teal { --pa-accent: var(--twinms-teal-2); --pa-soft: var(--twinms-soft); --pa-border: var(--twinms-border); --pa-glow: var(--twinms-glow); }
.dz-prod__body.dz-prod--aqua { --pa-accent: var(--dz-aqua); --pa-soft: var(--aqua-soft); --pa-border: var(--aqua-border); --pa-glow: var(--aqua-glow); }
/* INFO COLUMN — top group + bottom group with space-between to spread content */
.dz-prod__info {
padding: 18px 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
border-right: 1px solid rgba(255,255,255,0.06);
background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
}
@media (max-width: 900px) {
.dz-prod__info { border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
}
.dz-prod__info-top,
.dz-prod__info-bottom {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Tab-bar active logo — keeps the white glass panel for clean visibility
of the brand-on-white logo file. */
.dz-prod__active-logo-mark {
display: inline-flex;
align-items: center;
padding: 7px 14px;
border-radius: 9px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.18);
width: fit-content;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.5),
0 8px 22px -8px rgba(0, 0, 0, 0.5),
0 0 32px -10px rgba(255, 255, 255, 0.18);
transition: box-shadow 350ms var(--dz-ease-fade), transform 350ms var(--dz-ease-spring);
}
/* Info-column logo — no panel; clean PNG on dark bg with soft colored glow
pulled from the active product's accent (teal for TwinMs, aqua for TwinMaq). */
.dz-prod__logo {
display: block;
height: 48px;
width: auto;
max-width: 240px;
object-fit: contain;
object-position: left center;
filter:
drop-shadow(0 0 8px var(--pa-glow))
drop-shadow(0 0 24px color-mix(in srgb, var(--pa-accent) 35%, transparent));
}
/* Fallback for browsers without color-mix support — uses a generic soft halo. */
@supports not (color: color-mix(in srgb, red, blue)) {
.dz-prod__logo {
filter:
drop-shadow(0 0 8px var(--pa-glow))
drop-shadow(0 0 22px var(--pa-glow));
}
}
.dz-prod__tagline {
font-size: 12.5px;
line-height: 1.5;
color: rgba(255,255,255,0.62);
margin: 0;
}
.dz-prod__tagline strong { color: var(--dz-white); font-weight: 600; }
/* Fused pill list — industries (accent-colored) + features (muted) in one wrapped row */
.dz-prod__pills {
display: flex;
flex-wrap: wrap;
gap: 5px;
list-style: none;
margin: 0;
padding: 0;
}
.dz-prod__pill {
padding: 4px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
font-size: 10.5px;
font-weight: 500;
color: rgba(255,255,255,0.62);
}
.dz-prod__pill--industry {
background: var(--pa-soft);
border-color: var(--pa-border);
color: var(--pa-accent);
font-weight: 600;
letter-spacing: 0.04em;
}
/* STATS: hero ring + sparklines */
.dz-prod__stats {
display: grid;
grid-template-columns: auto 1fr;
gap: 12px;
padding: 10px 12px;
border-radius: 10px;
background: rgba(0,0,0,0.22);
border: 1px solid rgba(255,255,255,0.06);
align-items: stretch;
}
.dz-prod__stats-hero {
display: flex;
align-items: center;
gap: 10px;
padding-right: 12px;
border-right: 1px solid rgba(255,255,255,0.08);
}
.dz-prod__ring {
position: relative;
width: 54px;
height: 54px;
flex: 0 0 auto;
}
.dz-prod__ring svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.dz-prod__ring-bg, .dz-prod__ring-fg {
fill: none;
stroke-width: 5;
}
.dz-prod__ring-bg { stroke: rgba(255,255,255,0.08); }
.dz-prod__ring-fg {
stroke: var(--pa-accent);
stroke-linecap: round;
filter: drop-shadow(0 0 6px var(--pa-glow));
/* Initial state — empty ring; fills via animation when section enters viewport */
stroke-dasharray: 0 176;
animation: dz-prod-ring-fill 1.4s 0.15s var(--dz-ease-spring) forwards;
}
@keyframes dz-prod-ring-fill {
to { stroke-dasharray: var(--ring-target, 137) 176; }
}
.dz-prod__ring-num {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.dz-prod__ring-num strong {
font-size: 17px;
font-weight: 700;
line-height: 1;
color: var(--pa-accent);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.dz-prod__ring-num span {
font-size: 8px;
color: rgba(255,255,255,0.45);
letter-spacing: 0.05em;
margin-top: 2px;
}
.dz-prod__hero-text { display: flex; flex-direction: column; gap: 2px; }
.dz-prod__hero-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pa-accent);
}
.dz-prod__hero-sub {
font-size: 11.5px;
color: rgba(255,255,255,0.62);
line-height: 1.4;
max-width: 16ch;
}
.dz-prod__stats-list {
display: flex;
flex-direction: column;
gap: 8px;
justify-content: center;
}
.dz-prod__stats-item {
display: flex;
flex-direction: column;
gap: 4px;
padding: 6px 0 4px;
border-bottom: 1px dashed rgba(255,255,255,0.06);
}
.dz-prod__stats-item:last-child { border-bottom: 0; padding-bottom: 0; }
.dz-prod__stats-top {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.dz-prod__stats-label {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.62);
}
.dz-prod__stats-num {
font-size: 16px;
font-weight: 700;
color: var(--dz-white);
line-height: 1;
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.dz-prod__stats-num small {
font-size: 10px;
font-weight: 500;
color: rgba(255,255,255,0.45);
margin-left: 1px;
}
.dz-prod__spark {
height: 16px;
width: 100%;
overflow: visible;
}
.dz-prod__spark-line {
fill: none;
stroke: var(--pa-accent);
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
/* Draw-in animation via dashoffset (path uses pathLength="100" so dashes are normalized) */
stroke-dasharray: 100 100;
stroke-dashoffset: 100;
animation: dz-prod-spark-draw 1.4s 0.5s ease-out forwards;
}
.dz-prod__stats-item:nth-child(2) .dz-prod__spark-line {
animation-delay: 0.85s;
}
@keyframes dz-prod-spark-draw {
to { stroke-dashoffset: 0; }
}
.dz-prod__spark-area {
fill: var(--pa-soft);
stroke: none;
opacity: 0;
animation: dz-prod-fade-in 0.6s 1.4s ease-out forwards;
}
.dz-prod__stats-item:nth-child(2) .dz-prod__spark-area {
animation-delay: 1.75s;
}
@keyframes dz-prod-fade-in {
to { opacity: 1; }
}
.dz-prod__spark-dot {
fill: var(--pa-accent);
filter: drop-shadow(0 0 4px var(--pa-accent));
opacity: 0;
r: 0;
animation: dz-prod-dot-pop 0.5s 1.7s ease-out forwards;
}
.dz-prod__stats-item:nth-child(2) .dz-prod__spark-dot {
animation-delay: 2.05s;
}
@keyframes dz-prod-dot-pop {
0% { opacity: 0; r: 0; }
100% { opacity: 1; r: 1.8; }
}
/* CTA — sits in info-bottom group, no margin-top auto needed */
.dz-prod__cta {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 16px;
border-radius: 9px;
background: var(--pa-accent);
color: var(--dz-navy-deep);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
text-decoration: none;
width: fit-content;
box-shadow: 0 6px 16px -4px var(--pa-glow);
transition: all 250ms var(--dz-ease-fade);
}
.dz-prod__cta:hover {
transform: translateY(-1px);
box-shadow: 0 10px 22px -6px var(--pa-glow);
}
.dz-prod__cta svg { width: 11px; height: 11px; }
/* BROWSER FRAME with FULL uncropped UI */
.dz-prod__stage-wrap {
padding: 14px;
background:
radial-gradient(600px 280px at 50% 0%, var(--pa-soft), transparent 65%),
linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
display: flex;
align-items: center;
justify-content: center;
}
.dz-prod__browser {
width: 100%;
max-width: 760px;
border-radius: 10px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.12);
background: #0e1a26;
box-shadow:
0 18px 40px -14px rgba(0,0,0,0.7),
0 0 0 1px rgba(255,255,255,0.04);
transition: transform 400ms var(--dz-ease-spring), box-shadow 400ms var(--dz-ease-fade);
}
.dz-prod__browser:hover {
transform: translateY(-2px);
box-shadow:
0 24px 48px -14px rgba(0,0,0,0.8),
0 0 0 1px var(--pa-glow);
}
.dz-prod__browser-bar {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 12px;
padding: 8px 12px;
background: rgba(15,26,38,0.95);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dz-prod__browser-dots { display: inline-flex; gap: 5px; }
.dz-prod__browser-dot { width: 9px; height: 9px; border-radius: 999px; }
.dz-prod__browser-dot--red { background: #ff6058; }
.dz-prod__browser-dot--yellow { background: #ffbe2f; }
.dz-prod__browser-dot--green { background: #2acb43; }
.dz-prod__browser-url {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 5px 12px;
border-radius: 6px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.06);
font-size: 11px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
color: rgba(255,255,255,0.7);
max-width: 360px;
margin: 0 auto;
}
.dz-prod__browser-url svg { width: 11px; height: 11px; opacity: 0.5; }
.dz-prod__browser-menu {
color: rgba(255,255,255,0.4);
font-size: 14px;
letter-spacing: 0.2em;
}
.dz-prod__browser-screen {
background: #0e1a26;
line-height: 0;
aspect-ratio: 16 / 10;
overflow: hidden;
}
.dz-prod__browser-screen img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
/* ── Magnetic CTA — pill button with nested icon island ── */
.dz-pill {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 8px 8px 8px 22px;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: transform 400ms var(--dz-ease-spring), background 400ms var(--dz-ease-fade), border-color 400ms var(--dz-ease-fade);
white-space: nowrap;
font-family: var(--dz-font);
}
.dz-pill--aqua {
background: var(--dz-aqua);
color: var(--dz-navy);
}
.dz-pill--aqua:hover { transform: scale(1.02); }
.dz-pill--aqua:active { transform: scale(0.98); }
.dz-pill--ghost {
background: rgba(255,255,255,0.04);
color: var(--dz-white);
border-color: rgba(255,255,255,0.16);
}
.dz-pill--ghost:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(79,200,244,0.4);
}
.dz-pill__icon {
width: 32px; height: 32px;
border-radius: 999px;
background: rgba(0,0,0,0.18);
display: grid; place-items: center;
transition: transform 400ms var(--dz-ease-spring);
}
.dz-pill--ghost .dz-pill__icon {
background: rgba(79,200,244,0.18);
}
.dz-pill:hover .dz-pill__icon {
transform: translate(2px, -1px);
}
/* ──────────────────────────────────────────────────────────────────────────
9 · FeaturedCaseStudy — wide bento with floating overlay card
────────────────────────────────────────────────────────────────────────── */
.dz-case__frame {
margin-top: 48px;
position: relative;
}
.dz-case__visual {
height: clamp(320px, 38vw, 480px);
border-radius: 28px;
background: linear-gradient(135deg, var(--dz-navy) 0%, var(--dz-navy-deep) 60%, #0a1620 100%);
position: relative;
overflow: hidden;
border: 1px solid rgba(79,200,244,0.12);
}
.dz-case__visual::before {
content: "";
position: absolute; inset: 0;
background-image: url('../assets/patterns/dz-pattern-dark.svg');
background-size: 140px;
opacity: 0.18;
-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.dz-case__visual::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(800px 400px at 80% 30%, rgba(79,200,244,0.16), transparent 60%);
}
.dz-case__visual-label {
position: absolute; top: 28px; left: 32px;
font-size: 11px; font-weight: 600;
letter-spacing: 0.25em;
text-transform: uppercase;
color: rgba(255,255,255,0.5);
}
.dz-case__overlay {
position: absolute;
bottom: 28px; left: 28px; right: 28px;
max-width: 540px;
}
@media (max-width: 768px) {
.dz-case__overlay { left: 18px; right: 18px; bottom: 18px; }
}
.dz-case__overlay .dz-bezel__core {
padding: 28px;
gap: 12px;
}
.dz-case__sector {
font-size: 11px; font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--dz-aqua);
}
.dz-case__name {
font-size: clamp(22px, 2.2vw, 32px);
font-weight: 700;
color: var(--dz-white);
margin: 0;
line-height: 1.15;
letter-spacing: -0.015em;
}
.dz-case__scope {
font-size: 13.5px;
line-height: 1.6;
color: rgba(255,255,255,0.65);
margin: 0;
}
.dz-case__outcome {
display: flex;
align-items: baseline;
gap: 14px;
padding: 16px 0 0;
border-top: 1px solid rgba(255,255,255,0.08);
margin-top: 6px;
}
.dz-case__outcome-num {
font-size: 36px;
font-weight: 700;
color: var(--dz-aqua);
line-height: 1;
letter-spacing: -0.02em;
}
.dz-case__outcome-label {
font-size: 12.5px;
color: rgba(255,255,255,0.6);
line-height: 1.45;
}
/* ──────────────────────────────────────────────────────────────────────────
10 · WhyDesignZone — Spotlight Auto-Carousel.
Featured tile auto-rotates every 4s through 5 differentiators (BSI ·
Autodesk · TwinMs/Maq · ISO 19650 · AI). Right-rail pills allow manual
selection. Bottom strip displays real credential logos in white panels.
────────────────────────────────────────────────────────────────────────── */
.dz-why {
background: var(--dz-navy-deep);
padding: 32px clamp(20px, 5vw, 64px);
position: relative;
overflow: hidden;
isolation: isolate;
}
.dz-why *,
.dz-why *::before,
.dz-why *::after { box-sizing: border-box; }
.dz-why__inner {
max-width: 1280px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* HEAD — title + meta */
.dz-why__head {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: end;
margin-bottom: 22px;
}
@media (max-width: 760px) {
.dz-why__head { grid-template-columns: 1fr; align-items: start; gap: 12px; }
}
.dz-why__head-left {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.dz-why__title {
font-size: clamp(34px, 4.6vw, 64px);
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.025em;
margin: 0;
color: var(--dz-white);
max-width: 22ch;
}
.dz-why__title em { color: var(--dz-aqua); font-style: normal; }
.dz-why__meta {
text-align: right;
display: flex;
flex-direction: column;
gap: 2px;
align-items: flex-end;
}
@media (max-width: 760px) {
.dz-why__meta { align-items: flex-start; text-align: left; }
}
.dz-why__meta-num {
font-size: clamp(20px, 2.4vw, 30px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: var(--dz-aqua);
font-variant-numeric: tabular-nums;
}
.dz-why__meta-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
color: rgba(255,255,255,0.62);
text-transform: uppercase;
}
/* STAGE — spotlight + side rail */
.dz-why__stage {
display: grid;
grid-template-columns: 1fr 280px;
gap: 14px;
margin-bottom: 14px;
align-items: stretch;
}
@media (max-width: 900px) {
.dz-why__stage { grid-template-columns: 1fr; }
}
/* SPOTLIGHT — featured slide */
.dz-why__spotlight {
position: relative;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
background: linear-gradient(135deg, rgba(255,255,255,0.025), rgba(79,200,244,0.04));
padding: 32px 36px;
overflow: hidden;
min-height: 280px;
}
.dz-why__spotlight::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(79,200,244,0.4), transparent);
}
.dz-why__spotlight::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(600px 300px at 80% 50%, rgba(79,200,244,0.08), transparent 65%);
pointer-events: none;
}
.dz-why__slide {
position: absolute;
inset: 0;
padding: 32px 36px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 14px;
opacity: 0;
transform: translateY(20px);
transition: opacity 500ms var(--dz-ease-fade), transform 500ms var(--dz-ease-spring);
pointer-events: none;
}
.dz-why__slide--active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.dz-why__slide-step {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--dz-aqua);
}
.dz-why__slide-big {
font-size: clamp(40px, 5vw, 68px);
font-weight: 700;
line-height: 0.95;
letter-spacing: -0.035em;
color: var(--dz-white);
font-variant-numeric: tabular-nums;
margin: 0;
}
.dz-why__slide-big em {
color: var(--dz-aqua);
font-style: normal;
}
.dz-why__slide-claim {
font-size: 16px;
font-weight: 500;
color: rgba(255,255,255,0.85);
line-height: 1.3;
max-width: 40ch;
margin: 0;
}
.dz-why__slide-claim strong { color: var(--dz-white); font-weight: 700; }
.dz-why__slide-detail {
font-size: 13px;
color: rgba(255,255,255,0.62);
line-height: 1.55;
max-width: 56ch;
margin: 0;
}
/* RAIL — clickable pills with active progress bar */
.dz-why__rail {
display: flex;
flex-direction: column;
gap: 8px;
}
.dz-why__pill {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 11px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.025);
cursor: pointer;
transition: all 300ms var(--dz-ease-fade);
text-align: left;
color: rgba(255,255,255,0.55);
font-family: inherit;
flex: 1;
position: relative;
overflow: hidden;
}
.dz-why__pill:hover {
border-color: rgba(255,255,255,0.18);
color: var(--dz-white);
}
.dz-why__pill--active {
border-color: rgba(79,200,244,0.45);
background: rgba(79,200,244,0.08);
color: var(--dz-white);
}
/* Active pill shows a 4-second progress bar at the bottom */
.dz-why__pill--active::after {
content: "";
position: absolute;
bottom: 0; left: 0;
height: 2px;
background: var(--dz-aqua);
box-shadow: 0 0 8px var(--dz-aqua);
animation: dz-why-progress 4s linear forwards;
}
@keyframes dz-why-progress {
from { width: 0; }
to { width: 100%; }
}
.dz-why__pill-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.dz-why__pill-h {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
}
.dz-why__pill-sub {
font-size: 11px;
opacity: 0.7;
}
/* STRIP — credential badges */
.dz-why__strip {
display: flex;
gap: 14px;
align-items: center;
padding: 14px 18px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.08);
background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
}
.dz-why__strip-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--dz-aqua);
padding-right: 16px;
border-right: 1px solid rgba(255,255,255,0.06);
}
.dz-why__strip-badges {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
}
.dz-why__strip-frame {
padding: 8px 14px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.92);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
transition: transform 250ms var(--dz-ease-spring);
}
.dz-why__strip-frame:hover { transform: translateY(-2px); }
.dz-why__strip-frame img {
display: block;
height: 32px;
width: auto;
max-width: 140px;
object-fit: contain;
mix-blend-mode: multiply;
}
/* ──────────────────────────────────────────────────────────────────────────
11 · FaqSection — minimal, hairline dividers, cubic-bezier expand
────────────────────────────────────────────────────────────────────────── */
.dz-faq__list {
margin-top: 40px;
max-width: 920px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.dz-faq-item {
border-bottom: 1px solid rgba(255,255,255,0.08);
transition: background 400ms var(--dz-ease-fade);
}
.dz-faq-item[open] { background: rgba(79,200,244,0.02); }
.dz-faq-item summary {
padding: 22px 0;
font-size: clamp(16px, 1.3vw, 19px);
font-weight: 500;
color: var(--dz-white);
cursor: pointer;
list-style: none;
display: flex; justify-content: space-between; align-items: center;
gap: 24px;
letter-spacing: -0.01em;
transition: color 300ms var(--dz-ease-fade);
}
.dz-faq-item summary::-webkit-details-marker { display: none; }
.dz-faq-item summary:hover { color: var(--dz-aqua); }
.dz-faq-item summary::after {
content: "+";
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 999px;
background: rgba(79,200,244,0.08);
border: 1px solid rgba(79,200,244,0.25);
color: var(--dz-aqua);
font-size: 18px; font-weight: 300;
display: grid; place-items: center;
transition: transform 500ms var(--dz-ease-spring), background 300ms var(--dz-ease-fade);
}
.dz-faq-item[open] summary::after {
content: "−";
background: rgba(79,200,244,0.18);
transform: rotate(180deg);
}
.dz-faq-item__body {
padding: 0 0 24px;
font-size: 14.5px;
line-height: 1.7;
color: rgba(255,255,255,0.7);
max-width: 700px;
}
/* ──────────────────────────────────────────────────────────────────────────
12 · CtaStrip — Centered title · "What happens next" steps left ·
inquiry form right. Vertical step animation triggers on scroll into view.
────────────────────────────────────────────────────────────────────────── */
.dz-cta {
background: var(--dz-navy-deep);
padding: clamp(64px, 6vw, 88px) clamp(20px, 5vw, 64px) clamp(56px, 5vw, 72px); /* taller so the head and the body each get room to breathe */
position: relative;
overflow: hidden;
isolation: isolate;
}
.dz-cta *,
.dz-cta *::before,
.dz-cta *::after { box-sizing: border-box; }
.dz-cta::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(800px 320px at 70% 50%, rgba(79,200,244,0.06), transparent 65%),
radial-gradient(600px 280px at 10% 100%, rgba(79,200,244,0.04), transparent 65%);
pointer-events: none;
z-index: 0;
}
.dz-cta__inner {
max-width: 1280px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* CENTERED TITLE BLOCK */
.dz-cta__head {
text-align: center;
margin-bottom: clamp(48px, 5vw, 72px); /* generous breathing room before the steps + form columns */
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.dz-cta__title {
font-size: clamp(34px, 4.6vw, 64px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.035em;
color: var(--dz-white);
margin: 0;
max-width: 22ch;
}
.dz-cta__title em { color: var(--dz-aqua); font-style: normal; }
.dz-cta__lead {
font-size: 12.5px;
color: rgba(255,255,255,0.42);
line-height: 1.5;
max-width: 56ch;
margin: 0;
letter-spacing: 0.005em;
}
.dz-cta__lead strong { color: var(--dz-white); font-weight: 600; }
/* BODY: data left, form right */
.dz-cta__body {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 32px;
align-items: stretch;
margin: 0 auto;
}
@media (max-width: 800px) {
.dz-cta__body { grid-template-columns: 1fr; }
}
/* ─────── LEFT — important data ─────── */
.dz-cta__data {
display: flex;
flex-direction: column;
gap: 18px;
justify-content: space-between;
padding: 4px 0;
}
.dz-cta__data-eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--dz-aqua);
}
/* "What happens next" — animated vertical steps */
.dz-cta__steps {
--cta-step-gap: 44px; /* vertical breathing room between steps */
display: flex;
flex-direction: column;
gap: var(--cta-step-gap);
margin: 14px 0 0;
padding: 0;
list-style: none;
}
.dz-cta__step {
position: relative;
display: grid;
grid-template-columns: 32px 1fr;
gap: 14px;
align-items: start;
}
/* Connecting line from this step's number down to the next step's number */
.dz-cta__step:not(:last-child)::after {
content: "";
position: absolute;
left: 16px; /* center of 32px circle */
top: 36px; /* just below the circle */
bottom: calc(-1 * var(--cta-step-gap) + 4px); /* extend through the gap, leave 4px above next circle */
width: 1px;
background: linear-gradient(180deg, rgba(79,200,244,0.45) 0%, rgba(79,200,244,0.18) 100%);
transform-origin: top center;
transform: scaleY(0);
transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1);
}
.dz-cta__step-num {
width: 32px; height: 32px;
border-radius: 999px;
background: rgba(79,200,244,0.12);
border: 1px solid rgba(79,200,244,0.45);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
color: var(--dz-aqua);
font-variant-numeric: tabular-nums;
flex: 0 0 auto;
/* Initial state — animates in via .dz-cta__steps--in trigger */
opacity: 0;
transform: scale(0.3);
transition: opacity 400ms, transform 500ms var(--dz-ease-spring), box-shadow 400ms;
}
.dz-cta__step-text {
display: flex;
flex-direction: column;
gap: 3px;
opacity: 0;
transform: translateX(-12px);
transition: opacity 500ms, transform 500ms var(--dz-ease-spring);
}
.dz-cta__step-h {
font-size: 14px;
font-weight: 700;
color: var(--dz-white);
margin: 0;
letter-spacing: -0.01em;
}
.dz-cta__step-sub {
font-size: 12.5px;
color: rgba(255,255,255,0.62);
line-height: 1.45;
margin: 0;
}
/* Animation triggers — added when steps scroll into view */
.dz-cta__steps--in .dz-cta__step:nth-child(1) .dz-cta__step-num { transition-delay: 100ms; opacity: 1; transform: scale(1); box-shadow: 0 0 14px rgba(79,200,244,0.4); }
.dz-cta__steps--in .dz-cta__step:nth-child(2) .dz-cta__step-num { transition-delay: 750ms; opacity: 1; transform: scale(1); box-shadow: 0 0 14px rgba(79,200,244,0.4); }
.dz-cta__steps--in .dz-cta__step:nth-child(3) .dz-cta__step-num { transition-delay: 1400ms; opacity: 1; transform: scale(1); box-shadow: 0 0 14px rgba(79,200,244,0.4); }
.dz-cta__steps--in .dz-cta__step:nth-child(1) .dz-cta__step-text { transition-delay: 200ms; opacity: 1; transform: translateX(0); }
.dz-cta__steps--in .dz-cta__step:nth-child(2) .dz-cta__step-text { transition-delay: 850ms; opacity: 1; transform: translateX(0); }
.dz-cta__steps--in .dz-cta__step:nth-child(3) .dz-cta__step-text { transition-delay: 1500ms; opacity: 1; transform: translateX(0); }
.dz-cta__steps--in .dz-cta__step:nth-child(1)::after { transition-delay: 450ms; transform: scaleY(1); }
.dz-cta__steps--in .dz-cta__step:nth-child(2)::after { transition-delay: 1100ms; transform: scaleY(1); }
/* After the initial settle, soften the glow on the last number */
.dz-cta__steps--in .dz-cta__step:nth-child(3) .dz-cta__step-num {
animation: dz-cta-num-settle 800ms 2200ms var(--dz-ease-fade) forwards;
}
@keyframes dz-cta-num-settle {
to { box-shadow: none; }
}
/* Trust stats row */
.dz-cta__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 14px 16px;
border-radius: 12px;
background: rgba(0,0,0,0.22);
border: 1px solid rgba(255,255,255,0.06);
}
.dz-cta__stat {
display: flex;
flex-direction: column;
gap: 3px;
padding-right: 12px;
border-right: 1px solid rgba(255,255,255,0.06);
}
.dz-cta__stat:last-child { border-right: 0; padding-right: 0; }
.dz-cta__stat-num {
font-size: 18px;
font-weight: 700;
color: var(--dz-aqua);
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.dz-cta__stat-num small { font-size: 11px; color: rgba(255,255,255,0.45); margin-left: 1px; }
.dz-cta__stat-label {
font-size: 10px;
color: rgba(255,255,255,0.45);
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* (Endorsement strip removed — now lives in the footer to avoid duplication) */
/* ─────── RIGHT — form card ─────── */
.dz-cta__form-card {
padding: 26px 28px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.1);
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(79,200,244,0.04));
position: relative;
overflow: hidden;
}
.dz-cta__form-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(79,200,244,0.5), transparent);
}
.dz-cta__form-eyebrow {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--dz-aqua);
margin-bottom: 14px;
display: block;
}
.dz-cta__form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.dz-cta__field { display: flex; flex-direction: column; gap: 5px; }
.dz-cta__field--full { grid-column: 1 / -1; }
.dz-cta__field label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255,255,255,0.6);
}
.dz-cta__field input,
.dz-cta__field select,
.dz-cta__field textarea {
padding: 12px 14px;
border-radius: 9px;
background: rgba(0,0,0,0.28);
border: 1px solid rgba(255,255,255,0.1);
color: var(--dz-white);
font-family: inherit;
font-size: 13.5px;
transition: all 200ms var(--dz-ease-fade);
}
.dz-cta__field input::placeholder,
.dz-cta__field textarea::placeholder { color: rgba(255,255,255,0.22); }
/* When the project-type select hasn't been chosen yet, dim the prompt
so it reads as a placeholder, not a real selection. */
.dz-cta__field select:has(option[value=""]:checked) { color: rgba(255,255,255,0.32); }
.dz-cta__field input:focus,
.dz-cta__field select:focus,
.dz-cta__field textarea:focus {
outline: none;
border-color: rgba(79,200,244,0.45);
background: rgba(0,0,0,0.4);
box-shadow: 0 0 0 3px rgba(79,200,244,0.12);
}
.dz-cta__field textarea { resize: vertical; min-height: 70px; font-family: inherit; }
.dz-cta__form-foot {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 4px;
}
.dz-cta__submit {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
border-radius: 10px;
background: var(--dz-aqua);
color: var(--dz-navy-deep);
font-size: 13px;
font-weight: 700;
letter-spacing: -0.005em;
border: 0;
cursor: pointer;
box-shadow: 0 12px 28px -10px rgba(79,200,244,0.55);
transition: transform 200ms var(--dz-ease-spring), box-shadow 200ms;
font-family: inherit;
}
.dz-cta__submit:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -12px rgba(79,200,244,0.65); }
.dz-cta__submit svg { width: 13px; height: 13px; }
.dz-cta__foot-note {
font-size: 11px;
color: rgba(255,255,255,0.45);
display: inline-flex;
align-items: center;
gap: 6px;
}
.dz-cta__foot-note svg { width: 12px; height: 12px; }
/* ════════════════════════════════════════════════════════════
SITE FOOTER — 5-col sitemap + hover-popover offices
Source mockup: mockups-footer.html
════════════════════════════════════════════════════════════ */
.ftr {
/* Footer-scoped tokens (light text on dark bg) */
--dz-text-muted: rgba(255,255,255,0.62);
--dz-text-dim: rgba(255,255,255,0.42);
--dz-text-faint: rgba(255,255,255,0.28);
--aqua-soft: rgba(79,200,244,0.08);
--aqua-border: rgba(79,200,244,0.45);
--hairline: rgba(255,255,255,0.08);
--hairline-soft: rgba(255,255,255,0.05);
background: var(--dz-navy-deep);
color: var(--dz-white);
padding: 28px clamp(20px, 5vw, 56px) 18px;
position: relative;
overflow: hidden;
font-family: var(--dz-font);
}
.ftr a { color: inherit; text-decoration: none; }
.ftr button { font-family: inherit; }
.ftr::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: radial-gradient(700px 220px at 88% -10%, rgba(79,200,244,0.045), transparent 60%);
}
/* The single emphasized seam — glowing aqua gradient at the very top of
the footer, marking the boundary between the CTA section and the footer.
Replaces the old subtle border-top hairline. */
.ftr::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.12) 14%,
rgba(79, 200, 244, 0.65) 50%,
rgba(255, 255, 255, 0.12) 86%,
transparent 100%
);
box-shadow: 0 0 14px 1px rgba(79, 200, 244, 0.18);
pointer-events: none;
z-index: 1;
}
.ftr__inner {
max-width: 1280px; margin: 0 auto;
position: relative; z-index: 2;
}
/* Top strip — sits above the footer's main grid.
No border-bottom; the only emphasized line in the footer is the
glowing seam at the very top of .ftr (see .ftr::after above). */
.ftr__top {
display: flex; justify-content: space-between; align-items: center;
gap: 24px;
padding-bottom: 22px;
}
.ftr-logo img {
display: block; height: 36px; width: auto; max-width: 180px;
object-fit: contain; filter: brightness(0) invert(1);
}
.ftr-lang { display: inline-flex; align-items: center; gap: 14px; }
.ftr-lang button {
border: 0; background: transparent; padding: 0;
font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
color: var(--dz-text-faint); cursor: pointer;
transition: color 200ms var(--dz-ease-fade); position: relative;
}
.ftr-lang button:hover { color: var(--dz-white); }
.ftr-lang button.is-active { color: var(--dz-aqua); }
.ftr-lang button.is-active::after {
content: ""; position: absolute;
left: 0; right: 0; bottom: -6px; height: 1px;
background: var(--dz-aqua); box-shadow: 0 0 6px rgba(79,200,244,0.5);
}
/* Main 5-col grid */
.ftr__main {
display: grid;
/* 6 cols: brand + Services + Products + Resources + Company + Offices */
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr 1.1fr;
gap: clamp(24px, 4vw, 44px);
padding: 28px 0 24px;
}
@media (max-width: 1080px) {
.ftr__main { grid-template-columns: 1.4fr repeat(5, 1fr); gap: 28px; }
}
@media (max-width: 880px) {
.ftr__main { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 540px) {
.ftr__main { grid-template-columns: 1fr; gap: 26px; }
}
/* Brand zone */
.ftr-brand__tag {
font-size: 14.5px; line-height: 1.5; color: var(--dz-text-on-dark-muted);
margin: 0 0 18px; max-width: 28ch; font-weight: 400;
}
.ftr-brand__tag strong { color: var(--dz-white); font-weight: 600; }
.ftr-endorse {
display: flex; align-items: center; gap: 18px; margin-top: 4px;
}
.ftr-endorse__label {
font-size: 9px; font-weight: 700; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--dz-text-faint); margin-right: 2px;
}
.ftr-endorse img {
display: block; height: 22px; width: auto;
filter: brightness(0) invert(1); opacity: 0.55;
transition: opacity 200ms var(--dz-ease-fade);
}
.ftr-endorse img:hover { opacity: 0.95; }
.ftr-reach__list {
list-style: none; margin: 22px 0 0; padding: 0;
display: flex; flex-direction: column; gap: 8px;
}
.ftr-reach__list a {
display: inline-flex; align-items: center; gap: 8px;
font-size: 13.5px; color: var(--dz-white); font-weight: 500;
transition: color 200ms var(--dz-ease-fade);
}
.ftr-reach__list a:hover { color: var(--dz-aqua); }
.ftr-reach__list svg {
width: 13px; height: 13px; color: var(--dz-aqua);
flex-shrink: 0; opacity: 0.85;
}
/* Link columns */
.ftr-col__heading {
font-size: 10px; font-weight: 700; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--dz-text-faint);
margin: 0 0 14px;
}
.ftr-col__list {
list-style: none; margin: 0; padding: 0;
display: flex; flex-direction: column; gap: 9px;
}
.ftr-col__list a {
display: inline-block; font-size: 13.5px; color: var(--dz-text-on-dark-muted);
transition: all 220ms var(--dz-ease-fade); position: relative;
}
.ftr-col__list a:hover { color: var(--dz-white); transform: translateX(2px); }
/* Offices column — vertical list of office items.
Each is a 2-line stack: city (white bold, with optional aqua HQ chip) + country (muted). */
.ftr-col__list--offices {
gap: 16px; /* slightly bigger gap because each item is 2 lines */
}
.ftr-col__list--offices li {
display: flex;
flex-direction: column;
gap: 2px;
cursor: default;
/* Shrink to content width so the hover popover (positioned 12px to the
right of the 's right edge) lands close to the city text instead
of out at the column's edge. */
align-self: flex-start;
}
.ftr-office__city {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13.5px;
font-weight: 600;
color: var(--dz-white);
letter-spacing: -0.005em;
}
/* Pulsing aqua dot before each office city — same vibe as the legacy
inline office strip. Uses the @keyframes ofcPing defined further below. */
.ftr-office__city::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--dz-aqua);
opacity: 0.5;
box-shadow: 0 0 0 0 rgba(79, 200, 244, 0.4);
animation: ofcPing 2.2s ease-out infinite;
flex-shrink: 0;
}
.ftr-office__hq {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--dz-aqua);
background: rgba(79, 200, 244, 0.10);
border: 1px solid rgba(79, 200, 244, 0.30);
border-radius: 4px;
padding: 1px 5px;
line-height: 1;
text-transform: uppercase;
}
.ftr-office__country {
font-size: 12px;
font-weight: 400;
color: var(--dz-text-on-dark-muted);
}
/* Hover popover on each office .
Reuses the .ofc-pop dark-glass styles defined for the legacy chip row,
but repositions the popover to the LEFT of the office item — the offices
column sits at the far-right edge of the footer, so there's no room to
pop right but plenty of room to pop left. */
.ftr-col__list--offices li {
position: relative;
}
/* Popover sits to the RIGHT of each office item (in the empty area between the
offices column and the viewport edge), so it doesn't cover the city/country
text. Width tightened with border-box to fit in the available right-gutter. */
.ftr-col__list--offices li .ofc-pop {
bottom: auto;
top: 50%;
left: calc(100% + 12px);
right: auto;
width: 220px;
box-sizing: border-box;
transform: translateY(-50%) translateX(-8px) scale(0.96);
}
.ftr-col__list--offices li:hover .ofc-pop,
.ftr-col__list--offices li:focus-within .ofc-pop {
opacity: 1;
transform: translateY(-50%) translateX(0) scale(1);
pointer-events: auto;
}
.ftr-col__list a:hover::before { opacity: 1; transform: translateX(0); }
.ftr-col__list a::before {
content: ""; position: absolute; left: -10px; top: 50%;
width: 4px; height: 1px; background: var(--dz-aqua);
opacity: 0; transform: translateX(-4px);
transition: all 220ms var(--dz-ease-fade);
}
/* Offices: hover-popover line */
.ftr .ofc-line {
display: flex; align-items: center; gap: 4px 18px;
flex-wrap: wrap;
padding: 18px 0 8px;
font-size: 12px;
color: var(--dz-text-faint);
}
.ftr .ofc-line__label {
font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
margin-right: 10px;
}
.ftr .ofc-chip {
position: relative;
border: 0; background: transparent;
padding: 6px 0;
font-family: inherit; font-size: 13px; font-weight: 500;
color: var(--dz-text-on-dark-muted); cursor: pointer;
transition: color 200ms var(--dz-ease-fade);
display: inline-flex; align-items: center; gap: 8px;
}
.ftr .ofc-chip::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: var(--dz-aqua); opacity: 0.5;
box-shadow: 0 0 0 0 rgba(79,200,244,0.4);
animation: ofcPing 2.2s ease-out infinite;
}
.ftr .ofc-chip:hover { color: var(--dz-white); }
.ftr .ofc-chip:hover::before { opacity: 1; }
.ftr .ofc-chip .hq {
font-size: 8.5px; font-weight: 700; letter-spacing: 0.18em;
color: var(--dz-aqua); margin-left: 2px;
}
@keyframes ofcPing {
0% { box-shadow: 0 0 0 0 rgba(79,200,244,0.45); }
70% { box-shadow: 0 0 0 8px rgba(79,200,244,0); }
100% { box-shadow: 0 0 0 0 rgba(79,200,244,0); }
}
.ftr .ofc-pop {
position: absolute;
bottom: calc(100% + 14px);
left: 50%;
transform: translateX(-50%) translateY(8px) scale(0.96);
width: 280px;
padding: 14px 16px;
background: linear-gradient(180deg, rgba(26,45,62,0.98), rgba(14,25,37,0.98));
border: 1px solid rgba(79,200,244,0.22);
border-radius: 10px;
box-shadow: 0 18px 50px -12px rgba(0,0,0,0.7),
inset 0 1px 0 rgba(255,255,255,0.05);
opacity: 0; pointer-events: none;
transition: all 280ms var(--dz-ease-spring);
z-index: 5; text-align: left;
}
.ftr .ofc-pop::after {
content: ""; position: absolute;
top: 100%; left: 50%; transform: translateX(-50%);
border: 7px solid transparent;
border-top-color: rgba(14,25,37,0.98);
}
.ftr .ofc-chip:hover .ofc-pop,
.ftr .ofc-chip:focus-visible .ofc-pop {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
pointer-events: auto;
}
.ftr .ofc-pop__city {
font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em;
text-transform: uppercase; color: var(--dz-aqua);
margin-bottom: 8px; display: block;
}
.ftr .ofc-pop__addr {
font-size: 12.5px; line-height: 1.45; color: var(--dz-text-on-dark-muted);
margin: 0 0 10px;
}
.ftr .ofc-pop__phone {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12.5px; color: var(--dz-white); font-weight: 500;
font-variant-numeric: tabular-nums;
}
.ftr .ofc-pop__phone svg { width: 11px; height: 11px; color: var(--dz-aqua); opacity: 0.7; }
/* Bottom bar */
.ftr__bottom {
display: flex; justify-content: space-between; align-items: center;
gap: 20px; flex-wrap: wrap;
padding-top: 22px; margin-top: 8px;
}
.ftr-legal {
display: inline-flex; align-items: center; gap: 14px;
flex-wrap: wrap; font-size: 11.5px; color: var(--dz-text-faint);
}
.ftr-legal span.sep {
width: 2px; height: 2px; border-radius: 50%;
background: var(--dz-text-faint); display: inline-block;
}
.ftr-legal a { color: var(--dz-text-dim); transition: color 180ms var(--dz-ease-fade); }
.ftr-legal a:hover { color: var(--dz-white); }
.ftr-social { display: inline-flex; align-items: center; gap: 4px; }
.ftr-social a {
width: 30px; height: 30px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: 8px; color: var(--dz-text-on-dark-muted);
transition: all 220ms var(--dz-ease-spring); position: relative;
}
.ftr-social a:hover {
color: var(--dz-aqua); background: rgba(79,200,244,0.08);
transform: translateY(-1px);
}
.ftr-social svg { width: 14px; height: 14px; }
/* Staggered entrance cascade */
@keyframes ftrFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.ftr__top, .ftr__main > *, .ftr .ofc-line, .ftr__bottom {
animation: ftrFadeIn 600ms var(--dz-ease-fade) both;
}
.ftr__top { animation-delay: 0ms; }
.ftr__main > *:nth-child(1) { animation-delay: 80ms; }
.ftr__main > *:nth-child(2) { animation-delay: 140ms; }
.ftr__main > *:nth-child(3) { animation-delay: 200ms; }
.ftr__main > *:nth-child(4) { animation-delay: 260ms; }
.ftr__main > *:nth-child(5) { animation-delay: 320ms; }
.ftr__main > *:nth-child(6) { animation-delay: 380ms; } /* Offices column */
.ftr .ofc-line { animation-delay: 400ms; } /* legacy — JSX no longer renders this; kept as no-op */
.ftr__bottom { animation-delay: 460ms; }
/* ════════════════════════════════════════════════════════════
LIGHT THEME OVERRIDES — Section 2: GeoAnswer (Aqua Wash)
Background: --dz-aqua-wash · Title: centred · Cards: dark navy
════════════════════════════════════════════════════════════ */
.dz-geo-answer {
background: var(--dz-aqua-wash);
}
/* Kill the dark seam radial gradient (it's tuned for navy bg) */
.dz-geo-answer::before { display: none; }
/* Title alignment + light-theme colours */
.dz-geo-answer__header { align-items: center; text-align: center; }
.dz-geo-answer__title { color: var(--dz-navy); }
.dz-geo-answer__title em { color: var(--dz-aqua); }
.dz-geo-answer__sub { color: rgba(43,61,79,0.75); } /* per Figma 104:8 — navy at 75% */
.dz-geo-answer__sub strong { color: var(--dz-navy); }
/* Eyebrow on light bg: navy-deep text (full opacity) + aqua dot · per Figma 104:6 */
.dz-geo-answer .dz-eyebrow { color: var(--dz-navy-deep); opacity: 1; }
.dz-geo-answer .dz-eyebrow::before { background: var(--dz-aqua); box-shadow: 0 0 8px rgba(79,200,244,0.4); }
/* Inverted cards: dark navy index rows
rgba(43,61,79,…) below = --dz-navy at variable opacity (no color-mix to keep broad browser support) */
.dz-geo-answer .dz-geo-index { background: transparent; border-color: rgba(43,61,79,0.08); }
.dz-geo-answer .dz-geo-index__row {
background: var(--dz-navy);
color: rgba(255,255,255,0.92);
border-radius: 8px;
margin-bottom: 6px;
padding-left: 14px;
padding-right: 14px;
border: 1px solid rgba(255,255,255,0.05);
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 22px -8px rgba(43,61,79,0.35);
}
.dz-geo-answer .dz-geo-index__row:first-child { border-top: 1px solid rgba(255,255,255,0.05); }
.dz-geo-answer .dz-geo-index__row:hover {
background: var(--dz-navy-deep);
transform: translateY(-1px);
}
.dz-geo-answer .dz-geo-index__num { color: var(--dz-aqua); }
.dz-geo-answer .dz-geo-index__name { color: var(--dz-white); }
.dz-geo-answer .dz-geo-index__desc { color: rgba(255,255,255,0.65); }
/* "Explore all services" CTA: stays dark navy bg */
.dz-geo-answer .dz-geo-index__more {
background: var(--dz-navy);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 8px;
padding: 14px 18px;
margin-top: 6px;
}
.dz-geo-answer .dz-geo-index__more-label { color: var(--dz-white); }
.dz-geo-answer .dz-geo-index__more-meta { color: rgba(255,255,255,0.6); }
.dz-geo-answer .dz-geo-index__more-icon { color: var(--dz-aqua); }
/* ════════════════════════════════════════════════════════════
LIGHT THEME OVERRIDES — Section 4: Vision 2030 (Light Grey)
Background: --dz-gray · Title: centred · Pillars: dark navy
════════════════════════════════════════════════════════════ */
.dz-vision {
background: var(--dz-gray);
}
.dz-vision::before { display: none; }
/* Title alignment + colours — centred header */
.dz-vision__head { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.dz-vision__head-left { align-items: center; text-align: center; }
.dz-vision__title { color: var(--dz-navy); }
.dz-vision__title em { color: var(--dz-aqua); }
.dz-vision__meta-num { color: var(--dz-aqua); }
.dz-vision__meta-label { color: rgba(43,61,79,0.6); }
/* Eyebrow on light bg */
.dz-vision .dz-eyebrow { color: var(--dz-navy); opacity: 0.6; }
.dz-vision .dz-eyebrow::before { background: var(--dz-aqua); box-shadow: 0 0 8px rgba(79,200,244,0.4); }
/* Lead paragraph — Figma: 17px Regular navy, max-width 620px, sits below title */
.dz-vision__lead {
margin: 14px 0 0;
max-width: 620px;
font-size: 17px;
font-weight: 400;
line-height: 1.5;
color: var(--dz-navy);
opacity: 0.78;
}
/* Inverted pillar cards: dark navy on light grey
rgba(43,61,79,…) below = --dz-navy at variable opacity (no color-mix to keep broad browser support) */
.dz-vision__pillar {
background: var(--dz-navy);
color: rgba(255,255,255,0.92);
border: 1px solid rgba(255,255,255,0.05);
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 28px -10px rgba(43,61,79,0.35);
}
.dz-vision__pillar:hover {
background: var(--dz-navy-deep);
border-color: rgba(79,200,244,0.45);
}
.dz-vision__pillar-icon { color: var(--dz-aqua); }
.dz-vision__pillar-num { color: var(--dz-aqua); }
.dz-vision__pillar-title { color: var(--dz-white); }
.dz-vision__pillar-mandate { color: rgba(255,255,255,0.78); }
.dz-vision__pillar-delivery { color: rgba(255,255,255,0.65); }
.dz-vision__pillar-delivery strong { color: var(--dz-white); }
.dz-vision__pillar-metric-num { color: var(--dz-aqua); }
.dz-vision__pillar-metric-label { color: rgba(255,255,255,0.6); }
/* ════════════════════════════════════════════════════════════
LIGHT THEME OVERRIDES — Section 6: Why DZ (Soft Grey)
Background: --dz-soft-grey (#F1F1F1, set in Figma) · Title: RIGHT-aligned · Slides: dark navy
════════════════════════════════════════════════════════════ */
.dz-why {
background: var(--dz-soft-grey);
}
.dz-why::before { display: none; }
/* Header: meta now lives inside head-left, so head only has one child.
Inner stays centred at Figma's 1280px content width (max-width inherits from base rule);
single-column grid so head-left's right edge aligns with stage rail's right edge. */
.dz-why__head { grid-template-columns: 1fr; gap: 0; align-items: flex-end; width: 100%; }
.dz-why__head-left { align-items: flex-end; text-align: right; width: 100%; gap: 4px; } /* tighter eyebrow→title than the 10px base — eyebrow sits closer to the title */
/* Stage row — Figma proportion: spotlight 880 : gap 16 : rail 380 (within 1280 inner) */
.dz-why__stage { grid-template-columns: 880fr 380fr; gap: 16px; }
/* Title + lead colours on light bg */
.dz-why__title { color: var(--dz-navy); }
.dz-why__title em { color: var(--dz-aqua); }
/* Meta — Figma layout: small inline text below the title (not big aqua "5" on the left).
Reset the original styles and display as a single right-aligned line. */
.dz-why__head-left .dz-why__meta {
display: inline-flex;
flex-direction: row;
align-items: baseline;
gap: 4px;
align-self: flex-end;
padding: 0;
margin-top: 4px;
background: none;
border: 0;
}
.dz-why__head-left .dz-why__meta-num,
.dz-why__head-left .dz-why__meta-label {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--dz-navy);
opacity: 0.57;
line-height: 1;
}
/* Eyebrow on light bg — Figma: plain aqua text, no pill bg/border/dot,
11px Bold with 0.22em letter-spacing (matches Figma exactly) */
.dz-why .dz-eyebrow {
color: var(--dz-aqua);
opacity: 1;
align-self: flex-end;
background: transparent;
border: 0;
padding: 0;
border-radius: 0;
font-size: 14px; /* +30% from Figma's 11px per user request */
font-weight: 700; /* Figma: Bold */
letter-spacing: 0.22em; /* Figma: 22% */
}
.dz-why .dz-eyebrow::before { display: none; } /* Figma omits the bullet dot */
/* Title — Figma exact: 56px (override the clamp() which scales higher at large viewports) */
.dz-why__title {
font-size: 56px;
}
/* Spotlight slide card → dark navy
rgba(43,61,79,…) below = --dz-navy at variable opacity (no color-mix to keep broad browser support) */
.dz-why__spotlight,
.dz-why__slide {
background: var(--dz-navy);
color: rgba(255,255,255,0.92);
border: 1px solid rgba(255,255,255,0.05);
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 28px -10px rgba(43,61,79,0.35);
}
.dz-why__slide-step { color: var(--dz-aqua); }
.dz-why__slide-big { color: var(--dz-white); }
.dz-why__slide-claim { color: rgba(255,255,255,0.92); }
.dz-why__slide-detail { color: rgba(255,255,255,0.7); }
/* Pill nav — Figma: visible navy outline (1px solid navy at full opacity) */
.dz-why__pill {
background: rgba(43,61,79,0.06);
color: rgba(43,61,79,0.7);
border: 1px solid var(--dz-navy);
}
/* Hover — only on INACTIVE pills (active pill should stay in its dark navy state) */
.dz-why__pill:not(.dz-why__pill--active):hover {
background: rgba(43,61,79,0.1);
color: var(--dz-navy);
}
.dz-why__pill--active {
background: var(--dz-navy);
color: var(--dz-white);
border-color: var(--dz-navy);
box-shadow: 0 4px 14px -4px rgba(43,61,79,0.3);
}
.dz-why__pill--active .dz-why__pill-h { color: var(--dz-white); }
.dz-why__pill--active .dz-why__pill-sub { color: rgba(255,255,255,0.7); } /* WCAG AA: white on navy ≈ 5.5:1, vs aqua-on-navy ≈ 3.9:1 fail */
/* "Endorsed by" strip — Figma: --dz-gray bg, navy border at 16% opacity */
.dz-why__strip {
background: var(--dz-gray);
border: 1px solid rgba(43,61,79,0.16);
}
/* Remove the white panels around the logos — keep the actual logo images,
blend onto the light-grey strip via multiply (no panel) */
.dz-why .dz-why__strip-frame {
background: transparent;
border: 0;
box-shadow: none;
padding: 0 14px;
}
.dz-why .dz-why__strip-frame img {
mix-blend-mode: multiply;
}
.dz-why__strip-label { color: var(--dz-navy); opacity: 0.7; }
/* ════════════════════════════════════════════════════════════
Clients Marquee — horizontal monochrome logo strip on white
Spec: docs/superpowers/specs/2026-04-27-clients-marquee-design.md
════════════════════════════════════════════════════════════ */
.dz-clients-marquee {
--dz-marquee-duration: 30s;
--dz-marquee-fade: 80px;
--dz-marquee-gap: 72px; /* spacing between slots; applied as margin-right per logo */
--dz-marquee-slot-width: 200px; /* uniform slot — every logo gets equal horizontal real-estate */
--dz-marquee-logo-max-h: 44px;
background: #F8F8F8; /* per Figma 120:2 — rgba(231,232,232,0.29) resolved over white = #F8F8F8; using solid because the page body bg is dark navy, not white */
padding: 64px 0; /* per Figma 120:2 */
display: flex;
flex-direction: column;
align-items: center;
gap: 16px; /* tight title→eyebrow; viewport adds extra margin-top for the logo-row gap */
overflow: hidden;
}
/* Section title — "Our Clients" with "Clients" in aqua · per Figma 120:2 */
.dz-clients-marquee__title {
font-size: clamp(34px, 4.6vw, 64px);
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.025em;
color: var(--dz-navy);
margin: 0;
text-align: center;
max-width: 920px;
}
.dz-clients-marquee__title em {
color: var(--dz-aqua);
font-style: normal;
}
/* Marquee eyebrow — KEEP the global .dz-eyebrow pill chrome (bg / border / aqua dot)
for consistency with every other section eyebrow. Only override color so it
reads correctly on the near-white strip bg. */
.dz-clients-marquee__eyebrow {
color: var(--dz-navy-deep); /* navy-deep wordmark, same approach as Our Approach light-theme override */
margin-bottom: 0;
}
.dz-clients-marquee__viewport {
width: 100%;
-webkit-mask-image: linear-gradient(
90deg,
transparent 0,
#000 var(--dz-marquee-fade),
#000 calc(100% - var(--dz-marquee-fade)),
transparent 100%
);
mask-image: linear-gradient(
90deg,
transparent 0,
#000 var(--dz-marquee-fade),
#000 calc(100% - var(--dz-marquee-fade)),
transparent 100%
);
}
/* Logo row sits further from the eyebrow than the eyebrow does from the title
so the eyebrow visually pairs with the heading, not with the logos. */
.dz-clients-marquee__viewport {
margin-top: 24px;
}
/* Track uses NO `gap` — spacing comes from per-logo margin-right.
This keeps the loop math exact: each of 16 slots has identical width
(slot-width + gap), so translateX(-50%) wraps with zero visible jolt. */
.dz-clients-marquee__track {
display: flex;
align-items: center;
width: max-content;
animation: dz-clients-marquee-scroll var(--dz-marquee-duration) linear infinite;
}
.dz-clients-marquee__viewport:hover .dz-clients-marquee__track {
animation-play-state: paused;
}
/* Each logo occupies a uniform slot. The image is constrained to
max-height: var(--dz-marquee-logo-max-h) and object-fit: contain so the
intrinsic aspect ratio is preserved while the slot width stays uniform —
gives the row a consistent visual rhythm regardless of native logo
proportions (square mark vs wide wordmark). */
.dz-clients-marquee__logo {
width: var(--dz-marquee-slot-width);
height: var(--dz-marquee-logo-max-h);
max-height: var(--dz-marquee-logo-max-h);
margin-right: var(--dz-marquee-gap);
flex-shrink: 0;
object-fit: contain;
filter: grayscale(1);
opacity: 0.55;
transition: filter 0.35s ease, opacity 0.35s ease;
}
.dz-clients-marquee__logo:hover {
filter: grayscale(0);
opacity: 1;
}
@keyframes dz-clients-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Marquee always animates. The 30-s horizontal slide is far below the 3-Hz
threshold WCAG 2.3 cares about and isn't a vestibular trigger, so we don't
pause it under prefers-reduced-motion. The previous static-fallback rule
left the row looking broken (only the first 4 logos visible, the rest
pushed off-screen by the track width). User-preferred 2026-05-06. */
/* ──────────────────────────────────────────────────────────────────────
SERVICES HUB — /services/
Header (eyebrow + title + intro) above an 11-card grid.
Each card lists a stage's 3 services and links into the stage page.
────────────────────────────────────────────────────────────────────── */
.dz-services-hub {
padding: clamp(96px, 12vw, 180px) clamp(20px, 5vw, 64px);
max-width: 1280px;
margin: 0 auto;
}
/* ── Header ── */
.dz-services-hub__head {
max-width: 720px;
margin: 0 auto clamp(48px, 6vw, 80px);
text-align: center;
}
.dz-services-hub__title {
font-size: clamp(40px, 5vw, 64px);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--dz-white);
margin: 14px 0 16px;
}
.dz-services-hub__title em {
color: var(--dz-aqua);
font-style: normal;
}
.dz-services-hub__subtitle {
font-size: 16px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--dz-aqua);
text-transform: none;
margin: 0 0 20px;
}
.dz-services-hub__intro {
font-size: 17px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.72);
margin: 0;
}
/* ── Slider controls ── */
.dz-services-hub__controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-bottom: 28px;
}
.dz-services-hub__progress {
display: flex;
align-items: center;
gap: 14px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--dz-aqua);
font-feature-settings: "tnum" 1;
}
.dz-services-hub__progress-track {
width: clamp(80px, 14vw, 160px);
height: 1px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
border-radius: 1px;
}
.dz-services-hub__progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--dz-aqua), rgba(79, 200, 244, 0.4));
transition: width 480ms var(--dz-ease-spring);
}
.dz-services-hub__nav {
display: flex;
gap: 8px;
}
.dz-services-hub__nav-btn {
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(79, 200, 244, 0.3);
border-radius: 50%;
background: rgba(255, 255, 255, 0.02);
color: var(--dz-white);
cursor: pointer;
transition: all 220ms var(--dz-ease-fade);
}
.dz-services-hub__nav-btn:hover:not(:disabled) {
border-color: var(--dz-aqua);
background: rgba(79, 200, 244, 0.08);
color: var(--dz-aqua);
}
.dz-services-hub__nav-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.dz-services-hub__nav-btn svg {
width: 16px;
height: 16px;
stroke-width: 2;
}
/* ── Slider viewport + track + pages ── */
.dz-services-hub__viewport {
position: relative;
overflow: hidden;
}
.dz-services-hub__track {
display: flex;
transition: transform 600ms var(--dz-ease-spring);
}
.dz-services-hub__page {
flex-shrink: 0;
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
gap: 18px;
}
@media (max-width: 900px) {
.dz-services-hub__page { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.dz-services-hub__page { grid-template-columns: 1fr; }
}
/* ── Dot indicators ── */
.dz-services-hub__dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 28px;
}
.dz-services-hub__dot {
width: 8px;
height: 8px;
border-radius: 50%;
border: 0;
padding: 0;
background: rgba(255, 255, 255, 0.18);
cursor: pointer;
transition: all 220ms var(--dz-ease-fade);
}
.dz-services-hub__dot:hover { background: rgba(79, 200, 244, 0.5); }
.dz-services-hub__dot--active {
background: var(--dz-aqua);
width: 24px;
border-radius: 4px;
}
.dz-stage-card {
/* Card chrome: subtle navy fill + aqua hairline, with hover-lift treatment */
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
padding: 24px 22px;
text-decoration: none;
background: rgba(255, 255, 255, 0.025);
border: 1px solid rgba(79, 200, 244, 0.14);
border-radius: 14px;
color: var(--dz-white);
transition: transform 280ms var(--dz-ease-spring),
border-color 280ms var(--dz-ease-fade),
background 280ms var(--dz-ease-fade),
box-shadow 280ms var(--dz-ease-fade);
}
.dz-stage-card::before {
/* Top-left number block — accent corner detail */
content: "";
position: absolute;
top: 0; left: 0;
width: 56px; height: 1px;
background: linear-gradient(90deg, rgba(79, 200, 244, 0.7), transparent);
pointer-events: none;
}
.dz-stage-card:hover {
transform: translateY(-3px);
background: rgba(79, 200, 244, 0.05);
border-color: rgba(79, 200, 244, 0.4);
box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.55),
0 0 0 1px rgba(79, 200, 244, 0.12) inset;
}
.dz-stage-card__head {
display: flex;
align-items: baseline;
gap: 14px;
}
.dz-stage-card__num {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--dz-aqua);
font-feature-settings: "tnum" 1;
}
.dz-stage-card__label {
font-size: 22px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0;
color: var(--dz-white);
}
.dz-stage-card__services {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.dz-stage-card__services li {
position: relative;
padding-left: 16px;
font-size: 13.5px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.62);
}
.dz-stage-card__services li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 8px;
height: 1px;
background: rgba(79, 200, 244, 0.5);
}
.dz-stage-card__cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
padding-top: 8px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--dz-aqua);
transition: gap 220ms var(--dz-ease-fade);
}
.dz-stage-card:hover .dz-stage-card__cta {
gap: 10px;
}
.dz-stage-card__cta svg {
flex-shrink: 0;
}
/* ──────────────────────────────────────────────────────────────────────
STAGE DETAIL PAGE — /services//
Layout rhythm: dark hero → LIGHT services (#F8F8F8) → dark stage nav
Right rail (fixed) sits over both, glass treatment for legibility.
────────────────────────────────────────────────────────────────────── */
.dz-stage {
padding: 0;
margin: 0;
max-width: none;
position: relative;
}
/* ── Right rail: fixed vertical lifecycle navigator ── */
.dz-stage__rail {
position: fixed;
right: clamp(20px, 2.5vw, 40px);
top: 50%;
transform: translateY(-50%);
z-index: 9;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
padding: 16px 8px;
background: rgba(14, 25, 37, 0.55);
border: 1px solid rgba(79, 200, 244, 0.12);
border-radius: 100px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
@media (max-width: 900px) {
.dz-stage__rail { display: none; }
}
.dz-stage__rail-pos {
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.18em;
color: rgba(255, 255, 255, 0.42);
font-feature-settings: "tnum" 1;
}
.dz-stage__rail-pos strong {
font-size: 13px;
color: var(--dz-aqua);
font-weight: 700;
letter-spacing: 0.04em;
}
.dz-stage__rail-dots {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.dz-stage__rail-dot {
position: relative;
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transition: all 240ms var(--dz-ease-fade);
}
.dz-stage__rail-dot:hover {
background: var(--dz-aqua);
transform: scale(1.4);
}
.dz-stage__rail-dot--past {
background: rgba(79, 200, 244, 0.4);
}
.dz-stage__rail-dot--active {
height: 22px;
border-radius: 4px;
background: var(--dz-aqua);
box-shadow: 0 0 0 0 rgba(79, 200, 244, 0.4);
animation: stageRailPing 2.4s ease-out infinite;
}
@keyframes stageRailPing {
0% { box-shadow: 0 0 0 0 rgba(79,200,244,0.4); }
70% { box-shadow: 0 0 0 8px rgba(79,200,244,0); }
100% { box-shadow: 0 0 0 0 rgba(79,200,244,0); }
}
.dz-stage__rail-dot-tip {
position: absolute;
right: calc(100% + 14px);
top: 50%;
transform: translateY(-50%) translateX(8px);
white-space: nowrap;
padding: 6px 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--dz-white);
background: rgba(14, 25, 37, 0.95);
border: 1px solid rgba(79, 200, 244, 0.22);
border-radius: 6px;
opacity: 0;
pointer-events: none;
transition: all 220ms var(--dz-ease-fade);
}
.dz-stage__rail-dot:hover .dz-stage__rail-dot-tip {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
/* ── Hero (dark navy) ── */
.dz-stage__hero {
position: relative;
background: var(--dz-navy-deep);
/* Top padding clears the fixed Navbar (~84px); bottom is tightened. */
padding: 124px clamp(20px, 5vw, 64px) 64px;
/* min-height ensures every stage hero is the same vertical size, regardless
of whether the stage title fits on 1 line (e.g. "Programming") or 2 lines
(e.g. "Conceptual Design", "4D Time / 5D Cost"). Number is set to fit the
longest title + max-length description + key facts panel. */
min-height: 620px;
overflow: hidden;
}
.dz-stage__back {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 36px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
text-decoration: none;
transition: color 200ms var(--dz-ease-fade);
position: relative;
z-index: 2;
}
.dz-stage__back:hover { color: var(--dz-aqua); }
.dz-stage__back svg { width: 14px; height: 14px; }
.dz-stage__hero-bg-num {
position: absolute;
top: 50%;
right: clamp(40px, 6vw, 100px);
transform: translateY(-50%);
font-size: clamp(220px, 28vw, 380px);
font-weight: 800;
line-height: 0.85;
letter-spacing: -0.05em;
color: rgba(79, 200, 244, 0.05);
pointer-events: none;
user-select: none;
font-feature-settings: "tnum" 1;
}
.dz-stage__hero-content {
max-width: 720px;
position: relative;
z-index: 2;
}
.dz-stage__hero-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--dz-aqua);
padding: 6px 14px;
border: 1px solid rgba(79, 200, 244, 0.3);
background: rgba(79, 200, 244, 0.06);
border-radius: 999px;
margin-bottom: 24px;
}
.dz-stage__hero-title {
font-size: clamp(56px, 8vw, 96px);
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.025em;
color: var(--dz-white);
margin: 0 0 16px;
}
.dz-stage__hero-tagline {
font-size: clamp(17px, 1.4vw, 19px);
line-height: 1.5;
font-weight: 400;
color: rgba(255, 255, 255, 0.78);
font-style: italic;
margin: 0 0 28px;
}
.dz-stage__hero-description {
font-size: 16px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.72);
margin: 0 0 40px;
max-width: 620px;
}
/* Key facts panel — 4-column horizontal strip with hairline dividers */
.dz-stage__key-facts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
overflow: hidden;
max-width: 720px;
}
@media (max-width: 700px) {
.dz-stage__key-facts { grid-template-columns: repeat(2, 1fr); }
}
.dz-stage__key-fact {
background: rgba(14, 25, 37, 0.65);
padding: 18px 16px;
display: flex;
flex-direction: column;
gap: 6px;
}
.dz-stage__key-fact-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.42);
}
.dz-stage__key-fact-value {
font-size: 15px;
font-weight: 600;
color: var(--dz-aqua);
letter-spacing: -0.005em;
}
/* ── Services section (LIGHT bg #F8F8F8 — same as Clients Marquee on home) ── */
.dz-stage__services {
background: #F8F8F8;
padding: clamp(56px, 7vw, 88px) clamp(20px, 5vw, 64px);
}
.dz-stage__services-inner {
max-width: 1280px;
margin: 0 auto;
}
/* Eyebrow on light bg — dark text instead of default */
.dz-eyebrow--on-light {
color: #1A2D3E !important;
}
.dz-stage__services-title {
font-size: clamp(36px, 5vw, 56px);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.02em;
color: #1A2D3E;
margin: 18px 0 56px;
max-width: 620px;
}
.dz-stage__services-title em {
color: #4FC8F4;
font-style: normal;
}
/* ── Service interactive timeline (3 nodes — click to switch active) ── */
.dz-svc-timeline {
list-style: none;
margin: 0 0 48px;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
position: relative;
}
@media (max-width: 700px) {
.dz-svc-timeline { grid-template-columns: 1fr; gap: 8px; }
}
/* Connector line between nodes — animated aqua glow signals interactivity.
Same gradient pattern as the footer seam (transparent → aqua peak → transparent),
plus a breathing pulse on box-shadow + opacity so it reads as "alive / clickable". */
.dz-svc-timeline::before {
content: "";
position: absolute;
left: 16.66%;
right: 16.66%;
top: 14px;
height: 2px;
background: linear-gradient(
90deg,
transparent 0%,
rgba(26, 45, 62, 0.06) 14%,
rgba(79, 200, 244, 0.7) 50%,
rgba(26, 45, 62, 0.06) 86%,
transparent 100%
);
box-shadow: 0 0 12px 1px rgba(79, 200, 244, 0.22);
pointer-events: none;
animation: timelinePulse 2.6s ease-in-out infinite;
z-index: 0;
}
@keyframes timelinePulse {
0%, 100% {
opacity: 0.75;
box-shadow: 0 0 8px 0 rgba(79, 200, 244, 0.18);
}
50% {
opacity: 1;
box-shadow: 0 0 18px 2px rgba(79, 200, 244, 0.42);
}
}
@media (prefers-reduced-motion: reduce) {
.dz-svc-timeline::before { animation: none; opacity: 0.85; }
}
@media (max-width: 700px) { .dz-svc-timeline::before { display: none; } }
.dz-svc-timeline__step { position: relative; z-index: 1; }
.dz-svc-timeline__btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
width: 100%;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
font-family: inherit;
text-align: center;
transition: transform 240ms var(--dz-ease-spring);
}
.dz-svc-timeline__btn:hover { transform: translateY(-2px); }
.dz-svc-timeline__node {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: #FFFFFF;
border: 2px solid rgba(26, 45, 62, 0.15);
transition: all 280ms var(--dz-ease-spring);
}
.dz-svc-timeline__node-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(26, 45, 62, 0.25);
transition: all 280ms var(--dz-ease-fade);
}
.dz-svc-timeline__step--past .dz-svc-timeline__node {
border-color: rgba(79, 200, 244, 0.55);
background: rgba(79, 200, 244, 0.1);
}
.dz-svc-timeline__step--past .dz-svc-timeline__node-dot { background: #4FC8F4; }
.dz-svc-timeline__step--active .dz-svc-timeline__node {
border-color: #4FC8F4;
background: #4FC8F4;
box-shadow: 0 0 0 6px rgba(79, 200, 244, 0.18);
}
.dz-svc-timeline__step--active .dz-svc-timeline__node-dot { background: #FFFFFF; }
.dz-svc-timeline__num {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
color: rgba(26, 45, 62, 0.5);
font-feature-settings: "tnum" 1;
}
.dz-svc-timeline__step--active .dz-svc-timeline__num { color: #4FC8F4; }
.dz-svc-timeline__short {
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.005em;
color: rgba(26, 45, 62, 0.6);
transition: color 240ms var(--dz-ease-fade);
}
.dz-svc-timeline__step--active .dz-svc-timeline__short { color: #1A2D3E; }
.dz-svc-timeline__btn:hover .dz-svc-timeline__short { color: #1A2D3E; }
/* ── Active service detail panel (fades in on switch) ── */
@keyframes svcDetailFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.dz-svc-detail {
/* Dark navy panel — "spotlight" effect on the light services section bg.
Whichever service is active, the panel pops as a dark contrast block. */
background: var(--dz-navy-deep);
border: 1px solid rgba(79, 200, 244, 0.18);
border-radius: 18px;
padding: 40px clamp(28px, 4vw, 56px);
box-shadow: 0 24px 50px -16px rgba(0, 0, 0, 0.45),
0 0 0 1px rgba(79, 200, 244, 0.08) inset;
animation: svcDetailFadeIn 380ms var(--dz-ease-spring);
}
.dz-svc-detail__head {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 22px;
padding-bottom: 28px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 28px;
}
@media (max-width: 700px) {
.dz-svc-detail__head { grid-template-columns: auto 1fr; }
.dz-svc-detail__meta { grid-column: 1 / -1; }
}
.dz-svc-detail__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 14px;
background: rgba(79, 200, 244, 0.14);
color: #4FC8F4;
}
.dz-svc-detail__icon svg { width: 28px; height: 28px; }
.dz-svc-detail__head-text { display: flex; flex-direction: column; gap: 4px; }
.dz-svc-detail__num {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
color: #4FC8F4;
font-feature-settings: "tnum" 1;
}
.dz-svc-detail__name {
font-size: clamp(24px, 2.6vw, 30px);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--dz-white);
margin: 0;
}
.dz-svc-detail__meta {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
justify-content: flex-end;
}
.dz-svc-detail__badge {
display: inline-flex;
align-items: center;
padding: 6px 12px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #4FC8F4;
background: rgba(79, 200, 244, 0.12);
border: 1px solid rgba(79, 200, 244, 0.35);
border-radius: 6px;
}
.dz-svc-detail__duration {
font-size: 13px;
color: rgba(255, 255, 255, 0.55);
font-weight: 500;
}
.dz-svc-detail__body {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 800px) {
.dz-svc-detail__body { grid-template-columns: 1fr; gap: 28px; }
}
.dz-svc-detail__summary {
font-size: 17px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.78);
margin: 0;
}
.dz-svc-detail__deliverables-h {
display: block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
margin-bottom: 14px;
}
.dz-svc-detail__deliverables ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
counter-reset: dlv;
}
.dz-svc-detail__deliverables li {
position: relative;
padding-left: 32px;
font-size: 14.5px;
line-height: 1.45;
color: rgba(255, 255, 255, 0.78);
counter-increment: dlv;
}
.dz-svc-detail__deliverables li::before {
content: counter(dlv, decimal-leading-zero);
position: absolute;
left: 0;
top: 1px;
font-size: 11px;
font-weight: 700;
color: #4FC8F4;
font-feature-settings: "tnum" 1;
}
/* ──────────────────────────────────────────────────────────────────────
STAGE NAV FOOTER — light bg, editorial "next chapter" treatment.
Light bg groups it with the services section above (one chapter); the
dark CTA strip following clearly starts a new section.
────────────────────────────────────────────────────────────────────── */
/* Aqua-wash section — same pale aqua as Our Approach on home (#E8F5FB).
Bold but soft visual transition between stage content and the dark CTA
below. Tight padding, no card containers; navy text on aqua-wash. */
.dz-stage__nav-footer {
position: relative;
background: var(--dz-aqua-wash);
padding: clamp(40px, 5vw, 64px) clamp(20px, 5vw, 64px);
}
.dz-stage__nav-inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 0 clamp(32px, 4vw, 56px);
align-items: center;
position: relative;
}
/* Vertical divider between prev and next columns */
.dz-stage__nav-inner::before {
content: "";
position: absolute;
left: calc(38.46% - 1px);
top: 8px;
bottom: 8px;
width: 1px;
background: rgba(26, 45, 62, 0.18);
}
@media (max-width: 800px) {
.dz-stage__nav-inner { grid-template-columns: 1fr; gap: 24px 0; }
.dz-stage__nav-inner::before {
left: 0;
right: 0;
top: 50%;
bottom: auto;
width: auto;
height: 1px;
}
}
/* Previous / context column — typography only, no card chrome */
.dz-stage__back-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
text-decoration: none;
transition: transform 240ms var(--dz-ease-fade);
}
.dz-stage__back-card:not(.dz-stage__back-card--disabled):hover {
transform: translateX(-3px);
background: transparent;
border: 0;
box-shadow: none;
}
.dz-stage__back-card--disabled { cursor: default; }
.dz-stage__back-card-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(26, 45, 62, 0.7);
}
.dz-stage__back-card-eyebrow svg { width: 12px; height: 12px; }
.dz-stage__back-card-name {
font-size: clamp(20px, 2vw, 24px);
font-weight: 600;
letter-spacing: -0.015em;
color: #1A2D3E;
}
/* Next-stage feature — typography-led, big bg num, navy CTA pill */
.dz-stage__next-card {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
text-decoration: none;
overflow: visible;
transition: transform 240ms var(--dz-ease-fade);
}
.dz-stage__next-card:not(.dz-stage__next-card--disabled):hover {
transform: translateX(3px);
background: transparent;
border: 0;
box-shadow: none;
}
.dz-stage__next-card--disabled { cursor: default; }
.dz-stage__next-card-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.dz-stage__next-card-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(26, 45, 62, 0.7);
}
.dz-stage__next-card-num {
font-size: clamp(56px, 6vw, 80px);
font-weight: 800;
line-height: 0.9;
letter-spacing: -0.04em;
color: rgba(26, 45, 62, 0.16);
font-feature-settings: "tnum" 1;
pointer-events: none;
user-select: none;
}
.dz-stage__next-card-name {
font-size: clamp(28px, 3.5vw, 40px);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.02em;
color: #1A2D3E;
margin: 0;
}
.dz-stage__next-card-services {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
}
.dz-stage__next-card-services li {
padding: 3px 10px;
font-size: 12.5px;
font-weight: 500;
color: rgba(26, 45, 62, 0.85);
background: rgba(26, 45, 62, 0.1);
border-radius: 999px;
}
.dz-stage__next-card-cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 6px;
padding: 12px 22px;
align-self: flex-start;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--dz-aqua);
background: #1A2D3E;
border-radius: 999px;
transition: gap 240ms var(--dz-ease-fade), background 240ms var(--dz-ease-fade);
}
.dz-stage__next-card:hover .dz-stage__next-card-cta {
gap: 14px;
background: #0E1925;
}
.dz-stage__next-card-cta svg { width: 14px; height: 14px; }
/* ──────────────────────────────────────────────────────────────────────
ABOUT PAGE — /about/
Visual rhythm: navy hero → LIGHT story → navy stats → AQUA-WASH
endorsements → navy offices → navy CTA → navy footer.
────────────────────────────────────────────────────────────────────── */
.dz-about {
padding: 0;
margin: 0;
max-width: none;
position: relative;
}
/* ── Hero (navy) ── */
.dz-about__hero {
position: relative;
background: var(--dz-navy-deep);
padding: 124px clamp(20px, 5vw, 64px) 80px;
overflow: hidden;
}
.dz-about__hero::before {
/* Soft radial aqua wash on the right edge */
content: "";
position: absolute;
inset: 0;
background: radial-gradient(700px 400px at 100% 20%, rgba(79,200,244,0.06), transparent 60%);
pointer-events: none;
}
/* Huge low-opacity year — design anchor on the right side, echoes the
stage hero's "01"/"02" big background numerals. */
.dz-about__hero-bg-num {
position: absolute;
top: 50%;
right: clamp(-20px, 1vw, 40px);
transform: translateY(-50%);
font-size: clamp(180px, 22vw, 320px);
font-weight: 800;
line-height: 0.85;
letter-spacing: -0.05em;
color: rgba(79, 200, 244, 0.05);
pointer-events: none;
user-select: none;
font-feature-settings: "tnum" 1;
z-index: 1;
}
.dz-about__hero-inner {
max-width: 1080px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.dz-about__hero-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--dz-aqua);
padding: 6px 14px;
border: 1px solid rgba(79, 200, 244, 0.3);
background: rgba(79, 200, 244, 0.06);
border-radius: 999px;
margin-bottom: 28px;
}
.dz-about__hero-title {
font-size: clamp(48px, 7vw, 88px);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--dz-white);
margin: 0 0 20px;
max-width: 14ch;
}
.dz-about__hero-title em {
color: var(--dz-aqua);
font-style: normal;
}
.dz-about__hero-tagline {
font-size: clamp(15px, 1.3vw, 17px);
font-weight: 500;
letter-spacing: 0.04em;
color: rgba(255, 255, 255, 0.65);
margin: 0 0 32px;
}
.dz-about__hero-lead {
font-size: 17px;
line-height: 1.65;
color: rgba(255, 255, 255, 0.78);
margin: 0 0 48px;
max-width: 720px;
}
/* Quick stat strip — 4 cells, hairline-divided. Matches the stage hero's
key-facts panel pattern (same vertical rhythm, same aqua-on-navy treatment). */
.dz-about__hero-stats {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: rgba(79, 200, 244, 0.12);
border: 1px solid rgba(79, 200, 244, 0.12);
border-radius: 14px;
overflow: hidden;
max-width: 720px;
}
@media (max-width: 700px) {
.dz-about__hero-stats { grid-template-columns: repeat(2, 1fr); }
}
.dz-about__hero-stat {
background: rgba(14, 25, 37, 0.55);
padding: 18px 16px;
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
}
.dz-about__hero-stat-num {
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 700;
line-height: 1;
letter-spacing: -0.015em;
color: var(--dz-aqua);
font-feature-settings: "tnum" 1;
}
.dz-about__hero-stat-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
}
/* ── Lifecycle ribbon — continuously scrolling 11 BIM stage chips.
Sits at the bottom of the About hero. Thematic (BIM lifecycle is the brand)
+ animated (60s loop) + functional (each chip links to its stage page). ── */
.dz-about__lifecycle {
position: relative;
z-index: 2;
margin-top: 56px;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
.dz-about__lifecycle-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 18px;
}
/* Pulsing aqua dot — same vibe as the office popover dots elsewhere on the site */
.dz-about__lifecycle-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--dz-aqua);
box-shadow: 0 0 0 0 rgba(79, 200, 244, 0.5);
animation: lifecycleEyebrowPing 2.4s ease-out infinite;
}
@keyframes lifecycleEyebrowPing {
0% { box-shadow: 0 0 0 0 rgba(79,200,244,0.5); }
70% { box-shadow: 0 0 0 7px rgba(79,200,244,0); }
100% { box-shadow: 0 0 0 0 rgba(79,200,244,0); }
}
.dz-about__lifecycle-viewport {
/* Edge fade on both sides — chips appear/disappear smoothly */
overflow: hidden;
mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}
.dz-about__lifecycle-track {
display: inline-flex;
gap: 14px;
white-space: nowrap;
padding-right: 14px;
/* Animation moves the track left by 50% (i.e. one full set of chips' width)
since we render the chips twice for a seamless loop. */
animation: lifecycleScroll 60s linear infinite;
will-change: transform;
}
@keyframes lifecycleScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* Pause on hover so users can read / click chips */
.dz-about__lifecycle:hover .dz-about__lifecycle-track {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.dz-about__lifecycle-track { animation: none; }
}
.dz-about__lifecycle-chip {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 9px 16px;
background: rgba(79, 200, 244, 0.08);
border: 1px solid rgba(79, 200, 244, 0.2);
border-radius: 999px;
text-decoration: none;
flex-shrink: 0;
transition: all 220ms var(--dz-ease-fade);
}
.dz-about__lifecycle-chip:hover {
background: rgba(79, 200, 244, 0.18);
border-color: var(--dz-aqua);
transform: translateY(-2px);
}
.dz-about__lifecycle-chip-num {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
color: var(--dz-aqua);
font-feature-settings: "tnum" 1;
}
.dz-about__lifecycle-chip-label {
font-size: 13.5px;
font-weight: 500;
letter-spacing: -0.005em;
color: var(--dz-white);
}
/* ──────────────────────────────────────────────────────────────────────
CONTACT PAGE — /contact/
Letterhead direction. No hero block. Page opens with an oversized
"Hi —" greeting (per-char reveal + aqua glow + blinking caret).
Form sits below in a 2-col split with a quiet reach panel.
Cities/offices live in the global footer column — not duplicated here.
────────────────────────────────────────────────────────────────────── */
.dz-contact {
position: relative;
background: #FAFAFA;
min-height: 100vh;
overflow-x: hidden;
padding: 0;
margin: 0;
max-width: none;
}
/* Drifting aqua-tinted radial wash (borrowed from Direction C, dialed back) */
.dz-contact::before {
content: "";
position: fixed;
inset: -10%;
background:
radial-gradient(700px 500px at 20% 30%, rgba(79,200,244,0.05), transparent 60%),
radial-gradient(900px 600px at 80% 70%, rgba(79,200,244,0.025), transparent 60%);
pointer-events: none;
z-index: 0;
animation: dz-contact-drift 28s ease-in-out infinite alternate;
}
.dz-contact__inner {
position: relative;
z-index: 1;
max-width: 1180px;
margin: 0 auto;
padding: 124px clamp(24px, 5vw, 96px) 96px;
}
/* ── Greeting ── per-char reveal, aqua glow, blinking caret */
.dz-contact__greet {
font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
/* Sized 30% smaller per user request 2026-04-30 (was clamp(72px, 12vw, 168px)).
Each value × 0.7 — calmer presence, leaves more breathing room above the form. */
font-size: clamp(50px, 8.4vw, 118px);
font-weight: 600;
line-height: 0.95;
letter-spacing: -0.04em;
color: #1A2D3E;
margin: 0 0 40px;
position: relative;
text-shadow: 0 0 60px rgba(79,200,244,0.18);
animation: dz-contact-greet-glow 1600ms 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dz-contact__greet .ch {
display: inline-block;
opacity: 0;
transform: translateY(12px);
animation: dz-contact-char-reveal 700ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.dz-contact__greet .ch:nth-child(1) { animation-delay: 150ms; }
.dz-contact__greet .ch:nth-child(2) { animation-delay: 240ms; }
.dz-contact__greet .ch.ch-dash { animation-delay: 500ms; } /* dash arrives after a thinking pause */
.dz-contact__greet::after {
content: "_";
color: var(--dz-aqua);
font-weight: 400;
margin-left: 0.06em;
display: inline-block;
opacity: 0;
animation:
dz-contact-caret-fade 400ms 1400ms ease-out forwards,
dz-contact-blink 1.2s 1800ms infinite steps(2, end);
}
/* ── Intro paragraph ── */
.dz-contact__intro {
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.55;
color: rgba(26,45,62,0.78);
margin: 0 0 80px;
max-width: 32ch;
opacity: 0;
animation: dz-contact-fade-up 700ms 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.dz-contact__intro em {
color: var(--dz-aqua);
font-style: normal;
font-weight: 500;
}
/* ── Compose split: form + reach panel ── */
.dz-contact__compose {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 64px;
align-items: start;
}
@media (max-width: 900px) {
.dz-contact__compose { grid-template-columns: 1fr; gap: 48px; }
}
/* ── Form (no card chrome, hairline-bottom inputs) ── */
.dz-contact__form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px 32px;
}
@media (max-width: 600px) {
.dz-contact__form { grid-template-columns: 1fr; }
}
.dz-contact__field {
display: flex;
flex-direction: column;
gap: 8px;
opacity: 0;
animation: dz-contact-fade-up 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.dz-contact__field:nth-child(1) { animation-delay: 1000ms; }
.dz-contact__field:nth-child(2) { animation-delay: 1060ms; }
.dz-contact__field:nth-child(3) { animation-delay: 1120ms; }
.dz-contact__field:nth-child(4) { animation-delay: 1180ms; }
.dz-contact__field:nth-child(5) { animation-delay: 1240ms; }
.dz-contact__field:nth-child(6) { animation-delay: 1300ms; }
.dz-contact__field.is-full { grid-column: 1 / -1; }
.dz-contact__field-label {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(26,45,62,0.5);
}
.dz-contact__field-input-wrap {
position: relative;
}
.dz-contact__field-input-wrap::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: var(--dz-aqua);
transform: scaleX(0);
transform-origin: left center;
transition: transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1);
pointer-events: none;
}
.dz-contact__field-input-wrap:focus-within::after { transform: scaleX(1); }
.dz-contact__field-input {
width: 100%;
font: inherit;
font-size: 17px;
color: #1A2D3E;
background: transparent;
border: 0;
border-bottom: 1px solid rgba(26,45,62,0.14);
padding: 8px 0 12px;
outline: 0;
font-family: inherit;
}
.dz-contact__field-input::placeholder { color: rgba(26,45,62,0.32); }
.dz-contact__field-input--textarea {
resize: vertical;
min-height: 96px;
line-height: 1.55;
}
.dz-contact__field-input--select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,/
Cinematic parallax hero, reading progress bar, scroll-triggered
reveals, numbered scope bullets, dark related-projects strip,
floating CTA on scroll.
────────────────────────────────────────────────────────────────────── */
.dz-detail {
background: #FAFAFA;
position: relative;
min-height: 100vh;
overflow-x: hidden;
padding: 0;
margin: 0;
max-width: none;
}
/* ── Reading progress bar ── */
.dz-detail__progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
z-index: 200;
pointer-events: none;
background: rgba(26,45,62,0.06);
}
.dz-detail__progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--dz-aqua) 0%, #1A2D3E 100%);
box-shadow: 0 0 8px rgba(79,200,244,0.5);
transition: width 80ms linear;
}
/* ── Cinematic parallax hero ── */
.dz-detail__hero {
position: relative;
/* body { zoom: 0.8 } shrinks vh by 20% — divide by 0.8 to compensate
so the hero actually fills ~92% of the visible viewport. */
height: 115vh;
min-height: 780px;
overflow: hidden;
background: #0E1925;
}
.dz-detail__hero-image-wrap {
position: absolute;
inset: 0;
will-change: transform;
}
.dz-detail__hero-image-wrap img {
width: 100%;
height: 110%;
object-fit: cover;
display: block;
}
.dz-detail__hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
180deg,
rgba(14,25,37,0.15) 0%,
rgba(14,25,37,0.4) 50%,
rgba(14,25,37,0.92) 100%
);
pointer-events: none;
z-index: 1;
}
.dz-detail__hero-content {
/* Pin to hero exactly via absolute positioning so the flex column can't
grow past the hero's clip rect. Centers via inline-axis margin since
inset: 0 + max-width pushes content to the left. */
position: absolute;
inset: 0;
z-index: 2;
max-width: 1280px;
margin: 0 auto;
padding: 124px clamp(24px, 5vw, 64px) 64px;
display: flex;
flex-direction: column;
color: #FFFFFF;
}
.dz-detail__back {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.9);
text-decoration: none;
padding: 8px 14px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.2);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 999px;
align-self: flex-start;
transition: background 200ms ease, border-color 200ms ease, gap 240ms ease;
opacity: 0;
animation: dz-detail-fade-up 600ms 100ms ease-out forwards;
}
.dz-detail__back:hover {
background: rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.4);
gap: 12px;
}
.dz-detail__hero-text {
margin-top: auto;
/* No max-width here — the `ch` unit would compute against the wrapper's
16px body font (~187px) instead of the 88px title font, squeezing the
H1 to one word per line. Inner elements (title, meta) set their own
max-widths in their own font-size context. */
}
.dz-detail__hero-cat {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--dz-aqua);
margin-bottom: 18px;
opacity: 0;
animation: dz-detail-fade-up 700ms 200ms ease-out forwards;
}
.dz-detail__hero-title {
font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
font-size: clamp(40px, 7vw, 88px);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.05;
color: #FFFFFF;
max-width: 18ch;
margin: 0 0 22px;
text-shadow: 0 4px 24px rgba(0,0,0,0.5);
text-wrap: balance; /* balance multi-line titles for nicer breaks */
opacity: 0;
animation: dz-detail-fade-up 800ms 350ms cubic-bezier(0.16,1,0.3,1) forwards;
}
.dz-detail__hero-meta {
font-size: clamp(15px, 1.4vw, 17px);
color: rgba(255,255,255,0.85);
margin: 0 0 26px;
max-width: 50ch;
opacity: 0;
animation: dz-detail-fade-up 700ms 500ms cubic-bezier(0.16,1,0.3,1) forwards;
}
.dz-detail__sep {
display: inline-block;
margin: 0 10px;
color: rgba(255,255,255,0.45);
}
.dz-detail__hero-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
opacity: 0;
animation: dz-detail-fade-up 700ms 650ms cubic-bezier(0.16,1,0.3,1) forwards;
}
/* ── Chips ── */
.dz-detail__chip {
display: inline-block;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.05em;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.25);
color: #FFFFFF;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.dz-detail__chip--soft {
background: rgba(26,45,62,0.05);
border: 1px solid rgba(26,45,62,0.1);
color: rgba(26,45,62,0.78);
backdrop-filter: none;
-webkit-backdrop-filter: none;
font-size: 13px;
padding: 8px 14px;
transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 240ms cubic-bezier(0.34,1.4,0.64,1);
}
.dz-detail__chip--soft:hover {
background: rgba(79,200,244,0.08);
border-color: rgba(79,200,244,0.4);
color: #1A2D3E;
transform: translateY(-1px);
}
/* ── Inner content area ── */
.dz-detail__inner {
max-width: 920px;
margin: 0 auto;
padding: clamp(56px, 7vw, 88px) clamp(24px, 5vw, 32px) clamp(64px, 8vw, 96px);
}
/* ── Reveal-on-scroll wrapper ── */
.dz-detail__reveal {
opacity: 0;
transform: translateY(28px);
transition:
opacity 800ms cubic-bezier(0.16,1,0.3,1),
transform 800ms cubic-bezier(0.16,1,0.3,1);
}
.dz-detail__reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ── Section title (with animated underline accent) ── */
.dz-detail__section-title {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: clamp(20px, 2.2vw, 28px);
font-weight: 600;
letter-spacing: -0.015em;
color: #1A2D3E;
margin: 0 0 32px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(26,45,62,0.12);
position: relative;
}
.dz-detail__section-title::after {
content: "";
position: absolute;
left: 0;
bottom: -1px;
width: 0;
height: 2px;
background: var(--dz-aqua);
transition: width 800ms cubic-bezier(0.16,1,0.3,1) 200ms;
}
.dz-detail__reveal.is-visible .dz-detail__section-title::after {
width: 64px;
}
/* ── Story narrative ── */
.dz-detail__story { margin-bottom: clamp(64px, 8vw, 96px); }
.dz-detail__story-para {
font-size: clamp(17px, 1.4vw, 19px);
line-height: 1.7;
color: rgba(26,45,62,0.85);
margin: 0 0 24px;
}
.dz-detail__story-para:last-child { margin-bottom: 0; }
.dz-detail__story-para em {
color: var(--dz-aqua);
font-style: normal;
font-weight: 600;
}
/* ── Key facts grid ── */
.dz-detail__facts { margin-bottom: clamp(64px, 8vw, 96px); }
.dz-detail__facts-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(26,45,62,0.1);
border: 1px solid rgba(26,45,62,0.1);
border-radius: 18px;
overflow: hidden;
}
@media (max-width: 800px) { .dz-detail__facts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .dz-detail__facts-grid { grid-template-columns: 1fr; } }
.dz-detail__fact {
background: #FFFFFF;
padding: 24px 22px;
display: flex;
flex-direction: column;
gap: 8px;
opacity: 0;
transform: translateY(16px);
transition:
opacity 600ms cubic-bezier(0.16,1,0.3,1),
transform 600ms cubic-bezier(0.16,1,0.3,1),
background 240ms ease;
}
.dz-detail__facts.is-visible .dz-detail__fact {
opacity: 1;
transform: translateY(0);
}
.dz-detail__fact:hover { background: #FBFEFF; }
.dz-detail__fact-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(26,45,62,0.55);
}
.dz-detail__fact-value {
font-size: 15.5px;
font-weight: 600;
color: #1A2D3E;
line-height: 1.4;
letter-spacing: -0.005em;
}
/* ── Scope of work (numbered cards) ── */
.dz-detail__scope { margin-bottom: clamp(64px, 8vw, 96px); }
.dz-detail__scope-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
counter-reset: scope-counter;
}
.dz-detail__scope-item {
display: flex;
gap: 18px;
align-items: flex-start;
padding: 18px 22px;
background: #FFFFFF;
border: 1px solid rgba(26,45,62,0.08);
border-radius: 14px;
opacity: 0;
transform: translateX(-16px);
transition:
opacity 600ms cubic-bezier(0.16,1,0.3,1),
transform 600ms cubic-bezier(0.16,1,0.3,1),
border-color 240ms ease,
box-shadow 240ms ease,
background 240ms ease;
}
.dz-detail__scope.is-visible .dz-detail__scope-item {
opacity: 1;
transform: translateX(0);
}
.dz-detail__scope-item:hover {
border-color: rgba(79,200,244,0.4);
background: #FBFEFF;
box-shadow: 0 12px 32px -12px rgba(79,200,244,0.2);
}
.dz-detail__scope-num {
flex-shrink: 0;
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0;
color: var(--dz-aqua);
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(79,200,244,0.1);
border: 1px solid rgba(79,200,244,0.3);
border-radius: 999px;
font-feature-settings: "tnum" 1;
}
.dz-detail__scope-text {
font-size: 15px;
line-height: 1.55;
color: rgba(26,45,62,0.85);
padding-top: 7px;
}
/* ── Partner testimonial (YouTube embed + pull quote) ── */
.dz-detail__testimonial {
margin-bottom: clamp(64px, 8vw, 96px);
}
.dz-detail__testimonial-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--dz-aqua);
margin-bottom: 14px;
}
.dz-detail__testimonial-heading {
/* Inherits .dz-detail__section-title styling, just adds em colour for the partner name */
margin-bottom: 32px;
}
.dz-detail__testimonial-heading em {
color: var(--dz-aqua);
font-style: normal;
font-weight: 600;
}
.dz-detail__testimonial-grid {
display: grid;
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
gap: 36px;
align-items: stretch;
}
@media (max-width: 900px) {
.dz-detail__testimonial-grid { grid-template-columns: 1fr; gap: 28px; }
}
/* Video wrapper — 16:9 aspect ratio, rounded, shadowed */
.dz-detail__testimonial-video-wrap {
position: relative;
aspect-ratio: 16 / 9;
background: #0E1925;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 18px 40px -16px rgba(26,45,62,0.28),
0 0 0 1px rgba(26,45,62,0.06);
transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 320ms ease;
}
.dz-detail__testimonial-video-wrap:hover {
transform: translateY(-2px);
box-shadow: 0 24px 56px -16px rgba(26,45,62,0.36),
0 0 0 1px rgba(79,200,244,0.3);
}
.dz-detail__testimonial-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
/* Quote panel — navy card mirroring the related-projects strip aesthetic */
.dz-detail__testimonial-quote {
margin: 0;
background: linear-gradient(180deg, #1A2D3E 0%, #0E1925 100%);
color: #FFFFFF;
border-radius: 16px;
padding: clamp(24px, 3vw, 36px);
display: flex;
flex-direction: column;
gap: 18px;
position: relative;
overflow: hidden;
}
.dz-detail__testimonial-quote::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(420px 220px at 100% 0%, rgba(79,200,244,0.16), transparent 65%);
pointer-events: none;
}
.dz-detail__testimonial-quote > * { position: relative; z-index: 1; }
.dz-detail__testimonial-mark {
width: 32px;
height: auto;
color: var(--dz-aqua);
opacity: 0.5;
}
.dz-detail__testimonial-text {
margin: 0;
font-size: clamp(15px, 1.3vw, 17px);
line-height: 1.55;
color: rgba(255,255,255,0.92);
font-weight: 400;
font-style: normal;
/* Limit at sensible reading width */
max-width: 56ch;
}
.dz-detail__testimonial-attribution {
margin-top: auto;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.12);
display: flex;
flex-direction: column;
gap: 3px;
}
.dz-detail__testimonial-name {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: 17px;
font-weight: 600;
color: #FFFFFF;
letter-spacing: -0.01em;
margin-bottom: 2px;
}
.dz-detail__testimonial-role {
font-size: 13.5px;
font-weight: 500;
color: rgba(255,255,255,0.78);
letter-spacing: -0.005em;
}
.dz-detail__testimonial-company {
font-size: 13px;
font-weight: 500;
color: var(--dz-aqua);
letter-spacing: 0.01em;
}
.dz-detail__testimonial-note {
font-size: 12px;
color: rgba(255,255,255,0.55);
font-style: italic;
margin-top: 2px;
}
/* ── Software section ── */
.dz-detail__software { margin-bottom: 0; }
.dz-detail__software-chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* ── Related projects (dark band) ── */
.dz-detail__related {
background: #0E1925;
color: #FFFFFF;
padding: clamp(80px, 10vw, 128px) 0;
margin-top: 32px;
position: relative;
overflow: hidden;
}
.dz-detail__related::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(800px 400px at 80% 20%, rgba(79,200,244,0.08), transparent 60%);
pointer-events: none;
}
.dz-detail__related-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 clamp(24px, 5vw, 64px);
position: relative;
z-index: 1;
}
.dz-detail__related-head {
margin-bottom: 48px;
}
.dz-detail__related-eyebrow {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--dz-aqua);
margin-bottom: 18px;
}
.dz-detail__related-title {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: clamp(28px, 3.6vw, 44px);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.1;
color: #FFFFFF;
margin: 0;
max-width: 22ch;
}
.dz-detail__related-title em {
color: var(--dz-aqua);
font-style: normal;
}
.dz-detail__related-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
margin-bottom: 48px;
}
@media (max-width: 900px) { .dz-detail__related-grid { grid-template-columns: 1fr; gap: 18px; } }
.dz-detail__related-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition:
transform 280ms cubic-bezier(0.34,1.4,0.64,1),
border-color 240ms ease,
background 240ms ease;
}
.dz-detail__related-card:hover {
transform: translateY(-3px);
background: rgba(255,255,255,0.08);
border-color: rgba(79,200,244,0.4);
}
.dz-detail__related-image {
aspect-ratio: 16 / 10;
overflow: hidden;
position: relative;
background: rgba(0,0,0,0.3);
}
.dz-detail__related-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 600ms cubic-bezier(0.16,1,0.3,1);
}
.dz-detail__related-card:hover .dz-detail__related-image img {
transform: scale(1.05);
}
.dz-detail__related-body { padding: 18px 18px 22px; }
.dz-detail__related-name {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
margin: 0 0 6px;
color: #FFFFFF;
}
.dz-detail__related-meta {
font-size: 13px;
color: rgba(255,255,255,0.6);
margin: 0;
}
.dz-detail__all-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
color: var(--dz-aqua);
text-decoration: none;
border-bottom: 1px solid rgba(79,200,244,0.4);
padding-bottom: 4px;
transition: gap 240ms ease, border-color 240ms ease;
}
.dz-detail__all-link:hover {
gap: 14px;
border-bottom-color: var(--dz-aqua);
}
/* ── Floating CTA (appears after first viewport) ── */
.dz-detail__floating-cta {
position: fixed;
bottom: 24px;
right: 24px;
z-index: 50;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
background: #1A2D3E;
color: #FFFFFF;
font-size: 13.5px;
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
border-radius: 999px;
box-shadow:
0 14px 32px -10px rgba(26,45,62,0.5),
0 0 0 1px rgba(255,255,255,0.06);
opacity: 0;
transform: translateY(20px) scale(0.94);
pointer-events: none;
transition:
opacity 320ms cubic-bezier(0.16,1,0.3,1),
transform 320ms cubic-bezier(0.16,1,0.3,1),
box-shadow 320ms ease;
}
.dz-detail__floating-cta.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.dz-detail__floating-cta:hover {
box-shadow:
0 18px 40px -10px rgba(26,45,62,0.5),
0 0 0 4px rgba(79,200,244,0.18);
transform: translateY(-2px) scale(1);
}
.dz-detail__floating-cta span:last-child {
transition: transform 240ms cubic-bezier(0.34,1.4,0.64,1);
}
.dz-detail__floating-cta:hover span:last-child {
transform: translateX(4px);
}
@media (max-width: 600px) {
.dz-detail__floating-cta {
left: 16px;
right: 16px;
bottom: 16px;
justify-content: center;
}
}
/* ── 404 / missing project state ── */
.dz-detail--missing {
display: flex;
align-items: center;
justify-content: center;
padding: 124px 24px 96px;
text-align: center;
}
.dz-detail__missing-inner {
max-width: 480px;
}
.dz-detail__missing-eyebrow {
display: inline-block;
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: 96px;
font-weight: 700;
letter-spacing: -0.04em;
color: rgba(26,45,62,0.12);
line-height: 1;
margin-bottom: 12px;
}
.dz-detail__missing-title {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: 32px;
font-weight: 600;
letter-spacing: -0.02em;
color: #1A2D3E;
margin: 0 0 14px;
}
.dz-detail__missing-sub {
font-size: 16px;
line-height: 1.55;
color: rgba(26,45,62,0.7);
margin: 0 0 32px;
}
.dz-detail__missing-back {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
background: #1A2D3E;
color: #FFFFFF;
text-decoration: none;
border-radius: 999px;
font-size: 14px;
font-weight: 600;
transition: background 200ms ease, gap 240ms ease;
}
.dz-detail__missing-back:hover {
background: #243a4f;
gap: 12px;
}
/* ── Animations ── */
@keyframes dz-detail-fade-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.dz-detail *, .dz-detail *::before, .dz-detail *::after {
animation-duration: 0.01ms !important;
animation-delay: 0ms !important;
transition: none !important;
}
.dz-detail__hero-image-wrap { transform: none !important; }
.dz-detail__reveal { opacity: 1 !important; transform: none !important; }
.dz-detail__fact { opacity: 1 !important; transform: none !important; }
.dz-detail__scope-item { opacity: 1 !important; transform: none !important; }
.dz-detail__floating-cta { opacity: 1 !important; transform: none !important; }
.dz-detail__section-title::after { width: 64px !important; }
}
/* ──────────────────────────────────────────────────────────────────────
SERVICES HUB — REDESIGNED 2026-04-30
Two visual bands: navy intro + light grid.
Carousel removed — all 11 stages now visible in a single static grid.
────────────────────────────────────────────────────────────────────── */
/* Reset base — drop the old max-width/center, let bands fill viewport */
.dz-services-hub {
padding: 0;
margin: 0;
max-width: none;
background: transparent;
}
/* Inner wrapper — applied inside each band for content max-width */
.dz-services-hub__inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 clamp(20px, 5vw, 64px);
}
/* ── Intro band (navy) ── */
.dz-services-hub__intro-band {
background: var(--dz-navy-deep);
padding: clamp(96px, 12vw, 156px) 0 clamp(56px, 7vw, 88px);
position: relative;
overflow: hidden;
}
.dz-services-hub__intro-band::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(900px 500px at 80% 20%, rgba(79,200,244,0.06), transparent 60%);
pointer-events: none;
}
.dz-services-hub__intro-band > * { position: relative; z-index: 1; }
/* ── Head text styling (already exists, slight tightening) ── */
.dz-services-hub__head {
max-width: 720px;
margin: 0 auto;
text-align: center;
opacity: 0;
animation: dz-services-fade-up 700ms 100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
/* ── Grid band (light) ── */
.dz-services-hub__grid-band {
background: #F8F8F8;
padding: clamp(64px, 8vw, 104px) 0 clamp(72px, 9vw, 120px);
position: relative;
}
/* Subtle aqua wash bleed at top of grid band — soft transition from navy */
.dz-services-hub__grid-band::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 80px;
background: linear-gradient(180deg, rgba(26,45,62,0.04), transparent);
pointer-events: none;
}
.dz-services-hub__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 22px;
}
@media (max-width: 700px) {
.dz-services-hub__grid { grid-template-columns: 1fr; gap: 18px; }
}
/* ── Stage cards (LIGHT bg variant — overrides any prior dark styling) ── */
.dz-stage-card {
background: #FFFFFF;
border: 1px solid rgba(26,45,62,0.08);
border-radius: 16px;
padding: 28px 26px 24px;
display: flex;
flex-direction: column;
gap: 18px;
text-decoration: none;
color: inherit;
position: relative;
min-height: 320px;
transition:
transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1),
border-color 240ms ease,
box-shadow 240ms ease,
background 240ms ease;
opacity: 0;
animation: dz-services-fade-up 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.dz-stage-card:hover {
transform: translateY(-4px);
border-color: rgba(79, 200, 244, 0.45);
box-shadow:
0 22px 48px -18px rgba(26, 45, 62, 0.18),
0 0 0 1px rgba(79, 200, 244, 0.18);
background: #FBFEFF;
}
.dz-stage-card__head {
display: flex;
align-items: flex-start;
gap: 14px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(26, 45, 62, 0.08);
}
.dz-stage-card__num {
flex-shrink: 0;
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: 13px;
font-weight: 700;
color: var(--dz-aqua);
width: 38px;
height: 38px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(79, 200, 244, 0.1);
border: 1px solid rgba(79, 200, 244, 0.3);
border-radius: 999px;
font-feature-settings: "tnum" 1;
transition: background 240ms ease, border-color 240ms ease;
}
.dz-stage-card:hover .dz-stage-card__num {
background: rgba(79, 200, 244, 0.18);
border-color: rgba(79, 200, 244, 0.55);
}
.dz-stage-card__label {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: 19px;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.25;
color: #1A2D3E;
margin: 6px 0 0;
flex: 1;
}
.dz-stage-card__services {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.dz-stage-card__services li {
font-size: 14px;
line-height: 1.45;
color: rgba(26, 45, 62, 0.74);
padding-left: 16px;
position: relative;
}
.dz-stage-card__services li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--dz-aqua);
opacity: 0.55;
}
.dz-stage-card__cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--dz-aqua);
margin-top: auto;
padding-top: 12px;
border-top: 1px solid rgba(26, 45, 62, 0.06);
transition: gap 240ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.dz-stage-card:hover .dz-stage-card__cta { gap: 12px; }
.dz-stage-card__cta svg { transition: transform 240ms cubic-bezier(0.34, 1.4, 0.64, 1); }
.dz-stage-card:hover .dz-stage-card__cta svg { transform: translateX(2px); }
/* ── 12th CTA card — inverted (navy) for visual standout ── */
.dz-stage-card--cta {
background: linear-gradient(180deg, #1A2D3E 0%, #0E1925 100%);
border-color: transparent;
color: #FFFFFF;
position: relative;
overflow: hidden;
}
.dz-stage-card--cta::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(420px 220px at 100% 0%, rgba(79,200,244,0.18), transparent 65%);
pointer-events: none;
}
.dz-stage-card--cta > * { position: relative; z-index: 1; }
.dz-stage-card--cta:hover {
transform: translateY(-4px);
border-color: rgba(79, 200, 244, 0.5);
box-shadow:
0 28px 56px -18px rgba(26, 45, 62, 0.4),
0 0 0 1px rgba(79, 200, 244, 0.4);
background: linear-gradient(180deg, #243a4f 0%, #1A2D3E 100%);
}
.dz-stage-card--cta .dz-stage-card__head {
border-bottom-color: rgba(255, 255, 255, 0.12);
}
.dz-stage-card--cta .dz-stage-card__num {
background: rgba(79, 200, 244, 0.15);
border-color: rgba(79, 200, 244, 0.4);
color: var(--dz-aqua);
}
.dz-stage-card--cta:hover .dz-stage-card__num {
background: rgba(79, 200, 244, 0.28);
border-color: rgba(79, 200, 244, 0.7);
}
.dz-stage-card--cta .dz-stage-card__label {
color: #FFFFFF;
}
.dz-stage-card--cta .dz-stage-card__cta-desc {
font-size: 14px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.78);
margin: 0;
flex: 1;
}
.dz-stage-card--cta .dz-stage-card__cta {
color: var(--dz-aqua);
border-top-color: rgba(255, 255, 255, 0.12);
}
/* ── Animations ── */
@keyframes dz-services-fade-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.dz-services-hub *, .dz-services-hub *::before, .dz-services-hub *::after {
animation-duration: 0.01ms !important;
animation-delay: 0ms !important;
}
.dz-stage-card { opacity: 1 !important; }
.dz-services-hub__head { opacity: 1 !important; }
}
/* ──────────────────────────────────────────────────────────────────────
/services/ — LIFECYCLE PATH (replaces the old grid 2026-04-30)
The page IS the visualization. 11 nodes on a flowing SVG curve,
hover reveals services, click navigates to detail page.
Old `.dz-stage-card`, `.dz-services-hub__grid`, `.dz-services-hub__grid-band`
selectors above are still in the file but unused (JSX no longer renders them).
Harmless dead CSS, can be cleaned up later.
────────────────────────────────────────────────────────────────────── */
.dz-services-hub__path-band {
background: #F8F8F8;
padding: clamp(56px, 7vw, 96px) 0 clamp(72px, 9vw, 128px);
position: relative;
}
.dz-services-hub__path-band::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 64px;
background: linear-gradient(180deg, rgba(26,45,62,0.04), transparent);
pointer-events: none;
}
.dz-svc-life {
position: relative;
width: 100%;
aspect-ratio: 5 / 3;
min-height: 520px;
max-width: 1180px;
margin: 0 auto;
}
.dz-svc-life__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.dz-svc-life__track {
stroke: rgba(26, 45, 62, 0.1);
stroke-width: 2;
stroke-linecap: round;
}
.dz-svc-life__line {
stroke: var(--dz-aqua);
stroke-width: 2.4;
stroke-linecap: round;
stroke-dasharray: 100;
stroke-dashoffset: 100;
transition: stroke-dashoffset 2400ms cubic-bezier(0.16, 1, 0.3, 1);
filter: drop-shadow(0 0 6px rgba(79, 200, 244, 0.5));
}
.dz-svc-life.is-drawn .dz-svc-life__line {
stroke-dashoffset: 0;
}
.dz-svc-life__node {
position: absolute;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-decoration: none;
color: inherit;
z-index: 2;
opacity: 0;
animation: dz-svc-life-node-pop 700ms var(--node-delay, 0ms) cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}
.dz-svc-life__node:focus-visible {
outline: none;
}
.dz-svc-life__node-dot {
width: 60px;
height: 60px;
border-radius: 999px;
background: var(--dz-navy-deep);
border: 2px solid var(--dz-navy-deep);
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
transition: transform 320ms cubic-bezier(0.34, 1.4, 0.64, 1),
border-color 240ms ease,
box-shadow 320ms ease,
background 280ms ease;
}
.dz-svc-life__node-num {
font-family: "Inter Tight", "Inter", sans-serif;
font-size: 15px;
font-weight: 700;
color: var(--dz-aqua);
letter-spacing: 0;
font-feature-settings: "tnum" 1;
}
.dz-svc-life__node-label {
font-size: 13px;
font-weight: 600;
letter-spacing: -0.005em;
color: rgba(26, 45, 62, 0.78);
white-space: nowrap;
background: #F8F8F8;
padding: 4px 10px;
border-radius: 4px;
transition: color 240ms ease, transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1);
text-align: center;
}
.dz-svc-life__node.is-active .dz-svc-life__node-dot,
.dz-svc-life__node:hover .dz-svc-life__node-dot,
.dz-svc-life__node:focus-visible .dz-svc-life__node-dot {
transform: scale(1.15);
border-color: var(--dz-aqua);
background: linear-gradient(135deg, #243a4f 0%, var(--dz-navy-deep) 100%);
box-shadow:
0 0 0 6px rgba(79, 200, 244, 0.14),
0 14px 32px -10px rgba(26, 45, 62, 0.42);
}
.dz-svc-life__node.is-active .dz-svc-life__node-num,
.dz-svc-life__node:hover .dz-svc-life__node-num,
.dz-svc-life__node:focus-visible .dz-svc-life__node-num {
color: var(--dz-aqua);
}
.dz-svc-life__node.is-active .dz-svc-life__node-label,
.dz-svc-life__node:hover .dz-svc-life__node-label,
.dz-svc-life__node:focus-visible .dz-svc-life__node-label {
color: var(--dz-aqua);
}
.dz-svc-life__preview {
position: absolute;
left: 50%;
width: 280px;
background: var(--dz-navy-deep);
color: #FFFFFF;
border-radius: 16px;
padding: 18px 20px;
display: flex;
flex-direction: column;
gap: 6px;
pointer-events: none;
opacity: 0;
transition: opacity 260ms ease, transform 360ms cubic-bezier(0.34, 1.4, 0.64, 1);
box-shadow:
0 22px 48px -18px rgba(26, 45, 62, 0.4),
0 0 0 1px rgba(79, 200, 244, 0.18);
z-index: 10;
}
.dz-svc-life__node[data-row="top"] .dz-svc-life__preview {
top: calc(100% + 18px);
transform: translate(-50%, 8px);
}
.dz-svc-life__node[data-row="bottom"] .dz-svc-life__preview {
bottom: calc(100% + 18px);
transform: translate(-50%, -8px);
}
.dz-svc-life__node.is-active .dz-svc-life__preview,
.dz-svc-life__node:hover .dz-svc-life__preview,
.dz-svc-life__node:focus-visible .dz-svc-life__preview {
opacity: 1;
pointer-events: auto;
}
.dz-svc-life__node.is-active[data-row="top"] .dz-svc-life__preview,
.dz-svc-life__node:hover[data-row="top"] .dz-svc-life__preview {
transform: translate(-50%, 0);
}
.dz-svc-life__node.is-active[data-row="bottom"] .dz-svc-life__preview,
.dz-svc-life__node:hover[data-row="bottom"] .dz-svc-life__preview {
transform: translate(-50%, 0);
}
.dz-svc-life__preview-arrow {
position: absolute;
left: 50%;
width: 12px;
height: 12px;
background: var(--dz-navy-deep);
border-right: 1px solid rgba(79, 200, 244, 0.18);
border-bottom: 1px solid rgba(79, 200, 244, 0.18);
}
.dz-svc-life__node[data-row="top"] .dz-svc-life__preview-arrow {
top: -7px;
transform: translateX(-50%) rotate(-135deg);
}
.dz-svc-life__node[data-row="bottom"] .dz-svc-life__preview-arrow {
bottom: -7px;
transform: translateX(-50%) rotate(45deg);
}
.dz-svc-life__preview-eyebrow {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--dz-aqua);
}
.dz-svc-life__preview-title {
font-family: "Inter Tight", "Inter", sans-serif;
font-size: 18px;
font-weight: 600;
letter-spacing: -0.015em;
color: #FFFFFF;
margin-top: 2px;
}
.dz-svc-life__preview-tagline {
font-size: 13px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.72);
margin-top: 4px;
}
.dz-svc-life__preview-services {
font-size: 12px;
color: rgba(255, 255, 255, 0.55);
margin-top: 6px;
line-height: 1.5;
}
.dz-svc-life__preview-svc {
font-weight: 500;
color: rgba(255, 255, 255, 0.8);
}
.dz-svc-life__preview-cta {
margin-top: 10px;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--dz-aqua);
padding-top: 12px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Mobile fallback */
.dz-svc-life-mobile {
display: none;
list-style: none;
margin: 0;
padding: 0;
}
@media (max-width: 900px) {
.dz-svc-life { display: none; }
.dz-svc-life-mobile {
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
margin: 0 auto;
max-width: 600px;
}
.dz-svc-life-mobile::before {
content: "";
position: absolute;
top: 32px;
bottom: 32px;
left: 28px;
width: 2px;
background: rgba(79, 200, 244, 0.24);
border-radius: 2px;
}
.dz-svc-life-mobile__item { position: relative; }
.dz-svc-life-mobile__link {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px 16px 0;
background: #FFFFFF;
border: 1px solid rgba(26,45,62,0.08);
border-radius: 12px;
text-decoration: none;
color: inherit;
transition: border-color 240ms ease, transform 240ms ease, box-shadow 240ms ease;
}
.dz-svc-life-mobile__link:hover,
.dz-svc-life-mobile__link:focus-visible {
border-color: rgba(79,200,244,0.4);
transform: translateX(3px);
box-shadow: 0 12px 24px -10px rgba(26,45,62,0.16);
}
.dz-svc-life-mobile__num {
flex-shrink: 0;
width: 56px;
height: 56px;
background: var(--dz-navy-deep);
color: var(--dz-aqua);
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: "Inter Tight", "Inter", sans-serif;
font-size: 14px;
font-weight: 700;
margin-left: -28px;
margin-right: 4px;
z-index: 1;
border: 2px solid var(--dz-navy-deep);
}
.dz-svc-life-mobile__body {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
min-width: 0;
}
.dz-svc-life-mobile__label {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.005em;
color: #1A2D3E;
}
.dz-svc-life-mobile__tagline {
font-size: 13px;
line-height: 1.45;
color: rgba(26, 45, 62, 0.65);
}
.dz-svc-life-mobile__arrow {
flex-shrink: 0;
width: 18px;
height: 18px;
color: var(--dz-aqua);
transition: transform 240ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.dz-svc-life-mobile__link:hover .dz-svc-life-mobile__arrow {
transform: translateX(4px);
}
}
.dz-services-hub__intro em {
font-style: normal;
font-weight: 600;
color: var(--dz-aqua);
}
@keyframes dz-svc-life-node-pop {
from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.dz-svc-life__line {
stroke-dashoffset: 0 !important;
transition: none !important;
}
.dz-svc-life__node {
opacity: 1 !important;
animation: none !important;
}
.dz-svc-life__preview {
transition: opacity 0.01ms !important;
}
}
/* ──────────────────────────────────────────────────────────────────────
/services/ — STAGE EXPLORER (2026-04-30 redesign #2)
Replaces .dz-svc-life* lifecycle path. Old lifecycle CSS still in
home.css above but not referenced by JSX — dead code, harmless.
Layout: 40% selector / 60% featured panel.
Pattern: hover/click a stage in the list → panel re-mounts to that
stage's content with a fade-up animation.
────────────────────────────────────────────────────────────────────── */
.dz-services-hub__explorer-band {
background: #F8F8F8;
padding: clamp(64px, 8vw, 104px) 0 clamp(72px, 9vw, 128px);
position: relative;
}
.dz-services-hub__explorer-band::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 64px;
background: linear-gradient(180deg, rgba(26,45,62,0.04), transparent);
pointer-events: none;
}
.dz-svc-explorer {
display: grid;
grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.4fr);
gap: clamp(28px, 4vw, 64px);
align-items: stretch;
}
@media (max-width: 880px) {
.dz-svc-explorer { grid-template-columns: 1fr; gap: 24px; }
}
/* ── LEFT: slim selector list ── */
.dz-svc-explorer__selector {
display: flex;
flex-direction: column;
gap: 14px;
}
.dz-svc-explorer__selector-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(26,45,62,0.55);
padding-left: 4px;
}
.dz-svc-explorer__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.dz-svc-explorer__item {
appearance: none;
-webkit-appearance: none;
border: 0;
background: transparent;
width: 100%;
font: inherit;
text-align: left;
display: grid;
grid-template-columns: 32px 1fr 6px;
align-items: center;
gap: 14px;
padding: 13px 14px 13px 14px;
border-radius: 10px;
cursor: pointer;
color: rgba(26,45,62,0.75);
position: relative;
transition: background 220ms ease, color 220ms ease, padding-left 280ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.dz-svc-explorer__item:hover {
background: rgba(26,45,62,0.04);
color: var(--dz-navy-deep);
}
.dz-svc-explorer__item.is-active {
background: var(--dz-navy-deep);
color: #FFFFFF;
padding-left: 22px;
}
.dz-svc-explorer__item:focus-visible {
outline: 2px solid var(--dz-aqua);
outline-offset: 2px;
}
.dz-svc-explorer__item-num {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0;
color: rgba(26,45,62,0.4);
font-feature-settings: "tnum" 1;
transition: color 220ms ease;
}
.dz-svc-explorer__item.is-active .dz-svc-explorer__item-num {
color: var(--dz-aqua);
}
.dz-svc-explorer__item-label {
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dz-svc-explorer__item-marker {
width: 6px;
height: 6px;
border-radius: 999px;
background: transparent;
transition: background 220ms ease, transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.dz-svc-explorer__item.is-active .dz-svc-explorer__item-marker {
background: var(--dz-aqua);
transform: scale(1.4);
box-shadow: 0 0 8px rgba(79, 200, 244, 0.7);
}
/* ── RIGHT: featured panel ── */
.dz-svc-explorer__panel {
background: linear-gradient(135deg, #E8F5FB 0%, #FFFFFF 100%);
border-radius: 22px;
padding: clamp(36px, 5vw, 64px) clamp(32px, 5vw, 56px);
position: relative;
overflow: hidden;
border: 1px solid rgba(26,45,62,0.06);
box-shadow:
0 30px 60px -28px rgba(26, 45, 62, 0.18),
0 0 0 1px rgba(26,45,62,0.04);
/* Re-mounted on every activeIndex change via React `key` —
fresh animation each time. */
animation: dz-svc-explorer-panel-in 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
min-height: 360px;
display: flex;
align-items: center;
}
.dz-svc-explorer__panel::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(500px 320px at 100% 0%, rgba(79,200,244,0.06), transparent 60%);
pointer-events: none;
}
/* Huge background number — decorative, dramatic */
.dz-svc-explorer__big-num {
position: absolute;
top: clamp(-12px, -1vw, 8px);
right: clamp(8px, 3vw, 36px);
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: clamp(180px, 22vw, 320px);
font-weight: 700;
line-height: 0.85;
letter-spacing: -0.06em;
color: rgba(79, 200, 244, 0.14);
font-feature-settings: "tnum" 1;
pointer-events: none;
user-select: none;
z-index: 0;
animation: dz-svc-explorer-num-in 800ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dz-svc-explorer__panel-body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
max-width: 520px;
}
.dz-svc-explorer__panel-eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--dz-aqua);
}
.dz-svc-explorer__panel-title {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: clamp(34px, 4.4vw, 52px);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.05;
color: var(--dz-navy-deep);
margin: 0;
}
.dz-svc-explorer__panel-tagline {
font-size: clamp(15px, 1.4vw, 17px);
line-height: 1.55;
color: rgba(26,45,62,0.74);
margin: 0;
max-width: 44ch;
}
.dz-svc-explorer__services {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
}
.dz-svc-explorer__chip {
display: inline-flex;
align-items: center;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--dz-navy-deep);
padding: 7px 12px;
background: rgba(79, 200, 244, 0.08);
border: 1px solid rgba(79, 200, 244, 0.3);
border-radius: 999px;
position: relative;
}
.dz-svc-explorer__chip-short { display: inline; }
.dz-svc-explorer__chip-full {
/* Hidden visually, surfaced for screen readers + on chip hover via tooltip */
position: absolute;
width: 1px; height: 1px; padding: 0;
margin: -1px; overflow: hidden;
clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.dz-svc-explorer__cta {
align-self: flex-start;
margin-top: 16px;
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #FFFFFF;
background: var(--dz-navy-deep);
border: 1px solid var(--dz-navy-deep);
text-decoration: none;
padding: 14px 26px;
border-radius: 999px;
transition: gap 240ms cubic-bezier(0.34, 1.4, 0.64, 1),
background 220ms ease,
box-shadow 240ms ease;
}
.dz-svc-explorer__cta:hover {
gap: 14px;
background: #243a4f;
box-shadow: 0 0 0 4px rgba(79,200,244,0.16),
0 14px 32px -10px rgba(26,45,62,0.4);
}
.dz-svc-explorer__cta svg {
transition: transform 240ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.dz-svc-explorer__cta:hover svg {
transform: translateX(2px);
}
/* ── Mobile (≤880px): stack + horizontal selector ── */
@media (max-width: 880px) {
.dz-svc-explorer__selector {
overflow: hidden;
}
.dz-svc-explorer__list {
display: flex;
flex-direction: row;
overflow-x: auto;
gap: 6px;
padding: 4px 0 12px;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.dz-svc-explorer__list li { flex-shrink: 0; }
.dz-svc-explorer__item {
grid-template-columns: auto auto;
gap: 8px;
padding: 10px 14px;
white-space: nowrap;
}
.dz-svc-explorer__item.is-active {
padding-left: 14px;
}
.dz-svc-explorer__item-marker {
display: none;
}
.dz-svc-explorer__panel {
min-height: 320px;
padding: 32px 24px;
}
.dz-svc-explorer__big-num {
font-size: clamp(140px, 30vw, 240px);
top: -20px;
right: 0;
}
}
/* ── Animations ── */
@keyframes dz-svc-explorer-panel-in {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes dz-svc-explorer-num-in {
from { opacity: 0; transform: translateY(28px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
.dz-svc-explorer__panel,
.dz-svc-explorer__big-num {
animation: none !important;
}
.dz-svc-explorer__item { transition: none !important; }
}
/* ──────────────────────────────────────────────────────────────────────
Stage Explorer — services list (replaces chip strip 2026-04-30 #3)
Shows the 3 services in each stage with their full names + summaries,
so each featured panel is filled with real content.
────────────────────────────────────────────────────────────────────── */
.dz-svc-explorer__services-block {
margin-top: 8px;
padding-top: 22px;
border-top: 1px solid rgba(26, 45, 62, 0.08);
display: flex;
flex-direction: column;
gap: 14px;
}
.dz-svc-explorer__services-eyebrow {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(26, 45, 62, 0.5);
}
.dz-svc-explorer__services-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.dz-svc-explorer__service {
display: grid;
grid-template-columns: 12px 1fr;
gap: 14px;
align-items: flex-start;
}
.dz-svc-explorer__service-marker {
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--dz-aqua);
margin-top: 9px;
flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(79, 200, 244, 0.12);
}
.dz-svc-explorer__service-body {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.dz-svc-explorer__service-name {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--dz-navy-deep);
margin: 0;
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px;
}
.dz-svc-explorer__service-short {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--dz-aqua);
background: rgba(79, 200, 244, 0.08);
border: 1px solid rgba(79, 200, 244, 0.3);
padding: 2px 7px;
border-radius: 4px;
flex-shrink: 0;
}
.dz-svc-explorer__service-summary {
font-size: 13px;
line-height: 1.5;
color: rgba(26, 45, 62, 0.68);
margin: 0;
}
/* The panel needs a bit more breathing room now that it has more content */
.dz-svc-explorer__panel {
align-items: flex-start;
/* Lock min-height so panel size stays consistent across stages,
regardless of how long each stage's service summaries are. */
min-height: 580px;
}
.dz-svc-explorer__panel-body {
width: 100%;
}
/* ──────────────────────────────────────────────────────────────────────
SOLUTIONS HUB — /solutions/ (Mirror layout)
──────────────────────────────────────────────────────────────────────
Brand-true diptych: TwinMaq (navy-deep half, "before") on the left,
TwinMs (aqua-wash half, "after") on the right, separated by a vertical
spine that streams BIM data glyphs and pulses a handover dot.
Below the split:
▸ .dz-sol-outcome — navy band, "Sell it. Then run it."
▸ .dz-sol-trust — light aqua-wash band with dark-navy cards
(per the light-theme card-inversion rule)
Brand constraints honoured (see colors_and_type.css + light-theme spec):
▸ Outfit only — weights 300/400/500/600/700
▸ Brand tokens only: --dz-navy, --dz-navy-deep, --dz-aqua, --dz-aqua-wash
▸ = aqua, font-style: normal (NOT italic)
▸ Title scale clamp(34px,4.6vw,64px), weight 700, tracking -0.025em
▸ Eyebrow 12px ALLCAPS w/ 0.18em tracking + leading hairline
▸ Pill CTAs use --dz-radius-pill
All accent words in the JSX render inside , so the rule below is
the single source of truth for accent treatment on this page.
────────────────────────────────────────────────────────────────────── */
.dz-solutions {
display: block;
/* TwinMs identity tokens — re-declared locally so the page is self-contained
(the canonical declarations live in the home.css Products section, but
we don't want to depend on selector ordering). */
--twinms-teal-2: #4FB5A4;
--twinms-soft: rgba(55,152,138,0.10);
--twinms-border: rgba(55,152,138,0.45);
--twinms-glow: rgba(55,152,138,0.40);
}
/* Default accent: aqua (TwinMaq + neutral copy). The TwinMs half
overrides this below with teal so its identity reads green throughout. */
.dz-solutions em {
color: var(--dz-aqua);
font-style: normal;
font-weight: inherit;
}
/* ── HERO BAND — page opener (matches /services/, /about/, /projects/) ── */
.dz-sol-hero {
position: relative;
/* Light bg matching /projects/ — keeps the page rhythm: light hero →
dark Mirror → dark outcome → light trust → dark CtaStrip → dark
footer. The dark Mirror becomes the centrepiece between two light
bookends instead of being one of three dark sections in a row. */
background: #FAFAFA;
color: var(--dz-text, #2B3D4F);
padding: 110px 32px 72px;
overflow: hidden;
}
.dz-sol-hero::before {
/* Subtle aqua glow at top-right (gentler now that bg is light) */
content: "";
position: absolute; inset: 0;
background: radial-gradient(900px 600px at 80% 0%, rgba(79,200,244,0.10), transparent 60%);
pointer-events: none;
}
.dz-sol-hero::after {
/* Stronger aqua hairline at the bottom edge — visual handoff from the
light hero into the dark Mirror below. */
content: "";
position: absolute; left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(79,200,244,0.6) 50%, transparent 100%);
}
/* Two ambient glows in the hero — preview the identity colours that the
user will meet in the Mirror (aqua-left, teal-right). Subtle, doesn't
compete with the headline. */
.dz-sol-hero__glow {
position: absolute;
pointer-events: none;
border-radius: 50%;
filter: blur(70px);
opacity: 0.45; /* gentler against the light bg */
}
.dz-sol-hero__glow--maq {
width: 540px; height: 540px;
top: -160px; left: -100px;
background: radial-gradient(circle, rgba(79,200,244,0.22) 0%, transparent 65%);
animation: dzSolHeroFloat 14s ease-in-out infinite alternate;
}
.dz-sol-hero__glow--ms {
width: 480px; height: 480px;
bottom: -180px; right: -80px;
background: radial-gradient(circle, rgba(79,181,164,0.22) 0%, transparent 65%);
animation: dzSolHeroFloat 16s ease-in-out infinite alternate-reverse;
}
@keyframes dzSolHeroFloat {
from { transform: translate(0, 0); }
to { transform: translate(40px, 30px); }
}
/* Product logo marks as low-opacity watermark texture in the corners.
Hints at the two solutions without literal product cards in the hero. */
.dz-sol-hero__mark {
position: absolute;
pointer-events: none;
height: 32px;
width: auto;
opacity: 0.10;
filter: grayscale(0.3) brightness(1.4);
z-index: 1;
}
.dz-sol-hero__mark--maq { top: 24%; right: 6%; }
.dz-sol-hero__mark--ms { bottom: 22%; right: 4%; }
@media (min-width: 1280px) {
.dz-sol-hero__mark { height: 40px; opacity: 0.13; }
.dz-sol-hero__mark--maq { right: 10%; }
.dz-sol-hero__mark--ms { right: 22%; bottom: 28%; }
}
.dz-sol-hero__inner {
position: relative;
max-width: 1240px;
margin: 0 auto;
}
.dz-sol-hero__head {
max-width: 880px;
margin: 0 auto 48px;
text-align: center;
}
.dz-sol-hero__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
justify-content: center;
font-size: var(--dz-fs-caption, 12px);
font-weight: var(--dz-fw-semibold, 600);
letter-spacing: var(--dz-tracking-eyebrow, 0.18em);
text-transform: uppercase;
color: var(--dz-aqua);
margin-bottom: 22px;
}
.dz-sol-hero__head .dz-sol-hero__lead {
margin-left: auto; margin-right: auto;
text-align: center;
}
.dz-sol-hero__head .dz-sol-hero__title {
text-align: center;
}
/* Pulsing aqua dot — matches the brand .dz-eyebrow::before chrome but
with an added pulse animation. Used across the Solutions page on
every eyebrow (hero, mirror halves, outcome, trust). */
.dz-sol-hero__eyebrow::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--dz-aqua);
box-shadow: 0 0 8px var(--dz-aqua);
animation: dzSolEyebrowPulse 2.4s ease-in-out infinite;
}
@keyframes dzSolEyebrowPulse {
0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 8px var(--dz-aqua); }
50% { transform: scale(1.35); opacity: .65; box-shadow: 0 0 14px var(--dz-aqua), 0 0 22px rgba(79,200,244,0.4); }
}
.dz-sol-hero__title {
font-family: var(--dz-font);
font-weight: var(--dz-fw-bold, 700);
font-size: clamp(36px, 4.8vw, 64px);
line-height: var(--dz-lh-tight, 1.05);
letter-spacing: var(--dz-tracking-tight, -0.025em);
margin: 0 0 22px;
max-width: 920px;
color: var(--dz-text, #2B3D4F); /* navy on light bg */
}
.dz-sol-hero__lead {
font-size: 18px; line-height: 1.6;
max-width: 640px;
color: var(--dz-text-muted, #5A6E81); /* muted navy on light bg */
margin: 0 0 36px;
}
.dz-sol-hero__scroll {
display: inline-flex; align-items: center; gap: 10px;
margin: 44px auto 0; /* centred under the diagram */
padding: 10px 18px 10px 16px;
border-radius: var(--dz-radius-pill, 999px);
background: rgba(79,200,244,0.10);
border: 1px solid rgba(79,200,244,0.32);
color: #1F6F92; /* darker aqua-ink for legibility on light bg */
font-size: 13px;
font-weight: var(--dz-fw-semibold, 600);
letter-spacing: 0.02em;
text-decoration: none;
transition: transform .2s ease, background .2s ease;
}
.dz-sol-hero__inner > .dz-sol-hero__scroll {
display: flex; width: fit-content;
}
.dz-sol-hero__scroll:hover {
background: rgba(79,200,244,0.18);
transform: translateY(-1px);
}
.dz-sol-hero__scroll svg { color: var(--dz-aqua); animation: dzSolHint 2.4s ease-in-out infinite; }
@keyframes dzSolHint {
0%, 100% { transform: translateY(0); opacity: .8; }
50% { transform: translateY(3px); opacity: 1; }
}
/* ── BIM LIFECYCLE DIAGRAM ─────────────────────────────────────────
The hero's centrepiece. SVG timeline with 11 stages, two product
markers (TwinMaq aqua at Stage 02, TwinMs teal at Stage 09), drawn-in
line on scroll-into-view, sequential dot reveals, and animated marker
pulses. Lives inside .dz-sol-hero__inner. */
.dz-sol-lifecycle {
position: relative;
width: 100%;
max-width: 1320px;
margin: 0 auto;
/* Larger headroom now that the marker pills carry the question text +
hint inside them (was 84px, pills were ~80px tall; now ~170px). */
padding-top: 200px;
}
.dz-sol-lifecycle__svg {
width: 100%;
height: auto;
display: block;
overflow: visible;
}
/* Connecting line — drawn left → right via stroke-dashoffset.
Default: hidden (offset = full length). On .is-in-view: animate to 0. */
.dz-sol-lifecycle__line {
transition: stroke-dashoffset 1.6s cubic-bezier(.55, 0, .15, 1);
}
.dz-sol-lifecycle.is-in-view .dz-sol-lifecycle__line {
stroke-dashoffset: 0 !important;
}
/* Stage groups — fade in sequentially with --dz-sol-stage-delay */
.dz-sol-lifecycle__stage {
opacity: 0;
transform: translateY(6px);
transform-origin: center;
transition: opacity .55s var(--dz-ease-fade, cubic-bezier(.22,1,.36,1)),
transform .55s var(--dz-ease-fade, cubic-bezier(.22,1,.36,1));
transition-delay: var(--dz-sol-stage-delay, 0ms);
}
.dz-sol-lifecycle.is-in-view .dz-sol-lifecycle__stage {
opacity: 1;
transform: translateY(0);
}
.dz-sol-lifecycle__dot {
fill: #FAFAFA; /* same as hero bg, ringed by the stroke */
stroke: rgba(43,61,79,0.30);
stroke-width: 1.2;
transition: fill .25s ease, r .25s ease;
}
/* Anchor stages (where the products live) get a louder dot in identity
colour — TwinMaq's stage 02 anchor is aqua, TwinMs's stage 09 is teal. */
.dz-sol-lifecycle__stage.is-anchor .dz-sol-lifecycle__dot {
fill: var(--dz-aqua);
stroke: rgba(255,255,255,0.85);
stroke-width: 2;
}
.dz-sol-lifecycle__num {
fill: rgba(43,61,79,0.55); /* navy at low opacity */
font-family: 'JetBrains Mono', 'SFMono-Regular', monospace;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
}
.dz-sol-lifecycle__label {
fill: rgba(43,61,79,0.62); /* navy at low opacity */
font-family: var(--dz-font);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0;
}
/* Anchor labels read louder than fillers — semibold + full navy. */
.dz-sol-lifecycle__stage.is-anchor .dz-sol-lifecycle__label {
fill: var(--dz-text, #2B3D4F);
font-weight: 600;
}
.dz-sol-lifecycle__stage.is-anchor .dz-sol-lifecycle__num {
fill: var(--dz-aqua);
}
/* Marker drop-line + halo */
.dz-sol-lifecycle__marker {
opacity: 0;
transition: opacity .65s var(--dz-ease-fade, cubic-bezier(.22,1,.36,1));
transition-delay: var(--dz-sol-stage-delay, 0ms);
}
.dz-sol-lifecycle.is-in-view .dz-sol-lifecycle__marker {
opacity: 1;
}
.dz-sol-lifecycle__droplink {
stroke-dasharray: 3 3;
fill: none;
}
.dz-sol-lifecycle__marker--maq .dz-sol-lifecycle__droplink { stroke: rgba(79,200,244,0.65); }
.dz-sol-lifecycle__marker--ms .dz-sol-lifecycle__droplink { stroke: rgba(79,181,164,0.65); }
.dz-sol-lifecycle__halo {
fill: none;
stroke-width: 2;
transform-box: fill-box;
transform-origin: center;
animation: dzSolHaloPulse 3.2s ease-in-out infinite;
}
.dz-sol-lifecycle__marker--maq .dz-sol-lifecycle__halo { stroke: rgba(79,200,244,0.55); }
.dz-sol-lifecycle__marker--ms .dz-sol-lifecycle__halo {
stroke: rgba(79,181,164,0.55);
animation-delay: 1.6s; /* alternate the two pulses */
}
@keyframes dzSolHaloPulse {
0%, 100% { opacity: 0; transform: scale(0.8); }
20% { opacity: 0.9; transform: scale(1); }
60% { opacity: 0; transform: scale(1.7); }
}
/* HTML pill labels above the SVG — positioned absolutely by --dz-sol-pill-x.
Now sized to fit the taller pill content (stage + name + question + hint). */
.dz-sol-lifecycle__pills {
position: absolute;
top: 0; left: 0; right: 0;
pointer-events: none;
height: 188px; /* fits taller pill content */
}
.dz-sol-lifecycle__pill {
position: absolute;
top: 0;
left: var(--dz-sol-pill-x, 50%);
transform: translateX(-50%);
pointer-events: auto;
display: flex;
flex-direction: column; align-items: stretch;
gap: 6px;
padding: 14px 18px 14px;
/* Dark navy on light bg = card-inversion rule. The pill becomes a
weighty narrative unit on the soft hero bg. */
background: var(--dz-navy-deep, #1A2D3E);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--dz-radius, 10px);
text-decoration: none;
text-align: left;
/* Both pills locked to identical dimensions — the slightly different
question lengths shouldn't cause one to be wider/taller than the
other. */
width: 280px;
min-height: 168px;
transition: transform .25s var(--dz-ease-fade, cubic-bezier(.22,1,.36,1)),
border-color .25s ease,
box-shadow .35s ease;
opacity: 0;
box-shadow: 0 16px 32px -22px rgba(43,61,79,0.45);
}
/* The hint pill always sits at the bottom of the card so the line above
it lines up between both pills regardless of question length. */
.dz-sol-lifecycle__pill-hint { margin-top: auto; }
.dz-sol-lifecycle.is-in-view .dz-sol-lifecycle__pill {
opacity: 1;
transition-delay: var(--dz-sol-stage-delay, 0ms);
}
.dz-sol-lifecycle__pill:hover {
transform: translateX(-50%) translateY(-2px);
}
.dz-sol-lifecycle__pill--maq:hover {
border-color: rgba(79,200,244,0.55);
box-shadow: 0 14px 30px -16px rgba(79,200,244,0.6);
}
.dz-sol-lifecycle__pill--ms:hover {
border-color: rgba(79,181,164,0.55);
box-shadow: 0 14px 30px -16px rgba(79,181,164,0.6);
}
/* Pill stage label — small Outfit eyebrow at the top of the pill,
matching the brand's canonical eyebrow convention (12px ALLCAPS w/
0.18em tracking) used everywhere else on the site. */
.dz-sol-lifecycle__pill-stage {
font-family: var(--dz-font);
font-weight: var(--dz-fw-semibold, 600);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.dz-sol-lifecycle__pill--maq .dz-sol-lifecycle__pill-stage { color: var(--dz-aqua); }
.dz-sol-lifecycle__pill--ms .dz-sol-lifecycle__pill-stage { color: var(--twinms-teal-2, #4FB5A4); }
/* Product name (Outfit 700, suffix in identity colour via em). */
.dz-sol-lifecycle__pill-name {
display: block;
font-family: var(--dz-font);
font-weight: var(--dz-fw-bold, 700);
font-size: 22px;
line-height: 1;
letter-spacing: -0.03em;
color: #fff;
margin-bottom: 2px;
}
.dz-sol-lifecycle__pill-name em {
font-style: normal;
font-weight: var(--dz-fw-bold, 700);
}
.dz-sol-lifecycle__pill--maq .dz-sol-lifecycle__pill-name em { color: var(--dz-aqua); }
.dz-sol-lifecycle__pill--ms .dz-sol-lifecycle__pill-name em { color: var(--twinms-teal-2, #4FB5A4); }
/* The question — moved here from the standalone Questions section.
This is the pill's core narrative beat: "this is the problem this
solution exists to solve." Outfit 600, two-line wrap allowed. */
.dz-sol-lifecycle__pill-q {
display: block;
font-family: var(--dz-font);
font-weight: var(--dz-fw-semibold, 600);
font-size: 13px;
line-height: 1.35;
color: rgba(255,255,255,0.92);
margin-top: 6px;
}
/* Bottom hint (down arrow + "Meet TwinMaq, below") — clickable affordance.
Outfit (matches the rest of the site, no monospace for inline copy). */
.dz-sol-lifecycle__pill-hint {
display: inline-flex;
align-items: center; gap: 6px;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(255,255,255,0.10);
font-family: var(--dz-font);
font-weight: var(--dz-fw-semibold, 600);
font-size: 11px;
letter-spacing: 0.04em;
}
.dz-sol-lifecycle__pill--maq .dz-sol-lifecycle__pill-hint { color: var(--dz-aqua); }
.dz-sol-lifecycle__pill--ms .dz-sol-lifecycle__pill-hint { color: var(--twinms-teal-2, #4FB5A4); }
.dz-sol-lifecycle__pill-hint svg {
animation: dzSolHint 2.4s ease-in-out infinite;
}
.dz-sol-lifecycle__pill-stage {
font-family: 'JetBrains Mono', 'SFMono-Regular', monospace;
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.dz-sol-lifecycle__pill--maq .dz-sol-lifecycle__pill-stage { color: var(--dz-aqua); }
.dz-sol-lifecycle__pill--ms .dz-sol-lifecycle__pill-stage { color: var(--twinms-teal-2, #4FB5A4); }
.dz-sol-lifecycle__pill-tag {
font-size: 11px;
line-height: 1.4;
color: rgba(255,255,255,0.72);
font-weight: 500;
}
/* ── Responsive label disclosure ─────────────────────────────────
The 11 stage labels start to crowd at narrower widths. Rather than
crashing or letting them overlap, progressively hide non-key labels.
The four "narrative anchors" — start (Programming), TwinMaq's stage
(Concept), TwinMs's stage (Operation), end (Demolition) — stay
visible at every breakpoint so the lifecycle story still reads. */
/* ≤1280px: drop "low priority" labels (Detailed, Docs, 4D/5D, Renovation).
"Mid" stages still show; "high" anchors always show. */
@media (max-width: 1280px) {
.dz-sol-lifecycle__stage[data-priority="low"] .dz-sol-lifecycle__label
{ display: none; }
}
/* ≤1100px: drop "mid" labels too — only the 4 narrative anchors remain
(Programming, Concept, Operation, Demolition). */
@media (max-width: 1100px) {
.dz-sol-lifecycle__stage[data-priority="mid"] .dz-sol-lifecycle__label
{ display: none; }
}
/* ≤880px: drop all stage labels — dots + numbers tell the story.
Pills shrink to fit the marker positions. */
@media (max-width: 880px) {
.dz-sol-lifecycle__label { display: none; }
.dz-sol-lifecycle__pill { min-width: 150px; max-width: 180px; padding: 8px 12px 10px; }
.dz-sol-lifecycle__pill-tag { display: none; }
}
@media (max-width: 600px) {
/* Mobile: simplified — line + two markers only */
.dz-sol-lifecycle__num { font-size: 9px; }
.dz-sol-lifecycle__pill-name { font-size: 16px; }
.dz-sol-lifecycle__pill-stage { font-size: 9px; }
}
/* ── UPPER LIGHT BAND — "Two Questions" teaser ───────────────────── */
.dz-sol-questions {
background: var(--dz-aqua-wash);
padding: 88px 32px 96px;
position: relative;
}
.dz-sol-questions__inner {
max-width: 1280px; margin: 0 auto;
}
.dz-sol-questions__eye {
text-align: center;
font-size: var(--dz-fs-caption, 12px);
font-weight: var(--dz-fw-semibold, 600);
letter-spacing: var(--dz-tracking-eyebrow, 0.18em);
text-transform: uppercase;
color: var(--dz-text-muted, #5A6E81);
margin-bottom: 36px;
}
.dz-sol-questions__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
position: relative;
}
/* Old divider removed — the real spine connector below replaces it. */
.dz-sol-questions__grid::before { display: none; }
/* Real spine extending up from the Mirror INTO the Questions section.
Same gradient, same dot motif, same width as .dz-sol-spine__rail.
A pulse travels DOWN through the spine, leading the eye from the
questions to the answers below. */
.dz-sol-questions__spine {
position: absolute;
top: 0; bottom: -1px; /* extend 1px past the section bottom so it
visually fuses with the Mirror's spine */
left: 50%; transform: translateX(-50%);
width: 88px;
pointer-events: none;
z-index: 1;
}
.dz-sol-questions__spine::before {
/* Vertical rail — navy-tinted on the light bg, glows aqua mid-way */
content: "";
position: absolute; top: 0; bottom: 0; left: 50%;
width: 1px; transform: translateX(-50%);
background: linear-gradient(180deg,
transparent 0%,
rgba(43,61,79,0.15) 12%,
rgba(79,200,244,0.55) 50%,
rgba(79,181,164,0.55) 80%,
rgba(43,61,79,0.20) 100%);
}
.dz-sol-questions__spine-pulse {
/* A travelling pulse, leading the eye downward into the Mirror */
position: absolute;
left: 50%; transform: translateX(-50%);
width: 6px; height: 6px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 14px 4px rgba(79,200,244,0.6);
animation: dzSolQPulse 3.4s ease-in-out infinite;
}
@keyframes dzSolQPulse {
0% { top: 8%; opacity: 0; transform: translateX(-50%) scale(0.6); }
20% { opacity: 0.85; }
85% { top: 96%; opacity: 0.85; transform: translateX(-50%) scale(1); }
100% { top: 100%; opacity: 0; transform: translateX(-50%) scale(0.6); }
}
.dz-sol-questions__q {
background: #fff;
border-radius: var(--dz-radius-lg, 16px);
padding: 36px 32px 30px;
border: 1px solid rgba(43,61,79,0.06);
display: flex; flex-direction: column;
position: relative;
/* Default state: hidden + slightly raised — fades in on scroll-into-view
via the .is-in-view class on the parent .dz-sol-questions section. */
opacity: 0;
transform: translateY(14px);
transition: opacity .65s var(--dz-ease-fade, cubic-bezier(.22,1,.36,1)),
transform .65s var(--dz-ease-fade, cubic-bezier(.22,1,.36,1)),
border-color .25s ease,
box-shadow .25s ease;
}
.dz-sol-questions.is-in-view .dz-sol-questions__q {
opacity: 1;
transform: translateY(0);
}
/* The two cards stagger by 140ms — left first, right second. */
.dz-sol-questions.is-in-view .dz-sol-questions__q--maq { transition-delay: 0ms; }
.dz-sol-questions.is-in-view .dz-sol-questions__q--ms { transition-delay: 140ms; }
.dz-sol-questions__q:hover {
transform: translateY(-3px);
box-shadow: 0 24px 40px -28px rgba(43,61,79,0.18);
}
/* Identity colour on the left rail of each card — previews the Mirror */
.dz-sol-questions__q::before {
content: "";
position: absolute; left: 0; top: 24px; bottom: 24px;
width: 3px;
border-radius: 0 3px 3px 0;
}
.dz-sol-questions__q--maq::before { background: var(--dz-aqua); }
.dz-sol-questions__q--ms::before { background: var(--twinms-teal-2); }
.dz-sol-questions__q--maq:hover { border-color: rgba(79,200,244,0.4); }
.dz-sol-questions__q--ms:hover { border-color: rgba(79,181,164,0.45); }
.dz-sol-questions__num {
font-size: 11px;
font-weight: var(--dz-fw-semibold, 600);
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: 18px;
font-family: 'JetBrains Mono', 'SFMono-Regular', monospace;
}
.dz-sol-questions__q--maq .dz-sol-questions__num { color: var(--dz-aqua); }
.dz-sol-questions__q--ms .dz-sol-questions__num { color: var(--twinms-teal-2); }
.dz-sol-questions__text {
font-family: var(--dz-font);
font-weight: var(--dz-fw-bold, 700);
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.18;
letter-spacing: -0.018em;
color: var(--dz-text);
margin: 0 0 24px;
}
.dz-sol-questions__hint {
display: inline-flex; align-items: center; gap: 8px;
margin-top: auto;
padding: 8px 14px;
border-radius: var(--dz-radius-pill, 999px);
font-size: 12px;
font-weight: var(--dz-fw-semibold, 600);
letter-spacing: 0.04em;
text-decoration: none;
align-self: flex-start;
transition: background .2s ease, transform .2s ease;
}
.dz-sol-questions__q--maq .dz-sol-questions__hint {
background: rgba(79,200,244,0.10);
color: var(--dz-aqua);
border: 1px solid rgba(79,200,244,0.28);
}
.dz-sol-questions__q--ms .dz-sol-questions__hint {
background: var(--twinms-soft);
color: var(--twinms-teal-2);
border: 1px solid var(--twinms-border);
}
.dz-sol-questions__hint:hover { transform: translateY(-1px); }
.dz-sol-questions__hint svg {
animation: dzSolHint 2.4s ease-in-out infinite;
}
@media (max-width: 880px) {
.dz-sol-questions__grid { grid-template-columns: 1fr; }
.dz-sol-questions__grid::before { display: none; }
}
/* ── THE STAGE — split-screen diptych ─────────────────────────────── */
.dz-sol-stage {
position: relative;
display: grid;
grid-template-columns: 1fr 88px 1fr;
transition: grid-template-columns .8s cubic-bezier(.22, 1, .36, 1);
background: var(--dz-navy);
/* No min-height: this section is body content (under the hero), not the
page opener. Height is determined by half__inner content + padding. */
}
.dz-sol-stage--lean-maq { grid-template-columns: 1.3fr 88px 0.7fr; }
.dz-sol-stage--lean-ms { grid-template-columns: 0.7fr 88px 1.3fr; }
/* ── A half (one solution) ── */
.dz-sol-half {
position: relative;
overflow: hidden;
cursor: pointer;
transition: opacity .55s ease, filter .55s ease;
}
.dz-sol-half--maq {
background: var(--dz-navy-deep);
color: #fff;
}
.dz-sol-half--ms {
background: var(--dz-navy-deep);
color: #fff;
}
/* Override the default aqua on the TwinMs side so all accents read teal —
the identity color from the TwinMs logo (and the home page Products tab). */
.dz-sol-half--ms em { color: var(--twinms-teal-2); }
/* Decorative bg image (per-half via inline CSS var --dz-sol-bg) */
.dz-sol-half::before {
content: "";
position: absolute; inset: 0;
background-image: var(--dz-sol-bg);
background-size: cover;
background-position: center;
pointer-events: none;
transition: opacity .6s ease, transform .6s ease;
}
.dz-sol-half--maq::before { opacity: .22; filter: saturate(0.4) brightness(0.6); }
.dz-sol-half--ms::before { opacity: .12; filter: saturate(0.7); }
/* Soft vignette over the bg image — no grid pattern (off-brand) */
.dz-sol-half::after {
content: "";
position: absolute; inset: 0;
pointer-events: none;
}
/* TwinMaq vignette — navy-deep base with a faint aqua wash so the identity
colour shows through even before the eye lands on the accents. */
.dz-sol-half--maq::after {
background:
radial-gradient(800px 600px at 30% 20%, rgba(79,200,244,0.16) 0%, transparent 60%),
linear-gradient(135deg, rgba(26,45,62,0.55) 0%, rgba(26,45,62,0.94) 100%);
}
/* TwinMs vignette — darker navy with a faint teal wash so the identity
colour shows through even before the eye lands on the accents. */
.dz-sol-half--ms::after {
background:
radial-gradient(800px 600px at 70% 20%, rgba(79,181,164,0.16) 0%, transparent 60%),
linear-gradient(225deg, rgba(26,45,62,0.55) 0%, rgba(26,45,62,0.94) 100%);
}
.dz-sol-stage--lean-maq .dz-sol-half--ms { opacity: .55; }
.dz-sol-stage--lean-ms .dz-sol-half--maq { opacity: .55; }
.dz-sol-half__inner {
position: relative; z-index: 2;
min-height: 720px; /* enough room for content to breathe */
padding: 80px 60px 80px;
display: flex; flex-direction: column; justify-content: space-between;
gap: 40px;
transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.dz-sol-half--maq .dz-sol-half__inner { align-items: flex-end; text-align: right; }
.dz-sol-half--ms .dz-sol-half__inner { align-items: flex-start; text-align: left; }
.dz-sol-stage--lean-ms .dz-sol-half--maq .dz-sol-half__inner { transform: translateX(-30px); }
.dz-sol-stage--lean-maq .dz-sol-half--ms .dz-sol-half__inner { transform: translateX(30px); }
/* Eyebrow (brand: 12px ALLCAPS w/ 0.18em tracking + leading hairline) */
.dz-sol-half__eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-size: var(--dz-fs-caption, 12px);
font-weight: var(--dz-fw-semibold, 600);
letter-spacing: var(--dz-tracking-eyebrow, 0.18em);
text-transform: uppercase;
color: var(--dz-aqua);
}
.dz-sol-half__eyebrow::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 8px currentColor;
opacity: 1;
animation: dzSolEyebrowPulse 2.4s ease-in-out infinite;
}
.dz-sol-half--maq .dz-sol-half__eyebrow {
flex-direction: row-reverse;
}
/* TwinMs eyebrow takes the teal identity colour */
.dz-sol-half--ms .dz-sol-half__eyebrow { color: var(--twinms-teal-2); }
/* The "How do you ..." question / headline */
.dz-sol-half__q {
font-family: var(--dz-font);
font-weight: var(--dz-fw-bold, 700);
font-size: clamp(28px, 3.3vw, 48px);
line-height: 1.08;
letter-spacing: -0.02em;
margin: 24px 0 14px;
}
.dz-sol-half--ms .dz-sol-half__q { color: #fff; }
/* The product name — commanding without screaming. Reduced ~25% from
the earlier scale so the body copy below has room to read. */
.dz-sol-half__product {
font-family: var(--dz-font);
font-weight: var(--dz-fw-bold, 700);
font-size: clamp(40px, 5.5vw, 88px);
line-height: 0.94;
letter-spacing: -0.04em;
margin: 22px 0 6px;
}
.dz-sol-half--maq .dz-sol-half__product { color: #fff; }
.dz-sol-half--ms .dz-sol-half__product { color: #fff; }
.dz-sol-half__product-sub {
display: block;
font-size: 13.5px;
font-weight: var(--dz-fw-semibold, 600);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-top: 16px;
/* Identity-coloured by half — the subtitle carries the actual scope of
each solution (e.g. "Operations · Predictive maintenance · Monitoring
· Energy") and deserves louder treatment than muted grey. */
}
.dz-sol-half--maq .dz-sol-half__product-sub { color: rgba(79,200,244,0.85); }
.dz-sol-half--ms .dz-sol-half__product-sub { color: rgba(79,181,164,0.95); }
/* Tagline */
.dz-sol-half__tagline {
font-size: 15.5px; line-height: 1.6;
max-width: 380px;
margin-top: 8px;
}
.dz-sol-half--maq .dz-sol-half__tagline {
color: rgba(255,255,255,0.72);
margin-left: auto;
}
.dz-sol-half--ms .dz-sol-half__tagline { color: rgba(255,255,255,0.72); }
/* Capability rail */
.dz-sol-half__caps {
list-style: none;
margin: 30px 0 0; padding: 0;
display: flex; flex-direction: column; gap: 12px;
}
.dz-sol-half__cap {
display: flex; align-items: center; gap: 14px;
font-size: 13.5px;
font-weight: var(--dz-fw-semibold, 600);
}
.dz-sol-half--maq .dz-sol-half__cap {
flex-direction: row-reverse;
text-align: right;
color: #fff;
}
.dz-sol-half--ms .dz-sol-half__cap { color: #fff; }
.dz-sol-half__cap-ico {
width: 34px; height: 34px;
border-radius: 8px;
display: grid; place-items: center;
flex-shrink: 0;
background: rgba(79,200,244,0.10);
color: var(--dz-aqua);
border: 1px solid rgba(79,200,244,0.22);
}
.dz-sol-half--ms .dz-sol-half__cap-ico {
background: var(--twinms-soft);
color: var(--twinms-teal-2);
border-color: var(--twinms-border);
}
.dz-sol-half__cap-ico svg { width: 16px; height: 16px; }
/* CTA pill (aqua) */
.dz-sol-half__cta {
display: inline-flex; align-items: center; gap: 8px;
margin-top: 32px;
padding: 13px 24px;
border-radius: var(--dz-radius-pill, 999px);
background: var(--dz-aqua);
color: var(--dz-navy-deep);
font-size: 13.5px;
font-weight: var(--dz-fw-semibold, 600);
text-decoration: none;
letter-spacing: 0.01em;
transition: transform .2s ease, box-shadow .25s ease;
}
.dz-sol-half__cta:hover {
transform: translateY(-2px);
box-shadow: 0 16px 28px -14px rgba(79,200,244,0.55);
}
.dz-sol-half__cta svg { width: 13px; height: 13px; }
.dz-sol-half--maq .dz-sol-half__cta { align-self: flex-end; }
.dz-sol-half--ms .dz-sol-half__cta {
align-self: flex-start;
background: var(--twinms-teal-2);
color: var(--dz-navy-deep);
}
.dz-sol-half--ms .dz-sol-half__cta:hover {
box-shadow: 0 16px 28px -14px var(--twinms-glow);
}
/* ── Hover-reveal card (the lean now means something) ──────────────
Floats on the OUTER edge of each half. Hidden by default; on hover
of its parent half, slides in with a fade. Contains:
▸ a real product UI screenshot in a fake browser frame
▸ a single big stat (3× faster sales / 24% energy savings)
▸ a small tag line ("Live since 2024 · Vision 2030 work") */
.dz-sol-half__reveal {
position: absolute;
bottom: 60px;
width: clamp(240px, 28vw, 340px);
display: flex; flex-direction: column; gap: 14px;
padding: 16px 16px 18px;
background: rgba(7, 13, 20, 0.72);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--dz-radius-lg, 16px);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
opacity: 0;
transform: translateY(20px);
transition: opacity .45s cubic-bezier(.22,1,.36,1),
transform .55s cubic-bezier(.22,1,.36,1);
pointer-events: none;
z-index: 4;
}
.dz-sol-half--maq .dz-sol-half__reveal { left: 36px; }
.dz-sol-half--ms .dz-sol-half__reveal { right: 36px; }
.dz-sol-stage--lean-maq .dz-sol-half--maq .dz-sol-half__reveal,
.dz-sol-stage--lean-ms .dz-sol-half--ms .dz-sol-half__reveal {
opacity: 1;
transform: translateY(0);
}
/* Browser-frame mockup */
.dz-sol-half__reveal-frame {
position: relative; aspect-ratio: 16 / 10;
background: #03070C;
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.06);
}
.dz-sol-half__reveal-bar {
position: absolute; top: 0; left: 0; right: 0;
height: 18px; padding: 0 8px;
display: flex; align-items: center; gap: 4px;
background: rgba(0,0,0,0.55);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.dz-sol-half__reveal-bar span {
width: 6px; height: 6px; border-radius: 50%;
background: rgba(255,255,255,0.15);
}
.dz-sol-half__reveal-frame img {
width: 100%; height: 100%; object-fit: cover; object-position: top center;
margin-top: 18px; height: calc(100% - 18px);
}
/* Status block — replaces the old stat-number treatment.
Now carries an honest first-mover sentence (headline) + a smaller
stage descriptor (sub). The headline is the identity colour
(aqua/teal), the sub is white-muted. No fabricated metrics. */
.dz-sol-half__reveal-status {
display: flex; flex-direction: column; gap: 4px;
padding-top: 4px;
}
.dz-sol-half__reveal-head {
font-family: var(--dz-font);
font-weight: var(--dz-fw-semibold, 600);
font-size: 15px;
line-height: 1.3;
letter-spacing: -0.005em;
}
.dz-sol-half--maq .dz-sol-half__reveal-head { color: var(--dz-aqua); }
.dz-sol-half--ms .dz-sol-half__reveal-head { color: var(--twinms-teal-2); }
.dz-sol-half__reveal-sub {
font-size: 12.5px;
line-height: 1.4;
color: rgba(255,255,255,0.65);
font-weight: var(--dz-fw-regular, 400);
}
.dz-sol-half__reveal-tag {
font-size: 10px;
font-weight: var(--dz-fw-semibold, 600);
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
}
/* Hide the reveal entirely on small screens — the half itself stacks
vertically and the screenshot would dominate the layout. */
@media (max-width: 1080px) {
.dz-sol-half__reveal { display: none; }
}
/* ── THE SPINE — center column ────────────────────────────────────── */
.dz-sol-spine {
position: relative;
background: linear-gradient(180deg,
var(--dz-navy-deep) 0%,
var(--dz-navy) 50%,
var(--dz-navy-deep) 100%);
overflow: hidden;
border-left: 1px solid rgba(255,255,255,0.08);
border-right: 1px solid rgba(255,255,255,0.08);
}
.dz-sol-spine::before,
.dz-sol-spine::after {
content: "";
position: absolute; left: 0; right: 0; height: 140px;
pointer-events: none; z-index: 3;
}
.dz-sol-spine::before { top: 0; background: linear-gradient(to bottom, var(--dz-navy-deep), transparent); }
.dz-sol-spine::after { bottom: 0; background: linear-gradient(to top, var(--dz-navy-deep), transparent); }
.dz-sol-spine__rail {
position: absolute; top: 0; left: 50%;
transform: translateX(-50%);
width: 1px; height: 100%;
/* Aqua at top (TwinMaq's "before" world) → white at the handover
midpoint → teal at the bottom (TwinMs's "after" world). The rail
becomes a literal visualisation of the BIM model's lifetime arc. */
background: linear-gradient(180deg,
transparent 0%,
rgba(79,200,244,0.55) 8%,
rgba(79,200,244,0.55) 42%,
rgba(255,255,255,0.85) 50%,
rgba(79,181,164,0.55) 58%,
rgba(79,181,164,0.55) 92%,
transparent 100%);
}
.dz-sol-spine__rail::after {
content: "";
position: absolute; left: 50%;
width: 5px; height: 5px;
border-radius: 50%;
background: #fff;
transform: translateX(-50%);
box-shadow: 0 0 16px 4px rgba(79,200,244,0.6);
animation: dzSolSpineDot 6s ease-in-out infinite;
}
@keyframes dzSolSpineDot {
0% { top: 8%; }
45% { top: 50%; }
50% { top: 50%; box-shadow: 0 0 28px 8px rgba(79,200,244,0.85); }
55% { top: 50%; }
100% { top: 92%; }
}
/* (BIM-glyph stream removed — was visual noise at the rendered scale.
The clean gradient rail + travelling dot + central handover halo
carry the "same BIM model flowing through" idea on their own.) */
.dz-sol-spine__handover {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 76px; height: 76px;
border-radius: 50%;
background: radial-gradient(circle,
rgba(255,255,255,0.95) 0%,
rgba(79,200,244,0.45) 35%,
transparent 72%);
pointer-events: none;
z-index: 2;
animation: dzSolPulse 4.5s ease-in-out infinite;
}
@keyframes dzSolPulse {
0%, 100% { transform: translate(-50%,-50%) scale(0.8); opacity: 0.55; }
50% { transform: translate(-50%,-50%) scale(1.05); opacity: 0.95; }
}
.dz-sol-spine__label {
position: absolute;
left: 50%; top: 18%;
transform: translateX(-50%) rotate(-90deg);
transform-origin: center;
font-size: 10px;
font-weight: var(--dz-fw-semibold, 600);
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
white-space: nowrap;
z-index: 4;
}
.dz-sol-spine__label--bottom { top: auto; bottom: 18%; }
/* ── OUTCOME (navy band) ──────────────────────────────────────────── */
.dz-sol-outcome {
/* Same #FAFAFA as the hero — the outcome statement is conceptually
part of the hero's narrative arc (it closes what the hero opens),
so they share the same bg. The Mirror sits between them as the
dark identity moment; the trust strip below uses aqua-wash to
differentiate. */
background: #FAFAFA;
color: var(--dz-text, #2B3D4F);
padding: 110px 32px 80px; /* tighter bottom — no empty drift below the lead */
text-align: center;
position: relative; overflow: hidden;
}
.dz-sol-outcome::before {
content: "";
position: absolute; top: 0; left: 50%;
transform: translateX(-50%);
width: 1px; height: 80px;
background: linear-gradient(to bottom, rgba(79,200,244,0.6), transparent);
}
.dz-sol-outcome__inner {
position: relative;
max-width: 1080px;
margin: 0 auto;
}
/* "Made in Saudi Arabia" stamp sits behind the headline.
The JPG contains a circular stamp on top and a rectangular flag stamp
below — we crop to the circle only via square aspect + object-position.
Multiply blend strips the white JPG bg so only the green stamp ink
reads against the page. Opacity dialled down so the headline text on
top of it stays clearly readable. */
.dz-sol-outcome__ghost-img {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%) scale(0.95);
/* The JPG is 4000×4000 (square), with the circular stamp filling the
top half and the rectangular flag filling the bottom half. Sizing
the BOX to a 2:1 ratio (height = ~52% of width, slight buffer on
the bottom) and using object-fit:cover + object-position:top means
only the top portion (the full circle) is rendered. No clip-path
needed — the box itself is the mask. */
width: clamp(480px, 48vw, 720px);
height: clamp(278px, 27.8vw, 418px); /* ~58% of width — full circle only, no flag bleed */
object-fit: cover;
object-position: top center;
pointer-events: none;
user-select: none;
z-index: 0;
mix-blend-mode: multiply;
opacity: 0;
transition: opacity 1.4s var(--dz-ease-fade, cubic-bezier(.22,1,.36,1)),
transform 1.4s var(--dz-ease-fade, cubic-bezier(.22,1,.36,1));
}
.dz-sol-outcome.is-in-view .dz-sol-outcome__ghost-img {
opacity: 0.10; /* light enough that headline text reads cleanly */
transform: translate(-50%, -50%) scale(1);
}
/* Aqua → teal gradient arc connecting the two accent phrases.
Path is M 8,28 Q 300,2 592,28 — total length ~590. Drawn in via
stroke-dasharray + stroke-dashoffset on .is-in-view. */
.dz-sol-outcome__arc {
display: block;
width: clamp(280px, 60%, 600px);
height: 36px;
margin: 18px auto 28px;
position: relative;
z-index: 1;
}
.dz-sol-outcome__arc path {
stroke-dasharray: 600;
stroke-dashoffset: 600;
transition: stroke-dashoffset 1.6s cubic-bezier(.55, 0, .15, 1);
transition-delay: 200ms;
}
.dz-sol-outcome__arc circle {
opacity: 0;
transition: opacity .55s ease;
}
.dz-sol-outcome.is-in-view .dz-sol-outcome__arc path { stroke-dashoffset: 0; }
.dz-sol-outcome.is-in-view .dz-sol-outcome__arc circle:nth-of-type(1) { opacity: 1; transition-delay: 200ms; }
.dz-sol-outcome.is-in-view .dz-sol-outcome__arc circle:nth-of-type(2) { opacity: 1; transition-delay: 1700ms; }
.dz-sol-outcome__eye {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--dz-aqua);
font-size: var(--dz-fs-caption, 12px);
font-weight: var(--dz-fw-semibold, 600);
letter-spacing: var(--dz-tracking-eyebrow, 0.18em);
text-transform: uppercase;
margin-bottom: 68px; /* push eyebrow up — wider gap between eyebrow and the H2 */
}
.dz-sol-outcome__eye::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 8px currentColor;
animation: dzSolEyebrowPulse 2.4s ease-in-out infinite;
}
.dz-sol-outcome__title {
font-family: var(--dz-font);
font-weight: var(--dz-fw-bold, 700);
font-size: clamp(34px, 4.6vw, 64px);
line-height: var(--dz-lh-tight, 1.05);
letter-spacing: var(--dz-tracking-tight, -0.025em);
margin: 0 0 22px;
}
/* Colour-code the two accents to mirror the diptych identity colours */
.dz-sol-outcome__accent--maq { color: var(--dz-aqua) !important; }
.dz-sol-outcome__accent--ms { color: var(--twinms-teal-2) !important; }
/* The trailing clause sits at a calmer scale & weight — it's the unifier,
not the headline. Drops to ~60% of the headline size, white at 0.78. */
.dz-sol-outcome__trail {
display: block;
font-weight: var(--dz-fw-regular, 400);
font-size: clamp(20px, 2.4vw, 32px);
letter-spacing: -0.015em;
color: var(--dz-text-muted, #5A6E81); /* muted navy on light bg */
margin-top: 12px;
}
.dz-sol-outcome__lead {
font-size: 17px; line-height: 1.6;
max-width: 580px; margin: 0 auto;
color: var(--dz-text-muted, #5A6E81); /* muted navy on light bg */
}
/* ── TRUST PILLARS (light aqua-wash band w/ DARK navy cards) ─────── */
.dz-sol-trust {
/* --dz-aqua-wash to bookend the page in two distinct light tints —
hero uses #FAFAFA (warm/neutral), trust uses aqua-wash (cool tint)
so they don't read as one giant pale zone with a dark island. */
background: var(--dz-aqua-wash);
padding: 100px 32px 120px;
position: relative;
}
/* Aqua hairline at the bottom edge — soft visual handoff into the navy
CtaStrip below. Mirrors the same device used at the top of the Mirror. */
.dz-sol-trust::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0;
height: 1px;
background: linear-gradient(90deg, transparent 0%, rgba(79,200,244,0.45) 50%, transparent 100%);
pointer-events: none;
}
.dz-sol-trust__inner { max-width: 1280px; margin: 0 auto; }
.dz-sol-trust__head {
text-align: center;
margin-bottom: 48px;
}
.dz-sol-trust__eye {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--dz-aqua);
font-size: var(--dz-fs-caption, 12px);
font-weight: var(--dz-fw-semibold, 600);
letter-spacing: var(--dz-tracking-eyebrow, 0.18em);
text-transform: uppercase;
margin-bottom: 14px;
}
.dz-sol-trust__eye::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
box-shadow: 0 0 8px currentColor;
animation: dzSolEyebrowPulse 2.4s ease-in-out infinite;
}
.dz-sol-trust__title {
color: var(--dz-text);
font-family: var(--dz-font);
font-weight: var(--dz-fw-bold, 700);
font-size: clamp(26px, 3vw, 40px);
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0;
}
/* ── (1) Client logo strip ─────────────────────────────────────────
Real Vision 2030 client marks — NEOM, ROSHN, Diriyah, Amaala, Red Sea,
KSP, Qiddiya, Four Seasons. Same approved roster as the home page.
Logos sit in a horizontal row with subtle separators; on hover each
logo clarifies (raises opacity from greyscale-fade to full colour). */
.dz-sol-trust__clients {
list-style: none;
margin: 0 0 64px;
padding: 0;
display: grid;
grid-template-columns: repeat(8, minmax(0, 1fr));
gap: 0;
border-top: 1px solid rgba(43,61,79,0.08);
border-bottom: 1px solid rgba(43,61,79,0.08);
background: rgba(255,255,255,0.4);
border-radius: var(--dz-radius-lg, 16px);
}
.dz-sol-trust__client {
display: grid; place-items: center;
padding: 28px 16px;
border-right: 1px solid rgba(43,61,79,0.06);
transition: background .25s ease,
opacity .55s var(--dz-ease-fade, cubic-bezier(.22,1,.36,1)),
transform .55s var(--dz-ease-fade, cubic-bezier(.22,1,.36,1));
/* Sequential fade-in on scroll-into-view. Default state = invisible +
slightly raised; the .is-in-view class on the parent drops the
stagger via per-child transition-delay. */
opacity: 0;
transform: translateY(8px);
transition-delay: var(--dz-sol-logo-delay, 0ms);
}
.dz-sol-trust__client:last-child { border-right: 0; }
.dz-sol-trust__client:hover { background: rgba(255,255,255,0.7); }
.dz-sol-trust__clients.is-in-view .dz-sol-trust__client {
opacity: 1;
transform: translateY(0);
}
/* Per-child stagger — each logo enters 80ms after the previous one */
.dz-sol-trust__client:nth-child(1) { --dz-sol-logo-delay: 0ms; }
.dz-sol-trust__client:nth-child(2) { --dz-sol-logo-delay: 80ms; }
.dz-sol-trust__client:nth-child(3) { --dz-sol-logo-delay: 160ms; }
.dz-sol-trust__client:nth-child(4) { --dz-sol-logo-delay: 240ms; }
.dz-sol-trust__client:nth-child(5) { --dz-sol-logo-delay: 320ms; }
.dz-sol-trust__client:nth-child(6) { --dz-sol-logo-delay: 400ms; }
.dz-sol-trust__client:nth-child(7) { --dz-sol-logo-delay: 480ms; }
.dz-sol-trust__client:nth-child(8) { --dz-sol-logo-delay: 560ms; }
.dz-sol-trust__client img {
width: auto;
height: auto;
max-width: 100%;
max-height: 38px;
filter: grayscale(1) contrast(0.9) brightness(0.85);
opacity: 0.66;
transition: filter .35s ease, opacity .35s ease;
}
.dz-sol-trust__client:hover img {
filter: grayscale(0) contrast(1) brightness(1);
opacity: 1;
}
/* Per-logo size normalization. Brand marks have very different aspect
ratios — a circular pictogram (NEOM) reads tiny next to a wide wordmark
(Diriyah · "The City of Earth"). These overrides equalize *visual weight*
by varying max-height per logo, while keeping max-width: 100% so logos
never overflow their cell. Tuned by eye from the rendered grid. */
.dz-sol-trust__client[data-logo-key="neom"] img { max-height: 26px; max-width: 70%; }
.dz-sol-trust__client[data-logo-key="roshn"] img { max-height: 26px; max-width: 88%; }
.dz-sol-trust__client[data-logo-key="diriyah"] img { max-height: 30px; max-width: 96%; }
.dz-sol-trust__client[data-logo-key="amaala"] img { max-height: 30px; max-width: 75%; }
.dz-sol-trust__client[data-logo-key="redsea"] img { max-height: 38px; max-width: 80%; }
.dz-sol-trust__client[data-logo-key="ksp"] img { max-height: 38px; max-width: 96%; }
.dz-sol-trust__client[data-logo-key="qiddiya"] img { max-height: 22px; max-width: 70%; }
.dz-sol-trust__client[data-logo-key="fourseasons"] img { max-height: 38px; max-width: 70%; }
/* ── (2) Metrics row — CountUp on scroll ──────────────────────────
Three concrete numbers: 140+ projects, 13+ years, 8 anchor clients.
Each metric uses a big aqua numeral + label + smaller sublabel.
Lives on dark navy strip cards (card-inversion rule) so the numbers
pop against the light aqua-wash bg. */
.dz-sol-trust__metrics {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-bottom: 64px;
}
.dz-sol-trust__metric {
background: var(--dz-navy);
color: #fff;
padding: 30px 26px 26px;
border-radius: var(--dz-radius-lg, 16px);
border: 1px solid rgba(255,255,255,0.06);
display: flex; flex-direction: column;
transition: transform .25s ease, border-color .25s ease;
}
.dz-sol-trust__metric:hover {
transform: translateY(-3px);
border-color: var(--dz-aqua);
}
.dz-sol-trust__metric-num {
font-family: var(--dz-font);
font-weight: var(--dz-fw-bold, 700);
font-size: clamp(40px, 4.4vw, 64px);
line-height: 1;
letter-spacing: -0.025em;
color: var(--dz-aqua);
margin-bottom: 8px;
}
.dz-sol-trust__metric-lbl {
font-size: 15px;
font-weight: var(--dz-fw-semibold, 600);
color: #fff;
margin-bottom: 6px;
}
.dz-sol-trust__metric-sub {
font-size: 12.5px;
line-height: 1.5;
color: rgba(255,255,255,0.6);
}
/* ── (3) Real testimonial — attributed pull quote ──────────────────
Single big quote on a dark-navy backed card (card-inversion). Aqua
opening quote-mark is decorative; the body uses calm Outfit-regular
so the words carry, not the chrome. Attribution at the bottom. */
.dz-sol-trust__quote {
margin: 0;
background: var(--dz-navy-deep);
border: 1px solid rgba(79,200,244,0.16);
border-radius: var(--dz-radius-lg, 16px);
padding: 56px 56px 44px;
position: relative;
overflow: hidden;
/* Slide-up + fade-in on scroll-into-view. The quote is the
emotional close to the trust strip — earning a small reveal moment. */
opacity: 0;
transform: translateY(18px);
transition: opacity .8s var(--dz-ease-fade, cubic-bezier(.22,1,.36,1)),
transform .8s var(--dz-ease-fade, cubic-bezier(.22,1,.36,1));
}
.dz-sol-trust__quote.is-in-view {
opacity: 1;
transform: translateY(0);
}
.dz-sol-trust__quote::before {
/* Aqua glow in the top-right corner — subtle warmth */
content: "";
position: absolute; top: -120px; right: -100px;
width: 360px; height: 360px;
background: radial-gradient(circle, rgba(79,200,244,0.16) 0%, transparent 65%);
pointer-events: none;
}
.dz-sol-trust__quote-mark {
position: absolute; top: 18px; left: 30px;
font-family: 'Georgia', serif;
font-size: 96px;
line-height: 1;
color: var(--dz-aqua);
opacity: 0.55;
pointer-events: none;
}
.dz-sol-trust__quote-text {
position: relative;
font-family: var(--dz-font);
font-weight: var(--dz-fw-regular, 400);
font-size: clamp(18px, 1.7vw, 24px);
line-height: 1.55;
color: #fff;
max-width: 920px;
margin: 0 0 28px;
}
.dz-sol-trust__quote-attr {
position: relative;
display: flex; flex-direction: column; gap: 4px;
padding-top: 22px;
border-top: 1px solid rgba(255,255,255,0.10);
}
.dz-sol-trust__quote-name {
font-size: 15px;
font-weight: var(--dz-fw-semibold, 600);
color: #fff;
}
.dz-sol-trust__quote-role {
font-size: 13px;
color: var(--dz-aqua);
letter-spacing: 0.01em;
}
.dz-sol-trust__quote-note {
font-size: 11px;
font-weight: var(--dz-fw-semibold, 600);
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
margin-top: 4px;
}
/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1080px) {
.dz-sol-trust__clients { grid-template-columns: repeat(4, 1fr); }
.dz-sol-trust__client:nth-child(4) { border-right: 0; }
.dz-sol-trust__client { border-bottom: 1px solid rgba(43,61,79,0.06); }
.dz-sol-trust__client:nth-last-child(-n+4) { border-bottom: 0; }
.dz-sol-trust__quote { padding: 48px 36px 36px; }
}
@media (max-width: 880px) {
.dz-sol-stage,
.dz-sol-stage--lean-maq,
.dz-sol-stage--lean-ms {
grid-template-columns: 1fr;
min-height: auto;
}
.dz-sol-half__inner { padding: 100px 24px 60px; }
.dz-sol-half--maq .dz-sol-half__inner,
.dz-sol-half--ms .dz-sol-half__inner {
align-items: flex-start;
text-align: left;
}
.dz-sol-half--maq .dz-sol-half__tagline { margin-left: 0; }
.dz-sol-half--maq .dz-sol-half__cap { flex-direction: row; text-align: left; }
.dz-sol-half--maq .dz-sol-half__cta { align-self: flex-start; }
.dz-sol-half--maq .dz-sol-half__eyebrow { flex-direction: row; }
.dz-sol-spine { display: none; }
.dz-sol-trust__clients { grid-template-columns: repeat(2, 1fr); }
.dz-sol-trust__client { border-right: 0; border-bottom: 1px solid rgba(43,61,79,0.06); padding: 22px 14px; }
.dz-sol-trust__client:nth-child(odd) { border-right: 1px solid rgba(43,61,79,0.06); }
.dz-sol-trust__client:nth-last-child(-n+2) { border-bottom: 0; }
.dz-sol-trust__metrics { grid-template-columns: 1fr; gap: 12px; margin-bottom: 48px; }
.dz-sol-trust__quote { padding: 40px 24px 30px; }
.dz-sol-trust__quote-mark { font-size: 72px; top: 8px; left: 16px; }
}
/* ╔══════════════════════════════════════════════════════════════════════╗
║ TwinMs page — /twinms/ ║
║ All styles namespaced `.dz-tms-*` to keep this self-contained. ║
║ Visual rhythm: dark hero → light 3D + monitors → dark performance ║
║ → light alerts → dark pilot → light bim + next. ║
║ ║
║ Local accent token: --dz-tms-green (the green-grey from the ║
║ TwinMs logo) used sparingly on hover and the pilot band only. ║
╚══════════════════════════════════════════════════════════════════════╝ */
.dz-tms-page {
--dz-tms-green: #5C7A6E; /* logo green-grey */
--dz-tms-green-deep: #3F594F; /* hover / focus state */
--dz-tms-green-wash: rgba(92,122,110,0.14);
--dz-tms-radius: 14px;
--dz-tms-card-bg: rgba(255,255,255,0.04);
--dz-tms-card-bd: rgba(255,255,255,0.08);
font-family: 'Outfit', system-ui, sans-serif;
color: var(--dz-text);
overflow: hidden; /* tame any 100vw children */
}
/* ── Eyebrow override (pulse-dot, matches Solutions page convention) ── */
.dz-tms-eyebrow {
/* base .dz-eyebrow already supplies pill chrome + colour. We override
the ::before to swap the static dot for the pulsing one used across
the rest of the site (every page except home). Margin-bottom restored
to 24px (was 12px) — display headlines below need air, the prior 12px
left the eyebrow visually pinned to the headline. Layout audit 2026-05-06. */
margin-bottom: 24px;
}
.dz-tms-eyebrow::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--dz-aqua);
box-shadow: 0 0 8px var(--dz-aqua);
animation: dzSolEyebrowPulse 2.4s ease-in-out infinite;
}
.dz-tms-eyebrow--on-dark {
background: rgba(79,200,244,0.10);
border-color: rgba(79,200,244,0.30);
color: var(--dz-aqua);
}
/* ── Shared headings + leads ─────────────────────────────────────────── */
.dz-tms-h2 {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(32px, 4.2vw, 56px);
font-weight: 600;
line-height: 1.06;
letter-spacing: -0.022em;
color: var(--dz-text);
/* Margin-bottom raised from 14px → 26px — display headlines this size
need air before the lead. Same change as .dz-tmq-h2. Layout audit 2026-05-06. */
margin: 0 0 26px;
text-wrap: balance;
}
.dz-tms-h2--on-dark { color: var(--dz-text-on-dark); }
.dz-tms-lead {
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.55;
color: var(--dz-text);
opacity: 0.78;
max-width: 680px;
margin: 0;
}
.dz-tms-lead--on-dark { color: rgba(255,255,255,0.78); opacity: 1; }
.dz-tms-accent {
color: var(--dz-aqua);
font-style: normal; /* em → not italic, brand standard */
font-weight: 600;
}
/* ── HERO — light grey surface (changed from dark navy 2026-05-06).
Subtle aqua wash at top-right behind the iris keeps depth. The hero
is sized to exactly one viewport so it crops cleanly at the fold,
with content centred via flex. Top padding is just enough to clear
the fixed navbar (~80 px); bottom padding mirrors it loosely so the
stats row doesn't sit flush against the next section's edge. */
.dz-tms-hero {
position: relative;
background:
radial-gradient(900px 600px at 80% 35%, rgba(79,200,244,0.08), transparent 65%),
var(--dz-soft-grey, #F1F1F1);
color: var(--dz-text);
/* Hero sized to exactly one viewport via 100dvh + a zoom-compensating
calc. body has zoom: 0.8 site-wide, so dividing dvh by 0.8 cancels
the zoom and yields one physical viewport on any screen — desktop,
laptop, tablet, mobile in landscape. Falls back gracefully via the
comma-separated declarations: any browser without dvh support gets
the older 100vh value. */
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: flex-start;
padding: clamp(110px, 11vw, 160px) clamp(28px, 4vw, 64px) clamp(60px, 7vw, 100px);
overflow: hidden;
}
/* Grid tiling removed — the hero background is now plain navy. */
.dz-tms-hero::before { display: none; }
.dz-tms-hero__inner {
position: relative;
width: 100%; /* inside flex hero — fill width before max-width caps */
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr; /* 50/50 — video covers the right half */
gap: clamp(40px, 5vw, 80px);
align-items: stretch; /* video stretches to copy-col height */
min-height: 560px; /* anchor floor so the video has room */
}
/* Product wordmark — sits above the eyebrow, anchors the brand.
The original PNG uses dark teal + grey on white, which gets lost on
the dark navy hero bg. Filter chain lifts the brightness, slightly
boosts saturation, and lays a soft cyan glow halo behind it via
stacked drop-shadows so the wordmark reads as a glowing brand mark. */
.dz-tms-hero__brand {
display: block;
width: clamp(110px, 11vw, 150px);
height: auto;
margin: 0 0 22px;
/* Green glow 2026-05-06 — TwinMs logo is itself green, so the halo
should echo that hue rather than the brand aqua. Intensity reduced
from the previous treatment (was reading too hot on the light-grey
hero, dominated the eye). Calibrated against the new grey bg so the
glow reads as ambient lift, not as a beacon. */
filter:
drop-shadow(0 0 8px rgba(92,122,110,0.35))
drop-shadow(0 0 18px rgba(92,122,110,0.18));
}
.dz-tms-hero__title {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(44px, 6.2vw, 92px);
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.03em;
margin: 4px 0 22px;
color: var(--dz-text); /* navy on light grey */
text-wrap: balance;
}
.dz-tms-hero__sub {
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.55;
color: var(--dz-text-muted, #5A6E81);
max-width: 56ch;
margin: 0 0 44px;
}
.dz-tms-hero__stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 2.4vw, 40px);
padding-top: 26px;
border-top: 1px solid rgba(255,255,255,0.12);
max-width: 640px;
}
.dz-tms-stat__num {
font-size: clamp(28px, 3vw, 44px);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--dz-aqua);
line-height: 1;
margin-bottom: 8px;
}
.dz-tms-stat__label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--dz-text-muted, #5A6E81);
}
/* Visual column: video fills the entire right half. The badge is
absolutely positioned over the video so the column is one cohesive
visual layer instead of stacked elements. */
.dz-tms-hero__col--visual {
position: relative;
align-self: stretch;
}
.dz-tms-hero__logo {
width: clamp(180px, 18vw, 260px);
height: auto;
filter: brightness(1.05);
}
/* ── IRIS — circular video with concentric data rings (Mockup F) ──
Replaces the old rectangular video frame. The video lives inside
the inner circle; rings + labels surround it like a control-room
observation port. No tiling, no rectangular frame, no mask leakage. */
.dz-tms-iris {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(92%, 580px);
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
}
/* Outermost dashed ring — cyan on the dark navy half of the gradient,
reads as a technical reference line. Rotates slowly. */
.dz-tms-iris__ring--outer {
position: absolute; inset: 0;
border-radius: 50%;
border: 1px dashed rgba(79,200,244,0.55);
animation: dzTmsSpinSlow 90s linear infinite;
}
/* Mid ring — finer cyan line, counter rotation. */
.dz-tms-iris__ring--mid {
position: absolute; inset: 8%;
border-radius: 50%;
border: 1px solid rgba(79,200,244,0.28);
animation: dzTmsSpinRev 60s linear infinite;
}
/* Inner ring — the active "screen edge". Strongest cyan + double glow
so it reads as the focal point of the iris. */
.dz-tms-iris__ring--inner {
position: absolute; inset: 14%;
border-radius: 50%;
border: 1.5px solid rgba(79,200,244,0.9);
box-shadow:
0 0 24px rgba(79,200,244,0.30) inset,
0 0 60px -10px rgba(79,200,244,0.55);
}
@keyframes dzTmsSpinSlow { to { transform: rotate(360deg); } }
@keyframes dzTmsSpinRev { to { transform: rotate(-360deg); } }
/* Twelve clock-face tick marks, pinned just inside the outer ring. */
.dz-tms-iris__ticks {
position: absolute; inset: 0;
border-radius: 50%;
pointer-events: none;
}
.dz-tms-iris__ticks::before {
content: "";
position: absolute; inset: 0;
border-radius: 50%;
/* Navy tick marks — read as architectural reference marks on cream bg. */
background:
conic-gradient(
from 0deg,
rgba(79,200,244,0.85) 0deg, rgba(79,200,244,0.85) 0.6deg, transparent 0.6deg,
transparent 30deg, rgba(79,200,244,0.85) 30deg, rgba(79,200,244,0.85) 30.6deg, transparent 30.6deg,
transparent 60deg, rgba(79,200,244,0.85) 60deg, rgba(79,200,244,0.85) 60.6deg, transparent 60.6deg,
transparent 90deg, rgba(79,200,244,0.85) 90deg, rgba(79,200,244,0.85) 90.6deg, transparent 90.6deg,
transparent 120deg, rgba(79,200,244,0.85) 120deg, rgba(79,200,244,0.85) 120.6deg, transparent 120.6deg,
transparent 150deg, rgba(79,200,244,0.85) 150deg, rgba(79,200,244,0.85) 150.6deg, transparent 150.6deg,
transparent 180deg, rgba(79,200,244,0.85) 180deg, rgba(79,200,244,0.85) 180.6deg, transparent 180.6deg,
transparent 210deg, rgba(79,200,244,0.85) 210deg, rgba(79,200,244,0.85) 210.6deg, transparent 210.6deg,
transparent 240deg, rgba(79,200,244,0.85) 240deg, rgba(79,200,244,0.85) 240.6deg, transparent 240.6deg,
transparent 270deg, rgba(79,200,244,0.85) 270deg, rgba(79,200,244,0.85) 270.6deg, transparent 270.6deg,
transparent 300deg, rgba(79,200,244,0.85) 300deg, rgba(79,200,244,0.85) 300.6deg, transparent 300.6deg,
transparent 330deg, rgba(79,200,244,0.85) 330deg, rgba(79,200,244,0.85) 330.6deg, transparent 330.6deg,
transparent 360deg);
-webkit-mask: radial-gradient(circle, transparent 0%, transparent 91%, #000 91%, #000 96%, transparent 96%);
mask: radial-gradient(circle, transparent 0%, transparent 91%, #000 91%, #000 96%, transparent 96%);
}
/* The actual circular video — fills the inner ring. Inset reduced
from 18% to 15.5% so the video disc is bigger, sitting almost flush
with the inner cyan ring. More of the footage reads inside the
circle without expanding the outer iris. */
.dz-tms-iris__video {
position: absolute;
inset: 15.5%;
border-radius: 50%;
overflow: hidden;
background: var(--dz-navy-deep, #0E1620);
box-shadow:
0 0 0 1px rgba(79,200,244,0.4) inset,
0 0 60px -10px rgba(79,200,244,0.5);
}
.dz-tms-iris__video video {
width: 100%;
height: 100%;
/* `cover` fills the circle naturally — the 16:9 frame gets cropped
left/right to fit the 1:1 circle, but the building stays centred
and the round shape reads cleanly with no empty dark bands. */
object-fit: cover;
background: #0E1620;
display: block;
filter: contrast(1.05) saturate(1.15);
}
/* Radar sweep — a cyan beam slowly rotating across the inner ring,
reading as "the system is scanning". Sits behind the video so it
doesn't fight readability. */
.dz-tms-iris__sweep {
position: absolute;
inset: 15.5%;
border-radius: 50%;
pointer-events: none;
overflow: hidden;
z-index: 2;
mix-blend-mode: screen;
opacity: 0.55;
}
.dz-tms-iris__sweep::before {
content: "";
position: absolute;
inset: -50%;
background: conic-gradient(
from 0deg,
rgba(79,200,244,0) 0deg,
rgba(79,200,244,0) 250deg,
rgba(79,200,244,0.2) 320deg,
rgba(79,200,244,0.5) 358deg,
rgba(79,200,244,0.0) 360deg);
animation: dzTmsSweep 5s linear infinite;
transform-origin: center;
}
@keyframes dzTmsSweep { to { transform: rotate(360deg); } }
/* Cardinal data dots — sit on the inner ring at N/E/S/W (the same
positions as the four compass labels). Each pulses subtly so the
iris reads as actively transmitting. */
.dz-tms-iris__dot {
position: absolute;
width: 9px; height: 9px;
border-radius: 50%;
background: var(--dz-aqua);
box-shadow:
0 0 0 2px rgba(14,22,32,0.85),
0 0 12px rgba(79,200,244,0.85),
0 0 20px rgba(79,200,244,0.55);
z-index: 4;
animation: dzTmsDotPulse 2.6s ease-in-out infinite;
}
.dz-tms-iris__dot--n { top: 14%; left: 50%; transform: translate(-50%, -50%); }
.dz-tms-iris__dot--e { top: 50%; right: 14%; transform: translate(50%, -50%); }
.dz-tms-iris__dot--s { bottom: 14%; left: 50%; transform: translate(-50%, 50%); }
.dz-tms-iris__dot--w { top: 50%; left: 14%; transform: translate(-50%, -50%); }
.dz-tms-iris__dot--n { animation-delay: 0s; }
.dz-tms-iris__dot--e { animation-delay: 0.65s; }
.dz-tms-iris__dot--s { animation-delay: 1.3s; }
.dz-tms-iris__dot--w { animation-delay: 1.95s; }
@keyframes dzTmsDotPulse {
0%, 100% { box-shadow: 0 0 0 2px rgba(14,22,32,0.85), 0 0 12px rgba(79,200,244,0.85), 0 0 20px rgba(79,200,244,0.55); transform: translate(var(--tx, 0), var(--ty, 0)) scale(1); }
50% { box-shadow: 0 0 0 2px rgba(14,22,32,0.85), 0 0 18px rgba(79,200,244,1.0), 0 0 36px rgba(79,200,244,0.7); transform: translate(var(--tx, 0), var(--ty, 0)) scale(1.25); }
}
/* Centre crosshair — tiny operator marker with a glowing centre dot. */
.dz-tms-iris__crosshair {
position: absolute;
width: 18px; height: 18px;
pointer-events: none;
z-index: 4;
}
.dz-tms-iris__crosshair::before,
.dz-tms-iris__crosshair::after {
content: "";
position: absolute;
background: var(--dz-aqua);
box-shadow: 0 0 6px var(--dz-aqua);
}
.dz-tms-iris__crosshair::before { width: 100%; height: 1px; top: 50%; left: 0; }
.dz-tms-iris__crosshair::after { width: 1px; height: 100%; left: 50%; top: 0; }
/* Centre dot — sits on top of the crosshair lines */
.dz-tms-iris__crosshair-dot {
position: absolute;
width: 6px; height: 6px;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: var(--dz-aqua);
box-shadow: 0 0 12px var(--dz-aqua), 0 0 20px rgba(79,200,244,0.4);
z-index: 5;
}
/* Compass labels at N/E/S/W around the outer ring — instrument-readout
style. No chip, no border, no panel. Just floating text on the dark
bg with strong text-shadow for legibility, plus a thin cyan accent
rule below each value to mark it as live telemetry. */
.dz-tms-iris__label {
position: absolute;
z-index: 5;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
background: none;
border: none;
padding: 0;
white-space: nowrap;
text-align: center;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 9px;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(170,232,255,0.55);
text-shadow: 0 0 6px rgba(0,0,0,0.85), 0 1px 2px rgba(0,0,0,0.7);
}
.dz-tms-iris__label-num {
display: block;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 17px;
font-weight: 600;
color: #FFFFFF;
letter-spacing: -0.01em;
margin-top: 3px;
text-shadow:
0 0 10px rgba(79,200,244,0.40),
0 1px 3px rgba(0,0,0,0.85),
0 0 1px rgba(0,0,0,0.95);
transition: color .25s ease;
}
/* Thin cyan accent rule below each value — the only chrome. Marks the
value as live telemetry rather than free-floating decoration. */
.dz-tms-iris__label-num::after {
content: "";
display: block;
width: 38px;
height: 1px;
margin: 6px auto 0;
background: linear-gradient(90deg,
transparent,
rgba(79,200,244,0.85) 50%,
transparent);
box-shadow: 0 0 6px rgba(79,200,244,0.5);
}
/* All four labels positioned ON THE MIDDLE RING at r = 45% of iris
radius from centre — sits inside the iris between the outer dashed
ring (50%) and the mid ring (42%). The labels visually belong to
the iris geometry, not the empty negative space outside. */
.dz-tms-iris__label--n { top: 5%; left: 50%; transform: translate(-50%, -50%); }
.dz-tms-iris__label--e { top: 50%; left: 95%; transform: translate(-50%, -50%); }
.dz-tms-iris__label--s { top: 95%; left: 50%; transform: translate(-50%, -50%); }
.dz-tms-iris__label--w { top: 50%; left: 5%; transform: translate(-50%, -50%); }
@media (max-width: 1100px) {
.dz-tms-iris { max-width: 460px; }
}
/* (Old rectangular .dz-tms-hero__video rule removed — replaced by the
iris-scoped video styling above. Mask-image no longer needed because
the circle has its own clip via overflow + border-radius.) */
/* The decorative glow ring belonged to the old card treatment — neutralise
it so the video edges are just feathered and the hero stays seamless. */
.dz-tms-hero__video-glow { display: none; }
/* TwinMs wordmark — no longer floating over a card. Anchored just below
the video bottom, off the video itself, so the meld stays clean. */
.dz-tms-hero__video-mark {
display: none;
}
/* ── HUD overlay — pinned over the baked-in gauges, no card chrome ──
Coordinates were measured from the source footage so each live widget
lands exactly on top of its baked-in twin. cqw sizing means a 422px
frame and a 700px frame both look right. The HUD is hidden until the
video reaches the digital-twin scene (~t=2s) so it appears in sync
with the source footage. */
.dz-tms-hud {
position: absolute;
inset: 0;
pointer-events: none;
font-family: 'Outfit', system-ui, sans-serif;
z-index: 2;
opacity: 0;
transition: opacity 0.6s ease-out;
}
.dz-tms-hud.is-visible { opacity: 1; }
/* Per-widget absolute positioning — values measured from the source
video at t=3.5s with a Python script that read off pixel coordinates
(see /tmp/measure_hud.py). Each widget lands directly on top of the
corresponding baked-in gauge so the user sees one set, not two.
The ::before pseudo paints a soft dark vignette so the baked-in
original is masked underneath. */
.dz-tms-hud__gauge {
position: absolute;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
filter: drop-shadow(0 0 5px rgba(0,0,0,0.55))
drop-shadow(0 0 8px rgba(79,200,244,0.35));
z-index: 1;
}
.dz-tms-hud__gauge::before {
content: "";
position: absolute;
inset: -25% -20% -15% -15%;
background: radial-gradient(ellipse at 35% 60%, rgba(14,22,32,0.85) 0%, rgba(14,22,32,0.4) 55%, transparent 100%);
z-index: -1;
pointer-events: none;
}
/* Coordinates from measured ref frame (1280×720):
g1 center: 190px, 200px → left edge ~140px (11%), top ~146px (20.3%)
g2 center: 190px, 325px → top ~265px (36.8%)
g3 center: 190px, 415px → top ~355px (49.3%) */
.dz-tms-hud__gauge--g1 { top: 20.5%; left: 10.5%; }
.dz-tms-hud__gauge--g2 { top: 36.5%; left: 10.5%; }
.dz-tms-hud__gauge--g3 { top: 49.5%; left: 11%; }
.dz-tms-hud__gauge-label {
font-size: clamp(7px, 1.15cqw, 11px);
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #B6E8FF;
white-space: nowrap;
text-shadow: 0 0 6px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.8);
margin-bottom: 1px;
}
/* Ring sized to match the source: ~60px in 1280px frame = 4.7% of width */
.dz-tms-hud__gauge-svg {
width: clamp(36px, 5.4cqw, 70px);
height: clamp(36px, 5.4cqw, 70px);
display: block;
}
/* Match the original baked-in gauge style: thicker cyan ring, faint
inner track, bolder centred percentage. */
.dz-tms-hud__gauge-track {
stroke: rgba(79,200,244,0.20);
stroke-width: 4;
}
.dz-tms-hud__gauge-fill {
stroke: #5FD6FF;
stroke-width: 4;
filter: drop-shadow(0 0 5px rgba(95,214,255,0.9))
drop-shadow(0 0 10px rgba(95,214,255,0.45));
/* Short transition matched to the 200ms drift interval so the ring
glides into each new value before the next one arrives — perpetual
smooth motion. */
transition: stroke-dashoffset 0.22s linear;
}
.dz-tms-hud__gauge-num {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(10px, 2.4cqw, 19px);
font-weight: 700;
fill: #E5F6FF;
letter-spacing: -0.02em;
}
/* Bar group widget — measured from source frame:
Chart 1 (Occupancy) label at x≈755 (59%), y≈155 (21.5%)
Chart 2 (Maintenance) label at x≈895 (70%), y≈155 (21.5%)
Each chart spans ~130×55px in 1280×720 = 10.2% × 7.6%.
Subtle perspective tilt matches the building face's projection in
the footage so the live bars sit *on* the building, not floating. */
.dz-tms-hud__bars {
position: absolute;
display: flex;
flex-direction: column;
gap: 2px;
filter: drop-shadow(0 0 5px rgba(0,0,0,0.55))
drop-shadow(0 0 8px rgba(79,200,244,0.35));
transform: perspective(900px) rotateY(-3deg);
transform-origin: left center;
z-index: 1;
}
.dz-tms-hud__bars::before {
content: "";
position: absolute;
inset: -20% -10% -15% -10%;
background: radial-gradient(ellipse at 50% 55%, rgba(14,22,32,0.85) 0%, rgba(14,22,32,0.4) 60%, transparent 100%);
z-index: -1;
pointer-events: none;
}
.dz-tms-hud__bars--b1 { top: 21%; left: 59%; }
.dz-tms-hud__bars--b2 { top: 21%; left: 70%; }
.dz-tms-hud__bars-label {
font-size: clamp(7px, 1.15cqw, 11px);
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #B6E8FF;
text-shadow: 0 0 6px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.8);
white-space: nowrap;
margin-bottom: 1px;
}
.dz-tms-hud__bars-svg {
width: clamp(50px, 10cqw, 120px);
height: clamp(22px, 5cqw, 50px);
display: block;
}
.dz-tms-hud__bar {
fill: #5FD6FF;
filter: drop-shadow(0 0 4px rgba(95,214,255,0.9));
/* Linear short transition keeps each bar sliding continuously between
ticks — no settle, always in motion. */
transition: y 0.22s linear, height 0.22s linear;
}
.dz-tms-hero__badge {
display: inline-flex;
flex-direction: column;
gap: 4px;
padding: 12px 18px;
background: rgba(14,22,32,0.55);
border: 1px solid rgba(143,203,169,0.40);
border-radius: 10px;
text-align: left;
backdrop-filter: blur(10px);
/* Anchor to the bottom of the video. Below the bar charts (top:23%)
and to the right of the gauges (left:0-12%), so it doesn't fight
the live HUD. */
position: absolute;
bottom: 6%;
right: 4%;
z-index: 3;
}
.dz-tms-hero__badge::before {
/* pulsing green dot — TwinMs identity */
content: "";
position: absolute;
top: 13px; left: 12px;
width: 7px; height: 7px;
border-radius: 50%;
background: #8FCBA9;
box-shadow: 0 0 10px #8FCBA9;
animation: dzTmsLivePulse 2.2s ease-in-out infinite;
}
.dz-tms-hero__badge-kicker {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #8FCBA9;
padding-left: 16px;
}
.dz-tms-hero__badge-name {
font-size: 14px;
font-weight: 600;
color: var(--dz-text-on-dark);
letter-spacing: -0.01em;
}
.dz-tms-hero__badge-note {
font-size: 11px;
font-weight: 400;
color: rgba(255,255,255,0.7);
font-style: italic;
}
@keyframes dzTmsLivePulse {
0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 8px #8FCBA9; }
50% { transform: scale(1.4); opacity: .55; box-shadow: 0 0 16px #8FCBA9, 0 0 28px rgba(143,203,169,0.35); }
}
/* ── 3D TWIN section ─────────────────────────────────────────────────── */
.dz-tms-3d {
background: var(--dz-white, #FFFFFF); /* was #FAFAFA — non-brand drift */
padding: clamp(48px, 6vw, 72px) clamp(24px, 4vw, 64px) clamp(64px, 8vw, 96px);
text-align: center;
position: relative;
}
.dz-tms-3d__head {
max-width: 760px;
margin: 0 auto 40px;
display: flex;
flex-direction: column;
align-items: center;
}
.dz-tms-3d__head .dz-tms-lead { margin-top: 4px; }
.dz-tms-3d__frame {
max-width: 1180px;
margin: 0 auto 56px;
opacity: 0;
transform: translateY(28px);
transition: opacity 1s var(--dz-ease-fade, ease), transform 1s var(--dz-ease-fade, ease);
}
.dz-tms-3d.is-in-view .dz-tms-3d__frame {
opacity: 1;
transform: translateY(0);
}
.dz-tms-3d__device {
position: relative;
background: linear-gradient(180deg, #1A2D3E 0%, #0E1620 100%);
border-radius: 18px;
padding: 14px 14px 0;
box-shadow:
0 30px 60px -20px rgba(43,61,79,0.45),
0 12px 28px -8px rgba(43,61,79,0.20),
0 0 0 1px rgba(255,255,255,0.04) inset;
overflow: hidden;
}
.dz-tms-3d__device-bar {
display: flex;
gap: 6px;
padding: 4px 0 12px;
}
.dz-tms-3d__device-bar span {
width: 10px; height: 10px;
border-radius: 50%;
background: rgba(255,255,255,0.16);
}
.dz-tms-3d__device-bar span:first-child { background: #FF6058; }
.dz-tms-3d__device-bar span:nth-child(2) { background: #FFBD2E; }
.dz-tms-3d__device-bar span:nth-child(3) { background: #28CA41; }
.dz-tms-3d__device img,
.dz-tms-3d__device video {
display: block;
width: 100%;
height: auto;
border-radius: 10px 10px 0 0;
background: #0E1620;
}
.dz-tms-3d__captions {
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 1180px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.dz-tms-3d__captions li {
text-align: left;
padding: 22px 24px;
background: var(--dz-white);
border: 1px solid rgba(43,61,79,0.08);
border-radius: var(--dz-tms-radius);
display: flex;
flex-direction: column;
gap: 6px;
transition: border-color .25s ease, transform .25s ease;
}
.dz-tms-3d__captions li:hover {
border-color: rgba(79,200,244,0.4);
transform: translateY(-2px);
}
.dz-tms-3d__caption-kicker {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--dz-aqua);
}
.dz-tms-3d__caption-text {
font-size: 14px;
line-height: 1.5;
color: var(--dz-text);
opacity: 0.78;
}
/* ── MONITORS grid ───────────────────────────────────────────────────── */
.dz-tms-mon {
background: var(--dz-white, #FFFFFF);
padding: clamp(56px, 7vw, 88px) clamp(24px, 4vw, 64px) clamp(64px, 9vw, 100px);
position: relative;
}
.dz-tms-mon__head {
max-width: 760px;
margin: 0 auto 40px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.dz-tms-mon__head .dz-tms-lead { margin-top: 4px; }
.dz-tms-mon__grid {
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.dz-tms-tile {
background: #FAFAFA;
border: 1px solid rgba(43,61,79,0.08);
border-radius: var(--dz-tms-radius);
padding: 26px 22px 24px;
display: flex;
flex-direction: column;
gap: 10px;
opacity: 0;
transform: translateY(20px);
transition: opacity .7s var(--dz-ease-fade, ease), transform .7s var(--dz-ease-fade, ease), border-color .25s ease, background .25s ease;
transition-delay: calc(var(--tms-tile-i, 0) * 60ms);
}
.dz-tms-mon.is-in-view .dz-tms-tile { opacity: 1; transform: translateY(0); }
.dz-tms-tile:hover {
border-color: var(--dz-tms-green);
background: var(--dz-tms-green-wash);
}
.dz-tms-tile__icon {
width: 44px; height: 44px;
border-radius: 10px;
display: grid;
place-items: center;
background: rgba(79,200,244,0.10);
color: var(--dz-aqua);
margin-bottom: 4px;
transition: background .25s ease, color .25s ease;
}
.dz-tms-tile:hover .dz-tms-tile__icon {
background: rgba(92,122,110,0.18);
color: var(--dz-tms-green-deep);
}
.dz-tms-tile__label {
font-size: 17px;
font-weight: 600;
color: var(--dz-text);
letter-spacing: -0.005em;
}
.dz-tms-tile__text {
font-size: 13px;
line-height: 1.5;
color: var(--dz-text);
opacity: 0.72;
margin: 0;
}
/* ──────────────────────────────────────────────────────────────────────
USE CASES — One platform · Many realities
Dark control-room slab between MONITORS (white) and PERF (dark) so the
video tiles read cinematically. Tiles fade in on scroll, then play
their videos lazily via IntersectionObserver in the JSX layer.
────────────────────────────────────────────────────────────────────── */
.dz-tms-use {
position: relative;
padding: 96px 6vw 110px;
background:
radial-gradient(820px 480px at 12% 20%, rgba(79,200,244,0.08), transparent 65%),
radial-gradient(700px 420px at 92% 78%, rgba(79,200,244,0.06), transparent 65%),
linear-gradient(180deg, #0E1620 0%, #1A2D3E 100%);
color: #E5F6FF;
overflow: hidden;
}
.dz-tms-use__head {
max-width: 760px;
margin: 0 auto 40px;
padding: 0 1vw;
text-align: center;
}
.dz-tms-use__head .dz-tms-h2 { color: #FFFFFF; }
.dz-tms-use__head .dz-tms-lead {
margin-top: 10px;
color: rgba(229,246,255,0.72);
}
.dz-tms-use__grid {
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
@media (max-width: 980px) {
.dz-tms-use__grid { grid-template-columns: 1fr; gap: 18px; }
.dz-tms-use { padding: 72px 5vw 84px; }
}
.dz-tms-uc {
display: flex;
flex-direction: column;
background: rgba(255,255,255,0.035);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
overflow: hidden;
opacity: 0;
transform: translateY(22px);
transition:
opacity .6s ease,
transform .6s ease,
border-color .35s ease,
background .35s ease;
transition-delay: calc(var(--tms-uc-i, 0) * 90ms);
text-decoration: none;
color: inherit;
}
.dz-tms-use.is-in-view .dz-tms-uc {
opacity: 1;
transform: translateY(0);
}
.dz-tms-uc:hover {
border-color: rgba(79,200,244,0.4);
background: rgba(79,200,244,0.045);
transform: translateY(-3px);
}
.dz-tms-uc__media {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #0E1620;
}
.dz-tms-uc__video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dz-tms-uc__pill {
position: absolute;
top: 14px;
left: 14px;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 11px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
border-radius: 999px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.dz-tms-uc__pill-dot {
width: 6px;
height: 6px;
border-radius: 50%;
}
.dz-tms-uc__pill--live {
background: rgba(143,203,169,0.18);
border: 1px solid rgba(143,203,169,0.5);
color: #A8DBBF;
}
.dz-tms-uc__pill--live .dz-tms-uc__pill-dot {
background: #8FCBA9;
box-shadow: 0 0 8px rgba(143,203,169,0.7);
animation: dz-tms-uc-pulse 1.6s ease-in-out infinite;
}
@keyframes dz-tms-uc-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.55; }
}
.dz-tms-uc__pill--demo {
background: rgba(79,200,244,0.13);
border: 1px solid rgba(79,200,244,0.4);
color: #B6E5F8;
}
.dz-tms-uc__pill--demo .dz-tms-uc__pill-dot {
background: #4FC8F4;
box-shadow: 0 0 8px rgba(79,200,244,0.5);
}
.dz-tms-uc__body {
padding: 22px 22px 26px;
display: flex;
flex-direction: column;
flex: 1;
}
.dz-tms-uc__label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(79,200,244,0.85);
margin-bottom: 10px;
}
.dz-tms-uc__title {
font-size: 20px;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.22;
color: #FFFFFF;
margin: 0 0 10px;
}
.dz-tms-uc__text {
font-size: 13.5px;
line-height: 1.55;
color: rgba(229,246,255,0.68);
margin: 0 0 18px;
flex: 1;
}
.dz-tms-uc__cta {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 4px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--dz-tms-aqua, #4FC8F4);
transition: gap .25s ease, color .25s ease;
}
.dz-tms-uc__cta svg { transition: transform .25s ease; }
.dz-tms-uc:hover .dz-tms-uc__cta { gap: 12px; color: #B6E5F8; }
.dz-tms-uc:hover .dz-tms-uc__cta svg { transform: translateX(3px); }
/* ──────────────────────────────────────────────────────────────────────
USE CASE DOSSIER — /twinms/use-cases//
Cinematic dossier-style detail page. Massive editorial typography,
chapter watermarks, sticky chapter rail, reading progress bar,
generous spacing. Light/dark rhythm.
────────────────────────────────────────────────────────────────────── */
.dz-tmsc {
background: #FFFFFF;
color: var(--dz-text, #2B3D4F);
display: block;
overflow-x: hidden;
}
/* Reading progress — top of viewport */
.dz-tmsc-progress {
position: fixed;
top: 0; left: 0; right: 0;
height: 2px;
background: rgba(79,200,244,0.10);
z-index: 60;
pointer-events: none;
}
.dz-tmsc-progress__bar {
height: 100%;
background: linear-gradient(90deg, #4FC8F4 0%, #8FCBA9 100%);
transform-origin: left center;
transform: scaleX(0);
will-change: transform;
}
/* Chapter rail — sticky frosted capsule, works on any section bg */
.dz-tmsc-rail {
position: fixed;
top: 50%;
right: 22px;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 4px;
z-index: 40;
padding: 14px 14px;
background: rgba(255,255,255,0.78);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border: 1px solid rgba(43,61,79,0.08);
border-radius: 18px;
box-shadow:
0 14px 40px -16px rgba(43,61,79,0.20),
inset 0 0 0 1px rgba(255,255,255,0.5);
}
.dz-tmsc-rail__dot {
appearance: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 12px;
font-family: inherit;
color: rgba(43,61,79,0.55);
background: transparent;
padding: 8px 12px;
border-radius: 12px;
transition: color .25s ease, background .25s ease;
}
.dz-tmsc-rail__dot::before {
content: "";
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(43,61,79,0.30);
flex-shrink: 0;
transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.dz-tmsc-rail__dot:hover {
color: #2B3D4F;
background: rgba(43,61,79,0.04);
}
.dz-tmsc-rail__dot:hover::before { background: rgba(79,200,244,0.7); }
.dz-tmsc-rail__dot.is-active {
color: #2B3D4F;
background: rgba(79,200,244,0.12);
}
.dz-tmsc-rail__dot.is-active::before {
background: #4FC8F4;
transform: scale(1.35);
box-shadow: 0 0 12px rgba(79,200,244,0.55);
}
.dz-tmsc-rail__num {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
font-feature-settings: "tnum";
min-width: 16px;
}
.dz-tmsc-rail__lbl {
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.02em;
}
.dz-tmsc-rail__dot.is-active .dz-tmsc-rail__lbl { font-weight: 700; }
@media (max-width: 1100px) { .dz-tmsc-rail { display: none; } }
/* Status pill — shared between hero, continue cards */
.dz-tmsc-pill {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 11px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
border-radius: 999px;
width: max-content;
}
.dz-tmsc-pill-dot { width: 6px; height: 6px; border-radius: 50%; }
.dz-tmsc-pill--live {
background: rgba(143,203,169,0.18);
border: 1px solid rgba(143,203,169,0.5);
color: #4D8A6A;
}
.dz-tmsc-pill--live .dz-tmsc-pill-dot {
background: #8FCBA9;
box-shadow: 0 0 8px rgba(143,203,169,0.7);
animation: dz-tms-uc-pulse 1.6s ease-in-out infinite;
}
.dz-tmsc-pill--demo {
background: rgba(79,200,244,0.13);
border: 1px solid rgba(79,200,244,0.45);
color: #1F6789;
}
.dz-tmsc-pill--demo .dz-tmsc-pill-dot {
background: #4FC8F4;
box-shadow: 0 0 8px rgba(79,200,244,0.5);
}
/* HERO — cinematic header */
.dz-tmsc-hero {
position: relative;
padding: 28px 6vw 80px;
background:
radial-gradient(900px 540px at 92% 12%, rgba(79,200,244,0.10), transparent 65%),
linear-gradient(180deg, #FFFFFF 0%, #F4F8FB 100%);
overflow: hidden;
}
.dz-tmsc-hero__inner {
max-width: 1280px;
margin: 0 auto;
position: relative;
}
.dz-tmsc-hero__crumb {
font-size: 12px;
letter-spacing: 0.04em;
color: rgba(43,61,79,0.5);
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 36px;
}
.dz-tmsc-hero__crumb a {
color: rgba(43,61,79,0.7);
text-decoration: none;
transition: color .2s ease;
}
.dz-tmsc-hero__crumb a:hover { color: #4FC8F4; }
.dz-tmsc-hero__crumb .is-current { color: #2B3D4F; font-weight: 600; }
.dz-tmsc-hero__topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
padding-bottom: 24px;
border-bottom: 1px solid rgba(43,61,79,0.10);
margin-bottom: 44px;
}
.dz-tmsc-dossier {
display: inline-flex;
align-items: baseline;
gap: 14px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(43,61,79,0.55);
}
.dz-tmsc-dossier__lbl {}
.dz-tmsc-dossier__num {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
color: #2B3D4F;
font-feature-settings: "tnum";
}
.dz-tmsc-dossier__sep {
opacity: 0.4;
font-size: 16px;
font-weight: 400;
}
.dz-tmsc-dossier__total {
font-size: 16px;
font-weight: 600;
color: rgba(43,61,79,0.45);
font-feature-settings: "tnum";
}
.dz-tmsc-hero__title {
font-size: clamp(44px, 6.4vw, 92px);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 0.98;
color: #2B3D4F;
margin: 0 0 28px;
max-width: 16ch;
opacity: 0;
transform: translateY(18px);
transition: opacity .8s ease, transform .8s ease;
}
.dz-tmsc-hero.is-in-view .dz-tmsc-hero__title { opacity: 1; transform: translateY(0); }
.dz-tmsc-hero__lead {
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.55;
color: rgba(43,61,79,0.72);
margin: 0 0 56px;
max-width: 70ch;
opacity: 0;
transform: translateY(14px);
transition: opacity .8s ease .15s, transform .8s ease .15s;
}
.dz-tmsc-hero.is-in-view .dz-tmsc-hero__lead { opacity: 1; transform: translateY(0); }
.dz-tmsc-hero__media {
position: relative;
border-radius: 18px;
overflow: hidden;
background: #2B3D4F;
aspect-ratio: 16 / 9;
box-shadow: 0 50px 100px -40px rgba(43,61,79,0.45);
opacity: 0;
transform: translateY(20px);
transition: opacity 1s ease .3s, transform 1s ease .3s;
}
.dz-tmsc-hero.is-in-view .dz-tmsc-hero__media { opacity: 1; transform: translateY(0); }
.dz-tmsc-hero__video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.dz-tmsc-hero__media-edge {
position: absolute;
inset: 0;
border-radius: 18px;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10);
}
.dz-tmsc-hero__hint {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 18px;
font-size: 13px;
font-weight: 500;
color: rgba(43,61,79,0.55);
}
/* Hero meta strip — tabular block of facts */
.dz-tmsc-hero__meta {
margin-top: 56px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: rgba(43,61,79,0.10);
border-top: 1px solid rgba(43,61,79,0.10);
border-bottom: 1px solid rgba(43,61,79,0.10);
opacity: 0;
transform: translateY(12px);
transition: opacity .8s ease .45s, transform .8s ease .45s;
}
.dz-tmsc-hero.is-in-view .dz-tmsc-hero__meta { opacity: 1; transform: translateY(0); }
@media (max-width: 700px) {
.dz-tmsc-hero__meta { grid-template-columns: repeat(2, 1fr); }
}
.dz-tmsc-hero__meta-cell {
background: #FFFFFF;
padding: 22px 24px;
}
.dz-tmsc-hero__meta-lbl {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(43,61,79,0.45);
margin-bottom: 8px;
}
.dz-tmsc-hero__meta-val {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.01em;
color: #2B3D4F;
}
/* Scroll cue */
.dz-tmsc-hero__scroll {
position: absolute;
bottom: -68px;
right: 0;
display: flex;
align-items: center;
gap: 16px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(43,61,79,0.4);
}
.dz-tmsc-hero__scroll-line {
display: inline-block;
width: 56px;
height: 1px;
background: linear-gradient(90deg, rgba(79,200,244,0.5), #4FC8F4);
position: relative;
overflow: hidden;
}
.dz-tmsc-hero__scroll-line::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, #FFFFFF 50%, transparent 100%);
animation: dz-tmsc-pulse 2.2s ease-in-out infinite;
}
@keyframes dz-tmsc-pulse {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* CHAPTER — generic frame */
.dz-tmsc-ch {
position: relative;
padding: 96px 6vw;
overflow: hidden;
}
@media (max-width: 980px) { .dz-tmsc-ch { padding: 96px 5vw; } }
.dz-tmsc-ch--light { background: #FFFFFF; color: #2B3D4F; }
.dz-tmsc-ch--dark {
background:
radial-gradient(900px 540px at 12% 18%, rgba(79,200,244,0.10), transparent 65%),
radial-gradient(700px 420px at 92% 84%, rgba(79,200,244,0.06), transparent 65%),
linear-gradient(180deg, #0E1620 0%, #2B3D4F 100%);
color: #E5F6FF;
}
/* Chapter watermark — gigantic background number */
.dz-tmsc-ch__watermark {
position: absolute;
top: -0.18em;
left: -0.06em;
font-size: clamp(220px, 30vw, 480px);
font-weight: 700;
letter-spacing: -0.06em;
line-height: 0.85;
color: #2B3D4F;
opacity: 0.05;
pointer-events: none;
font-feature-settings: "tnum";
user-select: none;
}
.dz-tmsc-ch--dark .dz-tmsc-ch__watermark {
color: #FFFFFF;
opacity: 0.07;
}
.dz-tmsc-ch__inner {
position: relative;
max-width: 1100px;
margin: 0 auto;
}
.dz-tmsc-ch__header {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 24px;
}
.dz-tmsc-ch__rule {
display: inline-block;
width: 64px;
height: 1px;
background: #4FC8F4;
flex-shrink: 0;
box-shadow: 0 0 8px rgba(79,200,244,0.4);
}
.dz-tmsc-ch__kicker {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #4FC8F4;
}
.dz-tmsc-ch__title {
font-size: clamp(34px, 4.8vw, 64px);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.05;
margin: 0 0 40px;
max-width: 22ch;
opacity: 0;
transform: translateY(14px);
transition: opacity .8s ease, transform .8s ease;
}
.dz-tmsc-ch.is-in-view .dz-tmsc-ch__title { opacity: 1; transform: translateY(0); }
.dz-tmsc-ch--light .dz-tmsc-ch__title { color: #2B3D4F; }
.dz-tmsc-ch--dark .dz-tmsc-ch__title { color: #FFFFFF; }
.dz-tmsc-ch__body { position: relative; }
/* Chapter 01 — bullet list with prefixed indices */
.dz-tmsc-shows {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.dz-tmsc-shows li {
display: grid;
grid-template-columns: 240px 1fr;
gap: 36px;
align-items: baseline;
padding: 32px 0;
border-top: 1px solid rgba(43,61,79,0.08);
opacity: 0;
transform: translateY(14px);
transition: opacity .55s ease, transform .55s ease;
transition-delay: calc(var(--tmc-i, 0) * 90ms);
}
.dz-tmsc-shows li:last-child { border-bottom: 1px solid rgba(43,61,79,0.08); }
.dz-tmsc-ch--dark .dz-tmsc-shows li { border-top-color: rgba(255,255,255,0.10); }
.dz-tmsc-ch--dark .dz-tmsc-shows li:last-child { border-bottom-color: rgba(255,255,255,0.10); }
.dz-tmsc-ch.is-in-view .dz-tmsc-shows li { opacity: 1; transform: translateY(0); }
@media (max-width: 800px) {
.dz-tmsc-shows li { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
}
.dz-tmsc-shows__idx {
display: flex;
flex-direction: column;
gap: 8px;
}
.dz-tmsc-shows__idx-num {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #4FC8F4;
font-feature-settings: "tnum";
}
.dz-tmsc-shows__idx-scene {
font-size: 17px;
font-weight: 600;
letter-spacing: -0.012em;
font-style: italic;
color: rgba(43,61,79,0.92);
}
.dz-tmsc-ch--dark .dz-tmsc-shows__idx-scene { color: rgba(255,255,255,0.92); }
.dz-tmsc-shows__txt {
font-size: clamp(17px, 1.5vw, 22px);
line-height: 1.5;
color: rgba(43,61,79,0.78);
}
.dz-tmsc-ch--dark .dz-tmsc-shows__txt { color: rgba(229,246,255,0.85); }
/* Chapter 02 — figures (left col) + paragraphs (right col), like a journal */
.dz-tmsc-applies {
display: flex;
flex-direction: column;
}
.dz-tmsc-apply {
display: grid;
grid-template-columns: 240px 1fr;
gap: 40px;
padding: 44px 0;
border-top: 1px solid rgba(255,255,255,0.10);
align-items: start;
opacity: 0;
transform: translateY(14px);
transition: opacity .55s ease, transform .55s ease;
transition-delay: calc(var(--tmc-i, 0) * 90ms);
}
.dz-tmsc-ch--light .dz-tmsc-apply { border-top-color: rgba(43,61,79,0.10); }
.dz-tmsc-apply:last-child { border-bottom: 1px solid rgba(255,255,255,0.10); }
.dz-tmsc-ch--light .dz-tmsc-apply:last-child { border-bottom-color: rgba(43,61,79,0.10); }
.dz-tmsc-ch.is-in-view .dz-tmsc-apply { opacity: 1; transform: translateY(0); }
@media (max-width: 800px) {
.dz-tmsc-apply { grid-template-columns: 1fr; gap: 18px; padding: 32px 0; }
}
.dz-tmsc-apply__col {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
}
.dz-tmsc-apply__fig {
width: 80px;
height: 80px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(79,200,244,0.10);
color: #4FC8F4;
border: 1px solid rgba(79,200,244,0.25);
box-shadow: 0 0 24px rgba(79,200,244,0.10) inset;
}
.dz-tmsc-ch--light .dz-tmsc-apply__fig {
background: rgba(79,200,244,0.06);
border-color: rgba(79,200,244,0.20);
}
.dz-tmsc-apply__caption {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(229,246,255,0.45);
font-feature-settings: "tnum";
margin-top: 4px;
}
.dz-tmsc-ch--light .dz-tmsc-apply__caption { color: rgba(43,61,79,0.40); }
.dz-tmsc-apply__kicker {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #4FC8F4;
margin-top: 2px;
}
.dz-tmsc-apply__text {
font-size: clamp(16px, 1.3vw, 19px);
line-height: 1.6;
margin: 0;
padding-top: 6px;
}
.dz-tmsc-ch--light .dz-tmsc-apply__text { color: rgba(43,61,79,0.78); }
.dz-tmsc-ch--dark .dz-tmsc-apply__text { color: rgba(229,246,255,0.85); }
/* Chapter 03 — minimal: animated circular icons + centered text, no card chrome */
.dz-tmsc-bento {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 24px;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 1100px) { .dz-tmsc-bento { gap: 20px; } }
@media (max-width: 980px) { .dz-tmsc-bento { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
@media (max-width: 700px) { .dz-tmsc-bento { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 480px) { .dz-tmsc-bento { grid-template-columns: 1fr; gap: 36px; } }
.dz-tmsc-bento__cell {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 8px;
background: transparent;
border: none;
box-shadow: none;
opacity: 0;
transform: translateY(16px);
transition:
opacity .6s ease,
transform .6s ease;
transition-delay: calc(var(--tmc-i, 0) * 90ms);
}
.dz-tmsc-ch.is-in-view .dz-tmsc-bento__cell {
opacity: 1;
transform: translateY(0);
}
/* Strip featured-cell special treatment — all cells equal, all minimal */
.dz-tmsc-bento__cell--featured {
padding: 0 8px;
background: transparent;
border: none;
}
/* Glyph circle — the visual anchor, centered */
.dz-tmsc-bento__glyph {
width: 96px;
height: 96px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background:
radial-gradient(circle at 50% 50%, rgba(79,200,244,0.16), rgba(79,200,244,0.04) 70%);
color: var(--dz-aqua, #4FC8F4);
border: 1px solid rgba(79,200,244,0.32);
margin-bottom: 24px;
flex-shrink: 0;
transition: transform .35s cubic-bezier(.2,.65,.25,1), box-shadow .35s ease, border-color .35s ease;
box-shadow: 0 0 32px rgba(79,200,244,0.12);
}
.dz-tmsc-bento__glyph svg {
width: 48px;
height: 48px;
overflow: visible;
}
.dz-tmsc-bento__cell:hover .dz-tmsc-bento__glyph {
transform: scale(1.06);
border-color: rgba(79,200,244,0.55);
box-shadow: 0 0 48px rgba(79,200,244,0.32);
}
.dz-tmsc-bento__cell--featured .dz-tmsc-bento__glyph {
width: 96px;
height: 96px;
margin-bottom: 24px;
background:
radial-gradient(circle at 50% 50%, rgba(79,200,244,0.16), rgba(79,200,244,0.04) 70%);
border-color: rgba(79,200,244,0.32);
box-shadow: 0 0 32px rgba(79,200,244,0.12);
}
.dz-tmsc-bento__cell--featured .dz-tmsc-bento__glyph svg { width: 48px; height: 48px; }
/* Hairline rule centered under the glyph */
.dz-tmsc-bento__rule {
display: inline-block;
width: 32px;
height: 1px;
background: var(--dz-aqua, #4FC8F4);
border-radius: 1px;
margin: 0 0 18px;
transform: scaleX(0);
transform-origin: center;
transition: transform .8s cubic-bezier(.2,.65,.25,1) .25s, width .35s ease;
}
.dz-tmsc-ch.is-in-view .dz-tmsc-bento__cell .dz-tmsc-bento__rule { transform: scaleX(1); }
.dz-tmsc-bento__cell:hover .dz-tmsc-bento__rule { width: 48px; }
.dz-tmsc-bento__cell--featured .dz-tmsc-bento__rule {
width: 32px;
margin-bottom: 18px;
}
/* Outcome text — centered, italic */
.dz-tmsc-bento__txt {
font-size: 14.5px;
font-weight: 400;
font-style: italic;
line-height: 1.5;
color: var(--dz-text, #2B3D4F);
opacity: 0.85;
margin: 0;
max-width: 22ch;
}
.dz-tmsc-ch--dark .dz-tmsc-bento__txt {
color: rgba(229,246,255,0.85);
opacity: 1;
}
.dz-tmsc-bento__cell--featured .dz-tmsc-bento__txt {
font-size: 14.5px;
font-style: italic;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0;
}
/* Remove the cell's top accent rule from the previous design */
.dz-tmsc-bento__cell::before { content: none; }
@media (max-width: 700px) {
.dz-tmsc-bento__glyph { width: 84px; height: 84px; margin-bottom: 18px; }
.dz-tmsc-bento__glyph svg { width: 42px; height: 42px; }
.dz-tmsc-bento__txt { font-size: 14px; max-width: 26ch; }
}
/* CONTINUE THE DOSSIER — solid pale aqua, navy stamps */
.dz-tmsc-continue {
position: relative;
padding: 88px 6vw 96px;
background: #F4FAFD;
color: var(--dz-navy, #2B3D4F);
overflow: hidden;
}
.dz-tmsc-continue::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(79,200,244,0.6), transparent);
}
@media (max-width: 980px) { .dz-tmsc-continue { padding: 80px 5vw 100px; } }
.dz-tmsc-continue__inner {
position: relative;
max-width: 1280px;
margin: 0 auto;
}
.dz-tmsc-continue__head {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 44px;
}
.dz-tmsc-continue__kicker {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #1F6789;
}
.dz-tmsc-continue__title {
font-size: clamp(28px, 3.4vw, 48px);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.1;
color: var(--dz-navy, #2B3D4F);
margin: 0;
max-width: 22ch;
}
.dz-tmsc-continue__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
margin-bottom: 56px;
}
@media (max-width: 800px) { .dz-tmsc-continue__grid { grid-template-columns: 1fr; gap: 16px; } }
.dz-tmsc-continue__card {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding: 26px 28px 24px;
background: var(--dz-navy, #2B3D4F);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px;
text-decoration: none;
color: var(--dz-text-on-dark, #FFFFFF);
overflow: hidden;
box-shadow: 0 14px 38px -18px rgba(43,61,79,0.30);
opacity: 0;
transform: translateY(14px);
transition:
opacity .55s ease,
transform .55s ease,
background .3s ease,
border-color .3s ease,
box-shadow .3s ease;
transition-delay: calc(var(--tmc-i, 0) * 90ms);
}
.dz-tmsc-continue.is-in-view .dz-tmsc-continue__card { opacity: 1; transform: translateY(0); }
.dz-tmsc-continue__card:hover {
background: var(--dz-navy-deep, #1A2D3E);
border-color: rgba(79,200,244,0.45);
transform: translateY(-3px);
box-shadow:
0 22px 50px -22px rgba(43,61,79,0.40),
0 0 0 3px rgba(79,200,244,0.10);
}
.dz-tmsc-continue__card::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 4px; height: 100%;
background: linear-gradient(180deg, var(--dz-aqua, #4FC8F4) 0%, rgba(79,200,244,0.4) 100%);
opacity: 0;
transition: opacity .3s ease;
}
.dz-tmsc-continue__card:hover::after { opacity: 1; }
/* Pills inside dark glass cards — light text for contrast */
.dz-tmsc-continue__card .dz-tmsc-pill--live {
color: #A8DBBF;
}
.dz-tmsc-continue__card .dz-tmsc-pill--demo {
background: rgba(79,200,244,0.18);
border-color: rgba(79,200,244,0.55);
color: #B6E5F8;
}
.dz-tmsc-continue__card-num {
position: absolute;
top: -0.16em;
right: -0.04em;
font-size: clamp(180px, 22vw, 240px);
font-weight: 700;
letter-spacing: -0.05em;
line-height: 0.85;
color: var(--dz-aqua, #4FC8F4);
opacity: 0.10;
font-feature-settings: "tnum";
pointer-events: none;
user-select: none;
z-index: 0;
transition: opacity .35s ease, transform .35s ease;
}
.dz-tmsc-continue__card:hover .dz-tmsc-continue__card-num {
opacity: 0.16;
transform: scale(1.02);
}
.dz-tmsc-continue__card-body {
position: relative;
z-index: 1;
}
.dz-tmsc-continue__card-body {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Status line: small italic with dot — sits above the case name */
.dz-tmsc-continue__card-meta {
display: inline-flex;
align-items: center;
margin: 0 0 4px;
font-size: 11.5px;
font-style: italic;
font-weight: 400;
letter-spacing: 0.005em;
color: rgba(229,246,255,0.62);
line-height: 1.3;
}
.dz-tmsc-continue__card-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
margin-right: 8px;
flex-shrink: 0;
}
.dz-tmsc-continue__card-dot--live {
background: #8FCBA9;
box-shadow: 0 0 8px rgba(143,203,169,0.6);
animation: dz-tms-uc-pulse 1.6s ease-in-out infinite;
}
.dz-tmsc-continue__card-dot--demo {
background: var(--dz-aqua, #4FC8F4);
box-shadow: 0 0 8px rgba(79,200,244,0.55);
}
/* Case name — the prominent identifier of the card */
.dz-tmsc-continue__card-name {
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 600;
letter-spacing: -0.018em;
line-height: 1.1;
color: #FFFFFF;
margin: 0 0 6px;
font-style: normal;
}
/* Hide legacy label class (kept for safety) */
.dz-tmsc-continue__card-label { display: none; }
/* Tagline below case name — italic, secondary */
.dz-tmsc-continue__card-title {
font-size: 14.5px;
font-weight: 400;
font-style: italic;
letter-spacing: 0;
line-height: 1.45;
color: rgba(229,246,255,0.72);
margin: 0;
}
.dz-tmsc-continue__card-cta {
margin-top: 10px;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12.5px;
font-weight: 600;
color: rgba(229,246,255,0.78);
transition: gap .25s ease, color .25s ease;
}
.dz-tmsc-continue__card:hover .dz-tmsc-continue__card-cta {
gap: 12px;
color: var(--dz-aqua, #4FC8F4);
}
.dz-tmsc-continue__back {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
border: 1px solid rgba(43,61,79,0.20);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: var(--dz-navy, #2B3D4F);
text-decoration: none;
background: transparent;
transition: border-color .25s ease, background .25s ease, gap .25s ease;
}
.dz-tmsc-continue__back:hover {
border-color: var(--dz-aqua, #4FC8F4);
background: rgba(79,200,244,0.08);
gap: 14px;
}
/* ──────────────────────────────────────────────────────────────────────
SPECIFICATIONS SPREAD — typeset spec sheet between Hero and Chapter 01
────────────────────────────────────────────────────────────────────── */
.dz-tmsc-specs {
background: #FAFAFA;
padding: 64px 6vw 72px;
border-top: 1px solid rgba(43,61,79,0.06);
border-bottom: 1px solid rgba(43,61,79,0.06);
position: relative;
}
@media (max-width: 980px) { .dz-tmsc-specs { padding: 72px 5vw 84px; } }
.dz-tmsc-specs__inner {
max-width: 1100px;
margin: 0 auto;
}
.dz-tmsc-specs__head {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 28px;
}
.dz-tmsc-specs__rule {
display: inline-block;
width: 64px;
height: 1px;
background: #4FC8F4;
flex-shrink: 0;
box-shadow: 0 0 8px rgba(79,200,244,0.4);
}
.dz-tmsc-specs__kicker {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #4FC8F4;
}
.dz-tmsc-specs__title {
font-size: clamp(28px, 3.6vw, 48px);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.05;
color: #2B3D4F;
margin: 0 0 36px;
max-width: 22ch;
}
.dz-tmsc-specs__list {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 56px;
border-top: 1px solid rgba(43,61,79,0.10);
}
@media (max-width: 800px) {
.dz-tmsc-specs__list { grid-template-columns: 1fr; gap: 0; }
}
.dz-tmsc-specs__row {
display: grid;
grid-template-columns: 200px 1fr;
gap: 16px;
align-items: baseline;
padding: 18px 0;
border-bottom: 1px solid rgba(43,61,79,0.10);
opacity: 0;
transform: translateY(8px);
transition: opacity .5s ease, transform .5s ease;
transition-delay: calc(var(--tmc-i, 0) * 60ms);
}
.dz-tmsc-specs.is-in-view .dz-tmsc-specs__row { opacity: 1; transform: translateY(0); }
@media (max-width: 600px) {
.dz-tmsc-specs__row { grid-template-columns: 130px 1fr; gap: 12px; padding: 14px 0; }
}
.dz-tmsc-specs__lbl {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(43,61,79,0.50);
margin: 0;
}
.dz-tmsc-specs__val {
font-size: 15.5px;
font-weight: 500;
letter-spacing: -0.005em;
color: #2B3D4F;
margin: 0;
font-feature-settings: "tnum";
}
/* ──────────────────────────────────────────────────────────────────────
CONTINUE — editorial sign-off block
────────────────────────────────────────────────────────────────────── */
.dz-tmsc-continue__signoff {
margin-top: 28px;
padding-top: 36px;
border-top: 1px solid rgba(43,61,79,0.12);
display: flex;
flex-direction: column;
gap: 24px;
}
.dz-tmsc-continue__signoff-line {
margin: 0;
text-align: center;
}
.dz-tmsc-continue__signoff-dash {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.32em;
text-transform: uppercase;
color: rgba(43,61,79,0.40);
font-feature-settings: "tnum";
}
.dz-tmsc-continue__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 14px;
}
.dz-tmsc-continue__brief {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 26px;
background: var(--dz-navy, #2B3D4F);
border: 1px solid var(--dz-navy, #2B3D4F);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: #FFFFFF;
text-decoration: none;
letter-spacing: 0.01em;
transition: background .25s ease, gap .25s ease, transform .2s ease;
box-shadow: 0 12px 30px -12px rgba(43,61,79,0.45);
}
.dz-tmsc-continue__brief:hover {
background: #1A2D3E;
gap: 14px;
transform: translateY(-1px);
}
.dz-tmsc-continue__brief svg { transition: transform .25s ease; }
.dz-tmsc-continue__brief:hover svg { transform: translateX(3px); }
/* HERO PARALLAX WRAPPER */
.dz-tmsc-hero__media-shift {
position: relative;
width: 100%;
height: 100%;
will-change: transform;
transform: translate3d(0, 0, 0);
}
/* MOBILE AUDIT */
@media (max-width: 700px) {
.dz-tmsc-hero { padding: 18px 5vw 64px; }
.dz-tmsc-hero__crumb { margin-bottom: 32px; font-size: 11px; gap: 8px; }
.dz-tmsc-hero__topline { padding-bottom: 18px; margin-bottom: 28px; gap: 14px; }
.dz-tmsc-dossier { gap: 10px; font-size: 10px; }
.dz-tmsc-dossier__num { font-size: 18px; }
.dz-tmsc-hero__title { font-size: clamp(34px, 9vw, 56px); margin-bottom: 18px; }
.dz-tmsc-hero__lead { font-size: 15px; margin-bottom: 36px; }
.dz-tmsc-hero__media { border-radius: 12px; }
.dz-tmsc-hero__meta { margin-top: 36px; }
.dz-tmsc-hero__meta-cell { padding: 16px 16px; }
.dz-tmsc-hero__meta-lbl { letter-spacing: 0.18em; font-size: 10px; }
.dz-tmsc-hero__meta-val { font-size: 15px; word-break: break-word; }
.dz-tmsc-specs { padding: 56px 5vw 64px; }
.dz-tmsc-specs__title { font-size: clamp(24px, 7vw, 36px); margin-bottom: 32px; }
.dz-tmsc-ch { padding: 64px 5vw; }
.dz-tmsc-ch__title { font-size: clamp(28px, 8vw, 44px); margin-bottom: 36px; }
.dz-tmsc-ch__watermark { font-size: clamp(160px, 38vw, 260px); }
.dz-tmsc-shows__idx-num { font-size: 10px; letter-spacing: 0.18em; }
.dz-tmsc-shows__idx-scene { font-size: 16px; }
.dz-tmsc-shows__txt { font-size: 16px; line-height: 1.55; }
.dz-tmsc-apply__fig { width: 64px; height: 64px; }
.dz-tmsc-apply__fig svg { width: 52px; height: 52px; }
.dz-tmsc-apply__kicker { font-size: 12px; letter-spacing: 0.18em; }
.dz-tmsc-apply__caption { font-size: 10px; letter-spacing: 0.18em; }
.dz-tmsc-apply__text { font-size: 15px; line-height: 1.6; padding-top: 0; }
.dz-tmsc-value li { padding: 24px 0; }
.dz-tmsc-value__num {
font-size: clamp(40px, 12vw, 72px);
line-height: 0.9;
overflow-wrap: anywhere;
white-space: normal;
}
.dz-tmsc-value__txt { font-size: 16px; line-height: 1.5; }
.dz-tmsc-continue { padding: 64px 5vw 80px; }
.dz-tmsc-continue__title { font-size: clamp(24px, 7vw, 32px); }
.dz-tmsc-continue__head { margin-bottom: 36px; }
.dz-tmsc-continue__card {
grid-template-columns: 80px 1fr;
padding: 24px 24px 26px 22px;
gap: 16px;
}
.dz-tmsc-continue__card-num { font-size: 64px; }
.dz-tmsc-continue__card-title { font-size: 18px; }
.dz-tmsc-continue__signoff { padding-top: 28px; gap: 18px; }
.dz-tmsc-continue__actions { flex-direction: column; align-items: stretch; }
.dz-tmsc-continue__brief, .dz-tmsc-continue__back { justify-content: center; }
}
@media (max-width: 480px) {
.dz-tmsc-specs__row { grid-template-columns: 110px 1fr; gap: 10px; padding: 12px 0; }
.dz-tmsc-specs__lbl { font-size: 10px; letter-spacing: 0.14em; }
.dz-tmsc-specs__val { font-size: 14px; word-break: break-word; }
.dz-tmsc-hero__meta { grid-template-columns: 1fr; }
.dz-tmsc-continue__card { grid-template-columns: 1fr; gap: 8px; padding: 22px; }
.dz-tmsc-continue__card-num { font-size: 52px; align-self: start; }
}
/* Missing-case fallback */
.dz-tmsc-missing { padding: 120px 6vw; max-width: 800px; margin: 0 auto; text-align: center; }
.dz-tmsc-missing h1 { font-size: 32px; margin: 0 0 12px; }
.dz-tmsc-missing a { color: #4FC8F4; }
/* ── PERFORMANCE strip (dark) ────────────────────────────────────────── */
.dz-tms-perf {
background: linear-gradient(180deg, #0E1620 0%, #1A2D3E 100%);
color: var(--dz-text-on-dark);
padding: clamp(64px, 8vw, 96px) clamp(24px, 4vw, 64px);
position: relative;
overflow: hidden;
}
.dz-tms-perf::before {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(79,200,244,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(79,200,244,0.04) 1px, transparent 1px);
background-size: 80px 80px;
pointer-events: none;
}
.dz-tms-perf__head {
position: relative;
max-width: 760px;
margin: 0 auto 56px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.dz-tms-perf__head .dz-tms-lead { margin-top: 4px; }
.dz-tms-perf__grid {
position: relative;
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.dz-tms-metric {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 14px;
padding: 26px 24px 22px;
background: var(--dz-tms-card-bg);
border: 1px solid var(--dz-tms-card-bd);
border-radius: var(--dz-tms-radius);
position: relative;
opacity: 0;
transform: translateY(20px);
transition: opacity .7s ease, transform .7s ease, border-color .25s ease;
transition-delay: calc(var(--tms-metric-i, 0) * 80ms);
}
.dz-tms-perf.is-in-view .dz-tms-metric { opacity: 1; transform: translateY(0); }
.dz-tms-metric:hover { border-color: rgba(79,200,244,0.35); }
.dz-tms-metric__before {
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
font-size: 14px;
color: rgba(255,255,255,0.45);
text-decoration: line-through;
text-decoration-color: rgba(255,255,255,0.3);
text-align: center;
}
.dz-tms-metric__arrow {
color: var(--dz-aqua);
font-size: 16px;
font-weight: 600;
opacity: 0.6;
}
.dz-tms-metric__after {
font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
font-size: clamp(20px, 1.8vw, 28px);
font-weight: 600;
color: var(--dz-aqua);
letter-spacing: -0.01em;
text-align: center;
}
.dz-tms-metric__label {
grid-column: 1 / -1;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.06);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(255,255,255,0.62);
text-align: center;
}
/* ── ALERTS + 730-day baselines ──────────────────────────────────────── */
.dz-tms-alerts {
background: var(--dz-soft-grey, #F1F1F1); /* was #FAFAFA — non-brand drift; matches hero */
padding: clamp(64px, 8vw, 96px) clamp(24px, 4vw, 64px);
}
.dz-tms-alerts__head {
max-width: 800px;
margin: 0 auto 40px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.dz-tms-alerts__grid {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
.dz-tms-acard {
background: var(--dz-white);
border: 1px solid rgba(43,61,79,0.08);
border-radius: var(--dz-tms-radius);
padding: 36px 32px 32px;
position: relative;
opacity: 0;
transform: translateY(20px);
transition: opacity .8s ease, transform .8s ease, border-color .25s ease;
}
.dz-tms-alerts.is-in-view .dz-tms-acard:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.dz-tms-alerts.is-in-view .dz-tms-acard:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 120ms; }
.dz-tms-acard:hover { border-color: rgba(79,200,244,0.35); }
.dz-tms-acard__kicker {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--dz-aqua);
margin-bottom: 14px;
}
.dz-tms-acard__title {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(22px, 2vw, 28px);
font-weight: 600;
line-height: 1.15;
color: var(--dz-text);
margin: 0 0 14px;
letter-spacing: -0.012em;
}
.dz-tms-acard__lead {
font-size: 15px;
line-height: 1.55;
color: var(--dz-text);
opacity: 0.74;
margin: 0 0 22px;
}
.dz-tms-acard__points {
list-style: none;
margin: 0;
padding: 18px 0 0;
border-top: 1px solid rgba(43,61,79,0.08);
display: flex;
flex-direction: column;
gap: 10px;
}
.dz-tms-acard__points li {
position: relative;
padding-left: 22px;
font-size: 13.5px;
line-height: 1.5;
color: var(--dz-text);
opacity: 0.78;
}
.dz-tms-acard__points li::before {
content: "";
position: absolute;
left: 0; top: 8px;
width: 12px; height: 1px;
background: var(--dz-aqua);
}
/* ── PILOT (dark, with green tint) ───────────────────────────────────── */
.dz-tms-pilot {
background:
radial-gradient(800px 400px at 80% 0%, rgba(92,122,110,0.18), transparent 60%),
linear-gradient(180deg, #1A2D3E 0%, #0E1620 100%);
color: var(--dz-text-on-dark);
padding: clamp(64px, 8vw, 96px) clamp(24px, 4vw, 64px);
}
.dz-tms-pilot__inner {
max-width: 1180px;
margin: 0 auto;
}
.dz-tms-pilot__head {
max-width: 760px;
margin: 0 auto 56px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.dz-tms-pilot__head .dz-tms-lead { margin-top: 4px; }
.dz-tms-pilot__cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin-bottom: 36px;
}
/* Single-column variant: every layer of the platform is live, so the
"Live in production" list is the only column and gets full width
centred on a max-width so the rows don't stretch awkwardly wide. */
.dz-tms-pilot__cols--single {
grid-template-columns: minmax(0, 1fr);
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.dz-tms-pilot__col {
background: var(--dz-tms-card-bg);
border: 1px solid var(--dz-tms-card-bd);
border-radius: var(--dz-tms-radius);
padding: 30px 28px 26px;
opacity: 0;
transform: translateY(20px);
transition: opacity .8s ease, transform .8s ease;
}
.dz-tms-pilot.is-in-view .dz-tms-pilot__col:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0ms; }
.dz-tms-pilot.is-in-view .dz-tms-pilot__col:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 120ms; }
.dz-tms-pilot__col-title {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.62);
margin-bottom: 18px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dz-tms-pilot__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.dz-tms-pilot__list li {
display: grid;
grid-template-columns: 14px 1fr auto;
align-items: baseline;
gap: 12px;
}
.dz-tms-pilot__dot {
width: 8px; height: 8px;
border-radius: 50%;
align-self: center;
}
.dz-tms-pilot__dot--good {
background: #8FCBA9;
box-shadow: 0 0 8px rgba(143,203,169,0.6);
}
.dz-tms-pilot__dot--prog {
background: #F6C26B;
box-shadow: 0 0 8px rgba(246,194,107,0.5);
animation: dzTmsLivePulse 2.6s ease-in-out infinite;
}
.dz-tms-pilot__label {
font-size: 14px;
color: rgba(255,255,255,0.92);
}
.dz-tms-pilot__state {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.6);
text-align: right;
}
.dz-tms-pilot__note {
max-width: 720px;
margin: 28px auto 0;
text-align: center;
font-size: 14px;
line-height: 1.55;
color: rgba(255,255,255,0.62);
font-style: italic;
}
/* ── BIM bridge ──────────────────────────────────────────────────────── */
.dz-tms-bim {
background: var(--dz-aqua-wash, #E8F5FB);
padding: clamp(64px, 8vw, 96px) clamp(24px, 4vw, 64px);
text-align: center;
position: relative;
overflow: hidden;
}
/* Decorative lifecycle flourish — two markers connected by an aqua line */
.dz-tms-bim::before {
content: "";
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 120px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--dz-aqua, #4FC8F4), transparent);
opacity: 0.6;
}
.dz-tms-bim__inner {
max-width: 760px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
opacity: 0;
transform: translateY(20px);
transition: opacity .8s ease, transform .8s ease;
position: relative;
}
.dz-tms-bim.is-in-view .dz-tms-bim__inner { opacity: 1; transform: translateY(0); }
.dz-tms-bim .dz-tms-lead { margin-top: 4px; }
/* Lifecycle marker: BIM (design) -> Twin (operations) — small inline graphic */
.dz-tms-bim__lifecycle {
display: inline-flex;
align-items: center;
gap: 14px;
margin-bottom: 32px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(43,61,79,0.55);
font-feature-settings: "tnum";
}
.dz-tms-bim__lifecycle-mark {
display: inline-flex;
align-items: center;
gap: 8px;
}
.dz-tms-bim__lifecycle-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
border: 1px solid var(--dz-aqua, #4FC8F4);
background: rgba(79,200,244,0.20);
}
.dz-tms-bim__lifecycle-arrow {
display: inline-block;
width: 28px;
height: 1px;
background: var(--dz-aqua, #4FC8F4);
position: relative;
opacity: 0.7;
}
.dz-tms-bim__lifecycle-arrow::after {
content: "";
position: absolute;
right: -1px; top: -3px;
border-left: 6px solid var(--dz-aqua, #4FC8F4);
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
}
.dz-tms-bim__cta {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 32px;
padding: 14px 26px;
background: var(--dz-navy, #2B3D4F);
color: #FFFFFF;
text-decoration: none;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.02em;
border-radius: 999px;
transition: gap .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
box-shadow: 0 8px 24px -8px rgba(43,61,79,0.40);
}
.dz-tms-bim__cta:hover {
gap: 14px;
background: var(--dz-navy-deep, #1A2D3E);
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px rgba(43,61,79,0.55);
}
/* ── NEXT (roadmap honesty cards) ────────────────────────────────────── */
.dz-tms-next {
background: var(--dz-navy, #2B3D4F);
padding: clamp(64px, 8vw, 96px) clamp(24px, 4vw, 64px) clamp(56px, 7vw, 84px);
position: relative;
overflow: hidden;
}
/* Subtle aqua radial accents to give depth */
.dz-tms-next::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(700px 400px at 12% 10%, rgba(79,200,244,0.10), transparent 65%),
radial-gradient(600px 380px at 92% 90%, rgba(79,200,244,0.06), transparent 65%);
pointer-events: none;
}
.dz-tms-next__head {
max-width: 760px;
margin: 0 auto 40px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.dz-tms-next__head .dz-tms-lead { margin-top: 4px; }
.dz-tms-next__head .dz-tms-h2 { color: #FFFFFF; }
.dz-tms-next__head .dz-tms-lead { color: rgba(229,246,255,0.78); }
.dz-tms-next__grid {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
position: relative;
}
@media (max-width: 700px) {
.dz-tms-next__grid { grid-template-columns: 1fr; gap: 14px; }
}
.dz-tms-ncard {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px;
padding: 32px 30px 28px;
display: flex;
flex-direction: column;
gap: 12px;
opacity: 0;
transform: translateY(20px);
transition:
opacity .7s ease,
transform .7s ease,
border-color .3s ease,
background .3s ease,
box-shadow .3s ease;
transition-delay: calc(var(--tms-next-i, 0) * 90ms);
position: relative;
overflow: hidden;
}
.dz-tms-next.is-in-view .dz-tms-ncard { opacity: 1; transform: translateY(0); }
.dz-tms-ncard:hover {
border-color: rgba(79,200,244,0.45);
background: rgba(255,255,255,0.06);
box-shadow: 0 16px 40px -16px rgba(79,200,244,0.18);
}
/* Aqua wedge that slides in on hover (top-left edge) */
.dz-tms-ncard::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--dz-aqua, #4FC8F4) 0%, rgba(79,200,244,0.4) 100%);
transform: scaleY(0);
transform-origin: top center;
transition: transform .4s cubic-bezier(.2,.65,.25,1);
}
.dz-tms-ncard:hover::before { transform: scaleY(1); }
.dz-tms-ncard__kicker {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--dz-aqua, #4FC8F4);
font-feature-settings: "tnum";
}
.dz-tms-ncard__kicker::before {
content: "";
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #8FCBA9;
box-shadow: 0 0 8px rgba(143,203,169,0.7);
animation: dz-tms-uc-pulse 1.6s ease-in-out infinite;
flex-shrink: 0;
}
.dz-tms-ncard__label {
font-family: 'Outfit', system-ui, sans-serif;
font-size: 19px;
font-weight: 600;
color: #FFFFFF;
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0;
}
.dz-tms-ncard__text {
font-size: 14px;
line-height: 1.55;
color: rgba(229,246,255,0.72);
margin: 0;
}
/* Closing CTA inside the Capabilities (dark navy) section */
.dz-tms-next__cta {
position: relative;
max-width: 1180px;
margin: 64px auto 0;
padding-top: 56px;
border-top: 1px solid rgba(255,255,255,0.10);
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
text-align: center;
}
.dz-tms-next__cta-line {
font-size: clamp(20px, 2vw, 28px);
font-weight: 500;
letter-spacing: -0.012em;
line-height: 1.3;
color: rgba(229,246,255,0.92);
margin: 0;
font-style: italic;
max-width: 36ch;
}
.dz-tms-next__cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background: var(--dz-aqua, #4FC8F4);
color: var(--dz-navy, #2B3D4F);
text-decoration: none;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.01em;
border-radius: 999px;
transition: gap .25s ease, transform .25s ease, box-shadow .25s ease, background .25s ease;
box-shadow: 0 0 0 0 rgba(79,200,244,0);
}
.dz-tms-next__cta-btn:hover {
gap: 14px;
transform: translateY(-2px);
background: #FFFFFF;
box-shadow: 0 0 0 6px rgba(79,200,244,0.18), 0 16px 40px -16px rgba(79,200,244,0.45);
}
.dz-tms-next__cta-btn svg { transition: transform .25s ease; }
.dz-tms-next__cta-btn:hover svg { transform: translateX(3px); }
/* ── RESPONSIVE — 1024 / 880 / 640 breakpoints ───────────────────────── */
@media (max-width: 1024px) {
.dz-tms-mon__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dz-tms-perf__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dz-tms-3d__captions { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
.dz-tms-hero__inner {
grid-template-columns: 1fr;
gap: 48px;
}
.dz-tms-hero__col--visual {
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
}
.dz-tms-hero__logo { width: 140px; }
.dz-tms-alerts__grid,
.dz-tms-pilot__cols { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.dz-tms-hero__stats { grid-template-columns: 1fr; gap: 18px; }
.dz-tms-mon__grid,
.dz-tms-next__grid,
.dz-tms-perf__grid { grid-template-columns: 1fr; }
.dz-tms-pilot__list li {
grid-template-columns: 14px 1fr;
grid-template-rows: auto auto;
}
.dz-tms-pilot__state {
grid-column: 2;
text-align: left;
opacity: 0.6;
}
}
/* ═══════════════════════════════════════════════════════════════════════
TWINMAQ PAGE — /twinmaq/
Cinematic 3D web platform for real-estate sales.
Namespace: .dz-tmq-* (distinct from .dz-tms-* and .dz-tmsc-*)
═══════════════════════════════════════════════════════════════════════ */
.dz-tmq {
background: #FFFFFF;
color: var(--dz-text, #2B3D4F);
display: block;
overflow-x: hidden;
}
/* Shared typography for the page */
.dz-tmq-h2 {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(30px, 4vw, 52px);
font-weight: 600;
line-height: 1.06;
letter-spacing: -0.022em;
color: var(--dz-text, #2B3D4F);
/* Margin-bottom raised from 14px → 26px — gives the lead paragraph
enough air below a 30-52px display headline. Layout audit 2026-05-06. */
margin: 0 0 26px;
text-wrap: balance;
}
.dz-tmq-h2--on-dark { color: #FFFFFF; }
.dz-tmq-lead {
font-size: clamp(15px, 1.3vw, 17px);
line-height: 1.6;
color: var(--dz-text, #2B3D4F);
opacity: 0.78;
margin: 0;
max-width: 64ch;
text-wrap: balance;
}
.dz-tmq-lead--on-dark { color: rgba(229,246,255,0.78); opacity: 1; }
/* ─── HERO ─────────────────────────────────────────────────────────── */
.dz-tmq-hero {
position: relative;
/* Light-grey surface, mirrors the TwinMs hero treatment (2026-05-06).
Section is sized to one viewport via 100dvh + 100vh fallback so it
adapts cleanly across screen resolutions despite the body's zoom: 0.8. */
background:
radial-gradient(1100px 600px at 80% 22%, rgba(79,200,244,0.08), transparent 65%),
var(--dz-soft-grey, #F1F1F1);
color: var(--dz-text);
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: flex-start;
padding: clamp(110px, 11vw, 160px) clamp(24px, 5vw, 64px) clamp(60px, 7vw, 100px);
overflow: hidden;
}
.dz-tmq-hero__inner {
width: 100%;
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
@media (max-width: 980px) {
.dz-tmq-hero__inner { grid-template-columns: 1fr; gap: 56px; }
}
.dz-tmq-hero__copy {
display: flex;
flex-direction: column;
gap: 18px;
align-items: flex-start;
opacity: 0;
transform: translateY(20px);
transition: opacity .8s ease, transform .8s ease;
}
.dz-tmq-hero.is-in-view .dz-tmq-hero__copy { opacity: 1; transform: translateY(0); }
.dz-tmq-hero__logo {
width: clamp(140px, 14vw, 180px);
height: auto;
display: block;
margin-bottom: 4px;
/* Glow toned down 2026-05-06 — the bright aqua halo read too hot on the
light-grey hero. Single soft drop-shadow at low opacity is enough to
suggest "live / lit", without bleeding into the surrounding surface. */
filter:
drop-shadow(0 0 8px rgba(79,200,244,0.18));
}
.dz-tmq-hero__title {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(40px, 5.6vw, 76px);
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.028em;
color: var(--dz-text); /* navy on light grey */
margin: 0;
display: block;
}
.dz-tmq-hero__title-lead { display: block; color: var(--dz-text); }
.dz-tmq-hero__title-accent {
display: block;
color: var(--dz-aqua, #4FC8F4);
font-style: italic;
font-weight: 400;
}
.dz-tmq-hero__sub {
font-size: clamp(15px, 1.3vw, 18px);
line-height: 1.55;
color: var(--dz-text-muted, #5A6E81);
margin: 4px 0 0;
max-width: 56ch;
}
.dz-tmq-hero__badge {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 0;
background: transparent;
border: none;
font-size: 13px;
font-style: italic;
font-weight: 400;
color: var(--dz-text-muted, #5A6E81);
letter-spacing: 0.005em;
margin-top: 4px;
}
.dz-tmq-hero__badge-dot {
width: 7px; height: 7px; border-radius: 50%;
background: #4F9E70; /* darker green for sufficient contrast on grey */
box-shadow: 0 0 8px rgba(79,158,112,0.55);
animation: dz-tms-uc-pulse 1.6s ease-in-out infinite;
}
.dz-tmq-hero__badge-kicker {
font-weight: 600;
color: #3F8259; /* on-light green keeps the live-status meaning */
font-style: normal;
}
.dz-tmq-hero__badge-sep { opacity: 0.45; padding: 0 1px; font-style: normal; }
.dz-tmq-hero__badge-name { font-weight: 600; color: var(--dz-text); font-style: normal; }
.dz-tmq-hero__badge-note { color: var(--dz-text-muted, #5A6E81); }
.dz-tmq-hero__stats {
list-style: none;
margin: 18px 0 0;
padding: 18px 0 0;
border-top: 1px solid rgba(43,61,79,0.12); /* on-light hairline */
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
width: 100%;
max-width: 480px;
}
.dz-tmq-hero__stats li {
display: flex; flex-direction: column; gap: 4px;
opacity: 0; transform: translateY(8px);
transition: opacity .7s ease, transform .7s ease;
transition-delay: calc(.3s + var(--tmq-i, 0) * .08s);
}
.dz-tmq-hero.is-in-view .dz-tmq-hero__stats li { opacity: 1; transform: translateY(0); }
.dz-tmq-hero__stat-num {
font-size: clamp(26px, 2.6vw, 34px);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--dz-text);
font-feature-settings: "tnum";
line-height: 1;
}
.dz-tmq-hero__stat-lbl {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--dz-text-muted, #5A6E81);
}
/* Hero media — macOS-style window frame for the demo video */
.dz-tmq-hero__media {
position: relative;
opacity: 0;
transform: translateY(24px);
transition: opacity 1s ease .25s, transform 1s ease .25s;
}
.dz-tmq-hero.is-in-view .dz-tmq-hero__media { opacity: 1; transform: translateY(0); }
.dz-tmq-hero__frame {
position: relative;
background: linear-gradient(180deg, #1A2D3E 0%, #0E1620 100%);
border-radius: 14px;
padding: 12px 12px 0;
box-shadow:
0 30px 80px -30px rgba(0,0,0,0.50),
0 0 0 1px rgba(79,200,244,0.10);
}
.dz-tmq-hero__frame-bar {
display: flex; align-items: center; gap: 6px;
padding: 4px 6px 10px;
}
.dz-tmq-hero__frame-bar span {
width: 10px; height: 10px; border-radius: 50%;
}
.dz-tmq-hero__frame-bar span:nth-child(1) { background: #FF6058; }
.dz-tmq-hero__frame-bar span:nth-child(2) { background: #FFBD2E; }
.dz-tmq-hero__frame-bar span:nth-child(3) { background: #28CA41; }
.dz-tmq-hero__frame video {
display: block;
width: 100%;
height: auto;
border-radius: 8px 8px 0 0;
background: #0E1620;
}
/* ─── JOURNEY ──────────────────────────────────────────────────────── */
.dz-tmq-journey {
background: var(--dz-white, #FFFFFF); /* matches the Production-grade section bg */
/* Section is content-driven: head + 5-step row sit close to the top
of the section, with breathing room from padding alone. The previous
min-height: 100dvh + justify-content: center forced the section to
fill a viewport, which left a tall strip of empty white above the
eyebrow and made the section feel weightless. Layout fix 2026-05-06. */
padding: clamp(72px, 9vw, 110px) clamp(24px, 5vw, 64px);
}
.dz-tmq-journey__head {
max-width: 760px;
margin: 0 auto 48px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.dz-tmq-journey__head .dz-tmq-lead { margin-top: 4px; }
.dz-tmq-journey__steps {
list-style: none;
margin: 0;
padding: 0;
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
}
@media (max-width: 1100px) { .dz-tmq-journey__steps { grid-template-columns: repeat(3, 1fr); gap: 32px 20px; } }
@media (max-width: 700px) { .dz-tmq-journey__steps { grid-template-columns: 1fr; gap: 28px; } }
.dz-tmq-step {
position: relative;
padding: 0 18px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 12px;
opacity: 0;
transform: translateY(16px);
transition: opacity .65s ease, transform .65s ease;
transition-delay: calc(var(--tmq-i, 0) * .12s);
}
.dz-tmq-journey.is-in-view .dz-tmq-step { opacity: 1; transform: translateY(0); }
.dz-tmq-step__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px; height: 64px;
border-radius: 50%;
background: rgba(79,200,244,0.12);
border: 1px solid rgba(79,200,244,0.35);
color: var(--dz-aqua, #4FC8F4);
flex-shrink: 0;
position: relative;
transition: transform .35s cubic-bezier(.2,.65,.25,1), box-shadow .35s ease, border-color .35s ease;
/* Ripple pulse — each icon emits an expanding ring every 5 s, staggered
0.6 s apart so the wave appears to TRAVEL through the journey from
City to Interior. Only fires when the section is in view, so it's
never running off-screen wasting paint cycles. */
animation: dz-tmq-icon-ping 5s cubic-bezier(0.2, 0.7, 0.3, 1) infinite;
animation-delay: calc(var(--tmq-i, 0) * 0.6s);
animation-play-state: paused;
}
.dz-tmq-journey.is-in-view .dz-tmq-step__icon {
animation-play-state: running;
}
.dz-tmq-step:hover .dz-tmq-step__icon {
transform: scale(1.06);
border-color: rgba(79,200,244,0.55);
box-shadow: 0 0 28px rgba(79,200,244,0.22);
animation-play-state: paused;
}
@keyframes dz-tmq-icon-ping {
0%, 80%, 100% {
box-shadow: 0 0 0 0 rgba(79,200,244,0.0);
}
4% {
box-shadow: 0 0 0 4px rgba(79,200,244,0.20);
}
20% {
box-shadow: 0 0 0 18px rgba(79,200,244,0.0);
}
}
@media (prefers-reduced-motion: reduce) {
.dz-tmq-step__icon { animation: none !important; }
}
.dz-tmq-step__icon svg {
width: 32px;
height: 32px;
overflow: visible;
}
.dz-tmq-step__connector {
position: absolute;
top: 32px;
left: 82px;
right: -10px;
height: 1px;
background: linear-gradient(90deg, rgba(79,200,244,0.45), rgba(79,200,244,0.10));
pointer-events: none;
}
.dz-tmq-step:last-child .dz-tmq-step__connector { display: none; }
@media (max-width: 1100px) {
.dz-tmq-step__connector { display: none; }
}
.dz-tmq-step__label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--dz-aqua, #4FC8F4);
margin: 6px 0 0;
}
.dz-tmq-step__desc {
font-size: 14px;
line-height: 1.55;
color: var(--dz-text, #2B3D4F);
opacity: 0.78;
margin: 0;
max-width: 28ch;
}
/* ─── FEATURES — 8-tile grid on aqua wash ─────────────────────────── */
.dz-tmq-features {
background: #F4FAFD;
padding: clamp(72px, 9vw, 110px) clamp(24px, 5vw, 64px);
}
.dz-tmq-features__head {
max-width: 760px;
margin: 0 auto 48px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.dz-tmq-features__grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 980px) { .dz-tmq-features__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .dz-tmq-features__grid { grid-template-columns: 1fr; } }
.dz-tmq-ftile {
position: relative;
background: #FFFFFF;
border: 1px solid rgba(43,61,79,0.08);
border-radius: 12px;
padding: 26px 22px 24px;
display: flex;
flex-direction: column;
gap: 12px;
opacity: 0;
transform: translateY(14px);
transition:
opacity .6s ease,
transform .6s ease,
border-color .3s ease,
box-shadow .3s ease;
transition-delay: calc(var(--tmq-i, 0) * .07s);
}
.dz-tmq-features.is-in-view .dz-tmq-ftile {
opacity: 1; transform: translateY(0);
}
.dz-tmq-ftile:hover {
border-color: rgba(79,200,244,0.50);
box-shadow: 0 16px 40px -16px rgba(43,61,79,0.18);
transform: translateY(-3px);
}
.dz-tmq-ftile__glyph {
width: 48px; height: 48px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: rgba(79,200,244,0.10);
border: 1px solid rgba(79,200,244,0.25);
color: var(--dz-aqua, #4FC8F4);
flex-shrink: 0;
transition: transform .3s ease, box-shadow .3s ease;
}
.dz-tmq-ftile:hover .dz-tmq-ftile__glyph {
transform: scale(1.05);
box-shadow: 0 0 24px rgba(79,200,244,0.20);
}
.dz-tmq-ftile__glyph svg { width: 28px; height: 28px; overflow: visible; }
.dz-tmq-ftile__label {
font-family: 'Outfit', system-ui, sans-serif;
font-size: 16px;
font-weight: 600;
color: var(--dz-text, #2B3D4F);
letter-spacing: -0.005em;
margin: 4px 0 0;
}
.dz-tmq-ftile__text {
font-size: 13.5px;
line-height: 1.52;
color: var(--dz-text, #2B3D4F);
opacity: 0.72;
margin: 0;
}
/* ─── LIVE PROJECT — Aleen (dark navy split) ───────────────────────── */
.dz-tmq-live {
background:
radial-gradient(900px 600px at 80% 18%, rgba(79,200,244,0.12), transparent 65%),
linear-gradient(180deg, var(--dz-navy, #2B3D4F) 0%, var(--dz-navy-deep, #1A2D3E) 100%);
color: #FFFFFF;
padding: clamp(72px, 9vw, 110px) clamp(24px, 5vw, 64px);
}
.dz-tmq-live__inner {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: clamp(40px, 5vw, 64px);
align-items: center;
}
@media (max-width: 980px) {
.dz-tmq-live__inner { grid-template-columns: 1fr; gap: 40px; }
}
.dz-tmq-live__copy {
display: flex; flex-direction: column;
align-items: flex-start;
gap: 16px;
opacity: 0; transform: translateY(20px);
transition: opacity .8s ease, transform .8s ease;
}
.dz-tmq-live.is-in-view .dz-tmq-live__copy { opacity: 1; transform: translateY(0); }
.dz-tmq-live__facts {
margin: 16px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
width: 100%;
border-top: 1px solid rgba(255,255,255,0.10);
}
@media (max-width: 540px) {
.dz-tmq-live__facts { grid-template-columns: 1fr; }
}
.dz-tmq-live__fact {
display: grid;
grid-template-columns: 110px 1fr;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid rgba(255,255,255,0.10);
align-items: baseline;
opacity: 0; transform: translateY(8px);
transition: opacity .55s ease, transform .55s ease;
transition-delay: calc(.2s + var(--tmq-i, 0) * .04s);
}
.dz-tmq-live.is-in-view .dz-tmq-live__fact { opacity: 1; transform: translateY(0); }
.dz-tmq-live__fact dt {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
color: rgba(229,246,255,0.50);
margin: 0;
}
.dz-tmq-live__fact dd {
font-size: 14.5px;
font-weight: 500;
color: #FFFFFF;
margin: 0;
font-feature-settings: "tnum";
}
.dz-tmq-live__media {
margin: 0;
position: relative;
border-radius: 14px;
overflow: hidden;
background: #0E1620;
box-shadow:
0 30px 80px -30px rgba(0,0,0,0.55),
0 0 0 1px rgba(255,255,255,0.06);
opacity: 0;
transform: translateY(20px);
transition: opacity 1s ease .2s, transform 1s ease .2s;
}
.dz-tmq-live.is-in-view .dz-tmq-live__media { opacity: 1; transform: translateY(0); }
.dz-tmq-live__media img {
display: block;
width: 100%;
height: auto;
}
/* ─── CAPABILITIES — closing section ───────────────────────────────── */
.dz-tmq-cap {
background: var(--dz-white, #FFFFFF); /* was #FAFAFA — invented one-off, now brand token */
padding: clamp(72px, 9vw, 110px) clamp(24px, 5vw, 64px) clamp(80px, 9vw, 120px);
}
.dz-tmq-cap__head {
max-width: 760px;
margin: 0 auto 48px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* Restructured 2026-05-06 from a 2x2 identical-card grid (banned per
PRODUCT.md anti-references) to an asymmetric duo: one dark navy
featured card on the left, three text-only minis on the right. The
navy fill gives the featured card real weight against the white
section bg, fixing the pale-on-pale contrast issue. */
.dz-tmq-cap__grid {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: clamp(24px, 3vw, 48px);
align-items: stretch;
}
@media (max-width: 900px) {
.dz-tmq-cap__grid { grid-template-columns: 1fr; gap: 32px; }
}
/* Featured — the lead-story card (Web platform). Image-led magazine
composition: the actual TwinMaq UI shot fills the card, with a strong
navy fade from the bottom so the kicker / label / text sit on a
readable dark surface. The screenshot is the proof; the text is the
caption. Per PRODUCT.md "Real assets win". */
.dz-tmq-cap__featured {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
background:
/* (1) bottom navy fade for text legibility — top layer */
linear-gradient(
0deg,
var(--dz-navy-deep, #1A2D3E) 0%,
rgba(26,45,62,0.85) 28%,
rgba(26,45,62,0.45) 55%,
rgba(26,45,62,0.05) 80%,
rgba(26,45,62,0) 100%
),
/* (2) the platform UI screenshot — base layer */
url('/assets/products/twinmaq-platform-shot.jpg?v=2026-05-06map') center top / cover no-repeat,
/* (3) navy-deep fallback if the image fails to load */
var(--dz-navy-deep, #1A2D3E);
border-radius: 20px;
padding: clamp(28px, 3vw, 44px);
color: var(--dz-white, #FFFFFF);
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: 360px; /* safety floor; aspect-ratio 16/10 drives main height */
opacity: 0;
transform: translateY(14px);
transition: opacity .7s ease, transform .7s ease, box-shadow .35s ease;
}
.dz-tmq-cap.is-in-view .dz-tmq-cap__featured {
opacity: 1; transform: translateY(0);
}
.dz-tmq-cap__featured:hover {
box-shadow:
0 0 0 1px rgba(79,200,244,0.30),
0 24px 60px -20px rgba(26,45,62,0.45);
}
.dz-tmq-cap__featured-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
color: #A8DBBF; /* lighter green for contrast on navy */
margin-bottom: 16px;
position: relative;
z-index: 1;
}
.dz-tmq-cap__featured-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #8FCBA9;
box-shadow: 0 0 10px rgba(143,203,169,0.7);
animation: dz-tms-uc-pulse 1.6s ease-in-out infinite;
flex-shrink: 0;
}
.dz-tmq-cap__featured-label {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(28px, 3vw, 40px);
font-weight: 600;
color: var(--dz-white, #FFFFFF);
letter-spacing: -0.022em;
line-height: 1.04;
margin: 0 0 16px;
position: relative;
z-index: 1;
text-wrap: balance;
}
.dz-tmq-cap__featured-text {
font-size: 16px;
line-height: 1.55;
color: rgba(255,255,255,0.82);
margin: 0;
max-width: 38ch;
position: relative;
z-index: 1;
}
/* Minis — text-only column with hairline separators */
.dz-tmq-cap__minis {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.dz-tmq-cap__mini {
padding: 24px 0;
border-bottom: 1px solid rgba(43,61,79,0.12);
opacity: 0;
transform: translateX(10px);
transition: opacity .6s ease, transform .6s ease;
transition-delay: calc(0.15s + var(--tmq-i, 0) * 0.08s);
}
.dz-tmq-cap.is-in-view .dz-tmq-cap__mini {
opacity: 1;
transform: translateX(0);
}
.dz-tmq-cap__mini:first-child { padding-top: 0; }
.dz-tmq-cap__mini:last-child { padding-bottom: 0; border-bottom: 0; }
.dz-tmq-cap__mini-kicker {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--dz-aqua, #4FC8F4);
margin-bottom: 8px;
}
.dz-tmq-cap__mini-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #4F9E70;
box-shadow: 0 0 6px rgba(79,158,112,0.55);
flex-shrink: 0;
}
.dz-tmq-cap__mini-label {
font-family: 'Outfit', system-ui, sans-serif;
font-size: 19px;
font-weight: 600;
color: var(--dz-text, #2B3D4F);
letter-spacing: -0.01em;
line-height: 1.2;
margin: 0 0 8px;
}
.dz-tmq-cap__mini-text {
font-size: 14px;
line-height: 1.55;
color: var(--dz-text, #2B3D4F);
opacity: 0.74;
margin: 0;
}
/* Closing CTA inside Capabilities */
.dz-tmq-cap__cta {
max-width: 1180px;
margin: 56px auto 0;
padding-top: 48px;
border-top: 1px solid rgba(43,61,79,0.10);
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
text-align: center;
}
.dz-tmq-cap__cta-line {
font-size: clamp(20px, 2vw, 28px);
font-weight: 500;
letter-spacing: -0.012em;
line-height: 1.3;
color: var(--dz-navy, #2B3D4F);
margin: 0;
font-style: italic;
max-width: 36ch;
}
.dz-tmq-cap__cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background: var(--dz-navy, #2B3D4F);
color: #FFFFFF;
text-decoration: none;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.01em;
border-radius: 999px;
transition: gap .25s ease, transform .25s ease, box-shadow .25s ease, background .25s ease;
box-shadow: 0 8px 24px -8px rgba(43,61,79,0.40);
}
.dz-tmq-cap__cta-btn:hover {
gap: 14px;
background: var(--dz-navy-deep, #1A2D3E);
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px rgba(43,61,79,0.55);
}
.dz-tmq-cap__cta-btn svg { transition: transform .25s ease; }
.dz-tmq-cap__cta-btn:hover svg { transform: translateX(3px); }
/* Missing-data fallback */
.dz-tmq-missing { padding: 120px 6vw; max-width: 800px; margin: 0 auto; text-align: center; }
/* ─── SOLUTIONS PAGE — closing CTA (replaces CtaStrip) ──────────────── */
.dz-sol-closing {
background: #FFFFFF;
padding: clamp(64px, 8vw, 96px) clamp(24px, 5vw, 64px) clamp(80px, 9vw, 110px);
text-align: center;
border-top: 1px solid rgba(43,61,79,0.06);
}
.dz-sol-closing__inner {
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
}
.dz-sol-closing__line {
font-size: clamp(20px, 2vw, 28px);
font-weight: 500;
letter-spacing: -0.012em;
line-height: 1.3;
color: var(--dz-navy, #2B3D4F);
margin: 0;
font-style: italic;
max-width: 36ch;
}
.dz-sol-closing__btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background: var(--dz-navy, #2B3D4F);
color: #FFFFFF;
text-decoration: none;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.01em;
border-radius: 999px;
transition: gap .25s ease, transform .25s ease, box-shadow .25s ease, background .25s ease;
box-shadow: 0 8px 24px -8px rgba(43,61,79,0.40);
}
.dz-sol-closing__btn:hover {
gap: 14px;
background: var(--dz-navy-deep, #1A2D3E);
transform: translateY(-2px);
box-shadow: 0 12px 32px -10px rgba(43,61,79,0.55);
}
.dz-sol-closing__btn svg { transition: transform .25s ease; }
.dz-sol-closing__btn:hover svg { transform: translateX(3px); }
/* ═══════════════════════════════════════════════════════════════════════
AI PAGE — /ai/ (Agentic operations)
Story-led: Hero (light) -> Proof (navy-deep) -> Audiences (aqua-wash)
-> Engagement (navy) -> Footer (navy)
Namespace: .dz-ai-*
═══════════════════════════════════════════════════════════════════════ */
.dz-ai {
background: var(--dz-white, #FFFFFF);
color: var(--dz-text, #2B3D4F);
display: block;
overflow-x: hidden;
}
/* Shared typography */
.dz-ai-h2 {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(30px, 4vw, 52px);
font-weight: 600;
line-height: 1.06;
letter-spacing: -0.022em;
color: var(--dz-text, #2B3D4F);
margin: 0 0 14px;
text-wrap: balance;
}
.dz-ai-h2--on-dark { color: #FFFFFF; }
.dz-ai-lead {
font-size: clamp(15px, 1.3vw, 17px);
line-height: 1.6;
color: var(--dz-text, #2B3D4F);
opacity: 0.78;
margin: 0;
max-width: 64ch;
text-wrap: balance;
}
.dz-ai-lead--on-dark { color: rgba(229,246,255,0.78); opacity: 1; }
/* ─── HERO (light, with orbital constellation visual) ───────────────── */
.dz-ai-hero {
position: relative;
background:
radial-gradient(800px 480px at 88% 22%, rgba(79,200,244,0.10), transparent 65%),
var(--dz-white, #FFFFFF);
padding: clamp(110px, 10vw, 140px) clamp(24px, 5vw, 64px) clamp(72px, 9vw, 110px);
overflow: hidden;
}
.dz-ai-hero__inner {
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
@media (max-width: 980px) {
.dz-ai-hero__inner { grid-template-columns: 1fr; gap: 40px; }
}
.dz-ai-hero__copy {
display: flex;
flex-direction: column;
gap: 18px;
align-items: flex-start;
opacity: 0;
transform: translateY(20px);
transition: opacity .8s ease, transform .8s ease;
}
.dz-ai-hero.is-in-view .dz-ai-hero__copy { opacity: 1; transform: translateY(0); }
.dz-ai-hero__title {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(40px, 5.6vw, 76px);
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.028em;
color: var(--dz-navy, #2B3D4F);
margin: 0;
display: block;
}
.dz-ai-hero__title-lead { display: block; }
.dz-ai-hero__title-accent {
display: block;
font-style: italic;
font-weight: 400;
font-size: clamp(28px, 3.6vw, 44px);
line-height: 1.1;
color: var(--dz-aqua, #4FC8F4);
letter-spacing: -0.018em;
margin-top: 6px;
}
.dz-ai-hero__sub {
font-size: clamp(15px, 1.3vw, 18px);
line-height: 1.6;
color: var(--dz-text, #2B3D4F);
opacity: 0.78;
margin: 4px 0 0;
max-width: 56ch;
}
.dz-ai-hero__stats {
list-style: none;
margin: 16px 0 0;
padding: 16px 0 0;
border-top: 1px solid rgba(43,61,79,0.12);
display: flex;
flex-wrap: wrap;
gap: 0;
width: 100%;
max-width: 540px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
color: rgba(43,61,79,0.62);
}
.dz-ai-hero__stats li {
position: relative;
padding: 0 14px;
opacity: 0;
transform: translateY(8px);
transition: opacity .7s ease, transform .7s ease;
transition-delay: calc(.3s + var(--ai-i, 0) * .08s);
}
.dz-ai-hero.is-in-view .dz-ai-hero__stats li { opacity: 1; transform: translateY(0); }
.dz-ai-hero__stats li:first-child { padding-left: 0; }
.dz-ai-hero__stats li:not(:last-child)::after {
content: "";
position: absolute;
right: 0; top: 4px; bottom: 4px;
width: 1px;
background: rgba(43,61,79,0.18);
}
/* Hero visual — orbital constellation centered */
.dz-ai-hero__visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(20px) scale(0.96);
transition: opacity 1s ease .25s, transform 1s ease .25s;
}
.dz-ai-hero.is-in-view .dz-ai-hero__visual { opacity: 1; transform: translateY(0) scale(1); }
/* Workflow River — animated horizontal pipeline with live ticker */
.dz-ai-river {
width: 100%;
max-width: 580px;
background:
radial-gradient(circle at 50% 0%, rgba(79,200,244,0.10), transparent 60%),
linear-gradient(180deg, var(--dz-navy, #2B3D4F) 0%, var(--dz-navy-deep, #1A2D3E) 100%);
border-radius: 14px;
padding: 22px 22px 26px;
box-shadow:
0 30px 80px -30px rgba(0,0,0,0.45),
0 0 0 1px rgba(79,200,244,0.10);
position: relative;
overflow: hidden;
color: rgba(229,246,255,0.85);
}
.dz-ai-river__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 22px;
padding-bottom: 14px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.dz-ai-river__title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(229,246,255,0.65);
}
.dz-ai-river__title strong {
color: #FFFFFF;
letter-spacing: 0.18em;
}
.dz-ai-river__counter {
display: inline-flex;
align-items: baseline;
gap: 6px;
}
.dz-ai-river__counter-num {
font-size: 22px;
font-weight: 700;
color: var(--dz-aqua, #4FC8F4);
font-feature-settings: "tnum";
letter-spacing: -0.02em;
line-height: 1;
}
.dz-ai-river__counter-lbl {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.20em;
color: rgba(229,246,255,0.55);
text-transform: uppercase;
}
.dz-ai-river__stations {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
margin: 28px 0 32px;
}
.dz-ai-river__station {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.dz-ai-river__circle {
width: 64px; height: 64px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(79,200,244,0.10);
border: 1.5px solid rgba(79,200,244,0.40);
color: var(--dz-aqua, #4FC8F4);
font-weight: 700;
font-size: 16px;
letter-spacing: 0.10em;
font-family: 'Outfit', system-ui, sans-serif;
transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}
.dz-ai-river__station.is-active .dz-ai-river__circle {
transform: scale(1.10);
background: rgba(79,200,244,0.22);
box-shadow: 0 0 26px rgba(79,200,244,0.55);
}
.dz-ai-river__station-name {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
color: rgba(229,246,255,0.85);
}
.dz-ai-river__station-sub {
font-size: 10px;
letter-spacing: 0.04em;
color: rgba(229,246,255,0.50);
font-style: italic;
}
.dz-ai-river__rail {
position: absolute;
top: 32px; left: 0; right: 0;
height: 1px;
background: rgba(79,200,244,0.20);
pointer-events: none;
z-index: 1;
}
.dz-ai-river__rail-glow {
position: absolute;
top: 31px; left: 0;
height: 3px;
width: 100%;
background: linear-gradient(90deg, transparent, rgba(79,200,244,0.50), transparent);
background-size: 30% 100%;
background-repeat: no-repeat;
pointer-events: none;
animation: dz-ai-river-rail-glow 5s linear infinite;
}
@keyframes dz-ai-river-rail-glow {
from { background-position: -30% 0; }
to { background-position: 130% 0; }
}
.dz-ai-river__particles {
position: absolute;
top: 24px; left: 0; right: 0; height: 16px;
pointer-events: none;
z-index: 2;
}
.dz-ai-river__particle {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 8px; height: 8px;
border-radius: 50%;
background: var(--dz-aqua, #4FC8F4);
box-shadow: 0 0 10px rgba(79,200,244,0.65);
animation: dz-ai-river-particle 6s linear infinite;
}
@keyframes dz-ai-river-particle {
0% { left: 0%; opacity: 0; }
8% { opacity: 1; }
92% { opacity: 1; }
100% { left: 100%; opacity: 0; }
}
.dz-ai-river__list {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,0.08);
}
.dz-ai-river__list-head {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(229,246,255,0.45);
margin-bottom: 10px;
}
.dz-ai-river__list-items {
display: flex;
flex-direction: column;
gap: 6px;
max-height: 130px;
overflow: hidden;
}
.dz-ai-river__item {
display: grid;
grid-template-columns: 38px 1fr auto;
gap: 10px;
align-items: baseline;
font-size: 12px;
line-height: 1.4;
padding: 6px 0;
color: rgba(229,246,255,0.78);
opacity: 0;
animation: dz-ai-river-item-in .55s cubic-bezier(.2,.65,.25,1) forwards;
}
@keyframes dz-ai-river-item-in {
from { opacity: 0; transform: translateX(8px); }
to { opacity: 1; transform: translateX(0); }
}
.dz-ai-river__item-pill {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 2px 7px;
border-radius: 999px;
background: rgba(79,200,244,0.12);
color: var(--dz-aqua, #4FC8F4);
border: 1px solid rgba(79,200,244,0.30);
text-align: center;
font-feature-settings: "tnum";
}
.dz-ai-river__item-text {
color: rgba(229,246,255,0.92);
font-weight: 500;
}
.dz-ai-river__item-time {
font-size: 10.5px;
color: rgba(229,246,255,0.40);
font-variant-numeric: tabular-nums;
}
/* ─── JOURNEY (light, sine-wave road, between hero and proof) ──────── */
.dz-aij {
position: relative;
padding: clamp(48px, 7vw, 80px) 4vw 72px;
background:
radial-gradient(circle at 1px 1px, rgba(53,86,120,0.06) 1px, transparent 1px) 0 0 / 28px 28px,
linear-gradient(180deg, #FAFCFD 0%, #FFFFFF 50%, #FAFCFD 100%);
overflow: hidden;
border-top: 1px solid rgba(53,86,120,0.06);
border-bottom: 1px solid rgba(53,86,120,0.06);
}
.dz-aij > * { position: relative; z-index: 1; }
.dz-aij__head {
text-align: center;
margin: 0 auto 32px;
max-width: 820px;
}
.dz-aij__title {
font-size: clamp(22px, 3.4vw, 34px);
line-height: 1.1;
font-weight: 700;
color: #355678;
margin: 12px 0 0;
letter-spacing: -0.025em;
}
.dz-aij__title em {
color: #4FC8F4;
font-style: normal;
font-weight: 700;
}
/* Road system */
.dz-aij__road {
position: relative;
width: 100%;
max-width: 1180px;
margin: 0 auto;
height: 460px;
overflow: visible;
}
.dz-aij__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
/* Feather the left/right edges so the road fades into the canvas
instead of being cut off with a hard line. */
-webkit-mask-image: linear-gradient(
to right,
transparent 0%,
#000 7%,
#000 93%,
transparent 100%
);
mask-image: linear-gradient(
to right,
transparent 0%,
#000 7%,
#000 93%,
transparent 100%
);
}
/* Road draw animation — only on .is-in-view */
.dz-aij__road-shadow { opacity: 0; }
.dz-aij__road-path { stroke-dasharray: 1900; stroke-dashoffset: 1900; }
.dz-aij__road-highlight { stroke-dasharray: 1900; stroke-dashoffset: 1900; }
.dz-aij__road-line { stroke-dashoffset: 1900; opacity: 0; }
.dz-aij__particle { opacity: 0; }
.dz-aij.is-in-view .dz-aij__road-shadow { animation: dz-aij-fadein 0.7s 0.2s forwards; }
.dz-aij.is-in-view .dz-aij__road-path { animation: dz-aij-draw 1.6s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
.dz-aij.is-in-view .dz-aij__road-highlight { animation: dz-aij-draw 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards; }
.dz-aij.is-in-view .dz-aij__road-line { animation: dz-aij-draw-dashed 1.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s forwards; }
.dz-aij.is-in-view .dz-aij__particle { animation: dz-aij-fadein 0.5s 1.6s forwards; }
@keyframes dz-aij-draw { to { stroke-dashoffset: 0; } }
@keyframes dz-aij-fadein { to { opacity: 1; } }
@keyframes dz-aij-draw-dashed {
0% { opacity: 0; stroke-dashoffset: 1900; }
20% { opacity: 0.85; }
100% { opacity: 0.85; stroke-dashoffset: 0; }
}
/* Steps — absolute positioned on the road on desktop */
.dz-aij__step {
position: absolute;
left: var(--aij-x, 50%);
top: 0;
width: 0;
height: 0;
}
/* Badge: circle + triangle anchor */
.dz-aij__badge {
position: absolute;
top: 124px;
left: 0;
width: 70px;
height: 88px;
transform: translate(-50%, -50%) scale(0.4);
z-index: 3;
opacity: 0;
}
.dz-aij__badge--down {
top: 321px;
transform: translate(-50%, -50%) rotate(180deg) scale(0.4);
}
.dz-aij__badge-svg {
width: 100%;
height: 100%;
overflow: visible;
filter: drop-shadow(0 6px 14px rgba(53,86,120,0.20));
}
/* Halo pulse — runs once badge is visible */
.dz-aij__halo {
transform-origin: 35px 35px;
}
.dz-aij.is-in-view .dz-aij__halo {
animation: dz-aij-halo-pulse 3.4s ease-in-out infinite;
animation-delay: 4s;
}
@keyframes dz-aij-halo-pulse {
0%, 100% { opacity: 0.35; transform: scale(1); }
50% { opacity: 0.85; transform: scale(1.16); }
}
/* Sequential badge reveal */
.dz-aij.is-in-view .dz-aij__step--1 .dz-aij__badge { animation: dz-aij-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.6s forwards; }
.dz-aij.is-in-view .dz-aij__step--2 .dz-aij__badge { animation: dz-aij-pop-flip 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.95s forwards; }
.dz-aij.is-in-view .dz-aij__step--3 .dz-aij__badge { animation: dz-aij-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2.3s forwards; }
.dz-aij.is-in-view .dz-aij__step--4 .dz-aij__badge { animation: dz-aij-pop-flip 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2.65s forwards; }
.dz-aij.is-in-view .dz-aij__step--5 .dz-aij__badge { animation: dz-aij-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 3.0s forwards; }
.dz-aij.is-in-view .dz-aij__step--6 .dz-aij__badge { animation: dz-aij-pop-flip 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 3.35s forwards; }
@keyframes dz-aij-pop {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes dz-aij-pop-flip {
0% { opacity: 0; transform: translate(-50%, -50%) rotate(180deg) scale(0.3); }
100% { opacity: 1; transform: translate(-50%, -50%) rotate(180deg) scale(1); }
}
/* Description blocks — absolute positioned, alternating top/bottom */
.dz-aij__desc {
position: absolute;
left: 0;
width: 168px;
transform: translateX(-50%) translateY(8px);
z-index: 1;
opacity: 0;
text-align: center;
}
.dz-aij__step--1 .dz-aij__desc,
.dz-aij__step--3 .dz-aij__desc,
.dz-aij__step--5 .dz-aij__desc { top: -16px; }
.dz-aij__step--2 .dz-aij__desc,
.dz-aij__step--4 .dz-aij__desc,
.dz-aij__step--6 .dz-aij__desc { top: 396px; }
.dz-aij.is-in-view .dz-aij__step--1 .dz-aij__desc { animation: dz-aij-slide-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.75s forwards; }
.dz-aij.is-in-view .dz-aij__step--2 .dz-aij__desc { animation: dz-aij-slide-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 2.1s forwards; }
.dz-aij.is-in-view .dz-aij__step--3 .dz-aij__desc { animation: dz-aij-slide-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 2.45s forwards; }
.dz-aij.is-in-view .dz-aij__step--4 .dz-aij__desc { animation: dz-aij-slide-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 2.8s forwards; }
.dz-aij.is-in-view .dz-aij__step--5 .dz-aij__desc { animation: dz-aij-slide-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 3.15s forwards; }
.dz-aij.is-in-view .dz-aij__step--6 .dz-aij__desc { animation: dz-aij-slide-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) 3.5s forwards; }
@keyframes dz-aij-slide-in {
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.dz-aij__kicker {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 8.5px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: 6px;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid #4FC8F4;
background: rgba(255,255,255,0.7);
color: #4FC8F4;
}
.dz-aij__kicker::before {
content: "";
width: 3.5px; height: 3.5px;
background: #4FC8F4;
border-radius: 50%;
}
.dz-aij__name {
font-size: 14px;
font-weight: 700;
color: #355678;
margin: 0 0 4px;
line-height: 1.16;
letter-spacing: -0.012em;
}
.dz-aij__text {
font-size: 11px;
color: #5C7A92;
line-height: 1.42;
margin: 0;
}
/* Hover lift on each step's badge */
.dz-aij__step:hover .dz-aij__badge {
transform: translate(-50%, -50%) scale(1.10);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dz-aij__step:hover .dz-aij__badge--down {
transform: translate(-50%, -50%) rotate(180deg) scale(1.10);
}
/* Reduced motion: disable animations, show all steps statically */
@media (prefers-reduced-motion: reduce) {
.dz-aij .dz-aij__road-shadow,
.dz-aij .dz-aij__road-path,
.dz-aij .dz-aij__road-highlight,
.dz-aij .dz-aij__road-line,
.dz-aij .dz-aij__particle,
.dz-aij .dz-aij__halo,
.dz-aij .dz-aij__badge,
.dz-aij .dz-aij__desc {
animation: none !important;
opacity: 1 !important;
stroke-dashoffset: 0 !important;
}
.dz-aij .dz-aij__badge { transform: translate(-50%, -50%) scale(1); }
.dz-aij .dz-aij__badge--down { transform: translate(-50%, -50%) rotate(180deg) scale(1); }
.dz-aij .dz-aij__desc { transform: translateX(-50%); }
}
/* MOBILE — vertical timeline (≤ 900px to catch tablets too) */
@media (max-width: 900px) {
.dz-aij {
padding: 48px 5vw 56px;
}
.dz-aij__head {
margin-bottom: 28px;
}
/* Hide the road SVG; build a vertical spine instead */
.dz-aij__svg { display: none; }
.dz-aij__road {
height: auto;
overflow: visible;
padding-left: 60px;
max-width: 600px;
}
.dz-aij__road::before {
content: "";
position: absolute;
left: 27px;
top: 18px;
bottom: 18px;
width: 2px;
/* Solid aqua at consistent opacity beats the previous aqua→navy
gradient — the gradient's mid-tone read as "fading out". */
background: #4FC8F4;
opacity: 0.55;
z-index: 0;
}
/* Each step is a row */
.dz-aij__step {
position: relative !important;
left: 0 !important;
top: auto !important;
width: 100%;
height: auto;
margin-bottom: 24px;
min-height: 56px;
opacity: 0;
transform: translateY(12px);
transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.dz-aij__step:last-child { margin-bottom: 0; }
.dz-aij.is-in-view .dz-aij__step { opacity: 1; transform: translateY(0); }
.dz-aij.is-in-view .dz-aij__step--1 { transition-delay: 0.05s; }
.dz-aij.is-in-view .dz-aij__step--2 { transition-delay: 0.15s; }
.dz-aij.is-in-view .dz-aij__step--3 { transition-delay: 0.25s; }
.dz-aij.is-in-view .dz-aij__step--4 { transition-delay: 0.35s; }
.dz-aij.is-in-view .dz-aij__step--5 { transition-delay: 0.45s; }
.dz-aij.is-in-view .dz-aij__step--6 { transition-delay: 0.55s; }
/* Badge: small circle on the spine, triangle hidden */
.dz-aij__badge,
.dz-aij__badge--down {
position: absolute !important;
top: 0 !important;
left: -36px !important;
width: 50px !important;
height: 56px !important;
transform: translate(0, 0) !important;
opacity: 1 !important;
animation: none !important;
z-index: 2;
}
.dz-aij__badge--down {
transform: translate(0, 0) rotate(0deg) !important;
}
/* Hide triangle anchor on mobile (no road to anchor to) */
.dz-aij__badge-svg path[d^="M 27 60"] { display: none; }
/* Description: flow naturally below the badge baseline */
.dz-aij__desc {
position: relative !important;
top: auto !important;
left: auto !important;
width: 100% !important;
transform: none !important;
opacity: 1 !important;
animation: none !important;
text-align: left !important;
padding-top: 4px;
}
.dz-aij__kicker {
/* Tighter on mobile — the kicker should signal "Step N" without
competing visually with the icon badge next to it. */
margin-bottom: 4px;
font-size: 8px;
padding: 1px 7px;
letter-spacing: 0.18em;
gap: 4px;
/* Pull the kicker slightly tighter to the badge */
margin-left: -2px;
}
.dz-aij__kicker::before {
width: 3px;
height: 3px;
}
.dz-aij__name {
font-size: 15px;
margin-bottom: 4px;
}
.dz-aij__text {
font-size: 12px;
line-height: 1.5;
}
}
@media (max-width: 480px) {
.dz-aij { padding: 40px 5vw 48px; }
.dz-aij__title { font-size: 22px; }
.dz-aij__road { padding-left: 52px; }
.dz-aij__road::before { left: 23px; }
.dz-aij__badge,
.dz-aij__badge--down { width: 44px !important; height: 50px !important; left: -32px !important; }
}
/* ─── PROOF (dark navy bento) ──────────────────────────────────────── */
.dz-ai-proof {
background:
radial-gradient(1000px 600px at 18% 12%, rgba(79,200,244,0.10), transparent 65%),
radial-gradient(800px 500px at 88% 88%, rgba(79,200,244,0.06), transparent 65%),
linear-gradient(180deg, var(--dz-navy, #2B3D4F) 0%, var(--dz-navy-deep, #1A2D3E) 100%);
color: #FFFFFF;
padding: clamp(72px, 9vw, 110px) clamp(24px, 5vw, 64px);
overflow: hidden;
}
.dz-ai-proof__head {
max-width: 760px;
margin: 0 auto 48px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.dz-ai-proof__grid {
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 980px) { .dz-ai-proof__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .dz-ai-proof__grid { grid-template-columns: 1fr; } }
.dz-ai-mcard {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 26px 22px 22px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px;
overflow: hidden;
opacity: 0;
transform: translateY(14px);
transition:
opacity .6s ease,
transform .6s ease,
border-color .35s ease,
background .35s ease;
transition-delay: calc(var(--ai-i, 0) * .07s);
}
.dz-ai-proof.is-in-view .dz-ai-mcard { opacity: 1; transform: translateY(0); }
.dz-ai-mcard:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(79,200,244,0.45);
transform: translateY(-3px);
}
.dz-ai-mcard::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%;
height: 2px;
background: var(--dz-aqua, #4FC8F4);
transform: scaleX(0);
transform-origin: left center;
transition: transform .4s cubic-bezier(.2,.65,.25,1);
}
.dz-ai-mcard:hover::before { transform: scaleX(1); }
.dz-ai-mcard__num {
font-size: clamp(32px, 3.6vw, 48px);
font-weight: 700;
letter-spacing: -0.028em;
line-height: 1;
color: var(--dz-aqua, #4FC8F4);
font-feature-settings: "tnum";
margin-bottom: 14px;
white-space: nowrap;
}
.dz-ai-mcard__label {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #FFFFFF;
margin-bottom: 4px;
}
.dz-ai-mcard__sub {
font-size: 12.5px;
line-height: 1.5;
color: rgba(229,246,255,0.62);
font-style: italic;
}
/* ─── AUDIENCES (aqua-wash with navy-glass cards) ──────────────────── */
.dz-ai-aud {
background: var(--dz-aqua-wash, #E8F5FB);
padding: clamp(72px, 9vw, 110px) clamp(24px, 5vw, 64px);
}
.dz-ai-aud__head {
max-width: 760px;
margin: 0 auto 48px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.dz-ai-aud__grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
@media (max-width: 800px) { .dz-ai-aud__grid { grid-template-columns: 1fr; } }
.dz-ai-acard {
position: relative;
background: var(--dz-navy, #2B3D4F);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 14px;
padding: 36px 36px 32px;
overflow: hidden;
color: #FFFFFF;
opacity: 0;
transform: translateY(16px);
transition:
opacity .65s ease,
transform .65s ease,
background .3s ease,
border-color .3s ease,
box-shadow .3s ease;
transition-delay: calc(var(--ai-i, 0) * .09s);
}
.dz-ai-aud.is-in-view .dz-ai-acard { opacity: 1; transform: translateY(0); }
.dz-ai-acard:hover {
background: var(--dz-navy-deep, #1A2D3E);
border-color: rgba(79,200,244,0.45);
transform: translateY(-4px);
box-shadow: 0 24px 60px -24px rgba(43,61,79,0.40);
}
/* Ghost mark in the corner — large faint aqua letter */
.dz-ai-acard__mark {
position: absolute;
top: -0.2em;
right: -0.04em;
font-size: clamp(180px, 20vw, 240px);
font-weight: 700;
letter-spacing: -0.05em;
line-height: 0.85;
color: var(--dz-aqua, #4FC8F4);
opacity: 0.10;
pointer-events: none;
user-select: none;
transition: opacity .35s ease, transform .35s ease;
}
.dz-ai-acard:hover .dz-ai-acard__mark { opacity: 0.18; transform: scale(1.02); }
.dz-ai-acard__body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
.dz-ai-acard__name {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 600;
letter-spacing: -0.018em;
line-height: 1.15;
color: #FFFFFF;
margin: 0;
}
.dz-ai-acard__tag {
font-size: 13.5px;
font-style: italic;
font-weight: 400;
letter-spacing: 0.005em;
color: var(--dz-aqua, #4FC8F4);
margin: 0;
}
.dz-ai-acard__list {
list-style: none;
margin: 4px 0 8px;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.dz-ai-acard__list li {
position: relative;
padding-left: 18px;
font-size: 13.5px;
line-height: 1.55;
color: rgba(229,246,255,0.82);
}
.dz-ai-acard__list li::before {
content: "";
position: absolute;
left: 0; top: 9px;
width: 8px; height: 1px;
background: var(--dz-aqua, #4FC8F4);
opacity: 0.7;
}
.dz-ai-acard__outcome {
font-size: 13.5px;
font-style: italic;
font-weight: 500;
line-height: 1.45;
color: rgba(229,246,255,0.92);
margin: 8px 0 0;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.10);
}
/* ─── ENGAGEMENT (dark navy with closing CTA) ──────────────────────── */
.dz-ai-eng {
background:
radial-gradient(900px 600px at 80% 20%, rgba(79,200,244,0.10), transparent 65%),
linear-gradient(180deg, var(--dz-navy, #2B3D4F) 0%, var(--dz-navy-deep, #1A2D3E) 100%);
color: #FFFFFF;
padding: clamp(72px, 9vw, 110px) clamp(24px, 5vw, 64px) clamp(80px, 9vw, 120px);
overflow: hidden;
}
.dz-ai-eng__head {
max-width: 760px;
margin: 0 auto 48px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.dz-ai-eng__grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 980px) { .dz-ai-eng__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .dz-ai-eng__grid { grid-template-columns: 1fr; } }
.dz-ai-tcard {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
padding: 28px 24px 24px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px;
overflow: hidden;
opacity: 0;
transform: translateY(14px);
transition:
opacity .6s ease,
transform .6s ease,
border-color .3s ease,
background .3s ease;
transition-delay: calc(var(--ai-i, 0) * .09s);
}
.dz-ai-eng.is-in-view .dz-ai-tcard { opacity: 1; transform: translateY(0); }
.dz-ai-tcard:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(79,200,244,0.45);
transform: translateY(-3px);
}
.dz-ai-tcard::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--dz-aqua, #4FC8F4) 0%, rgba(79,200,244,0.4) 100%);
transform: scaleY(0);
transform-origin: top center;
transition: transform .35s cubic-bezier(.2,.65,.25,1);
}
.dz-ai-tcard:hover::before { transform: scaleY(1); }
.dz-ai-tcard__glyph {
width: 56px; height: 56px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: rgba(79,200,244,0.10);
border: 1px solid rgba(79,200,244,0.25);
color: var(--dz-aqua, #4FC8F4);
flex-shrink: 0;
transition: transform .3s ease, box-shadow .3s ease;
}
.dz-ai-tcard__glyph svg { width: 32px; height: 32px; overflow: visible; }
.dz-ai-tcard:hover .dz-ai-tcard__glyph {
transform: scale(1.05);
box-shadow: 0 0 24px rgba(79,200,244,0.20);
}
.dz-ai-tcard__tag {
display: inline-block;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--dz-aqua, #4FC8F4);
font-feature-settings: "tnum";
padding: 4px 10px;
background: rgba(79,200,244,0.10);
border-radius: 999px;
width: max-content;
}
.dz-ai-tcard__label {
font-family: 'Outfit', system-ui, sans-serif;
font-size: 17px;
font-weight: 600;
color: #FFFFFF;
letter-spacing: -0.005em;
line-height: 1.22;
margin: 0;
}
.dz-ai-tcard__text {
font-size: 13.5px;
line-height: 1.55;
color: rgba(229,246,255,0.74);
margin: 0;
}
/* Closing CTA inside engagement section */
.dz-ai-eng__cta {
max-width: 1280px;
margin: 64px auto 0;
padding-top: 48px;
border-top: 1px solid rgba(255,255,255,0.10);
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
text-align: center;
}
.dz-ai-eng__cta-line {
font-size: clamp(22px, 2.2vw, 30px);
font-weight: 500;
letter-spacing: -0.012em;
line-height: 1.3;
color: rgba(229,246,255,0.92);
margin: 0;
font-style: italic;
max-width: 36ch;
}
.dz-ai-eng__cta-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background: var(--dz-aqua, #4FC8F4);
color: var(--dz-navy, #2B3D4F);
text-decoration: none;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.01em;
border-radius: 999px;
transition: gap .25s ease, transform .25s ease, box-shadow .25s ease, background .25s ease;
box-shadow: 0 0 0 0 rgba(79,200,244,0);
}
.dz-ai-eng__cta-btn:hover {
gap: 14px;
background: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 0 0 6px rgba(79,200,244,0.18), 0 16px 40px -16px rgba(79,200,244,0.45);
}
.dz-ai-eng__cta-btn svg { transition: transform .25s ease; }
.dz-ai-eng__cta-btn:hover svg { transform: translateX(3px); }
.dz-ai-eng__cta-secondary {
font-size: 12.5px;
font-style: italic;
color: rgba(229,246,255,0.55);
text-decoration: none;
transition: color .2s ease;
}
.dz-ai-eng__cta-secondary:hover { color: var(--dz-aqua, #4FC8F4); }
.dz-ai-missing { padding: 120px 6vw; max-width: 800px; margin: 0 auto; text-align: center; }
/* ═══════════════════════════════════════════════════════════════════════
VDC PAGE — /vdc/ (Immersive technologies by Hordecore)
Layout v2: light hero -> editorial numbered projects -> dark capabilities
Namespace: .dz-vdc-*
═══════════════════════════════════════════════════════════════════════ */
.dz-vdc {
background: var(--dz-white, #FFFFFF);
color: var(--dz-text, #2B3D4F);
display: block;
overflow-x: hidden;
}
.dz-vdc-h2 {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(30px, 4vw, 52px);
font-weight: 600;
line-height: 1.06;
letter-spacing: -0.022em;
color: var(--dz-text, #2B3D4F);
margin: 0 0 14px;
text-wrap: balance;
}
.dz-vdc-h2--on-dark { color: #FFFFFF; }
.dz-vdc-lead {
font-size: clamp(15px, 1.3vw, 17px);
line-height: 1.6;
color: var(--dz-text, #2B3D4F);
opacity: 0.78;
margin: 0;
max-width: 64ch;
text-wrap: balance;
}
.dz-vdc-lead--on-dark { color: rgba(229,246,255,0.78); opacity: 1; }
/* ─── HERO (light) ──────────────────────────────────────────────────── */
.dz-vdc-hero {
position: relative;
background:
radial-gradient(900px 560px at 92% 24%, rgba(79,200,244,0.10), transparent 65%),
var(--dz-white, #FFFFFF);
padding: clamp(110px, 10vw, 140px) clamp(24px, 5vw, 64px) clamp(72px, 9vw, 110px);
overflow: hidden;
}
.dz-vdc-hero__inner {
max-width: 1320px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 0.95fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
}
@media (max-width: 980px) {
.dz-vdc-hero__inner { grid-template-columns: 1fr; gap: 32px; }
}
.dz-vdc-hero__copy {
display: flex; flex-direction: column;
gap: 18px;
align-items: flex-start;
opacity: 0;
transform: translateY(20px);
transition: opacity .8s ease, transform .8s ease;
}
.dz-vdc-hero.is-in-view .dz-vdc-hero__copy { opacity: 1; transform: translateY(0); }
.dz-vdc-hero__title {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(40px, 5.6vw, 76px);
font-weight: 600;
line-height: 1.02;
letter-spacing: -0.028em;
color: var(--dz-navy, #2B3D4F);
margin: 0;
}
.dz-vdc-hero__title-lead { display: block; }
.dz-vdc-hero__title-accent {
display: block;
font-style: italic;
font-weight: 400;
font-size: clamp(20px, 2.4vw, 30px);
line-height: 1.2;
color: var(--dz-aqua, #4FC8F4);
letter-spacing: -0.012em;
margin-top: 10px;
}
.dz-vdc-hero__sub {
font-size: clamp(15px, 1.3vw, 17px);
line-height: 1.6;
color: var(--dz-text, #2B3D4F);
opacity: 0.78;
margin: 4px 0 0;
max-width: 60ch;
}
.dz-vdc-hero__stats {
list-style: none;
margin: 18px 0 0;
padding: 18px 0 0;
border-top: 1px solid rgba(43,61,79,0.12);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
width: 100%;
max-width: 460px;
}
.dz-vdc-hero__stats li {
display: flex; flex-direction: column; gap: 4px;
opacity: 0; transform: translateY(8px);
transition: opacity .7s ease, transform .7s ease;
transition-delay: calc(.3s + var(--vdc-i, 0) * .08s);
}
.dz-vdc-hero.is-in-view .dz-vdc-hero__stats li { opacity: 1; transform: translateY(0); }
.dz-vdc-hero__stat-num {
font-size: clamp(26px, 2.6vw, 34px);
font-weight: 700;
letter-spacing: -0.025em;
color: var(--dz-navy, #2B3D4F);
font-feature-settings: "tnum";
line-height: 1;
}
.dz-vdc-hero__stat-lbl {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(43,61,79,0.55);
}
.dz-vdc-hero__visual {
position: relative;
display: flex; align-items: center; justify-content: center;
opacity: 0;
transform: translateY(24px) scale(0.96);
transition: opacity 1s ease .25s, transform 1s ease .25s;
}
.dz-vdc-hero.is-in-view .dz-vdc-hero__visual { opacity: 1; transform: translateY(0) scale(1); }
.dz-vdc-holo {
width: 100%;
max-width: 440px;
height: auto;
display: block;
color: var(--dz-aqua, #4FC8F4);
filter: drop-shadow(0 0 30px rgba(79,200,244,0.20));
}
/* ──────────────────────────────────────────────────────────────────────
VDC Hero Lens — "Through the headset" porthole
──────────────────────────────────────────────────────────────────────
A round portal that auto-cycles real project media (img / video / SVG)
inside an aqua-glow frame, with a LIVE pill, circular progress arc,
caption, scan lines, and inner vignette. Pure CSS + React, works
in every browser. No GPU, no setup, no fallback path.
────────────────────────────────────────────────────────────────────── */
.dz-vdc-lens {
position: relative;
width: 100%;
max-width: 480px;
margin: 0 auto;
aspect-ratio: 1 / 1;
animation: dzVdcLensFloat 7s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.dz-vdc-lens { animation: none; }
}
@keyframes dzVdcLensFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.dz-vdc-lens__frame {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
background: var(--dz-navy-deep, #1A2D3E);
/* Layered shadow stack — aqua hairline, soft outer halos, drop aura, inner vignette */
box-shadow:
0 0 0 1px rgba(79,200,244,0.55),
0 0 0 6px rgba(79,200,244,0.06),
0 0 0 14px rgba(79,200,244,0.03),
0 30px 80px -20px rgba(79,200,244,0.30),
0 0 60px rgba(79,200,244,0.20),
inset 0 0 60px rgba(0,0,0,0.45);
}
/* Slide stage */
.dz-vdc-lens__stage { position: absolute; inset: 0; }
.dz-vdc-lens__slide {
position: absolute; inset: 0;
opacity: 0;
transition: opacity .9s ease;
background: var(--dz-navy-deep, #1A2D3E);
}
.dz-vdc-lens__slide.is-active { opacity: 1; }
.dz-vdc-lens__slide img,
.dz-vdc-lens__slide video,
.dz-vdc-lens__slide svg {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.dz-vdc-lens__shade {
position: absolute; inset: 0;
background: linear-gradient(180deg,
rgba(0,0,0,0.10) 0%,
rgba(0,0,0,0.05) 35%,
rgba(0,0,0,0.55) 100%);
pointer-events: none;
}
/* Scan lines — drifting horizontal stripes (headset display feel) */
.dz-vdc-lens__scan {
position: absolute; inset: 0;
pointer-events: none;
background: repeating-linear-gradient(
180deg,
rgba(255,255,255,0.05) 0px,
rgba(255,255,255,0.05) 1px,
transparent 1px,
transparent 4px
);
mix-blend-mode: overlay;
animation: dzVdcLensScan 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.dz-vdc-lens__scan { animation: none; }
}
@keyframes dzVdcLensScan {
from { background-position: 0 0; }
to { background-position: 0 60px; }
}
/* Inner radial vignette — sells the lens-housing depth */
.dz-vdc-lens__vignette {
position: absolute; inset: 0;
pointer-events: none;
background: radial-gradient(circle at 50% 50%,
transparent 50%,
rgba(0,0,0,0.40) 100%);
}
/* Top overlay — LIVE pill + progress arc, centered side-by-side
(round porthole clips its corners, so anchor away from them) */
.dz-vdc-lens__top {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
display: inline-flex;
align-items: center;
gap: 14px;
pointer-events: none;
z-index: 2;
}
.dz-vdc-lens__live {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.10);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,0.18);
}
.dz-vdc-lens__live-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--dz-aqua, #4FC8F4);
box-shadow: 0 0 8px var(--dz-aqua, #4FC8F4);
animation: dzVdcLensBlink 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.dz-vdc-lens__live-dot { animation: none; }
}
@keyframes dzVdcLensBlink {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.4; transform: scale(0.85); }
}
.dz-vdc-lens__live-text {
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.20em;
color: #FFFFFF;
text-transform: uppercase;
}
.dz-vdc-lens__arc {
width: 32px;
height: 32px;
filter: drop-shadow(0 0 6px rgba(79,200,244,0.55));
}
/* Bottom overlay — counter / project name / tags */
.dz-vdc-lens__bottom {
position: absolute;
left: 50%;
bottom: 30px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
pointer-events: none;
width: max-content;
max-width: calc(100% - 60px);
z-index: 2;
}
.dz-vdc-lens__counter {
font-family: 'Outfit', system-ui, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.24em;
color: var(--dz-aqua, #4FC8F4);
font-feature-settings: "tnum";
text-transform: uppercase;
}
.dz-vdc-lens__counter-of { opacity: 0.55; margin: 0 4px; }
.dz-vdc-lens__title {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(13px, 1.3vw, 16px);
font-weight: 600;
color: #FFFFFF;
letter-spacing: -0.012em;
text-shadow: 0 2px 12px rgba(0,0,0,0.55);
line-height: 1.2;
}
.dz-vdc-lens__tags {
display: flex;
gap: 5px;
flex-wrap: wrap;
justify-content: center;
margin-top: 2px;
}
.dz-vdc-lens__tag {
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 4px 9px;
border-radius: 999px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.20);
color: rgba(255,255,255,0.90);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
/* Invisible click target — advances to next slide on tap */
.dz-vdc-lens__hit {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
background: transparent;
cursor: pointer;
appearance: none;
z-index: 1;
}
.dz-vdc-lens__hit:focus-visible {
outline: 2px solid var(--dz-aqua, #4FC8F4);
outline-offset: 4px;
border-radius: 50%;
}
/* ─── PROJECTS (light, editorial numbered sections) ────────────────── */
.dz-vdc-projects {
background: var(--dz-white, #FFFFFF);
padding: clamp(64px, 8vw, 100px) clamp(24px, 5vw, 64px) clamp(80px, 9vw, 120px);
border-top: 1px solid rgba(43,61,79,0.06);
}
.dz-vdc-projects__head {
max-width: 760px;
margin: 0 auto clamp(56px, 6vw, 80px);
text-align: center;
display: flex; flex-direction: column; align-items: center;
}
.dz-vdc-projects__list {
max-width: 1180px;
margin: 0 auto;
display: flex; flex-direction: column;
gap: clamp(80px, 9vw, 120px);
}
/* ─── Cinema Reel — horizontal scroll-snap carousel of projects ──── */
.dz-vdc-reel {
position: relative;
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
gap: 18px;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
border-radius: 18px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
opacity: 0;
transform: translateY(20px);
transition: opacity .8s ease, transform .8s ease;
}
.dz-vdc-reel::-webkit-scrollbar { display: none; }
.dz-vdc-projects.is-in-view .dz-vdc-reel { opacity: 1; transform: translateY(0); }
.dz-vdc-reel__panel {
scroll-snap-align: center;
position: relative;
aspect-ratio: 16 / 9;
border-radius: 18px;
overflow: hidden;
background: linear-gradient(180deg, var(--dz-navy, #2B3D4F) 0%, var(--dz-navy-deep, #1A2D3E) 100%);
box-shadow:
0 30px 80px -30px rgba(43,61,79,0.40),
0 0 0 1px rgba(43,61,79,0.06);
}
.dz-vdc-reel__media {
position: absolute;
inset: 0;
}
.dz-vdc-reel__media img,
.dz-vdc-reel__media video,
.dz-vdc-reel__media svg {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* YouTube iframe — scaled up to crop the YouTube progress bar/branding,
pointer-events off so the panel's "Open case" CTA stays clickable */
.dz-vdc-reel__yt {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
pointer-events: none;
/* Scale slightly so YouTube's edge UI sits outside the visible 16:9 crop */
transform: scale(1.30);
transform-origin: 50% 50%;
}
.dz-vdc-reel__shade {
position: absolute;
inset: 0;
background: linear-gradient(120deg,
rgba(14,22,32,0.78) 0%,
rgba(14,22,32,0.20) 48%,
rgba(14,22,32,0.72) 100%);
pointer-events: none;
}
.dz-vdc-reel__copy {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: clamp(28px, 4vw, 48px);
color: #FFFFFF;
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: end;
}
@media (max-width: 760px) {
.dz-vdc-reel__copy { grid-template-columns: 1fr; gap: 16px; }
}
.dz-vdc-reel__copy-main { min-width: 0; }
.dz-vdc-reel__copy-side {
display: flex;
flex-direction: column;
gap: 14px;
align-items: flex-end;
}
@media (max-width: 760px) {
.dz-vdc-reel__copy-side { align-items: flex-start; }
}
.dz-vdc-reel__index {
font-size: clamp(28px, 3.4vw, 44px);
font-weight: 700;
color: var(--dz-aqua, #4FC8F4);
letter-spacing: -0.028em;
font-feature-settings: "tnum";
line-height: 1;
margin-bottom: 10px;
}
.dz-vdc-reel__kicker {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
color: rgba(229,246,255,0.78);
margin-bottom: 8px;
}
.dz-vdc-reel__title {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(26px, 3.4vw, 46px);
font-weight: 600;
line-height: 1.06;
letter-spacing: -0.022em;
color: #FFFFFF;
max-width: 22ch;
margin: 0;
}
.dz-vdc-reel__tagline {
font-size: clamp(13px, 1.15vw, 16px);
line-height: 1.5;
color: rgba(229,246,255,0.85);
margin-top: 10px;
font-style: italic;
max-width: 56ch;
}
.dz-vdc-reel__tags {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
justify-content: flex-end;
}
@media (max-width: 760px) {
.dz-vdc-reel__tags { justify-content: flex-start; }
}
.dz-vdc-reel__tags li {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 6px 11px;
border-radius: 999px;
background: rgba(255,255,255,0.10);
color: #FFFFFF;
border: 1px solid rgba(255,255,255,0.20);
white-space: nowrap;
}
.dz-vdc-reel__cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 18px;
border-radius: 999px;
background: var(--dz-aqua, #4FC8F4);
color: var(--dz-navy-deep, #1A2D3E);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-decoration: none;
border: 1px solid var(--dz-aqua, #4FC8F4);
transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
box-shadow: 0 12px 30px -12px rgba(79,200,244,0.55);
}
.dz-vdc-reel__cta:hover {
transform: translateY(-1px);
box-shadow: 0 18px 40px -12px rgba(79,200,244,0.7);
}
.dz-vdc-reel__cta svg { transition: transform .25s ease; }
.dz-vdc-reel__cta:hover svg { transform: translateX(3px); }
.dz-vdc-reel__cta--soon {
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.20);
color: rgba(255,255,255,0.85);
box-shadow: none;
cursor: default;
font-style: italic;
}
/* ─── Reel controls (counter + dots + arrows) ───────────────────── */
.dz-vdc-reel__controls {
max-width: 1280px;
margin: 22px auto 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
}
@media (max-width: 760px) {
.dz-vdc-reel__controls { flex-wrap: wrap; gap: 14px; justify-content: center; }
}
.dz-vdc-reel__counter {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.20em;
color: rgba(43,61,79,0.62);
text-transform: uppercase;
font-feature-settings: "tnum";
}
.dz-vdc-reel__counter strong {
color: var(--dz-navy, #2B3D4F);
font-size: 16px;
font-weight: 700;
}
.dz-vdc-reel__counter-sep { margin: 0 4px; }
.dz-vdc-reel__counter-total { color: rgba(43,61,79,0.45); }
.dz-vdc-reel__dots {
display: flex;
gap: 10px;
}
.dz-vdc-reel__dot {
appearance: none;
border: none;
cursor: pointer;
width: 36px;
height: 4px;
padding: 0;
background: rgba(43,61,79,0.20);
border-radius: 2px;
transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.dz-vdc-reel__dot:hover { background: rgba(43,61,79,0.45); }
.dz-vdc-reel__dot.is-active {
background: var(--dz-aqua, #4FC8F4);
transform: scaleY(1.3);
box-shadow: 0 0 8px rgba(79,200,244,0.45);
}
.dz-vdc-reel__arrows {
display: flex;
gap: 8px;
}
.dz-vdc-reel__arrow {
appearance: none;
border: 1px solid rgba(43,61,79,0.18);
background: var(--dz-white, #FFFFFF);
cursor: pointer;
width: 38px;
height: 38px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--dz-navy, #2B3D4F);
transition: border-color .25s ease, color .25s ease, transform .25s ease;
}
.dz-vdc-reel__arrow:hover {
border-color: var(--dz-aqua, #4FC8F4);
color: var(--dz-aqua, #4FC8F4);
transform: translateY(-1px);
}
.dz-vdc-reel__arrow:disabled {
opacity: 0.35;
cursor: not-allowed;
transform: none;
}
/* ─── CAPABILITIES (dark navy + closing CTA) ───────────────────────── */
.dz-vdc-cap {
background:
radial-gradient(900px 600px at 80% 20%, rgba(79,200,244,0.10), transparent 65%),
linear-gradient(180deg, var(--dz-navy, #2B3D4F) 0%, var(--dz-navy-deep, #1A2D3E) 100%);
color: #FFFFFF;
padding: clamp(72px, 9vw, 110px) clamp(24px, 5vw, 64px) clamp(80px, 9vw, 120px);
overflow: hidden;
}
.dz-vdc-cap__head {
max-width: 760px;
margin: 0 auto 48px;
text-align: center;
display: flex; flex-direction: column; align-items: center;
}
.dz-vdc-cap__grid {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 980px) { .dz-vdc-cap__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .dz-vdc-cap__grid { grid-template-columns: 1fr; } }
.dz-vdc-ctile {
position: relative;
display: flex;
flex-direction: column;
gap: 12px;
padding: 24px 22px 22px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 12px;
overflow: hidden;
opacity: 0;
transform: translateY(14px);
transition:
opacity .6s ease,
transform .6s ease,
border-color .35s ease,
background .35s ease;
transition-delay: calc(var(--vdc-i, 0) * .08s);
}
.dz-vdc-cap.is-in-view .dz-vdc-ctile { opacity: 1; transform: translateY(0); }
.dz-vdc-ctile:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(79,200,244,0.45);
transform: translateY(-3px);
}
.dz-vdc-ctile::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--dz-aqua, #4FC8F4) 0%, rgba(79,200,244,0.4) 100%);
transform: scaleY(0);
transform-origin: top center;
transition: transform .35s cubic-bezier(.2,.65,.25,1);
}
.dz-vdc-ctile:hover::before { transform: scaleY(1); }
.dz-vdc-ctile__glyph {
width: 48px; height: 48px;
border-radius: 12px;
display: flex; align-items: center; justify-content: center;
background: rgba(79,200,244,0.10);
border: 1px solid rgba(79,200,244,0.25);
color: var(--dz-aqua, #4FC8F4);
flex-shrink: 0;
transition: transform .3s ease, box-shadow .3s ease;
}
.dz-vdc-ctile:hover .dz-vdc-ctile__glyph {
transform: scale(1.05);
box-shadow: 0 0 24px rgba(79,200,244,0.20);
}
.dz-vdc-ctile__glyph svg { width: 28px; height: 28px; overflow: visible; }
.dz-vdc-ctile__label {
font-family: 'Outfit', system-ui, sans-serif;
font-size: 16px;
font-weight: 600;
color: #FFFFFF;
letter-spacing: -0.005em;
margin: 4px 0 0;
}
.dz-vdc-ctile__text {
font-size: 13.5px;
line-height: 1.55;
color: rgba(229,246,255,0.72);
margin: 0;
}
/* ── Closing CTA strip (own section, grey bg between dark cap and footer) ── */
.dz-vdc-closing {
background: var(--dz-soft-grey, #F1F1F1);
padding: clamp(56px, 6vw, 80px) clamp(24px, 5vw, 64px);
border-top: 1px solid rgba(43,61,79,0.06);
}
.dz-vdc-closing__inner {
max-width: 1280px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 22px;
text-align: center;
}
.dz-vdc-closing__line {
font-size: clamp(22px, 2.2vw, 30px);
font-weight: 500;
letter-spacing: -0.012em;
line-height: 1.3;
color: var(--dz-navy, #2B3D4F);
margin: 0;
font-style: italic;
max-width: 36ch;
}
.dz-vdc-closing__btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
background: var(--dz-aqua, #4FC8F4);
color: var(--dz-navy, #2B3D4F);
text-decoration: none;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.01em;
border-radius: 999px;
transition: gap .25s ease, transform .25s ease, box-shadow .25s ease, background .25s ease;
box-shadow: 0 0 0 0 rgba(79,200,244,0);
}
.dz-vdc-closing__btn:hover {
gap: 14px;
background: var(--dz-navy, #2B3D4F);
color: #FFFFFF;
transform: translateY(-2px);
box-shadow: 0 0 0 6px rgba(79,200,244,0.18), 0 16px 40px -16px rgba(43,61,79,0.45);
}
.dz-vdc-closing__btn svg { transition: transform .25s ease; }
.dz-vdc-closing__btn:hover svg { transform: translateX(3px); }
.dz-vdc-missing { padding: 120px 6vw; max-width: 800px; margin: 0 auto; text-align: center; }
/* ──────────────────────────────────────────────────────────────────────
VDC Case Detail Pages — /vdc//
Slug-driven dossier rendered by VdcCasePage.jsx.
Namespace: .dz-vdc-case-*
────────────────────────────────────────────────────────────────────── */
.dz-vdc-case {
background: var(--dz-white, #FFFFFF);
color: var(--dz-text, #2B3D4F);
position: relative;
min-height: 100vh;
}
/* ─── Reading progress bar ─── */
.dz-vdc-case__progress {
position: fixed; top: 0; left: 0; right: 0;
height: 2px; z-index: 90;
background: rgba(43,61,79,0.06);
pointer-events: none;
}
.dz-vdc-case__progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--dz-aqua, #4FC8F4), #1F6789);
box-shadow: 0 0 12px rgba(79,200,244,0.55);
transition: width .12s ease-out;
}
/* ─── Hero (parallax image / video / SVG) ─── */
.dz-vdc-case__hero {
position: relative;
width: 100%;
height: 90vh;
min-height: 620px;
max-height: 900px;
overflow: hidden;
background: var(--dz-navy-deep, #1A2D3E);
}
.dz-vdc-case__hero-image-wrap {
position: absolute;
inset: 0;
will-change: transform;
}
.dz-vdc-case__hero-image-wrap img,
.dz-vdc-case__hero-image-wrap video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.dz-vdc-case__hero-svg {
display: block;
width: 100%;
height: 100%;
}
.dz-vdc-case__hero-shade {
position: absolute; inset: 0;
background:
linear-gradient(180deg,
rgba(14,22,32,0.50) 0%,
rgba(14,22,32,0.30) 35%,
rgba(14,22,32,0.85) 100%);
pointer-events: none;
}
.dz-vdc-case__hero-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: clamp(120px, 14vw, 160px) clamp(24px, 5vw, 80px) clamp(48px, 6vw, 80px);
max-width: 1280px;
margin: 0 auto;
}
.dz-vdc-case__back {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 9px 16px;
border-radius: 999px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.18);
color: rgba(229,246,255,0.85);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-decoration: none;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.dz-vdc-case__back:hover {
background: rgba(79,200,244,0.18);
border-color: rgba(79,200,244,0.45);
color: #FFFFFF;
}
.dz-vdc-case__hero-text { color: #FFFFFF; max-width: 880px; }
.dz-vdc-case__hero-cat {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--dz-aqua, #4FC8F4);
margin-bottom: 14px;
}
.dz-vdc-case__hero-title {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(34px, 5vw, 64px);
font-weight: 600;
line-height: 1.04;
letter-spacing: -0.026em;
color: #FFFFFF;
margin: 0 0 16px;
max-width: 22ch;
}
.dz-vdc-case__hero-meta {
font-size: clamp(14px, 1.2vw, 16px);
color: rgba(229,246,255,0.85);
margin: 0 0 18px;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.dz-vdc-case__hero-meta em {
color: var(--dz-aqua, #4FC8F4);
font-style: italic;
font-weight: 500;
}
.dz-vdc-case__sep { opacity: 0.5; margin: 0 4px; }
.dz-vdc-case__hero-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dz-vdc-case__chip {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255,255,255,0.10);
color: #FFFFFF;
border: 1px solid rgba(255,255,255,0.20);
white-space: nowrap;
}
/* ─── Inner content wrapper ─── */
.dz-vdc-case__inner {
max-width: 880px;
margin: 0 auto;
padding: clamp(64px, 8vw, 120px) clamp(24px, 5vw, 48px);
display: flex;
flex-direction: column;
gap: clamp(60px, 7vw, 96px);
}
/* ─── Reveal-on-scroll ─── */
.dz-vdc-case__reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity .8s ease, transform .8s ease;
}
.dz-vdc-case__reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
.dz-vdc-case__section-title {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(24px, 2.6vw, 32px);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.018em;
color: var(--dz-navy, #2B3D4F);
margin: 0 0 28px;
position: relative;
padding-bottom: 14px;
}
.dz-vdc-case__section-title::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 0;
height: 2px;
background: var(--dz-aqua, #4FC8F4);
transition: width .8s cubic-bezier(.2,.65,.25,1) .2s;
}
.dz-vdc-case__reveal.is-visible .dz-vdc-case__section-title::after { width: 64px; }
.dz-vdc-case__lead {
font-size: 15.5px;
line-height: 1.65;
color: rgba(43,61,79,0.74);
margin: 0 0 28px;
max-width: 60ch;
}
/* ─── The brief / story ─── */
.dz-vdc-case__story-para {
font-size: clamp(16px, 1.3vw, 18px);
line-height: 1.65;
color: var(--dz-text, #2B3D4F);
margin: 0 0 18px;
max-width: 64ch;
}
.dz-vdc-case__story-para:last-child { margin-bottom: 0; }
/* ─── Key facts grid ─── */
.dz-vdc-case__facts-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
@media (max-width: 880px) { .dz-vdc-case__facts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .dz-vdc-case__facts-grid { grid-template-columns: 1fr; } }
.dz-vdc-case__fact {
background: var(--dz-white, #FFFFFF);
border: 1px solid rgba(43,61,79,0.10);
border-radius: 12px;
padding: 18px 18px 16px;
display: flex;
flex-direction: column;
gap: 6px;
opacity: 0;
transform: translateY(12px);
transition: opacity .6s ease, transform .6s ease, border-color .25s ease, box-shadow .25s ease;
}
.dz-vdc-case__reveal.is-visible .dz-vdc-case__fact { opacity: 1; transform: translateY(0); }
.dz-vdc-case__fact:hover {
border-color: rgba(79,200,244,0.45);
box-shadow: 0 12px 30px -16px rgba(43,61,79,0.20);
}
.dz-vdc-case__fact-label {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
color: rgba(43,61,79,0.55);
}
.dz-vdc-case__fact-value {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(17px, 1.6vw, 20px);
font-weight: 600;
letter-spacing: -0.012em;
color: var(--dz-navy, #2B3D4F);
line-height: 1.2;
}
/* ─── Approach (numbered scope list) ─── */
.dz-vdc-case__scope-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
}
.dz-vdc-case__scope-item {
display: grid;
grid-template-columns: 56px 1fr;
gap: 18px;
align-items: start;
padding: 16px 0;
border-bottom: 1px solid rgba(43,61,79,0.08);
opacity: 0;
transform: translateX(-12px);
transition: opacity .6s ease, transform .6s ease;
}
.dz-vdc-case__reveal.is-visible .dz-vdc-case__scope-item { opacity: 1; transform: translateX(0); }
.dz-vdc-case__scope-item:last-child { border-bottom: none; }
.dz-vdc-case__scope-num {
font-family: 'Outfit', system-ui, sans-serif;
font-size: 16px;
font-weight: 700;
font-feature-settings: "tnum";
letter-spacing: 0.04em;
color: var(--dz-aqua, #4FC8F4);
line-height: 1.6;
}
.dz-vdc-case__scope-text {
font-size: 15.5px;
line-height: 1.6;
color: var(--dz-text, #2B3D4F);
}
/* ─── Watch it in action — YouTube embed ─── */
.dz-vdc-case__video-wrap {
position: relative;
aspect-ratio: 16 / 9;
width: 100%;
border-radius: 14px;
overflow: hidden;
background: var(--dz-navy-deep, #1A2D3E);
box-shadow:
0 30px 60px -25px rgba(43,61,79,0.30),
0 0 0 1px rgba(43,61,79,0.06);
}
.dz-vdc-case__video-iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
border: 0;
}
/* ─── Tools / hardware list (label + note) ─── */
.dz-vdc-case__tools-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
@media (max-width: 700px) { .dz-vdc-case__tools-list { grid-template-columns: 1fr; } }
.dz-vdc-case__tool {
background: rgba(43,61,79,0.05);
border: 1px solid rgba(43,61,79,0.12);
border-radius: 12px;
padding: 16px 18px;
opacity: 0;
transform: translateY(10px);
transition: opacity .6s ease, transform .6s ease,
border-color .25s ease, background-color .25s ease;
}
.dz-vdc-case__reveal.is-visible .dz-vdc-case__tool { opacity: 1; transform: translateY(0); }
.dz-vdc-case__tool:hover {
background: rgba(43,61,79,0.08);
border-color: rgba(43,61,79,0.32);
}
.dz-vdc-case__tool-label {
display: block;
font-family: 'Outfit', system-ui, sans-serif;
font-size: 15px;
font-weight: 600;
color: var(--dz-navy, #2B3D4F);
letter-spacing: -0.01em;
margin-bottom: 4px;
}
.dz-vdc-case__tool-note {
display: block;
font-size: 12.5px;
line-height: 1.5;
color: rgba(43,61,79,0.66);
}
/* ─── Software stack (chips) ─── */
.dz-vdc-case__software-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.dz-vdc-case__chip--soft {
background: rgba(43,61,79,0.06);
color: var(--dz-navy, #2B3D4F);
border-color: rgba(43,61,79,0.18);
text-transform: none;
letter-spacing: 0.02em;
font-weight: 600;
font-size: 12px;
transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.dz-vdc-case__chip--soft:hover {
background: rgba(43,61,79,0.10);
border-color: rgba(43,61,79,0.32);
transform: translateY(-1px);
}
/* ─── Gallery (Al Arabi 4 themes) ─── */
.dz-vdc-case__gallery {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
@media (max-width: 700px) { .dz-vdc-case__gallery { grid-template-columns: 1fr; } }
.dz-vdc-case__gallery-cell {
position: relative;
margin: 0;
border-radius: 12px;
overflow: hidden;
background: linear-gradient(180deg, var(--dz-navy, #2B3D4F) 0%, var(--dz-navy-deep, #1A2D3E) 100%);
aspect-ratio: 4 / 3;
box-shadow: 0 24px 50px -25px rgba(43,61,79,0.25);
opacity: 0;
transform: translateY(14px);
transition: opacity .7s ease, transform .7s ease;
}
.dz-vdc-case__reveal.is-visible .dz-vdc-case__gallery-cell { opacity: 1; transform: translateY(0); }
.dz-vdc-case__gallery-cell img {
display: block; width: 100%; height: 100%;
object-fit: cover;
transition: transform .8s cubic-bezier(.2,.65,.25,1);
}
.dz-vdc-case__gallery-cell:hover img { transform: scale(1.04); }
.dz-vdc-case__gallery-caption {
position: absolute;
left: 14px;
bottom: 14px;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 13px;
border-radius: 999px;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.18);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #FFFFFF;
}
.dz-vdc-case__gallery-caption::before {
content: "";
width: 6px; height: 6px; border-radius: 50%;
background: var(--dz-aqua, #4FC8F4);
box-shadow: 0 0 8px var(--dz-aqua, #4FC8F4);
}
.dz-vdc-case__gallery-pending {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: rgba(229,246,255,0.55);
background: radial-gradient(circle at 50% 50%, rgba(79,200,244,0.10), transparent 60%);
}
.dz-vdc-case__gallery-pending-mark {
font-size: 36px;
font-weight: 200;
line-height: 1;
color: var(--dz-aqua, #4FC8F4);
opacity: 0.7;
}
.dz-vdc-case__gallery-pending-text {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
}
/* ─── Related cases (dark band) ─── */
/* ────────────────────────────────────────────────────────────────────
"More immersive work" — editorial typographic INDEX
Light aqua-wash band, no big media. Numbered rows with hover
underline + arrow translation. Compact (~⅓ the height of the old
bento). Refined, restrained, professional.
──────────────────────────────────────────────────────────────────── */
.dz-vdc-case__related {
position: relative;
background: var(--dz-aqua-wash, #E8F5FB);
color: var(--dz-navy, #2B3D4F);
padding: clamp(48px, 5vw, 72px) clamp(24px, 5vw, 64px);
border-top: 1px solid rgba(43,61,79,0.06);
border-bottom: 1px solid rgba(43,61,79,0.06);
}
/* Subtle aqua radial wash — adds depth/colour to the dark band */
.dz-vdc-case__related-inner {
max-width: 1100px;
margin: 0 auto;
}
/* ── Header row: eyebrow on left, "See all" on right ── */
.dz-vdc-case__related-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
padding-bottom: 24px;
margin-bottom: 4px;
border-bottom: 1px solid rgba(43,61,79,0.10);
}
.dz-vdc-case__related-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--dz-navy, #2B3D4F);
}
.dz-vdc-case__related-eyebrow-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--dz-aqua, #4FC8F4);
box-shadow: 0 0 8px var(--dz-aqua, #4FC8F4);
}
.dz-vdc-case__related-all {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--dz-navy, #2B3D4F);
text-decoration: none;
transition: color .25s ease, gap .25s ease;
}
.dz-vdc-case__related-all:hover {
color: var(--dz-aqua, #4FC8F4);
gap: 11px;
}
/* ── List of rows ── */
.dz-vdc-case__related-list {
list-style: none;
margin: 0;
padding: 0;
}
.dz-vdc-case__related-item + .dz-vdc-case__related-item {
border-top: 1px solid rgba(43,61,79,0.08);
}
.dz-vdc-case__related-row {
display: grid;
grid-template-columns: 56px 1fr auto 28px;
align-items: center;
gap: 24px;
padding: 18px 4px;
text-decoration: none;
color: var(--dz-navy, #2B3D4F);
position: relative;
transition: padding .3s cubic-bezier(.2,.65,.25,1);
}
@media (max-width: 700px) {
.dz-vdc-case__related-row {
grid-template-columns: 44px 1fr 22px;
gap: 14px;
padding: 16px 4px;
}
.dz-vdc-case__related-row .dz-vdc-case__related-kicker {
grid-column: 2 / 3;
margin-top: 4px;
text-align: left;
}
}
/* Hairline aqua underline that draws across on hover */
.dz-vdc-case__related-row::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 1px;
background: var(--dz-aqua, #4FC8F4);
transform: scaleX(0);
transform-origin: 0 0;
transition: transform .5s cubic-bezier(.2,.65,.25,1);
}
.dz-vdc-case__related-row:hover::after { transform: scaleX(1); }
.dz-vdc-case__related-num {
font-family: 'Outfit', system-ui, sans-serif;
font-style: italic;
font-weight: 500;
font-size: clamp(20px, 2vw, 26px);
letter-spacing: -0.02em;
color: var(--dz-aqua, #4FC8F4);
font-feature-settings: "tnum";
line-height: 1;
opacity: 0.85;
transition: transform .3s ease, opacity .3s ease;
}
.dz-vdc-case__related-row:hover .dz-vdc-case__related-num {
opacity: 1;
transform: translateX(2px);
}
.dz-vdc-case__related-name {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(16px, 1.5vw, 20px);
font-weight: 600;
letter-spacing: -0.014em;
line-height: 1.25;
color: var(--dz-navy, #2B3D4F);
}
.dz-vdc-case__related-kicker {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
color: rgba(43,61,79,0.55);
text-align: right;
white-space: nowrap;
}
.dz-vdc-case__related-arrow {
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: var(--dz-aqua, #4FC8F4);
background: transparent;
border: 1px solid rgba(79,200,244,0.30);
opacity: 0;
transform: translateX(-4px);
transition: opacity .3s ease, transform .3s ease, background .3s ease, border-color .3s ease;
justify-self: end;
}
.dz-vdc-case__related-row:hover .dz-vdc-case__related-arrow {
opacity: 1;
transform: translateX(0);
background: var(--dz-aqua, #4FC8F4);
border-color: var(--dz-aqua, #4FC8F4);
color: var(--dz-navy-deep, #1A2D3E);
}
.dz-vdc-case__all-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin: clamp(36px, 4vw, 56px) auto 0;
padding: 12px 22px;
border-radius: 999px;
background: transparent;
border: 1px solid rgba(255,255,255,0.25);
color: #FFFFFF;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
text-decoration: none;
transition: background .25s ease, border-color .25s ease;
}
.dz-vdc-case__all-link:hover {
background: rgba(79,200,244,0.18);
border-color: rgba(79,200,244,0.55);
}
.dz-vdc-case__all-link {
display: flex;
width: max-content;
margin-left: auto;
margin-right: auto;
}
/* ─── Floating CTA ─── */
.dz-vdc-case__floating-cta {
position: fixed;
right: clamp(16px, 3vw, 32px);
bottom: clamp(16px, 3vw, 32px);
z-index: 80;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 20px;
border-radius: 999px;
background: var(--dz-aqua, #4FC8F4);
color: var(--dz-navy-deep, #1A2D3E);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-decoration: none;
box-shadow: 0 18px 40px -12px rgba(79,200,244,0.55);
opacity: 0;
transform: translateY(20px);
pointer-events: none;
transition: opacity .35s ease, transform .35s ease;
}
.dz-vdc-case__floating-cta.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.dz-vdc-case__floating-cta:hover {
transform: translateY(-2px);
box-shadow: 0 22px 50px -14px rgba(79,200,244,0.7);
}
/* ─── Missing / 404 ─── */
.dz-vdc-case--missing { padding: 160px 6vw 120px; max-width: 700px; margin: 0 auto; text-align: center; }
.dz-vdc-case__missing-eyebrow {
display: inline-block;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.24em;
color: var(--dz-aqua, #4FC8F4);
text-transform: uppercase;
margin-bottom: 14px;
}
.dz-vdc-case__missing-title {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(28px, 4vw, 40px);
font-weight: 600;
color: var(--dz-navy, #2B3D4F);
margin: 0 0 10px;
}
.dz-vdc-case__missing-sub {
color: rgba(43,61,79,0.66);
margin: 0 0 28px;
}
.dz-vdc-case__missing-back {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 11px 20px;
border-radius: 999px;
background: var(--dz-aqua, #4FC8F4);
color: var(--dz-navy-deep, #1A2D3E);
font-weight: 700;
text-decoration: none;
font-size: 13px;
letter-spacing: 0.04em;
}
/* ──────────────────────────────────────────────────────────────────────
/vision-2030/ — Aligned by Mandate
Editorial alignment paper. Light theme throughout. Brand-canonical
typography (Outfit 600-700, em = aqua + bold + non-italic, italic
reserved for product names only). Two textures: white + aqua-wash.
Namespace: .dz-v30-*
────────────────────────────────────────────────────────────────────── */
.dz-v30 {
background: var(--dz-white, #FFFFFF);
color: var(--dz-text, #2B3D4F);
position: relative;
}
/* Shared eyebrow pill (matches site canonical pulsing-dot pill) */
.dz-v30-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 14px;
border-radius: 999px;
background: rgba(79,200,244,0.10);
border: 1px solid rgba(79,200,244,0.30);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--dz-aqua, #4FC8F4);
margin-bottom: 24px;
}
.dz-v30-eyebrow::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--dz-aqua, #4FC8F4);
box-shadow: 0 0 8px var(--dz-aqua, #4FC8F4);
animation: dzV30Pulse 2.4s ease-in-out infinite;
}
@keyframes dzV30Pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.85); }
}
/* Brand-canonical em (aqua, weight 700, NOT italic) */
.dz-v30-em {
color: var(--dz-aqua, #4FC8F4);
font-weight: 700;
font-style: normal;
}
/* Italic reserved for product names — TwinMs, TwinMaq */
.dz-v30-product {
font-style: italic;
font-weight: 600;
color: var(--dz-navy, #2B3D4F);
}
/* Reveal-on-scroll */
.dz-v30-reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity .8s ease, transform .8s ease;
}
.dz-v30-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ─── HERO — Aqua Horizon (atmospheric magazine-cover composition) ─── */
.dz-v30-hero {
position: relative;
background: var(--dz-white, #FFFFFF);
color: var(--dz-text, #2B3D4F);
padding: clamp(80px, 9vw, 130px) clamp(28px, 5vw, 80px) 0;
overflow: hidden;
}
.dz-v30-hero__inner {
position: relative;
z-index: 2;
max-width: 1280px;
margin: 0 auto;
}
/* Giant ghosted "2030" anchor — sits behind the headline, very faint aqua */
.dz-v30-hero__anchor {
position: absolute;
top: clamp(60px, 7vw, 100px);
right: clamp(-20px, -1vw, 60px);
font-family: 'Outfit', sans-serif;
font-size: clamp(220px, 28vw, 460px);
font-weight: 700;
line-height: 0.85;
letter-spacing: -0.05em;
color: rgba(79,200,244,0.10);
pointer-events: none;
user-select: none;
z-index: 1;
}
/* Soft horizon arc with breathing animation + floating particles */
.dz-v30-hero__horizon {
position: absolute;
left: -10%;
right: -10%;
bottom: 80px;
height: 280px;
pointer-events: none;
z-index: 0;
}
.dz-v30-hero__horizon svg {
width: 100%;
height: 100%;
display: block;
}
.dz-v30-hero__horizon-arc {
fill: none;
stroke: var(--dz-aqua, #4FC8F4);
stroke-width: 1;
opacity: 0.40;
}
.dz-v30-hero__horizon-arc--soft { opacity: 0.18; }
.dz-v30-hero__horizon-arc--faint { opacity: 0.10; }
/* ─── Hero ambient motion ──────────────────────────────────────────────
Horizon-group breathing and particle-drift are GATED behind .is-cold-open
so they only kick in after JS triggers the cold-open sequence. This
guarantees the 3s entrance plays on every mount + bfcache restore. ── */
.dz-v30-hero.is-cold-open .dz-v30-hero__horizon-group {
animation: dzV30HorizonBreathe 14s ease-in-out 3s infinite;
transform-origin: center;
}
@keyframes dzV30HorizonBreathe {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* ─── Cold-open · initial state (applied ALWAYS) ───────────────────────
Elements start hidden / off-stage. Stay this way until JS adds the
`.is-cold-open` class to the parent after first paint. ── */
.dz-v30-hero .dz-v30-eyebrow { opacity: 0; }
.dz-v30-hero__word {
display: inline-block;
opacity: 0;
transform: translateY(0.45em);
}
.dz-v30-hero__anchor { opacity: 0; }
.dz-v30-hero__horizon-arc {
stroke-dasharray: 3500;
stroke-dashoffset: 3500;
}
.dz-v30-hero__particle {
fill: var(--dz-aqua, #4FC8F4);
opacity: 0;
transform-box: fill-box;
transform-origin: center;
transform: scale(0);
}
.dz-v30-hero__sub { opacity: 0; }
/* ─── Cold-open · cinematic entrance sequence (gated by .is-cold-open) ──
0.05s eyebrow fadeUp
0.20s word 0 ("Vision 2030,") — stagger 0.12s per --w
…
0.68s word 4 ("model.")
1.20s anchor "2030" alpha 0 → 0.10 over 1.8s
1.40s horizon arc 1 stroke-draw (1.6s ease-out-quart)
1.55s horizon arc 2 stroke-draw
1.70s horizon arc 3 stroke-draw
2.00s particle 1 pop-in (then drift forever)
(particles 2–6 stagger 100ms)
2.60s sub-paragraph fadeUp
3.00s ambient horizon breathing takes over
────────────────────────────────────────────────────────────────────── */
.dz-v30-hero.is-cold-open .dz-v30-eyebrow {
animation: dzV30FadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}
.dz-v30-hero.is-cold-open .dz-v30-hero__word {
animation: dzV30WordReveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: calc(0.20s + var(--w, 0) * 0.12s);
}
.dz-v30-hero.is-cold-open .dz-v30-hero__anchor {
animation: dzV30AnchorIn 1.8s cubic-bezier(0.22, 1, 0.36, 1) 1.20s forwards;
}
.dz-v30-hero.is-cold-open .dz-v30-hero__horizon-arc {
animation: dzV30ArcDraw 1.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.dz-v30-hero.is-cold-open .dz-v30-hero__horizon-arc--faint { animation-delay: 1.40s; }
.dz-v30-hero.is-cold-open .dz-v30-hero__horizon-arc--soft { animation-delay: 1.55s; }
.dz-v30-hero.is-cold-open .dz-v30-hero__horizon-arc:not(.dz-v30-hero__horizon-arc--faint):not(.dz-v30-hero__horizon-arc--soft) {
animation-delay: 1.70s;
}
/* Particles: one-shot pop-in, then drift forever (compound animation) */
.dz-v30-hero.is-cold-open .dz-v30-hero__particle {
animation:
dzV30ParticlePop 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards,
dzV30ParticleDrift 4s ease-in-out infinite;
}
.dz-v30-hero.is-cold-open .dz-v30-hero__particle:nth-of-type(1) { animation-delay: 2.00s, 2.55s; }
.dz-v30-hero.is-cold-open .dz-v30-hero__particle:nth-of-type(2) { animation-delay: 2.10s, 2.65s; }
.dz-v30-hero.is-cold-open .dz-v30-hero__particle:nth-of-type(3) { animation-delay: 2.20s, 2.75s; }
.dz-v30-hero.is-cold-open .dz-v30-hero__particle:nth-of-type(4) { animation-delay: 2.30s, 2.85s; }
.dz-v30-hero.is-cold-open .dz-v30-hero__particle:nth-of-type(5) { animation-delay: 2.40s, 2.95s; }
.dz-v30-hero.is-cold-open .dz-v30-hero__particle:nth-of-type(6) { animation-delay: 2.50s, 3.05s; }
.dz-v30-hero.is-cold-open .dz-v30-hero__sub {
animation: dzV30FadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 2.60s forwards;
}
/* Cold-open keyframes */
@keyframes dzV30FadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes dzV30WordReveal {
to { opacity: 1; transform: translateY(0); }
}
@keyframes dzV30AnchorIn {
to { opacity: 1; }
}
@keyframes dzV30ArcDraw {
to { stroke-dashoffset: 0; }
}
@keyframes dzV30ParticlePop {
to { opacity: 0.45; transform: scale(1); }
}
/* Ambient particle drift — preserves scale(1) so pop's final state isn't overridden */
@keyframes dzV30ParticleDrift {
0% { opacity: 0.20; transform: scale(1) translateY(0); }
50% { opacity: 0.65; transform: scale(1) translateY(-6px); }
100% { opacity: 0.20; transform: scale(1) translateY(0); }
}
/* Reduced motion: skip cold-open, jump to static end-state, kill ambient */
@media (prefers-reduced-motion: reduce) {
.dz-v30-hero .dz-v30-eyebrow,
.dz-v30-hero__word,
.dz-v30-hero__anchor,
.dz-v30-hero__sub {
opacity: 1;
transform: none;
animation: none;
}
.dz-v30-hero__horizon-arc {
stroke-dasharray: none;
stroke-dashoffset: 0;
animation: none;
}
.dz-v30-hero__particle {
opacity: 0.45;
transform: scale(1);
animation: none;
}
.dz-v30-hero__horizon-group { animation: none; }
}
.dz-v30-hero__title {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(40px, 6vw, 92px);
font-weight: 700;
line-height: 1.0;
letter-spacing: -0.028em;
color: var(--dz-navy, #2B3D4F);
margin: 0 0 28px;
max-width: 14ch;
text-wrap: balance;
}
.dz-v30-hero__sub {
font-size: clamp(15px, 1.05vw, 18px);
line-height: 1.7;
color: rgba(43,61,79,0.72);
max-width: 56ch;
/* The bottom margin reserves space for the horizon arc rendering below */
margin: 0 0 clamp(160px, 18vw, 280px);
}
.dz-v30-hero__sub em {
font-style: italic;
color: var(--dz-navy, #2B3D4F);
font-weight: 500;
}
/* ─── PILLARS (aqua-wash) ────────────────────────────────────────── */
.dz-v30-pillars {
background: var(--dz-aqua-wash, #E8F5FB);
padding: clamp(80px, 9vw, 120px) clamp(28px, 5vw, 80px);
border-top: 1px solid rgba(43,61,79,0.06);
}
.dz-v30-pillars__inner {
max-width: 1280px;
margin: 0 auto;
}
.dz-v30-pillars__head {
display: grid;
grid-template-columns: 1fr auto;
gap: clamp(28px, 4vw, 64px);
align-items: end;
margin-bottom: clamp(56px, 6vw, 88px);
}
@media (max-width: 880px) {
.dz-v30-pillars__head { grid-template-columns: 1fr; }
}
.dz-v30-pillars__h2 {
font-family: 'Outfit', sans-serif;
font-size: clamp(28px, 3.8vw, 48px);
font-weight: 700;
line-height: 1.06;
letter-spacing: -0.022em;
color: var(--dz-navy, #2B3D4F);
margin: 0;
max-width: 18ch;
text-wrap: balance;
}
.dz-v30-pillars__mark {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.20em;
text-transform: uppercase;
color: rgba(43,61,79,0.45);
}
.dz-v30-pillars__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
@media (max-width: 880px) {
.dz-v30-pillars__grid { grid-template-columns: 1fr; }
}
.dz-v30-pillar {
padding: clamp(28px, 3vw, 40px) clamp(20px, 2.5vw, 36px) 0;
border-left: 1px solid rgba(43,61,79,0.18);
opacity: 0;
transform: translateY(14px);
transition: opacity .7s ease, transform .7s ease;
transition-delay: calc(var(--v30-i, 0) * 80ms);
}
.dz-v30-pillar:first-child { padding-left: 0; border-left: none; }
@media (max-width: 880px) {
.dz-v30-pillar { padding: 28px 0 0; border-left: none; border-top: 1px solid rgba(43,61,79,0.18); }
.dz-v30-pillar:first-child { padding-top: 0; border-top: none; }
}
.dz-v30-reveal.is-visible .dz-v30-pillar { opacity: 1; transform: translateY(0); }
.dz-v30-pillar__num {
font-family: 'Outfit', sans-serif;
font-size: 12px;
font-weight: 600;
color: var(--dz-aqua, #4FC8F4);
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 16px;
}
.dz-v30-pillar__name {
font-family: 'Outfit', sans-serif;
font-size: clamp(20px, 2vw, 26px);
font-weight: 600;
line-height: 1.18;
letter-spacing: -0.014em;
color: var(--dz-navy, #2B3D4F);
margin-bottom: 14px;
max-width: 14ch;
}
.dz-v30-pillar__themes {
font-size: 13px;
line-height: 1.65;
color: rgba(43,61,79,0.62);
margin: 0;
}
.dz-v30-pillar__themes em {
color: var(--dz-aqua, #4FC8F4);
font-weight: 600;
font-style: normal;
}
/* ─── PACT — six alignment articles (white) ─────────────────────── */
.dz-v30-pact {
background: var(--dz-white, #FFFFFF);
padding: clamp(80px, 10vw, 140px) clamp(28px, 5vw, 80px);
}
.dz-v30-pact__inner {
max-width: 1080px;
margin: 0 auto;
}
.dz-v30-pact__head {
margin-bottom: clamp(64px, 7vw, 100px);
max-width: 760px;
}
.dz-v30-pact__h2 {
font-family: 'Outfit', sans-serif;
font-size: clamp(30px, 4.2vw, 56px);
font-weight: 700;
line-height: 1.04;
letter-spacing: -0.024em;
color: var(--dz-navy, #2B3D4F);
margin-bottom: 18px;
max-width: 18ch;
text-wrap: balance;
}
.dz-v30-pact__lead {
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.7;
color: rgba(43,61,79,0.72);
max-width: 60ch;
margin: 0;
}
.dz-v30-pact__list {
list-style: none;
margin: 0;
padding: 0;
}
.dz-v30-pact__article {
display: grid;
grid-template-columns: 64px 1fr 1.2fr;
gap: clamp(24px, 4vw, 64px);
padding: clamp(40px, 5vw, 64px) 0;
border-top: 1px solid rgba(43,61,79,0.10);
align-items: start;
opacity: 0;
transform: translateY(20px);
transition: opacity .7s ease, transform .7s ease;
transition-delay: calc(var(--v30-i, 0) * 60ms);
}
.dz-v30-pact__article:last-child { border-bottom: 1px solid rgba(43,61,79,0.10); }
.dz-v30-reveal.is-visible .dz-v30-pact__article { opacity: 1; transform: translateY(0); }
@media (max-width: 760px) {
.dz-v30-pact__article {
grid-template-columns: 48px 1fr;
gap: 18px;
}
.dz-v30-pact__article .dz-v30-pact__dz {
grid-column: 1 / 3;
padding-top: 18px;
border-top: 1px solid rgba(43,61,79,0.08);
margin-top: 8px;
}
}
.dz-v30-pact__num {
font-family: 'Outfit', sans-serif;
font-size: clamp(13px, 1.1vw, 14px);
font-weight: 600;
color: var(--dz-aqua, #4FC8F4);
letter-spacing: 0.16em;
text-transform: uppercase;
padding-top: 6px;
}
.dz-v30-pact__vision {
padding-right: clamp(0px, 1vw, 24px);
}
.dz-v30-pact__vision-tag {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.20em;
text-transform: uppercase;
color: rgba(43,61,79,0.45);
display: block;
margin-bottom: 14px;
}
.dz-v30-pact__vision-quote {
font-family: 'Outfit', sans-serif;
font-size: clamp(20px, 2.2vw, 28px);
font-weight: 600;
line-height: 1.20;
letter-spacing: -0.014em;
color: var(--dz-navy, #2B3D4F);
margin-bottom: 14px;
text-wrap: balance;
}
.dz-v30-pact__vision-source {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(43,61,79,0.40);
display: inline-flex;
align-items: center;
gap: 7px;
}
.dz-v30-pact__vision-source::before {
content: "";
width: 14px;
height: 1px;
background: var(--dz-aqua, #4FC8F4);
}
.dz-v30-pact__dz-tag {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--dz-aqua, #4FC8F4);
display: block;
margin-bottom: 14px;
}
.dz-v30-pact__dz-claim {
font-size: clamp(15px, 1.2vw, 18px);
font-weight: 500;
line-height: 1.55;
color: var(--dz-navy, #2B3D4F);
margin-bottom: 18px;
max-width: 50ch;
}
.dz-v30-pact__dz-claim em {
color: var(--dz-aqua, #4FC8F4);
font-weight: 700;
font-style: normal;
}
.dz-v30-pact__dz-anchors {
list-style: none;
margin: 0;
padding: 14px 0 0;
border-top: 1px solid rgba(43,61,79,0.08);
}
.dz-v30-pact__dz-anchor {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 8px 0;
font-size: 13px;
}
.dz-v30-pact__dz-anchor + .dz-v30-pact__dz-anchor {
border-top: 1px solid rgba(43,61,79,0.06);
}
.dz-v30-pact__dz-anchor-name {
color: var(--dz-navy, #2B3D4F);
font-weight: 500;
}
.dz-v30-pact__dz-anchor-loc {
color: rgba(43,61,79,0.45);
font-size: 11.5px;
letter-spacing: 0.06em;
white-space: nowrap;
}
/* ─── SIGNATURES — three differentiators (aqua-wash) ─────────────── */
.dz-v30-signs {
background: var(--dz-aqua-wash, #E8F5FB);
padding: clamp(80px, 9vw, 120px) clamp(28px, 5vw, 80px);
border-top: 1px solid rgba(43,61,79,0.06);
}
.dz-v30-signs__inner {
max-width: 1280px;
margin: 0 auto;
}
.dz-v30-signs__head {
margin-bottom: clamp(48px, 5vw, 72px);
max-width: 760px;
}
.dz-v30-signs__h2 {
font-family: 'Outfit', sans-serif;
font-size: clamp(26px, 3.4vw, 40px);
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--dz-navy, #2B3D4F);
margin: 0;
max-width: 22ch;
text-wrap: balance;
}
.dz-v30-signs__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
}
@media (max-width: 880px) {
.dz-v30-signs__grid { grid-template-columns: 1fr; }
}
.dz-v30-sign {
padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 40px) 0;
border-left: 1px solid rgba(43,61,79,0.18);
opacity: 0;
transform: translateY(14px);
transition: opacity .7s ease, transform .7s ease;
transition-delay: calc(var(--v30-i, 0) * 80ms);
}
.dz-v30-sign:first-child { padding-left: 0; border-left: none; }
@media (max-width: 880px) {
.dz-v30-sign { padding: 28px 0 0; border-left: none; border-top: 1px solid rgba(43,61,79,0.18); }
.dz-v30-sign:first-child { padding-top: 0; border-top: none; }
}
.dz-v30-reveal.is-visible .dz-v30-sign { opacity: 1; transform: translateY(0); }
.dz-v30-sign__num {
font-family: 'Outfit', sans-serif;
font-size: 12px;
font-weight: 600;
color: var(--dz-aqua, #4FC8F4);
letter-spacing: 0.20em;
text-transform: uppercase;
margin-bottom: 16px;
}
.dz-v30-sign__claim {
font-family: 'Outfit', sans-serif;
font-size: clamp(18px, 1.7vw, 22px);
font-weight: 600;
line-height: 1.22;
letter-spacing: -0.012em;
color: var(--dz-navy, #2B3D4F);
margin-bottom: 14px;
max-width: 18ch;
text-wrap: balance;
}
.dz-v30-sign__claim em {
color: var(--dz-aqua, #4FC8F4);
font-weight: 700;
font-style: normal;
}
.dz-v30-sign__body {
font-size: 13.5px;
line-height: 1.7;
color: rgba(43,61,79,0.66);
margin: 0;
max-width: 36ch;
}
/* ─── CLOSING CTA — light surface ────────────────────────────────── */
.dz-v30-close {
background:
radial-gradient(700px 400px at 50% 100%, rgba(79,200,244,0.08), transparent 70%),
var(--dz-white, #FFFFFF);
padding: clamp(80px, 9vw, 130px) clamp(28px, 5vw, 80px);
text-align: center;
border-top: 1px solid rgba(43,61,79,0.06);
}
.dz-v30-close__line {
font-family: 'Outfit', sans-serif;
font-size: clamp(26px, 3.4vw, 42px);
font-weight: 600;
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--dz-navy, #2B3D4F);
margin: 0 auto 32px;
max-width: 24ch;
text-wrap: balance;
}
.dz-v30-close__line em {
color: var(--dz-aqua, #4FC8F4);
font-weight: 700;
font-style: normal;
}
.dz-v30-close__btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
border-radius: 999px;
background: var(--dz-aqua, #4FC8F4);
color: var(--dz-navy-deep, #1A2D3E);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
text-decoration: none;
transition: gap .25s ease, transform .25s ease, background .25s ease, color .25s ease;
box-shadow: 0 18px 40px -16px rgba(79,200,244,0.45);
}
.dz-v30-close__btn:hover {
gap: 14px;
transform: translateY(-2px);
background: var(--dz-navy, #2B3D4F);
color: var(--dz-white, #FFFFFF);
}
.dz-v30-close__btn svg { transition: transform .25s ease; }
.dz-v30-close__btn:hover svg { transform: translateX(3px); }
/* Missing/error state */
.dz-v30--missing { padding: 120px 6vw; max-width: 800px; margin: 0 auto; text-align: center; }
/* ─── FAQ section toggle ──────────────────────────────────────────────
Wraps the long list of questions behind a single "Show N questions"
button so the FAQ section doesn't dominate the page vertically.
Click expands; click again collapses. Each individual question still
uses the existing .dz-faq-item accordion. ─────────────── */
.dz-faq__toggle {
margin-top: 18px;
display: inline-flex;
align-items: center;
gap: 10px;
padding: 12px 22px;
border-radius: 999px;
background: rgba(79,200,244,0.08);
border: 1px solid rgba(79,200,244,0.30);
color: var(--dz-aqua, #4FC8F4);
font-family: inherit;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 0.18s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.dz-faq__toggle:hover {
background: rgba(79,200,244,0.14);
border-color: rgba(79,200,244,0.55);
}
.dz-faq__toggle:focus-visible {
outline: 2px solid var(--dz-aqua, #4FC8F4);
outline-offset: 3px;
}
.dz-faq__toggle-chev {
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.dz-faq__toggle.is-open .dz-faq__toggle-chev {
transform: rotate(180deg);
}
/* When collapsed, give the .dz-faq section a compact bottom padding;
when expanded the existing .dz-faq__list margin handles spacing. */
.dz-faq .dz-faq__list[hidden] { display: none; }
.dz-faq .dz-faq__list:not([hidden]) { margin-top: 32px; }
/* ─── FAQ section · light aqua-wash variant ───────────────────────────
The FAQ section overrides the global .dz-section dark navy default
with a light aqua-wash background, matching the editorial-break
pattern used elsewhere on the site. Padding tightened so the
collapsed state doesn't leave a giant empty band. ──────────────── */
.dz-faq {
background: var(--dz-aqua-wash, #E8F5FB);
padding: clamp(56px, 7vw, 96px) clamp(20px, 5vw, 64px);
color: var(--dz-navy, #2B3D4F);
}
.dz-faq::before { display: none; }
/* Recolor heading + lead for the light surface */
.dz-faq .dz-h2 { color: var(--dz-navy, #2B3D4F); }
.dz-faq .dz-h2 em {
color: var(--dz-aqua, #4FC8F4);
font-style: normal;
font-weight: inherit;
}
.dz-faq .dz-lead { color: rgba(43, 61, 79, 0.72); }
/* FAQ item recolor for light bg */
.dz-faq .dz-faq-item {
border-bottom-color: rgba(43, 61, 79, 0.12);
}
.dz-faq .dz-faq-item summary {
color: var(--dz-navy, #2B3D4F);
}
.dz-faq .dz-faq-item summary:hover {
color: var(--dz-aqua, #4FC8F4);
}
.dz-faq .dz-faq-item[open] {
background: rgba(79, 200, 244, 0.08);
}
.dz-faq .dz-faq-item__body {
color: rgba(43, 61, 79, 0.72);
}
/* The toggle button's aqua-on-aqua chrome already reads well on the
light bg — no override needed. */
/* ──────────────────────────────────────────────────────────────────────
LEGAL PAGES — /privacy/ and /terms/
──────────────────────────────────────────────────────────────────────
Editorial long-form layout. Compact navy hero, light body, single
readable column. Same DZ visual register as the rest of the site
without repeating the heavier marketing chrome.
─────────────────────────────────────────────────────────────────── */
.dz-legal {
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
background: var(--dz-soft-grey, #F1F1F1);
color: var(--dz-text, #1A2D3E);
}
.dz-legal__hero {
background: var(--dz-navy, #1A2D3E);
color: var(--dz-text-on-dark, #FFFFFF);
padding: clamp(120px, 11vw, 160px) clamp(24px, 4vw, 56px) clamp(60px, 7vw, 96px);
position: relative;
overflow: hidden;
}
.dz-legal__hero::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(900px 600px at 80% 20%, rgba(79,200,244,0.08), transparent 65%);
pointer-events: none;
}
.dz-legal__hero-inner {
position: relative;
max-width: 880px;
margin: 0 auto;
z-index: 1;
}
.dz-legal__eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--dz-aqua, #4FC8F4);
margin: 0 0 18px;
font-family: 'Outfit', system-ui, sans-serif;
}
.dz-legal__title {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(42px, 6vw, 72px);
font-weight: 600;
letter-spacing: -0.022em;
line-height: 1.04;
margin: 0 0 28px;
color: var(--dz-text-on-dark, #FFFFFF);
}
.dz-legal__effective {
font-size: 13px;
letter-spacing: 0.04em;
color: rgba(255,255,255,0.72);
margin: 0 0 28px;
font-family: 'Outfit', system-ui, sans-serif;
}
.dz-legal__effective-label {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 11px;
color: rgba(255,255,255,0.62);
}
.dz-legal__intro {
font-size: 17px;
line-height: 1.65;
color: rgba(255,255,255,0.85);
margin: 0;
max-width: 68ch;
}
.dz-legal__body {
flex: 1;
padding: clamp(56px, 8vw, 96px) clamp(24px, 4vw, 56px);
}
.dz-legal__body-inner {
max-width: 880px;
margin: 0 auto;
}
.dz-legal__section {
margin-bottom: clamp(32px, 4vw, 56px);
}
.dz-legal__section-h {
font-family: 'Outfit', system-ui, sans-serif;
font-size: clamp(20px, 2.4vw, 26px);
font-weight: 600;
letter-spacing: -0.012em;
line-height: 1.2;
color: var(--dz-text, #1A2D3E);
margin: 0 0 14px;
}
.dz-legal__section-p {
font-size: 16px;
line-height: 1.72;
color: rgba(43, 61, 79, 0.85);
margin: 0;
max-width: 68ch;
}
.dz-legal__sig {
margin-top: clamp(48px, 6vw, 72px);
padding-top: clamp(28px, 3vw, 40px);
border-top: 1px solid rgba(26,45,62,0.12);
font-size: 15px;
line-height: 1.6;
color: rgba(43, 61, 79, 0.7);
font-style: italic;
}
.dz-legal__sig-link {
color: var(--dz-text, #1A2D3E);
font-weight: 600;
text-decoration: underline;
text-decoration-color: var(--dz-aqua, #4FC8F4);
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
font-style: normal;
}
.dz-legal__sig-link:hover {
text-decoration-thickness: 2px;
text-decoration-color: var(--dz-text, #1A2D3E);
}
@media (max-width: 640px) {
.dz-legal__title { font-size: clamp(34px, 8vw, 48px); }
.dz-legal__intro { font-size: 15.5px; }
.dz-legal__section-p { font-size: 15.5px; }
}
/* ──────────────────────────────────────────────────────────────────────
MOBILE / TABLET RESPONSIVE OVERRIDES — added 2026-05-06
──────────────────────────────────────────────────────────────────────
Fixes for the mobile audit findings:
1. Solutions split-stage (2 columns + spine) → single column stack
2. Stage Explorer (11-col grid) → horizontal-scrollable rail
3. TwinMs hero iris → fits within viewport without overflow
4. TwinMaq Capabilities asymmetric grid → single column
5. Use-case grids → single column
6. Generic 2-up / 3-up card grids → stack
7. Hero typography that needs to relax on phones
─────────────────────────────────────────────────────────────────── */
/* ── Solutions split stage: stack vertically below 900px ── */
@media (max-width: 900px) {
.dz-sol-stage,
.dz-sol-stage--lean-maq,
.dz-sol-stage--lean-ms {
grid-template-columns: 1fr !important;
}
.dz-sol-half__inner {
min-height: auto;
padding: clamp(48px, 8vw, 72px) clamp(24px, 5vw, 40px);
}
/* The middle "spine" with 88px column — hide on mobile, the cards
read just as well stacked top-to-bottom */
.dz-sol-spine {
display: none;
}
/* Both halves left-align on mobile (no mirrored read) */
.dz-sol-half--maq .dz-sol-half__inner,
.dz-sol-half--ms .dz-sol-half__inner {
align-items: flex-start;
text-align: left;
}
}
/* ── Stage Explorer (11-column grid) → horizontal scroll on phones ── */
@media (max-width: 900px) {
.dz-lifecycle__steps {
display: flex;
flex-direction: row;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-padding-left: 24px;
gap: 8px;
padding: 4px 24px 16px;
margin: 0 -24px;
/* Hide scrollbar visually but keep functionality */
scrollbar-width: thin;
}
.dz-lifecycle__steps::-webkit-scrollbar {
height: 4px;
}
.dz-lifecycle__steps::-webkit-scrollbar-thumb {
background: rgba(79, 200, 244, 0.3);
border-radius: 2px;
}
.dz-step {
flex: 0 0 auto;
scroll-snap-align: start;
min-width: 130px;
}
.dz-step__btn {
padding: 12px 14px;
background: rgba(255,255,255,0.04);
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.08);
}
.dz-step--active .dz-step__btn,
.dz-step.is-active .dz-step__btn {
background: rgba(79,200,244,0.10);
border-color: rgba(79,200,244,0.45);
}
}
/* ── TwinMs iris (circular video on right of hero) → fits cleanly ── */
@media (max-width: 900px) {
.dz-tms-hero {
grid-template-columns: 1fr !important;
padding: clamp(110px, 18vw, 140px) clamp(20px, 5vw, 32px) clamp(48px, 8vw, 72px);
}
.dz-tms-hero__visual,
.dz-tms-iris {
max-width: 100%;
width: min(420px, 92vw);
margin: 0 auto;
}
.dz-tms-stats {
flex-wrap: wrap;
gap: clamp(20px, 5vw, 32px);
}
}
/* ── TwinMaq hero (light grey) + Capabilities asymmetric grid → stack ── */
@media (max-width: 900px) {
.dz-tmq-hero {
grid-template-columns: 1fr !important;
padding: clamp(110px, 18vw, 140px) clamp(20px, 5vw, 32px) clamp(48px, 8vw, 72px);
}
.dz-tmq-cap__grid {
grid-template-columns: 1fr !important;
gap: 24px;
}
.dz-tmq-cap__featured {
aspect-ratio: 4 / 3; /* taller on mobile so image has presence */
min-height: 280px;
}
}
/* ── Use case grids on TwinMs / VDC / Projects — stack on phones ── */
@media (max-width: 700px) {
.dz-tms-use__grid,
.dz-vdc-reel__track,
.dz-projects__grid,
.dz-tmq-use__grid,
.dz-ai-uses__grid {
grid-template-columns: 1fr !important;
}
}
/* ── About page — offices grid stacks ── */
@media (max-width: 700px) {
.dz-about-offices__list,
.dz-offices__grid {
grid-template-columns: 1fr !important;
}
}
/* ── Contact form 2-col → single col on phones ── */
@media (max-width: 700px) {
.dz-contact-form,
.dz-contact-grid {
grid-template-columns: 1fr !important;
gap: 22px;
}
}
/* ── Footer 6-col → 2-col → 1-col responsive ── */
@media (max-width: 900px) {
.ftr-cols {
grid-template-columns: repeat(2, 1fr) !important;
gap: 32px 24px;
}
}
@media (max-width: 480px) {
.ftr-cols {
grid-template-columns: 1fr !important;
}
}
/* ── Generic safety nets: hero typography relaxes on phones ── */
@media (max-width: 700px) {
/* Any oversized hero headline shrinks proportionally */
.dz-hero h1,
.dz-tms-hero__title,
.dz-tmq-hero__title,
.dz-vdc-hero__title,
.dz-ai-hero__title,
.dz-v30-hero__title,
.dz-about-hero__title,
.dz-contact-hi {
font-size: clamp(36px, 9vw, 56px) !important;
line-height: 1.06 !important;
}
/* Section padding tightens */
section {
padding-left: max(20px, env(safe-area-inset-left));
padding-right: max(20px, env(safe-area-inset-right));
}
}
/* ── Touch targets and link tap areas at <= 700px ── */
@media (max-width: 700px) {
a, button, .dz-btn, [role="button"] {
/* Visual minimum tap area without forcing visual size */
min-height: 32px;
}
.dz-btn,
.dz-btn--aqua,
.dz-btn--ghost,
.dz-btn--lg,
.dz-btn--sm,
.dz-navbar__mobile-link,
.dz-navbar__mobile-cta {
min-height: 44px; /* primary CTAs always 44px+ */
}
}
/* ──────────────────────────────────────────────────────────────────────
iOS SAFARI HARDENING — added 2026-05-06 (cache: iosfix)
──────────────────────────────────────────────────────────────────────
Mobile fixes audit (run via Playwright WebKit on iPhone-SE/13/14-Pro/
15-Plus) showed Safari was ignoring `overflow-x: hidden` and letting
the body grow 40px wider than viewport because absolutely-positioned
descendants (decorative glows, oversized numbers, project cards in a
transformed track) were pushing the body's bounding rect out.
Why `overflow-x: clip` instead of `hidden`:
`clip` truly clamps content — Safari respects it. `hidden` allows
the body to keep growing; the scrollbar just gets clipped.
This block REPLACES the older 900px overflow-x: hidden rule. */
/* ── Site-wide horizontal lockdown (all mobile sizes) ── */
@media (max-width: 900px) {
html {
overflow-x: clip;
}
body {
overflow-x: clip;
max-width: 100vw;
width: 100%;
position: relative;
}
/* Every top-level section wrapper clips its own decorative overflow.
This catches absolute-positioned glows, oversized backdrop numbers,
and transformed marquee tracks that would otherwise push the body
outside the viewport. */
.dz-hero,
.dz-tms-hero,
.dz-tmq-hero,
.dz-vdc-hero,
.dz-ai-hero,
.dz-v30-hero,
.dz-about-hero,
.dz-sol-hero,
.dz-contact,
.dz-projects,
.dz-services,
.dz-solutions,
.dz-section,
main {
max-width: 100vw;
overflow-x: clip;
}
}
/* ── Form fields: collapse 2-col grid → 1-col, fields fill the row ── */
@media (max-width: 700px) {
.dz-cta__form {
grid-template-columns: 1fr !important;
gap: 14px;
}
.dz-cta__field,
.dz-cta__field--full,
.dz-cta__form-foot {
width: 100%;
max-width: 100%;
min-width: 0;
grid-column: 1 / -1 !important;
box-sizing: border-box;
}
.dz-cta__field input,
.dz-cta__field select,
.dz-cta__field textarea {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
/* iOS Safari zooms in on form fields when font-size is < 16px. Pinning
at 16px on mobile prevents the unwanted zoom-on-focus jump. */
font-size: 16px;
}
/* Form-foot was a 2-col flex (consent + button); on phones the
consent line wraps under the button and both stretch full width. */
.dz-cta__form-foot {
flex-wrap: wrap;
align-items: stretch;
}
.dz-cta__form-foot .dz-btn {
width: 100%;
}
}
/* ── TwinMs iris: hard cap so ring--outer can't escape viewport ── */
@media (max-width: 700px) {
.dz-tms-iris {
width: min(82vw, 340px) !important;
max-width: min(82vw, 340px) !important;
}
.dz-tms-hero__visual {
width: min(85vw, 360px) !important;
max-width: 100% !important;
overflow: visible;
}
}
/* ── Solutions hero glows: shrink decorative blurs on phones ── */
@media (max-width: 700px) {
.dz-sol-hero__glow--maq {
width: 240px !important;
height: 240px !important;
top: -80px !important;
left: -60px !important;
}
.dz-sol-hero__glow--ms {
width: 200px !important;
height: 200px !important;
bottom: -80px !important;
right: -50px !important;
}
/* Outcome ghost stamp — was 480-720px, way past viewport */
.dz-sol-outcome__ghost-img {
width: clamp(260px, 80vw, 380px) !important;
}
}
/* ── TwinMaq capabilities featured card: fill available width ── */
@media (max-width: 700px) {
.dz-tmq-cap__featured {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
}
/* ── About hero: oversized backdrop year-number was 389px wide ── */
@media (max-width: 700px) {
.dz-about__hero-bg-num {
font-size: clamp(180px, 60vw, 260px) !important;
max-width: 100vw;
overflow: hidden;
}
/* Lifecycle marquee — its viewport already has overflow:hidden;
keep the inner track free to scroll-animate. */
.dz-about__lifecycle-viewport {
overflow: hidden;
}
}
/* ── Clients marquee: parent must clip the wide animated track ── */
@media (max-width: 900px) {
.dz-clients-marquee {
overflow: hidden;
}
.dz-clients-marquee__viewport {
overflow: hidden;
}
}
/* ── Home projects carousel: track lives inside __viewport which has
overflow-x: clip, but on Safari the cards' bounding rect is still
reported off-page. Force the parent section to clip too so any
residual transform leak doesn't push the body wider. ── */
@media (max-width: 900px) {
.dz-clients,
.dz-clients__viewport {
overflow-x: clip;
max-width: 100vw;
}
}
/* ── Hero pattern (decorative SVG/grid behind home headline) ── */
@media (max-width: 900px) {
.dz-hero__pattern {
max-width: 100vw;
overflow: hidden;
}
}
/* ── Generic safety: any direct child of body can't exceed viewport ── */
@media (max-width: 700px) {
body > * {
max-width: 100vw;
}
}
/* ── Solutions lifecycle pills: pin to viewport edges on phones ──
The two stage pills (Stage 02 → TwinMaq, Stage 09 → TwinMs) are
absolutely positioned at marker x-percentage along the SVG diagram.
On small viewports the marker positions (13.6% and 77.3% of an
1100-unit viewBox) put the pills off-page edges. Pin maq pill to
the left edge and ms pill to the right edge so they always sit on
screen — the droplinks from markers to pills still read as guides.
Force box-sizing: border-box because the pills' default content-box
plus 18px+18px padding plus 1px+1px border was making a clamped
width of 173px render as a 211px box, which made the two pills
overlap at the centre. */
@media (max-width: 700px) {
.dz-sol-lifecycle__pill {
box-sizing: border-box !important;
/* Width is parent-relative: parent is .dz-sol-lifecycle which sits
inside .dz-sol-hero's horizontal padding, so 50vw doesn't apply.
Use percentage so two pills + 12px (left) + 12px (gap) + 12px
(right) = 36px total fit edge-to-edge of the parent. */
width: calc((100% - 36px) / 2) !important;
max-width: calc((100% - 36px) / 2) !important;
min-width: 0 !important;
padding: 12px 14px !important;
min-height: auto !important;
}
.dz-sol-lifecycle__pill--maq {
left: 12px !important;
right: auto !important;
transform: none !important;
}
.dz-sol-lifecycle__pill--ms {
left: auto !important;
right: 12px !important;
transform: none !important;
}
.dz-sol-lifecycle__pill--maq:hover,
.dz-sol-lifecycle__pill--ms:hover {
transform: translateY(-2px) !important;
}
/* Slightly smaller content typography in the narrower pill */
.dz-sol-lifecycle__pill-name {
font-size: 15px !important;
}
.dz-sol-lifecycle__pill-stage {
font-size: 9.5px !important;
}
}
/* ──────────────────────────────────────────────────────────────────────
ROUND 5 — comprehensive iPhone audit (2026-05-07)
──────────────────────────────────────────────────────────────────────
After full-page screenshots on actual iOS WebKit, more issues found:
1. VDC Cinema Reel B was a horizontal scroll-snap rail with grid
cells at 100%; on phones the panels rendered narrow + far below
producing a huge empty black strip. → stack vertically on mobile.
2. TwinMs iris outer ring was -20px past viewport left edge (still
too wide after the previous round's cap).
3. Vision 2030 hero `__horizon` decoration overflowed both edges.
4. Solutions hero `__glow--ms` decoration at x=260 width 200 (=460,
viewport 393) — needed to be smaller still.
5. Services Explorer item rail overflow at x=345.
6. About lifecycle chip catch-all overflow.
────────────────────────────────────────────────────────────────────── */
/* ── VDC Cinema Reel: stack panels vertically on phones ──
The reel is a horizontal scroll-snap carousel on desktop. On phones
that pattern produces a tiny ~194px-tall slot with hidden panels
you can't easily see — and the user reads as "empty black space".
Stack them naturally so all 4-5 cinema reel projects show in flow. */
@media (max-width: 900px) {
.dz-vdc-reel {
display: flex !important;
flex-direction: column !important;
grid-auto-flow: row !important;
grid-auto-columns: auto !important;
overflow-x: visible !important;
overflow-y: visible !important;
scroll-snap-type: none !important;
gap: 20px !important;
max-width: 100%;
padding: 0 !important;
}
.dz-vdc-reel__panel {
aspect-ratio: 16 / 11 !important;
width: 100% !important;
max-width: 100%;
scroll-snap-align: none !important;
}
/* On stacked layout, the copy block (overlaid on desktop) needs to
read normally — turn off the absolute overlay and show below image. */
.dz-vdc-reel__copy {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
/* YouTube embed inside the panel — make it full-width within its
stacked panel. */
.dz-vdc-reel__yt {
width: 100% !important;
max-width: 100% !important;
}
/* Reel pagination + dots only make sense for the horizontal snap
experience — hide them since panels are now stacked. */
.dz-vdc-reel-nav,
.dz-vdc-reel__dots,
.dz-vdc-reel__pagination {
display: none !important;
}
}
/* ── TwinMs iris: tighter cap so outer ring stays inside viewport ── */
@media (max-width: 700px) {
.dz-tms-iris {
width: min(78vw, 320px) !important;
max-width: min(78vw, 320px) !important;
}
.dz-tms-hero__visual {
width: min(82vw, 340px) !important;
margin: 0 auto !important;
}
}
/* ── Vision 2030 hero horizon: hide the decoration that overflows ── */
@media (max-width: 700px) {
.dz-v30-hero__horizon {
max-width: 100vw !important;
overflow: hidden !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
}
}
/* ── Solutions hero glow--ms: shrink further on small phones ── */
@media (max-width: 480px) {
.dz-sol-hero__glow--ms {
width: 160px !important;
height: 160px !important;
bottom: -60px !important;
right: -40px !important;
}
.dz-sol-hero__glow--maq {
width: 200px !important;
height: 200px !important;
top: -60px !important;
left: -40px !important;
}
}
/* ── Services Explorer rail on /services/: same horizontal-scroll
pattern as Stage Explorer on home — the parent should clip and
the items don't need explicit width:100%. ── */
@media (max-width: 900px) {
.dz-svc-explorer__list,
.dz-svc-explorer__rail {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
max-width: 100vw;
}
.dz-svc-explorer__item {
flex: 0 0 auto;
}
}
/* ── About lifecycle chips: ensure parent .dz-about__lifecycle-viewport
clips the marquee even on the smallest phones ── */
@media (max-width: 700px) {
.dz-about__lifecycle-viewport {
overflow: hidden !important;
max-width: 100vw !important;
}
}
/* ── Navbar: when content scrolls under it, ensure it has a solid
backdrop so text underneath isn't visible through it. The CSS
already gives the navbar a backdrop-filter blur, but on iOS
Safari with body zoom, the blur sometimes doesn't apply. Force
a solid navy background as fallback below 700px. ── */
@media (max-width: 700px) {
.dz-navbar {
background: rgba(26, 45, 62, 0.96) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(79, 200, 244, 0.10);
}
}
/* ── Footer phone numbers: tap target ≥ 44px ── */
@media (max-width: 700px) {
.ftr a[href^="tel:"],
.ftr a[href^="mailto:"] {
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 6px 0;
}
}
/* ── Why Design Zone: stack spotlight + rail on phones ──
The light-theme override at the bottom of the file uses
`grid-template-columns: 880fr 380fr` outside any media query, which
wins against the earlier mobile rule by source order. Force-stack
the two columns below 900px so the spotlight takes full width and
the differentiator pills sit cleanly underneath. */
@media (max-width: 900px) {
.dz-why__stage {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.dz-why__spotlight {
min-height: auto;
padding: 24px 20px !important;
}
.dz-why__rail {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
}
@media (max-width: 480px) {
.dz-why__rail {
grid-template-columns: 1fr !important;
}
}
/* ── Home Stage Explorer rail: prevent the rail items from bleeding past
the right edge by scrolling. Already overflow-x: auto, but the
LAST item should be visible (currently cut off). Add right-side
scroll padding so the user can scroll all the way and see the
last stage. ── */
@media (max-width: 900px) {
.dz-lifecycle__steps {
padding-right: 32px !important;
scroll-padding-right: 24px !important;
}
}
/* ── Home Products tab switcher (TwinMaq / TwinMs) — on the screenshot
a third "TWINmaq" pill was floating mid-section because the
active product's big logo was rendering ON TOP of the inactive
tab. Reduce the big logo's font-size on phones so it doesn't
overlap the tab pills above it. ── */
@media (max-width: 700px) {
.dz-products__tabs {
overflow-x: auto;
flex-wrap: nowrap !important;
}
.dz-products__bigmark,
.dz-products__big-logo,
.dz-products__brand {
font-size: clamp(40px, 9vw, 64px) !important;
max-width: 100% !important;
}
}