/* ==========================================================================
   NSR prototype - message update (round 8)
   Styles for what the Transition Brief 02 added: the problem statement, the four service cards and their status badges, the journey and "who it is for"
   lede, the engagement steps, the service pages and the contact form. Same tokens, same soft corners; nothing here changes the identity.
   ========================================================================== */

/* ---------- a section heading with a lede under it (journey, who it is for) ------------------------------------------------------------------------- */
.sec-body { min-width: 0; }
.sec-body .f-lede { margin-top: clamp(18px, 2.6vh, 30px); max-width: 38rem; }

/* ---------- hero ------------------------------------------------------------------------------------------------------------------------------------ */
.hero-loc { display: none; margin: 0; color: var(--meta); }
@media (max-width: 1024px) { .hero-loc { display: block; } }

/* ---------- the problem: three statements on rules, then one line that ties them together ------------------------------------------------------- */
.problem-list { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--hair-strong); }
.problem-row { position: relative; border-top: 1px solid var(--hair-strong); padding: clamp(20px, 3.4vh, 38px) 0 clamp(20px, 3.4vh, 38px) 34px; }
.problem-row::before { content: ""; position: absolute; left: 0; top: calc(clamp(20px, 3.4vh, 38px) + 0.62em); width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
/* Leading on purpose: these four scene lines are Unbounded display type (about 17 to 34px), not body text, so 1.16 reads as one tight headline block like the site's other display lines (.f-h3 is 1.14).
   The design hook's tight-leading rule (>= 1.3) is waived for them, with the owner's approval of 8 Nov 2026, after qa/problem-line-leading.cjs measured every scene at nine sizes (320 to 1920 wide): no touching glyphs,
   smallest gap between lines 0.146em, nothing clipped, no lone last word. tools/leading-guard.cjs fails if any other line in index.html is that tight or if this rule changes without a re-measure. */
.problem-line { margin: 0; max-width: 27.75em; font-size: clamp(20px, 2.1vw, 34px); line-height: 1.16; color: var(--fg); }
.problem-close { margin: clamp(30px, 5vh, 56px) 0 0; max-width: 34rem; }
.problem-note { margin: clamp(18px, 2.6vh, 30px) 0 0; color: var(--meta); } /* round 17: the label that says the four scenes are hypothetical (same small-caps role as the other labels) */
@media (max-width: 768px) {
  #doors-h { font-size: clamp(24px, 7.8vw, 48px); } /* round 17: "The business has" is 10.67em wide in this font, so each of the two sentences sets on clean lines on a phone instead of leaving "makes" alone */
  #expect-h { font-size: clamp(21px, 6.2vw, 40px); } /* round 18: "One team for the promise and the follow-through." is 49 characters of a wide face; at the default phone size it set on seven lines */
  .problem-row { padding-left: 28px; }
  .problem-line { font-size: clamp(16px, 4.4vw, 22px); } /* round 15: three lines, not four or five, on a 390 px phone in Chromium, WebKit and Firefox (no lone last word down to 360 px) */
}

/* ---------- a way to start, right after the six cards ---------------------------------------------------------------------------------------------------- */
/* Added with the owner's approval on 8 Nov 2026. The floating "Start a conversation" button steps aside while a phone reads down the page, so without this the first in-page way to start was about 13 screens below the hero on a phone. */
.strip-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px 56px; margin: 0 var(--pad-x); padding: clamp(28px, 4.5vh, 48px) 0; border-top: 1px solid var(--hair-strong); border-bottom: 1px solid var(--hair-strong); }
.strip-cta-text { min-width: 0; max-width: 40rem; }
.strip-cta-h { margin: 0; line-height: 1.3; } /* one or two lines, set a little looser than the other display lines so the detector's 1.3 floor holds without a waiver */
.strip-cta-body { margin: 10px 0 0; }
@media (max-width: 768px) { .strip-cta { gap: 20px; } .strip-cta .btn { width: 100%; justify-content: center; } }

/* ---------- the four service cards --------------------------------------------------------------------------------------------------------------------- */
.pillar-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; }
.svc-status {
  display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 0 12px; border: 1px solid var(--hair-strong); border-radius: var(--r-pill);
  font-family: var(--f-index); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg); white-space: nowrap;
}
.svc-status::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
/* a card without a loop shows its photograph on the pinned desktop strip too (the loops hide the still there) */
@media (min-width: 769px) {
  html.js:not(.native) .pillar-ph.pillar-ph--still > img { display: block; filter: var(--grade-dim); transition: filter 0.7s var(--e-soft); }
  html.js:not(.native) .pillar.is-active .pillar-ph.pillar-ph--still > img { filter: var(--grade); }
}
/* four cards instead of three: the intro column is a little narrower so the strip is not longer than it has to be */
@media (min-width: 769px) { html.js:not(.native) .pillars-intro { flex-basis: calc(var(--col) * 9); width: calc(var(--col) * 9); margin-left: 28px; /* round 18: the shorter intro sits higher, so its heading started level with the rail's "02" marker (0 px clear at 1440, 13 px overlap at 1280); 28 px keeps it clear, as in round 17 */ } }

/* ---------- the journey stage: the lede sits under the heading, the stage names are the chain's own words --------------------------------------------- */
@media (min-width: 769px) {
  html.js:not(.native) .approach .journey-lede { font-size: clamp(16px, 1.2vw, 19px); line-height: 1.5; max-width: 28rem; margin-top: clamp(12px, 2svh, 22px); }
  html.js:not(.native) .step strong { font-size: clamp(21px, min(2.2vw, 4svh), 40px); line-height: 1.06; }
  html.js:not(.native) .step > p { max-width: none; }
}

/* ---------- who it is for (on paper) -------------------------------------------------------------------------------------------------------------------- */
.expect-lede { max-width: 40rem; }

/* ---------- how an engagement is structured (on paper) ------------------------------------------------------------------------------------------------ */
.process-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--col) * 0.6); margin: 0; padding: 0; list-style: none; }
.process-row { display: flex; flex-direction: column; gap: 14px; padding-top: 22px; border-top: 1.5px solid var(--fg); }
.process-row .pnum { font-family: var(--f-index); font-weight: var(--w-label); font-size: 12.5px; line-height: 1; letter-spacing: 0.08em; color: var(--meta); font-variant-numeric: tabular-nums; }
.process-row h3 { font-size: clamp(20px, 1.7vw, 28px); line-height: 1.1; color: var(--fg); }
.process-row p { max-width: 24em; }
@media (max-width: 1024px) { .process-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px calc(var(--col) * 0.8); } }
@media (max-width: 768px) { .process-list { grid-template-columns: 1fr; gap: 30px; } }


/* ---------- the closing note ----------------------------------------------------------------------------------------------------------------------------- */
.closing-note { margin: 26px 0 0; max-width: 34rem; color: var(--meta); }

/* ==========================================================================
   service pages and the contact page (they share the document layout of the legal pages)
   ========================================================================== */
.doc-title.is-long { font-size: clamp(28px, 4.2vw, 72px); max-width: 17.0284em; } /* 18ch of Unbounded 900 (digit = .94602em) */
.svc-head-status { margin: 0 0 clamp(22px, 3.4vh, 36px); }
.doc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: clamp(26px, 4vh, 44px); }
.doc-readiness { margin-top: 18px; padding: 20px 26px; border-radius: var(--r-card); background: rgba(9, 10, 11, 0.06); box-shadow: inset 0 0 0 1.5px rgba(9, 10, 11, 0.3); }
.doc-readiness p { margin: 0; }
.doc-list { margin: 16px 0 0; padding-left: 1.2em; }
.doc-list li { margin: 6px 0; font-size: 18px; line-height: 1.6; list-style: disc; }
.doc-sec h3 { font-size: clamp(16px, 1.3vw, 20px); margin: 26px 0 8px; color: var(--fg); }

/* ---------- the contact form ---------------------------------------------------------------------------------------------------------------------------- */
.contact-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: calc(var(--col) * 0.4); padding-top: clamp(80px, 12vh, 150px); padding-bottom: clamp(100px, 16vh, 190px); }
.contact-aside { grid-column: 1 / span 4; align-self: start; display: grid; gap: 18px; }
.contact-aside p { margin: 0; max-width: 24rem; }
.contact-form { grid-column: 6 / span 7; display: grid; gap: 22px; max-width: 46rem; }
.field { display: grid; gap: 8px; min-width: 0; }
.field label, .field .legend { font-family: var(--f-body); font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--fg); }
.field .opt { font-weight: 400; color: var(--meta); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 12px 18px; border: 1.5px solid var(--fg); border-radius: 16px; background: transparent; color: var(--fg);
  font: 400 17px/1.4 var(--f-body);
}
.field textarea { min-height: 150px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 48px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 24px) 50%, calc(100% - 18px) 50%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.field [aria-invalid="true"] { border-color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent-text); }
.field .err { margin: 0; min-height: 0; font-size: 15px; line-height: 1.4; color: var(--accent-text); font-weight: 600; }
.field .err:empty { display: none; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.form-fine { margin: 0; font-size: 15px; line-height: 1.5; color: var(--meta); max-width: 34rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-top: 6px; }
.form-actions .btn[aria-disabled="true"], .form-actions .btn:disabled { opacity: 0.55; cursor: progress; }
.form-status { margin: 0; padding: 16px 22px; border-radius: var(--r-card); font-size: 17px; line-height: 1.5; box-shadow: inset 0 0 0 1.5px var(--fg); color: var(--fg); }
.form-status:empty { display: none; }
.form-status[data-kind="error"] { box-shadow: inset 0 0 0 2px var(--accent-text); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 1024px) {
  .contact-aside, .contact-form { grid-column: 1 / span 12; }
  .contact-aside { margin-bottom: 40px; }
}
@media (max-width: 768px) {
  .contact-layout { padding-top: 56px; padding-bottom: 72px; }
  .field-pair { grid-template-columns: 1fr; }
  .doc-list li { font-size: 17px; }
}

/* ==========================================================================
   round 9: headings sit on the content's own left edge, and the pricing stage fills one screen
   The section headings used to hang from a second column (the number in the first), so the heading started 170 px in while the lede and everything under it
   started at the margin: it read as two different grids. The heading, the lede and the rows now share one left edge and the number sits above the heading.
   ========================================================================== */
.sec-head { display: block; }
.sec-head .idx { display: block; padding-top: 0; margin-bottom: clamp(12px, 2.2svh, 22px); }

/* the pricing stage ("a project, ongoing help, or both"): heading clear of the header pills, rows that share the height that is left, and a tail that is one
   line of two columns instead of a stack, so the stage fits a 1280x720 screen and never runs under the poster that rises over its foot */
.rel-tail { display: grid; gap: 6px 0; }
.rel-tail .rel-term { margin: 0; }
@media (min-width: 769px) {
  html.js:not(.native) .relation {
    justify-content: flex-start; gap: clamp(8px, 1.8svh, 20px);
    padding-top: clamp(98px, 12.5svh, 150px);
    padding-bottom: calc(var(--r-sheet) + clamp(8px, 1.6svh, 20px)); /* the poster overlaps the stage's last 36 px */
  }
  html.js:not(.native) .relation .sec-head { position: relative; }
  html.js:not(.native) .relation .sec-head .idx { position: absolute; left: 0; top: calc(-1 * clamp(22px, 3.4svh, 32px)); margin: 0; }
  html.js:not(.native) .rel-rows { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
  html.js:not(.native) .rel-row { flex: 1 1 auto; padding: clamp(6px, 1.2svh, 14px) 0; }
  html.js:not(.native) .rel-text .f-body { font-size: clamp(15px, min(1.12vw, 2.3svh), 21px); line-height: 1.5; }
  html.js:not(.native) .rel-tail { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 2px calc(var(--col) * 0.8); align-items: start; } /* the same two columns as the rows above, so the second note lines up with their text */
  html.js:not(.native) .rel-tail .rel-term { font-size: clamp(14.5px, min(1vw, 2.1svh), 18px); line-height: 1.5; max-width: 36em; }
  html.js:not(.native) .rel-tail .text-link { grid-column: 1 / -1; justify-self: start; margin-top: 2px; }
}
.rc-label { font-size: 12px; }

/* a short screen (a 1280x720 laptop): the lede is one line, the diagrams are a little lower, and the small number above the heading steps aside (the thread on the left already counts it) */
@media (min-width: 769px) {
  html.js:not(.native) .relation .relation-lede { max-width: 64rem; }
  html.js:not(.native) .relation .rc { height: clamp(58px, 9svh, 104px); }
}
@media (min-width: 769px) and (max-height: 800px) {
  html.js:not(.native) .relation .sec-head .idx { display: none; }
}

/* ==========================================================================
   round 10: the "Not sure where to start?" poster
   The credit note was a translucent dark box that muddied the pink; it is now a solid Carbon ticket (the notches stay), the lede is set a step larger and
   a little heavier so it holds on the speckled ink, and "Request a quote" is a button like the one in the hero, not a link.
   ========================================================================== */
.zone-signal .coupon { background: var(--carbon); box-shadow: none; padding: 24px 32px; }
.zone-signal .coupon p { color: var(--salt); font-size: 16.5px; line-height: 1.55; }
.decide-body .f-lede { font-weight: 500; }
.decide-body .ctas { flex-wrap: wrap; gap: 14px 14px; }
.zone-signal .btn-ghost { --ghost-line: rgba(9, 10, 11, 0.7); --ghost-ink: var(--carbon); --ghost-hover: var(--carbon); }

/* the poster heading breaks after "where" (round 12); Unbounded Black is wider, so the measure is 10.6em (round 14) */
.decide h2 { max-width: 10.6em; }

/* round 14: Unbounded + Manrope. The round-13 pixel-face block (place line, wider aside, smaller buttons) was removed: the hero is shorter and Manrope is narrower than Space Mono Bold. */
.btn { letter-spacing: 0; }
.hero-meta { bottom: calc(8svh - 34px); } /* the last pink line stands closer to the place line than the old serif did */
/* a long button label (the CRM page's "Discuss your sales process") may wrap on a very narrow window instead of pushing the page sideways; no normal phone is affected, the label fits on one line */
@media (max-width: 420px) { .btn { white-space: normal; max-width: 100%; padding-top: 12px; padding-bottom: 12px; line-height: 1.2; text-align: center; } }
.faq summary { text-wrap: balance; } /* a phone question no longer ends on a lone word ("CRM?", "cost?") */

/* round 15 (the last visual review) ------------------------------------------------------------------------------------------------------------------------
   Phone line breaks: the hero eyebrow ("Custom websites. Connected business systems.") no longer leaves "systems." alone on its second line, and running text avoids a one-word last line
   where the engine supports it (Chromium and Safari 26; others ignore it harmlessly). */
#topline { text-wrap: balance; }
p, li, dd { text-wrap: pretty; }

/* round 18 (the owner's final brief): the About page. Its profiles sit in the document column, one under the other, on the paper sheet; the links to the six service pages are list items. */
.doc-prose .doc-list li:has(> a.text-link) { list-style: none; margin-left: -1.2em; }
.doc-prose .leaders { margin-top: 28px; gap: 52px; }
.doc-prose .leader { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); column-gap: 28px; }
.doc-prose .leader:nth-child(2) { margin-left: 0; }
.doc-prose .leader-body { gap: 12px; }
.doc-prose .leader-body .f-body { max-width: none; }
.doc-prose .cred-list li { color: var(--meta); }
@media (max-width: 768px) { .doc-prose .leader { grid-template-columns: 1fr; } .doc-prose .founder-ph { width: min(100%, 280px); } }