/* ---- interactive-only styles ---- */
  body.interactive{cursor:none}
  @media(max-width:860px){body.interactive{cursor:auto}}
  .cursor,.cursor-ring{position:fixed;top:0;left:0;border-radius:50%;pointer-events:none;z-index:9999;mix-blend-mode:difference}
  .cursor{width:8px;height:8px;background:#fff;margin:-4px 0 0 -4px}
  .cursor-ring{width:42px;height:42px;border:1.5px solid #fff;margin:-21px 0 0 -21px;transition:width .3s,height .3s,margin .3s;opacity:.7}
  .cursor-ring.big{width:84px;height:84px;margin:-42px 0 0 -42px}
  @media(max-width:860px){.cursor,.cursor-ring{display:none}}

  /* hero */
  .hero{min-height:92vh;display:flex;align-items:center;position:relative;overflow:hidden}
  .hero-q-img{position:absolute;right:-1%;top:46%;transform:translateY(-50%);height:84%;max-height:780px;width:auto;z-index:1;pointer-events:none;filter:drop-shadow(0 26px 48px rgba(78,34,56,.28));animation:qfloat 6.5s ease-in-out infinite}
  @keyframes qfloat{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 16px))}}
  .hero .wrap{position:relative;z-index:3}
  .line{overflow:hidden;display:block}
  .line .li{display:block}
  @media(max-width:860px){.hero-q-img{height:42%;right:-12%;top:16%;opacity:.55}}
  .scrollcue{position:absolute;left:40px;bottom:30px;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--grey);z-index:3}
  .scrollcue .bar{width:46px;height:2px;background:var(--plum);position:relative;overflow:hidden}
  .scrollcue .bar::after{content:"";position:absolute;inset:0;background:var(--cream-2);animation:cue 1.8s infinite}
  @keyframes cue{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

  /* word build spans */
  .statement .w{display:inline-block;overflow:hidden}
  .statement .wi{display:inline-block}

  .svc{transform-style:preserve-3d;will-change:transform}

  /* robust reveal (default visible; JS adds .reveal then .reveal-in) */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.75,.25,1) var(--rd,0s),transform .7s cubic-bezier(.2,.75,.25,1) var(--rd,0s)}
  .reveal.reveal-in{opacity:1;transform:none}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none}}

  body:not(.loaded) .hero .wrap{opacity:1}