:root{
  /* Core palette */
  --ss-bg: #020617;                 /* main dark navy */
  --ss-bg-alt: #000000;             /* deep black */
  --ss-text: #e5e7eb;               /* main text */
  --ss-muted: rgba(229,231,235,.70);
  --ss-border-soft: rgba(255,255,255,.08);

  /* Accent */
  --ss-accent: #fbbf24;             /* gold */
  --ss-grad-gold: #fbbf24;
  --ss-grad-orange: #ff8a00;
  --ss-grad-orange-deep: #ff4d00;

  /* Layout */
  --ss-radius-card: 10px;
  --ss-radius-sm: 8px;

  /* Shadows */
  --ss-shadow-card: 0 18px 50px rgba(0,0,0,.55);
  --ss-shadow-soft: 0 12px 34px rgba(0,0,0,.35);

  /* Focus */
  --ss-focus: rgba(251,191,36,.55);

  /* Media / sticky */
  --ss-sticky-top: 90px;            /* adjust if your navbar is taller */
  --ss-media-zoom: 1.08;
}

/* ---------------------------------------------------------
   Reset / Base
--------------------------------------------------------- */
*,
*::before,
*::after{ box-sizing: border-box; }

html, body{ margin: 0; padding: 0; }

body{
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  background: radial-gradient(circle at top, var(--ss-bg) 0%, var(--ss-bg) 55%, var(--ss-bg-alt) 100%);
  color: var(--ss-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Remove browser outlines globally (use theme cues instead) */
*:focus,
*:focus-visible{ outline: none; }

a{ color: inherit; text-decoration: none; }
a:hover, a:focus{ text-decoration: none; }

img, video{
  max-width: 100%;
  display: block;
}

/* Keep images crisp (avoid blur from leftover filters/3D) */
img, video{
  image-rendering: auto;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ---------------------------------------------------------
   Lists — remove bullets site-wide
--------------------------------------------------------- */
ul, ol{
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
li::marker{ content: ''; }

/* ---------------------------------------------------------
   Scrollbar (theme)
--------------------------------------------------------- */
/* Firefox */
*{
  scrollbar-width: thin;
  scrollbar-color: var(--ss-accent) rgba(2, 6, 23, 0.85);
}

/* Chromium / Safari */
::-webkit-scrollbar{ width: 12px; height: 12px; }

::-webkit-scrollbar-track{
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  margin: 10px;
  border: 1px solid rgba(148,163,184,.18);
}

::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, var(--ss-grad-orange), var(--ss-grad-orange-deep), rgba(2,6,23,.9));
  border-radius: 999px;
  border: 3px solid rgba(2,6,23,.75);
  box-shadow:
    0 0 12px rgba(251,191,36,.22),
    0 0 18px rgba(239,68,68,.12),
    inset 0 0 10px rgba(255,255,255,.10);
}

::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, rgba(251,191,36,1), rgba(239,68,68,.85), rgba(2,6,23,.85));
  box-shadow:
    0 0 16px rgba(251,191,36,.32),
    0 0 24px rgba(239,68,68,.18),
    inset 0 0 12px rgba(255,255,255,.14);
}

::-webkit-scrollbar-corner{ background: transparent; }

@media (prefers-reduced-motion: reduce){
  ::-webkit-scrollbar-thumb,
  ::-webkit-scrollbar-thumb:hover{ box-shadow: none; }
}

/* ---------------------------------------------------------
   App containers
--------------------------------------------------------- */
.ss-app{ position: relative; min-height: 100vh; }

.ss-shell{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.ss-main{
  position: relative;
  z-index: 1;
  padding-bottom: 4rem;
}

/* Optional background particles layer */
#ss-bg-layer{
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#ss-particles{ width: 100%; height: 100%; display: block; }

/* ---------------------------------------------------------
   Header / Navbar
--------------------------------------------------------- */
.ss-header{
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: rgba(15,23,42,.92);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.ss-header-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}

.ss-brand{ display:flex; align-items:center; gap: .7rem; }
.ss-brand-name{ font-weight: 650; font-size: .98rem; }
.ss-brand-tagline{ font-size: .75rem; color: var(--ss-muted); }

/* Desktop nav links: tab underline */
.ss-nav{ display:flex; align-items:center; gap: 1.2rem; }

.ss-nav-link{
  position: relative;
  font-size: .88rem;
  padding: .4rem 0;
  letter-spacing: .03em;
  text-transform: uppercase;
  opacity: .85;
  transition: color .18s ease, opacity .18s ease, transform .18s ease;
}

.ss-nav-link::after{
  content:'';
  position:absolute;
  left:0; right:0;
  bottom:-.25rem;
  height:2px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--ss-grad-gold), rgba(239,68,68,1));
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
}

.ss-nav-link:hover,
.ss-nav-link:focus-visible{
  color:#fefce8;
  opacity:1;
  transform: translateY(-1px);
}
.ss-nav-link:hover::after,
.ss-nav-link:focus-visible::after{ transform: scaleX(1); }

.ss-nav-link--active{ color:#fef3c7; opacity:1; }
.ss-nav-link--active::after{ transform: scaleX(1); }

/* CTA button in nav */
.ss-nav-cta{
  margin-left:.5rem;
  padding:.45rem .95rem;
  border-radius: 999px;
  border: 1px solid var(--ss-accent);
  font-size:.82rem;
  text-transform: uppercase;
  letter-spacing:.08em;
  background: rgba(15,23,42,.40);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.ss-nav-cta:hover,
.ss-nav-cta:focus-visible{
  background: var(--ss-accent);
  color: #111827;
  border-color: #facc15;
  box-shadow: 0 12px 32px rgba(251,191,36,.40);
  transform: translateY(-1px);
}

/* Mobile toggle */
.ss-nav-toggle{
  display:none;
  width:32px;
  height:28px;
  flex-direction: column;
  justify-content:center;
  gap:6px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
}
.ss-nav-toggle span{
  display:block;
  height:2px;
  width:100%;
  background:#f9fafb;
  border-radius: 999px;
  transition: transform .25s ease, opacity .25s ease;
}
.ss-nav-toggle.is-open span:first-child{ transform: translateY(4px) rotate(45deg); }
.ss-nav-toggle.is-open span:last-child{ transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 820px){
  .ss-nav-toggle{ display:flex; }

  .ss-nav{
    position: fixed;
    top: 64px;
    right: 0; left: 0;
    padding: .85rem 1.25rem 1.3rem;
    background: radial-gradient(circle at top, var(--ss-bg) 0, var(--ss-bg) 55%, var(--ss-bg-alt) 100%);
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-direction: column;
    align-items: flex-start;
    gap: .4rem;

    transform: translateY(-18px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .ss-nav.is-open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .ss-nav-link{ width:100%; padding:.55rem 0; opacity:.92; }
  .ss-nav-link::after{ width: 36%; right:auto; bottom:-.15rem; }

  .ss-nav-cta{
    width:100%;
    justify-content:center;
    margin-left:0;
    margin-top:.3rem;
  }
}

/* ---------------------------------------------------------
   Sections / Grids
--------------------------------------------------------- */
.ss-section{
  position: relative;
  z-index: 1;
  padding: 3.4rem 0;
}

.ss-section--light{ background: rgba(255,255,255,.04); }

.ss-section-header{ max-width: 720px; margin-bottom: 1.6rem; }

.ss-section-title{
  font-size: 1.6rem;
  margin: 0 0 .4rem;
}
.ss-section-sub{
  margin: 0;
  font-size: .95rem;
  color: var(--ss-muted);
}
.ss-section-cta{ margin-top: 1.4rem; text-align: center; }

.ss-grid{ display:grid; gap: 1.2rem; }
.ss-grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ss-grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ss-grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px){
  .ss-grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .ss-grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px){
  .ss-grid-2, .ss-grid-3, .ss-grid-4{ grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------
   Cards (NO outlines, modern glass)
--------------------------------------------------------- */
.ss-card{
  background: rgba(15,23,42,.92);
  border-radius: var(--ss-radius-card);
  border: 0;
  padding: 1rem;
  box-shadow: var(--ss-shadow-soft);
  position: relative;
  overflow: hidden; /* required for zoomed media */
}

/* subtle top sheen */
.ss-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 18% 12%, rgba(251,191,36,.10), transparent 55%);
  pointer-events:none;
}

/* Clickable card */
.ss-card-link{
  display:block;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.ss-card-link:hover,
.ss-card-link:focus-visible{
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(0,0,0,.65);
}

/* Text */
.ss-card-title{ margin: 0 0 .4rem; font-size: 1rem; }
.ss-card-text{ margin: .1rem 0 .5rem; font-size: .9rem; color: var(--ss-muted); }

.ss-chip{
  display:inline-flex;
  align-items:center;
  padding:.15rem .55rem;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.10);
  font-size:.72rem;
  margin-bottom:.35rem;
  color: var(--ss-muted);
}

.ss-list{
  margin: .2rem 0 0;
  padding-left: 1rem;
  font-size: .86rem;
  color: var(--ss-muted);
}
.ss-list li{ margin-bottom: .18rem; }

.ss-link-muted{
  font-size:.85rem;
  color: #e5e7eb;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Media card area (full width) */
.ss-card-media{
  border-radius: var(--ss-radius-sm);
  overflow:hidden;
  margin-bottom: .7rem;
  width:100%;
  aspect-ratio: 16 / 9;
  background: rgba(255,255,255,.04);
}

/* 100% width media + smooth zoom when hovering THAT card only */
.ss-card-media img,
.ss-card-media video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1);
  transition: transform 350ms ease;
  will-change: transform;
}

/* zoom only when hovering the card (or clickable wrapper) */
.ss-card:hover .ss-card-media img,
.ss-card:hover .ss-card-media video,
.ss-card-link:hover .ss-card-media img,
.ss-card-link:hover .ss-card-media video{
  transform: scale(var(--ss-media-zoom));
}

/* Leader image */
.ss-card-leader img{
  width:100%;
  height:190px;
  object-fit: cover;
}

/* ---------------------------------------------------------
   Sticky slider media while scrolling
   Usage (recommended): wrap your slide media with class .ss-sticky-media
   Works also for common slider wrappers: .slider-media / .slide-media
--------------------------------------------------------- */
.ss-sticky-media,
.slider-media,
.slide-media{
  position: sticky;
  top: var(--ss-sticky-top);
  z-index: 2;
}

.ss-sticky-media img,
.ss-sticky-media video,
.slider-media img,
.slider-media video,
.slide-media img,
.slide-media video{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* If you want the sticky media to have a “panel” feel */
.ss-sticky-media{
  border-radius: var(--ss-radius-card);
  overflow: hidden;
}

/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */
.ss-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.45rem .95rem;
  border-radius:999px;
  border: 1px solid var(--ss-accent);
  font-size:.86rem;
  cursor:pointer;
  background: transparent;
  color:#f9fafb;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ss-btn-solid{ background: var(--ss-accent); color:#111827; }
.ss-btn-solid:hover{ box-shadow: 0 12px 30px rgba(251,191,36,.45); transform: translateY(-1px); }
.ss-btn-outline:hover{ background: rgba(248,250,252,.08); }
.w-100{ width:100%; }

/* ---------------------------------------------------------
   Alerts
--------------------------------------------------------- */
.ss-alert{
  border-radius: 12px;
  padding: .75rem 1rem;
  font-size: .88rem;
  margin-bottom: 1rem;
}
.ss-alert-error{
  background: rgba(248,113,113,.15);
  border: 1px solid rgba(248,113,113,.45);
}
.ss-alert-success{
  background: rgba(34,197,94,.12);
  border: 1px solid rgba(52,211,153,.45);
}

/* ---------------------------------------------------------
   Forms (Underline-only inputs)
--------------------------------------------------------- */
.ss-form-row{
  display:flex;
  flex-direction: column;
  margin-bottom: .8rem;
}
.ss-form-row label{
  font-size: .8rem;
  margin-bottom: .25rem;
  color: rgba(229,231,235,.75);
}

/* underline fields */
.ss-form-row input,
.ss-form-row textarea,
.ss-form-row select{
  font-family: inherit;
  font-size: .95rem;
  padding: .45rem 0;
  border: 0;
  border-bottom: 2px solid rgba(255,255,255,.14);
  border-radius: 0;
  outline: none;
  background: transparent;
  color: var(--ss-text);
}

/* focus */
.ss-form-row input:focus,
.ss-form-row textarea:focus,
.ss-form-row select:focus{
  border-bottom-color: var(--ss-accent);
  box-shadow: 0 10px 0 -8px var(--ss-focus);
}

/* ---------------------------------------------------------
   HERO FULLSCREEN
--------------------------------------------------------- */
.ss-hero-fullscreen{
  position: relative;
  height: 100vh;
  min-height: 520px;
  overflow: hidden;
  background-size: cover;
}
.ss-hero-fullscreen-slides{ width:100%; height:100%; position:relative; }
.ss-hero-fullscreen-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform: scale(1.02);
  transition: opacity .7s ease, transform .7s ease;
}
.ss-hero-fullscreen-slide.is-active{ opacity:1; transform: scale(1); }

.ss-hero-fullscreen-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(15,23,42,.30), rgba(2,6,23,.75));
  display:flex;
  align-items:center;
}
.ss-hero-copy{ max-width: 680px; padding: 3.2rem 0; }

.ss-hero-eyebrow{
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: var(--ss-muted);
  margin: 0 0 .4rem;
}
.ss-hero-title{ margin: 0 0 .7rem; font-size: clamp(1.7rem, 2.3vw + 1rem, 2.4rem); }
.ss-hero-kicker{ margin: 0 0 1rem; font-size: .95rem; color: var(--ss-muted); }

.ss-hero-actions{ display:flex; flex-wrap:wrap; gap:.5rem; }

.ss-hero-indicators{
  position:absolute;
  bottom: 1.6rem;
  left:0; right:0;
  display:flex;
  justify-content:center;
  gap:.45rem;
}
.ss-hero-indicator{
  width:9px;
  height:9px;
  border-radius:999px;
  border: 1px solid var(--ss-accent);
  background: rgba(255,255,255,.10);
  cursor:pointer;
  padding:0;
}
.ss-hero-indicator.is-active{ background: var(--ss-accent); }

@media (max-width: 768px){
  .ss-hero-copy{ max-width: 100%; }
}

/* ---------------------------------------------------------
   Services page list
--------------------------------------------------------- */
.ss-services-list{ display:flex; flex-direction: column; gap: 1.1rem; }
.ss-service-detail{ padding: 1.1rem 1.2rem; }

/* ---------------------------------------------------------
   Stats
--------------------------------------------------------- */
.ss-stats-grid{ margin-top: .8rem; }
.ss-stat-card{ text-align:left; }
.ss-stat-value{ font-size: 1.6rem; font-weight: 650; }
.ss-stat-label{ font-size: .85rem; color: var(--ss-muted); }

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */
.ss-footer{
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(15,23,42,.92);
  position: relative;
  z-index: 1;
}
.ss-footer-inner{
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.6rem 1.25rem 2rem;
}
.ss-footer-brand{ display:flex; align-items:center; gap:.7rem; margin-bottom: 1.3rem; }

.ss-footer-grid{
  display:grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ss-footer-col-title{
  font-size:.78rem;
  font-weight: 600;
  margin-bottom: .3rem;
}
.ss-footer-links{
  display:flex;
  flex-direction: column;
  gap:.12rem;
  font-size:.8rem;
  color: var(--ss-muted);
}

.ss-footer-bottom{
  margin-top: 1.3rem;
  display:flex;
  justify-content: space-between;
  gap:.5rem;
  font-size:.78rem;
  color: var(--ss-muted);
}

@media (max-width: 800px){
  .ss-footer-grid{ grid-template-columns: minmax(0, 1fr); }
  .ss-footer-bottom{ flex-direction: column; align-items:flex-start; }
}

/* ---------------------------------------------------------
   Scroll animations
--------------------------------------------------------- */
[data-anim]{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s ease, transform .65s ease, filter .65s ease, clip-path .65s ease;
  will-change: opacity, transform;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

[data-anim].is-visible{
  opacity: 1;
  transform: none;
  filter: none; /* force remove blur */
  clip-path: inset(0 0 0 0 round 0);
}

/* Variants */
[data-anim="fade-up"]{ transform: translateY(18px); }
[data-anim="fade-down"]{ transform: translateY(-18px); }
[data-anim="fade-left"]{ transform: translateX(22px); }
[data-anim="fade-right"]{ transform: translateX(-22px); }

[data-anim="zoom-in"]{ transform: scale(.985); filter: none; }
[data-anim="zoom-out"]{ transform: scale(1.015); filter: none; }

[data-anim="flip-up"]{ transform: perspective(900px) rotateX(10deg) translateY(14px); }
[data-anim="tilt"]{ transform: translateY(16px) skewY(-0.6deg); }

[data-anim="clip-up"]{ clip-path: inset(18% 0 0 0 round 8px); }
[data-anim="clip-up"].is-visible{ clip-path: inset(0 0 0 0 round 8px); }

[data-anim="fade-in"]{ transform: translateY(10px); }

/* ---------------------------------------------------------
   Service detail hero layout
--------------------------------------------------------- */
.ss-service-hero{
  display:grid;
  gap: 1.8rem;
  align-items:flex-start;
}
.ss-service-hero-media{
  max-width: 420px;
  margin-left:auto;
}
.ss-service-hero-media img{
  border-radius: var(--ss-radius-card);
  border: 0;
  box-shadow: var(--ss-shadow-card);
}

.ss-pill-group{
  margin-top:.7rem;
  display:flex;
  flex-wrap: wrap;
  gap:.4rem;
}
.ss-pill{
  padding:.15rem .7rem;
  border-radius:999px;
  border: 1px solid rgba(255,255,255,.10);
  font-size:.7rem;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: var(--ss-muted);
}

@media (max-width: 900px){
  .ss-service-hero{ grid-template-columns: minmax(0,1fr); }
  .ss-service-hero-media{ max-width: 100%; margin-left: 0; }
}

/* ---------------------------------------------------------
   Testimonials (single version)
--------------------------------------------------------- */
.ss-testimonials .swiper{ padding-bottom: 2.4rem; }

.ss-t-card{
  height:100%;
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  /* smaller ticker cards */
  min-height: 200px;
  padding: .82rem .9rem .8rem;
}

.ss-t-top{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap:10px;
  margin-bottom: 12px;
}

.ss-t-quote{
  margin: 0 0 16px;
  line-height: 1.55;
  color: var(--ss-text);
  opacity: .92;
  font-size: .90rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ss-t-person{ display:flex; gap: 12px; align-items:center; }

.ss-t-avatar{
  width:42px; height:42px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  font-weight: 700;
}

.ss-t-name{ font-weight: 700; }
.ss-t-meta{ font-size: 12px; color: var(--ss-muted); margin-top: 2px; }

.ss-t-stars{ letter-spacing: 2px; }
.ss-t-star{ opacity: 1; color: rgba(251,191,36,.32); }
.ss-t-star.is-on{ color: var(--ss-accent); text-shadow: 0 0 12px rgba(251,191,36,.20); }

.ss-chip--muted{ opacity: .7; border-color: rgba(255,255,255,.10); }

/* Continuous drift support */
.ss-t-swiper .swiper-wrapper{ transition-timing-function: linear !important; }
.ss-t-swiper .swiper-slide{ width: 280px; }
@media (max-width: 768px){
  .ss-t-swiper .swiper-slide{ width: 85%; }
}

/* Premium ticker look */
.ss-testimonials .swiper-button-prev,
.ss-testimonials .swiper-button-next,
.ss-testimonials .swiper-pagination{ display:none !important; }

.ss-t-swiper{
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

/* ---------------------------------------------------------
   Services — Scroll stacking (single version kept)
--------------------------------------------------------- */
.ss-svc-scroll{
  /* Compact the section so heading + stack read as one screen */
  padding: 1.6rem 0 2.4rem;
}

.ss-svc-header{ padding-bottom: .35rem; }

/* Reduce header spacing for the solutions stack */
.ss-svc-header .ss-section-header{ margin-bottom: .85rem; }
.ss-svc-header .ss-section-title{ margin-bottom: .25rem; }
.ss-svc-header .ss-section-sub{ margin-bottom: 0; }

.ss-svc-stage{
  /* Sticky is fallback. When GSAP pinning is enabled it will pin the stage,
     and CSS-sticky can cause overlap. JS adds body.ss-has-gsap. */
  position: sticky;
  top: 64px;
  height: calc(100vh - 64px);
  min-height: 520px;
  overflow: hidden;
  border-radius: var(--ss-radius-card);
  background: rgba(2,6,23,.35);
  box-shadow: 0 14px 40px rgba(0,0,0,.35);
  border: 0;
  isolation: isolate;
}

body.ss-has-gsap .ss-svc-stage{
  position: relative;
  top: auto;
}

.ss-svc-split{
  height:100%;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 2.4vw, 34px);
  /* Tighter padding to reduce empty space and keep the stack centered */
  padding: clamp(12px, 1.8vw, 22px);
  align-items: center;
}

.ss-svc-stack{
  position: relative;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.ss-svc-frame{
  position:absolute;
  width: min(52vh, 620px);
  aspect-ratio: 1 / 1;
  border-radius: 1px;
  overflow:hidden;
  background: rgba(2,6,23,.72);
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
  transition: transform 420ms cubic-bezier(.22, 1, .28, 1), opacity 260ms ease;
  will-change: transform, opacity;
  box-shadow: 0 22px 60px rgba(0,0,0,.55);
}

.ss-svc-frame::before{
  content:'';
  position:absolute;
  inset:0;
  padding: 25px;
  border-radius: 2px;
  background: linear-gradient(135deg, rgba(251,191,36,.95), rgba(239,68,68,.70), rgba(59,130,246,.70));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity: .90;
  z-index: 2;
}

.white-bg {
  background-color: rgba(255, 255, 255, 0.65);
  border-radius: 5px;
}

.ss-svc-frame::after{
  content:'';
  position:absolute;
  inset: 18px;
  border-radius: 1px;
  border: 2px solid rgba(255,255,255,.10);
  pointer-events:none;
  z-index: 2;
}

.ss-svc-frame img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: none;
}

.ss-svc-copy{
  position: relative;
  height:100%;
  display:flex;
  align-items:center;
}

.ss-svc-copyitem{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  opacity:1;
  transform: translateY(22px);
  transition: transform 420ms cubic-bezier(.22, 1, .28, 1), opacity 260ms ease;
  will-change: transform, opacity;
  pointer-events:none;
}

.ss-svc-copycard{
  max-width: 520px;
  width:100%;
  padding: clamp(18px, 2.4vw, 26px);
  background: none !important;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

.ss-svc-scroll .card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.ss-svc-title{
  margin: .35rem 0 .55rem;
  font-size: clamp(1.15rem, 1.2vw + 1rem, 1.45rem);
}

.ss-svc-text{
  margin: 0 0 .8rem;
  color: var(--ss-muted);
  line-height: 1.6;
}

.ss-svc-actions{
  margin-top: 16px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (max-width: 920px){
  .ss-svc-stage{
    top: 58px;
    height: calc(100vh - 58px);
    border-radius: 18px;
  }
  .ss-svc-split{
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .ss-svc-stack{
    position:absolute;
    inset:0;
    height:100%;
    z-index:0;
  }

  .ss-svc-stage::before{
    content:'';
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(2,6,23,.55), rgba(2,6,23,.90));
    z-index: 1;
  }

  .ss-svc-frame{ width: min(92vw, 580px); }

  .ss-svc-copy{
    position: relative;
    z-index: 2;
    justify-content:center;
    text-align:center;
  }

  .ss-svc-copycard{
    max-width: 560px;
    margin: 0 auto;
    background: rgba(213,652,255,.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  .ss-svc-actions{ justify-content:center; }
}

@media (prefers-reduced-motion: reduce){
  .ss-svc-stage{ position: static; height: auto; }
  .ss-svc-split{ grid-template-columns: 1fr; }
  .ss-svc-stack, .ss-svc-copy{ position: static; height: auto; }
  .ss-svc-frame, .ss-svc-copyitem{
    position: static;
    opacity: 1;
    transform: none;
    transition: none;
    pointer-events: auto;
    margin-bottom: 14px;
  }
}

/* ---------------------------------------------------------
   Headings gradient (kept)
--------------------------------------------------------- */
.ss-hero-title,
.ss-section-title,
.ss-svc-title{
  color: var(--ss-grad-gold);
  letter-spacing: -0.01em;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .ss-hero-title,
  .ss-section-title,
  .ss-svc-title{
    background: linear-gradient(90deg, var(--ss-grad-gold) 0%, var(--ss-grad-orange) 45%, var(--ss-grad-orange-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 30px rgba(255,138,0,.10);
  }
}

/* =========================================================
   Affiliates marquee (logos only)
========================================================= */
.ss-affiliates-marquee{
  position: relative;
  overflow: hidden;
  /* logos only (no card background) */
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 6px 0;
}

.ss-affiliates-track{
  display: flex;
  align-items: center;
  gap: 22px;
  width: max-content;
  padding: 0 18px;
  animation: ss-affiliates-marquee 44s linear infinite;
  will-change: transform;
}

.ss-affiliate-logo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  min-width: 120px;
  padding: 6px 10px;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  transform: translateZ(0);
}

.ss-affiliate-logo img{
  height: 90px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  filter: none;
}

/* Text-logo (for affiliates without an image) */
.ss-affiliate-textlogo span{
  font-weight: 800;
  letter-spacing: .14em;
  font-size: 1.05rem;
  text-transform: uppercase;
  background: linear-gradient(90deg, var(--ss-grad-gold), var(--ss-grad-orange), var(--ss-grad-orange-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Keep moving continuously (do not pause on hover) */

@keyframes ss-affiliates-marquee{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-50%,0,0); }
}

@media (max-width: 640px){
  .ss-affiliate-logo{ height: 52px; min-width: 110px; }
  .ss-affiliate-logo img{ height: 34px; }
}

/* =========================================================
   Leadership: org tree + team cards + employee cards
========================================================= */
.ss-tree-wrap{
  margin: 1.2rem 0 1.8rem;
  padding: 1.1rem 1rem;
  border-radius: var(--ss-radius-card);
  background: rgba(15,23,42,.55);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: var(--ss-shadow-soft);
}

.ss-tree-title{
  margin: 0 0 .8rem;
  font-size: .95rem;
  color: rgba(229,231,235,.85);
}

/* The tree can overflow on small screens; keep it usable inside a framed, scrollable area. */
.ss-tree-frame{
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 10px 10px 18px;
  border-radius: 16px;
  background: rgba(2,6,23,.25);
  border: 1px solid rgba(255,255,255,.08);
  scrollbar-gutter: stable both-edges;
}

.ss-tree{
  /* shrink-wrap so the frame can scroll when needed */
  width: max-content;
  margin: 0 auto;
}

.ss-tree ul{
  padding-top: 20px;
  position: relative;
  padding-left: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
  align-items: flex-start;
}

.ss-tree li{
  list-style-type: none;
  text-align: center;
  position: relative;
  /* spacing is inside each node so connector lines stay continuous */
  padding: 20px 18px 0;
}

/* connectors */
.ss-tree li::before,
.ss-tree li::after{
  content: '';
  position: absolute;
  top: 0;
  right: 50%;
  border-top: 1px solid rgba(255,255,255,.14);
  width: 50%;
  height: 20px;
}
.ss-tree li::after{
  right: auto;
  left: 50%;
  border-left: 1px solid rgba(255,255,255,.14);
  width: 50%;
}

.ss-tree li:only-child::after,
.ss-tree li:only-child::before{ display: none; }
.ss-tree li:only-child{ padding-top: 0; }

.ss-tree li:first-child::before,
.ss-tree li:last-child::after{ border: 0 none; }

.ss-tree li:last-child::before{
  border-right: 1px solid rgba(255,255,255,.14);
  border-radius: 0 10px 0 0;
}
.ss-tree li:first-child::after{
  border-radius: 10px 0 0 0;
}

.ss-tree ul ul::before{
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  border-left: 1px solid rgba(255,255,255,.14);
  width: 0;
  height: 20px;
}

.ss-node{
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(2,6,23,.55);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  min-width: 190px;
}

.ss-node:hover{ border-color: rgba(251,191,36,.35); }

.ss-node-name{ font-weight: 800; }
.ss-node-role{ font-size: .82rem; color: var(--ss-muted); }

.ss-team-card{
  min-height: 180px;
}

.ss-team-card .ss-card-title{ font-size: 1.02rem; }

.ss-team-meta{ color: var(--ss-muted); font-size: .9rem; }

.ss-people-grid{ margin-top: .8rem; }

.ss-person-card{
  display: block;
}

.ss-person-card .ss-avatar{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 800;
  margin-bottom: .55rem;
}

.ss-person-card .ss-card-text{ margin-top: .25rem; }

.ss-profile{
  max-width: 760px;
  margin: 0 auto;
}

.ss-profile .ss-card{
  padding: 1.25rem;
}

.ss-profile-top{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.ss-profile-avatar{
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 900;
  font-size: 1.1rem;
}

.ss-profile-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

@media (max-width: 900px){
  .ss-tree-frame{ padding: 10px 8px 16px; }
  .ss-tree li{ padding: 18px 12px 0; }
  .ss-node{ min-width: 160px; padding: 10px 10px; }
  .ss-node-photo{ width: 68px; height: 68px; }
}

@media (max-width: 480px){
  .ss-tree li{ padding: 16px 10px 0; }
  .ss-node{ min-width: 148px; }
  .ss-node-name{ font-size: .95rem; }
  .ss-node-role{ font-size: .78rem; }
}


/* =========================================================
   Feedback marquee (replaces Swiper)
   Same motion style as the old affiliates marquee, but pauses on hover.
========================================================= */
.ss-feedback-marquee{
  position: relative;
  overflow: hidden;
  padding: 6px 0;
}

.ss-feedback-track{
  display: flex;
  gap: 14px;
  width: max-content;
  animation: ss-feedback-marquee 40s linear infinite;
  will-change: transform;
}

.ss-feedback-marquee:hover .ss-feedback-track,
.ss-feedback-marquee:focus-within .ss-feedback-track{
  animation-play-state: paused;
}

@keyframes ss-feedback-marquee{
  from{ transform: translate3d(0,0,0); }
  to{ transform: translate3d(-50%,0,0); }
}

/* =========================================================
   Team member presentation
   (square images 1:1, image → name → rank)
========================================================= */
.ss-node{
  align-items: center;
  gap: 6px;
}

.ss-node-photo{
  width: 76px;
  height: 76px;
  border-radius: 14px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}

.ss-member-card{
  display: block;
}

.ss-member-photo{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  margin-bottom: .75rem;
}

.ss-member-name{
  font-weight: 900;
  font-size: 1.02rem;
}

.ss-member-rank{
  color: var(--ss-muted);
  font-size: .9rem;
  margin-top: .25rem;
}

.ss-member-meta{
  color: rgba(229,231,235,.72);
  font-size: .86rem;
  margin-top: .3rem;
}

.ss-profile-photo{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
}

/* =========================================================
   Leadership page layout
   CEO + top leadership tree, then teams grouped by leader
========================================================= */
.ss-leader-block{ margin-top: 1.1rem; }

.ss-leader-layout{
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.ss-leader-card{
  display: flex;
  align-items: center;
  gap: .9rem;
}

.ss-leader-photo{
  width: 90px;
  height: 90px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.ss-team-badge{
  display: inline-block;
  padding: .28rem .58rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size: .78rem;
  color: rgba(229,231,235,.92);
  margin-bottom: .65rem;
}

@media (max-width: 900px){
  .ss-leader-layout{ grid-template-columns: minmax(0, 1fr); }
}


/* Honeypot field (anti-bot) */
.ss-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }


/* =========================================================
   Affiliates split section (3 vertical columns + text)
========================================================= */
.ss-affiliates-split{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 1.2rem;
  align-items: center;
}

.ss-affiliates-panel{
  background: #ffffff;
  border-radius: var(--ss-radius-card);
  padding: 14px;
  border: 1px solid rgba(2,6,23,.08);
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
}

.ss-affiliates-columns{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  height: 360px;
}

.ss-aff-col{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(2,6,23,.03);
  border: 1px solid rgba(2,6,23,.06);
}

.ss-aff-col-track{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  will-change: transform;
  animation: ss-aff-col-up 34s linear infinite;
}

.ss-aff-col--down .ss-aff-col-track{
  animation-name: ss-aff-col-down;
}

/* Affiliate items inside the vertical columns (no special logo CSS, just sizing/contain) */
.ss-affiliates-panel .ss-affiliate-logo{
  height: 86px;
  min-width: 0;
  width: 100%;
  padding: 10px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(2,6,23,.08);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(2,6,23,.08);
}

.ss-affiliates-panel .ss-affiliate-logo img{
  height: 60px;
  max-width: 100%;
  object-fit: contain;
}

@keyframes ss-aff-col-up{
  from{ transform: translate3d(0, 0, 0); }
  to{ transform: translate3d(0, -50%, 0); }
}

@keyframes ss-aff-col-down{
  from{ transform: translate3d(0, -50%, 0); }
  to{ transform: translate3d(0, 0, 0); }
}

@media (max-width: 1000px){
  .ss-affiliates-columns{ height: 320px; }
}

@media (max-width: 900px){
  .ss-affiliates-split{ grid-template-columns: minmax(0, 1fr); }
  .ss-affiliates-columns{ height: 300px; }
}
@media (min-width: 600px) {
.ss-svc-copycard {
    font-size: 10px;
}
}