/* BizKit homepage, round 3: the few things the v3 sheet has no class for.
   Loaded after bizkit-v3.css, which stays untouched. Tokens are the v3 sheet's own. */

html { font-synthesis: none; }

/* Hero: the copy's label line sits under the headline, never above it (no eyebrows, the v3 rule) */
.hero-deck { max-width: 780px; margin: 22px auto 0; font-family: var(--font-head); font-weight: 600; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.4; letter-spacing: -0.01em; color: var(--graphite-700); text-wrap: balance; }
.hero-deck + .hero-lead { margin-top: 18px; }
.hero-title { max-width: 960px; }
.js .hero-deck { animation: rise-blur 900ms var(--ease) 50ms both; }

/* Hero video still: the play button in the middle of the poster, since the video is a placeholder
   (Clarry, 2026-10-07: "put the play button in thr middle since it's a placeholder"). The shared sheet
   puts it on the wall beside the speaker for the landing pages; the homepage takes it back to the centre.
   The margin stays its only offset, so it does not jump on hover */
.hero-stage .asset--video .play { left: 50%; top: 50%; transform: none; }
.hero-stage .asset--video:hover .play, .hero-stage .asset--video .play:focus-visible { transform: scale(1.08); }
.hero-stage .asset--video.is-pending:hover .play { transform: none; }
@media (max-width: 640px) {
  .hero-stage .asset--video .play { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .hero-stage .asset--video .play::before { inset: -10px; }
  .hero-stage .asset--video .play-icon { margin: -11px 0 0 -7px; border-left-width: 19px; border-top-width: 11px; border-bottom-width: 11px; }
}

/* Logo rows: client logos under the hero, supporters lower down. Hairline rules, as the v3 strip */
.logos { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 32px; padding: 30px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logos--after-hero { margin-top: clamp(40px, 5vw, 64px); }
.logos-label { font-family: var(--font-head); font-weight: 600; font-size: 13px; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-deep); }
.logos-row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 24px 28px; align-items: center; }
.logos-row li { display: flex; align-items: center; justify-content: center; height: 64px; }
.logos-row img { width: auto; height: auto; max-width: 100%; max-height: 52px; object-fit: contain; }
.logos--after-hero .logos-row img { max-width: 84%; }   /* the wide client wordmarks keep clear space in their cell */
.logos--after-hero .logos-row { padding-right: 24px; }   /* the last logo stops short of the rules' end */
/* Supported by, three logos (round 14, DOST TAPI added). Brainsparks and PCIEERD keep their round 13
   size; TAPI is sized by height against PCIEERD, both DOST marks at 56 px, so its wide, short file
   gets a cell of its own width (334 px, under its 388 px file) rather than the 220 px cell */
.logos-row--3 { grid-template-columns: minmax(0, 220px) minmax(0, 220px) minmax(0, 334px); justify-content: start; gap: 24px 64px; }
.logos-row--3 li { justify-content: flex-start; }
.logos-row--3 img { max-height: 56px; }

/* Section labels: the identity's label component above each step of the story */
.story-label + .t-section, .story-label + h3 { margin-top: 16px; }
.section-head--left { max-width: 820px; }
.section-head--left .lead { max-width: 720px; }
.sub-head { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; }

/* Copy beside a drawing (the problem, with BizKit). The drawing sits on paper in its own panel,
   a hairline round it and no shadow, so nothing touches it */
.split--drawing { align-items: center; }
.split--drawing .split-copy .body { max-width: 560px; }
.split--drawing .split-copy .body + .body { margin-top: 16px; }
.asset--drawing { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: none; }
@media (min-width: 901px) { .split--flip .asset--drawing { order: -1; } }

/* The problem: the copy beside the six signs, then the landing pages' problem photograph full width
   (21:9, their 24 px corner and hairline edge, no shadow), then the closing lines. The signs are a
   plain ruled list with the set's small dot, never a box that reads as a control */
.problem-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: start; }
.problem-head .split-copy .body { margin-top: 20px; max-width: 560px; }
.problem-photo { margin-top: clamp(56px, 7vw, 88px); }
.signs { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.signs li { display: flex; align-items: flex-start; gap: 14px; padding: 24px 0; border-top: 1px solid var(--line); font-family: var(--font-head); font-weight: 600; font-size: 19px; line-height: 1.32; letter-spacing: -0.015em; color: var(--graphite); }
.signs li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: calc(0.66em - 3.5px); border-radius: 50%; background: var(--graphite); }
.problem-close { margin-top: clamp(32px, 4vw, 44px); max-width: 780px; color: var(--graphite); }

/* With BizKit: what changes, before and after in two columns. Hairline rules between rows, a
   small arrow on the line between the two cells; no coloured edge on anything */
.change { margin-top: clamp(64px, 8vw, 104px); }
.change-title { margin-bottom: clamp(24px, 3vw, 32px); }
.change-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.change-table th { padding: 20px clamp(24px, 3vw, 40px) 18px; text-align: left; font-family: var(--font-head); font-weight: 600; font-size: 13px; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; }
.change-table th.change-before { color: var(--slate); }
.change-table th.change-after { color: var(--signal-deep); }
.change-table td { position: relative; padding: 24px clamp(24px, 3vw, 40px); vertical-align: top; border-top: 1px solid var(--line); font-size: 18px; line-height: 1.55; }
.change-table td.change-before { color: var(--graphite-700); }
.change-table td.change-after { color: var(--graphite); }
.change-table td.change-after::before { content: "\2192"; position: absolute; left: -15px; top: 22px; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--white); font-family: var(--font-mono); font-size: 15px; line-height: 1; color: var(--slate); }
.change-table td.change-after { padding-left: clamp(36px, 4vw, 56px); }
.change-table th.change-after { padding-left: clamp(36px, 4vw, 56px); }
@media (max-width: 760px) {
  .change-table, .change-table thead, .change-table tbody, .change-table tr, .change-table th, .change-table td { display: block; }
  .change-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .change-table tr { padding: 22px 22px 24px; border-top: 1px solid var(--line); }
  .change-table tbody tr:first-child { border-top: 0; }
  .change-table td, .change-table td.change-after { padding: 0; border-top: 0; font-size: 17px; }
  .change-table td::before, .change-table td.change-after::before { content: attr(data-label); position: static; display: block; width: auto; height: auto; margin-bottom: 6px; border: 0; border-radius: 0; background: none; font-family: var(--font-head); font-weight: 600; font-size: 12.5px; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
  .change-table td.change-after { margin-top: 16px; }
  .change-table td.change-after::before { color: var(--signal-deep); }
}

/* Who we help: the two paths as joined cards on paper, each led by the landing pages' photograph at
   one 4:3 crop, anchored right so the faces, the founder's hand on the pallet and the successor's
   family photos on the wall stay in frame and the two cards line up */
.card-photo img { object-position: 100% 50%; }
.cards--joined.path-cards, .path-cards .card { background: var(--paper); }
.path-cards .card { gap: 14px; }
.path-cards .card .cs-card-product, .feature-copy .cs-card-product { align-self: flex-start; }
.path-cards .cs-card-product { background: var(--white); }
.card-action { margin-top: auto; align-self: flex-start; margin-bottom: 8px; }
.path-cards .body { margin-bottom: 14px; }
.path-cards .t-card { font-size: clamp(24px, 2.2vw, 30px); }

/* How we help, part A: the two systems */
.feature-copy .t-feature { margin-top: 18px; }
.feature-copy .btn { margin-top: 30px; }
.feature-visual .asset { background: var(--paper); box-shadow: none; }
.feature-copy .cs-card-product { background: var(--white); }

/* How we help, parts B and C: each opens under a hairline, its sub-heading beside its lead */
.part { margin-top: clamp(88px, 11vw, 136px); padding-top: clamp(44px, 5vw, 64px); border-top: 1px solid var(--line); }
.part-head { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.part-head .lead { font-size: 18px; max-width: 560px; }

/* Part B: three steps in a row, joined by a hairline, the last node in the one amber */
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 56px); position: relative; }
.steps3::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line); }
.step3 { position: relative; padding-top: 42px; }
.step3-meta { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.step3-node { position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--graphite); box-shadow: 0 0 0 6px var(--paper); }
.step3--last .step3-node { background: var(--signal); }
.step3-num { font-family: var(--font-mono); font-size: 14px; line-height: 1.3; color: var(--slate); }
.step3-name { font-family: var(--font-head); font-weight: 600; font-size: 12.5px; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-deep); }
.step3-title { margin-top: 14px; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -0.02em; line-height: 1.15; }
.step3-text { margin-top: 14px; max-width: 40ch; font-size: 17px; line-height: 1.6; color: var(--graphite-700); }
.js .steps3::before { transform: scaleX(0); transform-origin: left center; transition: transform 1100ms var(--ease) 120ms; }
.js .steps3.is-in::before, .js.static .steps3::before { transform: none; }

/* Part C: the case study list's cards, three across */
.cs-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-cards--3 .cs-card-client { margin-top: 0; }
.cs-cards--3 .cs-card-figure { font-size: clamp(32px, 2.9vw, 42px); }
/* The Gaisano Brothers Merchandising label runs to two lines in a three-card row, so the cards share
   their rows: label and title, figure, change line and link line up across the row */
@supports (grid-template-rows: subgrid) {
  .cs-cards--3 .cs-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; }
  .cs-cards--3 .cs-card-result { align-self: start; }
  .cs-cards--3 .cs-card-link { margin-top: 0; align-self: start; justify-self: start; }
}
/* the long story link wraps; its arrow follows the last word instead of the card's edge */
.cs-cards--3 .cs-card-link { display: block; border-bottom: 0; }
.cs-cards--3 .cs-card-link .arrow { display: inline-block; margin-left: 4px; }
.cs-cards--3 .cs-card-link:hover, .cs-cards--3 .cs-card-link:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* The first step: the head on the graphite band, then the audit with its form and the quiz side by
   side. The quiz is a paper card, so its drawing sits on paper; it keeps the v3 cta-secondary hook,
   which hides it once the form is sent, because the Confirmation carries its own quiz link */
.first-head { max-width: 800px; margin-bottom: clamp(40px, 5vw, 64px); }
.first-head .story-label { color: var(--signal); }   /* Signal on graphite, 5.0:1; the label's Signal deep does not read on the band */
.first-head .t-section { color: var(--paper); }
.first-head .lead { margin-top: 22px; max-width: 660px; color: rgba(244, 245, 243, 0.86); }
.first-cols { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr); gap: clamp(20px, 2.6vw, 32px); align-items: start; }
#audit { scroll-margin-top: 96px; }
.pills legend { margin-bottom: 4px; }
.pills-help { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: var(--slate); }
.form-card .form-body > .story-label { margin-bottom: 0; }
.form-card .story-label + h3 { margin-top: 12px; }
.first-quiz.cta-secondary { margin-top: 0; max-width: none; padding: clamp(28px, 3.4vw, 44px); background: var(--paper); border: 0; border-radius: var(--radius-lg); color: var(--graphite); }
.first-quiz.cta-secondary { display: flex; flex-direction: column; align-items: flex-start; }
.first-quiz .story-label { margin: 0; font-size: 13px; line-height: 1.3; color: var(--signal-deep); }   /* the v3 .cta-secondary p rule would grey it */
.first-quiz .story-label + h3 { margin-top: 12px; }
.first-quiz-art { margin: -8px 0 8px -28px; width: 200px; }
@media (min-width: 901px) {
  /* beside the tall form the quiz card keeps its own height and leads with its drawing, so no empty
     paper runs down beside the form; as the reader scrolls the form, the card stays in view beside it */
  .first-quiz.cta-secondary { align-self: start; position: sticky; top: 112px; }
  .first-quiz-art { width: min(280px, 78%); margin: -12px auto 8px; }
}
.first-quiz h3 { font-size: clamp(24px, 2.2vw, 28px); letter-spacing: -0.025em; line-height: 1.15; color: var(--graphite); text-wrap: balance; }
.first-quiz .first-quiz-body { margin-top: 12px; font-size: 16px; line-height: 1.55; color: var(--graphite-700); }
.first-quiz .btn { margin-top: 26px; white-space: normal; text-wrap: balance; text-align: left; justify-content: flex-start; }
.first-step :focus-visible { outline-color: var(--paper); }
.first-step .form-card :focus-visible, .first-step .first-quiz :focus-visible { outline-color: var(--signal-deep); }

/* The drawing kit's two rules the v3 sheet does not carry: a box takes the card corner (radius_lg
   in the visual language), and a dashed line marks the step still to come */
.drawn rect.box { rx: 16px; }
.drawn .dash { stroke-dasharray: 7 6; }

/* Footer: the site footer, from the shared sheet (v3.7), the same on every page */

/* Under 1200 px the three supporters do not fit one line: the two square-ish logos stay side by
   side and TAPI takes the line under them, at the same 56 px height (42 px at 640 and under) */
@media (max-width: 1200px) {
  .logos-row.logos-row--3 { grid-template-columns: repeat(2, minmax(0, 220px)); }
  .logos-row--3 li:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .logos-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cs-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
@media (max-width: 900px) {
  .logos { grid-template-columns: 1fr; gap: 18px; }
  .logos-label { text-align: left; }
  .logos--after-hero .logos-row { padding-right: 0; }
  .split--drawing { gap: 36px; }
  .problem-head { grid-template-columns: 1fr; gap: 32px; }
  .part-head { grid-template-columns: 1fr; align-items: start; gap: 16px; }
  .steps3 { grid-template-columns: 1fr; }
  .steps3::before { display: none; }
  .step3 { padding: 26px 0 28px; border-top: 1px solid var(--line); }
  .step3:first-child { border-top: 0; padding-top: 0; }
  .step3:last-child { padding-bottom: 0; }
  .step3-meta { align-items: center; }
  .step3-node { position: static; flex: 0 0 auto; box-shadow: none; }
  .step3-text { max-width: none; }
  .first-cols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .cs-cards--3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero-deck { font-size: 17px; }
  .logos-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
  .logos-row li { height: 52px; }
  .logos-row img { max-height: 42px; }
  .logos-row.logos-row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
  .logos-row--3 img { max-height: 42px; }
  .signs li { font-size: 18px; padding: 18px 0; }
    .feature-copy .btn { width: 100%; white-space: normal; text-wrap: balance; }
  .card-action { width: auto; align-self: stretch; white-space: normal; text-wrap: balance; }
  .first-quiz-art { width: 168px; margin-left: -22px; }
  .first-quiz .btn { justify-content: center; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .js .hero-deck { animation: none; }
  .js .steps3::before { transform: none; transition: none; }
}

/* How we help, the ERP card (2026-10-21): the gross profit report runs under the card's words
   at the width of the section, so each item's name and its margin read in one row. */
.feature--screen { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 48px); }