/* ============================================================================
   ABOUT V2 — comparison build, revised humanized copy (2026-08-12)
   ============================================================================
   Additive layer over styles.css. Nothing here is referenced by any production
   page; about.html is untouched.

   Editorial rather than card-driven: only the four How-We-Work steps are boxed.
   Everything else is prose at a readable measure on flat ground.

   No gradients. No new colours — every value resolves to a styles.css token.
   ============================================================================ */

/* --- Hero -----------------------------------------------------------------
   styles.css leaves .page-head .wrap as a block, so this page's hero was
   rendering as full-width copy with the diagram stacked underneath and centred.
   The two-column split is established here, on this page only. */
.page-head .wrap { display: grid; align-items: center; }

/* Hero C, chosen 2026-08-12: copy left, diagram right and raised 34px so it
   breaks the hero's rectangle. overflow:hidden on the section keeps the lift
   from adding scroll height. */
.page-head { position: relative; overflow: hidden; }
.page-head .wrap { grid-template-columns: 1fr 1fr; gap: 48px; }

/* Left-align the hero, chosen 2026-08-12 over the centred version.
   styles.css centres .page-head because interior pages originally opened with
   a full-width centred band. This hero is two columns, so centring left the
   short final lines ("to growth.") floating 220px into the column while every
   other block on the page ran flush left. The auto side margins on .lede have
   to go too, or the box stays centred even once its text is left-aligned. */
.page-head { text-align: left; }
.page-head .lede { margin-left: 0; margin-right: 0; }
.page-head h1 { font-size: clamp(30px, 3.6vw, 46px); }
.page-head-copy .lede { max-width: 46ch; }
.cycle { max-width: 500px; margin: -34px 0 0 auto; }
.page-head .lede-2 { margin-top: 14px; }
.page-head-copy .lede { max-width: 54ch; }

/* Diagram labels enlarged per the brief: 13.5 -> 15px desktop, and the hub
   from 17 -> 18px. Node ring is unchanged so nothing reflows. */
/* Labels enlarged 13.5 -> 15px per the brief. That pushed the two diagonal
   labels into the hub's box by 9px, so the hub is narrowed 41% -> 37% to give
   the ring back the room the larger type needs. */
.cycle-label { font-size: 15px; line-height: 1.3; }
.cycle-hub { font-size: 18px; }
/* The 37% width belongs to the ring layout only. Unscoped, it overrode the
   mobile rule in styles.css that makes the hub a full-width bar, leaving a
   narrow navy square with the title broken over four lines at 390px. */
@media (min-width: 641px) { .cycle-hub { width: 37%; } }

/* --- Why We Built Biovista ------------------------------------------------ */
.editorial { display: grid; grid-template-columns: 1fr 330px; gap: 48px; margin-top: 26px; align-items: start; }
.editorial-body p { font-size: 17px; line-height: 1.72; color: var(--ink); max-width: 64ch; }
.editorial-body p + p { margin-top: 17px; }

.pullquote { margin: 6px 0 0; border-left: 2px solid var(--cool-teal); padding: 4px 0 4px 24px; }
.pullquote p {
  font-size: 19px; line-height: 1.5; font-weight: var(--w-heading);
  color: var(--deep-blue);
}

/* --- Experience (navy slab) ----------------------------------------------- */
.evidence-copy { margin-top: 26px; }
.evidence-copy p { font-size: 16.5px; line-height: 1.74; color: var(--light-neutral); max-width: 68ch; }
.evidence-copy p + p { margin-top: 16px; }

.glance { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--azure); }
.glance-head {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cool-teal-on-dark); margin-bottom: 20px;
}
.glance ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 46px; }
.glance li { max-width: 46ch; font-size: 16.5px; line-height: 1.62; color: var(--light-neutral); padding-left: 20px; position: relative; }
.glance li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--cool-teal-on-dark);
}
.glance strong { color: var(--white); font-weight: var(--w-heading); }

/* Discretion — deliberately small and calm. An inset note on the slab, not a
   panel competing with the section above it. */
/* .discretion removed 2026-08-24 — the note was reframed and moved to the
   contact page, where it renders as .info-verify. */

/* --- How We Work ----------------------------------------------------------
   Scoped as .approach-step, NOT .step: styles.css:459 already owns a global
   .step for the Services roadmap (display:grid; 56px 1fr 1fr; align-items:
   center). These cards were inheriting that grid, which forced each h3 into a
   56px column and overlapped it with its own body text. */
.lede-wide { max-width: 70ch; margin-top: 22px; font-size: 17px; line-height: 1.7; color: var(--ink); }
.approach { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.approach-step {
  background: var(--light-neutral); border: 1px solid var(--medium-neutral);
  border-radius: var(--radius); padding: 28px 26px 26px;
}
.sec-tone .approach-step { background: var(--surface-card); }
.approach-step h3 { font-size: 18px; margin-bottom: 9px; }
.approach-step p { font-size: 16.5px; line-height: 1.7; color: var(--ink-soft); }
.approach-close { margin-top: 26px; max-width: 70ch; font-size: 16px; line-height: 1.7; color: var(--ink-soft); }

/* --- What it feels like --------------------------------------------------- */
/* Five rows: claim left, substance right. A definition list is the honest
   element here — each row is a term and its elaboration, not a heading and a
   paragraph, so this keeps them out of the document outline. */
.standard { margin: 28px 0 0; border-top: 1px solid var(--medium-neutral); }
.standard .std {
  display: grid; grid-template-columns: 300px 1fr; gap: 34px;
  padding: 19px 0; border-bottom: 1px solid var(--medium-neutral);
}
.standard dt {
  font-size: 17px; font-weight: var(--w-heading); line-height: 1.35;
  color: var(--deep-blue); position: relative; padding-left: 18px;
}
.standard dt::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--cool-teal);
}
.standard dd { margin: 0; font-size: 16px; line-height: 1.68; color: var(--ink-soft); max-width: 60ch; }

/* --- CTA band: this page carries a secondary action beside the primary ---- */
/* styles.css leaves this uncapped; it ran the full band width here. */
.cta-band-copy p { max-width: 64ch; }

.cta-band-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* .btn-on-dark moved to styles.css 2026-08-12 — the homepage needs it too and
   does not load this file, so the class was silently inert there. */

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1024px) {
  .editorial { grid-template-columns: 1fr; gap: 30px; }
  .pullquote { max-width: 46ch; }

  /* Hero stacks here, so the diagram centres and the copy loses its column.
     Without this the measure ran to 80ch at 834px — wider than any desktop
     figure. Every prose block gets an explicit cap once stacked. */
  .page-head .wrap { grid-template-columns: 1fr; gap: 40px; }
  .cycle { margin: 0 auto; }
  .page-head-copy .lede,
  .editorial-body p, .evidence-copy p,
  .lede-wide, .approach-close, .cta-band-copy p,
  .standard dd { max-width: 62ch; }
  .standard .std { grid-template-columns: 260px 1fr; gap: 30px; }
}
/* Ring sizing for the stacked-hero range ONLY. This lived in a plain
   (max-width: 1024px) block whose comment claimed "between 641 and 1024" but
   whose query had no lower bound, so at 390px its `width: 34%` beat the mobile
   rule in styles.css. The lower bound is now real. */
@media (min-width: 641px) and (max-width: 1024px) {
  .cycle { max-width: 530px; }
  .cycle-hub { width: 34%; }
}

@media (max-width: 860px) {
  .cycle-label { font-size: 14px; }
  .glance ul, .approach { grid-template-columns: 1fr; }
  .glance li { max-width: 62ch; }
  .standard .std { grid-template-columns: 1fr; gap: 7px; padding: 18px 0; }
  .glance ul { gap: 15px; }
  .cta-band-actions { width: 100%; }
  .cta-band-actions .btn { flex: 1 1 auto; justify-content: center; }
}


/* ============================================================================
   ACCENT RAIL — chosen 2026-08-12 (was "option A", picked over C)
   ============================================================================
   Azure arrives as structure rather than as a field: a 4px cap and an azure
   title on each approach card, azure rules between glance rows, azure markers
   on the five-row standard list. The alternative (C) filled the cards solid
   azure; this keeps the page light while still answering "too plain".
   ============================================================================ */
.approach-step {
  border-top: 4px solid var(--azure);
  padding: 23px 24px 24px;
}
.approach-step h3 { color: var(--azure); font-size: 19px; margin-bottom: 11px; }
.approach-step p { font-size: 16.5px; line-height: 1.72; }
.lede-wide { max-width: 62ch; }

/* glance: two columns with azure separators */
.glance ul { grid-template-columns: 1fr 1fr; gap: 0; }
.glance li { max-width: none; padding: 14px 28px 14px 20px; border-top: 1px solid var(--azure); }
.glance li:nth-child(-n+2) { border-top: 0; padding-top: 0; }

/* the five-row standard list picks up azure markers to tie the page together */
.standard dt::before { background: var(--azure); }
.standard dt { color: var(--azure); }

@media (max-width: 860px) {
  .glance ul { grid-template-columns: 1fr; }
  .glance li:nth-child(2) { border-top: 1px solid var(--azure); padding-top: 16px; }
}

/* ---- Vertical rhythm, tightened ~12% (2026-08-12) -------------------------
   Scoped to so the shared .sec rule in styles.css is untouched and no
   other page moves. */
.sec { padding-top: 68px; padding-bottom: 68px; }
.slab.sec { padding-top: 76px; padding-bottom: 76px; }
@media (max-width: 860px) {
  .sec, .slab.sec { padding-top: 46px; padding-bottom: 46px; }
}

/* ============================================================================
   EXPERIENCE — STATEMENT BREAK  (chosen 2026-08-12, was "exp 1")
   ============================================================================
   The third paragraph carried the section's actual argument, so it stops being
   a paragraph: two paragraphs of substance, then the point, set large under a
   teal rule. Chosen over the two-column and figure-anchored treatments.
   Teal on navy is --cool-teal-on-dark (5.48:1) — never --cool-teal, which
   fails against deep blue.
   ============================================================================ */
/* `.slab p` in styles.css is (0,1,1) and beat this rule's (0,1,0), so the
   white here was silently losing to light-neutral and the statement rendered
   the same colour as the paragraphs above it. Scoping to .slab wins it back
   without !important. */
.slab .evidence-statement {
  margin: 34px 0 0; padding-top: 28px;
  border-top: 2px solid var(--cool-teal-on-dark);
  font-size: clamp(19px, 2.1vw, 24px); line-height: 1.45;
  font-weight: var(--w-heading); color: var(--white); max-width: 46ch;
}
@media (max-width: 860px) { .slab .evidence-statement { margin-top: 26px; padding-top: 22px; } }

/* ============================================================================
   LEGIBILITY PASS — 2026-08-12
   ============================================================================
   Measured first rather than raised blindly. Main body copy already cleared
   the 16px floor (16–17.5px); what was actually undersized were the labels,
   the nav, the buttons and the diagram numerals.

   Line height moves DOWN, not up: body was running 1.68–1.74 and the target is
   1.5–1.65, so this tightens to ~1.62. Longer measures need more leading, not
   less, so measures are capped alongside it.

   NOTE ON SCOPE: nav, buttons and footer live in styles.css and are shared by
   all four pages. They are scoped to (on <body>) here so this comparison
   build cannot silently restyle index / services / contact. If these sizes are
   adopted, the rules should move into styles.css unscoped and the scope
   dropped — see the report.
   ---------------------------------------------------------------------------- */

/* --- labels and small type --- */
.eyebrow      { font-size: 13px; }
.glance-head  { font-size: 13px; }
.cycle-num    { font-size: 12px; }

/* Nav, button and footer sizes moved to styles.css 2026-08-12 and applied to
   every page. They were scoped here while About was a comparison build. */

/* --- body leading brought into the 1.5–1.65 band --- */
.editorial-body p,
.evidence-copy p,
.standard dd,
.approach-step p,
.approach-close,
.glance li,
.cta-band-copy p { line-height: 1.62; }
.page-head-copy .lede,
.lede-wide       { line-height: 1.58; }

/* --- diagram: larger ring and labels --- */
.cycle       { max-width: 560px; }
/* The hero column, not max-width, was the binding constraint: at 1.1fr/0.9fr
   the right column resolved to ~490px, so the ring never reached 560. Even
   columns give it the room the enlargement asked for. */
.cycle-label { font-size: 16px; line-height: 1.28; }
.cycle-hub   { font-size: 19px; }

/* The 45+ proof block was removed 2026-08-12. Its rules are gone with it; the
   claim now lives only in the section's prose ("more than 45 years of combined
   commercial and operating experience"), which keeps the collective framing.
   .glance regains its own border-top, which .proof + .glance had suppressed. */

@media (max-width: 860px) {
  .cycle-label { font-size: 15px; }
}

/* ============================================================================
   PRE-LAUNCH QA — 2026-08-12
   ============================================================================
   Full audit at 1440 / 1024 / 768 / 390 passed on type sizes, line height,
   contrast, overlap, clipping, tap targets and overflow. Two things failed and
   only those are changed here.

   1. LINE LENGTH. Prose was running 80–90 characters at 1440 and 768 — the one
      target in the QA brief the page did not meet. Capped at 68ch, which holds
      65–68 on desktop and lets narrow viewports fall back to their own width.
      Caps are in ch, so they track the font size rather than fighting it.

   2. Multi-line diagram labels sat at 1.28 leading. Fine for one line, tight
      for two ("Plan How to Reach Customers" wraps at every width).
   ---------------------------------------------------------------------------- */
.editorial-body p,
.evidence-copy p,
.approach-close,
.cta-band-copy p,
.lede-wide,
.glance li,
.standard dd { max-width: 68ch; }

.cycle-label { line-height: 1.34; }

/* Glance list is three items after the duplicate "45+ years combined" bullet
   was removed. Two columns would strand the third in an empty row, so it runs
   as a three-up on desktop and stacks below 860. */
.glance ul { grid-template-columns: repeat(3, 1fr); }
.glance li:nth-child(-n+3) { border-top: 0; padding-top: 0; }
/* No two-column step: with three items it strands the third alone in a second
   row. Three-up holds to 860 (≈300px per column at 1024), then stacks. */
@media (max-width: 860px)  { .glance ul { grid-template-columns: 1fr; }
  .glance li:nth-child(2), .glance li:nth-child(3) {
    border-top: 1px solid var(--azure); padding-top: 16px; } }