/* ============================================================
   DESIMENT — Component Stylesheet
   Loaded after tokens.css. Utilities first, then one section-
   commented block per component, in roughly page order.
   NOTE: the source dsmt-global.css defined .dsmt-cta-panel-block
   (and its .dsmt-cta-left/.dsmt-cta-eyebrow/.dsmt-cta-status
   children) twice — an early version and a refined one later in
   the cascade that won on every shared property. This file keeps
   only the refined version (the "SHARED COMPONENTS" block at the
   end). Verified against every page's markup before dropping the
   earlier copy: pages use `.dsmt-cta-eyebrow .dsmt-spark`, which
   only the refined block defines — the early block's standalone
   `.dsmt-cta-spark` was unreferenced dead CSS.
============================================================ */

/* ── ANIMATIONS ── */
@keyframes blink      { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes lineComet  { 0%{background-position:-50% 0} 100%{background-position:150% 0} }
@keyframes dsmt-blink { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* ── CONTAINER ── */
.dsmt-wrap        { max-width: var(--dsmt-max); margin: 0 auto; padding: 0 var(--dsmt-gutter); }
.dsmt-section     { padding: var(--dsmt-section-y) var(--dsmt-gutter); }
.dsmt-section-sm  { padding: clamp(40px, 5vw, 72px) var(--dsmt-gutter); }
.dsmt-section-alt { background: var(--dsmt-bg-2); }
.dsmt-section-dark   { background: var(--dsmt-dark); }
.dsmt-section-dark-2 { background: var(--dsmt-dark-2); }

/* ── TYPOGRAPHY ── */
.dsmt-eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dsmt-blue); display: block; margin-bottom: 12px;
}
/* All headings: prevent single-word overflow on any viewport */
.dsmt-root h1, .dsmt-root h2, .dsmt-root h3, .dsmt-root h4 {
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}
.dsmt-display { font-family: var(--dsmt-font-head); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; overflow-wrap: break-word; word-break: break-word; }
.dsmt-display span, .dsmt-display em { color: var(--dsmt-blue); font-style: normal; }
.dsmt-display-lg  { font-size: clamp(2.4rem, 5.5vw, 5rem); }
.dsmt-display-md  { font-size: clamp(1.8rem, 3.5vw, 3.2rem); }
.dsmt-display-sm  { font-size: clamp(1.4rem, 2.5vw, 2.2rem); }
.dsmt-display-dark { color: #fff; }
.dsmt-display-dark span, .dsmt-display-dark em { color: var(--dsmt-blue); }
.dsmt-lede      { font-size: clamp(0.975rem, 1.2vw, 1.15rem); color: var(--dsmt-ink-2); line-height: 1.72; max-width: 60ch; text-wrap: pretty; }
.dsmt-lede-dark { color: rgba(255,255,255,0.55); }
.dsmt-mono      { font-family: var(--dsmt-font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--dsmt-ink-3); }
.dsmt-mono-blue { color: var(--dsmt-blue); }

/* ── STATUS BAR ── */
.dsmt-status-bar {
  position: sticky; top: 0; z-index: 60;
  background: var(--dsmt-dark); border-bottom: 1px solid var(--dsmt-dark-line);
  padding: 7px var(--dsmt-gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-family: var(--dsmt-font-mono); font-size: 10.5px;
  letter-spacing: 0.07em; color: rgba(255,255,255,0.4);
}
.dsmt-status-bar .dsmt-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--dsmt-green);
  display: inline-block; margin-right: 8px;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.2);
  animation: blink 2s ease-in-out infinite;
}
@media (max-width:700px) { .dsmt-status-mid { display:none; } }

/* ── NAV ── */
.dsmt-nav {
  position: sticky; top: 0; z-index: 55;
  background: rgba(255,255,255,0.92); backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--dsmt-line);
}
.dsmt-nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 60px; max-width: var(--dsmt-max); margin: 0 auto;
  padding: 0 var(--dsmt-gutter); gap: 24px;
}
.dsmt-nav-brand {
  font-family: var(--dsmt-font-head); font-weight: 700; font-size: 1.2rem;
  letter-spacing: -0.04em; color: var(--dsmt-ink); display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.dsmt-nav-brand-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dsmt-blue); }
.dsmt-nav-links { display: flex; align-items: center; gap: 2px; list-style: none; }
.dsmt-nav-links > li { position: relative; }
.dsmt-nav-links a, .dsmt-nav-links button {
  padding: 7px 13px; border-radius: var(--dsmt-radius);
  font-family: var(--dsmt-font-body); font-size: 0.875rem; font-weight: 500;
  color: var(--dsmt-ink-2); transition: background 130ms, color 130ms;
  background: none; border: none; cursor: pointer; display: flex; align-items: center; gap: 4px;
}
.dsmt-nav-links a:hover, .dsmt-nav-links button:hover { background: var(--dsmt-bg-2); color: var(--dsmt-ink); }
.dsmt-nav-links a.dsmt-active, .dsmt-nav-links button.dsmt-active,
.dsmt-nav-links a.dsmt-active-parent, .dsmt-nav-links button.dsmt-active-parent { color: var(--dsmt-blue); background: var(--dsmt-blue-dim); }
.dsmt-nav-dropdown {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: #fff; border: 1px solid var(--dsmt-line);
  border-radius: var(--dsmt-radius-lg); padding: 8px;
  min-width: 180px; box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 180ms var(--dsmt-ease), transform 180ms var(--dsmt-ease), visibility 180ms;
  z-index: 10;
  /* Each item is its own <div class="menu-item-{ID}"> (not <li> — this
     container is a <div>, not a <ul>/<ol>, and a bare <li> in there gets
     silently mangled by the browser's HTML parser) holding an <a> and,
     for an item with Advanced Menu Custom Content, a sibling
     .entry-content — without a flex column + gap here they touch
     edge-to-edge with only their own padding between them. */
  display: flex; flex-direction: column; gap: 4px;
}
.dsmt-nav-links > li:hover .dsmt-nav-dropdown,
.dsmt-nav-links > li:focus-within .dsmt-nav-dropdown { opacity: 1; visibility: visible; transform: none; }
.dsmt-nav-dropdown a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-radius: 8px; font-size: 0.875rem;
  color: var(--dsmt-ink); background: none; font-weight: 500; transition: background 130ms;
}
.dsmt-nav-dropdown a:hover { background: var(--dsmt-bg-2); }
/* Dropdown items must never show a persistent "current page" state — only
   :hover. Blocksy's Advanced Menu extension runs its own current-URL
   matching independent of DSMT_Nav_Walker (via the walker_nav_menu_start_el
   filter in class-dsmt-nav-walker.php) and will highlight a dropdown item
   whenever its link happens to match the page currently being viewed —
   e.g. an item whose URL is accidentally "/" lights up only on the
   homepage. Force the neutral look regardless of any class/inline style
   that adds, so a wrong link only breaks navigation, not the visuals too —
   the link itself still needs fixing in Appearance → Menus. */
.dsmt-nav-dropdown a { background: none !important; color: var(--dsmt-ink) !important; }
.dsmt-nav-dropdown a:hover { background: var(--dsmt-bg-2) !important; }
/* Advanced Menu's per-item "Custom Content" (Content Type: Custom Text)
   renders as a sibling .entry-content right after that item's <a> —
   styled as a small muted subtitle line rather than full content-block
   type sizing. */
.dsmt-nav-dropdown .entry-content {
  margin-top: -2px; padding: 0 14px 6px; font-size: 0.75rem;
  line-height: 1.4; color: var(--dsmt-ink-3);
}
/* Advanced Menu's "Badge Settings" (Text + Vertical Alignment) renders a
   <span class="ct-menu-badge"> right after the item title. Advanced Menu
   itself only ships the "Vertical Alignment" offset as a CSS variable
   (--margin-top, scoped to .menu-item-{ID}) — the badge's own look is set
   here to match the existing .dsmt-dd-tag pill style used for the native
   "Description" badge, so both badge sources read as one system. */
.ct-menu-badge {
  display: inline-flex; align-items: center; margin-left: 6px;
  margin-top: var(--margin-top, 0px);
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--dsmt-blue);
  background: var(--dsmt-blue-dim); padding: 2px 7px; border-radius: 100px;
}
.dsmt-nav-dropdown .entry-content p { margin: 0; }
.dsmt-nav-dropdown .dsmt-dd-tag {
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--dsmt-blue);
  background: var(--dsmt-blue-dim); padding: 2px 7px; border-radius: 100px;
}
.dsmt-nav-chevron { font-size: 0.65rem; opacity: 0.5; transition: transform 180ms; }
.dsmt-nav-links > li:hover .dsmt-nav-chevron { transform: rotate(180deg); }
.dsmt-nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.dsmt-nav-cta {
  background: var(--dsmt-blue); color: #fff !important; border: none;
  padding: 9px 20px; border-radius: var(--dsmt-radius);
  font-family: var(--dsmt-font-body); font-size: 0.875rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; display: inline-block;
  transition: opacity 0.15s, transform 0.15s;
}
.dsmt-nav-cta:hover { opacity: 0.88; transform: translateY(-1px); }
@media (max-width: 900px) { .dsmt-nav-links { display: none; } }

/* ── MOBILE NAV HAMBURGER ── */
.dsmt-nav-ham {
  display: none; flex-direction: column; justify-content: center;
  gap: 5px; background: none; border: none; padding: 8px; cursor: pointer;
  border-radius: var(--dsmt-radius); transition: background 0.15s; width: 40px; height: 40px;
}
.dsmt-nav-ham:hover { background: var(--dsmt-bg-2); }
.dsmt-nav-ham span {
  display: block; width: 20px; height: 2px; background: var(--dsmt-ink);
  border-radius: 2px; transition: transform 0.28s var(--dsmt-ease), opacity 0.2s; transform-origin: center;
}
.dsmt-nav-ham.dsmt-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dsmt-nav-ham.dsmt-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.dsmt-nav-ham.dsmt-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) { .dsmt-nav-ham { display: flex; } }

/* Mobile drawer */
.dsmt-nav-mobile { position: fixed; inset: 0; z-index: 300; pointer-events: none; overflow: hidden; }
.dsmt-nav-mobile-overlay {
  position: absolute; inset: 0; background: rgba(0,0,0,0.45); opacity: 0;
  transition: opacity 0.28s; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.dsmt-nav-mobile-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 90vw);
  background: var(--dsmt-bg); box-shadow: -8px 0 40px rgba(0,0,0,0.14);
  transform: translateX(100%); transition: transform 0.3s var(--dsmt-ease);
  overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column;
}
.dsmt-nav-mobile.dsmt-open { pointer-events: all; }
.dsmt-nav-mobile.dsmt-open .dsmt-nav-mobile-overlay { opacity: 1; }
.dsmt-nav-mobile.dsmt-open .dsmt-nav-mobile-panel { transform: none; }
.dsmt-nav-mob-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--dsmt-line); flex-shrink: 0;
}
.dsmt-nav-mob-brand {
  font-family: var(--dsmt-font-head); font-weight: 700; font-size: 1.1rem;
  letter-spacing: -0.04em; color: var(--dsmt-ink); display: flex; align-items: center; gap: 7px;
}
.dsmt-nav-mob-brand .dsmt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dsmt-blue); }
.dsmt-nav-mob-close {
  background: none; border: none; cursor: pointer; padding: 8px; border-radius: var(--dsmt-radius);
  color: var(--dsmt-ink-2); font-size: 1.1rem; line-height: 1;
  transition: background 0.15s, color 0.15s;
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px;
}
.dsmt-nav-mob-close:hover { background: var(--dsmt-bg-2); color: var(--dsmt-ink); }
.dsmt-nav-mob-links { padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.dsmt-nav-mob-links a,
.dsmt-nav-mob-links .dsmt-mob-link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px; border-radius: var(--dsmt-radius); font-size: 0.975rem; font-weight: 500;
  color: var(--dsmt-ink-2); text-decoration: none; transition: background 0.15s, color 0.15s;
}
.dsmt-nav-mob-links a:hover { background: var(--dsmt-bg-2); color: var(--dsmt-ink); }
.dsmt-nav-mob-links a.dsmt-active { color: var(--dsmt-blue); background: var(--dsmt-blue-dim); }
.dsmt-nav-mob-links .dsmt-mob-section {
  font-family: var(--dsmt-font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--dsmt-ink-3); padding: 16px 14px 6px; pointer-events: none;
}
.dsmt-nav-mob-links .dsmt-mob-arr { font-size: 0.75rem; opacity: 0.4; }
.dsmt-nav-mob-footer { padding: 14px 16px 24px; border-top: 1px solid var(--dsmt-line); flex-shrink: 0; }
.dsmt-nav-mob-footer .dsmt-btn { width: 100%; justify-content: center; }

/* ── BUTTONS ── */
.dsmt-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--dsmt-radius);
  font-family: var(--dsmt-font-body); font-size: 0.925rem; font-weight: 600;
  cursor: pointer; border: none; transition: all 0.15s; text-decoration: none;
}
.dsmt-btn-primary { background: var(--dsmt-blue); color: #fff !important; }
.dsmt-btn-primary:hover { opacity: 0.88; transform: translateY(-1px); }
.dsmt-btn-outline { background: transparent; color: var(--dsmt-ink) !important; border: 1.5px solid var(--dsmt-line-2); }
.dsmt-btn-outline:hover { border-color: var(--dsmt-blue); color: var(--dsmt-blue) !important; background: var(--dsmt-blue-dim); }
.dsmt-btn-outline-dark { background: transparent; color: #fff !important; border: 1.5px solid var(--dsmt-dark-line2); }
.dsmt-btn-outline-dark:hover { background: rgba(255,255,255,0.07); }
.dsmt-btn-ghost { background: transparent; color: var(--dsmt-ink-2) !important; }
.dsmt-btn-ghost:hover { color: var(--dsmt-ink) !important; background: var(--dsmt-bg-2); }
.dsmt-btn-arrow { display: inline-flex; align-items: center; gap: 6px; font-size: 0.875rem; font-weight: 600; transition: gap 0.15s; }
.dsmt-root a.dsmt-btn-arrow { color: var(--dsmt-blue); }
.dsmt-btn-arrow:hover { gap: 10px; }
.dsmt-btn-sm { padding: 8px 16px; font-size: 0.825rem; }

/* ── SERVICE DETAIL HERO ── */
.dsmt-svc-detail-hero { background: var(--dsmt-dark); padding: clamp(80px,10vw,140px) var(--dsmt-gutter) clamp(60px,7vw,100px); position: relative; overflow: hidden; }
.dsmt-svc-detail-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.022) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,0.022) 1px,transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 20%, transparent 100%); }
.dsmt-svc-detail-inner { max-width: var(--dsmt-max); margin: 0 auto; position: relative; z-index: 1; }
.dsmt-svc-detail-meta { display: flex; justify-content: space-between; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--dsmt-dark-line); font-family: var(--dsmt-font-mono); font-size: 10.5px; letter-spacing: 0.07em; color: rgba(255,255,255,0.3); margin-bottom: clamp(48px,6vw,80px); flex-wrap: wrap; gap: 8px; position: relative; }
.dsmt-svc-detail-meta .dsmt-blue { color: rgba(45,110,245,0.75); }
.dsmt-svc-detail-hero h1 { font-family: var(--dsmt-font-head); font-weight: 800; font-size: clamp(3rem,8vw,7rem); line-height: 0.95; letter-spacing: -0.05em; color: #fff; margin-bottom: 0; }
.dsmt-svc-detail-hero h1 span { color: var(--dsmt-blue); }
.dsmt-svc-detail-foot { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px,4vw,56px); align-items: end; padding-top: clamp(28px,3.5vw,48px); border-top: 1px solid var(--dsmt-dark-line); margin-top: clamp(32px,4vw,56px); position: relative; }
@media(max-width:720px){ .dsmt-svc-detail-foot { grid-template-columns: 1fr; } }

/* ── FEATURE GRID (service pages) ── */
.dsmt-feat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--dsmt-line); border: 1px solid var(--dsmt-line); border-radius: var(--dsmt-radius-xl); overflow: hidden; }
@media(max-width:820px){ .dsmt-feat-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:480px){ .dsmt-feat-grid { grid-template-columns: 1fr; } }
.dsmt-feat-cell { background: var(--dsmt-bg); padding: 28px 28px 32px; transition: background 0.15s; }
.dsmt-feat-cell:hover { background: var(--dsmt-bg-2); }
.dsmt-feat-icon { width: 44px; height: 44px; border-radius: var(--dsmt-radius); background: var(--dsmt-blue-dim); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; color: var(--dsmt-blue); }
.dsmt-feat-icon svg { width: 20px; height: 20px; }
.dsmt-feat-title { font-family: var(--dsmt-font-head); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--dsmt-ink); margin-bottom: 8px; }
.dsmt-feat-desc { font-size: 0.85rem; color: var(--dsmt-ink-2); line-height: 1.65; }

/* ── STATS BAR (service pages) ── */
.dsmt-stats-bar { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--dsmt-line); border: 1px solid var(--dsmt-line); border-radius: var(--dsmt-radius-xl); overflow: hidden; }
@media(max-width:640px){ .dsmt-stats-bar { grid-template-columns: 1fr 1fr; } }
.dsmt-stat-cell { background: var(--dsmt-bg); padding: 28px 24px; text-align: center; }
.dsmt-stat-val { font-family: var(--dsmt-font-head); font-weight: 800; font-size: clamp(2rem,4vw,3rem); letter-spacing: -0.05em; color: var(--dsmt-ink); line-height: 1; }
.dsmt-stat-val span { color: var(--dsmt-blue); }
.dsmt-stat-label { font-family: var(--dsmt-font-mono); font-size: 0.67rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dsmt-ink-3); margin-top: 4px; }

/* ── PROCESS STEPS (service pages) ── */
.dsmt-steps { display: grid; gap: 1px; background: var(--dsmt-line); border: 1px solid var(--dsmt-line); border-radius: var(--dsmt-radius-xl); overflow: hidden; }
.dsmt-step { background: var(--dsmt-bg); padding: 32px 36px; display: grid; grid-template-columns: 72px 1fr; gap: 24px; align-items: start; transition: background 0.15s; }
.dsmt-step:nth-child(even) { background: var(--dsmt-bg-2); }
.dsmt-step:hover { background: var(--dsmt-bg-3); }
.dsmt-step-num { font-family: var(--dsmt-font-mono); font-size: 0.72rem; color: var(--dsmt-blue); letter-spacing: 0.1em; padding-top: 4px; }
.dsmt-step-body h3 { font-family: var(--dsmt-font-head); font-weight: 700; font-size: 1.1rem; letter-spacing: -0.025em; color: var(--dsmt-ink); margin-bottom: 8px; }
.dsmt-step-body p { font-size: 0.9rem; color: var(--dsmt-ink-2); line-height: 1.7; margin: 0; }
@media(max-width:520px){ .dsmt-step { grid-template-columns: 1fr; gap: 8px; padding: 24px 20px; } }

/* ── SERVICE BLOCK ROWS (svcb) ── */
.dsmt-svcb-list { display: grid; }
.dsmt-svcb-row { padding: clamp(36px,4.5vw,60px) 0; border-top: 1px solid var(--dsmt-line); }
.dsmt-svcb-row:first-child { border-top: none; padding-top: 0; }
/* The section wrapping this list (services detail pages' "What We Do")
   already gets clamp(36,4.5vw,60) bottom padding from the last row above,
   so its own --dsmt-section-y bottom padding just stacks on top of that
   and, against the very same background as the section right after it
   (FAQ), reads as a huge unexplained gap. Drop it so only one section's
   worth of spacing (plus the row's own breathing room) separates the
   last service item from the next section. */
.dsmt-section:has(.dsmt-svcb-list) { padding-bottom: 0; }
.dsmt-svcb-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: clamp(24px,3vw,36px); }
.dsmt-svcb-title { font-family: var(--dsmt-font-head); font-weight: 700; font-size: clamp(1.6rem,3.2vw,2.5rem); letter-spacing: -0.035em; color: var(--dsmt-ink); line-height: 1.02; }
.dsmt-svcb-num { font-family: var(--dsmt-font-mono); font-weight: 500; font-size: 0.9rem; letter-spacing: 0.08em; color: var(--dsmt-blue); white-space: nowrap; }
.dsmt-svcb-body { display: grid; grid-template-columns: 0.9fr 1.1fr 0.95fr; gap: clamp(24px,3.5vw,52px); align-items: start; }
@media(max-width:860px){ .dsmt-svcb-body { grid-template-columns: 1fr; gap: clamp(20px,4vw,32px); } .dsmt-svcb-media { max-width: 320px; } }
.dsmt-svcb-media { aspect-ratio: 4/3; min-height: 150px; border-radius: var(--dsmt-radius-lg); background: var(--dsmt-bg-2); border: 1px solid var(--dsmt-line); box-sizing: border-box; }
/* Real service illustrations (transparent SVGs) sit centered and padded
   on the same card background/border the placeholder uses, rather than
   stretching/cropping edge-to-edge — a photo would use object-fit:cover,
   but these flat illustrations are drawn to be seen whole. */
.dsmt-svcb-media-img { display: flex; align-items: center; justify-content: center; padding: clamp(20px,4vw,36px); }
.dsmt-svcb-media-img img { width: 100%; height: 100%; object-fit: contain; }
.dsmt-svcb-desc { font-size: 0.95rem; color: var(--dsmt-ink-2); line-height: 1.72; text-wrap: pretty; padding-top: 2px; }
.dsmt-svcb-desc strong { color: var(--dsmt-ink); font-weight: 600; }
.dsmt-svcb-checks { list-style: none; padding: 0; margin: 0; display: grid; }
.dsmt-svcb-checks li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--dsmt-line); font-size: 0.875rem; font-weight: 500; color: var(--dsmt-ink); line-height: 1.4; }
.dsmt-svcb-checks li:first-child { padding-top: 0; }
.dsmt-svcb-checks li:last-child { border-bottom: none; }
.dsmt-svcb-check { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--dsmt-blue-dim); color: var(--dsmt-blue); display: flex; align-items: center; justify-content: center; }
.dsmt-svcb-check svg { width: 13px; height: 13px; stroke-width: 3; display: block; }

/* ── BREADCRUMB ── */
.dsmt-breadcrumb {
  display: flex; align-items: center; gap: 8px; font-family: var(--dsmt-font-mono); font-size: 0.67rem; letter-spacing: 0.06em; color: var(--dsmt-ink-3);
  padding: 18px max(var(--dsmt-gutter), calc((100% - var(--dsmt-max)) / 2 + var(--dsmt-gutter)));
  border-bottom: 1px solid var(--dsmt-line);
}
.dsmt-breadcrumb a { color: var(--dsmt-ink-3); transition: color 0.15s; }
.dsmt-breadcrumb a:hover { color: var(--dsmt-blue); }
.dsmt-sep { opacity: 0.4; }

/* ── PLACEHOLDER ── */
.dsmt-placeholder {
  position: relative; background: var(--dsmt-bg-2); border: 1px solid var(--dsmt-line);
  border-radius: var(--dsmt-radius-lg); overflow: hidden; color: var(--dsmt-ink-3);
}
.dsmt-placeholder::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, transparent 0 20px, rgba(0,0,0,0.018) 20px 21px);
}
.dsmt-placeholder .dsmt-ph-label {
  position: absolute; top: 14px; left: 14px;
  font-family: var(--dsmt-font-mono); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--dsmt-ink-3); padding: 4px 8px;
  background: var(--dsmt-bg); border: 1px solid var(--dsmt-line); border-radius: 4px;
}
.dsmt-placeholder .dsmt-ph-coord {
  position: absolute; bottom: 14px; right: 14px;
  font-family: var(--dsmt-font-mono); font-size: 9.5px; color: var(--dsmt-line-2); letter-spacing: 0.05em;
}

/* ── PILLS / CHIPS ── */
.dsmt-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border: 1px solid var(--dsmt-line-2); border-radius: 100px;
  font-size: 0.75rem; font-weight: 500; color: var(--dsmt-ink-3);
}
.dsmt-pill-blue  { color: var(--dsmt-blue); border-color: rgba(45,110,245,0.3); background: var(--dsmt-blue-dim); }
.dsmt-pill-live  { color: var(--dsmt-green); border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.07); }
.dsmt-pill-live::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--dsmt-green); }
.dsmt-pill-dark  { color: rgba(255,255,255,0.5); border-color: var(--dsmt-dark-line2); }
.dsmt-chip {
  padding: 7px 14px; border: 1px solid var(--dsmt-line);
  font-size: 0.8rem; font-weight: 500; color: var(--dsmt-ink-2);
  background: var(--dsmt-bg); border-radius: 100px; cursor: pointer; transition: all 0.15s;
}
.dsmt-chip:hover { border-color: var(--dsmt-blue); color: var(--dsmt-blue); }
.dsmt-chip.dsmt-on { background: var(--dsmt-ink); color: #fff; border-color: var(--dsmt-ink); }
.dsmt-chip-count { font-size: 0.7rem; opacity: 0.5; margin-left: 4px; }

/* ── SECTION HEADER ── */
.dsmt-sec-hd { margin-bottom: clamp(36px, 4vw, 56px); }
.dsmt-sec-hd-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; }
.dsmt-sec-count { font-family: var(--dsmt-font-mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--dsmt-ink-3); white-space: nowrap; }

/* ── CARDS ── */
.dsmt-card {
  background: var(--dsmt-bg); border: 1px solid var(--dsmt-line);
  border-radius: var(--dsmt-radius-lg); overflow: hidden; transition: box-shadow 0.2s, transform 0.2s;
}
.dsmt-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.07); transform: translateY(-2px); }
.dsmt-card-dark {
  background: var(--dsmt-dark-2); border: 1px solid var(--dsmt-dark-line);
  border-radius: var(--dsmt-radius-xl); transition: border-color 0.2s;
}
.dsmt-card-dark:hover { border-color: rgba(45,110,245,0.4); }

/* ── PAGE HERO ── */
.dsmt-hero-line-anim {
  position: absolute; left: 0; width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(45,110,245,0.2) 30%, var(--dsmt-blue) 80%, #a3c2ff 100%);
  background-size: 30% 100%; background-repeat: no-repeat;
  animation: lineComet 5s linear infinite; pointer-events: none; z-index: 2;
}
.dsmt-page-hero {
  background: var(--dsmt-dark); padding: var(--dsmt-section-y) var(--dsmt-gutter) clamp(48px, 6vw, 80px);
  position: relative; overflow: hidden;
}
.dsmt-page-hero-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, black 20%, transparent 100%);
}
.dsmt-page-hero-inner { max-width: var(--dsmt-max); margin: 0 auto; position: relative; z-index: 1; }
.dsmt-page-hero-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px;
  font-family: var(--dsmt-font-mono); font-size: 10.5px; letter-spacing: 0.07em;
  color: rgba(255,255,255,0.35); margin-bottom: clamp(32px, 4vw, 56px);
  flex-wrap: wrap; gap: 8px; position: relative;
}
.dsmt-page-hero-meta .dsmt-blue { color: rgba(45,110,245,0.8); }
.dsmt-page-hero h1 {
  font-family: var(--dsmt-font-head); font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 6.5rem);
  line-height: 0.95; letter-spacing: -0.045em;
  color: #fff; margin-bottom: 20px; max-width: 16ch;
}
.dsmt-page-hero h1 span { color: var(--dsmt-blue); }
.dsmt-page-hero .dsmt-lede-dark { margin-bottom: 0; max-width: 58ch; }
.dsmt-page-hero-bottom {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(24px, 4vw, 56px);
  align-items: end; padding-top: clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--dsmt-dark-line); margin-top: clamp(28px, 3vw, 44px); position: relative;
}
@media (max-width: 720px) { .dsmt-page-hero-bottom { grid-template-columns: 1fr; } }

/* ── DIVIDER ── */
.dsmt-divider { border: none; border-top: 1px solid var(--dsmt-line); }
.dsmt-divider-dark { border-top-color: var(--dsmt-dark-line); }

/* ── GRID PATTERNS ── */
.dsmt-grid-border {
  display: grid; gap: 1px; background: var(--dsmt-line);
  border: 1px solid var(--dsmt-line); border-radius: var(--dsmt-radius-xl); overflow: hidden;
}
.dsmt-grid-border-dark {
  display: grid; gap: 1px; background: var(--dsmt-dark-line);
  border: 1px solid var(--dsmt-dark-line); border-radius: var(--dsmt-radius-xl); overflow: hidden;
}
.dsmt-grid-cell { background: var(--dsmt-bg); transition: background 0.15s; }
.dsmt-grid-cell:hover { background: var(--dsmt-bg-2); }
.dsmt-grid-cell-dark { background: var(--dsmt-dark-2); transition: background 0.15s; }
.dsmt-grid-cell-dark:hover { background: var(--dsmt-dark-3); }

/* ── CTA BLOCK ── */
.dsmt-cta-block {
  background: var(--dsmt-dark); border-radius: var(--dsmt-radius-xl);
  padding: clamp(40px, 6vw, 72px) clamp(32px, 5vw, 64px);
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 4vw, 56px); align-items: center;
}
@media (max-width: 820px) { .dsmt-cta-block { grid-template-columns: 1fr; } }
.dsmt-cta-block .dsmt-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.dsmt-cta-block .dsmt-cta-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }

/* ── CTA PANEL BLOCK (dark full-width) ── */
.dsmt-cta-section { padding-bottom: clamp(48px, 6vw, 80px); }

/* ── FAQ ── */
.dsmt-faq-wrap { max-width: 800px; }
.dsmt-faq-item { border-bottom: 1px solid var(--dsmt-line); }
.dsmt-faq-item:first-child { border-top: 1px solid var(--dsmt-line); }
.dsmt-faq-btn {
  width: 100%; background: none; border: none; text-align: left;
  padding: 20px 0; cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: 20px; font-family: var(--dsmt-font-body); font-size: 0.925rem;
  font-weight: 600; color: var(--dsmt-ink); transition: color 0.15s;
}
.dsmt-faq-btn:hover { color: var(--dsmt-blue); }
.dsmt-faq-icon {
  width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--dsmt-line-2);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--dsmt-blue); font-size: 16px; transition: transform 0.22s, background 0.15s, border-color 0.15s;
}
.dsmt-faq-item.dsmt-open .dsmt-faq-icon { transform: rotate(45deg); background: var(--dsmt-blue); border-color: var(--dsmt-blue); color: #fff; }
.dsmt-faq-item.dsmt-open .dsmt-faq-btn { color: var(--dsmt-blue); }
.dsmt-faq-body {
  max-height: 0; overflow: hidden; transition: max-height 0.38s var(--dsmt-ease), padding 0.28s;
  font-size: 0.9rem; color: var(--dsmt-ink-2); line-height: 1.75;
}
.dsmt-faq-item.dsmt-open .dsmt-faq-body { max-height: 700px; padding-bottom: 24px; }
.dsmt-faq-body p { margin-bottom: 10px; }
.dsmt-faq-body p:last-child { margin-bottom: 0; }

/* ── FORMS ── */
.dsmt-field { display: grid; gap: 8px; }
.dsmt-field label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dsmt-ink-3); }
.dsmt-field input, .dsmt-field textarea, .dsmt-field select {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid var(--dsmt-line); background: var(--dsmt-bg); color: var(--dsmt-ink);
  font-family: var(--dsmt-font-body); font-size: 0.925rem; border-radius: var(--dsmt-radius);
  outline: none; transition: border-color 0.15s;
}
.dsmt-field input:focus, .dsmt-field textarea:focus, .dsmt-field select:focus { border-color: var(--dsmt-blue); }
.dsmt-field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }

/* ── FOOTER ── */
.dsmt-footer { background: var(--dsmt-dark); border-top: 1px solid var(--dsmt-dark-line); color: #fff; }

/* Body band (brand + 3 link columns) — actual markup used by template-parts/footer.php */
.dsmt-footer-body {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px; padding: clamp(48px, 6vw, 80px) var(--dsmt-gutter);
  max-width: var(--dsmt-max); margin: 0 auto;
  border-bottom: 1px solid var(--dsmt-dark-line);
}
@media (max-width: 900px) { .dsmt-footer-body { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .dsmt-footer-body { grid-template-columns: 1fr; } }
.dsmt-footer-brand-wrap { display: flex; flex-direction: column; gap: 16px; }
.dsmt-footer-brand { line-height: 1; }
.dsmt-footer-brand img { max-height: 32px; width: auto; }
.dsmt-footer-desc { font-size: 0.85rem; color: rgba(255,255,255,0.4); line-height: 1.65; max-width: 32ch; }
.dsmt-footer-wordmark-block { display: flex; justify-content: center; padding: clamp(24px, 4vw, 48px) var(--dsmt-gutter); max-width: var(--dsmt-max); margin: 0 auto; }
.dsmt-footer-wordmark-img { height: clamp(60px, 9vw, 110px); width: auto; filter: brightness(10); }

/* Upper band */
.dsmt-footer-upper {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px; padding: clamp(48px, 6vw, 80px) var(--dsmt-gutter);
  max-width: var(--dsmt-max); margin: 0 auto;
  border-bottom: 1px solid var(--dsmt-dark-line);
}
@media (max-width: 900px) { .dsmt-footer-upper { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .dsmt-footer-upper { grid-template-columns: 1fr; } }

.dsmt-footer-stay-label {
  font-family: var(--dsmt-font-mono); font-size: 0.67rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.35); margin-bottom: 10px; font-weight: 500;
}
.dsmt-footer-stay-heading {
  font-family: var(--dsmt-font-head); font-weight: 800;
  font-size: clamp(1.5rem, 2.8vw, 2.4rem);
  letter-spacing: -0.04em; line-height: 1.05; color: #fff; margin-bottom: 14px;
}
.dsmt-footer-stay-desc {
  font-size: 0.82rem; color: rgba(255,255,255,0.35);
  line-height: 1.65; max-width: 30ch; margin-bottom: 28px;
}

.dsmt-footer-col h5, .dsmt-footer-heading {
  font-family: var(--dsmt-font-mono); font-size: 0.67rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.3); margin-bottom: 16px; font-weight: 500;
}
.dsmt-footer-col ul { list-style: none; display: grid; gap: 10px; }
.dsmt-footer-col a { font-size: 0.875rem; color: rgba(255,255,255,0.55); transition: color 0.15s; text-decoration: none; }
.dsmt-footer-col a:hover { color: #fff; }
.dsmt-footer-contact-val { font-size: 0.875rem; color: rgba(255,255,255,0.55); line-height: 1.6; }
.dsmt-footer-contact-val a { font-size: 0.875rem; color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.15s; }
.dsmt-footer-contact-val a:hover { color: #fff; }

/* Lower band */
.dsmt-footer-lower {
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(28px, 4vw, 48px) var(--dsmt-gutter) 0;
  max-width: var(--dsmt-max); margin: 0 auto; gap: 32px;
}
@media (max-width: 600px) { .dsmt-footer-lower { flex-direction: column; align-items: flex-start; } }

.dsmt-footer-socials { list-style: none; display: grid; gap: 0; }
.dsmt-footer-social-link {
  display: flex; align-items: center; justify-content: space-between;
  gap: 48px; padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 0.875rem; color: rgba(255,255,255,0.55);
  text-decoration: none; transition: color 0.15s;
  min-width: 200px;
}
.dsmt-footer-social-link:first-child { border-top: 1px solid rgba(255,255,255,0.08); }
.dsmt-footer-social-link:hover { color: #fff; }
.dsmt-footer-social-link:hover .dsmt-footer-social-arr { transform: translateX(3px); }
.dsmt-footer-social-left { display: flex; align-items: center; gap: 10px; }
.dsmt-footer-social-icon { opacity: 0.4; display: flex; align-items: center; }
.dsmt-footer-social-arr { transition: transform 0.15s; font-size: 0.75rem; opacity: 0.4; }

.dsmt-footer-wordmark-wrap { flex-shrink: 0; display: flex; align-items: center; }
.dsmt-footer-wordmark-wrap img { height: clamp(60px, 9vw, 110px); width: auto; opacity: 1; filter: brightness(10); }

/* Bottom bar */
.dsmt-footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px var(--dsmt-gutter); margin-top: clamp(28px, 4vw, 48px);
  border-top: 1px solid var(--dsmt-dark-line);
  max-width: var(--dsmt-max); margin-left: auto; margin-right: auto;
  font-family: var(--dsmt-font-mono); font-size: 0.67rem;
  color: rgba(255,255,255,0.25); letter-spacing: 0.06em; flex-wrap: wrap; gap: 12px;
}
.dsmt-footer-bottom a { color: rgba(255,255,255,0.35); transition: color 0.15s; text-decoration: none; }
.dsmt-footer-bottom a:hover { color: rgba(255,255,255,0.7); }

/* ── REVEAL ── */
.dsmt-reveal { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--dsmt-ease), transform 600ms var(--dsmt-ease); }
.dsmt-reveal.dsmt-in { opacity: 1; transform: none; }

/* ── REVEAL: CASCADE GROUPS ──
   Opt-in via a second class, "dsmt-reveal-group", alongside the existing
   "dsmt-reveal" on a container (main.js's IntersectionObserver already
   toggles .dsmt-in on anything carrying .dsmt-reveal — no JS change
   needed). Where .dsmt-reveal alone fades a container in as one flat
   block, .dsmt-reveal-group keeps the container itself inert and instead
   fades its direct children in one after another — a FAQ list's items,
   a grid of cards, a hero's meta/heading/lede — so the whole unit reads
   as a considered sequence rather than a single snap-in. Capped at 8
   steps; a 9th+ child shares the last step rather than growing unbounded. */
.dsmt-reveal.dsmt-reveal-group { opacity: 1; transform: none; }
.dsmt-reveal-group > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--dsmt-ease), transform 520ms var(--dsmt-ease);
}
.dsmt-reveal-group.dsmt-in > * { opacity: 1; transform: none; }
.dsmt-reveal-group > *:nth-child(1) { transition-delay: 0ms; }
.dsmt-reveal-group > *:nth-child(2) { transition-delay: 70ms; }
.dsmt-reveal-group > *:nth-child(3) { transition-delay: 140ms; }
.dsmt-reveal-group > *:nth-child(4) { transition-delay: 210ms; }
.dsmt-reveal-group > *:nth-child(5) { transition-delay: 280ms; }
.dsmt-reveal-group > *:nth-child(6) { transition-delay: 350ms; }
.dsmt-reveal-group > *:nth-child(7) { transition-delay: 420ms; }
.dsmt-reveal-group > *:nth-child(n+8) { transition-delay: 490ms; }

/* ── REVEAL: HERO ENTRANCE ──
   Every hero on the site shares the same inner shape regardless of its
   outer wrapper's class name (dsmt-hero-*, dsmt-page-hero-*,
   dsmt-svc-detail-*): a meta/kicker row, an <h1>, a lede, sometimes a
   CTA row — each already individually carrying .dsmt-reveal. On load
   they're all in the viewport at once, so without an explicit delay
   they snap in together; these rules give that existing sequence a
   deliberate order (meta, then heading, then lede, then CTA) purely
   through transition-delay — no markup or JS changes required. */
.dsmt-hero-meta.dsmt-reveal,
.dsmt-page-hero-meta.dsmt-reveal,
.dsmt-svc-detail-meta.dsmt-reveal { transition-delay: 40ms; }

.dsmt-hero-inner > h1.dsmt-reveal,
.dsmt-page-hero-inner > h1.dsmt-reveal,
.dsmt-svc-detail-inner > h1.dsmt-reveal { transition-delay: 150ms; }

.dsmt-lede.dsmt-lede-dark.dsmt-reveal { transition-delay: 260ms; }

.dsmt-hero-foot-right.dsmt-reveal,
.dsmt-page-hero-bottom > .dsmt-reveal,
.dsmt-svc-detail-foot > .dsmt-reveal { transition-delay: 360ms; }

/* Project case-study hero (single-dsmt_project.php) has its own shape:
   visual, then title, divider, description, outcomes, CTA row. */
.dsmt-proj-title.dsmt-reveal { transition-delay: 90ms; }
.dsmt-proj-divider.dsmt-reveal { transition-delay: 150ms; }
.dsmt-proj-desc.dsmt-reveal { transition-delay: 210ms; }
.dsmt-proj-outcomes.dsmt-reveal { transition-delay: 270ms; }
.dsmt-proj-cta-row.dsmt-reveal { transition-delay: 330ms; }

/* Blog post hero (single.php). */
.dsmt-post-meta.dsmt-reveal { transition-delay: 40ms; }
.dsmt-post-hero-excerpt.dsmt-reveal { transition-delay: 160ms; }
.dsmt-post-author-row.dsmt-reveal { transition-delay: 260ms; }

/* TravDesk hero (dsmt-td-*) is its own bespoke shape with no .dsmt-reveal
   on it at all today — badge, then h1, then sub, then buttons. */
.dsmt-td-badge.dsmt-reveal { transition-delay: 0ms; }
.dsmt-td-hero-inner > h1.dsmt-reveal { transition-delay: 130ms; }
.dsmt-td-hero-sub.dsmt-reveal { transition-delay: 240ms; }
.dsmt-td-hero-btns.dsmt-reveal { transition-delay: 340ms; }
.dsmt-td-stats.dsmt-reveal { transition-delay: 420ms; }

/* ── REVEAL: STAGGERED GRIDS/LISTS ──
   These already carry their own .dsmt-reveal individually (one per card,
   set by the foreach that renders them) — this only adds the delay step
   between siblings so a row that enters the viewport together ripples in
   left-to-right / top-to-bottom instead of appearing all at once. */
.dsmt-why-card.dsmt-reveal, .dsmt-work-card.dsmt-reveal, .dsmt-testi-card.dsmt-reveal,
.dsmt-phase.dsmt-reveal, .dsmt-wdm-card.dsmt-reveal, .dsmt-svcb-row.dsmt-reveal,
.dsmt-prob-card.dsmt-reveal, .dsmt-case-card.dsmt-reveal, .dsmt-case-row.dsmt-reveal,
.dsmt-arch-row.dsmt-reveal { transition-duration: 520ms; }

.dsmt-why-card.dsmt-reveal:nth-child(1), .dsmt-work-card.dsmt-reveal:nth-child(1), .dsmt-testi-card.dsmt-reveal:nth-child(1),
.dsmt-phase.dsmt-reveal:nth-child(1), .dsmt-wdm-card.dsmt-reveal:nth-child(1), .dsmt-svcb-row.dsmt-reveal:nth-child(1),
.dsmt-prob-card.dsmt-reveal:nth-child(1), .dsmt-case-card.dsmt-reveal:nth-child(1), .dsmt-case-row.dsmt-reveal:nth-child(1),
.dsmt-arch-row.dsmt-reveal:nth-child(1) { transition-delay: 0ms; }

.dsmt-why-card.dsmt-reveal:nth-child(2), .dsmt-work-card.dsmt-reveal:nth-child(2), .dsmt-testi-card.dsmt-reveal:nth-child(2),
.dsmt-phase.dsmt-reveal:nth-child(2), .dsmt-wdm-card.dsmt-reveal:nth-child(2), .dsmt-svcb-row.dsmt-reveal:nth-child(2),
.dsmt-prob-card.dsmt-reveal:nth-child(2), .dsmt-case-card.dsmt-reveal:nth-child(2), .dsmt-case-row.dsmt-reveal:nth-child(2),
.dsmt-arch-row.dsmt-reveal:nth-child(2) { transition-delay: 60ms; }

.dsmt-why-card.dsmt-reveal:nth-child(3), .dsmt-work-card.dsmt-reveal:nth-child(3), .dsmt-testi-card.dsmt-reveal:nth-child(3),
.dsmt-phase.dsmt-reveal:nth-child(3), .dsmt-wdm-card.dsmt-reveal:nth-child(3), .dsmt-svcb-row.dsmt-reveal:nth-child(3),
.dsmt-prob-card.dsmt-reveal:nth-child(3), .dsmt-case-card.dsmt-reveal:nth-child(3), .dsmt-case-row.dsmt-reveal:nth-child(3),
.dsmt-arch-row.dsmt-reveal:nth-child(3) { transition-delay: 120ms; }

.dsmt-why-card.dsmt-reveal:nth-child(4), .dsmt-work-card.dsmt-reveal:nth-child(4), .dsmt-testi-card.dsmt-reveal:nth-child(4),
.dsmt-phase.dsmt-reveal:nth-child(4), .dsmt-wdm-card.dsmt-reveal:nth-child(4), .dsmt-svcb-row.dsmt-reveal:nth-child(4),
.dsmt-prob-card.dsmt-reveal:nth-child(4), .dsmt-case-card.dsmt-reveal:nth-child(4), .dsmt-case-row.dsmt-reveal:nth-child(4),
.dsmt-arch-row.dsmt-reveal:nth-child(4) { transition-delay: 180ms; }

.dsmt-why-card.dsmt-reveal:nth-child(5), .dsmt-work-card.dsmt-reveal:nth-child(5), .dsmt-testi-card.dsmt-reveal:nth-child(5),
.dsmt-phase.dsmt-reveal:nth-child(5), .dsmt-wdm-card.dsmt-reveal:nth-child(5), .dsmt-svcb-row.dsmt-reveal:nth-child(5),
.dsmt-prob-card.dsmt-reveal:nth-child(5), .dsmt-case-card.dsmt-reveal:nth-child(5), .dsmt-case-row.dsmt-reveal:nth-child(5),
.dsmt-arch-row.dsmt-reveal:nth-child(5) { transition-delay: 240ms; }

.dsmt-why-card.dsmt-reveal:nth-child(6), .dsmt-work-card.dsmt-reveal:nth-child(6), .dsmt-testi-card.dsmt-reveal:nth-child(6),
.dsmt-phase.dsmt-reveal:nth-child(6), .dsmt-wdm-card.dsmt-reveal:nth-child(6), .dsmt-svcb-row.dsmt-reveal:nth-child(6),
.dsmt-prob-card.dsmt-reveal:nth-child(6), .dsmt-case-card.dsmt-reveal:nth-child(6), .dsmt-case-row.dsmt-reveal:nth-child(6),
.dsmt-arch-row.dsmt-reveal:nth-child(6) { transition-delay: 300ms; }

.dsmt-why-card.dsmt-reveal:nth-child(n+7), .dsmt-work-card.dsmt-reveal:nth-child(n+7), .dsmt-testi-card.dsmt-reveal:nth-child(n+7),
.dsmt-phase.dsmt-reveal:nth-child(n+7), .dsmt-wdm-card.dsmt-reveal:nth-child(n+7), .dsmt-svcb-row.dsmt-reveal:nth-child(n+7),
.dsmt-prob-card.dsmt-reveal:nth-child(n+7), .dsmt-case-card.dsmt-reveal:nth-child(n+7), .dsmt-case-row.dsmt-reveal:nth-child(n+7),
.dsmt-arch-row.dsmt-reveal:nth-child(n+7) { transition-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .dsmt-reveal, .dsmt-reveal-group > * { opacity: 1; transform: none; transition: none; transition-delay: 0ms; }
  .dsmt-hero-line-anim, .dsmt-status-bar .dsmt-live-dot, .dsmt-cta-live-dot { animation: none; }
}

/* ── PAGE-TO-PAGE TRANSITION ──
   Native View Transitions API: a soft cross-fade between full page loads
   on same-origin navigations. Pure progressive enhancement — browsers
   without support simply ignore this block and navigate exactly as
   before (no JS, no router, no effect on the back button or analytics). */
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 380ms;
  animation-timing-function: cubic-bezier(.2,.7,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ── UTILITIES ── */
.dsmt-text-blue  { color: var(--dsmt-blue); }
.dsmt-text-muted { color: var(--dsmt-ink-3); }
.dsmt-text-dark  { color: rgba(255,255,255,0.5); }
.dsmt-mt-1 { margin-top: 8px; }  .dsmt-mt-2 { margin-top: 16px; } .dsmt-mt-3 { margin-top: 24px; }
.dsmt-mt-4 { margin-top: 32px; } .dsmt-mt-5 { margin-top: 48px; }
.dsmt-mb-3 { margin-bottom: 24px; } .dsmt-mb-4 { margin-bottom: 32px; }

/* ── DOC / LEGAL PAGES ── */
.dsmt-doc-layout { display: grid; grid-template-columns: 220px 1fr; gap: 48px; padding: var(--dsmt-section-y) var(--dsmt-gutter); max-width: var(--dsmt-max); margin: 0 auto; align-items: start; }
@media (max-width: 900px) { .dsmt-doc-layout { grid-template-columns: 1fr; } }
.dsmt-doc-toc { position: sticky; top: 80px; background: var(--dsmt-bg-2); border: 1px solid var(--dsmt-line); border-radius: var(--dsmt-radius-lg); padding: 20px; }
@media (max-width: 900px) { .dsmt-doc-toc { position: static; } }
.dsmt-doc-toc .dsmt-toc-label { font-family: var(--dsmt-font-mono); font-size: 0.67rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dsmt-ink-3); margin-bottom: 14px; }
.dsmt-doc-toc ol { list-style: none; display: grid; gap: 4px; counter-reset: tc; }
.dsmt-doc-toc ol li { counter-increment: tc; }
.dsmt-doc-toc ol li a { display: flex; align-items: center; gap: 10px; font-size: 0.825rem; color: var(--dsmt-ink-2); padding: 7px 10px; border-radius: 8px; transition: all 0.15s; }
.dsmt-doc-toc ol li a::before { content: "§ " counter(tc, decimal-leading-zero); font-family: var(--dsmt-font-mono); font-size: 0.67rem; color: var(--dsmt-blue); min-width: 34px; }
.dsmt-doc-toc ol li a:hover { background: var(--dsmt-bg-3); color: var(--dsmt-ink); }
.dsmt-doc-toc--plain ol li a::before { content: none; }
.dsmt-doc-body h2 { font-family: var(--dsmt-font-head); font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.8rem); letter-spacing: -0.025em; margin: clamp(32px, 4vw, 48px) 0 14px; scroll-margin-top: 120px; color: var(--dsmt-ink); }
.dsmt-doc-body h2:first-child { margin-top: 0; }
.dsmt-doc-body h2 .dsmt-sn { font-family: var(--dsmt-font-mono); font-size: 0.67rem; color: var(--dsmt-blue); letter-spacing: 0.08em; display: block; margin-bottom: 6px; }
.dsmt-doc-body p, .dsmt-doc-body li { font-size: 0.925rem; line-height: 1.78; color: var(--dsmt-ink-2); max-width: 68ch; }
.dsmt-doc-body p { margin-bottom: 14px; }
.dsmt-doc-body ul, .dsmt-doc-body ol { padding-left: 20px; margin-bottom: 14px; }
.dsmt-doc-body strong { color: var(--dsmt-ink); font-weight: 600; }
.dsmt-doc-body a { color: var(--dsmt-blue); }
.dsmt-doc-meta-card { padding: 14px 18px; background: var(--dsmt-bg-2); border: 1px solid var(--dsmt-line); border-radius: var(--dsmt-radius); font-family: var(--dsmt-font-mono); font-size: 0.72rem; color: var(--dsmt-ink-3); letter-spacing: 0.05em; margin-bottom: 32px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; }

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

/* ── TABLET (≤ 900px) ── */
@media (max-width: 900px) {
  .dsmt-nav-links { display: none; }
  .dsmt-page-hero-bottom { grid-template-columns: 1fr; gap: clamp(20px,3vw,32px); }
  .dsmt-hero-foot { grid-template-columns: 1fr; }
  .dsmt-hero-foot-right { justify-items: start; }
  .dsmt-toc-inner > .dsmt-btn { display: none; }
  .dsmt-toc-list { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; }
  .dsmt-toc-list::-webkit-scrollbar { display: none; }
  .dsmt-toc-list a { white-space: nowrap; }
  .dsmt-contact-side { position: static; }
}

/* ── MOBILE-LG (≤ 768px) ── */
@media (max-width: 768px) {
  .dsmt-page-hero-bottom > div:last-child,
  .dsmt-svc-detail-foot > div:last-child,
  .dsmt-hero-foot-right { justify-items: start !important; }
  .dsmt-cta-block .dsmt-cta-actions { flex-direction: column; }
  .dsmt-cta-block .dsmt-cta-actions .dsmt-btn { text-align: center; justify-content: center; }
  .dsmt-footer-bottom { flex-direction: column; gap: 8px; }
  .dsmt-footer-bottom > div { flex-wrap: wrap; justify-content: center; }
  .dsmt-footer-bottom > span { text-align: center; }
  .dsmt-proj-hero { grid-template-columns: 1fr; min-height: auto; }
  .dsmt-proj-visual { border-right: none; border-bottom: 1px solid var(--dsmt-line); }
  .dsmt-proj-info { padding: clamp(28px,5vw,48px) clamp(20px,5vw,40px); }
  .dsmt-proj-title { font-size: clamp(2rem,7vw,3.2rem); }
  .dsmt-next-proj { grid-template-columns: 1fr; }
  .dsmt-next-proj-cell + .dsmt-next-proj-cell { border-left: none; border-top: 1px solid var(--dsmt-line); }
  .dsmt-sec-hd-row { flex-direction: column; align-items: flex-start; }
  .dsmt-callout { grid-template-columns: 1fr; padding: 28px 24px; }
}

/* ── MOBILE (≤ 480px) ── */
@media (max-width: 480px) {
  .dsmt-root { --dsmt-gutter: 18px; }
  .dsmt-nav-cta { padding: 8px 14px; font-size: 0.8rem; }
  .dsmt-btn { padding: 11px 20px; font-size: 0.875rem; }
  .dsmt-btn-sm { padding: 8px 14px; font-size: 0.8rem; }
  .dsmt-proj-breadcrumb, .dsmt-breadcrumb { flex-wrap: wrap; }
  .dsmt-hero-meta, .dsmt-page-hero-meta { flex-direction: column; align-items: flex-start; gap: 4px; }
  .dsmt-page-hero-meta span:not(:first-child) { display: none; }
  .dsmt-proj-cta-row { flex-direction: column; align-items: flex-start; }
  .dsmt-filters-inner { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .dsmt-filters-inner::-webkit-scrollbar { display: none; }
  .dsmt-filters-inner .dsmt-chip { flex-shrink: 0; }
  .dsmt-toc-bar { display: none; }
  .dsmt-svc-meta { flex-direction: column; align-items: flex-start; gap: 10px; }
  .dsmt-svc-meta .dsmt-mono-val { order: 3; }
  .dsmt-proj-gallery { grid-template-columns: 1fr; }
  .dsmt-gallery-item.dsmt-wide { grid-column: span 1; }
  .dsmt-td-stats { min-width: 0 !important; width: 100%; }
  .dsmt-td-top { gap: 24px; }
  .dsmt-footer-upper { gap: 24px; }
  .dsmt-contact-dl { grid-template-columns: 1fr; }
  .dsmt-contact-dl dt { margin-top: 10px; }
  .dsmt-contact-dl dt:first-child { margin-top: 0; }
  .dsmt-callout { padding: 24px 18px; }
  .dsmt-feat-check-grid { grid-template-columns: 1fr; }
  .dsmt-micro-strip { grid-template-columns: 1fr 1fr; }
}

/* ── VERY SMALL (≤ 360px) ── */
@media (max-width: 360px) {
  .dsmt-root { --dsmt-gutter: 14px; }
  .dsmt-micro-strip { grid-template-columns: 1fr; }
  .dsmt-nav-cta { display: none; }
}

/* ── OVERFLOW SAFETY (all viewports) ── */
.dsmt-section, .dsmt-hero, .dsmt-page-hero,
.dsmt-goo, .dsmt-footer, .dsmt-nav { max-width: 100%; width: 100%; }
.dsmt-footer-social-link { min-width: 0; }

/* ── WORDPRESS FULL-BLEED BREAKOUT ── */
/* Bilateral negative-margin technique: works whether the section is inside a
   narrow WP content column OR a full-width body. margin-right pulls the right
   edge out symmetrically so width:auto always resolves to exactly 100vw. */
.dsmt-hero,
.dsmt-goo,
.dsmt-section-dark,
.dsmt-section-dark-2,
.dsmt-svc-section,
.dsmt-tdv2-showcase,
.dsmt-cta-section,
.dsmt-why-strip,
.dsmt-disc-strip,
.dsmt-page-hero,
.dsmt-footer {
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

/* ── SHARED COMPONENTS (moved from page styles) ── */
.dsmt-cta-panel-block {
  position: relative; overflow: hidden; background: var(--dsmt-dark);
  border: 1px solid var(--dsmt-dark-line2); border-radius: var(--dsmt-radius-xl);
  display: grid; grid-template-columns: 1.25fr 0.9fr; align-items: stretch;
}
@media (max-width: 860px) { .dsmt-cta-panel-block { grid-template-columns: 1fr; } }
.dsmt-cta-panel-block .dsmt-cta-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(120% 120% at 12% 0%, black 10%, transparent 75%);
}
.dsmt-cta-left { position: relative; z-index: 1; padding: clamp(36px, 5vw, 64px); display: flex; flex-direction: column; }
.dsmt-cta-eyebrow {
  display: flex; align-items: center; gap: 9px; font-family: var(--dsmt-font-mono);
  font-size: 0.67rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4);
  padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--dsmt-dark-line); position: relative;
}
.dsmt-cta-eyebrow .dsmt-spark { color: var(--dsmt-blue); font-size: 0.8rem; }
.dsmt-cta-left h2 { margin: 0 0 16px; }
.dsmt-cta-left .dsmt-lede-dark { margin: 0 0 32px; max-width: 42ch; }
.dsmt-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: auto; }
@media (max-width: 480px) {
  .dsmt-cta-actions { flex-direction: column; }
  .dsmt-cta-actions .dsmt-btn { justify-content: center; }
}
.dsmt-cta-status { position: relative; z-index: 1; border-left: 1px solid var(--dsmt-dark-line); display: flex; flex-direction: column; }
@media (max-width: 860px) { .dsmt-cta-status { border-left: none; border-top: 1px solid var(--dsmt-dark-line); } }
.dsmt-cta-status-row {
  flex: 1; padding: clamp(22px, 2.6vw, 30px) clamp(28px, 3vw, 40px);
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  transition: background 0.18s var(--dsmt-ease);
}
.dsmt-cta-status-row + .dsmt-cta-status-row { border-top: 1px solid var(--dsmt-dark-line); }
.dsmt-cta-status-row:hover { background: var(--dsmt-dark-2); }
.dsmt-cta-status-label {
  font-family: var(--dsmt-font-mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.32); display: flex; align-items: center; gap: 8px;
}
.dsmt-cta-status-val { font-family: var(--dsmt-font-head); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; color: #fff; line-height: 1.2; }
.dsmt-cta-status-sub { font-family: var(--dsmt-font-mono); font-size: 0.66rem; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.35); }
.dsmt-cta-live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--dsmt-green);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); animation: dsmt-blink 2s ease-in-out infinite; flex-shrink: 0;
}

/* ── SUPPRESS BLOCKSY'S OWN "BACK TO TOP" BUTTON ── */
/* Not part of the Desiment design — Blocksy renders this independently of
   its header/footer toggles, via a separate Customizer option. Hiding it
   here guarantees it never shows regardless of that setting. */
.ct-back-to-top { display: none !important; }