/* ============================================================
   DevCo · Section 02 — The Gap · STICKY SCROLL-SCENE
   ------------------------------------------------------------
   ROUND 8 — void fix + composition fill.

   §02 is a STICKY SCROLL-SCENE modelled on the proven §04
   "Our Role" scene. The section holds the viewport while five
   light scenes (head, statement 01/02/03, close) cross-fade in
   place, then hands off cleanly to §03.

   THE VOID-PROOF MECHANIC  (same as §04 — proven, no pin)
     - .problem__scene-track : a tall outer TRACK that gives the
       scene its scroll length.
     - .problem__scene-stage : position:sticky; top:0;
       height:100svh. Sticky AND exactly one viewport tall so it
       ALWAYS fills the viewport. NO GSAP ScrollTrigger pin.
     - .problem__scene : the light scenes, absolutely stacked in
       the same deck (inset:0). Exactly one is active; scenes
       cross-fade so the viewport is never empty.

   ROUND 8 — WHAT CHANGED AND WHY
     1. THE VOID. Earlier the scene content was vertically
        CENTRED inside a stage with very large asymmetric
        padding (135px top / 108px bottom). When the CSS sticky
        stage released, the small centred block left the top of
        the viewport while a tall band of empty bone scrolled
        past below it — and §03 cut in late. The exit hold could
        not close it because it was computed against a padding
        box, not the stage itself.

        FIX (copied from §04): each scene's content block now
        fills the stage as a deliberate, near-full-height
        composition (it is no longer a small centred fragment),
        AND the JS exit hold pushes the ACTIVE scene's content
        block down so its BOTTOM edge tracks the STAGE bottom
        edge through the sticky release. The stage bottom is the
        seam with §03, so §03 butts directly against the held
        composition — zero void at any scroll position.

        To let the content travel that full distance the scene
        is now a flex column anchored to STRETCH, not centred,
        and the inner owns its own internal vertical rhythm.

     2. EMPTINESS. Each scene was a small run of text floating
        in a large bone field. The scenes are now deliberate
        editorial compositions that occupy the stage with
        confidence: a top meta-row, a large index numeral used
        as a real compositional anchor, the focal type set
        larger, a baseline register rule, and generous but
        purposeful internal spacing. The ghost word and grid
        sit behind as before. No scene reads as under-designed.

   PERSISTENT FRAME
     The eyebrow (02 / 09 · The Gap) and a five-step progress
     register stay anchored in the stage while scenes swap. A
     faint coordinate grid + ghost word drift with scroll.

   §02 is a LIGHT section: bone ground, ink text, rust accent.
   Hard edges, no border-radius, hairlines, restrained editorial.

   Degrades:
     - no JS / no GSAP        : original two-column spread,
       rendered statically (PART A).
     - prefers-reduced-motion : track collapses, scenes render
       as a normal fully-visible readable stack, no drift.
     - <= 760px               : a clean static stack.

   AU English. No em dashes in comments.
   ============================================================ */

/* ------------------------------------------------------------
   0 · SECTION SHELL  (shared by static fallback AND scene)
   ------------------------------------------------------------ */
.devco-site #problem.problem{position:relative;}

/* faint hairline across the very top edge of the section — a
   quiet structural rule, recreated as a ::before so no
   decorative widget is needed and content stays editable. */
.devco-site #problem.problem::before{
  content:"";position:absolute;
  top:0;left:var(--gutter);right:var(--gutter);height:var(--hair);
  pointer-events:none;z-index:2;
  background:linear-gradient(90deg,
    transparent 0%,var(--ink-hair) 16%,
    var(--ink-hair) 84%,transparent 100%);
}

/* ============================================================
   PART A — THE STATIC FALLBACK SPREAD
   ------------------------------------------------------------
   The resting layout: the two-column "argument and evidence"
   spread. Renders verbatim when problem.js does NOT take
   ownership (no JS, no GSAP, reduced motion, phone). When the
   scene IS built, problem.js adds `.problem-scene` to <body>
   and moves the widgets into the scene shell, at which point
   PART B governs. PART A is kept intact as the fallback.
   ============================================================ */

/* the two-column editorial spread */
.devco-site #problem .dc-shell.e-con{
  display:grid;
  grid-template-columns:
    minmax(0,40fr) minmax(0,56fr);
  grid-template-rows:auto 1fr;
  column-gap:clamp(40px,5.4vw,108px);
  row-gap:clamp(40px,5vw,72px);
  align-items:start;
}

/* a single hairline runs down the gutter between the columns */
.devco-site #problem .dc-shell.e-con::before{
  content:"";
  grid-column:1;grid-row:1 / -1;
  justify-self:end;align-self:stretch;
  width:var(--hair);
  margin-right:calc(-1 * clamp(20px,2.7vw,54px));
  background:linear-gradient(180deg,
    var(--ink-hair) 0%,var(--ink-hair) 88%,transparent 100%);
  pointer-events:none;
}

/* LEFT COLUMN — the argument */
.devco-site #problem .problem__head.e-con{
  grid-column:1;grid-row:1;
  display:flex;flex-direction:column;
  gap:clamp(22px,2.6vw,34px);
  min-width:0;
}
.devco-site #problem .problem__head-aside.e-con{
  display:flex;flex-direction:column;
  gap:clamp(14px,1.6vw,20px);
  min-width:0;
}
.devco-site #problem .dc-eyebrow.e-con{
  display:flex;align-items:center;gap:14px;
}
.devco-site #problem .problem__note{
  max-width:40ch;
  padding-top:clamp(12px,1.4vw,18px);
  border-top:var(--hair) solid var(--ink-hair);
  line-height:1.66;
  text-transform:none;
  letter-spacing:.01em;
}
.devco-site #problem .problem__note p{margin:0;}
.devco-site #problem .problem__head-main.e-con{
  display:flex;flex-direction:column;
  gap:clamp(18px,2vw,26px);
  min-width:0;
}
.devco-site #problem .problem__headline{margin:0;}
.devco-site #problem .problem__headline,
.devco-site #problem .problem__headline .elementor-heading-title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.1rem,1.4rem + 2.2vw,3.5rem);
  line-height:1.1;
  letter-spacing:-.014em;
  color:var(--ink);
  text-align:left;
  margin:0;
}
.devco-site #problem .problem__headline em{
  font-style:italic;color:var(--accent);
}
.devco-site #problem .problem__lead{margin:0;max-width:46ch;}
.devco-site #problem .problem__lead p{
  font-size:var(--fs-lead);line-height:1.62;
  color:var(--ink-soft);margin:0;
}

/* the close — foot of the argument column */
.devco-site #problem .problem__close.e-con{
  grid-column:1;grid-row:2;
  align-self:end;
  display:flex;flex-direction:column;
  padding-top:clamp(20px,2.4vw,30px);
}
.devco-site #problem .problem__close.e-con::before{
  content:"";
  width:clamp(40px,4vw,64px);height:2px;
  background:var(--accent);
  margin-bottom:clamp(16px,1.8vw,24px);
  flex:none;
}
.devco-site #problem .problem__close-text{margin:0;}
.devco-site #problem .problem__close-text p{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.45rem,1.05rem + 1.4vw,2.35rem);
  line-height:1.24;letter-spacing:-.012em;
  color:var(--ink);margin:0;
  max-width:22ch;
}
.devco-site #problem .problem__close-text em{
  font-style:italic;color:var(--accent);
}

/* RIGHT COLUMN — the evidence list */
.devco-site #problem .problem__list.e-con{
  grid-column:2;grid-row:1 / -1;
  display:flex;flex-direction:column;
  min-width:0;
  border-top:var(--hair) solid var(--ink-hair);
}
.devco-site #problem .problem__row.e-con{
  display:grid;
  grid-template-columns:clamp(54px,5vw,78px) minmax(0,1fr);
  column-gap:clamp(20px,2.4vw,40px);
  row-gap:clamp(10px,1.2vw,16px);
  align-items:start;
  padding-block:clamp(26px,3.4vw,44px);
  border-bottom:var(--hair) solid var(--ink-hair);
}
.devco-site #problem .problem__row.e-con:first-child{
  padding-top:clamp(22px,3vw,38px);
}
.devco-site #problem .problem__row-idx{
  grid-row:1 / 3;
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.2rem,1.6rem + 1.8vw,3.4rem);
  line-height:.86;
  letter-spacing:-.02em;
  color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
  padding-top:.04em;
}
.devco-site #problem .problem__row-idx span{display:inline;}
.devco-site #problem .problem__statement{
  grid-column:2;grid-row:1;margin:0;
}
.devco-site #problem .problem__statement p{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.25rem,1rem + .9vw,1.85rem);
  line-height:1.26;letter-spacing:-.01em;
  color:var(--ink);margin:0;
  max-width:34ch;
}
.devco-site #problem .problem__statement em{
  font-style:italic;color:var(--accent);
}
.devco-site #problem .problem__row-fig{
  grid-column:2;grid-row:2;
  font-family:var(--font-mono);
  font-size:var(--fs-mono-sm);letter-spacing:var(--tracking-mono);
  line-height:1.5;color:var(--ink-faint);
  text-align:left;
  font-variant-numeric:tabular-nums;
}
.devco-site #problem .problem__row-fig > span{display:inline;}
.devco-site #problem .problem__row-fig span.problem__row-fig-sub{
  display:inline;margin-left:.5em;
  color:var(--ink-faint);
  letter-spacing:var(--tracking-mono);
}
.devco-site #problem .problem__row-fig span.problem__row-fig-sub::before{
  content:"/ ";color:var(--ink-hair);
}

/* static-fallback responsive — the two columns stack */
@media (max-width:1180px){
  .devco-site:not(.problem-scene) #problem .dc-shell.e-con{
    grid-template-columns:minmax(0,42fr) minmax(0,54fr);
    column-gap:clamp(32px,4vw,64px);
  }
}
@media (max-width:1024px){
  .devco-site:not(.problem-scene) #problem .dc-shell.e-con{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    row-gap:clamp(36px,5vw,56px);
  }
  .devco-site:not(.problem-scene) #problem .dc-shell.e-con::before{display:none;}
  .devco-site:not(.problem-scene) #problem .problem__head.e-con{grid-column:1;grid-row:1;}
  .devco-site:not(.problem-scene) #problem .problem__list.e-con{grid-column:1;grid-row:2;}
  .devco-site:not(.problem-scene) #problem .problem__close.e-con{
    grid-column:1;grid-row:3;align-self:auto;
  }
  .devco-site:not(.problem-scene) #problem .problem__lead{max-width:58ch;}
  .devco-site:not(.problem-scene) #problem .problem__note{max-width:54ch;}
  .devco-site:not(.problem-scene) #problem .problem__statement p{max-width:42ch;}
  .devco-site:not(.problem-scene) #problem .problem__close-text p{max-width:34ch;}
}

/* ============================================================
   PART B — THE STICKY SCROLL-SCENE
   ------------------------------------------------------------
   Active only under body.problem-scene — i.e. problem.js has
   taken ownership and built the scene shell. Every selector is
   gated on `.problem-scene` so PART A is untouched as fallback.
   ============================================================ */

/* the original shell stops being a grid once the scene is built;
   its widgets have been MOVED out into the scene track, so it is
   just a thin host. Keep it as a clean block. */
.devco-site.problem-scene #problem .dc-shell.e-con{
  display:block;
  padding:0;
}
.devco-site.problem-scene #problem .dc-shell.e-con::before{display:none;}

/* THE STRUCTURAL VOID FIX.
   When the scene is built the section #problem must carry NO
   padding of its own. Elementor's default section padding (about
   148px top and bottom) would otherwise sit OUTSIDE the sticky
   track: the bottom padding becomes a band of empty bone between
   the track bottom and §03 — a void the exit hold cannot close,
   because the exit hold tracks the stage (= track) bottom, not
   the section bottom. With the section padding collapsed the
   track butts directly against §03 and the stage bottom edge IS
   the §03 seam. problem.js also writes this inline to beat
   Elementor's per-element padding specificity; this rule is the
   durable, declarative twin. */
.devco-site.problem-scene #problem.problem{
  padding-top:0;
  padding-bottom:0;
}

/* ── THE OUTER TRACK ──────────────────────────────────────────
   Tall, gives the scene its scroll length. Height is content-
   matched: scrollable distance = height - 100svh. The JS driver
   maps that distance into five bands, each an ARRIVE window
   followed by a still HOLD window (the weighted scroll).

   RESTRAINED on purpose. The track is 264svh => ~164svh of
   actual scroll travel for the whole five-scene sequence. This
   is only a modest, minute bump on the prior 230svh: just
   enough extra travel that each scene's hold window has real
   weight and the user cannot flick straight to the close, while
   §02 stays light and pleasant and never a burden. The close
   keeps the widest band so it holds, fully composed, right
   through the sticky release. */
.devco-site.problem-scene #problem .problem__scene-track{
  position:relative;
  height:264svh;
  background:var(--bone, #EDE6D6);
}

/* ── THE STAGE ── the void-proof hold. Sticky + one viewport. ─*/
.devco-site.problem-scene #problem .problem__scene-stage{
  position:-webkit-sticky;
  position:sticky;
  top:0;
  height:100svh;
  width:100%;
  overflow:hidden;
  background:var(--bone, #EDE6D6);
}

/* ── THE DECK ── the box every scene is absolutely stacked into */
.devco-site.problem-scene #problem .problem__scene-deck{
  position:absolute;
  inset:0;
}

/* ── BACKGROUND MOTION LAYER ──────────────────────────────────
   Sits behind every scene. A faint coordinate grid and a large
   ghost word, drifted with scroll progress by the JS driver so
   the held scene never feels stuck. Ink-toned for the light
   ground. Pointer-events off. */
.devco-site.problem-scene #problem .problem__scene-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}
.devco-site.problem-scene #problem .problem__scene-grid{
  position:absolute;
  left:-10%;
  top:-30%;
  width:120%;
  height:160%;
  background-image:
    linear-gradient(to right,  rgba(20,18,14,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(20,18,14,.05) 1px, transparent 1px);
  background-size:104px 104px;
  will-change:transform;
}
.devco-site.problem-scene #problem .problem__scene-ghost{
  position:absolute;
  right:-3%;
  bottom:-4%;
  margin:0;
  font-family:var(--font-display, Georgia, serif);
  font-weight:400;
  font-style:italic;
  font-size:clamp(180px,26vw,420px);
  line-height:.8;
  letter-spacing:-.03em;
  color:rgba(20,18,14,.04);
  white-space:nowrap;
  will-change:transform;
  user-select:none;
}

/* ── THE PERSISTENT FRAME ─────────────────────────────────────
   Anchored elements that stay put while scenes swap: the
   eyebrow at top-left and the progress register at the right. */

/* the anchored eyebrow — the section's identity, always shown */
.devco-site.problem-scene #problem .problem__scene-eyebrow{
  position:absolute;
  left:var(--gutter);
  top:clamp(34px,6vh,68px);
  z-index:5;
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-mono);
  font-size:var(--fs-mono);
  letter-spacing:var(--tracking-mono);
  text-transform:uppercase;
  color:var(--ink-soft);
}
.devco-site.problem-scene #problem .problem__scene-eyebrow .problem__scene-eyebrow-rule{
  display:block;width:34px;height:var(--hair);
  background:var(--ink-hair);
}
.devco-site.problem-scene #problem .problem__scene-eyebrow .problem__scene-eyebrow-label{
  color:var(--ink-soft);
}

/* the progress register — five ticks + a fill rail, at the
   right edge of the stage, like §04's indicator. */
.devco-site.problem-scene #problem .problem__scene-progress{
  position:absolute;
  top:50%;
  right:clamp(18px,3vw,44px);
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:16px;
  z-index:5;
}
.devco-site.problem-scene #problem .problem__scene-tick{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:var(--fs-mono-sm);
  letter-spacing:var(--tracking-mono);
  color:var(--ink-faint);
  transition:color .5s var(--ease, ease);
}
.devco-site.problem-scene #problem .problem__scene-tick-rail{
  position:relative;
  display:block;
  width:34px;
  height:2px;
  background:var(--ink-hair);
  overflow:hidden;
}
.devco-site.problem-scene #problem .problem__scene-tick-fill{
  position:absolute;
  inset:0;
  transform-origin:left center;
  transform:scaleX(0);
  background:var(--accent);
}
.devco-site.problem-scene #problem .problem__scene-tick.is-active{
  color:var(--ink);
}
.devco-site.problem-scene #problem .problem__scene-tick.is-done .problem__scene-tick-fill{
  transform:scaleX(1);
}

/* a whisper "scroll" cue, only on the first scene */
.devco-site.problem-scene #problem .problem__scene-cue{
  position:absolute;
  left:var(--gutter);
  bottom:clamp(30px,5vh,56px);
  z-index:5;
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);
  font-size:var(--fs-mono-sm);
  letter-spacing:var(--tracking-mono);
  text-transform:uppercase;
  color:var(--ink-faint);
  transition:opacity .6s var(--ease, ease);
}
.devco-site.problem-scene #problem .problem__scene-cue .problem__scene-cue-line{
  display:block;width:30px;height:var(--hair);
  background:var(--ink-hair);
}
.devco-site.problem-scene #problem .problem__scene-cue.is-gone{
  opacity:0;
}

/* ── A SCENE ──────────────────────────────────────────────────
   All scenes occupy the SAME box. A scene CENTRES one cohesive
   content block (like the proven §04 panels, which are also
   centred — they fill their stage because the block itself is
   genuinely substantial, not because it is stretched edge to
   edge). The §02 content block is built as a tight, deliberate
   editorial composition with real mass: a large architectural
   index numeral, large focal type, and the meta / caption rows
   held close to it as satellites — never flung to the stage
   edges, which only opens dead bands.

   THE EXIT-HOLD CONTRACT (why the void fix is reliable).
   The JS exit hold pushes the centred block DOWN by exactly
   (100svh - blockHeight) / 2 so its bottom edge lands on the
   stage bottom = the §03 seam. That geometry is only correct
   while the block is genuinely CENTRED inside a full 100svh
   stage, which means the block must always FIT inside 100svh.
   Every scene's type below is sized with vh-aware caps so the
   composed block can never exceed the stage height; the short-
   viewport media query tightens it further. Result: the block
   is always centred, the hold always lands the bottom edge on
   the seam, and §03 always butts cleanly — zero void. */
.devco-site.problem-scene #problem .problem__scene{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:clamp(44px,6vh,72px) clamp(24px,7vw,120px);
  opacity:0;
  visibility:hidden;
}
.devco-site.problem-scene #problem .problem__scene.is-active{
  opacity:1;
  visibility:visible;
}

/* the bounded inner shell of a scene — a tight, cohesive
   editorial composition that is centred in the stage. It is a
   flex column; its members sit close together so the block
   reads as one confident mass rather than scattered fragments.
   A faint hairline frame plus corner ticks give the block a
   deliberate, contained presence so it fills the stage with
   confidence rather than floating as loose text in a bone
   field — matching the way the §04 panels read as composed. */
.devco-site.problem-scene #problem .problem__scene-inner{
  position:relative;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
}

/* the hairline frame's vertical inset, exposed as a custom
   property so the JS exit hold can account for it: the frame
   extends this far ABOVE and BELOW the content block, and the
   exit hold must land the FRAME bottom (not the bare content
   bottom) on the §03 seam. Kept in one place so CSS and JS
   never disagree. */
.devco-site.problem-scene #problem .problem__scene-inner{
  --scene-frame-y:clamp(30px,3.4vh,52px);
}

/* a quiet hairline framing the composition — a contained,
   construction-drawing presence so the scene reads as a
   deliberate panel, not loose text on bone. Drawn on the inner
   so it tracks the block during the exit hold. */
.devco-site.problem-scene #problem .problem__scene-inner::before{
  content:"";
  position:absolute;
  /* sits a comfortable margin outside the content block */
  top:calc(-1 * var(--scene-frame-y));
  bottom:calc(-1 * var(--scene-frame-y));
  left:clamp(-26px,-3vw,-56px);
  right:clamp(-26px,-3vw,-56px);
  border:var(--hair) solid var(--ink-hair);
  pointer-events:none;
}
/* a rust corner tick on the framed block — the same quiet
   construction motif the §04 media frame carries. */
.devco-site.problem-scene #problem .problem__scene-inner::after{
  content:"";
  position:absolute;
  top:calc(-1 * var(--scene-frame-y));
  left:clamp(-26px,-3vw,-56px);
  width:clamp(22px,2.6vw,38px);
  height:clamp(22px,2.6vw,38px);
  border-top:2px solid var(--accent);
  border-left:2px solid var(--accent);
  pointer-events:none;
}

/* per-line mask wrapper — each animated headline line clips its
   own slide. */
.devco-site.problem-scene #problem .problem__scene-line{
  display:block;
  overflow:hidden;
}
.devco-site.problem-scene #problem .problem__scene-line > span{
  display:block;
  will-change:transform;
}

/* ── SHARED — the mono kicker meta row ────────────────────────
   A short mono line behind a rust rule, set by the JS so it is
   never an empty Elementor widget. It sits CLOSE above the
   focal block as a satellite, not flung to the stage top. */
.devco-site.problem-scene #problem .problem__scene-kicker{
  font-family:var(--font-mono);
  font-size:var(--fs-mono-sm);
  letter-spacing:var(--tracking-mono);
  text-transform:uppercase;
  color:var(--ink-faint);
  display:flex;align-items:center;gap:14px;
  margin:0 0 clamp(22px,3vh,38px);
}
.devco-site.problem-scene #problem .problem__scene-kicker::before{
  content:"";
  display:block;width:clamp(36px,4.4vw,60px);height:2px;
  background:var(--accent);
  flex:none;
}

/* ── SCENE A — THE HEAD ───────────────────────────────────────
   One cohesive opening block: a kicker meta line, the large
   headline as the focal mass, the lead beneath it, and the
   note as a close hairline-topped caption. Everything sits
   tight together so the block reads as one confident
   composition, centred in the stage. */
.devco-site.problem-scene #problem .problem__scene--head .problem__scene-inner{
  max-width:1120px;
}
.devco-site.problem-scene #problem .problem__scene--head .problem__headline,
.devco-site.problem-scene #problem .problem__scene--head .problem__headline .elementor-heading-title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.7rem,1.5rem + 4.1vw,5.3rem);
  line-height:1.04;
  letter-spacing:-.02em;
  color:var(--ink);
  text-align:left;
  margin:0 0 clamp(22px,3vh,40px);
  max-width:18ch;
}
.devco-site.problem-scene #problem .problem__scene--head .problem__headline em{
  font-style:italic;color:var(--accent);
}
.devco-site.problem-scene #problem .problem__scene--head .problem__lead{
  margin:0;max-width:50ch;
}
.devco-site.problem-scene #problem .problem__scene--head .problem__lead p{
  font-size:clamp(1.12rem,1rem + .6vw,1.45rem);
  line-height:1.56;
  color:var(--ink-soft);margin:0;
}
/* the note is a close hairline-topped caption directly under
   the lead — a satellite of the block, not a foot anchor. */
.devco-site.problem-scene #problem .problem__scene--head .problem__note{
  margin:clamp(24px,3.4vh,42px) 0 0;
  padding-top:clamp(16px,2vh,24px);
  border-top:var(--hair) solid var(--ink-hair);
  max-width:54ch;
  line-height:1.64;
  text-transform:none;
  letter-spacing:.01em;
  color:var(--ink-faint);
}
.devco-site.problem-scene #problem .problem__scene--head .problem__note p{margin:0;}

/* ── SCENES B/C/D — THE STATEMENTS ────────────────────────────
   Each statement is ONE cohesive, confident block, centred in
   the stage. A large architectural index numeral PLATE anchors
   the left as a real compositional mass — the numeral plus a
   quiet label beneath it, set against a hairline divider so it
   reads as a deliberate plate, not a stray glyph. To its right,
   a tight stack: the kicker meta line, the large statement, and
   the Fig. caption, all held close together so the whole reads
   as a single deliberate composition that fills the stage. No
   element is flung to a stage edge, so there are no dead bands. */
.devco-site.problem-scene #problem .problem__scene--stmt .problem__scene-inner{
  max-width:1180px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(40px,5vw,92px);
  align-items:center;
}
/* the left compositional plate — the big numeral and its label,
   separated from the core by a hairline rule down the gutter. */
.devco-site.problem-scene #problem .problem__scene--stmt .problem__scene-plate{
  grid-column:1;
  align-self:center;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding-right:clamp(40px,5vw,92px);
  margin-right:calc(-1 * clamp(40px,5vw,92px));
  border-right:var(--hair) solid var(--ink-hair);
}
/* the big architectural index numeral — a true compositional
   mass, optically aligned with the statement. */
.devco-site.problem-scene #problem .problem__scene--stmt .problem__row-idx{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(7.5rem,4.4rem + 12.5vw,16.5rem);
  line-height:.78;
  letter-spacing:-.05em;
  color:var(--accent);
  font-variant-numeric:tabular-nums;
  opacity:.9;
}
.devco-site.problem-scene #problem .problem__scene--stmt .problem__row-idx span{display:inline;}
/* the quiet label beneath the numeral — gives the plate meaning
   and a baseline so the numeral never floats. */
.devco-site.problem-scene #problem .problem__scene--stmt .problem__scene-plate-label{
  margin-top:clamp(14px,1.8vh,22px);
  padding-top:clamp(10px,1.3vh,16px);
  border-top:2px solid var(--accent);
  font-family:var(--font-mono);
  font-size:var(--fs-mono-sm);
  letter-spacing:var(--tracking-mono);
  text-transform:uppercase;
  color:var(--ink-faint);
  align-self:stretch;
}
/* the right column — a tight stack of kicker, statement, fig */
.devco-site.problem-scene #problem .problem__scene--stmt .problem__scene-core{
  grid-column:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
/* kicker sits close above the statement inside the core */
.devco-site.problem-scene #problem .problem__scene--stmt .problem__scene-core
  .problem__scene-kicker{
  margin:0 0 clamp(20px,2.6vh,32px);
}
/* the statement — the focal text, set large */
.devco-site.problem-scene #problem .problem__scene--stmt .problem__statement{
  margin:0;
}
.devco-site.problem-scene #problem .problem__scene--stmt .problem__statement p{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.1rem,1.3rem + 2.7vw,3.9rem);
  line-height:1.14;letter-spacing:-.02em;
  color:var(--ink);margin:0;
  max-width:21ch;
}
.devco-site.problem-scene #problem .problem__scene--stmt .problem__statement em{
  font-style:italic;color:var(--accent);
}
/* the Fig. caption — a close hairline-topped register directly
   under the statement, a satellite of the block. */
.devco-site.problem-scene #problem .problem__scene--stmt .problem__row-fig{
  margin:clamp(26px,3.6vh,46px) 0 0;
  padding-top:clamp(16px,2.2vh,26px);
  position:relative;
  font-family:var(--font-mono);
  font-size:var(--fs-mono);letter-spacing:var(--tracking-mono);
  line-height:1.5;color:var(--ink-faint);
  text-align:left;
  font-variant-numeric:tabular-nums;
}
.devco-site.problem-scene #problem .problem__scene--stmt .problem__row-fig::before{
  content:"";
  position:absolute;top:0;left:0;
  width:clamp(40px,4vw,60px);height:2px;
  background:var(--accent);
}
.devco-site.problem-scene #problem .problem__scene--stmt .problem__row-fig > span{display:inline;}
.devco-site.problem-scene #problem .problem__scene--stmt .problem__row-fig span.problem__row-fig-sub{
  display:inline;margin-left:.5em;
  color:var(--ink-faint);
  letter-spacing:var(--tracking-mono);
}
.devco-site.problem-scene #problem .problem__scene--stmt .problem__row-fig span.problem__row-fig-sub::before{
  content:"/ ";color:var(--ink-hair);
}

/* ── SCENE E — THE CLOSE ──────────────────────────────────────
   The resolved final word as one cohesive block, centred in the
   stage: a kicker meta line, the large close line behind a rust
   rule, and a close register line directly beneath. Everything
   tight together so the close reads as a confident composition
   and stays fully composed right through the sticky release. */
.devco-site.problem-scene #problem .problem__scene--close .problem__scene-inner{
  max-width:1040px;
}
/* the focal close block — kicker, rule, the close line */
.devco-site.problem-scene #problem .problem__scene--close .problem__close-core{
  margin:0;
}
.devco-site.problem-scene #problem .problem__scene--close .problem__close-text{margin:0;}
.devco-site.problem-scene #problem .problem__scene--close .problem__close-text p{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(2.3rem,1.4rem + 3.1vw,4.3rem);
  line-height:1.12;letter-spacing:-.022em;
  color:var(--ink);margin:0;
  max-width:20ch;
}
.devco-site.problem-scene #problem .problem__scene--close .problem__close-text em{
  font-style:italic;color:var(--accent);
}
/* a short rust rule above the close line */
.devco-site.problem-scene #problem .problem__scene--close .problem__close-rule{
  display:block;
  width:clamp(56px,5.5vw,84px);height:2px;
  background:var(--accent);
  margin-bottom:clamp(24px,3.2vh,40px);
}
/* a quiet close register directly under the close line — a
   close satellite, not a foot anchor. Set by the JS. */
.devco-site.problem-scene #problem .problem__scene--close .problem__scene-foot{
  margin:clamp(26px,3.6vh,46px) 0 0;
  padding-top:clamp(16px,2vh,24px);
  border-top:var(--hair) solid var(--ink-hair);
  font-family:var(--font-mono);
  font-size:var(--fs-mono-sm);
  letter-spacing:var(--tracking-mono);
  text-transform:uppercase;
  color:var(--ink-faint);
  display:flex;align-items:center;gap:14px;
}

/* ── ENHANCED-MODE PRIMING ────────────────────────────────────
   Until the JS driver has snapped a scene active, show scene A
   so a reload mid-build is never blank. */
.devco-site.problem-scene #problem .problem__scene-track:not(.is-ready)
  .problem__scene:first-of-type{
  opacity:1;
  visibility:visible;
}

/* ── MID-WIDTH — keep the scene, tighten the metrics ──────────*/
@media (max-width:1100px) and (min-width:761px){
  .devco-site.problem-scene #problem .problem__scene--stmt .problem__scene-inner{
    column-gap:clamp(28px,4vw,56px);
  }
  .devco-site.problem-scene #problem .problem__scene--stmt .problem__scene-plate{
    padding-right:clamp(28px,4vw,56px);
    margin-right:calc(-1 * clamp(28px,4vw,56px));
  }
  .devco-site.problem-scene #problem .problem__scene--stmt .problem__row-idx{
    font-size:clamp(6rem,3.5rem + 10vw,11rem);
  }
}

/* ── SHORT VIEWPORTS — protect the copy from clipping ─────────*/
@media (min-width:761px) and (max-height:760px){
  .devco-site.problem-scene #problem .problem__scene{
    padding-block:clamp(40px,6vh,68px) clamp(36px,5.5vh,60px);
  }
  .devco-site.problem-scene #problem .problem__scene--head .problem__headline,
  .devco-site.problem-scene #problem .problem__scene--head .problem__headline .elementor-heading-title{
    font-size:clamp(2.1rem,1.3rem + 2.6vw,3.6rem);
  }
  .devco-site.problem-scene #problem .problem__scene--stmt .problem__statement p{
    font-size:clamp(1.7rem,1.1rem + 1.8vw,2.7rem);
  }
  .devco-site.problem-scene #problem .problem__scene--stmt .problem__row-idx{
    font-size:clamp(4.4rem,2.6rem + 6vw,8rem);
  }
  .devco-site.problem-scene #problem .problem__scene-inner{
    --scene-frame-y:clamp(22px,2.6vh,36px);
  }
  .devco-site.problem-scene #problem .problem__scene--close .problem__close-text p{
    font-size:clamp(1.8rem,1.2rem + 2.2vw,3rem);
  }
  .devco-site.problem-scene #problem .problem__scene-ghost{
    font-size:clamp(140px,18vw,280px);
  }
}

/* ============================================================
   PART C — DEGRADE GATES
   ============================================================ */

/* ── DEGRADE 1 — prefers-reduced-motion ──────────────────────
   If, despite the JS gate, the scene class is present under
   reduced motion, collapse the track into a readable stack so
   every scene is fully visible and static. */
@media (prefers-reduced-motion:reduce){
  .devco-site.problem-scene #problem .problem__scene-track{height:auto;}
  .devco-site.problem-scene #problem .problem__scene-stage{
    position:static;height:auto;overflow:visible;
  }
  .devco-site.problem-scene #problem .problem__scene-deck{
    position:static;display:flex;flex-direction:column;
  }
  .devco-site.problem-scene #problem .problem__scene-bg{display:none;}
  .devco-site.problem-scene #problem .problem__scene{
    position:relative;inset:auto;
    opacity:1;visibility:visible;
    justify-content:flex-start;
    padding:clamp(56px,9vh,96px) var(--gutter);
  }
  .devco-site.problem-scene #problem .problem__scene-line > span{
    transform:none !important;
  }
  .devco-site.problem-scene #problem .problem__scene-inner::before,
  .devco-site.problem-scene #problem .problem__scene-inner::after{
    display:none;
  }
  .devco-site.problem-scene #problem .problem__scene-progress,
  .devco-site.problem-scene #problem .problem__scene-cue,
  .devco-site.problem-scene #problem .problem__scene-eyebrow{
    display:none;
  }
}

/* ── DEGRADE 2 — small phones (<= 760px) ─────────────────────
   The sticky scene is heavy on phones. problem.js skips the
   scene driver at this width and renders the static stack; if
   the scene shell was built before a resize crossed the
   breakpoint, this collapses it into a clean readable stack. */
@media (max-width:760px){
  .devco-site.problem-scene #problem .problem__scene-track{height:auto;}
  .devco-site.problem-scene #problem .problem__scene-stage{
    position:static;height:auto;overflow:visible;
  }
  .devco-site.problem-scene #problem .problem__scene-deck{
    position:static;display:flex;flex-direction:column;
  }
  .devco-site.problem-scene #problem .problem__scene-bg{display:none;}
  .devco-site.problem-scene #problem .problem__scene{
    position:relative;inset:auto;
    opacity:1;visibility:visible;
    justify-content:flex-start;
    padding:clamp(44px,9vw,68px) var(--gutter);
  }
  .devco-site.problem-scene #problem .problem__scene-line > span{
    transform:none !important;
  }
  .devco-site.problem-scene #problem .problem__scene-progress,
  .devco-site.problem-scene #problem .problem__scene-cue,
  .devco-site.problem-scene #problem .problem__scene-eyebrow{
    display:none;
  }
  /* the statement scene's two-column grid collapses to a single
     column stack on phones — numeral plate, then the core. */
  .devco-site.problem-scene #problem .problem__scene--stmt .problem__scene-inner{
    grid-template-columns:1fr;
    row-gap:clamp(16px,4.5vw,26px);
  }
  .devco-site.problem-scene #problem .problem__scene--stmt .problem__scene-plate{
    align-self:flex-start;
    padding-right:0;
    margin-right:0;
    border-right:0;
  }
  .devco-site.problem-scene #problem .problem__scene--stmt .problem__scene-plate-label{
    align-self:flex-start;
  }
  .devco-site.problem-scene #problem .problem__scene--stmt .problem__row-idx{
    font-size:clamp(3.4rem,2.4rem + 7vw,5.4rem);
  }
  /* the hairline frame draws tighter on phones (static stack) */
  .devco-site.problem-scene #problem .problem__scene-inner::before,
  .devco-site.problem-scene #problem .problem__scene-inner::after{
    display:none;
  }
  .devco-site.problem-scene #problem .problem__scene--stmt .problem__statement p{
    max-width:none;
    font-size:clamp(1.6rem,1.2rem + 2.6vw,2.3rem);
  }
  .devco-site.problem-scene #problem .problem__scene--head .problem__headline,
  .devco-site.problem-scene #problem .problem__scene--head .problem__headline .elementor-heading-title{
    font-size:clamp(2.1rem,1.5rem + 3.2vw,2.9rem);
    max-width:none;
  }
  .devco-site.problem-scene #problem .problem__scene--head .problem__lead{max-width:none;}
  .devco-site.problem-scene #problem .problem__scene--head .problem__lead p{
    font-size:var(--fs-lead);
  }
  .devco-site.problem-scene #problem .problem__scene--head .problem__note{max-width:none;}
  .devco-site.problem-scene #problem .problem__scene--close .problem__close-text p{
    font-size:clamp(1.8rem,1.3rem + 2.8vw,2.5rem);
    max-width:none;
  }
}

/* ── STATIC-FALLBACK responsive (no scene built) — phones ────
   When problem.js did NOT take ownership, the original spread
   is still in the DOM; keep its small-screen rules intact. */
@media (max-width:768px){
  .devco-site:not(.problem-scene) #problem .dc-shell.e-con{
    row-gap:clamp(32px,6vw,44px);
  }
  .devco-site:not(.problem-scene) #problem .problem__head.e-con{
    gap:clamp(18px,4vw,26px);
  }
  .devco-site:not(.problem-scene) #problem .problem__row.e-con{
    grid-template-columns:clamp(42px,9vw,58px) minmax(0,1fr);
    column-gap:clamp(14px,3vw,22px);
    padding-block:clamp(22px,5vw,32px);
  }
  .devco-site:not(.problem-scene) #problem .problem__row-idx{
    font-size:clamp(1.9rem,1.4rem + 2vw,2.6rem);
  }
  .devco-site:not(.problem-scene) #problem .problem__statement p{max-width:none;}
  .devco-site:not(.problem-scene) #problem .problem__lead{max-width:none;}
  .devco-site:not(.problem-scene) #problem .problem__note{max-width:none;}
  .devco-site:not(.problem-scene) #problem .problem__close-text p{max-width:none;}
}
@media (max-width:480px){
  .devco-site:not(.problem-scene) #problem .problem__headline,
  .devco-site:not(.problem-scene) #problem .problem__headline .elementor-heading-title{
    font-size:clamp(2rem,1.45rem + 2.6vw,2.5rem);
    line-height:1.12;
  }
  .devco-site:not(.problem-scene) #problem .problem__statement p{
    font-size:clamp(1.2rem,1.02rem + 1.1vw,1.5rem);
    line-height:1.3;
  }
  .devco-site:not(.problem-scene) #problem .problem__close-text p{
    font-size:clamp(1.35rem,1.05rem + 1.4vw,1.7rem);
    line-height:1.28;
  }
  .devco-site:not(.problem-scene) #problem .problem__row.e-con{
    grid-template-columns:1fr;
    row-gap:clamp(8px,2.5vw,12px);
    padding-block:clamp(20px,6vw,28px);
  }
  .devco-site:not(.problem-scene) #problem .problem__row-idx{
    grid-row:auto;grid-column:1;
    font-size:clamp(1.7rem,1.3rem + 2vw,2.2rem);
    line-height:1;
  }
  .devco-site:not(.problem-scene) #problem .problem__statement{grid-column:1;grid-row:auto;}
  .devco-site:not(.problem-scene) #problem .problem__row-fig{grid-column:1;grid-row:auto;}
}