/* Techies Lab — v3 overrides
   Layered on top of the live sheets so the toggle hero, floating blocks and
   grid stay exactly as they are. This file only changes type and colour, and
   styles the new per-category service marks. */

:root {
  /* True V1 palette, read from techieslab-internal/site @ 8669a42 app/globals.css.
     Commit 2dc0d98 later dropped the coral, which is why an earlier scan missed it. */
  --acid: #b8ff65;         /* acid green */
  --coral: #ff714b;        /* coral orange */
  --v1-purple: #8c6cff;
  --v1-purple-deep: #5e36ef;
  --v1-paper: #f5f3f8;
}

/* ---------- type: serif display, sans working ---------- */

h1, h2, .page-hero h1, .section-head h2, .case-copy h3, .jump-band strong {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  letter-spacing: -.015em !important;
}
.page-hero h1 { font-size: clamp(40px, 4.6vw, 68px) !important; line-height: 1.04 !important; }
.section-head h2 { font-size: clamp(28px, 3.2vw, 46px) !important; line-height: 1.12 !important; }
.case-copy h3 { font-size: clamp(26px, 2.8vw, 38px) !important; }
.growth-copy, .page-hero-copy { font-family: var(--sans); }

/* the emphasised word picks up the serif italic, as in v1 */
h1 em, h2 em, .section-head em {
  font-family: var(--serif);
  font-style: italic;
  color: var(--purple-light);
}

/* ---------- service marks ---------- */

.mode-mark {
  display: block;
  width: 108px; height: 64px;
  margin: 22px 0 20px;
  color: var(--accent, var(--purple-light));
  transition: color .25s, transform .25s;
}
.offer-card:hover .mode-mark { transform: translateX(3px); }

/* one accent per category, applied flat rather than as a gradient */
.offer-card:nth-of-type(1) { --accent: var(--acid); }
.offer-card:nth-of-type(2) { --accent: var(--coral); }
.offer-card:nth-of-type(3) { --accent: var(--v1-purple); }

.offer-card span { color: var(--accent) !important; }
.offer-card strong { color: var(--accent) !important; }
.offer-card {
  border-top: 2px solid color-mix(in srgb, var(--accent) 55%, transparent) !important;
  transition: background .25s, border-color .25s;
}
.offer-card:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent) !important;
  border-top-color: var(--accent) !important;
}

/* ---------- the two proof paths get their own colour ---------- */

.proof-links a:nth-of-type(1) { --path: var(--acid); }
.proof-links a:nth-of-type(2) { --path: var(--coral); }
.proof-links a {
  border-left: 2px solid color-mix(in srgb, var(--path) 60%, transparent) !important;
  transition: background .25s, border-color .25s;
}
.proof-links a:hover { background: color-mix(in srgb, var(--path) 8%, transparent) !important; border-left-color: var(--path) !important; }
.proof-links a span { color: var(--path) !important; }
.proof-links a small { color: var(--path) !important; }

/* ---------- market playbook cards cycle the palette ---------- */

.market-card:nth-of-type(1) { --tone: var(--acid); }
.market-card:nth-of-type(2) { --tone: var(--coral); }
.market-card:nth-of-type(3) { --tone: var(--v1-purple); }
.market-card:nth-of-type(4) { --tone: var(--coral); }
.market-card {
  border-top: 2px solid color-mix(in srgb, var(--tone) 55%, transparent) !important;
}
.market-card span { color: var(--tone) !important; }
.market-card b { color: var(--tone) !important; }

/* ---------- work cards: tag which service segment they came from ---------- */

.segs { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }
.seg {
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .05em;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--segc) 45%, transparent);
  color: var(--segc);
}
.seg[data-seg="consultancy"] { --segc: var(--acid); }
.seg[data-seg="tooling"] { --segc: var(--coral); }
.seg[data-seg="execution"] { --segc: var(--v1-purple); }

/* ---------- before / after workflow ---------- */

.ba-grid { display: grid; gap: 18px; margin-top: 34px; }
@media (min-width: 820px) { .ba-grid { grid-template-columns: 1fr 1fr; } }
.ba { border: 1px solid var(--line); background: var(--panel); padding: 26px; }
.ba[data-state="before"] { --tone: var(--coral); }
.ba[data-state="after"] { --tone: var(--acid); }
.ba .tag {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 15%, transparent);
  color: var(--tone); font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.ba h3 { margin: 16px 0 12px; font-family: var(--serif); font-weight: 500; font-size: 24px; }
.ba p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.ba ol { margin: 16px 0 0; padding-left: 20px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.ba ol li::marker { color: var(--tone); font-weight: 600; }
.ba .cost { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--sans); font-size: 13px; color: var(--tone); }

/* ---------- tiktok embeds ---------- */

.tt-grid { display: grid; gap: 18px; margin-top: 28px; }
@media (min-width: 760px) { .tt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .tt-grid { grid-template-columns: repeat(4, 1fr); } }
.tt-grid blockquote { margin: 0 !important; max-width: none !important; }

/* ---------- workflow diagram (About / philosophy) ---------- */

.wf-grid, .wf-after { display: grid; gap: 18px; margin-top: 34px; }
@media (min-width: 900px) { .wf-grid, .wf-after { grid-template-columns: 1fr 1fr; } }
.wf-after { margin-top: 18px; }

.wf-panel { border: 1px solid var(--line); border-radius: 6px; background: var(--panel); padding: 24px; }
.wf-panel[data-state="before"] { --tone: var(--coral); }
.wf-panel[data-state="after"]  { --tone: var(--acid); }
.wf-panel { border-top: 2px solid var(--tone); }
.wf-panel header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.wf-panel header h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 21px; flex: 1; }
.wf-num {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--tone); color: var(--tone);
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  display: grid; place-items: center;
}
.wf-cost {
  padding: 5px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--tone) 15%, transparent);
  color: var(--tone); font-family: var(--sans); font-size: 12px; font-weight: 600;
}

.wf-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.wf-chip {
  padding: 6px 11px; border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--tone) 38%, transparent);
  background: color-mix(in srgb, var(--tone) 7%, transparent);
  font-family: var(--sans); font-size: 12.5px; color: #ded9e8;
}
.wf-chip.wf-repeat { background: var(--tone); border-color: var(--tone); color: #0b0a12; font-weight: 700; }
.wf-chip.wf-ok { border-color: var(--acid); color: var(--acid); }
.wf-arrow, .wf-loop { color: var(--muted); font-size: 13px; }

.wf-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 18px; }
.wf-tile {
  margin: 0; aspect-ratio: 1 / 1.1; border-radius: 3px;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.05) 0 5px, transparent 5px 10px);
  display: flex; align-items: flex-end;
}
.wf-tile figcaption { padding: 4px 5px; font-family: var(--sans); font-size: 8.5px; line-height: 1.2; color: var(--muted); }

.wf-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 12.5px; }
.wf-table th { text-align: left; font-weight: 600; color: var(--muted); padding: 8px 6px; border-bottom: 1px solid var(--line); }
.wf-table thead th { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.wf-table td { text-align: center; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.wf-table tbody th { color: #ded9e8; font-weight: 500; }
.wf-y { color: var(--coral); }
.wf-n { color: rgba(255,255,255,.22); }

.wf-sum { margin: 16px 0 0; font-family: var(--sans); font-size: 13.5px; color: var(--muted); }
.wf-sum b { color: #ded9e8; }
.wf-big { color: var(--tone) !important; font-size: 22px; font-weight: 700; vertical-align: -2px; }

.wf-quote {
  margin: 26px 0 0; padding-left: 16px;
  border-left: 2px solid var(--v1-purple);
  font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.45; color: #ded9e8;
}

/* ---------- playbook index + detail ---------- */

.pb-grid { display: grid; gap: 18px; }
@media (min-width: 820px) { .pb-grid { grid-template-columns: repeat(3, 1fr); } }
.pb-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 26px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); border-top: 2px solid var(--tone);
  transition: background .2s, transform .2s;
}
.pb-card:hover { background: color-mix(in srgb, var(--tone) 7%, transparent); transform: translateY(-2px); }
.pb-card .eyebrow { color: var(--tone); }
.pb-card h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 28px; }
.pb-card p { margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.pb-card small { margin-top: auto; padding-top: 12px; color: var(--tone); font-family: var(--sans); font-size: 13px; }

.pb-detail .pb-note {
  margin-top: 20px; padding: 12px 16px; max-width: 70ch;
  border-left: 2px solid var(--tone);
  background: color-mix(in srgb, var(--tone) 8%, transparent);
  font-family: var(--sans); font-size: 13px; color: var(--muted);
}
.pb-sec h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(24px, 2.4vw, 34px); margin: 0 0 20px; }
.pb-body { max-width: 78ch; color: var(--muted); font-size: 15px; line-height: 1.7; }
.pb-body h4 { color: #ded9e8; font-family: var(--sans); font-size: 15px; margin: 22px 0 8px; }
.pb-body ul, .pb-body ol { padding-left: 20px; }
.pb-body li { margin: 5px 0; }
.pb-body li::marker { color: var(--tone); }
.pb-body strong, .pb-body b { color: #ded9e8; }
.pb-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13.5px; }
.pb-body th, .pb-body td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pb-body th { color: var(--tone); font-family: var(--sans); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.pb-body blockquote { margin: 16px 0; padding-left: 14px; border-left: 2px solid var(--tone); color: #ded9e8; }
.pb-body code { background: var(--panel-2); padding: 1px 5px; border-radius: 3px; font-size: 13px; }

/* ---------- reference background visuals (2dc0d98) ----------
   Decorative only: full-bleed, cover, low opacity, dark overlay on top so the
   existing copy keeps its contrast. Layout and components are untouched. */

.has-bg { position: relative; isolation: isolate; }
.has-bg > .shell { position: relative; z-index: 2; }
.has-bg::before,
.has-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.has-bg::before {
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
  opacity: .18;
  z-index: 0;
}
.has-bg::after {
  background: linear-gradient(to bottom, rgba(10,10,20,.86), rgba(10,10,20,.72) 45%, rgba(10,10,20,.92));
  z-index: 1;
}
.has-bg[data-bg="workflow"] { --bg-img: url("/agency-v3/visuals/workflow-engine.jpg"); }
.has-bg[data-bg="signal"]   { --bg-img: url("/agency-v3/visuals/market-signal-field.jpg"); }
.has-bg[data-bg="network"]  { --bg-img: url("/agency-v3/visuals/growth-network.jpg"); }

/* keep the framing generous on small screens instead of cropping hard */
@media (max-width: 720px) {
  .has-bg::before { background-position: 50% 30%; opacity: .13; }
}

/* ---------- the hero wordmark stays sans ---------- */

.growth-title,
.growth-title span,
.growth-line,
.growth-line span { font-family: var(--display) !important; font-weight: 700 !important; font-style: normal !important; }

/* ---------- AI-embedded chain ---------- */

.ai-chain { display: grid; gap: 14px; margin-top: 34px; }
@media (min-width: 760px) { .ai-chain { grid-template-columns: repeat(5, 1fr); } }
.ai-stage {
  position: relative; padding: 20px 18px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--panel);
  border-top: 2px solid var(--acid);
}
.ai-stage b { font-family: var(--sans); font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.ai-stage h3 { margin: 8px 0 14px; font-family: var(--serif); font-weight: 500; font-size: 20px; }
.ai-stage p { margin: 0 0 10px; font-family: var(--sans); font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.ai-stage p span {
  display: inline-block; margin-right: 6px; padding: 2px 7px; border-radius: 3px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
}
.ai-bot span { background: var(--acid); color: #0b0a12; }
.ai-human span { background: transparent; border: 1px solid var(--coral); color: var(--coral); }
@media (min-width: 760px) {
  .ai-stage::after {
    content: "→"; position: absolute; right: -11px; top: 50%; transform: translateY(-50%);
    color: var(--muted); font-size: 13px; z-index: 3;
  }
  .ai-stage:last-child::after { content: none; }
}

/* ---------- FoundersVN mark reads white on the dark strip ---------- */

.brand-cell img[alt="FoundersVN"] { filter: brightness(0) invert(1); opacity: .9; }

.form-footer .cta-alt {
  font-family: var(--sans); font-size: 13px; color: var(--acid);
  align-self: center; margin-left: 14px;
}
.form-footer .cta-alt:hover { color: #fff; }

/* ---------- decoded playbook: editorial layout ---------- */

.pb-hero { padding: 96px 0 72px; border-bottom: 1px solid var(--line); }
.pb-hero h1 { margin: 18px 0 0; font-family: var(--serif); font-weight: 500; font-size: clamp(46px, 6vw, 86px); line-height: 1; }
.pb-lead { margin: 20px 0 0; max-width: 58ch; font-family: var(--sans); font-size: 19px; line-height: 1.55; color: #ded9e8; }

.pb-stats { display: flex; flex-wrap: wrap; gap: 44px; margin-top: 40px; }
.pb-stat b { display: block; font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 46px); color: var(--tone); line-height: 1; }
.pb-stat span { display: block; margin-top: 6px; font-family: var(--sans); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

.pb-handles { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.pb-handle {
  padding: 7px 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent);
  color: var(--tone); font-family: var(--sans); font-size: 12.5px;
  transition: background .18s;
}
.pb-handle:hover { background: color-mix(in srgb, var(--tone) 12%, transparent); }

.pb-note {
  margin-top: 32px; padding: 12px 16px; max-width: 74ch;
  border-left: 2px solid var(--tone);
  background: color-mix(in srgb, var(--tone) 8%, transparent);
  font-family: var(--sans); font-size: 12.5px; line-height: 1.6; color: var(--muted);
}

/* sticky chapter nav */
.pb-toc {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10,10,20,.92); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.pb-toc .shell { display: flex; gap: 24px; overflow-x: auto; padding-top: 14px; padding-bottom: 14px; scrollbar-width: none; }
.pb-toc .shell::-webkit-scrollbar { display: none; }
.pb-toc a { white-space: nowrap; font-family: var(--sans); font-size: 12.5px; color: var(--muted); }
.pb-toc a:hover { color: var(--tone); }

/* two-column section: sticky heading left, prose right */
.pb-sec { padding: 70px 0; border-bottom: 1px solid var(--line); }
.pb-sec-grid { display: grid; gap: 34px; }
@media (min-width: 900px) { .pb-sec-grid { grid-template-columns: 300px 1fr; gap: 64px; } }
.pb-sec-head { align-self: start; }
@media (min-width: 900px) { .pb-sec-head { position: sticky; top: 74px; } }
.pb-idx { font-family: var(--sans); font-size: 11px; letter-spacing: .16em; color: var(--tone); }
.pb-sec-head h2 { margin: 10px 0 0; font-family: var(--serif); font-weight: 500; font-size: clamp(23px, 2.2vw, 31px); line-height: 1.15; }

.pb-body { max-width: 74ch; color: var(--muted); font-size: 15.5px; line-height: 1.75; }
.pb-body > *:first-child { margin-top: 0; }
.pb-body h4 { margin: 30px 0 10px; color: #ded9e8; font-family: var(--sans); font-size: 14px; letter-spacing: .02em; }
.pb-body p { margin: 14px 0; }
.pb-body ul, .pb-body ol { margin: 14px 0; padding-left: 20px; }
.pb-body li { margin: 7px 0; }
.pb-body li::marker { color: var(--tone); }
.pb-body strong, .pb-body b { color: #ded9e8; font-weight: 600; }
.pb-body table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 13.5px; display: block; overflow-x: auto; }
.pb-body th, .pb-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.pb-body th { color: var(--tone); font-family: var(--sans); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; white-space: nowrap; }
.pb-body blockquote {
  margin: 20px 0; padding: 14px 18px;
  border-left: 2px solid var(--tone); background: var(--panel);
  color: #ded9e8; font-family: var(--serif); font-size: 18px; font-style: italic;
}
.pb-body code { background: var(--panel-2); padding: 2px 6px; border-radius: 3px; font-size: 13px; color: var(--acid); }

.pb-takeaway { padding: 86px 0; }
.pb-quote {
  margin: 18px 0 26px; max-width: 34ch;
  font-family: var(--serif); font-size: clamp(26px, 3vw, 40px); line-height: 1.25; color: #fff;
}

.pb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pb-tag {
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent);
  color: var(--tone); font-family: var(--sans); font-size: 10.5px;
}

.nda-note {
  margin: 0 0 28px; padding: 14px 18px; max-width: 78ch;
  border-left: 2px solid var(--v1-purple);
  background: color-mix(in srgb, var(--v1-purple) 9%, transparent);
  font-family: var(--sans); font-size: 13.5px; line-height: 1.6; color: var(--muted);
}
.nda-note b { color: #ded9e8; }

.pb-logo { width: 40px; height: 40px; border-radius: 9px; object-fit: contain; background: #fff; padding: 5px; margin-bottom: 4px; }
.pb-split { margin: 60px 0 22px; padding-top: 30px; border-top: 1px solid var(--line); }
.pb-split p:last-child { margin: 8px 0 0; color: var(--muted); font-size: 14.5px; }

/* two-path cards: show the marks rather than a list of names */
.proof-logos { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 4px 0 2px; }
.proof-logos img {
  height: 30px; width: auto; max-width: 104px; object-fit: contain;
  opacity: .78; transition: opacity .2s;
}
.proof-links a:hover .proof-logos img { opacity: 1; }
/* the app marks are square icons on white — give them a chip so they read on dark */
.proof-logos img[alt="Shelf"],
.proof-logos img[alt="once.film"],
.proof-logos img[alt="Cal AI"] {
  height: 34px; width: 34px; border-radius: 8px; background: #fff; padding: 4px;
}
.proof-logos img[alt="FoundersVN"] { filter: brightness(0) invert(1); }

/* ---------- work cards: the mark identifies the client, not a headline ---------- */

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

.work-list { display: grid; gap: 16px; }
@media (min-width: 700px)  { .work-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .work-list { grid-template-columns: repeat(4, 1fr); } }

.work-card {
  display: flex; flex-direction: column; gap: 14px;
  min-height: 0; padding: 24px 22px 22px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
  border-top: 2px solid color-mix(in srgb, var(--acid) 40%, transparent);
  transition: background .2s, border-color .2s, transform .2s;
}
.work-card:hover { background: var(--panel-2); border-top-color: var(--acid); transform: translateY(-2px); }
.work-card > span {
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
}

/* every mark lands on the same optical plate so mixed formats sit level */
.work-logo {
  height: 46px; width: 100%; max-width: 150px;
  object-fit: contain; object-position: left center;
  margin: 2px 0 0; opacity: .92;
}
.work-card:hover .work-logo { opacity: 1; }
.work-logo[alt="FoundersVN"], .work-logo[alt="Maison Denude"] { filter: brightness(0) invert(1); }
.work-logo[alt="Starchild"], .work-logo[alt="Hanzi"], .work-logo[alt="AntiBot"] {
  width: 46px; border-radius: 10px; background: #fff; padding: 5px; object-position: center;
}

.work-card p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.work-card ul { margin: auto 0 0; padding: 12px 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.work-card li {
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--acid) 35%, transparent);
  color: var(--acid); font-family: var(--sans); font-size: 10px;
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.work-site { font-family: var(--sans); font-size: 12.5px; color: var(--acid); }
.work-site:hover { color: #fff; }

/* clickable marks */
.work-mark { position: relative; display: inline-block; }
.work-mark .work-ext { position: absolute; top: -2px; right: -12px; font-size: 11px; color: var(--muted); }
.work-mark:hover .work-ext { color: var(--acid); }
.brand-link { display: inline-flex; }

/* ---------- logo treatment ----------
   Two things decide how a mark is drawn:
   (a) the section background — the two-path cards sit on white, the strip and
       the work grid sit on ink, so the same mark needs opposite handling;
   (b) the file — vector wordmarks are transparent and can be recoloured,
       raster marks (jpg/webp/palette png) are opaque and must not be, or the
       whole rectangle floods to a solid block.
   Some SVGs also ship only a viewBox, so an explicit box is required or they
   collapse to 0x0. */

/* --- shared: every mark gets a real box --- */
.brand-cell img, .proof-logos img, .work-logo {
  display: block;
  object-fit: contain;
  filter: none;
}

/* --- DARK sections: strip + work grid --- */
.brand-cell img { height: 30px; width: 128px; object-position: center; opacity: .9; }
.work-logo { height: 40px; width: 132px; object-position: left center; opacity: .95; }

.brand-cell img[src$=".svg"], .work-logo[src$=".svg"] { filter: brightness(0) invert(1); }
.brand-cell img[src*="antibot"], .work-logo[src*="antibot"] { filter: none; }

.brand-cell img[src$=".png"], .brand-cell img[src$=".jpg"], .brand-cell img[src$=".webp"],
.work-logo[src$=".png"], .work-logo[src$=".jpg"], .work-logo[src$=".webp"],
.brand-cell img[src*="antibot"], .work-logo[src*="antibot"] {
  background: #fff; border-radius: 8px; padding: 6px;
}
/* square-ish icon marks keep a square plate */
.brand-cell img[src*="antibot"], .brand-cell img[src*="starchild"], .brand-cell img[src*="hanzi"],
.brand-cell img[src*="shelf"], .brand-cell img[src*="oncefilm"], .brand-cell img[src*="calai"] { width: 36px; height: 36px; }
.work-logo[src*="antibot"], .work-logo[src*="starchild"], .work-logo[src*="hanzi"] { width: 46px; height: 46px; }
/* wide raster wordmarks need room to stay readable */
.brand-cell img[src*="ecommert"], .brand-cell img[src*="smartdev"], .brand-cell img[src*="consen"] { width: 118px; height: 36px; }
.work-logo[src*="ecommert"], .work-logo[src*="smartdev"], .work-logo[src*="consen"] { width: 126px; height: 44px; }

.brand-cell:hover img, .work-card:hover .work-logo { opacity: 1; }

/* --- LIGHT section: the two-path cards sit on white --- */
.proof-logos img { height: 32px; width: 108px; object-position: left center; }
.proof-logos img[src$=".svg"] { filter: none; }            /* dark marks read fine on white */
.proof-logos img[src*="antibot"], .proof-logos img[src*="shelf"],
.proof-logos img[src*="oncefilm"], .proof-logos img[src*="calai"] {
  width: 34px; height: 34px; background: #fff;
  border: 1px solid rgba(0,0,0,.1); border-radius: 8px; padding: 4px;
}

/* a note that was also published as a blog series links out to the chapters */
.pb-series { padding: 40px 0; border-bottom: 1px solid var(--line); }
.pb-series .eyebrow { margin-bottom: 16px; }
.pb-series-list { display: grid; gap: 10px; }
@media (min-width: 820px) { .pb-series-list { grid-template-columns: repeat(2, 1fr); } }
.pb-series-list a {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--panel); transition: background .18s, border-color .18s;
}
.pb-series-list a:hover { background: var(--panel-2); border-color: color-mix(in srgb, var(--tone) 45%, transparent); }
.pb-series-list b { color: var(--tone); font-family: var(--sans); font-size: 12px; }
.pb-series-list span { flex: 1; font-family: var(--sans); font-size: 14px; color: #ded9e8; }
.pb-series-list i { color: var(--muted); font-style: normal; }