*, *::before, *::after { box-sizing: border-box; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }

/* Progress bar */
#scroll-progress { position:fixed; top:0; left:0; height:3px; z-index:200; background:#E8763A; width:0%; transition:width 0.1s linear; }

/* FAB */
#fab { position:fixed; bottom:32px; right:32px; z-index:50; background:#00342b; color:white; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 32px rgba(0,52,43,0.25); cursor:pointer; border:none; transform:scale(0); opacity:0; transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1); }
#fab.show { transform:scale(1); opacity:1; }

/* Reveal */
.reveal { opacity:0; transform:translateY(22px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-left { opacity:0; transform:translateX(-22px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal-left.visible { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(22px); transition:opacity 0.6s ease, transform 0.6s ease; }
.reveal-right.visible { opacity:1; transform:translateX(0); }

/* Ripple */
.ripple-btn { position:relative; overflow:hidden; }
.ripple-btn .ripple { position:absolute; border-radius:50%; transform:scale(0); animation:ripple-anim 0.6s linear; background:rgba(255,255,255,0.28); pointer-events:none; }
@keyframes ripple-anim { to { transform:scale(4); opacity:0; } }

/* Mobile nav */
.mobile-menu { position:fixed; inset:0; top:65px; z-index:49; background:rgba(255,255,255,0.98); backdrop-filter:blur(20px); padding:32px 24px; transform:translateX(100%); transition:transform 0.35s cubic-bezier(0.4,0,0.2,1); display:flex; flex-direction:column; gap:8px; }
.mobile-menu.open { transform:translateX(0); }
.mobile-menu a, .mobile-menu button { display:block; padding:14px 16px; font-family:Manrope,sans-serif; font-weight:700; font-size:18px; color:#00342b; border-radius:12px; transition:background 0.15s; text-decoration:none; background:none; border:none; cursor:pointer; width:100%; text-align:left; }
.mobile-menu a:hover { background:rgba(0,52,43,0.06); }
.mob-cta { background:#E8763A !important; color:white !important; text-align:center !important; margin-top:12px; padding:16px !important; border-radius:12px; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:8px; background:none; border:none; }
.hamburger span { display:block; width:24px; height:2px; background:#00342b; border-radius:2px; transition:all 0.3s ease; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
@media (max-width:768px) {
  .hamburger { display:flex; }
  .desktop-nav, .desktop-actions { display:none !important; }
}

/* Section label */
.slabel { font-family:'Work Sans',sans-serif; font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:#6B7A76; margin-bottom:12px; display:block; }

/* Underlines */
.ul-coral { background-image:linear-gradient(transparent 65%,#F5D2B4 65%); background-repeat:no-repeat; background-size:100% 100%; }
.ul-coral { background-image:linear-gradient(transparent 65%,#A8D0FB 65%); background-repeat:no-repeat; background-size:100% 100%; }

/* ── HERO ── */
.hero-section {
  background: #F2F1EC;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 620px;
}

/* Portrait background */
@keyframes hero-in { from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
  @keyframes pulse-dot { 0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(16,185,129,0.4);} 50%{box-shadow:0 0 0 4px rgba(16,185,129,0);} }

/* Intent switch */
.intent-switch {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(0,52,43,0.1);
  border-radius: 999px; padding: 5px 5px 5px 16px;
  font-family: 'Work Sans', sans-serif; font-size: 13px;
  font-weight: 500; color: #6B7A76;
  animation: hero-in 0.5s ease both;
  margin-bottom: 24px;
}
.switch-tabs { display: flex; gap: 4px; }
.switch-tab {
  padding: 7px 18px; border-radius: 999px; border: none;
  font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 13px;
  cursor: pointer; transition: all 0.25s; background: transparent; color: #6B7A76; white-space: nowrap;
  text-decoration: none; display: inline-block;
}
.switch-tab.active { background: #00342b; color: white; box-shadow: 0 2px 12px rgba(0,52,43,0.25); }
.switch-tab:not(.active):hover { background: rgba(0,52,43,0.07); color: #112C4E; }

/* Hero headline */
.hero-h1 {
  font-family: Manrope, sans-serif; font-weight: 700;
  font-size: clamp(42px, 4vw, 64px);
  line-height: 1.08; letter-spacing: -0.03em;
  color: #112C4E; margin: 0 0 16px; max-width: 100%;
  animation: hero-in 0.5s 0.06s ease both; opacity: 0;
}
.hero-h1 em { font-style: italic; color: #55A8FD; font-weight: 800; }
.hero-sub {
  font-family: 'Work Sans', sans-serif; font-size: 16px;
  color: #6B7A76; line-height: 1.6; max-width: 520px; margin: 18px 0 0;
  animation: hero-in 0.5s 0.14s ease both; opacity: 0;
}
.hero-ctas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  animation: hero-in 0.5s 0.22s ease both; opacity: 0;
  margin-top: 40px; margin-bottom: 28px;
}
.cta-coral {
  display: inline-flex; align-items: center; gap: 9px;
  background: #E8763A; color: white; border: none;
  border-radius: 12px; padding: 15px 30px;
  font-family: Manrope, sans-serif; font-weight: 800; font-size: 15px;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 24px rgba(232,118,58,0.28); transition: all 0.18s;
}
.cta-coral:hover { background: #d4682e; transform: translateY(-2px); }
.cta-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  color: #112C4E; font-family: Manrope, sans-serif; font-weight: 600; font-size: 14px;
  text-decoration: none; padding: 13px 20px; border-radius: 12px;
  border: 1.5px solid rgba(0,52,43,0.2); background: rgba(255,255,255,0.6);
  transition: all 0.15s;
}
.cta-ghost:hover { border-color: #00342b; background: white; }

/* Result card in hero */
.result-card {
  position: absolute; bottom: 90px; right: 3%;
  z-index: 20; background: white;
  border: 1px solid rgba(0,52,43,0.09);
  border-radius: 16px; padding: 18px 20px; width: 260px;
  box-shadow: 0 4px 20px rgba(0,52,43,0.1);
  animation: hero-in 0.55s 0.9s both;
}
.rc-item:last-child { margin-bottom: 0; }
.rc-text strong { font-weight: 700; color: #112C4E; }
/* Matched badge */
/* Ticker */
@keyframes ticker-scroll { 0%{transform:translateX(0);} 100%{transform:translateX(-50%);} }
.ticker-wrap { overflow:hidden; flex:1; -webkit-mask-image:linear-gradient(to right,transparent 0%,black 4%,black 96%,transparent 100%); mask-image:linear-gradient(to right,transparent 0%,black 4%,black 96%,transparent 100%); }
.ticker-track { display:flex; gap:10px; width:max-content; animation:ticker-scroll 24s linear infinite; }
.ticker-wrap:hover .ticker-track { animation-play-state:paused; }
.ticker-card { flex-shrink:0; display:flex; align-items:center; gap:11px; background:white; border:1px solid rgba(0,52,43,0.08); border-radius:10px; padding:10px 16px; text-decoration:none; min-width:185px; cursor:pointer; transition:border-color 0.15s; }
.ticker-card:hover { border-color:rgba(0,52,43,0.18); }
.ticker-av { width:34px; height:34px; border-radius:50%; overflow:hidden; flex-shrink:0; background:#dde8e4; }
.ticker-av img { width:100%; height:100%; object-fit:cover; object-position:top; }
.ticker-name { font-family:Manrope,sans-serif; font-weight:700; font-size:12px; color:#112C4E; margin:0 0 2px; display:flex; align-items:center; gap:3px; }
.ticker-co { font-family:'Work Sans',sans-serif; font-size:11px; color:#6B7A76; margin:0; }
.ticker-co strong { color:#E8763A; font-weight:600; }

/* Flag chips for sourcing markets ticker */
.flag-chip { flex-shrink:0; display:flex; align-items:center; gap:12px; background:white; border:1px solid rgba(0,52,43,0.08); border-radius:12px; padding:12px 20px; min-width:180px; }
.flag-emoji { width:36px; height:36px; border-radius:50%; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 1px 4px rgba(0,0,0,0.15); background:#f0f0f0; }
.flag-emoji img { width:52px; height:36px; object-fit:cover; object-position:center; }
.flag-name { font-family:Manrope,sans-serif; font-weight:700; font-size:13px; color:#112C4E; margin:0 0 2px; }
.flag-sub { font-family:'Work Sans',sans-serif; font-size:11px; color:#9ca3af; margin:0; }

/* Category cards with photos */
.cat-card { background:white; border-radius:18px; border:1px solid #E5E7EB; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow 0.2s ease, transform 0.2s ease; text-decoration:none; }
.cat-card:hover { box-shadow:0 8px 28px rgba(0,52,43,0.10); transform:translateY(-2px); }
.cat-img { width:100%; height:240px; overflow:hidden; background:#EEF2F4; }
.cat-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease; }
.cat-card:hover .cat-img img { transform:scale(1.05); }
.cat-body { padding:20px 22px 24px; }
.cat-name { font-family:Manrope,sans-serif; font-weight:800; font-size:15px; color:#112C4E; margin:0 0 6px; }
.cat-sub { font-family:'Work Sans',sans-serif; font-size:12px; color:#9ca3af; margin:0; line-height:1.5; }
.cat-card-cta .cat-body { background:#fafdfb; }
.cat-card-cta:hover { border-color:rgba(0,52,43,0.25); }

/* Comparison table */
.comp-row { border-bottom:1px solid #F5F5F5; }
.comp-label { padding:22px 20px; font-family:'Work Sans',sans-serif; font-size:14px; font-weight:600; color:#112C4E; vertical-align:middle; }
.comp-cell { padding:22px 20px; text-align:center; font-family:'Work Sans',sans-serif; font-size:14px; vertical-align:middle; }
.comp-bad { color:#9ca3af; }
.comp-mid { color:#6B7A76; }
.comp-good { color:white; font-weight:600; display:flex; align-items:center; justify-content:center; gap:6px; }
.comp-highlight { background:#005844; border-left:1px solid rgba(0,52,43,0.15); border-right:1px solid rgba(0,52,43,0.15); }

/* Use case cards */
.uca-card { position:relative; background:#FFFFFF; border:1px solid #DDE0E6; border-radius:20px; padding:36px 36px; overflow:hidden; cursor:pointer; transition:transform 0.2s ease, box-shadow 0.2s ease; text-decoration:none; display:flex; flex-direction:column; }
.uca-card:hover { transform:translateY(-2px); box-shadow:0 4px 16px rgba(0,52,43,0.08); }
.uca-num { position:absolute; bottom:-20px; right:16px; font-family:Manrope,sans-serif; font-weight:900; font-size:100px; line-height:1; color:#00342b; opacity:0.03; pointer-events:none; user-select:none; }
.uca-cta-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; color:#55A8FD; background:#ffffff; border:1.5px solid #cfe2fb; flex-shrink:0; opacity:1; transition:all 0.2s ease; }
.uca-card:hover .uca-cta-btn { background:#55A8FD; border-color:#55A8FD; color:#ffffff; transform:translateX(3px); }

/* How it works steps */
.step-num { width:40px; height:40px; border-radius:50%; background:rgba(232,118,58,0.1); border:2px solid rgba(232,118,58,0.25); display:flex; align-items:center; justify-content:center; font-family:Manrope,sans-serif; font-weight:800; font-size:16px; color:#E8763A; flex-shrink:0; }

/* SEO accordion */
.seo-item { border-bottom:1px solid #E5E7EB; }
.seo-btn { width:100%; text-align:left; background:none; border:none; display:flex; justify-content:space-between; align-items:flex-start; padding:28px 0; cursor:pointer; gap:20px; }
.seo-btn:hover .seo-title { color:#00342b; }
.seo-title { font-family:Manrope,sans-serif; font-weight:700; font-size:18px; color:#112C4E; line-height:1.3; transition:color 0.15s; text-align:left; }
.seo-icon { width:32px; height:32px; border-radius:50%; background:#F5F7FA; border:1px solid #E5E7EB; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.2s; margin-top:3px; }
.seo-item.open .seo-icon { background:#00342b; border-color:#00342b; transform:rotate(45deg); }
.seo-item.open .seo-icon span { color:white; }
.seo-body { max-height:0; overflow:hidden; transition:max-height 0.4s ease; }
.seo-body-inner { padding:0 48px 32px 0; }
.seo-body-inner p { font-family:'Work Sans',sans-serif; font-size:15px; color:#5F6B67; line-height:1.85; margin:0 0 16px; max-width:760px; }
.seo-body-inner p:last-child { margin-bottom:0; }
.seo-body-inner h4 { font-family:Manrope,sans-serif; font-weight:700; font-size:14px; color:#112C4E; margin:20px 0 8px; }
.seo-body-inner ul { margin:0 0 16px; padding-left:0; list-style:none; }
.seo-body-inner ul li { font-family:'Work Sans',sans-serif; font-size:15px; color:#5F6B67; line-height:1.75; padding-left:20px; position:relative; margin-bottom:6px; }
.seo-body-inner ul li::before { content:''; position:absolute; left:0; top:11px; width:6px; height:6px; border-radius:50%; background:#E8763A; }
.seo-body-inner strong { font-weight:600; color:#112C4E; }

/* CTA band */
.cta-band { background:linear-gradient(135deg,#00342b 0%,#004d40 100%); border-radius:24px; padding:64px; position:relative; overflow:hidden; }
.cta-band::before { content:''; position:absolute; top:-80px; right:-80px; width:360px; height:360px; border-radius:50%; background:rgba(85,168,253,0.07); pointer-events:none; }

/* Hero bottom strip */
.hero-bottom-strip {
  position: relative; z-index: 10;
  max-width: 1920px; margin: 0 auto;
  padding: 20px 80px 24px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(0,52,43,0.07);
  margin-top: 40px;
}

@media (max-width:768px) {
  .hero-h1 {
  font-family: Manrope, sans-serif; font-weight: 700;
  font-size: clamp(42px, 4vw, 64px);
  line-height: 1.08; letter-spacing: -0.03em;
  color: #112C4E; margin: 0 0 16px; max-width: 100%;
  animation: hero-in 0.5s 0.06s ease both; opacity: 0;
}
  .result-card { display:none; }
  .cta-band { padding:40px 28px; }
  .hero-bottom-strip { padding:12px 24px; flex-direction:column; gap:12px; }
  .seo-body-inner { padding:0 0 28px; }
}

/* ===== EXPERT PROFILE STACK ===== */

/* World-map SVG · texture only, subliminal */
.hero-worldmap-img {
  position: absolute;
  top: 60%;
  right: 0;
  transform: translateY(-50%);
  width: 80%;
  height: auto;
  max-height: 95%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.28;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 25%, rgba(0,0,0,0.4) 45%, rgba(0,0,0,0.8) 65%, black 80%);
  mask-image: linear-gradient(to right, transparent 0%, transparent 25%, rgba(0,0,0,0.4) 45%, rgba(0,0,0,0.8) 65%, black 80%);
  user-select: none;
}

.hero-hubs {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 2; pointer-events: none; overflow: hidden;
}
.hero-hubs .hub-accent { opacity: 0; animation: hub-fade-in 0.8s ease 1.2s forwards; }
@keyframes hub-fade-in { to { opacity: 1; } }

/* Market dots on world map · sync with expert card rotation */
.market-dots {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
}
.market-dot {
  position: absolute;
  transform: translate(-50%, -50%);
}
.market-dot .dot-core {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #E8763A;
  opacity: 0.28;
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.6s ease;
  position: relative;
  z-index: 2;
}
.market-dot .dot-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(232,118,58,0.35);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.market-dot.active .dot-core {
  opacity: 1;
  transform: scale(1.5);
  box-shadow: 0 0 10px rgba(232,118,58,0.55);
}
.market-dot.active .dot-ring {
  opacity: 1;
  animation: dot-pulse 1.8s ease-out infinite;
}
@keyframes dot-pulse {
  0%   { transform: scale(0.8); opacity: 0.9; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* Stack container */
.sourcing-stack {
  position: absolute;
  top: 50%;
  right: 8%;
  transform: translateY(-50%);
  width: 420px;
  height: 520px;
  z-index: 15;
}

/* Expert profile card base */
.s-card {
  position: absolute;
  top: 0; left: 0;
  width: 300px;
  background: #FFFFFF;
  border: 1px solid rgba(0,52,43,0.08);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform-origin: top left;
  transition:
    transform 0.7s cubic-bezier(.22,.61,.36,1),
    opacity 0.7s cubic-bezier(.22,.61,.36,1),
    box-shadow 0.7s cubic-bezier(.22,.61,.36,1);
}

/* Portrait photo */
.s-card .ep-photo {
  width: 100%;
  height: 260px;
  overflow: hidden;
  background: #1a2e3b;
  flex-shrink: 0;
}
.s-card .ep-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}

/* Card info body — fixed height, relative for logo anchor */
.s-card .ep-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 185px;
  flex-shrink: 0;
  position: relative;
}

/* Card body */
.s-card-body, .ep-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Name + verified badge */
.ep-name {
  font-family: Manrope, sans-serif;
  font-weight: 800;
  font-size: 17px;
  color: #112C4E;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}
.ep-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Work Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #059669;
}
.ep-verified-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #10B981; flex-shrink: 0;
}

/* Product categories — always 2+1 layout */
.ep-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ep-cat {
  font-family: 'Work Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: #6B7A76;
  background: #F5F7FA;
  border: 1px solid #E5E7EB;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
/* Force line break before 3rd tag */
.ep-cat:nth-child(3) {
  clear: both;
}
.ep-cat-break {
  flex-basis: 100%;
  height: 0;
}

/* Country row — circular flag image */
.ep-country-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Work Sans', sans-serif;
  font-size: 12px;
  color: #6B7A76;
  padding-top: 4px;
  border-top: 1px solid rgba(0,52,43,0.06);
}
.ep-flag {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  background: #f0f0f0;
}
.ep-flag img {
  width: 32px;
  height: 22px;
  object-fit: cover;
  object-position: center;
}
.ep-country-name { font-weight: 600; color: #112C4E; }

/* Previously at section — logo anchored bottom-right */
.ep-prev {
  position: absolute;
  bottom: 16px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.ep-prev-label {
  font-family: 'Work Sans', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #9ca3af;
  text-transform: uppercase;
}
.ep-prev-logo-wrap {
  height: 34px;
  width: 130px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.ep-prev-logo {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  object-position: right center;
  filter: grayscale(1) brightness(0.55) contrast(1.2);
  mix-blend-mode: multiply;
  transition: filter 0.4s ease;
  display: block;
}
.s-card.rank-0 .ep-prev-logo {
  filter: grayscale(1) brightness(0.55) contrast(1.2);
  mix-blend-mode: multiply;
}
.ep-prev-company {
  font-family: Manrope, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #6B7A76;
  letter-spacing: -0.01em;
  text-align: right;
}

/* Clickable card hover effect */
.s-card[data-url] {
  cursor: pointer;
}
.s-card[data-url].rank-0:hover {
  transform: translate(0, -5px) scale(1.01);
  box-shadow: 0 28px 56px rgba(0,52,43,0.18), 0 2px 8px rgba(0,52,43,0.06);
}
.s-card[data-url].rank-0:hover .ep-photo img {
  transform: scale(1.05);
}
/* "View profile" pill that appears on hover */
.ep-view-profile {
  position: absolute;
  bottom: 14px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: Manrope, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #00342b;
  background: rgba(0,52,43,0.07);
  border-radius: 999px;
  padding: 5px 12px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.s-card.rank-0:hover .ep-view-profile {
  opacity: 1;
  transform: translateY(0);
}

/* INTRO ANIMATION · grid-entry states (4 cards in 2x2 before collapsing to stack) */
.s-card.grid-tl {
  transform: translate(20px, 20px) scale(0.38);
  opacity: 0; z-index: 20;
  box-shadow: 0 8px 24px rgba(0,52,43,0.08);
  transition: transform 0.7s cubic-bezier(.22,.61,.36,1), opacity 0.5s ease;
}
.s-card.grid-tr {
  transform: translate(210px, 20px) scale(0.38);
  opacity: 0; z-index: 20;
  box-shadow: 0 8px 24px rgba(0,52,43,0.08);
  transition: transform 0.7s cubic-bezier(.22,.61,.36,1), opacity 0.5s ease;
}
.s-card.grid-bl {
  transform: translate(20px, 260px) scale(0.38);
  opacity: 0; z-index: 20;
  box-shadow: 0 8px 24px rgba(0,52,43,0.08);
  transition: transform 0.7s cubic-bezier(.22,.61,.36,1), opacity 0.5s ease;
}
.s-card.grid-br {
  transform: translate(210px, 260px) scale(0.38);
  opacity: 0; z-index: 20;
  box-shadow: 0 8px 24px rgba(0,52,43,0.08);
  transition: transform 0.7s cubic-bezier(.22,.61,.36,1), opacity 0.5s ease;
}
.s-card.grid-tl.grid-visible,
.s-card.grid-tr.grid-visible,
.s-card.grid-bl.grid-visible,
.s-card.grid-br.grid-visible { opacity: 1; }
.s-card.rank-0 {
  transform: translate(0, 0) scale(1);
  opacity: 1;
  z-index: 30;
  box-shadow: 0 20px 50px rgba(0,52,43,0.14), 0 2px 8px rgba(0,52,43,0.06);
}
.s-card.rank-0:hover { transform: translate(0, -3px) scale(1); }
.s-card.rank-0:hover .ep-photo img { transform: scale(1.04); }

.s-card.rank-1 {
  transform: translate(40px, 40px) scale(0.96);
  opacity: 0.82;
  z-index: 20;
  box-shadow: 0 8px 24px rgba(0,52,43,0.08);
}

.s-card.rank-2 {
  transform: translate(80px, 80px) scale(0.92);
  opacity: 0.55;
  z-index: 10;
  box-shadow: 0 4px 14px rgba(0,52,43,0.05);
}

.s-card.rank-out {
  transform: translate(-30px, -20px) scale(1.02);
  opacity: 0;
  z-index: 5;
  pointer-events: none;
}

.s-card.rank-in {
  transform: translate(80px, 80px) scale(0.92);
  opacity: 0;
  z-index: 10;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 1280px) {
  .sourcing-stack { transform: translateY(-50%) scale(0.86); transform-origin: right center; right: 2%; }
}
@media (max-width: 1100px) {
  .sourcing-stack { transform: translateY(-50%) scale(0.72); right: -10px; }
}
@media (max-width: 980px) {
  .sourcing-stack { display: none; }
}