/* bones-look/01-foundation.css: Tokens, type, header, footer, cards, heroes, buttons, type scale, services cards (to 2026-11-01).
   F8 stage 1 (2026-11-05): bones-look.css split in its original order into six files, loaded in
   number order (theme/core/assets.php). Order matters: later files override earlier ones. */
/* ==================================================
   Bones look (dbeta.co.uk only, not part of the shared theme)
   - Brings the site closer to the Bones public website: Geist type,
     a near-white canvas, light panels instead of black and blue cards,
     pill buttons and mono "kicker" labels.
   - Loaded last in the bundle so it overrides the theme without editing it.
     Remove this file from $headAssets in theme/core/head.php to undo.
================================================== */

/* ---------- tokens ---------- */
:root {
  --_font-default: "Geist", ui-sans-serif, system-ui, sans-serif;
  --_font-accent: "Geist", ui-sans-serif, system-ui, sans-serif;
  --_font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* light theme, from the Bones site palette */
  --base--light: #FAFAFA;
  --base-rgb--light: 250, 250, 250;
  --base-tint--light: #FFFFFF;
  --base-shade--light: #E6E6E9;
  --base-opp--light: #0A0A0B;
  --t-bright--light: #0A0A0B;
  --t-medium--light: #3F3F46;
  --t-muted--light: #6B6B73;
  --neutral-transparent--light: rgba(10, 10, 11, 0.06);

  --bl-line: #E6E6E9;
  --bl-e1: 0 1px 2px rgba(10, 10, 11, 0.04), 0 0 0 1px rgba(10, 10, 11, 0.02);
  --bl-e2: 0 1px 2px rgba(10, 10, 11, 0.04), 0 12px 32px -12px rgba(10, 10, 11, 0.14);
  --bl-hl: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 40, 140, 0.25);
}
:root[data-theme="dark"] {
  --bl-line: #23252B;
  --bl-e1: 0 0 0 1px rgba(255, 255, 255, 0.03);
  --bl-e2: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 16px 40px -12px rgba(0, 0, 0, 0.6);
}

/* ---------- type ---------- */
body {
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3,
.hero-01-title,
.db-pinned__title,
.hero-09-headline,
div.hero-09-headline,
div.hero-05-title,
div.inner-headline__title {
  font-family: var(--_font-accent);
  font-weight: 600;
  letter-spacing: -0.045em;
}
h4, h5, h6 {
  letter-spacing: -0.02em;
}

/* mono kicker labels, as on the Bones site */
.db-three-steps__eyebrow,
.db-section-title__hrtitle .tag,
.db-res-list__source,
.hero-09-headline__tags .tag {
  font-family: var(--_font-mono) !important;
  font-size: 1.3rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
}
.db-three-steps__eyebrow.t-muted,
.db-res-list__source {
  color: var(--accent-text) !important;
}


/* ---------- light panels instead of black / blue cards ---------- */
.db-services-stack__inner.bg-base-opp,
.db-services-stack__inner.bg-accent,
.db-services-stack__inner.bg-base-tint,
.db-services-cards-s__inner.bg-base-opp,
.db-services-cards-s__inner.bg-accent,
.db-services-cards-s__inner.bg-additional,
.db-services-cards-s__inner.bg-base-tint {
  /* text written for dark cards now reads on a light panel */
  --t-opp-bright: var(--t-bright);
  --t-opp-medium: var(--t-medium);
  --t-opp-muted: var(--t-muted);
  --st-opp-bright: var(--st-bright);
  --fw-regular-opp: var(--fw-regular);
  --fw-medium-opp: var(--fw-medium);
  background: linear-gradient(180deg, var(--base-tint), var(--base)) !important;
  border: 1px solid var(--bl-line);
  box-shadow: var(--bl-e2);
  color: var(--t-bright);
}
.db-services-stack__inner .opposite,
.db-services-stack__inner .opposite a,
.db-services-stack__inner .t-opposite,
.db-services-cards-s__inner.opposite,
.db-services-cards-s__inner .opposite,
.db-services-cards-s__inner .opposite a,
.db-services-cards-s__inner .t-opposite {
  color: var(--t-bright) !important;
}
.db-services-stack__inner .t-opp-muted,
.db-services-cards-s__inner .t-opp-muted {
  color: var(--t-muted) !important;
}
.db-services-stack__inner .tag-outline-opposite,
.db-services-cards-s__inner .tag-outline-opposite {
  color: var(--t-medium) !important;
  border-color: var(--bl-line) !important;
  background: var(--base-tint);
}
/* the round arrow button keeps the accent so each card still has one call to action */
.db-services-stack__inner .btn-round {
  background-color: var(--accent) !important;
  color: #fff !important;
  box-shadow: var(--bl-hl);
}

/* concept panels on the Bones site sit in a soft framed box */
.db-features-promo__image.has-concept {
  background: linear-gradient(180deg, var(--base-tint), var(--base));
  border: 1px solid var(--bl-line);
  box-shadow: var(--bl-e2);
}

/* testimonial and fact cards use the same surface */
.db-testimonials-card,
.db-facts__item,
.db-fit__col:not(.db-fit__col--no) {
  border: 1px solid var(--bl-line);
  box-shadow: var(--bl-e1);
}

/* ---------- glass header, as on the Bones site ---------- */
/* A fixed 72px translucent bar. From 1200px the links sit inline and the
   hamburger is hidden; below that the bar keeps the logo and the hamburger
   (theme/nav.php), which is re-centred into the bar. */
:root {
  --bl-hdr-h: 72px;
  --bl-glass: rgba(250, 250, 250, 0.72);
  --bl-hover: rgba(10, 10, 11, 0.04);
}
:root[data-theme="dark"] {
  --bl-glass: rgba(14, 15, 18, 0.72);
  --bl-hover: rgba(255, 255, 255, 0.06);
}
.db-header {
  position: fixed;
  left: 0;
  width: 100%;
  height: var(--bl-hdr-h);
  padding: 0 calc(16px + 44px + 12px) 0 16px; /* room for the hamburger */
  align-items: center;
  gap: 24px;
  background: var(--bl-glass);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--bl-line);
  z-index: 99; /* under the fixed hamburger layer (z-index 100), which would otherwise be blurred */
}
.db-header.is-hidden {
  transform: none;
  opacity: 1;
}
/* Logo sized against the 44px menu button and 72px bar (2026-11-01: was 24px) */
.db-header__logo img,
.db-header__logo svg {
  height: 30px;
  width: auto;
}
@media only screen and (min-width: 768px) {
  .db-header__logo img,
  .db-header__logo svg {
    height: 34px;
  }
}
.db-nav__contain {
  min-height: var(--bl-hdr-h) !important;
  margin-top: 0 !important;
  padding: 0 16px !important;
}
.db-nav__hamburger {
  width: 44px !important;
  height: 44px !important;
}
.db-header__controls .btn-default {
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 20px !important;
  font-size: 15px !important;
  border-radius: 999px !important;
}
.db-header__nav {
  display: none;
}
@media only screen and (min-width: 768px) {
  .db-header {
    padding: 0 calc(32px + 44px + 16px) 0 32px;
  }
  .db-nav__contain {
    padding: 0 32px !important;
  }
}
@media only screen and (min-width: 1200px) {
  .db-header {
    padding: 0 32px;
    justify-content: flex-start;
  }
  /* Menu sits on the right, next to "Talk to us" (Owner, 3 Nov 2026) */
  .db-header__nav {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: auto;
  }
  .db-nav__wrap .db-nav__contain {
    display: none;
  }
  /* Services is now near the right edge: line the panel up with the end of the menu so it stays on screen */
  .db-header__nav {
    position: relative;
  }
  .db-header__nav .db-header__drop {
    position: static;
  }
  .db-header__drop .db-header__panel {
    left: auto;
    right: 0;
  }
  .db-header__nav .db-header__drop::after {
    content: none;
  }
}
.db-header__link {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--bl-hdr-h);
  padding: 0 12px;
  font-size: 15px;
  font-weight: 500;
  color: var(--t-bright);
  text-decoration: none;
  background: none !important; /* no theme link underline effect */
  transition: background-color 160ms ease;
}
.db-header__link:hover,
.db-header__link:focus-visible,
.db-header__drop:hover > .db-header__link {
  background-color: var(--bl-hover) !important;
  color: var(--t-bright);
}
.db-header__link.is-current {
  box-shadow: inset 0 -2px 0 var(--accent);
}
.db-header__drop {
  position: relative;
  height: 100%;
}
.db-header__drop svg {
  transition: transform 160ms ease;
}
.db-header__drop:hover svg,
.db-header__drop:focus-within svg {
  transform: rotate(180deg);
}
.db-header__panel {
  position: absolute;
  top: calc(var(--bl-hdr-h) - 4px);
  left: 0;
  display: grid;
  gap: 2px;
  width: 300px;
  padding: 6px;
  background: var(--base-tint);
  border: 1px solid var(--bl-line);
  border-radius: 12px;
  box-shadow: var(--bl-e2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}
.db-header__drop:hover .db-header__panel,
.db-header__drop:focus-within .db-header__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.db-header__panel a {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--t-bright);
  text-decoration: none;
  background: none !important;
}
.db-header__panel a:hover,
.db-header__panel a:focus-visible {
  background-color: var(--bl-hover) !important;
}
.db-header__panel strong {
  font-size: 15px;
  font-weight: 500;
}
.db-header__panel span {
  font-size: 13px;
  color: var(--t-muted);
}
@media (prefers-reduced-motion: reduce) {
  .db-header__panel,
  .db-header__drop svg {
    transition: none;
  }
}

/* menu links: the rolling-letter caption is clipped to a fixed 3.3rem, which
   showed the top of the second line under the larger menu type. Size the clip
   to the type instead. */
.main-menu__link.btn-anim .btn-caption {
  height: 1.15em;
  min-height: 0;
  line-height: 1.15em;
}

/* ---------- footer, as on the Bones site ---------- */
/* 2026-11-01: closing CTA band, subscribe form in the brand column, address
   and company registration, labelled process strip, decorative wordmark. */
.bl-footer {
  max-width: none;
  padding: 0;
  margin-top: 64px;
  background: var(--base-tint);
  border-top: 1px solid var(--bl-line);
  font-size: 15px;
  color: var(--t-bright);
  overflow: hidden;
}
.bl-footer a {
  color: inherit;
  text-decoration: none;
  background: none !important; /* no theme link underline effect */
  transition: color .2s ease;
}
.bl-footer a:hover {
  color: var(--accent-text);
}
/* closing call-to-action band */
.bl-footer__lead {
  max-width: var(--bl-site);
  margin: 0 auto;
  padding: 56px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-bottom: 1px solid var(--bl-line);
}
.bl-footer__statement {
  margin: 0;
  font-family: var(--_font-accent);
  font-size: clamp(34px, 6vw, 72px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--t-bright);
}
.bl-footer__statement span {
  color: var(--t-muted);
}
.bl-footer__lead-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.bl-footer .bl-footer__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--accent) !important;
  color: #fff;
  font-weight: 500;
  box-shadow: var(--bl-hl);
}
.bl-footer .bl-footer__cta:hover {
  color: #fff;
  filter: brightness(1.08);
}
.bl-footer .bl-footer__cta svg {
  transition: transform .2s ease;
}
.bl-footer .bl-footer__cta:hover svg {
  transform: translateX(3px);
}
.bl-footer__mail {
  font-size: 16px;
  color: var(--t-medium) !important;
  border-bottom: 1px solid var(--bl-line);
  padding-bottom: 2px;
}
.bl-footer__mail:hover {
  color: var(--t-bright) !important;
  border-bottom-color: currentColor;
}
.bl-footer__main {
  max-width: var(--bl-site);
  margin: 0 auto;
  padding: 48px 16px 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 40px 24px;
}
.bl-footer__brand {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.bl-footer__logo img {
  height: 24px;
  width: auto;
  display: block;
}
.bl-footer__cols {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 24px;
}
.bl-footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
.bl-footer__col a {
  overflow-wrap: anywhere;
}
.bl-footer__address {
  margin: 0;
  font-style: normal;
  line-height: 1.45;
  color: var(--t-medium);
}
.bl-footer__address a {
  color: var(--t-medium);
}
.bl-footer__head {
  font-family: var(--_font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-muted);
}
.bl-footer__col .bl-footer__head {
  margin-bottom: 4px;
}
.bl-footer__count {
  font-family: var(--_font-mono);
  font-size: 12px;
  color: var(--t-muted);
}
/* "Elsewhere" runs as a wrapped row of chips below the tablet breakpoint */
.bl-footer__col--elsewhere {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
}
.bl-footer__col--elsewhere .bl-footer__head {
  flex-basis: 100%;
}
.bl-footer__col--elsewhere a {
  padding: 6px 12px;
  border: 1px solid var(--bl-line);
  border-radius: 999px;
  font-size: 14px;
}
.bl-footer__process {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bl-footer__strip {
  display: grid;
  border-top: 1px solid var(--bl-line);
  border-bottom: 1px solid var(--bl-line);
}
.bl-footer__strip a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
}
.bl-footer__strip a + a {
  border-top: 1px solid var(--bl-line);
}
.bl-footer__strip svg {
  margin-left: auto;
  color: var(--t-muted);
  transition: transform .2s ease, color .2s ease;
}
.bl-footer__strip a:hover svg {
  color: var(--accent-text);
  transform: translateX(3px);
}
.bl-footer__num {
  font-family: var(--_font-mono);
  font-size: 12px;
  color: var(--t-muted);
}
.bl-footer__step {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.bl-footer__notify {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 380px;
}
.bl-footer__notify .form-container {
  position: relative;
}
.bl-footer__notify form {
  position: relative;
  display: flex;
}
.bl-footer__notify input {
  width: 100%;
  height: 44px;
  padding: 0 52px 0 16px;
  border: 1px solid var(--bl-line);
  border-radius: 999px;
  background: var(--base-tint);
  color: var(--t-bright);
  font: inherit;
  box-shadow: var(--bl-e1);
}
.bl-footer__notify input:focus {
  outline: none;
  border-color: var(--accent);
}
.bl-footer__submit {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
/* legal bar; right padding keeps it clear of the fixed back-to-top button on phones. From 1024px the
   button rests below the bar, so the padding is even and the bar fits one line from about 1,100px. */
.bl-footer__bar {
  max-width: var(--bl-site);
  margin: 0 auto;
  padding: 24px 72px 24px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  font-size: 13px;
  color: var(--t-muted);
}
.bl-footer__legal-id {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.bl-footer__legal-id a {
  color: var(--t-medium);
}
.bl-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
.bl-footer__legal a {
  color: var(--t-medium);
}
/* oversized logo, faded and cropped by the footer edge */
.bl-footer__wordmark {
  max-width: var(--bl-site);
  margin: 8px auto 0;
  padding: 0 16px;
  height: clamp(44px, 12vw, 168px);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.bl-footer__wordmark svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
@media only screen and (min-width: 768px) {
  .bl-footer__lead {
    padding: 80px 32px 64px;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .bl-footer__main {
    padding: 56px 32px 0;
  }
  .bl-footer__bar {
    padding: 24px 32px;
  }
  .bl-footer__wordmark {
    padding: 0 32px;
  }
  .bl-footer__strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bl-footer__strip a {
    padding: 20px 20px 20px 0;
  }
  .bl-footer__strip a + a {
    border-top: 0;
    border-left: 1px solid var(--bl-line);
    padding-left: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .bl-footer__brand {
    grid-column: 1 / span 4;
  }
  .bl-footer__cols {
    grid-column: 6 / span 7;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .bl-footer__col--elsewhere {
    grid-column: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .bl-footer__col--elsewhere .bl-footer__head {
    flex-basis: auto;
  }
  .bl-footer__col--elsewhere a {
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: inherit;
  }
}

/* ---------- Insights cards (home, service pages, related posts) ---------- */
/* Bones-style framed preview: a shorter 16:10 image in a bordered frame, a
   small mono label instead of a large pill, no blur-and-eye hover, and a
   tighter title. Covers both card variants (post-secondary__* and
   db-blog-preview__data). */
.db-blog-preview__media,
.db-blog-preview__image {
  height: auto !important;
  border-radius: 12px !important;
}
.db-blog-preview__media {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--bl-line);
  box-shadow: var(--bl-e1);
  background: var(--base-tint);
  transition: box-shadow 200ms ease, transform 200ms ease;
}
.db-blog-preview__image {
  position: absolute !important;
  inset: 0;
  border-radius: 0 !important;
}
.db-blog-preview__image img {
  transition: transform 400ms ease;
}
.no-touch .db-blog-preview__media:hover {
  box-shadow: var(--bl-e2);
  transform: translateY(-2px);
}
.no-touch .db-blog-preview__media:hover .db-blog-preview__image img {
  transform: scale(1.03);
}
.db-blog-preview .db-preview-hover {
  display: none;
}
.db-blog-preview__tags {
  top: 0;
  bottom: auto;
  padding: 14px !important;
}
.db-blog-preview__tags .tag {
  height: auto;
  min-height: 0;
  padding: 5px 10px;
  border: 1px solid var(--bl-line) !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9) !important;
  color: var(--t-bright) !important;
  font-family: var(--_font-mono);
  font-size: 12px !important;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.db-blog-preview .post-secondary__descr,
.db-blog-preview__data {
  padding: 18px 2px 0 !important;
  border-top: 0 !important;
  gap: 10px !important;
}
.db-blog-preview .post-secondary__meta {
  font-family: var(--_font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-muted);
}
.db-blog-preview .post-secondary__meta .meta-tag {
  color: var(--accent-text);
}
.db-blog-preview .post-secondary__meta .meta-tag svg {
  display: none;
}
.db-blog-preview .post-secondary__title h5,
.db-blog-preview__data h3,
.db-blog-preview__data p,
.db-blog-preview__data a {
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em;
}
.db-blog-preview .post-secondary__title a,
.db-blog-preview__data a {
  color: var(--t-bright) !important;
}
.no-touch .db-blog-preview .post-secondary__title a:hover,
.no-touch .db-blog-preview__data a:hover {
  color: var(--accent-text) !important;
}
.db-blog-preview .post-secondary__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
}
.db-blog-preview .post-secondary__meta .meta-sep {
  display: none;
}

/* ---------- closing CTA (db-promo), as the Bones "Next step" box ---------- */
/* Reworked 2026-11-02: a calmer navy box. Mono "Next step" label and the line
   on the left, a white pill button on the right (stacked on phones), one soft
   glow in the corner. The background image is dropped; the Bones box has none. */
.db-promo__inner {
  align-items: stretch;
  text-align: left;
  padding: 40px 24px !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  background-color: #0B1830 !important;
  background-image: radial-gradient(60% 120% at 100% 0, rgba(91, 140, 255, 0.18), transparent 60%) !important;
  color: #FFFFFF;
}
:root[data-theme="dark"] .db-promo__inner {
  background-color: #0D1730 !important;
}
.db-promo__inner::before,
.db-promo__bg,
.db-promo__images {
  display: none !important;
}
.db-promo__content {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  justify-items: start;
  gap: 16px 48px !important;
  width: 100%;
  margin: 0 !important;
}
.db-promo__content::before {
  content: "Next step";
  font-family: var(--_font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8FA3CC;
}
.db-promo__title {
  width: auto !important;
  max-width: 760px;
  margin: 0;
  text-wrap: balance;
}
.db-promo__caption {
  font-family: var(--_font-accent);
  font-size: clamp(28px, 1.4rem + 1.6vw, 44px) !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.04em !important;
  color: #FFFFFF !important;
}
.db-promo__note {
  margin: 0;
  max-width: 52ch;
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}
.db-promo__controls {
  display: flex;
  margin-top: 8px;
}
.db-promo__controls .btn {
  height: 52px !important;
  line-height: 52px !important;
  padding: 0 24px !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  background-color: #FFFFFF !important;
  border-color: #FFFFFF !important;
  color: #0B1830 !important;
  box-shadow: none;
}
.db-promo__controls .btn .btn-caption,
.db-promo__controls .btn i {
  color: #0B1830 !important;
}
.no-touch .db-promo__controls .btn:hover {
  background-color: color-mix(in srgb, var(--accent) 12%, #FFFFFF) !important;
}
@media only screen and (min-width: 768px) {
  .db-promo__inner {
    padding: 56px 56px !important;
    border-radius: 28px;
  }
}
@media only screen and (min-width: 992px) {
  .db-promo__content {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .db-promo__content > * {
    grid-column: 1;
  }
  .db-promo__content > .db-promo__controls {
    grid-column: 2;
    grid-row: 1 / span 3;
    margin-top: 0;
  }
}

/* ---------- testimonials ---------- */
/* Bones-style quote cards: no blur on the neighbouring slides (they fade
   back instead), a white bordered panel, smaller photo and logo, readable
   quote text and a quieter author line. */
.testimonials-slider .swiper-slide {
  filter: none !important;
  opacity: 0.45;
  transition: opacity 300ms ease;
}
.testimonials-slider .swiper-slide.swiper-slide-active,
.testimonials-slider .swiper-slide.swiper-slide-active + .swiper-slide {
  opacity: 1;
}
@media only screen and (max-width: 767.98px) {
  .testimonials-slider .swiper-slide.swiper-slide-active + .swiper-slide {
    opacity: 0.45;
  }
}
.testimonials-slider__shadow {
  display: none;
}
.db-testimonials-card {
  background: var(--base-tint) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  gap: 24px;
}
.db-testimonials-card__photo {
  width: 56px !important;
  height: 56px !important;
  border: 1px solid var(--bl-line);
}
.db-testimonials-card__company img {
  height: 22px !important;
  width: auto !important;
}
.db-testimonials-card__text p {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--t-medium) !important;
}
.db-testimonials-card__text p::before {
  content: "\201C";
  display: block;
  height: 28px;
  font-size: 48px;
  line-height: 1;
  font-weight: 600;
  color: var(--accent-text);
}
.db-testimonials-card__name {
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.db-testimonials-card__position {
  font-size: 14px !important;
  color: var(--t-muted) !important;
}
.db-testimonials-card__position a {
  color: var(--t-medium);
}
.db-testimonials-card .btn.btn-small {
  height: 40px !important;
  line-height: 40px !important;
  padding: 0 18px !important;
  font-size: 15px !important;
}
.db-slider-btn .btn-round {
  background: var(--base-tint) !important;
  border: 1px solid var(--bl-line) !important;
  color: var(--t-bright) !important;
  box-shadow: var(--bl-e1);
}
.no-touch .db-slider-btn .btn-round:hover {
  border-color: var(--accent) !important;
  color: var(--accent-text) !important;
}

/* testimonials controls (2026-11-01): one bar under the cards, with two
   smaller arrows on the left and the count "01 / 06" after them. Kept on the
   left so the fixed back-to-top button (bottom right) never covers them. Quote mark set in a serif so it
   reads as a quote mark, and the author separated by a rule. */
.testimonials-slider .swiper-testimonials {
  padding-bottom: 76px;
}
.testimonials-slider .db-slider-btn {
  bottom: 0 !important;
}
.testimonials-slider .db-slider-btn-round-prev {
  left: 0 !important;
  right: auto !important;
}
.testimonials-slider .db-slider-btn-round-next {
  left: 56px !important;
  right: auto !important;
}
.testimonials-slider .db-slider-btn .btn-round {
  width: 44px !important;
  height: 44px !important;
  min-width: 0;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}
.testimonials-slider .db-slider-btn.swiper-button-disabled .btn-round {
  opacity: 0.35;
}
.testimonials-slider .db-testimonials-count {
  position: absolute;
  left: 124px;
  right: auto;
  top: auto;
  bottom: 0;
  width: auto;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--_font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--t-muted);
}
.testimonials-slider .db-testimonials-count .swiper-pagination-current {
  color: var(--t-bright);
}
.testimonials-slider .db-testimonials-card {
  border: 1px solid var(--bl-line);
}
.testimonials-slider .db-testimonials-card__text p::before {
  content: "\201C";
  height: 32px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 64px;
  font-weight: 400;
  font-style: normal;
}
.testimonials-slider .db-testimonials-card__author {
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--bl-line);
}
@media only screen and (max-width: 767.98px) {
  .testimonials-slider .db-testimonials-card {
    padding: 22px !important;
  }
  .testimonials-slider .db-testimonials-card__text p {
    font-size: 16px !important;
  }
}

/* ---------- "What you can expect" (home) ---------- */
/* The full-width ruled list becomes a grid of numbered cards, as on the
   Bones site: mono 01–04, a short title and the description underneath. */
#what-you-can-expect .db-approach-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  counter-reset: bl-expect;
}
#what-you-can-expect .db-approach-list__item {
  counter-increment: bl-expect;
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  border: 1px solid var(--bl-line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--base-tint), var(--base));
  box-shadow: var(--bl-e1);
}
#what-you-can-expect .db-approach-list__item::before {
  content: counter(bl-expect, decimal-leading-zero);
  margin-bottom: 20px;
  font-family: var(--_font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent-text);
}
#what-you-can-expect .db-approach-list__border {
  display: none;
}
#what-you-can-expect .db-approach-list__inner {
  padding: 0 !important;
}
#what-you-can-expect .db-approach-list__inner .db-grid-item {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  padding: 0 !important;
}
#what-you-can-expect .db-approach-list__title {
  padding: 0 !important;
  text-align: left !important;
  justify-content: flex-start !important;
  margin-bottom: 10px;
}
#what-you-can-expect .db-approach-list__title h3 {
  font-size: 22px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
  text-align: left !important;
}
#what-you-can-expect .db-approach-list__descr,
#what-you-can-expect .db-approach-list__descr p {
  padding: 0 !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--t-medium) !important;
}
@media only screen and (min-width: 768px) {
  #what-you-can-expect .db-approach-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}
@media only screen and (min-width: 1200px) {
  #what-you-can-expect .db-approach-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* Arrows between the cards (2026-11-02): a small round marker in the gap,
   pointing down on phones, across in rows of two (1→2, 3→4) and across all
   four on wide screens. */
#what-you-can-expect .db-approach-list__item {
  position: relative;
}
#what-you-can-expect .db-approach-list__item:not(:last-child)::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -27px;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--bl-line));
  border-radius: 50%;
  background-color: var(--base);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B82F6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px;
  box-shadow: var(--bl-e1);
}
@media only screen and (max-width: 767px) {
  #what-you-can-expect .db-approach-list { gap: 20px; }
}
@media only screen and (min-width: 768px) {
  #what-you-can-expect .db-approach-list__item:not(:last-child)::after {
    left: auto;
    right: -31px;
    top: 50%;
    bottom: auto;
    margin: -19px 0 0;
    transform: rotate(-90deg);
  }
}
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  #what-you-can-expect .db-approach-list__item:nth-child(even)::after { display: none; }
}

/* ---------- heroes, as the Bones .hd-hero ---------- */
/* Hero 09 (service pages, about, pricing, FAQ): centred column with a soft
   accent glow. The keyword H1 in the caption becomes the mono eyebrow, the big
   display line the headline and the intro paragraph the lead. The 3D image,
   emoji badges and "always switched on" mark are hidden. */
.db-hero-09,
.db-section-inner-headline,
main > .db-section:first-child {
  background: radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%);
}
.db-hero-09 {
  padding-top: 0;
}
.db-hero-09__wrap {
  height: auto;
  padding: 128px 0 40px;
  overflow: visible;
}
.db-hero-09__headline {
  position: relative;
  bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}
.hero-09-headline__caption {
  display: contents;
}
.hero-09-headline__caption h1 {
  order: 1;
  margin: 0;
  font: 500 13px/1.4 var(--_font-mono, "Geist Mono", monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.hero-09-headline__title {
  order: 2;
  overflow: visible;
}
.hero-09-headline__title .hero-09-headline,
.hero-09-headline__title div.hero-09-headline,
.hero-09-headline__title h1 {
  max-width: 21ch;
  margin: 0 auto;
  font: 600 40px/1.04 var(--_font-accent);
  letter-spacing: -0.05em;
  color: var(--t-bright);
}
.hero-09-headline__caption p {
  order: 3;
  max-width: 62ch;
  margin: 4px auto 0;
  font: 400 17px/1.55 var(--_font-default);
  color: var(--t-medium);
}
.hero-09-headline__tags {
  order: 4;
  justify-content: center;
  gap: 8px;
  max-width: none;
  margin-top: 8px;
}
.hero-09-headline__tags .tag,
.hero-09-headline__tags span {
  padding: 4px 10px;
  border: 1px solid var(--bl-line);
  border-radius: 999px;
  background: var(--base);
  font: 500 11px/1.4 var(--_font-mono, "Geist Mono", monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-medium);
}
.db-hero-09__objects {
  display: none;
}
.db-hero-09__more {
  display: none;
}
@media only screen and (min-width: 768px) {
  .db-hero-09__wrap {
    padding: 160px 0 56px;
  }
  .hero-09-headline__title .hero-09-headline,
  .hero-09-headline__title div.hero-09-headline,
  .hero-09-headline__title h1 {
    font-size: 56px;
    line-height: 1.02;
  }
  .hero-09-headline__caption p {
    font-size: 19px;
  }
}
@media only screen and (min-width: 1200px) {
  .db-hero-09__wrap {
    padding: 176px 0 64px;
  }
  .hero-09-headline__title .hero-09-headline,
  .hero-09-headline__title div.hero-09-headline,
  .hero-09-headline__title h1 {
    font-size: 64px;
  }
}

/* inner headline (blog, contact) and article headline (audit, posts) */
.inner-headline__title,
div.inner-headline__title {
  font: 600 clamp(40px, 2.4rem + 3.4vw, 64px)/1.04 var(--_font-accent);
  letter-spacing: -0.05em;
}
.inner-headline__descr p,
.inner-headline__text {
  font-size: 17px;
  line-height: 1.55;
  color: var(--t-medium);
}
.db-article__title h1 {
  font: 600 clamp(36px, 2rem + 3vw, 56px)/1.05 var(--_font-accent);
  letter-spacing: -0.05em;
}

/* home hero (Bones .hd-hero) */
.bl-home-hero {
  padding: 128px 0 64px;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%);
}
.bl-home-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}
.bl-home-hero__eyebrow {
  margin: 0;
  font: 500 12px/1.4 var(--_font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.bl-home-hero__title {
  max-width: 20ch;
  margin: 0;
  font: 600 40px/1.04 var(--_font-accent);
  letter-spacing: -0.05em;
  color: var(--t-bright);
}
.bl-home-hero__lead {
  max-width: 58ch;
  margin: 4px 0 0;
  font: 400 17px/1.55 var(--_font-default);
  color: var(--t-medium);
}
.bl-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}
.bl-home-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border: 1px solid var(--bl-line);
  border-radius: 999px;
  background: var(--base);
  box-shadow: var(--bl-e1);
  font: 500 15px/1 var(--_font-default);
  color: var(--t-bright);
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease;
}
.bl-home-hero__btn:hover {
  transform: translateY(-1px);
}
.bl-home-hero__btn--primary {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: var(--bl-hl);
  color: #fff;
}
@media only screen and (min-width: 768px) {
  .bl-home-hero {
    padding: 176px 0 80px;
  }
  .bl-home-hero__title {
    font-size: 56px;
    line-height: 1.02;
  }
  .bl-home-hero__lead {
    font-size: 19px;
  }
}
@media only screen and (min-width: 1200px) {
  .bl-home-hero {
    padding: 200px 0 96px;
  }
  .bl-home-hero__title {
    font-size: 72px;
  }
}

/* home: concept figure under the hero (replaces the stock parallax image) */
.bl-home-figure {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 16px 32px;
  border: 1px solid var(--bl-line);
  border-radius: 24px;
  background:
    radial-gradient(ellipse 60% 80% at 50% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    var(--base-tint, #F4F4F5);
  box-shadow: var(--bl-e1);
}
.bl-home-figure .db-concept {
  max-width: 760px;
  margin: 0 auto;
}
.bl-home-figure .db-concept__cap {
  text-align: center;
}
@media only screen and (min-width: 768px) {
  .bl-home-figure {
    padding: 64px 48px 40px;
  }
}
/* the GitHub badge now sits in the hero as a text link */
#rotating-cta-main .db-container__circle--cta {
  display: none;
}
.bl-home-hero__code {
  margin-top: 4px;
  font: 500 12px/1.4 var(--_font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-muted, #6B6B73);
  text-decoration: none;
}
.bl-home-hero__code:hover {
  color: var(--accent-text);
}
.bl-home-figure .db-concept--journey {
  max-width: 980px;
}

/* journey scene: three stage cards joined by an animated link */
.cx-journey {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.8em;
  align-items: stretch;
}
.cx-stage {
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  padding: 0.9em;
  border: 1px solid var(--cx-line);
  border-radius: 0.9em;
  background: color-mix(in srgb, var(--cx-card) 70%, transparent);
}
.cx-stage--on {
  border-color: color-mix(in srgb, var(--cx-blue) 35%, transparent);
  background: var(--cx-blue-soft);
}
.cx-stage .cx-win,
.cx-stage .cx-rec {
  box-shadow: var(--cx-shadow);
}
.cx-stage__when {
  margin-top: auto;
}
.cx-stage__head {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
}
.cx-stage__n {
  font: 500 0.72em/1 var(--_font-mono, ui-monospace, monospace);
  letter-spacing: 0.08em;
  color: var(--cx-blue);
}
.cx-stage__name {
  font-weight: 600;
  letter-spacing: -0.02em;
}
.cx-stage__when {
  font: 400 0.72em/1.2 var(--_font-mono, ui-monospace, monospace);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cx-mute);
}
.cx-stage .cx-links {
  flex-wrap: nowrap;
  gap: 0.4em;
  margin-top: 0;
}
.cx-stage .cx-link {
  font-size: 0.78em;
  white-space: nowrap;
}
.cx-journey__link {
  position: relative;
  justify-self: center;
  width: 1px;
  height: 1.6em;
  background: var(--cx-line);
  overflow: hidden;
}
.cx-journey__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, var(--cx-blue), transparent);
  animation: cx-journey-flow 2.4s linear infinite;
}
@keyframes cx-journey-flow {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100%); }
}
/* side by side only when each stage has room; minmax(0, 1fr) lets the
   cards shrink instead of pushing past the frame (seen on web-design.html) */
.cx-stage {
  min-width: 0;
}
@container (min-width: 860px) {
  .cx-journey {
    grid-template-columns: minmax(0, 1fr) 2.4em minmax(0, 1fr) 2.4em minmax(0, 1fr);
    gap: 0;
  }
  .cx-journey__link {
    align-self: center;
    width: 100%;
    height: 1px;
  }
  .cx-journey__link::after {
    background: linear-gradient(90deg, transparent, var(--cx-blue), transparent);
    animation-name: cx-journey-flow-x;
  }
}
@keyframes cx-journey-flow-x {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .cx-journey__link::after {
    animation: none;
  }
}


/* ---------- compact rhythm: one section gap, Bones-sized type ----------
   Every standard section ends with the same gap (--bl-gap), so the space
   between sections is even on every page. Headings and body text step down
   to the Bones scale (h2 about 52px, body 18px at desktop width). */
:root {
  /* 2026-11-02: was clamp(64px, 40px + 4vw, 96px); more room between sections */
  --bl-gap: clamp(72px, 9vw, 120px); /* mock section rhythm (Owner 2026-11-04: "sections nicely fit on the screen"); was clamp(88px, 48px + 6vw, 160px) */

  --fs-h1: clamp(4rem, 2.4rem + 3.2vw, 6.4rem);
  --fs-h1-small: clamp(3.4rem, 2rem + 2.6vw, 5.6rem);
  --fs-h2: clamp(3.2rem, 2rem + 2.4vw, 5.2rem);
  --fs-h2-small: clamp(2.6rem, 1.8rem + 1.8vw, 4.2rem);
  --fs-h2-large: clamp(3.4rem, 2rem + 2.6vw, 5.6rem);
  --fs-h3: clamp(2.2rem, 1.6rem + 1vw, 3.2rem);
  --fs-body: clamp(1.6rem, 1.4rem + 0.3vw, 1.8rem);
  --fs-body-large: clamp(1.8rem, 1.5rem + 0.5vw, 2.2rem);
}
.db-section.padding-default,
.db-section.padding-default.mobile-title,
.db-section.padding-stacked-section,
.db-section.padding-stacked-pre-mtext {
  --db-section-pb: var(--bl-gap);
}
.db-section-inner-headline.padding-default {
  --db-inner-pb: var(--bl-gap);
}
.db-hero-09 + .db-section,
.db-hero-09__wrap {
  scroll-margin-top: calc(var(--bl-hdr-h) + 24px);
}

/* the character-by-character grey fade on headings made them look half
   loaded while scrolling; headings now show at full strength straight away */
.reveal-type .char,
.reveal-type .word,
.reveal-in-up .char {
  opacity: 1 !important;
  transform: none !important;
}

/* outliers in the even rhythm */
.db-hero-09__wrap {
  padding-bottom: 0 !important;
}
.bl-home-hero {
  padding-bottom: 48px;
}
.db-features-promo {
  padding-top: 0;
  padding-bottom: 0;
}
/* pinned lists: the sticky offset clears the header instead of padding,
   so the section starts at the same gap as every other section */
@media only screen and (min-width: 1200px) {
  .db-pinned-universal__static-inner {
    top: 96px;
    padding-top: 16px;
  }
  .db-pinned-universal__scroll {
    padding-top: 0;
  }
}

/* ---------- one type scale (sizes at 1440px wide) ----------
   H1 64 · H2 56 (Owner 2026-11-04: mock size site-wide) · card H3 32 · list H3 22 · lead 20 · body 18 · small 15.
   Components that set their own sizes are pulled back onto this scale. */
:root {
  --bl-h2: clamp(34px, 4.4vw, 56px);
  --bl-h3: clamp(22px, 16px + 1.1vw, 32px);
  --fs-h3: clamp(2.2rem, 1.6rem + 1.1vw, 3.2rem);
  --fs-body-large: clamp(1.7rem, 1.5rem + 0.35vw, 2rem);
  --fs-body-small: clamp(1.4rem, 1.35rem + 0.1vw, 1.5rem);
}
main h2:not(.db-concept *) {
  font-size: var(--bl-h2) !important;
  font-weight: 600 !important;
  line-height: 1.02 !important; /* mock 1.02 (2026-11-04) */
  letter-spacing: -0.035em; /* mocks: -.035em (B48, Owner 2026-11-04 "exactly like the prototype") */
}
.services-stack__inner h3,
.db-services-stack__inner h3,
.db-services-cards-s__inner h3,
.pricing-header__title,
.db-pricing h3 {
  font-size: var(--bl-h3) !important;
  line-height: 1.12 !important;
}
.pricing-header__title {
  font-size: clamp(20px, 16px + 0.6vw, 24px) !important;
}
.db-projects-archive__title p,
.post-secondary__title,
.table-of-contents__title {
  font-size: clamp(20px, 17px + 0.5vw, 24px) !important;
  line-height: 1.2;
}
.db-point-subtitle {
  font-size: 18px;
}
/* list-level headings (numbered lists, fit columns, FAQ questions, expect cards) */
.db-res-list__title h3,
.db-fit__col h3,
.db-accordion__title h3,
#what-you-can-expect h3,
.db-approach-list h3 {
  font-size: clamp(20px, 17px + 0.5vw, 24px) !important;
  line-height: 1.2 !important;
}
/* body copy that ran larger than the 18px body size */
.db-res-list__descr p,
.services-stack__inner p.t-opposite,
.db-services-stack__inner p.t-opposite,
main li.t-small-mobile,
main .t-small-mobile li {
  font-size: var(--fs-body) !important;
}

/* ---------- services page: service cards (Bones card style) ---------- */
.bl-svc-head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
.bl-svc-head__eyebrow {
  margin: 0 0 12px;
  font: 500 13px/1.4 var(--_font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.bl-svc-head__lead {
  margin: 16px auto 0;
  max-width: 58ch;
  font-size: var(--fs-body);
  color: var(--t-medium);
}
.bl-svc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media only screen and (min-width: 992px) {
  .bl-svc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}
.bl-svc-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--bl-line);
  border-radius: 20px;
  background: var(--base-tint);
  box-shadow: var(--bl-e1);
  color: var(--t-bright);
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.no-touch .bl-svc-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--bl-line));
  box-shadow: var(--bl-e2, 0 8px 24px rgba(10, 10, 11, 0.08));
  color: var(--t-bright);
}
.bl-svc-card__visual {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 32px 24px;
  border-bottom: 1px solid var(--bl-line);
  background:
    radial-gradient(ellipse 70% 80% at 50% 100%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
    var(--base);
}
.bl-svc-card--on .bl-svc-card__visual {
  background:
    radial-gradient(ellipse 70% 80% at 50% 100%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--base);
}
.bl-svc-card__visual .db-concept {
  max-width: 420px;
}
.bl-svc-card__visual .db-concept__cap {
  display: none;
}
.bl-svc-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
}
.bl-svc-card__step {
  font: 500 12px/1.4 var(--_font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
main h3.bl-svc-card__title {
  margin: 0;
  font: 600 var(--bl-h3)/1.12 var(--_font-accent);
  letter-spacing: -0.03em;
}
.bl-svc-card__lead {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--t-medium);
}
.bl-svc-card__list {
  display: grid;
  gap: 8px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.bl-svc-card__list li {
  position: relative;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--t-bright);
}
.bl-svc-card__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.35em;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
  transform-origin: 30% 50%;
}
.bl-svc-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--bl-line);
}
.bl-svc-card__meta {
  font: 500 13px/1.4 var(--_font-mono);
  letter-spacing: 0.04em;
  color: var(--t-medium);
}
.bl-svc-card__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--accent-text);
}
.no-touch .bl-svc-card:hover .bl-svc-card__more svg {
  transform: translateX(2px);
}
@media only screen and (max-width: 767px) {
  .bl-svc-card__visual {
    min-height: 200px;
    padding: 24px 16px;
  }
  .bl-svc-card__body {
    padding: 22px;
  }
}
@media only screen and (min-width: 992px) {
  .bl-svc-card__visual {
    height: 300px;
    min-height: 0;
    overflow: hidden;
  }
  .bl-svc-card__visual .db-concept {
    max-width: 380px;
  }
}
@media only screen and (min-width: 992px) {
  .bl-svc-card__visual {
    height: 320px;
  }
  .bl-svc-card__visual .db-concept {
    max-width: 340px;
  }
  .bl-svc-card__visual .db-concept--implementation {
    max-width: 280px;
  }
}
/* three-across variant (home "Three steps") */
@media only screen and (min-width: 1200px) {
  .bl-svc-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .bl-svc-grid--3 .bl-svc-card__visual {
    height: 280px;
  }
  .bl-svc-grid--3 .bl-svc-card__visual .db-concept {
    max-width: 300px;
  }
  .bl-svc-grid--3 .bl-svc-card__visual .db-concept--implementation {
    max-width: 240px;
  }
}
#how-we-work {
  scroll-margin-top: calc(var(--bl-hdr-h) + 24px);
}
/* Services page cards (two across from 992px): the same idea, so a card fits one
   screen below the header on shorter desktops. */
@media only screen and (min-width: 992px) and (max-height: 1050px) {
  .bl-svc-grid:not(.bl-svc-grid--3):not(.bl-svc-grid--audience) .bl-svc-card__visual { height: 250px; padding: 20px; }
  .bl-svc-grid:not(.bl-svc-grid--3):not(.bl-svc-grid--audience) .bl-svc-card__visual .db-concept { zoom: 0.8; }
}
@media only screen and (min-width: 992px) and (max-height: 820px) {
  .bl-svc-grid:not(.bl-svc-grid--3):not(.bl-svc-grid--audience) .bl-svc-card__visual { height: 190px; padding: 14px; }
  .bl-svc-grid:not(.bl-svc-grid--3):not(.bl-svc-grid--audience) .bl-svc-card__visual .db-concept { zoom: 0.62; }
  .bl-svc-grid:not(.bl-svc-grid--3):not(.bl-svc-grid--audience) .bl-svc-card__body { gap: 10px; padding: 24px; }
}
@media only screen and (min-width: 992px) and (max-height: 760px) {
  .bl-svc-grid:not(.bl-svc-grid--3):not(.bl-svc-grid--audience) .bl-svc-card__visual { height: 150px; padding: 10px; }
  .bl-svc-grid:not(.bl-svc-grid--3):not(.bl-svc-grid--audience) .bl-svc-card__visual .db-concept { zoom: 0.5; }
}
/* Home "Three steps": from 992px the heading and the three cards fit one screen.
   Shorter screens get a shorter illustration band and tighter card spacing:
   medium (up to 1050px tall), small (820px, e.g. a 15" laptop) and short (760px). */
@media only screen and (min-width: 992px) and (max-height: 1050px) {
  #how-we-work .bl-svc-head { margin-bottom: 32px; }
  #how-we-work .bl-svc-card__visual { height: 210px; padding: 20px; }
  #how-we-work .bl-svc-card__visual .db-concept { zoom: 0.72; }
  #how-we-work .bl-svc-card__body { gap: 10px; padding: 24px 26px; }
  #how-we-work .bl-svc-card__lead { font-size: 16px; line-height: 1.45; }
  #how-we-work .bl-svc-card__list { gap: 6px; margin-top: 2px; }
  #how-we-work .bl-svc-card__list li { font-size: 15px; line-height: 1.4; }
  #how-we-work .bl-svc-card__foot { padding-top: 14px; }
}
@media only screen and (min-width: 992px) and (max-height: 820px) {
  #how-we-work .bl-svc-head { margin-bottom: 24px; }
  #how-we-work .bl-svc-head h2 { font-size: clamp(32px, 2.6vw, 40px); }
  #how-we-work .bl-svc-head__lead { margin-top: 8px; }
  #how-we-work .bl-svc-card__visual { height: 178px; padding: 12px; }
  #how-we-work .bl-svc-card__visual .db-concept { zoom: 0.62; }
  #how-we-work .bl-svc-card__body { gap: 8px; padding: 20px 24px; }
  #how-we-work h3.bl-svc-card__title { font-size: 26px; }
}
@media only screen and (min-width: 992px) and (max-height: 760px) {
  #how-we-work .bl-svc-head { margin-bottom: 20px; }
  #how-we-work .bl-svc-head__lead { font-size: 16px; }
  #how-we-work .bl-svc-card__visual { height: 116px; padding: 10px; }
  #how-we-work .bl-svc-card__visual .db-concept { zoom: 0.4; }
  #how-we-work .bl-svc-card__lead { font-size: 15px; }
}