/* Selected SOUB convoy identity; existing account and road markup stays compatible. */
@font-face{
  font-family:"Soub Exo 2";
  font-style:italic;
  font-weight:800;
  font-display:swap;
  src:url('/assets/soub-exo2-italic-800.ttf') format('truetype');
  unicode-range:U+0042,U+004F,U+0053,U+0055;
}
.brand.droopyBrand{width:260px;height:112px;flex:0 0 260px;max-width:100%}
.droopyWordmark{--soub-ink:#12324a;--soub-accent:#f47726;--soub-return:#1aa99c;--soub-shift:28px;padding-bottom:0;min-width:0;width:100%}
.soubBrandLine{display:flex;align-items:center;justify-content:center;gap:10px;min-height:66px;direction:ltr;unicode-bidi:isolate;white-space:nowrap;animation:soubConvoyDrive 6s ease-in-out infinite}
.droopyWordmark .soubBrandLine>b{display:flex;flex:0 0 auto;font:italic 800 52px/1.02 "Soub Exo 2","Exo 2",Arial,sans-serif;letter-spacing:2px;color:var(--soub-ink)}
.droopyWordmark .soubBrandLetter{display:inline-block;position:relative;animation:soubConvoyStep 1.2s ease-in-out infinite}
.droopyWordmark .soubBrandLetter--o{color:var(--soub-accent);animation-delay:-.2s}
.droopyWordmark .soubBrandLetter--u{animation-delay:-.4s}
.droopyWordmark .soubBrandLetter--b{animation-delay:-.6s}
.soubDirections{width:35px;height:35px;flex:0 0 35px;overflow:visible;transform:skewX(-9deg)}
.soubDirections path{stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:center}
.directionOut{stroke:var(--soub-accent);animation:soubForward 1.8s ease-in-out infinite}
.directionBack{stroke:var(--soub-return);animation:soubBackward 1.8s ease-in-out infinite}
.droopyWordmark .brandRoad{margin-inline:auto}
@keyframes soubConvoyDrive{0%,100%{transform:translateX(calc(-1 * var(--soub-shift)))}50%{transform:translateX(var(--soub-shift))}}
@keyframes soubConvoyStep{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes soubForward{0%,100%{transform:translateX(-2px)}50%{transform:translateX(2px)}}
@keyframes soubBackward{0%,100%{transform:translateX(2px)}50%{transform:translateX(-2px)}}
html[data-theme=night] .droopyWordmark{--soub-ink:#f1f5fb}
@media(max-width:700px){
  .brand.droopyBrand{width:clamp(172px,53vw,220px);height:94px;flex-basis:clamp(172px,53vw,220px)}
  .droopyWordmark{--soub-shift:10px}
  .soubBrandLine{min-height:56px;gap:7px}
  .droopyWordmark .soubBrandLine>b{font-size:clamp(38px,10.5vw,44px);letter-spacing:2px}
  .soubDirections{width:30px;height:30px;flex-basis:30px}
}
@media(max-width:400px){
  .droopyWordmark{--soub-shift:8px}
  .soubDirections{width:28px;height:28px;flex-basis:28px}
}
@media(prefers-reduced-motion:reduce){
  .droopyWordmark .soubBrandLine,.droopyWordmark .soubBrandLetter,.droopyWordmark .soubDirections path{animation:none;transform:none}
  .droopyWordmark .roadDashes,.droopyWordmark .roadVehicle{animation:none}
}

/* Dedicated assets replace only the hero and carrier regions of the old sprite. */
.roleLanding.designLanding .landingScene{background-image:url('/assets/soub-hero-v77.jpg');background-size:cover;background-position:center;aspect-ratio:1128/1394}
.roleLanding.designLanding .carrierArt{background-image:url('/assets/soub-carrier-role-v77.jpg');background-size:contain;background-position:center;background-repeat:no-repeat}
@media(max-width:700px){.roleLanding.designLanding .landingScene{background-image:url('/assets/soub-hero-mobile-v77.jpg');aspect-ratio:337/260;background-size:cover;background-position:center}}