/* SA International - Combined design CSS */
/* Auto-generated: sa-premium + sa-phase1 + sa-phase2 + sa-ticker */


/* ===== sa-premium.css ===== */
/* SA INTERNATIONAL - PREMIUM POLISH */

/* 1. Smooth scroll + minimal scrollbar */
html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 5px; background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #2d4a5b; }

/* 2. Enhanced scroll reveal - blur clears as element enters */
.reveal:not(.visible) { filter: blur(3px); }
.reveal.visible {
  filter: blur(0) !important;
  transition: opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1), filter .65s ease !important;
}

/* 3. Hero text entrance */
.hero .display,
.hero h1,
.hero .elementor-heading-title {
  animation: sa-fade-up 1s cubic-bezier(.22,1,.36,1) .1s both;
}
.hero .lede {
  animation: sa-fade-up 1s cubic-bezier(.22,1,.36,1) .28s both;
}
.hero .hero-actions { animation: sa-fade-up 1s cubic-bezier(.22,1,.36,1) .46s both; }
.hero .hero-meta    { animation: sa-fade-up 1s cubic-bezier(.22,1,.36,1) .64s both; }
.hero .partner-logos { animation: sa-fade-up 1s cubic-bezier(.22,1,.36,1) .8s both; }
.hero .eyebrow      { animation: sa-fade-up 1s cubic-bezier(.22,1,.36,1) both; }
@keyframes sa-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 4. Hero figure float (desktop only) */
@media (min-width: 861px) {
  .hero-figure { animation: sa-float 8s ease-in-out infinite; }
  @keyframes sa-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-9px); }
  }
}

/* 5. Button shimmer on hover */
.btn--primary,
.btn--ghost,
a.header-cta {
  position: relative !important;
  overflow: hidden !important;
}
.btn--primary::before,
.btn--ghost::before,
a.header-cta::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
  z-index: 1;
}
.btn--primary:hover::before,
.btn--ghost:hover::before,
a.header-cta:hover::before { left: 180%; }

/* 6. Product card - image zoom + lift */
.product-media { overflow: hidden; }
.product-media img {
  transition: transform .55s cubic-bezier(.22,1,.36,1) !important;
  will-change: transform;
}
.sa-product-card:hover .product-media img { transform: scale(1.04) !important; }
.sa-product-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 24px 56px -12px rgba(30,77,107,.2) !important;
}

/* 7. Corner accents expand on hover */
.corner { transition: all .35s ease; }
.sa-product-card:hover .corner.tl { top: -2px; left: -2px; width: 14px; height: 14px; }
.sa-product-card:hover .corner.tr { top: -2px; right: -2px; width: 14px; height: 14px; }
.sa-product-card:hover .corner.bl { bottom: -2px; left: -2px; width: 14px; height: 14px; }
.sa-product-card:hover .corner.br { bottom: -2px; right: -2px; width: 14px; height: 14px; }

/* 8. Service row arrow colour + shift on hover */
.svc-row .go { transition: all .25s cubic-bezier(.22,1,.36,1) !important; }
.svc-row:hover .go {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  transform: translateX(3px) !important;
}

/* 9. Scroll progress bar - gold gradient glow */
.scroll-progress {
  box-shadow: 0 0 10px rgba(201,168,76,.35) !important;
  background: linear-gradient(90deg, var(--accent), #c9a84c) !important;
}

/* 10. Stagger reveal delays */
[data-d="1"] { transition-delay: .06s; }
[data-d="2"] { transition-delay: .13s; }
[data-d="3"] { transition-delay: .20s; }
[data-d="4"] { transition-delay: .27s; }
[data-d="5"] { transition-delay: .34s; }
[data-d="6"] { transition-delay: .41s; }

/* 11. Stat numbers - lift on hover */
.stat { transition: transform .3s ease !important; cursor: default; }
.stat:hover { transform: translateY(-3px); }

/* 12. Footer links - indent on hover */
.sa-foot-col a {
  transition: color .18s, padding-left .18s !important;
  display: block !important;
}
.sa-foot-col a:hover {
  padding-left: 6px !important;
  color: rgba(255,255,255,.9) !important;
}

/* 13. Industry grid - scale on hover */
.ind { transition: transform .4s var(--ease), box-shadow .4s ease !important; }
.ind:hover {
  transform: scale(1.02) !important;
  z-index: 2;
  box-shadow: 0 8px 32px rgba(0,0,0,.3) !important;
}

/* 14. Know How cert items */
.cert-item { transition: transform .35s ease, box-shadow .35s ease !important; }
.cert-item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 10px 28px -6px rgba(30,77,107,.12) !important;
}

/* 15. Brand mark ring glow on hover */
.brand-mark { transition: box-shadow .3s ease; }
.brand:hover .brand-mark { box-shadow: 0 0 0 3px rgba(58,93,114,.28); }

/* 16. Section eyebrow - gold left border */
.sec-head > .eyebrow {
  padding-left: 14px;
  border-left: 2px solid #c9a84c;
}

/* ===== sa-phase1.css ===== */
/* ============================================================
   SA PREMIUM — PHASE 1
   Grid lines, ambient depth, section polish
============================================================ */

/* --- GRID OVERLAY CLASSES (injected by JS) --- */
.sa-grid-dark {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.038) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.038) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  pointer-events: none; z-index: 0;
}
.sa-grid-light {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(20,24,28,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,24,28,.05) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: -1px -1px;
  pointer-events: none; z-index: 0;
}
/* --- VARIED SECTION BACKGROUNDS (premium, no dots) --- */

/* Corner grid - fades from top-right corner */
.sa-bg-cornergrid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(20,24,28,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,24,28,.055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 55% 65% at 100% 0%, rgba(0,0,0,1) 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 55% 65% at 100% 0%, rgba(0,0,0,1) 0%, transparent 72%);
}

/* Diagonal hatching - very faint scattered lines */
.sa-bg-diag {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 44px,
    rgba(20,24,28,.04) 44px,
    rgba(20,24,28,.04) 45px
  );
  -webkit-mask-image: linear-gradient(120deg, transparent 15%, rgba(0,0,0,.65) 42%, rgba(0,0,0,.3) 68%, transparent 88%);
  mask-image: linear-gradient(120deg, transparent 15%, rgba(0,0,0,.65) 42%, rgba(0,0,0,.3) 68%, transparent 88%);
}

/* Sparse horizontal rules */
.sa-bg-hlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(20,24,28,.05) 1px, transparent 1px);
  background-size: 100% 68px;
  -webkit-mask-image: linear-gradient(to right, transparent 5%, rgba(0,0,0,.55) 22%, rgba(0,0,0,.55) 78%, transparent 95%);
  mask-image: linear-gradient(to right, transparent 5%, rgba(0,0,0,.55) 22%, rgba(0,0,0,.55) 78%, transparent 95%);
}

/* Broken grid - partial fragment in bottom-left */
.sa-bg-broken {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(20,24,28,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,24,28,.06) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 50% 55% at 0% 100%, rgba(0,0,0,.85) 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 50% 55% at 0% 100%, rgba(0,0,0,.85) 0%, transparent 70%);
}

/* Left-edge vertical lines only */
.sa-bg-vlines {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(20,24,28,.05) 0,
    rgba(20,24,28,.05) 1px,
    transparent 1px,
    transparent 72px
  );
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,.9) 0%, rgba(0,0,0,.15) 30%, transparent 50%);
  mask-image: linear-gradient(to right, rgba(0,0,0,.9) 0%, rgba(0,0,0,.15) 30%, transparent 50%);
}

/* --- HERO GRID ENHANCEMENT --- */
/* Upgrade existing homepage hero-grid opacity */
.hero-grid { opacity: .55 !important; }

/* Ambient radial glow (accent colour pool behind left copy) */
.hero::after {
  content: '';
  position: absolute;
  top: 10%; left: -10%;
  width: 55%; height: 80%;
  background: radial-gradient(ellipse, rgba(58,93,114,.18) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

/* --- PAGE HERO SECTIONS (inner pages) --- */
/* Sections need relative positioning for absolute grid child */
.page-hero { position: relative; overflow: hidden; }

/* Ambient light pool behind heading */
.sa-page-hero-glow {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  background:
    radial-gradient(ellipse 60% 100% at 25% 50%, rgba(58,93,114,.22) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

/* One-time shine sweep across page-hero on load */
.sa-page-hero-shine {
  position: absolute; inset: 0;
  background: linear-gradient(
    108deg,
    transparent 30%,
    rgba(255,255,255,.055) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: sa-hero-shine 1.4s cubic-bezier(.22,1,.36,1) 0.6s forwards;
  pointer-events: none; z-index: 1;
}
@keyframes sa-hero-shine {
  to { transform: translateX(220%); }
}

/* --- CTA SECTION --- */
.cta { position: relative; overflow: hidden; }
/* Gold accent top border on CTA */
.cta::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c9a84c 30%, #c9a84c 70%, transparent);
  z-index: 1;
}

/* --- FOOTER GRID --- */
.sa-foot-top { position: relative; overflow: hidden; }

/* --- SECTION SEPARATORS --- */
/* Thin accent line at top of alternating sections */
.section:nth-of-type(even)::before {
  content: '';
  position: absolute; top: 0; left: 48px;
  width: 48px; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: .5;
}

/* --- STATS / NUMBERS SECTION GLOW --- */
.stats { position: relative; }
.stats::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 100% 200% at 50% 50%, rgba(58,93,114,.06) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

/* ===== sa-phase2.css ===== */
/* ============================================================
   SA PREMIUM — PHASE 2
   Breathing glow, cursor spotlight, card tilt, heading reveal
============================================================ */

/* 1. Breathing ambient glow injected into hero */
.sa-hero-glow {
  position: absolute;
  top: -10%; left: -15%;
  width: 65%; height: 120%;
  background: radial-gradient(ellipse, rgba(58,93,114,.22) 0%, transparent 65%);
  animation: sa-breathe 7s ease-in-out infinite;
  pointer-events: none; z-index: 0;
  will-change: transform, opacity;
}
@keyframes sa-breathe {
  0%, 100% { transform: scale(1);    opacity: .6; }
  50%       { transform: scale(1.12); opacity: .9; }
}

/* 2. Cursor spotlight - follows mouse on dark sections */
.sa-cursor-glow {
  position: absolute; inset: 0;
  background: radial-gradient(
    280px circle at var(--cx, 50%) var(--cy, 50%),
    rgba(58,93,114,.13) 0%,
    transparent 70%
  );
  pointer-events: none; z-index: 0;
  transition: background .08s linear;
}

/* 3. Product card 3D tilt - CSS side */
.sa-product-card {
  transform-style: preserve-3d;
  will-change: transform;
}

/* 4. Section heading animated underline */
.sec-head .h2,
.sec-head h2 {
  display: inline-block;
}
.sec-head .h2::after,
.sec-head h2::after {
  content: '';
  display: block;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, #c9a84c 100%);
  border-radius: 2px;
  margin-top: 8px;
  transition: width .9s cubic-bezier(.22,1,.36,1);
}
.sec-head.sa-in-view .h2::after,
.sec-head.sa-in-view h2::after {
  width: 52px;
}

/* 5. Service row - animated left border on hover */
.svc-row {
  border-left: 2px solid transparent;
  transition: border-color .25s ease, padding-left .25s ease, background .18s !important;
  padding-left: 0;
}
.svc-row:hover {
  border-left-color: var(--accent) !important;
  padding-left: 12px !important;
  margin-left: -14px !important;
}

/* 6. Stats numbers - subtle glow when visible */
.stat.sa-counted .stat-num,
.stat.sa-counted [data-count] {
  text-shadow: 0 0 28px rgba(58,93,114,.35);
  transition: text-shadow .6s ease;
}

/* 7. page-hero eyebrow shimmer */
.page-hero .eyebrow {
  animation: sa-fade-up .8s cubic-bezier(.22,1,.36,1) .3s both;
}

/* ===== sa-ticker.css ===== */
/* SA-TICKER - credentials only, no ticker animations */
.sa-ticker-label { display:none !important; }
.sa-ticker-wrap  { display:none !important; }

/* ---- CREDENTIALS STRIP ---- */
.sa-credentials-wrap {
  background: #030b14;
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 0;
}
.sa-credentials-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid rgba(255,255,255,.05);
}
.sa-cred-item {
  padding: 28px 32px;
  border-right: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: background .2s;
}
.sa-cred-item:hover { background: rgba(58,93,114,.1); }
.sa-cred-brand {
  font-family: "Roboto Slab", serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  display: block;
}
.sa-cred-brand.belzona { color: #e05050; }
.sa-cred-brand.rydlyme { color: #009cde; }
.sa-cred-brand.condat  { color: #6699dd; }
.sa-cred-brand.sa      { color: #c9a84c; }
.sa-cred-title {
  font-family: "Inter", sans-serif;
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.82); line-height: 1.3; display: block;
}
.sa-cred-sub {
  font-family: "Roboto Slab", serif;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.28); display: block;
}
@media (max-width: 860px) { .sa-credentials-inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .sa-credentials-inner { grid-template-columns: 1fr; } .sa-cred-item { padding: 20px 24px; } }