@font-face { font-family: "Big Shoulders Display"; src: url(fonts/big-shoulders-display-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url(fonts/public-sans-latin-var.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

body.dc-site {
  --board: #1D4ED8;
  --board-deep: #173FB0;
  --hole: #1538A0;
  --paint: #FFFFFF;
  --on-board-soft: #DCE6FF;
  --floor: #EEF1F4;
  --paper: #FFFFFF;
  --ink: #14171C;
  --ink-soft: #4A5260;
  --rule: #C9D0DA;
  --tape: #FFC72C;
  --ps: #0F7B52;
  --pitch: 24px;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

.dc-site *, .dc-site *::before, .dc-site *::after { box-sizing: border-box; }
html:has(> body.dc-site) { -webkit-text-size-adjust: 100%; scrollbar-color: var(--ink-soft) var(--floor); }
body.dc-site {
  margin: 0;
  background: var(--floor);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  font-feature-settings: "tnum" 0;
}
.dc-site ::selection { background: var(--tape); color: var(--ink); }
.dc-site img { display: block; max-width: 100%; height: auto; }
.dc-site a { color: var(--board); text-underline-offset: .2em; text-decoration-thickness: 1px; }
.dc-site a:hover { text-decoration-thickness: 2px; }
.dc-site :focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.dc-site .board :focus-visible { outline-color: var(--tape); }
.dc-site .board .tool :focus-visible, .dc-site .board .paper :focus-visible { outline-color: var(--ink); }

.dc-site h1, .dc-site h2, .dc-site h3 { font-family: var(--display); font-weight: 800; line-height: 1; margin: 0; text-wrap: balance; }
.dc-site p { margin: 0; text-wrap: pretty; }

.dc-site .wrap { width: min(100% - 2 * var(--pitch), 1320px); margin-inline: auto; }

.dc-site .dc-skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 10; }
.dc-site .dc-skip:focus { left: 8px; }

/* Header */
.dc-site .site-head { background: var(--floor); }
.dc-site .head-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; }
.dc-site .logo img { width: 168px; height: auto; }
.dc-site .nav { display: flex; align-items: center; gap: 32px; }
.dc-site .nav ul { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.dc-site .nav ul a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1rem; min-height: 44px; display: inline-flex; align-items: center; }
.dc-site .menu-btn { display: none; }
.dc-site .site-head { position: relative; z-index: 5; }
.dc-site .nav ul a:hover { text-decoration: underline; }

.dc-site .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 10px 22px; white-space: nowrap;
  font: 800 1.25rem/1 var(--display);
  color: var(--ink); text-decoration: none;
  border: 2px solid var(--ink); border-radius: 2px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.dc-site .btn--tape { background: var(--tape); }
.dc-site .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px -6px rgba(20, 23, 28, .45); }
.dc-site .btn--big { min-height: 56px; font-size: 1.5rem; width: 100%; margin-top: 20px; }

/* The board */
.dc-site .board {
  background-color: var(--board);
  background-image: radial-gradient(circle at calc(var(--pitch) / 2) calc(var(--pitch) / 2), var(--hole) 0 2.6px, transparent 3.2px);
  background-size: var(--pitch) var(--pitch);
  color: var(--paint);
  padding: 48px var(--pitch) 72px;
}
.dc-site .board > .wrap { width: min(100%, 1320px); }
.dc-site .board-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); grid-template-rows: auto 1fr; gap: 0 calc(var(--pitch) * 2); align-items: start; }
/* Source order is lead, work order, tools, so a stacked (phone) layout reads the services before the tools.
   On the wide board the work order hangs in the right column beside both. */
.dc-site .board-main { grid-column: 1; grid-row: 1; }
.dc-site .board-tools { grid-column: 1; grid-row: 2; }
.dc-site .order { grid-column: 2; grid-row: 1 / span 2; }

.dc-site .board h1 { font-size: clamp(3rem, 5.6vw, 5.25rem); font-weight: 800; letter-spacing: -0.01em; line-height: .92; }
.dc-site .board h1 span { display: block; }
.dc-site .lede { margin-top: 24px; max-width: 46ch; font: 400 1.1875rem/1.6 var(--body); color: var(--on-board-soft); text-wrap: pretty; }
.dc-site .mobile-cta { display: none; }
.dc-site .board-h2 { margin-top: calc(var(--pitch) * 2); font-size: 2rem; font-weight: 700; }

.dc-site .slots { margin-top: var(--pitch); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--pitch) * 1.5) var(--pitch); }

.dc-site .slot { position: relative; padding: 14px; isolation: isolate; }
.dc-site .silhouette {
  position: absolute; inset: 0; z-index: -1;
  background: var(--board-deep);
  border: 2px solid var(--paint);
  border-radius: 6px;
}
.dc-site .peg { position: absolute; top: -9px; width: 14px; height: 14px; border-radius: 50%; background: var(--paint); box-shadow: inset 0 -3px 0 rgba(20, 23, 28, .25); z-index: 2; }
.dc-site .peg--l { left: 22%; } .dc-site .peg--r { right: 22%; } .dc-site .peg--c { left: calc(50% - 7px); }

.dc-site .tool {
  background: var(--paper); color: var(--ink);
  border-radius: 3px;
  padding: 20px 20px 18px;
  height: 100%;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 2px 4px rgba(10, 20, 60, .18);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), opacity .3s var(--ease);
}
.dc-site .tool-name { font-size: 2.25rem; font-weight: 800; }
.dc-site .tool-name--sb { color: var(--ink); }
.dc-site .tool-name--ps { color: var(--ps); }
.dc-site .tool-line { font-size: 1rem; line-height: 1.5; color: var(--ink); }
.dc-site .screen { margin: 4px 0 0; }
.dc-site .screen img { max-width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 2px; }
.dc-site .screen figcaption { margin-top: 6px; font-size: .875rem; color: var(--ink-soft); }
.dc-site .tool-meta { font-size: .875rem; color: var(--ink-soft); }
.dc-site .tool-link { margin-top: auto; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; align-self: start; }
.dc-site .tool-link::after { content: ""; display: inline-block; width: .5em; height: .5em; margin-left: .35em; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg) translateY(-.08em); }

.dc-site .slot--small .tool { padding: 14px 16px; gap: 4px; }
.dc-site .tag-name { font-size: 1.5rem; font-weight: 700; }
.dc-site .tag-line { font-size: .9375rem; color: var(--ink-soft); }

.dc-site .slot--wide { grid-column: 1 / -1; }
.dc-site .tool--h { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 28px; row-gap: 10px; align-content: start; padding: 22px 24px 20px; }
.dc-site .tool--h > * { grid-column: 1; }
.dc-site .tool--h > .screen { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; }
.dc-site .tool--h .tool-link { margin-top: 4px; align-self: end; }

/* Signature: lift the tool off its outline, dim the rest */
.dc-site .slot:hover .tool, .dc-site .slot:focus-within .tool { transform: translateY(-10px); box-shadow: 0 22px 34px -14px rgba(5, 12, 45, .6); }
.dc-site .silhouette { transition: border-color .3s var(--ease); }
.dc-site .slots:has(.slot:hover) .slot:not(:hover) .silhouette,
.dc-site .slots:has(.slot:focus-within) .slot:not(:focus-within) .silhouette { border-color: rgba(255, 255, 255, .3); }

/* Work order on its clip */
.dc-site .order { position: relative; padding-top: 18px; }
.dc-site .clip { position: absolute; top: 0; left: calc(50% - 56px); width: 112px; height: 34px; background: var(--ink); border-radius: 6px 6px 3px 3px; z-index: 2; box-shadow: 0 3px 6px rgba(5, 12, 45, .35); }
.dc-site .clip::after { content: ""; position: absolute; left: 40px; top: 8px; width: 32px; height: 10px; border-radius: 5px; background: var(--board); }
.dc-site .paper {
  background: var(--paper); color: var(--ink);
  padding: 36px 28px 24px;
  border-radius: 2px;
  box-shadow: 0 14px 30px -16px rgba(5, 12, 45, .55);
}
.dc-site .paper h2 { font-size: 2.5rem; line-height: .95; }
.dc-site .paper .order-rows { list-style: none; margin: var(--pitch) 0 0; padding: 0; counter-reset: row; }
.dc-site .order-rows li { border-top: 1px solid var(--rule); padding: 12px 0; display: grid; gap: 4px; }
.dc-site .order-rows li:last-child { border-bottom: 1px solid var(--rule); }
.dc-site .order-rows h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
.dc-site .order-rows p { font-size: .9375rem; line-height: 1.5; color: var(--ink-soft); }
.dc-site .order-rows a { font-weight: 600; font-size: .9375rem; justify-self: start; min-height: 44px; display: inline-flex; align-items: center; margin: -8px 0 -10px; }
.dc-site .order-how { margin-top: 16px; font-size: 1rem; line-height: 1.5; }
.dc-site .order-note { margin-top: 12px; font-size: .875rem; color: var(--ink-soft); }

/* Aisle tape between the board and the floor */
.dc-site .aisle { height: 12px; background: var(--tape); border-bottom: 2px solid var(--ink); }

/* Floor sections */
.dc-site .floor { padding: calc(var(--pitch) * 3.5) 0; }
.dc-site .floor--rule { padding-top: 0; }
.dc-site .floor--rule::before { content: ""; display: block; width: min(100% - 2 * var(--pitch), 1320px); margin: 0 auto calc(var(--pitch) * 3); border-top: 1px solid var(--rule); }
.dc-site .floor h2 { font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 800; }
.dc-site .two-col { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: calc(var(--pitch) * 2.5); align-items: start; }
.dc-site .col-text { display: grid; gap: 16px; max-width: 56ch; }
.dc-site .col-text h2 { margin-bottom: 4px; }
.dc-site .col-text h3 { font-size: 1.75rem; font-weight: 700; margin-top: 20px; }
.dc-site .col-text h3:first-child { margin-top: 0; }
.dc-site .small { font-size: .9375rem; color: var(--ink-soft); }
.dc-site .measure { max-width: 62ch; margin-top: 16px; }

.dc-site .slip { margin: 0; padding: 4px 20px; background: var(--paper); border: 2px solid var(--ink); border-radius: 2px; }
.dc-site .slip-row { display: grid; grid-template-columns: 9.5rem 1fr; border-top: 1px solid var(--rule); }
.dc-site .slip-row:first-child { border-top: 0; }
.dc-site .slip dt { font: 800 1.375rem/1.1 var(--display); padding: 18px 16px 18px 0; border-right: 1px solid var(--rule); }
.dc-site .slip dd { margin: 0; padding: 18px 20px; font-size: 1.0625rem; }

.dc-site .tally { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 20px 28px; }
.dc-site .tally-group { display: grid; gap: 8px; }
.dc-site .bins { display: flex; gap: 4px; }
.dc-site .bins i { width: 28px; height: 40px; background: var(--ink); border-radius: 1px; }
.dc-site .tally-group--wp .bins i { background: var(--board); }
.dc-site .tally-label { font-size: .9375rem; color: var(--ink-soft); }
.dc-site .tally-label b { font: 800 1.375rem/1 var(--display); color: var(--ink); margin-right: 4px; }

.dc-site .links-row { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 28px; font-weight: 600; }
.dc-site .links-row a { min-height: 44px; display: inline-flex; align-items: center; }

.dc-site .nots { list-style: none; margin: 0; padding: 0; }
.dc-site .nots li { font-size: 1.1875rem; padding: 14px 0 14px 34px; border-top: 1px solid var(--rule); position: relative; }
.dc-site .nots li:last-child { border-bottom: 1px solid var(--rule); }
.dc-site .nots li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 16px; height: 2px; background: var(--ink); transform: rotate(45deg); }
.dc-site .nots li::after { content: ""; position: absolute; left: 4px; top: 50%; width: 16px; height: 2px; background: var(--ink); transform: rotate(-45deg); }

/* Footer */
.dc-site .site-foot { background: var(--paper); border-top: 2px solid var(--ink); padding: calc(var(--pitch) * 2) 0; }
.dc-site .foot-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px 40px; align-items: start; }
.dc-site .foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dc-site .foot-links a { color: var(--ink); min-height: 44px; display: inline-flex; align-items: center; }
.dc-site .foot-note { grid-column: 1 / -1; max-width: 62ch; font-size: .875rem; color: var(--ink-soft); }

@media (max-width: 1080px) {
  .dc-site .board-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .dc-site .board-main, .dc-site .board-tools, .dc-site .order { grid-column: 1; grid-row: auto; }
  .dc-site .order { max-width: 560px; margin-top: calc(var(--pitch) * 2); }
}
@media (max-width: 760px) {
  .dc-site .nav { gap: 12px; }
  .dc-site .menu-btn {
    display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px;
    font: 800 1.25rem/1 var(--display); color: var(--ink);
    background: transparent; border: 2px solid var(--ink); border-radius: 2px; cursor: pointer;
  }
  .dc-site .nav ul { display: none; }
  .dc-site .menu-btn[aria-expanded="true"] + ul {
    display: grid; gap: 0; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--floor); border-bottom: 2px solid var(--ink); padding: 8px var(--pitch) 16px;
  }
  .dc-site .menu-btn[aria-expanded="true"] + ul a { min-height: 48px; font-size: 1.125rem; width: 100%; border-top: 1px solid var(--rule); }
  .dc-site .mobile-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: var(--pitch); }
  .dc-site .mobile-cta a:not(.btn) { color: var(--paint); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
  .dc-site .head-row { min-height: 76px; }
  .dc-site .logo img { width: 120px; }
  .dc-site .nav .btn { padding: 0 14px; }
  .dc-site .menu-btn { padding: 0 14px; }
  .dc-site .board { padding-top: var(--pitch); }
  .dc-site .board h1 { font-size: clamp(2.75rem, 13vw, 3.5rem); }
  .dc-site .lede { font-size: 1.0625rem; }
  .dc-site .slots { grid-template-columns: minmax(0, 1fr); }
  .dc-site .tool--h { grid-template-columns: minmax(0, 1fr); }
  .dc-site .tool--h > .screen { grid-column: 1; grid-row: auto; }
  .dc-site .two-col { grid-template-columns: 1fr; gap: 24px; }
  .dc-site .slip-row { grid-template-columns: 1fr; }
  .dc-site .slip dt { border-right: 0; padding-bottom: 0; }
  .dc-site .slip dd { padding-left: 0; }
  .dc-site .slip dd { padding-top: 6px; }
  .dc-site .foot-grid { grid-template-columns: 1fr 1fr; }
  .dc-site .foot-grid > img { grid-column: 1 / -1; }
  .dc-site .floor { padding: calc(var(--pitch) * 2.5) 0; }
  .dc-site .floor--rule { padding-top: 0; }
  .dc-site .floor--rule::before { margin-bottom: calc(var(--pitch) * 2); }
}

/* OPS-69: four project cards sit two by two on wide screens instead of leaving one alone on a row */
@media (min-width: 761px) {
  .dc-site .dc-page .work-grid.work-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* OPS-69: the footer lists go to one column on a phone, so no link wraps beside another */
@media (max-width: 480px) {
  .dc-site .foot-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .dc-site .tool, .dc-site .btn { transition: none; }
  .dc-site .slot:hover .tool, .dc-site .slot:focus-within .tool { transform: none; }
  .dc-site .slot:hover .silhouette, .dc-site .slot:focus-within .silhouette { border-width: 4px; }
}

/* WordPress frame: none. Since OPS-56, distrocode-site/page.php prints a DistroCode page without the theme's
   header, footer or template wrappers, on any theme, so the Twenty Twenty-Five hiding rules are gone. */
.dc-site .dc-page { font: 400 1.0625rem/1.6 var(--body); color: var(--ink); }
.dc-site .dc-page h1, .dc-site .dc-page h2, .dc-site .dc-page h3 { font-family: var(--display); letter-spacing: normal; }
.dc-site .dc-page p, .dc-site .dc-page ul, .dc-site .dc-page ol, .dc-site .dc-page dl, .dc-site .dc-page figure { margin-block: 0; }
.dc-site .dc-page a:where(:not(.btn)) { color: var(--board); }
.dc-site .dc-page .nav a, .dc-site .dc-page .foot-links a { color: var(--ink); }

/* Header: wide list, and a details menu under 760px */
.dc-site .nav-wide { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; }
.dc-site .nav-wide a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1rem; min-height: 44px; display: inline-flex; align-items: center; }
.dc-site .nav-wide a:hover { text-decoration: underline; }
.dc-site .menu { display: none; position: static; }
.dc-site .menu > summary { list-style: none; }
.dc-site .menu > summary::-webkit-details-marker { display: none; }
.dc-site .menu ul { list-style: none; margin: 0; padding: 0; }

/* Board additions for the full copy */
.dc-site .lede-h { margin-top: var(--pitch); max-width: 26ch; font-size: clamp(1.75rem, 2.6vw, 2.25rem); font-weight: 700; line-height: 1.05; color: var(--paint); }
.dc-site .board .lede { margin-top: var(--pitch); max-width: 56ch; }
.dc-site .board .board-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: var(--pitch); color: var(--on-board-soft); }
.dc-site .board-cta a:not(.btn) { color: var(--paint); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.dc-site .board-about { display: grid; gap: 12px; margin-top: var(--pitch); max-width: 56ch; color: var(--on-board-soft); }
.dc-site .board-sub { margin-top: 16px; color: var(--on-board-soft); }
.dc-site .tool-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.dc-site .order-intro { margin-top: 10px; color: var(--ink-soft); font-size: 1rem; }
.dc-site .order-rows li p + p { margin-top: 2px; }
.dc-site .faq { display: grid; gap: 0; max-width: 56ch; }
.dc-site .faq-item { border-top: 1px solid var(--rule); padding: 18px 0; display: grid; gap: 6px; }
.dc-site .faq-item h3 { font-size: 1.5rem; font-weight: 700; }
.dc-site .faq .links-row { margin-top: 12px; }

@media (max-width: 760px) {
  .dc-site .nav-wide { display: none; }
  .dc-site .menu { display: block; }
  .dc-site .menu[open] ul {
    display: grid; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--floor); border-bottom: 2px solid var(--ink); padding: 8px var(--pitch) 16px;
  }
  .dc-site .menu[open] ul a { color: var(--ink); text-decoration: none; min-height: 48px; display: flex; align-items: center; font-size: 1.125rem; width: 100%; border-top: 1px solid var(--rule); }
}

/* OPS-14 run 2: the services sheet (OPS-15 lead) has inline project links and a two-link row. */
.dc-site .order-rows p a { display: inline; min-height: 0; margin: 0; font-size: inherit; }
.dc-site .order-rows .row-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.dc-site .order-rows .row-links a { display: inline-flex; min-height: 44px; margin: 0; }

/* WordPress Maintenance page */
.dc-site .board h1.page-h1 { font-size: clamp(2.75rem, 5vw, 4.5rem); max-width: 14ch; }
.dc-site .order-rows p.price { font-size: 1rem; color: var(--ink-soft); }
.dc-site .price b { font: 800 2.25rem/1 var(--display); color: var(--ink); margin-right: 4px; }
.dc-site .ticks { margin: 0; padding-left: 1.25em; display: grid; gap: 6px; }
.dc-site .ticks li::marker { color: var(--board); }
.dc-site .steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.dc-site .steps li { counter-increment: step; position: relative; padding: 16px 0 16px 56px; border-top: 1px solid var(--rule); }
.dc-site .steps li:last-child { border-bottom: 1px solid var(--rule); }
.dc-site .steps li::before { content: counter(step); position: absolute; left: 0; top: 12px; font: 800 2.5rem/1 var(--display); color: var(--board); }
.dc-site .steps b, .dc-site .nots b { font-weight: 700; }
.dc-site .screen--proof { margin-block: 8px; }
.dc-site .screen--proof img { border: 2px solid var(--ink); border-radius: 2px; }
.dc-site .screen--proof figcaption { margin-top: 8px; font-size: .9375rem; color: var(--ink-soft); }
.dc-site .dc-page .board-about a:where(:not(.btn)) { color: var(--paint); font-weight: 600; }
.dc-site .paper .order-how + .order-how { margin-top: 12px; }
.dc-site .paper .order-note + .order-note { margin-top: 8px; }
@media (min-width:761px){.dc-site .two-col>.col-text:first-child{position:sticky;top:24px;align-self:start}}
/* OPS-54 S1: on the wide board the work order travels beside the tools, so its column is never bare blue. */
@media (min-width:1081px) and (min-height:800px){.dc-site .board-grid>.order{position:sticky;top:24px}}

/* Contact page (OPS-15): hero steps and the form card */
/* The numerals sit on the H1's left edge, baseline to baseline with their line (art-director 12304, fixes 2 and 4).
   .dc-page ol { margin-block: 0 } used to beat a plain .board-steps margin, so the list touched the H1. */
.dc-site .dc-page .board-steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 8px; max-width: 46ch; font-size: 1.1875rem; counter-reset: board-step; }
.dc-site .board-steps li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); align-items: baseline; counter-increment: board-step; }
.dc-site .board-steps li::before { content: counter(board-step) "."; font: 800 1.5rem/1 var(--display); color: var(--tape); }
.dc-site .dc-form{display:grid;gap:16px;margin-top:16px}
.dc-site .dc-form label{display:block;font-weight:600}
.dc-site .dc-form input, .dc-site .dc-form select, .dc-site .dc-form textarea{display:block;width:100%;min-height:48px;margin:6px 0;padding:10px 12px;font:inherit;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:2px}
.dc-site .dc-form .small{display:block}
/* OPS-49: the form's own result line, inside the card above the form, and the honeypot people never see. */
.dc-site .form-status:empty{display:none}
.dc-site .form-status{margin:16px 0 0;padding:12px 14px;border:2px solid var(--ink);border-left-width:8px;border-radius:2px;font-weight:600;color:var(--ink);background:var(--paper)}
.dc-site .form-status--ok{border-left-color:#1E7B45}
.dc-site .form-status--error{border-left-color:#B42318}
.dc-site .dc-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.dc-site .faq-item h2{font-size:1.5rem;font-weight:700}

/* Contact page: the card has no clip (fix 3), and on the wide board it hangs past the blue into the floor
   (fix 1), so the band ends 80px under the price line instead of under the form. The aside takes no height in
   the board grid; the floor keeps the card's column (same 2fr / 1fr split and 48px gap as the board) empty. */
.dc-site .board--overhang .order { padding-top: 0; }
@media (min-width: 1081px) {
  .dc-site .board--overhang { padding-bottom: 80px; }
  .dc-site .board--overhang .order { height: 0; z-index: 1; }
  /* OPS-49 (art-director 12388, note 1): the maintenance and migration price cards keep their clip. */
  .dc-site .board--overhang .order:has(> .clip) { padding-top: 18px; }
  .dc-site .floor--beside-card .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max(320px, calc((100% - 48px) / 3)); column-gap: 48px; }
}

/* OPS-49 (art-director 12388, note 4): a serialized value such as s:22:"https://old-host.test/" reads as one token,
   so inline code never breaks inside itself. */
.dc-site .dc-page code { white-space: nowrap; }

/* OPS-54 (art-director 12483, B1): the proof strip under the hero buttons. DESIGN.md "Tally": one block per fact,
   Big Shoulders numerals in white on the 24px pitch. On the wide board the blocks share one row however many there
   are, so a fifth block (the Fiverr rating, OWN-101) drops in without a layout change; under 761px it is 2 x 2. */
.dc-site .dc-page .proof { list-style: none; margin: calc(var(--pitch) * 1.5) 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--pitch); max-width: 760px; }
.dc-site .proof li { border-top: 2px solid rgba(220, 230, 255, .45); padding-top: 12px; }
.dc-site .proof li > a, .dc-site .proof li { display: grid; gap: 6px; align-content: start; }
.dc-site .board .proof a { color: var(--paint); text-decoration: none; min-height: 44px; }
.dc-site .proof-n { font: 800 2.5rem/1 var(--display); color: var(--paint); letter-spacing: .01em; }
.dc-site .proof-l { font-size: .875rem; line-height: 1.35; color: var(--on-board-soft); }
.dc-site .board .proof a .proof-l { color: var(--paint); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.dc-site .board .proof a:hover .proof-l { text-decoration-thickness: 2px; }

/* OPS-54 (B2): client logos, approved in writing (OWN-73 Q5), white on the board, 32px high. */
.dc-site .clients { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; margin-top: var(--pitch); }
.dc-site .clients-l { font-size: .875rem; color: var(--on-board-soft); }
.dc-site .board .clients a { display: inline-flex; align-items: center; min-height: 44px; opacity: .92; transition: opacity .2s var(--ease); }
.dc-site .board .clients a:hover { opacity: 1; }
.dc-site .clients img { height: 32px; width: auto; }
.dc-site .board .clients a { background: var(--paper); border-radius: 2px; padding: 6px 12px; opacity: 1; }
/* OPS-77: both logo files are white on transparent, so on the paper chip they printed white on white. They print
   in ink instead. */
.dc-site .board .clients img { filter: brightness(0); }
.dc-site .cases-intro { font-size: 1.125rem; color: var(--ink-soft); margin: 8px 0 -8px; }

/* OPS-54 (B5): the projects as pictures. Three across on the wide floor, two at tablet, one on a phone. */
.dc-site .dc-page .work-grid { list-style: none; margin: calc(var(--pitch) * 2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--pitch) * 2) var(--pitch); }
.dc-site .work-card { position: relative; display: grid; gap: 8px; align-content: start; }
.dc-site .work-card img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; background: var(--paper); border: 2px solid var(--ink); border-radius: 2px; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.dc-site .work-card:hover img, .dc-site .work-card:focus-within img { transform: translateY(-4px); box-shadow: 0 14px 24px -14px rgba(20, 23, 28, .55); }
.dc-site .work-card h3 { margin-top: 8px; font-size: 1.75rem; font-weight: 700; }
.dc-site .dc-page .work-card h3 a { color: var(--ink); text-decoration: none; }
.dc-site .work-card h3 a::after { content: ""; position: absolute; inset: 0; }
.dc-site .work-card:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; }
.dc-site .work-tag { justify-self: start; padding: 4px 8px; font: 600 .8125rem/1.2 var(--body); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 2px; }
.dc-site .work-tag--wp { background: var(--board); border-color: var(--board); color: var(--paint); }
.dc-site .work-card p:last-child { font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.dc-site .work-notes { margin-top: calc(var(--pitch) * 2.5); }
.dc-site .work-notes .col-text h3 { margin-top: 0; }
@media (max-width: 1080px) { .dc-site .dc-page .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .dc-site .dc-page .proof { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px var(--pitch); }
  .dc-site .dc-page .work-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .dc-site .work-card img { transition: none; }
  .dc-site .work-card:hover img, .dc-site .work-card:focus-within img { transform: none; }
}
.dc-site .site-foot .foot-note a { color: var(--ink); }

/* OPS-58: three new pages (/ai-automation/, /sitebridge/, /pluginsprout/) and the Home products and automation
   sections. Same tokens and components; the additions below are the only new pieces. */

/* Header: six links since OPS-58, so the wide list needs the full board width; the Menu takes over at 1080px,
   the same point where the board stacks. */
@media (max-width: 1080px) {
  .dc-site .nav ul.nav-wide { display: none; }
  .dc-site .menu { display: block; }
  .dc-site .menu > .menu-btn {
    display: inline-flex; align-items: center; min-height: 48px; padding: 0 14px;
    font: 800 1.25rem/1 var(--display); color: var(--ink);
    background: transparent; border: 2px solid var(--ink); border-radius: 2px; cursor: pointer;
  }
  .dc-site .menu[open] ul {
    display: grid; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--floor); border-bottom: 2px solid var(--ink); padding: 8px var(--pitch) 16px;
  }
  .dc-site .menu[open] ul a { color: var(--ink); text-decoration: none; min-height: 48px; display: flex; align-items: center; font-size: 1.125rem; width: 100%; border-top: 1px solid var(--rule); }
  .dc-site .nav { gap: 12px; }
}

/* Service page hero with no price card: the H1 on the left half of the board, the lede and button on the right,
   so the board never shows a bare blue column. */
.dc-site .board-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pitch) calc(var(--pitch) * 2); align-items: start; }
.dc-site .board-split .board-about { padding-top: 10px; }
.dc-site .board-split .board-about { margin-top: 0; max-width: 60ch; }
.dc-site .board-split .board-about .lede { margin-top: 0; color: var(--paint); }
.dc-site .board-split .board-cta { margin-top: 8px; }
.dc-site .board-split h1.page-h1 { max-width: 16ch; }
/* OPS-77: a page title over 50 characters (Wix, custom web apps) steps down a size, so it does not fill the first
   screen at 1440 (impeccable oversized-h1). */
.dc-site .board h1.page-h1--long { font-size: clamp(2.75rem, 3.9vw, 3.5rem); max-width: 20ch; }

/* Product page hero: the product hangs on the board in its own painted slot (DESIGN.md: products keep their own
   mark and colour). Name left, what it is right, a screen across the bottom when the page has one. */
.dc-site .slot--hero { padding: 16px; }
.dc-site .tool--hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px calc(var(--pitch) * 2); align-items: start; padding: 36px 36px 32px; }
.dc-site .tool--hero h1.tool-name { font-size: clamp(3rem, 5.6vw, 5.25rem); line-height: .92; letter-spacing: -0.01em; }
.dc-site .tool-body { display: grid; gap: 16px; max-width: 60ch; }
.dc-site .tool-lede { font-size: 1.1875rem; line-height: 1.55; color: var(--ink); }
.dc-site .tool--hero .tool-meta { font-size: 1rem; line-height: 1.55; padding-top: 14px; border-top: 1px solid var(--rule); }
.dc-site .tool-shot { grid-column: 1 / -1; margin-top: 8px; }
.dc-site .tool-shot img { width: auto; max-width: min(100%, 1054px); }
.dc-site .slot--hero:hover .tool, .dc-site .slot--hero:focus-within .tool { transform: none; box-shadow: 0 2px 4px rgba(10, 20, 60, .18); }

/* "Entered once": the three hand-offs as one chain, numbered in board blue, joined by a rule. */
.dc-site .dc-page .chain { list-style: none; margin: 4px 0; padding: 0; counter-reset: chain; display: grid; gap: 0; }
.dc-site .chain li { counter-increment: chain; position: relative; padding: 12px 0 12px 56px; font-weight: 600; }
.dc-site .chain li::before { content: counter(chain); position: absolute; left: 0; top: 8px; width: 36px; height: 36px; display: grid; place-items: center; font: 800 1.375rem/1 var(--display); color: var(--paint); background: var(--board); border-radius: 2px; }
.dc-site .chain li + li::after { content: ""; position: absolute; left: 17px; top: -4px; height: 12px; border-left: 2px solid var(--board); }

/* PluginSprout catalog: the store's groups as ruled rows, product names in the PluginSprout green. */
.dc-site .catalog { gap: 28px; }
.dc-site .catalog-group { display: grid; gap: 8px; }
.dc-site .catalog-label { font: 700 1.25rem/1 var(--display); }
.dc-site .dc-page .catalog-rows { list-style: none; margin: 0; padding: 0; }
.dc-site .catalog-rows li { padding: 12px 0; border-top: 1px solid var(--rule); color: var(--ink-soft); }
.dc-site .catalog-rows li:last-child { border-bottom: 1px solid var(--rule); }
.dc-site .catalog-rows b { display: block; font: 800 1.375rem/1.1 var(--display); color: var(--ps); margin-bottom: 4px; }

/* Home "Can you automate the work behind the website?": the four examples as label and line rows. */
.dc-site .dc-page .spec { margin: 0; }
.dc-site .spec-row { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-top: 1px solid var(--rule); }
.dc-site .spec-row:last-child { border-bottom: 1px solid var(--rule); }
.dc-site .spec dt { font: 800 1.375rem/1.1 var(--display); }
.dc-site .spec dd { margin: 0; }
.dc-site .links-row .btn { min-height: 48px; }
.dc-site .board-sub { display: grid; gap: 8px; max-width: 60ch; }

@media (max-width: 760px) {
  .dc-site .board-split { grid-template-columns: minmax(0, 1fr); }
  .dc-site .tool--hero { grid-template-columns: minmax(0, 1fr); padding: 24px 20px 22px; }
  .dc-site .tool--hero .btn { white-space: normal; text-align: center; line-height: 1.1; padding-block: 12px; }
  .dc-site .slot--hero { padding: 12px; }
  .dc-site .spec-row { grid-template-columns: minmax(0, 1fr); }
  .dc-site .chain li { padding-left: 50px; }
}

/* OPS-58 critique: the nav marks the current page with the tape (DESIGN.md: yellow is where a visitor walks). */
.dc-site .nav-wide a[aria-current="page"] { box-shadow: inset 0 -3px var(--tape); text-decoration: none; }
.dc-site .menu ul a[aria-current="page"] { font-weight: 700; box-shadow: inset 4px 0 var(--tape); padding-left: 12px; }
/* The review table is small type in a narrow column; the screen links to the full-size file. */
.dc-site .screen-full { display: block; cursor: zoom-in; }

/* OPS-58 art-director fixes (12648) */
/* The open Menu panel ends on an ink edge with the paper shadow, so the board under it never shows through. */
.dc-site .dc-page .menu[open] ul { border-bottom: 2px solid var(--ink); box-shadow: 0 14px 30px -16px rgba(5, 12, 45, .55); }
/* Catalog names link to their store pages and keep the PluginSprout green. */
.dc-site .dc-page .catalog-rows b a { color: var(--ps); text-decoration-thickness: 1px; }
.dc-site .dc-page .catalog-rows b a:hover { text-decoration-thickness: 2px; }
/* The AI page's workflow, hung on the board: five steps in one tool, the approval step on tape (a person acts there). */
.dc-site .slot--flow { margin-top: calc(var(--pitch) * 2); padding: 14px; }
.dc-site .slot--flow:hover .tool { transform: none; box-shadow: 0 2px 4px rgba(10, 20, 60, .18); }
.dc-site .dc-page .flow { list-style: none; margin: 0; padding: 20px 24px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; }
.dc-site .flow li { position: relative; display: grid; gap: 8px; align-content: start; padding: 4px 28px 4px 0; }
.dc-site .flow li + li { padding-left: 4px; }
.dc-site .flow li:not(:last-child)::after { content: ""; position: absolute; right: 10px; top: 13px; width: 9px; height: 9px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg); }
.dc-site .flow b { font: 800 1.5rem/1 var(--display); color: var(--board); }
.dc-site .flow span { font: 700 1.375rem/1.05 var(--display); color: var(--ink); }
.dc-site .flow em { display: block; margin-top: 4px; font: 500 .875rem/1.3 var(--body); font-style: normal; color: var(--ink-soft); }
.dc-site .flow .flow-wait span { justify-self: start; background: var(--tape); padding: 2px 6px 3px; margin-left: -6px; border-radius: 2px; }
@media (max-width: 760px) {
  .dc-site .dc-page .flow { grid-template-columns: minmax(0, 1fr); padding: 14px 18px; }
  .dc-site .flow li { grid-template-columns: 2rem minmax(0, 1fr); align-items: baseline; padding: 10px 0; }
  .dc-site .flow li + li { padding-left: 0; border-top: 1px solid var(--rule); }
  .dc-site .flow li:not(:last-child)::after { display: none; }
}

/* OPS-54: /wix-website-help/ and /custom-web-apps/ (OPS-70 service page template) */
/* Related services and the web app list: the .nots rows without the cross. */
.dc-site .related { list-style: none; margin: 0; padding: 0; }
.dc-site .related li { font-size: 1.1875rem; padding: 14px 0; border-top: 1px solid var(--rule); }
.dc-site .related li:last-child { border-bottom: 1px solid var(--rule); }
.dc-site .related b, .dc-site .related a { font-weight: 700; }
.dc-site .col-text .related + p { margin-top: 20px; }
/* App project cards: built-with and what-it-does lines, then the project link (no card overlay link here). */
.dc-site .app-facts { font-size: .9375rem; line-height: 1.5; color: var(--ink-soft); }
.dc-site .app-facts b { color: var(--ink); }
.dc-site .app-link { font-weight: 600; }
.dc-site .app-link a { min-height: 44px; display: inline-flex; align-items: center; }
.dc-site .app-text { border-top: 2px solid var(--ink); padding-top: 16px; }
.dc-site .app-text h3 { font-size: 1.75rem; font-weight: 700; }

/* OPS-70: header Services and Products dropdowns. Plain <details>, because the pages carry no script; the shared
   name lets only one stay open where the browser supports it. The panel is paper on an ink edge with the paper
   shadow, the same as the open Menu, since it hangs over the board. */
.dc-site .nav-wide > li { position: relative; display: flex; }
.dc-site .drop > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 500; font-size: 1rem; color: var(--ink); cursor: pointer; }
.dc-site .drop > summary::-webkit-details-marker { display: none; }
.dc-site .drop > summary::after { content: ""; width: .45em; height: .45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.15em) rotate(45deg); transition: transform .2s var(--ease); }
.dc-site .drop[open] > summary::after { transform: translateY(.12em) rotate(-135deg); }
.dc-site .drop > summary:hover { text-decoration: underline; }
.dc-site .drop:has(a[aria-current="page"]) > summary { box-shadow: inset 0 -3px var(--tape); }
.dc-site .nav .drop-list { position: absolute; top: calc(100% + 10px); left: -18px; z-index: 6; display: grid; gap: 0; min-width: 17rem; padding: 6px 18px; background: var(--paper); border: 2px solid var(--ink); border-radius: 2px; box-shadow: 0 14px 30px -16px rgba(5, 12, 45, .55); }
/* A closed details still answers layout queries for its content in Chrome (the Menu list too, between 761 and
   1080px, where it overlapped the board for impeccable's occlusion check), so a closed list is display: none. */
.dc-site .menu:not([open]) > ul { display: none; }
/* Same for the dropdown panels. A closed details still answers layout queries for its content in Chrome, so the closed panel is display: none. */
.dc-site .nav .drop:not([open]) > .drop-list { display: none; }
.dc-site .nav .drop-list a { width: 100%; min-height: 44px; white-space: nowrap; }
.dc-site .drop-list li + li a { border-top: 1px solid var(--rule); }
.dc-site .nav .drop-list a[aria-current="page"] { font-weight: 700; box-shadow: inset 4px 0 var(--tape); padding-left: 12px; }

/* The Menu (1080px and under) lists Services and Products as headed sub-lists, in the same order as the wide nav. */
@media (max-width: 1080px) {
  .dc-site .dc-page .menu[open] ul { gap: 0; }
  .dc-site .dc-page .menu[open] ul ul { position: static; display: grid; padding: 0 0 0 16px; background: none; border: 0; box-shadow: none; }
  .dc-site .menu-h { display: block; padding: 16px 0 4px; font: 800 1.375rem/1 var(--display); color: var(--ink); }
  .dc-site .menu-group + .menu-group .menu-h { margin-top: 4px; border-top: 1px solid var(--rule); padding-top: 18px; }
  .dc-site .menu[open] ul ul a { font-size: 1.0625rem; }
  .dc-site .menu[open] .menu-group ul li:first-child a { border-top: 0; }
}

/* OPS-70 /services/: the board hangs an index of the six services; each links to its ticket below. */
.dc-site .dc-page .svc-index { list-style: none; margin: calc(var(--pitch) * 2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--pitch); }
.dc-site .svc-index li { border-top: 2px solid rgba(220, 230, 255, .45); padding-top: 10px; }
.dc-site .board .svc-index a { display: flex; align-items: flex-start; min-height: 44px; color: var(--paint); font: 700 1.375rem/1.1 var(--display); text-decoration: none; }
.dc-site .board .svc-index a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* Service tickets: paper on an ink edge, with the price on a torn-off stub (dashed perforation, notched at both
   edges) that sits on the bottom of every ticket, so the price lines in a row line up. Flat: tickets lie on the
   floor, they do not hang. */
.dc-site .svc-head { display: grid; gap: 12px; max-width: 56ch; }
.dc-site .dc-page .svc-grid { list-style: none; margin: calc(var(--pitch) * 2) 0 calc(var(--pitch) * -1); padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--pitch); }
.dc-site .svc-card { --svc-pad: 28px; position: relative; display: grid; grid-template-rows: auto auto; grid-row: span 2; row-gap: 20px; padding: var(--svc-pad) var(--svc-pad) 6px; background: var(--paper); border: 2px solid var(--ink); border-radius: 2px; scroll-margin-top: 24px; margin-bottom: var(--pitch); }
.dc-site .svc-card h3 { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 800; line-height: .95; }
.dc-site .dc-page .svc-card h3 a { color: var(--ink); text-decoration: none; }
.dc-site .dc-page .svc-card h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
@supports (grid-template-rows: subgrid) { .dc-site .svc-card { grid-template-rows: subgrid; } }
.dc-site .svc-body { display: grid; gap: 14px; align-content: start; }
.dc-site .svc-for { font-weight: 600; }
.dc-site .svc-case { font-size: .9375rem; line-height: 1.55; color: var(--ink-soft); }
.dc-site .svc-stub { position: relative; margin: 0 calc(var(--svc-pad) * -1); padding: 18px var(--svc-pad) 0; align-content: start; border-top: 2px dashed var(--rule); display: grid; gap: 2px; }
.dc-site .svc-stub::before, .dc-site .svc-stub::after { content: ""; position: absolute; top: -9px; width: 20px; height: 20px; border-radius: 50%; background: var(--floor); border: 2px solid transparent; transform: rotate(45deg); }
/* Each notch covers the ticket edge with the floor colour and draws only its inner half in ink. */
.dc-site .svc-stub::before { left: -11px; border-top-color: var(--ink); border-right-color: var(--ink); }
.dc-site .svc-stub::after { right: -11px; border-bottom-color: var(--ink); border-left-color: var(--ink); }
.dc-site .svc-stub .price { font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.dc-site .svc-stub .price b { font: 800 1.75rem/1 var(--display); color: var(--ink); margin-right: 0; }
.dc-site .svc-stub .price b.price-k { font: 700 1rem/1.5 var(--body); margin-right: 2px; }

/* Built with: plain text, no chips (OPS-70 comment 13060 fix 4). */
.dc-site .stack-line { max-width: 56ch; font-size: 1.1875rem; line-height: 1.6; }
.dc-site .stack-line b { font-weight: 700; }

/* Hero index: each item reads as a jump link to its card, with the price where the card has one. */
.dc-site .svc-index .svc-index-n { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.dc-site .board .svc-index a { flex-direction: column; gap: 6px; }
.dc-site .board .svc-index a:hover { text-decoration: none; }
.dc-site .board .svc-index a:hover .svc-index-n { text-decoration-thickness: 2px; }
.dc-site .svc-index .svc-index-n::after { content: ""; display: inline-block; width: .38em; height: .38em; margin-left: .3em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.2em) rotate(45deg); }
.dc-site .svc-index .svc-index-p { font: 600 .9375rem/1.3 var(--body); color: var(--tape); }

/* Proof on the floor: Home's Work cards, three across, and a line on our own products. */
.dc-site .dc-page .work-more { margin-top: calc(var(--pitch) * 1.5); max-width: 60ch; }

/* Blue band in the lower half: the job steps on the board, the service picker on a paper sheet on its clip. */
.dc-site .board--band { padding: calc(var(--pitch) * 3) var(--pitch) calc(var(--pitch) * 3.5); }
.dc-site .band-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: calc(var(--pitch) * 2.5); align-items: start; }
.dc-site .board--band h2#how-h, .dc-site .board--cta h2 { font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 800; color: var(--paint); }
.dc-site .band-sub { margin-top: 12px; color: var(--on-board-soft); }
.dc-site .dc-page .steps--board { margin-top: calc(var(--pitch) * 1.5); }
.dc-site .steps--board li { border-top-color: rgba(220, 230, 255, .45); color: var(--on-board-soft); }
.dc-site .steps--board li:last-child { border-bottom-color: rgba(220, 230, 255, .45); }
.dc-site .steps--board li::before { color: var(--tape); }
.dc-site .steps--board b { color: var(--paint); }
.dc-site .dc-page .pick-rows { list-style: none; margin: 16px 0 0; padding: 0; }
.dc-site .pick-rows li { padding: 12px 0; border-top: 1px solid var(--rule); font-size: .9375rem; line-height: 1.5; color: var(--ink-soft); }
.dc-site .pick-rows li:last-child { border-bottom: 1px solid var(--rule); }
.dc-site .pick-rows b { color: var(--ink); font-weight: 600; }
.dc-site .pick-rows a { font-weight: 600; }

/* Closing CTA as a blue band. */
.dc-site .board--cta { padding: calc(var(--pitch) * 3) var(--pitch); }
.dc-site .cta-split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--pitch) calc(var(--pitch) * 2.5); align-items: end; }
.dc-site .board--cta h2 { max-width: 16ch; }
.dc-site .cta-body { display: grid; gap: 8px; color: var(--on-board-soft); font-size: 1.1875rem; }
.dc-site .board--cta .board-cta { margin-top: 8px; }

@media (max-width: 1080px) {
  .dc-site .dc-page .svc-index { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .dc-site .band-split, .dc-site .cta-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .dc-site .dc-page .svc-grid { grid-template-columns: minmax(0, 1fr); margin-top: var(--pitch); }
  .dc-site .board--band, .dc-site .board--cta { padding: calc(var(--pitch) * 2) var(--pitch) calc(var(--pitch) * 2.5); }
  .dc-site .board--band .paper { padding: 32px 20px 20px; }
  .dc-site .svc-card { --svc-pad: 20px; }
  .dc-site .dc-page .svc-index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: var(--pitch); }
  .dc-site .board .svc-index a { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .dc-site .drop > summary::after { transition: none; }
}
.dc-site .board--cta .btn--big { width: auto; }

/* OPS-55: Home credibility. "Who has been building this since 2017?" sits straight under the hero: the history
   on the left, the company facts on the repair-note slip on the right (the same slip as the staging-store note),
   then the work. Larsa and AMS Find Parts lead as two wide cards with what they needed and what we built; the
   other five run as one row of five on the wide floor, three and two on a tablet, one by one on a phone. */
.dc-site .facts { display: grid; gap: 16px; align-content: start; }
.dc-site .facts h3 { font-size: 1.75rem; font-weight: 700; }
.dc-site .slip--facts .slip-row { grid-template-columns: 12.5rem minmax(0, 1fr); }
.dc-site .slip--facts dt { font-size: 1.125rem; line-height: 1.15; padding: 14px 16px 14px 0; }
.dc-site .slip--facts dd { padding: 14px 0 14px 20px; font-size: 1rem; line-height: 1.5; }
.dc-site .dc-page .cases-lead, .dc-site .dc-page .cases-rest { list-style: none; margin: calc(var(--pitch) * 2.5) 0 0; padding: 0; display: grid; gap: calc(var(--pitch) * 2) var(--pitch); }
.dc-site .dc-page .cases-lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dc-site .dc-page .cases-rest { margin-top: calc(var(--pitch) * 2); grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dc-site .case-line { font-size: 1rem; line-height: 1.5; color: var(--ink-soft); }
.dc-site .case-line b { color: var(--ink); font-weight: 600; }
.dc-site .work-card--lead h3 { font-size: 2.25rem; }
.dc-site .cases-rest .work-card h3 { font-size: 1.5rem; }
.dc-site .dc-page .cases-rest .case-line { font-size: .9375rem; }
@media (max-width: 1240px) {
  .dc-site .dc-page .cases-rest { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .dc-site .cases-rest > li { grid-column: span 2; }
  .dc-site .cases-rest > li:nth-child(n + 4) { grid-column: span 3; }
}
@media (max-width: 760px) {
  .dc-site .dc-page .cases-lead, .dc-site .dc-page .cases-rest { grid-template-columns: minmax(0, 1fr); margin-top: calc(var(--pitch) * 1.5); }
  .dc-site .cases-rest > li, .dc-site .cases-rest > li:nth-child(n + 4) { grid-column: auto; }
  /* On a phone the five smaller cards go thumbnail-left, so the list is not five full-width screenshots. */
  .dc-site .dc-page .cases-rest { gap: 28px; }
  .dc-site .cases-rest .work-card { grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .dc-site .cases-rest .work-card img { grid-column: 1; grid-row: 1 / span 2; }
  .dc-site .cases-rest .work-card h3 { grid-column: 2; margin-top: 0; }
  .dc-site .cases-rest .work-card .work-tag { grid-column: 2; }
  .dc-site .cases-rest .work-card .case-line { grid-column: 1 / -1; }
  .dc-site .work-card--lead h3 { font-size: 1.75rem; }
  .dc-site .slip--facts .slip-row { grid-template-columns: minmax(0, 1fr); }
  .dc-site .slip--facts dt { padding: 14px 0 0; }
  .dc-site .slip--facts dd { padding: 4px 0 14px; }
  .dc-site .dc-page .proof-n { font-size: 2.125rem; }
}

/* OPS-70 art-director note (13060, in passing): links inside the hero panel's H3s keep the heading type. */
.dc-site .order-rows h3 a { display: inline; min-height: 0; margin: 0; font: inherit; }

/* OPS-70 art-director nits (13066). 1: the jump-row chevron stays on the line of the last word. */
.dc-site .svc-index .svc-index-n::after { content: none; }
.dc-site .svc-index-end { white-space: nowrap; }
.dc-site .svc-index-end::after { content: ""; display: inline-block; width: .38em; height: .38em; margin-left: .3em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-.2em) rotate(45deg); }
/* 2: .dc-page p { margin-block: 0 } was beating both sub-lines' margins; they get their gap back. */
.dc-site .dc-page .band-sub { margin-top: 16px; }
.dc-site .dc-page .order-intro { margin-top: 10px; }
/* 3: the stat row moves under the headline, so the hero's left column is not bare at 1440. */
@media (min-width: 761px) {
  .dc-site .board-split > .page-h1 { grid-column: 1; grid-row: 1; }
  .dc-site .board-split > .proof { grid-column: 1; grid-row: 2; margin-top: 0; }
  .dc-site .board-split > .board-about { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; display: flex; flex-direction: column; }
  /* The logos drop to the foot of the right column, on the line where the stat row ends. */
  .dc-site .board-split > .board-about > .clients { margin-top: auto; }
}
/* A section H2 that sits straight in a .two-col fills its grid row (no visual change: it has no box of its own),
   so impeccable's heading-rhythm check measures the gap to the next section, not to the column beside it. */
.dc-site .two-col > h2 { align-self: stretch; }