/* =============================================================
   IntelTree — Design v2
   Dark editorial. PT Serif italic + Manrope + JetBrains Mono.
   Loaded after webflow.css to override Webflow defaults.
   ============================================================= */

:root {
  --bg:        #0c0c0d;
  --bg-2:      #131316;
  --ink:       #f0ece4;
  --ink-2:     rgba(240, 236, 228, 0.66);
  --ink-3:     rgba(240, 236, 228, 0.38);
  --line:      rgba(240, 236, 228, 0.12);
  --accent:    #FFE45C;
  --serif:     "PT Serif", "Times New Roman", serif;
  --sans:      "Manrope", system-ui, sans-serif;
  --mono:      "JetBrains Mono", ui-monospace, monospace;
  --gutter:    clamp(24px, 4vw, 64px);
  --maxw:      1400px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg) !important;
  color: var(--ink);
}

/* Override the Webflow Barba CSS that starts the container at opacity:0
   and relies on an .is-loaded / .barba-ready class that nothing adds.
   page-transitions.js handles fading via inline opacity; we just need
   the base CSS state to be visible. */
[data-barba="container"] { opacity: 1; transition: opacity 400ms ease; }
body {
  font-family: var(--sans);
  font-size: 15px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--accent); color: #0c0c0d; }

/* ── grain overlay ───────────────────────────────────────────── */
.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.7'/></svg>");
}

/* ── custom cursor (fine pointer only) ───────────────────────── */
@media (pointer: fine) {
  body.dv2-cursor-on { cursor: none; }
  body.dv2-cursor-on a,
  body.dv2-cursor-on button,
  body.dv2-cursor-on .btn,
  body.dv2-cursor-on .svc-row,
  body.dv2-cursor-on .case-tab,
  body.dv2-cursor-on .clients .c,
  body.dv2-cursor-on .testify-dots button,
  body.dv2-cursor-on input,
  body.dv2-cursor-on textarea { cursor: none; }
  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0; pointer-events: none; z-index: 999;
    transform: translate(-50%, -50%); will-change: transform;
    display: block;
  }
  .cursor-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--accent);
    transition: width .2s, height .2s, background .2s;
  }
  .cursor-ring {
    width: 32px; height: 32px; border-radius: 50%;
    border: 1px solid rgba(240, 236, 228, .4);
    transition: width .25s cubic-bezier(.2,.7,.3,1), height .25s cubic-bezier(.2,.7,.3,1), border-color .25s, background .25s;
  }
  body.cur-hover .cursor-ring { width: 56px; height: 56px; border-color: var(--accent); background: rgba(255, 228, 92, .06); }
  body.cur-press .cursor-ring { width: 24px; height: 24px; }
}
@media (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ── typography helpers ──────────────────────────────────────── */
.dv2-skin .serif { font-family: var(--serif); }
.dv2-skin .mono  { font-family: var(--mono); }
.dv2-skin .italic { font-style: italic; }
.dv2-skin .eyebrow,
.eyebrow.dv2-skin {
  font-family: var(--sans); font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
}
.dv2-skin .rule { height: 1px; background: var(--line); width: 100%; }
.dv2-skin h1, .dv2-skin h2, .dv2-skin h3, .dv2-skin h4 { margin: 0; font-weight: 400; }
.dv2-skin a { color: inherit; text-decoration: none; }
.dv2-skin .reveal { opacity: 1; }

/* ── layout primitives ──────────────────────────────────────── */
/* Override Webflow's .container/.section defaults which set their own
   padding, max-width, negative margins and a black gradient that hides
   our content. */
.dv2-skin .container {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
  background-image: none !important;
  margin-top: 0 !important;
}
.dv2-skin .section {
  padding: clamp(80px, 10vw, 160px) 0 !important;
  position: relative;
  background-image: none !important;
  background-color: transparent !important;
  margin-top: 0 !important;
  overflow: visible !important;
  float: none;
  mix-blend-mode: normal;
}
.dv2-skin main { background: transparent; }
.dv2-skin header.nav { background-image: none; margin-top: 0; overflow: visible; }

/* ── bar-field background ───────────────────────────────────── */
.barfield {
  position: absolute; inset: 0; pointer-events: none;
  overflow: hidden; z-index: 0;
  mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.barfield svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.barfield .bar {
  transform-origin: center bottom;
  transform-box: fill-box;
}
.barfield .bar.breathe { animation: bar-breathe 6s ease-in-out infinite; }
.barfield .bar.accent  { animation: bar-accent 9s ease-in-out infinite; }
@keyframes bar-breathe {
  0%, 100% { transform: scaleY(1);    opacity: .14; }
  50%      { transform: scaleY(1.45); opacity: .28; }
}
@keyframes bar-accent {
  0%, 92%, 100% { fill: rgba(240, 236, 228, 0.18); transform: scaleY(1); }
  93%, 96%      { fill: var(--accent);              transform: scaleY(1.8); }
}
.dv2-skin .hero { position: relative; isolation: isolate; }
.dv2-skin .hero > .hero-grid { position: relative; z-index: 1; }
body.bars-off .barfield { display: none; }

@media (prefers-reduced-motion: reduce) {
  .barfield .bar.breathe, .barfield .bar.accent { animation: none; }
}

/* ── scroll progress rail ───────────────────────────────────── */
.progress-rail {
  position: fixed; top: 50%; right: 18px; transform: translateY(-50%);
  width: 1px; height: 240px; background: var(--line); z-index: 40;
}
.progress-rail .head {
  position: absolute; left: -3px; width: 7px; height: 7px;
  background: var(--accent); border-radius: 50%; transition: top .15s linear;
}
.progress-rail .tick {
  position: absolute; left: -4px; width: 8px; height: 1px;
  background: var(--ink-3);
}
.progress-rail .tick.on { background: var(--ink); }

/* ── keyframes ──────────────────────────────────────────────── */
@keyframes dv2-blink { 50% { opacity: 0; } }
@keyframes dv2-slide-in-x { from { transform: translateX(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dv2-marquee   { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes dv2-count-pop { from { transform: translateY(8px); opacity: 0; filter: blur(4px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes dv2-pulse-dot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: .55; } }
.dv2-skin .blink { animation: dv2-blink 1.05s steps(1,end) infinite; }
.dv2-skin .pulse-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: dv2-pulse-dot 1.4s ease-in-out infinite; }

/* ── buttons ────────────────────────────────────────────────── */
.dv2-skin .btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid rgba(240, 236, 228, .32);
  background: transparent; color: var(--ink);
  transition: background .2s, border-color .2s, color .2s, transform .2s;
  user-select: none;
  text-decoration: none;
}
.dv2-skin .btn:hover { border-color: var(--ink); background: rgba(240, 236, 228, .04); }
.dv2-skin .btn.primary { background: var(--accent); color: #0c0c0d; border-color: var(--accent); }
.dv2-skin .btn.primary:hover { background: #fff; border-color: #fff; }
.dv2-skin .btn .arr { transition: transform .25s; display: inline-block; }
.dv2-skin .btn:hover .arr { transform: translateX(4px); }
.dv2-skin .btn.lg { padding: 20px 32px; font-size: 13px; }

/* ── hero ───────────────────────────────────────────────────── */
.dv2-skin .hero { padding-top: 24px; padding-bottom: 80px; }
.dv2-skin .hero-grid {
  display: grid; grid-template-columns: 1.45fr 1fr; gap: 80px;
  align-items: end; min-height: 76vh;
}
.dv2-skin .hero-title {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(56px, 9vw, 148px);
  line-height: .92; letter-spacing: -.018em;
  color: var(--ink); text-wrap: balance;
}
.dv2-skin .hero-title .rot {
  display: inline-block; position: relative; color: var(--accent);
  min-width: 1ch;
}
.dv2-skin .hero-title .rot .ghost { visibility: hidden; pointer-events: none; user-select: none; }
.dv2-skin .hero-title .rot .active {
  position: absolute; left: 0; top: 0; right: 0;
  display: inline-block;
  animation: dv2-slide-in-x .55s cubic-bezier(.2,.7,.3,1) both;
}
.dv2-skin .hero-sub {
  max-width: 480px; margin-top: 56px;
  font-family: var(--serif); font-size: 19px; line-height: 1.55;
  color: var(--ink-2); font-style: italic;
}
.dv2-skin .hero-meta {
  display: flex; gap: 12px; align-items: center; margin-top: 44px; flex-wrap: wrap;
}
.dv2-skin .hero-caret {
  display: inline-block; width: 4px; height: .82em;
  background: var(--accent);
  margin-left: 8px; vertical-align: -2px;
  animation: dv2-blink 1.05s steps(1,end) infinite;
}

/* ── plate (image card) ─────────────────────────────────────── */
.dv2-skin .plate {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1c1c22 0%, #0f0f14 100%);
  border: 1px solid var(--line);
}
.dv2-skin .plate::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(240, 236, 228, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(240, 236, 228, .035) 1px, transparent 1px);
  background-size: 36px 36px;
}
.dv2-skin .plate::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 70%; height: 70%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 28%, transparent) 0%, transparent 70%);
  filter: blur(50px);
}
.dv2-skin .plate .corners span { position: absolute; width: 14px; height: 14px; border-color: rgba(240, 236, 228, .45); }
.dv2-skin .plate .corners .tl { top: 10px; left: 10px; border-top: 1px solid; border-left: 1px solid; }
.dv2-skin .plate .corners .tr { top: 10px; right: 10px; border-top: 1px solid; border-right: 1px solid; }
.dv2-skin .plate .corners .bl { bottom: 10px; left: 10px; border-bottom: 1px solid; border-left: 1px solid; }
.dv2-skin .plate .corners .br { bottom: 10px; right: 10px; border-bottom: 1px solid; border-right: 1px solid; }
.dv2-skin .plate .plate-label {
  position: absolute; top: 18px; left: 18px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  color: var(--ink-3); text-transform: uppercase; z-index: 2;
}
.dv2-skin .plate .plate-caption {
  position: absolute; bottom: 18px; left: 18px; right: 18px;
  font-family: var(--serif); font-style: italic; font-size: 13px;
  color: var(--ink-2); z-index: 2;
}
.dv2-skin .plate.has-photo { background-color: #0a0a0c; background-size: cover; background-position: center; }
.dv2-skin .plate.has-photo::before {
  background-image:
    linear-gradient(180deg, rgba(12, 12, 13, 0.25) 0%, rgba(12, 12, 13, 0.55) 65%, rgba(12, 12, 13, 0.85) 100%);
}
.dv2-skin .plate.has-photo::after { opacity: .35; }
.dv2-skin .plate.has-contain {
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.dv2-skin .plate.tall { aspect-ratio: 3/4; }

/* ── nav (new homepage shell) ───────────────────────────────── */
.dv2-skin .nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 0;
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(180deg, rgba(12, 12, 13, .95) 60%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.dv2-skin .nav .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.dv2-skin .nav .logo svg { display: block; }
.dv2-skin .nav .logo .wm {
  font-family: var(--serif); font-size: 22px; font-style: italic;
  letter-spacing: -.015em; color: var(--ink);
}
.dv2-skin .nav-links { display: flex; gap: 36px; font-size: 13px; color: var(--ink-2); list-style: none; padding: 0; margin: 0; }
.dv2-skin .nav-links a { position: relative; color: var(--ink-2); }
.dv2-skin .nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.2,.7,.3,1);
}
.dv2-skin .nav-links a:hover::after { transform: scaleX(1); }
.dv2-skin .nav-links a:hover { color: var(--ink); }
/* Reserve room for the longest ticker line so changing text never
   resizes the pill (which would still cascade through the grid track). */
.dv2-skin .now-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-2);
  letter-spacing: .12em;
  white-space: nowrap;
  min-width: 380px;
  justify-content: center;
}

/* ── services index ─────────────────────────────────────────── */
.dv2-skin .svc-row {
  display: grid; grid-template-columns: 56px 1.1fr 1fr 60px;
  align-items: center; gap: 32px;
  padding: 32px 0; border-top: 1px solid var(--line);
  position: relative;
  transition: padding .35s cubic-bezier(.2,.7,.3,1);
}
.dv2-skin .svc-row:last-of-type { border-bottom: 1px solid var(--line); }
.dv2-skin .svc-row .num { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.dv2-skin .svc-row .name {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(32px, 4.2vw, 56px); line-height: 1;
  transition: color .25s, transform .35s cubic-bezier(.2,.7,.3,1);
}
.dv2-skin .svc-row .desc { font-size: 14px; color: var(--ink-2); transition: color .25s; }
.dv2-skin .svc-row .arr { font-family: var(--mono); text-align: right; color: var(--ink-3); transition: color .25s, transform .35s; }
.dv2-skin .svc-row::before {
  content: ""; position: absolute; left: 0; top: 0; width: 0; height: 1px;
  background: var(--accent); transition: width .5s cubic-bezier(.2,.7,.3,1); z-index: 2;
}
.dv2-skin .svc-row:hover::before, .dv2-skin .svc-row.open::before { width: 100%; }
.dv2-skin .svc-row:hover .name { color: var(--accent); transform: translateX(8px); }
.dv2-skin .svc-row:hover .arr { color: var(--accent); transform: translateX(-4px); }
.dv2-skin .svc-detail {
  grid-column: 1 / -1;
  max-height: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(.2,.7,.3,1), margin-top .5s, opacity .35s;
  opacity: 0; margin-top: 0;
}
.dv2-skin .svc-row.open .svc-detail { max-height: 180px; opacity: 1; margin-top: 24px; }
.dv2-skin .svc-detail-inner {
  display: grid; grid-template-columns: 56px 1fr; gap: 32px;
  padding: 20px 0 8px; border-top: 1px solid var(--line);
}
.dv2-skin .svc-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.dv2-skin .svc-marquee-track {
  display: inline-flex; gap: 36px; white-space: nowrap;
  animation: dv2-marquee 30s linear infinite;
  font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: .14em;
}
.dv2-skin .svc-marquee-track span em { color: var(--accent); font-style: normal; }

/* ── clients wall ───────────────────────────────────────────── */
.dv2-skin .clients {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.dv2-skin .clients .c {
  display: flex; align-items: center; justify-content: center;
  padding: 36px 20px; min-height: 120px;
  border-left: 1px solid var(--line);
  transition: background .3s;
}
.dv2-skin .clients .c:first-child { border-left: none; }
.dv2-skin .clients .c:hover { background: rgba(240, 236, 228, .025); }
.dv2-skin .clients .c img {
  max-width: 100%; max-height: 48px; width: auto; height: auto;
  display: block;
  filter: grayscale(1) brightness(1.8) contrast(1.2);
  opacity: .55;
  transition: filter .35s, opacity .35s;
}
.dv2-skin .clients .c:hover img { filter: grayscale(0) brightness(1) contrast(1); opacity: 1; }

/* ── case carousel ──────────────────────────────────────────── */
.dv2-skin .case-wrap {
  display: grid; grid-template-columns: 1.2fr 1fr;
  min-height: 600px; border: 1px solid var(--line); overflow: hidden;
}
.dv2-skin .case-media { position: relative; }
.dv2-skin .case-body {
  background: #15151a; padding: 56px 48px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
}
.dv2-skin .case-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.dv2-skin .case-tab {
  flex: 1; text-align: left;
  background: transparent; border: none;
  padding: 16px 14px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-3);
  transition: color .25s;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}
.dv2-skin .case-tab.active { color: var(--ink); border-bottom-color: var(--accent); }
.dv2-skin .case-tab:hover { color: var(--ink-2); }
.dv2-skin .case-h {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(32px, 3.6vw, 52px); line-height: 1.05;
  color: var(--ink);
}
.dv2-skin .case-h em { color: var(--accent); font-style: italic; }
.dv2-skin .case-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dv2-skin .case-stat-num {
  font-family: var(--serif); font-style: italic; font-size: 48px;
  line-height: 1; color: var(--ink);
  animation: dv2-count-pop .6s cubic-bezier(.2,.7,.3,1) both;
}
.dv2-skin .case-stat-num.accent { color: var(--accent); }
.dv2-skin .case-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; border-top: 1px solid var(--line); }
.dv2-skin .case-foot a { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-2); transition: color .2s; cursor: pointer; }
.dv2-skin .case-foot a:hover { color: var(--accent); }

/* ── work strip ─────────────────────────────────────────────── */
.dv2-skin .work-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.dv2-skin .work-card { display: block; text-decoration: none; color: inherit; }
.dv2-skin .work-card .plate { height: 280px; margin-bottom: 18px; transition: transform .45s cubic-bezier(.2,.7,.3,1); }
.dv2-skin .work-card:hover .plate { transform: translateY(-4px); }
.dv2-skin .work-card .meta { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .22em; }
.dv2-skin .work-card .name { font-family: var(--serif); font-style: italic; font-size: 28px; margin: 10px 0 4px; transition: color .2s; }
.dv2-skin .work-card:hover .name { color: var(--accent); }
.dv2-skin .work-card .desc { font-size: 13px; color: var(--ink-2); }

/* ── testimonial ────────────────────────────────────────────── */
.dv2-skin .testify { text-align: center; padding-block: 140px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dv2-skin .testify blockquote {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(28px, 3.8vw, 56px); line-height: 1.18;
  margin: 0 auto; max-width: 1000px; text-wrap: balance;
  color: var(--ink);
}
.dv2-skin .testify blockquote em { color: var(--accent); font-style: italic; }
.dv2-skin .testify .attrib { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .22em; margin-top: 36px; }
.dv2-skin .testify-dots { display: flex; gap: 10px; justify-content: center; margin-top: 32px; padding: 0; list-style: none; }
.dv2-skin .testify-dots button {
  width: 28px; height: 4px; border: none; background: var(--line);
  transition: background .3s, width .3s;
  padding: 0;
}
.dv2-skin .testify-dots button.on { background: var(--accent); width: 44px; }

/* ── CTA ────────────────────────────────────────────────────── */
.dv2-skin .cta { padding-block: clamp(120px, 14vw, 200px); text-align: center; position: relative; }
.dv2-skin .cta-title {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(64px, 12vw, 200px); line-height: .92;
  letter-spacing: -.022em;
}
.dv2-skin .cta-title .a { color: var(--ink); }
.dv2-skin .cta-title .b { color: var(--ink-3); }
.dv2-skin .cta-title .acc { color: var(--accent); }
.dv2-skin .cta-form {
  display: flex; gap: 0; align-items: stretch; max-width: 560px; margin: 56px auto 0;
  border: 1px solid var(--line); border-radius: 999px; padding: 6px;
  transition: border-color .3s, background .3s;
}
.dv2-skin .cta-form.focused { border-color: var(--accent); background: rgba(255, 228, 92, .03); }
.dv2-skin .cta-form input {
  flex: 1; background: transparent; border: none; outline: none; color: var(--ink);
  font-family: var(--sans); font-size: 14px; padding: 0 22px;
  min-width: 0;
}
.dv2-skin .cta-form input::placeholder { color: var(--ink-3); }
.dv2-skin .cta-form button {
  border: none;
  background: var(--accent); color: #0c0c0d;
  padding: 14px 24px; border-radius: 999px;
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  transition: background .2s, transform .2s;
  cursor: pointer;
}
.dv2-skin .cta-form button:hover { background: #fff; }
.dv2-skin .cta-form button:active { transform: scale(.97); }
.dv2-skin .cta-kbd {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .18em;
  margin-top: 18px; text-transform: uppercase;
}
.dv2-skin .cta-kbd kbd {
  display: inline-block; padding: 2px 7px; border: 1px solid var(--line); border-radius: 4px;
  margin: 0 3px; color: var(--ink-2); background: rgba(240, 236, 228, .03);
  font-family: var(--mono); font-size: 10px;
}

/* ── stats strip (industries pages) ──────────────────────────── */
.dv2-skin .stats-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.dv2-skin .stats-strip .stat {
  padding: 36px 28px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 14px;
}
.dv2-skin .stats-strip .stat:last-of-type { border-right: none; }
.dv2-skin .stats-strip .stat-num {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(40px, 4.4vw, 60px); line-height: 1; color: var(--ink);
}
.dv2-skin .stats-strip .stat-num .unit {
  font-style: normal; font-size: .55em; color: var(--ink-3); margin-left: 4px;
}
.dv2-skin .stats-strip .stat-lbl {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: .22em; text-transform: uppercase;
}
@media (max-width: 960px) {
  .dv2-skin .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .dv2-skin .stats-strip .stat:nth-of-type(2) { border-right: none; }
  .dv2-skin .stats-strip .stat:nth-of-type(1),
  .dv2-skin .stats-strip .stat:nth-of-type(2) { border-bottom: 1px solid var(--line); }
}

/* ── value panel (industries pages) ──────────────────────────── */
.dv2-skin .value-panel {
  position: relative; overflow: hidden;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255, 228, 92, .06), rgba(255, 228, 92, 0) 60%),
    linear-gradient(180deg, rgba(240, 236, 228, .015), rgba(240, 236, 228, 0));
  padding: clamp(40px, 5vw, 72px);
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}
.dv2-skin .value-panel::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
}
.dv2-skin .value-panel h2 {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(34px, 4vw, 52px); line-height: 1.05;
  margin: 0 0 24px; color: var(--ink);
}
.dv2-skin .value-panel h2 em { color: var(--accent); font-style: italic; }
.dv2-skin .value-panel .panel-sub {
  font-size: 14px; color: var(--ink-2); line-height: 1.7;
  max-width: 52ch; margin: 0 0 28px;
}
.dv2-skin .value-list {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: grid; gap: 14px;
}
.dv2-skin .value-list li {
  position: relative; padding-left: 26px;
  font-size: 14px; color: var(--ink-2); line-height: 1.6;
}
.dv2-skin .value-list li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 14px; height: 1px; background: var(--accent);
}
@media (max-width: 960px) {
  .dv2-skin .value-panel { grid-template-columns: 1fr; }
}

/* ── resource cards (industries pages) ───────────────────────── */
.dv2-skin .res-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.dv2-skin .res-card {
  display: block; padding: 28px;
  border: 1px solid var(--line); background: rgba(240, 236, 228, .015);
  text-decoration: none; color: inherit;
  transition: border-color .25s, background .25s, transform .35s cubic-bezier(.2,.7,.3,1);
}
.dv2-skin .res-card:hover {
  border-color: var(--accent);
  background: rgba(255, 228, 92, .04);
  transform: translateY(-3px);
}
.dv2-skin .res-card .res-eyebrow {
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  color: var(--ink-3); text-transform: uppercase; margin-bottom: 14px;
}
.dv2-skin .res-card .res-title {
  font-family: var(--serif); font-style: italic;
  font-size: 22px; line-height: 1.2; margin-bottom: 12px; color: var(--ink);
}
.dv2-skin .res-card .res-desc { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.dv2-skin .res-card .res-foot {
  margin-top: 18px; font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: .18em; display: flex;
  justify-content: space-between; align-items: center;
}
.dv2-skin .res-card:hover .res-foot { color: var(--accent); }
@media (max-width: 960px) {
  .dv2-skin .res-grid { grid-template-columns: 1fr; }
}

/* ── footer ─────────────────────────────────────────────────── */
.dv2-footer {
  padding: 60px 0 40px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}
.dv2-footer .foot-row {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; align-items: start;
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);
}
.dv2-footer h5 {
  font-family: var(--mono); font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 16px 0; font-weight: 500;
}
.dv2-footer ul { list-style: none; padding: 0; margin: 0; }
.dv2-footer li { font-size: 14px; color: var(--ink-2); margin-bottom: 8px; }
.dv2-footer li a { color: var(--ink-2); text-decoration: none; transition: color .2s; }
.dv2-footer li a:hover { color: var(--accent); }
.dv2-footer .foot-blurb {
  font-family: var(--serif); font-style: italic; font-size: 20px;
  color: var(--ink-2); margin-top: 14px;
}
.dv2-footer .foot-region {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: .16em; margin-top: 12px;
}
.dv2-footer .foot-bottom {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 50px auto 0; padding: 24px var(--gutter) 0;
  border-top: 1px solid var(--line);
  max-width: var(--maxw);
  font-family: var(--mono); font-size: 10px; letter-spacing: .24em; color: var(--ink-3);
  gap: 16px; flex-wrap: wrap;
}

/* ── responsive ─────────────────────────────────────────────── */
@media (max-width: 960px) {
  .dv2-skin .hero-grid,
  .dv2-skin .case-wrap,
  .dv2-footer .foot-row { grid-template-columns: 1fr; gap: 32px; }
  .dv2-skin .work-strip { grid-template-columns: 1fr 1fr; }
  .dv2-skin .clients { grid-template-columns: repeat(3, 1fr); }
  .dv2-skin .clients .c:nth-child(4) { border-left: none; }
  .dv2-skin .svc-row { grid-template-columns: 40px 1fr 40px; }
  .dv2-skin .svc-row .desc { display: none; }
  .dv2-skin .nav-links { display: none; }
  .progress-rail { display: none; }
  .dv2-skin .case-body { padding: 36px 24px; }
}
@media (max-width: 600px) {
  .dv2-skin .work-strip { grid-template-columns: 1fr; }
  .dv2-skin .clients { grid-template-columns: repeat(2, 1fr); }
  .dv2-skin .clients .c:nth-child(3) { border-left: none; }
  .dv2-footer .foot-bottom { font-size: 9px; }
  /* Drop the ticker pill on phones so the 380px reserve doesn't overflow */
  .dv2-skin .now-pill { display: none; }
}

/* ── inner-page chrome cascade ──────────────────────────────── */
/* Apply dark editorial look to existing Webflow nav/body on pages
   that aren't fully rebuilt. The .dv2-skin class on <body> opts in. */
body.dv2-skin {
  background: var(--bg) !important;
  color: var(--ink);
  font-family: var(--sans);
}
body.dv2-skin .nav_container {
  background: linear-gradient(180deg, rgba(12, 12, 13, .95) 60%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.dv2-skin .heading_huge,
body.dv2-skin .heading_h1,
body.dv2-skin .heading_h2,
body.dv2-skin .heading_h3 {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  letter-spacing: -.018em;
}
body.dv2-skin .eyebrow {
  font-family: var(--sans);
  letter-spacing: .26em;
  color: var(--ink-3);
}
body.dv2-skin .subheading,
body.dv2-skin .text-color_secondary {
  color: var(--ink-2);
}
body.dv2-skin .text-color_inverse-secondary { color: var(--ink-2); }
body.dv2-skin a.text-link:hover { color: var(--accent); }
body.dv2-skin .footer.is-secondary { display: none !important; }
body.dv2-skin .dv2-footer { display: block; }

/* ── Raw heading restyle (inner pages without Webflow class hooks) ── */
/* Plain <h1>/<h2>/<h3> tags inside an inner page should adopt the
   editorial PT Serif italic look so pages like about.html stop looking
   like bare Manrope text on black. Scoped so it doesn't fight the
   homepage's own .hero-title / .case-h / etc. rules.            */
body.dv2-skin .about-content > h1,
body.dv2-skin .about-content > h2,
body.dv2-skin .about-content > h3,
body.dv2-skin .mission-box > h2,
body.dv2-skin .value-card > h3,
body.dv2-skin section > .container > h1,
body.dv2-skin section > .container > h2,
body.dv2-skin section > .container > h3,
body.dv2-skin section > h1,
body.dv2-skin section > h2,
body.dv2-skin section > h3 {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  letter-spacing: -.018em;
  line-height: 1.05;
  text-wrap: balance;
}
body.dv2-skin .about-content > h1 { font-size: clamp(56px, 8vw, 112px); margin: 0 0 28px; }
body.dv2-skin .about-content > h2,
body.dv2-skin .mission-box > h2 { font-size: clamp(36px, 4.4vw, 64px); margin: 72px 0 24px; line-height: 1.05; }
body.dv2-skin .value-card > h3 { font-size: clamp(22px, 2vw, 30px); margin: 0 0 12px; }

/* ── About page layout polish ──────────────────────────────────── */
body.dv2-skin .about-hero {
  position: relative;
  padding: clamp(80px, 12vw, 180px) 0 clamp(60px, 8vw, 120px);
  background: transparent;
  isolation: isolate;
}
body.dv2-skin .about-content {
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--gutter, clamp(24px, 4vw, 64px));
}
body.dv2-skin .about-content > p {
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink-2);
  margin: 0 0 22px;
}
body.dv2-skin .about-content > p.lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 36px;
  max-width: 700px;
}
body.dv2-skin .about-content > p a,
body.dv2-skin .about-content > .mission-box a {
  color: var(--ink) !important;
  border-bottom: 1px solid var(--line);
  text-decoration: none !important;
  transition: color .2s, border-color .2s;
}
body.dv2-skin .about-content > p a:hover,
body.dv2-skin .about-content > .mission-box a:hover {
  color: var(--accent) !important;
  border-bottom-color: var(--accent);
}

body.dv2-skin .mission-box {
  position: relative;
  padding: 40px 44px;
  margin: 56px 0;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 228, 92, 0.04), transparent 60%);
}
body.dv2-skin .mission-box::before {
  content: "§ 01 — Why we exist";
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
body.dv2-skin .mission-box > h2 { margin: 0 0 18px; font-size: clamp(28px, 3.4vw, 44px); }
body.dv2-skin .mission-box > p {
  font-family: var(--serif); font-style: italic;
  font-size: 17px; line-height: 1.55; color: var(--ink-2);
  margin: 0 0 14px;
}
body.dv2-skin .mission-box > p:last-child { margin-bottom: 0; }

body.dv2-skin .values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 56px 0;
  border-top: 1px solid var(--line);
}
body.dv2-skin .value-card {
  padding: 36px 32px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  position: relative;
  transition: background .3s;
}
body.dv2-skin .value-card:nth-child(2n) { border-right: none; }
body.dv2-skin .value-card:hover { background: rgba(240, 236, 228, .025); }
body.dv2-skin .value-card::before {
  content: "0" counter(value-counter);
  counter-increment: value-counter;
  position: absolute;
  top: 18px; right: 22px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: .2em;
}
body.dv2-skin .values-grid { counter-reset: value-counter; }
body.dv2-skin .value-card > p {
  font-family: var(--sans); font-size: 14.5px; line-height: 1.65;
  color: var(--ink-2); margin: 0;
}

/* ── Generic inner-page section polish ─────────────────────────── */
body.dv2-skin h1 {
  /* baseline raw-h1 fallback for any inner page that uses it directly  */
  font-family: var(--serif); font-style: italic;
  color: var(--ink); letter-spacing: -.018em; line-height: 1.05;
}
body.dv2-skin h2 {
  font-family: var(--serif); font-style: italic;
  color: var(--ink); letter-spacing: -.018em; line-height: 1.1;
}
body.dv2-skin h3 {
  font-family: var(--serif); font-style: italic;
  color: var(--ink); letter-spacing: -.012em; line-height: 1.15;
}

@media (max-width: 700px) {
  body.dv2-skin .values-grid { grid-template-columns: 1fr; }
  body.dv2-skin .value-card { border-right: none; }
  body.dv2-skin .mission-box { padding: 28px 24px; }
}

/* ── Mobile-apps page editorial polish ─────────────────────────── */
/* The page came in with a Webflow-era glass-card feature grid: large
   Lottie cartoon visuals + lime-green/blue hover accents that clashed
   with the editorial dark theme. Strip the visuals, restyle as a
   typographic feature index matching the homepage services list.   */
body.dv2-skin .feature-card {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 36px 32px;
  transition: background .3s, border-color .3s, transform .3s !important;
  position: relative;
  counter-increment: feature-counter;
}
body.dv2-skin .feature-card:hover {
  background: rgba(240, 236, 228, .025) !important;
  border-color: var(--ink-3) !important;
  transform: none !important;
}
body.dv2-skin .feature-card .feature-card-visual {
  display: none;
}
body.dv2-skin .feature-card .feature-card-content {
  padding: 0;
}
body.dv2-skin .feature-card .feature-card-content h3 {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: clamp(28px, 2.6vw, 38px) !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  margin: 0 0 14px !important;
  line-height: 1.05;
  letter-spacing: -.012em;
}
body.dv2-skin .feature-card .feature-card-content p {
  color: var(--ink-2) !important;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.65;
}
body.dv2-skin .feature-card::before {
  content: "0" counter(feature-counter);
  position: absolute;
  top: 14px; right: 18px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: .2em;
}
/* Reset counter at the grid container (parent of all feature-cards)  */
body.dv2-skin .container > div[style*="grid-template-columns: repeat(auto-fit, minmax(280px"] { counter-reset: feature-counter; }

/* FAQ items on mobile-apps */
body.dv2-skin .faq-item { border-bottom-color: var(--line) !important; }
body.dv2-skin .faq-question {
  color: var(--ink) !important;
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(18px, 1.6vw, 22px) !important;
  transition: color .2s !important;
}
body.dv2-skin .faq-question:hover { color: var(--accent) !important; }
body.dv2-skin .faq-icon { color: var(--ink-3); }
body.dv2-skin .faq-answer p {
  color: var(--ink-2) !important;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
}

/* CTA card on mobile-apps + similar pages */
body.dv2-skin .cta-section {
  background: linear-gradient(180deg, rgba(255, 228, 92, 0.04), transparent 60%) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
}
body.dv2-skin .cta-section h2 {
  font-family: var(--serif) !important;
  font-style: italic !important;
  font-size: clamp(36px, 4.4vw, 64px) !important;
  color: var(--ink) !important;
  margin-bottom: 20px;
}
body.dv2-skin .cta-section .btn-primary,
body.dv2-skin a.btn-primary {
  background: var(--accent) !important;
  color: #0c0c0d !important;
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  padding: 16px 32px !important;
  border-radius: 999px !important;
  border: none !important;
}
body.dv2-skin .cta-section .btn-primary:hover,
body.dv2-skin a.btn-primary:hover {
  background: #fff !important;
  color: #0c0c0d !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Capabilities/section heading override — match editorial scale */
body.dv2-skin section .heading_h2 {
  font-size: clamp(36px, 4.4vw, 64px) !important;
}

/* ── Contact page editorial polish ─────────────────────────────── */
/* contact.html ships a Tailwind utility-class layout: white card on
   dark, generic Geist font, black send button. Dragging it into the
   editorial dark theme.                                            */

/* The outer "card" containing the whole form + side rail              */
body.dv2-skin .contact-section .ring-1.ring-white\/10,
body.dv2-skin .contact-section [class*="bg-white/5"] {
  background: transparent !important;
  --tw-ring-color: var(--line) !important;
  box-shadow: 0 0 0 1px var(--line) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
}

/* The white inner form card */
body.dv2-skin .contact-section [class*="bg-white/95"] {
  background: rgba(255, 255, 255, 0.02) !important;
  --tw-ring-color: var(--line) !important;
  box-shadow: 0 0 0 1px var(--line) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
}

/* Form support eyebrow + heading */
body.dv2-skin .contact-section p[class*="uppercase"][class*="tracking-wider"] {
  color: var(--ink-3) !important;
  font-family: var(--sans) !important;
  letter-spacing: .26em !important;
  font-size: 11px !important;
}
body.dv2-skin .contact-section h3 {
  font-family: var(--serif) !important;
  font-style: italic !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
  letter-spacing: -.012em;
}
body.dv2-skin .contact-section h3.text-neutral-900,
body.dv2-skin .contact-section .text-neutral-900 {
  color: var(--ink) !important;
}
body.dv2-skin .contact-section .text-neutral-500,
body.dv2-skin .contact-section .text-neutral-600,
body.dv2-skin .contact-section .text-neutral-400 {
  color: var(--ink-3) !important;
}

/* The chat-icon square next to the form heading */
body.dv2-skin .contact-section [class*="bg-neutral-900"][class*="rounded-lg"] {
  background: var(--bg-2) !important;
  border: 1px solid var(--line);
  color: var(--ink) !important;
  border-radius: 4px !important;
}

/* Inputs + textarea */
body.dv2-skin .contact-section input[type="text"],
body.dv2-skin .contact-section input[type="email"],
body.dv2-skin .contact-section textarea {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid var(--line) !important;
  --tw-ring-color: var(--line) !important;
  box-shadow: none !important;
  border-radius: 4px !important;
  font-family: var(--sans) !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  transition: border-color .2s !important;
}
body.dv2-skin .contact-section input::placeholder,
body.dv2-skin .contact-section textarea::placeholder {
  color: var(--ink-3) !important;
}
body.dv2-skin .contact-section input:focus,
body.dv2-skin .contact-section textarea:focus {
  border-color: var(--accent) !important;
  --tw-ring-color: var(--accent) !important;
  outline: none !important;
}
body.dv2-skin .contact-section label {
  color: var(--ink-2) !important;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}

/* Send button — yellow pill */
body.dv2-skin .contact-section button[type="submit"] {
  background: var(--accent) !important;
  color: #0c0c0d !important;
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  border-radius: 999px !important;
  padding: 14px 24px !important;
  transition: background .2s, transform .2s !important;
}
body.dv2-skin .contact-section button[type="submit"]:hover {
  background: #fff !important;
  color: #0c0c0d !important;
}

/* "Let's talk." copy block (right side) */
body.dv2-skin .contact-section h2 {
  font-family: var(--serif) !important;
  font-style: italic !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
  font-size: clamp(48px, 6vw, 88px) !important;
  line-height: 1 !important;
  letter-spacing: -.022em;
}
body.dv2-skin .contact-section p.text-white\/80 {
  font-family: var(--serif) !important;
  font-style: italic !important;
  color: var(--ink-2) !important;
  font-size: clamp(18px, 1.6vw, 22px) !important;
  line-height: 1.55 !important;
}

/* Quick response / Clear next steps icon boxes */
body.dv2-skin .contact-section [class*="bg-white/10"] {
  background: rgba(255, 228, 92, 0.06) !important;
  --tw-ring-color: var(--line) !important;
  box-shadow: 0 0 0 1px var(--line) !important;
  border-radius: 4px !important;
  backdrop-filter: none !important;
}
body.dv2-skin .contact-section p.text-white {
  font-family: var(--sans) !important;
  color: var(--ink) !important;
}
body.dv2-skin .contact-section p.text-white\/70 {
  font-family: var(--sans) !important;
  color: var(--ink-2) !important;
}

/* Team-Lead direct-contact pill — make it editorial dark */
body.dv2-skin .contact-section [class*="bg-white/95"][class*="inline-flex"] {
  background: transparent !important;
  --tw-ring-color: var(--line) !important;
  box-shadow: 0 0 0 1px var(--line) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
}
body.dv2-skin .contact-section [class*="bg-neutral-900"][class*="text-white"][href^="mailto"] {
  background: var(--accent) !important;
  color: #0c0c0d !important;
  font-family: var(--sans) !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  border: none !important;
}
body.dv2-skin .contact-section [class*="bg-neutral-900"][class*="text-white"][href^="mailto"]:hover {
  background: #fff !important;
  color: #0c0c0d !important;
}

/* Section spacing */
body.dv2-skin .contact-section {
  padding-top: clamp(40px, 6vw, 96px) !important;
  padding-bottom: clamp(60px, 8vw, 120px) !important;
  margin-bottom: 0 !important;
}