/* NEW REUSABLE TEMPLATE (candidate): one-line-large-number-problem-strip
   One strip, one reading line: large number -> adoption fact -> the problem.
   Colour: Deep Green band, Gold number and sweep. Motion (js/sections/one-line-large-number-problem-strip.js):
   on entry the number counts up and a gold rule sweeps left to right; the problem word cycles cost -> risk -> quality on a split-flap board.
   Screen readers always get "cost, risk, or quality". Reduced motion or no JS: static text, no board.
   Proposed title-measure exception: the h2 is a two-column line (number | statement); 75% measure applies to the statement column. */
.one-line-large-number-problem-strip,.one-line-large-number-problem-strip *{box-sizing:border-box}
.one-line-large-number-problem-strip{position:relative;width:100%;margin:0;padding-block:var(--section-padding-y);background:var(--deep);color:var(--paper);font-family:var(--body);overflow:hidden}
.one-line-large-number-problem-strip__shell{width:var(--shell);margin:0 auto}
.one-line-large-number-problem-strip__line{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 64px;margin:0;font-weight:400}
.one-line-large-number-problem-strip__figure{display:flex;align-items:flex-start;font-family:var(--display);font-size:clamp(140px,15vw,220px);line-height:.82;color:var(--gold);font-variant-numeric:tabular-nums}
.one-line-large-number-problem-strip__num{display:inline-block;min-width:2ch;text-align:right}
.one-line-large-number-problem-strip__pct{margin-left:.04em;font-size:.42em;line-height:1}
.one-line-large-number-problem-strip__statement{display:flex;flex-direction:column;gap:18px;max-width:var(--title-description-width);padding-left:64px;border-left:1px solid rgba(212,175,55,.45)}
.one-line-large-number-problem-strip__lead{font-family:var(--body);font-size:clamp(19px,1.6vw,23px);line-height:1.4;letter-spacing:.02em;color:rgba(255,255,255,.82);text-wrap:balance}
.one-line-large-number-problem-strip__gap{font-family:var(--display);font-size:clamp(34px,3.3vw,50px);line-height:1.15;color:var(--paper);text-wrap:balance}
.one-line-large-number-problem-strip__track{position:relative;height:1px;margin-top:64px;background:rgba(255,255,255,.14)}
.one-line-large-number-problem-strip__sweep{position:absolute;left:0;top:-1px;height:3px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left center}
.one-line-large-number-problem-strip__sweep::after{content:"";position:absolute;right:-5px;top:-4px;width:11px;height:11px;background:var(--gold)}
.one-line-large-number-problem-strip__source{display:inline-block;margin-top:20px;font-size:var(--fs-small);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);text-decoration:none;border-bottom:1px solid rgba(212,175,55,.6);padding-bottom:3px}
.one-line-large-number-problem-strip__source:hover{color:var(--gold)}

/* motion states (JS adds .is-armed, then .is-in) */
.one-line-large-number-problem-strip.is-armed .one-line-large-number-problem-strip__lead,.one-line-large-number-problem-strip.is-armed .one-line-large-number-problem-strip__gap{opacity:0;transform:translateX(-24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.one-line-large-number-problem-strip.is-armed .one-line-large-number-problem-strip__gap{transition-delay:.35s}
.one-line-large-number-problem-strip.is-armed .one-line-large-number-problem-strip__sweep{transition:transform 1.6s var(--ease)}
.one-line-large-number-problem-strip.is-in .one-line-large-number-problem-strip__lead,.one-line-large-number-problem-strip.is-in .one-line-large-number-problem-strip__gap{opacity:1;transform:none}
.one-line-large-number-problem-strip.is-in .one-line-large-number-problem-strip__sweep{transform:scaleX(1)}

.one-line-large-number-problem-strip__flap-text{color:var(--gold)}
.one-line-large-number-problem-strip__board{display:inline-flex;gap:.06em;vertical-align:-.12em}
.one-line-large-number-problem-strip__tile{position:relative;display:inline-grid;place-items:center;width:.74em;height:1.12em;background:#0A4526;box-shadow:inset 0 0 0 1px rgba(212,175,55,.18);font-family:var(--display);font-size:1em;line-height:1;text-transform:uppercase;color:var(--gold);perspective:300px}
.one-line-large-number-problem-strip__tile::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.55);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.one-line-large-number-problem-strip__tile.is-flip{animation:one-line-large-number-problem-strip-flip 70ms linear}
.one-line-large-number-problem-strip__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.one-line-large-number-problem-strip__figure .one-line-large-number-problem-strip__board{gap:.04em;vertical-align:0}
.one-line-large-number-problem-strip__figure .one-line-large-number-problem-strip__tile{width:.62em;height:.96em;box-shadow:inset 0 0 0 1px rgba(212,175,55,.22);text-transform:none}
.one-line-large-number-problem-strip__figure .one-line-large-number-problem-strip__tile::after{height:2px}

@keyframes one-line-large-number-problem-strip-flip{0%{transform:rotateX(0)}50%{transform:rotateX(-70deg)}100%{transform:rotateX(0)}}

@media (max-width:900px){
  .one-line-large-number-problem-strip__line{grid-template-columns:1fr;gap:32px}
  .one-line-large-number-problem-strip__statement{padding-left:0;padding-top:28px;border-left:0;border-top:1px solid rgba(212,175,55,.45);max-width:none}
  .one-line-large-number-problem-strip__track{margin-top:48px}
}
@media (prefers-reduced-motion:reduce){
  .one-line-large-number-problem-strip *{transition:none!important}
}