/* ==========================================================================
   INDUSTRIES SUB-PAGES — SECTION 3: INDUSTRY TRANSFORMATION PRIORITIES
   10 designs — built on the HOME PAGE base, blue-cyan family
   ==========================================================================
   Preview-only. Namespaced .i3- / .i3vN-. The Industries stress case:
   8 priorities × 7–10 areas (68 areas), all short noun phrases — which is
   what makes inline runs, column flow and 3-col bullets viable here.

   CONTRACT (index.html, blue-cyan-substituted): 4px radius (8px media only),
   #c4c4c4 card borders, var(--c-line) rules, neutral shadows, .22s hover
   touching border-colour and a 4px arrow nudge only, gradient held to
   numerals and thin rules. Dark bands: hairlines rgba(255,255,255,.22),
   numerals SOLID var(--fam-300) (the gradient dies on --fam-800 — the
   documented sol-05 deviation, inherited).

   CONDITIONAL CONTENT — two hedges the layouts must carry, not lose:
   · Priority 8 is conditional in the doc ("relevant where manufacturers
     operate…") → .i3-cond marker / .i3-condline intro.
   · Priority 4's "Traceability where supported and validated" is a single
     verbatim area — never split the hedge off it.

   KNOWN TRAP AVOIDED: the §4·10 selected-tab-goes-white-on-hover defect in
   sol-04-modules.css:631. Design 6's desktop tabs deliberately define NO
   [aria-selected="true"]:hover colour override.

   RESPONSIVE — mobile-first at 390px stepping up with min-width.
   Steps: 390 base · 561 · 761 · 941 · 1081/1181 (bullet columns)
   ========================================================================== */


/* ==========================================================================
   PREVIEW CHROME — not part of any design
   ========================================================================== */
.i3-flag { position: sticky; top: 0; z-index: 60; background: #14141c; color: #fff; font-size: 13px; }
.i3-flag .container { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding-block: 10px; }
.i3-flag b { font-weight: 700; }
.i3-flag span { color: rgba(255,255,255,.62); }

.i3-label { border-top: 2px solid var(--c-ink); background: #fff; padding-block: 30px 6px; }
.i3-label .container { display: flex; flex-direction: column; gap: 7px; }
.i3-label h2 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--c-ink); margin: 0; }
.i3-label h2 b { color: var(--fam-700); font-weight: 800; }
.i3-label p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--c-muted); max-width: 78ch; }
.i3-label code, .i3-label i { font-size: 13px; color: var(--fam-700); font-style: normal; }

.i3-note { background: var(--fam-tint); }
.i3-note .container { padding-block: 36px; }
.i3-note h3 { font-size: 17px; margin: 0 0 9px; color: var(--c-ink); }
.i3-note p { font-size: 15px; line-height: 1.7; color: var(--c-body); margin: 0; max-width: 76ch; }
.i3-note p + p { margin-top: 12px; }
.i3-note code { color: var(--fam-700); font-size: 13.5px; }


/* ==========================================================================
   SHARED — the home page's type and devices, blue-cyan-substituted
   ========================================================================== */
.i3-h2 {
  font-size: clamp(30px, 4.8vw, 52px); font-weight: 700; line-height: 1.0;
  letter-spacing: -.025em; color: var(--c-ink); margin: 0; text-wrap: balance;
}
/* narrow-column step-down — an H2 sharing its column with a rail or panel
   takes 38px, not 52 (the s5v2 rule) */
.i3-h2--col { font-size: clamp(28px, 3vw, 38px); }
.i3-eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--fam-700); margin: 0 0 14px;
}
.i3-lede { font-size: 16px; font-weight: 300; line-height: 1.6; color: #323232; margin: 0; }
.i3-lede b { font-weight: 600; color: var(--c-ink); }
.i3-head { margin-bottom: 30px; }
.i3-head .i3-lede { margin-top: 18px; max-width: 68ch; }

/* Bullet list — the sitewide 10x2 gradient-rule marker */
.i3-bul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.i3-bul li {
  position: relative; padding-left: 20px;
  font-size: 15px; font-weight: 300; line-height: 1.55; color: #323232;
  break-inside: avoid;
}
.i3-bul li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 10px; height: 2px; background: var(--fam-grad);
}
.i3-bul--dark li { color: rgba(255,255,255,.78); }
.i3-bul--dark li::before { background: var(--fam-300); }

/* Dense flat marker for column flow / switchboard — one --fam-700 step
   instead of 68 gradients (the sol-04 .s4-dots economy) */
.i3-dots { margin: 0; padding: 0; list-style: none; }
.i3-dots li {
  position: relative; padding-left: 17px; margin-bottom: 9px;
  break-inside: avoid; -webkit-column-break-inside: avoid;
  font-size: 15px; font-weight: 300; line-height: 1.5; color: #323232;
}
.i3-dots li:last-child { margin-bottom: 0; }
.i3-dots li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 5px; height: 5px; border-radius: 1px; background: var(--fam-700);
}

/* Gradient-clipped numeral — light surfaces only */
.i3-num {
  display: block; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  background: var(--fam-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Stage counter (01 / 08) — nowrap or it breaks after the slash at 390 */
.i3-count {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; color: #b7b7c2;
  font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0;
}

/* The Priority-8 conditional marker + intro line */
.i3-cond {
  display: inline-block; font-style: normal; vertical-align: middle;
  margin-left: 10px; padding: 2px 8px;
  font-size: 12px; font-weight: 500; letter-spacing: .01em;
  color: var(--c-muted); background: var(--c-surface-2);
  border: 1px dashed #c4c4c4; border-radius: 3px; white-space: nowrap;
}
.i3-cond--dark { color: rgba(255,255,255,.66); background: none; border-color: rgba(255,255,255,.34); }
.i3-condline { margin: 0 0 12px; font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--c-muted); }


/* ==========================================================================
   DESIGN 1 — NUMBERED LEDGER
   No boxes: hairline rows, a numeral that lights on hover, areas as one
   inline run — the cheapest print of all 68. The run's items are
   inline-block (the .s3v2-caps 390 overflow lesson, applied from birth).
   Worst case: a 10-area run wraps to three lines at 390 and one at 1240.
   ========================================================================== */
.i3v1-rows { display: flex; flex-direction: column; }
.i3v1-row {
  padding: 20px 2px 22px; border-bottom: 1px solid var(--c-line);
  transition: border-bottom-color .22s var(--ease);
}
.i3v1-row:first-child { border-top: 1px solid var(--c-line); }
.i3v1-n {
  display: block; font-size: 20px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; color: #b7b7c2; font-variant-numeric: tabular-nums;
  margin-bottom: 8px; transition: color .22s var(--ease);
}
.i3v1-row h3 { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0 0 10px; }
.i3v1-caps { list-style: none; margin: 0; padding: 0; }
.i3v1-caps li { display: inline-block; font-size: 15px; font-weight: 300; line-height: 1.8; color: #323232; }
.i3v1-caps li:not(:last-child)::after { content: "·"; margin: 0 9px; color: var(--fam-dot); }
@media (hover: hover) {
  .i3v1-row:hover { border-bottom-color: var(--fam-700); }
  .i3v1-row:hover .i3v1-n { color: var(--fam-700); }
}
@media (min-width: 761px) {
  .i3v1-row {
    display: grid; grid-template-columns: 56px minmax(0,1fr);
    gap: 0 20px; padding: 24px 4px 26px; align-items: start;
  }
  .i3v1-n { font-size: 24px; margin-bottom: 0; padding-top: 3px; }
  .i3v1-row h3 { font-size: 20px; }
  .i3v1-caps { grid-column: 2; }
}


/* ==========================================================================
   DESIGN 2 — DISCLOSURE LEDGER
   Native <details>: eight titles at rest, near-constant cost whatever the
   area count. Tallies keep the scale honest while closed; the plus/minus
   is drawn as two 2px bars, the vertical one scaling away when open.
   Worst case: excellent — it simply doesn't print until asked.
   ========================================================================== */
.i3v2-list { border-top: 1px solid var(--c-line); }
.i3v2-item { border-bottom: 1px solid var(--c-line); transition: border-bottom-color .22s var(--ease); }
.i3v2-item > summary { list-style: none; cursor: pointer; }
.i3v2-item > summary::-webkit-details-marker { display: none; }
.i3v2-item summary {
  display: grid; grid-template-columns: 38px minmax(0,1fr) 48px;
  grid-template-areas: "n h pm" "n t pm";
  gap: 0 12px; align-items: center; padding: 16px 2px; min-height: 68px;
}
.i3v2-n {
  grid-area: n; font-size: 20px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; color: #b7b7c2; font-variant-numeric: tabular-nums;
  transition: color .22s var(--ease);
}
.i3v2-item summary h3 { grid-area: h; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0; align-self: end; }
.i3v2-tally { grid-area: t; font-size: 13px; font-weight: 400; color: var(--c-muted); margin-top: 3px; align-self: start; }
/* the 48x48 row-list box as a toggle — honestly interactive, not decorative */
.i3v2-pm {
  grid-area: pm; position: relative; width: 48px; height: 48px;
  border: 1px solid #c4c4c4; border-radius: var(--radius); justify-self: end;
  transition: border-color .22s var(--ease);
}
.i3v2-pm::before, .i3v2-pm::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: var(--fam-700);
  transform: translate(-50%,-50%);
}
.i3v2-pm::before { width: 18px; height: 2px; }
.i3v2-pm::after { width: 2px; height: 18px; transition: transform .22s var(--ease); }
.i3v2-item[open] .i3v2-pm::after { transform: translate(-50%,-50%) scaleY(0); }
.i3v2-item[open] .i3v2-n { color: var(--fam-700); }
.i3v2-body { padding: 4px 2px 26px; }
.i3v2-body .i3-condline { margin-bottom: 14px; }
@media (hover: hover) {
  .i3v2-item:hover { border-bottom-color: var(--fam-700); }
  .i3v2-item:hover .i3v2-n { color: var(--fam-700); }
  .i3v2-item:hover .i3v2-pm { border-color: var(--fam-700); }
}
.i3v2-item > summary:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 2px; }
@media (min-width: 561px) {
  .i3v2-body .i3-bul { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 30px; }
}
@media (min-width: 761px) {
  .i3v2-item summary { grid-template-columns: 56px minmax(0,1fr) 48px; gap: 0 16px; }
  .i3v2-item summary h3 { font-size: 20px; }
  .i3v2-n { font-size: 24px; }
  .i3v2-body { padding: 4px 0 30px 72px; }
}
@media (min-width: 1081px) {
  .i3v2-body .i3-bul { grid-template-columns: repeat(3, minmax(0,1fr)); }
}


/* ==========================================================================
   DESIGN 3 — STICKY INDEX
   Head + numbered index pin left at ≥941 while the groups scroll; below
   941 the index is a plain wrapped anchor list (a sticky rail on a phone
   eats a third of the screen). Index rows clear 44px tap height.
   Worst case: the groups just get longer — the index doesn't care.
   ========================================================================== */
.i3v3-grid { display: grid; gap: 34px; }
.i3v3-index { border-top: 1px solid var(--c-line); padding-top: 6px; }
.i3v3-index ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; }
.i3v3-index a {
  display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; align-items: baseline;
  min-height: 44px; padding: 11px 2px;
  font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--c-body);
  border-bottom: 1px solid var(--c-line);
  transition: color .22s var(--ease), border-bottom-color .22s var(--ease);
}
.i3v3-index .n { font-size: 13px; font-weight: 700; color: #b7b7c2; font-variant-numeric: tabular-nums; transition: color .22s var(--ease); }
@media (hover: hover) {
  .i3v3-index a:hover { color: var(--fam-700); border-bottom-color: var(--fam-700); }
  .i3v3-index a:hover .n { color: var(--fam-700); }
}
.i3v3-index a:focus-visible { outline: 2px solid var(--fam-700); outline-offset: -2px; }
.i3v3-groups { display: flex; flex-direction: column; }
.i3v3-group { padding: 24px 0; border-top: 1px solid var(--c-line); }
.i3v3-group:first-child { border-top: none; padding-top: 0; }
.i3v3-group h3 {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0 0 14px;
}
.i3v3-group h3 .n { font-size: 14px; font-weight: 700; color: var(--fam-700); font-variant-numeric: tabular-nums; flex-shrink: 0; }
@media (min-width: 561px) {
  .i3v3-index ol { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .i3v3-group .i3-bul { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 30px; }
}
@media (min-width: 941px) {
  .i3v3-grid { grid-template-columns: minmax(0,360px) minmax(0,1fr); gap: 64px; align-items: start; }
  .i3v3-aside { position: sticky; top: 110px; }
  .i3v3-index ol { grid-template-columns: 1fr; }
  .i3v3-group { padding: 28px 0; }
  .i3v3-group h3 { font-size: 20px; }
}
@media (min-width: 1181px) {
  .i3v3-group .i3-bul { grid-template-columns: repeat(3, minmax(0,1fr)); }
}


/* ==========================================================================
   DESIGN 4 — DEEP BAND ROWS
   The full-bleed dark moment: --fam-grad-deep fill, hairline rows at
   rgba(255,255,255,.22), areas in up to three columns. Numerals SOLID
   --fam-300 (deviation note at the top of this file). Prints all 68.
   Worst case: rows are auto-height — a 10-area row runs one line deeper.
   ========================================================================== */
.i3v4 { background: var(--fam-grad-deep); color: #fff; padding-block: 40px 44px; }
.i3v4-head { margin-bottom: 26px; }
.i3v4 .i3-eyebrow { color: var(--fam-200); }
.i3v4-head .i3-h2 { color: #fff; max-width: 20ch; }
.i3v4-head .i3-lede { color: rgba(255,255,255,.76); margin-top: 16px; max-width: 62ch; }
.i3v4-hr { height: 2px; width: 88px; background: var(--fam-grad); margin-top: 22px; }
.i3v4-row {
  padding-block: 20px; border-top: 1px solid rgba(255,255,255,.22);
  transition: border-top-color .22s var(--ease);
}
.i3v4-row:last-child { border-bottom: 1px solid rgba(255,255,255,.22); }
.i3v4-rh { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; }
.i3v4-n { font-size: 20px; font-weight: 700; line-height: 1; letter-spacing: -.02em; color: var(--fam-300); font-variant-numeric: tabular-nums; }
.i3v4-row h3 { font-size: 18px; font-weight: 700; line-height: 1.3; color: #fff; margin: 0; }
@media (hover: hover) {
  .i3v4-row:hover { border-top-color: var(--fam-100); }
}
@media (min-width: 561px) {
  .i3v4-row .i3-bul { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 30px; }
}
@media (min-width: 761px) {
  .i3v4 { padding-block: 48px 52px; }
  .i3v4-row { display: grid; grid-template-columns: minmax(0,280px) minmax(0,1fr); gap: 6px 40px; padding-block: 24px; }
  .i3v4-rh { margin-bottom: 0; }
  .i3v4-rh { flex-direction: column; gap: 8px; }
  .i3v4-row h3 { font-size: 19px; }
}
@media (min-width: 941px) {
  .i3v4 { padding-block: 56px 60px; }
  .i3v4-row { grid-template-columns: minmax(0,300px) minmax(0,1fr); gap: 6px 56px; }
  .i3v4-row .i3-bul { grid-template-columns: repeat(3, minmax(0,1fr)); }
}


/* ==========================================================================
   DESIGN 5 — COLUMN FLOW
   `columns` packs the eight uneven groups by height — a 7-area priority
   costs 7 areas of page, no holes beside the 10-area ones. Shortest
   always-open print at width. Trade: reading runs down-then-across, so
   the numerals are large, gradient-clipped and findable out of order.
   column-rule carries the separation — one hairline between columns.
   ========================================================================== */
.i3v5-flow { columns: 1; column-gap: 40px; column-rule: 1px solid var(--c-line); }
.i3v5-mod {
  break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
  padding: 22px 0; border-top: 1px solid var(--c-line);
}
.i3v5-mod:first-child { border-top: none; padding-top: 0; }
.i3v5-num { font-size: 34px; margin-bottom: 8px; }
.i3v5-mod h3 { font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.015em; color: var(--c-ink); margin: 0 0 12px; }
.i3v5-mod .i3-dots li { font-size: 14.5px; }
@media (min-width: 761px) {
  .i3v5-flow { columns: 2; }
  /* in flow, :first-child is only the first block of the FIRST column and
     the browser decides the rest — every block keeps its top rule */
  .i3v5-mod:first-child { border-top: 1px solid var(--c-line); padding-top: 22px; }
}
@media (min-width: 1081px) {
  .i3v5-flow { columns: 3; column-gap: 44px; }
  .i3v5-num { font-size: 38px; }
}


/* ==========================================================================
   DESIGN 6 — PRIORITY SWITCHBOARD
   ARIA tablist, one panel at a time, fixed height whatever the count.
   Phone: numbered chips in a wrapped grid (8 at ~64px = two rows — no
   scroller hiding its own options). ≥941: a full-title vertical list, the
   home .services-tabs treatment. Panel head is the dark-stat device:
   --c-dark fill, 4px radius, solid 3px blue-cyan bottom border.
   NOTE: no [aria-selected]:hover colour override on the desktop list —
   that is precisely the §4·10 white-on-white defect, not repeated here.
   Worst case: fixed height by construction; the cost is one click per
   priority and weaker ctrl-F/SEO — stated on the label.
   ========================================================================== */
.i3v6 { display: grid; gap: 22px; }
.i3v6-rail { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }
.i3v6-tab {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 6px 8px; text-align: center;
  border: 1px solid #c4c4c4; border-radius: var(--radius); background: #fff;
  font-size: 14px; font-weight: 700; line-height: 1.25; color: var(--c-body);
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: border-color .22s var(--ease), color .22s var(--ease), background-color .22s var(--ease);
}
.i3v6-tab .t { display: none; }
.i3v6-tab[aria-selected="true"] { border-color: var(--fam-700); color: #fff; background: var(--fam-700); }
@media (hover: hover) {
  .i3v6-tab:not([aria-selected="true"]):hover { border-color: var(--fam-700); color: var(--fam-700); }
}
.i3v6-tab:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 2px; }
.i3v6-panel[hidden] { display: none; }
.i3v6-panel:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 4px; }
.i3v6-head {
  background: var(--c-dark); border-radius: var(--radius);
  border-bottom: 3px solid var(--fam-700); padding: 20px 20px 18px; color: #fff;
}
.i3v6-hn { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--fam-200); font-variant-numeric: tabular-nums; }
.i3v6-head h3 { margin: 8px 0 0; font-size: 21px; font-weight: 700; line-height: 1.28; letter-spacing: -.015em; color: #fff; }
.i3v6-head p { margin: 10px 0 0; font-size: 14.5px; font-weight: 300; line-height: 1.55; color: rgba(255,255,255,.72); }
.i3v6-body { padding-top: 22px; }
@media (min-width: 761px) {
  .i3v6-rail { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .i3v6-head { padding: 26px 26px 22px; }
  .i3v6-head h3 { font-size: 24px; }
  .i3v6-body .i3-dots { columns: 2; column-gap: 28px; }
}
@media (min-width: 941px) {
  .i3v6 { grid-template-columns: minmax(0,320px) minmax(0,1fr); gap: 44px; align-items: start; }
  .i3v6-rail { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--c-line); }
  .i3v6-tab {
    justify-content: flex-start; text-align: left; gap: 12px; min-height: 0;
    padding: 13px 4px; border: none; border-bottom: 1px solid var(--c-line);
    border-radius: 0; background: none; font-size: 15px; font-weight: 600;
  }
  .i3v6-tab .n { flex: 0 0 30px; color: #b7b7c2; transition: color .22s var(--ease); }
  .i3v6-tab .t { display: block; }
  .i3v6-tab[aria-selected="true"] { background: none; color: var(--c-ink); border-bottom-color: var(--fam-700); }
  .i3v6-tab[aria-selected="true"] .n { color: var(--fam-700); }
  .i3v6-tab:hover .n { color: var(--fam-700); }
}
@media (min-width: 1081px) {
  .i3v6-body .i3-dots { columns: 3; column-gap: 30px; }
}


/* ==========================================================================
   DESIGN 7 — SCRIMMED PANEL SPLIT
   The photographic one: the genuine factory shot under a deep blue-cyan scrim
   (900-base, so the type holds 4.5:1 wherever the photo shines through),
   pinned at ≥941 with the honest counts; ticked groups scroll right.
   The gradient stays the fallback — remove the image and the panel still
   reads (the s3v8 rule). Counters are the home data-count device.
   Worst case: groups are auto-height; ticks just run deeper.
   ========================================================================== */
.i3v7-grid { display: grid; gap: 30px; }
.i3v7-panel {
  border-radius: 14px; overflow: hidden; color: #fff; padding: 26px 24px 28px;
  background:
    linear-gradient(160deg, rgba(7,47,70,.92) 0%, rgba(7,47,70,.84) 55%, rgba(0,90,136,.78) 100%),
    var(--img) center/cover no-repeat, var(--fam-grad-deep);
  box-shadow: 0 30px 60px rgba(0,0,0,.35);
}
.i3v7-panel .i3-eyebrow { color: var(--fam-200); }
.i3v7-panel .i3-h2 { color: #fff; }
.i3v7-panel .i3-lede { color: rgba(255,255,255,.8); margin-top: 16px; }
.i3v7-tally { display: flex; gap: 38px; margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.22); }
.i3v7-num {
  display: block; font-size: 44px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; color: var(--fam-300); font-variant-numeric: tabular-nums;
}
.i3v7-numl { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: rgba(255,255,255,.66); }
.i3v7-group { padding: 22px 0; border-top: 1px solid var(--c-line); }
.i3v7-group:first-child { border-top: none; padding-top: 0; }
.i3v7-group h3 { font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--c-ink); margin: 0 0 12px; }
.i3v7-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.i3v7-group li { display: flex; gap: 10px; padding: 6px 0; font-size: 15px; font-weight: 300; line-height: 1.5; color: #323232; }
.i3v7-group .ic {
  flex: 0 0 14px; height: 14px; margin-top: 4px; position: relative;
  border: 1px solid var(--fam-400); border-radius: 3px;
}
.i3v7-group .ic::after {
  content: ""; position: absolute; left: 3px; top: 3px;
  width: 6px; height: 3px;
  border-left: 2px solid var(--fam-700); border-bottom: 2px solid var(--fam-700);
  transform: rotate(-45deg);
}
@media (min-width: 561px) {
  .i3v7-group ul { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 30px; }
}
@media (min-width: 941px) {
  .i3v7-grid { grid-template-columns: minmax(0,420px) minmax(0,1fr); gap: 64px; align-items: start; }
  .i3v7-panel { position: sticky; top: 110px; padding: 32px 30px 34px; }
  .i3v7-group { padding: 26px 0; }
}


/* ==========================================================================
   DESIGN 8 — SPINE TIMELINE
   A continuous 2px gradient rule (thin accent rule — permitted) runs the
   section's height with a node per priority; numeral + summary left,
   areas right from 941. Height-agnostic: a 10-area stage lengthens its
   own segment and nothing else moves.
   ========================================================================== */
.i3v8-head { margin-bottom: 34px; }
.i3v8-head .i3-h2 { max-width: 20ch; }
.i3v8-head .i3-lede { margin-top: 18px; max-width: 68ch; }
.i3v8-track { position: relative; padding-left: 30px; }
.i3v8-track::before {
  content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px;
  width: 2px; background: var(--fam-grad);
}
.i3v8-stage { position: relative; padding-bottom: 32px; }
.i3v8-stage:last-child { padding-bottom: 0; }
.i3v8-stage::before {
  content: ""; position: absolute; left: -30px; top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--fam-700); box-shadow: 0 0 0 4px #fff;
}
.i3v8-sh { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.i3v8-n { font-size: 30px; flex-shrink: 0; }
.i3v8-stage h3 { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0; }
.i3v8-sum { font-size: 15px; font-weight: 300; line-height: 1.55; color: var(--c-muted); margin: 0 0 16px; }
@media (min-width: 561px) {
  .i3v8-stage .i3-bul { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 30px; }
}
@media (min-width: 761px) {
  .i3v8-track { padding-left: 42px; }
  .i3v8-track::before { left: 9px; }
  .i3v8-stage { padding-bottom: 40px; }
  .i3v8-stage::before { left: -42px; top: 8px; width: 20px; height: 20px; border: 4px solid #fff; box-shadow: none; }
  .i3v8-n { font-size: 40px; }
  .i3v8-stage h3 { font-size: 21px; }
}
@media (min-width: 941px) {
  .i3v8-stage { display: grid; grid-template-columns: minmax(0,320px) minmax(0,1fr); gap: 0 52px; }
  .i3v8-sum { margin-bottom: 0; }
  .i3v8-stage .i3-bul { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1181px) {
  .i3v8-stage .i3-bul { grid-template-columns: repeat(3, minmax(0,1fr)); }
}


/* ==========================================================================
   DESIGN 9 — SNAP RAIL STEPPER
   One priority per card on a horizontal snap track — the ONLY fixed-height
   §3: eight priorities cost scroll distance, not page height. Cards are
   .svc-card geometry stretching to the tallest (the 10-area card sets it).
   The track lives INSIDE .container so the page never scrolls sideways;
   the thin blue-cyan scrollbar doubles as progress. Zero JS.
   ========================================================================== */
.i3v9 { display: grid; gap: 24px; }
.i3v9-hint { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; font-size: 13.5px; color: var(--c-muted); }
.i3v9-hint svg { width: 18px; height: 12px; color: var(--fam-700); }
.i3v9-track {
  display: flex; gap: 14px; align-items: stretch;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px 2px 18px;   /* room for the hover shadow inside the scroll box */
  scrollbar-width: thin; scrollbar-color: var(--fam-700) var(--c-line);
}
.i3v9-track:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 4px; }
.i3v9-track::-webkit-scrollbar { height: 4px; }
.i3v9-track::-webkit-scrollbar-track { background: var(--c-line); border-radius: 2px; }
.i3v9-track::-webkit-scrollbar-thumb { background: var(--fam-700); border-radius: 2px; }
.i3v9-card {
  flex: 0 0 86%; scroll-snap-align: start;
  display: flex; flex-direction: column;
  border: 1px solid #c4c4c4; border-radius: var(--radius);
  padding: 22px 20px; background: #fff;
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
}
.i3v9-ch { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.i3v9-card h3 { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0; }
.i3v9-card .i3-bul { flex: 1; align-content: start; }
@media (hover: hover) {
  .i3v9-card:hover { border-color: var(--fam-700); box-shadow: 0 14px 30px rgba(20,20,40,.08); transform: translateY(-2px); }
}
@media (min-width: 561px) { .i3v9-card { flex-basis: 62%; } }
@media (min-width: 761px) { .i3v9-card { flex-basis: 46%; padding: 26px 24px; } }
@media (min-width: 941px) {
  .i3v9 { grid-template-columns: minmax(0,340px) minmax(0,1fr); gap: 56px; align-items: center; }
  .i3v9-card { flex-basis: 54%; }
}
@media (min-width: 1181px) { .i3v9-card { flex-basis: 40%; } }


/* ==========================================================================
   DESIGN 10 — ZIG-ZAG EDITORIAL
   The home .glance split per priority, alternated at ≥941 — numeral and
   summary one side, areas the other. Type-only; the large gradient
   numeral carries the alternation. Rules only below 941, where the layout
   is a single column and needs them; at width the alternation separates.
   Worst case: the tallest print here by design — for pages where §3 is
   the hero, not the ones whose §4 runs long.
   ========================================================================== */
.i3v10-head { margin-bottom: 32px; }
.i3v10-head .i3-h2 { max-width: 20ch; }
.i3v10-head .i3-lede { margin-top: 18px; }
.i3v10-stage { padding-block: 26px; border-top: 1px solid var(--c-line); }
.i3v10-stage:last-child { border-bottom: 1px solid var(--c-line); }
.i3v10-n { font-size: clamp(40px, 6vw, 64px); margin-bottom: 10px; }
.i3v10-stage h3 { font-size: 21px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--c-ink); margin: 0 0 10px; }
.i3v10-sum { font-size: 15px; max-width: 44ch; }
.i3v10-stage .i3-bul { margin-top: 18px; }
@media (min-width: 561px) {
  .i3v10-stage .i3-bul { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 30px; }
}
@media (min-width: 941px) {
  .i3v10-stage {
    display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: 0 64px; align-items: center;
    padding-block: 40px; border-top: none;
  }
  .i3v10-stage:last-child { border-bottom: none; }
  .i3v10-stage:nth-child(even) .i3v10-side { order: 2; }
  .i3v10-stage .i3-bul { margin-top: 0; }
}


/* ==========================================================================
   DESIGN 11 — TINT LADDER  (new palette round, 2026-08-04)
   The palette does the separating: eight full-width bands alternating
   --fam-tint and white — no hairlines, no boxes. Numeral + title left,
   areas right. The gradient numeral reads cleanly on both surfaces.
   Worst case: a 10-area band just runs deeper; the alternation holds.
   ========================================================================== */
.i3v11-sec { padding: 40px 0 90px; background: #fff; }
.i3v11-head { margin-bottom: 34px; }
.i3v11-head .i3-lede { margin-top: 18px; max-width: 68ch; }
.i3v11-band { padding-block: 26px; }
.i3v11-band--tint { background: var(--fam-tint); }
.i3v11-inner { display: grid; gap: 14px; }
.i3v11-n { font-size: 34px; margin-bottom: 8px; }
.i3v11-side h3 { font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; color: var(--c-ink); margin: 0; }
@media (min-width: 561px) {
  .i3v11-inner .i3-bul { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 30px; }
}
@media (min-width: 761px) {
  .i3v11-band { padding-block: 30px; }
  .i3v11-inner { grid-template-columns: minmax(0,300px) minmax(0,1fr); gap: 0 40px; align-items: start; }
}
@media (min-width: 941px) {
  .i3v11-inner { grid-template-columns: minmax(0,320px) minmax(0,1fr); gap: 0 56px; }
}
@media (min-width: 1081px) {
  .i3v11-inner .i3-bul { grid-template-columns: repeat(3, minmax(0,1fr)); }
}


/* ==========================================================================
   DESIGN 12 — WATERMARK NUMERAL CARDS  (new palette round, 2026-08-04)
   The numeral-watermark treatment the owner approved on the Solutions hub
   (the pre-curtain look), re-authored fresh under this namespace: white
   cards, neutral #c4c4c4 borders, 4px radius, and a huge --fam-num numeral
   behind the content. --fam-num was deepened one step in ind-family.css
   for exactly this job — pale but present. Cards are NOT links, so there
   is no hover choreography to fake.
   Worst case: overflow:hidden crops the numeral, never the content.
   ========================================================================== */
.i3v12-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.i3v12-card {
  position: relative; overflow: hidden;
  border: 1px solid #c4c4c4; border-radius: var(--radius);
  padding: 24px 22px 30px; background: #fff;
}
.i3v12-card h3 {
  position: relative; z-index: 1;
  font-size: 19px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em;
  color: var(--c-ink); margin: 0 0 12px;
}
.i3v12-card .i3-dots, .i3v12-card .i3-condline { position: relative; z-index: 1; }
.i3v12-wm {
  position: absolute; right: 6px; bottom: -16px; z-index: 0;
  font-size: clamp(96px, 12vw, 150px); font-weight: 800; line-height: 1;
  letter-spacing: -.05em; color: var(--fam-num);
  font-variant-numeric: tabular-nums; user-select: none;
}
@media (min-width: 761px) {
  .i3v12-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
  .i3v12-card { padding: 26px 26px 34px; }
}


/* ==========================================================================
   DESIGN 13 — CHIP LEDGER  (new palette round, 2026-08-04)
   Hairline rows, but the 68 areas are --fam-chip tags — the palette carried
   by the content itself. Chips are non-interactive labels: fam-chip fill,
   fam-ink-2 text (the pairing the token block defines), no hover.
   Worst case: chips wrap; a 10-area row is three chip lines at 390.
   ========================================================================== */
.i3v13-rows { display: flex; flex-direction: column; }
.i3v13-row {
  padding: 20px 2px 22px; border-bottom: 1px solid var(--c-line);
}
.i3v13-row:first-child { border-top: 1px solid var(--c-line); }
.i3v13-n {
  display: block; font-size: 20px; font-weight: 700; line-height: 1;
  letter-spacing: -.02em; color: #b7b7c2; font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.i3v13-row h3 { font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0 0 12px; }
.i3v13-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.i3v13-chips li {
  display: inline-block; padding: 7px 12px;
  font-size: 13.5px; font-weight: 500; line-height: 1.35;
  color: var(--fam-ink-2); background: var(--fam-chip); border-radius: var(--radius);
}
@media (min-width: 761px) {
  .i3v13-row { display: grid; grid-template-columns: 56px minmax(0,1fr); gap: 0 20px; padding: 24px 4px 26px; }
  .i3v13-n { font-size: 24px; margin-bottom: 0; padding-top: 3px; }
  .i3v13-row h3 { font-size: 20px; }
}


/* ==========================================================================
   DESIGN 14 — HOME SERVICES EXPLORER  (owner reference, 2026-08-04)
   Built from the supplied screenshot of index.html's .services-tabs: a
   left rail of full-title tab rows over var(--c-line) hairlines — the
   selected row's hairline replaced by a SOLID 3px --fam-700 rule (the
   screenshot's thick accent underline) — and the selected priority's
   panel beside it: large title, summary lede, areas as outlined cards.
   Adaptations, both flagged on the label: family 4px radius instead of
   the home page's 14px .pg-home token, and NO corner arrow boxes on the
   cards — areas don't navigate, and the arrow is the family's link
   signal. main.js's .svc-tab controller doesn't reach this namespace, so
   the preview's inline controller drives it (same as Design 6).
   NOTE: no [aria-selected]:hover colour override — the §4·10 white-on-
   white defect stays dead here too.
   Worst case: the 10-area panels wrap to a fourth card row at 941 — the
   rail column doesn't care.
   ========================================================================== */
.i3v14 { display: grid; gap: 30px; }
.i3v14-rail { display: flex; flex-direction: column; border-top: 1px solid var(--c-line); }
.i3v14-tab {
  text-align: left; background: none; border: none; cursor: pointer;
  padding: 17px 2px; min-height: 44px;
  border-bottom: 1px solid var(--c-line);
  font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--c-ink);
  transition: color .22s var(--ease), border-bottom-color .22s var(--ease);
}
/* the screenshot's thick accent underline — padding gives back the 2px the
   fatter rule takes, so rows below don't shift on selection */
.i3v14-tab[aria-selected="true"] {
  border-bottom: 3px solid var(--fam-700); padding-bottom: 15px;
}
@media (hover: hover) {
  .i3v14-tab:not([aria-selected="true"]):hover { color: var(--fam-700); }
}
.i3v14-tab:focus-visible { outline: 2px solid var(--fam-700); outline-offset: -2px; }
.i3v14-panel[hidden] { display: none; }
.i3v14-panel:focus-visible { outline: 2px solid var(--fam-700); outline-offset: 4px; }
.i3v14-panel h3 {
  font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1.15;
  letter-spacing: -.02em; color: var(--c-ink); margin: 0 0 12px;
}
.i3v14-cards { margin-top: 22px; display: grid; grid-template-columns: 1fr; gap: 12px; }
.i3v14-card {
  border: 1px solid #c4c4c4; border-radius: var(--radius);
  padding: 18px; background: #fff;
  transition: border-color .22s var(--ease);
}
.i3v14-card h4 { font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--c-ink); margin: 0; }
@media (hover: hover) {
  .i3v14-card:hover { border-color: var(--fam-700); }
}
@media (min-width: 561px) {
  .i3v14-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 941px) {
  .i3v14 { grid-template-columns: minmax(0,380px) minmax(0,1fr); gap: 56px; align-items: start; }
  .i3v14-tab { font-size: 19px; padding: 19px 2px; }
  .i3v14-tab[aria-selected="true"] { padding-bottom: 17px; }
  .i3v14-cards { gap: 14px; }
}
@media (min-width: 1181px) {
  .i3v14-cards { grid-template-columns: repeat(3, minmax(0,1fr)); }
}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .i3v1-row, .i3v1-n, .i3v2-item, .i3v2-n, .i3v2-pm, .i3v2-pm::after,
  .i3v3-index a, .i3v3-index .n, .i3v4-row, .i3v6-tab, .i3v6-tab .n,
  .i3v9-card { transition: none; }
  .i3v9-card:hover { transform: none; }
  .i3v9-track { scroll-behavior: auto; scroll-snap-type: none; }
}