/*
Theme Name: DezignZA
Theme URI: https://dezignza.co.za
Author: DezignZA (Pty) Ltd, Ricardi Louw
Description: Design-led development studio theme for DezignZA. Dark-first, teal-accented brand system ported faithfully from the DezignZA design system (DESIGN.md). Custom apps, web design, UX/UI and brand identity.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dezignza
*/

/* ============================================================
   DezignZA Brand Theme: design tokens (from DESIGN.md)
   ============================================================ */
:root {
  /* Brand colors */
  --navy-dark: #1E2235;
  --navy: #2E3250;
  --teal: #00BCD4;
  --teal-dark: #00ACC1;
  --teal-darker: #0097A7;
  /* Small teal text on a light background: --teal is 2.3:1 on white, which is
     unreadable at label sizes. This clears 4.5:1 and still reads as the brand. */
  --teal-ink: #00727D;
  --amber: #F5A623;
  --orange: #E85D26;
  --white: #FFFFFF;
  --grey-light: #F5F5F5;
  --grey-mid: #666666;
  --charcoal: #333333;
  --border: #E0E0E0;

  /* Overlays */
  --overlay-dark: rgba(30, 34, 53, 0.85);
  --overlay-teal: rgba(0, 188, 212, 0.80);

  /* Type */
  --font-heading: "Montserrat", Arial, Helvetica, sans-serif;
  --font-body: "Open Sans", Arial, Helvetica, sans-serif;

  /* Layout */
  --container: 1200px;

  /* Corner radius scale. Every rounded surface should pull from these rather
     than hardcoding a value, so the softness stays consistent site-wide. */
  --radius-xs: 4px;    /* swatches, legend keys, tiny indicators */
  --radius-sm: 6px;    /* chips, badges, small controls */
  --radius-md: 10px;   /* buttons, inputs, list rows */
  --radius-lg: 14px;   /* cards, demo panels, images */
  --radius-xl: 20px;   /* large feature panels */
  --radius-pill: 999px;
  --radius-btn: var(--radius-md);
}

/* ============================================================
   Corner softening
   Components that carry their own surface (a border, a fill, a
   shadow) get a radius from the scale. Full-bleed bands - .dz-nav,
   .dz-bg-grey, .dz-matcher, .dz-hoststrip, .dz-scale - stay square:
   they run edge to edge, so a radius would only cut the viewport.
   Rules further down that set their own border-radius still win.
   ============================================================ */
.dz-service,
.dz-project,
.dz-project-img,
.dz-testi,
.dz-demo,
.dz-review,
.dz-sx-card,
.dz-sx-panel-in,
.dz-match-result,
.dz-quote-card,
.dz-fact,
.dz-cert,
.dz-cred,
.dz-map,
.dz-pillar,
.dz-wz-summary,
.dz-menu .sub-menu,
.dz-mobile-menu { border-radius: var(--radius-lg); }

.dz-svc-card,
.dz-pill,
.dz-filedrop,
.dz-alert,
.dz-btn--white,
.dz-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea { border-radius: var(--radius-md); }

.dz-badge,
.dz-eyebrow { border-radius: var(--radius-sm); }

/* .dz-project deliberately does NOT clip: .dz-project-img already rounds and
   clips the artwork itself, and clipping here would cut off the image's
   hover shadow. */

/* ============================================================
   Reset / base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--teal); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--teal-dark); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.dz-container { max-width: var(--container); margin-inline: auto; padding-inline: 24px; width: 100%; }

/* Sections butt up flush: kill the flow-layout gap between top-level page
   blocks (each section owns its own padding). */
.wp-block-post-content > * { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/* Same intent, one level further out. WordPress ships
   `:where(.wp-site-blocks) > * { margin-block-start: 24px }`, which lands on
   <main> and <footer> — the only two children after the header. Every band in
   this theme is full-bleed with its own padding, so that gap never read as
   spacing, only as a white stripe under the header and between the teal CTA
   bar and the navy footer. :where() has zero specificity, so this wins. */
.wp-site-blocks > * { margin-block-start: 0; }
.dz-section { padding-block: 64px; }
@media (min-width: 768px) { .dz-section { padding-block: 80px; } }
.dz-bg-white { background: var(--white); }
.dz-bg-grey { background: var(--grey-light); }
.dz-bg-navy { background: var(--navy); }
.dz-bg-navy-dark { background: var(--navy-dark); }
.dz-center { text-align: center; }
.dz-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================================
   Typography helpers
   ============================================================ */
.dz-eyebrow {
  font-family: var(--font-heading);
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--teal);
}
.dz-h2 {
  font-family: var(--font-heading);
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--charcoal);
  line-height: 1.2;
}
.dz-h2.on-dark { color: var(--white); }
.dz-lead {
  margin-top: 12px; font-family: var(--font-body);
  font-size: 16px; color: var(--grey-mid); line-height: 1.7;
  max-width: 640px; margin-inline: auto;
}
.dz-lead.on-dark { color: rgba(255,255,255,.6); }
.dz-section-head { text-align: center; margin-bottom: 48px; }

/* Underline accent on headings */
.dz-underline { position: relative; display: inline-block; padding-bottom: 14px; }
.dz-underline::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: 56px; height: 3px; background: var(--teal);
}

/* ============================================================
   Buttons
   ============================================================ */
.dz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-heading); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 14px 32px; border-radius: var(--radius-btn);
  border: 2px solid transparent; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.dz-btn--primary { background: var(--teal); color: #fff; }
.dz-btn--primary:hover { background: var(--teal-dark); color: #fff; }
.dz-btn--white { background: #fff; color: var(--teal-darker); }
.dz-btn--white:hover { background: var(--grey-light); color: var(--teal-darker); }
.dz-btn--ghost { background: transparent; border-color: #fff; color: #fff; }
.dz-btn--ghost:hover { background: #fff; color: var(--navy); }
.dz-btn--ghost-teal { background: transparent; border-color: var(--teal); color: var(--teal); }
.dz-btn--ghost-teal:hover { background: var(--teal); color: #fff; }
.dz-btn--amber { background: var(--amber); color: #fff; font-weight: 900; }
.dz-btn--amber:hover { background: #e0961c; color: #fff; }
.dz-textlink {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal);
}
.dz-textlink:hover { color: var(--teal-dark); }
.dz-textlink svg { transition: transform .3s ease; }
.dz-textlink:hover svg { transform: translateX(4px); }

/* ============================================================
   Header: TopBar + Main nav
   ============================================================ */
.dz-header { position: sticky; top: 0; z-index: 50; }
.dz-topbar { background: var(--navy-dark); }
.dz-topbar .dz-container {
  display: flex; align-items: center; justify-content: space-between;
  height: 30px;
}
.dz-topbar-left { display: flex; align-items: center; gap: 16px; }
.dz-topbar a, .dz-topbar span {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255,255,255,.7); font-size: 12px;
  /* .dz-label carries a bottom margin for stacked field labels. In here it is
     an inline flex item, so that margin would set the flex line height and
     leave the text riding above the icon. */
  margin: 0; line-height: 1;
}
.dz-topbar a:hover { color: var(--teal); }
.dz-topbar-addr { color: rgba(255,255,255,.7); font-size: 12px; }
@media (max-width: 767px) { .dz-topbar-addr, .dz-topbar .dz-label { display: none; } }

.dz-nav { background: #fff; border-bottom: 1px solid rgba(245,245,245,.5); }
.dz-nav .dz-container {
  display: flex; align-items: center; justify-content: space-between;
  /* min-height, not height: a fixed 60px meant a taller logo overflowed the
     bar and sat on top of the page instead of setting the bar's height. */
  min-height: 60px; padding-block: 8px;
}
/* The brand lockup is near-square (686x356), not a wide wordmark: at 32px tall
   it renders only ~62px wide and the .co.za microtext turns to mush. */
/* inline-flex so the link takes the image's height: as a plain inline <a> the
   logo overflowed the bar instead of growing it. */
.dz-logo { display: inline-flex; align-items: center; }
.dz-logo img { height: 74px; width: auto; }
/* Drop back on small screens: at 92px the lockup would eat a phone header. */
@media (max-width: 640px) { .dz-logo img { height: 50px; } }
.dz-menu { display: none; align-items: center; gap: 32px; }
@media (min-width: 900px) { .dz-menu { display: flex; } }
.dz-menu a {
  font-family: var(--font-heading); font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--charcoal);
}
.dz-menu a:hover, .dz-menu .current-menu-item > a, .dz-menu .current_page_item > a { color: var(--teal); }
.dz-menu li { position: relative; }
.dz-menu .sub-menu {
  position: absolute; left: 0; top: 100%; min-width: 240px;
  background: #fff; border: 1px solid var(--grey-light);
  box-shadow: 0 18px 40px -20px rgba(30,34,53,.4);
  padding-block: 8px; display: none; z-index: 60;
}
.dz-menu li:hover > .sub-menu { display: block; }
.dz-menu .sub-menu a {
  display: block; padding: 10px 16px; font-family: var(--font-body);
  font-size: 14px; text-transform: none; letter-spacing: normal; font-weight: 400;
}
.dz-menu .sub-menu a:hover { background: rgba(245,245,245,.6); color: var(--teal); }

.dz-burger {
  display: inline-flex; background: none; border: 0; padding: 8px;
  color: var(--charcoal);
}
@media (min-width: 900px) { .dz-burger { display: none; } }
.dz-mobile-menu { display: none; background: #fff; border-top: 1px solid rgba(245,245,245,.5); }
.dz-mobile-menu.open { display: block; }
.dz-mobile-menu ul { padding: 16px 24px; }
.dz-mobile-menu a {
  display: block; padding: 12px 8px; font-family: var(--font-heading);
  font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--charcoal);
}
.dz-mobile-menu a:hover { color: var(--teal); }
.dz-mobile-menu .sub-menu { margin-left: 12px; border-left: 1px solid rgba(245,245,245,.7); padding-left: 12px; }
.dz-mobile-menu .sub-menu a { text-transform: none; font-family: var(--font-body); font-weight: 400; color: var(--grey-mid); padding: 8px; }

/* ============================================================
   Hero (home)
   ============================================================ */
.dz-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(to bottom, var(--navy), var(--navy-dark));
  min-height: 600px; display: flex; align-items: center;
}
@media (min-width: 768px) { .dz-hero { min-height: 680px; } }
.dz-hero canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dz-hero .dz-container { position: relative; z-index: 2; padding-block: 96px; }
.dz-hero-eyebrow {
  font-family: var(--font-heading); font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal);
  margin-bottom: 16px;
}
.dz-hero h1 {
  font-family: var(--font-heading); font-weight: 900;
  font-size: clamp(36px, 6vw, 56px); line-height: 1.05;
  text-transform: uppercase; letter-spacing: 0.04em; color: #fff;
  max-width: 56rem; margin: 0;
}
.dz-shimmer {
  background: linear-gradient(90deg, var(--teal) 0%, #7fe9f5 50%, var(--teal) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: dz-shimmer 4s linear infinite;
}
@keyframes dz-shimmer { to { background-position: 200% center; } }
.dz-hero p.dz-hero-sub {
  margin-top: 24px; color: rgba(255,255,255,.75);
  font-size: clamp(16px, 2vw, 18px); max-width: 42rem; line-height: 1.7;
}
.dz-hero-cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; }
@media (max-width: 540px) { .dz-hero-cta { flex-direction: column; } .dz-hero-cta .dz-btn { width: 100%; } }

/* ============================================================
   Page hero (inner pages)
   ============================================================ */
.dz-pagehero { background: var(--navy); position: relative; overflow: hidden; }
.dz-pagehero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--navy), var(--navy-dark));
}
.dz-pagehero .dz-container { position: relative; z-index: 2; padding-block: 56px; }
@media (min-width: 768px) { .dz-pagehero .dz-container { padding-block: 72px; } }
.dz-pagehero h1 {
  font-family: var(--font-heading); font-weight: 900;
  font-size: clamp(32px, 5vw, 44px); text-transform: uppercase;
  letter-spacing: 0.04em; color: #fff; line-height: 1.1;
}
.dz-pagehero p { margin-top: 16px; color: rgba(255,255,255,.7); max-width: 42rem; font-size: 16px; line-height: 1.7; }

/* ============================================================
   Stats bar
   ============================================================ */
.dz-stats { background: var(--navy-dark); border-block: 1px solid rgba(255,255,255,.1); }
.dz-stats .dz-container { padding-block: 32px; }
.dz-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
@media (min-width: 640px) { .dz-stats-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .dz-stats-grid { grid-template-columns: repeat(5, 1fr); } }
.dz-stat { text-align: center; }
@media (min-width: 1024px) { .dz-stat { text-align: left; } }
.dz-stat .bar { display: block; width: 28px; height: 2px; background: var(--teal); margin: 0 auto 8px; }
@media (min-width: 1024px) { .dz-stat .bar { margin-left: 0; } }
.dz-stat .val {
  font-family: var(--font-heading); font-weight: 900; font-size: 18px;
  text-transform: uppercase; letter-spacing: 0.02em; color: #fff; line-height: 1.1;
}
.dz-stat .val.accent { color: var(--teal); text-shadow: 0 0 16px rgba(0,188,212,.5); }
.dz-stat .lbl {
  font-family: var(--font-heading); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,.55); margin-top: 2px;
}

/* ============================================================
   Service cards
   ============================================================ */
.dz-grid { display: grid; gap: 24px; }
.dz-grid.cols-4 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .dz-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dz-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.dz-grid.cols-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .dz-grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dz-grid.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.dz-grid.cols-2 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .dz-grid.cols-2 { grid-template-columns: repeat(2, 1fr); } }

.dz-service {
  position: relative; display: flex; flex-direction: column; height: 100%;
  overflow: hidden; padding: 24px; text-align: center; background: #fff;
  border: 1px solid var(--grey-light);
}
.dz-service::before {
  content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 40px;
  background: var(--teal); transition: width .3s ease;
}
.dz-service:hover::before { width: 100%; }
.dz-service.flagship { background: var(--navy-dark); border: 0; border-left: 4px solid var(--teal); }
.dz-service .flag-label {
  font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--teal); margin-bottom: 12px;
}
.dz-icon-ring {
  margin: 0 auto 20px; display: flex; align-items: center; justify-content: center;
  width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--teal); background: #fff;
  transition: transform .3s ease;
}
.dz-service.flagship .dz-icon-ring { background: transparent; }
.dz-service:hover .dz-icon-ring { transform: translateY(-4px); }
.dz-icon-ring svg { width: 32px; height: 32px; color: var(--teal); stroke: var(--teal); }
.dz-service h3 {
  font-family: var(--font-heading); font-size: 16px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--charcoal);
  transition: color .2s ease;
}
.dz-service.flagship h3 { color: #fff; }
.dz-service:hover h3 { color: var(--teal); }
.dz-service p { margin-top: 8px; font-size: 14px; color: var(--grey-mid); line-height: 1.6; }
.dz-service.flagship p { color: rgba(255,255,255,.7); }
.dz-service .explore {
  margin-top: 16px; font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal);
  display: inline-flex; align-items: center; gap: 4px;
}

/* ============================================================
   Project cards
   ============================================================ */
/* The shadow rides the image, not the card. Grid items stretch to the tallest
   card in the row, so a card with short copy has dead space below it - shadowing
   the card box turned that into a big empty panel on hover. The image is the
   actual object, and it is always exactly its own size. */
.dz-project {
  display: block; background: #fff;
  transition: transform .3s ease;
}
.dz-project:hover,
.dz-project:focus-visible { transform: translateY(-4px); }
.dz-project-img {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--grey-light);
  transition: box-shadow .3s ease;
}
.dz-project:hover .dz-project-img,
.dz-project:focus-visible .dz-project-img { box-shadow: 0 18px 38px -20px rgba(30, 34, 53, .55); }
.dz-project-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.dz-project:hover .dz-project-img img,
.dz-project:focus-visible .dz-project-img img { transform: scale(1.04); }
.dz-project-overlay {
  position: absolute; inset: auto 0 0 0; padding: 32px 14px 12px;
  background: linear-gradient(to top, rgba(30, 34, 53, .88), rgba(30, 34, 53, 0));
  display: flex; align-items: center; justify-content: flex-start; gap: 6px; color: #fff;
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.dz-project:hover .dz-project-overlay,
.dz-project:focus-visible .dz-project-overlay { opacity: 1; transform: translateY(0); }
/* Without an explicit size the arrow has no intrinsic dimensions and fills the flex row. */
.dz-project-overlay svg { width: 14px; height: 14px; flex: none; transition: transform .25s ease; }
.dz-project:hover .dz-project-overlay svg,
.dz-project:focus-visible .dz-project-overlay svg { transform: translateX(3px); }
.dz-badge {
  position: absolute; top: 12px; left: 12px; background: rgba(30,34,53,.85);
  color: #fff; font-family: var(--font-heading); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px;
  /* Scaling the img on hover gives it a stacking context; being later in the
     DOM it then paints over an auto-z-index badge and the label vanishes. */
  z-index: 2;
}
.dz-project-body { padding: 16px 4px; }
.dz-project-body h3 {
  font-family: var(--font-heading); font-size: 16px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--charcoal);
  transition: color .2s ease;
}
.dz-project:hover .dz-project-body h3 { color: var(--teal); }
.dz-project-body p { margin-top: 6px; font-size: 14px; color: var(--grey-mid); line-height: 1.4; }

/* ============================================================
   Testimonials
   ============================================================ */
.dz-testi-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .dz-testi-grid { grid-template-columns: repeat(3, 1fr); } }
.dz-testi {
  background: #fff; border: 1px solid var(--grey-light); padding: 28px;
  display: flex; flex-direction: column; height: 100%;
}
.dz-stars { color: var(--orange); letter-spacing: 2px; margin-bottom: 14px; font-size: 15px; }
.dz-testi blockquote { margin: 0; font-style: italic; font-size: 14px; color: var(--charcoal); line-height: 1.7; }
.dz-testi .author { margin-top: 16px; }
.dz-testi .author .name { font-family: var(--font-heading); font-weight: 600; font-size: 13px; color: var(--charcoal); }
.dz-testi .author .co { font-size: 13px; color: var(--grey-mid); }

/* ============================================================
   Process / How we work
   ============================================================ */
.dz-process { position: relative; max-width: 40rem; margin: 40px auto 0; }
.dz-process::before { content: ""; position: absolute; left: 32px; top: 8px; bottom: 8px; width: 3px; margin-left: -1.5px; background: rgba(0,188,212,.3); }
.dz-process li { position: relative; display: flex; align-items: flex-start; gap: 20px; padding-bottom: 40px; }
.dz-process li:last-child { padding-bottom: 0; }
.dz-process .circle {
  position: relative; z-index: 2; flex-shrink: 0; display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%; background: var(--teal);
}
.dz-process .circle span { font-family: var(--font-heading); font-size: 18px; font-weight: 900; color: #fff; }
.dz-process h3 { font-family: var(--font-heading); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--charcoal); padding-top: 8px; }
.dz-process p { margin-top: 8px; font-size: 14px; color: var(--grey-mid); line-height: 1.6; }

/* Horizontal timeline variant (desktop) */
.dz-timeline { margin-top: 48px; }
.dz-timeline-row { position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (min-width: 768px) { .dz-timeline-row { grid-template-columns: repeat(6, 1fr); } }
.dz-tl-step { text-align: center; }
.dz-tl-step .circle { margin: 0 auto 12px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--teal); background: #fff; }
.dz-tl-step .circle span { font-family: var(--font-heading); font-weight: 900; color: var(--teal); }
.dz-tl-step .nm { font-family: var(--font-heading); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--charcoal); }
.dz-tl-step.active .circle { background: var(--teal); }
.dz-tl-step.active .circle span { color: #fff; }

/* ============================================================
   CTA bar
   ============================================================ */
.dz-ctabar { background: var(--teal); padding-block: 20px; }
.dz-ctabar .dz-container { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 16px; }
@media (min-width: 640px) { .dz-ctabar .dz-container { flex-direction: row; } }
.dz-ctabar p { color: #fff; font-family: var(--font-heading); font-size: clamp(16px, 2vw, 18px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-align: center; }
@media (min-width: 640px) { .dz-ctabar p { text-align: left; } }
.dz-ctabar .dz-btn--white:hover { background: var(--navy-dark); color: #fff; }

/* ============================================================
   Enterprise callout / trust
   ============================================================ */
.dz-callout { background: var(--navy-dark); padding: 32px; position: relative; overflow: hidden; }
@media (min-width: 768px) { .dz-callout { padding: 48px; } }
.dz-callout::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--teal); }
.dz-callout .ey { font-family: var(--font-heading); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal); margin-bottom: 12px; }
.dz-callout .big { font-family: var(--font-heading); font-size: clamp(20px, 3vw, 28px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; line-height: 1.3; max-width: 56rem; }
.dz-callout .big .teal { color: var(--teal); }
.dz-chips { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.dz-chip { font-family: var(--font-heading); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,.6); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); padding: 6px 12px; border-radius: var(--radius-xs); }

/* Prose blocks */
.dz-prose { max-width: 48rem; }
.dz-prose h2 { font-family: var(--font-heading); font-size: clamp(24px, 3.5vw, 28px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--charcoal); margin-bottom: 24px; }
.dz-prose p { font-size: 16px; color: var(--grey-mid); line-height: 1.7; margin-bottom: 16px; }
.dz-prose strong { color: var(--charcoal); font-weight: 600; }
.dz-quote-block { max-width: 48rem; border-left: 3px solid var(--teal); padding-left: 28px; }
.dz-quote-block .ey { font-family: var(--font-heading); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal); margin-bottom: 8px; }
.dz-quote-block p { font-size: clamp(16px, 2vw, 18px); color: var(--charcoal); line-height: 1.7; }

/* Milestone / credential cards */
.dz-milestone { text-align: center; }
.dz-milestone .ring { margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--teal); background: #fff; }
.dz-milestone .ring span { font-family: var(--font-heading); font-size: 14px; font-weight: 900; color: var(--teal); }
.dz-milestone h3 { font-family: var(--font-heading); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--charcoal); }
.dz-milestone p { margin-top: 8px; font-size: 14px; color: var(--grey-mid); line-height: 1.6; }
.dz-cred { background: var(--grey-light); padding: 24px; border-left: 3px solid var(--teal); }
.dz-cred-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dz-cred-head .ring { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--teal); background: #fff; flex-shrink: 0; }
.dz-cred-head .ring svg { width: 16px; height: 16px; color: var(--teal); }
.dz-cred-head h3 { font-family: var(--font-heading); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--charcoal); }
.dz-cred p { font-size: 14px; color: var(--grey-mid); line-height: 1.6; }

/* Tools grid (dark) */
.dz-tools-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (min-width: 640px) { .dz-tools-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .dz-tools-grid { grid-template-columns: repeat(6, 1fr); } }
.dz-tool { text-align: center; }
.dz-tool .ring { margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--teal); background: var(--navy); }
.dz-tool .ring svg { width: 28px; height: 28px; color: var(--teal); }
.dz-tool p { font-family: var(--font-heading); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255,255,255,.8); }

/* Toolkit / tech stack (light) */
.dz-stack-group { margin-bottom: 28px; }
.dz-stack-label { font-family: var(--font-heading); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--grey-mid); margin-bottom: 12px; }
.dz-stack-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.dz-pill { font-family: var(--font-heading); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--charcoal); background: #fff; border: 1px solid var(--border); padding: 8px 16px; border-radius: var(--radius-xs); }
.dz-pill:hover { border-color: var(--teal); color: var(--teal); }

/* ============================================================
   Portfolio filter
   ============================================================ */
.dz-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 40px; }
.dz-filter button {
  font-family: var(--font-heading); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--charcoal);
  background: #fff; border: 1px solid var(--border); padding: 8px 18px; border-radius: var(--radius-xs);
  transition: all .2s ease;
}
.dz-filter button.active, .dz-filter button:hover { background: var(--teal); border-color: var(--teal); color: #fff; }

/* ============================================================
   Forms (contact / quote)
   ============================================================ */
.dz-form-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .dz-form-grid { grid-template-columns: repeat(2, 1fr); } }
.dz-field label { display: block; font-family: var(--font-heading); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--charcoal); margin-bottom: 8px; }
.dz-field label .req { color: var(--orange); }
.dz-field input, .dz-field select, .dz-field textarea {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--charcoal);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 12px 14px;
  transition: border-color .2s ease;
}
.dz-field input:focus, .dz-field select:focus, .dz-field textarea:focus { outline: none; border-color: var(--teal); }
.dz-field.full { grid-column: 1 / -1; }
.dz-field textarea { min-height: 150px; resize: vertical; }
.dz-form-note { font-size: 13px; color: var(--grey-mid); margin-top: 16px; }
.dz-alert { padding: 14px 16px; border-radius: var(--radius-xs); margin-bottom: 24px; font-size: 14px; }
.dz-alert.success { background: rgba(0,188,212,.1); border: 1px solid var(--teal); color: var(--teal-darker); }
.dz-alert.error { background: rgba(232,93,38,.08); border: 1px solid var(--orange); color: var(--orange); }

/* Contact info column */
.dz-contact-grid { display: grid; grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 900px) { .dz-contact-grid { grid-template-columns: 1.4fr 1fr; } }
.dz-contact-item { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
.dz-contact-item .ring { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--teal); background: #fff; flex-shrink: 0; }
.dz-contact-item .ring svg { width: 18px; height: 18px; color: var(--teal); }
.dz-contact-item .lbl { font-family: var(--font-heading); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--charcoal); }
.dz-contact-item .v { font-size: 15px; color: var(--grey-mid); }
.dz-map { background: var(--grey-light); aspect-ratio: 16/9; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--grey-mid); gap: 8px; margin-top: 24px; }

/* ============================================================
   Footer
   ============================================================ */
.dz-footer { background: var(--navy-dark); }
.dz-footer-main { padding-block: 64px; }
@media (min-width: 768px) { .dz-footer-main { padding-block: 80px; } }
.dz-footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 640px) { .dz-footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dz-footer-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
/* Scoped to the logo: as `.dz-footer img` this outranked `.dz-logo img` and
   pinned the brand lockup to 32px, and it would resize any other footer
   image too. */
.dz-footer .dz-logo img { margin-bottom: 16px; }
.dz-footer-tag { color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.7; }
.dz-footer h4 { color: #fff; font-family: var(--font-heading); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
.dz-footer li { margin-bottom: 10px; }
.dz-footer a, .dz-footer .fi { color: rgba(255,255,255,.6); font-size: 14px; }
.dz-footer a:hover { color: var(--teal); }
.dz-footer .fi { display: flex; align-items: flex-start; gap: 10px; }
.dz-footer .fi svg { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; }
.dz-copyright { border-top: 1px solid rgba(255,255,255,.1); }
.dz-copyright .dz-container { padding-block: 16px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; }
@media (min-width: 640px) { .dz-copyright .dz-container { flex-direction: row; } }
.dz-copyright p { color: rgba(255,255,255,.4); font-size: 12px; }

/* ============================================================
   Reveal animation
   ============================================================ */
/* --dz-from lets a reveal slide in from a direction; it defaults to a plain
   fade-up, so anything that doesn't set it behaves exactly as before.
   The easing decelerates hard at the end, which reads as "settling into place"
   rather than the linear-ish drift of plain `ease`. */
/* No will-change here on purpose. It reads as a free optimisation, but it is a
   standing promise: every matching element gets its own compositor layer from
   page load and holds it until it reveals. With ~34 .dz-reveal elements on the
   home page that is 34 layers the compositor reblends on every scroll frame,
   which strobes. Browsers already promote an element for the duration of an
   opacity/transform transition, which is exactly when it's needed. */
.dz-reveal {
  opacity: 0;
  transform: translate3d(var(--dz-from-x, 0), var(--dz-from-y, 24px), 0);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--dz-delay, 0ms);
}
.dz-reveal.in { opacity: 1; transform: none; }

/* Section intros: eyebrow, heading and lead cascade rather than land together. */
.dz-section-head.dz-reveal > * {
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1);
}
.dz-section-head.dz-reveal.in > * { opacity: 1; transform: none; }
.dz-section-head.dz-reveal.in > *:nth-child(1) { transition-delay: 60ms; }
.dz-section-head.dz-reveal.in > *:nth-child(2) { transition-delay: 140ms; }
.dz-section-head.dz-reveal.in > *:nth-child(3) { transition-delay: 220ms; }

/* Alternating rows: each half drifts in from the edge it already lives on, so
   the motion reinforces the zig-zag instead of fighting it. Only at desktop
   width - once the row stacks, sideways motion makes no sense. */
@media (min-width: 900px) {
  .dz-alt .dz-alt-copy { --dz-from-x: -30px; --dz-from-y: 10px; }
  .dz-alt .dz-alt-demo { --dz-from-x: 30px; --dz-from-y: 10px; --dz-delay: 110ms; }
  .dz-alt:nth-child(even) .dz-alt-copy { --dz-from-x: 30px; }
  .dz-alt:nth-child(even) .dz-alt-demo { --dz-from-x: -30px; }
}

/* ---- Interaction nudge ----
   A demo that looks like a screenshot never gets touched. On first sight each
   demo pulses its primary control a few times; JS drops .nudge the moment the
   user engages, so it never competes with someone already using it. */
/* transform only: box-shadow repaints every frame, and this fires as the demo
   scrolls into view - i.e. exactly while the user is scrolling. */
@keyframes dz-nudge {
  0%, 55%, 100% { transform: translate3d(0, 0, 0); }
  22% { transform: translate3d(0, -3px, 0); }
  38% { transform: translate3d(0, -1px, 0); }
}
.dz-demo.nudge[data-demo="invoice"] .dz-demo-add,
.dz-demo.nudge[data-demo="portal"] .dz-demo-add,
.dz-demo.nudge[data-demo="jobs"] .dz-job:not(.done),
.dz-demo.nudge[data-demo="booking"] .dz-slot:not(.taken),
.dz-demo.nudge[data-demo="dash"] .dz-range button:not(.on),
.dz-demo.nudge[data-demo="email"] .dz-mail-chip,
.dz-demo.nudge[data-demo="twin"] .play {
  animation: dz-nudge 2.6s cubic-bezier(.22, 1, .36, 1) 2;
}
/* Only the first candidate should pulse - not the whole row of them. */
.dz-demo.nudge[data-demo="jobs"] .dz-job:not(.done) ~ .dz-job,
.dz-demo.nudge[data-demo="booking"] .dz-slot:not(.taken) ~ .dz-slot,
.dz-demo.nudge[data-demo="dash"] .dz-range button:not(.on) ~ button,
.dz-demo.nudge[data-demo="email"] .dz-mail-chip ~ .dz-mail-chip { animation: none; }

/* The hint line fades up once the demo has settled. */
.dz-demo .dz-demo-hint { opacity: 0; transition: opacity .5s ease .5s; }
.dz-demo.ready .dz-demo-hint { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .dz-reveal { opacity: 1; transform: none; transition: none; }
  .dz-section-head.dz-reveal > * { opacity: 1; transform: none; transition: none; }
  .dz-demo .dz-demo-hint { opacity: 1; transition: none; }
  .dz-demo.nudge [class] { animation: none !important; }
  .dz-shimmer { animation: none; }
  html { scroll-behavior: auto; }
  .dz-project,
  .dz-project-img img,
  .dz-project-overlay,
  .dz-project-overlay svg { transition: none; }
  .dz-project:hover,
  .dz-project:focus-visible { transform: none; }
  .dz-project:hover .dz-project-img img,
  .dz-project:focus-visible .dz-project-img img { transform: none; }
}

/* Generic WP content (single posts / fallback page) */
.dz-entry { max-width: 48rem; margin-inline: auto; }
.dz-entry h1 { font-size: clamp(28px,4vw,40px); text-transform: uppercase; letter-spacing: 0.04em; color: var(--charcoal); margin-bottom: 24px; }
.dz-entry-content p { margin-bottom: 16px; color: var(--grey-mid); line-height: 1.7; }
.dz-entry-content a { text-decoration: underline; }
.dz-entry-content img { margin-block: 24px; }

/* ============================================================
   Block-theme (FSE) compatibility shims
   ============================================================ */

/* Core button blocks re-skinned as DezignZA buttons.
   (The wrapper carries .dz-btn / variant; the link is .wp-element-button.)
   The wrapper must NOT paint its own chrome: only the inner link is the
   button, otherwise both render a box (double border). */
.wp-block-button.dz-btn,
.wp-block-button[class*="dz-btn--"] {
  padding: 0; border: 0; background: transparent; display: inline-block;
}
.wp-block-button.dz-btn .wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-heading); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 14px 32px; border-radius: var(--radius-btn);
  background: var(--teal); color: var(--white); border: 0;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.wp-block-button.dz-btn .wp-block-button__link:hover { background: var(--teal-dark); }
.wp-block-button.dz-btn--white .wp-block-button__link { background: var(--white); color: var(--navy-dark); }
.wp-block-button.dz-btn--white .wp-block-button__link:hover { background: var(--grey-light); }
.wp-block-button.dz-btn--ghost .wp-block-button__link { background: transparent; color: var(--white); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }
.wp-block-button.dz-btn--ghost .wp-block-button__link:hover { background: rgba(255,255,255,.1); }
.wp-block-button.dz-btn--ghost-teal .wp-block-button__link { background: transparent; color: var(--teal); box-shadow: inset 0 0 0 2px var(--teal); }
.wp-block-button.dz-btn--ghost-teal .wp-block-button__link:hover { background: rgba(0,188,212,.1); }
.wp-block-buttons.dz-hero-cta { gap: 16px; flex-wrap: wrap; }

/* Hero canvas sits behind the (wp:html) markup as a direct child of .dz-hero. */
.dz-hero { position: relative; }
.dz-hero > .dz-container { position: relative; z-index: 1; }

/* Footer link lists rendered as core list blocks. */
.dz-footer .dz-footer-list { margin: 0; padding: 0; list-style: none; }

/* Logo text fallback when no logo image is set. */
.dz-logo .dz-logo-text {
  font-family: var(--font-heading); font-weight: 900; font-size: 22px;
  letter-spacing: .04em; color: currentColor;
}
.dz-footer .dz-logo .dz-logo-text { color: var(--white); }

/* Core navigation block adopting the dz menu spacing. */
.dz-nav .wp-block-navigation { gap: 28px; }

/* Footer social block. */
.dz-footer .dz-social { display: flex; gap: 14px; margin-top: 16px; }
.dz-footer .dz-social a { color: rgba(255,255,255,.7); }
.dz-footer .dz-social a:hover { color: var(--teal); }

/* Copyright row rendered by the copyright block. */
.dz-copyright .dz-copyright-inner { display: flex; flex-direction: column; gap: 4px; }

/* ============================================================
   QUOTE WIZARD (dezignza/contact-form variant="quote")
   ============================================================ */
.dz-wizard { max-width: var(--container); margin-inline: auto; }
.dz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dz-wz-layout { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 1000px) { .dz-wz-layout { grid-template-columns: 1fr 320px; } }

/* Progress */
.dz-wz-progress { margin-bottom: 32px; }
.dz-wz-progress-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.dz-wz-step-label { font-family: var(--font-heading); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--teal); }
.dz-wz-pct { font-family: var(--font-heading); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--grey-mid); }
.dz-wz-bar { height: 6px; width: 100%; background: var(--grey-light); border-radius: var(--radius-xs); overflow: hidden; }
.dz-wz-bar-fill { height: 100%; width: 0; background: var(--teal); transition: width .45s ease; }

/* Step heads */
.dz-wz-head { margin-bottom: 28px; }
.dz-wz-head h2 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--charcoal); font-size: 26px; line-height: 1.15; }
@media (min-width: 768px) { .dz-wz-head h2 { font-size: 32px; } }
.dz-wz-head p { margin-top: 8px; color: var(--grey-mid); font-size: 16px; }
.dz-wz-empty { color: var(--grey-mid); }

/* Service cards (step 1) */
.dz-svc-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .dz-svc-grid { grid-template-columns: repeat(2, 1fr); } }
.dz-svc-card { position: relative; display: flex; gap: 16px; padding: 20px; background: #fff; border: 2px solid var(--border); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.dz-svc-card:hover { border-color: rgba(0,188,212,.5); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.dz-svc-card:has(input:checked) { border-color: var(--teal); box-shadow: 0 2px 8px rgba(0,188,212,.2); }
.dz-svc-card input { position: absolute; opacity: 0; pointer-events: none; }
.dz-svc-icon { flex: none; width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--teal); color: var(--teal); background: #fff; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.dz-svc-icon svg { width: 20px; height: 20px; }
.dz-svc-card:has(input:checked) .dz-svc-icon { background: var(--teal); color: #fff; }
.dz-svc-title { display: block; font-family: var(--font-heading); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--charcoal); line-height: 1.15; }
.dz-svc-desc { display: block; margin-top: 6px; color: var(--grey-mid); font-size: 14px; line-height: 1.35; }
.dz-svc-check { position: absolute; top: 14px; right: 14px; width: 20px; height: 20px; border-radius: 50%; background: var(--teal); opacity: 0; display: flex; align-items: center; justify-content: center; }
.dz-svc-check::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 700; }
.dz-svc-card:has(input:checked) .dz-svc-check { opacity: 1; }

/* Service detail blocks (step 2) */
.dz-wz-svc { margin-bottom: 36px; border-left: 3px solid var(--teal); padding-left: 20px; }
.dz-svc-block-title { font-family: var(--font-heading); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--charcoal); margin-bottom: 20px; }
.dz-sub { margin-bottom: 28px; }
.dz-sub h4 { font-family: var(--font-heading); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); margin-bottom: 12px; }
.dz-sub-note { margin: -6px 0 12px; font-size: 12px; color: var(--grey-mid); }

/* Pills (card checkbox / radio) */
.dz-pill-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 560px) { .dz-pill-grid { grid-template-columns: repeat(2, 1fr); }
	.dz-pill-grid.dz-cols-3 { grid-template-columns: repeat(3, 1fr); }
	.dz-pill-grid.dz-cols-4 { grid-template-columns: repeat(4, 1fr); }
	.dz-pill-grid.dz-cols-5 { grid-template-columns: repeat(5, 1fr); } }
.dz-pill { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border: 2px solid var(--border); cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.dz-pill:hover { border-color: rgba(0,188,212,.5); }
.dz-pill:has(input:checked) { border-color: var(--teal); box-shadow: 0 2px 8px rgba(0,188,212,.15); }
.dz-pill input { position: absolute; opacity: 0; pointer-events: none; }
.dz-pill-box { flex: none; width: 20px; height: 20px; border: 2px solid rgba(102,102,102,.4); display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s; }
.dz-pill input[type="radio"] ~ .dz-pill-box { border-radius: 50%; }
.dz-pill:has(input:checked) .dz-pill-box { background: var(--teal); border-color: var(--teal); }
.dz-pill:has(input:checked) .dz-pill-box::after { content: "✓"; color: #fff; font-size: 12px; font-weight: 700; }
.dz-pill-text { flex: 1; min-width: 0; }
.dz-pill-label { display: block; font-family: var(--font-heading); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--charcoal); line-height: 1.15; }
.dz-pill-desc { display: block; margin-top: 2px; font-size: 12px; color: var(--grey-mid); line-height: 1.3; }
.dz-pill-hint { font-family: var(--font-heading); font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--amber); }

/* Inputs */
.dz-stack { display: flex; flex-direction: column; gap: 20px; }
.dz-label { display: block; font-family: var(--font-heading); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--charcoal); margin-bottom: 8px; }
.dz-label .req { color: var(--orange); }
.dz-input { width: 100%; border: 1px solid #ccc; background: #fff; padding: 11px 12px; font-family: var(--font-body); font-size: 14px; color: var(--charcoal); border-radius: var(--radius-xs); }
.dz-input:focus { outline: none; border-color: var(--teal); }
.dz-textarea { min-height: 120px; resize: vertical; }
.dz-cond { margin-top: 12px; }

/* File drops */
.dz-files { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; }
.dz-files h4 { font-family: var(--font-heading); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); }
.dz-filedrop { display: flex; align-items: center; gap: 12px; border: 2px dashed var(--border); background: #fff; padding: 14px 16px; cursor: pointer; transition: border-color .2s; }
.dz-filedrop:hover { border-color: var(--teal); }
.dz-filedrop-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--teal); color: var(--teal); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.dz-filedrop-txt strong { display: block; font-family: var(--font-heading); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--charcoal); }
.dz-filedrop-txt em { font-style: normal; font-size: 12px; color: var(--grey-mid); }
.dz-filedrop input[type="file"] { flex: 1; font-size: 12px; color: var(--grey-mid); }

/* Review (step 6) */
.dz-review { border: 1px solid var(--border); background: #fff; padding: 24px; }
.dz-review-b { border-bottom: 1px solid var(--border); padding-bottom: 16px; margin-bottom: 16px; }
.dz-review-b:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.dz-review-t { font-family: var(--font-heading); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--teal); margin-bottom: 6px; }
.dz-review-v { color: var(--charcoal); font-size: 14px; }
.dz-review-v p { margin: 0 0 4px; }
.dz-review-hint, .dz-sum-empty { color: var(--grey-mid); font-size: 14px; }
.dz-terms { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; cursor: pointer; }
.dz-terms input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--teal); }
.dz-terms span { font-size: 14px; color: var(--grey-mid); line-height: 1.5; }

/* Nav */
.dz-wz-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; border-top: 1px solid var(--border); padding-top: 24px; }
.dz-wz-back { background: none; border: 0; font-family: var(--font-heading); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--grey-mid); cursor: pointer; }
.dz-wz-back:hover:not(:disabled) { color: var(--teal); }
.dz-wz-back:disabled { opacity: .3; cursor: not-allowed; }
.dz-wz-next, .dz-wz-submit { margin-left: auto; }
.dz-btn.dz-wz-next:disabled, .dz-btn.dz-wz-submit:disabled { opacity: .4; cursor: not-allowed; }

/* Summary sidebar */
.dz-wz-summary { position: sticky; top: 24px; background: var(--grey-light); border-top: 3px solid var(--teal); padding: 24px; }
.dz-wz-summary h3 { font-family: var(--font-heading); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--charcoal); margin-bottom: 16px; }
.dz-sum-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.dz-sum-k { display: block; font-family: var(--font-heading); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--grey-mid); }
.dz-sum-v { display: block; color: var(--charcoal); font-size: 14px; }

/* Success screen */
.dz-wz-success { text-align: center; max-width: 640px; margin-inline: auto; padding: 40px 0; }
.dz-wz-success-ic { width: 88px; height: 88px; margin: 0 auto 28px; border-radius: 50%; border: 3px solid var(--teal); color: var(--teal); font-size: 42px; display: flex; align-items: center; justify-content: center; }
.dz-wz-success h2 { font-family: var(--font-heading); font-size: 32px; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: var(--charcoal); }
.dz-wz-success p { margin-top: 16px; color: var(--grey-mid); font-size: 17px; line-height: 1.6; }
.dz-wz-success-cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* No-JS fallback: reveal every step, hide the JS-only chrome. */
.dz-wizard:not([data-js]) .dz-wz-progress,
.dz-wizard:not([data-js]) .dz-wz-back,
.dz-wizard:not([data-js]) .dz-wz-next { display: none; }
/* Both buttons need this, not just submit. `.dz-btn` sets `display:inline-flex`,
   which outranks the user-agent `[hidden] { display:none }` — so the JS setting
   `nextBtn.hidden = true` on the last step had no visual effect, and Continue sat
   next to Submit Request on the review screen. */
.dz-wizard[data-js] .dz-wz-submit[hidden],
.dz-wizard[data-js] .dz-wz-next[hidden] { display: none; }

/* ============================================================
   FIXES: topbar icons, service card alignment, section CTAs
   ============================================================ */
/* Unsized inline SVGs default to 300x150 and blow up the topbar. */
.dz-topbar svg { width: 13px; height: 13px; flex: none; }
.dz-topbar a, .dz-topbar-addr { white-space: nowrap; }
.dz-contact-stack .fi svg { width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0; }
.dz-contact-stack .fi { display: inline-flex; align-items: flex-start; gap: 10px; }
.dz-contact-stack li + li { margin-top: 10px; }

/* Even service card tops: every card reserves the same label slot. */
.dz-service { padding-top: 32px; }
.dz-service .flag-label { min-height: 22px; }
.dz-service:not(.flagship)::after {
  content: ""; display: block; height: 22px; margin-bottom: 12px; order: -1;
}

/* Ghost-button section CTAs replace bare "View all" text links. */
.dz-section-more { margin-top: 44px; }

/* ============================================================
   HERO: staggered word blur-in
   ============================================================ */
.dz-hero h1 .dz-word {
  display: inline-block; margin-right: 0.25em;
  opacity: 0; transform: translateY(0.5em); filter: blur(8px);
  transition: opacity .6s cubic-bezier(.22,1,.36,1),
              transform .6s cubic-bezier(.22,1,.36,1),
              filter .6s cubic-bezier(.22,1,.36,1);
  will-change: transform, filter;
}
.dz-hero h1.words-in .dz-word { opacity: 1; transform: none; filter: blur(0); }
/* Shimmer needs the gradient clip per word once wrapped. */
.dz-hl-line.dz-shimmer .dz-word {
  background: linear-gradient(90deg, var(--teal) 0%, #7fe9f5 50%, var(--teal) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: dz-shimmer 4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .dz-hero h1 .dz-word { opacity: 1; transform: none; filter: none; transition: none; }
}

/* Magnetic buttons + tilt cards: transform transitions */
.dz-magnet { transition: transform .18s ease-out; will-change: transform; }
.dz-tilt { transition: transform .2s ease-out; will-change: transform; }

/* The constrained block layout centres max-width children; the hero is a
   left-aligned composition, so pin its text back to the left edge. */
.dz-hero h1, .dz-hero .dz-hero-sub { margin-left: 0 !important; margin-right: auto !important; }

/* ============================================================
   CODE SHOWCASE (dezignza/code-showcase)
   ============================================================ */
.dz-codeshow { background: var(--navy-dark); padding-block: 64px; }
@media (min-width: 768px) { .dz-codeshow { padding-block: 96px; } }
.dz-codeshow .dz-h2, .dz-codeshow .dz-lead { text-align: center; }
.dz-codeshow-grid {
  margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 24px;
  align-items: stretch;
}
@media (min-width: 900px) { .dz-codeshow-grid { grid-template-columns: 1fr 1fr; } }
.dz-codeshow-editor {
  background: #0D1117; border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: 0 25px 60px -30px rgba(0,0,0,.6);
}
.dz-codeshow-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.dz-codeshow-chrome .dot { width: 12px; height: 12px; border-radius: 50%; }
.dz-codeshow-chrome .dot.red { background: #FF5F56; }
.dz-codeshow-chrome .dot.yellow { background: #FFBD2E; }
.dz-codeshow-chrome .dot.green { background: #27C93F; }
.dz-codeshow-chrome .filename {
  margin-left: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: rgba(255,255,255,.5);
}
.dz-codeshow-body {
  margin: 0; padding: 20px; min-height: 320px; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.7; color: #C9D1D9;
}
.dz-codeshow-body .ln { display: block; min-height: 1.7em; white-space: pre; }
.dz-caret {
  display: inline-block; width: 8px; height: 1.05em; margin-bottom: -0.15em;
  background: var(--teal); animation: dz-caret-blink 1s steps(1) infinite;
}
@keyframes dz-caret-blink { 50% { opacity: 0; } }
.dz-codeshow-stage {
  display: flex; align-items: center; justify-content: center;
  background: #272B45; border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-sm); padding: 32px; perspective: 900px;
}
.dz-codeshow-card {
  width: 100%; max-width: 320px; background: #fff; border-radius: var(--radius-sm);
  padding: 28px; box-shadow: 0 25px 50px -12px rgba(0,0,0,.4);
  transition: opacity .4s ease, transform .2s ease; transform-style: preserve-3d;
}
.dz-codeshow-card.is-hidden { opacity: 0; }
.dz-codeshow-card h3 {
  font-family: var(--font-heading); font-size: 20px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--charcoal);
  transition: opacity .4s ease, transform .4s ease;
}
.dz-codeshow-card p { margin-top: 8px; color: var(--grey-mid); transition: opacity .4s ease, transform .4s ease; }
.dz-codeshow-btn {
  display: inline-flex; margin-top: 20px; background: var(--teal); color: #fff;
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; padding: 10px 20px;
  border-radius: var(--radius-xs); transition: opacity .4s ease, transform .4s ease;
}
.dz-codeshow-card .is-hidden,
.dz-codeshow-card h3.is-hidden, .dz-codeshow-card p.is-hidden, .dz-codeshow-card .dz-codeshow-btn.is-hidden {
  opacity: 0; transform: translateY(8px);
}
.dz-codeshow-foot { margin-top: 40px; text-align: center; min-height: 88px; }
.dz-codeshow-foot p {
  color: #fff; font-size: 18px; transition: opacity .5s ease, transform .5s ease;
}
.dz-codeshow-foot p.is-hidden { opacity: 0; transform: translateY(8px); }
.dz-codeshow-again {
  margin-top: 20px; background: transparent; border: 2px solid var(--teal); color: var(--teal);
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; padding: 10px 24px; border-radius: var(--radius-xs);
  transition: background .2s ease, color .2s ease;
}
.dz-codeshow-again:hover { background: var(--teal); color: var(--navy-dark); }

/* ============================================================
   PROCESS: Pac-Man timeline (dezignza/process)
   ============================================================ */
/* Default: vertical list shows, timeline hidden. JS adds .is-pac on desktop. */
.dz-pacline { display: none; }
.dz-process-block.is-pac .dz-process { display: none; }
.dz-process-block.is-pac .dz-pacline { display: block; margin-top: 48px; }

.dz-pacline-row { position: relative; height: 64px; }
.dz-pacline-track {
  position: absolute; top: 50%; height: 3px; transform: translateY(-50%);
  background: rgba(0,188,212,.3);
}
.dz-pellet {
  position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%;
  background: #FFD600; transform: translate(-50%,-50%) scale(1);
  transition: opacity .15s ease-out, transform .15s ease-out;
}
.dz-pellet.eaten { opacity: 0; transform: translate(-50%,-50%) scale(0); }
.dz-pacman {
  position: absolute; top: 50%; left: 0; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%; background: #FFD600;
  transform: translate(-50%,-50%);
  -webkit-mask: none;
}
.dz-pacman::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--grey-light);
  clip-path: polygon(100% 50%, 100% 18%, 50% 50%, 100% 82%);
  animation: dz-chomp .28s linear infinite alternate;
}
/* The chomp: mouth wedge opens and closes via clip-path keyframes. */
@keyframes dz-chomp {
  from { clip-path: polygon(100% 50%, 100% 2%, 50% 50%, 100% 98%); }
  to   { clip-path: polygon(100% 50%, 100% 44%, 50% 50%, 100% 56%); }
}
.dz-pacman.faces-left { transform: translate(-50%,-50%) scaleX(-1); }
.dz-pacman.power::before { animation-duration: .12s; }
.dz-pacman.power { box-shadow: 0 0 0 8px rgba(255,214,0,.25), 0 0 24px rgba(255,214,0,.5); }
.dz-pacman-eye {
  position: absolute; top: 22%; left: 52%; width: 5px; height: 5px;
  border-radius: 50%; background: var(--navy-dark);
}
/* Pac-Man sits on the grey section; mouth wedge must match the section bg. */
.dz-bg-white .dz-pacman::before { background: var(--white); }

.dz-pacline-steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  position: relative; z-index: 2; margin-top: -52px;
}
.dz-pacline-steps li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.dz-pacline-steps .circle {
  display: grid; place-items: center; width: 64px; height: 64px;
  border-radius: 50%; border: 3px solid var(--teal); background: #fff;
  transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.dz-pacline-steps .circle span {
  font-family: var(--font-heading); font-size: 18px; font-weight: 900; color: var(--teal);
  transition: color .3s ease;
}
.dz-pacline-steps li.on .circle {
  background: var(--teal); transform: scale(1.08);
  box-shadow: 0 0 0 6px rgba(0,188,212,.18);
}
.dz-pacline-steps li.on .circle span { color: #fff; }
.dz-pacline-steps h3 {
  margin-top: 16px; font-family: var(--font-heading); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--charcoal);
}
.dz-pacline-steps p { margin-top: 8px; font-size: 14px; color: var(--grey-mid); line-height: 1.6; }

/* ============================================================
   SCOPE ESTIMATOR (dezignza/scope-estimator)
   ============================================================ */
.dz-estimator { background: var(--navy-dark); padding-block: 72px; }
.dz-estimator .dz-eyebrow { text-align: center; display: block; }
.dz-est-layout { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 1000px) { .dz-est-layout { grid-template-columns: 3fr 2fr; } }
.dz-est-group { margin-bottom: 36px; }
.dz-est-group > h3, .dz-est-slider-head h3 {
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,.5);
  margin-bottom: 12px;
}
/* Six types: 3x2 sits square. At 4-up it wrapped to an orphaned row of two. */
.dz-est-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 640px) { .dz-est-types { grid-template-columns: repeat(3, 1fr); } }

/* An add-on the chosen type already covers: shown, but not chargeable twice. */
.dz-est-feature.inherent {
  opacity: .45; cursor: not-allowed; border-style: dashed;
}
/* Not a checkbox any more, so drop the 20x20 box: it is a label now, and
   "INCLUDED" will not fit inside a checkbox. font-size:0 hides the "+". */
.dz-est-feature.inherent .plus {
  width: auto; height: auto; border: none; background: none;
  font-size: 0; color: var(--teal);
}
.dz-est-feature.inherent .plus::after {
  content: 'INCLUDED'; font-size: 8px; font-weight: 700; letter-spacing: .06em;
  font-family: var(--font-heading); white-space: nowrap;
}
.dz-est-type {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 12px; border-radius: var(--radius-xs); background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.7);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.dz-est-type svg { width: 24px; height: 24px; color: rgba(255,255,255,.6); transition: color .2s ease; }
.dz-est-type span {
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.2; text-align: center;
}
.dz-est-type:hover { border-color: rgba(0,188,212,.6); }
.dz-est-type:hover svg { color: var(--teal); }
.dz-est-type.on { border-color: var(--teal); background: rgba(0,188,212,.1); color: #fff; }
.dz-est-type.on svg { color: var(--teal); }
.dz-est-slider-head { display: flex; align-items: baseline; justify-content: space-between; }
.dz-est-units { font-family: var(--font-heading); font-size: 18px; font-weight: 900; color: var(--teal); }
.dz-est-slider-scale { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: rgba(255,255,255,.4); }
.dz-range { width: 100%; accent-color: var(--teal); }
.dz-est-features { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .dz-est-features { grid-template-columns: repeat(2, 1fr); } }
.dz-est-feature {
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 14px; border-radius: var(--radius-xs); background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.15);
  transition: border-color .2s ease, background .2s ease;
}
.dz-est-feature .ic {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.6); transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.dz-est-feature .ic svg { width: 16px; height: 16px; }
.dz-est-feature .tx { flex: 1; font-size: 14px; color: rgba(255,255,255,.7); line-height: 1.3; }
.dz-est-feature .plus {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border-radius: var(--radius-xs); border: 1px solid rgba(255,255,255,.25);
  font-size: 12px; font-weight: 700; font-style: normal; color: transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.dz-est-feature:hover { border-color: rgba(0,188,212,.6); }
.dz-est-feature:hover .ic { color: var(--teal); }
.dz-est-feature.on { border-color: var(--teal); background: rgba(0,188,212,.1); }
.dz-est-feature.on .tx { color: #fff; }
.dz-est-feature.on .ic { background: var(--teal); border-color: var(--teal); color: var(--navy-dark); }
.dz-est-feature.on .plus { background: var(--teal); border-color: var(--teal); color: var(--navy-dark); }
.dz-est-panel-wrap { position: relative; }
.dz-est-panel {
  position: sticky; top: 110px; border-radius: var(--radius-sm); padding: 28px;
  background: #272B45; border: 1px solid rgba(255,255,255,.1);
}
.dz-est-panel-eyebrow {
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--teal);
}
/* Amber reserved for pricing per the design system. */
/* Timeline takes the headline slot the price used to hold. */
.dz-est-weeks {
  margin-top: 12px; font-family: var(--font-heading); font-size: clamp(28px, 3vw, 34px);
  font-weight: 900; color: var(--amber); letter-spacing: 0.01em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dz-est-weeks-sub { margin-top: 4px; font-size: 14px; color: rgba(255,255,255,.55); }
.dz-est-cx { margin-top: 20px; }
.dz-est-cx-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.dz-est-cx-head span {
  font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.55);
}
.dz-est-cx-head b { font-family: var(--font-heading); font-size: 13px; color: var(--teal); }
.dz-est-cx-bar { height: 5px; background: rgba(255,255,255,.12); border-radius: var(--radius-pill); overflow: hidden; }
.dz-est-cx-bar i {
  display: block; height: 100%; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--teal), var(--amber));
  transition: width .45s cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-reduced-motion: reduce) { .dz-est-cx-bar i { transition: none; } }
.dz-est-panel hr { margin: 20px 0; border: 0; height: 1px; background: rgba(255,255,255,.1); }
.dz-est-meta div { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dz-est-meta dt { font-size: 14px; color: rgba(255,255,255,.55); }
.dz-est-meta dd {
  margin: 0; font-family: var(--font-heading); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: #fff;
}
.dz-est-cta { width: 100%; margin-top: 16px; }
.dz-est-note { margin-top: 12px; font-size: 11px; color: rgba(255,255,255,.4); text-align: center; line-height: 1.5; }
.dz-est-nojs { text-align: center; }
.dz-est-nojs[hidden] { display: none; }

/* ============================================================
   SERVICE EXPLORER (dezignza/service-explorer)
   ============================================================ */
.dz-sx-flag {
  position: relative; display: flex; flex-direction: column; gap: 20px; width: 100%;
  overflow: hidden; background: var(--navy-dark); border: 0; text-align: left;
  padding: 32px; transition: box-shadow .3s ease;
}
@media (min-width: 768px) { .dz-sx-flag { flex-direction: row; align-items: center; } }
.dz-sx-flag:hover { box-shadow: 0 0 30px rgba(0,188,212,.18); }
.dz-sx-flag.open { box-shadow: 0 0 0 2px var(--teal); }
.dz-sx-flag .sweep, .dz-sx-card .sweep {
  position: absolute; top: 0; left: 0; height: 3px; width: 64px;
  background: var(--teal); transition: width .5s ease;
}
.dz-sx-flag:hover .sweep, .dz-sx-flag.open .sweep,
.dz-sx-card:hover .sweep, .dz-sx-card.open .sweep { width: 100%; }
.dz-sx-flag .dz-icon-ring { flex: none; width: 64px; height: 64px; background: var(--navy); margin: 0; }
.dz-sx-flag .body { flex: 1; }
.dz-sx-flag .flag-label {
  display: inline-block; background: rgba(0,188,212,.15); color: var(--teal);
  font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; padding: 4px 10px; margin-bottom: 8px;
}
.dz-sx-flag .ttl {
  display: block; font-family: var(--font-heading); font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #fff;
  transition: color .2s ease;
}
.dz-sx-flag:hover .ttl { color: var(--teal); }
.dz-sx-flag .dsc { display: block; margin-top: 8px; font-size: 15px; color: rgba(255,255,255,.7); line-height: 1.6; max-width: 40rem; }
.dz-sx-flag .cue, .dz-sx-card .cue {
  flex: none; font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal);
}
.dz-sx-grid { margin-top: 24px; display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 640px) { .dz-sx-grid { grid-template-columns: repeat(3, 1fr); } }
.dz-sx-card {
  position: relative; display: flex; flex-direction: column; align-items: center;
  overflow: hidden; background: #fff; border: 1px solid var(--grey-light);
  border-bottom: 3px solid var(--teal); padding: 28px 24px; text-align: center;
  transition: box-shadow .2s ease;
}
.dz-sx-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }
.dz-sx-card.open { border-left: 3px solid var(--teal); }
.dz-sx-card .dz-icon-ring { margin: 0 0 20px; }
.dz-sx-card .ttl {
  font-family: var(--font-heading); font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--charcoal);
  transition: color .2s ease;
}
.dz-sx-card:hover .ttl, .dz-sx-card.open .ttl { color: var(--teal); }
.dz-sx-card .dsc { margin-top: 8px; font-size: 14px; color: var(--grey-mid); line-height: 1.6; }
.dz-sx-card .cue { margin-top: 16px; color: var(--grey-mid); transition: color .2s ease; }
.dz-sx-card:hover .cue, .dz-sx-card.open .cue { color: var(--teal); }
.dz-sx-panel { overflow: hidden; max-height: 0; transition: max-height .35s ease; }
.dz-sx-panel.open { max-height: 1400px; }
.dz-sx-panel-in { background: var(--grey-light); padding: 32px; margin-top: 16px; }
.dz-sx-cols { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 900px) { .dz-sx-cols { grid-template-columns: 2fr 3fr; } }
.dz-sx-panel h4 {
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey-mid);
  margin: 24px 0 10px;
}
.dz-sx-panel h4:first-child { margin-top: 0; }
.dz-sx-includes li {
  position: relative; padding-left: 24px; margin-bottom: 8px;
  font-size: 14px; color: var(--charcoal); line-height: 1.5;
}
.dz-sx-includes li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.dz-sx-timeline { font-family: var(--font-heading); font-size: 16px; font-weight: 700; text-transform: uppercase; color: var(--charcoal); }
/* Amber reserved for pricing per the design system. */
.dz-sx-price { font-family: var(--font-heading); font-size: 24px; font-weight: 900; color: var(--amber); }
.dz-sx-projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.dz-sx-project {
  position: relative; display: flex; align-items: flex-end; aspect-ratio: 4/3;
  background: var(--navy-dark) center/cover no-repeat; overflow: hidden;
}
.dz-sx-project::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(30,34,53,.9), rgba(30,34,53,.3) 50%, transparent);
  transition: background .3s ease;
}
.dz-sx-project:hover::before { background: var(--overlay-teal); }
.dz-sx-project span {
  position: relative; z-index: 1; padding: 12px;
  font-family: var(--font-heading); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; color: #fff; line-height: 1.3;
}
.dz-sx-none { font-size: 14px; color: var(--grey-mid); font-style: italic; }
.dz-sx-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ============================================================
   TECH STACK BOARD (dezignza/tech-stack)
   ============================================================ */
.dz-stack-cols { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 1000px) { .dz-stack-cols { grid-template-columns: 1fr 2fr; } }
.dz-stack-head { text-align: left; }
.dz-stack-head .dz-lead { margin-inline: 0; }
.dz-stack-head .dz-underline::after { left: 0; transform: none; }
@media (min-width: 1000px) { .dz-stack-head { position: sticky; top: 110px; align-self: start; } }
.dz-stack-cat { margin-bottom: 32px; }
.dz-stack-cat:last-child { margin-bottom: 0; }
.dz-stack-cat h3 {
  font-family: var(--font-heading); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey-mid);
  margin-bottom: 14px;
}
.dz-stack-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .dz-stack-grid { grid-template-columns: repeat(2, 1fr); } }
.dz-stack-chip {
  position: relative; overflow: hidden; background: #fff;
  border: 1px solid #E8E8E8; border-radius: var(--radius-xs); padding: 16px;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease,
              opacity .6s ease;
}
.dz-stack-chip:hover { transform: translateY(-2px); border-color: var(--teal); box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.dz-stack-chip .strip {
  position: absolute; top: 0; left: 0; height: 2px; width: 32px;
  background: var(--teal); transition: width .3s ease;
}
.dz-stack-chip:hover .strip { width: 100%; }
.dz-stack-chip .nm {
  font-family: var(--font-heading); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--charcoal);
  transition: color .2s ease;
}
.dz-stack-chip:hover .nm { color: var(--teal); }
.dz-stack-chip p { margin-top: 8px; font-size: 12px; color: var(--grey-mid); line-height: 1.6; }

/* ============================================================
   SERVICE MATCHER (dezignza/service-matcher)
   ============================================================ */
.dz-matcher { background: #fff; padding-block: 72px; }
.dz-matcher-in { max-width: 900px; }
.dz-match-progress { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -16px 0 40px; }
.dz-match-progress .seg { height: 4px; width: 24px; border-radius: var(--radius-pill); background: var(--border); transition: all .3s ease; }
.dz-match-progress .seg.on { background: var(--teal); width: 48px; }
.dz-match-step h3 {
  font-family: var(--font-heading); font-size: 16px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--charcoal);
  text-align: center; margin-bottom: 24px;
}
.dz-match-step { animation: dz-match-in .3s ease; }
@keyframes dz-match-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.dz-match-opts { display: flex; flex-direction: column; gap: 12px; }
.dz-match-opts button {
  position: relative; overflow: hidden; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xs);
  padding: 16px 24px; font-family: var(--font-body); font-size: 15px; color: var(--charcoal);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dz-match-opts button::before {
  content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left;
  background: rgba(0,188,212,.07); transition: transform .3s ease;
}
.dz-match-opts button:hover { border-color: var(--teal); box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.dz-match-opts button:hover::before { transform: scaleX(1); }
.dz-match-opts button span, .dz-match-opts button em { position: relative; z-index: 1; }
.dz-match-opts button em { font-style: normal; color: var(--grey-mid); transition: color .2s ease, transform .2s ease; }
.dz-match-opts button:hover em { color: var(--teal); transform: translateX(4px); }
.dz-match-back {
  margin-top: 24px; background: none; border: 0;
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey-mid);
  transition: color .2s ease;
}
.dz-match-back:hover { color: var(--teal); }
.dz-match-result {
  background: #fff; border-top: 4px solid var(--teal);
  box-shadow: 0 10px 40px -12px rgba(30,34,53,.15); padding: 40px; text-align: center;
}
.dz-match-eyebrow {
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal); margin-bottom: 12px;
}
.dz-match-result h3 {
  font-family: var(--font-heading); font-size: clamp(24px, 3vw, 30px); font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--teal); line-height: 1.2;
}
.dz-match-msg { margin: 16px auto 0; max-width: 36rem; font-size: 15px; color: var(--grey-mid); line-height: 1.7; }
.dz-match-ctas {
  display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 32px;
}
@media (min-width: 640px) { .dz-match-ctas { flex-direction: row; justify-content: center; } }
.dz-match-details {
  font-family: var(--font-heading); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal);
}
.dz-match-details:hover { text-decoration: underline; }
.dz-match-nojs { text-align: center; }
.dz-match-nojs[hidden] { display: none; }
[data-mstep][hidden], [data-progress][hidden] { display: none; }

/* ============================================================
   SCROLL PROGRESS BAR + CURSOR SPOTLIGHT
   ============================================================ */
.dz-scrollbar {
  position: fixed; top: 0; left: 0; z-index: 200;
  height: 3px; width: 0; background: var(--teal);
  box-shadow: 0 0 8px rgba(0,188,212,.6);
  pointer-events: none;
}
/* theme.js drops a 600px cursor glow into each of these. It is decorative and
   absolutely positioned, so without clipping it extends the document past the
   viewport and the whole page scrolls sideways on a phone. These are full-bleed
   bands, so there is nothing else to spill. */
.dz-codeshow, .dz-estimator, .dz-printbanner { overflow: hidden; }
.dz-spotlight {
  position: absolute; top: 0; left: 0; width: 600px; height: 600px;
  border-radius: 50%; pointer-events: none; opacity: 0; z-index: 0;
  background: radial-gradient(circle, rgba(0,188,212,.07) 0%, transparent 65%);
  transition: opacity .4s ease; will-change: transform;
}
.dz-codeshow .dz-container, .dz-estimator .dz-container,
.dz-printbanner .dz-container { position: relative; z-index: 1; }

/* ============================================================
   MARQUEE TICKER
   ============================================================ */
.dz-marquee {
  overflow: hidden; background: var(--navy); border-block: 1px solid rgba(255,255,255,.08);
  padding-block: 14px; white-space: nowrap;
}
.dz-marquee-track { display: inline-flex; animation: dz-marquee 30s linear infinite; }
.dz-marquee:hover .dz-marquee-track { animation-play-state: paused; }
.dz-marquee-row { display: inline-flex; align-items: center; }
.dz-marquee-row span {
  font-family: var(--font-heading); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,.65);
  padding-inline: 22px;
}
.dz-marquee-row i { font-style: normal; font-size: 8px; color: var(--teal); }
@keyframes dz-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .dz-marquee-track { animation: none; } }

/* ============================================================
   PHILOSOPHY PILLARS
   ============================================================ */
.dz-pillars { background: var(--navy-dark); padding-block: 72px; }
.dz-pillars-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .dz-pillars-grid { grid-template-columns: repeat(3, 1fr); } }
.dz-pillar {
  position: relative; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1); border-top: 3px solid var(--teal);
  padding: 32px 28px; transition: transform .3s ease, background .3s ease, opacity .6s ease;
}
.dz-pillar:hover { transform: translateY(-4px); background: rgba(0,188,212,.06); }
.dz-pillar .num {
  font-family: var(--font-heading); font-size: 44px; font-weight: 900;
  color: transparent; -webkit-text-stroke: 1.5px rgba(0,188,212,.55);
  line-height: 1; display: block;
}
.dz-pillar h3 {
  margin-top: 16px; font-family: var(--font-heading); font-size: 17px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: #fff;
}
.dz-pillar p { margin-top: 10px; font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.7; }

/* ============================================================
   3D PRINT BANNER (animated printer)
   ============================================================ */
.dz-printbanner {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  padding-block: 72px; overflow: hidden;
}
.dz-printbanner-in { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) { .dz-printbanner-in { grid-template-columns: 2fr 3fr; } }
.dz-printbanner-copy .dz-h2 { margin-top: 8px; }
.dz-printbanner-copy p:not(.dz-eyebrow) { margin-top: 16px; color: rgba(255,255,255,.7); font-size: 16px; line-height: 1.7; max-width: 34rem; }
.dz-printbanner-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
/* Mini printer: gantry sweeps, model grows via clip animation. */
.dz-printer { position: relative; width: 220px; height: 190px; margin-inline: auto; }
.dz-printer-bed { position: absolute; bottom: 0; left: 0; right: 0; height: 10px; background: rgba(255,255,255,.15); border-radius: var(--radius-xs); }
.dz-printer-gantry {
  position: absolute; top: 0; left: 0; right: 0; height: 12px;
  background: rgba(255,255,255,.12); border-radius: var(--radius-xs);
}
.dz-printer-head {
  position: absolute; top: 10px; left: 0; width: 22px; height: 24px;
  background: var(--teal); clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
  animation: dz-printhead 2.6s ease-in-out infinite alternate;
}
@keyframes dz-printhead { from { left: 8%; } to { left: 82%; } }
.dz-printer-model {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  width: 90px; height: 110px; background: rgba(0,188,212,.35);
  clip-path: polygon(50% 0, 100% 28%, 100% 100%, 0 100%, 0 28%);
  animation: dz-printgrow 6s ease-out infinite;
}
@keyframes dz-printgrow {
  0% { clip-path: polygon(50% 100%, 100% 100%, 100% 100%, 0 100%, 0 100%); }
  70%, 100% { clip-path: polygon(50% 0, 100% 28%, 100% 100%, 0 100%, 0 28%); }
}
@media (prefers-reduced-motion: reduce) {
  .dz-printer-head, .dz-printer-model { animation: none; }
}

/* ============================================================
   HOSTING STRIP
   ============================================================ */
.dz-hoststrip { background: var(--grey-light); padding-block: 64px; }
.dz-hoststrip-in {
  display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center;
}
@media (min-width: 900px) { .dz-hoststrip-in { grid-template-columns: 3fr 2fr; } }
.dz-hoststrip-copy .dz-h2 { margin-top: 8px; }
.dz-hoststrip-copy p:not(.dz-eyebrow) { margin-top: 14px; color: var(--grey-mid); font-size: 16px; line-height: 1.7; max-width: 36rem; }
.dz-hoststrip-price {
  background: var(--navy-dark); padding: 36px; text-align: center;
  border-top: 3px solid var(--teal);
}
.dz-hoststrip-price .from {
  display: block; font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,.55);
}
/* Amber reserved for pricing per the design system. */
.dz-hoststrip-price .amt {
  display: inline-block; margin-top: 6px; font-family: var(--font-heading);
  font-size: 56px; font-weight: 900; color: var(--amber); line-height: 1;
}
.dz-hoststrip-price .per { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: rgba(255,255,255,.55); }
.dz-hoststrip-price .dz-btn { margin-top: 22px; width: 100%; }

/* ============================================================
   TESTIMONIALS CAROUSEL
   ============================================================ */
.dz-quotes { max-width: 720px; margin-inline: auto; }
.dz-quotes-viewport { overflow: hidden; }
.dz-quotes-track { display: flex; flex-direction: column; gap: 24px; }
.dz-quotes.is-carousel .dz-quotes-track {
  flex-direction: row; gap: 0; transition: transform .5s ease-in-out;
}
@media (prefers-reduced-motion: reduce) { .dz-quotes.is-carousel .dz-quotes-track { transition: none; } }
.dz-quote-card {
  margin: 0; background: #fff; border-top: 3px solid var(--teal);
  box-shadow: 0 12px 32px -18px rgba(30,34,53,.25); padding: 36px; text-align: center;
}
.dz-quotes.is-carousel .dz-quote-card { flex: 0 0 100%; }
.dz-quote-stars { color: var(--amber); font-size: 15px; letter-spacing: 4px; }
.dz-quote-card blockquote {
  margin: 18px 0 0; font-size: 17px; color: var(--charcoal); line-height: 1.8; font-style: italic;
}
.dz-quote-card figcaption { margin-top: 20px; }
.dz-quote-card .nm {
  display: block; font-family: var(--font-heading); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--charcoal);
}
.dz-quote-card .co { display: block; margin-top: 2px; font-size: 13px; color: var(--grey-mid); }
.dz-quotes-dots { display: none; }
.dz-quotes.is-carousel .dz-quotes-dots {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 28px;
}
.dz-quotes-dots button {
  width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0;
  background: rgba(102,102,102,.3); transition: background .2s ease, transform .2s ease;
}
.dz-quotes-dots button:hover { background: rgba(102,102,102,.5); }
.dz-quotes-dots button.on { background: var(--teal); transform: scale(1.2); }

/* ============================================================
   ABOUT PAGE: story, facts, certs, brand family
   ============================================================ */
.dz-about-story { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
@media (min-width: 900px) { .dz-about-story { grid-template-columns: 3fr 2fr; } }
.dz-about-copy .dz-underline::after { left: 0; transform: none; }
.dz-about-copy .dz-h2 { display: block; }
.dz-about-p { margin-top: 18px; font-size: 16px; color: var(--grey-mid); line-height: 1.8; }
.dz-about-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.dz-fact {
  background: var(--grey-light); border-left: 3px solid var(--teal);
  padding: 24px 20px; transition: opacity .6s ease, transform .6s ease;
}
.dz-fact .k {
  display: block; font-family: var(--font-heading); font-size: 36px; font-weight: 900;
  color: var(--navy-dark); line-height: 1;
}
.dz-fact .v {
  display: block; margin-top: 6px; font-family: var(--font-heading); font-size: 11px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey-mid);
}
.dz-certs { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .dz-certs { grid-template-columns: repeat(3, 1fr); } }
.dz-cert { background: #fff; border-top: 3px solid var(--teal); padding: 28px; }
.dz-cert h3 {
  font-family: var(--font-heading); font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--charcoal); line-height: 1.4;
}
.dz-cert p { margin-top: 10px; font-size: 14px; color: var(--grey-mid); line-height: 1.7; }
.dz-brands { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 768px) { .dz-brands { grid-template-columns: repeat(3, 1fr); } }
.dz-brand {
  position: relative; display: block; background: var(--navy-dark); padding: 32px 28px;
  overflow: hidden; transition: transform .3s ease, box-shadow .3s ease;
}
.dz-brand::before {
  content: ""; position: absolute; top: 0; left: 0; height: 3px; width: 48px;
  background: var(--teal); transition: width .4s ease;
}
.dz-brand:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(0,188,212,.4); }
.dz-brand:hover::before { width: 100%; }
.dz-brand h3 {
  font-family: var(--font-heading); font-size: 18px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.05em; color: #fff;
}
.dz-brand p { margin-top: 10px; font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.7; }
.dz-brand .cue {
  display: inline-block; margin-top: 16px; font-family: var(--font-heading); font-size: 12px;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--teal);
}
.dz-footer-h4-gap { margin-top: 28px; }

/* ---------- About: story close + journey arc ---------- */
.dz-about-close {
  margin-top: 22px; padding-left: 18px; border-left: 3px solid var(--teal);
  font-size: 16px; line-height: 1.8; color: var(--charcoal); font-weight: 600;
}
.dz-ab-journey {
  background: var(--navy-dark); border-radius: var(--r-card, 14px); padding: 18px 16px 20px;
  transition: opacity .6s ease, transform .6s ease;
}
.dz-ab-journey svg { display: block; width: 100%; height: auto; }
.dz-j-grid path { stroke: rgba(255,255,255,.07); stroke-width: 1; }
.dz-j-arc {
  stroke: var(--teal); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100;
  /* pathLength=100 on the element, so the offset is a clean percentage. */
  stroke-dashoffset: 100; opacity: .9;
}
.dz-ab-journey.is-drawn .dz-j-arc {
  transition: stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1);
  stroke-dashoffset: 0;
}
.dz-j-node circle { fill: var(--navy-dark); stroke: var(--teal); stroke-width: 2.5; }
.dz-j-node .ring { fill: none; opacity: 0; }
.dz-ab-journey.is-drawn .dz-j-node .ring { animation: dz-j-ping 2.8s ease-out infinite; }
.dz-j-b .ring { animation-delay: 1.4s !important; }
@keyframes dz-j-ping {
  0%   { opacity: .7; transform: scale(1); }
  70%  { opacity: 0; transform: scale(2.6); }
  100% { opacity: 0; transform: scale(2.6); }
}
/* Scale from each node's own centre rather than the viewBox origin. */
.dz-j-a .ring { transform-origin: 104px 78px; }
.dz-j-b .ring { transform-origin: 376px 254px; }
.dz-j-dot { fill: #fff; }
.dz-j-yr {
  font-family: var(--font-heading); font-size: 19px; font-weight: 900; fill: #fff;
  text-anchor: middle;
}
.dz-j-pl {
  font-family: var(--font-heading); font-size: 10px; font-weight: 700; fill: rgba(255,255,255,.6);
  text-transform: uppercase; letter-spacing: 0.1em; text-anchor: middle;
}
.dz-j-cap {
  margin-top: 10px; text-align: center; font-size: 12px; color: rgba(255,255,255,.55);
  line-height: 1.6;
}
@media (prefers-reduced-motion: reduce) {
  .dz-j-arc { stroke-dashoffset: 0; }
  .dz-ab-journey.is-drawn .dz-j-node .ring { animation: none; }
}

/* ---------- About: enterprise wordmarks ---------- */
.dz-ab-ents {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: rgba(30,34,53,.1); border: 1px solid rgba(30,34,53,.1);
  border-radius: var(--r-card, 14px); overflow: hidden;
}
@media (min-width: 700px) { .dz-ab-ents { grid-template-columns: repeat(4, 1fr); } }
.dz-ab-ent {
  display: grid; place-items: center; min-height: 92px; padding: 18px 12px;
  background: var(--white); transition: opacity .6s ease, transform .6s ease, background .25s ease;
}
.dz-ab-ent span {
  font-family: var(--font-heading); font-size: 14px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--navy-dark);
  text-align: center; line-height: 1.3; transition: color .25s ease;
}
.dz-ab-ent:hover { background: var(--navy-dark); }
.dz-ab-ent:hover span { color: var(--teal); }
.dz-ab-ent-foot {
  max-width: 760px; margin: 28px auto 0; text-align: center;
  font-size: 15px; line-height: 1.8; color: var(--grey-mid);
  transition: opacity .6s ease, transform .6s ease;
}

/* ---------- About: capability cards ---------- */
.dz-ab-caps { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 640px) { .dz-ab-caps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .dz-ab-caps { grid-template-columns: repeat(4, 1fr); } }
.dz-ab-cap {
  background: var(--white); border-top: 3px solid var(--teal); border-radius: var(--r-card, 14px);
  padding: 26px 22px 28px; transition: opacity .6s ease, transform .6s ease, box-shadow .3s ease;
}
.dz-ab-cap:hover { box-shadow: 0 18px 40px -24px rgba(30,34,53,.45); }
.dz-ab-cap-ic {
  display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px;
  border-radius: 10px; background: rgba(0,188,212,.1); color: var(--teal);
}
.dz-ab-cap-ic svg { width: 22px; height: 22px; }
.dz-ab-cap h3 {
  font-family: var(--font-heading); font-size: 15px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--charcoal); line-height: 1.4;
}
.dz-ab-cap p { margin-top: 10px; font-size: 14px; color: var(--grey-mid); line-height: 1.7; }
.dz-ab-cap-foot {
  max-width: 820px; margin: 32px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(30,34,53,.12); text-align: center;
  font-size: 14px; line-height: 1.8; color: var(--grey-mid);
  transition: opacity .6s ease, transform .6s ease;
}

/* ---------- About: credentials ---------- */
@media (min-width: 768px) { .dz-certs--two { grid-template-columns: repeat(2, 1fr); } }
.dz-ab-cert-ic {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px;
  border-radius: 10px; background: rgba(0,188,212,.1); color: var(--teal);
}
.dz-ab-cert-ic svg { width: 21px; height: 21px; }
.dz-ab-cert-foot {
  margin-top: 26px; text-align: center; font-family: var(--font-heading);
  font-size: 15px; font-weight: 700; color: var(--navy-dark);
  transition: opacity .6s ease, transform .6s ease;
}

/* ---------- About: milestone timeline ---------- */
.dz-ab-tl { transition: opacity .6s ease, transform .6s ease; }
.dz-ab-tl-rail { display: none; }
/* Without JS every panel stays on and reads as a plain list. .is-live is only
   added once the script has wired the rail up. */
.dz-ab-tl-panels { display: grid; gap: 16px; }
.dz-ab-tl.is-live .dz-ab-tl-rail {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 32px; padding: 8px 0;
}
.dz-ab-tl-line {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -9px;
  background: rgba(30,34,53,.14);
}
.dz-ab-tl-line i {
  display: block; height: 100%; background: var(--teal);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
.dz-ab-tl-yr {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0 4px; cursor: pointer;
  font-family: var(--font-heading); font-size: 13px; font-weight: 700;
  color: var(--grey-mid); transition: color .2s ease;
}
.dz-ab-tl-yr .dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--white); border: 2px solid rgba(30,34,53,.25);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.dz-ab-tl-yr:hover { color: var(--navy-dark); }
.dz-ab-tl-yr:hover .dot { border-color: var(--teal); transform: scale(1.15); }
.dz-ab-tl-yr.is-on { color: var(--navy-dark); }
.dz-ab-tl-yr.is-on .dot { background: var(--teal); border-color: var(--teal); transform: scale(1.3); }
.dz-ab-tl.is-live .dz-ab-tl-panel { display: none; }
.dz-ab-tl.is-live .dz-ab-tl-panel.is-on { display: block; animation: dz-tl-in .4s ease both; }
@keyframes dz-tl-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dz-ab-tl-panel {
  background: var(--white); border-left: 3px solid var(--teal);
  border-radius: var(--r-card, 14px); padding: 26px 28px;
}
.dz-ab-tl-pyr {
  display: inline-block; font-family: var(--font-heading); font-size: 12px; font-weight: 900;
  letter-spacing: 0.1em; color: var(--teal-ink);
}
.dz-ab-tl-panel h3 {
  margin-top: 6px; font-family: var(--font-heading); font-size: 20px; font-weight: 900;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--navy-dark);
}
.dz-ab-tl-panel p { margin-top: 10px; font-size: 15px; color: var(--grey-mid); line-height: 1.8; }
@media (max-width: 560px) {
  .dz-ab-tl.is-live .dz-ab-tl-rail { gap: 2px; }
  .dz-ab-tl-yr { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .dz-ab-tl.is-live .dz-ab-tl-panel.is-on { animation: none; }
}

/* ============================================================
   SOLUTIONS GRID ("Problems We Solve")
   ============================================================ */
/* Alternating copy/demo rows. Sides swap on even rows at desktop width; on
   narrow screens every row stacks copy-then-demo so the reading order holds. */
.dz-alts { display: flex; flex-direction: column; gap: 64px; margin-top: 16px; }
.dz-alt { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
/* Grid children default to min-width:auto, so a wide demo would push the row
   past the container instead of shrinking. */
.dz-alt-copy, .dz-alt-demo { min-width: 0; }
@media (min-width: 900px) {
  .dz-alts { gap: 96px; }
  .dz-alt { grid-template-columns: 1fr 1fr; gap: 64px; }
  .dz-alt:nth-child(even) .dz-alt-copy { order: 2; }
}
.dz-alt-copy .dz-icon-ring { margin: 0 0 20px; width: 64px; height: 64px; }
.dz-alt-copy .dz-icon-ring svg { width: 26px; height: 26px; }
.dz-alt-copy h3 {
  font-family: var(--font-heading); font-size: 22px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--charcoal);
}
.dz-alt-copy p { margin-top: 12px; font-size: 15px; color: var(--grey-mid); line-height: 1.75; max-width: 46ch; }
.dz-alt-copy .cue {
  display: inline-block; margin-top: 20px; font-family: var(--font-heading);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--grey-mid); transition: color .2s ease;
}
.dz-alt-copy .cue:hover, .dz-alt-copy .cue:focus-visible { color: var(--teal); }

/* ---- Shared demo chrome ---- */
.dz-demo {
  background: #fff; border: 1px solid var(--grey-light);
  box-shadow: 0 24px 48px -30px rgba(30,34,53,.45); overflow: hidden;
  font-size: 13px;
}
.dz-demo-bar {
  display: flex; align-items: center; gap: 6px; padding: 10px 14px;
  background: var(--navy); color: rgba(255,255,255,.72);
}
.dz-demo-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.25); }
.dz-demo-title {
  margin-left: 8px; font-family: var(--font-heading); font-size: 10px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
}
.dz-demo-body { padding: 16px; }
.dz-demo-still { padding: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--grey-mid); }
.dz-demo-still b, .dz-demo-still strong { color: var(--charcoal); font-family: var(--font-heading); }
.dz-demo-hint { margin-top: 10px; font-size: 12px; color: var(--grey-mid); }
.dz-demo-add {
  margin-top: 12px; padding: 8px 12px; background: none; cursor: pointer;
  border: 1px dashed var(--grey-light); color: var(--teal);
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; transition: border-color .2s ease, color .2s ease;
}
.dz-demo-add:hover:not(:disabled) { border-color: var(--teal); }
.dz-demo-add:disabled { opacity: .4; cursor: not-allowed; }
.dz-demo-add.wide { width: 100%; border-style: solid; border-color: var(--teal); }

/* ---- 1. Invoice builder ---- */
.dz-inv-line {
  display: grid; grid-template-columns: 1fr auto 64px 72px 24px; gap: 8px;
  align-items: center; padding: 8px 0; border-bottom: 1px solid var(--grey-light);
}
.dz-inv-line .desc { color: var(--charcoal); }
.dz-inv-line .rate, .dz-inv-line .amt { text-align: right; color: var(--grey-mid); font-variant-numeric: tabular-nums; }
.dz-inv-line .amt { color: var(--charcoal); font-weight: 600; }
.dz-inv-line .qty { display: flex; align-items: center; gap: 6px; }
.dz-inv-line .qty b { min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.dz-inv-line .step, .dz-inv-line .rm {
  width: 22px; height: 22px; cursor: pointer; background: none; color: var(--grey-mid);
  border: 1px solid var(--grey-light); line-height: 1; transition: color .2s ease, border-color .2s ease;
}
.dz-inv-line .step:hover, .dz-inv-line .rm:hover { color: var(--teal); border-color: var(--teal); }
.dz-inv-line .rm { border: none; }
.dz-inv-totals { margin-top: 14px; }
.dz-inv-totals > div { display: flex; justify-content: space-between; padding: 4px 0; color: var(--grey-mid); }
.dz-inv-totals dd { font-variant-numeric: tabular-nums; }
.dz-inv-totals .grand {
  margin-top: 6px; padding-top: 10px; border-top: 2px solid var(--charcoal); color: var(--charcoal);
}
.dz-inv-totals .grand dt, .dz-inv-totals .grand dd {
  font-family: var(--font-heading); font-weight: 700; font-size: 15px;
}

/* ---- 2. Job board ---- */
.dz-jobs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dz-job-col h4 {
  font-family: var(--font-heading); font-size: 9px; font-weight: 700; color: var(--grey-mid);
  text-transform: uppercase; letter-spacing: 0.07em; padding-bottom: 8px; margin-bottom: 8px;
  border-bottom: 2px solid var(--grey-light);
}
.dz-job-col h4 span { color: var(--teal); }
.dz-job-col .stack { display: flex; flex-direction: column; gap: 6px; min-height: 40px; }
.dz-job {
  display: flex; align-items: center; gap: 6px; width: 100%; cursor: pointer; text-align: left;
  background: #fff; border: 1px solid var(--grey-light); padding: 8px; font-size: 11px;
  color: var(--charcoal); transition: border-color .2s ease, transform .2s ease;
}
.dz-job:hover { border-color: var(--teal); transform: translateX(2px); }
.dz-job .who {
  flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--grey-light);
  display: grid; place-items: center; font-size: 9px; font-weight: 700; color: var(--grey-mid);
}
.dz-job .nm { flex: 1; line-height: 1.35; }
.dz-job .go { color: var(--teal); }
.dz-job.done { opacity: .55; cursor: default; }
.dz-job.done:hover { transform: none; border-color: var(--grey-light); }
.dz-job .tick { color: var(--teal); }

/* ---- 3. Client portal ---- */
.dz-login { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.dz-login p { font-family: var(--font-heading); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--charcoal); }
.dz-login .fake-field { padding: 9px 10px; background: var(--grey-light); color: var(--grey-mid); font-size: 12px; }
.dz-icon-ring.sm { width: 40px; height: 40px; margin: 0; }
.dz-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--grey-light); margin-bottom: 12px; }
.dz-tabs button {
  padding: 8px 12px; background: none; border: none; cursor: pointer; color: var(--grey-mid);
  font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.dz-tabs button[aria-selected="true"] { color: var(--teal); border-bottom-color: var(--teal); }
.dz-list { display: flex; flex-direction: column; }
.dz-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--grey-light); color: var(--charcoal); font-size: 12px; }
.dz-list .ic {
  flex: none; padding: 2px 6px; background: var(--grey-light); color: var(--grey-mid);
  font-family: var(--font-heading); font-size: 9px; font-weight: 700;
}
.dz-list b { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--grey-mid); }
.dz-list b.paid { color: var(--teal); }
.dz-list b.due { color: var(--amber, #f5a623); }
.dz-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.dz-steps .step { display: flex; justify-content: space-between; font-size: 12px; color: var(--grey-mid); padding-left: 16px; position: relative; }
.dz-steps .step::before {
  content: ''; position: absolute; left: 0; top: 5px; width: 8px; height: 8px;
  border-radius: 50%; border: 1.5px solid var(--grey-light);
}
.dz-steps .step.done::before { background: var(--teal); border-color: var(--teal); }
.dz-steps .step.now::before { border-color: var(--teal); }
.dz-steps .step b { color: var(--charcoal); font-weight: 600; }
.dz-bar { height: 4px; background: var(--grey-light); overflow: hidden; }
.dz-bar i { display: block; height: 100%; background: var(--teal); }

/* ---- 4. Booking ---- */
.dz-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 12px; }
.dz-day {
  padding: 8px 2px; cursor: pointer; background: none; border: 1px solid var(--grey-light);
  display: flex; flex-direction: column; gap: 2px; transition: border-color .2s ease;
}
.dz-day b { font-family: var(--font-heading); font-size: 11px; color: var(--charcoal); }
.dz-day span { font-size: 9px; color: var(--grey-mid); }
.dz-day:hover { border-color: var(--teal); }
.dz-day.on { background: var(--navy); border-color: var(--navy); }
.dz-day.on b { color: #fff; }
.dz-day.on span { color: rgba(255,255,255,.6); }
.dz-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.dz-slot {
  padding: 9px 2px; cursor: pointer; background: none; border: 1px solid var(--grey-light);
  font-size: 11px; color: var(--charcoal); font-variant-numeric: tabular-nums;
  transition: border-color .2s ease, color .2s ease;
}
.dz-slot:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.dz-slot.taken { background: var(--grey-light); color: var(--grey-mid); text-decoration: line-through; cursor: not-allowed; }
.dz-slot.mine { background: var(--teal); border-color: var(--teal); color: #fff; text-decoration: none; cursor: default; }
.dz-confirm { min-height: 20px; margin-top: 12px; font-size: 12px; color: var(--grey-mid); }
.dz-confirm strong { color: var(--teal); }

/* ---- 5. Dashboard ---- */
.dz-range { display: flex; gap: 4px; margin-bottom: 14px; }
.dz-range button {
  padding: 5px 10px; cursor: pointer; background: none; border: 1px solid var(--grey-light);
  font-family: var(--font-heading); font-size: 10px; font-weight: 700; color: var(--grey-mid);
  text-transform: uppercase; letter-spacing: .06em; transition: all .2s ease;
}
.dz-range button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.dz-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.dz-kpis span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: var(--grey-mid); }
.dz-kpis b {
  display: block; margin-top: 3px; font-family: var(--font-heading); font-size: 16px;
  color: var(--charcoal); font-variant-numeric: tabular-nums;
}
.dz-chart { width: 100%; height: 110px; display: block; }

/* ---- 6. Email builder ---- */
.dz-mail-pal { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.dz-mail-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; cursor: pointer;
  background: none; border: 1px solid var(--grey-light); border-radius: var(--radius-sm);
  font-size: 11px; color: var(--charcoal); transition: border-color .2s ease, color .2s ease;
}
.dz-mail-chip i { font-style: normal; color: var(--teal); font-size: 10px; }
.dz-mail-chip:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); }
.dz-mail-chip:disabled { opacity: .4; cursor: not-allowed; }
.dz-mail-canvas {
  display: flex; flex-direction: column; gap: 4px; padding: 8px; min-height: 120px;
  background: var(--grey-light); border-radius: var(--radius-md);
}
.dz-mail-block {
  display: grid; grid-template-columns: 58px 1fr auto; gap: 8px; align-items: center;
  padding: 7px 8px; background: #fff; border-radius: var(--radius-sm);
}
.dz-mail-block .tag {
  font-family: var(--font-heading); font-size: 8px; font-weight: 700; color: var(--grey-mid);
  text-transform: uppercase; letter-spacing: .06em;
}
.dz-mail-block .pv { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dz-mail-block .ops { display: flex; gap: 2px; }
.dz-mail-block .ops button {
  width: 20px; height: 20px; cursor: pointer; background: none; color: var(--grey-mid);
  border: none; border-radius: var(--radius-xs); line-height: 1; transition: color .2s ease;
}
.dz-mail-block .ops button:hover:not(:disabled) { color: var(--teal); }
.dz-mail-block .ops button:disabled { opacity: .25; cursor: not-allowed; }
.pv-head { font-family: var(--font-heading); font-size: 11px; font-weight: 700; color: var(--charcoal); }
.pv-line { height: 4px; background: var(--grey-light); border-radius: var(--radius-pill); }
.pv-line.short { width: 55%; }
.pv-img { height: 22px; background: rgba(0,188,212,.16); border-radius: var(--radius-xs); }
.pv-btn {
  align-self: flex-start; padding: 3px 8px; background: var(--teal); color: #fff;
  border-radius: var(--radius-xs); font-size: 9px; font-family: var(--font-heading); font-weight: 700;
}
.pv-rule { height: 1px; background: var(--border); }
.dz-mail-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.dz-mail-foot span { font-size: 12px; color: var(--grey-mid); }
.dz-mail-foot span.ok { color: var(--teal); font-weight: 600; }
.dz-mail-foot .dz-demo-add { margin-top: 0; }

/* ---- 7. Fleet map ---- */
.dz-fleet { padding: 0; }
.dz-map-wrap { position: relative; }
.dz-map { display: block; width: 100%; height: auto; }
.dz-map .bg { fill: #F7F8FA; }
.dz-map .rd-minor { fill: none; stroke: #DDE1E8; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dz-map .rd-major { fill: none; stroke: #C2C9D4; stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round; }
.dz-map-attr {
  position: absolute; right: 6px; bottom: 5px; font-size: 9px; color: var(--grey-mid);
  background: rgba(255,255,255,.75); padding: 1px 5px; border-radius: var(--radius-xs);
}
.dz-map .v { cursor: pointer; }
.dz-map .v .halo { fill: var(--teal); opacity: 0; transition: opacity .2s ease; }
.dz-map .v .body { fill: var(--teal); stroke: #fff; stroke-width: 1.6; }
.dz-map .v .glass { fill: rgba(255,255,255,.62); }
.dz-map .v .wheel { fill: var(--navy-dark); }
.dz-map .v.parked .body { fill: var(--grey-mid); }
.dz-map .v.due .body { fill: var(--amber); }
.dz-map .v:hover .halo, .dz-map .v:focus .halo { opacity: .22; }
.dz-map .v.on .halo { opacity: .34; }
.dz-map .v.on .body { stroke: var(--navy); stroke-width: 2.2; }
.dz-map .v:focus { outline: none; }
.dz-fleet-info { padding: 12px 16px 16px; min-height: 96px; }
.dz-fleet-info .dz-demo-hint { margin: 0; opacity: 1; }
.dz-fleet-card .hd { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dz-fleet-card .hd b { font-family: var(--font-heading); font-size: 13px; color: var(--charcoal); }
.dz-fleet-card .reg {
  font-size: 10px; color: var(--grey-mid); background: var(--grey-light);
  padding: 2px 6px; border-radius: var(--radius-xs); font-variant-numeric: tabular-nums;
}
.dz-fleet-card .pill {
  margin-left: auto; font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: var(--radius-pill); color: #fff; background: var(--teal);
}
.dz-fleet-card .pill.stop { background: var(--grey-mid); }
.dz-fleet-card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dz-fleet-card dt { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-mid); }
.dz-fleet-card dd { margin-top: 2px; font-size: 12px; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.dz-fleet-card dd.due { color: var(--amber); font-weight: 600; }
.dz-fleet-card .fuel { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 10px; color: var(--grey-mid); }
.dz-fleet-card .fuel i { flex: 1; height: 4px; background: var(--grey-light); border-radius: var(--radius-pill); overflow: hidden; }
.dz-fleet-card .fuel b { display: block; height: 100%; background: var(--teal); }
.dz-fleet-card .fuel em { font-style: normal; font-variant-numeric: tabular-nums; }

/* ---- 8. Digital twin ---- */
.dz-twin { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; }
.dz-twin .cab { aspect-ratio: 1; border-radius: var(--radius-xs); transition: background-color .4s ease; }
.dz-twin .cab.free { background: var(--grey-light); }
.dz-twin .cab.occupied { background: var(--teal); }
.dz-twin .cab.cleaning { background: rgba(0,188,212,.32); }
.dz-twin-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.dz-twin-foot .dz-demo-add { margin-top: 0; }
.dz-legend { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--grey-mid); }
.dz-legend .k { width: 9px; height: 9px; border-radius: var(--radius-xs); margin-left: 6px; }
.dz-legend .k:first-child { margin-left: 0; }
.dz-legend .k.free { background: var(--grey-light); }
.dz-legend .k.occupied { background: var(--teal); }
.dz-legend .k.cleaning { background: rgba(0,188,212,.32); }

@media (prefers-reduced-motion: reduce) {
  .dz-job, .dz-twin .cab, .dz-slot, .dz-day, .dz-range button { transition: none; }
  .dz-job:hover { transform: none; }
}

/* ============================================================
   PLATFORM STRIP (web / desktop / mobile range)
   ============================================================ */
.dz-plat-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .dz-plat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dz-plat-grid { grid-template-columns: repeat(4, 1fr); } }
.dz-plat {
  display: flex; flex-direction: column; background: #fff; padding: 24px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: transform .3s ease, box-shadow .3s ease;
}
.dz-plat:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(30,34,53,.4); }
.dz-plat .dz-icon-ring { margin: 0 0 16px; width: 52px; height: 52px; }
.dz-plat .dz-icon-ring svg { width: 22px; height: 22px; }
.dz-plat h3 {
  font-family: var(--font-heading); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--charcoal);
}
.dz-plat p { margin-top: 8px; font-size: 13px; line-height: 1.65; color: var(--grey-mid); flex: 1; }
.dz-plat .built {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--grey-light);
  font-size: 11px; color: var(--teal); font-weight: 600;
}
@media (prefers-reduced-motion: reduce) {
  .dz-plat { transition: none; }
  .dz-plat:hover { transform: none; }
}

/* ---- Flagship panel: the shapes an app takes ---- */
.dz-sx-shapes { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.dz-shape-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 12px; }
@media (min-width: 700px) { .dz-shape-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .dz-shape-grid { grid-template-columns: repeat(4, 1fr); } }
.dz-shape {
  padding: 10px 12px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-md); border-left: 2px solid var(--teal);
  transition: transform .2s ease, border-color .2s ease;
}
.dz-shape:hover { transform: translateY(-2px); border-color: var(--teal); }
.dz-shape b {
  display: block; font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  color: var(--charcoal); text-transform: uppercase; letter-spacing: .04em;
}
.dz-shape span { display: block; margin-top: 3px; font-size: 11px; color: var(--grey-mid); }
@media (prefers-reduced-motion: reduce) {
  .dz-shape { transition: none; }
  .dz-shape:hover { transform: none; }
}

/* ============================================================
   SERVICES INDEX (sub-nav, routing rows, small elements)
   ============================================================ */
.dz-subnav {
  position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--grey-light);
  padding-block: 10px;
}
/* Centred pills. It was a left-hugging tab strip with a hairline underline,
   which read as browser chrome rather than navigation. justify-content only
   centres while everything fits: once it scrolls, flex-start keeps the first
   item reachable instead of stranding it off-screen. */
.dz-subnav-in {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
}
.dz-subnav-in::-webkit-scrollbar { display: none; }
@media (max-width: 700px) { .dz-subnav-in { justify-content: flex-start; flex-wrap: nowrap; } }
.dz-subnav a {
  flex: none; padding: 8px 16px; border-radius: var(--radius-pill);
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--grey-mid);
  border: 1px solid transparent;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}
.dz-subnav a:hover, .dz-subnav a:focus-visible { color: var(--teal); border-color: var(--teal); }
.dz-subnav a.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.dz-subnav a.on:hover { color: #fff; }
/* Anchors must clear the sticky bar when jumped to. */
.dz-alt[id], .dz-caps[id] { scroll-margin-top: 72px; }

.dz-alt-lead {
  font-family: var(--font-heading); font-size: 15px; font-weight: 700;
  color: var(--charcoal); margin-top: 10px;
}
.dz-tick { display: flex; flex-direction: column; gap: 7px; margin-top: 16px; }
.dz-tick li {
  position: relative; padding-left: 22px; font-size: 14px; line-height: 1.5; color: var(--grey-mid);
}
.dz-tick li::before {
  content: ''; position: absolute; left: 0; top: 5px; width: 11px; height: 6px;
  border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}
.dz-alt-go { margin-top: 22px; }

/* ---- Shared shell for the small service elements ---- */
.dz-sv {
  background: #fff; border: 1px solid var(--grey-light); border-radius: var(--radius-lg);
  box-shadow: 0 24px 48px -32px rgba(30,34,53,.45); padding: 18px; font-size: 13px;
}
.dz-sv-still { padding: 24px 8px; color: var(--grey-mid); }
.dz-sv-cap { margin-top: 12px; font-size: 12px; color: var(--grey-mid); line-height: 1.5; }
.dz-sv-slider { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.dz-sv-slider span {
  font-family: var(--font-heading); font-size: 9px; font-weight: 700; color: var(--grey-mid);
  text-transform: uppercase; letter-spacing: .07em;
}
.dz-sv-slider input { flex: 1; }
.dz-sv-slider b { font-size: 11px; color: var(--teal); font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; }
.dz-sv-btn {
  padding: 5px 10px; cursor: pointer; background: none; border: 1px solid var(--grey-light);
  border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--teal);
  transition: border-color .2s ease;
}
.dz-sv-btn:hover { border-color: var(--teal); }

/* ---- Platforms ---- */
/* wrap: the surfaces element has five tabs, which will not fit a phone on one line. */
.dz-sv-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; }
.dz-sv-tabs button {
  padding: 5px 11px; cursor: pointer; background: none; border: 1px solid var(--grey-light);
  border-radius: var(--radius-sm); font-family: var(--font-heading); font-size: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-mid);
  transition: all .2s ease;
}
.dz-sv-tabs button[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.dz-sv-stage { display: grid; place-items: center; min-height: 190px; background: var(--grey-light); border-radius: var(--radius-md); padding: 16px; }
.dz-sv-device {
  position: relative; display: grid; gap: 6px; background: #fff; padding: 26px 10px 10px;
  border: 1px solid var(--border); transition: width .35s cubic-bezier(.22,1,.36,1), height .35s cubic-bezier(.22,1,.36,1);
  grid-template-columns: repeat(3, 1fr);
}
.dz-sv-device .chrome {
  position: absolute; top: 0; left: 0; right: 0; height: 18px; background: var(--navy);
  color: rgba(255,255,255,.7); font-size: 8px; display: flex; align-items: center; padding: 0 6px;
}
.dz-sv-device .row { grid-column: 1 / -1; height: 6px; background: var(--grey-light); border-radius: var(--radius-pill); }
.dz-sv-device .row.w2 { width: 60%; }
.dz-sv-device .row.w3 { width: 40%; }
.dz-sv-device .tile { height: 26px; background: rgba(0,188,212,.16); border-radius: var(--radius-xs); }
.dz-sv-device.web { width: 260px; border-radius: var(--radius-md); }
.dz-sv-device.mac { width: 240px; border-radius: var(--radius-md); }
.dz-sv-device.mac .chrome { background: #3B3F5C; }
.dz-sv-device.ios { width: 108px; border-radius: 16px; grid-template-columns: repeat(2, 1fr); }
.dz-sv-device.ios .chrome { justify-content: center; border-radius: 15px 15px 0 0; }

/* ---- Viewport ---- */
.dz-sv-vp { display: grid; place-items: start center; min-height: 180px; background: var(--grey-light); border-radius: var(--radius-md); padding: 14px; }
.dz-sv-vp .frame {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 0 0 10px; overflow: hidden; transition: width .12s linear;
}
.dz-sv-vp .bar { display: block; height: 14px; background: var(--navy); }
.dz-sv-vp .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; }
.dz-sv-vp .hero { grid-column: 1 / -1; height: 34px; background: rgba(0,188,212,.18); border-radius: var(--radius-xs); }
.dz-sv-vp .c { height: 22px; background: var(--grey-light); border-radius: var(--radius-xs); }
.dz-sv-vp .line { grid-column: 1 / -1; height: 5px; background: var(--grey-light); border-radius: var(--radius-pill); }
.dz-sv-vp .line.short { width: 55%; }
.dz-sv-vp .frame.narrow .grid { grid-template-columns: repeat(2, 1fr); }
.dz-sv-vp .frame.tiny .grid { grid-template-columns: 1fr; }

/* ---- Wipe ---- */
.dz-sv-wipe {
  position: relative; height: 190px; border-radius: var(--radius-md); overflow: hidden;
  background: var(--grey-light);
}
.dz-sv-wipe .side { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; padding: 26px 14px 14px; }
.dz-sv-wipe .lbl {
  position: absolute; top: 7px; left: 10px; font-family: var(--font-heading); font-size: 8px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--grey-mid);
}
.dz-sv-wipe .real { background: #fff; }
.dz-sv-wipe .real .lbl { color: var(--teal); }
.dz-sv-wipe .b { border-radius: var(--radius-xs); }
.dz-sv-wipe .wire .b { background: none; border: 1px dashed #C6CBD4; }
.dz-sv-wipe .b.h { height: 20px; }
.dz-sv-wipe .b.l { height: 7px; }
.dz-sv-wipe .b.l.s { width: 60%; }
.dz-sv-wipe .b.t { height: 26px; }
.dz-sv-wipe .b.btn { height: 16px; width: 84px; margin-top: 4px; }
.dz-sv-wipe .real .b.h { background: var(--navy); }
.dz-sv-wipe .real .b.l { background: var(--grey-light); }
.dz-sv-wipe .real .b.t { background: rgba(0,188,212,.16); }
.dz-sv-wipe .real .b.btn { background: var(--teal); }
.dz-sv-wipe .handle { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--teal); }

/* ---- Brand ---- */
.dz-sv-brand { display: flex; align-items: center; gap: 14px; }
.dz-sv-brand .mark {
  width: 64px; height: 64px; flex: none; border-radius: var(--radius-md); display: grid;
  place-items: center; font-family: var(--font-heading); font-weight: 900; font-size: 22px;
  transition: background .3s ease, color .3s ease;
}
.dz-sv-brand .sw { display: flex; gap: 6px; flex: 1; }
.dz-sv-brand .chip { flex: 1; height: 40px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,.06); transition: background .3s ease; }
.dz-sv-brandfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.dz-sv-brandfoot span { font-family: var(--font-heading); font-size: 11px; color: var(--charcoal); }

/* ---- Uptime ---- */
.dz-sv-up .hd { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.dz-sv-up .hd b { font-size: 12px; color: var(--charcoal); }
.dz-sv-up .hd .ms { margin-left: auto; font-size: 11px; color: var(--grey-mid); font-variant-numeric: tabular-nums; }
.dz-sv-up .dot.live { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.dz-sv-up .spark { width: 100%; height: 44px; display: block; }
.dz-sv-up dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.dz-sv-up dt { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-mid); }
.dz-sv-up dd { margin-top: 2px; font-size: 12px; color: var(--charcoal); font-weight: 600; }

/* ---- 3D layers ---- */
.dz-sv-print { display: grid; place-items: end center; min-height: 180px; background: var(--grey-light); border-radius: var(--radius-md); padding: 14px; }
.dz-sv-print .bed { display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; width: 100%; }
.dz-sv-print .ly {
  height: 7px; border-radius: var(--radius-pill); background: var(--grey-light);
  opacity: .25; transition: opacity .18s ease, background .18s ease;
}
.dz-sv-print .ly.on { background: var(--teal); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .dz-sv-device, .dz-sv-vp .frame, .dz-sv-brand .mark, .dz-sv-brand .chip, .dz-sv-print .ly { transition: none; }
}

/* ============================================================
   QUOTE BAND (closes every service page)
   Full-bleed comes free: sections sit directly in entry-content, which
   already spans the page. A 100vw + negative-margin hack here actually
   broke it, because the 50% resolves against the parent, not the viewport.
   ============================================================ */
.dz-quoteband {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  padding-block: 72px;
}
.dz-quoteband .dz-eyebrow { text-align: center; display: block; }
.dz-quoteband .dz-section-head { margin-bottom: 40px; }

/* The wizard is built for a white page; re-tone it for the dark band. */
.dz-quoteband .dz-field label { color: rgba(255,255,255,.8); }
.dz-quoteband .dz-input,
.dz-quoteband .dz-field input,
.dz-quoteband .dz-field select,
.dz-quoteband .dz-field textarea {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff;
}
.dz-quoteband .dz-input::placeholder { color: rgba(255,255,255,.35); }
.dz-quoteband .dz-field input:focus,
.dz-quoteband .dz-field select:focus,
.dz-quoteband .dz-field textarea:focus { border-color: var(--teal); background: rgba(255,255,255,.09); }
/* Native selects paint their menu with the field colours, so options need a
   solid background or they render white-on-white. */
.dz-quoteband .dz-field select option { background: var(--navy-dark); color: #fff; }
.dz-quoteband .dz-svc-card, .dz-quoteband .dz-pill, .dz-quoteband .dz-filedrop {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); color: #fff;
}
.dz-quoteband .dz-svc-card:hover, .dz-quoteband .dz-pill:hover, .dz-quoteband .dz-filedrop:hover { border-color: var(--teal); }
.dz-quoteband .dz-wz-summary { background: rgba(255,255,255,.05); }
.dz-quoteband .dz-wz-bar { background: rgba(255,255,255,.12); }
.dz-quoteband .dz-review { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); }
/* The wizard hard-codes charcoal on its own headings and card text, which is
   invisible here: measured 1.11:1 against the band before these. Everything
   the wizard can render is listed rather than relying on inheritance. */
.dz-quoteband h2, .dz-quoteband h3, .dz-quoteband h4,
.dz-quoteband legend, .dz-quoteband strong,
.dz-quoteband .dz-svc-title, .dz-quoteband .dz-svc-block-title,
.dz-quoteband .dz-pill-label, .dz-quoteband .dz-label,
.dz-quoteband .dz-wz-step-label, .dz-quoteband .dz-review b { color: #fff; }
.dz-quoteband p, .dz-quoteband li, .dz-quoteband dd, .dz-quoteband small,
.dz-quoteband .dz-svc-desc, .dz-quoteband .dz-pill-desc,
.dz-quoteband .dz-pill-hint, .dz-quoteband .dz-sub, .dz-quoteband .dz-sub-note,
.dz-quoteband .dz-filedrop-txt, .dz-quoteband .dz-review-hint,
.dz-quoteband .dz-terms, .dz-quoteband .dz-wz-empty,
.dz-quoteband .dz-sum-empty { color: rgba(255,255,255,.72); }
.dz-quoteband .dz-wz-step, .dz-quoteband .dz-wz-pct { color: var(--teal); }
/* Summary rows are injected by view.js, so they are not in wizard.php's markup. */
.dz-quoteband .dz-sum-v { color: #fff; }
.dz-quoteband .dz-sum-k { color: rgba(255,255,255,.72); }
.dz-quoteband em, .dz-quoteband label, .dz-quoteband label span,
.dz-quoteband .dz-wz-back { color: rgba(255,255,255,.72); }
.dz-quoteband .dz-wz-back:hover { color: #fff; }
/* Orange only reaches 4:1 on navy; amber clears AA. Needs to outrank
   `.dz-field label .req`, which is more specific than a bare `.dz-quoteband .req`. */
.dz-quoteband .dz-field label .req, .dz-quoteband .req { color: var(--amber); }
.dz-quoteband .dz-svc-card.on, .dz-quoteband .dz-pill.on { border-color: var(--teal); background: rgba(0,188,212,.12); }
.dz-quoteband .dz-btn--ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.dz-quoteband .dz-btn--ghost:hover { background: #fff; color: var(--navy); }

/* ============================================================
   CUSTOM APPS (the flagship page)
   ============================================================ */
.dz-surfaces-wrap { max-width: 780px; margin: 36px auto 0; }
.dz-surf-note { max-width: 680px; margin: 22px auto 0; text-align: center; font-size: 14px; color: var(--grey-mid); line-height: 1.7; }
/* The device widths below are fixed on purpose: a browser frame that reflows
   is not a browser frame. On a narrow screen the stage scales the whole mockup
   down instead, and clips so a fixed width can never widen the page. */
.dz-surf-stage {
  display: grid; place-items: center; min-height: 260px; background: var(--grey-light);
  border-radius: var(--radius-md); padding: 20px; overflow: hidden;
}
@media (max-width: 520px) {
  .dz-surf-stage { min-height: 220px; }
  .dz-surf { transform: scale(.72); transform-origin: center; }
}
.dz-surf {
  position: relative; background: #fff; border: 1px solid var(--border); display: grid; gap: 6px;
  transition: width .35s cubic-bezier(.22,1,.36,1), height .35s cubic-bezier(.22,1,.36,1);
}
.dz-surf .chrome {
  position: absolute; top: 0; left: 0; right: 0; height: 18px; background: var(--navy);
  color: rgba(255,255,255,.65); font-size: 8px; display: flex; align-items: center; padding: 0 7px;
}
.dz-surf .side { display: flex; flex-direction: column; gap: 5px; padding: 6px; background: var(--grey-light); }
.dz-surf .side i { height: 6px; border-radius: var(--radius-pill); background: #D8DCE3; }
.dz-surf .main { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 8px; align-content: start; }
.dz-surf .main .hd { grid-column: 1/-1; height: 16px; background: rgba(0,188,212,.18); border-radius: var(--radius-xs); }
.dz-surf .main .r { grid-column: 1/-1; height: 5px; background: var(--grey-light); border-radius: var(--radius-pill); }
.dz-surf .main .r.s { width: 55%; }
.dz-surf .main .tile { height: 24px; background: var(--grey-light); border-radius: var(--radius-xs); }
.dz-surf .btabs { display: flex; gap: 8px; justify-content: space-around; padding: 6px; border-top: 1px solid var(--grey-light); }
.dz-surf .btabs i { width: 14px; height: 5px; border-radius: var(--radius-pill); background: #D8DCE3; }
.dz-surf .btabs i:first-child { background: var(--teal); }
.dz-surf .pane { padding: 7px; }
.dz-surf .pane.list { display: flex; flex-direction: column; gap: 5px; background: var(--grey-light); }
.dz-surf .pane.list i { height: 14px; border-radius: var(--radius-xs); background: #E4E8EE; }
.dz-surf .pane.detail { background: rgba(0,188,212,.1); border-radius: var(--radius-xs); margin: 7px; }
.dz-surf.web { width: 380px; padding-top: 18px; grid-template-columns: 62px 1fr; border-radius: var(--radius-md); }
.dz-surf.mac { width: 340px; padding-top: 18px; grid-template-columns: 62px 1fr; border-radius: var(--radius-md); }
.dz-surf.mac .chrome { background: #3B3F5C; }
.dz-surf.phone { width: 118px; padding-top: 18px; grid-template-columns: 1fr; border-radius: 16px; }
.dz-surf.phone .chrome { border-radius: 15px 15px 0 0; justify-content: center; }
.dz-surf.tablet { width: 300px; padding-top: 18px; grid-template-columns: 108px 1fr; border-radius: 12px; }
.dz-surf.watch {
  width: 92px; height: 112px; border-radius: 22px; background: var(--navy-dark);
  place-items: center; border-color: var(--navy-dark);
}
.dz-surf .wface { display: grid; place-items: center; gap: 2px; }
.dz-surf .wface b { font-family: var(--font-heading); font-size: 30px; font-weight: 900; color: var(--teal); line-height: 1; }
.dz-surf .wface i { font-style: normal; font-size: 8px; color: rgba(255,255,255,.6); }

.dz-try {
  margin-top: 12px; font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--teal);
}
.dz-alt-copy .dz-eyebrow { font-size: 12px; }

/* Proof strip */
.dz-proof-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .dz-proof-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dz-proof-grid { grid-template-columns: repeat(4, 1fr); } }
.dz-proof {
  display: flex; flex-direction: column; padding: 22px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.dz-proof:hover { transform: translateY(-3px); border-color: var(--teal); box-shadow: 0 18px 40px -26px rgba(30,34,53,.45); }
.dz-proof b {
  font-family: var(--font-heading); font-size: 15px; font-weight: 900; color: var(--teal); line-height: 1.3;
}
.dz-proof h4 {
  margin-top: 10px; font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--charcoal);
}
.dz-proof p { margin-top: 7px; font-size: 13px; color: var(--grey-mid); line-height: 1.55; flex: 1; }
.dz-proof .tag {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--grey-light);
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--grey-mid);
}

/* Take-over cards */
.dz-take-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 700px) { .dz-take-grid { grid-template-columns: repeat(2, 1fr); } }
.dz-take { padding: 24px; background: #fff; border-radius: var(--radius-lg); border-left: 3px solid var(--teal); }
.dz-take h4 { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--charcoal); }
.dz-take p { margin-top: 8px; font-size: 14px; color: var(--grey-mid); line-height: 1.65; }

/* Phases */
.dz-phases { display: flex; flex-direction: column; gap: 4px; max-width: 860px; margin: 0 auto; }
.dz-phase { display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--grey-light); }
.dz-phase:last-child { border-bottom: none; }
.dz-phase .n {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grey-light); color: var(--teal); font-family: var(--font-heading);
  font-size: 13px; font-weight: 900;
}
.dz-phase h4 { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--charcoal); }
.dz-phase h4 em { font-style: normal; margin-left: 8px; font-size: 11px; color: var(--teal); letter-spacing: .04em; }
.dz-phase p { margin-top: 7px; font-size: 14px; color: var(--grey-mid); line-height: 1.7; }

/* Stack grid */
.dz-stack-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) { .dz-stack-grid { grid-template-columns: repeat(2, 1fr); } }
.dz-stack-i {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; background: #fff;
  border-radius: var(--radius-md); border: 1px solid var(--border);
}
.dz-stack-i b { font-family: var(--font-heading); font-size: 12px; color: var(--teal); text-transform: uppercase; letter-spacing: .05em; }
.dz-stack-i span { font-size: 14px; color: var(--charcoal); line-height: 1.55; }

/* AI */
.dz-ai-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .dz-ai-grid { grid-template-columns: repeat(3, 1fr); } }
.dz-ai { padding: 24px; background: var(--grey-light); border-radius: var(--radius-lg); }
.dz-ai h4 { font-family: var(--font-heading); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--teal); }
.dz-ai p { margin-top: 8px; font-size: 14px; color: var(--grey-mid); line-height: 1.65; }

@media (prefers-reduced-motion: reduce) {
  .dz-surf, .dz-proof { transition: none; }
  .dz-proof:hover { transform: none; }
}

/* ---- Facts band ---- */
.dz-facts {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 36px 0 8px;
  background: var(--grey-light); border: 1px solid var(--grey-light); border-radius: var(--radius-lg);
  overflow: hidden;
}
@media (min-width: 760px) { .dz-facts { grid-template-columns: repeat(4, 1fr); } }
.dz-fact-i { background: #fff; padding: 20px 18px; }
.dz-fact-i b {
  display: block; font-family: var(--font-heading); font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 900; color: var(--teal); line-height: 1;
}
.dz-fact-i span { display: block; margin-top: 6px; font-size: 12px; color: var(--grey-mid); line-height: 1.45; }

/* ---- Hosting plans ---- */
.dz-sv-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dz-sv-seg { display: inline-flex; border: 1px solid var(--grey-light); border-radius: var(--radius-sm); overflow: hidden; }
.dz-sv-seg button {
  padding: 6px 12px; cursor: pointer; background: none; border: none;
  font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--grey-mid); transition: all .2s ease;
}
.dz-sv-seg button.on { background: var(--navy); color: #fff; }
.dz-sv-plan-head .save { font-size: 11px; font-weight: 600; color: var(--teal); }
.dz-sv-plans { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.dz-sv-plans button {
  padding: 9px 4px; cursor: pointer; background: none; border: 1px solid var(--grey-light);
  border-radius: var(--radius-sm); display: flex; flex-direction: column; gap: 2px;
  transition: border-color .2s ease, background .2s ease;
}
.dz-sv-plans button b { font-family: var(--font-heading); font-size: 12px; color: var(--charcoal); }
.dz-sv-plans button span { font-size: 8px; color: var(--grey-mid); line-height: 1.2; }
.dz-sv-plans button:hover { border-color: var(--teal); }
.dz-sv-plans button.on { background: var(--navy); border-color: var(--navy); }
.dz-sv-plans button.on b { color: #fff; }
.dz-sv-plans button.on span { color: rgba(255,255,255,.6); }
.dz-sv-plan-detail { margin-top: 14px; }
.dz-sv-plan-detail .price { display: flex; align-items: baseline; gap: 7px; margin-bottom: 10px; }
.dz-sv-plan-detail .price b {
  font-family: var(--font-heading); font-size: 30px; font-weight: 900; color: var(--charcoal); line-height: 1;
}
.dz-sv-plan-detail .price span { font-size: 12px; color: var(--grey-mid); }
.dz-sv-plan-detail .dz-tick { margin-top: 0; }
.dz-sv-plan-detail .dz-tick li { font-size: 13px; }

/* ---- Steps ---- */
/* Still an <ol> for semantics, but the numbers are drawn in the markers, so
   the native list numbering would double up. */
.dz-sv-steps { display: flex; flex-direction: column; gap: 2px; list-style: none; padding: 0; margin: 0; }
.dz-sv-steps li button {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: none; border: none; padding: 8px 6px; border-radius: var(--radius-sm);
  transition: background .2s ease;
}
.dz-sv-steps li button:hover { background: var(--grey-light); }
.dz-sv-steps li b {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--grey-light); color: var(--grey-mid); font-size: 10px; font-weight: 700;
  font-family: var(--font-heading); transition: background .2s ease, color .2s ease;
}
.dz-sv-steps li span { font-size: 13px; color: var(--grey-mid); }
.dz-sv-steps li.on b { background: var(--teal); color: #fff; }
.dz-sv-steps li.on span { color: var(--charcoal); font-weight: 600; }
.dz-sv-steps li.done b { background: rgba(0,188,212,.2); color: var(--teal-darker); }
.dz-sv-step-body {
  margin-top: 12px; padding: 12px; background: var(--grey-light); border-radius: var(--radius-md);
  font-size: 13px; line-height: 1.6; color: var(--charcoal); min-height: 64px;
}
.dz-sv-step-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; }
.dz-sv-step-nav span { font-size: 11px; color: var(--grey-mid); font-variant-numeric: tabular-nums; }
.dz-sv-step-nav button:disabled { opacity: .35; cursor: not-allowed; }

/* Current service in the switcher */
.dz-subnav a.on { color: var(--teal); border-bottom-color: var(--teal); }

/* Prev / all / next */
.dz-svc-next { padding-block: 48px; }
.dz-nextprev { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 760px) { .dz-nextprev { grid-template-columns: 1fr auto 1fr; align-items: stretch; } }
.dz-np {
  display: flex; flex-direction: column; gap: 4px; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color .2s ease, transform .2s ease;
}
.dz-np:hover { border-color: var(--teal); transform: translateY(-2px); }
.dz-np span {
  font-family: var(--font-heading); font-size: 9px; font-weight: 700; color: var(--grey-mid);
  text-transform: uppercase; letter-spacing: .08em;
}
.dz-np b { font-family: var(--font-heading); font-size: 13px; color: var(--charcoal); }
.dz-np:hover b { color: var(--teal); }
.dz-np.nx { text-align: right; }
.dz-np.all { justify-content: center; text-align: center; background: var(--grey-light); border-color: var(--grey-light); }
@media (prefers-reduced-motion: reduce) {
  .dz-np, .dz-sv-steps li button, .dz-sv-steps li b { transition: none; }
  .dz-np:hover { transform: none; }
}

/* Service page hero + wider capability groups */
.dz-svc-hero { text-align: center; max-width: 720px; margin: 0 auto 8px; }
.dz-svc-hero .dz-icon-ring { margin: 0 auto 18px; }
.dz-cap-grid--wide { grid-template-columns: 1fr; }
@media (min-width: 700px) { .dz-cap-grid--wide { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   CAPABILITY INDEX (the long list)
   ============================================================ */
.dz-cap-grid { display: grid; grid-template-columns: 1fr; gap: 28px 32px; }
@media (min-width: 600px) { .dz-cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .dz-cap-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .dz-cap-grid { grid-template-columns: repeat(4, 1fr); } }
.dz-cap h3 {
  font-family: var(--font-heading); font-size: 11px; font-weight: 700; color: var(--charcoal);
  text-transform: uppercase; letter-spacing: .08em;
  padding-bottom: 8px; border-bottom: 2px solid var(--teal); margin-bottom: 10px;
}
.dz-cap ul { display: flex; flex-direction: column; gap: 5px; }
.dz-cap li {
  position: relative; padding-left: 14px; font-size: 13px; line-height: 1.5; color: var(--grey-mid);
}
.dz-cap li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 1px; background: var(--teal);
}
.dz-cap-foot {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--grey-light);
  text-align: center; font-size: 14px; color: var(--grey-mid);
}
.dz-cap-foot a { color: var(--teal); font-weight: 600; }

/* ============================================================
   SCALE BAND (1 user to 200+)
   ============================================================ */
.dz-scale { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); padding-block: 72px; }
.dz-scale-track {
  position: relative; height: 3px; margin: 8px 0 40px;
  background: linear-gradient(90deg, rgba(0,188,212,.15), var(--teal));
}
.dz-scale-track .dot {
  position: absolute; top: 50%; transform: translate(-50%,-50%);
  border-radius: 50%; background: var(--teal);
}
.dz-scale-track .d1 { left: 16.66%; width: 10px; height: 10px; opacity: .55; }
.dz-scale-track .d2 { left: 50%; width: 14px; height: 14px; opacity: .8; }
.dz-scale-track .d3 { left: 83.33%; width: 20px; height: 20px; box-shadow: 0 0 16px rgba(0,188,212,.6); }
.dz-scale-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .dz-scale-grid { grid-template-columns: repeat(3, 1fr); } }
.dz-scale-step {
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.1);
  padding: 28px; transition: background .3s ease, transform .3s ease, opacity .6s ease;
}
.dz-scale-step:hover { background: rgba(0,188,212,.06); transform: translateY(-3px); }
.dz-scale-step .tier {
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--teal);
}
.dz-scale-step h3 {
  margin-top: 10px; font-family: var(--font-heading); font-size: 16px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; color: #fff; line-height: 1.4;
}
.dz-scale-step p { margin-top: 10px; font-size: 14px; color: rgba(255,255,255,.65); line-height: 1.7; }

/* ============================================================
   PORTFOLIO CASE STUDIES
   ============================================================ */
/* Legacy demo projects: bare paragraphs need a readable frame until replaced. */
.dz-case > .wp-block-post-content > p {
  max-width: var(--container); margin: 56px auto !important; padding-inline: 24px;
}

.dz-cs-hero {
  background: linear-gradient(to bottom, var(--navy), var(--navy-dark));
  padding-block: 72px 56px;
}
.dz-cs-hero h1 {
  margin-top: 10px; font-family: var(--font-heading); font-weight: 900;
  font-size: clamp(34px, 5vw, 52px); text-transform: uppercase;
  letter-spacing: 0.04em; color: #fff; line-height: 1.08;
}
.dz-cs-oneliner { margin-top: 16px; max-width: 46rem; color: rgba(255,255,255,.75); font-size: 17px; line-height: 1.75; }
.dz-cs-meta {
  display: flex; flex-wrap: wrap; gap: 28px 44px; margin-top: 36px;
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 24px;
}
.dz-cs-meta .k {
  display: block; font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,.45);
}
.dz-cs-meta .v { display: block; margin-top: 4px; font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.03em; }
.dz-cs-meta .v a { color: var(--teal); }
.dz-badge-live {
  font-style: normal; color: #4ADE80;
  animation: dz-live-pulse 2s ease-in-out infinite;
}
@keyframes dz-live-pulse { 50% { opacity: .55; } }

.dz-cs-split { display: grid; grid-template-columns: 1fr; gap: 44px; }
@media (min-width: 900px) { .dz-cs-split { grid-template-columns: 1fr 1fr; } }
.dz-cs-col .dz-h2 { margin-top: 8px; font-size: clamp(20px, 2.6vw, 26px); }
.dz-cs-col p:not(.dz-eyebrow) { margin-top: 14px; color: var(--grey-mid); font-size: 15px; line-height: 1.8; }
.dz-cs-technote {
  margin: 28px auto 0; max-width: 720px; text-align: center;
  font-size: 13px; color: var(--grey-mid); font-style: italic; line-height: 1.7;
}
.dz-nb-bg .dz-cs-technote { color: rgba(255,255,255,.55); }

/* --- Newberry palette (from the client's own brand) --- */
.dz-nb-bg { background: #1E2A20; }
.dz-nb-bg .dz-h2 { color: #fff; }
.dz-nb-bg .dz-lead { color: rgba(255,255,255,.6); }
.dz-nb-bg .dz-eyebrow { color: #D4A843; }

/* Campus map mock */
.dz-nb-map { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .dz-nb-map { grid-template-columns: 3fr 2fr; } }
.dz-nb-map-canvas { position: relative; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 20px 50px -25px rgba(0,0,0,.6); }
.dz-nb-map-canvas svg { display: block; width: 100%; height: auto; }
.dz-nb-zone {
  fill: rgba(58,145,63,0); stroke: rgba(58,145,63,.55); stroke-width: 1.5;
  transition: fill .25s ease; cursor: pointer;
}
.dz-nb-zone:hover, .dz-nb-zone.is-hover { fill: rgba(58,145,63,.3); }
.dz-nb-tooltip {
  position: absolute; top: 14%; left: 42%;
  background: #fff; color: #1E2A20; font-family: var(--font-heading);
  font-size: 12px; font-weight: 700; padding: 7px 12px; border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.dz-nb-tooltip::after {
  content: ""; position: absolute; left: 18px; bottom: -6px;
  border: 6px solid transparent; border-top-color: #fff; border-bottom: 0;
}
.dz-nb-panel {
  background: #FAFAF7; border-left: 4px solid #3A913F; padding: 28px; border-radius: var(--radius-sm);
  display: flex; flex-direction: column; justify-content: center;
}
.dz-nb-cat {
  align-self: flex-start; background: rgba(58,145,63,.12); color: #3A913F;
  font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em; padding: 4px 10px; border-radius: var(--radius-xs);
}
.dz-nb-panel h3 { margin-top: 12px; font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: #1E2A20; }
.dz-nb-panel p { margin-top: 10px; font-size: 14px; color: #55604F; line-height: 1.7; }
.dz-nb-panel-cue { margin-top: 16px; font-size: 12px; color: #8A947F; font-style: italic; }

/* Shared Newberry chip */
.dz-nb-chip {
  display: inline-block; font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  padding: 7px 14px; border-radius: var(--radius-pill); border: 1.5px solid #C9CFC2;
  color: #55604F; background: #fff;
}
.dz-nb-chip.on { background: #3A913F; border-color: #3A913F; color: #fff; }

/* KPI dashboard mock */
.dz-nb-dash { background: #FAFAF7; border-radius: var(--radius-md); padding: 24px; box-shadow: 0 16px 40px -24px rgba(30,42,32,.35); }
.dz-nb-dash-top { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.dz-nb-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 900px) { .dz-nb-kpis { grid-template-columns: repeat(4, 1fr); } }
.dz-nb-kpi {
  position: relative; background: #fff; border-radius: var(--radius-sm); padding: 18px;
  box-shadow: 0 2px 10px rgba(30,42,32,.07); overflow: hidden;
}
.dz-nb-kpi .lbl { display: block; font-family: var(--font-heading); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #8A947F; }
.dz-nb-kpi .num { display: block; margin-top: 8px; font-family: var(--font-heading); font-size: 34px; font-weight: 900; color: #1E2A20; line-height: 1; }
.dz-nb-kpi .trend { display: block; margin-top: 6px; font-size: 11px; font-weight: 600; }
.dz-nb-kpi .trend.up { color: #3A913F; }
.dz-nb-kpi .trend.flat { color: #D4A843; }
.dz-nb-kpi .bars { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 12px; }
.dz-nb-kpi .bars i { flex: 1; background: rgba(58,145,63,.25); border-radius: var(--radius-xs) var(--radius-xs) 0 0; }
.dz-nb-kpi .bars i:last-child { background: #3A913F; }

/* Kanban mock */
.dz-nb-kanban { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 900px) { .dz-nb-kanban { grid-template-columns: repeat(4, 1fr); } }
.dz-nb-kcol { background: #F1F3EE; border-radius: var(--radius-sm); padding: 14px; }
.dz-nb-kcol h4 {
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: #8A947F; margin-bottom: 12px;
}
.dz-nb-kcard {
  background: #fff; border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px;
  box-shadow: 0 1px 6px rgba(30,42,32,.1); display: flex; flex-direction: column; gap: 3px;
}
.dz-nb-kcard.is-drag { transform: rotate(-2deg); box-shadow: 0 10px 24px rgba(30,42,32,.22); border: 1.5px dashed #3A913F; }
.dz-nb-kcard .nm { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: #1E2A20; }
.dz-nb-kcard .pl { font-size: 11px; color: #8A947F; }
.dz-nb-kcard .st {
  align-self: flex-start; margin-top: 4px; font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: var(--radius-pill);
}
.dz-nb-kcard .st-new { background: #EEF3EA; color: #55604F; }
.dz-nb-kcard .st-mid { background: rgba(212,168,67,.18); color: #A17C1F; }
.dz-nb-kcard .st-done { background: rgba(58,145,63,.15); color: #3A913F; }

/* Audience builder mock */
.dz-nb-aud { max-width: 640px; margin-inline: auto; background: #FAFAF7; border-radius: var(--radius-md); padding: 24px; box-shadow: 0 16px 40px -24px rgba(0,0,0,.5); }
.dz-nb-aud-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-nb-aud-count { margin-top: 18px; font-size: 15px; color: #1E2A20; }
.dz-nb-aud-count strong { font-family: var(--font-heading); font-size: 22px; color: #3A913F; }
.dz-nb-aud-rows { margin-top: 12px; border-top: 1px solid #E3E7DE; }
.dz-nb-aud-rows .row {
  display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid #E3E7DE; font-size: 13px;
}
.dz-nb-aud-rows .nm { font-weight: 600; color: #1E2A20; min-width: 110px; }
.dz-nb-aud-rows .em { color: #8A947F; flex: 1; }
.dz-nb-aud-rows .src {
  background: rgba(58,145,63,.12); color: #3A913F; font-size: 10px; font-weight: 700;
  padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap;
}
.dz-nb-aud-tags { margin-top: 16px; font-size: 12px; color: #8A947F; }
.dz-nb-aud-tags code {
  background: #EEF3EA; color: #3A913F; padding: 2px 7px; border-radius: var(--radius-sm);
  font-size: 11px; margin-inline: 2px;
}

/* Screens gallery */
.dz-shots { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 700px) { .dz-shots { grid-template-columns: repeat(2, 1fr); } }
.dz-shot { margin: 0; }
.dz-shot img {
  width: 100%; max-height: 480px; object-fit: cover; object-position: top;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 14px 34px -20px rgba(30,34,53,.4);
}
.dz-shot figcaption { margin-top: 10px; font-size: 13px; color: var(--grey-mid); }
.dz-shot-box {
  aspect-ratio: 16/10; background: #272B45; border: 2px dashed rgba(0,188,212,.5);
  border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; padding: 20px;
}
.dz-shot-box span {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  color: rgba(255,255,255,.55); text-align: center; line-height: 1.6;
}

/* Results band */
.dz-cs-results { background: var(--navy-dark); padding-block: 72px; }
.dz-cs-numgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 900px) { .dz-cs-numgrid { grid-template-columns: repeat(4, 1fr); } }
.dz-cs-num { border-left: 3px solid var(--teal); padding: 6px 0 6px 18px; }
.dz-cs-num .n {
  display: block; font-family: var(--font-heading); font-size: clamp(30px, 3.4vw, 42px);
  font-weight: 900; color: #fff; line-height: 1;
}
.dz-cs-num .l { display: block; margin-top: 8px; font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.5; }
/* Amber reserved for pricing per the design system. */
.dz-cs-num.amber { border-color: var(--amber); }
.dz-cs-num.amber .n { color: var(--amber); }
.dz-cs-num.todo { border-color: rgba(255,255,255,.25); opacity: .65; }
.dz-cs-num.todo .n { font-size: 20px; color: rgba(255,255,255,.5); letter-spacing: .1em; padding-top: 10px; }

.dz-cs-back { background: var(--grey-light); padding-block: 28px; }
.dz-cs-back a { font-family: var(--font-heading); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.dz-cs-stack { grid-template-columns: 1fr; }
@media (min-width: 700px) { .dz-cs-stack { grid-template-columns: repeat(3, 1fr); } }

/* ---- Case-study interactive widgets (Newberry chapters) ---- */
/* Admissions journey stepper */
.dz-nb-stepper { max-width: 860px; margin-inline: auto; }
.dz-nb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (min-width: 700px) { .dz-nb-steps { grid-template-columns: repeat(6, 1fr); } }
.dz-nb-steps button {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(255,255,255,.04); border: 1.5px solid rgba(255,255,255,.15);
  border-radius: var(--radius-sm); padding: 14px 8px; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.dz-nb-steps button .n {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3); color: rgba(255,255,255,.6);
  font-family: var(--font-heading); font-size: 13px; font-weight: 700;
  transition: all .2s ease;
}
.dz-nb-steps button .t {
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,.6);
}
.dz-nb-steps button:hover { border-color: rgba(58,145,63,.7); }
.dz-nb-steps button.done .n { border-color: #3A913F; background: #3A913F; color: #fff; }
.dz-nb-steps button.on { border-color: #3A913F; background: rgba(58,145,63,.14); }
.dz-nb-steps button.on .n { border-color: #3A913F; background: #3A913F; color: #fff; }
.dz-nb-steps button.on .t, .dz-nb-steps button.done .t { color: #fff; }
.dz-nb-steppanels { margin-top: 18px; background: #FAFAF7; border-radius: var(--radius-md); padding: 26px; min-height: 172px; }
.dz-nb-steppanels h4 { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: #1E2A20; }
.dz-nb-steppanels p { margin-top: 8px; font-size: 14px; color: #55604F; line-height: 1.7; }
.dz-nb-mail {
  margin-top: 14px; background: #fff; border-left: 3px solid #D4A843; border-radius: var(--radius-sm);
  padding: 10px 14px; font-size: 13px; color: #55604F;
}
.dz-nb-mail span { font-weight: 700; color: #A17C1F; margin-right: 6px; }
.dz-nb-mail.done { border-color: #3A913F; }
.dz-nb-mail.done span { color: #3A913F; }

/* Family portal mock */
.dz-nb-portal { max-width: 760px; margin-inline: auto; background: #FAFAF7; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 20px 50px -28px rgba(30,42,32,.45); }
.dz-nb-portal-chrome {
  display: flex; align-items: center; gap: 10px; background: #1E2A20; padding: 12px 18px;
  color: rgba(255,255,255,.75); font-size: 12px;
}
.dz-nb-portal-chrome .dot { width: 9px; height: 9px; border-radius: 50%; background: #4ADE80; }
.dz-nb-portal-chrome strong { color: #fff; }
.dz-nb-portal-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid #E3E7DE; background: #fff; }
.dz-nb-portal-tabs button {
  flex: 1; min-width: 120px; background: none; border: 0; border-bottom: 3px solid transparent;
  padding: 13px 10px; font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: #8A947F; cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.dz-nb-portal-tabs button:hover { color: #3A913F; }
.dz-nb-portal-tabs button.on { color: #3A913F; border-bottom-color: #3A913F; }
.dz-nb-portal-body { padding: 22px; }
.dz-nb-child, .dz-nb-doc {
  display: flex; align-items: center; gap: 14px; background: #fff; border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 10px; box-shadow: 0 1px 6px rgba(30,42,32,.08);
}
.dz-nb-child .av {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: #3A913F; color: #fff; font-family: var(--font-heading); font-weight: 900;
}
.dz-nb-child div, .dz-nb-doc div { flex: 1; }
.dz-nb-child strong, .dz-nb-doc strong { display: block; font-family: var(--font-heading); font-size: 14px; color: #1E2A20; }
.dz-nb-child em, .dz-nb-doc em { display: block; font-style: normal; font-size: 12px; color: #8A947F; margin-top: 2px; }
.dz-nb-child .ok { font-size: 11px; font-weight: 700; color: #3A913F; background: rgba(58,145,63,.12); padding: 4px 10px; border-radius: var(--radius-pill); white-space: nowrap; }
.dz-nb-doc .ic { font-size: 22px; color: #3A913F; }
.dz-nb-doc .dl { font-size: 12px; font-weight: 700; color: #3A913F; }
.dz-nb-portal-note { margin-top: 12px; font-size: 12px; color: #8A947F; font-style: italic; }
.dz-nb-form { display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.dz-nb-form label { font-family: var(--font-heading); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #8A947F; margin-top: 8px; }
.fake-input, .fake-select {
  background: #fff; border: 1px solid #D9DED2; border-radius: var(--radius-sm); padding: 9px 12px;
  font-size: 13px; color: #1E2A20;
}
.fake-btn {
  align-self: flex-start; margin-top: 12px; background: #3A913F; color: #fff;
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; padding: 10px 20px; border-radius: var(--radius-sm);
}
.dz-nb-thread { display: flex; flex-direction: column; gap: 10px; max-width: 460px; }
.dz-nb-thread .msg { border-radius: var(--radius-md); padding: 10px 14px; font-size: 13px; line-height: 1.6; }
.dz-nb-thread .msg strong { display: block; font-size: 11px; margin-bottom: 2px; }
.dz-nb-thread .them { background: #fff; color: #1E2A20; box-shadow: 0 1px 5px rgba(30,42,32,.08); align-self: flex-start; }
.dz-nb-thread .them strong { color: #3A913F; }
.dz-nb-thread .me { background: #3A913F; color: #fff; align-self: flex-end; }

/* Conference booking */
.dz-nb-conf { max-width: 640px; margin-inline: auto; background: #FAFAF7; border-radius: var(--radius-md); padding: 26px; box-shadow: 0 16px 44px -26px rgba(30,42,32,.4); }
.dz-nb-conf-head { font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: #1E2A20; }
.dz-nb-conf-child { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 12px; color: #8A947F; flex-wrap: wrap; }
.dz-nb-conf-sub { margin-top: 12px; font-size: 12px; color: #8A947F; }
.dz-nb-slotgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
@media (min-width: 560px) { .dz-nb-slotgrid { grid-template-columns: repeat(6, 1fr); } }
.dz-nb-slotgrid button {
  background: #fff; border: 1.5px solid #D9DED2; border-radius: var(--radius-sm); padding: 9px 4px;
  font-family: var(--font-heading); font-size: 12px; font-weight: 700; color: #1E2A20;
  cursor: pointer; transition: all .15s ease;
}
.dz-nb-slotgrid button:hover:not([data-taken]) { border-color: #3A913F; }
.dz-nb-slotgrid button.picked { background: #3A913F; border-color: #3A913F; color: #fff; }
.dz-nb-slotgrid button[data-taken] { color: #C2C8BB; text-decoration: line-through; cursor: not-allowed; background: #F1F3EE; }
.dz-nb-conf-note { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.dz-nb-conf-note label { font-family: var(--font-heading); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #8A947F; }
.dz-nb-bookbtn {
  margin-top: 16px; width: 100%; background: #3A913F; border: 0; border-radius: var(--radius-sm);
  color: #fff; font-family: var(--font-heading); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; padding: 13px; cursor: pointer;
  transition: opacity .2s ease, background .2s ease;
}
.dz-nb-bookbtn:disabled { opacity: .45; cursor: not-allowed; }
.dz-nb-bookbtn:hover:not(:disabled) { background: #2F7A33; }
.dz-nb-confirm { margin-top: 16px; background: rgba(58,145,63,.1); border-left: 3px solid #3A913F; border-radius: var(--radius-sm); padding: 14px 16px; font-size: 14px; color: #1E2A20; }
.dz-nb-rebook { margin-top: 10px; background: none; border: 0; font-family: var(--font-heading); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #8A947F; cursor: pointer; }
.dz-nb-rebook:hover { color: #3A913F; }

/* Audience builder v2 additions */
.dz-nb-aud-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.dz-nb-aud-filters .grp { font-family: var(--font-heading); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #8A947F; margin-right: 2px; }
.dz-nb-chip.sm { font-size: 11px; padding: 5px 11px; }
.dz-nb-chip:disabled { opacity: .35; cursor: not-allowed; }
.dz-nb-chip { cursor: pointer; transition: all .15s ease; }
.dz-nb-aud-rows .row.more { color: #8A947F; font-style: italic; font-size: 12px; justify-content: center; }

/* Merge tag demo */
.dz-nb-merge { max-width: 760px; margin: 26px auto 0; display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 800px) { .dz-nb-merge { grid-template-columns: 2fr 3fr; } }
.dz-nb-merge-in label { display: block; font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.6; }
.dz-nb-merge-in input {
  margin-top: 10px; width: 100%; background: #FAFAF7; border: 2px solid transparent;
  border-radius: var(--radius-sm); padding: 11px 14px; font-size: 15px; color: #1E2A20;
}
.dz-nb-merge-in input:focus { outline: none; border-color: #D4A843; }
.dz-nb-merge-in .tags { margin-top: 12px; font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.7; }
.dz-nb-merge-in code { background: rgba(255,255,255,.1); color: #D4A843; padding: 2px 6px; border-radius: var(--radius-xs); font-size: 11px; }
.dz-nb-mailcard { background: #FAFAF7; border-radius: var(--radius-md); padding: 20px 22px; font-size: 13.5px; color: #1E2A20; line-height: 1.7; }
.dz-nb-mailcard .hd { font-size: 11px; color: #8A947F; border-bottom: 1px solid #E3E7DE; padding-bottom: 10px; margin-bottom: 12px; }
.dz-nb-mailcard p { margin-bottom: 8px; }
.dz-nb-mailcard .sig { color: #55604F; }
.dz-nb-mailcard .unsub { margin-top: 12px; font-size: 11px; color: #A6AF9C; border-top: 1px solid #E3E7DE; padding-top: 10px; }
.dz-nb-mailcard strong[data-merge-out] { color: #3A913F; }

/* Back-office wall: tighter cards for 12 items */
.dz-nb-wall .dz-sol { padding: 22px; }
.dz-nb-wall .dz-sol h3 { font-size: 14px; }
.dz-nb-wall .dz-sol p { font-size: 13px; }
@media (min-width: 1024px) { .dz-nb-wall { grid-template-columns: repeat(4, 1fr); } }

/* Map zones clickable */
.dz-nb-zone { cursor: pointer; }

/* ---- Newberry brand fidelity (per ~/Projects/newberry/DESIGN.md) ----
   Dark Green #2D5016 for deep surfaces, Light Grey #F5F5F0 for section
   surfaces, and NO italics anywhere inside the product mocks. */
.dz-nb-bg { background: #2D5016; }
.dz-nb-kcol { background: #F5F5F0; }
.dz-nb-portal-note, .dz-nb-panel-cue { font-style: normal; }
.dz-nb-portal-chrome { background: #2D5016; }
.dz-nb-logo { height: 26px; width: auto; }
.dz-nb-panel { position: relative; }
.dz-nb-panel-logo {
  position: absolute; right: 16px; bottom: 14px; height: 34px; width: auto; opacity: .85;
}
.dz-cs-fiction {
  max-width: 640px; margin: 14px auto 0; text-align: center;
  font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.6;
}

/* ---- Screens lightbox ---- */
.dz-shot.is-clickable { cursor: zoom-in; transition: transform .2s ease; }
.dz-shot.is-clickable:hover { transform: translateY(-2px); }
.dz-shot.is-clickable:hover img { box-shadow: 0 20px 44px -18px rgba(30,34,53,.55); }
.dz-lightbox {
  position: fixed; inset: 0; z-index: 300; display: flex;
  align-items: center; justify-content: center; padding: 48px;
  background: rgba(20,23,38,.94);
}
.dz-lightbox[hidden] { display: none; }
.dz-lightbox figure { margin: 0; max-width: min(1200px, 92vw); text-align: center; }
.dz-lightbox img {
  max-width: 100%; max-height: 78vh; width: auto; height: auto;
  border-radius: var(--radius-sm); box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.dz-lightbox figcaption { margin-top: 14px; color: rgba(255,255,255,.7); font-size: 14px; }
.dz-lightbox button {
  position: absolute; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  color: #fff; border-radius: 50%; width: 46px; height: 46px; font-size: 20px;
  cursor: pointer; transition: background .2s ease;
}
.dz-lightbox button:hover { background: rgba(0,188,212,.35); }
.dz-lightbox .lb-close { top: 20px; right: 20px; }
.dz-lightbox .lb-prev { left: 20px; top: 50%; transform: translateY(-50%); font-size: 26px; }
.dz-lightbox .lb-next { right: 20px; top: 50%; transform: translateY(-50%); font-size: 26px; }
@media (max-width: 640px) { .dz-lightbox { padding: 16px; } .dz-lightbox .lb-prev { left: 8px; } .dz-lightbox .lb-next { right: 8px; } }

/* ---- Noupoort Mountain Estate mocks (brand: gold #a8753b, slate #2D3E50,
   serif display type per the live site) ---- */
.dz-np-dark { background: #2D3E50; }
.dz-np-dark .dz-h2 { color: #fff; }
.dz-np-dark .dz-lead { color: rgba(255,255,255,.65); }
.dz-np-dark .dz-eyebrow { color: #C9A87A; }
.dz-cs-fiction-inline { margin-top: 16px; font-size: 12px; color: var(--grey-mid); }

/* Stepper re-skin (gold instead of Newberry green) */
.dz-np-stepper .dz-nb-steps button.on,
.dz-np-stepper .dz-nb-steps button.done { border-color: #a8753b; }
.dz-np-stepper .dz-nb-steps button.on { background: rgba(168,117,59,.16); }
.dz-np-stepper .dz-nb-steps button.on .n,
.dz-np-stepper .dz-nb-steps button.done .n { background: #a8753b; border-color: #a8753b; }
.dz-np-stepper .dz-nb-steps button:hover { border-color: rgba(168,117,59,.7); }
.dz-np-stepper .dz-nb-steppanels h4 { font-family: Georgia, "Times New Roman", serif; font-size: 19px; color: #2D3E50; }
.dz-np-mock-bar {
  margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  background: #fff; border-radius: var(--radius-md); padding: 12px 16px; box-shadow: 0 4px 14px rgba(45,62,80,.12);
}
.dz-np-mock-bar .lbl { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8896A5; }
.dz-np-mock-bar .code { flex: 1; min-width: 150px; border: 1px solid #DCE2E8; border-radius: var(--radius-sm); padding: 8px 12px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: #2D3E50; }
.dz-np-mock-bar .btn { background: #a8753b; color: #fff; border-radius: var(--radius-sm); padding: 9px 16px; font-size: 12px; font-weight: 700; }
.dz-np-cabinrow, .dz-np-guestrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dz-np-cabinrow .cab, .dz-np-guestrow span {
  background: #fff; border: 1.5px solid #DCE2E8; border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 12px; color: #2D3E50;
}
.dz-np-cabinrow .cab.on { border-color: #a8753b; background: rgba(168,117,59,.08); font-weight: 700; }

/* Estate map re-skin */
.dz-np-pin { stroke: #fff; stroke-width: 2.5; }
.dz-np-pin.paid { fill: #3E9C5C; }
.dz-np-pin.pending { fill: #D97E2B; }
.dz-np-pin.free { fill: #7FA6C9; }
.dz-np-pin.oos { fill: #9AA3AB; }
.dz-np-pin.venue { fill: #a8753b; }
.dz-np-pin.is-hover, .dz-np-pin:hover { stroke: #2D3E50; }
.dz-np-legend {
  position: absolute; left: 12px; bottom: 12px; display: flex; gap: 12px; flex-wrap: wrap;
  background: rgba(255,255,255,.92); border-radius: var(--radius-sm); padding: 8px 12px;
}
.dz-np-legend .k { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: #2D3E50; }
.dz-np-legend .k::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.dz-np-legend .k.paid::before { background: #3E9C5C; }
.dz-np-legend .k.pending::before { background: #D97E2B; }
.dz-np-legend .k.free::before { background: #7FA6C9; }
.dz-np-legend .k.oos::before { background: #9AA3AB; }
.dz-np-panel { border-left-color: #a8753b; background: #FFFFFF; }
.dz-np-panel .dz-nb-cat { background: rgba(168,117,59,.12); color: #a8753b; }
.dz-np-panel h3 { font-family: Georgia, "Times New Roman", serif; }

/* Payment claims demo */
.dz-np-claims { display: grid; grid-template-columns: 1fr; gap: 20px; max-width: 900px; margin-inline: auto; }
@media (min-width: 900px) { .dz-np-claims { grid-template-columns: 1fr 1fr; } }
.dz-np-claims h4 {
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--grey-mid); margin-bottom: 12px;
}
.dz-np-claims-guest, .dz-np-claims-admin {
  background: #F5F8FA; border-radius: var(--radius-md); padding: 22px;
}
.dz-np-bankrow {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px;
  background: #fff; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 12px; color: #2D3E50;
}
.dz-np-bankrow em { font-style: normal; color: #a8753b; font-weight: 700; }
.dz-np-claimform { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.dz-np-btn {
  align-self: flex-start; background: #a8753b; color: #fff; border: 0; border-radius: var(--radius-sm);
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; padding: 11px 22px; cursor: pointer;
  transition: background .2s ease, opacity .2s ease;
}
.dz-np-btn:hover:not(:disabled) { background: #956532; }
.dz-np-btn:disabled { opacity: .55; cursor: default; }
.dz-np-guest-status { margin-top: 14px; font-size: 13px; color: #2D3E50; }
.dz-np-badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  padding: 3px 10px; border-radius: var(--radius-pill); text-transform: uppercase;
}
.dz-np-badge.none { background: #E4E9EE; color: #6B7885; }
.dz-np-badge.pending { background: rgba(217,126,43,.15); color: #B15F14; }
.dz-np-badge.ok { background: rgba(62,156,92,.15); color: #2C7A45; }
.dz-np-banner {
  background: rgba(217,126,43,.12); border-left: 3px solid #D97E2B; border-radius: var(--radius-sm);
  padding: 9px 12px; font-size: 12px; color: #7A4A12; margin-bottom: 12px;
}
.dz-np-claimrow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff; border-radius: var(--radius-sm); padding: 14px; box-shadow: 0 1px 6px rgba(45,62,80,.08);
  transition: box-shadow .3s ease;
}
.dz-np-claimrow.confirmed { box-shadow: 0 0 0 2px rgba(62,156,92,.4); }
.dz-np-claimrow .who, .dz-np-claimrow .amt { display: flex; flex-direction: column; }
.dz-np-claimrow .who { flex: 1; min-width: 110px; }
.dz-np-claimrow strong { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: #2D3E50; }
.dz-np-claimrow em { font-style: normal; font-size: 11px; color: #8896A5; }
.dz-np-claimrow .amt { font-weight: 700; font-size: 14px; color: #2D3E50; }
.dz-np-claimrow .acts { display: flex; gap: 6px; }
.dz-np-claimrow .acts button {
  border: 0; border-radius: var(--radius-sm); padding: 7px 14px; font-size: 11px; font-weight: 700;
  cursor: pointer; text-transform: uppercase; letter-spacing: .04em;
}
.dz-np-claimrow .acts .ok { background: #3E9C5C; color: #fff; }
.dz-np-claimrow .acts .no { background: #E4E9EE; color: #6B7885; }
.dz-np-claimrow .acts button:disabled { opacity: .5; cursor: default; }
.dz-np-admin-note { margin-top: 12px; font-size: 12px; color: #8896A5; }

/* Invoice mock */
.dz-np-invoice {
  max-width: 620px; margin-inline: auto; background: #fff; border-radius: var(--radius-md);
  overflow: hidden; box-shadow: 0 24px 60px -30px rgba(0,0,0,.55);
}
.dz-np-inv-head {
  display: flex; align-items: center; justify-content: space-between;
  background: #2D3E50; padding: 18px 24px;
}
.dz-np-inv-head img { height: 34px; width: auto; }
.dz-np-inv-head span {
  font-family: var(--font-heading); font-size: 18px; font-weight: 700;
  letter-spacing: .2em; color: #fff;
}
.dz-np-inv-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 18px 24px 6px; }
.dz-np-inv-meta em { display: block; font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: #8896A5; }
.dz-np-inv-meta strong { font-size: 13px; color: #2D3E50; }
.dz-np-inv-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.dz-np-inv-table th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: #8896A5; padding: 8px 24px; border-bottom: 1px solid #E4E9EE;
}
.dz-np-inv-table td { padding: 9px 24px; font-size: 12.5px; color: #2D3E50; border-bottom: 1px solid #F0F3F6; }
.dz-np-inv-table td:nth-child(n+2), .dz-np-inv-table th:nth-child(n+2) { text-align: right; white-space: nowrap; }
.dz-np-inv-table .disc td { color: #a8753b; }
.dz-np-inv-totals { padding: 12px 24px; }
.dz-np-inv-totals div { display: flex; justify-content: space-between; font-size: 12.5px; color: #2D3E50; padding: 3px 0; }
.dz-np-inv-totals em { font-style: normal; color: #8896A5; }
.dz-np-inv-totals .due { border-top: 2px solid #2D3E50; margin-top: 8px; padding-top: 8px; font-size: 15px; }
.dz-np-inv-totals .due strong { color: #a8753b; }
.dz-np-inv-bank { background: #F5F8FA; padding: 12px 24px 16px; font-size: 11px; color: #8896A5; }

/* Cleaning PWA phone */
.dz-np-phone {
  max-width: 340px; margin-inline: auto; background: #fff; border-radius: var(--radius-xl);
  border: 8px solid #2D3E50; padding: 18px 16px; box-shadow: 0 24px 50px -24px rgba(45,62,80,.5);
}
.dz-np-phone-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dz-np-phone-top img { height: 22px; width: auto; }
.dz-np-phone-top span { font-family: var(--font-heading); font-size: 12px; font-weight: 700; color: #2D3E50; }
.dz-np-check {
  display: flex; align-items: center; gap: 12px; background: #F5F8FA;
  border-radius: var(--radius-md); padding: 13px 14px; margin-bottom: 8px; cursor: pointer;
  font-size: 14px; color: #2D3E50;
}
.dz-np-check input { width: 22px; height: 22px; accent-color: #a8753b; flex: none; }
.dz-np-check:has(input:checked) span { text-decoration: line-through; color: #8896A5; }
.dz-np-phone-actions { display: flex; gap: 8px; margin-top: 14px; }
.dz-np-phone-actions span {
  flex: 1; text-align: center; border-radius: var(--radius-md); padding: 12px 8px;
  font-size: 12px; font-weight: 700;
}
.dz-np-phone-actions .cam { background: #F5F8FA; color: #2D3E50; }
.dz-np-phone-actions .sign { background: #3E9C5C; color: #fff; }

/* ---- UX process chapter (shared across case studies) ---- */
.dz-ux { background: var(--navy); padding-block: 72px; }
.dz-ux .dz-h2 { color: #fff; }
.dz-ux .dz-lead { color: rgba(255,255,255,.65); }
.dz-ux .dz-eyebrow { color: var(--teal); }
.dz-ux-methods { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 8px; }
.dz-ux-methods span {
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius-pill); padding: 7px 14px;
}
.dz-ux-methods span::before { content: "◆ "; color: var(--teal); font-size: 8px; }

.dz-ux-personas { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 40px; }
@media (min-width: 800px) { .dz-ux-personas { grid-template-columns: repeat(3, 1fr); } }
.dz-ux-persona {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
  border-top: 3px solid var(--teal); padding: 24px;
}
.dz-ux-persona .avatar {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: var(--teal); color: var(--navy-dark);
  font-family: var(--font-heading); font-size: 18px; font-weight: 900;
}
.dz-ux-persona h3 { margin-top: 14px; font-family: var(--font-heading); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; }
.dz-ux-persona .role { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.5); }
.dz-ux-persona blockquote {
  margin: 14px 0 0; font-size: 15px; color: rgba(255,255,255,.85); line-height: 1.6;
  border-left: 2px solid var(--teal); padding-left: 12px;
}
.dz-ux-persona .needs { margin-top: 12px; font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.7; }
.dz-ux-persona .needs strong { color: var(--teal); font-weight: 700; }

/* Journey strip */
.dz-ux-journey { margin-top: 44px; }
.dz-ux-journey h3 {
  text-align: center; font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.5); margin-bottom: 20px;
}
.dz-ux-journey-track { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .dz-ux-journey-track { grid-template-columns: repeat(6, 1fr); } }
.dz-ux-stage { text-align: center; position: relative; padding: 14px 8px; background: rgba(255,255,255,.03); border-radius: var(--radius-sm); }
.dz-ux-stage .emo { font-size: 20px; display: block; }
.dz-ux-stage .st { display: block; margin-top: 8px; font-family: var(--font-heading); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #fff; }
.dz-ux-stage .note { display: block; margin-top: 6px; font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.5; }

/* Wireframe vs final flip */
.dz-ux-flip { max-width: 720px; margin: 44px auto 0; }
.dz-ux-flip-tabs { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }
.dz-ux-flip-tabs button {
  background: transparent; border: 2px solid rgba(255,255,255,.3); border-radius: var(--radius-pill);
  color: rgba(255,255,255,.7); font-family: var(--font-heading); font-size: 12px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 9px 22px;
  cursor: pointer; transition: all .2s ease;
}
.dz-ux-flip-tabs button.on { background: var(--teal); border-color: var(--teal); color: var(--navy-dark); }
.dz-ux-flip-note { text-align: center; margin-top: 14px; font-size: 12px; color: rgba(255,255,255,.5); }

/* Wireframe fidelity styles */
.dz-wf { background: #fff; border-radius: var(--radius-md); padding: 22px; }
.dz-wf * { box-sizing: border-box; }
.dz-wf .wf-row { display: flex; gap: 10px; margin-bottom: 10px; }
.dz-wf .wf-box {
  flex: 1; border: 2px dashed #B9C0C9; border-radius: var(--radius-sm); background: #F2F4F7;
  min-height: 52px; position: relative;
}
.dz-wf .wf-box::after {
  content: attr(data-l); position: absolute; inset: 0; display: grid; place-items: center;
  font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: #8A93A0;
  text-transform: uppercase; letter-spacing: .06em; padding: 4px; text-align: center;
}
.dz-wf .wf-box.tall { min-height: 84px; }
.dz-wf .wf-x { position: absolute; inset: 0; overflow: hidden; }
.dz-wf .wf-x::before, .dz-wf .wf-x::after {
  content: ""; position: absolute; left: -10%; right: -10%; top: 50%; height: 1.5px; background: #D4D9E0;
}
.dz-wf .wf-x::before { transform: rotate(12deg); }
.dz-wf .wf-x::after { transform: rotate(-12deg); }

/* Findings: tested, then changed */
.dz-ux-findings { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 44px; }
@media (min-width: 900px) { .dz-ux-findings { grid-template-columns: repeat(3, 1fr); } }
.dz-ux-finding { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); padding: 20px; }
.dz-ux-finding .saw {
  font-size: 13px; color: rgba(255,255,255,.6); line-height: 1.6;
}
.dz-ux-finding .saw::before {
  content: "OBSERVED"; display: block; font-family: var(--font-heading); font-size: 10px;
  font-weight: 700; letter-spacing: .12em; color: var(--orange); margin-bottom: 6px;
}
.dz-ux-finding .did { margin-top: 14px; font-size: 13px; color: #fff; line-height: 1.6; }
.dz-ux-finding .did::before {
  content: "CHANGED"; display: block; font-family: var(--font-heading); font-size: 10px;
  font-weight: 700; letter-spacing: .12em; color: var(--teal); margin-bottom: 6px;
}

/* ---- WAID mocks (brand: sage #f8f9f5, white cards, 20px radius,
   sentence case, warm and rounded) ---- */
.dz-wd-sage { background: #f8f9f5; }
.dz-wd-dark { background: #1a1a1a; }
.dz-wd-dark .dz-h2 { color: #fff; }
.dz-wd-dark .dz-lead { color: rgba(255,255,255,.6); }
.dz-wd-dark .dz-eyebrow { color: #4ade80; }
/* WAID is sentence-case: soften the case chrome inside its mocks */
.dz-wd-myday, .dz-wd-ws-stage, .dz-wd-phone, .dz-wd-board { text-transform: none; }

/* My Day mock */
.dz-wd-myday { background: #f8f9f5; border-radius: var(--radius-xl); padding: 24px; }
.dz-wd-myday .greet { font-size: 20px; font-weight: 700; color: #1a1a1a; }
.dz-wd-myday .greet span { display: block; font-size: 12px; font-weight: 400; color: #9ca3af; margin-top: 2px; }
.dz-wd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 16px; }
.dz-wd-stats .s { background: #fff; border-radius: var(--radius-lg); padding: 14px; box-shadow: 0 2px 10px rgba(26,26,26,.05); text-align: center; }
.dz-wd-stats .n { display: block; font-size: 24px; font-weight: 800; color: #1a1a1a; }
.dz-wd-stats .l { display: block; margin-top: 2px; font-size: 11px; color: #6b7280; }
.dz-wd-stats.sm { grid-template-columns: repeat(3, 1fr); }
.dz-wd-load { margin-top: 14px; background: #fff; border-radius: var(--radius-lg); padding: 16px; box-shadow: 0 2px 10px rgba(26,26,26,.05); }
.dz-wd-load .row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.dz-wd-load .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dz-wd-load em { font-style: normal; font-size: 13px; color: #1a1a1a; min-width: 84px; }
.dz-wd-load i { flex: 1; height: 8px; background: #f0f1ec; border-radius: var(--radius-pill); overflow: hidden; display: block; }
.dz-wd-load b { display: block; height: 100%; border-radius: var(--radius-pill); }

/* MCP session player */
.dz-wd-mcp { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 1000px) { .dz-wd-mcp { grid-template-columns: 5fr 6fr 3fr; align-items: start; } }
.dz-wd-termwrap { background: #0D1117; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid rgba(255,255,255,.12); }
.dz-wd-termbar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.1); }
.dz-wd-termbar .d { width: 10px; height: 10px; border-radius: 50%; }
.dz-wd-termbar .d.r { background: #FF5F56; } .dz-wd-termbar .d.y { background: #FFBD2E; } .dz-wd-termbar .d.g { background: #27C93F; }
.dz-wd-termbar em { font-style: normal; margin-left: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: rgba(255,255,255,.45); }
.dz-wd-term { min-height: 200px; max-height: 220px; overflow-y: auto; padding: 14px 16px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.8; }
.dz-wd-term .cmd { color: #7EE787; }
.dz-wd-term .out { color: #C9D1D9; }
.dz-wd-term .ok { color: #4ade80; font-weight: 700; }
.dz-wd-term .dz-wd-hint { color: rgba(255,255,255,.35); }
.dz-wd-run {
  width: 100%; background: #4ade80; color: #0D1117; border: 0; padding: 12px;
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; cursor: pointer;
  transition: background .2s ease;
}
.dz-wd-run:hover { background: #86efac; }
.dz-wd-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dz-wd-col { background: #f2f3ef; border-radius: var(--radius-lg); padding: 10px; min-height: 180px; }
.dz-wd-col h4 { font-family: var(--font-body); font-size: 11px; font-weight: 700; color: #6b7280; margin-bottom: 8px; padding-left: 4px; text-transform: none; }
.dz-wd-cardx {
  position: relative; background: #fff; border-radius: var(--radius-lg); padding: 12px;
  box-shadow: 0 2px 8px rgba(26,26,26,.08); margin-bottom: 8px;
  transition: transform .25s ease, opacity .25s ease;
}
.dz-wd-cardx.moving { transform: scale(.92) rotate(-2deg); opacity: .4; }
.dz-wd-cardx::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 3px; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: #f97316; }
.dz-wd-cardx .ref { font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: #9ca3af; }
.dz-wd-cardx .ttl { display: block; margin-top: 3px; font-size: 12px; font-weight: 600; color: #1a1a1a; line-height: 1.35; }
.dz-wd-cardx .meta { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 10px; color: #6b7280; }
.dz-wd-cardx .pri { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; display: inline-block; }
.dz-wd-cardx .pri.low { background: #f59e0b; }
.dz-wd-cardx.dim { opacity: .55; }
.dz-wd-side { display: flex; flex-direction: column; gap: 10px; }
.dz-wd-commentx, .dz-wd-sessionx { background: #fff; border-radius: var(--radius-lg); padding: 14px; box-shadow: 0 4px 14px rgba(26,26,26,.12); animation: dz-wd-pop .3s ease; }
@keyframes dz-wd-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dz-wd-commentx .who, .dz-wd-sessionx .who { display: block; font-size: 11px; font-weight: 700; color: #7c3aed; margin-bottom: 6px; }
.dz-wd-sessionx .who { color: #0891b2; }
.dz-wd-commentx p, .dz-wd-sessionx p { font-size: 12px; color: #374151; line-height: 1.6; }

/* Workspace wayfinding demo */
.dz-wd-ws { max-width: 680px; margin-inline: auto; }
.dz-wd-ws-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 18px; }
.dz-wd-ws-chips button {
  background: #fff; border: 1.5px solid #e5e6e0; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 600; color: #1a1a1a; padding: 8px 16px; cursor: pointer;
  transition: all .15s ease;
}
.dz-wd-ws-chips button.on { border-color: #1a1a1a; }
.dz-wd-ws-stage {
  background: #fff; border-radius: var(--radius-xl); padding: 20px;
  box-shadow: 0 6px 24px rgba(26,26,26,.08);
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 700px) { .dz-wd-ws-stage { grid-template-columns: 1fr 1fr; } }
.dz-wd-ws-stage .side {
  display: flex; align-items: center; gap: 10px; background: #f2f3ef;
  border-left: 3px solid var(--wsd); border-radius: var(--radius-md); padding: 12px 14px;
}
.dz-wd-ws-stage .wsdot { width: 10px; height: 10px; border-radius: 50%; background: var(--wsd); }
.dz-wd-ws-stage .side em { font-style: normal; font-size: 13px; font-weight: 700; color: #1a1a1a; }
.dz-wd-ws-stage .side i { font-style: normal; font-size: 11px; color: #9ca3af; }
.dz-wd-ws-stage .cardx {
  position: relative; overflow: hidden; background: #fff; border: 1px solid #e5e6e0;
  border-radius: var(--radius-lg); padding: 14px;
}
.dz-wd-ws-stage .cardx .tint { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--wsd); }
.dz-wd-ws-stage .cardx .ref { font-size: 10px; color: #9ca3af; }
.dz-wd-ws-stage .cardx .ttl { display: block; font-size: 13px; font-weight: 600; color: #1a1a1a; margin-top: 3px; }
.dz-wd-ws-stage .bar { display: flex; align-items: center; gap: 10px; }
.dz-wd-ws-stage .bar em { font-style: normal; font-size: 12px; color: #6b7280; }
.dz-wd-ws-stage .bar i { flex: 1; height: 8px; border-radius: var(--radius-pill); background: #f0f1ec; overflow: hidden; display: block; }
.dz-wd-ws-stage .bar b { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--wsd); }
.dz-wd-ws-stage .badge {
  justify-self: start; align-self: center; font-size: 11px; font-weight: 700;
  color: var(--wsd); background: color-mix(in srgb, var(--wsd) 12%, white);
  border-radius: var(--radius-pill); padding: 4px 12px;
}
.dz-wd-ws-stage .side, .dz-wd-ws-stage .cardx .tint, .dz-wd-ws-stage .wsdot,
.dz-wd-ws-stage .bar b, .dz-wd-ws-stage .badge { transition: all .3s ease; }

/* WAID phone */
.dz-wd-phone { border-color: #1a1a1a; background: #f8f9f5; }
.dz-wd-phone-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dz-wd-phone-head img { height: 20px; width: auto; }
.dz-wd-phone-head span { font-size: 13px; font-weight: 700; color: #1a1a1a; }
.dz-wd-mini-task {
  display: flex; align-items: center; gap: 10px; background: #fff; border-radius: var(--radius-lg);
  padding: 12px 14px; margin-top: 8px; font-size: 13px; color: #1a1a1a;
  box-shadow: 0 1px 6px rgba(26,26,26,.06);
}
.dz-wd-mini-task .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dz-wd-mini-task em { font-style: normal; margin-left: auto; font-size: 10px; color: #9ca3af; }
.dz-wd-tabbar {
  display: flex; align-items: center; justify-content: space-around;
  background: #fff; border-radius: var(--radius-lg); margin-top: 14px; padding: 10px 6px;
  box-shadow: 0 2px 12px rgba(26,26,26,.1); font-size: 11px; color: #9ca3af;
}
.dz-wd-tabbar .on { color: #1a1a1a; font-weight: 700; }
.dz-wd-tabbar .fab {
  width: 42px; height: 42px; border-radius: 50%; background: #1a1a1a; color: #fff;
  display: grid; place-items: center; font-size: 20px; margin-top: -26px;
  box-shadow: 0 6px 16px rgba(26,26,26,.3);
}

/* WAID quote band */
.dz-wd-quoteband { background: #1a1a1a; padding-block: 56px; text-align: center; }
.dz-wd-quoteband blockquote {
  margin: 0 auto; max-width: 760px; font-size: clamp(19px, 2.6vw, 25px);
  font-weight: 600; color: #fff; line-height: 1.55; text-transform: none;
}
.dz-wd-quoteband .who { margin-top: 14px; font-size: 13px; color: #4ade80; }

/* ---- DevDock mocks (DezignZA's own tokens: navy, teal, amber) ---- */
.dz-dd-dark { background: var(--navy-dark); }
.dz-dd-dark .dz-h2 { color: #fff; }
.dz-dd-dark .dz-lead { color: rgba(255,255,255,.6); }
.dz-badge-build { font-style: normal; color: var(--amber); animation: dz-live-pulse 2s ease-in-out infinite; }

/* Cockpit app frame */
.dz-dd-app { max-width: 860px; margin-inline: auto; background: #171A2B; border-radius: var(--radius-md); overflow: hidden; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 30px 70px -35px rgba(0,0,0,.7); }
.dz-dd-titlebar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #12141F; border-bottom: 1px solid rgba(255,255,255,.08); }
.dz-dd-titlebar .d { width: 11px; height: 11px; border-radius: 50%; }
.dz-dd-titlebar .d.r { background: #FF5F56; } .dz-dd-titlebar .d.y { background: #FFBD2E; } .dz-dd-titlebar .d.g { background: #27C93F; }
.dz-dd-titlebar img { height: 16px; width: auto; margin-left: 12px; }
.dz-dd-body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 800px) { .dz-dd-body { grid-template-columns: 220px 1fr; } }
.dz-dd-side { background: #12141F; padding: 12px; border-right: 1px solid rgba(255,255,255,.06); }
.dz-dd-proj { display: grid; grid-template-columns: 14px 1fr; column-gap: 10px; align-items: center; padding: 9px 10px; border-left: 2px solid transparent; border-radius: var(--radius-xs); color: rgba(255,255,255,.75); font-size: 12.5px; }
.dz-dd-proj em { grid-column: 2; font-style: normal; font-size: 10px; color: rgba(255,255,255,.35); font-family: ui-monospace, Menlo, monospace; }
.dz-dd-proj .fav { width: 12px; height: 12px; border-radius: var(--radius-xs); }
.dz-dd-proj.on { border-left-color: var(--teal); background: rgba(0,188,212,.08); color: #fff; }
.dz-dd-main { padding: 16px; }
.dz-dd-projhead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dz-dd-projhead strong { font-family: var(--font-heading); font-size: 15px; font-weight: 700; letter-spacing: .06em; color: #fff; margin-right: 4px; }
.dz-dd-projhead .badge { font-family: var(--font-heading); font-size: 9px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-xs); padding: 3px 8px; }
.dz-dd-projhead .badge.git { color: #4ade80; border-color: rgba(74,222,128,.4); }
.dz-dd-projhead .play { margin-left: auto; background: var(--teal); color: #fff; font-family: var(--font-heading); font-size: 10px; font-weight: 700; letter-spacing: .08em; border-radius: var(--radius-xs); padding: 5px 12px; }
.dz-dd-tabs { display: flex; gap: 2px; margin-top: 14px; border-bottom: 1px solid rgba(255,255,255,.1); overflow-x: auto; }
.dz-dd-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: rgba(255,255,255,.55); font-family: var(--font-heading); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 9px 14px; cursor: pointer; white-space: nowrap; }
.dz-dd-tabs button:hover { color: #fff; }
.dz-dd-tabs button.on { color: var(--teal); border-bottom-color: var(--teal); }
.dz-dd-pane { padding-top: 14px; min-height: 240px; }
.dz-dd-termmock { background: #0D1117; border-radius: var(--radius-sm); padding: 14px 16px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.9; }
.dz-dd-termmock .ln { display: block; color: #C9D1D9; }
.dz-dd-termmock .ln i { font-style: normal; color: var(--teal); }
.dz-dd-termmock .ln.ok { color: #4ade80; }
.dz-dd-termmock .ln.dim { color: rgba(201,209,217,.5); }
.dz-dd-termmock .caret { color: var(--teal); animation: dz-caret-blink 1s steps(1) infinite; }

/* Env editor */
.dz-dd-env-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.dz-dd-env-bar .file { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: rgba(255,255,255,.5); padding: 5px 10px; border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-xs); }
.dz-dd-env-bar .file.on { color: var(--teal); border-color: var(--teal); }
.dz-dd-env-bar .dirty { font-size: 11px; color: var(--amber); }
.dz-dd-env-bar .save { margin-left: auto; background: var(--teal); border: 0; color: #fff; font-family: var(--font-heading); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 7px 14px; border-radius: var(--radius-xs); cursor: pointer; }
.dz-dd-env-bar .save.pulse { animation: dz-live-pulse 1.2s ease-in-out infinite; }
.dz-dd-env-row { display: grid; grid-template-columns: 64px 1fr; gap: 8px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
@media (min-width: 700px) { .dz-dd-env-row { grid-template-columns: 64px 240px 1fr 40px; } }
.dz-dd-env-row .badge { font-family: var(--font-heading); font-size: 8px; font-weight: 700; letter-spacing: .12em; text-align: center; padding: 3px 0; border-radius: var(--radius-xs); }
.dz-dd-env-row .badge.pub { color: var(--teal); border: 1px solid var(--teal); }
.dz-dd-env-row .badge.sec { color: var(--amber); border: 1px solid var(--amber); }
.dz-dd-env-row .k { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--teal); background: none; }
.dz-dd-env-row .v { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #fff; background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.2); border-radius: var(--radius-xs); padding: 6px 10px; outline: none; overflow-wrap: anywhere; }
.dz-dd-env-row .v:focus { border-color: var(--teal); border-style: solid; }
.dz-dd-env-row .acts button { background: none; border: 0; cursor: pointer; font-size: 14px; opacity: .7; }
.dz-dd-env-row .acts button:hover { opacity: 1; }
.dz-dd-env-note { margin-top: 12px; font-size: 11px; color: rgba(255,255,255,.4); line-height: 1.6; }

/* Browser pane mock */
.dz-dd-browser .bar { display: flex; align-items: center; gap: 8px; background: #12141F; border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 8px 12px; }
.dz-dd-browser .bp { font-family: var(--font-heading); font-size: 9px; font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-xs); padding: 4px 8px; }
.dz-dd-browser .bp.on { color: var(--teal); border-color: var(--teal); }
.dz-dd-browser .bar code { margin-left: auto; font-size: 11px; color: rgba(255,255,255,.55); }
.dz-dd-browser .viewport { background: #fff; border-radius: 0 0 var(--radius-sm) var(--radius-sm); min-height: 180px; display: grid; place-items: center; padding: 20px; }
.dz-dd-browser .viewport span { font-size: 13px; color: var(--grey-mid); text-align: center; max-width: 300px; }

/* Arcade */
.dz-dd-arcade { max-width: 500px; margin-inline: auto; background: var(--navy-dark); border: 3px solid var(--teal); border-radius: var(--radius-md); padding: 14px; box-shadow: 0 0 40px rgba(0,188,212,.25), 0 24px 60px -30px rgba(0,0,0,.6); }
.dz-dd-arcade-top { display: flex; justify-content: space-between; font-family: var(--font-heading); font-size: 12px; font-weight: 900; letter-spacing: .12em; color: var(--teal); margin-bottom: 10px; }
.dz-dd-arcade-top b { color: var(--amber); }
.dz-dd-arcade canvas { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); outline: none; }
.dz-dd-arcade canvas:focus { box-shadow: 0 0 0 2px var(--teal); }
.dz-dd-arcade-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 12px; }
.dz-dd-start { background: var(--amber); border: 0; color: var(--navy-dark); font-family: var(--font-heading); font-size: 12px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; padding: 11px 22px; border-radius: var(--radius-xs); cursor: pointer; }
.dz-dd-start:hover { background: #ffb946; }
.dz-dd-dpad { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-left: auto; }
.dz-dd-dpad div { display: flex; gap: 30px; }
.dz-dd-dpad button { width: 34px; height: 30px; background: rgba(0,188,212,.12); border: 1px solid var(--teal); color: var(--teal); border-radius: var(--radius-xs); cursor: pointer; font-size: 12px; }
.dz-dd-dpad button:active { background: var(--teal); color: #fff; }

/* Remote pairing */
.dz-dd-pair { max-width: 520px; margin-inline: auto; background: #171A2B; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md); padding: 24px; }
.dz-dd-pair-server { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dz-dd-pair-server .lbl { font-family: var(--font-heading); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #fff; }
.dz-dd-pair-server .tog { background: rgba(74,222,128,.15); color: #4ade80; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: var(--radius-pill); }
.dz-dd-pair-server code { flex-basis: 100%; font-size: 12px; color: rgba(255,255,255,.5); }
.dz-dd-pairbtn, .dz-dd-enterbtn { margin-top: 16px; width: 100%; background: var(--teal); border: 0; color: #fff; font-family: var(--font-heading); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 12px; border-radius: var(--radius-xs); cursor: pointer; }
.dz-dd-enterbtn { background: transparent; border: 2px solid var(--teal); color: var(--teal); }
.dz-dd-pin { margin-top: 16px; text-align: center; background: rgba(0,188,212,.06); border: 1px dashed var(--teal); border-radius: var(--radius-sm); padding: 18px; }
.dz-dd-pin .lbl { display: block; font-size: 11px; color: rgba(255,255,255,.55); }
.dz-dd-pin strong { display: block; margin-top: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 34px; letter-spacing: .2em; color: var(--teal); }
.dz-dd-pin em { display: block; margin-top: 6px; font-style: normal; font-size: 11px; color: var(--amber); }
.dz-dd-devices { margin-top: 14px; }
.dz-dd-device { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.04); border-radius: var(--radius-sm); padding: 10px 14px; margin-top: 8px; animation: dz-wd-pop .3s ease; }
.dz-dd-device .nm { font-size: 13px; color: #fff; }
.dz-dd-device em { font-style: normal; font-size: 11px; color: rgba(255,255,255,.4); margin-left: auto; }
.dz-dd-device .rv { background: none; border: 1px solid rgba(232,93,38,.5); color: var(--orange); font-size: 10px; font-weight: 700; text-transform: uppercase; border-radius: var(--radius-xs); padding: 4px 10px; cursor: pointer; }
.dz-dd-pair-note { margin-top: 16px; font-size: 11px; color: rgba(255,255,255,.4); line-height: 1.7; }

/* ============================================================
   CASE STUDY LAYOUT SYSTEMS, one per client
   ============================================================ */

/* ---- NEWBERRY "Prospectus": editorial rows, split-colour displays ---- */
.dz-nbx-display {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; font-size: clamp(26px, 4.4vw, 44px); line-height: 1.12;
  max-width: 22ch;
}
.dz-nbx-display .dark { color: #2D5016; }
.dz-nbx-display .bright { color: #3A913F; }
.dz-nbx-display .darkw { color: rgba(255,255,255,.92); }
.dz-nbx-display .gold { color: #D4A843; }
.dz-nbx-kicker {
  font-family: var(--font-heading); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em; color: #3A913F; margin-bottom: 14px;
}
.dz-nbx-kicker.light { color: #D4A843; }
.dz-nbx-intro { background: #FAFAF7; padding-block: 72px 56px; }
.dz-nbx-intro-cols { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 28px; max-width: 60rem; }
@media (min-width: 800px) { .dz-nbx-intro-cols { grid-template-columns: 1fr 1fr; } }
.dz-nbx-intro-cols p { font-size: 15.5px; color: #55604F; line-height: 1.85; }
.dz-nbx-design { background: #F5F5F0; padding-block: 64px; }
.dz-nbx-lead { margin-top: 16px; max-width: 44rem; font-size: 16px; color: #55604F; line-height: 1.8; }
.dz-nbx-swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 32px; }
@media (min-width: 900px) { .dz-nbx-swatches { grid-template-columns: repeat(3, 1fr); } }
.dz-nbx-swatches .sw { background: #fff; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 2px 10px rgba(45,80,22,.07); }
.dz-nbx-swatches .sw::before { content: ""; display: block; height: 56px; background: var(--c); }
.dz-nbx-swatches .sw.light::before { border-bottom: 1px solid #E3E7DE; }
.dz-nbx-swatches .sw b { display: block; padding: 10px 14px 0; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #1A1A1A; }
.dz-nbx-swatches .sw span { display: block; padding: 2px 14px 12px; font-size: 12px; color: #8A947F; line-height: 1.5; }
.dz-nbx-ratio { display: flex; margin-top: 28px; border-radius: var(--radius-sm); overflow: hidden; height: 40px; }
.dz-nbx-ratio .seg { display: grid; place-items: center; font-family: var(--font-heading); font-size: 10px; font-weight: 700; letter-spacing: .05em; color: #fff; white-space: nowrap; overflow: hidden; }
.dz-nbx-note { margin-top: 16px; max-width: 52rem; font-size: 13px; color: #8A947F; line-height: 1.7; }
.dz-nbx-row { background: #FAFAF7; padding-block: 64px; }
.dz-nbx-row.alt { background: #fff; }
.dz-nbx-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
@media (min-width: 1000px) { .dz-nbx-grid { grid-template-columns: 2fr 3fr; } .dz-nbx-grid.flip { grid-template-columns: 3fr 2fr; } .dz-nbx-grid.flip .dz-nbx-copy { order: 2; } .dz-nbx-grid.flip .dz-nbx-demo { order: 1; } }
.dz-nbx-h3 { font-family: var(--font-heading); font-size: clamp(20px, 2.6vw, 28px); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #2D5016; line-height: 1.25; }
.dz-nbx-h3 .bright { color: #3A913F; }
.dz-nbx-h3 .gold { color: #D4A843; }
.dz-nbx-h3.onband { color: #fff; max-width: 30ch; }
.dz-nbx-copy p:not(.dz-nbx-kicker):not(.dz-nbx-fine) { margin-top: 14px; font-size: 15px; color: #55604F; line-height: 1.8; }
.dz-nbx-fine { margin-top: 14px; font-size: 12px; font-weight: 700; color: #3A913F; text-transform: uppercase; letter-spacing: .08em; }
.dz-nbx-band { background: #2D5016; padding-block: 64px; }
.dz-nbx-band-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 32px; }
@media (min-width: 1000px) { .dz-nbx-band-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.dz-nbx-band-note { margin-top: 20px; font-size: 13px; color: rgba(255,255,255,.55); max-width: 52rem; line-height: 1.7; }
.dz-nbx-decisions { background: #fff; padding-block: 64px; }
.dz-nbx-decision { display: flex; gap: 20px; max-width: 46rem; padding-block: 18px; border-bottom: 1px solid #EDEFE8; }
.dz-nbx-decision .no { flex: none; font-family: var(--font-heading); font-size: 26px; font-weight: 900; color: #3A913F; width: 40px; }
.dz-nbx-decision h4 { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: #1A1A1A; text-transform: none; letter-spacing: 0; }
.dz-nbx-decision p { margin-top: 6px; font-size: 14px; color: #55604F; line-height: 1.7; }
.dz-nbx-stackline { margin-top: 26px; font-size: 12.5px; color: #8A947F; }
.dz-nbx-shots { background: #F5F5F0; padding-block: 64px; }
.dz-nbx-shots .dz-shots { margin-top: 28px; }
.dz-nbx-results { background: #2D5016; padding-block: 72px; }
.dz-nbx-numrow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 36px; }
@media (min-width: 900px) { .dz-nbx-numrow { grid-template-columns: repeat(4, 1fr); } }
.dz-nbx-numrow b { display: block; font-family: var(--font-heading); font-size: clamp(34px, 4vw, 52px); font-weight: 900; color: #fff; line-height: 1; }
.dz-nbx-numrow span { display: block; margin-top: 8px; font-size: 12.5px; color: rgba(255,255,255,.6); }

/* Steppers on LIGHT surfaces (Prospectus rows, Programme paper): the base
   component was designed for dark bands, so recolour the idle states. */
.dz-nbx-grid .dz-nb-steps button, .dz-npx-paper .dz-nb-steps button {
  background: #fff; border-color: #D9DED2;
}
.dz-nbx-grid .dz-nb-steps button .t, .dz-npx-paper .dz-nb-steps button .t { color: #6B7280; }
.dz-nbx-grid .dz-nb-steps button .n, .dz-npx-paper .dz-nb-steps button .n {
  border-color: #C2C8BB; color: #6B7280;
}
.dz-nbx-grid .dz-nb-steps button.on, .dz-nbx-grid .dz-nb-steps button.done { border-color: #3A913F; }
.dz-nbx-grid .dz-nb-steps button.on { background: rgba(58,145,63,.1); }
.dz-nbx-grid .dz-nb-steps button.on .n, .dz-nbx-grid .dz-nb-steps button.done .n { background: #3A913F; border-color: #3A913F; color: #fff; }
.dz-nbx-grid .dz-nb-steps button.on .t, .dz-nbx-grid .dz-nb-steps button.done .t { color: #1A1A1A; }
.dz-npx-paper .dz-nb-steps button.on .t, .dz-npx-paper .dz-nb-steps button.done .t { color: #2D3E50; }
.dz-nbx-grid .dz-nb-steppanels, .dz-npx-paper .dz-nb-steppanels {
  background: #fff; box-shadow: 0 4px 18px rgba(45,62,80,.07);
}

/* ---- NOUPOORT "Programme": cream paper, serif chapters, ornaments ---- */
.dz-npx-paper { background: #faf6f1; }
.dz-npx-measure { max-width: 680px; margin-inline: auto; padding-inline: 24px; }
.dz-npx-measure.wide { max-width: 960px; }
.dz-npx-orn { display: block; text-align: center; color: #a8753b; font-size: 13px; letter-spacing: 1em; padding-left: 1em; margin-bottom: 22px; }
.dz-npx-serif { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(26px, 3.6vw, 40px); color: #2D3E50; line-height: 1.25; text-align: center; }
.dz-npx-serif i { color: #a8753b; }
.dz-npx-serif.sm { font-size: clamp(22px, 2.8vw, 30px); }
.dz-npx-serif.center { text-align: center; }
.dz-npx-open { padding-block: 72px 48px; }
.dz-npx-open p { margin-top: 22px; font-size: 15.5px; color: #55606B; line-height: 1.9; text-align: center; }
.dz-npx-small { font-size: 12.5px !important; color: #9AA3AB !important; }
.dz-npx-chapter { padding-block: 48px; border-top: 1px solid #e0ccad; }
.dz-npx-chapno { text-align: center; margin-bottom: 10px; }
.dz-npx-chapno span {
  display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  border: 1.5px solid #a8753b; color: #a8753b;
  font-family: Georgia, serif; font-size: 20px;
}
.dz-npx-chapline { margin: 14px auto 30px; max-width: 620px; text-align: center; font-size: 14.5px; color: #55606B; line-height: 1.8; padding-inline: 24px; }
.dz-npx-chapline.center { text-align: center; }
.dz-npx-spec { padding-block: 64px; border-top: 1px solid #e0ccad; }
.dz-npx-goldscale { display: flex; height: 46px; border-radius: var(--radius-sm); overflow: hidden; margin-top: 30px; box-shadow: 0 4px 16px rgba(45,62,80,.12); }
.dz-npx-goldscale span { flex: 1; position: relative; }
.dz-npx-goldscale .mark::after { content: "primary"; position: absolute; inset: 0; display: grid; place-items: center; font-family: ui-monospace, Menlo, monospace; font-size: 9px; color: #fff; letter-spacing: .1em; text-transform: uppercase; }
.dz-npx-goldnote { margin-top: 14px; text-align: center; font-size: 12.5px; color: #7C8791; line-height: 1.8; }
.dz-npx-goldnote b { font-family: ui-monospace, Menlo, monospace; font-weight: 400; color: #a8753b; }
.dz-npx-details { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 36px; border-top: 1px solid #e0ccad; }
@media (min-width: 760px) { .dz-npx-details { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.dz-npx-details > div { padding-block: 18px; border-bottom: 1px solid #ecdcc3; }
.dz-npx-details h4 { font-family: Georgia, serif; font-size: 17px; font-weight: 400; color: #2D3E50; }
.dz-npx-details p { margin-top: 6px; font-size: 13.5px; color: #55606B; line-height: 1.7; }
.dz-npx-stackline { margin-top: 26px; text-align: center; font-size: 12px; color: #9AA3AB; line-height: 1.8; }
.dz-npx-shots { padding-block: 56px; border-top: 1px solid #e0ccad; }
.dz-npx-shots .dz-shots { margin-top: 30px; }
.dz-npx-close { padding-block: 64px 72px; border-top: 1px solid #e0ccad; }
.dz-npx-quote { margin: 0; font-family: Georgia, serif; font-size: clamp(20px, 2.6vw, 26px); color: #2D3E50; text-align: center; line-height: 1.6; }
.dz-npx-quote i { color: #a8753b; }
.dz-npx-quotewho { margin-top: 14px; text-align: center; font-family: var(--font-heading); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: #a8753b; }
.dz-npx-register { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 44px; text-align: center; }
@media (min-width: 760px) { .dz-npx-register { grid-template-columns: repeat(4, 1fr); } }
.dz-npx-register b { display: block; font-family: Georgia, serif; font-size: 40px; color: #a8753b; line-height: 1; }
.dz-npx-register span { display: block; margin-top: 8px; font-size: 12px; color: #7C8791; }

/* ---- WAID "Bento": sage page, rounded tiles, sentence case ---- */
.dz-wdx-page { background: #f8f9f5; text-transform: none; }
.dz-wdx-h2 { font-family: var(--font-heading); font-size: clamp(24px, 3.2vw, 34px); font-weight: 800; color: #1a1a1a; text-transform: none; letter-spacing: -0.01em; line-height: 1.2; }
.dz-wdx-lead { margin-top: 14px; max-width: 46rem; font-size: 16px; color: #6b7280; line-height: 1.8; }
.dz-wdx-intro { padding-block: 64px 24px; }
.dz-wdx-bento-wrap { padding-block: 40px 64px; }
.dz-wdx-bento { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 900px) { .dz-wdx-bento { grid-template-columns: repeat(3, 1fr); } .dz-wdx-tile.span2 { grid-column: span 2; } }
.dz-wdx-tile {
  background: #fff; border-radius: var(--radius-xl); padding: 26px;
  box-shadow: 0 4px 20px rgba(26,26,26,.06);
}
.dz-wdx-tile .tag {
  display: inline-block; font-size: 11px; font-weight: 700; color: #6b7280;
  background: #f2f3ef; border-radius: var(--radius-pill); padding: 4px 12px;
}
.dz-wdx-tile.ai .tag { background: #1a1a1a; color: #4ade80; }
.dz-wdx-tile h3 { margin-top: 12px; font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: #1a1a1a; text-transform: none; letter-spacing: 0; line-height: 1.35; }
.dz-wdx-tile > p { margin-top: 8px; font-size: 13.5px; color: #6b7280; line-height: 1.7; }
.dz-wdx-tile .dz-wd-ws { margin-top: 16px; }
.dz-wdx-tile .dz-wd-ws-stage { box-shadow: none; border: 1px solid #edeee9; padding: 14px; }
.dz-wdx-tile .dz-wd-mcp { margin-top: 16px; }
.dz-wdx-family { margin-top: 14px; }
.dz-wdx-family .row { display: flex; align-items: center; gap: 10px; background: #f8f9f5; border-radius: var(--radius-lg); padding: 10px 14px; margin-top: 8px; font-size: 13px; color: #1a1a1a; }
.dz-wdx-family .row.done { color: #9ca3af; text-decoration: line-through; }
.dz-wdx-family .ic { font-size: 15px; }
.dz-wdx-tile .dz-wd-stats { margin-top: 14px; }
.dz-wdx-tile .dz-wd-stats .s { background: #f8f9f5; box-shadow: none; }
.dz-wdx-tile .dz-wd-load { box-shadow: none; border: 1px solid #edeee9; }
.dz-wdx-design { padding-block: 56px; background: #fff; border-radius: 32px 32px 0 0; }
.dz-wdx-tokens { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 28px; max-width: 720px; }
@media (min-width: 760px) { .dz-wdx-tokens { grid-template-columns: repeat(4, 1fr); } }
.dz-wdx-tokens .tk { border: 1px solid #edeee9; border-radius: var(--radius-lg); overflow: hidden; }
.dz-wdx-tokens .tk::before { content: ""; display: block; height: 44px; background: var(--c); border-bottom: 1px solid #edeee9; }
.dz-wdx-tokens .tk b { display: block; padding: 8px 12px 0; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: #1a1a1a; }
.dz-wdx-tokens .tk span { display: block; padding: 2px 12px 10px; font-size: 11px; color: #9ca3af; }
.dz-wdx-wscolors { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 22px; font-size: 13px; color: #6b7280; }
.dz-wdx-wscolors i { width: 16px; height: 16px; border-radius: 50%; }
.dz-wdx-note { margin-top: 18px; max-width: 52rem; font-size: 13px; color: #9ca3af; line-height: 1.7; }
.dz-wdx-shots { padding-block: 56px; background: #fff; }
.dz-wdx-shots .dz-shots { margin-top: 24px; }
.dz-wdx-insight { padding-block: 64px; }
.dz-wdx-chat { max-width: 620px; margin-inline: auto; }
.dz-wdx-chat .q {
  background: #1a1a1a; color: #fff; border-radius: 18px 18px 4px 18px;
  padding: 13px 18px; font-size: 15px; max-width: 260px; margin-left: auto;
}
.dz-wdx-chat .a {
  margin-top: 12px; background: #fff; border-radius: 18px 18px 18px 4px;
  padding: 16px 20px; font-size: 14px; color: #374151; line-height: 1.7;
  box-shadow: 0 4px 18px rgba(26,26,26,.08);
}
.dz-wdx-chat .who { display: block; font-size: 11px; font-weight: 700; color: #7c3aed; margin-bottom: 6px; }
.dz-wdx-insight-note { margin-top: 16px; text-align: center; font-size: 12px; color: #9ca3af; }

/* ---- DEVDOCK "Terminal": fully dark page, mono comment headers ---- */
.dz-ddx-page { background: #12141F; }
.dz-ddx-sec { padding-block: 56px; border-top: 1px solid rgba(255,255,255,.06); }
.dz-ddx-cmt { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: #4ade80; margin-bottom: 12px; }
.dz-ddx-h2 { font-family: var(--font-heading); font-size: clamp(22px, 3vw, 32px); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; }
.dz-ddx-lead { margin-top: 12px; max-width: 46rem; font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.8; }
.dz-ddx-page .dz-dd-app { margin-top: 26px; margin-inline: 0; max-width: none; }
.dz-ddx-page .dz-dd-arcade, .dz-ddx-page .dz-dd-pair { margin-top: 26px; }
/* chaos-to-dock */
.dz-ddx-dock { margin-top: 26px; }
.dz-ddx-stage { position: relative; height: 380px; }
.dz-ddx-stage .win {
  position: absolute; width: 250px; background: #1E2235;
  border: 1px solid rgba(255,255,255,.15); border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,.5);
  transition: all .6s cubic-bezier(.6,.05,.2,1);
}
.dz-ddx-stage .win .bar { display: block; background: rgba(255,255,255,.08); padding: 6px 10px; font-size: 10px; color: rgba(255,255,255,.55); }
.dz-ddx-stage .win code { display: block; padding: 10px; font-size: 11px; color: #C9D1D9; line-height: 1.6; min-height: 48px; }
.dz-ddx-stage .w1 { top: 4%; left: 3%; transform: rotate(-4deg); }
.dz-ddx-stage .w2 { top: 40%; left: 14%; transform: rotate(3deg); z-index: 2; }
.dz-ddx-stage .w3 { top: 10%; left: 38%; transform: rotate(2deg); }
.dz-ddx-stage .w4 { top: 52%; left: 44%; transform: rotate(-3deg); z-index: 3; }
.dz-ddx-stage .w5 { top: 6%; right: 4%; transform: rotate(5deg); }
.dz-ddx-stage .w6 { top: 48%; right: 8%; transform: rotate(-2deg); }
.dz-ddx-stage .dockwin {
  position: absolute; inset: 6% 10%; background: #171A2B;
  border: 1px solid var(--teal); border-radius: var(--radius-md); overflow: hidden;
  opacity: 0; transform: scale(.9); transition: all .5s ease .25s;
  box-shadow: 0 0 60px rgba(0,188,212,.25);
}
.dz-ddx-dock.is-docked .win { opacity: 0; transform: scale(.5) rotate(0deg); pointer-events: none; }
.dz-ddx-dock.is-docked .w1, .dz-ddx-dock.is-docked .w2, .dz-ddx-dock.is-docked .w3 { left: 12%; top: 40%; }
.dz-ddx-dock.is-docked .w4, .dz-ddx-dock.is-docked .w5, .dz-ddx-dock.is-docked .w6 { right: 12%; top: 40%; }
.dz-ddx-dock.is-docked .dockwin { opacity: 1; transform: scale(1); }
.dz-ddx-stage .dockbar { display: flex; align-items: center; padding: 9px 14px; background: #12141F; border-bottom: 1px solid rgba(255,255,255,.08); }
.dz-ddx-stage .dockbar img { height: 15px; width: auto; }
.dz-ddx-stage .dockbody { display: grid; grid-template-columns: 200px 1fr; height: calc(100% - 34px); }
.dz-ddx-stage .dockside { border-right: 1px solid rgba(255,255,255,.07); padding: 12px; }
.dz-ddx-stage .dockside .p { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255,255,255,.7); padding: 8px 10px; border-left: 2px solid transparent; }
.dz-ddx-stage .dockside .p em { font-style: normal; color: rgba(255,255,255,.35); font-family: ui-monospace, Menlo, monospace; font-size: 10px; }
.dz-ddx-stage .dockside .p.on { border-left-color: var(--teal); background: rgba(0,188,212,.08); color: #fff; }
.dz-ddx-stage .dockmain { display: grid; place-content: center; text-align: center; padding: 20px; }
.dz-ddx-stage .dockmain span { font-family: var(--font-heading); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.dz-ddx-stage .dockmain em { font-style: normal; margin-top: 8px; font-size: 12px; color: rgba(255,255,255,.45); }
.dz-ddx-dockbtn {
  display: block; margin: 18px auto 0; background: var(--teal); border: 0; color: #fff;
  font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; padding: 12px 28px; border-radius: var(--radius-xs); cursor: pointer;
}
.dz-ddx-dockbtn:hover { background: var(--teal-dark); }
@media (max-width: 760px) {
  .dz-ddx-stage { height: 460px; }
  .dz-ddx-stage .win { width: 190px; }
  .dz-ddx-stage .dockbody { grid-template-columns: 1fr; }
  .dz-ddx-stage .dockside { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.07); }
}
/* dashboard project grid */
.dz-ddx-note { margin-top: 18px; font-size: 13px; color: rgba(255,255,255,.5); max-width: 52rem; line-height: 1.7; }
.dz-ddx-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 26px; }
@media (min-width: 900px) { .dz-ddx-grid { grid-template-columns: repeat(3, 1fr); } }
.dz-ddx-grid .pc {
  background: #1E2235; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm);
  padding: 16px; transition: border-color .2s ease;
}
.dz-ddx-grid .pc:hover { border-color: rgba(0,188,212,.5); }
.dz-ddx-grid .pc.run { border-color: rgba(74,222,128,.45); }
.dz-ddx-grid .fw {
  display: inline-block; font-family: var(--font-heading); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; color: var(--teal); border: 1px solid var(--teal); border-radius: var(--radius-xs); padding: 3px 8px;
}
.dz-ddx-grid .pc.space .fw { color: rgba(255,255,255,.45); border-color: rgba(255,255,255,.3); }
.dz-ddx-grid strong { display: block; margin-top: 10px; font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.dz-ddx-grid em { display: block; margin-top: 4px; font-style: normal; font-size: 11.5px; color: rgba(255,255,255,.5); font-family: ui-monospace, Menlo, monospace; }
.dz-ddx-grid .pc.run em { color: #4ade80; }
.dz-ddx-grid i { display: block; margin-top: 8px; font-style: normal; font-size: 11px; color: var(--amber); }
/* pane system demo */
.dz-ddx-panes { margin-top: 26px; background: #171A2B; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md); overflow: hidden; }
.dz-ddx-panehead { display: flex; justify-content: space-between; padding: 9px 14px; background: #12141F; border-bottom: 1px solid rgba(255,255,255,.08); font-family: ui-monospace, Menlo, monospace; font-size: 10px; color: rgba(255,255,255,.5); }
.dz-ddx-panerow { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .dz-ddx-panerow { grid-template-columns: repeat(3, 1fr); } }
.dz-ddx-panerow .pane { border-right: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07); }
.dz-ddx-panerow .pt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.07); }
.dz-ddx-panerow .pt b { font-family: var(--font-heading); font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--teal); }
.dz-ddx-panerow .pt em { font-style: normal; font-size: 10px; color: rgba(255,255,255,.4); font-family: ui-monospace, Menlo, monospace; }
.dz-ddx-panerow .pt em.chips { color: rgba(0,188,212,.6); }
.dz-ddx-panerow .pb { min-height: 130px; padding: 14px; }
.dz-ddx-panerow .pb.chat { background: #FAF9F5; }
.dz-ddx-panerow .pb.chat .q { font-size: 14px; color: #6b6b6b; border: 1px solid #E5E1D8; border-radius: var(--radius-md); padding: 10px 12px; }
.dz-ddx-panerow .pb.chat .s { margin-top: 10px; font-size: 12px; color: #1a1a1a; }
.dz-ddx-panerow .pb.chat .s i { font-style: normal; color: #9ca3af; font-size: 10px; }
.dz-ddx-panerow .pb.term { font-family: ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.9; color: #C9D1D9; background: #0D1117; }
.dz-ddx-panerow .pb.term span { display: block; }
.dz-ddx-panerow .pb.term .ok { color: #4ade80; }
.dz-ddx-panerow .pb.term .dim { color: rgba(201,209,217,.5); }
/* feature manifest */
.dz-ddx-manifest { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 20px; max-width: 60rem; }
@media (min-width: 800px) { .dz-ddx-manifest { grid-template-columns: 1fr 1fr; column-gap: 44px; } }
.dz-ddx-manifest .m { display: flex; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.dz-ddx-manifest b { flex: none; min-width: 150px; font-family: var(--font-heading); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--teal); padding-top: 2px; }
.dz-ddx-manifest span { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.65; }
.dz-dd-tabs button.dis { opacity: .4; cursor: default; }
/* engineering log + terminal */
.dz-ddx-log { margin-top: 20px; border-left: 2px solid rgba(0,188,212,.4); }
.dz-ddx-log .e { padding: 10px 18px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: rgba(255,255,255,.7); line-height: 1.7; }
.dz-ddx-log .e .h { color: var(--teal); }
.dz-ddx-term { margin-top: 26px; background: #0D1117; border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius-md); padding: 18px 20px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 2; }
.dz-ddx-term .p { color: #7EE787; }
.dz-ddx-term .o { color: rgba(201,209,217,.75); }
.dz-ddx-term .caret { color: var(--teal); animation: dz-caret-blink 1s steps(1) infinite; }
.dz-ddx-shots { margin-top: 24px; }
.dz-ddx-shots .dz-shot figcaption { color: rgba(255,255,255,.5); }

/* ---- HYPEROS "Pipeline": Airwave light surfaces, DM Sans, Abyssal Blue ---- */
.dz-hx-page { background: #F6F8FE; font-family: "DM Sans", var(--font-body); text-transform: none; }
.dz-hx-h2 { font-family: "DM Sans", var(--font-heading); font-size: clamp(26px, 3.4vw, 38px); font-weight: 700; color: #1F2937; text-transform: none; letter-spacing: -0.015em; line-height: 1.18; }
.dz-hx-h3 { font-family: "DM Sans", var(--font-heading); font-size: clamp(20px, 2.6vw, 28px); font-weight: 700; color: #1F2937; text-transform: none; letter-spacing: -0.01em; }
.dz-hx-h3.onlight { color: #fff; }
.dz-hx-lead { margin-top: 14px; font-size: 15.5px; color: #4B5563; line-height: 1.85; }
.dz-hx-sub { margin-top: 10px; max-width: 46rem; font-size: 14.5px; color: #6B7280; line-height: 1.8; }
.dz-hx-sub.onlight { color: rgba(255,255,255,.65); }
.dz-hx-fine { margin-top: 14px; font-size: 12px; color: #9CA3AF; }
.dz-hx-fine.center { text-align: center; }
.dz-hx-fine.light { color: rgba(255,255,255,.5); max-width: 56rem; margin-inline: auto; }
.dz-hx-open { padding-block: 64px; }
.dz-hx-opengrid { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 960px) { .dz-hx-opengrid { grid-template-columns: 3fr 2fr; } }
.dz-hx-spinecard { background: #fff; border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 1px 3px rgba(31,41,55,.08), 0 8px 24px rgba(31,41,55,.06); }
.dz-hx-spinecard .tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #3A62E4; }
.dz-hx-spinecard code { display: block; margin-top: 10px; font-family: ui-monospace, Menlo, monospace; font-size: 20px; color: #1F2937; }
.dz-hx-minibar { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.dz-hx-minibar span { font-size: 11px; font-weight: 600; color: #9CA3AF; background: #F6F8FE; border-radius: var(--radius-pill); padding: 4px 10px; }
.dz-hx-minibar span.done { color: #0E7C5A; background: rgba(14,124,90,.1); }
.dz-hx-minibar span.done::before { content: "✓ "; }
.dz-hx-minibar span.on { color: #fff; background: #3A62E4; }
.dz-hx-spinecard p { margin-top: 14px; font-size: 13px; color: #6B7280; line-height: 1.7; }
.dz-hx-phase { padding-block: 56px; }
.dz-hx-phase.alt { background: #fff; }
.dz-hx-phase.dark { background: #1F2937; }
.dz-hx-phasehead .ph { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #3A62E4; margin-bottom: 8px; }
.dz-hx-phasehead .ph.light { color: #8FB0FF; }
/* Workflow demo */
.dz-hx-flow { max-width: 720px; margin-top: 28px; background: #fff; border-radius: var(--radius-lg); padding: 26px; box-shadow: 0 1px 3px rgba(31,41,55,.08), 0 8px 24px rgba(31,41,55,.06); }
.dz-hx-phase.alt .dz-hx-flow { background: #F6F8FE; }
.dz-hx-nodes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 700px) { .dz-hx-nodes { grid-template-columns: repeat(6, 1fr); } }
.dz-hx-nodes span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: #9CA3AF; }
.dz-hx-nodes span i {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid #D6DCEB; color: #9CA3AF; font-style: normal; font-size: 13px; font-weight: 700;
  transition: all .25s ease; background: #fff;
}
.dz-hx-nodes span.done i { background: #0E7C5A; border-color: #0E7C5A; color: #fff; }
.dz-hx-nodes span.done { color: #0E7C5A; }
.dz-hx-nodes span.on i { background: #3A62E4; border-color: #3A62E4; color: #fff; box-shadow: 0 0 0 5px rgba(58,98,228,.15); }
.dz-hx-nodes span.on { color: #1F2937; }
.dz-hx-here { margin-top: 18px; background: rgba(58,98,228,.08); border-left: 3px solid #3A62E4; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; font-weight: 600; color: #1F2937; }
.dz-hx-gates { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; }
.dz-hx-gates label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #4B5563; cursor: pointer; }
.dz-hx-gates input { width: 18px; height: 18px; accent-color: #3A62E4; }
.dz-hx-flowerr { margin-top: 14px; background: rgba(220,38,38,.08); border-left: 3px solid #DC2626; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; color: #991B1B; }
.dz-hx-advance {
  margin-top: 16px; background: #3A62E4; border: 0; border-radius: var(--radius-md); color: #fff;
  font-family: "DM Sans", var(--font-heading); font-size: 14px; font-weight: 700;
  padding: 12px 26px; cursor: pointer; transition: background .2s ease;
}
.dz-hx-advance:hover { background: #2C4FC4; }
.dz-hx-flowlog { margin-top: 16px; max-height: 120px; overflow-y: auto; }
.dz-hx-flowlog div { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; padding: 5px 0; border-top: 1px dashed #E3E8F4; }
.dz-hx-flowlog .ok { color: #0E7C5A; }
.dz-hx-flowlog .blocked { color: #DC2626; }
/* CPQ */
.dz-hx-cpq { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 28px; }
@media (min-width: 960px) { .dz-hx-cpq { grid-template-columns: 3fr 2fr; align-items: start; } }
.dz-hx-cpq-left { background: #F6F8FE; border-radius: var(--radius-lg); padding: 24px; }
.dz-hx-cpq-left .grp { margin-bottom: 18px; }
.dz-hx-cpq-left .lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6B7280; margin-bottom: 8px; }
.dz-hx-cpq .pill {
  background: #fff; border: 1.5px solid #D6DCEB; border-radius: var(--radius-pill); color: #4B5563;
  font-family: "DM Sans", var(--font-body); font-size: 13px; font-weight: 600;
  padding: 8px 16px; margin: 0 6px 6px 0; cursor: pointer; transition: all .15s ease;
}
.dz-hx-cpq .pill:hover:not(.dis) { border-color: #3A62E4; }
.dz-hx-cpq .pill.on { background: #3A62E4; border-color: #3A62E4; color: #fff; }
.dz-hx-cpq .pill.dis { opacity: .45; cursor: default; }
.dz-hx-cpq .pill.sm { padding: 5px 12px; font-size: 12px; }
.dz-hx-cpq .dims { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: #1F2937; }
.dz-hx-cpq .swx { display: inline-block; width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 2px solid #D6DCEB; margin-right: 8px; vertical-align: middle; }
.dz-hx-cpq .swx.on { border-color: #3A62E4; box-shadow: 0 0 0 3px rgba(58,98,228,.18); }
.dz-hx-cpq-right { position: sticky; top: 100px; background: #fff; border-radius: var(--radius-lg); padding: 24px; box-shadow: 0 1px 3px rgba(31,41,55,.08), 0 10px 30px rgba(31,41,55,.08); }
.dz-hx-cpq-right .tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #3A62E4; }
.dz-hx-cpq-right .row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid #EEF1F9; font-size: 13px; }
.dz-hx-cpq-right .row em { font-style: normal; color: #6B7280; }
.dz-hx-cpq-right .row b { color: #1F2937; font-variant-numeric: tabular-nums; }
.dz-hx-cpq-right .row.cost b { color: #3A62E4; }
.dz-hx-cpq-right .mar { margin-top: 12px; }
.dz-hx-cpq-right .mar .lbl { display: block; font-size: 12px; font-weight: 700; color: #4B5563; margin-bottom: 6px; }
.dz-hx-cpq-right .total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; border-top: 2px solid #1F2937; padding-top: 12px; }
.dz-hx-cpq-right .total em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #6B7280; }
/* Amber-family orange reserved for pricing: the quote total, like the real app */
.dz-hx-cpq-right .total b { font-size: 28px; font-weight: 800; color: #E8871E; font-variant-numeric: tabular-nums; }
.dz-hx-cpq-right .note { margin-top: 14px; font-size: 11.5px; color: #9CA3AF; line-height: 1.65; }
/* Fleet map skin */
.dz-hx-map { margin-top: 28px; }
.dz-hx-mapcanvas { border-radius: var(--radius-lg); }
.dz-hx-vh { stroke: #11141B; stroke-width: 2.5; }
.dz-hx-vh.moving { fill: #34D399; }
.dz-hx-vh.parked { fill: #F5A623; }
.dz-hx-vh.expired { fill: #EF4444; }
.dz-hx-vh.is-hover, .dz-hx-vh:hover { stroke: #fff; }
.dz-hx-vh.anim { animation: dz-hx-drive 6s ease-in-out infinite alternate; }
@keyframes dz-hx-drive { from { transform: translate(0, 0); } to { transform: translate(58px, -14px); } }
@media (prefers-reduced-motion: reduce) { .dz-hx-vh.anim { animation: none; } }
.dz-hx-legend { background: rgba(20,24,32,.85); }
.dz-hx-legend .k { color: rgba(255,255,255,.8); }
.dz-hx-legend .k.mv::before { background: #34D399; }
.dz-hx-legend .k.pk::before { background: #F5A623; }
.dz-hx-legend .k.ex::before { background: #EF4444; }
.dz-hx-panel { border-left-color: #3A62E4; background: #fff; border-radius: var(--radius-lg); }
.dz-hx-panel .dz-nb-cat { background: rgba(58,98,228,.1); color: #3A62E4; }
.dz-hx-panel h3 { font-family: "DM Sans", var(--font-heading); }
/* Urgency row */
.dz-hx-urgency { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
@media (min-width: 760px) { .dz-hx-urgency { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .dz-hx-urgency { grid-template-columns: repeat(4, 1fr); } }
.dz-hx-urgency .uc { background: #fff; border-radius: var(--radius-lg); padding: 18px; box-shadow: 0 1px 3px rgba(31,41,55,.08); }
.dz-hx-urgency .ic { font-size: 18px; }
.dz-hx-urgency h4 { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-family: "DM Sans", var(--font-body); font-size: 13.5px; font-weight: 700; color: #1F2937; text-transform: none; }
.dz-hx-urgency h4 b { margin-left: auto; background: rgba(58,98,228,.1); color: #3A62E4; border-radius: var(--radius-pill); font-size: 12px; padding: 2px 10px; }
.dz-hx-urgency .r { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid #EEF1F9; font-size: 12.5px; color: #4B5563; }
.dz-hx-urgency .r em { font-style: normal; color: #6B7280; white-space: nowrap; }
.dz-hx-urgency .r em.red { color: #DC2626; font-weight: 700; }
.dz-hx-urgency .r em.amber { color: #B45309; font-weight: 700; }
/* Tenant switcher context */
.dz-hx-tenants { margin-top: 26px; }
.dz-hx-tenants .dz-wd-ws-chips button { border-radius: var(--radius-md); font-family: "DM Sans", var(--font-body); }
.dz-hx-stage { border-radius: var(--radius-lg); }
/* Decisions */
.dz-hx-decisions { background: #fff; padding-block: 56px; }
.dz-hx-decgrid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
@media (min-width: 900px) { .dz-hx-decgrid { grid-template-columns: repeat(2, 1fr); } }
.dz-hx-decgrid .dec { background: #F6F8FE; border-radius: var(--radius-lg); padding: 18px 20px; }
.dz-hx-decgrid .was { font-size: 13px; color: #9CA3AF; text-decoration: line-through; }
.dz-hx-decgrid .arrow { margin: 0 8px; color: #3A62E4; font-weight: 700; }
.dz-hx-decgrid .now { font-size: 13.5px; font-weight: 700; color: #1F2937; }
.dz-hx-decgrid p { margin-top: 8px; font-size: 12.5px; color: #6B7280; line-height: 1.7; }
.dz-hx-decisions .dz-nbx-stackline { color: #9CA3AF; }
.dz-hx-shots { padding-block: 56px; }
.dz-hx-shots .dz-shots { margin-top: 26px; }
.dz-hx-results { background: #1F2937; padding-block: 64px; }
.dz-hx-resgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (min-width: 900px) { .dz-hx-resgrid { grid-template-columns: repeat(6, 1fr); } }
.dz-hx-resgrid b { display: block; font-family: "DM Sans", var(--font-heading); font-size: clamp(26px, 3vw, 38px); font-weight: 800; color: #8FB0FF; line-height: 1; }
.dz-hx-resgrid span { display: block; margin-top: 8px; font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.5; }

/* ---- 3DPRINTZA "Companion": deep purple-black glass, vibrant purple ---- */
.dz-tpz-page { background: #14101F; text-transform: none; }
.dz-tpz-sec { padding-block: clamp(64px, 8vw, 96px); }
.dz-tpz-sec.glass { background: #191430; }
.dz-tpz-h2 { font-family: var(--font-heading); font-size: clamp(23px, 3vw, 33px); font-weight: 800; color: #F4F1FB; text-transform: none; letter-spacing: -0.01em; line-height: 1.22; }
.dz-tpz-h2 .vp { color: #A78BFA; }
.dz-tpz-kick { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8b5cf6; margin-bottom: 10px; }
.dz-tpz-lead { margin-top: 12px; max-width: 48rem; font-size: 15px; color: rgba(244,241,251,.62); line-height: 1.8; }
.dz-tpz-fine { margin-top: 16px; font-size: 12px; color: rgba(244,241,251,.4); max-width: 52rem; line-height: 1.7; }
.dz-tpz-glasscard, .dz-tpz-tri-panel, .dz-tpz-fila, .dz-tpz-dash, .dz-tpz-quote-left, .dz-tpz-quote-right, .dz-tpz-decs .d, .dz-tpz-tiers .t, .dz-tpz-radarcard {
  background: rgba(139,92,246,.07); border: 1px solid rgba(139,92,246,.22);
  border-radius: var(--radius-lg); backdrop-filter: blur(8px);
}
/* Triangle tabs */
.dz-tpz-triangle { max-width: 720px; margin-top: 26px; }
.dz-tpz-tri-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.dz-tpz-tri-tabs button {
  background: rgba(255,255,255,.04); border: 1.5px solid rgba(139,92,246,.3); border-radius: var(--radius-lg);
  color: rgba(244,241,251,.7); font-size: 14px; font-weight: 600; padding: 10px 18px; cursor: pointer;
  transition: all .15s ease;
}
.dz-tpz-tri-tabs button.on { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }
.dz-tpz-tri-panel { padding: 22px; }
.dz-tpz-tri-panel h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: #F4F1FB; text-transform: none; }
.dz-tpz-tri-panel p { margin-top: 8px; font-size: 14px; color: rgba(244,241,251,.62); line-height: 1.75; }
/* Filament finder */
.dz-tpz-fila { margin-top: 26px; padding: 26px; }
.dz-tpz-fila h4 { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: #F4F1FB; text-transform: none; margin-bottom: 14px; }
.dz-tpz-cases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 760px) { .dz-tpz-cases { grid-template-columns: repeat(4, 1fr); } }
.dz-tpz-cases button {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: rgba(255,255,255,.04); border: 1.5px solid rgba(139,92,246,.25); border-radius: var(--radius-lg);
  color: rgba(244,241,251,.8); font-size: 13px; font-weight: 600; padding: 18px 10px; cursor: pointer;
  transition: all .15s ease;
}
.dz-tpz-cases button .ic { font-size: 24px; }
.dz-tpz-cases button:hover { border-color: #8b5cf6; }
.dz-tpz-cases button.on { background: rgba(139,92,246,.2); border-color: #8b5cf6; color: #fff; }
.dz-tpz-resgrid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 900px) { .dz-tpz-resgrid { grid-template-columns: 3fr 2fr; } }
.dz-tpz-mat { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(139,92,246,.15); }
.dz-tpz-mat .nm { min-width: 60px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 700; color: #F4F1FB; }
.dz-tpz-mat .track { flex: 1; height: 10px; border-radius: var(--radius-pill); background: rgba(255,255,255,.07); overflow: hidden; }
.dz-tpz-mat .track b { display: block; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, #8b5cf6, #22d3ee); transition: width .6s cubic-bezier(.2,.8,.2,1); }
.dz-tpz-mat .pct { min-width: 42px; text-align: right; font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: #A78BFA; }
.dz-tpz-mat .dots { font-size: 10px; letter-spacing: 2px; color: #34d399; }
.dz-tpz-mat.win .nm { color: #A78BFA; }
.dz-tpz-mat.dq { opacity: .55; }
.dz-tpz-mat .dqmsg { font-size: 12px; color: #f87171; }
.dz-tpz-radarcard { padding: 20px; text-align: center; }
.dz-tpz-radarcard .lbl { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8b5cf6; }
.dz-tpz-radarcard h4 { margin: 6px 0 0; }
.dz-tpz-radar { width: 100%; max-width: 220px; margin: 8px auto 0; display: block; overflow: visible; }
.dz-tpz-radar text { fill: rgba(244,241,251,.45); font-size: 9px; font-family: var(--font-body); }
.dz-tpz-radar polygon[data-fila-radar] { transition: all .5s ease; }
.dz-tpz-radarcard p { margin-top: 8px; font-size: 12.5px; color: rgba(244,241,251,.6); line-height: 1.6; }
.dz-tpz-again { margin-top: 12px; background: none; border: 1px solid rgba(139,92,246,.4); border-radius: var(--radius-pill); color: #A78BFA; font-size: 11px; font-weight: 700; padding: 7px 16px; cursor: pointer; }
/* Dashboard mock */
.dz-tpz-dash { margin-top: 26px; padding: 24px; }
.dz-tpz-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 860px) { .dz-tpz-kpis { grid-template-columns: repeat(4, 1fr); } }
.dz-tpz-kpis .k { background: rgba(255,255,255,.04); border-radius: var(--radius-lg); padding: 14px; }
.dz-tpz-kpis .ic { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-md); font-size: 16px; }
.dz-tpz-kpis b { display: block; margin-top: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 22px; color: #F4F1FB; }
.dz-tpz-kpis span:last-child { display: block; margin-top: 2px; font-size: 11px; color: rgba(244,241,251,.5); }
.dz-tpz-spools { margin-top: 16px; }
.dz-tpz-spools .sp { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.dz-tpz-spools em { font-style: normal; min-width: 150px; font-size: 13px; color: rgba(244,241,251,.75); }
.dz-tpz-spools i { flex: 1; height: 10px; border-radius: var(--radius-pill); background: rgba(255,255,255,.06); overflow: hidden; display: block; }
.dz-tpz-spools i b { display: block; height: 100%; border-radius: var(--radius-pill); }
.dz-tpz-spools span { min-width: 76px; text-align: right; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: rgba(244,241,251,.55); }
.dz-tpz-spools .low i { box-shadow: 0 0 12px rgba(248,113,113,.5); }
.dz-tpz-spools .warn { color: #f87171; }
/* Quote sliders */
.dz-tpz-quote { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 26px; max-width: 860px; }
@media (min-width: 860px) { .dz-tpz-quote { grid-template-columns: 1fr 1fr; } }
.dz-tpz-quote-left, .dz-tpz-quote-right { padding: 22px; }
.dz-tpz-quote-left label { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: rgba(244,241,251,.75); margin: 14px 0 6px; }
.dz-tpz-quote-left label b { font-family: ui-monospace, Menlo, monospace; color: #A78BFA; }
.dz-tpz-quote-left input[type="range"] { width: 100%; accent-color: #8b5cf6; }
.dz-tpz-quote-left .cols { display: flex; gap: 8px; margin-top: 4px; }
.dz-tpz-quote-left .cols button {
  width: 40px; height: 36px; background: rgba(255,255,255,.05); border: 1.5px solid rgba(139,92,246,.3);
  border-radius: var(--radius-md); color: rgba(244,241,251,.75); font-weight: 700; cursor: pointer;
}
.dz-tpz-quote-left .cols button.on { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }
.dz-tpz-quote-right .row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid rgba(139,92,246,.15); font-size: 13px; }
.dz-tpz-quote-right .row em { font-style: normal; color: rgba(244,241,251,.55); }
.dz-tpz-quote-right .row b { font-family: ui-monospace, Menlo, monospace; color: #F4F1FB; }
.dz-tpz-quote-right .total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; }
.dz-tpz-quote-right .total em { font-style: normal; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgba(244,241,251,.55); }
.dz-tpz-quote-right .total em i { font-style: normal; color: #f5a623; text-transform: none; letter-spacing: 0; }
.dz-tpz-quote-right .total b { font-family: ui-monospace, Menlo, monospace; font-size: 26px; color: #A78BFA; }
/* Pipeline + tiers */
.dz-tpz-pipeline { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
@media (min-width: 860px) { .dz-tpz-pipeline { flex-direction: row; align-items: stretch; } }
.dz-tpz-pipeline .st { flex: 1; background: rgba(139,92,246,.07); border: 1px solid rgba(139,92,246,.22); border-radius: var(--radius-lg); padding: 18px; }
.dz-tpz-pipeline .st b { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 30px; color: #22d3ee; }
.dz-tpz-pipeline .st span { display: block; margin-top: 6px; font-size: 12.5px; color: rgba(244,241,251,.6); line-height: 1.6; }
.dz-tpz-pipeline .ar { align-self: center; color: #8b5cf6; font-size: 22px; }
.dz-tpz-tiers { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 26px; max-width: 760px; }
@media (min-width: 760px) { .dz-tpz-tiers { grid-template-columns: repeat(3, 1fr); } }
.dz-tpz-tiers .t { padding: 20px; text-align: center; position: relative; }
.dz-tpz-tiers .t.pop { border-color: #8b5cf6; box-shadow: 0 0 30px rgba(139,92,246,.25); }
.dz-tpz-tiers .t.pop::before { content: "MOST POPULAR"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: #8b5cf6; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .1em; border-radius: var(--radius-pill); padding: 3px 10px; }
.dz-tpz-tiers em { font-style: normal; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(244,241,251,.6); }
/* Amber for pricing per the design system */
.dz-tpz-tiers b { display: block; margin-top: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 26px; color: #f5a623; }
.dz-tpz-tiers b span { font-size: 13px; color: rgba(244,241,251,.45); }
.dz-tpz-tiers p { margin-top: 8px; font-size: 12px; color: rgba(244,241,251,.55); }
/* Decisions */
.dz-tpz-decs { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }
@media (min-width: 860px) { .dz-tpz-decs { grid-template-columns: repeat(2, 1fr); } }
.dz-tpz-decs .d { padding: 18px 20px; }
.dz-tpz-decs h4 { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: #F4F1FB; text-transform: none; }
.dz-tpz-decs p { margin-top: 6px; font-size: 13px; color: rgba(244,241,251,.6); line-height: 1.7; }
.dz-nbx-stackline.light { color: rgba(244,241,251,.4); }
.dz-tpz-shots { margin-top: 22px; }
.dz-tpz-shots .dz-shot figcaption { color: rgba(244,241,251,.5); }
/* Storefront builder demo */
.dz-tpz-store { max-width: 760px; margin-top: 26px; }
.dz-tpz-store-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 16px; }
.dz-tpz-store-controls input {
  flex: 1; min-width: 200px; background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(139,92,246,.35); border-radius: var(--radius-lg);
  color: #F4F1FB; font-size: 15px; padding: 11px 16px;
}
.dz-tpz-store-controls input:focus { outline: none; border-color: #8b5cf6; }
.dz-tpz-store-controls .dz-wd-ws-chips { margin: 0; }
.dz-tpz-store-controls .dz-wd-ws-chips button { background: rgba(255,255,255,.05); border-color: rgba(139,92,246,.35); color: #F4F1FB; width: 40px; }
.dz-tpz-store-controls .dz-wd-ws-chips button.on { border-color: #fff; }
.dz-tpz-store-controls .dz-wd-ws-chips button:nth-child(1) { color: #8b5cf6; }
.dz-tpz-store-controls .dz-wd-ws-chips button:nth-child(2) { color: #22d3ee; }
.dz-tpz-store-controls .dz-wd-ws-chips button:nth-child(3) { color: #f472b6; }
.dz-tpz-store-controls .dz-wd-ws-chips button:nth-child(4) { color: #34d399; }
.dz-tpz-store-frame { border: 1px solid rgba(139,92,246,.3); border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 60px -30px rgba(0,0,0,.7); }
.dz-tpz-store-url {
  background: #0E0B18; padding: 10px 16px;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: rgba(244,241,251,.6);
}
.dz-tpz-store-url b { color: var(--wsd); }
.dz-tpz-store-body { background: #1C1631; }
.dz-tpz-store-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(139,92,246,.2); }
.dz-tpz-store-head .mark { width: 26px; height: 26px; border-radius: var(--radius-md); background: var(--wsd); transition: background .3s ease; }
.dz-tpz-store-head strong { font-family: var(--font-heading); font-size: 17px; font-weight: 800; color: #F4F1FB; text-transform: none; }
.dz-tpz-store-tabs { margin-left: auto; display: flex; gap: 4px; }
.dz-tpz-store-tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  color: rgba(244,241,251,.6); font-size: 13px; font-weight: 600; padding: 8px 12px; cursor: pointer;
}
.dz-tpz-store-tabs button.on { color: var(--wsd); border-bottom-color: var(--wsd); }
.dz-tpz-store-pane { padding: 26px 22px; min-height: 170px; }
.dz-tpz-store-pane .big { font-size: 16px; font-weight: 600; color: #F4F1FB; }
.dz-tpz-store-drop {
  margin-top: 14px; border: 2px dashed rgba(139,92,246,.4); border-radius: var(--radius-lg);
  padding: 22px; text-align: center; font-size: 13px; color: rgba(244,241,251,.55);
}
.dz-tpz-store-pane .cta {
  display: inline-block; margin-top: 14px; background: var(--wsd); color: #0E0B18;
  font-size: 13px; font-weight: 700; border-radius: var(--radius-pill); padding: 10px 22px;
  transition: background .3s ease;
}
.dz-tpz-store-prods { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 700px) { .dz-tpz-store-prods { grid-template-columns: repeat(3, 1fr); } }
.dz-tpz-store-prods .pr {
  display: flex; flex-direction: column; gap: 6px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(139,92,246,.2); border-radius: var(--radius-lg); padding: 14px;
  font-size: 13px; color: #F4F1FB;
}
.dz-tpz-store-prods .ph { font-size: 26px; }
.dz-tpz-store-prods b { color: var(--wsd); font-family: ui-monospace, Menlo, monospace; font-size: 12px; transition: color .3s ease; }

/* Feature tour: real screenshots, alternating 50/50 card rows */
.dz-tpz-tour { display: flex; flex-direction: column; gap: 36px; margin-top: 48px; }
.dz-tpz-trow {
  display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
  background: linear-gradient(150deg, rgba(139,92,246,.1), rgba(139,92,246,.04) 55%, rgba(34,211,238,.05));
  border: 1px solid rgba(139,92,246,.28); border-radius: var(--radius-xl);
  padding: clamp(22px, 3.4vw, 40px);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
}
@media (min-width: 860px) {
  .dz-tpz-trow { grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
  .dz-tpz-trow.flip .dz-tpz-tshot { order: 2; }
  .dz-tpz-trow.flip .dz-tpz-tcopy { order: 1; }
}
.dz-tpz-tshot { margin: 0; min-width: 0; }
.dz-tpz-tshot img {
  display: block; width: 100%; height: auto; border-radius: var(--radius-lg);
  border: 1px solid rgba(139,92,246,.35); box-shadow: 0 24px 60px -28px rgba(0,0,0,.8);
  cursor: zoom-in; transition: border-color .2s ease, transform .2s ease;
}
.dz-tpz-tshot:hover img { border-color: #8b5cf6; transform: translateY(-3px); }
.dz-tpz-tshot figcaption { margin-top: 10px; font-size: 11px; color: rgba(244,241,251,.4); }
.dz-tpz-tcopy { min-width: 0; }
.dz-tpz-tcopy h3 { font-family: var(--font-heading); font-size: clamp(19px, 2.3vw, 26px); font-weight: 800; color: #F4F1FB; text-transform: none; letter-spacing: -0.01em; line-height: 1.25; }
.dz-tpz-tcopy .dz-tpz-kick { margin-bottom: 10px; }
.dz-tpz-tcopy p:last-child { margin-top: 12px; font-size: 14.5px; color: rgba(244,241,251,.62); line-height: 1.85; }
.dz-tpz-alsobox { margin-top: 44px; background: rgba(139,92,246,.07); border: 1px solid rgba(139,92,246,.22); border-radius: var(--radius-lg); padding: 20px 22px; }
.dz-tpz-alsobox .lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8b5cf6; margin-bottom: 12px; }
.dz-tpz-alsobox .chip {
  display: inline-block; margin: 0 8px 8px 0; background: rgba(255,255,255,.05);
  border: 1px solid rgba(139,92,246,.3); border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 600; color: rgba(244,241,251,.8); padding: 7px 14px;
}

/* Feature manifests */
.dz-tpz-manifests { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 26px; }
@media (min-width: 900px) { .dz-tpz-manifests { grid-template-columns: 3fr 2fr; } }
.dz-tpz-man { background: rgba(139,92,246,.07); border: 1px solid rgba(139,92,246,.22); border-radius: var(--radius-lg); padding: 24px; }
.dz-tpz-man h3 { font-family: var(--font-heading); font-size: 17px; font-weight: 800; color: #F4F1FB; text-transform: none; margin-bottom: 14px; }
.dz-tpz-man h3.mt { margin-top: 26px; }
.dz-tpz-man ul { margin: 0; padding: 0; list-style: none; }
.dz-tpz-man li {
  position: relative; padding: 9px 0 9px 22px; font-size: 13.5px; color: rgba(244,241,251,.65);
  line-height: 1.65; border-bottom: 1px solid rgba(139,92,246,.12);
}
.dz-tpz-man li:last-child { border-bottom: 0; }
.dz-tpz-man li::before { content: "▸"; position: absolute; left: 0; color: #8b5cf6; }
.dz-tpz-man li b { color: #F4F1FB; font-weight: 700; }

/* Vision band */
.dz-tpz-vision { background: linear-gradient(160deg, #191430, #241a4a); padding-block: 72px; text-align: center; }
.dz-tpz-visionlogo { height: 34px; width: auto; margin: 0 auto 24px; }
.dz-tpz-vision blockquote { margin: 0 auto; max-width: 760px; font-family: var(--font-heading); font-size: clamp(19px, 2.6vw, 26px); font-weight: 700; color: #F4F1FB; line-height: 1.55; text-transform: none; }
.dz-tpz-vision .who { margin-top: 14px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #A78BFA; }
.dz-tpz-visionnums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 760px; margin: 40px auto 0; }
@media (min-width: 760px) { .dz-tpz-visionnums { grid-template-columns: repeat(4, 1fr); } }
.dz-tpz-visionnums b { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 30px; color: #22d3ee; }
.dz-tpz-visionnums span { display: block; margin-top: 6px; font-size: 12px; color: rgba(244,241,251,.55); }

/* ---- PROPWISE "Ledger": #0A0F1C fintech, blue-to-emerald gradient, Geist ---- */
.dz-pwx-gradtext, .dz-pwx-h2 .grad { background: linear-gradient(90deg, #3B82F6, #10B981); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dz-pwx-page { background: #0A0F1C; font-family: "Geist", var(--font-body); text-transform: none; }
.dz-pwx-sec { padding-block: clamp(64px, 8vw, 96px); }
.dz-pwx-sec.card { background: #0D1321; }
.dz-pwx-h2 { font-family: "Geist", var(--font-heading); font-size: clamp(24px, 3.2vw, 36px); font-weight: 700; color: #F1F5F9; text-transform: none; letter-spacing: -0.02em; line-height: 1.2; }
.dz-pwx-kick { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #3B82F6; margin-bottom: 10px; }
.dz-pwx-lead { margin-top: 14px; max-width: 50rem; font-size: 15px; color: #94A3B8; line-height: 1.85; }
.dz-pwx-fine { margin-top: 16px; font-size: 12px; color: #64748B; max-width: 52rem; line-height: 1.7; }
.dz-pwx-fine.center { text-align: center; margin-inline: auto; }
.dz-pwx-pipe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.dz-pwx-pipe .st { background: #111827; border: 1px solid rgba(148,163,184,.12); border-radius: var(--radius-md); padding: 10px 16px; font-size: 13px; font-weight: 500; color: #F1F5F9; }
.dz-pwx-pipe .st.ok { border-color: rgba(16,185,129,.5); color: #10B981; }
.dz-pwx-pipe i { color: #3B82F6; font-style: normal; }
/* Classifier */
.dz-pwx-classify { max-width: 780px; margin-top: 28px; }
.dz-pwx-cl-input { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 700px) { .dz-pwx-cl-input { grid-template-columns: 3fr 1fr; } }
.dz-pwx-cl-input input {
  background: #111827; border: 1.5px solid rgba(148,163,184,.15); border-radius: var(--radius-md);
  color: #F1F5F9; font-family: "Geist Mono", ui-monospace, Menlo, monospace; font-size: 14px; padding: 13px 16px;
}
.dz-pwx-cl-input input:focus { outline: none; border-color: #3B82F6; }
.dz-pwx-cl-tries { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dz-pwx-cl-tries button {
  background: none; border: 1px solid rgba(148,163,184,.2); border-radius: var(--radius-pill);
  color: #94A3B8; font-size: 12px; padding: 6px 14px; cursor: pointer; transition: all .15s ease;
}
.dz-pwx-cl-tries button:hover { border-color: #3B82F6; color: #F1F5F9; }
.dz-pwx-cl-result { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; background: #111827; border-radius: var(--radius-lg); padding: 16px 18px; min-height: 60px; }
.dz-pwx-cl-result .badge {
  background: color-mix(in srgb, var(--cc) 16%, transparent); color: var(--cc);
  border: 1px solid color-mix(in srgb, var(--cc) 45%, transparent);
  border-radius: var(--radius-pill); font-family: "Geist Mono", ui-monospace, monospace; font-size: 13px; font-weight: 600; padding: 6px 14px;
}
.dz-pwx-cl-result .conf { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; color: #94A3B8; }
.dz-pwx-cl-result .via { font-size: 12px; color: #64748B; }
.dz-pwx-cl-rules { margin-top: 18px; border: 1px solid rgba(148,163,184,.1); border-radius: var(--radius-lg); overflow: hidden; }
.dz-pwx-cl-rules .hd, .dz-pwx-cl-rules .r { display: grid; grid-template-columns: 36px 110px 1fr 1fr; gap: 8px; align-items: center; padding: 9px 14px; font-size: 12.5px; }
.dz-pwx-cl-rules .hd { background: #0A0F1C; color: #64748B; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.dz-pwx-cl-rules .r { border-top: 1px solid rgba(148,163,184,.07); color: #94A3B8; font-family: "Geist Mono", ui-monospace, monospace; transition: background .2s ease; }
.dz-pwx-cl-rules .r span:last-child { display: flex; align-items: center; gap: 8px; color: #F1F5F9; }
.dz-pwx-cl-rules .r i { width: 9px; height: 9px; border-radius: 50%; background: var(--cc); }
.dz-pwx-cl-rules .r.hit { background: rgba(59,130,246,.12); box-shadow: inset 3px 0 0 #3B82F6; }
/* Duo cards: RAG + cashflow */
.dz-pwx-duo { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 960px) { .dz-pwx-duo { grid-template-columns: 2fr 3fr; } }
.dz-pwx-duocard { background: #111827; border: 1px solid rgba(148,163,184,.1); border-radius: var(--radius-lg); padding: 26px; }
.dz-pwx-duocard h3 { font-family: "Geist", var(--font-heading); font-size: 18px; font-weight: 700; color: #F1F5F9; text-transform: none; letter-spacing: -0.01em; }
.dz-pwx-rag { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.dz-pwx-rag .dot { width: 26px; height: 26px; border-radius: 50%; background: #10B981; box-shadow: 0 0 14px #10B981; transition: all .3s ease; }
.dz-pwx-rag b { display: block; font-size: 16px; color: #10B981; transition: color .3s ease; }
.dz-pwx-rag em { display: block; font-style: normal; font-size: 12px; color: #64748B; font-family: "Geist Mono", ui-monospace, monospace; }
.dz-pwx-slider { display: block; margin-top: 20px; font-size: 12.5px; color: #94A3B8; }
.dz-pwx-slider input { width: 100%; margin-top: 8px; accent-color: #3B82F6; }
.dz-pwx-check { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; color: #94A3B8; cursor: pointer; }
.dz-pwx-check input { accent-color: #10B981; width: 16px; height: 16px; }
.dz-pwx-cf-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.dz-pwx-cf-bar .pills { display: flex; gap: 6px; }
.dz-pwx-cf-bar .pills button {
  background: none; border: 1px solid rgba(148,163,184,.2); border-radius: var(--radius-md);
  color: #94A3B8; font-size: 12px; font-weight: 600; padding: 6px 14px; cursor: pointer;
}
.dz-pwx-cf-bar .pills button.on { background: #3B82F6; border-color: #3B82F6; color: #fff; }
.dz-pwx-cf-totals { display: flex; gap: 18px; }
.dz-pwx-cf-totals span em { display: block; font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #64748B; }
.dz-pwx-cf-totals span b { font-family: "Geist Mono", ui-monospace, monospace; font-size: 14px; color: #F1F5F9; }
.dz-pwx-cf-totals span b.g { color: #10B981; }
.dz-pwx-cf-totals span b.r { color: #EF4444; }
.dz-pwx-duocard svg { display: block; width: 100%; height: auto; margin-top: 14px; }
.dz-pwx-cf-tip { margin-top: 10px; background: #0A0F1C; border: 1px solid rgba(148,163,184,.15); border-radius: var(--radius-md); padding: 8px 12px; font-family: "Geist Mono", ui-monospace, monospace; font-size: 11.5px; color: #94A3B8; }
.dz-pwx-cf-tip b { color: #F1F5F9; }
/* SA context */
.dz-pwx-sa { display: grid; grid-template-columns: 1fr; gap: 24px; margin-top: 28px; }
@media (min-width: 900px) { .dz-pwx-sa { grid-template-columns: 1fr 1fr; } }
.dz-pwx-sa h4 { font-family: "Geist", var(--font-heading); font-size: 15px; font-weight: 700; color: #F1F5F9; text-transform: none; margin-bottom: 14px; }
.dz-pwx-sa p { margin-top: 14px; font-size: 13px; color: #94A3B8; line-height: 1.75; }
.dz-pwx-sa .tree { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-pwx-sa .tree .n { border-radius: var(--radius-md); padding: 8px 14px; font-size: 12.5px; font-weight: 600; }
.dz-pwx-sa .tree .org { background: rgba(59,130,246,.15); color: #3B82F6; width: 100%; text-align: center; }
.dz-pwx-sa .tree .ent { background: rgba(139,92,246,.15); color: #A78BFA; flex: 1; text-align: center; }
.dz-pwx-sa .tree .prop { background: rgba(16,185,129,.12); color: #10B981; flex: 1; text-align: center; }
.dz-pwx-sa .tree .ten { background: rgba(148,163,184,.1); color: #94A3B8; width: 100%; text-align: center; }
.dz-pwx-sa .badges { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-pwx-sa .badges .b {
  background: color-mix(in srgb, var(--cc) 14%, transparent); color: var(--cc);
  border: 1px solid color-mix(in srgb, var(--cc) 40%, transparent);
  border-radius: var(--radius-pill); font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; padding: 6px 13px;
}
/* Tour rows (placeholder-first) */
.dz-pwx-tour { display: flex; flex-direction: column; gap: 32px; margin-top: 40px; }
.dz-pwx-trow {
  display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center;
  background: #111827; border: 1px solid rgba(148,163,184,.1); border-radius: var(--radius-xl);
  padding: clamp(22px, 3vw, 36px);
}
@media (min-width: 880px) {
  .dz-pwx-trow { grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 52px); }
  .dz-pwx-trow.flip .dz-pwx-tshotwrap { order: 2; }
  .dz-pwx-trow.flip .dz-pwx-tcopy { order: 1; }
}
.dz-pwx-tshotwrap .dz-shot { margin: 0; }
.dz-pwx-tcopy h3 { font-family: "Geist", var(--font-heading); font-size: clamp(18px, 2.2vw, 24px); font-weight: 700; color: #F1F5F9; text-transform: none; letter-spacing: -0.015em; line-height: 1.3; }
.dz-pwx-tcopy .dz-pwx-kick { margin-bottom: 10px; }
.dz-pwx-tcopy p:last-child { margin-top: 12px; font-size: 14px; color: #94A3B8; line-height: 1.8; }
/* MCP demo */
.dz-pwx-mcp { max-width: 620px; margin-top: 26px; }
.dz-pwx-mcp .q { background: #111827; border: 1px solid rgba(148,163,184,.12); border-radius: 14px 14px 14px 4px; padding: 14px 18px; font-size: 14.5px; color: #F1F5F9; }
.dz-pwx-mcp .a { margin-top: 12px; margin-left: 26px; background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.25); border-radius: 14px 14px 4px 14px; padding: 14px 18px; font-size: 13.5px; color: #94A3B8; line-height: 1.75; }
.dz-pwx-mcp .a .who { display: block; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #3B82F6; margin-bottom: 8px; }
.dz-pwx-mcp .a b { color: #10B981; font-family: "Geist Mono", ui-monospace, monospace; }
/* Decisions */
.dz-pwx-decs { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
@media (min-width: 900px) { .dz-pwx-decs { grid-template-columns: repeat(2, 1fr); } }
.dz-pwx-decs .d { background: #111827; border: 1px solid rgba(148,163,184,.1); border-radius: var(--radius-lg); padding: 18px 20px; }
.dz-pwx-decs .was { font-size: 13px; color: #64748B; text-decoration: line-through; }
.dz-pwx-decs .arr { margin: 0 8px; color: #3B82F6; font-weight: 700; }
.dz-pwx-decs .now { font-size: 13.5px; font-weight: 700; color: #F1F5F9; }
.dz-pwx-decs p { margin-top: 8px; font-size: 12.5px; color: #94A3B8; line-height: 1.7; }
.dz-nbx-stackline.pwx { color: #64748B; }
.dz-pwx-shots { margin-top: 26px; }
.dz-pwx-shots .dz-shot figcaption { color: #64748B; }
/* Results */
.dz-pwx-results { background: linear-gradient(160deg, #0D1321, #101B36); padding-block: 72px; }
.dz-pwx-results .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (min-width: 900px) { .dz-pwx-results .grid { grid-template-columns: repeat(6, 1fr); } }
.dz-pwx-results b { display: block; font-family: "Geist Mono", ui-monospace, monospace; font-size: clamp(24px, 2.8vw, 34px); font-weight: 700; background: linear-gradient(90deg, #3B82F6, #10B981); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dz-pwx-results span { display: block; margin-top: 8px; font-size: 12px; color: #94A3B8; line-height: 1.5; }

/* Client quote band */
.dz-np-quote { background: #2D3E50; padding-block: 56px; text-align: center; }
.dz-np-quote blockquote {
  margin: 0 auto; max-width: 720px;
  font-family: Georgia, "Times New Roman", serif; font-size: clamp(20px, 3vw, 27px);
  font-style: italic; color: #fff; line-height: 1.5;
}
.dz-np-quote .who { margin-top: 16px; font-family: var(--font-heading); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #C9A87A; }


/* Wide tick list under a service hero */
.dz-tick--wide {
  max-width: 760px; margin-inline: auto; margin-top: 28px;
  display: grid; grid-template-columns: 1fr; gap: 8px;
}
@media (min-width: 700px) { .dz-tick--wide { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   WEB DESIGN (the bread-and-butter page)
   ============================================================ */
.dz-sitetypes-wrap { max-width: 820px; margin: 0 auto; }
.dz-site-stage {
  display: grid; place-items: center; min-height: 300px; background: var(--grey-light);
  border-radius: var(--radius-md); padding: 22px; overflow: hidden;
}
.dz-site {
  width: 420px; background: #fff; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--border); display: flex; flex-direction: column; gap: 7px;
  padding-bottom: 12px; box-shadow: 0 18px 40px -26px rgba(30,34,53,.5);
}
@media (max-width: 520px) { .dz-site { transform: scale(.74); } }
.dz-site .chrome {
  display: flex; align-items: center; gap: 4px; padding: 7px 9px; background: var(--grey-light);
  border-bottom: 1px solid var(--border); margin-bottom: 5px;
}
.dz-site .chrome i { width: 6px; height: 6px; border-radius: 50%; background: #CFD5DE; }
.dz-site .chrome b { margin-left: 8px; font-size: 8px; font-weight: 400; color: var(--grey-mid); }
.dz-site .hero { height: 74px; margin-inline: 12px; border-radius: var(--radius-sm); background: linear-gradient(120deg, rgba(0,188,212,.22), rgba(46,50,80,.14)); }
.dz-site .hero.tall { height: 118px; }
.dz-site .rows { display: flex; flex-direction: column; gap: 5px; margin-inline: 12px; }
.dz-site .ln { height: 5px; border-radius: var(--radius-pill); background: var(--grey-light); }
.dz-site .ln.s { width: 55%; }
.dz-site .cards, .dz-site .team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-inline: 12px; }
.dz-site .cards i { height: 34px; border-radius: var(--radius-sm); background: var(--grey-light); }
.dz-site .team i { height: 40px; border-radius: 50%; background: var(--grey-light); }
.dz-site .menu { display: grid; gap: 5px; margin-inline: 12px; }
.dz-site .menu i { height: 8px; border-radius: var(--radius-pill); background: var(--grey-light); }
.dz-site .menu i:nth-child(odd) { width: 78%; }
.dz-site .gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-inline: 12px; }
.dz-site .gal i { height: 30px; border-radius: var(--radius-xs); background: rgba(0,188,212,.14); }
.dz-site .bar2 { height: 22px; margin: 0 12px; border-radius: var(--radius-sm); background: var(--navy); }
.dz-site .prods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-inline: 12px; }
.dz-site .prods i { height: 44px; border-radius: var(--radius-sm); background: var(--grey-light); border-bottom: 3px solid rgba(0,188,212,.3); }
.dz-site .mason { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-inline: 12px; }
.dz-site .mason i { height: 34px; border-radius: var(--radius-xs); background: var(--grey-light); }
.dz-site .mason i.t { height: 58px; background: rgba(0,188,212,.16); }
.dz-site .cta {
  align-self: center; margin-top: 4px; padding: 5px 14px; border-radius: var(--radius-pill);
  background: var(--teal); color: #fff; font-family: var(--font-heading); font-size: 9px; font-weight: 700;
}

.dz-comes-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 600px) { .dz-comes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dz-comes-grid { grid-template-columns: repeat(4, 1fr); } }
.dz-comes { padding: 24px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.dz-comes .dz-icon-ring { width: 46px; height: 46px; margin: 0 0 14px; }
.dz-comes .dz-icon-ring svg { width: 19px; height: 19px; }
.dz-comes h4 { font-family: var(--font-heading); font-size: 13px; font-weight: 700; color: var(--charcoal); }
.dz-comes p { margin-top: 7px; font-size: 13px; color: var(--grey-mid); line-height: 1.6; }

.dz-host-split { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 800px) { .dz-host-split { grid-template-columns: repeat(2, 1fr); } }
.dz-host-card { padding: 30px; background: var(--grey-light); border-radius: var(--radius-lg); border-top: 3px solid var(--teal); }
.dz-host-card h4 { font-family: var(--font-heading); font-size: 16px; font-weight: 700; color: var(--charcoal); }
.dz-host-card .dz-tick { margin-block: 16px 22px; }

/* ---- Design vs development ---- */
.dz-vs { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 820px) { .dz-vs { grid-template-columns: repeat(2, 1fr); } }
.dz-vs-side {
  display: flex; flex-direction: column; padding: 30px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  border-top: 3px solid var(--teal);
}
.dz-vs-side.alt { background: var(--navy-dark); border-color: var(--navy-dark); border-top-color: var(--amber); }
.dz-vs-side h3 { margin-top: 4px; font-family: var(--font-heading); font-size: 19px; font-weight: 700; color: var(--charcoal); }
.dz-vs-side p { margin-top: 10px; font-size: 14px; line-height: 1.7; color: var(--grey-mid); }
.dz-vs-side .dz-tick { flex: 1; margin-block: 18px 22px; }
.dz-vs-side.alt h3 { color: #fff; }
.dz-vs-side.alt p, .dz-vs-side.alt .dz-tick li { color: rgba(255,255,255,.72); }
.dz-vs-side.alt .dz-eyebrow { color: var(--amber); }
.dz-vs-side.alt .dz-tick li::before { border-color: var(--amber); }
.dz-vs-side.alt .dz-btn--ghost { color: #fff; border-color: rgba(255,255,255,.32); }
.dz-vs-side.alt .dz-btn--ghost:hover { background: #fff; color: var(--navy); }
.dz-vs-tag {
  align-self: flex-start; padding: 6px 12px; border-radius: var(--radius-pill);
  background: var(--grey-light); color: var(--grey-mid);
  font-family: var(--font-heading); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
}

/* ---- What we build on ---- */
.dz-build-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .dz-build-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .dz-build-grid { grid-template-columns: repeat(4, 1fr); } }
.dz-build { padding: 26px; background: #fff; border-radius: var(--radius-lg); border-left: 3px solid var(--teal); }
.dz-build h4 { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--charcoal); }
.dz-build p { margin-top: 9px; font-size: 13px; line-height: 1.65; color: var(--grey-mid); }

/* ============================================================
   BRAND MARKS
   Monochrome by default and teal on hover: the marks are real, but a
   grid of twenty brand colours would fight the page and each other.
   ============================================================ */
/* height fixed, width auto: the marks are not all square (WooCommerce is
   nearly 5:1), and each carries a viewBox cut to its real bounds. */
.dz-brand-ic { height: 22px; width: auto; max-width: 118px; display: block; flex: none; }
.dz-brand-mark {
  width: 22px; display: grid; place-items: center; border-radius: var(--radius-xs);
  background: var(--grey-light); color: var(--grey-mid);
  font-family: var(--font-heading); font-size: 9px; font-weight: 700; letter-spacing: -.02em;
}
.dz-stack-chip .lg, .dz-build .lg, .dz-stack-i .lg { color: var(--grey-mid); transition: color .2s ease; }
.dz-stack-chip:hover .lg, .dz-build:hover .lg, .dz-stack-i:hover .lg { color: var(--teal); }
.dz-build .lg { margin-bottom: 12px; }
.dz-build .dz-brand-ic { height: 26px; }
.dz-stack-i { flex-direction: row; align-items: flex-start; gap: 12px; }
.dz-stack-i > div { display: flex; flex-direction: column; gap: 4px; }
.dz-stack-chip .lg { margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .dz-stack-chip .lg, .dz-build .lg, .dz-stack-i .lg { transition: none; } }

/* ---- UX page ---- */
.dz-pull { max-width: 660px; margin: 40px auto 0; text-align: center; }
.dz-pull blockquote {
  font-family: var(--font-heading); font-size: clamp(19px, 2.2vw, 24px); font-weight: 700;
  color: var(--charcoal); line-height: 1.4; border: none; padding: 0; margin: 0;
}
.dz-pull blockquote::before { content: '\201C'; color: var(--teal); }
.dz-pull blockquote::after { content: '\201D'; color: var(--teal); }
.dz-pull figcaption {
  margin-top: 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--grey-mid);
}
.dz-kind-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .dz-kind-grid { grid-template-columns: repeat(3, 1fr); } }
.dz-kind { padding: 28px; background: #fff; border-radius: var(--radius-lg); border-top: 3px solid var(--teal); }
.dz-kind h4 { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--charcoal); }
.dz-kind p { margin-top: 9px; font-size: 14px; line-height: 1.7; color: var(--grey-mid); }
.dz-acts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.dz-acts li {
  padding: 3px 9px; border-radius: var(--radius-pill); background: var(--grey-light);
  font-size: 11px; color: var(--grey-mid);
}
.dz-creds { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
@media (min-width: 760px) { .dz-creds { grid-template-columns: repeat(2, 1fr); } }
.dz-cred-i { padding: 20px 22px; background: var(--grey-light); border-radius: var(--radius-md); border-left: 3px solid var(--amber); }
.dz-cred-i b { display: block; font-family: var(--font-heading); font-size: 13px; color: var(--charcoal); }
.dz-cred-i span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.6; color: var(--grey-mid); }


/* ============================================================
   SERVICE HERO BAND
   Same navy gradient and weight as the home page hero, but split:
   copy left, the working element right, so the page opens on the
   thing itself rather than on a paragraph about it.
   ============================================================ */
.dz-svc-band {
  position: relative; overflow: hidden;
  background: linear-gradient(to bottom, var(--navy), var(--navy-dark));
}
.dz-svc-band .dz-container { position: relative; z-index: 2; padding-block: 72px; }
.dz-svc-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 980px) { .dz-svc-grid { grid-template-columns: 1fr 1fr; gap: 56px; } }
.dz-svc-band h1 {
  font-family: var(--font-heading); font-size: clamp(28px, 3.6vw, 44px); font-weight: 900;
  line-height: 1.08; color: #fff; text-transform: uppercase; letter-spacing: -.01em;
}
.dz-svc-band .dz-eyebrow { color: var(--teal); margin-bottom: 14px; }
.dz-svc-band .lead { margin-top: 18px; font-size: 16px; line-height: 1.75; color: rgba(255,255,255,.72); max-width: 46ch; }
.dz-svc-band .dz-tick { margin-top: 22px; }
.dz-svc-band .dz-tick li { color: rgba(255,255,255,.72); }
.dz-svc-band-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.dz-svc-band .dz-btn--ghost { color: #fff; border-color: rgba(255,255,255,.34); }
.dz-svc-band .dz-btn--ghost:hover { background: #fff; color: var(--navy); }

/* Phase sub-stage line + credential issuer */
.dz-phase h4 em {
  font-style: normal; margin-left: 10px; font-size: 11px; font-weight: 700;
  color: var(--teal); letter-spacing: .04em; text-transform: none;
}
.dz-cred-i em { display: block; margin-top: 3px; font-style: normal; font-size: 11px; color: var(--teal); font-weight: 600; }

/* ============================================================
   PRIMARY NAV + MEGA PANEL
   ============================================================ */
.dz-nav-root { display: flex; align-items: center; }
.dz-nav-list { display: none; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .dz-nav-list { display: flex; } }
.dz-nav-list > li { position: static; }
/* :not(.dz-btn) matters: this rule sets background:none, which was wiping the
   Get a Quote button's fill and leaving white text on white. */
.dz-nav-list a:not(.dz-btn), .dz-nav-trigger {
  font-family: var(--font-heading); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--charcoal);
  background: none; border: none; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color .2s ease;
}
.dz-nav-list a:not(.dz-btn):hover, .dz-nav-trigger:hover,
.dz-nav-list a:not(.dz-btn).on, .dz-nav-trigger.on { color: var(--teal); }
.dz-nav-trigger svg { transition: transform .25s ease; }
.dz-nav-root.mega-open .dz-nav-trigger svg { transform: rotate(180deg); }
.dz-nav-root.mega-open .dz-nav-trigger { color: var(--teal); }
.dz-nav-cta a { color: #fff; padding: 10px 18px; font-size: 12px; }
.dz-nav-cta a:hover { color: #fff; }

/* The panel spans the header, not the menu item: six services and a CTA need
   the width, and a 240px dropdown is what made this dull in the first place. */
.dz-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid var(--grey-light);
  box-shadow: 0 26px 50px -24px rgba(30, 34, 53, .28);
  z-index: 60;
}
.dz-mega[hidden] { display: none; }
.dz-nav-root.mega-open .dz-mega { animation: dz-mega-in .22s cubic-bezier(.22, 1, .36, 1); }
@keyframes dz-mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.dz-mega-in {
  max-width: var(--container); margin-inline: auto; padding: 44px 24px 48px;
  display: grid; grid-template-columns: 1fr; gap: 36px;
}
@media (min-width: 1040px) { .dz-mega-in { grid-template-columns: 1fr 300px; gap: 52px; } }
.dz-mega-label {
  font-family: var(--font-heading); font-size: 10px; font-weight: 700; color: var(--grey-mid);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 20px;
}
.dz-mega-grid { display: grid; grid-template-columns: 1fr; gap: 10px 14px; }
@media (min-width: 700px) { .dz-mega-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .dz-mega-grid { grid-template-columns: repeat(3, 1fr); } }
.dz-mega-card {
  display: flex; align-items: flex-start; gap: 13px; padding: 16px 15px;
  border-radius: var(--radius-md); border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.dz-mega-card:hover, .dz-mega-card:focus-visible { background: var(--grey-light); border-color: var(--grey-light); transform: translateX(2px); }
.dz-mega-card.on { border-color: var(--teal); }
.dz-mega-card .ic {
  flex: none; width: 34px; height: 34px; border-radius: var(--radius-sm);
  display: grid; place-items: center; background: rgba(0, 188, 212, .1); color: var(--teal);
}
.dz-mega-card .ic svg { width: 17px; height: 17px; }
.dz-mega-card .tx { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dz-mega-card .tx b {
  font-family: var(--font-heading); font-size: 12px; font-weight: 700; color: var(--charcoal);
  text-transform: uppercase; letter-spacing: .03em;
}
.dz-mega-card .tx span {
  font-family: var(--font-body); font-size: 12px; line-height: 1.55; color: var(--grey-mid);
  text-transform: none; letter-spacing: 0;
}
.dz-mega-card .go { margin-left: auto; color: var(--teal); opacity: 0; transition: opacity .2s ease; }
.dz-mega-card:hover .go { opacity: 1; }
.dz-mega-all {
  display: inline-block; margin-top: 24px; font-size: 11px !important; color: var(--teal) !important;
}
.dz-mega-aside {
  padding: 28px; background: var(--navy-dark); border-radius: var(--radius-lg);
  display: flex; flex-direction: column; align-items: flex-start;
}
.dz-mega-aside .dz-mega-label { color: var(--teal); }
.dz-mega-blurb {
  font-family: var(--font-body); font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.72);
  text-transform: none; letter-spacing: 0; margin-bottom: 22px;
}
.dz-mega-aside .dz-btn { color: #fff; font-size: 11px; padding: 10px 16px; }
.dz-mega-second { margin-top: 14px; font-size: 11px !important; color: rgba(255,255,255,.7) !important; }
.dz-mega-second:hover { color: #fff !important; }

/* Burger */
.dz-burger {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 40px; height: 40px; padding: 9px; cursor: pointer;
  background: none; border: 1px solid var(--grey-light); border-radius: var(--radius-sm);
}
@media (min-width: 900px) { .dz-burger { display: none; } }
.dz-burger span { display: block; height: 2px; background: var(--charcoal); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.dz-nav-root.nav-open .dz-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dz-nav-root.nav-open .dz-burger span:nth-child(2) { opacity: 0; }
.dz-nav-root.nav-open .dz-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 899px) {
  .dz-nav-body {
    position: absolute; left: 0; right: 0; top: 100%; background: #fff;
    border-top: 1px solid var(--grey-light); box-shadow: 0 24px 40px -22px rgba(30,34,53,.3);
    display: none; z-index: 60;
  }
  .dz-nav-root.nav-open .dz-nav-body { display: block; }
  .dz-nav-list { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 16px 20px; }
  .dz-nav-list > li { border-bottom: 1px solid var(--grey-light); }
  .dz-nav-list > li:last-child { border-bottom: none; }
  .dz-nav-list > li > a, .dz-nav-trigger { padding: 14px 0; width: 100%; justify-content: space-between; }
  .dz-mega { position: static; box-shadow: none; border-top: none; }
  .dz-mega-in { padding: 0 0 14px; gap: 16px; }
  .dz-mega-aside { padding: 18px; }
  .dz-nav-cta { padding-top: 14px; }
  .dz-nav-cta a { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .dz-mega-card, .dz-nav-trigger svg, .dz-burger span, .dz-mega-card .go { transition: none; }
  .dz-nav-root.mega-open .dz-mega { animation: none; }
  .dz-mega-card:hover { transform: none; }
}

/* ============================================================
   GRAPHIC DESIGN
   ============================================================ */
.dz-make-grid { display: grid; grid-template-columns: 1fr; gap: 2px; background: var(--grey-light); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--grey-light); }
@media (min-width: 640px) { .dz-make-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dz-make-grid { grid-template-columns: repeat(3, 1fr); } }
.dz-make { background: #fff; padding: 18px 20px; transition: background .2s ease; }
.dz-make:hover { background: rgba(0,188,212,.05); }
.dz-make b {
  display: block; font-family: var(--font-heading); font-size: 12px; font-weight: 700;
  color: var(--charcoal); text-transform: uppercase; letter-spacing: .04em;
}
.dz-make span { display: block; margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--grey-mid); }

/* Collateral pieces */
.dz-col-stage { display: grid; place-items: center; min-height: 260px; background: var(--grey-light); border-radius: var(--radius-md); padding: 20px; overflow: hidden; }
.dz-col-piece {
  background: #fff; border-radius: var(--radius-xs); padding: 14px;
  display: flex; flex-direction: column; gap: 7px; justify-content: center;
  box-shadow: 0 14px 30px -16px rgba(30,34,53,.5);
  transition: width .3s cubic-bezier(.22,1,.36,1), height .3s cubic-bezier(.22,1,.36,1);
}
@media (max-width: 520px) { .dz-col-piece { transform: scale(.8); } }
.dz-col-piece .mk { display: block; width: 30px; height: 30px; border-radius: var(--radius-xs); background: linear-gradient(135deg, var(--teal), var(--navy)); flex: none; }
.dz-col-piece .ln { height: 4px; border-radius: var(--radius-pill); background: var(--grey-light); }
.dz-col-piece .ln.n { height: 7px; width: 70%; background: #D9DEE6; }
.dz-col-piece .ln.big { height: 11px; width: 84%; }
.dz-col-piece .ln.s { width: 45%; }
.dz-col-piece .img { height: 46px; border-radius: var(--radius-xs); background: rgba(0,188,212,.16); }
.dz-col-piece .img.tall { height: 92px; }
.dz-col-piece .top { display: flex; justify-content: flex-end; margin-bottom: 4px; }
.dz-col-piece .row { display: flex; align-items: center; gap: 8px; }
.dz-col-piece .row i { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--grey-light); }
.dz-col-piece .row b { width: 18px; height: 4px; border-radius: var(--radius-pill); background: var(--teal); }
.dz-col-piece .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.dz-col-piece .grid3 i { aspect-ratio: 1; border-radius: var(--radius-xs); background: rgba(0,188,212,.14); }
.dz-col-piece .grid3 i:nth-child(2n) { background: var(--grey-light); }
.dz-col-piece.card { width: 250px; height: 145px; }
.dz-col-piece.letter { width: 172px; height: 244px; }
.dz-col-piece.flyer { width: 172px; height: 244px; }
.dz-col-piece.poster { width: 165px; height: 234px; }
.dz-col-piece.menu { width: 176px; height: 240px; }
.dz-col-piece.banner { width: 104px; height: 250px; }
.dz-col-piece.social { width: 220px; height: 220px; }
.dz-col-piece.vehicle { width: 280px; height: 150px; background: none; box-shadow: none; padding: 0; }
.dz-col-piece .van { position: relative; width: 100%; height: 100%; }
.dz-col-piece .van .body { position: absolute; left: 4%; right: 4%; top: 22%; bottom: 26%; border-radius: 14px 22px 8px 8px; background: #fff; box-shadow: 0 12px 26px -14px rgba(30,34,53,.6); }
.dz-col-piece .van .win { position: absolute; right: 8%; top: 28%; width: 22%; height: 26%; border-radius: 6px 12px 4px 4px; background: rgba(46,50,80,.18); }
.dz-col-piece .van .wheel { position: absolute; bottom: 16%; width: 30px; height: 30px; border-radius: 50%; background: var(--navy-dark); }
.dz-col-piece .van .wheel.a { left: 16%; }
.dz-col-piece .van .wheel.b { right: 18%; }
.dz-col-piece .van .mk { position: absolute; left: 14%; top: 40%; width: 34px; height: 34px; }

/* Retouch */
.dz-rt { position: relative; height: 230px; border-radius: var(--radius-md); overflow: hidden; background: var(--grey-light); }
.dz-rt .scene { position: absolute; inset: 0; }
.dz-rt .lbl {
  position: absolute; top: 8px; left: 10px; z-index: 3; font-family: var(--font-heading);
  font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--grey-mid);
}
.dz-rt .done .lbl { left: auto; right: 10px; color: var(--teal); }
.dz-rt .sky { position: absolute; inset: 0; background: linear-gradient(160deg, #E7ECF2, #CFD7E2); }
.dz-rt .prod {
  position: absolute; left: 50%; top: 52%; width: 96px; height: 116px; transform: translate(-50%, -50%);
  border-radius: 12px 12px 6px 6px; background: linear-gradient(150deg, var(--teal), #0B7C8C);
}
.dz-rt .shadow { position: absolute; left: 50%; top: 78%; width: 120px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: rgba(30,34,53,.18); filter: blur(5px); }
/* Same scene, degraded: this is a treatment being revealed, not two pictures. */
.dz-rt .raw { filter: saturate(.45) contrast(.82) brightness(1.06); }
.dz-rt .raw .sky { background: linear-gradient(160deg, #DDD9D2, #C6C2BA); }
.dz-rt .dust { position: absolute; border-radius: 50%; background: rgba(90,80,70,.28); }
.dz-rt .dust.d1 { left: 32%; top: 30%; width: 5px; height: 5px; }
.dz-rt .dust.d2 { left: 63%; top: 62%; width: 7px; height: 3px; }
.dz-rt .dust.d3 { left: 44%; top: 76%; width: 4px; height: 4px; }
.dz-rt .handle { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--teal); z-index: 4; }

@media (prefers-reduced-motion: reduce) { .dz-col-piece, .dz-make { transition: none; } }

/* ---- Logo lab: vector vs raster ---- */
.dz-lab {
  --z: 1;
  position: relative; height: 250px; border-radius: var(--radius-md); overflow: hidden;
  background:
    linear-gradient(45deg, #EDF0F4 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(-45deg, #EDF0F4 25%, transparent 25%) -8px 0/16px 16px,
    linear-gradient(45deg, transparent 75%, #EDF0F4 75%) 0 0/16px 16px,
    linear-gradient(-45deg, transparent 75%, #EDF0F4 75%) 0 0/16px 16px,
    #F7F8FA;
}
.dz-lab .side { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.dz-lab .lbl {
  position: absolute; top: 9px; left: 11px; z-index: 3; font-family: var(--font-heading);
  font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--grey-mid);
}
.dz-lab .vector { background: transparent; }
.dz-lab .vector .lbl { left: auto; right: 11px; color: var(--teal); }
/* Both render at the raster's NATIVE 44px before zoom, so at 1x the JPEG
   genuinely does look fine and the caption is telling the truth. Starting at
   120px silently upscaled the canvas 2.7x, which pre-broke it. One transform
   drives both, so it stays a fair fight. */
.dz-lab canvas, .dz-lab svg {
  width: 44px; height: 44px; transform: scale(var(--z)); transform-origin: center;
  transition: transform .12s linear;
}
/* The whole point: no smoothing, so the pixels the JPEG actually has are the
   pixels you see. */
.dz-lab canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
.dz-lab .handle { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--teal); z-index: 4; }
.dz-lab.far .raster .lbl { color: var(--orange); }
@media (prefers-reduced-motion: reduce) { .dz-lab canvas, .dz-lab svg { transition: none; } }

/* ============================================================
   3D PRINTING
   ============================================================ */
.dz-spec-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .dz-spec-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dz-spec-grid { grid-template-columns: repeat(3, 1fr); } }
.dz-spec { padding: 24px; background: #fff; border-radius: var(--radius-lg); border-top: 3px solid var(--teal); }
.dz-spec b { display: block; font-family: var(--font-heading); font-size: 16px; font-weight: 900; color: var(--charcoal); }
.dz-spec span { display: block; margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--grey-mid); }

/* Filament advisor */
.dz-fil-q {
  font-family: var(--font-heading); font-size: 10px; font-weight: 700; color: var(--grey-mid);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px;
}
.dz-fil-jobs, .dz-fil-envs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px; }
.dz-fil-jobs button, .dz-fil-envs button {
  padding: 6px 11px; cursor: pointer; background: none; border: 1px solid var(--grey-light);
  border-radius: var(--radius-pill); font-size: 11px; color: var(--grey-mid);
  transition: all .18s ease;
}
.dz-fil-jobs button:hover, .dz-fil-envs button:hover { border-color: var(--teal); color: var(--teal); }
.dz-fil-jobs button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.dz-fil-envs button.on { background: rgba(0,188,212,.12); border-color: var(--teal); color: var(--teal-darker); }
.dz-fil-out { padding-top: 14px; border-top: 1px solid var(--grey-light); min-height: 150px; }
.dz-fil-pick { display: flex; align-items: center; gap: 10px; }
.dz-fil-pick .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--mc); flex: none; }
.dz-fil-pick .hd { display: flex; flex-direction: column; }
.dz-fil-pick b { font-family: var(--font-heading); font-size: 17px; color: var(--charcoal); line-height: 1.1; }
.dz-fil-pick em { font-style: normal; font-size: 11px; color: var(--grey-mid); }
.dz-fil-pick .tier { margin-left: auto; font-family: var(--font-heading); font-size: 11px; font-weight: 700; color: var(--teal); letter-spacing: .08em; }
.dz-fil-blurb { margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--grey-mid); }
.dz-fil-why { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.dz-fil-why li { padding: 3px 8px; border-radius: var(--radius-pill); background: rgba(0,188,212,.1); color: var(--teal-darker); font-size: 11px; }
.dz-fil-alt { margin-top: 10px; font-size: 12px; color: var(--grey-mid); }
.dz-fil-trap { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--grey-mid); padding-left: 10px; border-left: 2px solid var(--amber); }
.dz-fil-trap b { color: var(--charcoal); }
.dz-fil-none b { display: block; font-family: var(--font-heading); font-size: 14px; color: var(--charcoal); }
.dz-fil-none span { display: block; margin: 8px 0 12px; font-size: 13px; line-height: 1.6; color: var(--grey-mid); }
@media (prefers-reduced-motion: reduce) { .dz-fil-jobs button, .dz-fil-envs button { transition: none; } }


/* Network cross-sell band: navy so it reads as a hand-off, and so the page's
   white/grey alternation does not end on two of the same in a row. */
.dz-bg-navy-dark .dz-h2, .dz-bg-navy-dark .dz-lead { color: #fff; }
.dz-bg-navy-dark .dz-lead { color: rgba(255,255,255,.72); }
.dz-bg-navy-dark .dz-eyebrow { color: var(--teal); }
.dz-bg-navy-dark .dz-cap-foot { color: rgba(255,255,255,.6); border-top-color: rgba(255,255,255,.12); }

/* ============================================================
   3D PRINTING: use-case cards are the page
   ============================================================ */
.dz-uc-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 620px) { .dz-uc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dz-uc-grid { grid-template-columns: repeat(3, 1fr); } }
.dz-uc {
  display: flex; flex-direction: column; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.dz-uc:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: 0 22px 44px -26px rgba(30,34,53,.45); }
.dz-uc-img { position: relative; aspect-ratio: 4 / 3; background: var(--grey-light); overflow: hidden; }
.dz-uc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Price signal is the point of the card: it answers "is this R5,000?" before
   they have to ask. */
.dz-uc-price {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  padding: 5px 11px; border-radius: var(--radius-pill); background: var(--navy-dark); color: #fff;
  font-family: var(--font-heading); font-size: 11px; font-weight: 700; letter-spacing: .03em;
}
.dz-uc-body { padding: 20px; }
.dz-uc-body h3 {
  font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--charcoal);
  text-transform: uppercase; letter-spacing: .03em;
}
.dz-uc-body p { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--grey-mid); }

/* Drawn stand-ins until real photography lands. Deliberately illustrative
   rather than a grey rectangle pretending to be a photo. */
.dz-uc-art { position: absolute; inset: 0; display: block; background: linear-gradient(150deg, #EEF2F6, #DDE3EB); }
.dz-uc-art::before, .dz-uc-art::after { content: ''; position: absolute; }
.dz-uc-art.prototype::before { left: 28%; top: 26%; width: 44%; height: 48%; border-radius: 10px; background: linear-gradient(150deg, var(--teal), #0B7C8C); }
.dz-uc-art.prototype::after { left: 34%; top: 62%; width: 32%; height: 8%; border-radius: 50%; background: rgba(30,34,53,.16); filter: blur(4px); }
.dz-uc-art.replacement::before { left: 30%; top: 34%; width: 40%; height: 16%; border-radius: 6px; background: var(--navy); }
.dz-uc-art.replacement::after { left: 44%; top: 46%; width: 12%; height: 30%; background: var(--navy); border-radius: 0 0 6px 6px; }
.dz-uc-art.signage::before { left: 18%; top: 34%; width: 64%; height: 26%; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--teal) 0 14px, transparent 14px 26px); }
.dz-uc-art.signage::after { left: 18%; top: 60%; width: 64%; height: 5%; background: rgba(30,34,53,.14); filter: blur(3px); border-radius: 50%; }
.dz-uc-art.functional::before { left: 26%; top: 28%; width: 48%; height: 44%; border-radius: 8px; background: var(--navy-dark); }
.dz-uc-art.functional::after { left: 40%; top: 42%; width: 20%; height: 20%; border-radius: 50%; background: var(--grey-light); }
.dz-uc-art.run::before { left: 20%; top: 32%; width: 22%; height: 36%; border-radius: 6px; background: var(--teal); box-shadow: 24px 0 0 rgba(0,188,212,.72), 48px 0 0 rgba(0,188,212,.45); }
.dz-uc-art.display::before { left: 30%; top: 24%; width: 40%; height: 52%; border-radius: 6px;
  background: linear-gradient(160deg, var(--teal) 0 25%, var(--amber) 25% 50%, #7BB542 50% 75%, #7052A2 75% 100%); }
.dz-uc-art.design::before { left: 24%; top: 30%; width: 30%; height: 40%; border-radius: 4px; border: 2px dashed #A9B2BF; }
.dz-uc-art.design::after { left: 50%; top: 38%; width: 28%; height: 32%; border-radius: 6px; background: var(--teal); }

/* Materials, simplified */
.dz-mat-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .dz-mat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .dz-mat-grid { grid-template-columns: repeat(5, 1fr); } }
.dz-mat { position: relative; padding: 24px 20px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.dz-mat.rec { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(0,188,212,.1); }
.dz-mat .rec-tag {
  position: absolute; top: -9px; left: 20px; padding: 3px 9px; border-radius: var(--radius-pill);
  background: var(--teal); color: #fff; font-family: var(--font-heading); font-size: 9px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.dz-mat b { display: block; font-family: var(--font-heading); font-size: 16px; color: var(--charcoal); }
.dz-mat em { display: block; margin-top: 3px; font-style: normal; font-size: 11px; color: var(--teal); font-weight: 600; }
.dz-mat span { display: block; margin-top: 10px; font-size: 13px; line-height: 1.6; color: var(--grey-mid); }

.dz-machine { max-width: 760px; margin-inline: auto; text-align: center; }

/* Network list on navy */
.dz-net-list { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 900px; margin: 8px auto 0; }
@media (min-width: 760px) { .dz-net-list { grid-template-columns: repeat(3, 1fr); } }
.dz-net-list li { padding: 20px; background: rgba(255,255,255,.05); border-radius: var(--radius-md); }
.dz-net-list b { display: block; font-family: var(--font-heading); font-size: 13px; color: #fff; }
.dz-net-list span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.7); }

/* Cross-sell strip */
.dz-cross { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center; }
@media (min-width: 860px) { .dz-cross { grid-template-columns: 1fr auto; gap: 40px; } }
.dz-cross h3 { margin-top: 4px; font-family: var(--font-heading); font-size: 20px; font-weight: 700; color: var(--charcoal); }
.dz-cross p { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--grey-mid); max-width: 52ch; }
.dz-cross-links { display: flex; flex-wrap: wrap; gap: 10px; }

@media (prefers-reduced-motion: reduce) { .dz-uc { transition: none; } .dz-uc:hover { transform: none; } }

/* Collateral: the copy column IS the target, so it needs no box of its own.
   It inherits .dz-alt-copy and swaps its contents on selection. */
.dz-col-copy h3 {
  font-family: var(--font-heading); font-size: 22px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; color: var(--charcoal);
}
.dz-col-copy p { margin-top: 12px; font-size: 15px; line-height: 1.75; color: var(--grey-mid); max-width: 46ch; }
.dz-col-copy .dz-try { margin-top: 16px; font-size: 11px; }

/* ============================================================
   Archive gallery: three modes, because three kinds of work
   ============================================================ */
.dz-gsec { margin-top: 48px; }
.dz-gsec:first-of-type { margin-top: 8px; }
.dz-gsec-head { margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.dz-gsec-head h3 {
	font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--navy-dark);
	text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: baseline; gap: 8px;
}
.dz-gsec-head h3 span { font-size: 12px; font-weight: 400; color: var(--grey-mid); letter-spacing: 0; }
.dz-gsec-head p { color: var(--grey-mid); font-size: 14px; margin-top: 6px; }

.dz-gcell { position: relative; display: block; overflow: hidden; border-radius: 8px; text-decoration: none; }
.dz-gcell img { display: block; transition: transform .4s ease; }
.dz-gcell:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dz-gcell[hidden] { display: none; }

/* TILES — logos and UX covers. Uniform white blocks, contained not cropped, no
   caption. A wall of marks reads as a body of work; labelling each one "Logo
   Design" 22 times is noise that fights the mark it sits on. */
.dz-g-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 560px)  { .dz-g-tiles { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 900px)  { .dz-g-tiles { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (min-width: 1200px) { .dz-g-tiles { grid-template-columns: repeat(5, 1fr); } }
.dz-g-tiles .dz-gcell {
	aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--border);
	display: flex; align-items: center; justify-content: center; padding: 14px;
	transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.dz-g-tiles .dz-gcell img { width: 100%; height: 100%; object-fit: contain; }
.dz-g-tiles .dz-gcell:hover { border-color: var(--teal); box-shadow: 0 14px 30px -18px rgba(30,34,53,.45); transform: translateY(-2px); }
.dz-g-tiles .dz-gcell:hover img { transform: scale(1.04); }

/* CARDS — websites. The client name is the point, so it stays visible. */
.dz-g-cards { display: grid; grid-template-columns: repeat(1, 1fr); gap: 16px; }
@media (min-width: 560px)  { .dz-g-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .dz-g-cards { grid-template-columns: repeat(3, 1fr); } }
.dz-g-cards .dz-gcell { border: 1px solid var(--border); background: var(--grey-light); aspect-ratio: 4 / 3; }
.dz-g-cards .dz-gcell img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.dz-g-cards .dz-gcell:hover img { transform: scale(1.03); }
.dz-g-cards .dz-gcap {
	position: absolute; inset: auto 0 0 0; padding: 24px 12px 10px;
	background: linear-gradient(transparent, rgba(30,34,53,.9));
	color: #fff; font-family: var(--font-heading); font-size: 11px; font-weight: 600;
	text-transform: uppercase; letter-spacing: .06em; pointer-events: none;
}

/* MASONRY — print. Runs from tall banners to wide signage; a grid would crop
   every one of them. */
.dz-g-masonry { column-count: 2; column-gap: 14px; }
@media (min-width: 640px)  { .dz-g-masonry { column-count: 3; column-gap: 16px; } }
@media (min-width: 1024px) { .dz-g-masonry { column-count: 4; } }
.dz-g-masonry .dz-gcell {
	border: 1px solid var(--border); background: #fff;
	break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 14px; width: 100%;
}
@media (min-width: 640px) { .dz-g-masonry .dz-gcell { margin-bottom: 16px; } }
.dz-g-masonry .dz-gcell img { width: 100%; height: auto; }
.dz-g-masonry .dz-gcell:hover img { transform: scale(1.03); }

/* Lightbox */
.dz-lb { position: fixed; inset: 0; z-index: 9999; background: rgba(30,34,53,.94); display: none; align-items: center; justify-content: center; padding: 24px; }
.dz-lb.is-open { display: flex; }
.dz-lb img { max-width: 100%; max-height: 88vh; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.5); background: #fff; }
.dz-lb-x, .dz-lb-nav {
	position: absolute; background: rgba(255,255,255,.1); border: 0; color: #fff; cursor: pointer;
	width: 44px; height: 44px; border-radius: 50%; font-size: 20px; line-height: 1;
	display: flex; align-items: center; justify-content: center; transition: background .15s ease;
}
.dz-lb-x:hover, .dz-lb-nav:hover { background: var(--teal); }
.dz-lb-x { top: 20px; right: 20px; }
.dz-lb-nav.prev { left: 20px; top: 50%; transform: translateY(-50%); }
.dz-lb-nav.next { right: 20px; top: 50%; transform: translateY(-50%); }
.dz-lb-count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.6); font-family: var(--font-body); font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
	.dz-gcell img { transition: none; }
	.dz-gcell:hover img { transform: none; }
}
}

/* Budget bands swap with the chosen service; only one set is ever visible.
   Needs an explicit rule because .dz-pillrow sets display, which outranks the
   user-agent [hidden] rule — the same trap the wizard's Continue button hit. */
.dz-budget-set[hidden] { display: none; }

/* ============================================================
   FAQ (homepage)
   ============================================================ */
.dz-faqs { max-width: 860px; margin: 0 auto; }
.dz-faq { border-bottom: 1px solid var(--border); }
.dz-faq summary {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: 22px 0; cursor: pointer; list-style: none;
}
.dz-faq summary::-webkit-details-marker { display: none; }
.dz-faq summary h3 {
	font-family: var(--font-heading); font-size: clamp(15px, 2vw, 17px); font-weight: 600;
	color: var(--navy-dark); margin: 0; transition: color .15s ease;
}
.dz-faq summary:hover h3 { color: var(--teal-dark); }
/* Plus/minus drawn in CSS so there is no icon font or SVG to load. */
.dz-faq summary span {
	position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%;
	border: 1px solid var(--border); transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.dz-faq summary span::before, .dz-faq summary span::after {
	content: ""; position: absolute; inset: 50% 4px auto 4px; height: 1.5px;
	background: var(--navy); transform: translateY(-50%); transition: opacity .2s ease, background .2s ease;
}
.dz-faq summary span::after { transform: translateY(-50%) rotate(90deg); }
.dz-faq[open] summary span { background: var(--teal); border-color: var(--teal); transform: rotate(180deg); }
.dz-faq[open] summary span::before, .dz-faq[open] summary span::after { background: #fff; }
.dz-faq[open] summary span::after { opacity: 0; }
.dz-faq-a { padding: 0 44px 24px 0; }
.dz-faq-a p { color: var(--grey-mid); font-size: 15px; line-height: 1.75; margin: 0; }
@media (prefers-reduced-motion: reduce) { .dz-faq summary span { transition: none; } }