/* ===========================================================================
   home-v28.css — homepage-only patterns for the v28 structure.

   Scoped to .home-v28. Adds NOTHING to the global system: every colour, font,
   space, radius and easing below resolves through the existing :root tokens in
   site.css. No new font, no new radius scale, no new shadow, no gradient that
   was not already in the system.

   Sections here are numbered to match HOME_STRUCTURE_v28.md.
   =========================================================================== */

.home-v28 { --node: 9px; --rule: 1px; }

/* Local aliases so infographic code reads clearly. All point at existing tokens. */
.home-v28 {
  --ig-line:   var(--line);
  --ig-ink:    var(--blue);
  --ig-active: var(--accent);
  --ig-quiet:  var(--muted);
}
.home-v28 .band-blue, .home-v28 .band-ink {
  --ig-line:   var(--line-blue);
  --ig-ink:    #fff;
  --ig-quiet:  rgba(255,255,255,.62);
}

/* ---------------------------------------------------------------- shared */
.v28-eyebrow-row { display:flex; align-items:center; gap:10px; }

/* A panel is the v28 unit: square, hairline, no shadow, no gradient. */
.v28-panel {
  position:relative; border:var(--rule) solid var(--line);
  background:var(--white); padding:clamp(20px,2.2vw,30px);
  display:flex; flex-direction:column; gap:12px;
  transition:border-color .28s var(--ease), background .28s var(--ease);
}
.v28-panel.is-pale { background:var(--blue-pale); border-color:transparent; }
/* --muted on --blue-pale measures 4.24:1. --blue-ink at .82 clears AA. */
.v28-panel.is-pale p { color:var(--blue-ink); opacity:.82; }
.v28-panel.is-ink  { background:var(--blue-ink); border-color:transparent; color:#fff; }
.v28-panel.is-blue { background:var(--blue); border-color:transparent; color:#fff; }
.v28-panel.is-ink p, .v28-panel.is-blue p { color:rgba(255,255,255,.82); }
.band-blue .v28-panel, .band-ink .v28-panel {
  background:transparent; border-color:var(--line-blue); color:#fff;
}
.band-blue .v28-panel p, .band-ink .v28-panel p { color:rgba(255,255,255,.8); }

.v28-panel__label {
  font-family:var(--font-sans); font-size:var(--type-small); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.band-blue .v28-panel__label, .band-ink .v28-panel__label,
.v28-panel.is-ink .v28-panel__label, .v28-panel.is-blue .v28-panel__label {
  color:rgba(255,255,255,.66);
}
.v28-panel h3, .v28-panel .v28-panel__title {
  font-family:var(--font-sans); font-size:var(--type-body-large); font-weight:700;
  line-height:1.25; letter-spacing:-.02em; margin:0;
}
.v28-panel p { margin:0; font-size:var(--type-body); line-height:1.6; color:var(--muted); }

/* Hover / focus: subtle, no layout shift. */
.v28-panel:hover, .v28-panel:focus-within { border-color:var(--blue); }
.band-blue .v28-panel:hover, .band-ink .v28-panel:hover,
.band-blue .v28-panel:focus-within, .band-ink .v28-panel:focus-within {
  border-color:var(--line-blue-strong);
}

/* ------------------------------------------------- 01 hero proof bar */
.v28-proof {
  display:grid; grid-template-columns:repeat(3,1fr);
  border-top:var(--rule) solid var(--line-blue);
}
.v28-proof__item { padding:clamp(18px,2vw,26px) clamp(16px,2vw,28px); }
.v28-proof__item + .v28-proof__item { border-left:var(--rule) solid var(--line-blue); }
.v28-proof__label {
  display:block; font-size:var(--type-small); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.6); margin-bottom:6px;
}
.v28-proof__item p { margin:0; color:rgba(255,255,255,.9); font-size:var(--type-body); }
@media (max-width:860px){
  .v28-proof { grid-template-columns:1fr; }
  .v28-proof__item + .v28-proof__item {
    border-left:0; border-top:var(--rule) solid var(--line-blue);
  }
}

/* --------------------------------------------- 02 diagnostic mosaic */
.v28-mosaic {
  display:grid; gap:16px;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:minmax(0,auto);
}
.v28-mosaic > * { min-width:0; }
.m-feature { grid-column:span 6; }
.m-a { grid-column:span 3; } .m-b { grid-column:span 3; }
.m-c { grid-column:span 3; } .m-d { grid-column:span 3; }
.m-image { grid-column:span 3; }
.m-signal { grid-column:span 5; }
.m-e { grid-column:span 4; }
.m-quote { grid-column:span 3; }

.m-feature { min-height:340px; justify-content:space-between; }
.m-feature h3 { font-size:var(--type-card); font-family:var(--font-display);
  font-weight:400; line-height:1.06; letter-spacing:-.008em; }
.m-feature__caption {
  font-size:var(--type-small); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin:0;
}
.m-image { padding:0; border:0; overflow:hidden; min-height:200px; }
.m-image img { width:100%; height:100%; object-fit:cover; display:block; }
.m-quote { justify-content:center; }
.m-quote blockquote {
  margin:0; font-family:var(--font-display); font-weight:400;
  font-size:var(--type-card); line-height:1.1; letter-spacing:-.008em;
  color:var(--ink);
}
.m-quote cite {
  font-style:normal; font-size:var(--type-small); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--grey);
}
@media (max-width:1024px){
  .m-feature, .m-signal { grid-column:span 12; }
  .m-a, .m-b, .m-c, .m-d, .m-e, .m-image, .m-quote { grid-column:span 6; }
}
@media (max-width:768px){
  .v28-mosaic { gap:12px; }
  .v28-mosaic > * { grid-column:span 12 !important; }
  .m-feature { min-height:0; }
  .m-image { min-height:180px; }
}

/* ----------------------------------------------- 03 root-cause chain */
.v28-chain { position:relative; margin-top:clamp(28px,4vw,52px); }
.v28-chain__svg { width:100%; height:auto; display:block; overflow:visible; }
.v28-chain__labels { display:none; }         /* desktop labels live in the SVG */

@media (max-width:900px){
  .v28-chain__svg { display:none; }
  .v28-chain__labels { display:block; }
  .v28-chain-item {
    position:relative; padding:18px 0 18px 34px;
    border-top:var(--rule) solid var(--line);
  }
  .v28-chain-item:before {
    content:""; position:absolute; left:0; top:0; bottom:0; width:1px;
    background:var(--line);
  }
  .v28-chain-item:after {
    content:""; position:absolute; left:-4px; top:calc(18px + .5em);
    width:var(--node); height:var(--node); border-radius:999px;
    background:var(--paper); border:1px solid var(--muted);
  }
  .v28-chain-item.is-on:after { background:var(--accent); border-color:var(--accent); }
  .v28-chain-item h3 { margin:0 0 4px; font-size:var(--type-body-large);
    font-weight:700; letter-spacing:-.02em; }
  .v28-chain-item .k { color:var(--blue); }
  .v28-chain-item p { margin:0; color:var(--muted); font-size:var(--type-body); }
}

/* -------------------------------------------------- 04 outgrown areas */
.v28-areas { display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  border:var(--rule) solid var(--line-blue); }
.v28-areas > * { padding:clamp(22px,2.4vw,32px); }
.v28-areas > * + * { border-left:var(--rule) solid var(--line-blue); }
.v28-area__idx { font-size:var(--type-small); font-weight:700; letter-spacing:.16em;
  color:rgba(255,255,255,.5); }
.v28-area h3 { margin:8px 0 6px; font-size:var(--type-body-large); font-weight:700;
  letter-spacing:-.02em; color:#fff; }
.v28-area p { margin:0; color:rgba(255,255,255,.78); font-size:var(--type-body); }
.v28-area .i { color:rgba(255,255,255,.85); margin-bottom:10px; }
.v28-area__meter { margin-top:16px; height:2px; background:var(--line-blue);
  position:relative; overflow:hidden; }
.v28-area__meter i { position:absolute; inset:0 100% 0 0; background:var(--accent);
  transition:right .6s var(--ease); }
.v28-area.is-on .v28-area__meter i { right:0; }
@media (max-width:900px){
  .v28-areas { grid-template-columns:1fr; }
  .v28-areas > * + * { border-left:0; border-top:var(--rule) solid var(--line-blue); }
}

/* -------------------------------------------- 05 photographic chapter */
.v28-chapter { position:relative; }
.v28-chapter__statement {
  position:absolute; left:0; right:0; bottom:clamp(24px,4vw,64px); z-index:2;
}
.v28-chapter__statement p {
  max-width:34ch; margin:0; color:#fff; font-family:var(--font-sans);
  font-weight:700; font-size:var(--type-body-large); line-height:1.35;
  text-shadow:0 1px 26px rgba(1,33,82,.5);
}

/* ------------------------------------------------- 06 divergence chart */
.v28-diverge { min-height:320px; }
.v28-diverge__svg { width:100%; height:auto; display:block; margin-top:auto; }
.v28-diverge__key { display:flex; gap:20px; flex-wrap:wrap; margin:0; padding:0;
  list-style:none; }
.v28-diverge__key li { display:flex; align-items:center; gap:8px;
  font-size:var(--type-small); color:rgba(255,255,255,.72); }
.v28-diverge__key i { width:18px; height:2px; background:currentColor; flex:none; }
.v28-diverge__key .k-growth  { color:rgba(255,255,255,.85); }
.v28-diverge__key .k-clarity { color:var(--accent); }

/* --------------------------------------------- 07 connected system */
.v28-system { position:relative; margin-top:clamp(28px,4vw,52px); }
.v28-system__svg { width:100%; height:auto; display:block; overflow:visible; }
/* Below 900px the path labels would scale under 12px; the node list carries
   every word, so the drawing steps aside rather than becoming unreadable. */
@media (max-width:900px){ .v28-system .ig { display:none; } }
@media (max-width:700px){ .v28-diverge .ig-sub { display:none; } }
.v28-system__list { display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:var(--rule) solid var(--line-blue); margin-top:28px; }
.v28-node {
  padding:clamp(18px,2vw,26px); border-right:var(--rule) solid var(--line-blue);
  border-bottom:var(--rule) solid var(--line-blue); background:transparent;
  text-align:left; font:inherit; color:inherit; cursor:default;
  transition:background .24s var(--ease);
}
.v28-node:nth-child(4n) { border-right:0; }
.v28-node .v28-node__k { font-size:var(--type-small); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.v28-node h3 { margin:6px 0 6px; font-size:var(--type-body-large); font-weight:700;
  letter-spacing:-.02em; color:#fff; }
.v28-node p { margin:0; font-size:var(--type-body); color:rgba(255,255,255,.74); }
.v28-node.is-on, .v28-node:hover, .v28-node:focus-visible {
  background:rgba(255,255,255,.05); outline:none;
}
.v28-node.is-on .v28-node__k { color:var(--accent); }
.v28-node:focus-visible { box-shadow:inset 0 0 0 2px var(--line-blue-strong); }
@media (max-width:1024px){ .v28-system__list { grid-template-columns:repeat(2,1fr); }
  .v28-node:nth-child(4n){ border-right:var(--rule) solid var(--line-blue); }
  .v28-node:nth-child(2n){ border-right:0; } }
@media (max-width:640px){ .v28-system__list { grid-template-columns:1fr; }
  .v28-node { border-right:0 !important; } }

/* ------------------------------------------------------ 08 the guide */
.v28-guide { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,4vw,64px); align-items:center; }
.v28-guide__media { position:relative; aspect-ratio:4/5; overflow:hidden;
  border:var(--rule) solid var(--line); }
.v28-guide__media img { width:100%; height:100%; object-fit:cover;
  object-position:60% 30%; display:block; }
.v28-guide__quote { border-left:2px solid var(--accent); padding-left:22px; margin:0; }
.v28-guide__quote p { margin:0; color:var(--muted); }
.v28-guide__areas { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0;
  list-style:none; }
.v28-guide__areas li { font-size:var(--type-small); font-weight:600;
  border:var(--rule) solid var(--line); padding:6px 12px; color:var(--blue); }
@media (max-width:900px){ .v28-guide { grid-template-columns:1fr; } }

/* --------------------------------------------------- 09 capability grid */
.v28-lenses { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.v28-lens__head { display:flex; align-items:center; gap:10px; }
.v28-lens__head .i { color:var(--blue); flex:none; }
.v28-lens h3 { font-family:var(--font-display); font-weight:400;
  font-size:var(--type-card); line-height:1.06; letter-spacing:-.008em; margin:0; }
/* The micro-diagrams sit on paper; --line is too pale to read as a drawing.
   They rest at --grey and gain the single lime point on hover or focus. */
.v28-lens__chart .ig-path { stroke:var(--grey); }
.v28-lens__chart .ig-dot { stroke:var(--grey); }
.v28-lens:hover .v28-lens__chart .ig-path,
.v28-lens:focus-visible .v28-lens__chart .ig-path,
.v28-lens:focus-within .v28-lens__chart .ig-path { stroke:var(--blue); }
.v28-lens:hover .v28-lens__chart .ig-dot:last-of-type,
.v28-lens:focus-visible .v28-lens__chart .ig-dot:last-of-type,
.v28-lens:focus-within .v28-lens__chart .ig-dot:last-of-type {
  fill:var(--accent); stroke:var(--accent);
}
.v28-lens:hover .v28-lens__head .i,
.v28-lens:focus-within .v28-lens__head .i { transform:translateX(2px); }
.v28-lens__head .i { transition:transform .24s var(--ease); }
.v28-lens:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }
.v28-lens__row { display:block; }
.v28-lens__row .k {
  display:block; font-size:var(--type-small); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue); margin-bottom:4px;
}
.v28-lens__row p { margin:0; }
.v28-lens__chart { margin-top:auto; padding-top:14px; }
.v28-lens__chart svg { width:100%; height:auto; display:block; overflow:visible; }
@media (max-width:1024px){ .v28-lenses { grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px){ .v28-lenses { grid-template-columns:1fr; } }

/* ------------------------------------------------ 10 owner statements */
.v28-owners { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.v28-owner { border:var(--rule) solid var(--line); background:var(--white); }
.v28-owner > summary {
  list-style:none; cursor:pointer; padding:clamp(18px,2vw,24px);
  display:flex; align-items:flex-start; justify-content:space-between; gap:18px;
  font-family:var(--font-display); font-weight:400; font-size:var(--type-card);
  line-height:1.12; letter-spacing:-.008em; color:var(--ink);
}
.v28-owner > summary::-webkit-details-marker { display:none; }
.v28-owner > summary:after {
  content:""; flex:none; width:14px; height:14px; margin-top:.35em;
  background:var(--accent);
  -webkit-mask:var(--ico-plus) center/contain no-repeat;
  mask:var(--ico-plus) center/contain no-repeat;
  transition:transform .26s var(--ease);
  --ico-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M6.4 0h1.2v14H6.4z'/%3E%3Cpath d='M0 6.4h14v1.2H0z'/%3E%3C/svg%3E");
}
.v28-owner[open] > summary:after { transform:rotate(45deg); }
.v28-owner > summary:focus-visible { outline:2px solid var(--blue); outline-offset:-2px; }
.v28-owner__body { padding:0 clamp(18px,2vw,24px) clamp(18px,2vw,24px); }
.v28-owner__body .k {
  display:block; font-size:var(--type-small); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue); margin-bottom:6px;
}
.v28-owner__body p { margin:0; color:var(--muted); }
.v28-owner:hover { border-color:var(--blue); }
@media (max-width:820px){ .v28-owners { grid-template-columns:1fr; } }

/* ---------------------------------------------------- 11 lever rail */
.v28-levers { position:relative; padding-left:clamp(30px,3.2vw,46px); }
.v28-levers:before {
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px;
  background:var(--line-blue);
}
.v28-lever {
  position:relative; display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) minmax(0,1.3fr);
  gap:clamp(18px,2.4vw,42px); padding:clamp(24px,2.6vw,34px) 0;
  border-top:var(--rule) solid var(--line-blue);
  opacity:.55; transition:opacity .32s var(--ease);
}
.v28-lever:after {
  content:""; position:absolute; left:calc(-1 * clamp(30px,3.2vw,46px) - 4px);
  top:calc(clamp(24px,2.6vw,34px) + .55em);
  width:var(--node); height:var(--node); border-radius:999px;
  background:var(--blue); border:1px solid rgba(255,255,255,.5);
  transition:background .3s var(--ease), border-color .3s var(--ease),
             transform .3s var(--ease);
}
.v28-lever.is-on, .v28-lever:hover, .v28-lever:focus-within { opacity:1; }
.v28-lever.is-on:after, .v28-lever:hover:after, .v28-lever:focus-within:after {
  background:var(--accent); border-color:var(--accent); transform:scale(1.25);
}
.v28-lever__name { display:flex; align-items:baseline; gap:12px; }
.v28-lever__idx { font-size:var(--type-small); font-weight:700; letter-spacing:.16em;
  color:rgba(255,255,255,.5); }
.v28-lever h3 { margin:0; font-family:var(--font-display); font-weight:400;
  font-size:var(--type-subsection); line-height:1.02; letter-spacing:-.01em;
  color:#fff; }
.v28-lever .k { display:block; font-size:var(--type-small); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.5);
  margin-bottom:6px; }
.v28-lever p { margin:0; color:rgba(255,255,255,.82); font-size:var(--type-body); }
@media (max-width:960px){
  .v28-lever { grid-template-columns:1fr; gap:14px; }
}

/* ------------------------------------------------ 12 project evidence */
/* stretch, not start: with one card on the left and two stacked on the right,
   `start` left an empty half under the featured case at desktop. */
.v28-evidence { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:16px; align-items:stretch; }
.v28-case--featured { height:100%; }
.v28-case { display:flex; flex-direction:column; }
.v28-case__media { overflow:hidden; border:var(--rule) solid var(--line);
  aspect-ratio:16/10; }
.v28-case--featured .v28-case__media { aspect-ratio:16/11; }
.v28-case__media img { width:100%; height:100%; object-fit:cover;
  object-position:50% 0; display:block;
  transition:transform .55s var(--ease); }
.v28-case:hover .v28-case__media img,
.v28-case:focus-within .v28-case__media img { transform:scale(1.03); }
.v28-case__body { padding:clamp(20px,2.2vw,30px); display:flex;
  flex-direction:column; gap:14px; }
.v28-case--featured .v28-case__body { background:var(--blue-ink); color:#fff; flex:1; }
.v28-case--featured .v28-case__body p { color:rgba(255,255,255,.8); }
.v28-case--featured .v28-case__body .k { color:rgba(255,255,255,.6); }
/* The global .text-link and .label are blue; on the featured dark panel that
   measured 1.56:1 and 3.18:1. Both are given the on-dark treatment here. */
.v28-case--featured .text-link { color:#fff; }
.v28-case--featured .label { color:rgba(255,255,255,.7); }
.v28-case:not(.v28-case--featured) .label { color:var(--blue); }
.v28-case:not(.v28-case--featured) .v28-case__body { background:var(--white);
  border:var(--rule) solid var(--line); border-top:0; }
.v28-case h3 { margin:0; font-family:var(--font-display); font-weight:400;
  font-size:var(--type-card); line-height:1.06; letter-spacing:-.008em; }
.v28-case__row .k { display:block; font-size:var(--type-small); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--blue);
  margin-bottom:4px; }
.v28-case__row p { margin:0; font-size:var(--type-body); color:var(--muted); }
.v28-case__metrics { display:flex; gap:22px; flex-wrap:wrap;
  padding-top:14px; border-top:var(--rule) solid var(--line); }
.v28-case__metric b { display:block; font-family:var(--font-display); font-weight:400;
  font-size:var(--type-subsection); line-height:1; letter-spacing:-.01em;
  color:var(--blue); }
.v28-case__metric span { font-size:var(--type-small); color:var(--muted); }
.v28-evidence__stack { display:grid; gap:16px; }
@media (max-width:1024px){ .v28-evidence { grid-template-columns:1fr; } }

/* ------------------------------------------------- 13 collaboration */
.v28-people { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:16px; align-items:start; }
.v28-people__media { overflow:hidden; border:var(--rule) solid var(--line);
  aspect-ratio:4/5; }
.v28-people__media img { width:100%; height:100%; object-fit:cover; display:block; }
.v28-people__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.v28-people__close { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:16px; margin-top:16px; align-items:stretch; }
.v28-people__statement { background:var(--blue-ink); color:#fff;
  padding:clamp(24px,2.8vw,40px); display:flex; align-items:center; }
.v28-people__statement p { margin:0; font-family:var(--font-display); font-weight:400;
  font-size:var(--type-card); line-height:1.1; letter-spacing:-.008em; color:#fff;
  max-width:34ch; }
.v28-people__second { overflow:hidden; border:var(--rule) solid var(--line);
  min-height:220px; }
.v28-people__second img { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:1024px){
  .v28-people, .v28-people__close { grid-template-columns:1fr; }
  .v28-people__media { aspect-ratio:16/10; }
}
@media (max-width:600px){ .v28-people__grid { grid-template-columns:1fr; } }

/* ----------------------------------------------------- 14 metrics */
.v28-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.v28-metric { padding:clamp(22px,2.4vw,34px) clamp(16px,1.8vw,26px);
  border-top:var(--rule) solid var(--line-blue); }
.v28-metric + .v28-metric { border-left:var(--rule) solid var(--line-blue); }
.v28-metric__fig { margin:0; font-family:var(--font-display); font-weight:400;
  font-size:var(--type-impact); line-height:.9; letter-spacing:-.02em; color:#fff;
  white-space:nowrap; }
.v28-metric__fig .u { font-size:.44em; vertical-align:.62em; }
.v28-metric__label { display:block; margin:14px 0 6px; font-family:var(--font-sans);
  font-size:var(--type-body-large); font-weight:700; letter-spacing:-.02em; color:#fff; }
.v28-metric p { margin:0; font-size:var(--type-body); color:rgba(255,255,255,.76); }
.v28-metric__track { margin-top:16px; height:2px; background:var(--line-blue);
  position:relative; overflow:hidden; }
.v28-metric__track i { position:absolute; inset:0 100% 0 0; background:var(--accent);
  transition:right .8s var(--ease); }
.v28-metric.is-on .v28-metric__track i { right:0; }
@media (max-width:1024px){ .v28-metrics { grid-template-columns:repeat(2,1fr); }
  .v28-metric:nth-child(odd){ border-left:0; }
  .v28-metric:nth-child(2n){ border-left:var(--rule) solid var(--line-blue); } }
@media (max-width:600px){ .v28-metrics { grid-template-columns:1fr; }
  .v28-metric { border-left:0 !important; } }

/* ------------------------------------------------------ 17 close line */
.v28-close-line { margin-top:clamp(24px,3vw,42px); }
.v28-close-line svg { width:100%; height:auto; display:block; overflow:visible; }

/* ================================================= infographic shared */
[data-infographic] .ig-line, [data-infographic] .ig-path {
  fill:none; stroke:var(--ig-line); stroke-width:1;
}
[data-infographic] .ig-draw {
  stroke-dasharray:var(--len,1000); stroke-dashoffset:calc(var(--len,1000) * (1 - var(--p,0)));
}
[data-infographic] .ig-dot { fill:var(--paper); stroke:var(--ig-quiet); stroke-width:1; }
.band-blue [data-infographic] .ig-dot { fill:var(--blue); stroke:rgba(255,255,255,.5); }
.band-ink  [data-infographic] .ig-dot { fill:var(--blue-ink); stroke:rgba(255,255,255,.5); }
[data-infographic] .ig-dot.is-on { fill:var(--ig-active); stroke:var(--ig-active); }
/* SVG text scales with the viewBox, so these are set generously and the
   widest diagrams are swapped for their DOM equivalents below 900px rather
   than allowed to shrink into illegibility. */
[data-infographic] .ig-label {
  font-family:var(--font-sans); font-size:15px; font-weight:700;
  letter-spacing:.04em; fill:var(--ig-ink);
}
[data-infographic] .ig-sub {
  font-family:var(--font-sans); font-size:14px; font-weight:500; fill:var(--ig-quiet);
}
[data-infographic] .ig-fade { opacity:calc(var(--p,0)); }
[data-infographic] .ig-accent { stroke:var(--ig-active); }

/* Group hover / focus emphasis — brighten one, quieten the rest. */
[data-infographic].has-focus .ig-group { opacity:.34; transition:opacity .22s var(--ease); }
[data-infographic].has-focus .ig-group.is-focus { opacity:1; }

/* Mini bar chart inside the featured symptom card. */
.ig-bars rect { fill:rgba(255,255,255,.34); transition:fill .3s var(--ease); }
.ig-bars rect.is-on { fill:var(--accent); }

/* ===================================================== reduced motion */
@media (prefers-reduced-motion:reduce){
  .home-v28 [data-infographic] .ig-draw { stroke-dashoffset:0 !important; }
  .home-v28 [data-infographic] .ig-fade { opacity:1 !important; }
  .home-v28 .v28-lever { opacity:1 !important; }
  .home-v28 .v28-area__meter i,
  .home-v28 .v28-metric__track i { right:0 !important; transition:none !important; }
  .home-v28 .v28-case__media img { transition:none !important; }
  .home-v28 .v28-case:hover .v28-case__media img { transform:none !important; }
  .home-v28 [data-infographic] .ig-dot { transition:none !important; }
  .home-v28 .v28-panel { transition:none !important; }
}

/* The no-JS state is the completed state, never a hidden one. */
.no-js .home-v28 [data-infographic] .ig-draw { stroke-dashoffset:0; }
.no-js .home-v28 [data-infographic] .ig-fade { opacity:1; }
.no-js .home-v28 .v28-lever { opacity:1; }