/* ===========================================================
   BRANDNW TYPO BLOCK SYSTEM  (reusable across all pages)
   - exact Nayla type scale (rendered in Suisse Book, alt "a")
   - word-by-word "whip" fly-in + grey->ink reveal
   - marquees
   Namespaced with tb- / tw so it never collides with page CSS.
   Trigger: put data-tb on a section; JS adds .tb-in when in view.
   =========================================================== */

/* ---- type scale (px -> em, weight 400) ---- */
.tb-xxl{font-size:clamp(96px,10.4vw,200px);line-height:.9;letter-spacing:-.08em;font-weight:400}
.tb-xl{font-size:clamp(76px,7.8vw,150px);line-height:1.15;letter-spacing:-.07em;font-weight:400}
.tb-l{font-size:clamp(58px,5.3vw,102px);line-height:1.127;letter-spacing:-.055em;font-weight:400}
.tb-m{font-size:clamp(42px,3.35vw,64px);line-height:1.1;letter-spacing:-.041em;font-weight:400}
.tb-lead{font-size:clamp(34px,2.65vw,51px);line-height:1.216;letter-spacing:-.03em;font-weight:400}
.tb-body{font-size:clamp(18px,1.1vw,21px);line-height:1.5;letter-spacing:0;font-weight:400}
.tb-small{font-size:clamp(14px,.84vw,16px);line-height:1.5625;letter-spacing:0;font-weight:400}
.tb-mono{font-family:"Suisse Mono",monospace;font-size:12px;line-height:18px;letter-spacing:.04em;text-transform:uppercase}

/* ---- underline that draws itself in ---- */
.tb-under{position:relative;display:inline-block;line-height:.9}
.tb-under::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.055em;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform 1s cubic-bezier(.16,1,.3,1) .3s}
.tb-in .tb-under::after{transform:scaleX(1)}

/* ---- WORD-BY-WORD WHIP (scroll-scrubbed) ----
   Each word's opacity / transform / colour is driven directly by scroll
   position in brandnw-typo.js, so the motion is fully coupled to scrolling. */
.tb-rise .tw,.tb-reveal .tw{display:inline-block}
.tb-rise .twi,.tb-reveal .twi{display:inline-block;transform-origin:0 92%;will-change:transform,opacity}
.tb-js .tb-rise .twi,.tb-js .tb-reveal .twi{opacity:0}

/* whole-element soft fade for small captions/links */
.tb-js .tb-fade{opacity:0}
.tb-in .tb-fade{animation:tbFade .9s cubic-bezier(.16,1,.3,1) both}
.tb-in .tb-fade.tb-d1{animation-delay:.1s}.tb-in .tb-fade.tb-d2{animation-delay:.22s}.tb-in .tb-fade.tb-d3{animation-delay:.34s}
@keyframes tbFade{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ---- marquee (running headline) ---- */
.tb-marquee{position:relative;width:100%;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.tb-marq{display:inline-flex;align-items:center;white-space:nowrap;will-change:transform}
.tb-marq span{display:inline-block;font-size:clamp(60px,7vw,140px);line-height:1.05;letter-spacing:-.05em;font-weight:400;padding-right:.5em}
.tb-marq .sep{opacity:.9;padding:0 .35em}
.tb-marq-ltr .tb-marq{animation:tbMarqLTR 26s linear infinite}
.tb-marq-rtl .tb-marq{animation:tbMarqRTL 26s linear infinite}
@keyframes tbMarqLTR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes tbMarqRTL{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media(prefers-reduced-motion:reduce){
  .tb-js .tb-fade,.tb-js .tb-rise .twi,.tb-js .tb-reveal .twi{opacity:1!important;animation:none!important;transform:none!important;color:inherit!important}
  .tb-marq-ltr .tb-marq,.tb-marq-rtl .tb-marq{animation:none!important}
}