/* ==========================================================================
   Diligence Data & Networks — Design system & components
   --------------------------------------------------------------------------
   This file is shared by the local preview AND Squarespace (Custom CSS).
   Every component lives under a root element with class "ddn", so nothing
   here touches Squarespace's own markup. Native-element tweaks live in
   squarespace-native.css.

   Written to be safe for Squarespace's LESS-based CSS editor:
   - mixed-unit math always wrapped in calc()
   - no "/" shorthands (grid-column, aspect-ratio, font)
   ========================================================================== */

:root {
  /* Brand palette */
  --ddn-ink: #14263A;          /* deep navy: primary text, dark sections */
  --ddn-ink-deep: #0D1A28;     /* footer */
  --ddn-ink-soft: #1D3349;     /* raised surfaces on navy */
  --ddn-paper: #F7F6F2;        /* warm white: page background */
  --ddn-paper-2: #EFEDE6;      /* alternate section */
  --ddn-card: #FCFBF8;         /* cards on paper */
  --ddn-teal: #347B83;         /* technology accent (graphics) */
  --ddn-teal-text: #2A6870;    /* teal for text on light (AA) */
  --ddn-teal-light: #8CC1C6;   /* teal for text on navy */
  --ddn-teal-tint: #E2ECEB;
  --ddn-slate: #5A6977;        /* muted text (AA on paper) */
  --ddn-mist: #AEBBC7;         /* muted text on navy */
  --ddn-copper: #C58B64;       /* warm accent (graphics, text on navy) */
  --ddn-copper-text: #8F5634;  /* copper for text on light (AA) */
  --ddn-copper-tint: #F2E7DC;

  --ddn-line: rgba(20, 38, 58, 0.14);
  --ddn-line-strong: rgba(20, 38, 58, 0.30);
  --ddn-line-dark: rgba(247, 246, 242, 0.16);

  /* Type */
  --ddn-serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --ddn-sans: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;

  /* Motion */
  --ddn-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ddn-radius: 3px;
}

/* --------------------------------------------------------------------------
   Base (scoped)
   -------------------------------------------------------------------------- */
.ddn,
.ddn *,
.ddn *::before,
.ddn *::after {
  box-sizing: border-box;
}
.ddn,
.ddn * {
  white-space: normal; /* Squarespace 7.1 sets pre-wrap on some text */
}
.ddn {
  font-family: var(--ddn-sans);
  color: var(--ddn-ink);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.ddn h1, .ddn h2, .ddn h3, .ddn h4, .ddn p, .ddn ul, .ddn ol, .ddn figure {
  margin: 0;
  padding: 0;
}
.ddn ul, .ddn ol { list-style: none; }
.ddn li { margin: 0; padding: 0; }
.ddn li::before { content: none; }
.ddn a { color: inherit; text-decoration: none; }
.ddn [id] { scroll-margin-top: 110px; }
.ddn .ddn-stack { display: grid; gap: 1.25rem; align-content: start; }
.ddn .ddn-icon { width: 32px; height: 32px; }
.ddn svg { display: block; }
.ddn :focus-visible {
  outline: 2px solid var(--ddn-teal);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
.ddn .ddn-kicker {
  font-family: var(--ddn-sans);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--ddn-slate);
}

.ddn .ddn-display,
.ddn .ddn-h1,
.ddn .ddn-h2,
.ddn .ddn-h3 {
  font-family: var(--ddn-serif);
  font-weight: 400;
  color: inherit;
  text-transform: none;
  font-optical-sizing: auto;
}
.ddn .ddn-display {
  font-size: clamp(2.75rem, calc(1.35rem + 4.3vw), 5.4rem);
  line-height: 1.01;
  letter-spacing: -0.025em;
}
.ddn .ddn-display em,
.ddn .ddn-h1 em,
.ddn .ddn-h2 em {
  font-style: italic;
  font-weight: 300;
}
.ddn .ddn-h1 {
  font-size: clamp(2.4rem, calc(1.3rem + 3.2vw), 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
}
.ddn .ddn-h2 {
  font-size: clamp(1.9rem, calc(1.2rem + 1.9vw), 3rem);
  line-height: 1.1;
  letter-spacing: -0.018em;
}
.ddn .ddn-h3 {
  font-size: clamp(1.4rem, calc(1.15rem + 0.6vw), 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ddn .ddn-lead {
  font-size: clamp(1.06rem, calc(0.98rem + 0.3vw), 1.25rem);
  line-height: 1.6;
  color: var(--ddn-slate);
  max-width: 38em;
}
.ddn .ddn-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ddn-slate);
}
.ddn .ddn-num {
  font-family: var(--ddn-sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Buttons & links
   -------------------------------------------------------------------------- */
.ddn .ddn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
}
.ddn .ddn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 50px;
  padding: 0.85rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--ddn-radius);
  font-family: var(--ddn-sans);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s var(--ddn-ease), color 0.25s var(--ddn-ease), border-color 0.25s var(--ddn-ease);
}
.ddn .ddn-btn .ddn-arrow { transition: transform 0.3s var(--ddn-ease); }
.ddn .ddn-btn:hover .ddn-arrow { transform: translateX(4px); }

.ddn .ddn-btn--primary { background: var(--ddn-ink); color: var(--ddn-paper); }
.ddn .ddn-btn--primary:hover { background: var(--ddn-teal-text); }
.ddn .ddn-btn--outline { border-color: var(--ddn-line-strong); color: var(--ddn-ink); background: transparent; }
.ddn .ddn-btn--outline:hover { border-color: var(--ddn-ink); background: var(--ddn-ink); color: var(--ddn-paper); }
.ddn .ddn-btn--light { background: var(--ddn-paper); color: var(--ddn-ink); }
.ddn .ddn-btn--light:hover { background: var(--ddn-copper); color: var(--ddn-ink); }
.ddn .ddn-btn--copper { background: var(--ddn-copper); color: var(--ddn-ink); }
.ddn .ddn-btn--copper:hover { background: var(--ddn-paper); }

.ddn .ddn-link {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--ddn-ink);
  padding: 0.35rem 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.35s var(--ddn-ease), color 0.25s;
}
.ddn .ddn-link:hover { background-size: 0 1px; background-position: 100% 100%; }

.ddn .ddn-arrow { width: 16px; height: 16px; flex: none; }

/* --------------------------------------------------------------------------
   Section heading
   -------------------------------------------------------------------------- */
.ddn .ddn-head {
  display: grid;
  gap: 1.25rem;
  max-width: 46rem;
  margin-bottom: clamp(2.5rem, calc(1.5rem + 3vw), 4.5rem);
}
.ddn .ddn-head--split {
  max-width: none;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 900px) {
  .ddn .ddn-head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; }
}

/* --------------------------------------------------------------------------
   Home hero
   -------------------------------------------------------------------------- */
.ddn-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
}
@media (min-width: 1000px) {
  .ddn-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5rem; }
}
.ddn .ddn-hero__copy { display: grid; gap: 1.75rem; }
.ddn .ddn-hero__copy .ddn-actions { margin-top: 0.75rem; }

.ddn .ddn-audiences {
  grid-column-start: 1;
  grid-column-end: -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 1px solid var(--ddn-line);
  margin-top: 0.5rem;
}
@media (min-width: 720px) {
  .ddn .ddn-audiences { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ddn .ddn-audiences li {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 1.1rem 0;
  font-size: 0.88rem;
  color: var(--ddn-slate);
  border-bottom: 1px solid var(--ddn-line);
}
@media (min-width: 720px) {
  .ddn .ddn-audiences li { border-bottom: 0; padding-right: 1.5rem; }
}
.ddn .ddn-audiences strong { color: var(--ddn-ink); font-weight: 500; }

/* Service finder (hero navigator) */
.ddn .ddn-finder {
  position: relative;
  padding: 2rem 1.75rem 1.25rem;
  background: var(--ddn-card);
  border: 1px solid var(--ddn-line);
  border-radius: var(--ddn-radius);
}
.ddn .ddn-finder::before {
  /* dot-grid texture peeking out behind the card */
  content: "";
  position: absolute;
  z-index: -1;
  top: -28px;
  right: -28px;
  width: 70%;
  height: 70%;
  background-image: radial-gradient(rgba(20, 38, 58, 0.2) 1px, transparent 1.4px);
  background-size: 14px 14px;
  -webkit-mask-image: linear-gradient(225deg, #000 30%, transparent 85%);
  mask-image: linear-gradient(225deg, #000 30%, transparent 85%);
}
.ddn .ddn-finder__label {
  display: flex;
  justify-content: space-between;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ddn-slate);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ddn-line);
}
.ddn .ddn-finder__list { position: relative; }
.ddn .ddn-finder__list::before {
  /* the network line connecting the three nodes */
  content: "";
  position: absolute;
  left: 6px;
  top: 2.4rem;
  bottom: 2.4rem;
  width: 1px;
  background: var(--ddn-line-strong);
  transform-origin: top;
  animation: ddn-draw-y 1.2s 0.35s var(--ddn-ease) both;
}
.ddn .ddn-finder__item {
  position: relative;
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr) auto;
  gap: 1.1rem;
  align-items: center;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--ddn-line);
  color: var(--ddn-ink);
  transition: padding 0.35s var(--ddn-ease);
}
.ddn .ddn-finder__list li:last-child .ddn-finder__item { border-bottom: 0; }
.ddn .ddn-finder__node {
  position: relative;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--tone, var(--ddn-ink));
  background: var(--ddn-card);
  animation: ddn-pop 0.5s var(--ddn-ease) both;
  transition: background-color 0.3s;
}
.ddn .ddn-finder__list li:nth-child(1) .ddn-finder__node { animation-delay: 0.5s; }
.ddn .ddn-finder__list li:nth-child(2) .ddn-finder__node { animation-delay: 0.8s; }
.ddn .ddn-finder__list li:nth-child(3) .ddn-finder__node { animation-delay: 1.1s; }
.ddn .ddn-finder__title {
  display: block;
  font-family: var(--ddn-serif);
  font-size: 1.28rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.ddn .ddn-finder__meta {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.84rem;
  color: var(--ddn-slate);
}
.ddn .ddn-finder__go {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--ddn-line);
  transition: background-color 0.3s, border-color 0.3s, color 0.3s, transform 0.35s var(--ddn-ease);
}
.ddn .ddn-finder__item:hover .ddn-finder__node { background: var(--tone, var(--ddn-ink)); }
.ddn .ddn-finder__item:hover .ddn-finder__go {
  background: var(--ddn-ink);
  border-color: var(--ddn-ink);
  color: var(--ddn-paper);
  transform: translateX(3px);
}
@media (max-width: 1100px) {
  .ddn .ddn-finder::before { right: 0; top: -20px; }
}
@media (max-width: 480px) {
  .ddn .ddn-finder { padding: 1.5rem 1.15rem 0.75rem; }
  .ddn .ddn-finder__title { font-size: 1.15rem; }
}

/* Tones per service area */
.ddn .ddn-tone-tech { --tone: var(--ddn-teal); --tone-text: var(--ddn-teal-text); --tone-tint: var(--ddn-teal-tint); }
.ddn .ddn-tone-comp { --tone: var(--ddn-ink); --tone-text: var(--ddn-ink); --tone-tint: #E1E5EA; }
.ddn .ddn-tone-admin { --tone: var(--ddn-copper); --tone-text: var(--ddn-copper-text); --tone-tint: var(--ddn-copper-tint); }

/* --------------------------------------------------------------------------
   Home — service area cards
   -------------------------------------------------------------------------- */
.ddn .ddn-areas__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
@media (min-width: 980px) {
  .ddn .ddn-areas__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ddn .ddn-area {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem 1.75rem 1.75rem;
  border-radius: var(--ddn-radius);
  border: 1px solid var(--ddn-line);
  background: var(--ddn-card);
  overflow: hidden;
  transition: transform 0.45s var(--ddn-ease), border-color 0.3s;
}
.ddn .ddn-area::after {
  /* tone bar */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--tone);
  transform: scaleX(0.18);
  transform-origin: left;
  transition: transform 0.6s var(--ddn-ease);
}
.ddn .ddn-area:hover { transform: translateY(-4px); border-color: var(--ddn-line-strong); }
.ddn .ddn-area:hover::after { transform: scaleX(1); }
.ddn .ddn-area__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: var(--tone-text);
}
.ddn .ddn-area__icon { width: 40px; height: 40px; }
.ddn .ddn-area__for {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--tone-text);
}
.ddn .ddn-area .ddn-h3 { margin-top: 0.25rem; }
.ddn .ddn-area .ddn-body { flex: 1; }
.ddn .ddn-area .ddn-btn { align-self: flex-start; margin-top: 0.5rem; }

/* Compliance card: the corporate one, set in navy */
.ddn .ddn-area--dark {
  background: var(--ddn-ink);
  border-color: var(--ddn-ink);
  color: var(--ddn-paper);
  --tone: var(--ddn-copper);
  --tone-text: var(--ddn-copper);
}
.ddn .ddn-area--dark .ddn-body { color: var(--ddn-mist); }
.ddn .ddn-area--dark:hover { border-color: var(--ddn-ink); }
/* Admin card: warm sand */
.ddn .ddn-area--sand { background: var(--ddn-copper-tint); border-color: rgba(143, 86, 52, 0.18); }
.ddn .ddn-area--sand .ddn-body { color: #5E5A57; }

/* --------------------------------------------------------------------------
   Steps (approach / process)
   -------------------------------------------------------------------------- */
.ddn .ddn-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  counter-reset: ddn-step;
  border-top: 1px solid var(--ddn-line-strong);
}
@media (min-width: 820px) {
  .ddn .ddn-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ddn .ddn-step {
  position: relative;
  display: grid;
  gap: 0.9rem;
  align-content: start;
  padding: 1.75rem 2rem 1.75rem 0;
  border-bottom: 1px solid var(--ddn-line);
}
@media (min-width: 820px) {
  .ddn .ddn-step { border-bottom: 0; }
  .ddn .ddn-step + .ddn-step { padding-left: 2rem; border-left: 1px solid var(--ddn-line); }
}
.ddn .ddn-step::before {
  /* node sitting on the top rule */
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ddn-copper);
}
@media (min-width: 820px) {
  .ddn .ddn-step + .ddn-step::before { left: 2rem; }
}
.ddn .ddn-step .ddn-num { color: var(--ddn-slate); }
.ddn .ddn-step .ddn-h3 { font-size: 1.45rem; }

/* --------------------------------------------------------------------------
   CTA band (sits in a navy section)
   -------------------------------------------------------------------------- */
.ddn-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  align-items: end;
  color: var(--ddn-paper);
}
@media (min-width: 900px) {
  .ddn-cta { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; }
}
.ddn .ddn-cta .ddn-kicker { color: var(--ddn-copper); }
.ddn .ddn-cta .ddn-h2 { max-width: 18em; }
.ddn .ddn-cta .ddn-lead { color: var(--ddn-mist); }
.ddn .ddn-cta__side {
  display: grid;
  gap: 1.5rem;
  justify-items: start;
}
@media (min-width: 900px) {
  .ddn .ddn-cta__side { justify-items: end; text-align: right; }
}
.ddn .ddn-cta__mail {
  font-family: var(--ddn-serif);
  font-size: clamp(1.15rem, calc(1rem + 0.5vw), 1.45rem);
  color: var(--ddn-paper);
  word-break: break-word;
  background-image: linear-gradient(var(--ddn-copper), var(--ddn-copper));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: color 0.25s;
}
.ddn .ddn-cta__mail:hover { color: var(--ddn-copper); }
.ddn .ddn-cta__label {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ddn-mist);
}

/* --------------------------------------------------------------------------
   Service page hero
   -------------------------------------------------------------------------- */
.ddn-phero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 3rem;
}
@media (min-width: 1000px) {
  .ddn-phero { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 5rem; align-items: end; }
}
.ddn .ddn-phero__copy { display: grid; gap: 1.6rem; }
.ddn .ddn-phero__copy .ddn-actions { margin-top: 0.5rem; }
.ddn .ddn-phero .ddn-kicker { color: var(--tone-text, var(--ddn-slate)); }

/* "On this page" index */
.ddn .ddn-toc {
  border-top: 1px solid var(--ddn-line-strong);
  font-size: 0.92rem;
}
.ddn .ddn-toc__label {
  display: block;
  padding: 1rem 0 0.5rem;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ddn-slate);
}
.ddn .ddn-toc a {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--ddn-line);
  transition: color 0.25s, padding 0.35s var(--ddn-ease);
}
.ddn .ddn-toc a:hover { color: var(--tone-text, var(--ddn-teal-text)); padding-left: 0.35rem; }
.ddn .ddn-toc .ddn-num { color: var(--ddn-slate); width: 1rem; flex: none; }
.ddn .ddn-toc .ddn-arrow { margin-left: auto; flex: none; transform: rotate(90deg); opacity: 0.55; width: 14px; height: 14px; }

/* Dark variant (compliance) */
.ddn .ddn-on-dark { color: var(--ddn-paper); }
.ddn .ddn-on-dark .ddn-lead,
.ddn .ddn-on-dark .ddn-body { color: var(--ddn-mist); }
.ddn .ddn-on-dark .ddn-kicker { color: var(--ddn-copper); }
.ddn .ddn-on-dark .ddn-toc { border-top-color: var(--ddn-line-dark); }
.ddn .ddn-on-dark .ddn-toc a { border-bottom-color: var(--ddn-line-dark); }
.ddn .ddn-on-dark .ddn-toc a:hover { color: var(--ddn-copper); }
.ddn .ddn-on-dark .ddn-toc__label,
.ddn .ddn-on-dark .ddn-num { color: var(--ddn-mist); }

/* Process strip (technology) */
.ddn .ddn-process {
  grid-column-start: 1;
  grid-column-end: -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 1rem;
  border: 1px solid var(--ddn-line);
  border-radius: var(--ddn-radius);
  background: var(--ddn-card);
}
@media (min-width: 820px) {
  .ddn .ddn-process { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
}
.ddn .ddn-process > * {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--ddn-line);
}
@media (min-width: 820px) {
  .ddn .ddn-process > * { border-bottom: 0; border-left: 1px solid var(--ddn-line); }
  .ddn .ddn-process > *:first-child { border-left: 0; }
}
.ddn .ddn-process > *:last-child { border-bottom: 0; }
.ddn .ddn-process__intro { font-size: 0.9rem; color: var(--ddn-slate); line-height: 1.5; }
.ddn .ddn-process__step { display: flex; gap: 0.9rem; align-items: center; font-weight: 500; }
.ddn .ddn-process__step span {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--ddn-teal);
  color: var(--ddn-teal-text);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* Engagement panel (compliance + admin hero side) */
.ddn .ddn-engage { display: grid; gap: 0; border-top: 1px solid var(--ddn-line-strong); }
.ddn .ddn-on-dark .ddn-engage { border-top-color: var(--ddn-line-dark); }
.ddn .ddn-engage__label {
  padding: 1rem 0 0.25rem;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ddn-slate);
}
.ddn .ddn-on-dark .ddn-engage__label { color: var(--ddn-mist); }
.ddn .ddn-engage__item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0.9rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--ddn-line);
}
.ddn .ddn-on-dark .ddn-engage__item { border-bottom-color: var(--ddn-line-dark); }
.ddn .ddn-engage__item::before {
  content: "";
  width: 9px;
  height: 9px;
  margin-top: 0.55rem;
  border-radius: 50%;
  border: 1.5px solid var(--ddn-copper);
}
.ddn .ddn-engage__item strong {
  display: block;
  font-family: var(--ddn-serif);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.3;
}
.ddn .ddn-engage__item span { display: block; margin-top: 0.2rem; font-size: 0.9rem; color: var(--ddn-slate); }
.ddn .ddn-on-dark .ddn-engage__item span { color: var(--ddn-mist); }

/* --------------------------------------------------------------------------
   Technology — service tiles (2 × 2)
   -------------------------------------------------------------------------- */
.ddn .ddn-tiles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
@media (min-width: 900px) {
  .ddn .ddn-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ddn .ddn-tile {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.75rem, calc(1rem + 2vw), 2.75rem);
  background: var(--ddn-card);
  border: 1px solid var(--ddn-line);
  border-radius: var(--ddn-radius);
  scroll-margin-top: 110px;
}
.ddn .ddn-tile__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: var(--ddn-teal-text);
}
.ddn .ddn-tile__icon {
  width: 52px;
  height: 52px;
  padding: 10px;
  border-radius: 50%;
  background: var(--ddn-teal-tint);
}
.ddn .ddn-tile .ddn-num { color: var(--ddn-slate); }
.ddn .ddn-tile .ddn-h3 { font-size: clamp(1.5rem, calc(1.2rem + 0.7vw), 1.9rem); }
.ddn .ddn-tile--wide { grid-column-start: 1; grid-column-end: -1; }
@media (min-width: 900px) {
  .ddn .ddn-tile--wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem 3rem;
    align-items: start;
  }
  .ddn .ddn-tile--wide .ddn-tile__top,
  .ddn .ddn-tile--wide .ddn-scope { grid-column-start: 1; grid-column-end: -1; }
}
.ddn .ddn-tile__col { display: grid; gap: 1.25rem; }

/* Checklist */
.ddn .ddn-checks { display: grid; border-top: 1px solid var(--ddn-line); }
.ddn .ddn-checks li {
  position: relative;
  padding: 0.8rem 0 0.8rem 1.75rem;
  border-bottom: 1px solid var(--ddn-line);
  font-size: 0.98rem;
  line-height: 1.5;
}
.ddn .ddn-checks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 1.22rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tone, var(--ddn-teal));
}
.ddn .ddn-note {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0.75rem;
  padding: 1rem 1.15rem;
  background: var(--ddn-teal-tint);
  border-radius: var(--ddn-radius);
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--ddn-ink);
}
.ddn .ddn-note svg { width: 20px; height: 20px; margin-top: 1px; color: var(--ddn-teal-text); }

/* Scope panel (battery-powered cameras) */
.ddn .ddn-scope {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--ddn-line-strong);
  border-radius: var(--ddn-radius);
}
@media (min-width: 640px) {
  .ddn .ddn-scope { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.ddn .ddn-scope__col { padding: 1.1rem 1.25rem; display: grid; gap: 0.5rem; align-content: start; }
.ddn .ddn-scope__col + .ddn-scope__col { border-top: 1px solid var(--ddn-line); }
@media (min-width: 640px) {
  .ddn .ddn-scope__col + .ddn-scope__col { border-top: 0; border-left: 1px solid var(--ddn-line); }
}
.ddn .ddn-scope__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0;
}
.ddn .ddn-scope__label svg { width: 16px; height: 16px; }
.ddn .ddn-scope__col--yes .ddn-scope__label { color: var(--ddn-teal-text); }
.ddn .ddn-scope__col--no .ddn-scope__label { color: var(--ddn-copper-text); }
.ddn .ddn-scope__col p { font-size: 0.95rem; line-height: 1.5; }
.ddn .ddn-scope__foot {
  grid-column-start: 1;
  grid-column-end: -1;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--ddn-line);
  font-size: 0.86rem;
  color: var(--ddn-slate);
  background: var(--ddn-paper-2);
}

/* --------------------------------------------------------------------------
   Compliance — ledger
   -------------------------------------------------------------------------- */
.ddn .ddn-ledger { border-top: 1px solid var(--ddn-ink); }
.ddn .ddn-ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  padding: clamp(2rem, calc(1.25rem + 2vw), 3.25rem) 0;
  border-bottom: 1px solid var(--ddn-line-strong);
  scroll-margin-top: 110px;
}
@media (min-width: 980px) {
  .ddn .ddn-ledger__row { grid-template-columns: 5rem minmax(0, 4fr) minmax(0, 7fr); gap: 3rem; }
}
.ddn .ddn-ledger__code {
  font-family: var(--ddn-serif);
  font-size: 2.6rem;
  line-height: 1;
  font-weight: 300;
  color: var(--ddn-copper-text);
}
.ddn .ddn-ledger__intro { display: grid; gap: 1rem; align-content: start; }
.ddn .ddn-ledger__count {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ddn-slate);
}
.ddn .ddn-ledger__items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 2.5rem;
  border-top: 1px solid var(--ddn-line);
  counter-reset: ddn-item;
}
@media (min-width: 640px) {
  .ddn .ddn-ledger__items { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 0; }
}
.ddn .ddn-ledger__items li {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.5rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--ddn-line);
  font-size: 0.98rem;
  line-height: 1.45;
  counter-increment: ddn-item;
}
@media (min-width: 640px) {
  .ddn .ddn-ledger__items li:nth-child(1),
  .ddn .ddn-ledger__items li:nth-child(2) { border-top: 1px solid var(--ddn-line); }
}
.ddn .ddn-ledger__items li::before {
  content: attr(data-code);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ddn-slate);
  padding-top: 0.2rem;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Administrative — columns
   -------------------------------------------------------------------------- */
.ddn .ddn-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
@media (min-width: 980px) {
  .ddn .ddn-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ddn .ddn-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem 1.75rem;
  background: var(--ddn-card);
  border: 1px solid var(--ddn-line);
  border-radius: var(--ddn-radius);
  --tone: var(--ddn-copper);
  scroll-margin-top: 110px;
}
.ddn .ddn-col__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ddn-copper-text);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ddn-line);
}
.ddn .ddn-col__top svg { width: 34px; height: 34px; }
.ddn .ddn-col .ddn-num { color: var(--ddn-slate); }

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.ddn .ddn-about__copy { display: grid; gap: 1.6rem; align-content: start; }
.ddn .ddn-about__role {
  font-size: 0.95rem;
  color: var(--ddn-slate);
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--ddn-line);
}
.ddn .ddn-about__copy p.ddn-about__first {
  font-family: var(--ddn-serif);
  font-size: clamp(1.3rem, calc(1.1rem + 0.6vw), 1.65rem);
  line-height: 1.42;
  letter-spacing: -0.005em;
  color: var(--ddn-ink);
}
.ddn .ddn-about__copy p:not([class]) { font-size: 1.05rem; line-height: 1.7; color: var(--ddn-slate); max-width: 36em; }

.ddn .ddn-portrait { position: relative; margin: 0; }
.ddn .ddn-portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 0.8;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: var(--ddn-radius);
  filter: saturate(0.88) contrast(1.02);
}
.ddn .ddn-portrait::before {
  /* offset frame */
  content: "";
  position: absolute;
  z-index: -1;
  top: 18px;
  right: -18px;
  bottom: -18px;
  left: 18px;
  border: 1px solid var(--ddn-copper);
  border-radius: var(--ddn-radius);
}
.ddn .ddn-portrait figcaption {
  margin-top: 1.75rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--ddn-slate);
}
.ddn .ddn-portrait--empty {
  aspect-ratio: 0.8;
  display: grid;
  place-items: center;
  background: var(--ddn-paper-2);
  border: 1px dashed var(--ddn-line-strong);
  border-radius: var(--ddn-radius);
  color: var(--ddn-slate);
  font-size: 0.85rem;
}

.ddn .ddn-practice {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}
@media (min-width: 820px) {
  .ddn .ddn-practice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ddn .ddn-practice__item {
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: 2rem 1.75rem;
  border: 1px solid var(--ddn-line);
  border-top: 3px solid var(--tone);
  border-radius: var(--ddn-radius);
  background: var(--ddn-card);
}
.ddn .ddn-practice__item .ddn-kicker { color: var(--tone-text); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.ddn .ddn-contact { display: grid; gap: 1.75rem; align-content: start; }
.ddn .ddn-contact__mail {
  display: grid;
  gap: 0.35rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--ddn-line-strong);
  border-bottom: 1px solid var(--ddn-line);
}
.ddn .ddn-contact__mail .ddn-cta__label { color: var(--ddn-slate); }
.ddn .ddn-contact__mail a {
  font-family: var(--ddn-serif);
  font-size: clamp(1.2rem, calc(1rem + 0.6vw), 1.5rem);
  word-break: break-word;
  color: var(--ddn-ink);
  transition: color 0.25s;
}
.ddn .ddn-contact__mail a:hover { color: var(--ddn-teal-text); }
.ddn .ddn-contact__tips { display: grid; gap: 0; }
.ddn .ddn-contact__tips li {
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--ddn-line);
}
.ddn .ddn-contact__tips li::before {
  content: "";
  width: 11px;
  height: 11px;
  margin-top: 0.4rem;
  border-radius: 50%;
  border: 1.5px solid var(--tone);
}
.ddn .ddn-contact__tips strong { display: block; font-weight: 500; font-size: 0.95rem; }
.ddn .ddn-contact__tips span { display: block; font-size: 0.9rem; color: var(--ddn-slate); margin-top: 0.15rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   Footer (used inside Squarespace's footer as a code block)
   -------------------------------------------------------------------------- */
.ddn-footer {
  color: var(--ddn-paper);
  display: grid;
  gap: 3rem;
}
.ddn .ddn-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--ddn-line-dark);
}
@media (min-width: 900px) {
  .ddn .ddn-footer__top { grid-template-columns: minmax(0, 4fr) minmax(0, 3.5fr) minmax(0, 1.7fr) minmax(0, 3.3fr); gap: 3rem; }
}
.ddn .ddn-footer__brand { display: grid; gap: 1.25rem; align-content: start; }
.ddn .ddn-footer__tag {
  font-family: var(--ddn-serif);
  font-size: 1.3rem;
  line-height: 1.35;
  color: var(--ddn-mist);
  max-width: 16em;
}
.ddn .ddn-footer__col { display: grid; gap: 0.9rem; align-content: start; }
.ddn .ddn-footer__label {
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ddn-mist);
}
.ddn .ddn-footer__col a {
  font-size: 0.93rem;
  color: var(--ddn-paper);
  opacity: 0.86;
  transition: opacity 0.2s, color 0.2s;
  overflow-wrap: anywhere;
}
.ddn .ddn-footer .ddn-link { color: var(--ddn-mist); }
.ddn .ddn-footer__col a:hover { opacity: 1; color: var(--ddn-copper); }
.ddn .ddn-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: var(--ddn-mist);
}

/* Wordmark (HTML version — used in footer and local header) */
.ddn-wm { display: inline-flex; align-items: center; gap: 0.7rem; color: inherit; }
.ddn-wm__mark { width: 34px; height: 34px; flex: none; }
.ddn-wm__link { stroke: #347B83; }
.ddn-footer .ddn-wm__link { stroke: #8CC1C6; }
.ddn-wm__text { display: grid; line-height: 1; }
.ddn-wm__name {
  font-family: var(--ddn-serif);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.ddn-wm__sub {
  margin-top: 0.3rem;
  font-family: var(--ddn-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@keyframes ddn-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes ddn-draw-y {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}
@keyframes ddn-pop {
  from { opacity: 0; transform: scale(0.3); }
  to { opacity: 1; transform: scale(1); }
}
.ddn .ddn-load > * { animation: ddn-rise 0.9s var(--ddn-ease) both; }
.ddn .ddn-load > *:nth-child(2) { animation-delay: 0.08s; }
.ddn .ddn-load > *:nth-child(3) { animation-delay: 0.16s; }
.ddn .ddn-load > *:nth-child(4) { animation-delay: 0.24s; }
.ddn .ddn-load > *:nth-child(5) { animation-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .ddn *,
  .ddn *::before,
  .ddn *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
  }
}