/* ═══ SECTION 2 — POSITIONING ═══ */
.positioning{position:relative;padding:clamp(88px,15vh,170px) var(--gut) clamp(80px,13vh,150px)}
.positioning::before{content:"";position:absolute;top:0;left:var(--gut);right:var(--gut);height:1px;background:var(--border)}
.claim{font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:900;
  font-size:clamp(1.9rem,5.4vw,4.6rem);line-height:.98;letter-spacing:-.028em;max-width:22ch}
.claim .row{display:block;overflow:hidden}
.claim .row > span{display:block;transform:translateY(105%);transition:transform .85s cubic-bezier(.16,1,.3,1)}
.is-in .claim .row > span{transform:translateY(0)}

/* ── the cycling second line ──
   Reads as a 3D flip: the phrase rotates away on the X axis like a board on a
   split-flap display, and the next one rotates in from below. .flip-sizer is
   invisible but reserves the width of the longest phrase so nothing reflows. */
/* the other .row rules clip with overflow:hidden; the flip needs room to tip in 3D */
.claim .flip-row{position:relative;perspective:900px;overflow:visible}
.flip-sizer{visibility:hidden}
.flip{position:absolute;left:0;top:0;right:0;display:block;color:var(--cut);
  white-space:nowrap;transform-origin:50% 50%;backface-visibility:hidden;
  transform:rotateX(0deg);opacity:1}
/* current phrase flips away, tipping back and up */
.flip.out{transform:rotateX(92deg) translateY(-26%);opacity:0;
  transition:transform .40s cubic-bezier(.55,0,.85,.35),opacity .34s ease-in}
/* next phrase waits below, tipped the other way, with no transition */
.flip.in{transform:rotateX(-92deg) translateY(26%);opacity:0;transition:none}
/* then swings up flat */
.flip.settle{transform:rotateX(0deg) translateY(0);opacity:1;
  transition:transform .56s cubic-bezier(.18,.9,.28,1.06),opacity .3s ease-out}
@media(max-width:620px){
  /* the longest phrase would shrink the type too far on a phone, so it wraps instead */
  .flip,.flip-sizer{white-space:normal}
  .flip{position:static}
  .flip-sizer{display:none}
  .flip-row{overflow:visible}
}

/* ── counters ── */
.counters{margin-top:clamp(40px,7vh,84px);padding-top:clamp(30px,5vh,52px);
  border-top:1px solid var(--border);
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,60px)}
@media(max-width:700px){.counters{grid-template-columns:1fr;gap:clamp(22px,4vh,34px)}}
.ct{opacity:0;transform:translateY(18px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.is-in .ct{opacity:1;transform:none}
.is-in .ct:nth-child(2){transition-delay:.1s}
.is-in .ct:nth-child(3){transition-delay:.2s}
.ct b{display:block;font-family:'Archivo Expanded',Archivo,sans-serif;font-weight:900;
  font-size:clamp(2.4rem,6vw,5rem);line-height:.92;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
.ct i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.2em;font-weight:600;
  color:var(--dim);margin-top:14px}
.ct::after{content:"";display:block;width:0;height:2px;background:var(--cut);margin-top:18px;
  transition:width .9s cubic-bezier(.16,1,.3,1) .4s}
.is-in .ct::after{width:46px}

@media(prefers-reduced-motion:reduce){
  .claim .row > span{transform:none}
  .ct{opacity:1;transform:none}
  .ct::after{width:46px}
  .flip{position:static;transform:none;opacity:1}
  .flip-sizer{display:none}
}