/* bones-look/03-refinements.css: Mobile menu, callouts, navigation, footer and site-frame refinements (2026-11-01 to 11-03).
   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. */
/* ---------- mobile menu (below 1200px), 2026-11-01 ----------
   A compact panel that drops from the header instead of a full-screen sheet.
   The panel is .hamburger__base (GSAP Flip moves it into .db-menu__contain,
   so it takes that box's size); the page behind is dimmed by .db-menu__base.
   The sheet is the opposite theme, so text uses the --t-opp-* tokens. */
.db-menu__eyebrow,
.db-menu__cta { display: none; }
@media only screen and (max-width: 1199.98px) {
  .db-menu__wrapper { padding: calc(var(--bl-hdr-h) + 8px) 12px 12px; align-items: flex-start; }
  .db-menu__base { background: rgba(10, 10, 11, 0.45); }
  .db-menu__contain {
    width: min(400px, 100%);
    height: auto;
    max-height: calc(100dvh - var(--bl-hdr-h) - 20px);
    margin-left: auto;
  }
  .hamburger__base { border-radius: 24px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5); }
  .db-menu__right { display: none !important; }
  .db-nav__hamburger.nav-open .hamburger__line { background-color: var(--t-bright); }
  .db-menu__inner { height: auto; max-height: inherit; padding: 20px 0 16px; }
  .db-menu__inner > * { flex-shrink: 0; }
  .db-menu__left { padding: 0 20px; }
  .db-menu__eyebrow {
    display: block;
    margin: 0 0 8px;
    font: 500 11px/1 var(--_font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--t-opp-muted);
  }
  .main-menu__accordion { gap: 0; counter-reset: dbmenu; }
  .main-menu__item {
    counter-increment: dbmenu;
    border-top: 1px solid color-mix(in srgb, var(--t-opp-bright) 10%, transparent);
  }
  .main-menu__item > a,
  .main-menu__toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0 !important;
    padding: 0 !important;
    width: 100%;
    min-height: 52px;
  }
  .main-menu__item > a::before,
  .main-menu__toggle::before {
    content: counter(dbmenu, decimal-leading-zero);
    flex: none;
    width: 32px;
    font: 500 11px/1 var(--_font-mono);
    letter-spacing: 0.04em;
    color: var(--t-opp-muted);
  }
  .main-menu__link {
    min-height: 0;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
  }
  .main-menu__toggle svg {
    box-sizing: content-box;
    width: 12px;
    height: 12px;
    margin-left: auto;
    padding: 9px;
    border: 1px solid color-mix(in srgb, var(--t-opp-bright) 14%, transparent);
    border-radius: 999px;
  }
  .main-menu__item.open .main-menu__toggle svg {
    background: var(--t-opp-bright);
    fill: var(--t-bright);
    border-color: var(--t-opp-bright);
  }
  .submenu { padding: 0 0 12px 32px; }
  .submenu__item { margin-bottom: 0; }
  .submenu__item a {
    display: flex;
    align-items: center;
    min-height: 36px;
    font-size: 15px;
    font-weight: 500;
    color: var(--t-opp-medium);
  }
  .submenu__item a::after {
    content: "\2192";
    margin-left: 8px;
    opacity: 0.5;
  }
  .db-menu__cta {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px 0;
    border-top: 1px solid color-mix(in srgb, var(--t-opp-bright) 10%, transparent);
    margin: 0 20px;
    padding-left: 0;
    padding-right: 0;
  }
  .db-menu__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border-radius: 999px;
    background: var(--t-opp-bright);
    color: var(--t-bright) !important;
    font: 500 15px/1 var(--_font-default);
  }
  .db-menu__contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 16px;
    margin: 0;
    font-size: 13px;
  }
  .db-menu__contact a { color: var(--t-opp-medium); background: none !important; }
  .db-menu__data {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 0 20px;
  }
  .db-menu__data p { margin: 0; font-size: 11px; }
}

/* Header logo click (2026-11-01): the fixed hamburger layer spans the whole
   header and sat over the logo link. Let clicks through the layer; keep the
   hamburger and the open menu clickable. */
.db-nav__wrap,
.db-nav__contain { pointer-events: none; }
.db-nav__hamburger,
.db-menu__wrapper { pointer-events: auto; }

/* Case study lists (2026-11-01): the theme resets list styles, so case
   results read as hairline-separated rows with the lead phrase on top. */
.bl-cs ul {
  list-style: none;
  margin: 8px 0 24px;
  padding: 0;
  border-top: 1px solid var(--bl-line);
}
.bl-cs li {
  padding: 14px 0 14px 28px;
  border-bottom: 1px solid var(--bl-line);
  position: relative;
}
.bl-cs li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 1.35em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--accent);
}
.bl-cs li strong {
  display: block;
  color: var(--t-bright);
}

/* ---------- blog quotes and callouts (2026-11-01) ----------
   project-details.css hard-codes light colours, so in dark mode the text
   inherited a light colour on a light box. Rebuilt on theme tokens, scoped
   to blog posts. Only the first <strong> in a box is the label; later ones
   stay inline (they were display:block and split sentences apart). */
.bl-post blockquote {
  margin: 40px 0;
  padding: 4px 0 4px 28px;
  border: 0;
  border-left: 3px solid var(--accent);
  border-radius: 0;
  background: none;
  color: var(--t-bright);
  font-size: clamp(20px, 1.4vw + 12px, 26px);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.bl-post blockquote::before {
  content: none;
}
.bl-post blockquote p {
  margin: 0;
  font: inherit;
  color: inherit;
}
.bl-post blockquote strong {
  color: inherit;
}
.bl-post blockquote cite {
  display: block;
  margin-top: 12px;
  font: 500 12px/1.4 var(--_font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-muted);
}

.bl-post .db-info-box,
.bl-post .db-stat-box {
  position: relative;
  margin: 32px 0;
  padding: 22px 24px 22px 26px;
  border: 1px solid var(--bl-line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 5%, var(--base-tint));
  box-shadow: var(--bl-e1);
  color: var(--t-medium);
  font-size: 16px;
  line-height: 1.65;
}
.bl-post .db-info-box::before,
.bl-post .db-stat-box::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 20px;
  bottom: 20px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.bl-post .db-info-box:hover {
  border-color: var(--bl-line);
  background: color-mix(in srgb, var(--accent) 5%, var(--base-tint));
}
.bl-post .db-info-box strong,
.bl-post .db-stat-box strong {
  display: inline;
  margin: 0;
  font-weight: 600;
  color: var(--t-bright);
}
.bl-post .db-info-box > strong:first-child,
.bl-post .db-stat-box > strong:first-child {
  display: block;
  margin-bottom: 8px;
  font: 500 12px/1.4 var(--_font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.bl-post .db-info-box code,
.bl-post .db-stat-box code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--neutral-transparent, rgba(127, 127, 127, 0.12));
  color: var(--t-bright);
  font: 0.9em var(--_font-mono);
}
/* the stat box reads as a key finding: a touch stronger */
.bl-post .db-stat-box {
  background: color-mix(in srgb, var(--accent) 9%, var(--base-tint));
  border-color: color-mix(in srgb, var(--accent) 22%, var(--bl-line));
  color: var(--t-bright);
  font-size: 17px;
}

.bl-post .db-compare-grid {
  gap: 16px;
}
.bl-post .db-compare-card {
  padding: 24px;
  border: 1px solid var(--bl-line);
  border-radius: 16px;
  background: var(--base-tint);
  box-shadow: var(--bl-e1);
}
.bl-post .db-compare-card:hover {
  transform: none;
  box-shadow: var(--bl-e1);
}
.bl-post .db-compare-card strong {
  margin-bottom: 10px;
  font: 500 12px/1.4 var(--_font-mono);
  letter-spacing: 0.08em;
}
.bl-post .db-compare-card p {
  color: var(--t-bright);
  font-size: 17px;
  line-height: 1.6;
}
.bl-post .db-compare-card--weak {
  background: color-mix(in srgb, #dc2626 5%, var(--base-tint));
  border-color: color-mix(in srgb, #dc2626 22%, var(--bl-line));
}
.bl-post .db-compare-card--weak strong { color: #e5484d; }
.bl-post .db-compare-card--strong {
  background: color-mix(in srgb, #16a34a 6%, var(--base-tint));
  border-color: color-mix(in srgb, #16a34a 24%, var(--bl-line));
}
.bl-post .db-compare-card--strong strong { color: #30a46c; }

@media (max-width: 767px) {
  .bl-post blockquote { margin: 32px 0; padding-left: 20px; }
  .bl-post .db-info-box,
  .bl-post .db-stat-box { padding: 18px 18px 18px 20px; font-size: 15px; }
  .bl-post .db-compare-card { padding: 20px; }
}

/* ---------- mobile button sizes (2026-11-01) ---------- */
/* Below 768px the 52px / 17px buttons crowd the screen. One mobile scale:
   main buttons 48px with 16px text (46px until Direction 1 B1, 3 Nov 2026),
   small buttons 40px, round controls and back-to-top 44px. */
@media only screen and (max-width: 767.98px) {
  .bl-footer__cta {
    height: 44px;
    font-size: 15px;
  }
}

/* ---------- legal pages (2026-11-01) ---------- */
/* The page hero sits directly above the policy text, so the article area
   drops the extra top padding it uses under the old article headline. */
.bl-legal .db-article-area {
  padding-top: 0 !important;
}

/* ---------- footer refinements (2026-11-01) ---------- */
/* Larger logo with a one-line statement under it, so the brand column
   carries weight next to the four link columns; "Cookie settings" sits
   with the legal links and looks like them. */
.bl-footer__brand {
  gap: 20px;
}
.bl-footer__logo img {
  height: 36px;
}
.bl-footer__about {
  margin: 0 0 8px;
  max-width: 340px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--t-medium);
}
.bl-footer .bl-footer__cookies {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--t-medium);
  cursor: pointer;
  transition: color .2s ease;
}
.bl-footer .bl-footer__cookies:hover {
  color: var(--accent-text);
}
@media only screen and (min-width: 1024px) {
  .bl-footer__logo img {
    height: 48px;
  }
  .bl-footer__about {
    font-size: 17px;
  }
}

/* ---------- primary navigation, grouped services menu (2026-11-01) ---------- */
/* Links read as pills inside the bar rather than full-height blocks; the
   services menu splits the two core services from the additional ones. */
@media only screen and (min-width: 1200px) {
  .db-header__nav {
    gap: 2px;
  }
}
.db-header__link {
  position: relative;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--t-medium);
  transition: background-color 160ms ease, color 160ms ease;
}
.db-header__link:hover,
.db-header__link:focus-visible,
.db-header__drop:hover > .db-header__link,
.db-header__drop:focus-within > .db-header__link {
  color: var(--t-bright);
}
.db-header__link.is-current {
  box-shadow: none;
  color: var(--t-bright);
}
.db-header__link.is-current::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--accent);
}
.db-header__drop {
  display: flex;
  align-items: center;
}
/* invisible bridge so the menu stays open while the pointer crosses the gap */
.db-header__drop::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 16px;
}
.db-header__panel {
  top: calc(50% + 32px);
  grid-template-columns: 1.1fr 1fr;
  gap: 8px;
  width: 640px;
  padding: 8px;
  border-radius: 18px;
}
.db-header__group {
  display: grid;
  align-content: start;
  gap: 2px;
}
.db-header__group--core {
  gap: 6px;
  padding: 8px;
  border-radius: 12px;
  background: var(--base);
  border: 1px solid var(--bl-line);
}
.db-header__label {
  padding: 8px 12px 6px;
  font: 500 11px/1.2 var(--_font-mono) !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t-muted) !important;
}
.db-header__panel a {
  padding: 10px 12px;
  border-radius: 10px;
}
.db-header__panel strong {
  font-size: 15px;
  line-height: 1.3;
}
.db-header__panel span {
  line-height: 1.4;
}
.db-header__panel .db-header__core {
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  padding: 14px 12px;
}
.db-header__core em {
  grid-row: 1 / span 2;
  font: 500 12px/1.6 var(--_font-mono);
  font-style: normal;
  color: var(--accent-text);
}
.db-header__core strong {
  font-size: 16px;
}
/* mobile menu: a rule between the core services and the additional ones */
.submenu__item--also {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

/* pricing: link from an option to its service page (2026-11-01) */
.bl-price__option-link {
  justify-self: start;
  margin-top: 4px;
  font-size: 13px;
  color: var(--accent-text);
}

/* pricing: scoping questions (step 03), shown for strategy, Bones and web app work */
.bl-price__scope{display:grid;gap:22px;padding:22px;border:1px solid var(--bl-line);border-radius:16px;background:var(--base-tint)}
.bl-price__q{display:grid;gap:10px}
.bl-price__q-label{font-size:15px;font-weight:600;color:var(--t-bright)}
.bl-price__chips{display:flex;flex-wrap:wrap;gap:8px}
.bl-price__chip{position:relative;cursor:pointer}
.bl-price__chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.bl-price__chip span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--bl-line);border-radius:999px;font-size:14px;color:var(--t-medium);transition:border-color .2s,background .2s,color .2s}
.bl-price__chip:hover span{border-color:color-mix(in srgb,var(--accent) 45%,var(--bl-line))}
.bl-price__chip input:checked + span{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);color:var(--t-bright)}
.bl-price__chip input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

/* Pricing wizard (2026-11-01): JS adds .is-wizard; one step at a time. */
.bl-price.is-wizard{grid-template-columns:minmax(0,1fr);max-width:900px;margin-inline:auto;gap:36px}
.bl-price.is-wizard [hidden]{display:none!important}
.bl-price.is-wizard .bl-price__steps{gap:0}
.bl-price.is-wizard .bl-price__num,.bl-price.is-wizard .bl-price__bar{display:none}
.bl-price.is-wizard .bl-price__legend{font-size:clamp(26px,2.6vw,34px);margin-bottom:12px}
.bl-price.is-wizard .bl-price__hint{margin:0 0 24px}
.bl-price.is-wizard .bl-price__summary{position:static}
.bl-price.is-wizard .bl-price__step:focus,.bl-price.is-wizard .bl-price__summary:focus{outline:none}
.bl-price.is-wizard .bl-price__step:not([hidden]),.bl-price.is-wizard .bl-price__summary:not([hidden]){animation:blPriceIn .35s ease both}
@keyframes blPriceIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.bl-price.is-wizard .bl-price__step,.bl-price.is-wizard .bl-price__summary{animation:none!important}}
/* progress: numbered steps joined by a line */
.bl-price__progress{list-style:none;margin:0;padding:0;display:flex;align-items:center;scroll-margin-top:calc(var(--db-header-offset,72px) + 24px)}
.bl-price__progress li{display:flex;align-items:center;flex:1;min-width:0}
.bl-price__progress li:last-child{flex:none}
.bl-price__progress li:not(:last-child)::after{content:"";flex:1;min-width:12px;height:1px;margin:0 14px;background:var(--bl-line);transition:background .25s}
.bl-price__progress li.is-done::after{background:var(--accent)}
.bl-price__progress button{display:flex;align-items:center;gap:10px;padding:4px;margin:-4px;border:0;border-radius:999px;background:none;cursor:pointer;color:var(--t-medium);font-size:14px;font-weight:500;white-space:nowrap}
.bl-price__pnum{position:relative;display:grid;place-items:center;flex:none;width:30px;height:30px;border:1px solid var(--bl-line);border-radius:50%;font:500 12px/1 var(--_font-mono);color:var(--t-medium);transition:all .25s}
.bl-price__progress button:hover{color:var(--t-bright)}
.bl-price__progress button:hover .bl-price__pnum{border-color:color-mix(in srgb,var(--accent) 55%,var(--bl-line))}
.bl-price__progress button[aria-current]{color:var(--t-bright)}
.bl-price__progress button[aria-current] .bl-price__pnum{border-color:var(--accent);background:var(--accent);color:#fff;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.bl-price__progress .is-done .bl-price__pnum{border-color:var(--accent);color:transparent}
.bl-price__progress .is-done .bl-price__pnum::after{content:"";position:absolute;left:11px;top:7px;width:5px;height:10px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.bl-price__progress button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* bottom bar: total left, Back/Next right */
.bl-price__nav{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-top:1px solid var(--bl-line);background:var(--base)}
.bl-price__nav-btns{display:flex;gap:10px;flex:none}
@media (max-width:760px){
  .bl-price__plabel{display:none}
  .bl-price__progress button[aria-current] .bl-price__plabel{display:inline}
  .bl-price__progress li:not(:last-child)::after{margin:0 8px}
  .bl-price__progress li:has([aria-current]){flex:none}
  /* the site's back-to-top button would sit on the Next button */
  body:has(.bl-price.is-wizard) #to-top{display:none}
}
@media (max-width:520px){
  .bl-price__nav{flex-wrap:wrap;gap:12px}
  .bl-price__nav-btns{flex:1}
  .bl-price__nav-btns .bl-home-hero__btn{flex:1;justify-content:center}
}

/* Pricing steps 02–03, calmer (2026-11-01): grouped services, details only when ticked; grouped questions in two columns. */
.bl-price__groups{display:grid;gap:28px}
.bl-price__group-title{margin:0 0 10px;font:500 11px/1.4 var(--_font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t-medium)}
.bl-price__option-price{display:grid;justify-items:end;gap:4px;text-align:right}
.bl-price__option-price small{font:400 12px/1.3 var(--_font-mono);color:var(--t-medium)}
.bl-price__option-text{max-width:64ch}
.bl-price__option-gets{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px;margin-top:8px;padding-top:14px;border-top:1px dashed var(--bl-line);font-size:14px;line-height:1.45;color:var(--t-medium)}
.bl-price__option:has(input:checked) .bl-price__option-gets{display:grid}
.bl-price__get{position:relative;padding-left:20px}
.bl-price__get::before{content:"";position:absolute;left:3px;top:3px;width:5px;height:9px;border:solid var(--accent);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.bl-price__option-link{font-size:14px}
.bl-price__scope{gap:0;padding:0}
.bl-price__scope-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 36px}
.bl-price__q{gap:10px;align-content:start}
.bl-price__q-label{font-size:14.5px}
.bl-price__chips{gap:6px}
.bl-price__chip span{min-height:34px;padding:0 13px;font-size:13.5px}
@media (max-width:760px){
  .bl-price__scope-grid,.bl-price__option-gets{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .bl-price__option-price{display:flex;gap:8px;align-items:baseline;justify-items:start;text-align:left}
}

/* Pricing header (2026-11-01): compact two-column intro so the wizard starts higher. */
.bl-price-head{padding-bottom:16px}
.bl-price-head__inner{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:end;max-width:900px;margin:0 auto;padding:0 16px}
.bl-price-head__intro{display:grid;gap:14px;justify-items:start}
.bl-price-head__title{margin:0;font:600 clamp(38px,4.6vw,56px)/1.02 var(--_font-accent);letter-spacing:-.05em;color:var(--t-bright);text-wrap:balance}
.bl-price-head__lead{margin:0;max-width:46ch;font-size:17px;line-height:1.55;color:var(--t-medium)}
.bl-price-head__meta{margin:4px 0 0;font:500 12px/1.6 var(--_font-mono);letter-spacing:.04em;color:var(--t-medium)}
.bl-price-head__meta a{color:var(--t-bright);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent);text-underline-offset:4px}
.bl-price-head__rates{padding:20px 22px;border:1px solid var(--bl-line);border-radius:18px;background:var(--base-tint);box-shadow:var(--bl-e1)}
.bl-price-head__rates-title{margin:0 0 8px;font:500 11px/1.4 var(--_font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t-medium)}
.bl-price-head__rates dl{margin:0;display:grid}
.bl-price-head__rates dl div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--bl-line)}
.bl-price-head__rates dl div:first-child{border-top:0}
.bl-price-head__rates dt{font-size:14px;color:var(--t-medium)}
.bl-price-head__rates dd{margin:0;font:500 13.5px/1.3 var(--_font-mono);color:var(--t-bright);white-space:nowrap}
.bl-price-head + .db-section{padding-top:40px}
@media (max-width:860px){
  .bl-price-head__inner{grid-template-columns:minmax(0,1fr);gap:28px}
}
.bl-price-head__talk{display:flex;justify-content:space-between;margin-top:10px;padding-top:12px;border-top:1px solid var(--bl-line);font-size:14px;font-weight:500;color:var(--accent-text);text-decoration:none}
.bl-price-head__talk:hover{color:var(--t-bright)}

/* Footer hand-off (2026-11-01, assets/js/app.js): the wordmark rises in at the end,
   and the header "Hire us" turns solid once the footer's own one has scrolled away.
   Without JS nothing changes. */
.db-header__controls .btn-default{transition:background-color .3s ease,border-color .3s ease,color .3s ease,box-shadow .3s ease}
.db-header.is-footer-cta .db-header__controls .btn-outline{background-color:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;box-shadow:var(--bl-hl)}
.db-header.is-footer-cta .db-header__controls .btn-outline .btn-caption,
.db-header.is-footer-cta .db-header__controls .btn-outline i{color:#fff!important}
.bl-footer__wordmark svg{transform:translateY(calc((1 - var(--mark-p,1)) * 45%));opacity:calc(.4 + .6 * var(--mark-p,1));will-change:transform}
@media (prefers-reduced-motion:reduce){
  .db-header__controls .btn-default{transition:none}
  .bl-footer__wordmark svg{transform:none;opacity:1}
}

/* Footer Bones platform band (2026-11-01): full width above "How we work"; links
   to the three Bones 9 case studies. Replaces the footer logo. */
.bl-footer__platform{grid-column:1 / -1;display:grid;gap:24px;padding:24px;border:1px solid var(--bl-line);border-radius:20px;background:var(--base-tint);box-shadow:var(--bl-e1)}
.bl-footer__platform-intro{display:grid;gap:12px;align-content:start}
.bl-footer__platform .bl-footer__head{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.bl-footer__pill{padding:3px 8px;border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);border-radius:999px;color:var(--accent-text);font-size:10px;letter-spacing:.06em}
.bl-footer__platform-intro p{margin:0;max-width:34ch;font-size:15px;line-height:1.55;color:var(--t-medium)}
.bl-footer__platform-list{display:grid;gap:12px}
.bl-footer .bl-footer__platform-list a,.bl-home-platform .bl-footer__platform-list a{display:grid;gap:6px;align-content:start;padding:18px;border:1px solid var(--bl-line);border-radius:14px;color:var(--t-bright);text-decoration:none;transition:border-color .2s ease,background .2s ease}
.bl-footer .bl-footer__platform-list a:hover,.bl-home-platform .bl-footer__platform-list a:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--bl-line));background:color-mix(in srgb,var(--accent) 5%,transparent)}
.bl-footer__platform-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.bl-footer__platform-top svg{color:var(--t-muted);transition:transform .2s ease,color .2s ease}
.bl-footer__platform-list a:hover .bl-footer__platform-top svg{color:var(--accent-text);transform:translateX(3px)}
.bl-footer__platform-name{font-size:16px;font-weight:600}
.bl-footer__platform-text{font-size:14px;line-height:1.5;color:var(--t-medium)}
@media (min-width:768px){
  .bl-footer__platform-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1024px){
  .bl-footer__platform{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px;padding:28px}
}

/* Platform band visuals (2026-11-02): a faint grid and glow behind the band, a
   version track under the intro and a line drawing at the top of each card. */
.bl-footer__platform{position:relative;overflow:hidden;isolation:isolate}
.bl-footer__platform::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60% 90% at 0% 100%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),
    linear-gradient(var(--bl-line) 1px,transparent 1px) 0 0/28px 28px,
    linear-gradient(90deg,var(--bl-line) 1px,transparent 1px) 0 0/28px 28px;
  -webkit-mask-image:linear-gradient(100deg,#000 0%,transparent 55%);mask-image:linear-gradient(100deg,#000 0%,transparent 55%);opacity:.6}
.bl-footer__track{position:relative;display:grid;gap:14px;margin:8px 0 0;padding:0;list-style:none}
.bl-footer__track::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:1px;background:linear-gradient(var(--t-muted),var(--accent));opacity:.5}
.bl-footer__track li{display:flex;gap:14px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--t-muted)}
.bl-footer__track strong{display:block;font-size:14px;font-weight:600;color:var(--t-bright)}
.bl-footer__track-dot{position:relative;flex:0 0 11px;height:11px;margin-top:4px;border-radius:50%;background:var(--base-tint);border:1px solid var(--t-muted)}
.bl-footer__track .is-live .bl-footer__track-dot{background:var(--t-bright);border-color:var(--t-bright)}
.bl-footer__track .is-next .bl-footer__track-dot{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 30%,var(--base-tint))}
.bl-footer__track .is-next .bl-footer__track-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--accent);opacity:0;animation:bl-pa-ring 2.4s ease-out infinite}

.bl-footer__platform-art{display:block;margin:-6px -6px 10px;padding:12px 10px;border:1px solid var(--bl-line);border-radius:10px;
  background:radial-gradient(80% 120% at 50% 0%,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%),color-mix(in srgb,var(--base) 55%,transparent)}
.bl-footer__platform-art svg{display:block;width:100%;max-width:260px;height:auto;margin-inline:auto;aspect-ratio:200/80;overflow:visible}
.bl-footer__platform-art .pa-f{fill:color-mix(in srgb,var(--t-bright) 6%,transparent);stroke:color-mix(in srgb,var(--t-muted) 55%,transparent);stroke-width:1}
.bl-footer__platform-art .pa-l{stroke:var(--t-muted);stroke-width:1.5;stroke-linecap:round;opacity:.85}
.bl-footer__platform-art .pa-a{stroke:var(--accent);stroke-width:1.5;stroke-linecap:round}
.bl-footer__platform-art .pa-hl{fill:color-mix(in srgb,var(--accent) 10%,transparent);stroke:color-mix(in srgb,var(--accent) 45%,transparent)}
.bl-footer__platform-art .pa-dot{fill:var(--accent)}
.bl-footer__platform-art .pa-tick{stroke:var(--base);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.bl-footer__platform-art .pa-flow{stroke-dasharray:3 5;animation:bl-pa-flow 1.6s linear infinite}
.bl-footer__platform-art .pa-pulse{transform-box:fill-box;transform-origin:center;animation:bl-pa-pulse 2.4s ease-in-out infinite}
.bl-footer .bl-footer__platform-list a:hover .bl-footer__platform-art,.bl-home-platform .bl-footer__platform-list a:hover .bl-footer__platform-art{border-color:color-mix(in srgb,var(--accent) 35%,var(--bl-line))}
@keyframes bl-pa-flow{to{stroke-dashoffset:-16}}
@keyframes bl-pa-pulse{50%{opacity:.35}}
@keyframes bl-pa-ring{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}
@media (prefers-reduced-motion:reduce){
  .bl-footer__platform-art .pa-flow,.bl-footer__platform-art .pa-pulse,.bl-footer__track .is-next .bl-footer__track-dot::after{animation:none}
}

/* One site frame (2026-11-01): header content, page content and footer share the
   same edges, with a 16px gutter (32px from 768px). Narrowed 2026-11-04 (Owner: "Whole site")
   from 1376px to 1208px, so the content is 1144px wide, as in the mocks. Widened again (B105) below. */
:root{--bl-site:1376px;--bl-gutter:16px} /* B105 (Owner 2026-11-04: "make the site wider"): back to 1376px, content 1312px */
@media only screen and (min-width:768px){:root{--bl-gutter:32px}}
.db-container,
.db-container--grid,.db-container.grid-container,
.db-container--grid-l,.db-container.grid-l-container{max-width:var(--bl-site);padding-inline:var(--bl-gutter)}
.db-container--fullwidth,.db-container.fullwidth-container{max-width:none;padding-inline:0}
.db-container--no-padding,.db-container.no-padding-container{padding-inline:0}
.db-container--grid.no-padding-right,.db-container.grid-container.no-padding-right{padding-right:0}
@media only screen and (min-width:1200px){
  .db-header{padding-inline:max(var(--bl-gutter),calc((100% - var(--bl-site)) / 2 + var(--bl-gutter)))}
}

/* About: leadership (content/pages/about.body.php, 2026-11-01). Heading first, then one
   framed card per person with links under the photo. */
.bl-team__grid{display:grid;gap:36px}
.bl-team__head{display:grid;gap:12px;align-content:start;max-width:640px}
.bl-team__head h2{margin:0}
.bl-team__intro{margin:0;max-width:36ch;font-size:17px;line-height:1.55;color:var(--t-medium)}
.bl-team__people{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.bl-team__card{display:grid;grid-template-rows:auto 1fr;margin:0;border:1px solid var(--bl-line);border-radius:20px;background:var(--base-tint);box-shadow:var(--bl-e1);overflow:hidden}
.bl-team__photo{aspect-ratio:4 / 5;overflow:hidden;background:color-mix(in srgb,var(--t-bright) 6%,transparent)}
.bl-team__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform .6s ease}
.bl-team__card:hover .bl-team__photo img{transform:scale(1.03)}
.bl-team__body{display:grid;gap:6px;align-content:start;padding:20px 22px 22px}
.bl-team .bl-team__name{margin:0;font:600 21px/1.25 var(--_font-default);letter-spacing:-.01em;color:var(--t-bright)}
.bl-team__role{margin:0;font:500 12px/1.5 var(--_font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--t-medium)}
.bl-team__links{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.bl-team__links a{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;border:1px solid var(--bl-line);border-radius:999px;font-size:13.5px;color:var(--t-bright);text-decoration:none;transition:border-color .2s ease,color .2s ease}
.bl-team__links a:hover{border-color:var(--accent);color:var(--accent-text)}
@media (min-width:1200px){.bl-team__people{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media only screen and (max-width:599px){.bl-team__photo{aspect-ratio:1 / 1}}
@media (prefers-reduced-motion:reduce){.bl-team__photo img{transition:none}}

/* Footer services grouped like the header menu: "How we work" / "Also from DBETA" */
.bl-footer__sub{margin-top:8px;font:500 11px/1.4 var(--_font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--t-muted);opacity:.8}
.bl-footer__head + .bl-footer__sub{margin-top:0}
.bl-footer__rule{align-self:stretch;max-width:160px;height:1px;margin:6px 0 2px;background:var(--bl-line)}

/* Pricing on the site frame (2026-11-02): the header and wizard line up with the
   site header and footer instead of a centred 900px column. */
.bl-price-head__inner{max-width:var(--bl-site);padding-inline:var(--bl-gutter)}
.bl-price.is-wizard{max-width:none;margin-inline:0}
@media (min-width:1200px){
  .bl-price.is-wizard .bl-price__group,.bl-price.is-wizard fieldset > p,.bl-price.is-wizard legend{max-width:none}
}
/* Pricing header starts where other page heroes do: top-aligned columns, and the
   first-section rule also reaches it inside the #price-builder wrapper. */
.bl-price-head__inner{align-items:start}
main.inner-page-content > #price-builder:first-child > .db-section:first-child{margin-top:calc(-1 * var(--db-header-offset));border-top:var(--db-header-offset) solid transparent;background-origin:border-box!important}
/* Pricing "What's included" (2026-11-02): always shown as a short list, like
   published agency rate cards; ticked cards get the accent tick. */
.bl-price__option-gets{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.bl-price__gets-label{font:500 11px/1.4 var(--_font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--t-muted);margin-bottom:2px}
.bl-price__option:not(:has(input:checked)) .bl-price__get::before{opacity:.45}
.bl-price__options--care .bl-price__option{align-items:start}.bl-price__options--care .bl-price__option-body{align-content:start}

/* Left-aligned page hero on the site frame, matching the pricing header (cases.html, 2026-11-02) */
.bl-home-hero--left .bl-home-hero__inner{align-items:flex-start;max-width:var(--bl-site);padding-inline:var(--bl-gutter);text-align:left}
.bl-home-hero--left .bl-home-hero__actions{justify-content:flex-start}
/* About: promo sections stay left-aligned on mobile and tablet, under the left-aligned hero (2026-11-02) */
.bl-about .db-features-promo__content,.bl-about .db-features-promo__content h2,.bl-about .db-features-promo__content p{text-align:left}

/* Services dropdown, balanced (2026-11-02): wider panel, "Also from DBETA" in two
   columns, and the core column ends with the Bones platform and All services links. */
.db-header__panel{grid-template-columns:minmax(0,1fr) minmax(0,2fr);width:min(900px,calc(100vw - 2*var(--bl-gutter)))}
.db-header__group--core{display:flex;flex-direction:column}
.db-header__group--more{grid-template-columns:1fr 1fr;column-gap:4px}
.db-header__sub{display:grid;align-content:start;gap:2px}
.db-header__foot{display:grid;gap:2px;margin-top:auto;padding-top:8px;border-top:1px solid var(--bl-line)}
.db-header__panel .db-header__all{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--accent-text)}
.db-header__panel .db-header__all span{color:inherit}

/* Grouped benefit cards (svc_benefit_groups, "Also from DBETA", 2026-11-02) */
.bl-benefit-group + .bl-benefit-group{margin-top:40px}
.bl-benefit-group__label{margin:0 0 16px}
@media only screen and (min-width: 768px){.bl-benefits--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media only screen and (min-width: 1200px){.bl-benefits--4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* FAQ page (faq.html, 2026-11-02): one row per topic, heading left, questions right.
   Items reuse the service FAQ cards (.bl-faq__item etc. above); page layout is .bl-faqpage*. */
.bl-faqpage{display:grid;grid-template-columns:minmax(0,1fr);gap:72px;width:100%}
.bl-faqpage__section{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;min-width:0;scroll-margin-top:110px}
.bl-faqpage__head{display:grid;gap:6px;align-content:start}
main h2.bl-faqpage__title{margin:0;scroll-margin-top:110px;font:600 28px/1.15 var(--_font-accent);letter-spacing:-.03em;color:var(--t-bright)}
.bl-faqpage__count{margin:0;font:500 12px/1.4 var(--_font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t-muted)}
@media only screen and (min-width: 1200px){
  .bl-faqpage__section{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px}
  .bl-faqpage__head{position:sticky;top:120px;align-self:start}
  main h2.bl-faqpage__title{font-size:36px}
}
.bl-faqpage__topics{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.bl-faqpage__topics a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--bl-line);border-radius:999px;font-size:14px;color:var(--t-medium);text-decoration:none;transition:border-color .2s,color .2s}
.bl-faqpage__topics a:hover{border-color:var(--accent);color:var(--t-bright)}
/* Numbered cards: number, question, toggle; answer lines up with the question. */
.bl-faqpage .bl-faq__q{justify-content:flex-start}
.bl-faqpage .bl-faq__q h3{flex:1 1 auto}
.bl-faqpage__num{flex:0 0 28px;font:500 12px/1 var(--_font-mono);letter-spacing:.06em;color:var(--t-muted);transition:color .2s}
.bl-faqpage .bl-faq__item[open] .bl-faqpage__num{color:var(--accent-text)}
.no-touch .bl-faqpage .bl-faq__item:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--bl-line))}
.bl-faqpage .bl-faq__a{padding-left:68px}
@media only screen and (max-width: 767px){.bl-faqpage .bl-faq__a{padding-left:62px}}



/* platform scene (home hero, 2026-11-02): a Bones workspace window. Three columns when the
   figure has room; on phones the sites become a row and the output panel drops below. */
.bl-home-figure .db-concept--platform { max-width: 1040px; }
.db-concept--platform .db-concept__scene { padding: 0.6em 0; }
.cx-app {
  font-size: clamp(11px, 1.45cqw, 14.5px);
  line-height: 1.35;
  text-align: left;
  background: var(--cx-card);
  border: 1px solid var(--cx-line);
  border-radius: 1em;
  box-shadow: var(--cx-shadow);
  overflow: hidden;
}
.cx-app__bar {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.75em 1em;
  border-bottom: 1px solid var(--cx-line);
}
.cx-app__bar i {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--cx-skel);
}
.cx-app__title {
  margin-left: 0.6em;
  font: 500 0.85em/1 var(--_font-mono, ui-monospace, monospace);
  color: var(--cx-mute);
}
.cx-app__tag {
  margin-left: auto;
  padding: 0.3em 0.7em;
  border-radius: 99em;
  font: 500 0.75em/1 var(--_font-mono, ui-monospace, monospace);
  letter-spacing: 0.04em;
  color: var(--cx-blue);
  background: var(--cx-blue-soft);
}
.cx-app__body {
  display: grid;
  grid-template-columns: 1fr;
}
.cx-app__side,
.cx-app__main,
.cx-app__out {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  min-width: 0;
  padding: 1em;
}
.cx-app__h {
  margin-top: 0.4em;
  font: 500 0.72em/1 var(--_font-mono, ui-monospace, monospace);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cx-mute);
}
.cx-app__h:first-child { margin-top: 0; }
.cx-app__site,
.cx-app__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em;
  padding: 0.45em 0.6em;
  border-radius: 0.5em;
}
.cx-app__site b { font-weight: 500; }
.cx-app__site em,
.cx-app__o em {
  font: 500 0.78em/1.2 var(--_font-mono, ui-monospace, monospace);
  font-style: normal;
  letter-spacing: 0.04em;
  color: var(--cx-mute);
}
.cx-app__site.is-on,
.cx-app__nav.is-on {
  background: var(--cx-blue-soft);
  color: var(--cx-blue);
}
.cx-app__site.is-on em { color: var(--cx-blue); }
.cx-app__nav { padding-top: 0.3em; padding-bottom: 0.3em; color: var(--cx-mute); }
.cx-app__main {
  gap: 0.7em;
  background: color-mix(in srgb, var(--cx-blue-soft) 35%, transparent);
}
.cx-app__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cx-app__name {
  font-size: 1.5em;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.cx-app__langs { display: flex; gap: 0.3em; }
.cx-app__langs span {
  padding: 0.25em 0.55em;
  border: 1px solid var(--cx-line);
  border-radius: 0.4em;
  font: 500 0.75em/1 var(--_font-mono, ui-monospace, monospace);
  color: var(--cx-mute);
}
.cx-app__langs .is-on { color: var(--cx-card); background: var(--cx-ink); border-color: var(--cx-ink); }
.cx-app__langs .is-draft { border-style: dashed; }
.cx-app__tabs {
  display: flex;
  gap: 1.2em;
  border-bottom: 1px solid var(--cx-line);
  font-size: 0.85em;
  color: var(--cx-mute);
}
.cx-app__tabs span { padding-bottom: 0.5em; }
.cx-app__tabs .is-on { color: var(--cx-ink); font-weight: 500; box-shadow: inset 0 -2px 0 var(--cx-blue); }
.cx-app__field {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  align-items: center;
  gap: 0.6em;
}
.cx-app__k { color: var(--cx-mute); font-size: 0.9em; }
.cx-app__v {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em;
  min-width: 0;
  padding: 0.4em 0.6em;
  background: var(--cx-card);
  border: 1px solid var(--cx-line);
  border-radius: 0.5em;
}
.cx-app__ref { color: var(--cx-blue); }
.cx-app__ref::before { content: "↳ "; }
.cx-app__pill {
  padding: 0.05em 0.55em;
  border-radius: 99em;
  font-size: 0.85em;
  background: var(--cx-blue-soft);
  color: var(--cx-blue);
}
.cx-app__ai {
  position: relative;
  display: grid;
  gap: 0.5em;
  padding: 0.8em 0.9em;
  background: var(--cx-card);
  border: 1px dashed color-mix(in srgb, var(--cx-blue) 55%, transparent);
  border-radius: 0.7em;
  overflow: hidden;
}
.cx-app__ai::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, var(--cx-blue-soft) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: cx-app-shimmer 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cx-app-shimmer {
  60%, 100% { transform: translateX(100%); }
}
.cx-app__ai-h { font-size: 0.85em; font-weight: 500; color: var(--cx-blue); }
.cx-app__ai-h::before { content: "✦ "; }
.cx-app__acts { display: flex; justify-content: flex-end; gap: 0.4em; }
.cx-app__btn {
  padding: 0.45em 1em;
  border-radius: 99em;
  font-size: 0.85em;
  font-weight: 500;
  color: #fff;
  background: var(--cx-blue);
  white-space: nowrap;
}
.cx-app__btn--soft { color: var(--cx-ink); background: transparent; border: 1px solid var(--cx-line); }
.cx-app__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6em;
  margin-top: auto;
}
.cx-app__rules { display: flex; flex-wrap: wrap; gap: 0.2em 0.9em; font-size: 0.85em; color: var(--cx-ok); }
.cx-app__preview {
  display: grid;
  gap: 0.45em;
  padding: 0.8em;
  border: 1px solid var(--cx-line);
  border-radius: 0.6em;
}
.cx-app__o {
  display: grid;
  gap: 0.15em;
  padding: 0.5em 0 0.5em 0.8em;
  border-left: 2px solid var(--cx-blue);
}
.cx-app__o b { font-weight: 500; }
/* phones: sites as a row of chips, content types hidden, output below the entry */
@container (max-width: 639px) {
  .cx-app { font-size: clamp(11px, 3.4cqw, 14px); }
  .cx-app__tag { display: none; }
  .cx-app__side { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4em; padding-bottom: 0; }
  .cx-app__side .cx-app__h,
  .cx-app__nav,
  .cx-app__site em { display: none; }
  .cx-app__site { justify-content: center; padding: 0.45em 0.3em; border: 1px solid var(--cx-line); }
  .cx-app__site b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cx-app__preview { display: none; }
}
@container (min-width: 640px) {
  .cx-app__body { grid-template-columns: 0.9fr 1.7fr 1fr; }
  .cx-app__side { border-right: 1px solid var(--cx-line); }
  .cx-app__out { border-left: 1px solid var(--cx-line); }
}
@media (prefers-reduced-motion: reduce) {
  .cx-app__ai::after { animation: none; display: none; }
}


/* pricing: the "Start" button lands with the step bar clear of the fixed header */
#price-steps { scroll-margin-top: calc(var(--bl-hdr-h) + 12px); }

/* ---------------------------------------------------------------
   Home: client reviews (2026-11-02), replacing the testimonial slider.
   Compact cards drift slowly left in one row; the edges fade out. Hover or
   keyboard focus pauses it. Reduced motion: a plain swipe row, no copy set.
---------------------------------------------------------------- */
.bl-reviews__head {
  display: grid;
  gap: 12px 48px;
  margin-bottom: 36px;
}
.bl-reviews__head h2 { margin: 0; }
.bl-reviews__lead {
  margin: 0;
  max-width: 44ch;
  font-size: var(--fs-body);
  color: var(--t-medium);
}
@media only screen and (min-width: 992px) {
  .bl-reviews__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
  }
}
.bl-reviews {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.bl-reviews__track {
  display: flex;
  width: max-content;
  animation: bl-reviews-scroll 70s linear infinite;
}
.bl-reviews:hover .bl-reviews__track,
.bl-reviews:focus-within .bl-reviews__track {
  animation-play-state: paused;
}
.bl-reviews__set {
  display: flex;
  gap: 16px;
  padding-right: 16px;
}
@keyframes bl-reviews-scroll {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .bl-reviews {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .bl-reviews__track { animation: none; padding-left: 16px; }
  .bl-reviews__set[aria-hidden="true"] { display: none; }
}
.bl-review {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 12px;
  width: 340px;
  margin: 0;
  padding: 20px 22px;
  border: 1px solid var(--bl-line);
  border-radius: 16px;
  background: var(--base-tint);
  scroll-snap-align: start;
}
@media only screen and (max-width: 575px) {
  .bl-review { width: 280px; }
}
.bl-review__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.bl-review__stars {
  display: inline-flex;
  gap: 2px;
  color: #F5B83D;
}
.bl-review__source {
  font: 500 11px/1.4 var(--_font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t-muted);
}
.bl-review__quote {
  position: static;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: none;
}
.bl-review__quote::before { content: none; }
.bl-review__quote p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--t-bright);
}
.bl-review__by {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}
.bl-review__photo {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}
.bl-review__who {
  display: grid;
  min-width: 0;
  gap: 1px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--t-medium);
}
.bl-review__who strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--t-bright);
}
.bl-review__who a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--bl-line);
  text-underline-offset: 2px;
}
.bl-review__who a:hover { color: var(--accent-text); }

/* ---------------------------------------------------------------
   Home: "Why Bones sites last" and "The Bones platform" as scroll timelines (2026-11-02).
   A rail runs down the left of the list; its accent fill grows as the
   reader scrolls, and each point lights up and its text brightens as it
   reaches the middle of the screen (assets/js/app.js, [data-timeline]).
   Without JS, or with reduced motion, every point shows as reached.
---------------------------------------------------------------- */
.bl-timeline {
  position: relative;
  padding-left: 44px;
  counter-reset: bl-tl;
}
.bl-timeline__rail {
  position: absolute;
  left: 11px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  border-radius: 2px;
  background: var(--bl-line);
  overflow: hidden;
}
.bl-timeline__fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 60%, transparent), var(--accent));
  transform: scaleY(var(--tl-p, 1));
  transform-origin: top;
}
.bl-timeline .db-res-list__divider { display: none; }
.bl-timeline .db-res-list__content { overflow: visible; }
.bl-timeline .db-res-list__item {
  position: relative;
  counter-increment: bl-tl;
  padding: 0 0 48px;
  transition: opacity .4s ease;
}
.bl-timeline .db-res-list__item:last-of-type { padding-bottom: 0; }
/* the point on the rail, level with the step number */
.bl-timeline .db-res-list__title { position: relative; }
.bl-timeline .db-res-list__title::after {
  content: "";
  position: absolute;
  left: -40px;
  top: 0;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 2px solid var(--bl-line);
  border-radius: 50%;
  background: var(--base);
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
/* step number above each title */
.bl-timeline .db-res-list__title::before {
  content: counter(bl-tl, decimal-leading-zero);
  display: block;
  margin-bottom: 6px;
  font: 500 12px/1.4 var(--_font-mono);
  letter-spacing: .08em;
  color: var(--t-muted);
  transition: color .3s ease;
}
.bl-timeline .db-res-list__item.is-on .db-res-list__title::after {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent);
}
.bl-timeline .db-res-list__item.is-on .db-res-list__title::before { color: var(--accent-text); }
/* not yet reached: dimmed, only once the script is running */
.bl-timeline.is-live .db-res-list__item:not(.is-on) { opacity: .4; }
@media (prefers-reduced-motion: reduce) {
  .bl-timeline .db-res-list__item { transition: none; }
}

/* ---------------------------------------------------------------
   Home: "Who we work with" sector switcher (2026-11-02)
   Numbered tabs with a progress bar on the left, one panel on the right.
   Without JS (no .is-live) every panel shows, stacked.
---------------------------------------------------------------- */
.bl-sectors {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
}
.bl-sectors__tabs { display: none; }
.bl-sectors__panels { display: grid; gap: 16px; min-width: 0; }
.bl-sectors__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  padding: 24px;
  border: 1px solid var(--bl-line);
  border-radius: 24px;
  background: var(--base-tint);
  box-shadow: var(--bl-e1);
  min-width: 0;
}
.bl-sectors__art {
  display: grid;
  place-items: center;
  height: 220px;
  border-radius: 16px;
  background: var(--base);
  overflow: hidden;
}
.bl-sectors__art .db-concept { zoom: .62; }
.bl-sectors__eyebrow {
  margin: 0 0 10px;
  font: 500 12px/1.4 var(--_font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.bl-sectors__title {
  margin: 0 0 12px;
  font-size: clamp(24px, 1.1rem + 1vw, 34px);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
  color: var(--t-bright);
}
.bl-sectors__lead {
  margin: 0 0 20px;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--t-medium);
}
.bl-sectors__list-label {
  margin: 0 0 10px;
  font: 500 12px/1.4 var(--_font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t-medium);
}
.bl-sectors__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bl-sectors__list li {
  position: relative;
  padding: 10px 14px 10px 36px;
  border: 1px solid var(--bl-line);
  border-radius: 12px;
  background: var(--base);
  font-size: 15px;
  line-height: 1.45;
  color: var(--t-bright);
}
.bl-sectors__list li::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

/* Live switcher */
.bl-sectors.is-live .bl-sectors__panel:not(.is-active) { display: none; }
.bl-sectors.is-live .bl-sectors__panel.is-active { animation: bl-sector-in .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes bl-sector-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.bl-sectors.is-live .bl-sectors__tabs {
  display: flex;
  gap: 8px;
  margin: 0 -16px;
  padding: 2px 16px 6px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
}
.bl-sectors__tabs::-webkit-scrollbar { display: none; }
.bl-sectors__tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  padding: 12px 16px;
  border: 1px solid var(--bl-line);
  border-radius: 14px;
  background: var(--base-tint);
  color: var(--t-medium);
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  scroll-snap-align: start;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.bl-sectors__num {
  font: 500 13px/1 var(--_font-mono);
  color: var(--t-muted);
  transition: color .2s ease;
}
.bl-sectors__label { display: grid; gap: 2px; min-width: 0; }
.bl-sectors__name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--t-bright);
}
.bl-sectors__kind { display: none; font-size: 13px; line-height: 1.35; color: var(--t-muted); }
.bl-sectors__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: transparent;
}
.bl-sectors__bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
}
.bl-sectors__tab[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--bl-line));
  box-shadow: var(--bl-e2);
}
.bl-sectors__tab[aria-selected="true"] .bl-sectors__num { color: var(--accent-text); }
.bl-sectors__tab[aria-selected="true"] .bl-sectors__bar i { transform: scaleX(1); }
.bl-sectors.is-auto .bl-sectors__tab[aria-selected="true"] .bl-sectors__bar i {
  animation: bl-sector-bar var(--sector-ms, 7000ms) linear forwards;
}
.bl-sectors.is-paused .bl-sectors__tab[aria-selected="true"] .bl-sectors__bar i { animation-play-state: paused; }
@keyframes bl-sector-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.no-touch .bl-sectors__tab:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--bl-line)); }
.bl-sectors__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media only screen and (min-width: 768px) {
  .bl-sectors__panel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; padding: 28px; gap: 32px; }
  .bl-sectors__art { height: 100%; min-height: 300px; }
  .bl-sectors__art .db-concept { zoom: .75; }
}
@media only screen and (min-width: 992px) {
  .bl-sectors.is-live { grid-template-columns: minmax(240px, 4fr) minmax(0, 9fr); gap: 24px; align-items: stretch; }
  .bl-sectors.is-live .bl-sectors__tabs {
    flex-direction: column;
    margin: 0;
    padding: 0;
    overflow: visible;
  }
  .bl-sectors__tab { flex: 1 1 0; padding: 18px 20px; gap: 16px; border-radius: 18px; }
  .bl-sectors__num { font-size: 15px; }
  .bl-sectors__name { font-size: 17px; }
  .bl-sectors__kind { display: block; }
  .bl-sectors__tab[aria-selected="true"] { background: var(--base-tint); transform: translateX(4px); }
  .bl-sectors__tab:not([aria-selected="true"]) { background: transparent; }
  .bl-sectors__bar { top: 0; bottom: 0; left: 0; right: auto; width: 3px; height: auto; }
  .bl-sectors__bar i { width: 100%; height: 100%; transform: scaleY(0); transform-origin: top; }
  .bl-sectors__tab[aria-selected="true"] .bl-sectors__bar i { transform: scaleY(1); }
  @keyframes bl-sector-bar-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .bl-sectors.is-auto .bl-sectors__tab[aria-selected="true"] .bl-sectors__bar i { animation-name: bl-sector-bar-y; }
  .bl-sectors__panel { padding: 32px; gap: 40px; }
  .bl-sectors__art { min-height: 360px; }
  .bl-sectors__art .db-concept { zoom: .85; }
}
@media only screen and (min-width: 992px) and (max-height: 820px) {
  .bl-sectors__panel { padding: 24px; gap: 28px; }
  .bl-sectors__art { min-height: 280px; }
  .bl-sectors__art .db-concept { zoom: .66; }
  .bl-sectors__list li { padding-block: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-sectors.is-live .bl-sectors__panel.is-active { animation: none; }
  .bl-sectors__tab[aria-selected="true"] { transform: none; }
}

/* ---------------------------------------------------------------
   Home: "Also from DBETA" service map (2026-11-02, svc_service_map)
   Wide screens: two rows of four joined through a central hub; the second
   row is mirrored below the line. Below 1200px: one rail down the left.
   .js-draw / .is-drawn (app.js) draw the lines in once on scroll.
---------------------------------------------------------------- */
.bl-svc-map {
  --map-line: color-mix(in srgb, var(--accent) 35%, var(--bl-line));
  --map-gap: 20px;
  position: relative;
  padding-left: 32px;
}
.bl-svc-map::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 34px;
  width: 2px;
  border-radius: 2px;
  background: var(--map-line);
  transform-origin: top;
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.bl-svc-map__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.bl-svc-map__label {
  position: relative;
  margin: 0 0 16px;
}
.bl-svc-map__label::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--base);
}
.bl-svc-map__item {
  position: relative;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.bl-svc-map__item::after {
  content: "";
  position: absolute;
  left: -23px;
  top: 33px;
  width: 22px;
  height: 2px;
  background: var(--map-line);
  transform-origin: left;
  transition: background-color .25s ease, transform .6s .4s cubic-bezier(.2, .7, .2, 1);
}
.bl-svc-map__item:hover,
.bl-svc-map__item:focus-within {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--bl-line));
}
.bl-svc-map__item:hover::after,
.bl-svc-map__item:focus-within::after { background: var(--accent); }
.bl-svc-map__hub {
  position: relative;
  margin: 28px 0;
}
.bl-svc-map__core {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: -32px;
  padding: 7px 14px 7px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--bl-line));
  border-radius: 999px;
  background: var(--base-tint);
  box-shadow: 0 0 0 6px var(--base), 0 0 32px -6px color-mix(in srgb, var(--accent) 60%, transparent);
  font: 600 12px/1 var(--_font-mono);
  letter-spacing: .14em;
  color: var(--t-bright);
}
.bl-svc-map__core::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
}

/* Draw-in, only when the script is running */
.bl-svc-map.js-draw:not(.is-drawn)::before { transform: scaleY(0); }
.bl-svc-map.js-draw:not(.is-drawn) .bl-svc-map__item::after { transform: scaleX(0); }

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .bl-svc-map__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Only the left column touches the rail. */
  .bl-svc-map__item:nth-child(even)::after { display: none; }
}

@media only screen and (min-width: 1200px) {
  .bl-svc-map { padding-left: 0; }
  .bl-svc-map::before { display: none; }
  .bl-svc-map__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--map-gap); }
  .bl-svc-map__label::before { display: none; }
  .bl-svc-map__group--bottom { display: flex; flex-direction: column-reverse; }
  .bl-svc-map__group--bottom .bl-svc-map__label { margin: 16px 0 0; }
  /* Stems from the middle of each card to the hub line. */
  .bl-svc-map__item::after {
    left: 50%;
    top: auto;
    bottom: -45px;
    width: 2px;
    height: 44px;
    margin-left: -1px;
    transform-origin: top;
  }
  .bl-svc-map__group--bottom .bl-svc-map__item::after {
    top: -45px;
    bottom: auto;
    transform-origin: bottom;
  }
  .bl-svc-map.js-draw:not(.is-drawn) .bl-svc-map__item::after { transform: scaleY(0); }
  .bl-svc-map__item:nth-child(even)::after { display: block; }
  .bl-svc-map__hub {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 92px;
    margin: 0;
  }
  /* The shared line, from the first card's centre to the last card's. */
  .bl-svc-map__hub::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc((100% - 3 * var(--map-gap)) / 8);
    right: calc((100% - 3 * var(--map-gap)) / 8);
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: var(--map-line);
    transform-origin: center;
    transition: transform 1s cubic-bezier(.2, .7, .2, 1);
  }
  .bl-svc-map.js-draw:not(.is-drawn) .bl-svc-map__hub::before { transform: scaleX(0); }
  /* A pulse running along the line, both ways out from the hub. */
  .bl-svc-map__hub::after {
    content: "";
    position: absolute;
    top: 50%;
    left: calc((100% - 3 * var(--map-gap)) / 8);
    width: 72px;
    height: 2px;
    margin-top: -1px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0;
  }
  .bl-svc-map.is-drawn .bl-svc-map__hub::after {
    animation: bl-map-pulse 4.5s 1.2s ease-in-out infinite alternate;
  }
  .bl-svc-map__core { margin-left: 0; padding: 10px 18px 10px 14px; font-size: 13px; }
}
@keyframes bl-map-pulse {
  0% { opacity: 0; transform: translateX(0); }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; transform: translateX(calc(var(--map-run, 900px))); }
}
@media (prefers-reduced-motion: reduce) {
  .bl-svc-map::before,
  .bl-svc-map__item::after,
  .bl-svc-map__hub::before { transition: none; }
  .bl-svc-map.is-drawn .bl-svc-map__hub::after { animation: none; }
}

/* Narrow phones (2026-11-02): the theme sets a 360px minimum width on the page,
   which makes screens under 360px (older small phones, folding-phone cover
   screens) scroll sideways or zoom. Let the page shrink to the screen. */
body,
section,
.db-wrapper,
.db-section,
.mxd-wrapper,
.mxd-section,
.mxd-project {
  min-width: 0;
}
/* The reCAPTCHA box is a fixed 304px; shrink it to fit the contact form there. */
@media only screen and (max-width: 359px) {
  .bl-contact__form .g-recaptcha {
    height: 62px;
    transform: scale(.79);
    transform-origin: 0 0;
  }
}

/* ---------------------------------------------------------------
   Glass finish (2026-11-02)
   Surfaces read like glass: a lit top edge, a faint inner rim and a soft
   sheen fading down the card. The elevation tokens carry the edges, so every
   card using --bl-e1 / --bl-e2 picks them up; the sheen is listed below.
---------------------------------------------------------------- */
:root {
  --bl-rim: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  --bl-e1: var(--bl-rim), 0 1px 2px rgba(10, 10, 11, 0.05), 0 0 0 1px rgba(10, 10, 11, 0.02);
  --bl-e2: var(--bl-rim), 0 1px 2px rgba(10, 10, 11, 0.05), 0 16px 36px -14px rgba(10, 10, 11, 0.18);
  --bl-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 55%);
  --bl-hl: inset 0 1px 0 rgba(255, 255, 255, 0.28), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 40, 140, 0.25), 0 8px 20px -8px rgba(37, 99, 255, 0.45);
}
:root[data-theme="dark"] {
  --bl-rim: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  --bl-e1: var(--bl-rim), 0 1px 2px rgba(0, 0, 0, 0.4);
  --bl-e2: var(--bl-rim), 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 44px -14px rgba(0, 0, 0, 0.7);
  --bl-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 50%);
  --bl-hl: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -10px rgba(0, 82, 255, 0.6);
}
.bl-svc-card,
.bl-benefits__item,
.bl-steps__item,
.bl-insights__card,
.bl-faq__item,
.bl-fit-note,
.bl-contents__doc,
.bl-case-nav__item,
.bl-case-fig,
.bl-post-toc,
.bl-sectors__panel,
.bl-sectors__tab[aria-selected="true"],
.bl-review {
  background-image: var(--bl-sheen);
}
/* The top edge catches the light: brighter than the sides, fading round the corners. */
.bl-svc-card,
.bl-benefits__item,
.bl-steps__item,
.bl-insights__card,
.bl-faq__item,
.bl-fit-note,
.bl-contents__doc,
.bl-case-nav__item,
.bl-case-fig,
.bl-post-toc,
.bl-sectors__panel,
.bl-review,
#what-you-can-expect .db-approach-list__item {
  border-top-color: var(--bl-edge-top);
}
:root { --bl-edge-top: color-mix(in srgb, var(--bl-line) 55%, #FFFFFF); }
:root[data-theme="dark"] { --bl-edge-top: color-mix(in srgb, var(--bl-line) 72%, #FFFFFF); }
/* Header: a lit lower edge under the frosted bar. */
.db-header {
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04), 0 8px 24px -16px rgba(0, 0, 0, 0.35);
}
:root:not([data-theme="dark"]) .db-header {
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.8), 0 8px 24px -18px rgba(10, 10, 11, 0.18);
}

/* ---------------------------------------------------------------
   Service heroes, split (2026-11-02, renderHero09 with 'concept')
   Copy and buttons on the left; the service's scene on a glass stage on the
   right, over a fading grid, with the tags floating round it. Phones: the
   stage sits under the copy and the tags stay in the column.
---------------------------------------------------------------- */
.db-hero-09--split {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 50% 60% at 78% 40%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 70% 50% at 20% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%);
}
.db-hero-09--split .db-hero-09__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  max-width: var(--bl-site, 1376px);
  margin: 0 auto;
  padding: 120px var(--bl-gutter, 16px) 48px;
}
.db-hero-09--split .db-hero-09__headline {
  align-items: flex-start;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
}
.db-hero-09--split .hero-09-headline__title .hero-09-headline {
  max-width: 16ch;
  margin: 0;
  background: linear-gradient(180deg, var(--t-bright) 55%, color-mix(in srgb, var(--t-bright) 62%, var(--accent)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}
.db-hero-09--split .hero-09-headline__caption h1 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.db-hero-09--split .hero-09-headline__caption h1::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--accent);
}
.db-hero-09--split .hero-09-headline__caption p {
  max-width: 54ch;
  margin: 4px 0 0;
}
.db-hero-09--split .hero-09-headline__tags { justify-content: flex-start; }
.hero-09-headline__actions {
  order: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

/* Stage */
.db-hero-09__stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: 40px 16px;
  isolation: isolate;
}
.db-hero-09__grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--t-bright) 7%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--t-bright) 7%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 75%);
}
.db-hero-09__glass {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 520px);
  min-height: 300px;
  padding: 28px;
  border: 1px solid var(--bl-line);
  border-top-color: var(--bl-edge-top, var(--bl-line));
  border-radius: 28px;
  background: color-mix(in srgb, var(--base-tint) 62%, transparent);
  background-image: var(--bl-sheen);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--bl-e2), 0 40px 80px -40px color-mix(in srgb, var(--accent) 45%, transparent);
  overflow: hidden;
}
.db-hero-09__glass::before {
  /* a soft light falling across the glass */
  content: "";
  position: absolute;
  inset: -40% -10% auto;
  height: 70%;
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  pointer-events: none;
}
.db-hero-09__glass .db-concept { position: relative; zoom: .8; }
.db-hero-09__float {
  position: absolute;
  z-index: 2;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--bl-line);
  border-top-color: var(--bl-edge-top, var(--bl-line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--base-tint) 75%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--bl-e2);
  font: 500 11px/1.2 var(--_font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--t-bright);
  animation: bl-hero-float 7s ease-in-out infinite;
}
.db-hero-09__float i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.db-hero-09__float--1 { top: 8%; left: 2%; }
.db-hero-09__float--2 { top: 46%; right: 0; animation-delay: -2.4s; }
.db-hero-09__float--3 { bottom: 6%; left: 10%; animation-delay: -4.8s; }
@keyframes bl-hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@media only screen and (min-width: 768px) {
  .db-hero-09--split .db-hero-09__wrap { padding: 140px var(--bl-gutter, 32px) 56px; }
  .db-hero-09__float { display: inline-flex; }
  .db-hero-09--split .hero-09-headline__tags { display: none; }
  .db-hero-09__stage { min-height: 420px; }
  .db-hero-09__glass .db-concept { zoom: .9; }
}
@media only screen and (min-width: 1100px) {
  .db-hero-09--split .db-hero-09__wrap {
    grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
    align-items: center;
    gap: 48px;
    min-height: min(820px, 100svh);
    padding: 120px var(--bl-gutter, 32px) 64px;
  }
  .db-hero-09--split .hero-09-headline__title .hero-09-headline { font-size: clamp(48px, 2rem + 2.6vw, 68px); }
  .db-hero-09__stage { min-height: 480px; padding: 48px 24px; }
}
@media only screen and (min-width: 1100px) and (max-height: 820px) {
  .db-hero-09--split .db-hero-09__wrap { padding-top: 104px; padding-bottom: 40px; }
  .db-hero-09__stage { min-height: 400px; }
  .db-hero-09__glass { min-height: 260px; }
  .db-hero-09__glass .db-concept { zoom: .78; }
}
@media (prefers-reduced-motion: reduce) {
  .db-hero-09__float { animation: none; }
}
.db-hero-09__glass--tall .db-concept { zoom: .62; }
@media only screen and (min-width: 768px) {
  .db-hero-09__glass--tall .db-concept { zoom: .66; }
}
@media only screen and (min-width: 1100px) and (max-height: 820px) {
  .db-hero-09__glass--tall .db-concept { zoom: .56; }
}

/* Tall scenes in the two-column promo sections (2026-11-02, svc_promo).
   The three-stage journey stacks into a very tall column beside the text,
   so from 1200px that section goes full width: title and text side by side,
   then the journey in one row underneath (as on the home page). The theme puts
   the two columns side by side from 992px (components.css), so this starts there. */
@media only screen and (min-width: 992px) {
  .db-features-promo:has(.db-concept--journey) .db-features-promo__item {
    flex: 0 0 100%;
    max-width: 100%;
    margin-left: 0;
  }
  .db-features-promo:has(.db-concept--journey) .row { flex-wrap: wrap; row-gap: 0; }
  .db-features-promo:has(.db-concept--journey) .db-features-promo__content {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
    align-items: start;
    margin-bottom: 32px;
    padding-bottom: 0;
  }
  .db-features-promo:has(.db-concept--journey) .db-features-promo__content h2 { margin: 0; }
  .db-features-promo:has(.db-concept--journey) .db-features-promo__content .rich-content { margin: 0; }
  .db-features-promo:has(.db-concept--journey) .db-features-promo__image .db-concept--journey {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
  }
}
/* Tablets: a row would be too cramped, so the stacked journey is kept narrow and smaller. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .db-features-promo__image .db-concept--journey { max-width: 520px; margin: 0 auto; zoom: .8; }
}
/* Phones: the stacked journey is drawn smaller. */
@media only screen and (max-width: 767px) {
  .db-features-promo__image .db-concept--journey { zoom: .82; }
}
.db-features-promo__image .db-concept--art-agent-loop { zoom: .8; }

/* Footer close (2026-11-02): "How we work" reads as a connected path, with a line
   through the step nodes and a glyph per step; the wordmark is drawn inline with a
   fill that fades downward, an accent edge and a glow behind it. */
.bl-footer__strip{position:relative}
.bl-footer__strip a{position:relative;transition:background .25s ease}
.bl-footer__strip a:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent)}
.bl-footer__step-icon{display:inline-grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border:1px solid var(--bl-line);border-radius:10px;color:var(--t-medium);
  background:linear-gradient(180deg,color-mix(in srgb,var(--t-bright) 6%,transparent),transparent);box-shadow:var(--bl-e1);transition:color .2s ease,border-color .2s ease,background .2s ease}
.bl-footer__strip a:hover .bl-footer__step-icon{color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 45%,var(--bl-line));background:color-mix(in srgb,var(--accent) 10%,transparent)}
.bl-footer__strip a:hover .bl-footer__step{color:var(--t-bright)}
@media only screen and (min-width:768px){
  /* the line runs along the strip's top edge; each step sits on a node */
  .bl-footer__strip::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--accent) 20%,color-mix(in srgb,var(--accent) 60%,var(--t-muted)) 80%,transparent);opacity:.7}
  .bl-footer__strip::after{content:"";position:absolute;top:-1px;left:0;width:18%;height:1px;pointer-events:none;
    background:linear-gradient(90deg,transparent,#fff,transparent);opacity:.8;animation:bl-strip-run 5s ease-in-out infinite}
  .bl-footer__strip a::before{content:"";position:absolute;top:-5px;left:0;width:9px;height:9px;border-radius:50%;
    background:var(--base);border:1px solid var(--accent);box-shadow:0 0 0 3px var(--base),0 0 12px color-mix(in srgb,var(--accent) 50%,transparent)}
  .bl-footer__strip a + a::before{left:20px}
  .bl-footer__strip a:hover::before{background:var(--accent)}
  .bl-footer__strip a{padding-top:26px;padding-bottom:26px}
}
@keyframes bl-strip-run{0%{left:0;opacity:0}15%{opacity:.8}85%{opacity:.8}100%{left:82%;opacity:0}}

.bl-footer__wordmark{position:relative;isolation:isolate}
.bl-footer__wordmark::before{content:"";position:absolute;left:10%;right:10%;top:20%;height:160%;z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%);filter:blur(20px)}
.bl-footer__wordmark .bl-wm-s1{stop-color:var(--t-bright);stop-opacity:.13}
.bl-footer__wordmark .bl-wm-s2{stop-color:var(--t-bright);stop-opacity:0}
.bl-footer__wordmark .bl-wm-e1{stop-color:var(--accent);stop-opacity:.05}
.bl-footer__wordmark .bl-wm-e2{stop-color:var(--accent);stop-opacity:.6}
.bl-footer__wordmark .bl-wm-fill{fill:url(#bl-wm-fill)}
.bl-footer__wordmark .bl-wm-edge{fill:none;stroke:url(#bl-wm-edge);stroke-width:.12;vector-effect:none}
@media (prefers-reduced-motion:reduce){
  .bl-footer__strip::after{animation:none;opacity:0}
}

/* The step glyph sits centred in its tile; the strip's arrow rules do not apply to it. */
.bl-footer__strip .bl-footer__step-icon svg,
.bl-footer__strip a:hover .bl-footer__step-icon svg{margin:0;transform:none;color:inherit}

/* One panel (2026-11-02): from 1024px the platform band and "How we work" share a
   single frame. "How we work" sits in the intro column and each step sits under
   the card column above it, laid out like the cards. */
@media (min-width:1024px){
  .bl-footer__platform{border-bottom:0;border-radius:20px 20px 0 0;box-shadow:none;padding-bottom:20px}
  .bl-footer__process{position:relative;isolation:isolate;margin-top:-40px;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px;align-items:start;
    padding:22px 28px 28px;border:1px solid var(--bl-line);border-top:0;border-radius:0 0 20px 20px;background:var(--base-tint)}
  .bl-footer__process::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
    background:linear-gradient(var(--bl-line) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,var(--bl-line) 1px,transparent 1px) 0 0/28px 28px;
    -webkit-mask-image:linear-gradient(80deg,#000 0%,transparent 45%);mask-image:linear-gradient(80deg,#000 0%,transparent 45%);opacity:.6}
  .bl-footer__process > .bl-footer__head{padding-top:22px}
  .bl-footer__strip{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border:0}
  .bl-footer__strip a,
  .bl-footer__strip a + a{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"icon num arrow" "step step step";align-items:center;align-content:start;gap:12px 12px;
    padding:22px 18px 16px;border:0;border-radius:0 0 14px 14px}
  .bl-footer__strip .bl-footer__step-icon{grid-area:icon}
  .bl-footer__strip .bl-footer__num{grid-area:num}
  .bl-footer__strip .bl-footer__step{grid-area:step;font-size:16px}
  .bl-footer__strip > a > svg{grid-area:arrow;margin:0}
  .bl-footer__strip a::before,
  .bl-footer__strip a + a::before{left:14px}
  .bl-footer__strip::before{background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 60%,var(--t-muted)) 80%,transparent)}
}

/* Footer links aligned to the panel (2026-11-02): contact sits under the newsletter
   with icon tiles like the step glyphs. From 1024px the link area uses the panel's
   own 4fr / 8fr split and inset, so the brand column lines up with the panel intro
   and Services, Company and Elsewhere sit over the three card columns. */
.bl-footer__contact{display:grid;gap:10px;width:100%;max-width:380px;padding-top:24px;border-top:1px solid var(--bl-line)}
.bl-footer__contact .bl-footer__head{margin-bottom:4px}
.bl-footer__contact > a,
.bl-footer__contact .bl-footer__address,
.bl-footer__contact .bl-footer__address > a{display:flex;align-items:center;gap:12px;line-height:1.45}
.bl-footer__contact .bl-footer__address > a{color:var(--t-medium)}
.bl-footer__contact-icon{display:inline-grid;place-items:center;flex:0 0 32px;width:32px;height:32px;border:1px solid var(--bl-line);border-radius:9px;color:var(--t-medium);
  background:linear-gradient(180deg,color-mix(in srgb,var(--t-bright) 6%,transparent),transparent);box-shadow:var(--bl-e1);transition:color .2s ease,border-color .2s ease,background .2s ease}
.bl-footer__contact a:hover .bl-footer__contact-icon{color:var(--accent-text);border-color:color-mix(in srgb,var(--accent) 45%,var(--bl-line));background:color-mix(in srgb,var(--accent) 10%,transparent)}
@media (min-width:1024px){
  .bl-footer__main{grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:24px;padding-inline:61px}
  .bl-footer__brand{grid-column:1}
  .bl-footer__cols{grid-column:2;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .bl-footer__cols .bl-footer__col{padding-inline:19px}
  .bl-footer__platform,.bl-footer__process{margin-inline:-29px}
}

/* Footer statement (2026-11-02): from 1024px the call-to-action band uses the same
   inset as the footer content, and its rule stops at the panel edges. "Built to
   scale." grows in word by word (assets/js/app.js), then a light passes through it. */
@media (min-width:1024px){
  .bl-footer__lead{padding-inline:61px;border-bottom:0;
    background:linear-gradient(var(--bl-line),var(--bl-line)) center bottom/calc(100% - 64px) 1px no-repeat}
}
.bl-footer__scale{display:inline-block}
.bl-footer__scale > span{display:inline-block;transform-origin:0 85%;
  background:linear-gradient(100deg,var(--t-muted) 0%,var(--t-muted) 40%,var(--t-bright) 50%,var(--t-muted) 60%,var(--t-muted) 100%) 100% 0/300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent !important;animation:bl-scale-sheen 7s ease-in-out 1.6s infinite}
.bl-footer__scale > span:nth-child(2){animation-delay:1.75s}
.bl-footer__scale > span:nth-child(3){animation-delay:1.9s}
.bl-footer__scale.is-armed > span{opacity:0;transform:translateY(.25em) scale(.72);filter:blur(6px);
  transition:opacity .7s ease,transform .9s cubic-bezier(.2,.9,.25,1.15),filter .7s ease}
.bl-footer__scale.is-armed > span:nth-child(2){transition-delay:.12s}
.bl-footer__scale.is-armed > span:nth-child(3){transition-delay:.24s}
.bl-footer__scale.is-in > span{opacity:1;transform:none;filter:none}
@keyframes bl-scale-sheen{0%{background-position:100% 0}35%,100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){
  .bl-footer__scale > span{animation:none;background-position:100% 0}
}

/* Footer call to action as a panel (2026-11-02): from 1024px the band is framed
   like the Bones panel below it, with the same grid and edges. A drawing that
   branches 1 > 2 > 4 > 8 fills the right side, and the actions sit on a glass bar. */
.bl-footer__net{display:none}
@media (min-width:1024px){
  .bl-footer__lead{position:relative;isolation:isolate;min-height:460px;padding:96px 61px 80px;align-items:flex-end;background:none}
  .bl-footer__lead::before{content:"";position:absolute;inset:40px 32px 32px;z-index:-2;border:1px solid var(--bl-line);border-radius:20px;pointer-events:none;
    background:
      radial-gradient(55% 85% at 85% 50%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),
      radial-gradient(40% 80% at 0% 0%,color-mix(in srgb,var(--t-bright) 4%,transparent),transparent 70%),
      var(--base-tint);
    box-shadow:var(--bl-e1)}
  .bl-footer__lead::after{content:"";position:absolute;inset:41px 33px 33px;z-index:-1;border-radius:19px;pointer-events:none;
    background:linear-gradient(var(--bl-line) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,var(--bl-line) 1px,transparent 1px) 0 0/28px 28px;
    -webkit-mask-image:linear-gradient(90deg,transparent 30%,#000 75%);mask-image:linear-gradient(90deg,transparent 30%,#000 75%);opacity:.55}
  .bl-footer__statement{position:relative}
  .bl-footer__net{display:block;position:absolute;z-index:-1;right:80px;top:76px;bottom:132px;width:min(48%,620px);height:auto;pointer-events:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%);mask-image:linear-gradient(90deg,transparent,#000 30%)}
  .bl-footer__lead-actions{position:relative;padding:8px 8px 8px 8px;border:1px solid var(--bl-line);border-radius:999px;
    background:color-mix(in srgb,var(--base-tint) 70%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--bl-e2)}
  .bl-footer__lead-actions .bl-footer__mail{margin-right:18px;border-bottom:0}
}
.bl-net__e{stroke:color-mix(in srgb,var(--t-muted) 70%,transparent);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:0}
.bl-net__n{fill:var(--base-tint);stroke:var(--accent);stroke-width:1.4;transform-box:fill-box;transform-origin:center}
.bl-net__n[style*="--d:0"]{fill:var(--accent)}
.bl-net__r{stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:.08 .92;stroke-dashoffset:1;opacity:0;
  animation:bl-net-run 3.2s linear infinite;animation-delay:calc(1.8s + var(--r) * 3.2s)}
.bl-footer__lead.is-armed .bl-net__e{stroke-dashoffset:1;transition:stroke-dashoffset .8s cubic-bezier(.3,.7,.3,1);transition-delay:calc(var(--d) * .22s)}
.bl-footer__lead.is-armed .bl-net__n{opacity:0;transform:scale(.3);transition:opacity .4s ease,transform .5s cubic-bezier(.2,.9,.25,1.3);transition-delay:calc(var(--d) * .22s + .15s)}
.bl-footer__lead.is-in .bl-net__e{stroke-dashoffset:0}
.bl-footer__lead.is-in .bl-net__n{opacity:1;transform:none}
@keyframes bl-net-run{0%{stroke-dashoffset:1;opacity:0}10%{opacity:1}90%{opacity:1}100%{stroke-dashoffset:.08;opacity:0}}
@media (prefers-reduced-motion:reduce){
  .bl-net__r{animation:none;opacity:0}
}

/* Closing band (2026-11-02): the call to action now sits above the footer, after
   the page content, so it carries the footer's link styles itself. */
.bl-cta-band{position:relative;padding-bottom:clamp(24px,4vw,56px);font-size:15px;color:var(--t-bright);overflow:hidden}
.bl-cta-band a{color:inherit;text-decoration:none;background:none !important;transition:color .2s ease}
.bl-cta-band a:hover{color:var(--accent-text)}
.bl-cta-band .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-cta-band .bl-footer__cta:hover{color:#fff;filter:brightness(1.08)}
.bl-cta-band .bl-footer__cta svg{transition:transform .2s ease}
.bl-cta-band .bl-footer__cta:hover svg{transform:translateX(3px)}
.bl-cta-band .bl-footer__lead{border-bottom:0}
.bl-cta-band + .bl-footer{margin-top:0}

/* Even spacing around the closing band (2026-11-02): the last page section already
   ends with the section gap, so the band adds nothing above its panel and the same
   gap below it, before the footer. */
.bl-cta-band{padding-bottom:var(--bl-gap)}
.bl-cta-band .bl-footer__lead{padding-top:0;padding-bottom:0}
@media (min-width:1024px){
  .bl-cta-band .bl-footer__lead{min-height:400px;padding:56px 61px 48px}
  .bl-cta-band .bl-footer__lead::before{inset:0 32px}
  .bl-cta-band .bl-footer__lead::after{inset:1px 33px}
  .bl-cta-band .bl-footer__net{top:36px;bottom:100px}
}

/* Article cards (2026-11-02): each card now says what the article covers (its
   description, three lines at most), shows the length as a five-step meter next
   to the read time, marks articles from the last 30 days as New, and ends in a
   ruled footer whose arrow fills on hover. Case cards keep their own markup. */
.bl-insights__body{gap:12px;padding:22px 24px 20px}
.bl-insights__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.bl-insights__meta time{position:relative;padding-left:12px}
.bl-insights__meta > span + time::before{content:"";position:absolute;left:0;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:currentColor;opacity:.6}
.bl-insights__meter{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.bl-insights__meter i{display:block;width:3px;border-radius:1px;background:var(--bl-line)}
.bl-insights__meter i:nth-child(1){height:5px}
.bl-insights__meter i:nth-child(2){height:7px}
.bl-insights__meter i:nth-child(3){height:9px}
.bl-insights__meter i:nth-child(4){height:11px}
.bl-insights__meter i:nth-child(5){height:13px}
.bl-insights__meter i.is-on{background:var(--accent)}
main h3.bl-insights__title{margin:0;transition:color .2s ease}
.bl-insights__desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:15px;line-height:1.55;color:var(--t-medium)}
.bl-insights__foot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:16px;border-top:1px solid var(--bl-line);font-size:15px;font-weight:500;color:var(--accent-text)}
.bl-insights__foot::before{content:"";position:absolute;left:0;top:-1px;width:0;height:1px;background:var(--accent);transition:width .45s cubic-bezier(.3,.7,.3,1)}
.bl-insights__arrow{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid var(--bl-line);border-radius:50%;color:var(--t-bright);background:var(--base-tint);box-shadow:var(--bl-e1);transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease}
.bl-insights__new{position:absolute;top:14px;right:14px;padding:5px 10px;border-radius:999px;background:var(--accent);color:#fff;font:500 11px/1.2 var(--_font-mono);letter-spacing:.08em;text-transform:uppercase;box-shadow:var(--bl-hl)}
.no-touch .bl-insights__card:hover .bl-insights__foot::before{width:100%}
.no-touch .bl-insights__card:hover .bl-insights__arrow{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateX(2px)}
.no-touch .bl-insights__card:hover h3.bl-insights__title{color:var(--accent-text)}
.bl-insights__card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .bl-insights__foot::before,.bl-insights__arrow{transition:none}
}

/* Article cards, interactive layer (2026-11-02, assets/js/app.js "Article Cards"):
   on a mouse or trackpad the card tilts slightly toward the pointer, a soft light
   follows it and the rim lights up beside it; the illustration gets a light sweep.
   Cards for articles this visitor has opened carry a "Read" mark. */
.bl-insights__card:has(.bl-insights__foot){position:relative;isolation:isolate}
.bl-insights__card:has(.bl-insights__foot)::before,
.bl-insights__card:has(.bl-insights__foot)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}
/* the light under the pointer */
.bl-insights__card:has(.bl-insights__foot)::after{
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent) 12%,transparent),transparent 65%)}
/* the rim beside the pointer */
.bl-insights__card:has(.bl-insights__foot)::before{padding:1px;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent) 85%,transparent),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* rotate and translate, not transform; the reveal animation (GSAP) writes all three
   inline, so the hover values need !important to win */
:has(> .bl-insights__card){perspective:1400px}
.bl-insights__card:has(.bl-insights__foot){transition:rotate .35s cubic-bezier(.2,.8,.2,1),translate .35s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,border-color .2s ease}
.no-touch .bl-insights__card:has(.bl-insights__foot):hover{transform-style:flat;
  rotate:var(--rax,0 0 1) var(--ang,0deg) !important;translate:0 -3px !important;
  transition:rotate .12s linear,translate .2s ease,box-shadow .2s ease,border-color .2s ease}
.no-touch .bl-insights__card:has(.bl-insights__foot):hover::before,
.no-touch .bl-insights__card:has(.bl-insights__foot):hover::after{opacity:1}
/* light sweep across the illustration */
.bl-insights__card:has(.bl-insights__foot) .bl-insights__media::after{content:"";position:absolute;left:0;right:0;top:-40%;height:40%;pointer-events:none;z-index:1;opacity:0;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 16%,transparent) 50%,transparent)}
.no-touch .bl-insights__card:has(.bl-insights__foot):hover .bl-insights__media::after{animation:bl-card-sweep 1.1s cubic-bezier(.4,0,.2,1) 1}
@keyframes bl-card-sweep{0%{top:-40%;opacity:0}15%{opacity:1}100%{top:100%;opacity:0}}
/* read mark */
.bl-insights__read{position:absolute;top:14px;right:14px;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 8px;border:1px solid var(--bl-line);border-radius:999px;
  background:color-mix(in srgb,var(--base-tint) 80%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--t-medium);font:500 11px/1.2 var(--_font-mono);letter-spacing:.08em;text-transform:uppercase}
.bl-insights__new + .bl-insights__read{top:48px}
.bl-insights__read::before{content:"";width:9px;height:5px;margin-top:-3px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}
.bl-insights__card.is-read .bl-insights__media{filter:saturate(.7)}
@media (prefers-reduced-motion:reduce){
  .no-touch .bl-insights__card:has(.bl-insights__foot):hover{rotate:none !important}
  .no-touch .bl-insights__card:has(.bl-insights__foot):hover .bl-insights__media::after{animation:none}
}

/* About page (2026-11-02): company facts as glass tiles under the hero, the
   story beside a three-step timeline, the two layers (services, product) as a
   pair of tiles, and the four working principles as numbered cards. */
.bl-about-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;margin:40px 0 0}
.bl-about-facts > div{display:grid;gap:4px;align-content:start;padding:18px;border:1px solid var(--bl-line);border-radius:16px;background:var(--base-tint);box-shadow:var(--bl-e1);background-image:var(--bl-sheen)}
.bl-about-facts dt{font:500 11px/1.3 var(--_font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t-muted)}
.bl-about-facts dd{margin:0;font:600 22px/1.2 var(--_font-accent);letter-spacing:-.02em;color:var(--t-bright)}
.bl-about-facts dd.bl-about-facts__note{font:400 13px/1.45 var(--_font-default);letter-spacing:0;color:var(--t-medium)}
@media (min-width:992px){.bl-about-facts{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:56px}}

.bl-about-story{display:grid;gap:40px}
.bl-about-story h2{margin:6px 0 18px}
.bl-about-story .rich-content p{font-size:18px;line-height:1.6;color:var(--t-medium)}
.bl-about-layers{display:grid;gap:12px;margin-top:24px}
.bl-about-layers__item{display:grid;gap:6px;padding:18px 20px;border:1px solid var(--bl-line);border-radius:14px;background:var(--base-tint);box-shadow:var(--bl-e1);color:var(--t-medium);font-size:15px;line-height:1.5}
.bl-about-layers__k{font:500 11px/1.3 var(--_font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
@media (min-width:768px){.bl-about-layers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.bl-about-story{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}}

.bl-about-time{position:relative;display:grid;gap:14px;margin:0;padding:28px;list-style:none;border:1px solid var(--bl-line);border-radius:20px;
  background:radial-gradient(70% 60% at 100% 100%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),var(--base-tint);box-shadow:var(--bl-e1)}
.bl-about-time::before{content:"";position:absolute;left:39px;top:46px;bottom:46px;width:1px;background:linear-gradient(var(--t-muted),var(--accent));opacity:.5}
.bl-about-time li{position:relative;display:grid;gap:2px;padding-left:40px;color:var(--t-medium);font-size:14px;line-height:1.5}
.bl-about-time li::before{content:"";position:absolute;left:6px;top:5px;width:11px;height:11px;border-radius:50%;border:1px solid var(--t-muted);background:var(--base-tint)}
.bl-about-time li.is-now::before{background:var(--t-bright);border-color:var(--t-bright)}
.bl-about-time li.is-next::before{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 30%,var(--base-tint));box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 15%,transparent)}
.bl-about-time strong{font:600 18px/1.3 var(--_font-accent);color:var(--t-bright)}
.bl-about-time__when{font:500 11px/1.3 var(--_font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t-muted)}
.bl-about-time li + li{padding-top:14px;border-top:1px dashed var(--bl-line)}
.bl-about-time li + li::before{top:19px}

.bl-about-ways{display:grid;gap:16px;margin:0;padding:0;list-style:none}
.bl-about-ways__item{position:relative;display:grid;gap:10px;align-content:start;padding:24px;border:1px solid var(--bl-line);border-radius:20px;background:var(--base-tint);box-shadow:var(--bl-e1);background-image:var(--bl-sheen);overflow:hidden;transition:border-color .2s ease,translate .2s ease}
.bl-about-ways__icon{display:inline-grid;place-items:center;width:44px;height:44px;border:1px solid var(--bl-line);border-radius:12px;color:var(--accent-text);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent);box-shadow:var(--bl-e1)}
.bl-about-ways__n{position:absolute;top:18px;right:22px;font:600 56px/1 var(--_font-accent);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--t-muted) 45%,transparent)}
main .bl-about-ways__item h3{margin:6px 0 0;font:600 20px/1.3 var(--_font-accent);letter-spacing:-.02em;color:var(--t-bright)}
.bl-about-ways__item p{margin:0;font-size:15px;line-height:1.55;color:var(--t-medium)}
.no-touch .bl-about-ways__item:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--bl-line))}
.no-touch .bl-about-ways__item:hover .bl-about-ways__n{-webkit-text-stroke-color:color-mix(in srgb,var(--accent) 60%,transparent)}
@media (min-width:768px){.bl-about-ways{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.bl-about-ways{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Cases page (2026-11-02): the hero counts are tiles that jump to the archive
   with that filter on (they share the .bl-about-facts look), selected work is a
   bento with the first case large, and the archive is a grid of numbered cards. */
.bl-cases-stats{list-style:none;padding:0}
.bl-about-facts.bl-cases-stats > li{display:block;padding:0;border:0;background:none;box-shadow:none}
.bl-cases-stats a{display:grid;gap:4px;height:100%;padding:18px;border:1px solid var(--bl-line);border-radius:16px;background:var(--base-tint);background-image:var(--bl-sheen);box-shadow:var(--bl-e1);color:var(--t-bright);text-decoration:none;transition:border-color .2s ease,translate .2s ease}
.bl-cases-stats__n{font:600 34px/1 var(--_font-accent);letter-spacing:-.03em;color:var(--t-bright)}
.bl-cases-stats__k{display:flex;align-items:center;justify-content:space-between;gap:8px;font:500 11px/1.3 var(--_font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t-muted)}
.bl-cases-stats__k::after{content:"\2193";font-family:var(--_font-default);color:var(--accent-text);opacity:.6;transition:opacity .2s ease,translate .2s ease}
.no-touch .bl-cases-stats a:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--bl-line));translate:0 -2px}
.no-touch .bl-cases-stats a:hover .bl-cases-stats__k::after{opacity:1;translate:0 2px}

@media (min-width:1024px){
  .bl-insights--bento{grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:auto auto}
  .bl-insights--bento > .bl-insights__card:first-child{grid-row:span 2}
  .bl-insights--bento > .bl-insights__card:first-child .bl-insights__media{aspect-ratio:auto;flex:1 1 auto;min-height:340px}
  .bl-insights--bento > .bl-insights__card:first-child .bl-insights__title{font-size:28px}
  .bl-insights--bento > .bl-insights__card:not(:first-child){flex-direction:row}
  .bl-insights--bento > .bl-insights__card:not(:first-child) .bl-insights__media{flex:0 0 42%;aspect-ratio:auto;border-bottom:0;border-right:1px solid var(--bl-line)}
  .bl-insights--bento > .bl-insights__card:not(:first-child) .bl-insights__media .bl-case-art{padding-top:36px}
  .bl-insights--bento > .bl-insights__card:not(:first-child) .bl-cases__summary{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:15px}
}

.bl-cases__count{margin:-8px 0 16px;font:500 12px/1.4 var(--_font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--t-muted)}
.bl-cases--grid{gap:16px}
.bl-cases--grid .bl-cases__item{display:flex}
.bl-cases--grid .bl-cases__item[hidden]{display:none}
.bl-cases--grid .bl-cases__row{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;padding:0;border-radius:20px;overflow:hidden}
.bl-cases--grid .bl-cases__thumb{position:relative;width:100%;aspect-ratio:16/9;border:0;border-bottom:1px solid var(--bl-line);border-radius:0;background:var(--base);container-type:inline-size}
.bl-cases--grid .bl-cases__thumb .bl-case-art .db-concept--tile{width:84%}
.bl-cases--grid .bl-cases__thumb .bl-case-art .db-concept__scene{font-size:2.6cqw;padding:.6em .3em}
.bl-cases__n{position:absolute;left:14px;top:12px;font:500 11px/1 var(--_font-mono);letter-spacing:.08em;color:var(--t-muted)}
.bl-cases--grid .bl-cases__main{flex:1 1 auto;gap:8px;padding:18px 20px 0}
.bl-cases--grid main h3.bl-cases__title,main .bl-cases--grid h3.bl-cases__title{font-size:19px}
.bl-cases--grid .bl-cases__tags{display:flex}
.bl-cases--grid .bl-cases__side{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:16px;padding:14px 64px 16px 20px;border-top:1px dashed var(--bl-line)}
.bl-cases--grid .bl-cases__go{position:absolute;right:16px;bottom:10px;display:inline-flex;width:36px;height:36px}
.no-touch .bl-cases--grid .bl-cases__row:hover .bl-case-art .db-concept{transform:scale(1.04);transition:transform .4s ease}
@media (min-width:768px){.bl-cases--grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.bl-cases--grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}}
/* Bones page (2026-11-02): one-source flow, and the roadmap as a rail with
   status dots; solid for what exists, dashed for what is planned. */
/* "How it fits together" (2026-11-02): tabs pick an organisation; each panel is the
   content types -> Bones core -> outputs pipeline, then a three-part story underneath.
   From 1024px three columns on a shared 5-row grid, so every connector meets its row;
   a runner dot travels each connector in turn. Phones stack the three with a spine. */
.bl-bones-how{display:grid;justify-items:center}
.bl-bones-how__tabs{display:inline-flex;gap:4px;margin:0 auto 28px;padding:4px;border:1px solid var(--bl-line);border-radius:999px;background:var(--base-tint)}
.bl-bones-how__tabs button{padding:9px 18px;border:0;border-radius:999px;background:none;color:var(--t-medium);font:500 14px/1 var(--_font-default);cursor:pointer;transition:background .2s,color .2s}
.bl-bones-how__tabs button[aria-selected="true"]{background:var(--accent);color:#fff}
.bl-bones-how__tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bl-bones-how__panel{width:100%}
.bl-bones-how__change{margin:0 0 24px;text-align:center;font:600 20px/1.35 var(--_font-accent);color:var(--t-bright)}
.bl-bones-how__change span{margin-right:6px;padding:3px 9px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:999px;font:500 11px/1.3 var(--_font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);vertical-align:3px}
.bl-bones-how__story{display:grid;gap:12px;margin:28px 0 0}
.bl-bones-how__story div{padding:18px 20px;border:1px solid var(--bl-line);border-radius:16px;background:var(--base-tint)}
.bl-bones-how__story dt{margin:0 0 6px;font:500 11px/1.4 var(--_font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
.bl-bones-how__story dd{margin:0;font-size:15px;line-height:1.55;color:var(--t-bright)}
@media (min-width:768px){.bl-bones-how__story{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bl-bones-how__note{margin:18px 0 0;font-size:13.5px;color:var(--t-muted);text-align:center}

.bl-bones-pipe{position:relative;display:grid;gap:20px}
.bl-bones-pipe__k{margin:0 0 12px;font:500 11px/1.4 var(--_font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t-muted)}
.bl-bones-pipe__col ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.bl-bones-pipe__col li{position:relative;display:grid;gap:3px;padding:12px 16px;border:1px solid var(--bl-line);border-radius:12px;background:var(--base-tint);box-shadow:var(--bl-e1)}
.bl-bones-pipe__col li.is-hot{border-color:color-mix(in srgb,var(--accent) 60%,var(--bl-line));box-shadow:var(--bl-e1),0 0 24px -10px var(--accent)}
.bl-bones-pipe__col b{font:600 15px/1.3 var(--_font-accent);color:var(--t-bright)}
.bl-bones-pipe__col span{font-size:13px;color:var(--t-medium)}
.bl-bones-pipe__col code{font:400 12px/1.4 var(--_font-mono);color:var(--t-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-bones-pipe__col--out code{color:var(--accent-text)}
.bl-bones-pipe__core{position:relative;display:grid;gap:14px;align-content:center;padding:24px;border:1px solid color-mix(in srgb,var(--accent) 55%,var(--bl-line));border-radius:20px;
  background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%),var(--base-tint);box-shadow:var(--bl-e2),0 0 60px -20px color-mix(in srgb,var(--accent) 60%,transparent)}
.bl-bones-pipe__badge{justify-self:start;padding:6px 12px;border-radius:999px;background:var(--accent);color:#fff;font:600 13px/1 var(--_font-accent);letter-spacing:.02em}
.bl-bones-pipe__core ol{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.bl-bones-pipe__core li{display:flex;gap:12px;align-items:baseline;padding-top:8px;border-top:1px dashed var(--bl-line)}
.bl-bones-pipe__core li > span{font:500 11px/1 var(--_font-mono);color:var(--accent-text)}
.bl-bones-pipe__core li p{margin:0;font-size:15px;line-height:1.45;color:var(--t-bright)}
.bl-bones-pipe__core li em{display:block;margin-top:4px;font:500 10.5px/1.3 var(--_font-mono);font-style:normal;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-text)}
.bl-bones-pipe__pulse{position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--accent);opacity:0;animation:bl-pipe-pulse 3s ease-out infinite;pointer-events:none}
@keyframes bl-pipe-pulse{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.04)}}
.bl-bones-pipe__graph{width:100%;max-width:220px;height:auto;justify-self:center}
.bl-bones-pipe__graph path{fill:none;stroke:color-mix(in srgb,var(--accent) 55%,transparent);stroke-width:1;stroke-dasharray:3 4;animation:bl-graph-flow 1.6s linear infinite}
.bl-bones-pipe__graph circle{fill:var(--base-tint);stroke:var(--accent);stroke-width:1.2}
.bl-bones-pipe__graph circle.is-hub{fill:var(--accent);filter:drop-shadow(0 0 8px var(--accent))}
@keyframes bl-graph-flow{to{stroke-dashoffset:-14}}
@media (max-width:1023px){
  .bl-bones-pipe::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:linear-gradient(transparent,var(--accent) 20%,var(--accent) 80%,transparent);opacity:.4}
  .bl-bones-pipe > *{position:relative}
  .bl-bones-pipe__col--in ul,.bl-bones-pipe__col--out ul{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media (min-width:1024px){
  .bl-bones-pipe{grid-template-columns:minmax(0,1fr) minmax(0,.95fr) minmax(0,1fr);column-gap:72px;align-items:stretch}
  .bl-bones-pipe__col{display:grid;grid-template-rows:auto 1fr}
  .bl-bones-pipe__col ul{grid-template-rows:repeat(5,1fr)}
  .bl-bones-pipe__col--out ul{grid-template-rows:none;align-content:space-evenly}
  .bl-bones-pipe__core{margin-top:29px}
  .bl-bones-pipe__col li::after{content:"";position:absolute;top:50%;width:72px;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 25%,transparent),var(--accent))}
  .bl-bones-pipe__col--in li::after{left:100%}
  .bl-bones-pipe__col--out li::after{right:100%;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 25%,transparent))}
  .bl-bones-pipe__col li::before{content:"";position:absolute;top:calc(50% - 3px);width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);opacity:0;z-index:1;
    animation:bl-pipe-in 5s linear infinite;animation-delay:calc(var(--i) * 1s)}
  .bl-bones-pipe__col--in li::before{left:100%}
  .bl-bones-pipe__col--out li::before{right:100%;animation-name:bl-pipe-out;animation-delay:calc(var(--i) * 1s + .5s)}
}
@keyframes bl-pipe-in{0%{transform:translateX(0);opacity:0}3%{opacity:1}17%{opacity:1}20%{transform:translateX(65px);opacity:0}100%{opacity:0}}
@keyframes bl-pipe-out{0%{transform:translateX(-65px);opacity:0}3%{opacity:1}17%{opacity:1}20%{transform:translateX(0);opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.bl-bones-pipe__col li::before,.bl-bones-pipe__pulse{animation:none;display:none}.bl-bones-pipe__graph path{animation:none}}

.bl-bones-road{display:grid;gap:40px}
.bl-bones-road__intro h2{margin:6px 0 14px}
.bl-bones-road__lead{margin:0 0 20px;font-size:18px;line-height:1.55;color:var(--t-medium)}
.bl-bones-road__legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 20px;padding:0;list-style:none;font-size:13px;color:var(--t-medium)}
.bl-bones-road__legend li{display:inline-flex;align-items:center;gap:8px}
.bl-bones-road__legend li::before,.bl-bones-road__dot{content:"";flex:none;width:11px;height:11px;border-radius:50%;border:1px solid var(--t-muted);background:var(--base)}
.bl-bones-road__note{margin:0;padding:14px 16px;border:1px dashed var(--bl-line);border-radius:12px;font-size:13.5px;line-height:1.5;color:var(--t-medium)}
.bl-bones-road__list{position:relative;display:grid;gap:12px;margin:0;padding:0 0 0 34px;list-style:none}
/* rail drawn per item, from its dot to the next: solid up to Bones 9, dashed after */
.bl-bones-road__item:not(:last-child)::after{content:"";position:absolute;left:-29px;top:33px;bottom:-34px;width:1px;background:var(--t-muted);opacity:.6}
.bl-bones-road__item.is-dev::after{background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 30%,transparent));opacity:1}
.bl-bones-road__item.is-planned::after,.bl-bones-road__item.is-exploring::after{background:repeating-linear-gradient(var(--accent) 0 4px,transparent 4px 9px);opacity:.5}
.bl-bones-road__item{position:relative;display:grid;gap:4px;padding:18px 20px;border:1px solid var(--bl-line);border-radius:16px;background:var(--base-tint);box-shadow:var(--bl-e1)}
.bl-bones-road__dot{position:absolute;left:-34px;top:22px}
.bl-bones-road__when em{margin-left:6px;padding:2px 7px;border:1px solid var(--bl-line);border-radius:999px;font-style:normal;color:var(--t-medium)}
main .bl-bones-road__item h3{margin:2px 0 0;font:600 19px/1.3 var(--_font-accent);letter-spacing:-.02em;color:var(--t-bright)}
.bl-bones-road__item p{margin:0;font-size:15px;line-height:1.55;color:var(--t-medium)}
/* status: done = filled grey, now = filled bright with a pulse, dev = accent,
   planned = hollow accent ring, exploring = dashed ring */
.bl-bones-road__item.is-done .bl-bones-road__dot,.bl-bones-road__legend .is-done::before{background:var(--t-muted);border-color:var(--t-muted)}
.bl-bones-road__item.is-now .bl-bones-road__dot,.bl-bones-road__legend .is-now::before{background:var(--t-bright);border-color:var(--t-bright)}
.bl-bones-road__item.is-now .bl-bones-road__dot{animation:bl-road-pulse 2s ease-out infinite}
.bl-bones-road__item.is-dev .bl-bones-road__dot,.bl-bones-road__legend .is-dev::before{background:var(--accent);border-color:var(--accent)}
.bl-bones-road__item.is-planned .bl-bones-road__dot,.bl-bones-road__legend .is-planned::before{border-color:var(--accent);background:var(--base)}
.bl-bones-road__item.is-exploring .bl-bones-road__dot,.bl-bones-road__legend .is-exploring::before{border:1px dashed var(--accent);background:var(--base)}
@keyframes bl-road-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--t-bright) 45%,transparent)}100%{box-shadow:0 0 0 10px transparent}}
@media (prefers-reduced-motion:reduce){.bl-bones-road__item.is-now .bl-bones-road__dot{animation:none}}
.bl-bones-road__item.is-now{border-color:color-mix(in srgb,var(--t-bright) 30%,var(--bl-line));box-shadow:var(--bl-e2)}
.bl-bones-road__item.is-dev{border-color:color-mix(in srgb,var(--accent) 45%,var(--bl-line));background:radial-gradient(80% 80% at 100% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%),var(--base-tint)}
.bl-bones-road__item.is-planned,.bl-bones-road__item.is-exploring{background:transparent;box-shadow:none;border-style:dashed;border-color:color-mix(in srgb,var(--t-muted) 40%,transparent)}
.bl-bones-road__here{border-color:var(--t-bright)!important;color:var(--t-bright)!important}
.bl-bones-road__item.is-dev .bl-bones-road__when em{border-color:color-mix(in srgb,var(--accent) 50%,transparent);color:var(--accent-text)}
@media (min-width:1024px){
  .bl-bones-road{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start}
  .bl-bones-road__intro{position:sticky;top:calc(var(--db-header-offset,72px) + 32px)}
}

/* Bones page, "What Bones is" (2026-11-02): text beside a grid of Bones 9
   capabilities, each with a status chip (in development / planned). */
.bl-bones-what{display:grid;gap:40px}
.bl-bones-what h2{margin:6px 0 18px}
.bl-bones-what .rich-content p{font-size:18px;line-height:1.6;color:var(--t-medium)}
.bl-bones-caps{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.bl-bones-caps__item{display:grid;gap:8px;align-content:start;padding:22px;border:1px solid var(--bl-line);border-radius:18px;background:var(--base-tint);background-image:var(--bl-sheen);box-shadow:var(--bl-e1)}
.bl-bones-caps__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.bl-bones-caps__st{padding:3px 9px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:999px;font:500 11px/1.3 var(--_font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.bl-bones-caps__item.is-planned{background:transparent;box-shadow:none;border-style:dashed;border-color:color-mix(in srgb,var(--t-muted) 40%,transparent)}
.bl-bones-caps__item.is-planned .bl-bones-caps__st{border-style:dashed;border-color:var(--bl-line);color:var(--t-medium)}
main .bl-bones-caps__item h3{margin:0;font:600 19px/1.3 var(--_font-accent);letter-spacing:-.02em;color:var(--t-bright)}
.bl-bones-caps__item p{margin:0;font-size:15px;line-height:1.55;color:var(--t-medium)}
@media (min-width:768px){.bl-bones-caps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){
  .bl-bones-what{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:64px;align-items:start}
  .bl-bones-what__text{position:sticky;top:calc(var(--db-header-offset,72px) + 32px)}
}

/* Structural Strategy page (2026-11-02): without/with comparison, the two
   packages as cards, the Blueprint contents as a document, and a stepper. */
.bl-ss-compare{display:grid;gap:16px;align-items:stretch}
.bl-ss-compare__col{padding:26px;border:1px solid var(--bl-line);border-radius:20px;background:var(--base-tint);box-shadow:var(--bl-e1)}
.bl-ss-compare__k{margin:0 0 14px;font:500 11px/1.4 var(--_font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--t-muted)}
.bl-ss-compare__col ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.bl-ss-compare__col li{position:relative;padding-left:30px;font-size:16px;line-height:1.5;color:var(--t-medium)}
.bl-ss-compare__col li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;border:1px solid var(--bl-line)}
.bl-ss-compare__col.is-without li::after{content:"";position:absolute;left:5px;top:11.5px;width:8px;height:1px;background:var(--t-muted)}
.bl-ss-compare__col.is-with{border-color:color-mix(in srgb,var(--accent) 45%,var(--bl-line));background:radial-gradient(80% 60% at 100% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 70%),var(--base-tint)}
.bl-ss-compare__col.is-with .bl-ss-compare__k{color:var(--accent-text)}
.bl-ss-compare__col.is-with li{color:var(--t-bright)}
.bl-ss-compare__col.is-with li::before{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent)}
.bl-ss-compare__col.is-with li::after{content:"";position:absolute;left:6.5px;top:7px;width:4px;height:8px;border:solid var(--accent);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.bl-ss-compare__arrow{display:grid;place-items:center;color:var(--accent-text);transform:rotate(90deg)}
@media (min-width:992px){.bl-ss-compare{grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr)}.bl-ss-compare__arrow{transform:none}}

.bl-ss-packs{display:grid;gap:20px}
.bl-ss-pack{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px;border:1px solid var(--bl-line);border-radius:22px;background:var(--base-tint);background-image:var(--bl-sheen);box-shadow:var(--bl-e1)}
.bl-ss-pack.is-main{border-color:color-mix(in srgb,var(--accent) 55%,var(--bl-line));box-shadow:var(--bl-e2),0 0 60px -30px color-mix(in srgb,var(--accent) 70%,transparent)}
.bl-ss-pack__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
main .bl-ss-pack h3{margin:0;font:600 22px/1.25 var(--_font-accent);letter-spacing:-.02em;color:var(--t-bright)}
.bl-ss-pack__time{padding:4px 10px;border:1px solid var(--bl-line);border-radius:999px;font:500 12px/1.3 var(--_font-mono);color:var(--t-medium);white-space:nowrap}
.bl-ss-pack__price{display:flex;align-items:baseline;gap:8px;margin:0;font:600 44px/1 var(--_font-accent);letter-spacing:-.03em;color:var(--t-bright)}
.bl-ss-pack__price small{font:500 12px/1 var(--_font-mono);letter-spacing:.04em;color:var(--t-muted)}
.bl-ss-pack__text{margin:0;font-size:16px;line-height:1.5;color:var(--t-medium)}
.bl-ss-pack__gets{display:grid;gap:10px;margin:4px 0 0;padding:16px 0 0;border-top:1px dashed var(--bl-line);list-style:none}
.bl-ss-pack__gets li{position:relative;padding-left:24px;font-size:15px;line-height:1.45;color:var(--t-bright)}
.bl-ss-pack__gets li::before{content:"";position:absolute;left:4px;top:4px;width:5px;height:10px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.bl-ss-pack__note{margin:0;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--accent) 10%,transparent);font-size:13.5px;color:var(--t-bright)}
.bl-ss-pack__cta{margin-top:auto;align-self:flex-start}
.bl-ss-packs__more{margin:20px 0 0;text-align:center;font-size:15px}
@media (min-width:768px){.bl-ss-packs{grid-template-columns:repeat(2,minmax(0,1fr))}}

.bl-ss-doc-wrap{display:grid;gap:36px}
.bl-ss-doc-wrap h2{margin:6px 0 16px}
.bl-ss-doc-wrap__lead{margin:0;font-size:18px;line-height:1.6;color:var(--t-medium)}
.bl-ss-doc{border:1px solid var(--bl-line);border-radius:18px;background:var(--base-tint);box-shadow:var(--bl-e2);overflow:hidden}
.bl-ss-doc__bar{display:flex;align-items:center;gap:6px;padding:12px 18px;border-bottom:1px solid var(--bl-line);background:var(--base)}
.bl-ss-doc__bar span{width:9px;height:9px;border-radius:50%;background:var(--bl-line)}
.bl-ss-doc__bar b{margin-left:10px;font:500 12px/1 var(--_font-mono);color:var(--t-bright)}
.bl-ss-doc__bar em{margin-left:auto;font:500 11px/1 var(--_font-mono);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--t-muted)}
.bl-ss-doc__list{display:grid;margin:0;padding:6px 22px;list-style:none}
.bl-ss-doc__list li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding:16px 0;border-top:1px dashed var(--bl-line)}
.bl-ss-doc__list li:first-child{border-top:0}
.bl-ss-doc__n{font:500 12px/1.9 var(--_font-mono);color:var(--accent-text)}
main .bl-ss-doc__list h3{margin:0 0 4px;font:600 17px/1.35 var(--_font-accent);color:var(--t-bright)}
.bl-ss-doc__list p{margin:0;font-size:14.5px;line-height:1.55;color:var(--t-medium)}
@media (min-width:768px){.bl-ss-doc__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}.bl-ss-doc__list li:nth-child(2){border-top:0}}
@media (min-width:1200px){
  .bl-ss-doc-wrap{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start}
  .bl-ss-doc-wrap__intro{position:sticky;top:calc(var(--db-header-offset,72px) + 32px)}
}

.bl-ss-steps{position:relative;display:grid;gap:14px;margin:0;padding:0;list-style:none}
.bl-ss-steps__item,.bl-ss-steps__end{position:relative;display:grid;gap:6px;align-content:start;padding:22px 20px;border:1px solid var(--bl-line);border-radius:18px;background:var(--base-tint);box-shadow:var(--bl-e1)}
.bl-ss-steps__end{border-color:color-mix(in srgb,var(--accent) 55%,var(--bl-line));background:radial-gradient(80% 60% at 50% 0%,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%),var(--base-tint)}
.bl-ss-steps__n{display:grid;place-items:center;width:34px;height:34px;margin-bottom:8px;border:1px solid var(--accent);border-radius:50%;background:var(--base);font:500 13px/1 var(--_font-mono);color:var(--accent-text);position:relative;z-index:1}
.bl-ss-steps__end .bl-ss-steps__n{background:var(--accent);color:#fff}
main .bl-ss-steps h3{margin:0;font:600 17px/1.3 var(--_font-accent);color:var(--t-bright)}
.bl-ss-steps p{margin:0;font-size:14px;line-height:1.5;color:var(--t-medium)}
@media (min-width:768px){.bl-ss-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1200px){
  .bl-ss-steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px}
  .bl-ss-steps::before{content:"";position:absolute;left:36px;right:36px;top:39px;height:1px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 40%,var(--bl-line)));opacity:.6}
}

/* Bones Implementation page (2026-11-02): intro beside a layer stack, and the
   Blueprint -> Build -> Care price path. Deliverables and steps reuse .bl-ss-*. */
.bl-pe-intro{display:grid;gap:40px;align-items:center}
.bl-pe-intro h2{margin:6px 0 18px}
.bl-pe-intro .rich-content p{font-size:18px;line-height:1.6;color:var(--t-medium)}
.bl-pe-stack{display:grid;gap:10px;perspective:900px}
.bl-pe-stack__layer{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:18px 22px;border:1px solid var(--bl-line);border-radius:14px;background:var(--base-tint);box-shadow:var(--bl-e1);
  transform:translateX(calc(var(--l) * 14px));transition:transform .3s ease,border-color .3s ease}
.bl-pe-stack__layer b{font:600 16px/1.3 var(--_font-accent);color:var(--t-bright)}
.bl-pe-stack__layer span{font:400 12.5px/1.4 var(--_font-mono);color:var(--t-muted);text-align:right}
.bl-pe-stack__layer.is-base{border-color:color-mix(in srgb,var(--accent) 60%,var(--bl-line));background:radial-gradient(90% 120% at 0% 50%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),var(--base-tint);box-shadow:var(--bl-e2),0 0 40px -20px var(--accent)}
.bl-pe-stack__layer.is-base span{color:var(--accent-text)}
.no-touch .bl-pe-stack:hover .bl-pe-stack__layer{transform:translateX(0)}
.no-touch .bl-pe-stack__layer:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--bl-line))}
.bl-pe-stack__note{margin:6px 0 0;font-size:13.5px;color:var(--t-medium)}
@media (max-width:575px){.bl-pe-stack__layer{flex-direction:column;gap:2px;transform:none}.bl-pe-stack__layer span{text-align:left}}
@media (min-width:1024px){.bl-pe-intro{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px}}

.bl-pe-path{display:grid;gap:16px;margin:0;padding:0;list-style:none;counter-reset:none}
.bl-pe-path__item{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px;border:1px solid var(--bl-line);border-radius:22px;background:var(--base-tint);background-image:var(--bl-sheen);box-shadow:var(--bl-e1)}
.bl-pe-path__item.is-main{border-color:color-mix(in srgb,var(--accent) 55%,var(--bl-line));box-shadow:var(--bl-e2),0 0 60px -30px color-mix(in srgb,var(--accent) 70%,transparent)}
.bl-pe-path__k{font:500 11px/1.4 var(--_font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text)}
main .bl-pe-path__item h3{margin:0;font:600 21px/1.25 var(--_font-accent);letter-spacing:-.02em;color:var(--t-bright)}
.bl-pe-path__price{display:flex;align-items:baseline;gap:6px;margin:4px 0 0;font:600 40px/1 var(--_font-accent);letter-spacing:-.03em;color:var(--t-bright)}
.bl-pe-path__price small{font:500 12px/1 var(--_font-mono);letter-spacing:.04em;color:var(--t-muted)}
.bl-pe-path__meta{margin:0;font-size:14px;line-height:1.5;color:var(--t-medium)}
.bl-pe-path__item ul{display:grid;gap:8px;margin:6px 0 0;padding:14px 0 0;border-top:1px dashed var(--bl-line);list-style:none}
.bl-pe-path__item ul li{position:relative;padding-left:22px;font-size:15px;color:var(--t-bright)}
.bl-pe-path__item ul li::before{content:"";position:absolute;left:4px;top:4px;width:5px;height:10px;border:solid var(--accent);border-width:0 2px 2px 0;transform:rotate(45deg)}
.bl-pe-path__item > a:last-child{margin-top:auto;align-self:flex-start;font-size:15px}
@media (min-width:992px){
  .bl-pe-path{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:stretch}
  .bl-pe-path__item:not(:last-child)::after{content:"";position:absolute;top:50%;right:-22px;width:16px;height:16px;border:solid var(--accent);border-width:2px 2px 0 0;transform:translateY(-50%) rotate(45deg) scale(.6);opacity:.8}
}

/* ---------- skip link (WCAG 2.4.1): off-screen until it takes keyboard focus ---------- */
.skip-to-content {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--accent);
  color: #FFFFFF;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
  transform: none;
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* Mobile menu group toggle (Company): a focusable role="button", so it needs a visible focus ring (WCAG 2.4.7). */
.main-menu__toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 8px;
}
/* Home "Three steps" scenes (2026-11-03): a full-bleed screen that fills the whole
   illustration band and scales its text to the band's width and height. */
#how-we-work .bl-svc-card__visual:has(.cx-step) { display: block; padding: 0; }
#how-we-work .bl-svc-card__visual .db-concept[class*="db-concept--step-"] {
  zoom: 1;
  width: 100%;
  max-width: none;
  height: 100%;
  container-type: size;
}
#how-we-work .db-concept[class*="db-concept--step-"] .db-concept__scene {
  height: 100%;
  padding: 0;
  font-size: clamp(9px, min(3.3cqw, 6.2cqh), 17px);
}
/* Home Bones explainer (2026-11-03): five benefits as a scroll timeline.
   From 992px: list left, one sticky illustration right that follows the step
   reached ([data-gains] in assets/js/app.js). Below 992px: each step carries its
   own illustration. */
.bl-gtl { display: grid; gap: 32px; max-width: 1160px; margin: 0 auto; }
.bl-gtl__stage { display: none; }
.bl-gtl .db-res-list__descr p { margin: 10px 0 0; max-width: 52ch; color: var(--t-medium); line-height: 1.55; }
.bl-gtl .db-res-list__source { margin: 4px 0 0; color: var(--t-muted); }
.bl-gtl__inline,
.bl-gtl__frame {
  border: 1px solid var(--bl-line);
  border-radius: 20px;
  background:
    radial-gradient(ellipse 70% 80% at 50% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    var(--base-tint);
  box-shadow: var(--bl-e1);
}
.bl-gtl__inline { height: 220px; margin-top: 20px; }
.bl-gtl__inline .db-concept,
.bl-gtl__scene .db-concept { width: 100%; height: 100%; container-type: size; }
.bl-gtl__inline .db-concept__scene,
.bl-gtl__scene .db-concept__scene {
  height: 100%;
  display: grid;
  align-content: center;
  padding: 1.4em;
  font-size: clamp(9px, min(3.4cqw, 7cqh), 18px);
}
.bl-gtl .db-concept__cap { display: none; }
.bl-gtl__head { max-width: 640px; }
.bl-gtl__head h2 { margin: 0; }
.bl-gtl__head .bl-svc-head__lead { margin: 16px 0 0; }
/* From 1200px: the same split as "Why Bones sites last" (two halves, 72px apart), so the
   rail runs on the same line through both sections. Heading and illustration stay
   pinned on the left while the steps scroll on the right. */
@media only screen and (min-width: 1200px) {
  .bl-gtl { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; max-width: none; align-items: start; }
  .bl-gtl__aside { position: sticky; top: 96px; display: grid; gap: 28px; }
  .bl-gtl__inline { display: none; }
  .bl-gtl .bl-gtl__step { min-height: 38vh; padding-bottom: 0; }
  .bl-gtl .bl-gtl__step:last-of-type { min-height: 0; padding-bottom: 12vh; }
  .bl-gtl__stage { display: block; }
  .bl-gtl__frame { position: relative; display: grid; aspect-ratio: 16 / 10; max-height: calc(100vh - 420px); min-height: 260px; overflow: hidden; }
  .bl-gtl__scene {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(12px) scale(.98);
    transition: opacity .2s ease, transform .2s ease;
  }
  /* the outgoing scene fades first, then the new one comes in */
  .bl-gtl__scene.is-on { opacity: 1; transform: none; transition: opacity .4s ease .18s, transform .4s ease .18s; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-gtl__scene { transition: none; transform: none; }
}
.bl-gains__note { max-width: 62ch; margin: 40px auto 0; text-align: center; font-size: 15px; color: var(--t-medium); }
.bl-gains__note a { color: var(--accent-text); white-space: nowrap; }
.bl-gains__note a::after { content: " \2192"; }
.bl-gtl__st { display: inline-block; margin-bottom: 8px; padding: 3px 10px; border-radius: 99px; font: 500 11px/1.4 var(--_font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--t-muted); border: 1px solid var(--bl-line); }
.bl-gtl__st.is-now { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
/* Cases grid alignment (2026-11-03): titles hold two lines so the tags line up across a
   row, the card footer stays on one line, and the CRM screens spread to fill the art. */
.bl-cases--grid main h3.bl-cases__title,main .bl-cases--grid h3.bl-cases__title { min-height: 2lh; }
.bl-cases--grid .bl-cases__side { flex-wrap: nowrap; white-space: nowrap; }
.bl-cases--grid .bl-cases__loc { overflow: hidden; text-overflow: ellipsis; }
.bl-cases__thumb .cx-crm__main { display: flex; flex-direction: column; }
.bl-cases__thumb .cx-crm__main > :last-child { flex: 1; min-height: 0; }
.bl-cases__thumb .cx-chart { grid-template-rows: auto 1fr; }
.bl-cases__thumb .cx-chart__bars { height: auto; min-height: 3.4em; }
.bl-cases__thumb .cx-board { align-items: stretch; }
.bl-cases__thumb .cx-table { grid-auto-rows: 1fr; }
/* Client cases on the featured row's 7:5 grid (2026-11-03), alternating 5:7 on every
   other row, so their column lines and gap match the Bones cards above. Fixed art
   height keeps the text lined up across each row. */
@media (min-width:1024px){
  /* three tracks so a 7 or 5 span lands exactly on the bento's 7fr/5fr line */
  .bl-cases--grid{grid-template-columns:calc((100% - 24px)*5/12) calc((100% - 24px)/6 - 24px) calc((100% - 24px)*5/12);gap:24px}
  .bl-cases--grid .bl-cases__item:nth-child(4n+1){grid-column:1 / 3}
  .bl-cases--grid .bl-cases__item:nth-child(4n+2){grid-column:3 / 4}
  .bl-cases--grid .bl-cases__item:nth-child(4n+3){grid-column:1 / 2}
  .bl-cases--grid .bl-cases__item:nth-child(4n+4){grid-column:2 / 4}
  .bl-cases--grid .bl-cases__thumb{aspect-ratio:auto;height:320px}
}
/* "Why Bones sites last" as an X-ray (2026-11-03): a page with eight layers under its
   surface. Below 1024px the layers are a scrolling row of chips above the page. */
.bl-xray { display: grid; gap: 20px; }
.bl-xray__nav { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.bl-xray__nav::-webkit-scrollbar { display: none; }
.bl-xray__end, .bl-xray__tab-title { display: none; }
.bl-xray__tab {
  flex: none; display: flex; gap: 8px; align-items: baseline;
  padding: 9px 14px; border: 1px solid var(--bl-line); border-radius: 99px;
  background: var(--base-tint); color: var(--t-medium); cursor: pointer;
  font: 500 13px/1.3 var(--_font-mono); letter-spacing: .04em;
  transition: color .2s, border-color .2s, background-color .2s;
}
.bl-xray__tab-n { color: var(--t-muted); font-size: 11px; }
.bl-xray__tab:hover { color: var(--t-bright); }
.bl-xray__tab.is-on { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--base-tint)); }
.bl-xray__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bl-xray__main { display: grid; gap: 20px; min-width: 0; }
.bl-xray__scope { overflow: hidden; border: 1px solid var(--bl-line); border-radius: 20px; background: var(--base-tint); box-shadow: var(--bl-e1); }
.bl-xray__bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--bl-line); font: 500 11px/1 var(--_font-mono); letter-spacing: .05em; color: var(--t-muted); }
.bl-xray__dots { display: flex; gap: 5px; }
.bl-xray__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--bl-line); }
.bl-xray__url { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bl-xray__depth b { color: var(--accent-text); font-weight: 600; }
.bl-xray__view {
  position: relative; height: 280px; overflow: hidden;
  background: var(--base);
}
.bl-xray__layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.bl-xray__layer.is-on { opacity: 1; visibility: visible; animation: bl-xray-reveal .9s cubic-bezier(.4, 0, .2, 1) both; }
.bl-xray__layer .db-concept { width: 100%; height: 100%; container-type: size; }
.bl-xray__layer .db-concept__scene { height: 100%; display: grid; align-content: center; padding: 1.4em; font-size: clamp(9px, min(3.2cqw, 6.2cqh), 17px); }
.bl-xray__layer .db-concept--governance .db-concept__scene { font-size: clamp(8px, min(2.9cqw, 5.2cqh), 15px); }
.bl-xray__layer .db-concept__cap { display: none; }
.bl-xray__beam {
  position: absolute; left: 0; right: 0; top: 0; height: 2px; opacity: 0; pointer-events: none;
  background: var(--accent);
  box-shadow: 0 0 18px 4px color-mix(in srgb, var(--accent) 45%, transparent), 0 -40px 60px -20px color-mix(in srgb, var(--accent) 20%, transparent);
}
.bl-xray__view.is-scan .bl-xray__beam { animation: bl-xray-beam .9s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes bl-xray-reveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bl-xray-beam { 0% { top: 0; opacity: 1; } 90% { top: calc(100% - 2px); opacity: 1; } 100% { top: calc(100% - 2px); opacity: 0; } }
.bl-xray__panels { display: grid; gap: 28px; }
.bl-xray.is-ready .bl-xray__panels { gap: 0; }
.bl-xray.is-ready .bl-xray__panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.bl-xray.is-ready .bl-xray__panel.is-on { opacity: 1; visibility: visible; transition: opacity .4s .15s; }
.bl-xray__panel { display: grid; gap: 6px; align-content: start; }
.bl-xray__panel-n { font: 500 12px/1.4 var(--_font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--t-muted); }
.bl-xray__panel-title { margin: 0; font-size: 24px; line-height: 1.25; }
.bl-xray__panel-source { margin: 0; font: 500 12px/1.5 var(--_font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.bl-xray__panel-text { margin: 6px 0 0; max-width: 62ch; color: var(--t-medium); line-height: 1.6; }
@media only screen and (min-width: 768px) { .bl-xray__view { height: 360px; } }
@media only screen and (min-width: 1024px) {
  .bl-xray { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
  .bl-xray__nav { order: 2; flex-direction: column; gap: 0; overflow: visible; position: relative; padding: 0 0 0 22px; }
  .bl-xray__nav::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(var(--bl-line), color-mix(in srgb, var(--accent) 50%, var(--bl-line))); }
  .bl-xray__end { display: block; position: relative; padding: 2px 0 10px; font: 500 11px/1.4 var(--_font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--t-muted); }
  .bl-xray__end:last-child { padding: 10px 0 2px; }
  .bl-xray__end::before { content: ""; position: absolute; left: -22px; top: 5px; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--bl-line); background: var(--base); }
  .bl-xray__end:last-child::before { top: 13px; background: var(--accent); border-color: var(--accent); }
  .bl-xray__tab {
    position: relative; display: grid; grid-template-columns: 26px 1fr; column-gap: 8px; row-gap: 2px;
    width: 100%; padding: 11px 14px; border-radius: 12px; border-color: transparent; background: none; text-align: left;
  }
  .bl-xray__tab::before { content: ""; position: absolute; left: -21px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--bl-line); transition: background-color .2s, box-shadow .2s; }
  .bl-xray__tab.is-on::before { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
  .bl-xray__tab-n { grid-row: 1 / 3; padding-top: 1px; }
  .bl-xray__tab-layer { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--t-muted); }
  .bl-xray__tab-title { display: block; font: 500 15px/1.35 var(--_font-default); letter-spacing: 0; color: var(--t-medium); }
  .bl-xray__tab.is-on .bl-xray__tab-title { color: var(--t-bright); }
  .bl-xray__tab.is-on .bl-xray__tab-layer { color: var(--accent-text); }
  .bl-xray__view { height: 400px; }
}
@media (prefers-reduced-motion: reduce) {
  .bl-xray__layer.is-on, .bl-xray__view.is-scan .bl-xray__beam { animation: none; }
}
/* From 1200px the X-ray and the Bones timeline below share one 7:5 grid, so the layer
   rail and the timeline rail sit on the same line (Owner request, 2026-11-03). */
@media only screen and (min-width: 1200px) {
  .bl-xray { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; }
}
/* the layer rail uses the timeline rail's measurements: 2px line 11px in, text 44px in */
@media only screen and (min-width: 1024px) {
  .bl-xray__nav { padding-left: 30px; }
  .bl-xray__nav::before { left: 11px; width: 2px; border-radius: 2px; }
  .bl-xray__tab::before { left: -21.5px; }
  .bl-xray__end { padding-left: 14px; }
  .bl-xray__end::before { left: -23.5px; box-sizing: border-box; width: 11px; height: 11px; }
}
/* Selected work (2026-11-03, Owner: "fonts don't match"): the three featured cards use one
   title size, one summary size and one illustration text size. */
@media only screen and (min-width: 1024px) {
  .bl-insights--bento > .bl-insights__card .bl-insights__title,
  .bl-insights--bento > .bl-insights__card:first-child .bl-insights__title { font-size: 24px; }
  .bl-insights--bento > .bl-insights__card .bl-cases__summary { font-size: 15px; }
  .bl-insights--bento .bl-case-art.bl-case-art .db-concept .db-concept__scene,
  .bl-insights--bento .bl-case-art.bl-case-art:has(.cx-crm) .db-concept .db-concept__scene:has(.cx-crm) { font-size: 11.5px; }
}
/* X-ray layers are full-frame screens (.cx-xvs); they draw their own padding. On phones
   the two sides stack, so the frame is taller. */
.bl-xray__layer .db-concept__scene:has(.cx-xvs) { display: block; padding: 0; }
@media only screen and (max-width: 767px) {
  .bl-xray__view { height: 470px; }
  .bl-xray__layer .cx-xvs { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); }
}

/* terms.html payment table (2026-11-03): the article styles have no table rules,
   so the table gets simple row lines and scrolls sideways on phones. */
.bl-legal__table {
  overflow-x: auto;
  margin: 0 0 24px;
}
.bl-legal__table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}
.bl-legal__table th,
.bl-legal__table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--bl-line);
  text-align: left;
  vertical-align: top;
}
.bl-legal__table th {
  color: var(--t-bright);
  font-weight: 600;
}

/* Privacy page: inline "Open cookie settings" control (2026-11-03) */
.db-article__cookie-settings {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--accent-text);
  text-decoration: underline;
  cursor: pointer;
}
.bl-footer .cookie-settings-note {
  flex-basis: 100%;
  order: 9;
  color: var(--t-medium);
}

/* Content tables (.table-custom): calmer, denser, easier to scan (2026-11-03).
   Used by privacy.html, blog posts and the area/sector/development templates.
   Overrides features/project-details.css. Below 640px each row becomes a card,
   with column names added as data-label by assets/js/app.js. */
.table-responsive-custom {
  margin: 4px 0 20px;
  background: var(--base-tint);
  border: 1px solid var(--bl-line);
  border-radius: 16px;
  box-shadow: none;
}
.table-custom {
  font-size: 15px;
  line-height: 1.45;
}
.table-custom thead th {
  position: static;
  padding: 10px 16px 8px;
  font: 500 11px/1.3 var(--_font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t-medium);
  background: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--bl-line);
}
.table-custom tbody td {
  padding: 9px 16px;
  border-bottom: 1px solid var(--bl-line);
}
.table-custom tr > *:first-child { padding-left: 20px; }
.table-custom tr > *:last-child { padding-right: 20px; }
.table-custom tbody td:first-child {
  color: var(--t-bright);
  font-weight: 500;
}
.table-custom tbody tr:last-child td { border-bottom: 0; }
.table-striped-custom tbody tr:nth-child(odd) { background: none; }
.no-touch .table-hover-custom tbody tr:hover {
  background: color-mix(in srgb, var(--t-bright) 3%, transparent);
}
@media (max-width: 639px) {
  .table-responsive-custom { overflow: visible; }
  .table-custom thead { display: none; }
  .table-custom,
  .table-custom tbody,
  .table-custom tr,
  .table-custom td { display: block; width: 100%; }
  .table-custom tbody tr {
    padding: 10px 16px;
    border-bottom: 1px solid var(--bl-line);
  }
  .table-custom tbody tr:last-child { border-bottom: 0; }
  .table-custom tbody td,
  .table-custom tr > *:first-child,
  .table-custom tr > *:last-child {
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .table-custom tbody td + td { margin-top: 4px; }
  .table-custom tbody td:first-child { font-size: 15px; }
  .table-custom tbody td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 1px;
    font: 500 10px/1.3 var(--_font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--t-medium);
  }
}
/* Short codes (301, 410…) stay on one line; the post-body rule (above) still wraps long ones elsewhere. */
.bl-post__body .table-custom td code { overflow-wrap: normal; word-break: keep-all; }
/* Links to pricing-plans.html#…-continuity scroll the step progress to just below the fixed header. */
[data-price-progress] { scroll-margin-top: 110px; }

/* Blog "Start here" with four picks: one row on wide screens, 2 x 2 below that (2026-11-03). */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .bl-insights--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media only screen and (min-width: 1200px) {
  .bl-insights--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
}

/* ---------------------------------------------------------------
   Crisp light (2026-11-03)
   The light theme had white cards on a near-white page, so it read flat.
   A cooler, slightly deeper canvas lets the white cards stand off it; lines,
   secondary text and shadows are firmer; heroes get a stronger glow over a
   faint grid. Every rule is scoped to light, so dark is unchanged.
---------------------------------------------------------------- */
:root:not([data-theme="dark"]) {
  /* cool near-white canvas, navy text and navy-tinted shadows */
  --base--light: #F6F8FC;
  --base-rgb--light: 246, 248, 252;
  --base-shade--light: #E1E6EF;
  --base-opp--light: #0B1530;
  --t-bright--light: #0B1530;
  --t-medium--light: #33415C;
  --t-muted--light: #5B6880;
  --neutral-transparent--light: rgba(11, 21, 48, 0.06);
  --bl-line: #E1E6EF;
  --bl-e1: var(--bl-rim), 0 0 0 1px rgba(11, 21, 48, 0.04), 0 2px 5px rgba(50, 50, 93, 0.07), 0 1px 1px rgba(0, 0, 0, 0.04);
  --bl-e2: var(--bl-rim), 0 0 0 1px rgba(11, 21, 48, 0.04), 0 6px 12px -2px rgba(50, 50, 93, 0.12), 0 24px 48px -16px rgba(50, 50, 93, 0.22);
  --bl-glass: rgba(246, 248, 252, 0.8);
  --bl-hero-grid:
    linear-gradient(to right, rgba(11, 13, 18, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11, 13, 18, 0.05) 1px, transparent 1px);
  /* a brand-blue colour field for heroes: one blue glow in the top-right corner only (Owner 2026-11-04: "just one colour ... in blue"; "just leave the top right corner, remove others") */
  --bl-hero-field:
    radial-gradient(ellipse 28% 45% at 85% 6%, rgba(37, 99, 255, 0.46), transparent 70%);
}
:root:not([data-theme="dark"]) .db-header {
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.9), 0 10px 28px -18px rgba(15, 23, 42, 0.16);
}
:root:not([data-theme="dark"]) .bl-home-hero,
:root:not([data-theme="dark"]) .db-hero-09:not(.db-hero-09--split),
:root:not([data-theme="dark"]) .db-section-inner-headline,
:root:not([data-theme="dark"]) main > .db-section:first-child {
  background:
    var(--bl-hero-field),
    radial-gradient(ellipse 60% 70% at 50% 0%, #FFFFFF, transparent 70%);
}
:root:not([data-theme="dark"]) .bl-home-hero {
  position: relative;
  isolation: isolate;
  background: none;
}
/* the colour field fades out before the hero ends, so it never stops in a hard line */
:root:not([data-theme="dark"]) .bl-home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 28% 45% at 86% 6%, rgba(37, 99, 255, 0.6), transparent 70%),
    radial-gradient(ellipse 55% 70% at 50% 30%, #FFFFFF, transparent 75%);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
  pointer-events: none;
}
:root:not([data-theme="dark"]) .bl-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--bl-hero-grid);
  background-size: 40px 40px;
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 0%, #000 20%, transparent 75%);
  pointer-events: none;
}
:root:not([data-theme="dark"]) .db-hero-09--split {
  background:
    radial-gradient(ellipse 30% 40% at 98% 5%, rgba(37, 99, 255, 0.4), transparent 70%),
    radial-gradient(ellipse 60% 60% at 30% 10%, #FFFFFF, transparent 70%);
}

/* Bones platform panel on the homepage (2026-11-03): moved from the footer, under
   the "Our larger sites run on Bones" band. It keeps the footer's classes, so only
   the footer's link reset and its frame are restated here. */
.bl-home-platform { margin-top: 24px; font-size: 15px; color: var(--t-bright); }
.bl-home-platform a { color: inherit; text-decoration: none; background: none !important; }
/* Without the process strip under it, the panel keeps its full frame. */
@media (min-width: 1024px) {
  .bl-home-platform .bl-footer__platform { margin-inline: 0; border-bottom: 1px solid var(--bl-line); border-radius: 20px; box-shadow: var(--bl-e1); padding-bottom: 28px; }
}

/* Form fields (2026-11-03, design UX-3): field edges reach 3:1 against the card and
   the field fill in both themes, and focus is the site's 2px ring, never a border
   colour alone. Error colours stay as they are until UX-2. */
:root { --field-border: #7D879B; --field-border-hover: #5B6880; --focus-ring: var(--accent-text); }
:root[data-theme="dark"] { --field-border: #6A6F7A; --field-border-hover: #8A8F99; }

/* Phone menu (2026-11-03, design UX-4, Owner option A): Services opens to the
   desktop list with its group labels, and in the light theme the panel is a light
   sheet instead of the dark one. The page behind stops scrolling while it is open. */
@media only screen and (max-width: 1199.98px) {
  .submenu__label {
    margin: 12px 0 2px;
    font: 500 10px/1.4 var(--_font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--t-opp-muted);
  }
  .submenu__label:first-child { margin-top: 8px; }
  .submenu__item a { min-height: 40px; }
  :root:not([data-theme="dark"]) .db-menu__wrapper {
    --t-opp-bright: var(--t-bright);
    --t-opp-medium: var(--t-medium);
    --t-opp-muted: var(--t-muted);
  }
  :root:not([data-theme="dark"]) .db-menu__contain .hamburger__base {
    background-color: var(--base-tint);
    box-shadow: 0 0 0 1px var(--bl-line), 0 24px 60px -20px rgba(15, 23, 42, 0.16);
  }
  :root:not([data-theme="dark"]) .db-menu__base { background: rgba(11, 13, 18, 0.28); }
  :root:not([data-theme="dark"]) .db-menu__cta-btn { background: var(--accent); color: #FFFFFF !important; }
  :root:not([data-theme="dark"]) .main-menu__item.open .main-menu__toggle svg { fill: var(--base-tint); }
}
html.bl-menu-open,
html.bl-menu-open body { overflow: hidden; }

/* ------------------------------------------------*/
/* Contact form states (design UX-2, 3 Nov 2026) */
/* Error text: 6.57:1 on the light card, 6.5:1 on the dark card. */
/* ------------------------------------------------*/
:root { --field-error: #B42318; --field-error-bg: rgba(180,35,24,0.06); }
:root[data-theme="dark"] { --field-error: #F97066; --field-error-bg: rgba(249,112,102,0.08); }


.g-recaptcha:focus { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: 4px; }

.bl-form-summary { margin-bottom: 24px; padding: 18px 20px; border: 2px solid var(--field-error); border-radius: 12px; background: var(--field-error-bg); color: var(--t-bright); font-size: 15px; line-height: 1.5; }
.bl-form-summary:focus { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
/* main h2 sets its size with !important, so the form headings match it. */
.bl-form-summary .bl-form-summary__title { margin: 0 0 4px; font: 600 18px/1.3 var(--_font-accent); font-size: 18px !important; color: var(--t-bright); }
.bl-form-summary p { margin: 0; color: var(--t-medium); }
.bl-form-summary ul { margin: 10px 0 0; padding-left: 18px; }
.bl-form-summary li + li { margin-top: 4px; }
.bl-form-summary a { color: var(--field-error); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; background: none; }

.bl-contact .form__reply--inline { margin: 24px auto; padding: 24px 8px; }
.bl-contact .form__reply--inline:focus { outline: none; }
.bl-contact .reply__title { font-size: 28px !important; }
.bl-contact__submit:disabled { opacity: .7; cursor: progress; }

/* ------------------------------------------------*/
/* Inner-page headings (design UX-1, 3 Nov 2026) */
/* The H1 is the page's topic phrase, shown large; the benefit line is a */
/* <p> sub-headline under it; the eyebrow is a short <p> label. */
/* ------------------------------------------------*/
.bl-home-hero--page h1.bl-home-hero__title {
  max-width: 22ch;
  font-size: clamp(34px, 16px + 2.8vw, 58px);
  line-height: 1.06;
  text-wrap: balance;
}
.bl-home-hero__sub {
  max-width: 34ch;
  margin: 2px 0 0;
  font: 500 clamp(20px, 12px + 0.9vw, 26px)/1.3 var(--_font-accent);
  letter-spacing: -0.02em;
  color: var(--t-medium);
  text-wrap: balance;
}
.bl-home-hero:not(.bl-home-hero--left) .bl-home-hero__sub { margin-inline: auto; }

.hero-09-headline__caption .hero-09-headline__label,
.db-hero-09--split .hero-09-headline__caption .hero-09-headline__label {
  order: 1;
  max-width: none;
  margin: 0;
  font: 500 13px/1.4 var(--_font-mono, "Geist Mono", monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.db-hero-09--split .hero-09-headline__caption .hero-09-headline__label { display: inline-flex; align-items: center; gap: 10px; }
.db-hero-09--split .hero-09-headline__caption .hero-09-headline__label::before { content: ""; width: 24px; height: 1px; background: var(--accent); }
.hero-09-headline__title h1.hero-09-headline,
.db-hero-09--split .hero-09-headline__title h1.hero-09-headline {
  max-width: 20ch;
  font-size: clamp(34px, 16px + 2.6vw, 54px);
  line-height: 1.06;
  text-wrap: balance;
}
.hero-09-headline__sub {
  max-width: 34ch;
  margin: 18px auto 0;
  font: 500 clamp(20px, 12px + 0.9vw, 26px)/1.3 var(--_font-accent);
  letter-spacing: -0.02em;
  color: var(--t-medium);
}
.db-hero-09--split .hero-09-headline__sub { margin-left: 0; }

/* Case grid on phones: one column that cannot grow past the screen; the
   no-wrap meta line had widened it to 341px at 320px (found in the UX-1 check). */
@media (max-width: 767.98px) { .bl-cases--grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------*/
/* About: Our skills (3 Nov 2026), a ruled definition list */
/* ------------------------------------------------*/
.bl-skills { margin: 32px 0 0; border-top: 1px solid var(--t-bright); }
.bl-skills__row { display: grid; gap: 8px; padding: 20px 0; border-bottom: 1px solid var(--bl-line); }
.bl-skills dt { margin: 0; font: 600 18px/1.3 var(--_font-default); color: var(--t-bright); }
.bl-skills dd { margin: 0; }
.bl-skills__list { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 0; padding: 0; list-style: none; }
.bl-skills__list li { margin: 0; font: 400 17px/1.5 var(--_font-default); color: var(--t-bright); }
@media (min-width: 860px) {
  .bl-skills__row { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px; padding: 24px 0; align-items: baseline; }
  .bl-skills__list li { font-size: 19px; }
}

/* ------------------------------------------------*/
/* Direction 1 · B1 (design.md): tokens, type scale, buttons, links */
/* ------------------------------------------------*/
:root {
  --bl-h1-home: clamp(34px, 6vw, 72px);
  --bl-h1: clamp(34px, 16px + 2.8vw, 58px);
  --bl-h3-list: clamp(17px, 15px + .3vw, 19px); /* mocks: card titles 17–20px (2026-11-04 font check) */
  --bl-sub: clamp(20px, 12px + 0.9vw, 26px);
  --bl-lead: clamp(18px, 16px + 0.3vw, 20px);
  --bl-body: 17px;
  --bl-small: 15px;
  --bl-data: 13px;
  --bl-measure: 64ch;
  --bl-s1: 8px; --bl-s2: 16px; --bl-s3: 24px; --bl-s4: 32px; --bl-s6: 48px; --bl-s8: 64px; --bl-s12: 96px;
  --bl-r-panel: 16px; --bl-r-control: 12px; --bl-r-chip: 6px; --bl-r-pill: 999px;
  --bl-edge: var(--field-border);
  --bl-status-live: #0F7B4B;
  --bl-status-dev: #8A5A00;
  --bl-primary-hover: #0043D1;
}
:root[data-theme="dark"] {
  --bl-status-live: #3FB37F;
  --bl-status-dev: #E0A43A;
}

/* Two H3 steps: list titles, and the large card titles. */
main h3:not(.db-concept *):not(.bl-svc-card__title):not(.bl-xray__panel-title):not(.bl-sectors__title):not(.bl-post__body *):not(.bl-ccard *):not(.bl-about .bl-lcards *):not(.bl-wcards *):not(.bl-alist *):not(.bl-blog-start__title):not(.bl-bcard__title) {
  font-size: var(--bl-h3-list) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
}
main h3.bl-svc-card__title, main h3.bl-xray__panel-title, main h3.bl-sectors__title {
  font-size: var(--bl-h3) !important;
  line-height: 1.12 !important;
}
.bl-post__body p, .db-section p:not([class]) { max-width: var(--bl-measure); }
.bl-home-hero__sub, .hero-09-headline__sub { margin-top: var(--bl-s2); }

.bl-home-hero__btn:hover, .no-touch .bl-home-hero__btn:not(.bl-home-hero__btn--primary):hover { transform: none; border-color: var(--t-bright); }
.bl-home-hero__btn:active { background: color-mix(in srgb, var(--t-bright) 6%, var(--base-tint)); }
.bl-home-hero__btn--primary,
.db-menu__cta-btn,
:root[data-theme="dark"] .db-menu__cta-btn,
.db-header__controls .btn.btn-default {
  border-color: var(--accent);
  background: var(--accent);
  color: #FFFFFF !important;
}
.no-touch .bl-home-hero__btn--primary:hover, .bl-home-hero__btn--primary:hover, .db-menu__cta-btn:hover, .db-header__controls .btn.btn-default:hover {
  border-color: var(--bl-primary-hover);
  background: var(--bl-primary-hover);
  transform: none;
}
.bl-home-hero__btn--primary:active, .db-menu__cta-btn:active, .db-header__controls .btn.btn-default:active {
  background: color-mix(in srgb, var(--accent) 80%, #000);
}

.bl-textlink {
  font: 500 16px/1.4 var(--_font-default);
  color: var(--t-bright);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.bl-textlink:hover { text-decoration-thickness: 2px; }

/* ------------------------------------------------*/
/* Direction 1 · B2 (design.md): homepage hero, record drawing, */
/* section kickers, ruled Three steps, menu numbers */
/* ------------------------------------------------*/
/* Phone menu: the items are not a sequence, so no 01–05 numbers. */
.main-menu__item > a::before,
.main-menu__toggle::before { content: none !important; display: none !important; }

/* Homepage kicker in sentence case. */
.bl-home-hero--split .bl-home-hero__eyebrow {
  font: 500 var(--bl-small)/1.4 var(--_font-default);
  text-transform: none;
  letter-spacing: 0;
  color: var(--t-muted);
}
.bl-home-hero--split .bl-home-hero__copy { display: flex; flex-direction: column; align-items: center; gap: 16px; min-width: 0; }
.bl-home-hero--split .bl-home-hero__actions { align-items: center; gap: 12px 24px; }
.bl-home-hero--split .bl-record-figure { width: 100%; max-width: 560px; min-width: 0; margin-top: var(--bl-s4); text-align: left; }
@media (min-width: 960px) {
  .bl-home-hero--split .bl-home-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: var(--bl-s8);
    max-width: 1200px;
    padding-inline: 24px;
    text-align: left;
  }
  .bl-home-hero--split .bl-home-hero__copy { align-items: flex-start; }
  .bl-home-hero--split .bl-home-hero__title { max-width: 14ch; }
  .bl-home-hero--split .bl-home-hero__actions { justify-content: flex-start; }
  .bl-home-hero--split .bl-record-figure { max-width: none; margin-top: 0; }
}

/* Record drawing: one record and the outputs drawn from it. */
.bl-record-figure {
  position: relative;
  margin: 0;
  padding: var(--bl-s3);
  border: 1px solid var(--bl-line);
  border-radius: var(--bl-r-panel);
  background: var(--base-tint);
  box-shadow: var(--bl-e2);
}
.bl-record-figure__title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: var(--bl-s2); }
.bl-record-figure__title strong { font: 600 var(--bl-small)/1.3 var(--_font-default); color: var(--t-bright); }
.bl-status { flex: none; padding: 5px 8px; border: 1px solid currentColor; border-radius: var(--bl-r-chip); font: 500 12px/1 var(--_font-default); }
.bl-status--live { color: var(--bl-status-live); }
.bl-status--dev { color: var(--bl-status-dev); }
.bl-record { overflow: hidden; border: 1px solid var(--bl-edge); border-radius: var(--bl-r-control); }
.bl-record dl { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: 0; }
.bl-record dt, .bl-record dd { margin: 0; padding: 9px 12px; border-top: 1px solid var(--bl-line); font: 400 var(--bl-data)/1.4 var(--_font-mono); }
.bl-record dt { color: var(--t-muted); }
.bl-record dd { color: var(--t-bright); overflow-wrap: anywhere; }
.bl-record dl > :nth-child(-n+2) { border-top: 0; }
.bl-record-figure__outputs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bl-s1); margin-top: var(--bl-s4); }
.bl-record-figure__outputs::before { content: ""; position: absolute; left: 16.6%; right: 16.6%; top: -24px; height: 24px; border: 1px solid var(--accent); border-bottom: 0; border-radius: 8px 8px 0 0; }
.bl-record-figure__outputs::after { content: ""; position: absolute; left: 50%; top: -33px; height: 9px; border-left: 1px solid var(--accent); }
.bl-record-figure__out { min-width: 0; padding: 10px; border: 1px solid var(--bl-line); border-radius: var(--bl-r-control); background: var(--base); font: 400 12px/1.35 var(--_font-default); }
.bl-record-figure__out b { display: block; margin-bottom: 2px; font: 600 13px/1.3 var(--_font-default); color: var(--t-bright); }
.bl-record-figure__out span { display: block; color: var(--t-muted); overflow-wrap: break-word; }
@media (prefers-reduced-motion: no-preference) {
  .bl-record-figure__outputs::before, .bl-record-figure__outputs::after { animation: bl-record-draw .9s .3s both cubic-bezier(.2, .7, .2, 1); }
  .bl-record-figure__out { animation: bl-record-rise .5s both; }
  .bl-record-figure__out:nth-child(1) { animation-delay: .9s; }
  .bl-record-figure__out:nth-child(2) { animation-delay: 1s; }
  .bl-record-figure__out:nth-child(3) { animation-delay: 1.1s; }
}
@keyframes bl-record-draw { from { clip-path: inset(0 50% 0 50%); } to { clip-path: inset(0); } }
@keyframes bl-record-rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Homepage Three steps: a ruled sequence, not cards. */
.bl-svc-cards--ruled { gap: 0; border-top: 2px solid var(--t-bright); }
.bl-svc-cards--ruled .bl-svc-card,
.no-touch .bl-svc-cards--ruled .bl-svc-card:hover {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
}
.bl-svc-cards--ruled .bl-svc-card + .bl-svc-card { border-top: 1px solid var(--bl-line); }
.bl-svc-cards--ruled .bl-svc-card__visual,
#how-we-work .bl-svc-cards--ruled .bl-svc-card__visual { display: none; }
.bl-svc-cards--ruled .bl-svc-card__body,
#how-we-work .bl-svc-cards--ruled .bl-svc-card__body { padding: 24px 0; }
.bl-svc-cards--ruled .bl-svc-card__step {
  font: 600 var(--bl-small)/1 var(--_font-default);
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent-text);
}
.bl-svc-cards--ruled .bl-svc-card__meta { display: block; padding-top: 12px; border-top: 1px solid var(--bl-line); font: 500 var(--bl-data)/1.4 var(--_font-mono); }
.bl-svc-cards--ruled .bl-svc-card__more svg { display: none; }
@media (min-width: 860px) {
  .bl-svc-cards--ruled { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bl-svc-cards--ruled .bl-svc-card + .bl-svc-card { border-top: 0; border-left: 1px solid var(--bl-line); }
  .bl-svc-cards--ruled .bl-svc-card__body,
  #how-we-work .bl-svc-cards--ruled .bl-svc-card__body { padding: 24px; }
  .bl-svc-cards--ruled .bl-svc-card:first-child .bl-svc-card__body { padding-left: 0; }
  .bl-svc-cards--ruled .bl-svc-card:last-child .bl-svc-card__body { padding-right: 0; }
}