/* BIT site styles. Tokens follow website-handoff/design/design-tokens.css. */

/* ---------- Fonts (self-hosted, SIL OFL 1.1; see /assets/fonts/*-OFL.txt) ---------- */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/assets/fonts/manrope-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/assets/fonts/manrope-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/inter-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --bit-bg: #fafaf8;
  --bit-surface: #ffffff;
  --bit-text: #171717;
  --bit-text-muted: #52606d;
  --bit-action: #0754b8;
  --bit-action-hover: #064799;
  --bit-ocean: #078adb;
  --bit-sky: #10b4f1;
  --bit-surface-blue: #eaf3f9;
  --bit-surface-tint: #f0f3f3;
  --bit-border: #dfe4e6;
  --bit-field-border: #7a8791;
  --bit-dark: #171717;
  --bit-dark-line: #3e4449;
  --bit-text-on-dark: #ffffff;
  --bit-muted-on-dark: #bdc7cf;
  --bit-slate: #435974;
  --bit-logo-ink: #10233f;
  --bit-error: #b42318;
  --bit-error-surface: #fef3f2;
  --bit-success: #146c2e;
  --bit-success-surface: #edf7ef;
  --bit-notice-surface: #fff8e6;
  --bit-notice-border: #b98900;

  --bit-font-heading: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --bit-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --bit-content-max: 75rem;
  --bit-reading-max: 65ch;
  --bit-page-gutter: clamp(1.25rem, 3vw, 2rem);
  --bit-section-space: clamp(3rem, 2rem + 4vw, 5.5rem);
  --bit-radius: .625rem;
  --bit-radius-image: 1rem;

  --bit-size-hero: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
  --bit-size-page: clamp(2rem, 1.5rem + 2vw, 3rem);
  --bit-size-section: clamp(1.625rem, 1.25rem + 1.5vw, 2.25rem);
  --bit-size-card: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
  --bit-size-body: clamp(1rem, .95rem + .2vw, 1.125rem);
  --bit-size-lead: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
  --bit-size-small: .875rem;

  --bit-target-min: 2.75rem;
  --bit-transition: 150ms ease;
  --bit-header-height: 5.25rem;

  /* Isometric lattice echoing the cube's 30° faces. */
  --bit-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='27.7128'%3E%3Cpath d='M0 0L48 27.7128M48 0L0 27.7128M.5 0V27.7128M24 0V27.7128' fill='none' stroke='%230754B8' stroke-opacity='.1'/%3E%3C/svg%3E");
  --bit-lattice-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='27.7128'%3E%3Cpath d='M0 0L48 27.7128M48 0L0 27.7128M.5 0V27.7128M24 0V27.7128' fill='none' stroke='%2310B4F1' stroke-opacity='.12'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  :root { --bit-transition: 0ms; }
  html { scroll-behavior: auto !important; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bit-header-height) + 1rem);
}

body {
  margin: 0;
  background: var(--bit-bg);
  color: var(--bit-text);
  font-family: var(--bit-font-body);
  font-size: var(--bit-size-body);
  line-height: 1.65;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--bit-font-heading);
  line-height: 1.15;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--bit-size-page); font-weight: 750; }
h2 { font-size: var(--bit-size-section); font-weight: 700; line-height: 1.2; }
h3 { font-size: var(--bit-size-card); font-weight: 700; line-height: 1.3; letter-spacing: -.015em; }
p { margin: 0; }
p + p { margin-top: 1em; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
ul, ol { margin: 0; padding: 0; }

a { color: var(--bit-action); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--bit-action-hover); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--bit-action);
  outline-offset: 3px;
  border-radius: 2px;
}
.section--dark :focus-visible, .site-footer :focus-visible {
  outline-color: var(--bit-sky);
}
main:focus { outline: none; }

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

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--bit-action);
  color: #fff;
  font-weight: 600;
  border-radius: var(--bit-radius);
  text-decoration: none;
}
.skip-link:focus { top: 1rem; color: #fff; }

.container {
  width: 100%;
  max-width: calc(var(--bit-content-max) + 2 * var(--bit-page-gutter));
  margin-inline: auto;
  padding-inline: var(--bit-page-gutter);
}

.icon { width: 1.25rem; height: 1.25rem; flex: none; }

/* ---------- Buttons and links ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--bit-target-min);
  padding: .75rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--bit-radius);
  font: 600 1rem/1.4 var(--bit-font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--bit-transition), border-color var(--bit-transition), box-shadow var(--bit-transition);
}
.button--primary { background: var(--bit-action); color: #fff; border-color: var(--bit-action); }
.button--primary:hover { background: var(--bit-action-hover); border-color: var(--bit-action-hover); color: #fff; box-shadow: 0 3px 12px rgb(7 84 184 / 12%); }
.button--secondary { background: var(--bit-surface); color: var(--bit-text); border-color: var(--bit-field-border); }
.button--secondary:hover { background: #eff3f4; color: var(--bit-text); }
.button--light { background: #fff; color: var(--bit-text); border-color: #fff; }
.button--light:hover { background: var(--bit-surface-blue); color: var(--bit-text); }
.button:focus-visible { outline-offset: 3px; box-shadow: 0 0 0 3px #fff inset; }
.button[aria-disabled='true'] { cursor: progress; opacity: .85; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: var(--bit-target-min);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
.text-link .icon--arrow { width: 1.1rem; height: 1.1rem; transition: transform var(--bit-transition); }
.text-link:hover .icon--arrow { transform: translateX(3px); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 2rem; }

.eyebrow {
  margin-bottom: 1rem;
  color: var(--bit-action);
  font-size: .8125rem;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.4;
}
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 1.25rem;
  height: 2px;
  margin-right: .6rem;
  vertical-align: middle;
  background: var(--bit-sky);
  transform: translateY(-1px);
}
.section--dark .eyebrow { color: var(--bit-sky); }
.section--dark .eyebrow::before { background: currentColor; }

::selection { background: #cfe5f6; color: var(--bit-text); }

.lead { font-size: var(--bit-size-lead); line-height: 1.6; color: var(--bit-text-muted); max-width: 40rem; margin-top: 1.25rem; }
.lead + .lead { margin-top: 1rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(250 250 248 / 96%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--bit-transition);
}
.site-header.is-scrolled { border-bottom-color: var(--bit-border); }
@supports (backdrop-filter: blur(8px)) {
  .site-header { background: rgb(250 250 248 / 88%); backdrop-filter: blur(8px); }
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--bit-header-height);
}

/* Logo: the cube beside "BIT" and a short description, set in the site fonts.
   The cube artwork is trimmed to its outline, so no offsets are needed. */
.brand { display: inline-flex; flex: none; min-width: 0; align-items: center; gap: .75rem; border-radius: 4px; color: inherit; line-height: 1; text-decoration: none; }
.brand__mark { flex: none; width: auto; height: 4rem; }
.brand__text { display: grid; gap: .3rem; }
.brand__name { color: var(--bit-logo-ink); font: 800 2.125rem/1 var(--bit-font-heading); letter-spacing: .01em; }
.brand__tag { color: var(--bit-slate); font: 500 .875rem/1.2 var(--bit-font-body); white-space: nowrap; }

.site-nav { display: flex; align-items: center; gap: 2rem; }
.site-nav__list { display: flex; gap: 1.75rem; list-style: none; }
.site-nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--bit-target-min);
  color: var(--bit-text);
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav__list a:hover { color: var(--bit-action); }
.site-nav__list a[aria-current='page'] { color: var(--bit-action); border-bottom-color: var(--bit-action); }

.menu-button {
  display: none;
  flex: none;
  align-items: center;
  gap: .6rem;
  min-height: var(--bit-target-min);
  padding: .5rem .9rem;
  background: var(--bit-surface);
  border: 1px solid var(--bit-field-border);
  border-radius: var(--bit-radius);
  color: var(--bit-text);
  font: 600 1rem/1 var(--bit-font-body);
  cursor: pointer;
}
.menu-button__bars, .menu-button__bars::before, .menu-button__bars::after {
  display: block;
  width: 1.1rem;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--bit-transition), background-color var(--bit-transition);
}
.menu-button__bars { position: relative; }
.menu-button__bars::before, .menu-button__bars::after { content: ''; position: absolute; left: 0; }
.menu-button__bars::before { top: -6px; }
.menu-button__bars::after { top: 6px; }
.menu-button[aria-expanded='true'] .menu-button__bars { background: transparent; }
.menu-button[aria-expanded='true'] .menu-button__bars::before { transform: translateY(6px) rotate(45deg); }
.menu-button[aria-expanded='true'] .menu-button__bars::after { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu { border-top: 1px solid var(--bit-border); border-bottom: 1px solid var(--bit-border); background: var(--bit-bg); }
.mobile-menu ul { list-style: none; padding-block: .5rem 1.25rem; }
.mobile-menu__link {
  display: flex;
  align-items: center;
  min-height: 3rem;
  color: var(--bit-text);
  font-weight: 500;
  font-size: 1.125rem;
  text-decoration: none;
  border-bottom: 1px solid var(--bit-border);
}
.mobile-menu__link[aria-current='page'] { color: var(--bit-action); font-weight: 650; }
.mobile-menu .button { width: 100%; margin-top: 1rem; }

@media (max-width: 66rem) {
  .site-nav .button { display: none; }
}
@media (max-width: 52rem) {
  :root { --bit-header-height: 4rem; }
  /* On the narrowest phones the description wraps to two lines instead of
     pushing the Menu button off screen. */
  .site-header .brand { flex: 0 1 auto; gap: .55rem; }
  .site-header .brand__mark { height: 2.75rem; }
  .site-header .brand__name { font-size: 1.5rem; }
  .site-header .brand__tag { font-size: .75rem; white-space: normal; text-wrap: balance; }
  .site-header__inner { gap: .75rem; }
  .site-nav { display: none; }
  .menu-button { display: inline-flex; padding-inline: .75rem; }
}
@media (min-width: 52.01rem) {
  .mobile-menu { display: none !important; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--bit-section-space); }
.section--flush-top { padding-top: 0; }
.section--tint { background: var(--bit-surface-tint); }
.section--blue { background: var(--bit-surface-blue); }
.section--rule > .container { position: relative; padding-top: var(--bit-section-space); }
.section--rule > .container::before { content: ''; position: absolute; top: 0; right: var(--bit-page-gutter); left: var(--bit-page-gutter); border-top: 1px solid var(--bit-border); }
.section--rule { padding-top: 0; }
.section--dark { background: var(--bit-dark); color: var(--bit-text-on-dark); }
.section--dark a:not(.button) { color: #fff; }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  gap: 1.5rem 3rem;
  align-items: end;
  margin-bottom: 2.5rem;
}
.section-head h2 { max-width: 30rem; }
.section-head__intro { color: var(--bit-text-muted); max-width: 32rem; }

.split { display: grid; gap: 2.5rem 4rem; align-items: center; }
.split__copy > p:not(.eyebrow) { color: var(--bit-text-muted); margin-top: 1.25rem; }
.split__copy h2 + p { margin-top: 1.5rem; }
.split__copy .button, .split__copy .text-link { margin-top: 1.5rem; }
.split--work { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.split--growth { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split--about { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; }
.split--faq { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); align-items: start; }
.split--contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }

@media (max-width: 56rem) {
  .section-head, .split--work, .split--growth, .split--about, .split--faq, .split--contact {
    grid-template-columns: minmax(0, 1fr);
  }
  .section-head { align-items: start; margin-bottom: 2rem; }
  /* Keep the project story ahead of the cover graphic on narrow screens. */
  .split--work .showcase { order: 2; }
}

/* ---------- Hero ---------- */
/* The band and lattice cover the whole hero, including the reassurance row. */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2rem, 1rem + 3vw, 4rem) clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.hero::before, .hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero::before {
  background:
    radial-gradient(ellipse 55% 70% at 78% 40%, rgb(255 255 255 / 70%), transparent 70%),
    linear-gradient(180deg, #e2eef8 0%, #e9f2f9 100%);
  border-bottom: 1px solid #d5e4ef;
}
.hero::after {
  background-image: var(--bit-lattice);
  background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 72% 40%, #000 0%, rgb(0 0 0 / 50%) 45%, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 90% at 72% 40%, #000 0%, rgb(0 0 0 / 50%) 45%, transparent 80%);
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: center; }
.hero__descriptor {
  display: inline-block;
  margin-bottom: 1.25rem;
  color: var(--bit-action);
  font-weight: 650;
  font-size: clamp(.9375rem, .9rem + .2vw, 1.0625rem);
  line-height: 1.45;
  padding-left: .85rem;
  border-left: 3px solid var(--bit-sky);
}
.hero h1 { font-size: var(--bit-size-hero); font-weight: 800; line-height: 1.06; letter-spacing: -.04em; max-width: 13ch; }
.hero h1 .accent { color: var(--bit-action); }
.hero__intro { margin-top: 1.5rem; font-size: var(--bit-size-lead); line-height: 1.65; color: #46525e; max-width: 33rem; }
.hero__area { display: flex; align-items: center; gap: .5rem; margin-top: 1.75rem; font-size: var(--bit-size-small); color: #46525e; }
.hero__area .icon { width: 1rem; height: 1rem; color: var(--bit-action); }

.hero__visual { display: flex; flex-direction: column; align-items: center; }
.hero__stage {
  position: relative;
  width: min(100%, 30rem);
  aspect-ratio: 1 / .62;
  display: grid;
  place-items: center;
}
.hero__stage::before {
  content: '';
  position: absolute;
  inset: 6% 14%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff 0%, rgb(255 255 255 / 75%) 45%, rgb(255 255 255 / 0%) 100%);
}
.hero__stage::after {
  content: '';
  position: absolute;
  left: 32%; right: 32%; bottom: 4%;
  height: 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(7 84 184 / 26%), transparent);
}
.hero__cube { position: relative; z-index: 1; width: 34%; margin-top: -2%; }

/* The kinds of work a project can grow through, as text on a connecting line
   (information, not buttons). Horizontal beside the copy; vertical on phones. */
.hero-path { width: min(100%, 32rem); margin-top: -.5rem; }
.hero-path__label { margin-bottom: 1rem; color: var(--bit-text-muted); font-size: .75rem; font-weight: 650; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.hero-path__list { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; list-style: none; }
.hero-path__list::before { content: ''; position: absolute; top: .925rem; left: 16%; right: 16%; height: 2px; background: linear-gradient(90deg, var(--bit-action), #b9d3ea); }
.hero-path__list li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; }
.hero-path__dot { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; margin-bottom: .35rem; background: #fff; border: 2px solid var(--bit-action); border-radius: 50%; color: var(--bit-action); font: 700 .8125rem/1 var(--bit-font-heading); }
.hero-path__list li:first-child .hero-path__dot { background: var(--bit-action); color: #fff; }
.hero-path__list strong { font: 700 1rem/1.25 var(--bit-font-heading); color: var(--bit-text); }
.hero-path__list span:last-child { color: #46525e; font-size: .875rem; line-height: 1.45; }

@media (max-width: 56rem) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { max-width: 16ch; }
}
@media (max-width: 40rem) {
  .hero__stage { width: min(100%, 18rem); aspect-ratio: 1 / .62; }
  .hero__cube { width: 40%; }
  .hero-path { width: 100%; margin-top: 0; }
  .hero-path__label { text-align: left; }
  .hero-path__list { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .hero-path__list::before { top: .925rem; bottom: .925rem; left: .925rem; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--bit-action), #b9d3ea); }
  .hero-path__list li { display: grid; grid-template-columns: 1.85rem minmax(0, 1fr); column-gap: .85rem; row-gap: .1rem; align-items: start; text-align: left; }
  .hero-path__dot { grid-row: span 2; margin: 0; }
}
@media (max-width: 26rem) {
  .hero .actions .button, .svc-hero .actions .button { width: 100%; }
}

/* ---------- Reassurance row ---------- */
.reassurance {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  padding-top: 1.1rem;
  list-style: none;
  border-top: 1px solid var(--bit-border);
  color: var(--bit-text);
  font-size: .9375rem;
  font-weight: 500;
}
.reassurance li { display: flex; align-items: center; gap: .6rem; }
.reassurance .icon { color: var(--bit-action); }
@media (max-width: 60rem) {
  .reassurance { justify-content: flex-start; }
}
@media (max-width: 40rem) {
  .reassurance { flex-direction: column; }
}

/* ---------- Cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 3rem; }
/* A quiet link under a grid, e.g. home's "Explore all services". */
.section-more { margin-top: 2rem; }
.service-card { display: flex; flex-direction: column; align-items: flex-start; padding-top: 1.5rem; border-top: 1px solid var(--bit-border); }
.service-card__label {
  margin-bottom: 1.5rem;
  color: var(--bit-action);
  font: 700 .875rem/1.4 var(--bit-font-heading);
}
.service-card h3 { max-width: 15ch; }
.service-card > p:not(.service-card__label) { margin-top: 1rem; margin-bottom: 1.25rem; color: var(--bit-text-muted); font-size: 1rem; }
.service-card .text-link { margin-top: auto; }
@media (max-width: 60rem) {
  .card-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .service-card h3 { max-width: none; }
}

/* ---------- Project media (Behrens Landscape) ---------- */
/* Client brand colors, used only for the Behrens Landscape project. */
:root {
  --bl-green-dark: #1b3a1d;
  --bl-green: #2a5c2d;
  --bl-accent: #3d8b40;
  --bl-light: #9fd8a1;
  --bl-pale: #f0f7f0;
  /* The site's isometric lattice (see --bit-lattice) drawn in client green. */
  --bl-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='27.7128'%3E%3Cpath d='M0 0L48 27.7128M48 0L0 27.7128M.5 0V27.7128M24 0V27.7128' fill='none' stroke='%232A5C2D' stroke-opacity='.12'/%3E%3C/svg%3E");
}

.browser-frame {
  background: #fff;
  border-radius: .6rem;
  box-shadow: 0 1.5rem 3rem -1.5rem rgb(0 0 0 / 45%), 0 0 0 1px rgb(23 23 23 / 8%);
}
.browser-frame__bar { display: flex; align-items: center; gap: .75rem; padding: .45rem .7rem; background: #f1f3f4; border-bottom: 1px solid #e1e4e6; border-radius: .6rem .6rem 0 0; }
.browser-frame__dots { display: flex; gap: .3rem; flex: none; }
.browser-frame__dots i { width: .55rem; height: .55rem; border-radius: 50%; background: #d3d8dc; }
.browser-frame__url {
  flex: 1;
  min-width: 0;
  padding: .1rem .65rem;
  background: #fff;
  border-radius: 999px;
  color: #5f6b75;
  font-size: .75rem;
  line-height: 1.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.browser-frame img { width: 100%; border-radius: 0 0 .6rem .6rem; }

.phone-frame { padding: .35rem; background: #111; border-radius: 1.35rem; box-shadow: 0 1.5rem 3rem -1rem rgb(0 0 0 / 55%); }
.phone-frame img { width: 100%; border-radius: 1.05rem; }

/* Live-site screenshots on a light gradient (pale green at the left fading to white)
   with the site's lattice in client green, and the Behrens Landscaping leaf at 50% color
   tilted and running off the top, right, and bottom edges. */
.showcase {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  overflow: hidden;
  background: linear-gradient(90deg, #dceedd 0%, #f3f9f3 55%, #fff 100%);
  border: 1px solid var(--bit-border);
  border-radius: var(--bit-radius-image);
}
.showcase::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--bl-lattice);
  /* Fades out with the gradient, from the green left edge toward the white right. */
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgb(0 0 0 / 55%) 50%, transparent 95%);
  mask-image: linear-gradient(90deg, #000 0%, rgb(0 0 0 / 55%) 50%, transparent 95%);
  pointer-events: none;
}
.showcase__mark {
  position: absolute;
  top: 50%;
  right: -12%;
  z-index: -1;
  width: auto;
  height: 135%;
  max-width: none;
  transform: translateY(-50%) rotate(-10deg);
  pointer-events: none;
}
.showcase__logo { align-self: flex-start; }
.showcase__logo img { width: clamp(8.5rem, 7rem + 5vw, 12rem); }
.showcase__devices { position: relative; padding: 0 13% 7% 0; }
.showcase__phone { position: absolute; right: 0; bottom: 0; width: 25%; }

/* Case-study screenshots: framed image and caption, then the numbered notes. */
/* Single minmax(0, 1fr) columns keep a long frame label from widening the figure;
   the label truncates instead. */
.shot { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; min-width: 0; }
.shot__figure { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin: 0; }
.browser-frame--shot,
.browser-frame--hero { border: 1px solid var(--bit-border); border-radius: .75rem; }
.browser-frame--shot { box-shadow: 0 1px 2px rgb(23 23 23 / 4%), 0 .75rem 2rem -1rem rgb(23 23 23 / 18%); }
.browser-frame--hero { box-shadow: 0 2px 4px rgb(23 23 23 / 4%), 0 1.5rem 3rem -1.25rem rgb(23 23 23 / 25%); }
:is(.browser-frame--shot, .browser-frame--hero) .browser-frame__bar { padding: .5rem .75rem; background: #f4f5f4; border-bottom-color: #e6e9ea; border-radius: calc(.75rem - 1px) calc(.75rem - 1px) 0 0; }
:is(.browser-frame--shot, .browser-frame--hero) .browser-frame__dots i { width: .5rem; height: .5rem; background: #d3d8da; }
:is(.browser-frame--shot, .browser-frame--hero) .browser-frame__url { padding: .3125rem .625rem; border: 1px solid #e6e9ea; border-radius: .375rem; color: var(--bit-text-muted); font-weight: 500; line-height: 1; }
:is(.browser-frame--shot, .browser-frame--hero) img { border-radius: 0 0 calc(.75rem - 1px) calc(.75rem - 1px); }
.browser-frame__zoom {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .3rem;
  min-height: 1.75rem;
  padding: 0 .55rem;
  background: #fff;
  border: 1px solid #e6e9ea;
  border-radius: .375rem;
  color: var(--bit-text-muted);
  font: 600 .75rem/1 var(--bit-font-body);
  cursor: pointer;
}
.browser-frame__zoom[hidden] { display: none; }
.browser-frame__zoom:hover { border-color: var(--bit-border); color: var(--bit-text); }
.browser-frame__zoom .icon { width: .875rem; height: .875rem; stroke-width: 2; }
.browser-frame__media img.is-zoomable { cursor: zoom-in; }

/* Enlarged screenshot: fills most of the window; tall images scroll inside it.
   On phones it is full screen and the image is shown wider than the screen so
   interface text is readable; drag to look around. The bar and the scroll hint
   keep their height and the image area takes the rest. */
.lightbox {
  width: min(96vw, 100rem);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-radius: .75rem;
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 35%);
}
.lightbox[open] { display: flex; flex-direction: column; }
.lightbox::backdrop { background: rgb(17 17 17 / 78%); }
.lightbox__bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .5rem .5rem 1rem; border-bottom: 1px solid var(--bit-border); }
.lightbox__caption { min-width: 0; color: var(--bit-text-muted); font-size: .875rem; line-height: 1.45; }
.lightbox__close {
  flex: none;
  min-height: var(--bit-target-min);
  padding: 0 1rem;
  background: var(--bit-text);
  border: 0;
  border-radius: .5rem;
  color: #fff;
  font: 600 .9375rem/1 var(--bit-font-body);
  cursor: pointer;
}
.lightbox__close:hover { background: #333; }
.lightbox__hint { flex: none; padding: .375rem 1rem; background: var(--bit-surface-tint); border-bottom: 1px solid var(--bit-border); color: var(--bit-text-muted); font-size: .8125rem; line-height: 1.4; text-align: center; }
.lightbox__body { flex: 0 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.lightbox__body:focus-visible { outline: 3px solid var(--bit-action); outline-offset: -3px; }
.lightbox__img { display: block; width: auto; max-width: 100%; height: auto; margin-inline: auto; }
html.has-lightbox { overflow: hidden; }
@media (max-width: 48rem) {
  .lightbox { width: 100vw; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; }
  .lightbox__caption { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  /* Short images sit in the middle; auto margins collapse when the image is taller. */
  .lightbox__body { flex: 1 1 auto; display: flex; flex-direction: column; background: #eef0ef; }
  .lightbox__img { flex: none; align-self: flex-start; width: 56rem; max-width: none; margin-block: auto; }
}
.shot__caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem .625rem; color: var(--bit-text-muted); font-size: .875rem; line-height: 1.5; text-wrap: pretty; }
.demo-badge {
  padding: .25rem .375rem;
  background: var(--bl-pale);
  border: 1px solid #c9e3ca;
  border-radius: .25rem;
  color: var(--bl-green);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}
/* Notes are collapsed under each screenshot; the markers on the image work either way. */
.shot-notes summary { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--bit-target-min); color: var(--bit-text); font-size: .875rem; font-weight: 600; cursor: pointer; list-style: none; }
.shot-notes summary::-webkit-details-marker { display: none; }
.shot-notes summary::before { content: ''; width: .45rem; height: .45rem; margin-inline: .15rem .1rem; border-right: 2px solid var(--bl-green); border-bottom: 2px solid var(--bl-green); transform: rotate(-45deg); transition: transform var(--bit-transition); }
.shot-notes[open] summary::before { transform: rotate(45deg); }
.shot-notes summary:hover { text-decoration: underline; text-underline-offset: .2em; }
.shot-notes__count { color: var(--bit-text-muted); font-weight: 400; }
.shot-notes ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 2px 1.25rem; margin-top: .25rem; list-style: none; }
.shot-notes li { display: flex; gap: .625rem; margin-inline: -.5rem; padding: .5rem; border-radius: .5rem; color: #3a424a; font-size: .84375rem; line-height: 1.5; transition: background-color var(--bit-transition); }
.shot-notes li.is-active { background: var(--bl-pale); }
.shot-notes strong { color: var(--bit-text); font-weight: 600; }
.shot-notes__num { flex: none; width: 1.25rem; height: 1.25rem; border: 1.5px solid var(--bl-green); border-radius: 50%; color: var(--bl-green); font: 700 .6875rem/1.0625rem var(--bit-font-heading); text-align: center; }

/* Screenshot notes: numbered markers that open a note on hover, focus, or tap.
   Positioned by site.js; hidden without JavaScript (the list carries the notes). */
.browser-frame__media { position: relative; container-type: inline-size; }
.hotspot { display: none; }
.js .hotspot {
  display: block;
  position: absolute;
  z-index: 2;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.hotspot__num {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--bl-green);
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgb(42 92 45 / 22%), 0 2px 6px rgb(0 0 0 / 25%);
  color: #fff;
  font: 700 .75rem/1 var(--bit-font-heading);
  transition: background-color var(--bit-transition);
}
.hotspot:hover .hotspot__num, .hotspot:focus-visible .hotspot__num, .hotspot[aria-expanded='true'] .hotspot__num { background: var(--bit-text); }
/* The active marker (and its note) sits above every other marker. */
.js .hotspot:hover, .js .hotspot:focus-visible, .js .hotspot[aria-expanded='true'] { z-index: 6; }
.hotspot:focus-visible { outline: 3px solid var(--bit-action); outline-offset: 3px; }
.hotspot__tip {
  position: absolute;
  top: calc(100% + .375rem);
  left: -.25rem;
  z-index: 2;
  display: none;
  width: 16.25rem;
  max-width: 60vw;
  padding: .75rem .875rem;
  background: #fff;
  border: 1px solid var(--bit-border);
  border-radius: .625rem;
  box-shadow: 0 .75rem 1.75rem -.5rem rgb(23 23 23 / 28%);
  color: #3a424a;
  font: 400 .84375rem/1.5 var(--bit-font-body);
  text-align: left;
  pointer-events: none;
}
.hotspot__tip strong { display: block; margin-bottom: .25rem; color: var(--bit-text); font: 700 .875rem/1.3 var(--bit-font-heading); }
.hotspot:hover .hotspot__tip, .hotspot:focus-visible .hotspot__tip, .hotspot[aria-expanded='true'] .hotspot__tip { display: block; }
.hotspot--left .hotspot__tip { left: auto; right: -.25rem; }
.hotspot--up .hotspot__tip { top: auto; bottom: calc(100% + .375rem); }
/* Smaller markers on narrow screenshots so they hide less of the image. */
@container (max-width: 30rem) {
  .js .hotspot { width: 1.375rem; height: 1.375rem; }
  .hotspot__num { border-width: 1.5px; font-size: .625rem; box-shadow: 0 0 0 3px rgb(42 92 45 / 22%), 0 1px 4px rgb(0 0 0 / 25%); }
}

/* ---------- Growth (charcoal) ---------- */
.growth__heading { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.9rem); max-width: 14ch; }
.growth__intro { margin-top: 1.5rem; color: var(--bit-muted-on-dark); max-width: 28rem; line-height: 1.8; }
/* Reasons, not steps: unnumbered, with a short sky rule above each title. */
.growth-points { list-style: none; }
.growth-points li { padding-block: 1.5rem; border-bottom: 1px solid var(--bit-dark-line); }
.growth-points li:first-child { padding-top: 0; }
.growth-points li:last-child { border-bottom: 0; padding-bottom: 0; }
.growth-points h3 { font-size: 1.25rem; }
.growth-points h3::before { content: ''; display: block; width: 1.5rem; height: 2px; margin-bottom: .75rem; background: var(--bit-sky); }
.growth-points p { margin-top: .4rem; color: var(--bit-muted-on-dark); font-size: 1rem; }

/* ---------- Process ---------- */
.process { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 1.5rem; list-style: none; }
.process__step { padding-top: 1.25rem; border-top: 2px solid #cfd9df; }
.process__step:first-child { border-top-color: var(--bit-action); }
.process__num { display: block; margin-bottom: 1rem; color: var(--bit-action); font: 700 .875rem/1.4 var(--bit-font-heading); }
.process__step h3 { font-size: 1.1875rem; }
.process__step p { margin-top: .75rem; color: var(--bit-text-muted); font-size: 1rem; line-height: 1.65; }
@media (max-width: 60rem) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .process { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Identity byline (About page, home) ---------- */
/* A small mark (photo or initials) beside the name and role. */
.identity { display: flex; align-items: center; gap: .875rem; margin-top: 1.5rem; }
.identity__mark, .identity__photo { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; }
.identity__mark { display: grid; place-items: center; background: var(--bit-action); color: #fff; font: 700 1.0625rem/1 var(--bit-font-heading); letter-spacing: .02em; }
.identity__photo { object-fit: cover; }
.identity__text { display: grid; gap: .1rem; line-height: 1.35; }
.identity__text strong { font: 700 1.0625rem/1.3 var(--bit-font-heading); color: var(--bit-text); }
.identity__text span { color: var(--bit-text-muted); font-size: .9375rem; }
.identity__role-part { white-space: nowrap; }
@media (max-width: 30rem) { .identity__sep { display: none; } .identity__role-part { display: block; } }

/* ---------- FAQ ---------- */
.faq-list { border-top: 1px solid var(--bit-border); }
.faq { border-bottom: 1px solid var(--bit-border); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--bit-target-min);
  padding-block: 1.1rem;
  font: 700 1.0625rem/1.45 var(--bit-font-heading);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--bit-action); }
.faq__marker { position: relative; flex: none; width: 1rem; height: 1rem; }
.faq__marker::before, .faq__marker::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 2px;
  background: var(--bit-action);
  transition: transform var(--bit-transition);
}
.faq__marker::after { transform: rotate(90deg); }
.faq[open] .faq__marker::after { transform: rotate(0deg); }
.faq__answer { padding-bottom: 1.25rem; color: var(--bit-text-muted); font-size: 1rem; max-width: var(--bit-reading-max); }

/* ---------- Contact and form ---------- */
.contact-copy > p:not(.eyebrow) { margin-top: 1.25rem; color: var(--bit-text-muted); max-width: 26rem; }
.contact-copy h1, .contact-copy h2 { max-width: 14ch; }
.contact-copy h1 { font-size: var(--bit-size-page); }
.contact-copy__small { font-size: var(--bit-size-small); }
.contact-copy__email { display: flex; align-items: flex-start; gap: .6rem; color: var(--bit-text) !important; font-weight: 500; }
.contact-copy__email .icon { margin-top: .2rem; color: var(--bit-action); }
.contact-copy__email a { font-weight: 650; }
.contact-page { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

/* Email contact panel (shown while form delivery isn't configured). */
.email-panel { background: var(--bit-surface); border: 1px solid var(--bit-border); border-radius: var(--bit-radius); padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); }
.email-panel__title { font-size: var(--bit-size-card); }
.email-panel__lead { margin-top: .5rem; color: var(--bit-text-muted); }
.email-panel__address { margin-top: 1.25rem; padding: .75rem 1rem; background: var(--bit-surface-tint); border-radius: .5rem; color: var(--bit-text); font: 700 clamp(1.125rem, 1rem + .6vw, 1.375rem)/1.3 var(--bit-font-heading); overflow-wrap: anywhere; user-select: all; }
.email-panel__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.email-panel__actions .button .icon { margin-right: .5rem; }
.email-panel__status { margin-top: .5rem; color: var(--bit-success); font-size: var(--bit-size-small); }
.email-panel__status:empty { display: none; }
.email-panel__prompts-title { margin-top: 1.5rem; color: var(--bit-text); font-weight: 650; }
.email-panel__prompts { display: grid; gap: .375rem; margin-top: .625rem; list-style: none; color: var(--bit-text-muted); }
.email-panel__prompts li { position: relative; padding-left: 1.125rem; }
.email-panel__prompts li::before { content: ''; position: absolute; top: .65em; left: 0; width: .375rem; height: .375rem; border-radius: 50%; background: var(--bit-ocean); }
.email-panel__note { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--bit-border); color: var(--bit-text-muted); font-size: var(--bit-size-small); }
@media (max-width: 26rem) { .email-panel__actions .button { width: 100%; } }

.inquiry-form {
  background: var(--bit-surface);
  border: 1px solid var(--bit-border);
  border-radius: var(--bit-radius);
  padding: clamp(1.25rem, 1rem + 1.2vw, 2rem);
}
.form-notice { margin-bottom: 1.25rem; padding: .9rem 1rem; background: var(--bit-notice-surface); border: 1px solid var(--bit-notice-border); border-radius: var(--bit-radius); font-size: .9375rem; }
.form-notice a { font-weight: 650; }
.inquiry-form__required-note { margin-bottom: 1.25rem; color: var(--bit-text-muted); font-size: var(--bit-size-small); }
.inquiry-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.field--full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 600; font-size: .9375rem; line-height: 1.4; }
.field__optional { font-weight: 400; color: var(--bit-text-muted); }
.field__required { color: var(--bit-error); }
.field input, .field select, .field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--bit-target-min);
  margin-top: .45rem;
  padding: .6rem .75rem;
  background: var(--bit-surface);
  color: var(--bit-text);
  border: 1px solid var(--bit-field-border);
  border-radius: var(--bit-radius);
  font: 400 1rem/1.5 var(--bit-font-body);
  transition: border-color var(--bit-transition), box-shadow var(--bit-transition);
}
.field select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171717' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 1.1rem;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #56636c; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 3px solid var(--bit-action);
  outline-offset: 1px;
  border-color: var(--bit-action);
}
.field__hint { margin-top: .35rem; color: var(--bit-text-muted); font-size: var(--bit-size-small); }
.field__error {
  display: flex;
  gap: .4rem;
  margin-top: .4rem;
  color: var(--bit-error);
  font-size: var(--bit-size-small);
  font-weight: 600;
}
.field__error::before { content: '!'; display: inline-grid; place-items: center; flex: none; width: 1.1rem; height: 1.1rem; margin-top: .1rem; border-radius: 50%; background: var(--bit-error); color: #fff; font-size: .75rem; }
.field__error[hidden] { display: none; }
.field [aria-invalid='true'] { border-color: var(--bit-error); border-width: 2px; padding: calc(.6rem - 1px) calc(.75rem - 1px); }
.field select[aria-invalid='true'] { padding-right: calc(2.5rem - 1px); }

.field--trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Room for the spam check before it loads, so the Submit button doesn't move:
   72px for the flexible widget, 147px for the compact one site.js picks when
   the space is under 300px wide. */
.inquiry-form__check { min-height: 4.5rem; container-type: inline-size; }
@container (max-width: 299.98px) {
  .cf-turnstile { min-height: 9.1875rem; }
}
.inquiry-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; margin-top: 1.5rem; }
.inquiry-form__submit { min-width: 13.5rem; }
.inquiry-form__privacy { font-size: var(--bit-size-small); }

.form-status:empty { margin: 0; padding: 0; border: 0; }
.form-status { margin-top: 1.25rem; padding: .9rem 1rem; border-radius: var(--bit-radius); border: 1px solid; border-left-width: 4px; font-size: .9375rem; }
.form-status--notice { background: var(--bit-notice-surface); border-color: var(--bit-notice-border); color: var(--bit-text); }
.form-status--error { background: var(--bit-error-surface); border-color: var(--bit-error); color: #7a1a12; }
.form-status--success { background: var(--bit-success-surface); border-color: var(--bit-success); color: #0e4f21; }
.form-status a { font-weight: 650; color: inherit; }

@media (max-width: 40rem) {
  .inquiry-form__grid { grid-template-columns: minmax(0, 1fr); }
  .inquiry-form__submit { width: 100%; }
}

/* ---------- Inner pages ---------- */
.page-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(2.5rem, 1.5rem + 3vw, 4rem);
  margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  background: linear-gradient(180deg, #e4f0f8 0%, #eef5fa 100%);
  border-bottom: 1px solid #d5e4ef;
}
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--bit-lattice);
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at 85% 30%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 50% 100% at 85% 30%, #000, transparent 75%);
  pointer-events: none;
}
.page-hero .lead { color: #46525e; }
.page-hero h1 { max-width: 20ch; }

.subnav { margin-bottom: .5rem; }
.subnav ul { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding-bottom: 1rem; }
.subnav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--bit-target-min);
  padding: .4rem .9rem;
  border: 1px solid var(--bit-border);
  border-radius: 999px;
  background: var(--bit-surface);
  color: var(--bit-text);
  font-size: .9375rem;
  font-weight: 500;
  text-decoration: none;
}
.subnav a:hover { border-color: var(--bit-action); color: var(--bit-action); }

/* ---------- Services hub and service pages ---------- */
/* Hero: copy beside a photo, on the site's light blue band with the lattice. */
.svc-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2rem, 1rem + 3vw, 3.75rem);
  background: linear-gradient(180deg, #e2eef8 0%, #eef4f9 100%);
  border-bottom: 1px solid #d5e4ef;
}
.svc-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--bit-lattice);
  -webkit-mask-image: radial-gradient(ellipse 60% 100% at 15% 30%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 100% at 15% 30%, #000, transparent 75%);
  pointer-events: none;
}
.svc-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2rem 3.5rem; align-items: center; }
.svc-hero .breadcrumb ol { margin-bottom: 1.25rem; }
.svc-hero h1 { max-width: 18ch; font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.25rem); letter-spacing: -.03em; line-height: 1.08; }
.svc-hero .lead { margin-top: 1.25rem; max-width: 36rem; color: #46525e; }
.svc-hero .actions { margin-top: 1.75rem; }
.svc-hero__media { position: relative; min-width: 0; }
.svc-hero__art { display: block; width: 100%; max-width: 34rem; height: auto; margin-inline: auto; }

/* Illustration motion: halos pulse and floating cards drift, each on its own
   timing. Only when the visitor hasn't asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .fx-art .fx-backdrop { transform-box: fill-box; transform-origin: center; animation: fx-breathe 10s ease-in-out infinite; }
  .fx-art .fx-halo { transform-box: fill-box; transform-origin: center; animation: fx-pulse 3s ease-in-out infinite; }
  .fx-art .fx-float-1 { animation: fx-drift-a 7s ease-in-out infinite; }
  .fx-art .fx-float-2 { animation: fx-drift-b 8s ease-in-out -2.5s infinite; }
  .fx-art .fx-float-3 { animation: fx-drift-a 9s ease-in-out -5s infinite reverse; }
  /* The connector lines here stay put, so these cards move less. */
  .fx-art--business-applications .fx-float { animation-name: fx-drift-small; }
}
@keyframes fx-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes fx-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.14); opacity: .45; } }
@keyframes fx-drift-a { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(4px, -9px); } 66% { transform: translate(-3px, -4px); } }
@keyframes fx-drift-small { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -3px); } }
@keyframes fx-drift-b { 0%, 100% { transform: translate(0, 0); } 40% { transform: translate(-5px, -7px); } 75% { transform: translate(3px, -11px); } }
.svc-hero__shot { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin: 0; }
.svc-hero__img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--bit-radius-image);
  box-shadow: 0 1.5rem 3rem -1.75rem rgb(7 84 184 / 45%);
}
@media (max-width: 56rem) {
  .svc-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .svc-hero__media { max-width: 36rem; }
}
/* Phones: a tighter hero, and no decorative images (the stock photo and the
   drawings); real screenshots stay. */
@media (max-width: 40rem) {
  .svc-hero { padding-block: 1.5rem 1.75rem; }
  .svc-hero .lead { margin-top: 1rem; font-size: 1.0625rem; }
  .svc-hero .actions { margin-top: 1.25rem; }
  .svc-hero__media:has(> .svc-hero__img, > .svc-hero__art) { display: none; }
  .svc-overview__art { display: none; }
}

.svc-section-title { margin-bottom: 2rem; font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); }
.svc-section-title:has(+ .svc-section-lead) { margin-bottom: .75rem; }
.svc-section-lead { max-width: 40rem; margin-bottom: 2rem; color: var(--bit-text-muted); }

/* Service list: circle icon, heading, short description, and one link, as open
   text on a thin rule (no box, no tag pills). The link covers the whole item. */
.svc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem 3rem; list-style: none; }
.svc-cards--related { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 52rem; }
.svc-card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding-top: 1.5rem; border-top: 1px solid var(--bit-border); }
.svc-card__head { display: flex; align-items: center; gap: .875rem; }
.svc-card__icon { flex: none; width: 2.75rem; height: 2.75rem; }
.svc-card h3 { font-size: 1.1875rem; line-height: 1.25; }
.svc-card > p { color: var(--bit-text-muted); font-size: .9688rem; }
.svc-card .text-link { margin-top: auto; padding-top: .25rem; font-size: .9375rem; }
.svc-card .text-link::after { content: ''; position: absolute; inset: 0; }
.svc-card .text-link:focus-visible { outline: none; }
.svc-card:has(.text-link:focus-visible) { outline: 3px solid var(--bit-action); outline-offset: 6px; border-radius: 2px; }
@media (max-width: 64rem) { .svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .svc-cards, .svc-cards--related { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

/* Hub: each service linked to the part of the case study that shows it. The tiles sit
   under the intro so they get the full width and every name fits on two lines. */
.svc-proof { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 2rem; }
.svc-proof .split__copy { max-width: 44rem; }
/* Every tile is the same height (rows share the tallest), whatever the name length. */
.svc-proof__links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: .75rem; list-style: none; }
@media (max-width: 72rem) { .svc-proof__links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc-proof__links li { display: flex; }
.svc-proof__links li > a { flex: 1; }
.svc-proof__links a {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 3.75rem;
  padding: .625rem .875rem;
  background: var(--bit-surface);
  border: 1px solid var(--bit-border);
  border-radius: var(--bit-radius);
  color: var(--bit-text);
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}
.svc-proof__links a:hover { border-color: var(--bit-action); color: var(--bit-action); }
.svc-proof__links img { flex: none; width: 2.25rem; height: 2.25rem; }
.svc-proof__links span { flex: 1; }
.svc-proof__links .icon { flex: none; width: 1rem; height: 1rem; color: var(--bit-action); }
@media (max-width: 30rem) { .svc-proof__links { grid-template-columns: minmax(0, 1fr); } }

/* Service page: included items as a jump bar under the hero. */
.svc-subnav { padding-top: 1.5rem; }
/* The summary only appears on phones, where the list becomes a menu. */
.svc-jump > summary { display: none; }
@media (max-width: 40rem) {
  .svc-subnav { padding-top: 1.25rem; margin-bottom: 0; }
  .svc-jump { background: var(--bit-surface); border: 1px solid var(--bit-border); border-radius: var(--bit-radius); }
  .svc-jump > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--bit-target-min);
    padding: .5rem 1rem;
    color: var(--bit-text);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }
  .svc-jump > summary::-webkit-details-marker { display: none; }
  .svc-jump > summary::after { content: ''; flex: none; width: .5rem; height: .5rem; margin-right: .25rem; border-right: 2px solid var(--bit-action); border-bottom: 2px solid var(--bit-action); transform: translateY(-25%) rotate(45deg); }
  .svc-jump[open] > summary::after { transform: translateY(25%) rotate(-135deg); }
  .svc-jump ul { display: grid; gap: 0; padding: 0 1rem .5rem; }
  .svc-jump a { width: 100%; min-height: var(--bit-target-min); padding: .5rem 0; border: 0; border-top: 1px solid var(--bit-border); border-radius: 0; background: none; }
}

/* Overview: heading beside the paragraphs on wide screens. Pages whose intro shows a
   real screenshot add the service illustration here instead (one drawing per page). */
.svc-overview { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 1rem 4rem; align-items: start; }
.svc-overview__copy p { max-width: var(--bit-reading-max); color: var(--bit-text-muted); font-size: 1.0625rem; }
.svc-overview__copy p + p { margin-top: 1.1rem; }
.svc-overview--art { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: 'title art' 'copy art'; grid-template-rows: auto 1fr; column-gap: 4rem; }
.svc-overview--art h2 { grid-area: title; }
.svc-overview--art .svc-overview__copy { grid-area: copy; }
.svc-overview__art { display: block; grid-area: art; align-self: center; width: 100%; height: auto; }
@media (max-width: 56rem) {
  .svc-overview, .svc-overview--art { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; grid-template-rows: none; }
  .svc-overview--art h2, .svc-overview--art .svc-overview__copy, .svc-overview__art { grid-area: auto; }
  .svc-overview__art { max-width: 30rem; margin-top: 1rem; }
}

/* What I can help with: open items with a short blue rule, not boxed cards. */
.svc-includes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; list-style: none; }
.svc-includes li { scroll-margin-top: calc(var(--bit-header-height) + 1.5rem); }
.svc-includes h3 { font-size: 1.125rem; }
.svc-includes h3::before { content: ''; display: block; width: 1.5rem; height: 2px; margin-bottom: .75rem; background: var(--bit-action); }
.svc-includes p { margin-top: .5rem; color: var(--bit-text-muted); font-size: .9688rem; }
.svc-note { margin-top: 2rem; padding-left: 1rem; max-width: 44rem; border-left: 2px solid var(--bit-ocean); color: var(--bit-text); font-size: .9375rem; }
@media (max-width: 64rem) { .svc-includes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .svc-includes { grid-template-columns: minmax(0, 1fr); } }

/* In practice: heading and proof points, then the real screenshots at full width. */
#in-practice { scroll-margin-top: var(--bit-header-height); }
.svc-practice { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1.5rem 4rem; align-items: start; }
.svc-practice h2 { margin-bottom: 1.25rem; }
.svc-practice__points { gap: .75rem; }
@media (max-width: 56rem) { .svc-practice { grid-template-columns: minmax(0, 1fr); } }
.svc-practice__shots { display: grid; gap: 2.5rem 2rem; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); align-items: start; }
.svc-practice__shots--one { max-width: 56rem; }
.svc-practice__shots--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 48rem) { .svc-practice__shots--pair { grid-template-columns: minmax(0, 1fr); } }

.svc-all { margin-top: 1.75rem; }

.prose { max-width: var(--bit-reading-max); }
.prose--narrow { max-width: 44rem; }
.prose > p { color: var(--bit-text-muted); }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { margin-top: 2.5rem; }
.prose > h2:first-child { margin-top: 0; }
.privacy-updated { color: var(--bit-text-muted) !important; font-size: var(--bit-size-small); }
.prose h3 { margin-top: 1.75rem; font-size: 1.125rem; }
.prose .actions { margin-top: 2rem; }

.check-list { list-style: none; display: grid; gap: .5rem; }
.check-list li { position: relative; padding-left: 1.75rem; color: var(--bit-text); }
.check-list li::before {
  content: '';
  position: absolute;
  left: .2rem; top: .5em;
  width: .8rem; height: .45rem;
  border-left: 2px solid var(--bit-action);
  border-bottom: 2px solid var(--bit-action);
  transform: rotate(-45deg);
}


.cta-band { padding-block: clamp(3rem, 2rem + 3vw, 4.5rem); }
.cta-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.cta-band h2 { max-width: 22ch; }
.cta-band p { margin-top: 1rem; max-width: 36rem; color: var(--bit-muted-on-dark); }

/* Work: the showcase beside the summary, open on the page (no outer frame). */
.project-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2rem 3.5rem;
  align-items: center;
}
.project-card__body > p:not(.eyebrow) { margin-top: 1rem; color: var(--bit-text-muted); }
.project-card__body h2 a { color: inherit; text-decoration: none; }
.project-card__body h2 a:hover { color: var(--bit-action); text-decoration: underline; }
.project-card__body .button { margin-top: 1.75rem; }
@media (max-width: 56rem) { .project-card { grid-template-columns: minmax(0, 1fr); } }

.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin-bottom: 1.5rem; font-size: var(--bit-size-small); color: var(--bit-text-muted); }
.breadcrumb li + li::before { content: '/'; margin-right: .4rem; color: #9aa6af; }

/* ---------- Case study: structured report (handoff 2026-10-26) ---------- */
/* Light hero: pale client green on the left fading to white, live-site screenshots
   on the right with the Behrens leaf behind them, and the project facts in a row
   along the bottom. */
.cs-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(90deg, #dceedd 0%, #f3f9f3 55%, #fff 100%);
  border-bottom: 1px solid var(--bit-border);
}
/* The client-green lattice follows the gradient: strongest on the green left,
   gone by the white right, with a soft clear zone behind the text. The leaf
   (50% color, solid) sits above it. */
.cs-hero::before {
  --clear: radial-gradient(ellipse 30% 58% at 27% 42%, #000 45%, transparent 100%);
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: var(--bl-lattice);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgb(0 0 0 / 55%) 50%, transparent 95%), var(--clear);
  -webkit-mask-composite: source-out;
  mask-image: linear-gradient(90deg, #000 0%, rgb(0 0 0 / 55%) 50%, transparent 95%), var(--clear);
  mask-composite: subtract;
  pointer-events: none;
}
/* Stacked hero: the text sits across the top, above the screenshots. */
@media (max-width: 63rem) {
  .cs-hero::before { --clear: radial-gradient(ellipse 80% 26% at 40% 22%, #000 45%, transparent 100%); }
}
/* Sized from the screenshot group: large enough to frame it, shifted right so it
   shows beside and above the screenshots, and clipped by the hero edges. */
.cs-hero__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: auto;
  height: 200%;
  max-width: none;
  transform: translate(-15%, -50%) rotate(-10deg);
  pointer-events: none;
}
.cs-hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 27.5rem), 1fr));
  gap: 3rem 4rem;
  align-items: center;
  padding-block: clamp(1.75rem, 4vw, 3rem) clamp(1.75rem, 3.5vw, 2.5rem);
}
.cs-hero__copy { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.cs-hero .breadcrumb ol { margin-bottom: 1.25rem; }
/* The current page reads as text (and stays legible over the leaf). */
.cs-hero .breadcrumb li[aria-current] { color: var(--bit-text); }
.cs-hero .eyebrow { color: var(--bl-green); font-size: .78125rem; font-weight: 600; letter-spacing: .1em; }
.cs-hero .eyebrow::before { width: 1.5rem; background: var(--bl-accent); }
.cs-hero h1 { max-width: 16ch; margin-bottom: 1.25rem; font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.625rem); font-weight: 800; line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
.cs-hero__intro { max-width: 56ch; margin-bottom: 1.75rem; color: #3a424a; font-size: clamp(1.0625rem, 1.05rem + .3vw, 1.25rem); line-height: 1.6; text-wrap: pretty; }
.cs-visit {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  min-height: var(--bit-target-min);
  padding: 0 1rem 0 1.125rem;
  background: var(--bl-green-dark);
  border-radius: .5rem;
  color: #fff;
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
}
.cs-visit:hover { background: var(--bl-green); color: #fff; }
.cs-visit__icon { width: .875rem; height: .875rem; stroke-width: 2.2; }
.cs-hero__devices { position: relative; min-width: 0; padding: 0 6% 2rem 0; }
.cs-hero__phone { position: absolute; right: 0; bottom: 0; width: 22%; min-width: 5.75rem; }
.cs-hero__phone .phone-frame { padding: 5px; background: var(--bit-text); border-radius: 1.375rem; box-shadow: 0 1.25rem 2.5rem -1rem rgb(23 23 23 / 45%); }
.cs-hero__phone .phone-frame img { border-radius: 1rem; }

.cs-facts-band { background: var(--bit-bg); border-top: 1px solid var(--bit-border); }
.cs-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-block: 0; }
.cs-facts > div { padding: 1.25rem; border-right: 1px solid #e6e9ea; }
.cs-facts > div:first-child { padding-left: 0; }
.cs-facts > div:last-child { padding-right: 0; border-right: 0; }
.cs-facts dt { margin-bottom: .5rem; color: var(--bit-text-muted); font-size: .71875rem; font-weight: 600; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; }
.cs-facts dd { margin: 0; font-size: .9375rem; font-weight: 500; line-height: 1.45; }
.cs-facts__logo { width: min(100%, 12.5rem); height: auto; }
@media (max-width: 64rem) {
  .cs-facts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); column-gap: 2rem; }
  .cs-facts > div, .cs-facts > div:first-child, .cs-facts > div:last-child { padding: 1rem 0; border-right: 0; border-bottom: 1px solid #e6e9ea; }
  .cs-facts > div:last-child { border-bottom: 0; }
}

/* Article with a grouped section list beside it on wide screens. The list stays
   in view as the page scrolls and never scrolls on its own: on shorter windows it
   drops the group labels and tightens up so it still fits. */
.cs-layout { display: grid; grid-template-columns: 14.25rem minmax(0, 1fr); gap: 4rem; align-items: start; padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3.5rem, 6vw, 5.5rem); }
.cs-main { min-width: 0; max-width: 53.75rem; }
.cs-aside { position: sticky; top: calc(var(--bit-header-height) + 1.25rem); }
@media (max-height: 31rem) { .cs-aside { position: static; } }
@media (max-width: 62.5rem) {
  .cs-layout { grid-template-columns: minmax(0, 1fr); }
  .cs-aside { display: none; }
}
/* Below the sidebar breakpoint: a slim bar that sticks under the site header,
   names the section being read, and opens the full list. */
.cs-jump { display: none; }
@media (max-width: 62.5rem) {
  .cs-jump {
    display: block;
    position: sticky;
    top: var(--bit-header-height);
    z-index: 20;
    margin: calc(-1 * clamp(2.5rem, 5vw, 4rem)) calc(-1 * var(--bit-page-gutter)) 2rem;
    background: rgb(250 250 248 / 96%);
    border-bottom: 1px solid var(--bit-border);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  .cs-jump summary {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: var(--bit-target-min);
    padding: .375rem var(--bit-page-gutter);
    cursor: pointer;
    list-style: none;
  }
  .cs-jump summary::-webkit-details-marker { display: none; }
  .cs-jump summary::after { content: ''; flex: none; width: .5rem; height: .5rem; margin-left: auto; border-right: 2px solid var(--bl-green); border-bottom: 2px solid var(--bl-green); transform: translateY(-25%) rotate(45deg); }
  .cs-jump details[open] summary::after { transform: translateY(25%) rotate(-135deg); }
  .cs-jump__label { flex: none; color: var(--bit-text-muted); font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
  .cs-jump__current { min-width: 0; overflow: hidden; color: var(--bit-text); font-size: .875rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  /* The open list drops down over the page instead of pushing it down. */
  .cs-jump details { position: relative; }
  .cs-jump ol { position: absolute; top: 100%; right: 0; left: 0; max-height: min(60vh, 26rem); overflow-y: auto; padding: 0 var(--bit-page-gutter) .75rem; background: var(--bit-bg); border-bottom: 1px solid var(--bit-border); box-shadow: 0 1rem 1.5rem -1rem rgb(23 23 23 / 30%); list-style: none; }
  .cs-jump a { display: flex; align-items: center; gap: .625rem; min-height: var(--bit-target-min); border-top: 1px solid var(--bit-border); color: var(--bit-text-muted); font-size: .9375rem; text-decoration: none; }
  .cs-jump a[aria-current] { color: var(--bit-text); font-weight: 600; }
  .cs-jump a[aria-current] .cs-toc__num { color: var(--bl-green); }
  /* Section links land below the header and this bar. */
  .cs-section { scroll-margin-top: 3rem; }
}
.cs-toc__title { margin-bottom: .25rem; font-size: .71875rem; font-weight: 600; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; }
.cs-toc__group { margin-top: .875rem; }
.cs-toc__label { margin-bottom: .25rem; color: var(--bit-text-muted); font-size: .6875rem; font-weight: 500; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
.cs-toc ol { list-style: none; }
.cs-toc a { display: flex; gap: .625rem; padding: .25rem 0 .25rem .75rem; border-left: 2px solid #e3e7e8; color: var(--bit-text-muted); font-size: .875rem; line-height: 1.35; text-decoration: none; }
.cs-toc a:hover { color: var(--bit-text); text-decoration: underline; }
.cs-toc a[aria-current] { border-left-color: var(--bl-green); color: var(--bit-text); font-weight: 600; }
.cs-toc__num { flex: none; min-width: 1.125rem; white-space: nowrap; color: var(--bit-text-muted); font-variant-numeric: tabular-nums; }
.cs-toc a[aria-current] .cs-toc__num { color: var(--bl-green); }
/* Shorter windows: drop the group labels and tighten the rows so the list still fits. */
@media (max-height: 47.5rem) {
  .cs-toc__label { display: none; }
  .cs-toc__group { margin-top: .25rem; }
  .cs-toc__title { margin-bottom: .375rem; }
  .cs-toc a { padding-block: .1875rem; font-size: .8125rem; }
}

.cs-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.125rem), 1fr)); gap: 1rem 1.5rem; margin-bottom: .5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--bit-border); list-style: none; }
.cs-stats__value { font: 700 1.375rem/1.1 var(--bit-font-heading); }
.cs-stats__label { margin-top: .25rem; color: var(--bit-text-muted); font-size: .8125rem; line-height: 1.4; }

/* Sections: a numbered kicker, heading, body, and plain two-column lists. */
.cs-section { padding-block: 3.5rem; border-top: 1px solid var(--bit-border); }
.cs-stats + .cs-section { padding-top: 2.5rem; border-top: 0; }
.cs-section:last-child { padding-bottom: 0; }
.cs-kicker { display: flex; gap: .75rem; margin-bottom: .875rem; color: var(--bit-text-muted); font-size: .75rem; font-weight: 600; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; }
.cs-kicker__num { color: var(--bl-green); }
.cs-section h2 { margin-bottom: 1.125rem; font-size: clamp(1.625rem, 1.3rem + 1vw, 2.125rem); line-height: 1.15; letter-spacing: -.015em; text-wrap: balance; }
.cs-prose { display: grid; gap: 1rem; max-width: 66ch; color: #2b3138; font-size: 1.0625rem; line-height: 1.65; text-wrap: pretty; }
.cs-prose--after { margin-top: 1.5rem; }
/* These blocks space their own paragraphs (grid gap or fixed margins). */
:is(.cs-prose, .cs-flow, .cs-timeline) p + p { margin-top: 0; }
.cs-list { margin-top: 1.75rem; border-top: 1px solid var(--bit-border); }
.cs-list > div { display: flex; flex-wrap: wrap; gap: .25rem 2rem; padding-block: 1rem; border-bottom: 1px solid var(--bit-border); }
.cs-list:last-child > div:last-child, .cs-timeline:last-child li:last-child { border-bottom: 0; }
.cs-list dt { flex: 1 1 11.25rem; font: 700 .9375rem/1.5 var(--bit-font-heading); }
.cs-list dd { flex: 3 1 21.25rem; margin: 0; color: #3a424a; font-size: .96875rem; line-height: 1.6; text-wrap: pretty; }
.cs-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; list-style: none; }
.cs-tags li { padding: .375rem .75rem; background: var(--bit-surface); border: 1px solid #d5dcde; border-radius: 999px; color: #2b3138; font-size: .84375rem; font-weight: 500; line-height: 1.2; }

.cs-media { display: grid; gap: 2.5rem; margin-top: 2.25rem; }
.cs-media__pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 21.25rem), 1fr)); gap: 2.5rem 1.75rem; align-items: start; }

/* The finished order beside the order → invoice → calendar steps. */
.cs-feature { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 2rem 2.5rem; align-items: start; margin-top: 3rem; }
.cs-flow { padding-top: .25rem; }
.cs-flow h3 { margin-bottom: 1.25rem; font-size: 1.3125rem; line-height: 1.25; text-wrap: balance; }
.cs-flow ol { list-style: none; }
.cs-flow li { position: relative; display: flex; gap: 1rem; padding-bottom: 1.5rem; }
.cs-flow li:last-child { padding-bottom: 0; }
.cs-flow li:not(:last-child)::before { content: ''; position: absolute; top: 2.125rem; bottom: .25rem; left: calc(.9375rem - 1px); width: 2px; background: #c9e3ca; }
.cs-flow__num { flex: none; width: 1.875rem; height: 1.875rem; background: var(--bl-green); border-radius: 50%; color: #fff; font: 700 .8125rem/1.875rem var(--bit-font-heading); text-align: center; }
.cs-flow li > div { padding-top: .25rem; }
.cs-flow__title { margin-bottom: .375rem; font: 700 1rem/1.35 var(--bit-font-heading); }
.cs-flow li p:not(.cs-flow__title) { color: #3a424a; font-size: .96875rem; line-height: 1.6; text-wrap: pretty; }

/* “Built in response to the next need”: heading beside the growth figure.
   Layers are listed oldest first and drawn with the newest on top. */
.cs-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 2rem 3rem; align-items: center; }
.cs-growth { margin: 0; }
.cs-growth__body { display: flex; gap: .875rem; align-items: stretch; }
.cs-growth__axis { display: flex; flex: none; flex-direction: column; align-items: center; gap: .375rem; width: 1.25rem; color: var(--bl-green); font: 700 .875rem/1 var(--bit-font-heading); }
.cs-growth__line { flex: 1; width: 2px; background: linear-gradient(180deg, var(--bl-green), #c9e3ca); }
.cs-growth__axis-label { color: var(--bit-text-muted); font: 600 .65625rem/1 var(--bit-font-body); letter-spacing: .1em; text-transform: uppercase; transform: rotate(180deg); writing-mode: vertical-rl; }
.cs-growth__layers { display: flex; flex: 1; flex-direction: column-reverse; min-width: 0; overflow: hidden; border: 1px solid #c9e3ca; border-radius: .75rem; list-style: none; }
.cs-growth__layers li { display: flex; align-items: center; gap: .875rem; padding: .875rem 1rem; background: #fff; }
.cs-growth__layers li + li { border-bottom: 1px solid #c9e3ca; }
.cs-growth__layers li:nth-child(1) { padding-block: 1.125rem; background: var(--bl-green); }
.cs-growth__layers li:nth-child(2) { background: var(--bl-pale); }
.cs-growth__num { flex: none; color: var(--bl-green); font: 700 .75rem/1 var(--bit-font-heading); font-variant-numeric: tabular-nums; }
.cs-growth__text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.cs-growth__text strong { font: 700 .9375rem/1.3 var(--bit-font-heading); }
.cs-growth__text span { color: var(--bit-text-muted); font-size: .84375rem; line-height: 1.4; }
.cs-growth__layers li:nth-child(2) .cs-growth__text span { color: #3a424a; }
.cs-growth__tag { flex: none; color: var(--bl-green); font-size: .6875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.cs-growth__layers li:nth-child(1) .cs-growth__num { color: var(--bl-light); }
.cs-growth__layers li:nth-child(1) strong { color: #fff; }
.cs-growth__layers li:nth-child(1) .cs-growth__text span,
.cs-growth__layers li:nth-child(1) .cs-growth__tag { color: #dbeedc; }
.cs-growth figcaption { margin-top: .75rem; color: var(--bit-text-muted); font-size: .875rem; line-height: 1.5; }

.cs-timeline { margin-top: 2rem; border-top: 1px solid var(--bit-border); list-style: none; }
.cs-timeline li { display: flex; flex-wrap: wrap; gap: .25rem 2rem; padding-block: 1rem; border-bottom: 1px solid var(--bit-border); }
.cs-timeline__month { display: flex; flex: 0 0 8.75rem; align-items: center; align-self: flex-start; gap: .625rem; font: 700 .9375rem/1.5 var(--bit-font-heading); }
.cs-timeline__month::before { content: ''; flex: none; width: .5rem; height: .5rem; background: var(--bl-light); border-radius: 50%; }
.cs-timeline .is-highlight .cs-timeline__month::before { background: var(--bl-green); }
.cs-timeline__text { flex: 1 1 22.5rem; color: #3a424a; font-size: .96875rem; line-height: 1.6; text-wrap: pretty; }

.cs-lessons { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18.75rem), 1fr)); gap: 0 2.5rem; margin-top: 2rem; list-style: none; }
.cs-lessons li { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem 0 1.5rem; border-top: 1px solid var(--bit-text); }
.cs-lessons__num { color: var(--bl-green); font: 700 .8125rem/1 var(--bit-font-heading); font-variant-numeric: tabular-nums; }
.cs-lessons h3 { font-size: 1.1875rem; line-height: 1.3; }
.cs-lessons p { color: #3a424a; font-size: .96875rem; line-height: 1.6; text-wrap: pretty; }

/* About: open sections on thin rules, heading beside the text (like the case study). */
.about-hero .lead { max-width: 40rem; }
.about-hero .identity { margin-block: 1.5rem .5rem; }
.principles { display: grid; }
.principle { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: .75rem 4rem; padding-block: 2rem; border-top: 1px solid var(--bit-border); }
.principle:last-child { border-bottom: 1px solid var(--bit-border); }
.principle h2 { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.625rem); line-height: 1.25; }
.principle__body p { max-width: var(--bit-reading-max); color: var(--bit-text-muted); font-size: 1.0625rem; }
.principle .text-link { margin-top: 1rem; }
.about-area { display: flex; align-items: flex-start; gap: .5rem; margin-top: 2.5rem !important; color: var(--bit-text-muted); }
.about-area .icon { flex: none; margin-top: .2em; color: var(--bit-action); }
@media (max-width: 56rem) { .principle { grid-template-columns: minmax(0, 1fr); padding-block: 1.5rem; } }


.not-found__inner { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: 2rem 3rem; align-items: center; min-height: 40vh; }
.not-found__mark { width: 10rem; }
@media (max-width: 40rem) { .not-found__inner { grid-template-columns: minmax(0, 1fr); } .not-found__mark { width: 5rem; } }

.glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; list-style: none; }
.glance__item { padding: 1.5rem 0 0; border-top: 1px solid var(--bit-border); }
.glance__label { display: flex; gap: .6rem; margin-bottom: .75rem; color: var(--bit-action); font-size: .8125rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; }
.glance__label span { color: var(--bit-text-muted); }
.glance__item h3 { font-size: 1.25rem; }
.glance__text { margin-top: .75rem; color: var(--bit-text-muted); font-size: 1rem; }
.glance__list { display: grid; gap: .375rem; margin-top: 1rem; list-style: none; color: var(--bit-text-muted); font-size: 1rem; }
.glance__list li { position: relative; padding-left: 1.125rem; }
.glance__list li::before { content: ''; position: absolute; top: .6em; left: 0; width: .375rem; height: .375rem; border-radius: 50%; background: var(--bit-ocean); }
@media (max-width: 56rem) { .glance { grid-template-columns: minmax(0, 1fr); gap: 2rem; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--bit-dark); color: var(--bit-muted-on-dark); padding-block: 3rem 1.5rem; font-size: .9375rem; }
.site-footer a { color: #fff; }
.site-footer__top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: start; }
.brand--on-dark .brand__mark { height: 3.5rem; }
.brand--on-dark .brand__name { color: var(--bit-text-on-dark); font-size: 1.875rem; }
.brand--on-dark .brand__tag { color: var(--bit-muted-on-dark); }
.site-footer__brand p { margin-top: 1.25rem; max-width: 22rem; }
.site-footer__nav { list-style: none; display: grid; gap: .1rem; }
.site-footer__nav a { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--bit-muted-on-dark); text-decoration: none; }
.site-footer__nav a:hover, .site-footer__nav a[aria-current='page'] { color: #fff; text-decoration: underline; }
.site-footer__label { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.site-footer__email { display: inline-block; margin-top: .4rem; font-weight: 600; font-size: 1.0625rem; }
.site-footer__area { margin-top: 1rem !important; }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--bit-dark-line); font-size: .875rem; }
.site-footer__bottom p + p { margin-top: 0; }
@media (max-width: 52rem) { .site-footer__top { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Print ---------- */
@media print {
  .site-header, .skip-link, .inquiry-form, .menu-button { display: none !important; }
  .section--dark, .site-footer { background: none; color: #000; }
}