/* ===== tokens/fonts.css ===== */
/* DCT typefaces.
   No font binaries were provided with the brief, so DM Sans and Inter are
   sourced from Google Fonts. Swap these @font-face rules for self-hosted
   binaries when the official files are available. */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --font-sans: "DM Sans", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
}

/* ===== tokens/colors.css ===== */
/* ============================================================
   DCT AI — Color tokens (v2 — Intelligence Gradient)
   A calm monochrome canvas broken open by ONE signature brand
   gradient that flows across four stops:
       #FB572B → #CF4A6F → #823790 → #5C2C9D
   The gradient is the identity. It appears on headline word
   highlights, AI tags, capability/architecture diagrams, soft
   orbs, network patterns, and the occasional full-gradient CTA.
   Backgrounds stay premium white; enterprise credibility intact.
   ============================================================ */

:root {
  /* ---- Signature brand gradient stops (the ramp) ---- */
  --color-brand-1: #fb572b; /* @kind color */ /* orange — flame start */
  --color-brand-2: #cf4a6f; /* @kind color */ /* rose */
  --color-brand-3: #823790; /* @kind color */ /* magenta-violet */
  --color-brand-4: #5c2c9d; /* @kind color */ /* deep violet — end */

  /* Readable/deep tints of the stops (for text + fills that need contrast) */
  --color-brand-1-strong: #e04519; /* orange, darkened for text on white */
  --color-brand-4-strong: #4a2380; /* deep violet, interactive/link ink */
  --color-brand-1-050: #fff1ec; /* warm orange wash */
  --color-brand-4-050: #f2ecf9; /* soft violet wash — info/code bg */

  /* ---- Legacy product-color aliases (repointed to the new ramp) ----
     Existing components reference these names; they now resolve onto
     the unified gradient stops so nothing breaks and everything
     inherits the DCT AI identity. Prefer --color-brand-1..4 in new work. */
  --color-brand-coral: var(--color-brand-1);
  --color-brand-magenta: var(--color-brand-2);
  --color-brand-blue: var(--color-brand-3); /* was video-blue; now the violet mid-stop */
  --color-brand-purple: var(--color-brand-4);
  --color-brand-blue-deep: var(--color-brand-4-strong); /* interactive / activation */
  --color-brand-blue-700: var(--color-brand-4-strong); /* doc-tag / reference text */
  --color-brand-cyan: var(--color-brand-2); /* atmospheric wash */
  --color-brand-blue-200: var(--color-brand-4-050); /* code / info-tag background */

  /* ---- Surface ---- */
  --color-canvas: #ffffff; /* page background + card surface */
  --color-surface: #f5f3f6; /* subtle section bg — faintly warm-violet neutral */
  --color-surface-soft: #faf9fb; /* quieter section divisions */
  --color-hairline: #e6e3ea; /* 1px input border + primary divider */
  --color-hairline-soft: #efedf2; /* quiet table-row divider */

  /* ---- Text ---- */
  --color-ink: #1a1720; /* primary headline + CTA text, near-black w/ violet cast */
  --color-ink-strong: #100c16; /* deepest ink, hero displays */
  --color-charcoal: #34303a; /* body text on light surfaces */
  --color-slate: #57525f; /* secondary text, metadata */
  --color-steel: #78737f; /* tertiary text, table headers, inactive nav */
  --color-stone: #9a95a2; /* muted captions, inactive tab labels */
  --color-muted: #b6b1bd; /* footer links, de-emphasized labels */

  /* ---- Semantic ---- */
  --color-success-bg: #e6f6ec;
  --color-success-text: #1b7a43;
  --color-error: #d4506a; /* aligned toward brand rose */

  /* ---- Roles ---- */
  --color-primary: var(--color-ink); /* dominant near-black-pill CTA */
  --color-on-primary: #ffffff;
  --color-on-dark: #ffffff; /* text on gradient/dark surfaces */
  --color-footer-bg: #100c16; /* dense near-black footer canvas */
  --color-link: var(--color-brand-4-strong);
  --color-focus: var(--color-brand-3); /* form-focus border */

  /* ============================================================
     SIGNATURE GRADIENTS
     ============================================================ */

  /* The identity — left-to-right flow across all four stops. Use for
     headline highlights (background-clip:text), CTA pills, tag fills. */
  --gradient-brand: linear-gradient(90deg, #fb572b 0%, #cf4a6f 38%, #823790 68%, #5c2c9d 100%); /* @kind color */

  /* Diagonal variant — for larger fills, orbs, hero washes. */
  --gradient-brand-diagonal: linear-gradient(120deg, #fb572b 0%, #cf4a6f 36%, #823790 66%, #5c2c9d 100%); /* @kind color */

  /* Text highlight — identical stops, documented separately for intent. */
  --gradient-text: linear-gradient(92deg, #fb572b 0%, #cf4a6f 40%, #823790 70%, #5c2c9d 100%); /* @kind color */

  /* Soft ambient orb — radial, low-opacity edges for decorative depth
     on white. Sits behind content; never competes with text. */
  --gradient-orb: radial-gradient(circle at 50% 40%, rgba(251,87,43,0.55) 0%, rgba(207,74,111,0.45) 35%, rgba(130,55,144,0.32) 62%, rgba(92,44,157,0) 78%); /* @kind color */

  /* Faint surface wash — barely-there gradient tint for section bands. */
  --gradient-wash: linear-gradient(135deg, rgba(251,87,43,0.06) 0%, rgba(207,74,111,0.05) 40%, rgba(92,44,157,0.06) 100%); /* @kind color */

  /* ---- Per-facet product gradients (radial cards) ----
     Kept as four named variants for ProductCard categorization; each is
     now a facet of the single brand ramp rather than an independent hue. */
  --gradient-coral: radial-gradient(120% 140% at 80% 0%, #ff7a4d 0%, #fb572b 45%, #c93a18 100%); /* @kind color */
  --gradient-magenta: radial-gradient(120% 140% at 80% 0%, #e8628c 0%, #cf4a6f 45%, #a32f52 100%); /* @kind color */
  --gradient-blue: radial-gradient(120% 140% at 80% 0%, #9b54ac 0%, #823790 45%, #5e2069 100%); /* @kind color */
  --gradient-purple: radial-gradient(120% 140% at 80% 0%, #7a4bc0 0%, #5c2c9d 45%, #3f1c73 100%); /* @kind color */
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   DCT — Typography tokens
   Single typeface (DM Sans). Emphasis through weight, never italic.
   Tight hero leading (1.10) + negative tracking on display sizes;
   generous 1.50 body leading; captions push to 1.70.
   ============================================================ */

:root {
  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Type roles: size / line-height / tracking ---- */
  --type-hero-display-size: 80px;
  --type-hero-display-lh: 1.1;
  --type-hero-display-tracking: -2px;

  --type-display-lg-size: 56px;
  --type-display-lg-lh: 1.1;
  --type-display-lg-tracking: -1.5px;

  --type-heading-lg-size: 40px;
  --type-heading-lg-lh: 1.2;
  --type-heading-lg-tracking: -1px;

  --type-heading-md-size: 32px;
  --type-heading-md-lh: 1.25;
  --type-heading-md-tracking: -0.5px;

  --type-heading-sm-size: 24px;
  --type-heading-sm-lh: 1.3;
  --type-heading-sm-tracking: 0;

  --type-card-title-size: 20px;
  --type-card-title-lh: 1.4;

  --type-subtitle-size: 18px;
  --type-subtitle-lh: 1.5;

  --type-body-md-size: 16px;
  --type-body-md-lh: 1.5;

  --type-body-sm-size: 14px;
  --type-body-sm-lh: 1.5;

  --type-caption-size: 13px;
  --type-caption-lh: 1.7;

  --type-caption-bold-lh: 1.5;

  --type-micro-size: 12px;
  --type-micro-lh: 1.5;

  --type-button-md-size: 14px;
  --type-button-md-lh: 1.4;
}

/* ---- Optional utility classes (semantic specimens) ---- */
.dct-hero-display {
  font-family: var(--font-sans);
  font-size: var(--type-hero-display-size);
  line-height: var(--type-hero-display-lh);
  letter-spacing: var(--type-hero-display-tracking);
  font-weight: var(--weight-semibold);
}
.dct-display-lg {
  font-family: var(--font-sans);
  font-size: var(--type-display-lg-size);
  line-height: var(--type-display-lg-lh);
  letter-spacing: var(--type-display-lg-tracking);
  font-weight: var(--weight-semibold);
}
.dct-heading-lg {
  font-family: var(--font-sans);
  font-size: var(--type-heading-lg-size);
  line-height: var(--type-heading-lg-lh);
  letter-spacing: var(--type-heading-lg-tracking);
  font-weight: var(--weight-semibold);
}
.dct-heading-md {
  font-family: var(--font-sans);
  font-size: var(--type-heading-md-size);
  line-height: var(--type-heading-md-lh);
  letter-spacing: var(--type-heading-md-tracking);
  font-weight: var(--weight-semibold);
}
.dct-heading-sm {
  font-family: var(--font-sans);
  font-size: var(--type-heading-sm-size);
  line-height: var(--type-heading-sm-lh);
  font-weight: var(--weight-semibold);
}
.dct-card-title {
  font-family: var(--font-sans);
  font-size: var(--type-card-title-size);
  line-height: var(--type-card-title-lh);
  font-weight: var(--weight-semibold);
}
.dct-subtitle {
  font-family: var(--font-sans);
  font-size: var(--type-subtitle-size);
  line-height: var(--type-subtitle-lh);
  font-weight: var(--weight-medium);
}
.dct-body-md {
  font-family: var(--font-sans);
  font-size: var(--type-body-md-size);
  line-height: var(--type-body-md-lh);
  font-weight: var(--weight-regular);
}
.dct-body-sm {
  font-family: var(--font-sans);
  font-size: var(--type-body-sm-size);
  line-height: var(--type-body-sm-lh);
  font-weight: var(--weight-regular);
}
.dct-caption {
  font-family: var(--font-sans);
  font-size: var(--type-caption-size);
  line-height: var(--type-caption-lh);
  font-weight: var(--weight-regular);
}
.dct-micro {
  font-family: var(--font-sans);
  font-size: var(--type-micro-size);
  line-height: var(--type-micro-lh);
  font-weight: var(--weight-regular);
}

/* ===== tokens/spacing.css ===== */
/* ============================================================
   DCT — Spacing tokens
   Base unit 4px; 8px primary increment.
   ============================================================ */

:root {
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --space-xxxl: 40px;
  --space-section-sm: 48px;
  --space-section: 64px;
  --space-section-lg: 80px;
  --space-hero: 96px;

  /* Layout containers */
  --container-max: 1280px;
  --container-gutter: 32px;
  --docs-sidebar: 220px;
  --docs-body-max: 720px;
  --docs-toc: 180px;
}

/* ===== tokens/shape.css ===== */
/* ============================================================
   DCT — Shape / border-radius tokens
   {rounded.full} on every button, pill tab, badge.
   Radius contrast (32px gradient cards vs 16px white cards) is the
   visual signature — keep both in the same viewport.
   ============================================================ */

:root {
  --radius-xs: 4px; /* code chips, micro-controls */
  --radius-sm: 6px; /* compact controls, table cells */
  --radius-md: 8px; /* inputs, secondary buttons, search pill */
  --radius-lg: 12px; /* documentation cards, recommendation tiles */
  --radius-xl: 16px; /* standard feature cards, AI product tiles */
  --radius-xxl: 20px; /* larger feature panels */
  --radius-xxxl: 24px; /* AI product tile feature variants */
  --radius-hero: 32px; /* vibrant gradient product cards, promo strip */
  --radius-full: 9999px; /* all buttons, pill tabs, badges, avatars */
}

/* ===== tokens/elevation.css ===== */
/* ============================================================
   DCT — Elevation tokens
   The system runs predominantly flat. Elevation is reserved for
   sticky panels, dropdowns, and the rare floating CTA.
   Default cards use a hairline border, not a shadow.
   ============================================================ */

:root {
  --elevation-0: none; /* flat — pair with 1px --color-hairline border */
  --elevation-1: rgba(0, 0, 0, 0.04) 0px 1px 2px 0px; /* hover-elevated tiles */
  --elevation-2: rgba(0, 0, 0, 0.08) 0px 4px 6px 0px; /* feature cards, dropdowns */
  --elevation-3: rgba(0, 0, 0, 0.08) 0px 0px 22px 0px; /* diffuse glow, featured cards */
  --elevation-4: rgba(36, 36, 36, 0.08) 0px 12px 16px -4px; /* modals, sticky panels */
  --elevation-purple: rgba(44, 30, 116, 0.16) 0px 0px 15px 0px; /* ambient lift, purple cards */
  --elevation-brand: rgba(130, 55, 144, 0.22) 0px 10px 30px -6px; /* brand-tinted glow — gradient CTAs, featured AI tiles */
  --elevation-brand-soft: rgba(92, 44, 157, 0.12) 0px 6px 20px -8px; /* subtle violet ambient lift */

  /* Motion (not extracted from source — recommended defaults) */
  --motion-fast: 150ms; /* @kind other */
  --motion-base: 200ms; /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
}

/* ===== tokens/layout.css ===== */
/* ============================================================
   DCT — Layout tokens: responsive grid + breakpoints
   12-column fluid grid inside a 1280px max container. Breakpoints
   are mobile-first; the marketing site collapses 12→8→4 columns.
   ============================================================ */

:root {
  /* ---- Breakpoints (min-width, mobile-first) ---- */
  --bp-sm: 640px; /* large phone / small tablet */
  --bp-md: 768px; /* tablet portrait */
  --bp-lg: 1024px; /* tablet landscape / small laptop */
  --bp-xl: 1280px; /* desktop — container max */
  --bp-2xl: 1536px; /* wide desktop */

  /* ---- Grid ---- */
  --grid-columns: 12; /* @kind other */ /* desktop column count */
  --grid-columns-md: 8; /* @kind other */ /* tablet */
  --grid-columns-sm: 4; /* @kind other */ /* mobile */
  --grid-gutter: 24px; /* space between columns */
  --grid-margin: 32px; /* outer page margin at desktop */
  --grid-margin-sm: 20px; /* outer page margin at mobile */
  --grid-max: 1280px; /* content max width (aligns to --container-max) */
}

/* Convenience container + grid utilities (optional). */
.dct-container {
  width: 100%;
  max-width: var(--grid-max);
  margin-inline: auto;
  padding-inline: var(--grid-margin-sm);
}
@media (min-width: 768px) {
  .dct-container { padding-inline: var(--grid-margin); }
}
.dct-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns-sm), 1fr);
  gap: var(--grid-gutter);
}
@media (min-width: 768px) {
  .dct-grid { grid-template-columns: repeat(var(--grid-columns-md), 1fr); }
}
@media (min-width: 1024px) {
  .dct-grid { grid-template-columns: repeat(var(--grid-columns), 1fr); }
}

/* ===== styles.css ===== */
/* ============================================================
   DCT Web Design System — global entry point.
   Consumers link THIS one file. Keep it to @import lines only.
   ============================================================ */

@import "./tokens/fonts.css";
@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./tokens/spacing.css";
@import "./tokens/shape.css";
@import "./tokens/elevation.css";
@import "./tokens/layout.css";

/* ===== site.css ===== */
/* Shared styles across all DCT site pages. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; background: var(--color-canvas); font-family: var(--font-sans); color: var(--color-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgba(251,87,43,0.18); }
img { max-width: 100%; }

.dct-navlink { transition: color .18s ease, opacity .18s ease; }
.dct-navlink:hover { opacity: 0.62; }
.dct-nav-outline { transition: background .18s ease, color .18s ease; }
.dct-nav-outline:hover { background: var(--color-ink); color: #fff !important; }
.dct-ask-ai { transition: filter .18s ease, transform .18s ease; }
.dct-ask-ai:hover { filter: brightness(1.06); }
/* Enterprise "Ask DCT AI" interaction panel (Home / Agent Portfolio) */
.dct-askbar-input { font-family: var(--font-sans); }
.dct-askbar-input::placeholder { color: var(--color-stone); opacity: 1; }
.dct-askbar-chip { transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
.dct-askbar-chip:hover { border-color: var(--color-stone) !important; color: var(--color-ink) !important; transform: translateY(-1px); }
.dct-askbar-chip:active { transform: translateY(0); }
.dct-askbar-send { transition: transform .2s cubic-bezier(0.4,0,0.2,1), box-shadow .2s ease, filter .2s ease, background .3s ease, color .2s ease; }
.dct-askbar-send svg { transition: transform .2s cubic-bezier(0.4,0,0.2,1); }
.dct-askbar-send[data-on="true"]:hover { transform: translateY(-2px); filter: brightness(1.06); }
.dct-askbar-send[data-on="true"]:hover svg { transform: translateX(3px); }
.dct-askbar-send:active { transform: translateY(0) scale(0.95); }
.dct-askbar-ack { animation: dctAskIn .4s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes dctAskIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dctAskPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.4; } }
.dct-askbar-dot { animation: dctAskPulse 2.4s ease-in-out infinite; }
@media (max-width: 560px) {
  .dct-askbar-meta { display: none !important; }
  .dct-askbar-bottom { flex-direction: column !important; align-items: stretch !important; }
  .dct-askbar-send { align-self: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  .dct-askbar-ack, .dct-askbar-dot { animation: none !important; }
}
.dct-agent-pill { transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.dct-agent-pill:hover { border-color: var(--color-charcoal) !important; box-shadow: 0 6px 18px -8px rgba(0,0,0,0.18); }
.dct-agent-tile { transition: transform .2s cubic-bezier(0.4,0,0.2,1), box-shadow .2s cubic-bezier(0.4,0,0.2,1); }
.dct-agent-tile:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -22px rgba(26,23,32,0.42) !important; }
/* Trust, Governance & Partnerships teaser tiles */
.dct-trust-tile { transition: transform .2s cubic-bezier(0.4,0,0.2,1), box-shadow .2s cubic-bezier(0.4,0,0.2,1); }
.dct-trust-tile:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -22px rgba(26,23,32,0.42) !important; }
.dct-trust-arrow { transition: transform .2s cubic-bezier(0.4,0,0.2,1); }
.dct-trust-tile:hover .dct-trust-arrow { transform: translateX(5px); }
@media (max-width: 1024px) { .dct-trust-grid { grid-template-columns: 1fr !important; max-width: 560px; margin-left: auto; margin-right: auto; } }
/* Relevant Agents grid: wide = one row (base cols set inline), step down to keep tiles comfortable */
@media (max-width: 1520px) { .dct-relagents { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 980px) { .dct-relagents { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .dct-relagents { grid-template-columns: 1fr !important; } }
.dct-dropitem { transition: background .15s ease, color .15s ease; }
.dct-dropitem:hover { background: var(--color-surface-soft); color: var(--color-ink) !important; }
.dct-search-result { transition: background .14s ease; }
.dct-search-result:hover { background: var(--color-surface-soft); }
.dct-footlink { transition: color .18s ease; }
.dct-footlink:hover { color: #fff !important; }
.dct-social { transition: border-color .18s ease, color .18s ease, background .18s ease; }
.dct-social:hover { color: #fff !important; border-color: rgba(255,255,255,0.4) !important; }

.dct-ind-card:hover, .dct-proof-card:hover, .dct-svc-card:hover, .dct-tile:hover { border-color: var(--color-stone) !important; transform: translateY(-4px); box-shadow: 0 22px 46px -26px rgba(26,23,32,0.34), 0 4px 12px -8px rgba(26,23,32,0.18) !important; }

/* Case-study cards: tint in their own brand accent so the hover cue is clearly
   visible against white, while staying refined. Placed after the generic tint
   so it wins for these cards. */
.dct-proof-card:hover {
  background-color: color-mix(in srgb, var(--card-accent, #5C2C9D) 12%, #fff) !important;
  border-color: color-mix(in srgb, var(--card-accent, #5C2C9D) 45%, #fff) !important;
}
.dct-link-arrow { transition: gap .18s ease; }
.dct-link-arrow:hover { gap: 12px !important; }

/* AI Practice industry-solution cards */
.dct-aip-card { transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.dct-aip-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -28px rgba(26,23,32,0.34) !important; }
.dct-aip-head { transition: filter .25s ease; }
.dct-aip-card:hover .dct-aip-head { filter: saturate(1.15) brightness(0.995); }
.dct-aip-icon { transition: transform .25s ease; }
.dct-aip-card:hover .dct-aip-icon { transform: scale(1.06); }

/* AI Practice sticky quick-nav */
.dct-anchor-row::-webkit-scrollbar { height: 0; }
.dct-anchor-row { scrollbar-width: none; }
.dct-anchor-pill { transition: color .18s ease, background .18s ease, border-color .18s ease; }
.dct-anchor-pill:hover { color: var(--color-ink) !important; }

/* AI Practice proof cards */
.dct-proofx { transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.dct-proofx:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.34) !important; background: rgba(255,255,255,0.08) !important; }

/* AI Practice responsive */
@media (max-width: 1100px) {
  .dct-proof-layout { grid-template-columns: 1fr !important; }
}
@media (max-width: 760px) {
  .dct-proof-refs { grid-template-columns: 1fr !important; }
}

/* industry card 3D visual header */
.dct-ind-visual { transition: transform .5s cubic-bezier(0.4,0,0.2,1); }
.dct-ind-card:hover .dct-ind-visual { transform: scale(1.05); }

/* products page 3D product panels */
.dct-prod-visual { transition: transform .6s cubic-bezier(0.4,0,0.2,1); }
.dct-prod-card:hover .dct-prod-visual { transform: scale(1.05); }

/* trust teaser tile 3D visual */
.dct-trust-visual { transition: transform .6s cubic-bezier(0.4,0,0.2,1); }
.dct-trust-card:hover { border-color: var(--color-stone) !important; transform: translateY(-3px); box-shadow: 0 20px 40px -26px rgba(26,23,32,0.3); }
.dct-trust-card:hover .dct-trust-visual { transform: scale(1.05); }
.dct-trust-arrow { transition: transform .2s cubic-bezier(0.4,0,0.2,1); }
.dct-trust-card:hover .dct-trust-arrow { transform: translateX(5px); }
/* trust home hero + strip responsive */
@media (max-width: 1024px) {
  .dct-trust-hero { grid-template-columns: 1fr !important; gap: 32px !important; }
  .dct-trust-hero-visual { order: -1; min-height: 280px !important; }
  .dct-trust-strip { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .dct-trust-strip { grid-template-columns: 1fr !important; }
}
/* trust detail banner hero visual - hide on tablet/mobile for clean text */
@media (max-width: 1024px) { .dct-banner-art { display: none !important; } }

/* framework signal pulse */
.dct-framework-pulse {
  position: absolute; top: 50%; left: 0; width: 10px; height: 10px; margin-top: -5px; margin-left: -5px;
  border-radius: 9999px; background: #fff; box-shadow: 0 0 0 3px rgba(251,87,43,0.35), 0 0 14px 3px rgba(251,87,43,0.7);
  animation: dctFlowPulse 4.5s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes dctFlowPulse {
  0% { left: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; }
}

/* entrance reveal - transform-only so content is ALWAYS opaque */
.dct-reveal.armed { transform: translateY(20px); }
.dct-reveal.armed.in { transform: none; transition: transform .65s cubic-bezier(0.16,1,0.3,1); }

.dct-burger { display: none; }

@media (max-width: 1280px) {
  .dct-agent-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .dct-ind-grid, .dct-proof-grid, .dct-svc-grid, .dct-3col { grid-template-columns: repeat(2, 1fr) !important; }
  .dct-split, .dct-ind-head, .dct-foot-top { grid-template-columns: 1fr !important; gap: 28px !important; align-items: start !important; }
  .dct-foot-offices { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 980px) {
  .dct-desktop-nav { display: none !important; }
  .dct-burger { display: inline-flex !important; }
  header { padding: 0 28px !important; }
  section, footer { }
  .dct-pad { padding-left: 28px !important; padding-right: 28px !important; }
}
@media (max-width: 720px) {
  .dct-agent-grid, .dct-ind-grid, .dct-proof-grid, .dct-svc-grid, .dct-3col, .dct-2col, .dct-foot-offices { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dct-framework-pulse { animation: none; opacity: 0; }
  .dct-reveal.armed { transform: none !important; transition: none !important; }
}

/* Portfolio cards + filters */
.dct-pf-card { transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease; }
.dct-pf-card:hover { border-color: var(--color-stone); transform: translateY(-4px); box-shadow: 0 22px 46px -28px rgba(26,23,32,0.3); }
.dct-pf-grid > .dct-pf-card { animation: dctPfIn .45s cubic-bezier(0.16,1,0.3,1) both; }
@keyframes dctPfIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .dct-pf-grid > .dct-pf-card { animation: none; } }
.dct-pf-pill:hover { color: var(--color-ink) !important; border-color: var(--color-stone) !important; }

/* Case-study pages */
.dct-cs-agentchip:hover, .dct-cs-rel:hover, .dct-cs-nav:hover, .dct-cs-agentcard:hover { border-color: var(--color-stone) !important; }
.dct-cs-agentcard, .dct-cs-nav, .dct-cs-rel, .dct-cs-agentchip { transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.dct-cs-agentcard:hover, .dct-cs-nav:hover { transform: translateY(-4px); box-shadow: 0 22px 46px -26px rgba(26,23,32,0.34), 0 4px 12px -8px rgba(26,23,32,0.18); }
@media (max-width: 820px) {
  .dct-cs-impact { padding: 30px 26px !important; }
  .dct-cs-impact ul { grid-template-columns: 1fr !important; }
}

/* Insights listing + article pages */
.dct-pf-card-anim { animation: dctPfIn .45s cubic-bezier(0.16,1,0.3,1) both; }
@media (prefers-reduced-motion: reduce) { .dct-pf-card-anim { animation: none; } }
.dct-ins-search:focus { border-color: var(--color-brand-blue-deep, #5C2C9D); }
.dct-art-share { transition: border-color .18s ease, transform .18s ease; }
.dct-art-share:hover { border-color: var(--color-stone) !important; transform: translateY(-2px); }
@media (max-width: 1100px) {
  .dct-art-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .dct-art-toc { display: none; }
  .dct-ins-feat { grid-template-columns: 1fr !important; }
  .dct-ins-feat > div:first-child { min-height: 240px !important; }
  .dct-ins-divider { display: none; }
}

/* Proof / stat band */
.dct-stat-tile { transition: transform .22s ease, box-shadow .22s ease; }
.dct-stat-tile:hover { transform: translateY(-4px); }
@media (max-width: 1100px) { .dct-stat-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .dct-stat-grid { grid-template-columns: 1fr !important; } }

/* About page - profile cards */
.dct-prof-card { transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.dct-prof-card:hover { border-color: var(--color-stone); transform: translateY(-4px); box-shadow: 0 20px 42px -26px rgba(26,23,32,0.28); }
.dct-prof-card:hover .dct-prof-li { color: var(--color-brand-blue-deep, #5C2C9D); border-color: var(--color-brand-blue-deep, #5C2C9D); }

/* About page - unified people grid (Figma frame reference) */
.dct-team-card .dct-team-photo img { transition: transform .5s cubic-bezier(0.16,1,0.3,1); }
.dct-team-card:hover .dct-team-photo img { transform: scale(1.04); }
.dct-team-chip { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--color-slate); box-shadow: inset 0 0 0 1px rgba(26,23,32,0.2); transition: color .18s ease, box-shadow .18s ease, background .18s ease; }
.dct-team-chip:hover { color: var(--color-brand-blue-deep, #5C2C9D); box-shadow: inset 0 0 0 1px var(--color-brand-blue-deep, #5C2C9D); background: color-mix(in srgb, var(--color-brand-blue-deep, #5C2C9D) 6%, #fff); }
@media (max-width: 1180px) { .dct-team-grid { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 780px) { .dct-team-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 22px !important; } }
@media (max-width: 460px) { .dct-team-grid { grid-template-columns: 1fr !important; } }

/* About page - Our History (pinned horizontal magic-scroll timeline) */
.dct-hist-wrap { position: relative; background: var(--color-surface-soft); border-top: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); margin-top: 88px; }
.dct-hist-stage { position: sticky; top: 0; height: 100vh; max-height: 880px; overflow: hidden; display: flex; flex-direction: column; }
.dct-hist-head { flex-shrink: 0; max-width: 1760px; margin: 0 auto; width: 100%; box-sizing: border-box; padding: 40px 80px 0; }
.dct-hist-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-top: 4px; }
.dct-hist-year { font-size: clamp(36px, 4.4vw, 56px); font-weight: 700; letter-spacing: -2px; line-height: 1; font-variant-numeric: tabular-nums; transition: color .4s ease; }
.dct-hist-hint { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-stone); }
.dct-hist-hint svg { animation: dctHistNudge 1.5s ease-in-out infinite; }
@keyframes dctHistNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

.dct-hist-railarea { position: relative; flex: 1; min-height: 0; }
.dct-hist-track { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; gap: 56px; padding: 0 80px; box-sizing: content-box; will-change: transform; }
.dct-hist-line { position: absolute; top: 50%; left: 80px; right: 80px; height: 2px; background: var(--color-hairline); transform: translateY(-50%); }
.dct-hist-line-fill { position: absolute; top: 50%; left: 80px; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, #FB572B, #CF4A6F, #823790, #5C2C9D); border-radius: 2px; transition: width .1s linear; }

.dct-hist-item { position: relative; width: 360px; flex: 0 0 360px; height: 100%; }
.dct-hist-dot { position: absolute; top: 50%; left: 30px; width: 15px; height: 15px; border-radius: 9999px; background: #fff; border: 3px solid var(--dot, #823790); transform: translate(-50%, -50%); transition: box-shadow .35s ease, transform .35s ease; z-index: 2; }
.dct-hist-item.is-active .dct-hist-dot { transform: translate(-50%, -50%) scale(1.25); box-shadow: 0 0 0 6px color-mix(in srgb, var(--dot) 16%, transparent); }
.dct-hist-connector { position: absolute; left: 30px; width: 2px; transform: translateX(-50%); opacity: 0.45; }
.dct-hist-item.up .dct-hist-connector { bottom: 50%; height: 28px; }
.dct-hist-item.down .dct-hist-connector { top: 50%; height: 28px; }

.dct-hist-card { position: absolute; left: 0; width: 340px; box-sizing: border-box; background: #fff; border: 1px solid var(--color-hairline); border-radius: var(--radius-xl); padding: 20px 24px 22px; box-shadow: 0 10px 30px -22px rgba(26,23,32,0.22); transition: transform .35s cubic-bezier(0.16,1,0.3,1), box-shadow .35s ease, border-color .35s ease; }
.dct-hist-item.up .dct-hist-card { bottom: calc(50% + 38px); }
.dct-hist-item.down .dct-hist-card { top: calc(50% + 38px); }
.dct-hist-item.is-active .dct-hist-card { box-shadow: 0 26px 60px -30px rgba(26,23,32,0.4); border-color: var(--color-stone); }
.dct-hist-item.up.is-active .dct-hist-card { transform: translateY(-8px); }
.dct-hist-item.down.is-active .dct-hist-card { transform: translateY(8px); }
.dct-hist-card-year { font-size: 15px; font-weight: 700; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.dct-hist-card-title { font-size: 19px; font-weight: 600; letter-spacing: -0.5px; color: var(--color-ink); line-height: 1.2; margin: 7px 0 9px; }
.dct-hist-card-desc { font-size: 14px; line-height: 1.5; color: var(--color-slate); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.dct-hist-progress { flex-shrink: 0; height: 3px; margin: 0 80px 32px; background: var(--color-hairline); border-radius: 3px; overflow: hidden; }
.dct-hist-progress-bar { display: block; height: 100%; width: 100%; transform-origin: left center; background: linear-gradient(90deg, #FB572B, #5C2C9D); transition: transform .1s linear; }

/* Mobile / reduced-motion: native swipeable rail, no pinning */
@media (max-width: 860px), (max-height: 720px) {
  .dct-hist-wrap { height: auto !important; }
  .dct-hist-stage { position: static; height: auto; max-height: none; overflow: visible; }
  .dct-hist-head { padding: 40px 24px 0; }
  .dct-hist-railarea { flex: none; height: 500px; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; margin-top: 8px; padding-bottom: 40px; }
  .dct-hist-track { position: relative; transform: none !important; padding: 0 24px; gap: 40px; }
  .dct-hist-line, .dct-hist-line-fill { left: 24px; }
  .dct-hist-line-fill { width: 0; }
  .dct-hist-item { scroll-snap-align: center; }
  .dct-hist-progress { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dct-hist-hint svg { animation: none; }
}

/* About page - office gallery (feature + 4) */
.dct-gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 190px; gap: 16px; }
.dct-gallery-cell.g0 { grid-column: span 2; grid-row: span 2; }
.dct-gallery-cell.g0 img { height: 100%; }
.dct-gallery-cell { height: 190px; }
.dct-gallery-cell.g0 { height: auto; }

@media (max-width: 1100px) {
  .dct-values-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .dct-people-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 900px) {
  .dct-found { grid-template-columns: 1fr !important; }
  .dct-found > div:last-child { min-height: 260px !important; order: -1; }
  /* timeline collapses to a single left rail */
  .dct-timeline-spine { left: 7px; }
  .dct-tl-item { width: 100% !important; left: 0 !important; text-align: left !important; padding: 10px 0 10px 40px; }
  .dct-tl-item .dct-tl-node { left: 0 !important; right: auto !important; }
  .dct-tl-card { max-width: none; display: block; }
}
@media (max-width: 720px) {
  .dct-values-grid, .dct-people-grid, .dct-board-grid { grid-template-columns: 1fr !important; }
  .dct-board-grid { justify-content: stretch !important; }
  .dct-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
  .dct-gallery-cell.g0 { grid-column: span 2; }
  .dct-found > div:first-child { padding: 36px 28px !important; }
}

/* Careers page - jobs, gallery, form */
.dct-job-card:hover { border-color: var(--color-stone); box-shadow: 0 18px 40px -26px rgba(26,23,32,0.24); }
.dct-job-apply:hover { background: var(--color-charcoal, #3a3540) !important; }
.dct-job-toggle:hover { border-color: var(--color-stone) !important; }
.dct-career-shot { transition: transform .3s cubic-bezier(0.16,1,0.3,1), box-shadow .3s ease; }
.dct-career-shot:hover { transform: translateY(-4px); box-shadow: 0 20px 42px -26px rgba(26,23,32,0.3); }
.dct-career-shot img { transition: transform .5s cubic-bezier(0.16,1,0.3,1); }
.dct-career-shot:hover img { transform: scale(1.05); }
@media (max-width: 1100px) {
  .dct-career-gallery { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 860px) {
  .dct-apply-aside { position: static !important; }
  .dct-form-grid { grid-template-columns: 1fr !important; }
  .dct-job-head { grid-template-columns: 1fr !important; }
  .dct-job-actions { flex-direction: row !important; }
}
@media (max-width: 720px) {
  .dct-career-gallery { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Industry detail pages */
.dct-ind-svc-card:hover { border-color: var(--color-stone) !important; transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(26,23,32,0.24); }
@media (max-width: 980px) {
  .dct-ind-hero-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .dct-ind-hero-img { order: -1; }
}
@media (max-width: 720px) {
  .dct-ind-hero-grid { gap: 26px !important; }
}

/* ------------------------------------------------------------------ *
 * Subtle hover / selection tint
 * A barely-there brand wash (≈4% deep-violet into white) layered on the
 * white card + interactive-element families so users get a clear-but-quiet
 * cue for what they're hovering / have selected. Pairs with the existing
 * border + lift transitions; dark and gradient surfaces are left alone.
 * ------------------------------------------------------------------ */
:root { --dct-tint: color-mix(in srgb, var(--color-brand-blue-deep, #5C2C9D) 20%, #fff); }

.dct-ind-card, .dct-proof-card, .dct-svc-card, .dct-tile, .dct-aip-card,
.dct-pf-card, .dct-prof-card, .dct-job-card, .dct-ind-svc-card,
.dct-cs-agentcard, .dct-cs-nav, .dct-cs-rel, .dct-cs-agentchip,
.dct-agent-pill, .dct-stat-tile, .dct-askbar-chip, .dct-anchor-pill,
.dct-pf-pill {
  transition-property: border-color, transform, box-shadow, background-color, color, filter, gap;
}

.dct-ind-card:hover, .dct-proof-card:hover, .dct-svc-card:hover, .dct-tile:hover,
.dct-aip-card:hover, .dct-pf-card:hover, .dct-prof-card:hover, .dct-job-card:hover,
.dct-ind-svc-card:hover, .dct-cs-agentcard:hover, .dct-cs-nav:hover, .dct-cs-rel:hover,
.dct-cs-agentchip:hover, .dct-agent-pill:hover, .dct-stat-tile:hover,
.dct-askbar-chip:hover, .dct-anchor-pill:hover, .dct-pf-pill:hover {
  background-color: var(--dct-tint) !important;
}

/* Selected states keep a slightly stronger, persistent tint */
.dct-pf-pill[data-active="true"], .dct-pf-pill.is-active, .dct-pf-pill[aria-pressed="true"],
.dct-anchor-pill[data-active="true"], .dct-anchor-pill.is-active {
  background-color: color-mix(in srgb, var(--color-brand-blue-deep, #5C2C9D) 26%, #fff) !important;
  border-color: color-mix(in srgb, var(--color-brand-blue-deep, #5C2C9D) 50%, #fff) !important;
  color: var(--color-ink) !important;
}

/* ===== Market Position value flow: desktop SVG vs. mobile vertical timeline ===== */
.dct-signalflow-desktop { display: block; }
.dct-signalflow-mobile { display: none; }
@media (max-width: 900px) {
  .dct-signalflow-desktop { display: none; }
  .dct-signalflow-mobile { display: block; }
}
/* tighten the surrounding card on small screens so nothing feels cramped */
@media (max-width: 600px) {
  .dct-approach-card { padding: 28px 20px 22px !important; }
}
.dct-vtl { position: relative; display: flex; flex-direction: column; gap: 14px; }
.dct-vtl::before {
  content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 2px;
  background: linear-gradient(#cdced2, #5C2C9D 28%, #823790 52%, #FB572B 78%, #1a1a1a);
  border-radius: 2px;
}
.dct-vstep {
  position: relative; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 16px; align-items: start;
  animation: dctStepUp .55s cubic-bezier(0.16,1,0.3,1) both;
}
.dct-vdot {
  position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center; background: var(--color-canvas);
}
.dct-vdot span { width: 15px; height: 15px; border-radius: 9999px; background: #fff; border: 2.5px solid var(--dot, #999a9e); box-sizing: border-box; }
.dct-vstep[data-solid="true"] .dct-vdot span { background: var(--dot); box-shadow: inset 0 0 0 3px #fff; }
.dct-vcard {
  border: 1px solid var(--color-hairline); border-radius: var(--radius-lg, 16px);
  background: #fff; padding: 15px 18px; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease, transform .18s ease;
}
.dct-vcard:hover {
  border-color: color-mix(in srgb, var(--dot, #5C2C9D) 45%, #fff);
  background-color: color-mix(in srgb, var(--dot, #5C2C9D) 8%, #fff);
  box-shadow: 0 14px 30px -20px rgba(26,23,32,0.32); transform: translateY(-2px);
}
.dct-veyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; }
.dct-vtitle { font-size: 17px; font-weight: 600; letter-spacing: -0.3px; color: var(--color-ink); line-height: 1.2; }
.dct-vdesc { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--color-charcoal); text-wrap: pretty; }
@keyframes dctStepUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .dct-vstep { animation: none; } }

main h2, main .dct-pad .dct-reveal h2 {
 color: #ffffff !important;
}

main .dct-pad h2 {
 color: #000000 !important;
}

/* Mobile devices */
@media (max-width: 767px) {
    .common-section {
        padding: 60px 20px 50px !important;
    }
}