/* =====================================================
   Service Page styles
   Page-specific additions on top of styles.css.
   Used by: security-dispatching.html (and any future service pages).
   ===================================================== */

/* ---------- Hero variant — slimmer than the home hero ---------- */
.hero-page {
  padding: 150px 0 90px;
  min-height: auto;
}
.hero-page .hero-title {
  font-size: clamp(2.4rem, 5.4vw, 4.0rem);
}
.hero-page .hero-sub {
  margin-top: 18px;
  max-width: 58ch;
}

/* Breadcrumb back-link */
.breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .65);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  margin-bottom: 24px;
  transition:
    color .25s var(--t),
    background .25s var(--t),
    border-color .25s var(--t),
    transform .25s var(--t);
}
.breadcrumb:hover {
  color: var(--accent);
  background: rgba(244, 168, 37, .08);
  border-color: rgba(244, 168, 37, .3);
  transform: translateX(-3px);
}
.breadcrumb svg {
  transition: transform .25s var(--t);
}
.breadcrumb:hover svg {
  transform: translateX(-2px);
}

/* ---------- Overview section ---------- */
.sd-overview {
  padding: 100px 0;
}
.sd-overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.sd-overview-text h2 {
  margin-top: 16px;
  font-size: clamp(2rem, 3.8vw, 2.8rem);
  letter-spacing: -.035em;
}
.sd-lead {
  margin-top: 22px;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 500;
  max-width: 48ch;
}
.sd-overview-text p {
  margin-top: 16px;
  max-width: 48ch;
  line-height: 1.6;
}

.sd-overview-visual {
  position: relative;
}
.sd-img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.sd-img-badge {
  position: absolute;
  bottom: 20px;
  right: 20px;
  padding: 10px 18px;
  background: rgba(11, 29, 65, .92);
  color: var(--accent);
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(244, 168, 37, .25);
}

/* ---------- The 4 Pillars ---------- */
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.pillar {
  position: relative;
  padding: 36px 32px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition:
    transform .45s var(--t),
    border-color .45s var(--t),
    box-shadow .45s var(--t);
  isolation: isolate;
}
.pillar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(244, 168, 37, .04), transparent 60%);
  opacity: 0;
  transition: opacity .45s var(--t);
  pointer-events: none;
  z-index: 0;
}
.pillar:hover {
  transform: translateY(-4px);
  border-color: rgba(244, 168, 37, .35);
  box-shadow: var(--shadow-lg);
}
.pillar:hover::before { opacity: 1; }
.pillar > * { position: relative; z-index: 1; }

.pillar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}
.pillar-num {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .26em;
  color: var(--muted-3);
  transition: color .35s var(--t);
}
.pillar:hover .pillar-num { color: var(--accent); }

.pillar-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-soft);
  color: var(--primary);
  transition: background .35s var(--t), transform .35s var(--t);
}
.pillar:hover .pillar-icon {
  background: var(--accent);
  transform: rotate(-6deg) scale(1.05);
}
.pillar-icon svg { width: 22px; height: 22px; }

.pillar h3 {
  font-size: 1.35rem;
  letter-spacing: -.025em;
  color: var(--primary);
  margin-bottom: 10px;
}
.pillar > p {
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 20px;
  max-width: 42ch;
}

.pillar-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pillar-list li {
  position: relative;
  padding-left: 22px;
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.5;
}
.pillar-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 12px;
  height: 1px;
  background: var(--accent);
  transition: width .3s var(--t);
}
.pillar:hover .pillar-list li::before { width: 16px; }

/* ---------- Operational Capabilities ---------- */
.sd-capabilities {
  padding: 100px 0;
}
.caps-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.cap {
  padding: 30px 26px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: background .35s var(--t);
}
.cap:hover {
  background: linear-gradient(180deg, rgba(244, 168, 37, .04) 0%, transparent 100%);
}
.cap-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 10px;
  transition: transform .3s var(--t), background .3s var(--t);
}
.cap-icon svg { width: 20px; height: 20px; }
.cap:hover .cap-icon {
  transform: scale(1.08);
  background: rgba(244, 168, 37, .2);
}
.cap h4 {
  font-size: 1.02rem;
  color: var(--primary);
  letter-spacing: -.015em;
  font-weight: 700;
}
.cap p {
  font-size: .9rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ---------- Why Strip (dark stats row) ---------- */
.sd-why {
  padding: 90px 0 110px;
}
.why-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-left: 1px solid rgba(255, 255, 255, .08);
}
.why-strip-item {
  padding: 36px 28px;
  border-right: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  text-align: center;
  transition: background .35s var(--t);
}
.why-strip-item:hover {
  background: rgba(244, 168, 37, .04);
}
.why-strip-num {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.why-strip-label {
  margin-top: 10px;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .65);
  font-weight: 700;
}

/* ---------- CTA Section ---------- */
.sd-cta-section {
  padding: 80px 0 120px;
}
.sd-cta {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  padding: 60px 40px;
  background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.sd-cta h2 {
  margin-top: 14px;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
}
.sd-cta p {
  margin: 18px auto 32px;
  max-width: 44ch;
  color: var(--muted);
  text-wrap: balance;
}

/* ===================================================
   Responsive
   =================================================== */

/* Tablet — 960px */
@media (max-width: 960px) {
  .hero-page { padding: 130px 0 70px; }

  .sd-overview-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .sd-img { height: 320px; }

  .pillars-grid { grid-template-columns: 1fr; gap: 20px; }

  .caps-grid { grid-template-columns: repeat(2, 1fr); }

  .why-strip { grid-template-columns: repeat(2, 1fr); }
}

/* Mobile — 640px */
@media (max-width: 640px) {
  .hero-page { padding: 110px 0 56px; }

  .sd-overview { padding: 70px 0; }
  .sd-capabilities { padding: 70px 0; }
  .sd-why { padding: 64px 0 80px; }
  .sd-cta-section { padding: 56px 0 80px; }

  .sd-cta { padding: 40px 24px; }

  .pillar { padding: 28px 22px; }
  .pillar h3 { font-size: 1.2rem; }

  .caps-grid { grid-template-columns: 1fr; }

  .why-strip-num { font-size: 2rem; }
  .why-strip-item { padding: 26px 18px; }
}

/* =====================================================
   v2 additions — Customer Support page exclusive patterns
   ===================================================== */

/* ---------- Channels Ribbon ----------
   Horizontal compact strip of support channels with icon + name + mini-stat.
   Only used on the customer support page. */
.cx-channels-section {
  padding: 70px 0 30px;
}
.cx-channels-head {
  text-align: center;
  margin: 0 auto 44px;
  max-width: 640px;
}
.cx-channels-head h2 {
  margin-top: 14px;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
}

.cx-channels {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.ch {
  text-align: center;
  padding: 26px 16px 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition:
    transform .4s var(--t),
    border-color .4s var(--t),
    background .4s var(--t);
}
.ch:hover {
  transform: translateY(-4px);
  border-color: rgba(244, 168, 37, .45);
  background: linear-gradient(180deg, rgba(244, 168, 37, .04) 0%, var(--bg) 100%);
}
.ch-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--primary);
  transition: background .35s var(--t), transform .35s var(--t);
}
.ch:hover .ch-icon {
  background: var(--accent);
  transform: scale(1.08);
}
.ch-icon svg { width: 20px; height: 20px; }

.ch-name {
  font-weight: 700;
  font-size: .95rem;
  color: var(--primary);
  letter-spacing: -.015em;
}
.ch-meta {
  margin-top: 4px;
  font-size: .72rem;
  color: var(--muted-2);
  font-weight: 500;
  letter-spacing: .02em;
}

/* ---------- Day-in-the-life Rhythm (timeline) ----------
   Vertical timeline of a typical shift's rhythm. Different look from
   the operational capabilities grid used on other pages. */
.cx-rhythm {
  list-style: none;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  position: relative;
}
/* The vertical line down the left */
.cx-rhythm::before {
  content: '';
  position: absolute;
  left: 84px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--line) 8%, var(--line) 92%, transparent 100%);
}

.cx-step {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr;
  align-items: start;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-2);
}
.cx-step:last-child { border-bottom: none; }

.cx-step-time {
  position: relative;
  font-size: .76rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted-2);
  font-weight: 700;
  padding-top: 4px;
  text-align: right;
  padding-right: 22px;
}
/* Dot on the timeline */
.cx-step-time::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 8px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 4px var(--bg);
  transition: transform .35s var(--t), background .35s var(--t);
}
.cx-step:hover .cx-step-time::after {
  background: var(--accent);
  transform: scale(1.15);
}
.cx-step h4 {
  font-size: 1.05rem;
  letter-spacing: -.02em;
  color: var(--primary);
  margin-bottom: 6px;
}
.cx-step p {
  font-size: .92rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 50ch;
}

/* Responsive */
@media (max-width: 960px) {
  .cx-channels { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .cx-channels-section { padding: 50px 0 20px; }
  .cx-channels { grid-template-columns: repeat(2, 1fr); }

  /* Stack the rhythm timeline — drop the line, put time above title */
  .cx-rhythm::before { display: none; }
  .cx-step {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cx-step-time {
    text-align: left;
    padding-right: 0;
  }
  .cx-step-time::after { display: none; }
}

/* =====================================================
   v3 additions — Digital Marketing page exclusive patterns
   ===================================================== */

/* ---------- Channel Mix bars ----------
   Horizontal effort-distribution visual. Bars animate from 0 → target
   width when their .reveal parent gains .in (so they fill on scroll). */
.dm-mix-section {
  padding: 90px 0 100px;
}
.dm-mix-head {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 640px;
}
.dm-mix-head h2 {
  margin-top: 14px;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}
.dm-mix-head p {
  margin: 16px auto 0;
  max-width: 44ch;
  color: var(--muted);
  text-wrap: balance;
}

.dm-mix {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 760px;
  margin: 0 auto;
}
.dm-bar {
  padding: 14px 0;
}
.dm-bar-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.dm-bar-label {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -.015em;
}
.dm-bar-pct {
  font-size: .9rem;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}
.dm-bar-track {
  position: relative;
  height: 8px;
  background: var(--line-2);
  border-radius: 999px;
  overflow: hidden;
}
.dm-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, var(--accent) 0%, #ffcf4a 100%);
  border-radius: inherit;
  transition: width 1.2s cubic-bezier(.22, 1, .36, 1);
}
/* When the reveal triggers, the bar fills to its --pct width */
.dm-bar.reveal.in .dm-bar-fill {
  width: var(--pct);
}
.dm-bar-note {
  margin-top: 10px;
  font-size: .88rem;
  color: var(--muted-2);
  line-height: 1.5;
}

/* ---------- Monthly Output counters ---------- */
.dm-output-section {
  padding: 100px 0;
}
.dm-output {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  max-width: 1000px;
  margin: 0 auto;
}
.dm-out {
  padding: 36px 28px 32px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: left;
  background: var(--bg);
  transition: background .4s var(--t);
}
.dm-out:hover {
  background: linear-gradient(180deg, rgba(244, 168, 37, .05) 0%, var(--bg) 100%);
}
.dm-out-num {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.dm-out-suffix {
  font-size: 1.4rem;
  color: var(--accent);
  font-weight: 700;
}
.dm-out-label {
  margin-top: 12px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--primary);
}
.dm-out-note {
  margin-top: 4px;
  font-size: .8rem;
  color: var(--muted-2);
}

/* Responsive */
@media (max-width: 960px) {
  .dm-output { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .dm-mix-section { padding: 64px 0 70px; }
  .dm-output-section { padding: 70px 0; }
  .dm-bar-label { font-size: .98rem; }
  .dm-out-num { font-size: 2.1rem; }
  .dm-out { padding: 28px 20px 24px; }
}

/* =====================================================
   v4 additions — Remote IT page exclusive patterns
   ===================================================== */

/* ---------- Severity Matrix ----------
   Color-coded SLA ladder rows. Each row is a horizontal layout:
   [P-tag] [name + description] [SLA time on right]. */
.it-severity-section {
  padding: 90px 0 110px;
}
.it-sev-head {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 640px;
}
.it-sev-head h2 {
  margin-top: 14px;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}
.it-sev-head p {
  margin: 16px auto 0;
  max-width: 44ch;
  color: var(--muted);
  text-wrap: balance;
}

.it-sev {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 920px;
  margin: 0 auto;
  padding: 0;
}

.sev {
  display: grid;
  grid-template-columns: 70px 1fr 160px;
  align-items: center;
  gap: 24px;
  padding: 22px 26px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sev-color, var(--muted-3));
  border-radius: var(--radius);
  transition:
    transform .4s var(--t),
    border-color .4s var(--t),
    box-shadow .4s var(--t),
    background .4s var(--t);
}
.sev:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
  background: linear-gradient(90deg, color-mix(in srgb, var(--sev-color) 5%, transparent), transparent 60%);
}

.sev-p1 { --sev-color: #ef4444; }
.sev-p2 { --sev-color: #f97316; }
.sev-p3 { --sev-color: #3b82f6; }
.sev-p4 { --sev-color: #64748b; }

.sev-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 32px;
  border-radius: 6px;
  background: var(--sev-color);
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .08em;
  flex-shrink: 0;
}

.sev-body {
  min-width: 0;
}
.sev-name {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -.02em;
}
.sev-desc {
  margin-top: 4px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--muted);
}

.sev-sla {
  text-align: right;
}
.sev-time {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--sev-color);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.sev-label {
  display: block;
  margin-top: 2px;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted-2);
}

/* ---------- Stack Grid ----------
   Grouped chips for the platforms/tools the team is certified on.
   Different from any other pattern: small labeled groups, pill chips. */
.it-stack-section {
  padding: 110px 0 100px;
}
.it-stack {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 920px;
  margin: 0 auto;
}
.stack-group {
  padding: 24px 24px 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .35s var(--t), box-shadow .35s var(--t);
}
.stack-group:hover {
  border-color: rgba(244, 168, 37, .4);
  box-shadow: var(--shadow-md);
}
.stack-group-label {
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 14px;
}
.stack-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -.005em;
  transition: background .25s var(--t), border-color .25s var(--t), color .25s var(--t), transform .25s var(--t);
  cursor: default;
}
.chip:hover {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 960px) {
  .sev {
    grid-template-columns: 64px 1fr;
    gap: 18px;
  }
  .sev-sla {
    grid-column: 1 / -1;
    text-align: left;
    padding-left: 82px;
    margin-top: -8px;
  }
  .sev-time { display: inline; font-size: 1rem; margin-right: 10px; }
  .sev-label { display: inline; font-size: .65rem; }

  .it-stack { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .it-severity-section { padding: 64px 0 80px; }
  .it-stack-section { padding: 80px 0 70px; }
  .sev { padding: 18px 18px; }
  .sev-name { font-size: 1rem; }
  .stack-group { padding: 20px; }
}

/* =====================================================
   v5 additions — Translators page exclusive patterns
   ===================================================== */

/* ---------- Language Pairs Grid ---------- */
.lp-section {
  padding: 90px 0 100px;
}
.lp-head {
  text-align: center;
  margin: 0 auto 56px;
  max-width: 640px;
}
.lp-head h2 {
  margin-top: 14px;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}
.lp-head p {
  margin: 16px auto 0;
  max-width: 48ch;
  color: var(--muted);
  text-wrap: balance;
}

.lp-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
}
.lp {
  padding: 26px 24px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition:
    transform .4s var(--t),
    border-color .4s var(--t),
    box-shadow .4s var(--t);
  position: relative;
  overflow: hidden;
}
.lp::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), #ffcf4a, var(--accent));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--t);
}
.lp:hover {
  transform: translateY(-4px);
  border-color: rgba(244, 168, 37, .4);
  box-shadow: var(--shadow-md);
}
.lp:hover::before { transform: scaleX(1); }

.lp-pair {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.lp-src {
  color: var(--muted-2);
}
.lp-tgt {
  color: var(--primary);
}
.lp-arrow {
  display: inline-flex;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform .4s var(--t);
}
.lp:hover .lp-arrow {
  transform: translateX(2px);
}

.lp-note {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 14px;
}

.lp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lp-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
  transition: background .3s var(--t), color .3s var(--t), border-color .3s var(--t);
}
.lp:hover .lp-chip {
  background: var(--accent-soft);
  border-color: rgba(244, 168, 37, .35);
  color: var(--primary);
}

/* ---------- TEP Workflow ----------
   Horizontal step diagram with connector lines between steps.
   On mobile, stacks vertically with connector becoming vertical. */
.tep-section {
  padding: 100px 0 110px;
}
.tep-flow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  margin: 0;
  padding: 40px 0 0;
  position: relative;
  counter-reset: tep;
}
/* Single horizontal connector line behind all steps */
.tep-flow::before {
  content: '';
  position: absolute;
  top: 90px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--line) 8%, var(--line) 92%, transparent 100%);
  z-index: 0;
}

.tep-step {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 14px;
}
.tep-num {
  font-size: .68rem;
  letter-spacing: .26em;
  color: var(--muted-3);
  font-weight: 700;
  margin-bottom: 8px;
  transition: color .35s var(--t);
}
.tep-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--primary);
  box-shadow: 0 0 0 6px var(--bg);
  transition:
    transform .4s var(--t),
    background .4s var(--t),
    color .4s var(--t),
    border-color .4s var(--t);
}
.tep-icon svg { width: 22px; height: 22px; }

.tep-step:hover .tep-icon {
  transform: translateY(-4px) scale(1.05);
  background: var(--accent);
  border-color: var(--accent);
  color: var(--primary);
}
.tep-step:hover .tep-num { color: var(--accent); }

.tep-step h4 {
  font-size: 1.0rem;
  color: var(--primary);
  letter-spacing: -.015em;
  margin-bottom: 8px;
}
.tep-step p {
  font-size: .85rem;
  color: var(--muted);
  line-height: 1.5;
  max-width: 22ch;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 960px) {
  .lp-grid { grid-template-columns: repeat(2, 1fr); }

  .tep-flow {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 8px;
  }
  /* Vertical connector for stacked layout */
  .tep-flow::before {
    top: 5%;
    bottom: 5%;
    left: 50%;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(180deg, transparent 0%, var(--line) 8%, var(--line) 92%, transparent 100%);
  }
}
@media (max-width: 640px) {
  .lp-section { padding: 64px 0 70px; }
  .lp-grid { grid-template-columns: 1fr; }
  .tep-section { padding: 70px 0 80px; }
  .tep-flow::before { left: 30px; }
  .tep-step {
    text-align: left;
    display: grid;
    grid-template-columns: 60px 1fr;
    column-gap: 16px;
    align-items: start;
  }
  .tep-icon { margin: 0; }
  .tep-num { grid-column: 2; margin-bottom: 4px; }
  .tep-step h4 { text-align: left; }
  .tep-step p { text-align: left; margin: 0; max-width: none; }
  .tep-icon, .tep-num, .tep-step h4, .tep-step p {
    grid-column: auto;
  }
  .tep-icon { grid-row: 1 / span 3; }
}

/* =====================================================
   Security Dispatching v2 — page-scoped (body.sd-v2)
   Asymmetric console-led hero + photo band + animated
   workflow. All rules below ONLY apply to body.sd-v2 so
   they cannot bleed into other service pages.
   ===================================================== */

/* ---------- Hero: override the default centered photo hero ---------- */
.sd-v2 .hero {
  padding: 0;
  min-height: 100dvh;
  background: var(--primary-deep);
  display: flex;
  align-items: center;
  isolation: isolate;
}
.sd-v2 .hero::before { display: none; }
.sd-v2 .hero-page { padding: 0; min-height: auto; }

.sd-v2 .sd-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.sd-v2 .sd-hero-photo {
  position: absolute;
  inset: 0;
  background-image: url('images/security/hero-bg.jpg?v=2026-05-23');
  background-size: cover;
  background-position: center;
  filter: grayscale(60%) brightness(.65) contrast(1.1);
  opacity: .14;
  will-change: transform;
}
.sd-v2 .sd-hero-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 75% 30%, rgba(244,168,37,.10) 0%, transparent 55%),
    linear-gradient(135deg, rgba(6,17,40,.94) 0%, rgba(11,29,65,.88) 60%, rgba(6,17,40,.96) 100%);
}
.sd-v2 .sd-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 35%, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 60% 35%, black 30%, transparent 75%);
}
.sd-v2 .sd-hero-glow {
  position: absolute;
  right: -8%;
  top: 5%;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: rgba(244,168,37,.16);
  filter: blur(120px);
}

.sd-v2 .sd-hero-content {
  position: relative;
  z-index: 3;
  text-align: left;
  padding-top: 130px;
  padding-bottom: 80px;
  width: 100%;
}

/* status strip */
.sd-v2 .sd-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 28px;
}
.sd-v2 .sd-status-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.25);
  border-radius: 999px;
  color: #6ee7a8;
  letter-spacing: .22em;
}
.sd-v2 .sd-status-live .pulse { background: #4ade80; }
.sd-v2 .sd-status-live .pulse::after { background: #4ade80; }
.sd-v2 .sd-status-dot { color: rgba(255,255,255,.2); letter-spacing: 0; }
.sd-v2 .sd-status strong { color: var(--accent); font-weight: 700; }

/* chips row */
.sd-v2 .sd-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
  align-items: center;
}
.sd-v2 .sd-chips .breadcrumb { margin-bottom: 0; }
.sd-v2 .sd-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(244,168,37,.4);
  background: rgba(244,168,37,.05);
  color: var(--accent);
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .04em;
}

/* asymmetric grid: copy | console */
.sd-v2 .sd-hero-grid-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

/* copy column */
.sd-v2 .sd-hero-copy { max-width: 100%; }
.sd-v2 .sd-hero-title {
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: .98;
  letter-spacing: -.025em;
  font-weight: 800;
  margin: 0;
  color: #fff;
}
.sd-v2 .sd-line { display: block; }
.sd-v2 .sd-line-italic {
  font-family: var(--font-display, inherit);
  font-style: italic;
  color: var(--accent);
}
.sd-v2 .sd-hero-sub {
  margin-top: 24px;
  max-width: 56ch;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(255,255,255,.7);
}
.sd-v2 .sd-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.sd-v2 .sd-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 44px;
}
.sd-v2 .sd-meta-item .sd-meta-head {
  font-size: .98rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.015em;
}
.sd-v2 .sd-meta-item .sd-meta-sub {
  margin-top: 4px;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.sd-v2 .sd-meta-rule {
  width: 1px;
  height: 30px;
  background: rgba(255,255,255,.1);
}

/* ---------- Live Ops Console ---------- */
.sd-v2 .sd-console {
  position: relative;
  background: #0A1422;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.02);
}
.sd-v2 .sd-console-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.012);
}
.sd-v2 .sd-chrome-dots { display: flex; gap: 6px; }
.sd-v2 .sd-chrome-dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(244,113,113,.5);
}
.sd-v2 .sd-chrome-dots span:nth-child(2) { background: rgba(252,211,77,.55); }
.sd-v2 .sd-chrome-dots span:nth-child(3) { background: rgba(74,222,128,.55); }
.sd-v2 .sd-chrome-title {
  font-size: .62rem;
  letter-spacing: .25em;
  color: rgba(255,255,255,.42);
  font-weight: 600;
}
.sd-v2 .sd-chrome-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .62rem;
  letter-spacing: .25em;
  color: #6ee7a8;
  font-weight: 600;
}
.sd-v2 .sd-online-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80;
  animation: sd-pulse-dot 1.8s ease-in-out infinite;
}
@keyframes sd-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.78); }
}

.sd-v2 .sd-console-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.sd-v2 .sd-radar-pane,
.sd-v2 .sd-map-pane {
  position: relative;
  aspect-ratio: 1 / 1;
  padding: 18px;
}
.sd-v2 .sd-radar-pane { border-right: 1px solid rgba(255,255,255,.05); }

/* radar */
.sd-v2 .sd-radar {
  position: absolute;
  inset: 18px;
}
.sd-v2 .sd-radar-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(244,168,37,.14);
}
.sd-v2 .sd-radar-ring-1 { inset: 0; }
.sd-v2 .sd-radar-ring-2 { inset: 14%; }
.sd-v2 .sd-radar-ring-3 { inset: 30%; }
.sd-v2 .sd-radar-cross {
  position: absolute;
  background: rgba(244,168,37,.08);
}
.sd-v2 .sd-radar-cross-v { left: 50%; top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.sd-v2 .sd-radar-cross-h { top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); }
.sd-v2 .sd-radar-center {
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 14px rgba(244,168,37,.9);
}
.sd-v2 .sd-radar-sweep {
  position: absolute;
  inset: 0;
  animation: sd-radar 4.5s linear infinite;
  transform-origin: center;
  will-change: transform;
}
.sd-v2 .sd-radar-sweep::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 50%; height: 50%;
  background: conic-gradient(from 0deg, rgba(244,168,37,.42), rgba(244,168,37,0) 55deg);
  transform-origin: 0 0;
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
@keyframes sd-radar {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.sd-v2 .sd-ping {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(244,168,37,.8);
  transform: translate(-50%, -50%) scale(.4);
  opacity: 0;
  animation: sd-ping 2.4s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes sd-ping {
  0%   { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  35%  { transform: translate(-50%, -50%) scale(1.6); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
}

.sd-v2 .sd-pane-foot {
  position: absolute;
  left: 18px; right: 18px; bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .58rem;
  letter-spacing: .22em;
  color: rgba(255,255,255,.32);
}
.sd-v2 .sd-pane-foot-r { color: rgba(244,168,37,.7); }
.sd-v2 .sd-pane-foot-ok { color: #6ee7a8; }

/* map */
.sd-v2 .sd-map { width: 100%; height: 100%; display: block; }
.sd-v2 .sd-map-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: sd-mapring 2.4s ease-out infinite;
}
.sd-v2 .sd-map-ring-2 { animation-delay: 1.2s; }
@keyframes sd-mapring {
  0%   { r: 3; opacity: .85; }
  100% { r: 13; opacity: 0; }
}

/* alert log */
.sd-v2 .sd-log {
  position: relative;
  height: 168px;
  overflow: hidden;
}
.sd-v2 .sd-log::before,
.sd-v2 .sd-log::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 26px;
  z-index: 2;
  pointer-events: none;
}
.sd-v2 .sd-log::before { top: 0;    background: linear-gradient(to bottom, #0A1422 0%, transparent 100%); }
.sd-v2 .sd-log::after  { bottom: 0; background: linear-gradient(to top,    #0A1422 0%, transparent 100%); }
.sd-v2 .sd-log-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.sd-v2 .sd-log-row {
  display: grid;
  grid-template-columns: 64px 56px 1fr 36px;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-bottom: 1px solid rgba(255,255,255,.035);
  font-size: .72rem;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.sd-v2 .sd-log-t { color: rgba(255,255,255,.35); }
.sd-v2 .sd-log-s { color: rgba(255,255,255,.78); font-weight: 600; }
.sd-v2 .sd-log-m { color: rgba(255,255,255,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-v2 .sd-log-tag {
  text-align: right;
  font-weight: 700;
  letter-spacing: .12em;
  font-size: .66rem;
}
.sd-v2 .sd-tag-esc { color: #fca5a5; }
.sd-v2 .sd-tag-ack { color: #fcd34d; }
.sd-v2 .sd-tag-clr { color: #cbd5e1; }
.sd-v2 .sd-tag-ok  { color: #6ee7a8; }

/* console footer */
.sd-v2 .sd-console-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 16px;
  border-top: 1px solid rgba(255,255,255,.05);
  font-size: .62rem;
  letter-spacing: .15em;
  color: rgba(255,255,255,.42);
}
.sd-v2 .sd-console-foot strong { color: #fff; font-weight: 700; }
.sd-v2 .sd-console-foot .sd-good { color: #6ee7a8; }
.sd-v2 .sd-console-foot .sd-accent { color: var(--accent); }

/* nav offset: tighten breadcrumb hover behavior for dark bg */
.sd-v2 .sd-chips .breadcrumb {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
}

/* ---------- "Inside the operation" photo band ---------- */
.sd-v2 .sd-band {
  background: linear-gradient(180deg, var(--primary-deep) 0%, var(--primary) 100%);
  color: #fff;
  padding: 100px 0 110px;
  position: relative;
}
.sd-v2 .sd-band::before,
.sd-v2 .sd-band::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 40px;
  pointer-events: none;
}
.sd-v2 .sd-band::before { top: 0;    background: linear-gradient(to bottom, var(--primary-deep) 0%, transparent 100%); }
.sd-v2 .sd-band::after  { bottom: 0; background: linear-gradient(to top,    var(--primary-deep) 0%, transparent 100%); }
.sd-v2 .sd-band-head {
  text-align: center;
  margin-bottom: 48px;
}
.sd-v2 .sd-band-head h2 {
  margin-top: 14px;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  color: #fff;
  letter-spacing: -.025em;
}

.sd-v2 .sd-band-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.sd-v2 .sd-band-card {
  position: relative;
}
.sd-v2 .sd-band-img {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: #0A1422;
  aspect-ratio: 4 / 5;
  /* clip-path reveal — closed by default, opens via .in */
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1s var(--t);
}
.sd-v2 .sd-band-card.in .sd-band-img { clip-path: inset(0 0 0 0); }
.sd-v2 .sd-band-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.85) saturate(.85);
  transform: scale(1.02);
  transition: transform 1.2s var(--t), filter .6s var(--t);
}
.sd-v2 .sd-band-card:hover .sd-band-img img {
  transform: scale(1.06);
  filter: brightness(1) saturate(1);
}
.sd-v2 .sd-band-card figcaption {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .7s var(--t) .3s, transform .7s var(--t) .3s;
}
.sd-v2 .sd-band-card.in figcaption { opacity: 1; transform: translateY(0); }
.sd-v2 .sd-band-num {
  font-size: .72rem;
  letter-spacing: .25em;
  color: var(--accent);
  font-weight: 700;
}
.sd-v2 .sd-band-cap {
  font-size: 1.02rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: -.01em;
}
.sd-v2 .sd-band-quote {
  margin: 56px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  color: rgba(255,255,255,.78);
  line-height: 1.45;
  letter-spacing: -.01em;
}

/* ---------- How it works — animated workflow ---------- */
.sd-v2 .sd-flow-section {
  padding: 110px 0 110px;
}
.sd-v2 .sd-flow {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-top: 60px;
  padding: 0;
  counter-reset: sdflow;
}
.sd-v2 .sd-flow-line {
  position: absolute;
  top: 28px;
  left: 0;
  width: 100%;
  height: 4px;
  pointer-events: none;
}
.sd-v2 .sd-flow-line line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--t);
  opacity: .55;
}
.sd-v2 .sd-flow.drawn .sd-flow-line line { stroke-dashoffset: 0; }

.sd-v2 .sd-flow-step {
  position: relative;
  text-align: left;
  padding: 0 4px;
}
.sd-v2 .sd-flow-node {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--accent);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px var(--bg);
  position: relative;
  z-index: 2;
  transition: transform .4s var(--t), background .4s var(--t), color .4s var(--t);
}
.sd-v2 .sd-flow-step:hover .sd-flow-node {
  transform: translateY(-3px);
  background: var(--accent);
}
.sd-v2 .sd-flow-num {
  margin-top: 18px;
  font-size: .68rem;
  letter-spacing: .26em;
  color: var(--muted-3);
  font-weight: 700;
}
.sd-v2 .sd-flow-step h4 {
  margin-top: 4px;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  color: var(--primary);
}
.sd-v2 .sd-flow-step p {
  margin-top: 8px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 26ch;
}

/* ---------- Why strip — number suffix polish ---------- */
.sd-v2 .why-strip-num {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.sd-v2 .why-strip-suffix {
  font-size: 1.6rem;
  color: var(--accent);
  font-weight: 700;
}

/* ---------- CTA — amber accent stripe ---------- */
.sd-v2 .sd-cta {
  position: relative;
  overflow: hidden;
}
.sd-v2 .sd-cta::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent) 0%, transparent 100%);
}

/* ---------- Console gets a slight scale-in on top of the global reveal ----------
   The global .reveal already handles opacity + Y + blur. We just compose a
   tactile scale step on top of it via composite transition.
   ------------------------------------------------------------------ */
.sd-v2 .sd-console.reveal { transform: translateY(30px) scale(.96); }
.sd-v2 .sd-console.reveal.in { transform: translateY(0) scale(1); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .sd-v2 .sd-hero-grid-inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .sd-v2 .sd-console { max-width: 600px; margin: 0 auto; }
}
@media (max-width: 960px) {
  .sd-v2 .sd-hero-content { padding-top: 120px; padding-bottom: 64px; }
  .sd-v2 .sd-band-grid { grid-template-columns: 1fr; gap: 24px; }
  .sd-v2 .sd-band-img { aspect-ratio: 16 / 10; }
  .sd-v2 .sd-flow {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .sd-v2 .sd-flow-line { display: none; }
  .sd-v2 .sd-flow-section { padding: 80px 0; }
  .sd-v2 .sd-band { padding: 80px 0 90px; }
}
@media (max-width: 640px) {
  .sd-v2 .sd-status { font-size: .62rem; gap: 6px; }
  .sd-v2 .sd-status-hide-sm { display: none; }
  .sd-v2 .sd-hero-meta { gap: 14px; }
  .sd-v2 .sd-meta-rule { display: none; }
  .sd-v2 .sd-meta-item .sd-meta-head { font-size: .92rem; }
  .sd-v2 .sd-console-row { grid-template-columns: 1fr; }
  .sd-v2 .sd-radar-pane { border-right: none; border-bottom: 1px solid rgba(255,255,255,.05); aspect-ratio: 1.6 / 1; }
  .sd-v2 .sd-map-pane { aspect-ratio: 1.6 / 1; }
  .sd-v2 .sd-log { height: 140px; }
  .sd-v2 .sd-log-row { grid-template-columns: 56px 50px 1fr 32px; padding: 7px 14px; font-size: .68rem; }
  .sd-v2 .sd-console-foot { font-size: .56rem; padding: 8px 14px; }
  .sd-v2 .sd-band-quote { font-size: 1.05rem; }
}

/* ---------- Reduced motion: freeze all SD-v2 perpetuals ---------- */
@media (prefers-reduced-motion: reduce) {
  .sd-v2 .sd-radar-sweep,
  .sd-v2 .sd-ping,
  .sd-v2 .sd-online-dot,
  .sd-v2 .sd-map-ring,
  .sd-v2 .sd-log-track,
  .sd-v2 .sd-hero-photo { animation: none !important; transition: none !important; }
  .sd-v2 .sd-band-img { clip-path: none !important; }
  .sd-v2 .sd-band-card figcaption { opacity: 1 !important; transform: none !important; }
}

/* =====================================================
   Truck Dispatching v2 — page-scoped (body.td-v2)
   Asymmetric load-board + route-map console hero, photo
   band, animated freight workflow. All rules scoped under
   .td-v2 so they cannot bleed into other service pages.
   ===================================================== */

/* ---------- Hero: override default centered hero ---------- */
.td-v2 .hero {
  padding: 0;
  min-height: 100dvh;
  background: var(--primary-deep);
  display: flex;
  align-items: center;
  isolation: isolate;
}
.td-v2 .hero::before { display: none; }
.td-v2 .hero-page { padding: 0; min-height: auto; }

.td-v2 .td-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.td-v2 .td-hero-photo {
  position: absolute;
  inset: 0;
  background-image: url('images/truck/hero-bg.jpg?v=2026-05-23');
  background-size: cover;
  background-position: center;
  filter: grayscale(50%) brightness(.6) contrast(1.1);
  opacity: .15;
  will-change: transform;
}
.td-v2 .td-hero-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 75% 30%, rgba(244,168,37,.10) 0%, transparent 55%),
    linear-gradient(135deg, rgba(6,17,40,.94) 0%, rgba(11,29,65,.88) 60%, rgba(6,17,40,.96) 100%);
}
.td-v2 .td-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 35%, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 60% 35%, black 30%, transparent 75%);
}
.td-v2 .td-hero-glow {
  position: absolute;
  right: -8%;
  top: 5%;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: rgba(244,168,37,.16);
  filter: blur(120px);
}

.td-v2 .td-hero-content {
  position: relative;
  z-index: 3;
  text-align: left;
  padding-top: 130px;
  padding-bottom: 80px;
  width: 100%;
}

/* status strip */
.td-v2 .td-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 28px;
}
.td-v2 .td-status-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.25);
  border-radius: 999px;
  color: #6ee7a8;
  letter-spacing: .22em;
}
.td-v2 .td-status-live .pulse { background: #4ade80; }
.td-v2 .td-status-live .pulse::after { background: #4ade80; }
.td-v2 .td-status-dot { color: rgba(255,255,255,.2); letter-spacing: 0; }
.td-v2 .td-status strong { color: var(--accent); font-weight: 700; }

/* chips row */
.td-v2 .td-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
  align-items: center;
}
.td-v2 .td-chips .breadcrumb {
  margin-bottom: 0;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
}
.td-v2 .td-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(244,168,37,.4);
  background: rgba(244,168,37,.05);
  color: var(--accent);
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .04em;
}

/* asymmetric grid: copy | console */
.td-v2 .td-hero-grid-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

/* copy column */
.td-v2 .td-hero-copy { max-width: 100%; }
.td-v2 .td-hero-title {
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: .98;
  letter-spacing: -.025em;
  font-weight: 800;
  margin: 0;
  color: #fff;
}
.td-v2 .td-line { display: block; }
.td-v2 .td-line-italic { font-style: italic; color: var(--accent); }
.td-v2 .td-hero-sub {
  margin-top: 24px;
  max-width: 56ch;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(255,255,255,.7);
}
.td-v2 .td-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.td-v2 .td-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 44px;
}
.td-v2 .td-meta-item .td-meta-head {
  font-size: .98rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.015em;
}
.td-v2 .td-meta-item .td-meta-sub {
  margin-top: 4px;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.td-v2 .td-meta-rule {
  width: 1px;
  height: 30px;
  background: rgba(255,255,255,.1);
}

/* ---------- Live Ops Console (Truck) ---------- */
.td-v2 .td-console {
  position: relative;
  background: #0A1422;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.02);
}
.td-v2 .td-console.reveal { transform: translateY(30px) scale(.96); }
.td-v2 .td-console.reveal.in { transform: translateY(0) scale(1); }

.td-v2 .td-console-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.012);
}
.td-v2 .td-chrome-dots { display: flex; gap: 6px; }
.td-v2 .td-chrome-dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(244,113,113,.5);
}
.td-v2 .td-chrome-dots span:nth-child(2) { background: rgba(252,211,77,.55); }
.td-v2 .td-chrome-dots span:nth-child(3) { background: rgba(74,222,128,.55); }
.td-v2 .td-chrome-title {
  font-size: .62rem;
  letter-spacing: .25em;
  color: rgba(255,255,255,.42);
  font-weight: 600;
}
.td-v2 .td-chrome-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .62rem;
  letter-spacing: .25em;
  color: var(--accent);
  font-weight: 600;
}
.td-v2 .td-online-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  animation: td-pulse-dot 1.8s ease-in-out infinite;
}
@keyframes td-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.78); }
}

.td-v2 .td-console-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

/* ---- Load board pane ---- */
.td-v2 .td-board-pane {
  position: relative;
  border-right: 1px solid rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  min-height: 260px;
}
.td-v2 .td-board-head {
  display: grid;
  grid-template-columns: 1fr 40px 60px 36px;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 8px;
  font-size: .58rem;
  letter-spacing: .25em;
  color: rgba(255,255,255,.32);
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-weight: 600;
}
.td-v2 .td-board {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 180px;
}
.td-v2 .td-board::before,
.td-v2 .td-board::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 22px;
  z-index: 2;
  pointer-events: none;
}
.td-v2 .td-board::before { top: 0;    background: linear-gradient(to bottom, #0A1422 0%, transparent 100%); }
.td-v2 .td-board::after  { bottom: 0; background: linear-gradient(to top,    #0A1422 0%, transparent 100%); }

.td-v2 .td-board-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.td-v2 .td-board-row {
  display: grid;
  grid-template-columns: 1fr 40px 60px 36px;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(255,255,255,.035);
}
.td-v2 .td-lane {
  color: rgba(255,255,255,.85);
  font-weight: 600;
  letter-spacing: .03em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.td-v2 .td-arrow {
  color: var(--accent);
  font-weight: 500;
}
.td-v2 .td-mi { color: rgba(255,255,255,.55); text-align: right; }
.td-v2 .td-rate { color: #fff; font-weight: 700; text-align: right; }

.td-v2 .td-st {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: #0A1422;
}
.td-v2 .td-st-bid { background: var(--accent); }
.td-v2 .td-st-won { background: #4ade80; }
.td-v2 .td-st-trk { background: #60a5fa; }
.td-v2 .td-st-dlv { background: rgba(255,255,255,.25); color: rgba(255,255,255,.9); }

/* ---- Route map pane ---- */
.td-v2 .td-map-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 260px;
  padding-bottom: 24px;
}
.td-v2 .td-map {
  width: 100%;
  height: 100%;
  display: block;
  padding: 12px;
  box-sizing: border-box;
}
.td-v2 .td-map text {
  paint-order: stroke;
  stroke: rgba(10,20,34,0.6);
  stroke-width: 0.6;
}
.td-v2 .td-map-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: td-mapring 2.4s ease-out infinite;
}
.td-v2 .td-map-ring-2 { animation-delay: 1.2s; }
@keyframes td-mapring {
  0%   { r: 3; opacity: .9; }
  100% { r: 12; opacity: 0; }
}

.td-v2 .td-pane-foot {
  position: absolute;
  left: 16px; right: 16px; bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .58rem;
  letter-spacing: .22em;
  color: rgba(255,255,255,.32);
}
.td-v2 .td-pane-foot-r { color: rgba(244,168,37,.7); }
.td-v2 .td-pane-foot-ok { color: #6ee7a8; }

/* ---- Broker activity log ---- */
.td-v2 .td-log {
  position: relative;
  height: 168px;
  overflow: hidden;
}
.td-v2 .td-log::before,
.td-v2 .td-log::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 26px;
  z-index: 2;
  pointer-events: none;
}
.td-v2 .td-log::before { top: 0;    background: linear-gradient(to bottom, #0A1422 0%, transparent 100%); }
.td-v2 .td-log::after  { bottom: 0; background: linear-gradient(to top,    #0A1422 0%, transparent 100%); }
.td-v2 .td-log-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.td-v2 .td-log-row {
  display: grid;
  grid-template-columns: 42px 64px 56px 1fr 34px;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,.035);
  font-size: .7rem;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.td-v2 .td-log-t { color: rgba(255,255,255,.35); }
.td-v2 .td-log-lane { color: rgba(255,255,255,.8); font-weight: 600; }
.td-v2 .td-log-rate { color: #fff; font-weight: 700; }
.td-v2 .td-log-meta { color: rgba(255,255,255,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-v2 .td-log-tag {
  text-align: right;
  font-weight: 800;
  letter-spacing: .12em;
  font-size: .6rem;
}
.td-v2 .td-tag-bid { color: var(--accent); }
.td-v2 .td-tag-won { color: #6ee7a8; }
.td-v2 .td-tag-trk { color: #93c5fd; }
.td-v2 .td-tag-dlv { color: rgba(255,255,255,.5); }

/* ---- Console footer ---- */
.td-v2 .td-console-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 16px;
  border-top: 1px solid rgba(255,255,255,.05);
  font-size: .62rem;
  letter-spacing: .15em;
  color: rgba(255,255,255,.42);
}
.td-v2 .td-console-foot strong { color: #fff; font-weight: 700; }
.td-v2 .td-console-foot .td-good { color: #6ee7a8; }
.td-v2 .td-console-foot .td-accent { color: var(--accent); }

/* ---------- "On every load" photo band ---------- */
.td-v2 .td-band {
  background: linear-gradient(180deg, var(--primary-deep) 0%, var(--primary) 100%);
  color: #fff;
  padding: 100px 0 110px;
  position: relative;
}
.td-v2 .td-band::before,
.td-v2 .td-band::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 40px;
  pointer-events: none;
}
.td-v2 .td-band::before { top: 0;    background: linear-gradient(to bottom, var(--primary-deep) 0%, transparent 100%); }
.td-v2 .td-band::after  { bottom: 0; background: linear-gradient(to top,    var(--primary-deep) 0%, transparent 100%); }
.td-v2 .td-band-head {
  text-align: center;
  margin-bottom: 48px;
}
.td-v2 .td-band-head h2 {
  margin-top: 14px;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  color: #fff;
  letter-spacing: -.025em;
}
.td-v2 .td-band-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.td-v2 .td-band-card { position: relative; }
.td-v2 .td-band-img {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: #0A1422;
  aspect-ratio: 4 / 5;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1s var(--t);
}
.td-v2 .td-band-card.in .td-band-img { clip-path: inset(0 0 0 0); }
.td-v2 .td-band-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.85) saturate(.85);
  transform: scale(1.02);
  transition: transform 1.2s var(--t), filter .6s var(--t);
}
.td-v2 .td-band-card:hover .td-band-img img {
  transform: scale(1.06);
  filter: brightness(1) saturate(1);
}
.td-v2 .td-band-card figcaption {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .7s var(--t) .3s, transform .7s var(--t) .3s;
}
.td-v2 .td-band-card.in figcaption { opacity: 1; transform: translateY(0); }
.td-v2 .td-band-num {
  font-size: .72rem;
  letter-spacing: .25em;
  color: var(--accent);
  font-weight: 700;
}
.td-v2 .td-band-cap {
  font-size: 1.02rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: -.01em;
}
.td-v2 .td-band-quote {
  margin: 56px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  color: rgba(255,255,255,.78);
  line-height: 1.45;
  letter-spacing: -.01em;
}

/* ---------- How it works — animated workflow ---------- */
.td-v2 .td-flow-section {
  padding: 110px 0 110px;
}
.td-v2 .td-flow {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
  margin-top: 60px;
  padding: 0;
}
.td-v2 .td-flow-line {
  position: absolute;
  top: 28px;
  left: 0;
  width: 100%;
  height: 4px;
  pointer-events: none;
}
.td-v2 .td-flow-line line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--t);
  opacity: .55;
}
.td-v2 .td-flow.drawn .td-flow-line line { stroke-dashoffset: 0; }

.td-v2 .td-flow-step {
  position: relative;
  text-align: left;
  padding: 0 4px;
}
.td-v2 .td-flow-node {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px solid var(--accent);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px var(--bg);
  position: relative;
  z-index: 2;
  transition: transform .4s var(--t), background .4s var(--t), color .4s var(--t);
}
.td-v2 .td-flow-step:hover .td-flow-node {
  transform: translateY(-3px);
  background: var(--accent);
}
.td-v2 .td-flow-num {
  margin-top: 18px;
  font-size: .68rem;
  letter-spacing: .26em;
  color: var(--muted-3);
  font-weight: 700;
}
.td-v2 .td-flow-step h4 {
  margin-top: 4px;
  font-size: 1.15rem;
  letter-spacing: -.02em;
  color: var(--primary);
}
.td-v2 .td-flow-step p {
  margin-top: 8px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 26ch;
}

/* ---------- Why strip — numeric counter polish ---------- */
.td-v2 .why-strip-num {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.td-v2 .why-strip-suffix {
  font-size: 1.6rem;
  color: var(--accent);
  font-weight: 700;
}
.td-v2 .td-num-prefix {
  font-size: 1.6rem;
  color: var(--accent);
  font-weight: 700;
  margin-right: 1px;
}
.td-v2 .td-num-text {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.025em;
  line-height: 1;
}

/* ---------- CTA — amber accent stripe (reused token style) ---------- */
.td-v2 .sd-cta {
  position: relative;
  overflow: hidden;
}
.td-v2 .sd-cta::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent) 0%, transparent 100%);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .td-v2 .td-hero-grid-inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .td-v2 .td-console { max-width: 600px; margin: 0 auto; }
}
@media (max-width: 960px) {
  .td-v2 .td-hero-content { padding-top: 120px; padding-bottom: 64px; }
  .td-v2 .td-band-grid { grid-template-columns: 1fr; gap: 24px; }
  .td-v2 .td-band-img { aspect-ratio: 16 / 10; }
  .td-v2 .td-flow {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .td-v2 .td-flow-line { display: none; }
  .td-v2 .td-flow-section { padding: 80px 0; }
  .td-v2 .td-band { padding: 80px 0 90px; }
}
@media (max-width: 640px) {
  .td-v2 .td-status { font-size: .62rem; gap: 6px; }
  .td-v2 .td-status-hide-sm { display: none; }
  .td-v2 .td-hero-meta { gap: 14px; }
  .td-v2 .td-meta-rule { display: none; }
  .td-v2 .td-meta-item .td-meta-head { font-size: .92rem; }
  .td-v2 .td-console-row { grid-template-columns: 1fr; }
  .td-v2 .td-board-pane { border-right: none; border-bottom: 1px solid rgba(255,255,255,.05); }
  .td-v2 .td-map-pane { min-height: 220px; padding-bottom: 32px; }
  .td-v2 .td-log { height: 140px; }
  .td-v2 .td-log-row { grid-template-columns: 38px 56px 50px 1fr 30px; padding: 7px 12px; font-size: .66rem; gap: 6px; }
  .td-v2 .td-board-row { padding: 7px 12px; font-size: .68rem; }
  .td-v2 .td-board-head { padding: 8px 12px; }
  .td-v2 .td-console-foot { font-size: .56rem; padding: 8px 12px; gap: 6px; }
  .td-v2 .td-band-quote { font-size: 1.05rem; }
}

/* ---------- Reduced motion: freeze all TD-v2 perpetuals ---------- */
@media (prefers-reduced-motion: reduce) {
  .td-v2 .td-online-dot,
  .td-v2 .td-map-ring,
  .td-v2 .td-log-track,
  .td-v2 .td-board-track,
  .td-v2 .td-hero-photo { animation: none !important; transition: none !important; }
  .td-v2 .td-band-img { clip-path: none !important; }
  .td-v2 .td-band-card figcaption { opacity: 1 !important; transform: none !important; }
  /* SVG <animateMotion> cannot be disabled via CSS — JS would be needed.
     The visual is subtle enough that leaving it as-is is acceptable per
     the prefers-reduced-motion guidance (the WCAG concern is large or
     vestibular-triggering motion; small icon traversal is benign). */
}

/* =====================================================
   Customer Support v2 — page-scoped (body.cx-v2)
   Asymmetric CX-desk console hero (live queue + CSAT
   gauge + conversation log), photo band. Channel ribbon
   and rhythm timeline kept from existing v2 CSS above.
   All rules scoped under .cx-v2.
   ===================================================== */

/* ---------- Hero: override default centered hero ---------- */
.cx-v2 .hero {
  padding: 0;
  min-height: 100dvh;
  background: var(--primary-deep);
  display: flex;
  align-items: center;
  isolation: isolate;
}
.cx-v2 .hero::before { display: none; }
.cx-v2 .hero-page { padding: 0; min-height: auto; }

.cx-v2 .cx-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.cx-v2 .cx-hero-photo {
  position: absolute;
  inset: 0;
  background-image: url('images/cx/hero-bg.jpg?v=2026-05-23');
  background-size: cover;
  background-position: center;
  filter: grayscale(55%) brightness(.6) contrast(1.1);
  opacity: .14;
  will-change: transform;
}
.cx-v2 .cx-hero-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 75% 30%, rgba(244,168,37,.10) 0%, transparent 55%),
    linear-gradient(135deg, rgba(6,17,40,.94) 0%, rgba(11,29,65,.88) 60%, rgba(6,17,40,.96) 100%);
}
.cx-v2 .cx-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 35%, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 60% 35%, black 30%, transparent 75%);
}
.cx-v2 .cx-hero-glow {
  position: absolute;
  right: -8%;
  top: 5%;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: rgba(244,168,37,.16);
  filter: blur(120px);
}

.cx-v2 .cx-hero-content {
  position: relative;
  z-index: 3;
  text-align: left;
  padding-top: 130px;
  padding-bottom: 80px;
  width: 100%;
}

/* status strip */
.cx-v2 .cx-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 28px;
}
.cx-v2 .cx-status-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.25);
  border-radius: 999px;
  color: #6ee7a8;
  letter-spacing: .22em;
}
.cx-v2 .cx-status-live .pulse { background: #4ade80; }
.cx-v2 .cx-status-live .pulse::after { background: #4ade80; }
.cx-v2 .cx-status-dot { color: rgba(255,255,255,.2); letter-spacing: 0; }
.cx-v2 .cx-status strong { color: var(--accent); font-weight: 700; }

/* chips row */
.cx-v2 .cx-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
  align-items: center;
}
.cx-v2 .cx-chips .breadcrumb {
  margin-bottom: 0;
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
}
.cx-v2 .cx-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(244,168,37,.4);
  background: rgba(244,168,37,.05);
  color: var(--accent);
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .04em;
}

/* asymmetric grid */
.cx-v2 .cx-hero-grid-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

/* copy column */
.cx-v2 .cx-hero-copy { max-width: 100%; }
.cx-v2 .cx-hero-title {
  font-size: clamp(2.4rem, 5.4vw, 4.8rem);
  line-height: 1.0;
  letter-spacing: -.025em;
  font-weight: 800;
  margin: 0;
  color: #fff;
}
.cx-v2 .cx-line { display: block; }
.cx-v2 .cx-line-italic { font-style: italic; color: var(--accent); }
.cx-v2 .cx-hero-sub {
  margin-top: 24px;
  max-width: 56ch;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(255,255,255,.7);
}
.cx-v2 .cx-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}
.cx-v2 .cx-hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 44px;
}
.cx-v2 .cx-meta-item .cx-meta-head {
  font-size: .98rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.015em;
}
.cx-v2 .cx-meta-item .cx-meta-sub {
  margin-top: 4px;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
}
.cx-v2 .cx-meta-rule {
  width: 1px;
  height: 30px;
  background: rgba(255,255,255,.1);
}

/* ---------- CX Ops Console ---------- */
.cx-v2 .cx-console {
  position: relative;
  background: #0A1422;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 30px 80px -30px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.02);
}
.cx-v2 .cx-console.reveal { transform: translateY(30px) scale(.96); }
.cx-v2 .cx-console.reveal.in { transform: translateY(0) scale(1); }

.cx-v2 .cx-console-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.012);
}
.cx-v2 .cx-chrome-dots { display: flex; gap: 6px; }
.cx-v2 .cx-chrome-dots span {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(244,113,113,.5);
}
.cx-v2 .cx-chrome-dots span:nth-child(2) { background: rgba(252,211,77,.55); }
.cx-v2 .cx-chrome-dots span:nth-child(3) { background: rgba(74,222,128,.55); }
.cx-v2 .cx-chrome-title {
  font-size: .62rem;
  letter-spacing: .25em;
  color: rgba(255,255,255,.42);
  font-weight: 600;
}
.cx-v2 .cx-chrome-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .62rem;
  letter-spacing: .25em;
  color: #6ee7a8;
  font-weight: 600;
}
.cx-v2 .cx-online-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ade80;
  animation: cx-pulse-dot 1.8s ease-in-out infinite;
}
@keyframes cx-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.78); }
}

.cx-v2 .cx-console-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

/* ---- Queue pane ---- */
.cx-v2 .cx-queue-pane {
  position: relative;
  border-right: 1px solid rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.cx-v2 .cx-queue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 8px;
  font-size: .58rem;
  letter-spacing: .25em;
  color: rgba(255,255,255,.42);
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-weight: 600;
}
.cx-v2 .cx-queue-count {
  background: var(--accent);
  color: #0A1422;
  font-weight: 800;
  font-size: .58rem;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .1em;
}
.cx-v2 .cx-queue {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 220px;
}
.cx-v2 .cx-queue::before,
.cx-v2 .cx-queue::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 22px;
  z-index: 2;
  pointer-events: none;
}
.cx-v2 .cx-queue::before { top: 0;    background: linear-gradient(to bottom, #0A1422 0%, transparent 100%); }
.cx-v2 .cx-queue::after  { bottom: 0; background: linear-gradient(to top,    #0A1422 0%, transparent 100%); }
.cx-v2 .cx-queue-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.cx-v2 .cx-q-row {
  display: grid;
  grid-template-columns: 20px 70px 1fr 36px 32px;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(255,255,255,.035);
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
}
.cx-v2 .cx-ch {
  width: 20px; height: 20px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.cx-v2 .cx-ch-chat  { background: rgba(147,197,253,.18); color: #93c5fd; }
.cx-v2 .cx-ch-email { background: rgba(110,231,168,.18); color: #6ee7a8; }
.cx-v2 .cx-ch-voice { background: rgba(244,168,37,.18); color: var(--accent); }
.cx-v2 .cx-ch-sms   { background: rgba(252,211,77,.18); color: #fcd34d; }
.cx-v2 .cx-q-name {
  color: rgba(255,255,255,.85);
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cx-v2 .cx-q-msg {
  color: rgba(255,255,255,.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .68rem;
}
.cx-v2 .cx-q-wait {
  color: rgba(255,255,255,.5);
  font-size: .62rem;
  text-align: right;
  letter-spacing: .04em;
}
.cx-v2 .cx-q-st {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: #0A1422;
}
.cx-v2 .cx-st-rep { background: var(--accent); }
.cx-v2 .cx-st-liv { background: #4ade80; }
.cx-v2 .cx-st-que { background: rgba(255,255,255,.22); color: rgba(255,255,255,.92); }
.cx-v2 .cx-st-esc { background: #f87171; color: #fff; }

/* ---- Gauge pane ---- */
.cx-v2 .cx-gauge-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: 14px 14px 24px;
}
.cx-v2 .cx-gauge-head {
  font-size: .58rem;
  letter-spacing: .25em;
  color: rgba(255,255,255,.42);
  font-weight: 600;
  text-align: center;
  margin-bottom: 4px;
}
.cx-v2 .cx-gauge-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -4px;
}
.cx-v2 .cx-gauge {
  width: 100%;
  max-width: 220px;
  height: auto;
}
.cx-v2 .cx-gauge-arc {
  transition: stroke-dashoffset 1.8s var(--t);
}
.cx-v2 .cx-gauge.drawn .cx-gauge-arc {
  stroke-dashoffset: 7; /* 100 - 93 */
}

/* channel mini-meters */
.cx-v2 .cx-meters {
  list-style: none;
  padding: 0;
  margin: 4px 6px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cx-v2 .cx-meter {
  display: grid;
  grid-template-columns: 46px 1fr 24px;
  align-items: center;
  gap: 8px;
  font-size: .58rem;
}
.cx-v2 .cx-meter-label {
  color: rgba(255,255,255,.42);
  letter-spacing: .18em;
  font-weight: 700;
}
.cx-v2 .cx-meter-bar {
  position: relative;
  height: 4px;
  background: rgba(255,255,255,.06);
  border-radius: 4px;
  overflow: hidden;
}
.cx-v2 .cx-meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  transition: width 1.2s var(--t);
}
.cx-v2 .cx-console.in .cx-meter-fill { width: var(--w); }
.cx-v2 .cx-meter-val {
  text-align: right;
  color: rgba(255,255,255,.7);
  font-variant-numeric: tabular-nums;
}

.cx-v2 .cx-pane-foot {
  position: absolute;
  left: 16px; right: 16px; bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .58rem;
  letter-spacing: .22em;
  color: rgba(255,255,255,.32);
}
.cx-v2 .cx-pane-foot-r { color: rgba(244,168,37,.7); }
.cx-v2 .cx-pane-foot-ok { color: #6ee7a8; }
.cx-v2 .cx-pane-foot-gauge { left: 16px; right: 16px; bottom: 6px; }

/* ---- Conversation log ---- */
.cx-v2 .cx-log {
  position: relative;
  height: 156px;
  overflow: hidden;
}
.cx-v2 .cx-log::before,
.cx-v2 .cx-log::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 26px;
  z-index: 2;
  pointer-events: none;
}
.cx-v2 .cx-log::before { top: 0;    background: linear-gradient(to bottom, #0A1422 0%, transparent 100%); }
.cx-v2 .cx-log::after  { bottom: 0; background: linear-gradient(to top,    #0A1422 0%, transparent 100%); }
.cx-v2 .cx-log-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
}
.cx-v2 .cx-log-row {
  display: grid;
  grid-template-columns: 42px 50px 1fr 80px;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,.035);
  font-size: .68rem;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.cx-v2 .cx-log-t { color: rgba(255,255,255,.35); }
.cx-v2 .cx-log-ch {
  color: rgba(255,255,255,.55);
  font-weight: 700;
  letter-spacing: .12em;
  font-size: .58rem;
}
.cx-v2 .cx-log-msg {
  color: rgba(255,255,255,.65);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cx-v2 .cx-log-tag {
  text-align: right;
  font-weight: 800;
  letter-spacing: .1em;
  font-size: .58rem;
}
.cx-v2 .cx-tag-rep  { color: var(--accent); }
.cx-v2 .cx-tag-res  { color: #6ee7a8; }
.cx-v2 .cx-tag-cls  { color: rgba(255,255,255,.5); }
.cx-v2 .cx-tag-fwd  { color: #93c5fd; }
.cx-v2 .cx-tag-csat { color: #6ee7a8; }

/* ---- Console footer ---- */
.cx-v2 .cx-console-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 16px;
  border-top: 1px solid rgba(255,255,255,.05);
  font-size: .62rem;
  letter-spacing: .15em;
  color: rgba(255,255,255,.42);
}
.cx-v2 .cx-console-foot strong { color: #fff; font-weight: 700; }
.cx-v2 .cx-console-foot .cx-good { color: #6ee7a8; }
.cx-v2 .cx-console-foot .cx-accent { color: var(--accent); }

/* ---------- "Behind every conversation" photo band ---------- */
.cx-v2 .cx-band {
  background: linear-gradient(180deg, var(--primary-deep) 0%, var(--primary) 100%);
  color: #fff;
  padding: 100px 0 110px;
  position: relative;
}
.cx-v2 .cx-band::before,
.cx-v2 .cx-band::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 40px;
  pointer-events: none;
}
.cx-v2 .cx-band::before { top: 0;    background: linear-gradient(to bottom, var(--primary-deep) 0%, transparent 100%); }
.cx-v2 .cx-band::after  { bottom: 0; background: linear-gradient(to top,    var(--primary-deep) 0%, transparent 100%); }
.cx-v2 .cx-band-head {
  text-align: center;
  margin-bottom: 48px;
}
.cx-v2 .cx-band-head h2 {
  margin-top: 14px;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  color: #fff;
  letter-spacing: -.025em;
}
.cx-v2 .cx-band-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cx-v2 .cx-band-card { position: relative; }
.cx-v2 .cx-band-img {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: #0A1422;
  aspect-ratio: 4 / 5;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1s var(--t);
}
.cx-v2 .cx-band-card.in .cx-band-img { clip-path: inset(0 0 0 0); }
.cx-v2 .cx-band-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.85) saturate(.85);
  transform: scale(1.02);
  transition: transform 1.2s var(--t), filter .6s var(--t);
}
.cx-v2 .cx-band-card:hover .cx-band-img img {
  transform: scale(1.06);
  filter: brightness(1) saturate(1);
}
.cx-v2 .cx-band-card figcaption {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 16px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .7s var(--t) .3s, transform .7s var(--t) .3s;
}
.cx-v2 .cx-band-card.in figcaption { opacity: 1; transform: translateY(0); }
.cx-v2 .cx-band-num {
  font-size: .72rem;
  letter-spacing: .25em;
  color: var(--accent);
  font-weight: 700;
}
.cx-v2 .cx-band-cap {
  font-size: 1.02rem;
  color: #fff;
  font-weight: 600;
  letter-spacing: -.01em;
}
.cx-v2 .cx-band-quote {
  margin: 56px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  color: rgba(255,255,255,.78);
  line-height: 1.45;
  letter-spacing: -.01em;
}

/* ---------- Why-strip — numeric counter polish ---------- */
.cx-v2 .why-strip-num {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.cx-v2 .why-strip-suffix {
  font-size: 1.6rem;
  color: var(--accent);
  font-weight: 700;
}
.cx-v2 .cx-num-prefix {
  font-size: 1.6rem;
  color: var(--accent);
  font-weight: 700;
  margin-right: 2px;
}

/* ---------- CTA — amber accent stripe ---------- */
.cx-v2 .sd-cta {
  position: relative;
  overflow: hidden;
}
.cx-v2 .sd-cta::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent) 0%, transparent 100%);
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .cx-v2 .cx-hero-grid-inner {
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .cx-v2 .cx-console { max-width: 600px; margin: 0 auto; }
}
@media (max-width: 960px) {
  .cx-v2 .cx-hero-content { padding-top: 120px; padding-bottom: 64px; }
  .cx-v2 .cx-band-grid { grid-template-columns: 1fr; gap: 24px; }
  .cx-v2 .cx-band-img { aspect-ratio: 16 / 10; }
  .cx-v2 .cx-band { padding: 80px 0 90px; }
}
@media (max-width: 640px) {
  .cx-v2 .cx-status { font-size: .62rem; gap: 6px; }
  .cx-v2 .cx-status-hide-sm { display: none; }
  .cx-v2 .cx-hero-meta { gap: 14px; }
  .cx-v2 .cx-meta-rule { display: none; }
  .cx-v2 .cx-meta-item .cx-meta-head { font-size: .92rem; }
  .cx-v2 .cx-console-row { grid-template-columns: 1fr; }
  .cx-v2 .cx-queue-pane { border-right: none; border-bottom: 1px solid rgba(255,255,255,.05); }
  .cx-v2 .cx-gauge-pane { min-height: 240px; padding-bottom: 32px; }
  .cx-v2 .cx-q-row { grid-template-columns: 18px 56px 1fr 30px 28px; padding: 8px 12px; font-size: .66rem; gap: 6px; }
  .cx-v2 .cx-log { height: 140px; }
  .cx-v2 .cx-log-row { grid-template-columns: 38px 44px 1fr 64px; padding: 7px 12px; font-size: .64rem; gap: 6px; }
  .cx-v2 .cx-console-foot { font-size: .56rem; padding: 8px 12px; gap: 6px; }
  .cx-v2 .cx-band-quote { font-size: 1.05rem; }
}

/* ---------- Reduced motion: freeze all CX-v2 perpetuals ---------- */
@media (prefers-reduced-motion: reduce) {
  .cx-v2 .cx-online-dot,
  .cx-v2 .cx-queue-track,
  .cx-v2 .cx-log-track,
  .cx-v2 .cx-hero-photo { animation: none !important; transition: none !important; }
  .cx-v2 .cx-band-img { clip-path: none !important; }
  .cx-v2 .cx-band-card figcaption { opacity: 1 !important; transform: none !important; }
  .cx-v2 .cx-gauge-arc { stroke-dashoffset: 7 !important; transition: none !important; }
  .cx-v2 .cx-meter-fill { width: var(--w) !important; transition: none !important; }
}

/* =====================================================
   Shared v2 hero shell — Digital Marketing, Remote IT,
   Translators all use the same hero scaffolding. Each gets
   its own prefix-scoped overrides for content-specific UI.
   ===================================================== */
.dm-v2 .hero, .it-v2 .hero, .tr-v2 .hero {
  padding: 0;
  min-height: 100dvh;
  background: var(--primary-deep);
  display: flex;
  align-items: center;
  isolation: isolate;
}
.dm-v2 .hero::before, .it-v2 .hero::before, .tr-v2 .hero::before { display: none; }
.dm-v2 .hero-page, .it-v2 .hero-page, .tr-v2 .hero-page { padding: 0; min-height: auto; }

/* hero bg layer shells — image path set per page below */
.dm-v2 .dm-hero-bg, .it-v2 .it-hero-bg, .tr-v2 .tr-hero-bg {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.dm-v2 .dm-hero-photo, .it-v2 .it-hero-photo, .tr-v2 .tr-hero-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  filter: grayscale(55%) brightness(.6) contrast(1.1);
  opacity: .14;
  will-change: transform;
}
.dm-v2 .dm-hero-photo { background-image: url('images/dm/hero-bg.jpg?v=2026-05-23'); }
.it-v2 .it-hero-photo { background-image: url('images/it/hero-bg.jpg?v=2026-05-23'); }
.tr-v2 .tr-hero-photo { background-image: url('images/tr/hero-bg.jpg?v=2026-05-23'); }

.dm-v2 .dm-hero-veil, .it-v2 .it-hero-veil, .tr-v2 .tr-hero-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 75% 30%, rgba(244,168,37,.10) 0%, transparent 55%),
    linear-gradient(135deg, rgba(6,17,40,.94) 0%, rgba(11,29,65,.88) 60%, rgba(6,17,40,.96) 100%);
}
.dm-v2 .dm-hero-grid, .it-v2 .it-hero-grid, .tr-v2 .tr-hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 80px 80px;
  -webkit-mask-image: radial-gradient(ellipse at 60% 35%, black 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at 60% 35%, black 30%, transparent 75%);
}
.dm-v2 .dm-hero-glow, .it-v2 .it-hero-glow, .tr-v2 .tr-hero-glow {
  position: absolute; right: -8%; top: 5%;
  width: 640px; height: 640px;
  border-radius: 50%;
  background: rgba(244,168,37,.16);
  filter: blur(120px);
}
.dm-v2 .dm-hero-content, .it-v2 .it-hero-content, .tr-v2 .tr-hero-content {
  position: relative; z-index: 3;
  text-align: left;
  padding-top: 130px; padding-bottom: 80px;
  width: 100%;
}

/* status strips */
.dm-v2 .dm-status, .it-v2 .it-status, .tr-v2 .tr-status {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-size: .72rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 28px;
}
.dm-v2 .dm-status-live, .it-v2 .it-status-live, .tr-v2 .tr-status-live {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: 999px; letter-spacing: .22em;
  background: rgba(34,197,94,.10); border: 1px solid rgba(34,197,94,.25); color: #6ee7a8;
}
.dm-v2 .dm-status-live .pulse, .it-v2 .it-status-live .pulse, .tr-v2 .tr-status-live .pulse { background: #4ade80; }
.dm-v2 .dm-status-live .pulse::after, .it-v2 .it-status-live .pulse::after, .tr-v2 .tr-status-live .pulse::after { background: #4ade80; }
.dm-v2 .dm-status-dot, .it-v2 .it-status-dot, .tr-v2 .tr-status-dot { color: rgba(255,255,255,.2); letter-spacing: 0; }
.dm-v2 .dm-status strong, .it-v2 .it-status strong, .tr-v2 .tr-status strong { color: var(--accent); font-weight: 700; }

/* chips */
.dm-v2 .dm-chips, .it-v2 .it-chips, .tr-v2 .tr-chips {
  display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; align-items: center;
}
.dm-v2 .dm-chips .breadcrumb, .it-v2 .it-chips .breadcrumb, .tr-v2 .tr-chips .breadcrumb {
  margin-bottom: 0;
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.1);
}
.dm-v2 .dm-pill, .it-v2 .it-pill, .tr-v2 .tr-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  border: 1px solid rgba(244,168,37,.4);
  background: rgba(244,168,37,.05);
  color: var(--accent); font-size: .78rem; letter-spacing: .04em;
}

/* asymmetric grid + copy */
.dm-v2 .dm-hero-grid-inner, .it-v2 .it-hero-grid-inner, .tr-v2 .tr-hero-grid-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
.dm-v2 .dm-hero-copy, .it-v2 .it-hero-copy, .tr-v2 .tr-hero-copy { max-width: 100%; }
.dm-v2 .dm-hero-title, .it-v2 .it-hero-title, .tr-v2 .tr-hero-title {
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  line-height: .98; letter-spacing: -.025em; font-weight: 800;
  margin: 0; color: #fff;
}
.dm-v2 .dm-line, .it-v2 .it-line, .tr-v2 .tr-line { display: block; }
.dm-v2 .dm-line-italic, .it-v2 .it-line-italic, .tr-v2 .tr-line-italic {
  font-style: italic; color: var(--accent);
}
.dm-v2 .dm-hero-sub, .it-v2 .it-hero-sub, .tr-v2 .tr-hero-sub {
  margin-top: 24px; max-width: 56ch;
  font-size: 1.05rem; line-height: 1.55; color: rgba(255,255,255,.7);
}
.dm-v2 .dm-hero-ctas, .it-v2 .it-hero-ctas, .tr-v2 .tr-hero-ctas {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px;
}
.dm-v2 .dm-hero-meta, .it-v2 .it-hero-meta, .tr-v2 .tr-hero-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 44px;
}
.dm-v2 .dm-meta-item .dm-meta-head, .it-v2 .it-meta-item .it-meta-head, .tr-v2 .tr-meta-item .tr-meta-head {
  font-size: .98rem; font-weight: 700; color: #fff; letter-spacing: -.015em;
}
.dm-v2 .dm-meta-item .dm-meta-sub, .it-v2 .it-meta-item .it-meta-sub, .tr-v2 .tr-meta-item .tr-meta-sub {
  margin-top: 4px; font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.45);
}
.dm-v2 .dm-meta-rule, .it-v2 .it-meta-rule, .tr-v2 .tr-meta-rule {
  width: 1px; height: 30px; background: rgba(255,255,255,.1);
}

/* shared console chrome shell */
.dm-v2 .dm-console, .it-v2 .it-console, .tr-v2 .tr-console {
  position: relative;
  background: #0A1422;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.02);
}
.dm-v2 .dm-console.reveal, .it-v2 .it-console.reveal, .tr-v2 .tr-console.reveal {
  transform: translateY(30px) scale(.96);
}
.dm-v2 .dm-console.reveal.in, .it-v2 .it-console.reveal.in, .tr-v2 .tr-console.reveal.in {
  transform: translateY(0) scale(1);
}
.dm-v2 .dm-console-chrome, .it-v2 .it-console-chrome, .tr-v2 .tr-console-chrome {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.012);
}
.dm-v2 .dm-chrome-dots, .it-v2 .it-chrome-dots, .tr-v2 .tr-chrome-dots { display: flex; gap: 6px; }
.dm-v2 .dm-chrome-dots span, .it-v2 .it-chrome-dots span, .tr-v2 .tr-chrome-dots span {
  width: 9px; height: 9px; border-radius: 50%; background: rgba(244,113,113,.5);
}
.dm-v2 .dm-chrome-dots span:nth-child(2), .it-v2 .it-chrome-dots span:nth-child(2), .tr-v2 .tr-chrome-dots span:nth-child(2) { background: rgba(252,211,77,.55); }
.dm-v2 .dm-chrome-dots span:nth-child(3), .it-v2 .it-chrome-dots span:nth-child(3), .tr-v2 .tr-chrome-dots span:nth-child(3) { background: rgba(74,222,128,.55); }
.dm-v2 .dm-chrome-title, .it-v2 .it-chrome-title, .tr-v2 .tr-chrome-title {
  font-size: .62rem; letter-spacing: .25em; color: rgba(255,255,255,.42); font-weight: 600;
}
.dm-v2 .dm-chrome-status, .it-v2 .it-chrome-status, .tr-v2 .tr-chrome-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .62rem; letter-spacing: .25em; color: #6ee7a8; font-weight: 600;
}
.dm-v2 .dm-online-dot, .it-v2 .it-online-dot, .tr-v2 .tr-online-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #4ade80;
  animation: cx-pulse-dot 1.8s ease-in-out infinite;
}
.dm-v2 .dm-console-row, .it-v2 .it-console-row, .tr-v2 .tr-console-row {
  display: grid; grid-template-columns: 1.2fr 1fr;
  border-bottom: 1px solid rgba(255,255,255,.05);
}

/* shared pane footer */
.dm-v2 .dm-pane-foot, .it-v2 .it-pane-foot, .tr-v2 .tr-pane-foot {
  position: absolute; left: 16px; right: 16px; bottom: 8px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: .58rem; letter-spacing: .22em; color: rgba(255,255,255,.32);
}
.dm-v2 .dm-pane-foot-r, .it-v2 .it-pane-foot-r, .tr-v2 .tr-pane-foot-r { color: rgba(244,168,37,.7); }
.dm-v2 .dm-pane-foot-ok, .it-v2 .it-pane-foot-ok, .tr-v2 .tr-pane-foot-ok { color: #6ee7a8; }

/* shared console footer */
.dm-v2 .dm-console-foot, .it-v2 .it-console-foot, .tr-v2 .tr-console-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 9px 16px;
  border-top: 1px solid rgba(255,255,255,.05);
  font-size: .62rem; letter-spacing: .15em; color: rgba(255,255,255,.42);
}
.dm-v2 .dm-console-foot strong, .it-v2 .it-console-foot strong, .tr-v2 .tr-console-foot strong {
  color: #fff; font-weight: 700;
}
.dm-v2 .dm-good, .it-v2 .it-good, .tr-v2 .tr-good { color: #6ee7a8; }
.dm-v2 .dm-accent, .it-v2 .it-accent, .tr-v2 .tr-accent { color: var(--accent); }

/* shared photo band */
.dm-v2 .dm-band, .it-v2 .it-band, .tr-v2 .tr-band {
  background: linear-gradient(180deg, var(--primary-deep) 0%, var(--primary) 100%);
  color: #fff; padding: 100px 0 110px; position: relative;
}
.dm-v2 .dm-band::before, .dm-v2 .dm-band::after,
.it-v2 .it-band::before, .it-v2 .it-band::after,
.tr-v2 .tr-band::before, .tr-v2 .tr-band::after {
  content: ''; position: absolute; left: 0; right: 0;
  height: 40px; pointer-events: none;
}
.dm-v2 .dm-band::before, .it-v2 .it-band::before, .tr-v2 .tr-band::before {
  top: 0; background: linear-gradient(to bottom, var(--primary-deep) 0%, transparent 100%);
}
.dm-v2 .dm-band::after, .it-v2 .it-band::after, .tr-v2 .tr-band::after {
  bottom: 0; background: linear-gradient(to top, var(--primary-deep) 0%, transparent 100%);
}
.dm-v2 .dm-band-head, .it-v2 .it-band-head, .tr-v2 .tr-band-head {
  text-align: center; margin-bottom: 48px;
}
.dm-v2 .dm-band-head h2, .it-v2 .it-band-head h2, .tr-v2 .tr-band-head h2 {
  margin-top: 14px;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  color: #fff; letter-spacing: -.025em;
}
.dm-v2 .dm-band-grid, .it-v2 .it-band-grid, .tr-v2 .tr-band-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.dm-v2 .dm-band-card, .it-v2 .it-band-card, .tr-v2 .tr-band-card { position: relative; }
.dm-v2 .dm-band-img, .it-v2 .it-band-img, .tr-v2 .tr-band-img {
  position: relative; overflow: hidden;
  border-radius: var(--radius); background: #0A1422;
  aspect-ratio: 4 / 5;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1s var(--t);
}
.dm-v2 .dm-band-card.in .dm-band-img,
.it-v2 .it-band-card.in .it-band-img,
.tr-v2 .tr-band-card.in .tr-band-img { clip-path: inset(0 0 0 0); }
.dm-v2 .dm-band-img img, .it-v2 .it-band-img img, .tr-v2 .tr-band-img img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.85) saturate(.85);
  transform: scale(1.02);
  transition: transform 1.2s var(--t), filter .6s var(--t);
}
.dm-v2 .dm-band-card:hover .dm-band-img img,
.it-v2 .it-band-card:hover .it-band-img img,
.tr-v2 .tr-band-card:hover .tr-band-img img {
  transform: scale(1.06); filter: brightness(1) saturate(1);
}
.dm-v2 .dm-band-card figcaption,
.it-v2 .it-band-card figcaption,
.tr-v2 .tr-band-card figcaption {
  display: flex; align-items: baseline; gap: 12px; margin-top: 16px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .7s var(--t) .3s, transform .7s var(--t) .3s;
}
.dm-v2 .dm-band-card.in figcaption,
.it-v2 .it-band-card.in figcaption,
.tr-v2 .tr-band-card.in figcaption { opacity: 1; transform: translateY(0); }
.dm-v2 .dm-band-num, .it-v2 .it-band-num, .tr-v2 .tr-band-num {
  font-size: .72rem; letter-spacing: .25em; color: var(--accent); font-weight: 700;
}
.dm-v2 .dm-band-cap, .it-v2 .it-band-cap, .tr-v2 .tr-band-cap {
  font-size: 1.02rem; color: #fff; font-weight: 600; letter-spacing: -.01em;
}
.dm-v2 .dm-band-quote, .it-v2 .it-band-quote, .tr-v2 .tr-band-quote {
  margin: 56px auto 0; max-width: 720px; text-align: center;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  color: rgba(255,255,255,.78); line-height: 1.45; letter-spacing: -.01em;
}

/* shared why-strip numerics */
.dm-v2 .why-strip-num, .it-v2 .why-strip-num, .tr-v2 .why-strip-num {
  display: inline-flex; align-items: baseline; gap: 1px;
}
.dm-v2 .why-strip-suffix, .it-v2 .why-strip-suffix, .tr-v2 .why-strip-suffix {
  font-size: 1.6rem; color: var(--accent); font-weight: 700;
}
.dm-v2 .dm-num-prefix, .it-v2 .it-num-prefix, .tr-v2 .tr-num-prefix {
  font-size: 1.6rem; color: var(--accent); font-weight: 700; margin-right: 2px;
}

/* shared CTA stripe */
.dm-v2 .sd-cta, .it-v2 .sd-cta, .tr-v2 .sd-cta { position: relative; overflow: hidden; }
.dm-v2 .sd-cta::before, .it-v2 .sd-cta::before, .tr-v2 .sd-cta::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--accent) 0%, transparent 100%);
}

/* shared responsive collapse */
@media (max-width: 1100px) {
  .dm-v2 .dm-hero-grid-inner, .it-v2 .it-hero-grid-inner, .tr-v2 .tr-hero-grid-inner {
    grid-template-columns: 1fr; gap: 56px;
  }
  .dm-v2 .dm-console, .it-v2 .it-console, .tr-v2 .tr-console {
    max-width: 600px; margin: 0 auto;
  }
}
@media (max-width: 960px) {
  .dm-v2 .dm-hero-content, .it-v2 .it-hero-content, .tr-v2 .tr-hero-content {
    padding-top: 120px; padding-bottom: 64px;
  }
  .dm-v2 .dm-band-grid, .it-v2 .it-band-grid, .tr-v2 .tr-band-grid {
    grid-template-columns: 1fr; gap: 24px;
  }
  .dm-v2 .dm-band-img, .it-v2 .it-band-img, .tr-v2 .tr-band-img { aspect-ratio: 16 / 10; }
  .dm-v2 .dm-band, .it-v2 .it-band, .tr-v2 .tr-band { padding: 80px 0 90px; }
}
@media (max-width: 640px) {
  .dm-v2 .dm-status, .it-v2 .it-status, .tr-v2 .tr-status { font-size: .62rem; gap: 6px; }
  .dm-v2 .dm-status-hide-sm, .it-v2 .it-status-hide-sm, .tr-v2 .tr-status-hide-sm { display: none; }
  .dm-v2 .dm-hero-meta, .it-v2 .it-hero-meta, .tr-v2 .tr-hero-meta { gap: 14px; }
  .dm-v2 .dm-meta-rule, .it-v2 .it-meta-rule, .tr-v2 .tr-meta-rule { display: none; }
  .dm-v2 .dm-meta-item .dm-meta-head, .it-v2 .it-meta-item .it-meta-head, .tr-v2 .tr-meta-item .tr-meta-head {
    font-size: .92rem;
  }
  .dm-v2 .dm-console-row, .it-v2 .it-console-row, .tr-v2 .tr-console-row {
    grid-template-columns: 1fr;
  }
  .dm-v2 .dm-band-quote, .it-v2 .it-band-quote, .tr-v2 .tr-band-quote { font-size: 1.05rem; }
}

/* shared reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .dm-v2 .dm-online-dot, .it-v2 .it-online-dot, .tr-v2 .tr-online-dot,
  .dm-v2 .dm-log-track, .it-v2 .it-log-track, .tr-v2 .tr-log-track,
  .it-v2 .it-queue-track,
  .dm-v2 .dm-hero-photo, .it-v2 .it-hero-photo, .tr-v2 .tr-hero-photo,
  .tr-v2 .tr-cursor {
    animation: none !important; transition: none !important;
  }
  .dm-v2 .dm-band-img, .it-v2 .it-band-img, .tr-v2 .tr-band-img { clip-path: none !important; }
  .dm-v2 .dm-band-card figcaption, .it-v2 .it-band-card figcaption, .tr-v2 .tr-band-card figcaption {
    opacity: 1 !important; transform: none !important;
  }
}

/* =====================================================
   DM-specific console internals (funnel + KPI cards)
   ===================================================== */
.dm-v2 .dm-funnel-pane {
  position: relative;
  border-right: 1px solid rgba(255,255,255,.05);
  display: flex; flex-direction: column;
  min-height: 280px; padding: 14px 16px 28px;
}
.dm-v2 .dm-funnel-head {
  font-size: .58rem; letter-spacing: .25em; color: rgba(255,255,255,.42);
  font-weight: 600; margin-bottom: 14px;
}
.dm-v2 .dm-funnel {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px; flex: 1;
}
.dm-v2 .dm-funnel-stage {
  position: relative;
  display: flex; align-items: center; gap: 12px;
}
.dm-v2 .dm-funnel-bar {
  height: 26px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(244,168,37,.55), rgba(244,168,37,.18));
  width: 0; transition: width 1.2s var(--t);
}
.dm-v2 .dm-funnel-bar-win { background: linear-gradient(90deg, #4ade80, rgba(74,222,128,.4)); }
.dm-v2 .dm-console.in .dm-funnel-bar { width: var(--w); }
.dm-v2 .dm-funnel-label {
  display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0;
}
.dm-v2 .dm-funnel-name { font-size: .58rem; letter-spacing: .2em; color: rgba(255,255,255,.6); font-weight: 700; }
.dm-v2 .dm-funnel-val { font-size: .82rem; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.dm-v2 .dm-funnel-rate { font-size: .62rem; color: #6ee7a8; margin-left: 6px; letter-spacing: .04em; font-weight: 600; }

.dm-v2 .dm-kpi-pane {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 280px; padding: 14px 14px 28px;
}
.dm-v2 .dm-kpi-head {
  font-size: .58rem; letter-spacing: .25em; color: rgba(255,255,255,.42);
  font-weight: 600; margin-bottom: 12px; text-align: left;
}
.dm-v2 .dm-kpi-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1;
}
.dm-v2 .dm-kpi-card {
  padding: 12px 14px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--radius-sm);
}
.dm-v2 .dm-kpi-label { font-size: .56rem; letter-spacing: .25em; color: rgba(255,255,255,.42); font-weight: 700; }
.dm-v2 .dm-kpi-val { margin-top: 8px; font-size: 1.4rem; font-weight: 800; color: #fff; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dm-v2 .dm-kpi-unit { font-size: .9rem; color: var(--accent); font-weight: 700; margin-left: 1px; }
.dm-v2 .dm-kpi-trend { margin-top: 6px; font-size: .62rem; letter-spacing: .04em; font-weight: 600; }
.dm-v2 .dm-kpi-up   { color: #6ee7a8; }
.dm-v2 .dm-kpi-down { color: #6ee7a8; }

/* DM ad-activity log */
.dm-v2 .dm-log {
  position: relative; height: 156px; overflow: hidden;
}
.dm-v2 .dm-log::before, .dm-v2 .dm-log::after {
  content: ''; position: absolute; left: 0; right: 0; height: 26px; z-index: 2; pointer-events: none;
}
.dm-v2 .dm-log::before { top: 0;    background: linear-gradient(to bottom, #0A1422 0%, transparent 100%); }
.dm-v2 .dm-log::after  { bottom: 0; background: linear-gradient(to top,    #0A1422 0%, transparent 100%); }
.dm-v2 .dm-log-track { display: flex; flex-direction: column; will-change: transform; }
.dm-v2 .dm-log-row {
  display: grid; grid-template-columns: 42px 48px 1fr 50px;
  align-items: center; gap: 10px; padding: 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,.035);
  font-size: .68rem; letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
.dm-v2 .dm-log-t { color: rgba(255,255,255,.35); }
.dm-v2 .dm-log-pl {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; padding: 0 6px; border-radius: 4px;
  font-size: .54rem; font-weight: 800; letter-spacing: .1em;
  color: #0A1422;
}
.dm-v2 .dm-pl-meta  { background: #93c5fd; }
.dm-v2 .dm-pl-goog  { background: #fcd34d; }
.dm-v2 .dm-pl-li    { background: #6ee7a8; }
.dm-v2 .dm-pl-email { background: rgba(255,255,255,.4); }
.dm-v2 .dm-log-msg {
  color: rgba(255,255,255,.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dm-v2 .dm-log-tag {
  text-align: right; font-weight: 800; letter-spacing: .08em; font-size: .58rem;
}
.dm-v2 .dm-tag-up   { color: #6ee7a8; }
.dm-v2 .dm-tag-win  { color: var(--accent); }
.dm-v2 .dm-tag-paus { color: rgba(255,255,255,.5); }

/* DM responsive */
@media (max-width: 640px) {
  .dm-v2 .dm-funnel-pane { border-right: none; border-bottom: 1px solid rgba(255,255,255,.05); }
  .dm-v2 .dm-kpi-grid { grid-template-columns: 1fr 1fr; }
  .dm-v2 .dm-log { height: 140px; }
  .dm-v2 .dm-log-row { grid-template-columns: 38px 44px 1fr 44px; padding: 7px 12px; font-size: .64rem; gap: 6px; }
  .dm-v2 .dm-console-foot { font-size: .56rem; padding: 8px 12px; gap: 6px; }
}

/* =====================================================
   IT-specific console internals (ticket queue + service grid)
   ===================================================== */
.it-v2 .it-queue-pane {
  position: relative;
  border-right: 1px solid rgba(255,255,255,.05);
  display: flex; flex-direction: column;
  min-height: 280px;
}
.it-v2 .it-queue-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 8px;
  font-size: .58rem; letter-spacing: .25em; color: rgba(255,255,255,.42);
  border-bottom: 1px solid rgba(255,255,255,.04); font-weight: 600;
}
.it-v2 .it-queue-count {
  background: var(--accent); color: #0A1422;
  font-weight: 800; font-size: .58rem; padding: 2px 8px;
  border-radius: 4px; letter-spacing: .1em;
}
.it-v2 .it-queue {
  flex: 1; position: relative; overflow: hidden; min-height: 220px;
}
.it-v2 .it-queue::before, .it-v2 .it-queue::after {
  content: ''; position: absolute; left: 0; right: 0; height: 22px; z-index: 2; pointer-events: none;
}
.it-v2 .it-queue::before { top: 0;    background: linear-gradient(to bottom, #0A1422 0%, transparent 100%); }
.it-v2 .it-queue::after  { bottom: 0; background: linear-gradient(to top,    #0A1422 0%, transparent 100%); }
.it-v2 .it-queue-track { display: flex; flex-direction: column; will-change: transform; }
.it-v2 .it-q-row {
  display: grid; grid-template-columns: 26px 46px 1fr 36px;
  align-items: center; gap: 10px; padding: 9px 14px;
  border-bottom: 1px solid rgba(255,255,255,.035);
  font-size: .7rem; font-variant-numeric: tabular-nums;
}
.it-v2 .it-q-p {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; padding: 0 4px; border-radius: 4px;
  font-size: .56rem; font-weight: 800; letter-spacing: .08em;
  color: #fff;
}
.it-v2 .it-p-p1 { background: #ef4444; }
.it-v2 .it-p-p2 { background: #f97316; color: #0A1422; }
.it-v2 .it-p-p3 { background: #3b82f6; }
.it-v2 .it-p-p4 { background: rgba(255,255,255,.25); color: rgba(255,255,255,.9); }
.it-v2 .it-q-id { color: rgba(255,255,255,.7); font-weight: 700; font-size: .66rem; }
.it-v2 .it-q-msg {
  color: rgba(255,255,255,.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: .66rem;
}
.it-v2 .it-q-tag {
  text-align: right; font-weight: 800; letter-spacing: .08em; font-size: .54rem;
}
.it-v2 .it-tag-pro { color: var(--accent); }
.it-v2 .it-tag-que { color: rgba(255,255,255,.5); }
.it-v2 .it-tag-res { color: #6ee7a8; }

.it-v2 .it-grid-pane {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 280px; padding: 14px 14px 28px;
}
.it-v2 .it-grid-head {
  font-size: .58rem; letter-spacing: .25em; color: rgba(255,255,255,.42);
  font-weight: 600; margin-bottom: 12px;
}
.it-v2 .it-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; flex: 1;
}
.it-v2 .it-cell {
  position: relative;
  padding: 8px 6px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.05);
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  border-left: 3px solid rgba(255,255,255,.2);
}
.it-v2 .it-cell-ok   { border-left-color: #4ade80; }
.it-v2 .it-cell-warn { border-left-color: #fcd34d; }
.it-v2 .it-cell-down { border-left-color: #ef4444; }
.it-v2 .it-cell-name { font-size: .56rem; letter-spacing: .12em; color: rgba(255,255,255,.75); font-weight: 700; }
.it-v2 .it-cell-up { font-size: .6rem; color: rgba(255,255,255,.5); font-variant-numeric: tabular-nums; }
.it-v2 .it-cell-ok .it-cell-up   { color: #6ee7a8; }
.it-v2 .it-cell-warn .it-cell-up { color: #fcd34d; }

/* IT alert log */
.it-v2 .it-log {
  position: relative; height: 156px; overflow: hidden;
}
.it-v2 .it-log::before, .it-v2 .it-log::after {
  content: ''; position: absolute; left: 0; right: 0; height: 26px; z-index: 2; pointer-events: none;
}
.it-v2 .it-log::before { top: 0;    background: linear-gradient(to bottom, #0A1422 0%, transparent 100%); }
.it-v2 .it-log::after  { bottom: 0; background: linear-gradient(to top,    #0A1422 0%, transparent 100%); }
.it-v2 .it-log-track { display: flex; flex-direction: column; will-change: transform; }
.it-v2 .it-log-row {
  display: grid; grid-template-columns: 42px 76px 1fr 44px;
  align-items: center; gap: 10px; padding: 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,.035);
  font-size: .68rem; letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
.it-v2 .it-log-t { color: rgba(255,255,255,.35); }
.it-v2 .it-log-src { color: rgba(255,255,255,.55); font-weight: 700; letter-spacing: .12em; font-size: .56rem; }
.it-v2 .it-log-msg {
  color: rgba(255,255,255,.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .66rem;
}
.it-v2 .it-log-tag { text-align: right; font-weight: 800; letter-spacing: .08em; font-size: .54rem; }
.it-v2 .it-tag-fix  { color: #6ee7a8; }
.it-v2 .it-tag-roll { color: var(--accent); }
.it-v2 .it-tag-quar { color: #fca5a5; }

/* IT responsive */
@media (max-width: 640px) {
  .it-v2 .it-queue-pane { border-right: none; border-bottom: 1px solid rgba(255,255,255,.05); }
  .it-v2 .it-grid { grid-template-columns: repeat(3, 1fr); }
  .it-v2 .it-log { height: 140px; }
  .it-v2 .it-log-row { grid-template-columns: 38px 64px 1fr 36px; padding: 7px 12px; font-size: .62rem; gap: 6px; }
  .it-v2 .it-q-row { grid-template-columns: 22px 40px 1fr 32px; padding: 8px 12px; font-size: .64rem; gap: 6px; }
  .it-v2 .it-console-foot { font-size: .56rem; padding: 8px 12px; gap: 6px; }
}

/* =====================================================
   Translators-specific console internals (bilingual doc + TEP)
   ===================================================== */
.tr-v2 .tr-doc-pane {
  position: relative;
  border-right: 1px solid rgba(255,255,255,.05);
  display: flex; flex-direction: column;
  min-height: 280px; padding-bottom: 28px;
}
.tr-v2 .tr-doc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 8px;
  font-size: .58rem; letter-spacing: .25em; color: rgba(255,255,255,.42);
  border-bottom: 1px solid rgba(255,255,255,.04); font-weight: 600;
}
.tr-v2 .tr-doc-stage {
  background: var(--accent); color: #0A1422;
  font-weight: 800; font-size: .56rem;
  padding: 2px 8px; border-radius: 4px; letter-spacing: .12em;
}
.tr-v2 .tr-doc-body {
  display: grid; grid-template-columns: 1fr 1fr;
  flex: 1; gap: 0;
}
.tr-v2 .tr-doc-col {
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.tr-v2 .tr-doc-col + .tr-doc-col {
  border-left: 1px solid rgba(255,255,255,.05);
}
.tr-v2 .tr-doc-lang {
  font-size: .54rem; letter-spacing: .25em; color: var(--accent);
  font-weight: 700; margin-bottom: 4px;
}
.tr-v2 .tr-doc-line {
  font-size: .68rem; line-height: 1.45;
  color: rgba(255,255,255,.55);
  margin: 0;
}
.tr-v2 .tr-doc-done { color: rgba(255,255,255,.78); }
.tr-v2 .tr-doc-active {
  color: #fff;
  background: linear-gradient(90deg, rgba(244,168,37,.10), transparent 80%);
  padding: 4px 6px; margin: 0 -6px;
  border-radius: 3px;
}
.tr-v2 .tr-doc-typing {
  color: rgba(255,255,255,.6); font-style: italic;
}
.tr-v2 .tr-cursor {
  display: inline-block; width: 6px; height: 12px;
  background: var(--accent); vertical-align: middle;
  margin-left: 2px;
  animation: tr-cursor-blink 1s steps(2, start) infinite;
}
@keyframes tr-cursor-blink {
  to { opacity: 0; }
}

.tr-v2 .tr-tep-pane {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 280px; padding: 14px 14px 28px;
}
.tr-v2 .tr-tep-head {
  font-size: .58rem; letter-spacing: .25em; color: rgba(255,255,255,.42);
  font-weight: 600; margin-bottom: 12px;
}
.tr-v2 .tr-tep-jobs {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.tr-v2 .tr-tep-job {
  display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 10px;
}
.tr-v2 .tr-tep-meta { display: flex; align-items: center; gap: 6px; }
.tr-v2 .tr-tep-id { color: rgba(255,255,255,.7); font-weight: 700; font-size: .62rem; }
.tr-v2 .tr-tep-pair {
  font-size: .56rem; letter-spacing: .1em; font-weight: 700;
  color: var(--accent);
  padding: 2px 6px; border: 1px solid rgba(244,168,37,.3);
  border-radius: 3px;
}
.tr-v2 .tr-tep-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px;
}
.tr-v2 .tr-tep-step {
  display: inline-flex; align-items: center; justify-content: center;
  height: 20px; border-radius: 3px;
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.35);
  font-size: .56rem; font-weight: 800; letter-spacing: .12em;
  transition: background .35s var(--t), color .35s var(--t);
}
.tr-v2 .tr-tep-bar[data-stage="1"] .tr-tep-step[data-s="T"],
.tr-v2 .tr-tep-bar[data-stage="2"] .tr-tep-step[data-s="T"],
.tr-v2 .tr-tep-bar[data-stage="2"] .tr-tep-step[data-s="E"],
.tr-v2 .tr-tep-bar[data-stage="3"] .tr-tep-step[data-s="T"],
.tr-v2 .tr-tep-bar[data-stage="3"] .tr-tep-step[data-s="E"],
.tr-v2 .tr-tep-bar[data-stage="3"] .tr-tep-step[data-s="P"],
.tr-v2 .tr-tep-bar[data-stage="4"] .tr-tep-step {
  background: var(--accent); color: #0A1422;
}
.tr-v2 .tr-tep-bar[data-stage="1"] .tr-tep-step[data-s="T"] { animation: tr-tep-pulse 1.8s ease-in-out infinite; }
.tr-v2 .tr-tep-bar[data-stage="2"] .tr-tep-step[data-s="E"] { animation: tr-tep-pulse 1.8s ease-in-out infinite; }
.tr-v2 .tr-tep-bar[data-stage="3"] .tr-tep-step[data-s="P"] { animation: tr-tep-pulse 1.8s ease-in-out infinite; }
.tr-v2 .tr-tep-bar[data-stage="4"] .tr-tep-step[data-s="C"] { background: #4ade80; }
@keyframes tr-tep-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

/* TR job log */
.tr-v2 .tr-log {
  position: relative; height: 156px; overflow: hidden;
}
.tr-v2 .tr-log::before, .tr-v2 .tr-log::after {
  content: ''; position: absolute; left: 0; right: 0; height: 26px; z-index: 2; pointer-events: none;
}
.tr-v2 .tr-log::before { top: 0;    background: linear-gradient(to bottom, #0A1422 0%, transparent 100%); }
.tr-v2 .tr-log::after  { bottom: 0; background: linear-gradient(to top,    #0A1422 0%, transparent 100%); }
.tr-v2 .tr-log-track { display: flex; flex-direction: column; will-change: transform; }
.tr-v2 .tr-log-row {
  display: grid; grid-template-columns: 42px 50px 1fr 50px;
  align-items: center; gap: 10px; padding: 8px 16px;
  border-bottom: 1px solid rgba(255,255,255,.035);
  font-size: .68rem; letter-spacing: .01em;
}
.tr-v2 .tr-log-t { color: rgba(255,255,255,.35); }
.tr-v2 .tr-log-pair {
  color: var(--accent); font-weight: 700; font-size: .58rem;
  letter-spacing: .1em;
}
.tr-v2 .tr-log-msg {
  color: rgba(255,255,255,.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .66rem;
}
.tr-v2 .tr-log-tag { text-align: right; font-weight: 800; letter-spacing: .08em; font-size: .56rem; }
.tr-v2 .tr-tag-tra { color: var(--accent); }
.tr-v2 .tr-tag-edi { color: #93c5fd; }
.tr-v2 .tr-tag-pro { color: #fcd34d; }
.tr-v2 .tr-tag-cer { color: #6ee7a8; }

/* TR responsive */
@media (max-width: 640px) {
  .tr-v2 .tr-doc-pane { border-right: none; border-bottom: 1px solid rgba(255,255,255,.05); }
  .tr-v2 .tr-doc-body { grid-template-columns: 1fr; }
  .tr-v2 .tr-doc-col + .tr-doc-col { border-left: none; border-top: 1px solid rgba(255,255,255,.05); }
  .tr-v2 .tr-tep-job { grid-template-columns: 90px 1fr; gap: 8px; }
  .tr-v2 .tr-log { height: 140px; }
  .tr-v2 .tr-log-row { grid-template-columns: 38px 44px 1fr 44px; padding: 7px 12px; font-size: .62rem; gap: 6px; }
  .tr-v2 .tr-console-foot { font-size: .56rem; padding: 8px 12px; gap: 6px; }
}