/* =========================================================
   Case study page
   Builds on the tokens already defined in site.css
   ========================================================= */

:root{
  --dot-before:#9BB4A2;   /* validated: light end clears the cream surface */
  --dot-after:#2F4A3A;    /* same hue, dark end */
  --bar-before:#779984;   /* results chart, light step: 3.15:1 on white */
  --bar-after:#2F4A3A;    /* results chart, dark step: 9.72:1 on white */
  --ph:#B0791C;           /* placeholder amber */
  --ph-bg:#FDF6E6;
}

html,body{ -webkit-tap-highlight-color:transparent }

/* ---------- hero ---------- */
/* The mural sits behind the hero. Text lives on the left, so the scrim is
   near opaque there and opens up towards the right where the artwork can
   actually be seen. Contrast behind the headline and paragraph is measured,
   not eyeballed: see the note in the commit. */
.cs-hero{
  position:relative;isolation:isolate;
  background:#182C20 url("/case-study/veterans-mural.jpg") center right / cover no-repeat;
  color:var(--ink-inv);
  padding-top:clamp(128px,17vh,180px);
  padding-bottom:clamp(56px,8vw,84px);
}
.cs-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    /* keeps the brand green in the mix rather than a flat grey wash */
    linear-gradient(100deg,
      rgba(21,38,28,.97) 0%,
      rgba(21,38,28,.94) 30%,
      rgba(22,40,29,.80) 52%,
      rgba(24,44,32,.55) 76%,
      rgba(24,44,32,.42) 100%),
    /* settles the top under the navigation and the bottom into the facts bar */
    linear-gradient(to bottom,
      rgba(18,32,24,.82) 0%,
      rgba(18,32,24,.60) 16%,
      rgba(18,32,24,0) 42%,
      rgba(18,32,24,0) 62%,
      rgba(18,32,24,.78) 100%);
}
.cs-hero > .container{position:relative;z-index:1}
.cs-hero h1{
  font-size:clamp(2.3rem,5.4vw,3.9rem);font-weight:500;line-height:1.05;
  letter-spacing:-.02em;color:var(--ink-inv);margin-top:18px;max-width:16ch;
}
.cs-hero .cs-sub{
  margin-top:22px;font-size:clamp(1.02rem,1.6vw,1.16rem);
  color:var(--ink-inv-soft);max-width:64ch;line-height:1.65;
}

@media (max-width:760px){
  .cs-hero{background-position:72% center}
  .cs-hero::before{
    background:linear-gradient(to bottom,
      rgba(18,32,24,.90) 0%, rgba(20,36,26,.86) 55%, rgba(18,32,24,.93) 100%);
  }
}

/* ---------- fact tiles ---------- */
.cs-facts{background:var(--bg-alt);border-bottom:1px solid var(--line)}
/* The number of facts is set from the edit screen, so this must not assume
   four. auto-fit fills the row with as many as comfortably fit and never
   strands a single item on a line of its own. */
.cs-facts-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(16px,3vw,40px);padding-block:34px;
}
.cs-fact .n{
  font-family:"Fraunces",serif;font-weight:600;
  font-size:clamp(1.8rem,3.4vw,2.4rem);color:var(--sage-deep);line-height:1;
}
.cs-fact .l{margin-top:6px;font-size:.86rem;color:var(--ink-soft);line-height:1.35}

/* ---------- generic section head ---------- */
.cs-head{max-width:62ch}
.cs-head h2{font-size:clamp(1.9rem,3.6vw,2.7rem);margin-top:16px;color:var(--ink)}
.cs-head p{margin-top:16px;color:var(--ink-soft);font-size:1.04rem;line-height:1.7}

/* ---------- video ---------- */
.cs-video-frame{
  margin-top:36px;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-md);background:#1C3325;
}
.cs-video-frame video{display:block;width:100%;height:auto}
.cs-video-cap{
  margin-top:12px;font-size:.88rem;color:var(--ink-soft);font-style:italic;
}

/* ---------- the nine days ---------- */
.cs-days{display:grid;gap:0;margin-top:44px}
.cs-day{
  display:grid;grid-template-columns:170px 1fr;gap:clamp(18px,3vw,44px);
  padding:28px 0;border-top:1px solid var(--line);
}
.cs-day:last-child{border-bottom:1px solid var(--line)}
.cs-day .step{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;padding-top:5px;
}
.cs-day h3{font-size:1.24rem;color:var(--ink);margin-bottom:8px}
.cs-day p{color:var(--ink-soft);font-size:1rem;line-height:1.7;max-width:60ch}

/* ---------- approach cards ---------- */
.cs-approach{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:44px}
.cs-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px;box-shadow:var(--shadow-sm);
}
.cs-card h3{font-size:1.22rem;color:var(--ink);margin-bottom:10px}
.cs-card p{color:var(--ink-soft);font-size:.98rem;line-height:1.7}
.cs-card .k{
  display:inline-block;font-family:"Fraunces",serif;font-style:italic;
  color:var(--gold-deep);font-size:.95rem;margin-bottom:10px;
}

/* ---------- module diagrams ---------- */

/* ---------- results ---------- */
.cs-results{background:var(--sage-tint)}

/* ---------- results headline ----------
   Fills the space the old before/after numbers held. Two lines: a quiet
   lead-in, then the claim itself at display size. The words come from the
   edit screen in two separate boxes so nobody has to type markup. */
/* wide enough that the claim sits on one line on a desktop; it wraps to two
   on a phone, where text-wrap:balance splits it evenly */
.res-headline{text-align:center;margin:44px auto 0;max-width:780px}
.rh-rule{
  display:block;width:54px;height:2px;border-radius:2px;
  background:var(--gold);margin:0 auto 20px;
}
.rh-text{margin:0}
.rh-lead{
  display:block;font-family:"Inter",sans-serif;
  font-size:clamp(.74rem,1.5vw,.84rem);font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink-soft);
}
.rh-accent{
  display:block;margin-top:10px;font-family:"Fraunces",serif;
  font-size:clamp(2rem,5.2vw,3.15rem);font-weight:600;line-height:1.04;
  letter-spacing:-.022em;color:var(--sage-deep);text-wrap:balance;
}

.cs-kpis{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;margin:40px 0 12px;
}
.cs-kpi .c strong{color:var(--ink);font-weight:600}
.cs-kpi{
  background:#fff;border:1px solid #dce6d3;border-radius:var(--r-md);
  padding:24px 22px;
}
.cs-kpi .v{
  font-family:"Fraunces",serif;font-weight:600;font-size:clamp(1.9rem,3.6vw,2.5rem);
  color:var(--sage-deep);line-height:1;
}
.cs-kpi .c{margin-top:8px;font-size:.9rem;color:var(--ink-soft);line-height:1.4}
/* "53 Goals Total" and "109% Increase" carry a word after the figure. At the
   figure's size those words would fill the card, so they are set smaller and
   in the body face. The wording is untouched, only the type. */
.cs-kpi .v-word{
  font-family:"Inter",sans-serif;font-size:max(13px,.4em);font-weight:600;
  letter-spacing:.01em;color:var(--ink-soft);white-space:nowrap;
}

.cs-chart{
  background:#fff;border:1px solid #dce6d3;border-radius:var(--r-lg);
  padding:clamp(20px,3vw,32px);margin-top:26px;
}
.cs-legend{
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:6px;
}
.cs-legend span{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink-soft)}
.cs-legend i{width:12px;height:12px;border-radius:50%;display:inline-block}
.cs-legend .b{background:var(--dot-before)}
.cs-legend .a{background:var(--dot-after)}
.cs-scale{margin-left:auto;font-size:.82rem;color:var(--ink-soft)}

.cs-note{
  display:flex;gap:14px;align-items:flex-start;margin-top:30px;
  background:#fff;border:1px solid #dce6d3;border-left:4px solid var(--sage);
  border-radius:var(--r-md);padding:18px 22px;color:var(--ink-soft);
  font-size:.94rem;line-height:1.65;
}
.cs-note svg{width:20px;height:20px;color:var(--sage-deep);flex:none;margin-top:2px}

/* an unstyled <summary> does not look clickable, so this is dressed as a
   real button on every screen size */
.cs-table-wrap{margin-top:22px}
.cs-table-wrap > .cs-table{margin-top:16px}
.cs-table-toggle{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  padding:13px 22px;border-radius:var(--r-pill);
  background:#fff;border:1.5px solid var(--sage);
  color:var(--sage-deep);font-family:"Inter",sans-serif;
  font-size:.95rem;font-weight:600;box-shadow:var(--shadow-sm);
  transition:background-color .25s var(--ease),border-color .25s var(--ease),
             box-shadow .25s var(--ease),transform .25s var(--ease);
}
.cs-table-toggle::-webkit-details-marker{display:none}
.cs-table-toggle:hover{background:var(--sage-deep);border-color:var(--sage-deep);
  color:#fff;box-shadow:var(--shadow-md);transform:translateY(-2px)}
.cs-table-toggle:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.tt-chev{width:17px;height:17px;flex:none;transition:transform .25s var(--ease)}
.cs-table-wrap[open] .tt-chev{transform:rotate(180deg)}
.tt-shut{display:none}
.cs-table-wrap[open] .tt-open{display:none}
.cs-table-wrap[open] .tt-shut{display:inline}
/* the table itself is what scrolls sideways on a narrow screen */
.cs-table-scroll{
  overflow-x:auto;background:#fff;border:1px solid #dce6d3;
  border-radius:var(--r-lg);padding:clamp(14px,2vw,22px);
}
table.cs-table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:460px}
table.cs-table th,table.cs-table td{
  text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);
}
table.cs-table th{color:var(--ink);font-weight:600}
table.cs-table td{color:var(--ink-soft);font-variant-numeric:tabular-nums}

/* ---------- the full table, boxed one participant at a time ---------- */
/* border-collapse keeps the columns aligned, so the box is drawn from the
   edge cells of each group rather than from a border on the tbody itself */
table.cs-table-grouped{border-collapse:collapse}
.cs-table-grouped tbody.grp > tr > th,
.cs-table-grouped tbody.grp > tr > td{border-bottom:1px solid var(--line)}

/* the box drawing is desktop only; scoping it by width beats fighting it
   with specificity in the phone layout below */
@media (min-width:701px){
  .cs-table-grouped .grp-name{
    vertical-align:middle;text-align:left;white-space:nowrap;
    background:var(--sage-tint);padding:12px 14px;
    border-left:2px solid var(--sage);
    border-top:2px solid var(--sage);
    border-bottom:2px solid var(--sage);
  }
  .cs-table-grouped tbody.grp > tr:first-child > td{border-top:2px solid var(--sage)}
  .cs-table-grouped tbody.grp > tr:last-child > td{border-bottom:2px solid var(--sage)}
  .cs-table-grouped tbody.grp > tr > td:last-child{border-right:2px solid var(--sage)}
  .cs-table-grouped tbody.grp > tr > td{background:#fff}
  .cs-table-grouped tbody.grp > tr:hover > td{background:#F7FAF5}
  .cs-table-grouped tbody.grp:hover .grp-name{background:#E3EDDF}
}

.cs-table-grouped .grp-label{
  display:block;font-weight:600;color:var(--ink);font-size:.92rem;
}
.cs-table-grouped .grp-sub{
  display:block;font-size:.74rem;font-weight:500;color:var(--ink-soft);margin-top:3px;
}
.cs-table-grouped .grp-gain{
  display:block;font-size:.74rem;font-weight:700;color:var(--gold-deep);margin-top:3px;
}



.cs-table-grouped td.d{font-weight:700}
.cs-table-grouped tr.row-up td.d{color:var(--sage-deep)}
.cs-table-grouped tr.row-flat td.d{color:#8d8878;font-weight:600}
.cs-table-grouped tr.row-down td.d{color:#9C4A33}


/* the merged results section leads the page, so its intro gets room to read */
.cs-results .cs-head{max-width:70ch}
.cs-method{
  margin-top:26px;max-width:78ch;font-size:.94rem;line-height:1.7;color:var(--ink-soft);
}

/* funders heading and copy run the full width, in two readable columns */
.cs-funders .fund-head{max-width:none}
.fund-cols{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(20px,4vw,52px);margin-top:20px;
}
.fund-cols p{margin:0}
@media (max-width:760px){
  .fund-cols{grid-template-columns:1fr;gap:16px}
}

.pbm-svg{width:100%;height:auto;display:block}
#pbmAtp .atp{transition:opacity .45s var(--ease)}
/* the running commentary for the photobiomodulation diagram; real text so
   it stays legible instead of scaling down with the drawing */
.pbm-step{
  margin-top:10px;text-align:center;font-size:.86rem;font-weight:600;
  color:var(--gold-soft);letter-spacing:.01em;min-height:2.4em;
}

/* ================================================================
   Mobile pass
   Diagram labels live in viewBox units, so they shrink with the
   drawing. At 375px the SVGs render about 0.9 of their viewBox, which
   dropped several labels to 8px. These are bumped in user units so
   they land near 12px on a phone, and touch targets are raised to 44.
   ================================================================ */
@media (max-width:640px){
  .pbm-svg text{font-size:12px}
  .pbm-svg #pbmAtp text{font-size:11px}
  .wis-svg text{font-size:12px}
  /* four ragged pills of different widths read as clutter on a phone;
     a full width stack is tidier and easier to hit */
  .combo-tabs{display:grid;grid-template-columns:1fr;gap:8px}
  .combo-tab{min-height:44px;width:100%}
  .cs-table-toggle{width:100%;justify-content:center;padding:14px 18px}
  .cs-phone{padding:6px 0;min-height:44px}
}

/* ================================================================
   The full table on a phone
   Five columns will not fit 375px: at the old min-width you could see
   the goal and the before score, and Change, the column that carries
   the point, sat off screen behind a sideways scroll. Below 700px the
   table stops being a table and each participant becomes a card.
   ================================================================ */
@media (max-width:700px){
  .cs-table-scroll{overflow-x:visible;background:none;border:0;padding:0;border-radius:0}
  table.cs-table{min-width:0;display:block}
  .cs-table-grouped thead{display:none}
  .cs-table-grouped tbody.grp{
    display:block;background:#fff;border:1.5px solid var(--sage);
    border-radius:var(--r-md);margin-bottom:14px;overflow:hidden;
  }
  .cs-table-grouped tbody.grp > tr{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px;
    padding:12px 15px;border-top:1px solid var(--line);
  }
  .cs-table-grouped tbody.grp > tr:first-child{border-top:0}
  .cs-table-grouped tbody.grp > tr > td,
  .cs-table-grouped tbody.grp > tr > th{display:block;border:0;padding:0;background:none}

  /* the participant label becomes the card header, bleeding to the edges.
     Selector has to out-specify the reset above it, which sets
     background:none and padding:0 on every cell in the group. */
  .cs-table-grouped tbody.grp > tr > th.grp-name{
    /* a negative margin shifts a flex item but does not widen it, so the
       basis has to carry the bleed itself */
    flex:0 0 calc(100% + 30px);order:-1;margin:-12px -15px 10px;padding:11px 15px;
    background:var(--sage-deep);white-space:normal;border:0;
  }
  .cs-table-grouped .grp-label{color:var(--ink-inv);font-size:.95rem}
  .cs-table-grouped .grp-sub{color:var(--ink-inv-soft)}
  .cs-table-grouped .grp-gain{color:var(--gold-soft)}

  /* goal name on its own line, then the three figures beneath it */
  .cs-table-grouped .td-goal{
    flex-basis:100%;font-weight:600;color:var(--ink);font-size:.95rem;margin-bottom:5px;
  }
  .cs-table-grouped td[data-label]{font-variant-numeric:tabular-nums;font-size:.92rem}
  .cs-table-grouped td[data-label]::before{
    content:attr(data-label) " ";color:var(--ink-soft);font-size:.76rem;font-weight:500;
  }
  .cs-table-grouped td.d{font-weight:700;margin-left:auto}
}

/* ---------- funders ---------- */
.cs-funders{
  background:linear-gradient(165deg,#213A2C,#19301F);color:var(--ink-inv);
}
.cs-funders h2{color:var(--ink-inv)}
.cs-funders .cs-head p{color:var(--ink-inv-soft)}

/* ---------- cta ---------- */
.cs-cta{background:var(--bg-alt);text-align:center}
.cs-cta h2{font-size:clamp(1.9rem,3.6vw,2.6rem);color:var(--ink)}
.cs-cta p{margin:16px auto 0;max-width:52ch;color:var(--ink-soft);font-size:1.04rem;line-height:1.7}
.cs-cta-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}
.cs-phone{
  display:inline-flex;align-items:center;gap:10px;font-family:"Fraunces",serif;
  font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--sage-deep);margin-top:26px;
}
.cs-phone svg{width:22px;height:22px;color:var(--gold-deep)}

/* ---------- OBVIOUS placeholders ---------- */
/* RETAINED ON PURPOSE. Nothing on the page uses .placeholder, .ph-art or
   the .zd-photo / .zd-name / .zd-role / .zd-quote / .zd-grid rules right
   now: the daily check in placeholder, the module placeholder and Tim
   Hunnicutt's quote card were pulled out so the page could ship. They come
   straight back with the markup in _parked/case-study-removed.md, so these
   rules are not dead code, they are waiting. */
.placeholder{
  border:2px dashed var(--ph);background:var(--ph-bg);
  border-radius:var(--r-lg);padding:clamp(24px,4vw,40px);
  margin-top:36px;
}
.placeholder .tag{
  display:inline-flex;align-items:center;gap:8px;background:var(--ph);color:#fff;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 12px;border-radius:var(--r-pill);
}
.placeholder h3{margin-top:16px;font-size:1.25rem;color:#7A5310}
.placeholder p{margin-top:10px;color:#7A5310;font-size:.97rem;line-height:1.65;max-width:60ch}
.placeholder .need{
  margin-top:16px;padding-top:14px;border-top:1px dashed rgba(176,121,28,.45);
  font-size:.9rem;color:#7A5310;
}
.placeholder .need strong{color:#5E3F09}
.ph-art{
  margin-top:22px;border:1px dashed rgba(176,121,28,.5);border-radius:var(--r-md);
  background:repeating-linear-gradient(45deg,rgba(176,121,28,.07) 0 12px,transparent 12px 24px);
  min-height:150px;display:grid;place-items:center;color:#8A5E12;
  font-size:.9rem;text-align:center;padding:20px;
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .cs-meta{grid-template-columns:repeat(2,1fr);gap:22px}
  /* Two per row on narrow screens. Squeezing five into thin columns makes the
     labels wrap to three lines, so instead an odd last fact stretches across
     the full width. It then reads as a deliberate closing line rather than a
     leftover stranded on its own. */
  .cs-facts-grid{grid-template-columns:repeat(2,1fr);gap:24px}
  .cs-facts-grid > .cs-fact:last-child:nth-child(odd){grid-column:1 / -1;text-align:center}
  .cs-approach{grid-template-columns:1fr}
    .cs-kpis{grid-template-columns:repeat(2,1fr)}
  }
@media (max-width:640px){
  .cs-day{grid-template-columns:1fr;gap:8px}
  .cs-day .step{padding-top:0}
  .dumb-row{grid-template-columns:1fr 44px;gap:8px 12px}
  .dumb-track{grid-column:1 / -1;order:3}
  .dumb-label{font-size:.9rem}
  .cs-legend{gap:12px}
  .cs-scale{margin-left:0;flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){
  .cs-video-frame video{display:none}
  .cs-video-frame .video-fallback{display:block}
}

/* =========================================================
   Interactive: one day in the program
   ========================================================= */
.day-strip{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:34px}
.day-pip{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);
  font-size:.8rem;font-weight:600;font-variant-numeric:tabular-nums;
  opacity:0;transform:translateY(6px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),background-color .3s,color .3s,border-color .3s;
}
.day-strip.in .day-pip{opacity:1;transform:none;background:var(--sage-deep);color:#F3EFE4;border-color:var(--sage-deep)}
.day-strip-note{margin-left:10px;font-size:.9rem;color:var(--ink-soft)}

.day-timeline{margin-top:34px}
.day-bar{
  display:flex;width:100%;border-radius:var(--r-pill);overflow:hidden;
  border:1px solid var(--line);background:#fff;
}
.day-seg{
  border:0;cursor:pointer;padding:14px 12px;font-family:"Inter",sans-serif;
  font-size:.82rem;font-weight:600;color:var(--ink-soft);background:#fff;
  transition:background-color .28s var(--ease),color .28s var(--ease);
  border-right:1px solid var(--line);text-align:left;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.day-seg:last-child{border-right:0}
.day-seg:hover{background:var(--sage-tint)}
.day-seg[aria-selected="true"]{background:var(--sage-deep);color:#F3EFE4}
.day-seg .sc{display:block;font-weight:500;font-size:.74rem;opacity:.8;margin-top:2px}
.day-seg:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

.day-panel{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);
  align-items:center;margin-top:26px;
}
.day-panel[hidden]{display:none}
.day-copy .step{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;
}
.day-copy h3{font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--ink);margin:10px 0 12px}
.day-copy p{color:var(--ink-soft);font-size:1.02rem;line-height:1.75}
.day-figure{margin:0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.day-figure img{display:block;width:100%;height:auto;aspect-ratio:4/3;max-height:440px;object-fit:cover;object-position:center}

/* =========================================================
   Interactive: the four elements
   ========================================================= */
.combo-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.combo-tab{
  border:1px solid var(--line);background:#fff;border-radius:var(--r-pill);
  padding:.7em 1.2em;font-family:"Inter",sans-serif;font-size:.92rem;font-weight:600;
  color:var(--ink-soft);cursor:pointer;
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .2s var(--ease);
}
.combo-tab:hover{border-color:var(--sage);transform:translateY(-1px)}
.combo-tab[aria-selected="true"]{background:var(--sage-deep);border-color:var(--sage-deep);color:#F3EFE4}
.combo-tab:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

.combo-panel{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,4vw,52px);
  align-items:center;margin-top:28px;
}
.combo-panel[hidden]{display:none}
.combo-copy .lead{
  font-family:"Fraunces",serif;font-style:italic;color:var(--gold-deep);
  font-size:clamp(1.1rem,2vw,1.35rem);line-height:1.4;
}
.combo-copy h3{font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--ink);margin:6px 0 14px}
.combo-copy p{color:var(--ink-soft);font-size:1.02rem;line-height:1.75}
.combo-tagrow{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.combo-tagrow span{
  font-size:.78rem;background:var(--sage-soft);color:var(--sage-deep);
  padding:5px 11px;border-radius:var(--r-pill);font-weight:500;
}
.combo-stage{
  background:linear-gradient(165deg,#24412F,#1A2F23);border-radius:var(--r-lg);
  padding:clamp(18px,2.6vw,28px);box-shadow:var(--shadow-md);
}
.combo-stage svg{width:100%;height:auto;display:block}
.combo-cap{
  margin-top:12px;font-size:.85rem;color:var(--ink-inv-soft);text-align:center;
  font-family:"Inter",sans-serif;
}

/* the neurofeedback demo */
.nf-sound{
  display:flex;align-items:center;justify-content:center;gap:9px;margin-top:12px;
  font-size:.82rem;font-weight:600;color:var(--gold-soft);
  font-family:"Inter",sans-serif;transition:opacity .12s linear;
}
.nf-sound.muted{opacity:.35}
.nf-sound .bars{display:inline-flex;gap:2px;align-items:flex-end;height:14px}
.nf-sound .bars i{width:3px;background:var(--gold-soft);border-radius:1px;height:40%}
.nf-sound:not(.muted) .bars i{animation:nfbar .7s ease-in-out infinite}
.nf-sound .bars i:nth-child(2){animation-delay:.12s}
.nf-sound .bars i:nth-child(3){animation-delay:.24s}
.nf-sound .bars i:nth-child(4){animation-delay:.36s}
@keyframes nfbar{0%,100%{height:35%}50%{height:100%}}

/* module chips demo */
.mod-lib{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.mod-chip{
  font-size:.78rem;padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid var(--line-dark);color:var(--ink-inv-soft);
  transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease);
}
.mod-chip.on{background:var(--gold);border-color:var(--gold);color:#23180B;transform:translateY(-2px)}

/* =========================================================
   Interactive: the ripple
   ========================================================= */
.ripple-stage{position:relative;aspect-ratio:1;max-width:440px;margin:clamp(26px,4vw,38px) auto 0;width:100%}
.ripple-ring{
  position:absolute;inset:0;margin:auto;border-radius:50%;
  border:2px solid rgba(155,180,162,.42);display:grid;place-items:start center;
  padding-top:10px;cursor:pointer;background:transparent;
  transition:border-color .35s var(--ease),background-color .35s var(--ease);
}
.ripple-ring span{
  font-family:"Inter",sans-serif;font-size:.74rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-inv-soft);
  transition:color .35s var(--ease);
}
.ripple-ring:nth-of-type(1){width:100%;height:100%}
.ripple-ring:nth-of-type(2){width:68%;height:68%}
.ripple-ring:nth-of-type(3){width:36%;height:36%;place-items:center;padding-top:0}
.ripple-ring.on{border-color:var(--gold);background:rgba(194,146,58,.08)}
.ripple-ring.on span{color:var(--gold-soft)}
.ripple-ring:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.ripple-pulse{
  position:absolute;inset:0;margin:auto;width:36%;height:36%;border-radius:50%;
  border:1.5px solid var(--gold);opacity:0;pointer-events:none;
}
.ripple-stage.go .ripple-pulse{animation:rip 3.4s ease-out infinite}
.ripple-stage.go .ripple-pulse:nth-of-type(2){animation-delay:1.15s}
.ripple-stage.go .ripple-pulse:nth-of-type(3){animation-delay:2.3s}
@keyframes rip{
  0%{transform:scale(1);opacity:.75}
  100%{transform:scale(2.78);opacity:0}
}

/* ---------- for funders: the barrier, the proof, and the ripple ---------- */
.fund-pair{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(18px,3vw,30px);margin-top:32px;
}
.fund-block{
  background:rgba(243,239,228,.055);border:1px solid var(--line-dark);
  border-radius:var(--r-lg);padding:clamp(20px,2.6vw,28px);
}
.fund-block-proof{border-left:3px solid var(--gold)}
.fund-tag{
  display:block;margin-bottom:10px;font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);
}
.fund-block p{margin:0;color:var(--ink-inv-soft);font-size:1rem;line-height:1.7}

.ripple-block{margin-top:clamp(46px,7vw,74px);text-align:center}
.ripple-title{
  margin:0;font-family:"Fraunces",serif;font-weight:600;
  font-size:clamp(1.35rem,2.6vw,1.85rem);color:var(--ink-inv);
}
.ripple-lead{
  margin:12px auto 0;max-width:58ch;color:var(--ink-inv-soft);
  font-size:1.02rem;line-height:1.7;
}

.ripple-cards{
  list-style:none;padding:0;margin:clamp(24px,4vw,38px) 0 0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;
}
.ripple-cards li{display:flex}
.ripple-card{
  position:relative;width:100%;text-align:left;cursor:pointer;
  background:rgba(243,239,228,.05);border:1px solid var(--line-dark);
  border-top:3px solid transparent;border-radius:var(--r-md);
  padding:20px 20px 18px;color:var(--ink-inv-soft);
  font-family:"Inter",sans-serif;font-size:.94rem;line-height:1.6;
  transition:background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.rc-step{
  display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  margin-bottom:10px;font-size:.72rem;font-weight:700;
  background:rgba(194,146,58,.18);color:var(--gold-soft);
}
.ripple-card strong{
  display:block;margin-bottom:5px;color:var(--ink-inv);
  font-family:"Fraunces",serif;font-weight:600;font-size:1.05rem;
}
.ripple-card:hover{background:rgba(243,239,228,.09);transform:translateY(-2px)}
.ripple-card[aria-selected="true"]{
  border-top-color:var(--gold);background:rgba(194,146,58,.11);
}
.ripple-card[aria-selected="true"] .rc-step{background:var(--gold);color:#23180B}
.ripple-card:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}

@media (max-width:820px){
  .fund-pair{grid-template-columns:1fr}
  .ripple-cards{grid-template-columns:1fr}
  .ripple-card{border-top:1px solid var(--line-dark);border-left:3px solid transparent}
  .ripple-card[aria-selected="true"]{border-left-color:var(--gold)}
}

/* =========================================================
   Zero Day partnership
   ========================================================= */
.zd-card-wide{margin-top:34px;text-align:center;padding:26px 20px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.zd-card-wide .zd-logo{margin:0 auto;width:min(210px,60%)}
.zd-grid{display:grid;grid-template-columns:220px 1fr;gap:clamp(22px,4vw,48px);align-items:start;margin-top:38px}
.zd-card{text-align:center}
.zd-photo{
  width:100%;height:auto;max-width:200px;aspect-ratio:1;object-fit:cover;border-radius:50%;
  border:3px solid #fff;box-shadow:var(--shadow-md);display:block;margin-inline:auto;
}
.zd-name{margin-top:16px;font-family:"Fraunces",serif;font-size:1.1rem;color:var(--ink)}
.zd-role{margin-top:3px;font-size:.86rem;color:var(--ink-soft);text-wrap:balance;max-width:24ch;margin-inline:auto}
.zd-logo{margin-top:18px;width:150px;height:auto;display:block;margin-inline:auto;opacity:.9}
/* A <figure> carries a browser default margin of 40px on each side. On a phone
   that was eating 80px of a 335px screen, squeezing the quote to 22 characters
   a line. Invisible while the quote was short, obvious once Tim sent the
   longer one. */
.zd-quote{
  margin:0;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:var(--r-lg);padding:clamp(24px,3.4vw,36px);box-shadow:var(--shadow-sm);
}
.zd-quote .qm{font-family:"Fraunces",serif;font-size:3.4rem;line-height:.4;color:var(--gold);display:block;height:26px}
.zd-quote blockquote{
  margin:0;font-family:"Fraunces",serif;font-style:italic;
  font-size:clamp(1.15rem,2.1vw,1.5rem);line-height:1.5;color:#8A6414;
}
.zd-quote .pending{
  margin-top:18px;font-family:"Inter",sans-serif;font-style:normal;font-size:.84rem;
  color:#7A5310;background:var(--ph-bg);border:1px dashed var(--ph);
  border-radius:var(--r-pill);padding:7px 14px;display:inline-block;font-weight:600;
}

@media (max-width:980px){
  .day-panel,.combo-panel,.zd-grid{grid-template-columns:1fr}
  .ripple-stage{max-width:330px}
  .day-bar{flex-wrap:wrap;border-radius:var(--r-md)}
  .day-seg{flex:1 1 46%;white-space:normal}
  .zd-card{display:flex;gap:18px;align-items:center;text-align:left}
  .zd-photo{max-width:104px;margin:0}
  .zd-name,.zd-role{margin-top:0}
  .zd-logo{margin:0}
}
@media (prefers-reduced-motion:reduce){
  .day-strip .day-pip{opacity:1!important;transform:none!important}
  .nf-sound .bars i{animation:none!important}
  .ripple-stage.go .ripple-pulse{animation:none!important}
}

/* =========================================================
   Co-branding, overview, pre-program steps
   ========================================================= */
.cs-brandline{
  display:block;font-family:"Inter",sans-serif;font-size:.82rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-inv-soft);
  margin-bottom:18px;
}
.cs-highlight{
  display:flex;gap:14px;align-items:flex-start;margin-top:34px;
  background:var(--sage-tint);border:1px solid #dce6d3;border-left:4px solid var(--sage);
  border-radius:var(--r-md);padding:20px 24px;color:var(--ink);
  font-size:1rem;line-height:1.7;
}
.cs-highlight svg{width:22px;height:22px;color:var(--sage-deep);flex:none;margin-top:3px}

.day-total{
  margin-top:22px;font-size:.92rem;color:var(--ink-soft);font-style:italic;
}

.prep{margin-top:52px;padding-top:38px;border-top:1px solid var(--line)}
.prep-h{font-size:clamp(1.2rem,2.2vw,1.5rem);color:var(--ink);margin-bottom:22px}
.prep-list{list-style:none;padding:0;margin:0;display:grid;gap:20px;counter-reset:prep}
.prep-list li{display:flex;gap:16px;align-items:flex-start}
.prep-num{
  flex:none;width:34px;height:34px;border-radius:50%;background:var(--sage-deep);
  color:#F3EFE4;display:grid;place-items:center;font-family:"Inter",sans-serif;
  font-size:.9rem;font-weight:700;
}
.prep-list strong{display:block;color:var(--ink);font-size:1.04rem;margin-bottom:5px}
.prep-list p{color:var(--ink-soft);font-size:.98rem;line-height:1.7;max-width:62ch;margin:0}

/* co-branded footer */
.cs-footer-brands{
  display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  padding-bottom:26px;border-bottom:1px solid var(--line-dark);margin-bottom:22px;
}
.cs-footer-brands strong{display:block;color:var(--ink-inv);margin-bottom:5px}
.cs-footer-brands div{font-size:.94rem;color:var(--ink-inv-soft);line-height:1.6}
.cs-footer-brands a{color:var(--gold-soft)}
@media (max-width:760px){
  .cs-footer-brands{grid-template-columns:1fr;gap:18px}
}

/* =========================================================
   Overview + timelapse, side by side
   ========================================================= */
.ov-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4.5vw,60px);align-items:center}
.ov-copy p{margin-bottom:16px;color:var(--ink-soft);font-size:1.02rem;line-height:1.75}
.ov-copy p:last-of-type{margin-bottom:0}
.ov-copy h2{font-size:clamp(1.9rem,3.4vw,2.5rem);margin-top:16px;margin-bottom:18px;color:var(--ink)}
.ov-copy .cs-highlight{margin-top:26px}
.ov-video{margin:0}
.ov-video-rail{position:relative;height:26px;margin-bottom:10px;overflow:hidden}
.ov-road{
  position:absolute;left:0;right:0;bottom:3px;height:2px;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--line) 0 14px,transparent 14px 26px);
}
.ov-truck{position:absolute;bottom:2px;width:46px;height:23px;left:-56px}
.ov-video.go .ov-truck{animation:drive 9s linear infinite}
@keyframes drive{
  0%{transform:translateX(0)}
  100%{transform:translateX(calc(100% + 100vw))}
}
.ov-video-frame{
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow-md);background:#1C3325;
}
.ov-video-frame video,.ov-video-frame img{display:block;width:100%;height:auto}
.ov-video figcaption{margin-top:12px;font-size:.88rem;color:var(--ink-soft);font-style:italic}

/* =========================================================
   Pre-program flow cards
   ========================================================= */
.prep-flow{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.prep-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;position:relative;box-shadow:var(--shadow-sm);
}
.prep-card + .prep-card::before{
  content:"";position:absolute;left:-14px;top:50%;width:8px;height:8px;
  border-top:2px solid var(--line);border-right:2px solid var(--line);
  transform:translateY(-50%) rotate(45deg);
}
.prep-ico{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:var(--sage-soft);color:var(--sage-deep);margin-bottom:16px;
}
.prep-ico svg{width:23px;height:23px}
.prep-step{
  display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:700;margin-bottom:5px;
}
.prep-card strong{display:block;color:var(--ink);font-size:1.06rem;margin-bottom:7px;font-family:"Fraunces",serif;font-weight:600}
.prep-card p{color:var(--ink-soft);font-size:.95rem;line-height:1.65;margin:0}

/* =========================================================
   Three forces, woven into one
   ========================================================= */
.forces{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.force{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;text-align:center;box-shadow:var(--shadow-sm);
}
.force strong{display:block;font-family:"Fraunces",serif;font-weight:600;font-size:1.08rem;color:var(--ink);margin-bottom:8px}
.force p{color:var(--ink-soft);font-size:.95rem;line-height:1.65;margin:0}
.forces-converge{height:70px}
.forces-converge svg{width:100%;height:70px;display:block}
.forces-hub{text-align:center}
.forces-hub img{width:104px;height:104px;margin:0 auto;display:block}
.forces-hub span{
  display:block;margin-top:10px;font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep);font-weight:700;
}
.combo-intro{margin-top:56px;padding-top:34px;border-top:1px solid var(--line);max-width:62ch}
.combo-intro h3{font-size:clamp(1.25rem,2.3vw,1.6rem);color:var(--ink);margin-bottom:10px}
.combo-intro p{color:var(--ink-soft);font-size:1.02rem;line-height:1.7}

@media (max-width:980px){
  .ov-grid{grid-template-columns:1fr;gap:30px}
  .prep-flow,.forces{grid-template-columns:1fr}
  .prep-card + .prep-card::before{left:50%;top:-14px;transform:translateX(-50%) rotate(135deg)}
  .forces-converge{height:44px}
  .forces-converge svg{height:44px}
}
@media (prefers-reduced-motion:reduce){
  .ov-video.go .ov-truck{animation:none!important}
}

/* ================================================================
   Results: average goal score per participant
   A before and after pair per person. The two bars are one hue
   light to dark rather than two hues, because before and after is
   ordered rather than categorical, and lightness survives colour
   blindness where hue does not. Validated against the white card:
   #779984 3.15:1, #2F4A3A 9.72:1, separation dE 26.9.
   ================================================================ */

.pbar{
  margin:26px 0 0;background:#fff;border:1px solid #dce6d3;
  border-radius:var(--r-lg);padding:clamp(20px,3vw,30px);
}
.pbar-cap{font-size:.98rem;color:var(--ink-soft);line-height:1.6}
.pbar-cap strong{
  display:block;margin-bottom:5px;color:var(--ink);
  font-family:"Fraunces",serif;font-weight:600;font-size:1.12rem;
}

.pbar-key{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin:16px 0 6px;
  padding-bottom:16px;border-bottom:1px solid var(--line);
  font-size:.88rem;color:var(--ink-soft);
}
.pbar-key span{display:inline-flex;align-items:center;gap:9px}
.pbar-key i{width:16px;height:11px;border-radius:2px;display:inline-block;flex:none}
.pbar-key .k-b{background:var(--bar-before)}
.pbar-key .k-a{background:var(--bar-after)}

.pbar-rows{list-style:none;margin:0;padding:0}
.pbar-row{
  position:relative;display:grid;
  grid-template-columns:112px minmax(0,1fr) 74px;
  align-items:center;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--line);border-radius:6px;
  transition:background .18s var(--ease);
}
.pbar-row:last-of-type{border-bottom:0}
.pbar-row:hover,.pbar-row:focus-visible{background:#F7FAF5;outline:none}
.pbar-row:focus-visible{box-shadow:0 0 0 2px var(--sage)}
.pbar-name{font-size:.92rem;font-weight:600;color:var(--ink);line-height:1.3}

/* the plot area is the 0 to 10 scale; bars are anchored at zero */
.pbar-plot{position:relative;height:44px}
.pbar-grid{position:absolute;inset:0}
.pbar-grid i{
  position:absolute;top:0;bottom:0;width:1px;background:var(--line);opacity:.85;
}
.pbar-grid i:first-child{background:#c9d3c2;opacity:1}

.pbar-bar{
  position:absolute;left:0;height:17px;border-radius:0 4px 4px 0;
  transform-origin:left center;
}
.pbar-b{top:1px;background:var(--bar-before)}
.pbar-a{bottom:1px;background:var(--bar-after)}   /* 2px gap between the pair */

.pbar-val{
  --lbl:8px;   /* one offset drives both the outside and inside placement */
  position:absolute;margin-left:var(--lbl);font-size:.82rem;font-weight:600;
  color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.pbar-val-b{top:1px;line-height:17px}
.pbar-val-a{bottom:1px;line-height:17px;color:var(--ink)}
/* a bar that reaches the far end of the scale carries its own label,
   because an outside label would run past the plot on a phone */
.pbar-plot .pbar-val-in{transform:translateX(-100%);margin-left:calc(var(--lbl) * -1)}
.pbar-val-b.pbar-val-in{color:var(--ink)}      /* 4.9:1 on the light bar */
.pbar-val-a.pbar-val-in{color:var(--ink-inv)}  /* 8.6:1 on the dark bar */

.pbar-delta{
  text-align:right;font-family:"Fraunces",serif;font-weight:600;
  font-size:1.22rem;color:var(--gold-deep);line-height:1;
  font-variant-numeric:tabular-nums;
}
.pbar-delta small{display:block;margin-top:3px;font-family:"Inter",sans-serif;
  font-size:.66rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-soft)}

/* hover detail, also reachable by keyboard because the row is focusable */
.pbar-tip{
  position:absolute;left:112px;bottom:calc(100% - 14px);z-index:3;
  opacity:0;visibility:hidden;transform:translateY(4px);
  transition:opacity .18s ease,transform .18s var(--ease),visibility .18s;
  background:var(--bg-deep);color:var(--ink-inv);border-radius:var(--r-sm);
  padding:9px 13px;font-size:.82rem;line-height:1.45;max-width:38ch;
  box-shadow:var(--shadow-md);pointer-events:none;
}
/* :focus rather than :focus-visible, so a tap on a phone (where there is
   no hover) also reveals the detail; the focus ring above stays keyboard only */
.pbar-row:hover .pbar-tip,.pbar-row:focus .pbar-tip{
  opacity:1;visibility:visible;transform:none;
}

.pbar-axis{position:relative;height:16px;margin-top:4px}
.pbar-axis-scale{position:absolute;left:128px;right:90px;top:0;bottom:0}
.pbar-axis-scale i{
  position:absolute;top:0;transform:translateX(-50%);font-style:normal;
  font-size:.72rem;color:var(--ink-soft);opacity:.75;
}
.pbar-axis-title{
  margin-top:6px;text-align:center;font-size:.78rem;letter-spacing:.06em;
  color:var(--ink-soft);opacity:.85;
}

/* bars grow in on scroll; the class is only added by script, so with
   JavaScript off or motion reduced the chart is simply already drawn */
.pbar-anim .pbar-bar{transform:scaleX(0);transition:transform .8s var(--ease)}
.pbar-anim.go .pbar-bar{transform:scaleX(1)}
.pbar-anim .pbar-val{opacity:0;transition:opacity .4s ease}
.pbar-anim.go .pbar-val{opacity:1}
.pbar-anim .pbar-row:nth-of-type(1) .pbar-bar,.pbar-anim .pbar-row:nth-of-type(1) .pbar-val{transition-delay:.05s}
.pbar-anim .pbar-row:nth-of-type(2) .pbar-bar,.pbar-anim .pbar-row:nth-of-type(2) .pbar-val{transition-delay:.13s}
.pbar-anim .pbar-row:nth-of-type(3) .pbar-bar,.pbar-anim .pbar-row:nth-of-type(3) .pbar-val{transition-delay:.21s}
.pbar-anim .pbar-row:nth-of-type(4) .pbar-bar,.pbar-anim .pbar-row:nth-of-type(4) .pbar-val{transition-delay:.29s}
.pbar-anim .pbar-row:nth-of-type(5) .pbar-bar,.pbar-anim .pbar-row:nth-of-type(5) .pbar-val{transition-delay:.37s}
.pbar-anim .pbar-row:nth-of-type(6) .pbar-bar,.pbar-anim .pbar-row:nth-of-type(6) .pbar-val{transition-delay:.45s}

@media (max-width:640px){
  .pbar-row{grid-template-columns:1fr 66px;gap:4px 12px;padding:14px 0}
  .pbar-name{grid-column:1}
  .pbar-delta{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:1.1rem}
  .pbar-plot{grid-column:1;height:40px}
  .pbar-tip{left:0;max-width:100%}
  .pbar-axis-scale{left:0;right:78px}
  .pbar-axis-scale i:nth-child(even){display:none}
  .pbar-val{--lbl:6px;font-size:.76rem}
}

/* keep the pair distinguishable when the system overrides colour */
@media (forced-colors:active){
  .pbar-bar{forced-color-adjust:none;border:1px solid CanvasText}
  .pbar-b{background:Canvas}
  .pbar-a{background:CanvasText}
}

@media (prefers-reduced-motion:reduce){
  .pbar-anim .pbar-bar{transform:scaleX(1);transition:none}
  .pbar-anim .pbar-val{opacity:1;transition:none}
  .pbar-row{transition:none}
}