/* Phone placement A · split (2026-09-11): the statement on the left, the phone upright on the right,
   the whole glass in view. Desktop only; narrower windows keep the centred layout.
   Glass maths for the hand box (height H): the glass is 24.83% of H wide, 53.47% of H tall, its centre
   sits 19.31% of H from the box's left edge, and its top 2.63% of H below the box's top. */
@media (min-width: 1180px) {
  html[data-phone="a"] .hero-seq.vb { --gx: calc(50% + min(24vw, 300px)); --gh: 15.32svh; }
  html[data-phone="a"] .hero-seq.vb .hero-stage { position: absolute; inset: 0; width: auto; margin: 0; }
  /* H 123.4svh: glass 21svh → 87svh (was 146svh, 16 → 94) */
  html[data-phone="a"] .hero-seq.vb .handwrap { position: absolute; margin: 0; transform: none; height: 123.4svh; left: calc(var(--gx) - 23.83svh); top: 17.75svh; }

  /* The whole text column is centred on the glass (the glass centre sits at 54svh). */
  html[data-phone="a"] .hero-seq.vb .over-copy {
    top: 54svh; left: max(var(--s-xl), calc((100% - 1140px) / 2)); transform: translateY(-50%);
    width: min(700px, 48vw); text-align: left; align-items: flex-start;
  }
  /* Sized so "tracked like a flight." holds one line in the column. */
  html[data-phone="a"] .hero-seq.vb .over-copy .hero-type { font-size: clamp(2.2rem, min(3.6vw, 6.6svh), 3.9rem); }
  html[data-phone="a"] .hero-seq.vb .over-copy .hero-sub { display: grid; text-align: left; max-width: 44ch; }

  /* The radial glow follows the statement to the left. */
  html[data-phone="a"] .vb .hero-ground .g0::after { background:
    radial-gradient(ellipse 54% 66% at 28% 54%, rgba(255,248,238,.86) 0%, rgba(255,248,238,.56) 45%, rgba(255,248,238,0) 100%),
    linear-gradient(180deg, rgba(255,248,238,.66) 0%, rgba(255,248,238,.30) 9%, rgba(255,248,238,0) 20%, rgba(46,21,2,0) 55%, rgba(46,21,2,.55) 100%); }
  html[data-phone="a"] .vb .hero-ground .g1::after { background:
    radial-gradient(ellipse 54% 66% at 28% 54%, rgba(255,248,238,.80) 0%, rgba(255,248,238,.50) 45%, rgba(255,248,238,0) 100%),
    linear-gradient(180deg, rgba(255,248,238,.60) 0%, rgba(255,248,238,.26) 9%, rgba(255,248,238,0) 20%, rgba(46,21,2,0) 55%, rgba(46,21,2,.60) 100%); }
  html[data-phone="a"] .vb .hero-ground .g2::after { background:
    radial-gradient(ellipse 54% 66% at 28% 54%, rgba(46,21,2,.72) 0%, rgba(46,21,2,.42) 45%, rgba(46,21,2,0) 100%),
    linear-gradient(180deg, rgba(46,21,2,.40) 0%, rgba(46,21,2,.08) 30%, rgba(46,21,2,.10) 48%, var(--roast) 100%); }
}