/* TSN Apex: Look & Motion (v5.3.0). Every rule is scoped to a body class
   or element that only exists when its switch is on. */

/* ── Logo alignment: centered (desktop only; phones keep the hamburger row) ── */
@media (min-width: 901px) {
  body.tsn-logo-center { --tsn-nav-h: 124px; }
  body.tsn-logo-center #tsn-nav { flex-direction: column; justify-content: center; gap: 14px; padding: 12px 48px; }
  body.tsn-logo-center .tsn-nav-links { justify-content: center; flex-wrap: wrap; gap: 14px 32px; }
  body.tsn-logo-center .tsn-logo img { margin: 0 auto; }
}

/* ── Backdrops ── */
.tsn-bd { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
#tsn-contact .tsn-contact-inner { position: relative; z-index: 1; }
.tsn-bd-canvas { width: 100%; height: 100%; display: block; }

.tsn-bd-aurora .tsn-bd-blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .38; will-change: transform; }
.tsn-bd-aurora .b1 { width: 46vw; height: 46vw; max-width: 720px; max-height: 720px; left: -8%; top: -14%; background: var(--tsn-blue); animation: tsn-bd-drift1 22s ease-in-out infinite alternate; }
.tsn-bd-aurora .b2 { width: 38vw; height: 38vw; max-width: 600px; max-height: 600px; right: -6%; top: 18%; background: var(--tsn-accent-sheen, var(--tsn-blue-light)); animation: tsn-bd-drift2 26s ease-in-out infinite alternate; }
.tsn-bd-aurora .b3 { width: 30vw; height: 30vw; max-width: 480px; max-height: 480px; left: 34%; bottom: -22%; background: var(--tsn-blue-dark); opacity: .28; animation: tsn-bd-drift3 30s ease-in-out infinite alternate; }
.tsn-bd-on-contact.tsn-bd-aurora .tsn-bd-blob { opacity: .16; }
@keyframes tsn-bd-drift1 { to { transform: translate(12%, 10%) scale(1.12); } }
@keyframes tsn-bd-drift2 { to { transform: translate(-14%, -8%) scale(.9); } }
@keyframes tsn-bd-drift3 { to { transform: translate(-10%, -14%) scale(1.15); } }

.tsn-bd-grid {
  background-image:
    linear-gradient(rgba(var(--tsn-blue-rgb), .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--tsn-blue-rgb), .16) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%);
  animation: tsn-bd-pan 24s linear infinite;
}
.tsn-bd-on-contact.tsn-bd-grid { opacity: .6; }
@keyframes tsn-bd-pan { to { background-position: 56px 56px, 56px 56px; } }

.tsn-bd-spotlight { --mx: 50%; --my: 35%; background: radial-gradient(520px circle at var(--mx) var(--my), rgba(var(--tsn-blue-rgb), .26), transparent 62%); transition: background .08s linear; }
.tsn-bd-on-contact.tsn-bd-spotlight { background: radial-gradient(520px circle at var(--mx) var(--my), rgba(var(--tsn-blue-rgb), .12), transparent 62%); }

/* ── Team photos: one shape for everyone, per-person zoom and focus ── */
.tsn-team-photo img {
  object-position: var(--tfx, 50%) var(--tfy, 0%);
  transform: scale(var(--tz, 1));
  transform-origin: var(--tfx, 50%) var(--tfy, 0%);
}
.tsn-team-card:hover .tsn-team-photo img { transform: scale(calc(var(--tz, 1) * 1.05)); }
body.tsn-team-portrait .tsn-team-photo { aspect-ratio: 3 / 4; }
body.tsn-team-circle .tsn-team-photo { aspect-ratio: 1 / 1; border-radius: 50%; width: 78%; margin: 22px auto 4px; }
body.tsn-team-circle .tsn-team-photo::before { border-radius: 50%; }
body.tsn-team-circle .tsn-team-info { text-align: center; }

/* ── Bento hero ── */
.tsn-hero-content.tsn-bento {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto);
  grid-auto-flow: dense; gap: 14px; align-items: stretch; padding: 56px 48px 48px;
}
.tsn-bt {
  position: relative; overflow: hidden; border-radius: var(--tsn-radius, 4px);
  background: rgba(var(--tsn-hero-fg-rgb), .05); border: 1px solid rgba(var(--tsn-hero-fg-rgb), .12);
  padding: 26px; color: var(--tsn-hero-fg); display: flex; flex-direction: column; justify-content: center;
}
.tsn-bt-copy { grid-column: span 2; grid-row: span 2; justify-content: flex-end; padding: 36px; }
.tsn-bento .tsn-bt-copy h1 { font-size: clamp(2.4rem, 4.6vw, 4.8rem); margin-bottom: 22px; }
.tsn-bt-body { font-size: 1.02rem; line-height: 1.7; color: rgba(var(--tsn-hero-fg-rgb), .82); max-width: 520px; margin: 0 0 28px; }
.tsn-bt-photo { grid-row: span 2; padding: 0; }
.tsn-bt-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.tsn-bt-badge {
  position: absolute; left: 14px; bottom: 14px; background: var(--tsn-blue); color: var(--tsn-btn-fg);
  font-size: var(--fs-xs, .72rem); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 7px 12px; border-radius: var(--tsn-radius, 4px);
}
.tsn-bt-stat .tsn-hero-stat-num { font-size: clamp(2.2rem, 3.4vw, 3.2rem); }
.tsn-bt-stat .tsn-hero-stat-label { text-align: left; margin-top: 8px; }
.tsn-bt-kicker { font-size: var(--fs-xs, .72rem); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tsn-blue); margin-bottom: 10px; }
.tsn-bt-line { color: var(--tsn-hero-fg); font-weight: 700; text-decoration: none; font-size: 1.02rem; margin: 2px 0; word-break: break-word; }
.tsn-bt-line:hover { color: var(--tsn-blue); }
.tsn-bt-small { color: rgba(var(--tsn-hero-fg-rgb), .7); font-size: .85rem; margin-top: 6px; }
.tsn-bt-logos { grid-column: span 2; }
.tsn-bt-logo-row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.tsn-bt-logo-row img { height: 30px; width: auto; max-width: 120px; object-fit: contain; opacity: .85; }
@media (max-width: 1100px) {
  .tsn-hero-content.tsn-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tsn-bt-photo { min-height: 300px; }
}
@media (max-width: 640px) {
  .tsn-hero-content.tsn-bento { grid-template-columns: 1fr; padding: 40px 20px 36px; }
  .tsn-bt-copy, .tsn-bt-logos, .tsn-bt-photo { grid-column: span 1; grid-row: auto; }
  .tsn-bt-copy { padding: 26px; }
  .tsn-bt-photo { min-height: 260px; }
}

/* ── Motion layer ── */
body.tsn-motion .tsn-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--tsn-i, 0) * 80ms); }
body.tsn-motion .tsn-stagger.visible > * { opacity: 1; transform: none; }
body.tsn-motion .tsn-hero-glow { animation: tsn-glow-drift 18s ease-in-out infinite alternate; }
@keyframes tsn-glow-drift {
  0%   { transform: translateX(-50%) translateY(0) scale(1); }
  50%  { transform: translateX(-44%) translateY(4%) scale(1.08); }
  100% { transform: translateX(-56%) translateY(-3%) scale(.96); }
}
#tsn-logos.tsn-logos-static .tsn-logos-inner-scroll { animation: none; width: auto; justify-content: center; flex-wrap: wrap; margin: 0 auto; }
#tsn-logos.tsn-logos-static .tsn-logos-track::before, #tsn-logos.tsn-logos-static .tsn-logos-track::after { display: none; }

/* ── Reduced motion: everything still, nothing hidden ── */
@media (prefers-reduced-motion: reduce) {
  .tsn-bd, .tsn-bd * { animation: none !important; transition: none !important; }
  body.tsn-motion .tsn-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  body.tsn-motion .tsn-hero-glow { animation: none !important; }
}