/* ==========================================================================
   DIGITAL KRYPTON — DESIGN SYSTEM v2
   Light editorial / premium studio. White canvas, light neutral grey surfaces,
   the logo's own spectrum used as accent only, and dark bands for contrast.

   Typography is three-role by design:
     Space Grotesk   — display and headings (bold, expressive)
     Instrument Sans — body and UI (refined, editorial, highly readable)
     IBM Plex Mono   — micro-typography (labels, numerals, metadata)

   Every rule maps to a native Elementor setting. No CSS grid, no tricks.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS  →  Elementor Site Settings › Global Colors + Global Fonts
   -------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --dk-paper: #ffffff;      /* primary: pure white */
  --dk-card: #ffffff;
  --dk-well: #f7f7f8;       /* secondary: light neutral grey */
  --dk-line: #e9e9ec;
  --dk-line-strong: #dbdbe0;
  --dk-ghost: #cfcfd6;      /* outlined numerals on the expertise pillars */

  /* Ink */
  --dk-ink: #14121a;
  --dk-body: #4a4553;
  --dk-muted: #6e6878;

  /* Night — audit panel, CTA band and footer only */
  --dk-night: #14121a;
  --dk-night-2: #1e1b26;
  --dk-night-line: #322d3d;
  --dk-night-text: #c9c3d6;
  --dk-night-muted: #948da3;

  /* Brand spectrum, sampled from the Digital Krypton phoenix */
  --dk-blue: #3e8acc;
  --dk-violet: #5c4ca6;
  --dk-magenta: #d31ca3;
  --dk-crimson: #ec3556;
  --dk-orange: #f58c2b;

  /* Accessible accents: -ink for text on paper, -lit for text on night */
  --dk-accent-ink: #b01490;
  --dk-accent-lit: #ff4fc4;

  --dk-spectrum: linear-gradient(100deg, #3e8acc 0%, #5c4ca6 22%, #d31ca3 52%, #ec3556 76%, #f58c2b 100%);
  --dk-btn: linear-gradient(100deg, #b01490 0%, #d42a52 100%);
  --dk-glow: 0 16px 38px -14px rgba(176, 20, 144, .5);
  --dk-lift: 0 18px 44px -22px rgba(20, 18, 26, .16);

  /* Type */
  --dk-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --dk-text-font: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --dk-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* Rhythm */
  --dk-shell: 1240px;
  /* The hero, and therefore the chrome above it, runs wider than the body
     shell. Header, top bar and mega panel all measure from this so the logo
     starts on the same vertical line as the hero headline. */
  --dk-shell-wide: 1340px;
  --dk-gutter: clamp(20px, 5vw, 40px);
  --dk-band: clamp(76px, 9vw, 132px);
  --dk-gap: clamp(20px, 2.4vw, 32px);
  --dk-radius: 16px;
  --dk-radius-sm: 10px;

  /* Layers */
  --z-header: 50;
  --z-mega: 40;
  --z-drawer: 45;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 104px; }

body {
  margin: 0;
  background: var(--dk-paper);
  color: var(--dk-body);
  font-family: var(--dk-text-font);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden. overflow-x:hidden forces overflow-y to auto, which makes
     body a scroll container and silently kills position:sticky for every
     descendant. overflow-x:clip stops the off-canvas drawer causing a
     horizontal scrollbar without creating that scroll container. */
  overflow-x: clip;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--dk-display);
  color: var(--dk-ink);
  margin: 0 0 .5em;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.5rem, 5.4vw, 66px); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; }
h2 { font-size: clamp(1.95rem, 3.6vw, 44px); line-height: 1.08; letter-spacing: -.025em; }
h3 { font-size: clamp(1.35rem, 2vw, 27px); font-weight: 600; letter-spacing: -.02em; }
h4 { font-size: 1.0625rem; font-weight: 600; }

p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--dk-magenta); color: #fff; }

:focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 3px; border-radius: 4px; }

.dk-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--dk-ink); color: #fff; padding: 12px 20px; font-weight: 600;
}
.dk-skip:focus { left: 12px; top: 12px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES  →  Elementor Containers
   .dk-band  = top-level container   .dk-shell = 1240 content width
   .dk-row   = child container, row  .dk-col   = child container, column
   -------------------------------------------------------------------------- */
.dk-band { padding: var(--dk-band) var(--dk-gutter); position: relative; }
.dk-band--tight { padding-top: clamp(44px, 5.5vw, 72px); padding-bottom: clamp(44px, 5.5vw, 72px); }
.dk-band--well { background: var(--dk-well); }
.dk-band--night { background: var(--dk-night); color: var(--dk-night-text); }

.dk-shell { width: 100%; max-width: var(--dk-shell); margin-inline: auto; }

.dk-row { --dk-row-gap: var(--dk-gap); display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--dk-row-gap); align-items: stretch; }
.dk-row--center { align-items: center; }
/* The feature points sit under both columns of the feature row. */
.dk-feat__grid { margin-top: clamp(28px, 3vw, 44px); }
/* Deep links from the menu land on one of those cards, so keep it clear
   of the sticky header. */
.dk-card[id] { scroll-margin-top: 104px; }
.dk-row--wide { --dk-row-gap: clamp(32px, 4.5vw, 72px); }

.dk-col { display: flex; flex-direction: column; min-width: 0; }
/* Card grids are sized by explicit width, not by flex-grow.

   With `flex: 1 1 <basis>` a last row holding fewer cards than the rows above
   it stretches those cards to fill the whole width, so a set of four thirds
   rendered as three normal cards and one enormous one. Fixed widths keep every
   card identical whatever the count, and leave the remainder of the last row
   empty, which is what a half-populated grid should look like.

   The widths subtract --dk-row-gap rather than --dk-gap because .dk-row--wide
   sets a much larger gap; using the wrong one makes two columns overflow and
   wrap to one. In Elementor each breakpoint here is the child container's
   width setting for that device.

   Each width subtracts a further 1px. The gap is a vw-based clamp while the
   container is a fixed max-width, so an exact division can land a hundredth
   of a pixel over the line and wrap a two-column feature row onto two rows
   on a desktop screen. 1px is invisible and removes that cliff entirely. */
.dk-col--half,
.dk-col--third,
.dk-col--quarter { flex: 0 0 auto; width: 100%; }

@media (min-width: 480px) {
  .dk-col--quarter { width: calc((100% - var(--dk-row-gap)) / 2 - 1px); }
}

@media (min-width: 768px) {
  .dk-col--third   { width: calc((100% - var(--dk-row-gap)) / 2 - 1px); }
  .dk-col--quarter { width: calc((100% - 2 * var(--dk-row-gap)) / 3 - 1px); }
}

@media (min-width: 901px) {
  .dk-col--half    { width: calc((100% - var(--dk-row-gap)) / 2 - 1px); }
}

@media (min-width: 1025px) {
  .dk-col--third   { width: calc((100% - 2 * var(--dk-row-gap)) / 3 - 1px); }
  .dk-col--quarter { width: calc((100% - 3 * var(--dk-row-gap)) / 4 - 1px); }
}

/* Five cards in thirds leaves a hole at the end of the second row, so this
   row closes it: on desktop the last two take half each, and on tablet, where
   thirds become halves, the odd fifth runs the full width. In Elementor this is
   just the width setting on those card containers at each breakpoint. */
@media (min-width: 768px) and (max-width: 1024px) {
  .dk-row--five > .dk-col--third:nth-child(5) { width: 100%; }
}
@media (min-width: 1025px) {
  .dk-row--five > .dk-col--third:nth-child(n+4) { width: calc((100% - var(--dk-row-gap)) / 2 - 1px); }
}

/* The 45/55 split is a page layout, not a card grid: it is always exactly two
   columns and they should fill the row, so it keeps flex-grow. */
.dk-col--55 { flex: 1 1 min(100%, 540px); }
.dk-col--45 { flex: 1 1 min(100%, 400px); }

/* Halves nested inside the 55 column form a 2x2 tile block. They go two-up
   earlier than a full-width half would, because the container is narrower. */
@media (min-width: 601px) {
  .dk-col--55 > .dk-row > .dk-col--half { width: calc((100% - var(--dk-row-gap)) / 2 - 1px); }
}

/* --------------------------------------------------------------------------
   4. TYPE HELPERS — three roles, never more than two per component
   -------------------------------------------------------------------------- */

/* IBM Plex Mono — micro-typography */
.dk-eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--dk-mono);
  font-size: 12.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--dk-accent-ink);
  margin: 0 0 22px;
}
.dk-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--dk-spectrum); flex: 0 0 auto; }
.dk-eyebrow--plain::before { display: none; }
.dk-center .dk-eyebrow { justify-content: center; }

.dk-index {
  font-family: var(--dk-mono); font-size: 13px; font-weight: 500;
  letter-spacing: .12em; color: var(--dk-accent-ink);
  display: block; margin-bottom: 24px;
}

/* Instrument Sans — body roles */
.dk-lead { font-size: 20px; line-height: 1.6; color: var(--dk-body); max-width: 60ch; }
.dk-intro { font-size: 17.5px; line-height: 1.65; color: var(--dk-body); max-width: 62ch; }
.dk-fine { font-size: 14.5px; line-height: 1.6; color: var(--dk-muted); }

.dk-muted { color: var(--dk-muted); }
.dk-hl { color: var(--dk-accent-ink); }
.dk-center { text-align: center; }
.dk-center .dk-lead, .dk-center .dk-intro { margin-inline: auto; }

/* Night-band overrides */
.dk-band--night h1, .dk-band--night h2, .dk-band--night h3,
.dk-panel--night h2, .dk-panel--night h3 { color: #fff; }
.dk-band--night .dk-lead, .dk-band--night .dk-intro,
.dk-panel--night .dk-lead, .dk-panel--night .dk-intro { color: var(--dk-night-text); }
.dk-band--night .dk-eyebrow, .dk-panel--night .dk-eyebrow { color: var(--dk-accent-lit); }
.dk-band--night .dk-fine, .dk-panel--night .dk-fine { color: var(--dk-night-muted); }

/* --------------------------------------------------------------------------
   5. BUTTONS  →  Elementor Button widget
   -------------------------------------------------------------------------- */
.dk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--dk-text-font);
  font-size: 16.5px; font-weight: 600; letter-spacing: -.005em;
  padding: 15px 30px; min-height: 54px;
  border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-align: center;
  transition: background-color .22s ease, border-color .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.dk-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

.dk-btn--primary { background-image: var(--dk-btn); color: #fff; }
.dk-btn--primary:hover { box-shadow: var(--dk-glow); transform: translateY(-2px); }

.dk-btn--ghost { background: transparent; color: var(--dk-ink); border-color: var(--dk-line-strong); }
.dk-btn--ghost:hover { border-color: var(--dk-ink); background: var(--dk-card); }

.dk-btn--ink { background: var(--dk-ink); color: #fff; }
.dk-btn--ink:hover { background: #241f30; transform: translateY(-2px); }

/* Ghost button on a night band */
.dk-band--night .dk-btn--ghost, .dk-panel--night .dk-btn--ghost { color: #fff; border-color: var(--dk-night-line); }
.dk-band--night .dk-btn--ghost:hover, .dk-panel--night .dk-btn--ghost:hover { border-color: var(--dk-accent-lit); color: var(--dk-accent-lit); background: transparent; }

.dk-btn--sm { padding: 10px 22px; min-height: 44px; font-size: 15px; }
.dk-btn--block { width: 100%; }

.dk-textlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--dk-text-font); font-weight: 600; font-size: 16px;
  color: var(--dk-accent-ink);
  transition: gap .2s ease, color .2s ease;
}
.dk-textlink:hover { gap: 14px; color: var(--dk-ink); }
.dk-textlink svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   6. CARDS  →  Elementor child container / Icon Box widget
   -------------------------------------------------------------------------- */
.dk-card {
  display: flex; flex-direction: column;
  background: var(--dk-card);
  border: 1px solid var(--dk-line);
  border-radius: var(--dk-radius);
  padding: clamp(26px, 3vw, 38px);
  height: 100%;
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.dk-card:hover { border-color: var(--dk-line-strong); box-shadow: var(--dk-lift); }
a.dk-card:hover { transform: translateY(-4px); }

/* On a white band a card is a grey tile; on a grey band it is white.
   One rule, applied everywhere, keeps every surface distinct. */
.dk-band--well .dk-card { background: var(--dk-card); border-color: var(--dk-line); }
.dk-band:not(.dk-band--well):not(.dk-band--night) .dk-card { background: var(--dk-well); border-color: transparent; }
.dk-band:not(.dk-band--well):not(.dk-band--night) .dk-card:hover { border-color: var(--dk-line-strong); }
.dk-band:not(.dk-band--well):not(.dk-band--night) .dk-icon { background: var(--dk-card); }

/* The spectrum edge is its own 2px-tall container in Elementor. */
.dk-card__edge { flex: 0 0 auto; height: 2px; width: 48px; background: var(--dk-spectrum); margin-bottom: 26px; }
.dk-card--pillar .dk-card__edge { width: 100%; }

.dk-card__title { margin: 0 0 12px; }
.dk-card__title a { color: inherit; text-decoration: none; }
.dk-card__title a:hover { color: var(--dk-accent-ink); }
.dk-card__body { color: var(--dk-muted); font-size: 16.5px; line-height: 1.65; margin: 0 0 22px; }
.dk-card__foot { margin-top: auto; }

.dk-icon {
  width: 52px; height: 52px; border-radius: 13px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--dk-well); border: 1px solid var(--dk-line);
  color: var(--dk-accent-ink);
  margin-bottom: 24px;
}
.dk-icon svg { width: 24px; height: 24px; }

/* Brand logo variant of the icon tile, used on the tools page. White ground
   regardless of the band, since the marks are supplied on transparency and
   several of them are drawn in black. */
.dk-icon--logo { background: #fff; padding: 9px; }
.dk-band:not(.dk-band--well):not(.dk-band--night) .dk-icon--logo { background: #fff; }
.dk-icon--logo img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}

.dk-list { list-style: none; margin: 0; padding: 0; }
.dk-list li {
  position: relative; padding-left: 26px; margin-bottom: 11px;
  font-size: 16.5px; line-height: 1.6; color: var(--dk-body);
}
.dk-list li:last-child { margin-bottom: 0; }
.dk-list li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--dk-magenta);
}
.dk-panel--night .dk-list li { color: var(--dk-night-text); }

/* Row list: a bordered stack of label + detail rows with a leading dot and a
   trailing chevron. In Elementor this is a flex container of Icon Box widgets
   (icon left, title + description, chevron as the box's own icon on the right). */
.dk-rowlist { list-style: none; margin: 30px 0 0; padding: 0; border-top: 1px solid var(--dk-line); }
.dk-rowlist__item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 20px 4px; border-bottom: 1px solid var(--dk-line);
  transition: background-color .25s ease, padding-left .25s ease;
}
.dk-rowlist__item:hover { background: var(--dk-well); padding-left: 12px; }
.dk-band--well .dk-rowlist__item:hover { background: var(--dk-card); }

/* Every bullet is lit, all the time, and nothing about it changes on hover. */
.dk-rowlist__dot {
  flex: 0 0 auto; width: 9px; height: 9px; margin-top: 8px;
  border-radius: 50%;
  background: var(--dk-magenta); box-shadow: 0 0 0 4px rgba(211, 28, 163, .14);
}

.dk-rowlist__text { flex: 1 1 auto; min-width: 0; }
.dk-rowlist__text b {
  display: block; font-family: var(--dk-display); font-size: 18px; font-weight: 600;
  color: var(--dk-ink); letter-spacing: -.015em; margin-bottom: 6px;
}
.dk-rowlist__text span { display: block; font-size: 16px; line-height: 1.6; color: var(--dk-muted); }

.dk-rowlist__item svg {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 4px;
  color: var(--dk-line-strong);
  transition: color .25s ease, transform .25s ease;
}
.dk-rowlist__item.is-active svg,
.dk-rowlist__item:hover svg,
.dk-rowlist__item:focus-within svg { color: var(--dk-accent-ink); transform: translateX(4px); }

/* A row that goes somewhere is a link across its full width: the padding
   moves from the row onto the link, so the whole row is the click target and
   the hover indent still slides the content in. */
.dk-rowlist__item--link { padding: 0; }
.dk-rowlist__item--link:hover { padding-left: 0; }
.dk-rowlist__item--link:focus-within { background: var(--dk-well); }
.dk-band--well .dk-rowlist__item--link:focus-within { background: var(--dk-card); }
.dk-rowlist__link {
  display: flex; align-items: flex-start; gap: 16px; flex: 1 1 auto; min-width: 0;
  padding: 20px 4px; color: inherit;
  transition: padding-left .25s ease;
}
.dk-rowlist__item--link:hover .dk-rowlist__link,
.dk-rowlist__link:focus-visible { padding-left: 12px; }
.dk-rowlist__link:focus-visible { outline: 2px solid var(--dk-magenta); outline-offset: -2px; }

/* Only one chevron is ever lit. The first row's chevron carries the
   highlight while nothing is hovered or focused; once the pointer or focus is
   anywhere in the list, it lets go unless its row is the one pointed at. */
.dk-rowlist:hover .dk-rowlist__item.is-active:not(:hover) svg,
.dk-rowlist:focus-within .dk-rowlist__item.is-active:not(:focus-within) svg {
  color: var(--dk-line-strong); transform: none;
}

/* A plain row goes nowhere, so it gets no tint and no indent. */
.dk-rowlist__item--static:hover { background: none; padding-left: 4px; }
.dk-band--well .dk-rowlist__item--static:hover { background: none; }


/* Long-form article body. In Elementor each of these is an ordinary Heading,
   Text Editor or Image widget stacked in one container; the class only sets the
   reading measure and vertical rhythm so the widgets need no per-page styling. */
.dk-prose { max-width: 72ch; }
.dk-prose > * { margin-bottom: 24px; }
.dk-prose > *:last-child { margin-bottom: 0; }
.dk-prose p { font-size: 17.5px; line-height: 1.72; color: var(--dk-body); }
.dk-prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 52px; }
.dk-prose h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); margin-top: 38px; }
.dk-prose h2:first-child, .dk-prose h3:first-child { margin-top: 0; }
.dk-prose ul, .dk-prose ol { padding-left: 22px; }
.dk-prose li { font-size: 17.5px; line-height: 1.7; color: var(--dk-body); margin-bottom: 10px; }
.dk-prose li::marker { color: var(--dk-magenta); }
.dk-prose strong { color: var(--dk-ink); font-weight: 600; }
.dk-prose a { color: var(--dk-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.dk-prose a:hover { color: var(--dk-ink); }

/* A pull-out note inside an article: an Elementor container with a left border. */
.dk-note {
  background: var(--dk-well); border-left: 3px solid var(--dk-magenta);
  border-radius: 0 var(--dk-radius-sm) var(--dk-radius-sm) 0;
  padding: 24px clamp(20px, 2.4vw, 30px);
}
.dk-note p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--dk-body); }
.dk-note strong { display: block; font-family: var(--dk-display); color: var(--dk-ink); margin-bottom: 8px; }

/* Article side rail: contents links and an inline call to action. */
.dk-rail { position: sticky; top: 100px; }
@media (max-width: 900px) { .dk-rail { position: static; } }
.dk-rail__title { font-family: var(--dk-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dk-muted); margin-bottom: 16px; }
.dk-rail ol { list-style: none; margin: 0 0 34px; padding: 0; counter-reset: rail; }
.dk-rail li { counter-increment: rail; margin-bottom: 12px; }
.dk-rail a {
  display: flex; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--dk-muted);
  transition: color .2s ease;
}
.dk-rail a::before { content: counter(rail, decimal-leading-zero); font-family: var(--dk-mono); font-size: 12.5px; color: var(--dk-line-strong); flex: 0 0 auto; padding-top: 2px; }
.dk-rail a:hover { color: var(--dk-ink); }
.dk-rail a:hover::before { color: var(--dk-magenta); }

/* Some sections are introduced by the page H1 and need no visible heading of
   their own, but the document still needs one so the outline does not jump
   from H1 straight to the H3 of a card. This is that heading: present for
   screen readers and search engines, invisible on screen. */
.dk-sr-head {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.dk-media { flex: 0 0 auto; border-radius: var(--dk-radius); overflow: hidden; border: 1px solid var(--dk-line); background: var(--dk-well); }
.dk-media img { width: 100%; }
/* A shallower crop trims the overshoot without a fixed height, so the
   balance holds as the copy reflows at other widths. */
.dk-media--wide { aspect-ratio: 16 / 10; }
.dk-media--wide img { height: 100%; object-fit: cover; }
/* A wide image that also grows into whatever height its column has spare, so
   it can finish level with a taller neighbouring column. The 16:10 ratio is
   its floor: with no spare height, as when the columns stack, it stays 16:10. */
.dk-media.dk-media--fill { flex: 1 1 auto; }

/* A single action closing a section: pushed right on desktop, and full width
   on phones, the same as the hero's buttons. Elementor: a container with its
   content justified to the end, and the Button set to full width on mobile. */
.dk-sectionfoot { display: flex; justify-content: flex-end; margin-top: clamp(24px, 2.6vw, 32px); }
@media (max-width: 767px) {
  .dk-sectionfoot .dk-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   6b. ANNOUNCEMENT BAR — sits above the header, footer-dark
   -------------------------------------------------------------------------- */
.dk-topbar { background: var(--dk-night); color: var(--dk-night-text); }
.dk-topbar__inner {
  max-width: calc(var(--dk-shell-wide) + var(--dk-gutter) * 2); margin-inline: auto;
  padding: 8px var(--dk-gutter);
  /* Flex, not grid: this rebuilds as one Elementor flex container. */
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px 16px;
  font-size: 14.5px; line-height: 1.4; text-align: center;
}
.dk-topbar__msg {
  flex: 1 1 auto; margin: 0;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px 10px;
}

.dk-topbar b { color: #fff; font-weight: 600; }
.dk-topbar__sep, .dk-topbar__desc { color: var(--dk-night-muted); }
.dk-topbar a {
  color: var(--dk-accent-lit); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color .2s ease;
}
.dk-topbar a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   7. HEADER + MEGA MENU  →  Elementor Pro Header template (Mega Menu widget)
   -------------------------------------------------------------------------- */
.dk-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease;
}
.dk-header.is-stuck { background: rgba(255, 255, 255, .97); border-bottom-color: var(--dk-line); }

.dk-header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  max-width: calc(var(--dk-shell-wide) + var(--dk-gutter) * 2); margin-inline: auto;
  padding: 14px var(--dk-gutter);
}

/* Brand lockup: the icon as an image, the wordmark as live text. Setting the
   name in Space Grotesk rather than shipping it inside the PNG keeps it crisp
   at every size, lets the two halves take different colours on light and dark,
   and means the agency name is real text for search engines and screen readers.
   In Elementor this is a container holding an Image widget and two Heading
   widgets, not a single Site Logo widget. */
.dk-brand { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.dk-brand img { height: 46px; width: auto; flex: 0 0 auto; }
.dk-brand__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dk-brand__name {
  font-family: var(--dk-display); font-size: 27px; font-weight: 700;
  letter-spacing: -.035em; line-height: 1; color: var(--dk-ink);
  white-space: nowrap;
}
.dk-brand__name b { font-weight: 700; color: var(--dk-accent-ink); }
.dk-brand__tag {
  font-family: var(--dk-mono); font-size: 9.5px; font-weight: 400;
  letter-spacing: .19em; text-transform: uppercase; line-height: 1;
  color: var(--dk-muted); white-space: nowrap;
}

/* On the dark footer the wordmark inverts: white name, lit magenta accent. */
.dk-footer .dk-brand__name { color: #fff; }
.dk-footer .dk-brand__name b { color: var(--dk-accent-lit); }
.dk-footer .dk-brand__tag { color: var(--dk-night-muted); }

.dk-nav { display: flex; align-items: center; gap: clamp(2px, .35vw, 8px); }
.dk-nav__link {
  /* The picker has moved to the top bar, so the row can breathe again. The
     padding scales with the viewport: at the 1240 breakpoint where the nav
     first appears it is tight enough to fit, and it opens up on wide screens.
     Held in a custom property so the underline can match its inset exactly. */
  --dk-nav-pad: clamp(11px, 1.1vw, 18px);
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--dk-display); font-size: 17px; font-weight: 500; letter-spacing: -.01em;
  color: var(--dk-body);
  background: none; border: 0; cursor: pointer;
  padding: 11px var(--dk-nav-pad); border-radius: 10px;
  transition: color .2s ease, background-color .2s ease;
}

/* Hover marker: a magenta rule that grows out from the centre of the label.
   Transform rather than width so it animates on the compositor, and it is
   inset to the text rather than the padding box so it reads as an underline
   of the word instead of a block edge. */
.dk-nav__link::after {
  content: "";
  position: absolute; left: var(--dk-nav-pad); right: var(--dk-nav-pad); bottom: 5px;
  height: 2px; border-radius: 2px;
  background: var(--dk-accent-ink);
  transform: scaleX(0); transform-origin: center;
  opacity: 0;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
.dk-nav__link:hover, .dk-nav__link:focus-visible { color: var(--dk-ink); }
.dk-nav__link:hover::after, .dk-nav__link:focus-visible::after { transform: scaleX(1); opacity: 1; }

/* Current page keeps the rule, at half strength so hovering it still reads
   as a change rather than as nothing happening. */
.dk-nav__link.is-current { color: var(--dk-ink); }
.dk-nav__link.is-current::after { transform: scaleX(1); opacity: .4; }
.dk-nav__link.is-current:hover::after { opacity: 1; }

/* Open state. The trigger takes the accent colour and a soft wash that fades
   downward into the panel below it, so the two read as one connected surface
   rather than a button with a sheet under it. */
.dk-nav__link[aria-expanded="true"] {
  color: var(--dk-accent-ink);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--dk-accent-ink) 9%, transparent),
              color-mix(in srgb, var(--dk-accent-ink) 2%, transparent));
  border-radius: 10px 10px 0 0;
}
.dk-nav__link[aria-expanded="true"]::after { transform: scaleX(1); opacity: 1; }

/* Two-word items wrapped at the narrow end of the desktop range, leaving one
   item two lines tall in a row of one-line items. There is room for the full
   set on one line at 1240; it just has to be told not to break. Below 1240
   the burger takes over, so nothing can overflow. */
.dk-nav__link { white-space: nowrap; }
.dk-nav__link svg { width: 13px; height: 13px; transition: transform .25s ease; }
.dk-nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

.dk-header__cta { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }

.dk-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  z-index: var(--z-mega);
  background: var(--dk-card);
  border-top: 1px solid var(--dk-line);
  border-bottom: 1px solid var(--dk-line);
  box-shadow: 0 30px 60px -30px rgba(20, 18, 26, .35);
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.dk-mega.is-open { opacity: 1; visibility: visible; transform: translateY(0); }


.dk-mega__inner {
  display: flex; flex-wrap: wrap; gap: 32px;
  max-width: calc(var(--dk-shell-wide) + var(--dk-gutter) * 2); margin-inline: auto;
  padding: 38px var(--dk-gutter) 42px;
}
.dk-mega__col { flex: 1 1 240px; min-width: 0; }
.dk-mega__col--wide { flex: 1 1 330px; }

.dk-mega__label {
  font-family: var(--dk-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--dk-muted);
  margin: 0 0 18px;
}
.dk-mega__label--accent { color: var(--dk-accent-ink); }

/* Core expertise: numbered card per service */
.dk-mega__card {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--dk-card);
  border: 1px solid var(--dk-line);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.dk-mega__card + .dk-mega__card { margin-top: 10px; }
.dk-mega__card:hover { border-color: var(--dk-line-strong); box-shadow: var(--dk-lift); transform: translateY(-2px); }
.dk-mega__card:hover .dk-mega__num { background: var(--dk-accent-ink); }
.dk-mega__num {
  width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  /* #14121A is the footer colour. */
  background: #14121a; color: #fff;
  font-family: var(--dk-display); font-size: 15px; font-weight: 700; letter-spacing: -.01em;
}
.dk-mega__name { display: block; font-family: var(--dk-display); font-weight: 600; font-size: 16.5px; color: var(--dk-ink); letter-spacing: -.015em; }
.dk-mega__desc { display: block; font-size: 14px; color: var(--dk-muted); line-height: 1.5; margin-top: 3px; }

/* Plain link lists for the other two columns */
.dk-mega__simple {
  display: block; padding: 8px 0; font-size: 16px; color: var(--dk-body);
  transition: color .2s ease, padding-left .2s ease;
}
.dk-mega__simple:hover { color: var(--dk-accent-ink); padding-left: 5px; }

/* Dark promo card, sitting under the third column's links */
.dk-mega__feature { background: #14121a; border-radius: 14px; padding: 22px; margin-top: 22px; }
/* A bar across the foot of the menu: text left, link right, full row. */
.dk-mega__feature--bar {
  flex: 1 1 100%; margin-top: 6px;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 14px 28px;
  padding: 20px clamp(20px, 2.4vw, 28px);
}
.dk-mega__feature--bar .dk-mega__ftitle { margin-bottom: 4px; }
.dk-mega__feature--bar p { margin-bottom: 0; }
.dk-mega__ftitle { font-family: var(--dk-display); font-size: 18px; font-weight: 600; color: #fff; line-height: 1.25; letter-spacing: -.02em; margin: 0 0 8px; }
.dk-mega__feature p { font-size: 14px; color: var(--dk-night-muted); line-height: 1.5; margin: 0 0 14px; }
.dk-mega__flink { display: inline-flex; align-items: center; gap: 7px; font-family: var(--dk-text-font); font-size: 15px; font-weight: 600; color: var(--dk-accent-lit); transition: gap .2s ease; }
.dk-mega__flink:hover { gap: 12px; }

.dk-burger {
  display: none;
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--dk-card); border: 1px solid var(--dk-line-strong);
  color: var(--dk-ink); cursor: pointer;
  align-items: center; justify-content: center;
}
.dk-burger svg { width: 22px; height: 22px; }
.dk-burger__close { display: none; }
.dk-burger[aria-expanded="true"] .dk-burger__open { display: none; }
.dk-burger[aria-expanded="true"] .dk-burger__close { display: block; }

.dk-drawer {
  position: fixed; inset: 0; z-index: var(--z-drawer);
  background: var(--dk-paper);
  overflow-y: auto;
  padding: 90px var(--dk-gutter) 48px;
  transform: translateX(100%);
  transition: transform .3s ease;
  visibility: hidden;
}
.dk-drawer.is-open { transform: translateX(0); visibility: visible; }
body.dk-locked { overflow: hidden; }

.dk-drawer__group + .dk-drawer__group { border-top: 1px solid var(--dk-line); }
.dk-drawer__link {
  display: block; padding: 16px 0;
  font-family: var(--dk-display); font-size: 22px; font-weight: 600;
  color: var(--dk-ink); letter-spacing: -.02em;
}
.dk-drawer__toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 16px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--dk-display); font-size: 22px; font-weight: 600;
  color: var(--dk-ink); letter-spacing: -.02em; text-align: left;
}
.dk-drawer__toggle svg { width: 18px; height: 18px; transition: transform .25s ease; color: var(--dk-accent-ink); }
.dk-drawer__toggle[aria-expanded="true"] svg { transform: rotate(45deg); }
.dk-drawer__panel { display: none; padding-bottom: 14px; }
.dk-drawer__panel.is-open { display: block; }
.dk-drawer__sub { display: block; padding: 11px 0 11px 16px; font-size: 16.5px; color: var(--dk-muted); border-left: 1px solid var(--dk-line); }
.dk-drawer__sub:hover { color: var(--dk-accent-ink); border-left-color: var(--dk-magenta); }
.dk-drawer__foot { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; }

/* --------------------------------------------------------------------------
   8. HERO — three columns: copy, portrait, stat cards
   -------------------------------------------------------------------------- */
.dk-hero {
  padding-top: clamp(28px, 3.5vw, 52px);
  padding-bottom: 0;
  overflow: hidden;
  background:
    radial-gradient(900px 620px at 78% 8%, rgba(211, 28, 163, .07), transparent 62%),
    radial-gradient(700px 520px at 12% 4%, rgba(92, 76, 166, .05), transparent 60%);
}

/* The hero runs wider than the 1240 body shell so the portrait has room. */
.dk-hero .dk-shell { max-width: var(--dk-shell-wide); }
.dk-hero__row { align-items: flex-end; gap: clamp(24px, 3.2vw, 52px); flex-wrap: wrap; }
.dk-hero__copy { flex: 0 1 560px; padding-bottom: clamp(40px, 5vw, 72px); }
.dk-hero__art  { flex: 1 1 230px; align-self: stretch; }
.dk-hero__stats { flex: 0 1 246px; padding-bottom: clamp(40px, 5vw, 72px); gap: 14px; position: relative; z-index: 3; }

/* Outlined badge pill above the headline */
.dk-badge {
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--dk-line-strong);
  background: var(--dk-card);
  font-family: var(--dk-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--dk-body);
  margin-bottom: 26px;
}
.dk-badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--dk-magenta); flex: 0 0 auto;
}

.dk-hero h1 { margin-bottom: 22px; font-size: clamp(2.2rem, 3.9vw, 54px); text-wrap: initial; }
.dk-hero h1 .dk-hl { display: block; text-wrap: balance; }

.dk-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 32px; }

/* Secondary action: circular icon + label, per the reference */
.dk-playlink {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--dk-text-font); font-size: 16.5px; font-weight: 600;
  color: var(--dk-ink);
  transition: color .2s ease;
}
.dk-playlink__ring {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--dk-line-strong); background: var(--dk-card);
  color: var(--dk-accent-ink);
  transition: border-color .2s ease, background-color .2s ease;
}
.dk-playlink__ring svg { width: 15px; height: 15px; }
.dk-playlink:hover { color: var(--dk-accent-ink); }
.dk-playlink:hover .dk-playlink__ring { border-color: var(--dk-magenta); background: var(--dk-well); }

/* Social proof: avatar stack, stars, one line of text */
.dk-proof { display: flex; align-items: center; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
.dk-proof__avatars { display: flex; align-items: center; flex: 0 0 auto; }
.dk-proof__avatars img {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--dk-card); margin-left: -12px;
}
.dk-proof__avatars img:first-child { margin-left: 0; }
.dk-proof__text { min-width: 0; }
.dk-proof__stars { display: flex; gap: 3px; color: var(--dk-orange); margin-bottom: 4px; }
.dk-proof__stars svg { width: 15px; height: 15px; }
.dk-proof__text p { font-size: 14.5px; line-height: 1.45; color: var(--dk-muted); margin: 0; max-width: 30ch; }

/* Portrait sitting on a soft brand-tinted blob */
.dk-portrait { position: relative; display: flex; align-items: flex-end; justify-content: flex-end; height: 100%; min-height: 380px; }
.dk-portrait__blob {
  position: absolute; z-index: 0;
  right: -18%; bottom: 0;
  width: min(112%, 520px); aspect-ratio: 1 / 1.06;
  border-radius: 48% 52% 44% 56% / 56% 48% 52% 44%;
  background: linear-gradient(155deg, rgba(211, 28, 163, .13), rgba(92, 76, 166, .10) 55%, rgba(245, 140, 43, .09));
}
.dk-portrait__blob--soft {
  width: min(128%, 600px); aspect-ratio: 1 / 1; right: -24%;
  border-radius: 42% 58% 52% 48% / 48% 42% 58% 52%;
  background: rgba(211, 28, 163, .05);
  bottom: 6%;
}
.dk-portrait img {
  position: relative; z-index: 1;
  width: 100%; max-width: 388px; height: auto;
  display: block;
  /* Sits hard right, tucking under the stat cards like the reference.
     A percentage scales with the column, so the tuck stays proportional
     instead of swallowing the portrait at narrower desktop widths. */
  margin-right: -18%;
}

/* Decorative marks */
.dk-deco { position: absolute; z-index: 2; color: var(--dk-line-strong); pointer-events: none; }
.dk-deco--spark { bottom: 16%; left: -4%; width: 30px; color: var(--dk-ink); opacity: .5; }

/* Stat cards */
.dk-statcard {
  display: flex; align-items: center; gap: 14px;
  background: var(--dk-card);
  border: 1px solid var(--dk-line);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 14px 34px -24px rgba(20, 18, 26, .38);
  transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.dk-statcard:hover { border-color: var(--dk-line-strong); transform: translateY(-3px); box-shadow: var(--dk-lift); }
.dk-statcard__ico {
  width: 42px; height: 42px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--dk-well); color: var(--dk-accent-ink);
}
.dk-statcard__ico svg { width: 20px; height: 20px; }
.dk-statcard__n { display: block; font-family: var(--dk-display); font-size: 26px; font-weight: 700; color: var(--dk-ink); line-height: 1.05; letter-spacing: -.035em; }
.dk-statcard__l { display: block; font-family: var(--dk-mono); font-size: 11px; line-height: 1.35; letter-spacing: .07em; text-transform: uppercase; color: var(--dk-muted); margin-top: 5px; }

/* --------------------------------------------------------------------------
   8f. FLOATING SIGNAL CARDS
   Small dashboard chips that hover over the hero. Each one is a container set
   to Position: Absolute in Elementor, holding text widgets plus one SVG image.
   -------------------------------------------------------------------------- */
.dk-hero__row { position: relative; }

.dk-signal {
  position: absolute; z-index: 4;
  background: var(--dk-card);
  border: 1px solid var(--dk-line);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 18px 40px -20px rgba(20, 18, 26, .3), 0 2px 6px -2px rgba(20, 18, 26, .06);
  animation: dk-float 6s ease-in-out infinite;
  will-change: transform;
}

@keyframes dk-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-11px); }
}

.dk-signal__k {
  font-family: var(--dk-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--dk-muted);
  margin: 0 0 6px;
}
.dk-signal__v {
  font-family: var(--dk-display); font-size: 26px; font-weight: 700;
  letter-spacing: -.035em; color: var(--dk-ink); line-height: 1; margin: 0;
  display: flex; align-items: baseline; gap: 3px;
}
.dk-signal__v small { font-size: 15px; font-weight: 600; color: var(--dk-muted); }
.dk-signal__trend { display: inline-flex; align-items: center; gap: 3px; font-family: var(--dk-text-font); font-size: 12px; font-weight: 600; color: #17a34a; margin-left: 4px; }
.dk-signal__trend svg { width: 12px; height: 12px; }

/* A — organic clicks sparkline */
.dk-signal--a { top: 2%; right: 7%; width: 208px; animation-duration: 6.4s; }
.dk-signal--a .dk-signal__spark { width: 100%; height: 38px; margin-top: 8px; display: block; }

/* B — single score donut */
.dk-signal--b { top: 21%; right: -4%; width: 172px; animation-duration: 7.6s; animation-delay: -2.4s; }
.dk-signal__ring { display: flex; align-items: center; gap: 12px; }
.dk-signal__ring svg { width: 58px; height: 58px; flex: 0 0 auto; }
.dk-signal__ringnum { font-family: var(--dk-display); font-size: 17px; font-weight: 700; fill: var(--dk-ink); letter-spacing: -.02em; }
.dk-signal__note { font-size: 12.5px; line-height: 1.35; color: var(--dk-muted); margin: 0; }
.dk-signal__note b { display: block; font-family: var(--dk-display); font-size: 14px; font-weight: 600; color: var(--dk-ink); margin-bottom: 2px; }

/* C — three small score donuts */
.dk-signal--c { top: 60%; left: 40%; width: 212px; animation-duration: 6.9s; animation-delay: -4.1s; }
.dk-signal__trio { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; }
.dk-signal__dial { text-align: center; flex: 1 1 0; }
.dk-signal__dial svg { width: 46px; height: 46px; margin-inline: auto; display: block; }
.dk-signal__dialnum { font-family: var(--dk-display); font-size: 14px; font-weight: 700; fill: var(--dk-ink); letter-spacing: -.02em; }
.dk-signal__dial span { display: block; font-family: var(--dk-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dk-muted); margin-top: 5px; }

/* Decorative. Below the hero container's full 1340 width the columns tighten
   and the cards start colliding with the stat stack, so they drop out. */
@media (max-width: 1439px) { .dk-signal { display: none; } }

/* --------------------------------------------------------------------------
   8g. INNER PAGE HEADS + CONTACT ROWS
   -------------------------------------------------------------------------- */
.dk-pagehead { max-width: 840px; }
.dk-pagehead h1 { font-size: clamp(2.1rem, 4.6vw, 56px); margin-bottom: 20px; }
.dk-pagehead .dk-hero__actions { margin-top: 30px; }
.dk-center .dk-pagehead { margin-inline: auto; }

/* Contact methods: an icon, a label and the value that is the link. */
.dk-contact { list-style: none; margin: 0; padding: 0; }
.dk-contact li { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; border-bottom: 1px solid var(--dk-line); }
.dk-contact li:first-child { padding-top: 0; }
.dk-contact li:last-child { border-bottom: 0; }
.dk-contact__ico {
  width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--dk-well); border: 1px solid var(--dk-line); color: var(--dk-accent-ink);
}
.dk-contact__ico svg { width: 20px; height: 20px; }
.dk-contact__k { display: block; font-family: var(--dk-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dk-muted); margin-bottom: 4px; }
.dk-contact__v { font-family: var(--dk-display); font-size: 17px; font-weight: 600; color: var(--dk-ink); letter-spacing: -.015em; }
a.dk-contact__v:hover { color: var(--dk-accent-ink); }
.dk-contact__note { display: block; font-size: 14.5px; color: var(--dk-muted); margin-top: 3px; }

/* Numbered steps used on inner pages */
.dk-numstep { display: flex; gap: 18px; align-items: flex-start; }
.dk-numstep__n {
  width: 42px; height: 42px; border-radius: 999px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--dk-night); color: #fff;
  font-family: var(--dk-display); font-size: 15px; font-weight: 700;
}
.dk-numstep h3 { font-size: 19px; margin: 6px 0 8px; }
.dk-numstep p { font-size: 16.5px; line-height: 1.6; color: var(--dk-muted); margin: 0; }

/* --------------------------------------------------------------------------
   8h. PRICING PLANS  ->  Elementor Price Table widget
   -------------------------------------------------------------------------- */
.dk-plan {
  position: relative;
  display: flex; flex-direction: column; height: 100%;
  background: var(--dk-card);
  border: 1px solid var(--dk-line);
  border-radius: var(--dk-radius);
  padding: clamp(26px, 3vw, 36px);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.dk-plan:hover { border-color: var(--dk-line-strong); box-shadow: var(--dk-lift); transform: translateY(-3px); }
.dk-band--well .dk-plan { background: var(--dk-card); }

/* The recommended plan carries the weight, so it gets the ink border. */
.dk-plan--featured { border-color: var(--dk-ink); border-width: 2px; }
.dk-plan--featured:hover { border-color: var(--dk-ink); }
.dk-plan__badge {
  position: absolute; top: -13px; left: clamp(26px, 3vw, 36px);
  font-family: var(--dk-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--dk-ink); color: #fff;
  padding: 6px 13px; border-radius: 999px;
}

.dk-plan__name { font-family: var(--dk-display); font-size: 21px; font-weight: 700; color: var(--dk-ink); letter-spacing: -.02em; margin: 0 0 6px; }
.dk-plan__for { font-size: 15px; line-height: 1.55; color: var(--dk-muted); margin: 0 0 24px; min-height: 3.1em; }

.dk-plan__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dk-plan__amt { font-family: var(--dk-display); font-size: clamp(2.2rem, 3.6vw, 44px); font-weight: 700; color: var(--dk-ink); line-height: 1; letter-spacing: -.04em; }
.dk-plan__cur { font-family: var(--dk-display); font-size: 19px; font-weight: 600; color: var(--dk-ink); }
.dk-plan__per { font-family: var(--dk-text-font); font-size: 15px; font-weight: 500; color: var(--dk-muted); }
/* Approximate dollar figure, sitting tight under the FCFA amount so it reads
   as a conversion of that number and nothing else. */
.dk-plan__approx {
  font-family: var(--dk-mono); font-size: 12.5px; letter-spacing: .06em;
  color: var(--dk-accent-ink); margin: 8px 0 0;
}
.dk-plan__usd { font-family: var(--dk-mono); font-size: 12.5px; letter-spacing: .06em; color: var(--dk-muted); margin: 4px 0 24px; }

/* Same treatment on the shop, so a price means the same thing everywhere. */
.dk-product__approx {
  font-family: var(--dk-mono); font-size: 12.5px; letter-spacing: .06em;
  color: var(--dk-accent-ink); margin: 8px 0 0;
}

.dk-plan__cta { margin-bottom: 26px; }
.dk-plan__cta .dk-btn { width: 100%; }

.dk-checks { list-style: none; margin: 0; padding: 0; }
.dk-checks li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--dk-body); margin-bottom: 13px; }
.dk-checks li:last-child { margin-bottom: 0; }
.dk-checks svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 3px; color: var(--dk-accent-ink); }
.dk-checks li em { font-style: normal; color: var(--dk-muted); }

.dk-plan__foot { margin-top: auto; padding-top: 22px; }
.dk-pricenote { font-size: 14.5px; color: var(--dk-muted); text-align: center; margin-top: clamp(28px, 3.5vw, 44px); }

/* --------------------------------------------------------------------------
   8i. FILTER PILLS  ->  Elementor Loop Grid filter, or Taxonomy Filter widget
   -------------------------------------------------------------------------- */
.dk-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: clamp(30px, 3.5vw, 44px); }
/* Set in capitals, which is why the size drops and the tracking opens up:
   caps read larger and set tighter than lower case at the same values. Done
   here rather than in the labels, so the text stays sentence case for anything
   reading the page aloud and the filter values are untouched.

   Sized so the nine topics hold one line at 1240, the narrowest width the
   desktop layout is used at: the row needs 1097 of the 1145 it has, which
   leaves 48 to spare. Tracking is the expensive part, not the type size, since
   it is paid once per character across 96 of them, so it is the size that
   stayed as large as it could rather than the spacing. */
.dk-filter {
  font-family: var(--dk-text-font); font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 11px 14px; border-radius: 999px; cursor: pointer;
  background: var(--dk-card); border: 1px solid var(--dk-line-strong); color: var(--dk-ink);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.dk-filter:hover { border-color: var(--dk-ink); }
.dk-filter[aria-pressed="true"],
.dk-filter[aria-current="page"] { background: var(--dk-ink); border-color: var(--dk-ink); color: #fff; }
/* Used as links on the pricing pages, so they need anchor resets. */
a.dk-filter { display: inline-block; text-align: center; }
.dk-filters--tabs { margin-bottom: 0; }
.dk-projects .dk-col[hidden] { display: none; }
.dk-projects__empty { display: none; padding: 40px 0; color: var(--dk-muted); }
.dk-projects__empty.is-visible { display: block; }

/* Case study result strip */
.dk-result { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 44px); }
.dk-result__item { flex: 1 1 180px; }
.dk-result__n { font-family: var(--dk-display); font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 700; color: var(--dk-ink); line-height: 1; letter-spacing: -.035em; }
.dk-result__l { font-family: var(--dk-mono); font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dk-muted); margin-top: 10px; display: block; }
.dk-band--night .dk-result__n { color: #fff; }
.dk-band--night .dk-result__l { color: var(--dk-night-muted); }

/* --------------------------------------------------------------------------
   9. SECTION HEADS
   -------------------------------------------------------------------------- */
.dk-head { margin-bottom: clamp(40px, 5vw, 64px); }
.dk-head--split { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-end; justify-content: space-between; }
.dk-head__text { flex: 1 1 460px; }
/* Image alongside a split section head. It gives way to the copy first,
   then stacks under it once the row runs out of room. */
.dk-head__media { flex: 0 1 620px; max-width: 620px; }
/* Once the shell stops growing at 1340 the image can take the extra width.
   Below it the copy needs that space: the longest heading on these sections
   drops to a third line as soon as its column falls under about 490px. */
@media (min-width: 1340px) {
  .dk-head__media { flex: 0 1 690px; max-width: 690px; }
}
/* With an image in the head, both columns start on the same line rather
   than hanging from the bottom of the taller one. */
.dk-head--media { align-items: flex-start; }
/* The paragraph runs a little past the heading above it: enough overhang to
   look deliberate, not enough to lose the block. */
.dk-head--media .dk-intro { max-width: 40ch; }
.dk-head h2 { margin-bottom: 18px; }
/* On a phone the heading's button ("All services", "View full portfolio") sat
   between the intro and the first card, so people met the offer to see more
   before they had seen anything. Here it goes to the end of its section,
   after the last card. Done in CSS so every split head on the site follows,
   with no second copy of the link: the head dissolves into the shell, which
   becomes a column, and the button takes the last place. */
@media (max-width: 767px) {
  .dk-shell:has(> .dk-head--split > .dk-btn) { display: flex; flex-direction: column; }
  .dk-shell > .dk-head--split:has(> .dk-btn) { display: contents; }
  .dk-shell > .dk-head--split:has(> .dk-btn) > .dk-head__text { flex: none; margin-bottom: clamp(40px, 5vw, 64px); }
  .dk-shell > .dk-head--split > .dk-btn { order: 99; align-self: flex-start; margin-top: clamp(28px, 6vw, 40px); }

  /* The same on the two-column rows (intro and button on the left, the content on the
     right, e.g. the homepage FAQ): stacked on a phone, the button came before the content. */
  .dk-row:has(> .dk-col--45 > .dk-btn) { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .dk-row > .dk-col--45:has(> .dk-btn) { display: contents; }
  .dk-row > .dk-col--45 > .dk-btn { order: 99; align-self: flex-start; margin-top: clamp(28px, 6vw, 40px) !important; }
  .dk-row:has(> .dk-col--45 > .dk-btn) > .dk-col--55 { flex: none; margin-top: var(--dk-row-gap); }
}

/* --------------------------------------------------------------------------
   10. LOGO STRIP
   -------------------------------------------------------------------------- */
.dk-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px, 4.5vw, 60px); }
.dk-logos img { height: 44px; width: auto; opacity: .6; filter: grayscale(1); transition: opacity .25s ease, filter .25s ease; }
.dk-logos img:hover { opacity: 1; filter: grayscale(0); }

/* --------------------------------------------------------------------------
   6c. TOOL CAROUSEL — continuous logo marquee on the homepage
   -------------------------------------------------------------------------- */
/* Full-bleed inside a padded band, so items travel off both screen edges
   rather than stopping short at the gutter. */
.dk-marquee {
  position: relative;
  margin: 30px calc(var(--dk-gutter) * -1) 0;
  overflow: hidden;
  /* Feather both ends so logos dissolve instead of being chopped by the edge. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* Two identical sets sit side by side; travelling exactly half the track puts
   the second set where the first began, so the restart is invisible. */
.dk-marquee__track {
  display: flex; width: max-content;
  animation: dk-marquee-scroll 75s linear infinite;
}
.dk-marquee:hover .dk-marquee__track,
.dk-marquee:focus-within .dk-marquee__track { animation-play-state: paused; }

@keyframes dk-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.dk-marquee__set {
  display: flex; align-items: center; flex: 0 0 auto;
  gap: clamp(30px, 3.8vw, 62px);
  margin: 0; padding: 0 clamp(15px, 1.9vw, 31px);
  list-style: none;
}

/* These are famous marks and recognising them is the whole point of the strip,
   so they run in colour rather than the greyscale a client-logo wall would use.
   The slight desaturation and opacity stop the one filled, highly saturated
   tile in the set from dominating the band; hover restores full strength. */
.dk-marquee__item {
  display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto;
  opacity: .88;
  transition: opacity .25s ease;
}
.dk-marquee__item img {
  width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto;
  filter: saturate(.9);
  transition: filter .25s ease;
}
.dk-marquee__item span {
  font-family: var(--dk-display); font-size: 16px; font-weight: 600;
  letter-spacing: -.01em; color: var(--dk-body); white-space: nowrap;
  transition: color .25s ease;
}
.dk-marquee__item:hover { opacity: 1; }
.dk-marquee__item:hover img { filter: saturate(1); }
.dk-marquee__item:hover span { color: var(--dk-ink); }

@media (max-width: 767px) {
  .dk-marquee__item img { width: 28px; height: 28px; }
  .dk-marquee__item span { font-size: 15px; }
  .dk-marquee__set { gap: clamp(24px, 6vw, 40px); }
}

/* No motion: the track stops and the strip becomes a normal scrollable row,
   so every tool is still reachable. */
@media (prefers-reduced-motion: reduce) {
  .dk-marquee__track { animation: none; }
  .dk-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
}

/* --------------------------------------------------------------------------
   11. PILLAR CARDS
   -------------------------------------------------------------------------- */
.dk-pillar { position: relative; }
.dk-pillar h3 { font-size: clamp(1.4rem, 2.1vw, 29px); }
.dk-pillar .dk-list { margin: 22px 0 28px; }

/* Outlined index sits opposite the icon on the same line, rather than
   stacking above it as a small mono label. Offsets match the card padding
   so the numeral's cap height lines up with the top of the icon tile. */
.dk-pillar .dk-index {
  position: absolute;
  top: clamp(26px, 3vw, 38px);
  right: clamp(26px, 3vw, 38px);
  margin: 0;
  font-family: var(--dk-display);
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--dk-ghost);
  transition: -webkit-text-stroke-color .25s ease;
}
.dk-pillar:hover .dk-index { -webkit-text-stroke-color: var(--dk-magenta); }

/* --------------------------------------------------------------------------
   12. STEPS
   -------------------------------------------------------------------------- */
.dk-step { border-top: 2px solid var(--dk-ink); padding-top: 24px; }
.dk-step__n { font-family: var(--dk-mono); font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--dk-accent-ink); margin-bottom: 16px; display: block; }
.dk-step h3 { font-size: 21px; margin-bottom: 10px; }
.dk-step p { font-size: 16.5px; line-height: 1.6; color: var(--dk-muted); }

/* --------------------------------------------------------------------------
   13. WORK CARDS
   -------------------------------------------------------------------------- */
.dk-work { padding: 0; overflow: hidden; }
.dk-work img { width: 100%; transition: transform .5s ease; }
/* At 2-up the project cards are wide, so the native image ratio would let
   the picture dominate the card. A fixed 16:9 keeps image and copy balanced. */
#work .dk-work img { aspect-ratio: 16 / 9; object-fit: cover; }
.dk-work:hover img { transform: scale(1.04); }
.dk-work__meta { padding: 26px clamp(22px, 2.4vw, 30px) 30px; }
.dk-work__tag { font-family: var(--dk-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--dk-accent-ink); }
.dk-work h3 { font-size: 22px; margin: 12px 0 10px; }
.dk-work p { font-size: 16.5px; line-height: 1.6; color: var(--dk-muted); margin: 0; }
/* Project tags: separate pills, with the last one carrying the emphasis. */
.dk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.dk-tag {
  font-family: var(--dk-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  padding: 5px 11px; border-radius: 999px;
  background: var(--dk-card); border: 1px solid var(--dk-line); color: var(--dk-muted);
}
.dk-tag--dark { background: var(--dk-night); border-color: var(--dk-night); color: #fff; }
.dk-tag--accent { background: var(--dk-magenta); border-color: var(--dk-magenta); color: #fff; }
.dk-work__result { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--dk-line); font-family: var(--dk-display); font-weight: 600; color: var(--dk-ink); font-size: 16.5px; letter-spacing: -.01em; }

/* --------------------------------------------------------------------------
   14. PANELS + FORMS  →  Elementor Pro Form widget
   -------------------------------------------------------------------------- */
.dk-panel {
  background: var(--dk-card);
  border: 1px solid var(--dk-line);
  border-radius: clamp(18px, 2.2vw, 26px);
  padding: clamp(30px, 4vw, 58px);
}
.dk-panel--night { background: var(--dk-night); border-color: var(--dk-night-line); color: var(--dk-night-text); }

.dk-form { display: flex; flex-direction: column; gap: 18px; }
/* display:flex would otherwise beat the UA rule for the hidden attribute. */
.dk-form[hidden] { display: none; }
.dk-form__row { display: flex; flex-wrap: wrap; gap: 18px; }
.dk-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* Basis only applies where the parent is a row, so it sizes width and not height. */
.dk-form__row > .dk-field { flex: 1 1 220px; }
.dk-field label { font-family: var(--dk-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--dk-body); }
.dk-field .req { color: var(--dk-accent-ink); }

.dk-input, .dk-select, .dk-textarea {
  width: 100%;
  background: var(--dk-card);
  border: 1px solid var(--dk-line-strong);
  border-radius: var(--dk-radius-sm);
  color: var(--dk-ink);
  font-family: var(--dk-text-font);
  font-size: 16.5px;
  padding: 14px 16px;
  min-height: 52px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dk-textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.dk-input::placeholder, .dk-textarea::placeholder { color: #9a93a5; }

/* Knowledge base search. One pill holding the icon, the field, a clear button
   that only appears once there is something to clear, and the submit. */
.dk-search {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 5px 6px 5px 15px;
  background: var(--dk-card);
  border: 1px solid var(--dk-line-strong); border-radius: 999px;
  width: 100%; max-width: 300px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.dk-search:focus-within {
  border-color: var(--dk-accent-ink);
  box-shadow: 0 0 0 4px rgba(176, 20, 144, .10);
}
.dk-search__ico { display: flex; color: var(--dk-muted); flex: 0 0 auto; }
.dk-search__ico svg { width: 18px; height: 18px; }
.dk-search__input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; outline: none;
  font-family: var(--dk-body-font, inherit); font-size: 16px; color: var(--dk-ink);
  padding: 8px 0;
}
.dk-search__input::placeholder { color: #9a93a5; }
/* The browser's own clear affordance would sit next to ours. */
.dk-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* display:flex would otherwise win over the hidden attribute. */
.dk-search__clear[hidden] { display: none; }
.dk-search__clear {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 0; border-radius: 50%;
  background: var(--dk-well); color: var(--dk-muted); cursor: pointer;
  transition: color .2s ease, background-color .2s ease;
}
.dk-search__clear:hover { color: var(--dk-ink); background: var(--dk-line); }
.dk-search__clear svg { width: 13px; height: 13px; }
.dk-search__go { flex: 0 0 auto; }

/* Contact map. Fixed height rather than an aspect ratio: it sits in a column
   beside a tall form, and a ratio would make it grow with the column width.
   The frame holds the placeholder first and the iframe after somebody asks
   for it, so both are sized by the one rule and the page does not jump. */
.dk-map { margin: 30px 0 0; }
.dk-map__frame {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 24px;
  width: 100%; height: 270px; overflow: hidden;
  border-radius: 14px; background: var(--dk-well);
  border: 1px solid var(--dk-line);
}
.dk-map__pin { color: var(--dk-accent); }
.dk-map__pin svg { width: 30px; height: 30px; display: block; }
.dk-map__where {
  margin: 0; font-family: var(--dk-text-font); font-weight: 600; font-size: 17px;
  color: var(--dk-ink);
}
.dk-map__note { margin: 2px 0 0; font-size: 13.5px; color: var(--dk-muted); }
.dk-map iframe {
  display: block; width: 100%; height: 100%; border: 0;
  /* The embed ships a bright basemap; a touch of desaturation settles it into
     the page without making the streets hard to read. */
  filter: saturate(.92);
}
/* Once the map is in, the frame is only a window for it. A class rather than
   :has(iframe), so the state is set by the same code that inserts the map. */
.dk-map__frame.is-loaded { padding: 0; border-color: transparent; }
.dk-map figcaption { margin-top: 12px; font-size: 15px; }
.dk-map figcaption svg { width: 13px; height: 13px; vertical-align: -1px; margin-left: 2px; }

@media (max-width: 767px) { .dk-map__frame { height: 220px; } }

@media (max-width: 520px) {
  .dk-search { padding-left: 14px; max-width: none; }
}
.dk-input:focus, .dk-select:focus, .dk-textarea:focus {
  outline: none; border-color: var(--dk-magenta); box-shadow: 0 0 0 3px rgba(211, 28, 163, .18);
}
.dk-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b01490' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
  padding-right: 46px; cursor: pointer;
}

/* Fields on a night panel. background-color, not the shorthand, or the
   shorthand resets background-repeat and tiles the select chevron. */
.dk-panel--night .dk-field label { color: var(--dk-night-text); }
.dk-panel--night .dk-field .req { color: var(--dk-accent-lit); }
.dk-panel--night .dk-input,
.dk-panel--night .dk-select,
.dk-panel--night .dk-textarea { background-color: var(--dk-night-2); border-color: var(--dk-night-line); color: #fff; }
.dk-panel--night .dk-input::placeholder, .dk-panel--night .dk-textarea::placeholder { color: #7d7690; }
.dk-panel--night .dk-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4fc4' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.dk-panel--night .dk-select option { background: var(--dk-night-2); color: #fff; }

/* `.dk-field label` would otherwise shout the consent text in uppercase mono. */
.dk-check, .dk-field label.dk-check {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  font-family: var(--dk-text-font); font-size: 14.5px; font-weight: 400;
  letter-spacing: normal; text-transform: none;
  color: var(--dk-muted); line-height: 1.55;
}
.dk-panel--night .dk-check, .dk-panel--night .dk-field label.dk-check { color: var(--dk-night-muted); }
.dk-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--dk-magenta); flex: 0 0 auto; cursor: pointer; }

.dk-form__error { font-family: var(--dk-text-font); font-size: 14.5px; color: #c2185b; display: none; }
/* Shown only when a submission fails, so an enquiry is never lost in
   silence. Elementor: the form widget's own error message. */
.dk-form__fallback {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--dk-radius-sm);
  background: color-mix(in srgb, var(--dk-accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--dk-accent) 28%, transparent);
  font-size: 15px; line-height: 1.6; color: var(--dk-ink);
}
.dk-form__fallback a { color: var(--dk-accent-ink); font-weight: 600; text-decoration: underline; }
.dk-form__fallback[hidden] { display: none; }
/* Both of the big forms sit on a dark panel, where the default ink is
   invisible. */
.dk-band--night .dk-form__fallback, .dk-panel--night .dk-form__fallback {
  color: var(--dk-night-text);
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
}
.dk-band--night .dk-form__fallback a, .dk-panel--night .dk-form__fallback a {
  color: var(--dk-accent-lit);
}
.dk-panel--night .dk-form__error { color: #ff8fae; }
.dk-field.has-error .dk-input,
.dk-field.has-error .dk-select,
.dk-field.has-error .dk-textarea { border-color: #d81b60; }
.dk-field.has-error .dk-form__error { display: block; }

.dk-form__note { font-family: var(--dk-text-font); font-size: 14.5px; color: var(--dk-muted); line-height: 1.6; }
.dk-panel--night .dk-form__note { color: var(--dk-night-muted); }

.dk-form__ok {
  display: none;
  background: var(--dk-well);
  border: 1px solid var(--dk-line);
  border-left: 2px solid var(--dk-magenta);
  border-radius: var(--dk-radius-sm);
  padding: 22px 24px;
}
.dk-panel--night .dk-form__ok { background: var(--dk-night-2); border-color: var(--dk-night-line); border-left-color: var(--dk-magenta); }
.dk-form__ok.is-visible { display: block; }
.dk-form__ok strong { font-family: var(--dk-display); font-weight: 600; color: var(--dk-ink); display: block; margin-bottom: 6px; font-size: 19px; letter-spacing: -.02em; }
.dk-panel--night .dk-form__ok strong { color: #fff; }

/* --------------------------------------------------------------------------
   15. TESTIMONIALS  →  Elementor Testimonial + Star Rating widgets
   -------------------------------------------------------------------------- */
.dk-quote__stars { display: flex; gap: 4px; color: var(--dk-orange); margin-bottom: 22px; }
.dk-quote__stars svg { width: 17px; height: 17px; }
.dk-quote p { font-family: var(--dk-display); font-size: 17px; line-height: 1.5; font-weight: 400; color: var(--dk-ink); letter-spacing: -.015em; }
.dk-quote__who { display: flex; align-items: flex-start; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--dk-line); }
.dk-quote__who img { width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; }
.dk-quote__name { display: block; font-family: var(--dk-display); font-weight: 600; color: var(--dk-ink); font-size: 16.5px; letter-spacing: -.01em; }
.dk-quote__role { font-family: var(--dk-mono); font-size: 13px; color: var(--dk-muted); letter-spacing: .04em; }

/* --------------------------------------------------------------------------
   16. PRICE  →  Elementor Price Table widget
   -------------------------------------------------------------------------- */
.dk-price__amt { display: flex; align-items: baseline; gap: 9px; margin: 20px 0 6px; }
.dk-price__cur { font-family: var(--dk-mono); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--dk-muted); }
.dk-price__val { font-family: var(--dk-display); font-size: clamp(2.1rem, 3.4vw, 2.9rem); font-weight: 700; color: var(--dk-ink); line-height: 1; letter-spacing: -.035em; }
.dk-price__alt { font-size: 14.5px; color: var(--dk-muted); margin-bottom: 24px; }

/* --------------------------------------------------------------------------
   ARTICLE TEMPLATE  ->  Elementor: one two-column container. The main column is
   a stack of Heading / Text Editor / Image widgets; the sidebar is a set of
   small containers, each a widget group. Sticky is a container setting.
   -------------------------------------------------------------------------- */
.dk-post { display: flex; flex-wrap: wrap; gap: clamp(32px, 4vw, 64px); align-items: flex-start; }
.dk-post__main { flex: 2.2 1 min(100%, 600px); min-width: 0; }
.dk-post__side { flex: 1 1 min(100%, 300px); min-width: 0; }
/* The pillar sidebar is two short widgets rather than seven, so it fits on
   screen and pinning it keeps the contents rail reachable through a long
   guide. Elementor: a sticky setting on that container. */
.dk-post .dk-post__side--sticky { position: sticky; top: 100px; }
@media (max-width: 900px) { .dk-post .dk-post__side--sticky { position: static; } }
/* The sidebar scrolls with the article. It carries seven widgets and runs well
   past the height of a window, and a box taller than the viewport cannot be held
   on screen however it is pinned, so pinning it would only hide its lower half.
   Scrolling keeps every widget reachable.

   (body uses overflow-x: clip rather than hidden. hidden forces overflow-y to
   auto, which makes body a scroll container and silently disables
   position: sticky everywhere on the site. Nothing here relies on that now, but
   the next thing that wants sticky will work.) */
.dk-post__side { position: static; }
}
}

/* Breadcrumb */
.dk-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-family: var(--dk-mono); font-size: 11.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--dk-muted); margin-bottom: 22px; }
.dk-crumb a { color: var(--dk-muted); }
.dk-crumb a:hover { color: var(--dk-accent-ink); }
.dk-crumb i { font-style: normal; color: var(--dk-line-strong); }
.dk-crumb b { color: var(--dk-ink); font-weight: 500; }

/* Meta chip row */
.dk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 24px 0 32px; }
.dk-chip { display: inline-flex; align-items: center; gap: 8px;
  background: var(--dk-well); border: 1px solid var(--dk-line);
  border-radius: 999px; padding: 6px 15px 6px 6px;
  font-size: 14px; color: var(--dk-body); white-space: nowrap; }
.dk-chip--plain { padding-left: 15px; }
.dk-chip img { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
  background: #fff; border: 1px solid var(--dk-line); object-fit: contain; padding: 3px; }
.dk-chip svg { width: 15px; height: 15px; color: var(--dk-accent-ink); flex: 0 0 auto; }
.dk-chip b { font-weight: 600; color: var(--dk-ink); }

/* Key takeaway */
/* Citations under an article. Deliberately quiet: it is apparatus, not part
   of the argument, and a reader who wants it will go looking for it.
   Elementor: a container with a heading, a text block and an icon list. */
.dk-sources {
  margin: clamp(30px, 3.4vw, 44px) 0 0;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid var(--dk-line); border-radius: var(--dk-radius);
  background: var(--dk-well);
}
.dk-sources h2 {
  font-family: var(--dk-display); font-size: 21px; font-weight: 600;
  letter-spacing: -.02em; color: var(--dk-ink); margin: 0 0 8px;
}
.dk-sources > p {
  font-size: 15.5px; line-height: 1.65; color: var(--dk-muted); margin: 0 0 16px;
}
.dk-sources ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dk-sources li { font-size: 15.5px; line-height: 1.55; }
.dk-sources a { color: var(--dk-ink); text-decoration: none; }
.dk-sources a b { color: var(--dk-accent-ink); font-weight: 600; }
.dk-sources a:hover { text-decoration: underline; }
/* The global rule sets svg to display:block, which dropped the external
   arrow onto a line of its own. */
.dk-sources svg { display: inline; width: 12px; height: 12px; vertical-align: -1px;
  margin-left: 3px; color: var(--dk-muted); }

.dk-takeaway { display: flex; gap: 20px; align-items: flex-start;
  background: var(--dk-well); border: 1px solid var(--dk-line);
  border-left: 3px solid var(--dk-magenta);
  border-radius: 0 var(--dk-radius) var(--dk-radius) 0;
  padding: clamp(22px, 2.6vw, 30px); margin: 46px 0 0; }
.dk-takeaway .dk-icon { margin-bottom: 0; width: 46px; height: 46px; background: #fff; }
.dk-takeaway .dk-icon svg { width: 21px; height: 21px; }
.dk-takeaway h3 { font-size: 19px; margin: 0 0 8px; }
.dk-takeaway p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--dk-body); }

/* Share row */
.dk-share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding-top: 28px; border-top: 1px solid var(--dk-line); margin-top: 44px; }
.dk-share__label { font-family: var(--dk-mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dk-muted); margin-right: 4px; }
.dk-share a { width: 38px; height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dk-well); border: 1px solid var(--dk-line); color: var(--dk-body);
  transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.dk-share a:hover { color: #fff; background: var(--dk-accent-ink); border-color: var(--dk-accent-ink); }
.dk-share svg { width: 16px; height: 16px; }

/* Author card */
.dk-author { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start;
  background: var(--dk-well); border: 1px solid var(--dk-line);
  border-radius: var(--dk-radius); padding: clamp(22px, 2.6vw, 30px); margin-top: 40px; }
.dk-author__img { width: 62px; height: 62px; border-radius: 50%; flex: 0 0 auto;
  background: #fff; border: 1px solid var(--dk-line); object-fit: contain; padding: 9px; }
.dk-author__body { flex: 1 1 240px; min-width: 0; }
.dk-author__name { font-family: var(--dk-display); font-size: 19px; font-weight: 600;
  color: var(--dk-ink); letter-spacing: -.015em; }
.dk-author__role { font-family: var(--dk-mono); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dk-accent-ink); margin: 4px 0 12px; display: block; }
.dk-author p { font-size: 16px; line-height: 1.65; color: var(--dk-body); margin: 0; }

/* Comments */
.dk-comments { margin-top: 52px; }
.dk-comments h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin-bottom: 20px; }
.dk-comments__empty { display: flex; gap: 14px; align-items: flex-start;
  border: 1px dashed var(--dk-line-strong); border-radius: var(--dk-radius);
  padding: 22px clamp(18px, 2.2vw, 26px); margin-bottom: 26px; }
.dk-comments__empty .dk-icon { margin-bottom: 0; width: 42px; height: 42px; background: #fff; }
.dk-comments__empty .dk-icon svg { width: 19px; height: 19px; }
.dk-comments__empty p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--dk-muted); }
.dk-comments__empty b { display: block; color: var(--dk-ink); font-family: var(--dk-display);
  font-weight: 600; margin-bottom: 4px; }

/* Sidebar widgets */
.dk-widget { background: var(--dk-well); border: 1px solid var(--dk-line);
  border-radius: var(--dk-radius); padding: clamp(20px, 2.2vw, 26px); margin-bottom: 20px; }
.dk-widget:last-child { margin-bottom: 0; }
.dk-widget__title { font-family: var(--dk-mono); font-size: 11.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dk-muted); margin: 0 0 16px; }
.dk-widget .dk-rail { position: static; }
.dk-widget .dk-rail ol { margin-bottom: 0; }
.dk-widget .dk-share { margin-top: 0; padding-top: 0; border-top: 0; gap: 10px; }
/* Matched to the footer socials: same tile, same dark ground, same lit-magenta
   hover, so the two sets of icons read as one component in two places. */
.dk-widget .dk-share a {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--dk-night-2); border: 1px solid var(--dk-night-line);
  color: var(--dk-night-text);
  transition: color .2s ease, border-color .2s ease;
}
.dk-widget .dk-share a:hover {
  color: var(--dk-accent-lit); border-color: var(--dk-accent-lit);
  background: var(--dk-night-2);
}
.dk-widget .dk-share svg { width: 18px; height: 18px; }

/* Dark call-to-action widget */
.dk-widget--cta { background: var(--dk-night); border-color: var(--dk-night-line); }
.dk-widget--cta h3 { color: #fff; font-size: 22px; line-height: 1.25; margin: 14px 0 10px; }
.dk-widget--cta p { color: var(--dk-night-text); font-size: 15.5px; line-height: 1.6; margin: 0 0 20px; }
.dk-widget--cta .dk-badge { background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .16); color: #fff; }

/* Related posts */
.dk-related { list-style: none; margin: 0; padding: 0; }
.dk-related li { margin-bottom: 16px; }
.dk-related li:last-child { margin-bottom: 0; }
.dk-related a { display: flex; gap: 12px; align-items: flex-start; }
.dk-related img { width: 62px; height: 46px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.dk-related__date { display: block; font-family: var(--dk-mono); font-size: 10.5px;
  letter-spacing: .06em; color: var(--dk-muted); margin-bottom: 4px; }
.dk-related__t { display: block; font-size: 14.5px; line-height: 1.4; color: var(--dk-ink);
  font-weight: 500; transition: color .2s ease; }
.dk-related a:hover .dk-related__t { color: var(--dk-accent-ink); }

/* Category pills inside a widget */
.dk-widget .dk-filters { margin-bottom: 0; gap: 8px; }
.dk-widget .dk-filter { font-size: 11px; padding: 7px 11px; background: #fff; }


/* Tools card: the affiliate stack, filtered to the article's subject. */
.dk-toolkit { list-style: none; margin: 0 0 18px; padding: 0; }
.dk-toolkit li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.dk-toolkit li:last-child { margin-bottom: 0; }
.dk-toolkit__ico {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--dk-line); color: var(--dk-accent-ink);
}
.dk-toolkit__ico svg { width: 17px; height: 17px; }
/* Logo variant: the mark fills the tile, so it drops the accent tint. */
.dk-toolkit__ico--logo { padding: 6px; }
.dk-toolkit__ico--logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* The tool name is now a link out. Keep it looking like the heading it was,
   and let the magenta appear on hover so the row is not a wall of links. */
.dk-toolkit__link { color: inherit; text-decoration: none; }
.dk-toolkit__link:hover,
.dk-toolkit__link:focus-visible { color: var(--dk-accent-ink); text-decoration: underline;
  text-underline-offset: 3px; }
.dk-toolkit__body { min-width: 0; }
.dk-toolkit__n {
  display: block; font-family: var(--dk-display); font-size: 15px; font-weight: 600;
  color: var(--dk-ink); letter-spacing: -.01em; margin-bottom: 3px;
}
.dk-toolkit__n em {
  font-style: normal; font-family: var(--dk-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--dk-accent-ink);
  border: 1px solid var(--dk-line-strong); border-radius: 4px;
  padding: 1px 5px; margin-left: 6px; vertical-align: 2px;
}
.dk-toolkit__d { display: block; font-size: 13.5px; line-height: 1.5; color: var(--dk-muted); }

/* --------------------------------------------------------------------------
   17. ARTICLES + PRODUCTS
   -------------------------------------------------------------------------- */
/* Category and read time sit on one line. The long labels ("AI and
   automation") wrapped at 13px/.1em inside a three-up card, so the type is
   smaller, the tracking tighter, and nowrap stops the anonymous flex items
   breaking mid-label. The `p` in the selector is load-bearing: `.dk-work p`
   above sets 16.5px at the same specificity, so a bare class selector loses
   the font-size and the label silently stays body-sized. */
p.dk-article__meta { display: flex; align-items: center; gap: 7px; white-space: nowrap; font-family: var(--dk-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--dk-muted); margin-bottom: 12px; }
.dk-article__meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--dk-line-strong); flex: 0 0 auto; }
.dk-article h3 { font-size: 21px; line-height: 1.3; }

.dk-product__cover { flex: 0 0 auto; border-radius: var(--dk-radius-sm); overflow: hidden; border: 1px solid var(--dk-line); margin-bottom: 24px; }
.dk-product__price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
.dk-product__now { font-family: var(--dk-display); font-size: 25px; font-weight: 700; color: var(--dk-ink); letter-spacing: -.03em; }
.dk-product__was { font-family: var(--dk-mono); font-size: 14px; color: var(--dk-muted); text-decoration: line-through; }

/* --------------------------------------------------------------------------
   18. ACCORDION  →  Elementor Accordion widget
   -------------------------------------------------------------------------- */
.dk-acc { border-top: 1px solid var(--dk-line-strong); }
.dk-acc__item { border-bottom: 1px solid var(--dk-line-strong); }
.dk-acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 24px 0; background: none; border: 0; cursor: pointer;
  font-family: var(--dk-display); font-size: clamp(1.05rem, 1.5vw, 21px); font-weight: 600;
  color: var(--dk-ink); text-align: left; letter-spacing: -.02em;
  transition: color .2s ease;
}
.dk-acc__btn:hover { color: var(--dk-accent-ink); }
.dk-acc__btn svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--dk-accent-ink); transition: transform .28s ease; }
.dk-acc__btn[aria-expanded="true"] svg { transform: rotate(45deg); }
.dk-acc__panel { display: none; padding: 0 0 26px; max-width: 76ch; color: var(--dk-muted); font-size: 16.5px; line-height: 1.65; }
.dk-acc__panel.is-open { display: block; }

/* --------------------------------------------------------------------------
   19. CTA BAND
   -------------------------------------------------------------------------- */
.dk-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 36px; }

/* --------------------------------------------------------------------------
   20. FOOTER
   -------------------------------------------------------------------------- */
.dk-footer { background: var(--dk-night); color: var(--dk-night-text); padding: clamp(60px, 7vw, 96px) var(--dk-gutter) 0; border-top: 1px solid var(--dk-night-line); }
.dk-footer__top { display: flex; flex-wrap: wrap; gap: clamp(40px, 4.4vw, 64px); }   /* logo block to the first column */
.dk-footer__brand { flex: 1 1 260px; }
.dk-footer__brand .dk-brand { margin-bottom: 22px; width: max-content; max-width: 100%; }
.dk-footer__brand p { color: var(--dk-night-muted); font-size: 16px; line-height: 1.6; max-width: 38ch; }
/* The nav asks for the width its content actually needs (about 885px for the
   four columns plus their gaps) so it wins that space from the brand block instead of
   being squeezed into 145px columns that broke every long link onto two lines. */
.dk-footer__nav { --dk-fg: clamp(32px, 3vw, 44px); flex: 1 1 885px; display: flex; flex-wrap: wrap; gap: 32px var(--dk-fg); }
/* From 1330px wide the logo block and the four columns always share one row. The columns keep their natural width
   and sit against the right edge; whatever is left over becomes space between the logo block and Expertise, so the
   row can never tip over and drop the columns underneath the logo. Narrower than that they stack as before. */
@media (min-width: 1330px) {
  .dk-footer__top { flex-wrap: nowrap; }
  .dk-footer__brand { flex: 1 1 302px; min-width: 302px; }
  .dk-footer__nav { flex: 0 0 auto; flex-wrap: nowrap; }
}

/* min-width: max-content stops a column shrinking below its longest link, so
   "Search Engine Optimization" and "support@digital-krypton.com" stay on one
   line. flex-grow then spreads whatever is left over evenly across the columns.
   When they genuinely cannot fit, the row wraps rather than breaking the text. */
.dk-footer__col { flex: 1 1 auto; min-width: max-content; }
.dk-footer__col a { white-space: nowrap; }

/* Once the four columns no longer share a line, split them evenly two-up rather
   than letting content width leave a single column stranded on its own row. */
@media (max-width: 1024px) {
  .dk-footer__col { flex: 1 1 calc(50% - var(--dk-fg) / 2); }   /* half of the column gap */
}

/* Below this a half is narrower than the longest link, so min-width wins on
   some columns and not others and the rows come out ragged. Go single file. */
@media (max-width: 560px) {
  .dk-footer__col { flex: 1 1 100%; }
}
.dk-footer__col h3 { font-family: var(--dk-mono); font-size: 12.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--dk-night-muted); margin-bottom: 18px; }
.dk-footer__col ul { list-style: none; margin: 0; padding: 0; }
.dk-footer__col li { margin-bottom: 11px; }
.dk-footer__col a { font-size: 16px; color: var(--dk-night-text); transition: color .2s ease; }
.dk-footer__col a:hover { color: var(--dk-accent-lit); }

.dk-social { display: flex; gap: 10px; margin-top: 26px; }
.dk-social a {
  width: 42px; height: 42px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--dk-night-2); border: 1px solid var(--dk-night-line);
  color: var(--dk-night-text); transition: color .2s ease, border-color .2s ease;
}
.dk-social a:hover { color: var(--dk-accent-lit); border-color: var(--dk-accent-lit); }
.dk-social svg { width: 18px; height: 18px; }

.dk-footer__bar {
  display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between;
  margin-top: clamp(44px, 5vw, 64px); padding: 26px 0 30px;
  border-top: 1px solid var(--dk-night-line);
  font-family: var(--dk-mono); font-size: 13px; letter-spacing: .04em; color: var(--dk-night-muted);
}
.dk-footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.dk-footer__legal a:hover { color: var(--dk-accent-lit); }

/* WhatsApp float. Only the button shows by default; the label and the QR card
   are revealed on hover, and only where hovering is actually possible. On a
   phone there is no hover to give, and a QR code is useless on the device you
   would be scanning it with, so touch gets the button alone.
   The wrapper takes no pointer events, so the empty space it spans while the
   card is open does not sit on top of the page underneath it.
   Elementor: a floating container holding an image, a text block and a button,
   with the reveal on the container's hover state. */
.dk-wa {
  position: fixed; right: 20px; bottom: 20px; z-index: 44;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
  pointer-events: none;
}
.dk-wa__card, .dk-wa__link { pointer-events: auto; }

.dk-wa__link { display: flex; align-items: center; gap: 10px; }
.dk-wa__btn {
  width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: #2f8b7e; color: #fff;
  box-shadow: 0 12px 30px -8px rgba(47, 139, 126, .55);
  transition: transform .2s ease;
}
.dk-wa__btn svg { width: 28px; height: 28px; }
.dk-wa__link:hover .dk-wa__btn { transform: scale(1.07); }

.dk-wa__label, .dk-wa__card {
  background: #fff; border: 1px solid var(--dk-line);
  box-shadow: 0 18px 44px -14px rgba(20, 18, 26, .3);
  /* Hidden for everyone by default; the hover block below is the only thing
     that brings them back, so a touch device never sees them. visibility
     rather than display keeps the fade, and stops the hidden boxes from
     swallowing clicks. */
  opacity: 0; visibility: hidden; transform: translateY(6px);
  /* visibility carries a duration rather than a delay, which is the usual
     way of doing this: either endpoint being visible keeps the box on screen
     for the whole transition, so it appears at once on the way in and stays
     put until the fade has finished on the way out. */
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.dk-wa__label {
  border-radius: 999px; padding: 9px 16px;
  font-family: var(--dk-text-font); font-size: 14.5px; font-weight: 500;
  color: var(--dk-ink); white-space: nowrap;
}
.dk-wa__card {
  position: relative; border-radius: var(--dk-radius); padding: 14px 14px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  margin-right: 4px;
}
/* The tail pointing down at the button. */
.dk-wa__card::after {
  content: ""; position: absolute; right: 24px; bottom: -7px;
  width: 12px; height: 12px; background: #fff;
  border-right: 1px solid var(--dk-line); border-bottom: 1px solid var(--dk-line);
  transform: rotate(45deg);
}
.dk-wa__card img { display: block; width: 150px; height: 150px; }
.dk-wa__scan {
  font-family: var(--dk-text-font); font-size: 13.5px; color: var(--dk-muted);
}

@media (hover: hover) and (pointer: fine) {
  .dk-wa:hover .dk-wa__label, .dk-wa:hover .dk-wa__card,
  .dk-wa:focus-within .dk-wa__label, .dk-wa:focus-within .dk-wa__card {
    opacity: 1; visibility: visible; transform: none;
  }
}
/* Held shut after a click until the pointer leaves, so the card does not stay
   up behind the WhatsApp tab that just opened. Two classes on the wrapper, so
   it outweighs the hover rule above. */
.dk-wa.is-dismissed .dk-wa__label, .dk-wa.is-dismissed .dk-wa__card {
  opacity: 0; visibility: hidden; transform: translateY(6px);
}

/* --------------------------------------------------------------------------
   21. RESPONSIVE  →  Elementor Tablet (1024) + Mobile (767) breakpoints
   -------------------------------------------------------------------------- */
/* The seven nav items need 695px on one line and only get it above 1240px.
   Between 1025 and 1239 every link was breaking onto a second line and the bar
   ran to three rows, so the burger takes over across that whole band. */
@media (max-width: 1239px) {
  .dk-nav { display: none; }
  .dk-burger { display: flex; }
}

/* The CTA stays visible far longer than the nav: without the nav there is room
   for it, and it is the most valuable thing in the header. */
@media (max-width: 620px) {
  .dk-header__cta .dk-btn--primary { display: none; }
}

/* The centring track collapses first: below this the message takes the left
   of the bar and the picker the right. */
@media (max-width: 860px) {
  .dk-topbar__inner { text-align: left; }
  .dk-topbar__msg { justify-content: flex-start; }
}

/* Below this the bar cannot hold the announcement and the picker side by side,
   so the picker falls back to the drawer, which the burger opens from the
   sticky header at any scroll position. */
@media (max-width: 520px) {
  .dk-topbar__msg { justify-content: center; text-align: center; }
}

@media (max-width: 1024px) {
  /* Stat cards drop under the copy and run as a row. */
  .dk-hero__stats { flex: 1 1 100%; order: 3; flex-direction: row; padding-bottom: clamp(32px, 4vw, 56px); }
  .dk-hero__stats .dk-statcard { flex: 1 1 180px; }
  .dk-hero__art { order: 2; }
  .dk-hero__copy { order: 1; padding-bottom: 8px; flex: 1 1 100%; }
  .dk-hero .dk-shell { max-width: var(--dk-shell); }
  .dk-portrait img { margin-right: 0; }
  .dk-portrait__blob { right: 0; }
  .dk-portrait__blob--soft { right: -6%; }
}

@media (max-width: 767px) {
  body { font-size: 16px; }
  .dk-brand { gap: 10px; }
  .dk-brand img { height: 38px; }
  .dk-brand__name { font-size: 22px; }
  .dk-brand__tag { font-size: 8.5px; letter-spacing: .16em; }
  .dk-lead { font-size: 18px; }
  .dk-hero__actions .dk-btn { width: 100%; }
  .dk-hero__actions { gap: 14px; }
  .dk-hero__stats { flex-wrap: wrap; }
  .dk-hero__stats .dk-statcard { flex: 1 1 100%; }
  .dk-portrait { min-height: 0; justify-content: center; }
  .dk-portrait img { margin-right: 0; }
  .dk-portrait__blob { right: auto; left: 50%; transform: translateX(-50%); }
  .dk-portrait__blob--soft { right: auto; }
  /* Cap the portrait so it does not eat the whole mobile viewport. */
  .dk-portrait img { max-width: 330px; height: 400px; object-fit: cover; object-position: 50% 6%; }
  .dk-portrait__blob { width: min(120%, 340px); }
  .dk-badge { font-size: 11px; letter-spacing: .1em; }
  .dk-head--split { align-items: flex-start; }
  .dk-footer__bar { justify-content: flex-start; }
  .dk-wa { right: 14px; bottom: 14px; }
  .dk-topbar__inner { font-size: 13px; }
  .dk-topbar__inner { font-size: 13px; padding: 9px var(--dk-gutter); }
}

/* On the narrowest phones the tagline, being nowrap and heavily tracked, is
   the widest thing in the header and pushed the burger off screen. */
@media (max-width: 400px) {
  .dk-brand { gap: 8px; }
  .dk-brand img { height: 34px; }
  .dk-brand__name { font-size: 19px; }
  .dk-brand__tag { font-size: 7.5px; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --------------------------------------------------------------------------
   16. MOTION LAYER — scroll reveals, hero parallax, reading progress
   Behaviour styling only. Every rule here is inert until main.js adds the
   .js-motion flag to <html>, so a reader without JavaScript, or one who has
   asked for reduced motion, gets the finished page with nothing hidden.
   -------------------------------------------------------------------------- */

/* Reveal on scroll. The offset is deliberately small: the point is to draw the
   eye down the page, not to make the reader wait for content to arrive. */
[data-reveal] {
  transition: opacity .62s cubic-bezier(.22, .61, .36, 1),
              transform .62s cubic-bezier(.22, .61, .36, 1);
}
.js-motion [data-reveal] { opacity: 0; transform: translateY(18px); }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }

/* Hero parallax. The layers only ever receive a transform from the script, so
   nothing here needs to know their resting position. */
.js-motion .dk-hero [data-parallax] { will-change: transform; }

/* Reading progress, pinned to the bottom edge of the sticky header on article
   pages so it reads as part of the chrome rather than a floating bar. */
.dk-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  overflow: hidden; pointer-events: none;
}
.dk-progress i {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--dk-accent-ink), var(--dk-accent-lit));
}

@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   17. FAQ BOARD — two columns of topic cards
   Flex, not CSS grid: .dk-row/.dk-col is the site's own column system and maps
   to an Elementor flex container holding two child containers.
   -------------------------------------------------------------------------- */
/* Columns size to their own content instead of stretching to match, so a short
   column does not leave a tall empty card. */
.dk-faqboard { align-items: flex-start; margin-top: 6px; }

.dk-faqgroup {
  background: var(--dk-card);
  border: 1px solid var(--dk-line);
  border-radius: 18px;
  padding: clamp(22px, 2.3vw, 32px);
}
.dk-faqgroup + .dk-faqgroup { margin-top: var(--dk-row-gap); }

/* Scroll target sits under the sticky header rather than behind it. */
.dk-faqgroup { scroll-margin-top: 110px; }

.dk-faqgroup h2 {
  font-size: clamp(1.25rem, 1.7vw, 25px);
  margin: 0 0 4px;
}
.dk-faqgroup .dk-eyebrow { margin-bottom: 10px; }

/* Inside a card the accordion loses its outer rules: the card edge already
   draws the boundary, and a line hard against the padding reads as a mistake. */
.dk-faqgroup .dk-acc { border-top: 0; margin-top: 14px; }
.dk-faqgroup .dk-acc__item:last-child { border-bottom: 0; }
.dk-faqgroup .dk-acc__item:last-child .dk-acc__panel.is-open { padding-bottom: 0; }
.dk-faqgroup .dk-acc__btn { padding: 17px 0; gap: 14px; font-size: 16.5px; }
.dk-faqgroup .dk-acc__btn svg { width: 17px; height: 17px; }
.dk-faqgroup .dk-acc__panel p { font-size: 15.5px; }

/* The jump row sits directly above the board, so it reads as its controls
   rather than as a stray element after the page head. */
.dk-filters--jump { margin-bottom: 22px; }

@media (max-width: 900px) {
  .dk-faqgroup + .dk-faqgroup,
  .dk-col--half + .dk-col--half .dk-faqgroup:first-child { margin-top: var(--dk-row-gap); }
}

/* ---------------------------------------------------------------------------
   PHONE HERO: the portrait leads, then the promise, then the action.
   Desktop and tablet are untouched, and nothing is removed on phones: the same
   elements are reordered, and the portrait is cropped to head and shoulders,
   so his face, the headline and the audit button share the first screen.
   In Elementor: each container's and widget's Order at the Mobile breakpoint,
   the Image widget's height at Mobile, and the top bar's description hidden
   on Mobile.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .dk-topbar__sep, .dk-topbar__desc { display: none; }

  .dk-hero { padding-top: 14px; }
  .dk-hero__row { row-gap: 16px; }
  .dk-hero__art   { order: 0; }
  .dk-hero__copy  { order: 1; }
  .dk-hero__stats { order: 2; }

  .dk-hero__copy > .dk-badge         { order: 1; margin-bottom: 18px; }
  .dk-hero__copy > h1                { order: 2; margin-bottom: 18px; }
  .dk-hero__copy > .dk-hero__actions { order: 3; margin-top: 6px; }
  .dk-hero__copy > .dk-intro         { order: 4; margin-top: 30px; }
  .dk-hero__copy > .dk-proof         { order: 5; }

  .dk-portrait img { height: 226px; object-position: 50% 4%; }
  .dk-portrait__blob { width: min(76%, 244px); }
  .dk-portrait__blob--soft { width: min(88%, 282px); }

  /* Two of the floating cards come back around the portrait, scaled to fit:
     clicks top-left over the empty blob, AI visibility bottom-right over the
     shoulder, both clear of his face. The wide site-health card stays hidden,
     since at this width it could only sit across him. Positions are from the
     top of the hero row, where the portrait sits on phones. */
  .dk-signal--a, .dk-signal--b { display: block; padding: 9px 11px; border-radius: 12px; }
  .dk-signal--a { top: 4px; left: -2px; right: auto; width: 122px; }
  .dk-signal--b { top: 150px; right: -2px; width: 140px; }
  .dk-signal__k { font-size: 8.5px; margin-bottom: 4px; letter-spacing: .1em; }
  .dk-signal__v { font-size: 18px; }
  .dk-signal__v small { font-size: 11px; }
  .dk-signal__trend { font-size: 10px; margin-left: 2px; }
  .dk-signal__trend svg { width: 10px; height: 10px; }
  .dk-signal--a .dk-signal__spark { height: 22px; margin-top: 5px; }
  .dk-signal__ring { gap: 8px; }
  .dk-signal__ring svg { width: 38px; height: 38px; }
  .dk-signal__note { font-size: 10.5px; }
  .dk-signal__note b { font-size: 11.5px; }
}


/* --------------------------------------------------------------------------
   HOVER SYSTEM
   One quiet response for every object a visitor can point at: it rises a few
   pixels and casts a soft shadow, and images inside it ease forward. Nothing
   bounces, spins or changes colour wholesale.
   Elementor: each card container's Hover tab (border colour + box shadow),
   Advanced > Transform > Hover (Offset Y), transition 300ms. Image widgets
   use Hover Animation "Grow" or a hover Scale of 1.03. Icon Box icons use
   Hover Animation "Float".
   -------------------------------------------------------------------------- */
.dk-card,
.dk-plan,
.dk-statcard,
.dk-mega__card,
.dk-widget,
.dk-faqgroup,
.dk-panel:not(.dk-panel--night) {
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.2, .7, .2, 1),
              opacity .62s cubic-bezier(.22, .61, .36, 1);
}
.dk-card:hover,
.dk-widget:hover { transform: translateY(-4px); }
/* A card holding a form stays put while someone is typing in it. */
.dk-card:has(form):hover, .dk-card:has(input):hover { transform: none; }
.dk-panel:not(.dk-panel--night):not(:has(form)):hover,
.dk-faqgroup:hover { transform: translateY(-3px); box-shadow: var(--dk-lift); }

/* Once a card has scrolled into view, the reveal rule's "transform: none" is
   more specific than a plain :hover, so the lift is restated at that weight. */
.js-motion [data-reveal].is-in:is(.dk-card, .dk-widget):hover { transform: translateY(-4px); }
.js-motion [data-reveal].is-in:is(.dk-plan, .dk-statcard, .dk-faqgroup):hover,
.js-motion [data-reveal].is-in.dk-panel:not(.dk-panel--night):not(:has(form)):hover { transform: translateY(-3px); }
.js-motion [data-reveal].is-in.dk-card:is(:has(form), :has(input)):hover { transform: none; }

/* The spectrum rule on a card stretches a little, as if the card had been picked up. */
.dk-card__edge { transition: width .35s cubic-bezier(.2, .7, .2, 1); }
.dk-card:hover .dk-card__edge { width: 72px; }
.dk-card--pillar:hover .dk-card__edge { width: 100%; }

/* Icon chips lift a touch more than the card they sit on. */
.dk-icon { transition: transform .3s cubic-bezier(.2, .7, .2, 1), background-color .3s ease; }
.dk-card:hover .dk-icon,
.dk-plan:hover .dk-icon { transform: translateY(-2px); }

/* Images ease forward inside their frame; the frame itself never moves. */
.dk-media img,
.dk-product__cover img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.dk-media:hover img { transform: scale(1.03); }
.dk-product__cover:hover img,
.dk-card:hover .dk-product__cover img { transform: scale(1.025); }

/* Testimonial avatars and footer social icons. */
.dk-quote__who img { transition: transform .3s ease; }
.dk-card:hover .dk-quote__who img { transform: scale(1.06); }
.dk-social a { transition: color .25s ease, border-color .25s ease, transform .25s ease; }
.dk-social a:hover { transform: translateY(-2px); }

/* Touch screens have no hover; a tap should not leave a card floating. */
@media (hover: none) {
  .dk-card:hover, .dk-widget:hover, .dk-faqgroup:hover,
  .dk-panel:not(.dk-panel--night):hover,
  .dk-plan:hover, .dk-statcard:hover, a.dk-card:hover { transform: none; }
  .dk-media:hover img, .dk-product__cover:hover img,
  .dk-card:hover .dk-product__cover img { transform: none; }
  .js-motion [data-reveal].is-in:is(.dk-card, .dk-widget, .dk-plan, .dk-statcard, .dk-faqgroup, .dk-panel):hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dk-card, .dk-plan, .dk-statcard, .dk-mega__card, .dk-widget, .dk-faqgroup, .dk-panel,
  .dk-icon, .dk-card__edge, .dk-media img, .dk-product__cover img,
  .dk-quote__who img, .dk-social a { transition: none; }
  .dk-card:hover, .dk-widget:hover, .dk-faqgroup:hover, .dk-panel:hover,
  .dk-plan:hover, .dk-statcard:hover, a.dk-card:hover, .dk-mega__card:hover,
  .dk-card:hover .dk-icon, .dk-plan:hover .dk-icon, .dk-social a:hover { transform: none; }
  .dk-media:hover img, .dk-product__cover:hover img,
  .dk-card:hover .dk-product__cover img, .dk-card:hover .dk-quote__who img { transform: none; }
}

/* --------------------------------------------------------------------------
   AI AUTOMATION HIGHLIGHT
   -------------------------------------------------------------------------- */
/* "New" flag beside the service name in the menu. Elementor: a Heading or
   Text widget styled as a pill, or the Mega Menu item's badge. */
.dk-mega__new {
  display: inline-block; vertical-align: 2px; margin-left: 6px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--dk-magenta); color: #fff;
  font-family: var(--dk-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.5;
}

/* Lists and image frames on a dark band. */
.dk-band--night .dk-checks li { color: var(--dk-night-text); }
.dk-band--night .dk-checks svg { color: var(--dk-accent-lit); }
.dk-band--night .dk-media { border-color: var(--dk-night-line); background: transparent; }

/* A link inside an intro paragraph reads as a link. */
.dk-intro a { color: var(--dk-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.dk-intro a:hover { color: var(--dk-ink); }
.dk-band--night .dk-intro a { color: var(--dk-accent-lit); }
.dk-band--night .dk-intro a:hover { color: #fff; }

/* A row of related links in small print. */
.dk-linkline a { color: var(--dk-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.dk-linkline a:hover { color: var(--dk-ink); }

/* --------------------------------------------------------------------------
   TOP BAR ROTATOR
   "Do you want your business to be found on ___?" The platform name and its
   logo change every few seconds. Only one item is shown at a time, so the
   question mark follows the word the way a sentence would.
   -------------------------------------------------------------------------- */
.dk-topbar__q { color: #fff; font-weight: 600; }
.dk-rotator { display: inline-flex; align-items: center; vertical-align: middle; }
.dk-rotator__item { display: none; align-items: center; gap: 7px; }
.dk-rotator__item.is-on { display: inline-flex; animation: dk-rotate-in .55s cubic-bezier(.2, .7, .2, 1) both; }
.dk-rotator__item b { color: var(--dk-accent-lit); font-weight: 700; }
.dk-rotator__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; background: #fff; flex: 0 0 auto;
}
.dk-rotator__ico svg { width: 13px; height: 13px; }
.dk-topbar__qm { margin-left: 3px; }
@keyframes dk-rotate-in {
  from { opacity: 0; transform: translateY(55%); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-rotator__item.is-on { animation: none; }
}
@media (max-width: 767px) {
  .dk-rotator__ico { width: 19px; height: 19px; }
  .dk-rotator__ico svg { width: 11px; height: 11px; }
}

/* The bar must not change height as the platform name changes. The sentence
   never wraps; below 900px the link sits on its own line all the time, and on
   phones a shorter sentence is used. Elementor: responsive visibility on two
   Animated Headline widgets, and the Button at 100% width on tablet. */
.dk-topbar__q { white-space: nowrap; display: inline-flex; align-items: center; gap: 0 6px; }
.dk-topbar__short { display: none; }
@media (max-width: 900px) {
  .dk-topbar__msg a { flex-basis: 100%; }
}
@media (max-width: 600px) {
  .dk-topbar__long { display: none; }
  .dk-topbar__short { display: inline; }
}

/* The narrowest phones get a touch smaller type so "Google Maps" still fits. */
@media (max-width: 360px) {
  .dk-topbar__inner { font-size: 12px; padding-left: 12px; padding-right: 12px; }
  .dk-topbar__q { gap: 0 4px; }
}

/* A logo supplied as an image rather than an icon sits at the same size. */
.dk-rotator__ico img { width: auto; height: 14px; }
@media (max-width: 767px) { .dk-rotator__ico img { height: 12px; } }

/* "Add us as a preferred source on Google" card in the guide sidebars. */
.dk-prefsrc {
  display: flex; align-items: center; gap: 12px;
  padding-left: 20px; padding-right: 18px;
  background: var(--dk-card); color: var(--dk-ink);
  font-size: 13.5px; line-height: 1.3; text-decoration: none; white-space: nowrap;
}
.dk-prefsrc img { width: 26px; height: auto; flex: 0 0 auto; }
.dk-prefsrc:hover { border-color: var(--dk-line-strong); box-shadow: var(--dk-lift); color: var(--dk-ink); }

/* Keep the preferred-source line on one line where the sidebar is narrow:
   phones, and laptops where the sidebar column shrinks. */
@media (max-width: 420px), (min-width: 1025px) and (max-width: 1260px) {
  .dk-prefsrc { font-size: 12.5px; gap: 10px; padding-left: 16px; padding-right: 14px; }
  .dk-prefsrc img { width: 22px; }
}
@media (max-width: 345px) {
  .dk-prefsrc { font-size: 11.5px; gap: 8px; }
}

/* --------------------------------------------------------------------------
   LONG-FORM GUIDES: tables, figures, byline, key takeaways
   -------------------------------------------------------------------------- */
.dk-table { margin: 26px 0 30px; overflow-x: auto; border: 1px solid var(--dk-line);
  border-radius: var(--dk-radius-sm); background: var(--dk-card); }
.dk-table table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.dk-table caption { caption-side: top; text-align: left; padding: 14px 18px 0;
  font-family: var(--dk-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dk-muted); }
.dk-table th, .dk-table td { padding: 13px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--dk-line); }
.dk-table thead th { font-family: var(--dk-display); font-size: 14.5px; font-weight: 600; color: var(--dk-ink);
  background: var(--dk-well); border-bottom: 2px solid var(--dk-ink); }
.dk-table tbody th { font-weight: 600; color: var(--dk-ink); }
.dk-table td { color: var(--dk-body); }
.dk-table tbody tr:last-child th, .dk-table tbody tr:last-child td { border-bottom: 0; }
.dk-table:focus-visible { outline: 2px solid var(--dk-accent-ink); outline-offset: 2px; }

.dk-figure { margin: 30px 0 34px; }
.dk-figure img { width: 100%; height: auto; border-radius: var(--dk-radius-sm); border: 1px solid var(--dk-line); background: #fff; }
.dk-figure figcaption { margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--dk-muted); }

.dk-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px;
  margin: 0 0 26px; font-size: 14.5px; color: var(--dk-muted); }
.dk-byline img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: top; }
.dk-byline b { color: var(--dk-ink); font-weight: 600; }
.dk-byline span + span::before { content: "\00B7"; margin-right: 16px; color: var(--dk-line-strong); }
.dk-byline img + span::before { content: none; }

.dk-keypoints { background: var(--dk-card); border: 1px solid var(--dk-line); border-left: 3px solid var(--dk-magenta);
  border-radius: 0 var(--dk-radius-sm) var(--dk-radius-sm) 0; padding: 22px clamp(20px, 2.4vw, 30px); margin: 0 0 38px; }
.dk-keypoints__title { font-family: var(--dk-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dk-accent-ink); margin: 0 0 12px; }
.dk-keypoints ul { margin: 0; padding-left: 20px; }
.dk-keypoints li { margin-bottom: 8px; font-size: 16px; line-height: 1.6; }
.dk-keypoints li:last-child { margin-bottom: 0; }

.dk-author__img { object-fit: cover; object-position: top; }
.dk-prose .dk-author, .dk-prose .dk-sources { margin-top: 44px; }

/* Homepage: links to the eight complete guides. */
.dk-guidepills { margin-top: clamp(30px, 3.4vw, 44px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.dk-guidepills__label { margin: 0; font-family: var(--dk-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dk-muted); }
.dk-guidepills ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dk-guidepills a { display: inline-flex; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--dk-line-strong);
  font-size: 15px; font-weight: 500; color: var(--dk-ink); background: var(--dk-card);
  transition: border-color .2s ease, color .2s ease, transform .2s ease; }
.dk-guidepills a:hover { border-color: var(--dk-magenta); color: var(--dk-accent-ink); transform: translateY(-2px); }

/* Contents rail: the section being read is highlighted as the reader
   scrolls. Elementor: the Table of Contents widget does this natively. */
.dk-rail a.is-current { color: var(--dk-ink); font-weight: 600; }
.dk-rail a.is-current::before { color: var(--dk-magenta); }

.dk-chip img, .dk-author__img { object-fit: cover; object-position: top; }
.dk-artfaq { margin-top: 10px; }

/* "Go further" line closing each article. */
.dk-nextlinks { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--dk-line); font-size: 16px; }
.dk-nextlinks a { color: var(--dk-accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Long articles: the sidebar runs the full height of the article, and its
   last widget, the reading panel, stays in view once the others have scrolled
   past, so the column is never left empty. */
.dk-post .dk-post__side--long { align-self: stretch; display: flex; flex-direction: column; }
.dk-sidestick { position: sticky; top: 100px; }
.dk-sidestick > .dk-widget { margin-bottom: 14px; }
.dk-sidestick > .dk-widget:last-child { margin-bottom: 0; }
.dk-rail--compact ol { max-height: calc(100vh - 290px); overflow-y: auto; margin-bottom: 18px; padding-right: 4px; }
.dk-rail--compact li { margin-bottom: 9px; }
.dk-rail--compact a { font-size: 14.5px; line-height: 1.45; gap: 10px; }
.dk-rail--compact a::before { font-size: 11.5px; }
@media (max-width: 900px) { .dk-sidestick { display: none; } }

/* Articles and posts: the sticky container also carries the preferred-source card and
   the book slider, so the contents list gives up the room they take. */
.dk-sidestick--stack .dk-rail--compact ol { max-height: max(130px, calc(100vh - 560px)); }
.dk-sidestick--stack .dk-prefsrc { padding-top: 14px; padding-bottom: 14px; }

/* Book slider: one book at a time. Elementor: Loop Carousel, Slides to Show 1. */
.dk-bookslider { padding-bottom: 16px; }
.dk-bookslider .dk-widget__title { margin-bottom: 12px; }
.dk-bookslider__track { position: relative; min-height: 90px; }
.dk-bookslide { position: absolute; inset: 0; display: flex; align-items: center; gap: 16px;
  color: var(--dk-ink); text-decoration: none; opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility .45s; }
.dk-bookslide.is-on { position: relative; opacity: 1; visibility: visible; }
.dk-bookslide img { width: 62px; height: auto; flex: 0 0 auto; border-radius: 5px; box-shadow: 0 6px 16px rgba(22, 19, 31, .14); }
.dk-bookslide__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dk-bookslide__title { font-family: var(--dk-display); font-weight: 600; font-size: 16px; line-height: 1.3; }
.dk-bookslide:hover .dk-bookslide__title { color: var(--dk-accent-ink); }
.dk-bookslide__price { font-weight: 700; font-size: 14.5px; }
.dk-bookslide__soon { align-self: flex-start; font-family: var(--dk-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dk-accent-ink); background: rgba(211, 28, 163, .1); padding: 4px 8px; border-radius: 999px; }
.dk-bookslider__dots { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.dk-bookslider__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: var(--dk-line-strong); cursor: pointer; transition: background .2s, width .2s; }
.dk-bookslider__dots button[aria-current="true"] { width: 20px; border-radius: 4px; background: var(--dk-magenta); }
@media (prefers-reduced-motion: reduce) { .dk-bookslide { transition: none; } }

/* Main guides: the whole sidebar is pinned and now ends with the book slider,
   so the contents list scrolls inside its box to keep everything on screen,
   and the slider steps aside on short laptop screens. */
.dk-post__side--sticky > .dk-widget { margin-bottom: 14px; }
.dk-post__side--sticky > .dk-widget:last-child { margin-bottom: 0; }
.dk-post__side--sticky .dk-prefsrc { padding-top: 14px; padding-bottom: 14px; }
.dk-post__side--sticky .dk-rail ol { max-height: calc(100vh - 730px); overflow-y: auto; padding-right: 4px; }
@media (max-height: 919px) {
  .dk-post__side--sticky .dk-bookslider { display: none; }
  .dk-post__side--sticky .dk-rail ol { max-height: calc(100vh - 540px); }
}
@media (max-width: 900px) { .dk-post__side--sticky .dk-rail ol { max-height: none; } }

/* Author box: "How we work" and the founder's LinkedIn side by side. */
.dk-author__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* Swipe row: on phones a row of cards scrolls sideways, one at a time, with
   the next card peeking in so it reads as swipeable. */
@media (max-width: 767px) {
  .dk-row--swipe { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(-1 * var(--dk-gutter)); padding-inline: var(--dk-gutter);
    scroll-padding-inline: var(--dk-gutter); scrollbar-width: none; padding-bottom: 6px; }
  .dk-row--swipe::-webkit-scrollbar { display: none; }
  .dk-row--swipe > .dk-col { flex: 0 0 82%; width: 82%; scroll-snap-align: start; }
}

/* Homepage pricing: four starting-price cards. Four across on desktop, two
   across on tablet and phone. */
.dk-row--prices > .dk-col--quarter { width: calc((100% - var(--dk-row-gap)) / 2 - 1px); }
@media (min-width: 1025px) {
  .dk-row--prices > .dk-col--quarter { width: calc((100% - 3 * var(--dk-row-gap)) / 4 - 1px); }
}
@media (max-width: 767px) { .dk-row--prices { --dk-row-gap: 12px; } }
.dk-pricechip { padding: clamp(18px, 2vw, 26px); }
.dk-pricechip__label { font-family: var(--dk-display); font-weight: 600; font-size: clamp(15px, 1.4vw, 18px); color: var(--dk-ink); margin: 0; }
.dk-pricechip__from { margin-top: 12px; font-family: var(--dk-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dk-muted); }
.dk-pricechip__val { font-family: var(--dk-display); font-size: clamp(18px, 2.2vw, 28px); font-weight: 700; color: var(--dk-ink); letter-spacing: -.02em; }
.dk-pricechip__num, .dk-pricechip__per { white-space: nowrap; }
.dk-pricechip__per { font-size: .55em; font-weight: 600; color: var(--dk-muted); letter-spacing: 0; margin-left: 2px; }
.dk-pricechip__unit { margin: 4px 0 14px; font-size: clamp(13px, 1.1vw, 14.5px); line-height: 1.45; color: var(--dk-muted); }
.dk-pricechip .dk-card__foot { font-size: clamp(13px, 1.1vw, 15px); }

/* Phones: the two-column price cards are narrow, so the price is smaller and
   "FCFA" and the period are small, which keeps "/month" on the price line. */
@media (max-width: 767px) {
  .dk-pricechip { padding-left: 14px; padding-right: 14px; }
  .dk-pricechip__val { font-size: 16px; }
  .dk-pricechip__cur, .dk-pricechip__per { font-size: 10.5px; font-weight: 600; letter-spacing: 0; }
  .dk-pricechip__cur { color: var(--dk-ink); }
  .dk-pricechip__per { margin-left: 1px; }
}

/* Homepage expertise cards on phones: title, description and link only,
   stacked. The bullet lists stay on tablet and desktop. */
@media (max-width: 767px) {
  .dk-row--pillars .dk-pillar .dk-list { display: none; }
  .dk-row--pillars .dk-pillar .dk-card__body { margin-bottom: 20px; }
  .dk-row--pillars { --dk-row-gap: 16px; }
}

/* Homepage shop on phones: two-line descriptions ending in an ellipsis,
   and the price and button sit straight under them, so the cards are shorter. */
@media (max-width: 767px) {
  .dk-row--books .dk-card__body { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin-bottom: 12px; }
  .dk-row--books .dk-product__price { margin: 0; }
  .dk-row--books .dk-card__foot { margin-top: 14px; padding-top: 0; }
  .dk-row--books .dk-card__title { margin-bottom: 8px; }
}

/* --------------------------------------------------------------------------
   PHONE TYPE SCALE
   Titles step down clearly on phones; body text steps down a little and never
   below 15px. Long-form reading (guides, posts) stays a touch larger.
   Elementor: Site Settings > Typography, mobile values for each style.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body { font-size: 16px; }
  h1 { font-size: 2rem; }
  h2 { font-size: 1.625rem; }
  h3 { font-size: 1.1875rem; }
  .dk-hero h1 { font-size: 2rem; }
  .dk-pagehead h1 { font-size: 1.875rem; }
  .dk-pillar h3 { font-size: 1.3125rem; }
  .dk-intro { font-size: 16px; line-height: 1.6; }
  .dk-lead { font-size: 17px; }
  .dk-card__body { font-size: 15px; line-height: 1.6; }
  .dk-list li { font-size: 15px; }
  .dk-note p { font-size: 15.5px; }
  .dk-prose p, .dk-prose li { font-size: 16.5px; line-height: 1.7; }
  .dk-prose h2 { font-size: 1.375rem; }
  .dk-prose h3 { font-size: 1.125rem; }
  .dk-step h3 { font-size: 19px; }
  .dk-step p { font-size: 15px; }
  .dk-work h3 { font-size: 19px; }
  .dk-work p { font-size: 15px; }
  .dk-quote p { font-size: 15px; }
  .dk-acc__panel { font-size: 15.5px; }
}

/* Guide pills on phones: smaller, tighter chips (still a comfortable tap target). */
@media (max-width: 767px) {
  .dk-guidepills { gap: 10px; }
  .dk-guidepills ul { gap: 6px; }
  .dk-guidepills a { padding: 6px 11px; font-size: 12.5px; line-height: 1.4; }
  .dk-guidepills__label { font-size: 10.5px; }
}

/* Phones: the tools strip label stays on one line, and the closing
   "Next step" buttons are smaller so all three sit on one row. */
@media (max-width: 767px) {
  .dk-eyebrow--fit { font-size: 9.5px; letter-spacing: .07em; white-space: nowrap; }
  .dk-band--night .dk-cta__actions { gap: 8px; margin-top: 28px; }
  .dk-band--night .dk-cta__actions .dk-btn { padding: 9px 11px; min-height: 40px; font-size: 12.5px; white-space: nowrap; }
  .dk-band--night .dk-cta__actions .dk-btn svg { display: none; }
}

/* Swipe row arrows (added by main.js under each sideways-scrolling row). */
.dk-swipenav { display: none; }
@media (max-width: 767px) {
  .dk-swipenav { display: flex; justify-content: center; gap: 14px; margin-top: 16px; }
  .dk-swipenav.is-off { display: none; }
  .dk-swipenav__btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--dk-line-strong); background: var(--dk-card); color: var(--dk-magenta);
    cursor: pointer; transition: opacity .25s ease, border-color .2s ease; }
  .dk-swipenav__btn svg { width: 18px; height: 18px; }
  .dk-swipenav__btn--next svg { animation: dk-nudge-r 1.6s ease-in-out infinite; }
  .dk-swipenav__btn--prev svg { animation: dk-nudge-l 1.6s ease-in-out infinite; }
  .dk-swipenav__btn:disabled { opacity: .3; cursor: default; }
  .dk-swipenav__btn:disabled svg { animation: none; }
  .dk-swipenav__btn:not(:disabled):active { border-color: var(--dk-magenta); }
}
@keyframes dk-nudge-r { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@keyframes dk-nudge-l { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .dk-swipenav__btn svg { animation: none !important; } }

/* --------------------------------------------------------------------------
   CUSTOM CURSOR (added by main.js on devices with a mouse only)
   A magenta dot and a trailing ring. The ring grows over anything clickable.
   -------------------------------------------------------------------------- */
.dk-cursor-dot, .dk-cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 2147483000;
  border-radius: 50%; opacity: 0; will-change: transform; }
.dk-cursor-dot { width: 8px; height: 8px; background: var(--dk-magenta);
  transition: opacity .25s ease, width .25s ease, height .25s ease; }
.dk-cursor-ring { width: 34px; height: 34px; border: 1.5px solid rgba(211, 28, 163, .45); background: rgba(211, 28, 163, 0);
  transition: opacity .25s ease, width .3s cubic-bezier(.16, 1, .3, 1), height .3s cubic-bezier(.16, 1, .3, 1),
              background-color .3s ease, border-color .3s ease; }
.dk-cursor-on .dk-cursor-dot, .dk-cursor-on .dk-cursor-ring { opacity: 1; }
.dk-cursor-hover .dk-cursor-ring { width: 58px; height: 58px; background: rgba(211, 28, 163, .12); border-color: rgba(211, 28, 163, .6); }
.dk-cursor-hover .dk-cursor-dot { width: 0; height: 0; }
.dk-cursor-down .dk-cursor-ring { width: 26px; height: 26px; }
.dk-cursor-typing .dk-cursor-dot, .dk-cursor-typing .dk-cursor-ring { opacity: 0; }
/* The system pointer is hidden only while the custom one is showing, and comes
   back for typing. */
.dk-has-cursor.dk-cursor-on, .dk-has-cursor.dk-cursor-on body,
.dk-has-cursor.dk-cursor-on a, .dk-has-cursor.dk-cursor-on button,
.dk-has-cursor.dk-cursor-on summary, .dk-has-cursor.dk-cursor-on label,
.dk-has-cursor.dk-cursor-on select, .dk-has-cursor.dk-cursor-on [role="button"] { cursor: none; }
.dk-has-cursor input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]),
.dk-has-cursor textarea { cursor: text; }

/* ---- cookie notice: shown only when an analytics ID is configured ---------- */
.dk-consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999;
  max-width: 760px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  background: var(--dk-night); color: var(--dk-night-text);
  border: 1px solid var(--dk-night-line); border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgba(20, 18, 26, .5);
}
.dk-consent__text { margin: 0; flex: 1 1 320px; font-size: 15px; line-height: 1.5; }
.dk-consent__text a { color: #fff; text-decoration: underline; }
.dk-consent__actions { display: flex; gap: 10px; }
.dk-consent .dk-btn { padding: 10px 20px; min-height: 0; font-size: 15px; }
.dk-consent .dk-btn--ghost { background: transparent; color: #fff; border-color: var(--dk-night-line); }
@media (max-width: 600px) {
  .dk-consent__actions { width: 100%; }
  .dk-consent__actions .dk-btn { flex: 1; }
}

/* ---- client quotes: same height, pinned footers, optional fold-away text ---- */
.dk-quote__body { flex: 1 1 auto; margin: 0 0 24px; }
.dk-quote__text { margin: 0 0 14px; }
.dk-quote > .dk-quote__who { margin-top: auto; }
/* Folded: every card is the same height with the names level. Opened: each card is as tall as its own
   text, so a short quote is not stretched to the length of a long one. */
.dk-row.is-open { align-items: flex-start; }
.dk-row.is-open .dk-card { height: auto; }
.dk-row.is-open .dk-quote > .dk-quote__who { margin-top: 12px; }
.dk-quote__text p + p { margin-top: .8em; }
.dk-quote__text.is-clamped {
  max-height: calc(1.5em * 8);           /* 8 lines of the card's own type size */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
  mask-image: linear-gradient(#000 72%, transparent);
}
.dk-quote__more {
  align-self: flex-start;
  margin: 0 0 14px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font: 600 15px/1.2 var(--dk-text-font); color: var(--dk-accent-ink);
  text-decoration: underline; text-underline-offset: 3px;
}
.dk-quote__more:hover { color: var(--dk-ink); }