/* =========================================================
   PARTNERSHIP.CSS — Master Partnership Model Template.
   Deliberately distinct from service.css: comparison table,
   org chart, horizontal roadmap, workflow diagram, asymmetric
   bento, and a self-contained sticky CTA. Reuses main.css +
   home.css primitives (hero mechanics, float-card, card-gradient,
   grad-text, impact-grid, security-grid) but owns every new
   component below. Intended to be reused as-is for White Label
   Services, Seasonal Tax Support, and FTE — only content changes.
   ========================================================= */

/* ---------- Hero: gradient-mesh background (no photo) ---------- */
.hero.hero-pm{ background-image:none; background-color: var(--ink); }
.hero.hero-pm::before{
  background:
    radial-gradient(60% 60% at 85% 15%, rgba(10,154,144,.38), transparent 60%),
    radial-gradient(55% 55% at 10% 88%, rgba(13,48,90,.4), transparent 60%),
    radial-gradient(40% 40% at 50% 45%, rgba(13,48,90,.15), transparent 70%),
    linear-gradient(180deg, rgba(14,21,38,.98), rgba(14,21,38,.93) 55%, rgba(14,21,38,1));
}
/* ---------- Hero: 5 team-role cards on the shared .float-cards grid
   from home.css. A static 2-col grid with the 5th card centered
   full-width below — no absolute top/right math, so cards can never
   overlap regardless of viewport width. ---------- */
.hero-pm .float-cards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.fc-pm-1{ animation-delay:0s; }
.fc-pm-2{ animation-delay:.4s; margin-top:28px; }
.fc-pm-3{ animation-delay:.8s; }
.fc-pm-4{ animation-delay:1.2s; margin-top:28px; }
.fc-pm-5{ animation-delay:1.6s; grid-column: 1 / -1; max-width:280px; margin:12px auto 0; }
@media (max-width: 560px){
  .hero-pm .float-cards{ grid-template-columns: 1fr; }
  .fc-pm-2, .fc-pm-4{ margin-top:0; }
  .fc-pm-5{ grid-column: auto; max-width:none; margin-top:0; }
}

/* ---------- Section 1: Traditional Hiring vs Dedicated Team ---------- */
.vs-compare{
  background: var(--white); border:1px solid var(--rule); border-radius: var(--radius-lg);
  overflow:hidden; position:relative; box-shadow: var(--shadow-card); margin-top:50px;
}
.vs-head{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; background: var(--ink); }
.vs-head span{ padding: 26px 20px 20px; font-family: var(--f-display); font-size:1.02rem; text-align:center; }
.vs-head span:first-child{ background:transparent; }
.vs-head .vs-h-trad{ color: rgba(247,245,240,.55); }
.vs-head .vs-h-ded{ color: var(--teal-soft); }
.vs-badge{
  position:absolute; top: 22px; left:70.6%; transform:translateX(-50%);
  width:50px; height:50px; border-radius:50%; z-index:3;
  background: linear-gradient(135deg, var(--navy-brand), var(--teal)); color:#fff;
  display:grid; place-items:center; font-family: var(--f-mono); font-weight:700; font-size:.76rem;
  box-shadow: 0 10px 22px -8px rgba(14,21,38,.5); border: 3px solid var(--white);
}
.vs-rows{ display:flex; flex-direction:column; }
.vs-row{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; border-top:1px solid var(--rule); transition: background .3s; }
.vs-row:nth-child(even){ background: var(--paper-dim); }
.vs-row:hover{ background: rgba(10,154,144,.06); }
.vs-point{ padding: 18px 22px; font-weight:600; color:var(--ink); font-size:.92rem; display:flex; align-items:center; }
.vs-trad,.vs-ded{ padding: 18px 12px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:.85rem; text-align:center; }
.vs-trad{ color: var(--slate-soft); }
.vs-trad i{ color:#C0392B; flex-shrink:0; }
.vs-ded{ color: var(--ink); font-weight:600; }
.vs-ded i{ color: var(--green); flex-shrink:0; }
@media (max-width: 760px){
  .vs-head span{ font-size:.82rem; padding:22px 8px 16px; }
  .vs-point{ padding:14px; font-size:.82rem; }
  .vs-trad,.vs-ded{ padding:14px 8px; font-size:.76rem; flex-direction:column; gap:4px; }
}

/* ---------- Section 2: Who is this for — expanding cards ---------- */
.expand-card{
  background: var(--white); border:1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 28px 22px; text-align:center; overflow:hidden; position:relative;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.expand-card .icon{
  width:50px; height:50px; border-radius:14px; display:grid; place-items:center; margin:0 auto 16px;
  background: var(--paper-dim); color: var(--teal); font-size:1.2rem;
  transition: transform .4s var(--ease), background .3s, color .3s;
}
.expand-card h4{ font-family: var(--f-display); font-size:1.05rem; margin:0; color:var(--ink); font-weight:600; }
.expand-card .expand-desc{
  max-height:0; opacity:0; overflow:hidden; font-size:.85rem; color: var(--slate-soft); margin:0;
  transition: max-height .4s var(--ease), opacity .3s var(--ease), margin-top .35s var(--ease);
}
.expand-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--teal); }
.expand-card:hover .icon{ transform: scale(1.1) rotate(-6deg); background: var(--teal-deep); color:#fff; }
.expand-card:hover .expand-desc{ max-height:120px; opacity:1; margin-top:10px; }

/* ---------- Section 3: Build Your Offshore Team — org chart ---------- */
.org-chart{ max-width:560px; margin: 60px auto 0; position:relative; }
.org-node{
  display:flex; align-items:center; gap:18px; background: var(--white); border:1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 18px 24px; box-shadow: var(--shadow-card); position:relative; z-index:1;
  opacity:0; transform: translateY(16px);
  transition: opacity .55s var(--ease), transform .55s var(--ease), border-color .3s, box-shadow .3s;
}
.org-node.in-view{ opacity:1; transform:none; }
.org-node:hover{ border-color: var(--teal); box-shadow: var(--shadow-lift); }
.org-avatar{
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(135deg, var(--teal), var(--teal-deep)); color:#fff;
  display:grid; place-items:center; font-size:1.08rem;
}
.org-node strong{ display:block; font-family: var(--f-display); font-size:1.02rem; color: var(--ink); }
.org-node span{ font-size:.82rem; color: var(--slate-soft); }
.org-line{ width:2px; height:36px; background: var(--rule); margin: 0 auto; position:relative; overflow:hidden; }
.org-line::after{
  content:""; position:absolute; top:0; left:0; width:100%; height:0%;
  background: linear-gradient(180deg, var(--navy-brand), var(--teal)); transition: height .8s var(--ease);
}
.org-line.filled::after{ height:100%; }

/* ---------- Section 4: How It Works — horizontal roadmap ---------- */
.h-roadmap{ position:relative; margin-top:60px; }
.hr-rail{ position:absolute; top:34px; left:0; right:0; height:2px; background: var(--rule); }
.hr-rail-fill{ position:absolute; top:34px; left:0; height:2px; width:0%; background: linear-gradient(90deg, var(--navy-brand), var(--teal)); transition: width .1s linear; }
.hr-grid-8{ display:grid; grid-template-columns: repeat(8,1fr); gap:14px; position:relative; }
.hr-step{ text-align:center; position:relative; z-index:1; }
.hr-idx{
  width:64px; height:64px; border-radius:50%; background: var(--white); border:2px solid var(--rule);
  display:grid; place-items:center; margin: 0 auto 16px; font-family: var(--f-mono); font-weight:700;
  color: var(--slate-soft); font-size:.85rem; transition: border-color .4s, color .4s, background .4s, transform .4s var(--ease);
}
.hr-step.in-view .hr-idx{ border-color: var(--teal-deep); color: var(--teal-deep); background: var(--paper-dim); transform: scale(1.08); }
.hr-step h3{ font-size:.92rem; margin-bottom:.3em; }
.hr-step p{ font-size:.76rem; color: var(--slate-soft); margin:0; }
@media (max-width: 960px){
  .hr-rail,.hr-rail-fill{ display:none; }
  .hr-grid-8{ grid-template-columns: 1fr; gap:26px; text-align:left; }
  .hr-step{ display:flex; align-items:flex-start; gap:18px; text-align:left; }
  .hr-idx{ margin:0; flex-shrink:0; }
}

/* ---------- Section 5: Daily Collaboration Workflow ---------- */
.workflow-diagram{
  display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:safe center; gap:0;
  margin-top:50px; overflow-x:auto; padding:4px 4px 16px;
  scrollbar-width: thin; scrollbar-color: var(--teal-soft) transparent;
}
.workflow-diagram::-webkit-scrollbar{ height:6px; }
.workflow-diagram::-webkit-scrollbar-thumb{ background: var(--teal-soft); border-radius:4px; }
.workflow-diagram::-webkit-scrollbar-track{ background: transparent; }
.workflow-step{
  background: var(--white); border:1px solid var(--rule); border-radius: var(--radius-lg); padding: 22px 18px;
  width:154px; flex-shrink:0; text-align:center; box-shadow: var(--shadow-card);
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.workflow-step:hover{ transform: translateY(-6px); border-color: var(--teal); box-shadow: var(--shadow-lift); }
.workflow-step .icon{
  width:44px; height:44px; border-radius:12px; background: var(--paper-dim); color: var(--teal);
  display:grid; place-items:center; margin: 0 auto 12px; font-size:1.05rem;
}
.workflow-step strong{ font-size:.83rem; color: var(--ink); display:block; line-height:1.35; }
.wf-pair{ display:flex; align-items:center; flex-shrink:0; }
.workflow-arrow{ width:40px; display:grid; place-items:center; color: var(--teal); font-size:1.25rem; flex-shrink:0; animation: arrowPulse 1.8s var(--ease) infinite; }
@keyframes arrowPulse{ 0%,100%{ transform: translateX(0); opacity:.55; } 50%{ transform: translateX(5px); opacity:1; } }
@media (max-width: 860px){
  .workflow-diagram{ flex-direction:column; align-items:center; overflow-x:visible; }
  .wf-pair{ flex-direction:column; }
  .workflow-step{ width:100%; max-width:320px; }
  .workflow-arrow{ transform:none; }
  .workflow-arrow i{ transform: rotate(90deg); display:inline-block; }
}

/* ---------- Section 6: Why Clients Love This Model — asymmetric bento ---------- */
.bento-pm{ display:grid; grid-template-columns: repeat(4,1fr); gap:18px; margin-top:44px; }
.bp-item{
  position:relative; background: var(--white); border-radius: var(--radius-lg); padding: 26px;
  display:flex; flex-direction:column; justify-content:flex-end; min-height:150px; overflow:hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.bp-item::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background: linear-gradient(135deg, var(--rule), var(--rule));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  transition: background .4s var(--ease); pointer-events:none;
}
.bp-item:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.bp-item:hover::before{ background: linear-gradient(135deg, var(--navy-brand), var(--teal)); }
.bp-item .icon{ width:44px; height:44px; border-radius:12px; background: var(--paper-dim); color: var(--teal); display:grid; place-items:center; font-size:1.05rem; margin-bottom:16px; transition: transform .4s var(--ease); }
.bp-item:hover .icon{ transform: scale(1.12) rotate(-6deg); }
.bp-item strong{ font-family: var(--f-display); font-size:1.02rem; color: var(--ink); display:block; margin-bottom:.25em; }
.bp-item span{ font-size:.82rem; color: var(--slate-soft); }
.bp-item.lg{
  grid-column: span 2; grid-row: span 2; justify-content:center;
  background: linear-gradient(135deg, var(--ink), var(--teal-deep) 70%); color: var(--paper);
}
.bp-item.lg .icon{ background: rgba(10,154,144,.18); color: var(--teal); width:56px; height:56px; font-size:1.35rem; }
.bp-item.lg .big-num{ font-family: var(--f-display); font-size:2.6rem; color: var(--paper); line-height:1; margin-bottom:.15em; }
.bp-item.lg strong{ color: var(--paper); }
.bp-item.lg span{ color: rgba(247,245,240,.6); }
.bp-item:nth-child(2){ grid-column: span 2; }
.bp-item:nth-child(5){ grid-column: span 2; }
.bp-item:nth-child(8){ grid-column: span 2; }
@media (max-width: 860px){
  .bento-pm{ grid-template-columns: repeat(2,1fr); }
  .bp-item.lg{ grid-row: span 1; }
}
@media (max-width: 560px){
  .bento-pm{ grid-template-columns: 1fr; }
  .bp-item, .bp-item.lg, .bp-item:nth-child(2), .bp-item:nth-child(5), .bp-item:nth-child(8){ grid-column: span 1; grid-row: span 1; }
}

/* ---------- Section 8: Business Results — premium stat cards ---------- */
.stat-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; margin-top:44px; }
.stat-card{
  position:relative; background: var(--white); border:1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 32px 24px; text-align:center; overflow:hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.stat-card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--navy-brand), var(--teal));
  transform: scaleX(0); transform-origin:left; transition: transform .4s var(--ease);
}
.stat-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: transparent; }
.stat-card:hover::before{ transform: scaleX(1); }
.stat-card .icon{
  width:50px; height:50px; border-radius:14px; background: var(--paper-dim); color: var(--teal);
  display:grid; place-items:center; margin: 0 auto 18px; font-size:1.2rem;
  transition: transform .4s var(--ease), background .3s, color .3s;
}
.stat-card:hover .icon{ transform: scale(1.1) rotate(-6deg); background: var(--teal-deep); color:#fff; }
.stat-card .stat-num{ font-size:2.1rem; }
.stat-card .stat-label{ margin-top:.4em; }
.stat-card.hero{ background: linear-gradient(135deg, var(--ink), var(--teal-deep) 70%); border-color: transparent; }
.stat-card.hero::before{ background: linear-gradient(90deg, var(--teal), var(--teal-soft)); }
.stat-card.hero .icon{ background: rgba(10,154,144,.18); color: var(--teal); }
.stat-card.hero:hover .icon{ background: var(--teal-deep); color:#fff; }
.stat-card.hero .stat-num{ color: var(--paper); }
.stat-card.hero .stat-num .suffix{ color: var(--teal); }
.stat-card.hero .stat-label{ color: rgba(247,245,240,.6); }
@media (max-width: 860px){ .stat-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .stat-grid{ grid-template-columns: 1fr; } }

/* ---------- Sticky partnership CTA (self-contained; not service.css's .sticky-cta) ---------- */
.sticky-pm-cta{
  position: fixed; left:26px; bottom:100px; z-index:1140; display:flex; align-items:center; gap:14px;
  background: var(--ink); color: var(--paper); border-radius: 999px; padding: 12px 22px 12px 12px;
  box-shadow: var(--shadow-lift); transform: translateY(200px); transition: transform .5s var(--ease);
}
.sticky-pm-cta.show{ transform: translateY(0); }
.sticky-pm-cta .sc-icon{ width:36px; height:36px; border-radius:50%; background: var(--teal); color: var(--ink); display:grid; place-items:center; font-size:.95rem; flex-shrink:0; }
.sticky-pm-cta span{ font-size:.85rem; white-space:nowrap; }
.sticky-pm-cta a{ font-weight:700; color: var(--teal-soft); white-space:nowrap; }
@media (max-width: 560px){ .sticky-pm-cta > span:not(.sc-icon){ display:none; } }