/* ═══════════════════════════════════════════════════════════════
   Visual Kit — service landing pages only (.vk-*)
   Brand-native CSS/SVG diagrams, devices, metrics, dashboards
   ═══════════════════════════════════════════════════════════════ */

/* ── Device frames ── */
.vk-device{
  position:relative;
  background:var(--ink,#0d0d0d);
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 20px 50px rgba(0,0,0,.28);
}
.vk-device--browser .vk-device-chrome{
  display:flex;align-items:center;gap:6px;
  height:34px;padding:0 12px;
  background:rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.vk-device-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.18)}
.vk-device-dot--ac{background:rgba(204,255,51,.55)}
.vk-device-screen{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top center}
.vk-device--phone{
  max-width:220px;margin:0 auto;
  border-radius:28px;
  padding:10px;
  background:linear-gradient(160deg,#1a1a1a,#0d0d0d);
}
.vk-device--phone .vk-device-screen{
  aspect-ratio:9/16;border-radius:20px;
}
.vk-device-grid{
  display:grid;
  grid-template-columns:1.4fr .7fr;
  gap:clamp(16px,2.5vw,28px);
  align-items:end;
  margin-top:clamp(28px,4vw,44px);
}
@media(max-width:720px){
  .vk-device-grid{grid-template-columns:1fr;justify-items:center}
  .vk-device-grid .vk-device--phone{max-width:180px}
}

/* ── Metrics ── */
.vk-metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  margin-top:clamp(28px,4vw,48px);
  background:rgba(13,13,13,.08);
  border:1px solid var(--border2,rgba(13,13,13,.08));
  border-radius:var(--rl,16px);
  overflow:hidden;
}
.vk-metric{
  background:var(--white,#fff);
  padding:clamp(20px,2.5vw,28px) clamp(14px,2vw,20px);
  display:flex;flex-direction:column;gap:6px;
}
.sec-ink .vk-metrics{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.1)}
.sec-ink .vk-metric{background:rgba(255,255,255,.04)}
.vk-metric-n{
  font-family:var(--fd,inherit);
  font-size:clamp(28px,3.2vw,40px);
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--ink,#0d0d0d);
  line-height:1;
}
.sec-ink .vk-metric-n{color:var(--white,#fff)}
.vk-metric-n .vk-suf,
.vk-metric-n em{font-style:normal;font-size:.55em;font-weight:700;opacity:.7}
.vk-metric-l{font-size:12px;color:var(--ink3,#7a7a7a);line-height:1.4}
.sec-ink .vk-metric-l{color:rgba(255,255,255,.45)}
@media(max-width:720px){.vk-metrics{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.vk-metrics{grid-template-columns:1fr}}

/* ── Process flow ── */
.vk-flow{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:0;
  margin-top:clamp(28px,4vw,44px);
  position:relative;
}
.vk-flow-step{
  position:relative;
  padding:clamp(18px,2vw,24px) clamp(12px,1.5vw,18px);
  text-align:center;
}
.vk-flow-step:not(:last-child)::after{
  content:'';
  position:absolute;
  top:36px;right:0;
  width:calc(50% + 8px);height:2px;
  background:linear-gradient(90deg,rgba(204,255,51,.55),rgba(204,255,51,.15));
  transform:translateX(50%);
  pointer-events:none;
}
.sec-paper .vk-flow-step:not(:last-child)::after,
.sec-paper2 .vk-flow-step:not(:last-child)::after{
  background:linear-gradient(90deg,rgba(13,13,13,.18),rgba(13,13,13,.06));
}
.vk-flow-n{
  width:36px;height:36px;margin:0 auto 12px;
  border-radius:50%;
  background:var(--accent,#ccff33);
  color:var(--ink,#0d0d0d);
  font-family:var(--fd,inherit);
  font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;
  transition:transform .4s var(--ease,cubic-bezier(.22,1,.36,1));
}
.vk-flow.in .vk-flow-step .vk-flow-n{animation:vk-pop .5s var(--ease,cubic-bezier(.22,1,.36,1)) both}
.vk-flow.in .vk-flow-step:nth-child(2) .vk-flow-n{animation-delay:.08s}
.vk-flow.in .vk-flow-step:nth-child(3) .vk-flow-n{animation-delay:.16s}
.vk-flow.in .vk-flow-step:nth-child(4) .vk-flow-n{animation-delay:.24s}
.vk-flow.in .vk-flow-step:nth-child(5) .vk-flow-n{animation-delay:.32s}
@keyframes vk-pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.vk-flow-step h3{
  font-family:var(--fd,inherit);
  font-size:14px;font-weight:700;letter-spacing:-.02em;
  margin:0 0 6px;color:inherit;
}
.sec-ink .vk-flow-step h3{color:var(--white,#fff)}
.vk-flow-step p{font-size:12.5px;line-height:1.5;margin:0;color:var(--ink2,#555)}
.sec-ink .vk-flow-step p{color:rgba(255,255,255,.5)}
@media(max-width:760px){
  .vk-flow{grid-template-columns:1fr;gap:8px}
  .vk-flow-step{text-align:left;display:grid;grid-template-columns:36px 1fr;gap:12px 14px;align-items:start}
  .vk-flow-n{margin:0}
  .vk-flow-step h3{grid-column:2;margin:4px 0 4px}
  .vk-flow-step p{grid-column:2}
  .vk-flow-step:not(:last-child)::after{
    top:36px;left:17px;right:auto;width:2px;height:calc(100% + 8px);
    transform:none;
    background:linear-gradient(180deg,rgba(204,255,51,.5),rgba(204,255,51,.1));
  }
}

/* ── Comparison ── */
.vk-compare{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:clamp(14px,2.5vw,24px);
  align-items:stretch;
  margin-top:clamp(28px,4vw,44px);
}
.vk-compare-panel{
  border-radius:var(--rl,16px);
  overflow:hidden;
  border:1px solid var(--border2,rgba(13,13,13,.08));
  background:var(--white,#fff);
  display:flex;flex-direction:column;
}
.vk-compare-panel--bad{border-color:rgba(180,40,40,.2)}
.vk-compare-panel--good{border-color:rgba(184,232,45,.45);box-shadow:0 0 0 1px rgba(204,255,51,.25)}
.vk-compare-label{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:12px 16px;color:var(--ink3,#7a7a7a);
  border-bottom:1px solid var(--border2,rgba(13,13,13,.06));
}
.vk-compare-panel--good .vk-compare-label{color:var(--accent-text,#6a8a00);background:rgba(204,255,51,.12)}
.vk-compare-panel--bad .vk-compare-label{color:#a33;background:rgba(180,40,40,.06)}
.vk-compare-media{aspect-ratio:16/10;overflow:hidden;background:var(--ink,#0d0d0d)}
.vk-compare-media img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.vk-compare-body{padding:16px 18px;flex:1}
.vk-compare-body ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.vk-compare-body li{font-size:13px;line-height:1.45;color:var(--ink2,#555);padding-left:16px;position:relative}
.vk-compare-body li::before{content:'';position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35}
.vk-compare-panel--good .vk-compare-body li::before{background:var(--accent,#ccff33);opacity:1}
.vk-compare-mid{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--fd,inherit);font-weight:800;font-size:18px;color:var(--ink3,#7a7a7a);
}
@media(max-width:760px){
  .vk-compare{grid-template-columns:1fr}
  .vk-compare-mid{padding:4px 0;transform:rotate(90deg)}
}

/* ── Mini dashboard ── */
.vk-dash{
  background:var(--ink,#0d0d0d);
  border-radius:var(--rl,16px);
  padding:clamp(18px,2.5vw,28px);
  border:1px solid rgba(255,255,255,.08);
  color:var(--white,#fff);
  margin-top:clamp(24px,3vw,40px);
  position:relative;overflow:hidden;
}
.vk-dash::before{
  content:'';position:absolute;inset:auto -20% -40% 40%;
  width:60%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(204,255,51,.18),transparent 70%);
  pointer-events:none;
}
.vk-dash-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  margin-bottom:18px;position:relative;z-index:1;
}
.vk-dash-title{font-family:var(--fd,inherit);font-size:15px;font-weight:700;letter-spacing:-.02em}
.vk-dash-badge{
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(204,255,51,.9);background:rgba(204,255,51,.12);
  padding:4px 10px;border-radius:999px;
}
.vk-dash-bars{
  display:flex;align-items:flex-end;gap:8px;height:120px;
  position:relative;z-index:1;margin-bottom:16px;
}
.vk-dash-bar{
  flex:1;border-radius:6px 6px 2px 2px;
  background:rgba(255,255,255,.12);
  height:var(--h,40%);
  transform-origin:bottom;
  transform:scaleY(.15);
  transition:transform .7s var(--ease,cubic-bezier(.22,1,.36,1));
}
.vk-dash.in .vk-dash-bar{transform:scaleY(1)}
.vk-dash-bar:nth-child(odd){background:rgba(204,255,51,.35)}
.vk-dash-bar:nth-child(3n){background:rgba(204,255,51,.7)}
.vk-dash-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  position:relative;z-index:1;
}
.vk-dash-kpi{padding:12px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)}
.vk-dash-kpi-n{font-family:var(--fd,inherit);font-size:22px;font-weight:800;letter-spacing:-.03em}
.vk-dash-kpi-l{font-size:11px;color:rgba(255,255,255,.45);margin-top:2px}
.vk-spark{
  display:block;width:100%;height:40px;margin-top:8px;
}
.vk-spark path{
  fill:none;stroke:rgba(204,255,51,.85);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:200;stroke-dashoffset:200;
  transition:stroke-dashoffset 1s var(--ease,cubic-bezier(.22,1,.36,1));
}
.vk-dash.in .vk-spark path{stroke-dashoffset:0}
@media(max-width:520px){
  .vk-dash-row{grid-template-columns:1fr}
  .vk-dash-bars{height:90px}
}

/* ── Funnel (paid) ── */
.vk-funnel{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  margin-top:clamp(24px,3vw,40px);max-width:480px;margin-left:auto;margin-right:auto;
}
.vk-funnel-step{
  width:var(--w,100%);
  background:rgba(204,255,51,var(--op,.15));
  border:1px solid rgba(204,255,51,.25);
  border-radius:10px;
  padding:14px 18px;
  text-align:center;
  color:var(--white,#fff);
  transform:scale(.96);opacity:0;
  transition:transform .45s var(--ease,cubic-bezier(.22,1,.36,1)),opacity .45s;
}
.vk-funnel.in .vk-funnel-step{transform:scale(1);opacity:1}
.vk-funnel.in .vk-funnel-step:nth-child(2){transition-delay:.08s}
.vk-funnel.in .vk-funnel-step:nth-child(3){transition-delay:.16s}
.vk-funnel.in .vk-funnel-step:nth-child(4){transition-delay:.24s}
.vk-funnel-step strong{display:block;font-family:var(--fd,inherit);font-size:15px;font-weight:700;margin-bottom:2px}
.vk-funnel-step span{font-size:12px;opacity:.65}
.sec-paper .vk-funnel-step,.sec-paper2 .vk-funnel-step{color:var(--ink,#0d0d0d);border-color:rgba(13,13,13,.1)}

/* ── Brand board ── */
.vk-brandboard{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:clamp(16px,2.5vw,24px);
  margin-top:clamp(28px,4vw,44px);
}
.vk-bb-card{
  background:var(--ink,#0d0d0d);
  border-radius:var(--rl,16px);
  padding:clamp(22px,3vw,36px);
  color:var(--white,#fff);
  border:1px solid rgba(255,255,255,.08);
  min-height:220px;
  display:flex;flex-direction:column;justify-content:space-between;
}
.vk-bb-card--light{
  background:var(--paper2,#f3f1eb);
  color:var(--ink,#0d0d0d);
  border-color:var(--border2,rgba(13,13,13,.08));
}
.vk-bb-mark{
  font-family:var(--fd,inherit);
  font-size:clamp(36px,5vw,56px);
  font-weight:800;letter-spacing:-.04em;line-height:1;
}
.vk-bb-mark em{font-style:normal;color:var(--accent,#ccff33)}
.vk-bb-card--light .vk-bb-mark em{color:var(--accent2,#8ab80a)}
.vk-bb-meta{font-size:12px;opacity:.5;margin-top:10px}
.vk-bb-swatches{display:flex;gap:10px;flex-wrap:wrap}
.vk-bb-swatch{
  width:48px;height:48px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
}
.vk-bb-type{display:flex;flex-direction:column;gap:10px}
.vk-bb-type-display{font-family:var(--fd,inherit);font-size:28px;font-weight:800;letter-spacing:-.03em}
.vk-bb-type-body{font-size:14px;line-height:1.55;opacity:.7;max-width:28ch}
.vk-bb-guidelines{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.vk-bb-rule{
  padding:16px 18px;border-radius:12px;
  background:var(--white,#fff);
  border:1px solid var(--border2,rgba(13,13,13,.08));
}
.vk-bb-rule strong{display:block;font-size:13px;font-weight:700;margin-bottom:4px}
.vk-bb-rule span{font-size:12px;color:var(--ink2,#555);line-height:1.45}
@media(max-width:760px){
  .vk-brandboard{grid-template-columns:1fr}
  .vk-bb-guidelines{grid-template-columns:1fr}
}

/* ── Timeline (interactive) ── */
.vk-timeline{margin-top:clamp(28px,4vw,44px)}
.vk-timeline-tabs{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;
}
.vk-timeline-tab{
  appearance:none;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);color:rgba(255,255,255,.55);
  font-family:var(--fb,inherit);font-size:12px;font-weight:600;
  letter-spacing:.04em;padding:10px 16px;border-radius:999px;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s;
}
.sec-paper .vk-timeline-tab,.sec-paper2 .vk-timeline-tab{
  border-color:var(--border2,rgba(13,13,13,.1));
  background:var(--white,#fff);color:var(--ink2,#555);
}
.vk-timeline-tab[aria-selected="true"],
.vk-timeline-tab.is-active{
  background:var(--accent,#ccff33);color:var(--ink,#0d0d0d);border-color:transparent;
}
.vk-timeline-panels{position:relative;min-height:120px}
.vk-timeline-panel{display:none;animation:vk-fade .35s ease}
.vk-timeline-panel.is-active{display:block}
@keyframes vk-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vk-timeline-panel h3{
  font-family:var(--fd,inherit);font-size:20px;font-weight:700;
  letter-spacing:-.02em;margin:0 0 8px;
}
.sec-ink .vk-timeline-panel h3{color:var(--white,#fff)}
.vk-timeline-panel p{font-size:14.5px;line-height:1.65;margin:0;max-width:52ch;color:var(--ink2,#555)}
.sec-ink .vk-timeline-panel p{color:rgba(255,255,255,.55)}

/* ── Creative strip (paid / social) ── */
.vk-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,2vw,18px);
  margin-top:clamp(24px,3vw,40px);
}
.vk-strip-item{
  border-radius:var(--rl,14px);overflow:hidden;
  border:1px solid var(--border2,rgba(13,13,13,.08));
  background:var(--ink,#0d0d0d);
  aspect-ratio:4/5;
}
.vk-strip-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease,cubic-bezier(.22,1,.36,1))}
.vk-strip-item:hover img{transform:scale(1.04)}
@media(max-width:720px){.vk-strip{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.vk-strip{grid-template-columns:1fr}}

[data-vk="deliverables"],
[data-vk="pillars"],
[data-vk="approach"],
[data-vk="problem"]{margin-bottom:clamp(20px,3vw,32px)}
[data-vk="problem"] .vk-compare{margin-top:0}
[data-vk="deliverables"] .vk-metrics,
[data-vk="deliverables"] .vk-device-grid,
[data-vk="deliverables"] .vk-dash,
[data-vk="deliverables"] .vk-strip{margin-top:0;margin-bottom:clamp(24px,3vw,36px)}

/* Section helper: visual beside copy ── */
.vk-split{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:clamp(28px,5vw,56px);
  align-items:center;
}
@media(max-width:760px){.vk-split{grid-template-columns:1fr}}

/* Reduce motion */
@media(prefers-reduced-motion:reduce){
  .vk-flow.in .vk-flow-step .vk-flow-n,
  .vk-timeline-panel,
  .vk-funnel-step,
  .vk-dash-bar,
  .vk-spark path{animation:none!important;transition:none!important;transform:none!important;opacity:1!important;stroke-dashoffset:0!important}
}