/* Shared case-study page styles, extracted from case-study-ytc.html */
body{background:radial-gradient(1100px 420px at 50% -140px,var(--accent-soft),transparent 70%),var(--bg)}

/* shared layout helpers (mirrored from index.html) */
.section-wrap{max-width:1100px;margin:5rem auto 0;padding:0 1.5rem}
.section-header{text-align:center;margin-bottom:2.25rem}
.gold-line{width:48px;height:2px;background:linear-gradient(90deg,var(--gold),var(--gold));border-radius:2px;margin:.85rem auto 0}

/* ============ HERO ============ */
.cs-hero{
  max-width:1100px;margin:0 auto;
  padding:clamp(48px,6vw,88px) 1.5rem 2rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.cs-eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--gold-dim);border:1px solid var(--line-strong);
  color:var(--gold);font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:2.2px;
  padding:.4rem 1rem;border-radius:24px;margin-bottom:1.25rem;
}
.cs-hero h1{
  font-family:var(--display);
  font-size:clamp(2rem,5vw,3.6rem);
  font-weight:800;letter-spacing:-1.5px;line-height:1.08;
  max-width:880px;margin-bottom:1rem;color:var(--white);
}
.cs-hero h1 .gd{color:var(--gold)}
.cs-hero h1 .pp{color:var(--gold-light);font-style:normal}
.cs-hero p.cs-sub{
  max-width:620px;font-size:clamp(.95rem,1.4vw,1.05rem);
  color:var(--muted);line-height:1.7;margin-bottom:2.25rem;
}
.cs-client-strip{
  display:inline-flex;align-items:center;gap:.85rem;
  background:var(--surface);border:1px solid var(--border);
  padding:.6rem 1.1rem .6rem .6rem;border-radius:999px;
}
.cs-client-strip img{width:38px;height:38px;border-radius:50%;background:#fff;object-fit:contain;padding:4px}
.cs-client-strip .cs-client-name{font-size:.82rem;color:var(--text);font-weight:600}
.cs-client-strip .cs-client-meta{font-size:.7rem;color:var(--muted);display:block;margin-top:1px}

/* ============ TOP TESTIMONIAL VIDEO ============ */
.cs-video-top{
  max-width:820px;margin:3rem auto 0;padding:0 1.5rem;
}

/* ============ HERO RESULT CARD ============ */
.cs-result-card{
  max-width:1100px;margin:2rem auto 0;padding:0 1.5rem;
}
.cs-result-inner{
  background:linear-gradient(135deg,var(--surface) 0%,var(--surface2) 100%);
  border:1px solid var(--border-light);
  border-radius:var(--radius-lg);
  padding:2.5rem 2rem;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  position:relative;overflow:hidden;
}
.cs-result-inner::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 20% 0%,var(--gold-glow),transparent 60%);
  pointer-events:none;
}
.cs-result-cell{text-align:center;position:relative;z-index:2;border-right:1px solid var(--border)}
.cs-result-cell:last-child{border-right:none}
.cs-result-num{
  font-family:var(--display);
  font-size:clamp(1.8rem,3.4vw,2.6rem);
  font-weight:800;color:var(--gold);line-height:1;margin-bottom:.4rem;
}
.cs-result-num.purple{color:var(--gold-light)}
.cs-result-label{
  font-size:.72rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:1.5px;
}
@media(max-width:780px){
  .cs-result-inner{grid-template-columns:1fr 1fr;padding:1.75rem 1.25rem}
  .cs-result-cell{padding:1rem 0;border-right:none;border-bottom:1px solid var(--border)}
  .cs-result-cell:nth-child(odd){border-right:1px solid var(--border)}
  .cs-result-cell:nth-last-child(-n+2){border-bottom:none}
}
@media(max-width:440px){
  .cs-result-inner{grid-template-columns:1fr}
  .cs-result-cell{border-right:none !important;border-bottom:1px solid var(--border)}
  .cs-result-cell:last-child{border-bottom:none}
}

/* ============ STORY BLOCKS ============ */
.story-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;
}
.story-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.75rem 1.5rem;
  transition:border-color .3s,transform .3s;
}
.story-card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.story-card h3{
  font-family:var(--display);
  font-size:1.05rem;font-weight:700;color:var(--white);
  margin-bottom:1rem;display:flex;align-items:center;gap:.6rem;
}
.story-card h3 .dot{
  width:8px;height:8px;border-radius:50%;
}
.story-card.before h3 .dot{background:#e57373}
.story-card.after h3 .dot{background:var(--gold)}
.story-card ul{list-style:none;padding:0;margin:0}
.story-card li{
  color:var(--muted);font-size:.88rem;line-height:1.65;
  padding-left:1.4rem;position:relative;margin-bottom:.55rem;
}
.story-card li::before{
  content:'';position:absolute;left:0;top:.6rem;
  width:6px;height:6px;border-radius:50%;background:var(--border-light);
}
.story-card.after li::before{background:var(--gold)}
@media(max-width:760px){.story-grid{grid-template-columns:1fr}}

/* ============ APPROACH STEPS ============ */
.approach-list{
  max-width:780px;margin:0 auto;
  display:flex;flex-direction:column;gap:1rem;
}
.approach-step{
  display:flex;gap:1.25rem;
  background:var(--surface);
  border:1px solid var(--border);
  border-left:3px solid var(--gold);
  border-radius:var(--radius);
  padding:1.5rem 1.5rem 1.5rem 1.25rem;
  transition:border-color .3s,transform .25s;
}
.approach-step:hover{border-color:var(--gold);transform:translateX(4px)}
.approach-step:hover{border-left-color:var(--gold)}
.approach-num{
  flex-shrink:0;width:36px;height:36px;
  background:var(--gold-dim);border:1px solid var(--line-strong);
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;
  color:var(--gold);font-size:1rem;
}
.approach-text h4{
  font-family:var(--display);font-size:1rem;font-weight:700;
  color:var(--white);margin-bottom:.35rem;
}
.approach-text p{color:var(--muted);font-size:.86rem;line-height:1.65}

/* ============ TESTIMONIAL ============ */
.testi-feature{
  max-width:820px;margin:0 auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.testi-feature .video-wrap{border-radius:0;border:none;border-bottom:1px solid var(--border)}
.testi-feature__meta{padding:1.5rem 1.75rem}
.testi-feature__quote{
  font-family:var(--display);
  font-style:italic;font-size:1.05rem;
  color:var(--text);line-height:1.55;
  margin-bottom:1rem;
}
.testi-feature__attr{display:flex;align-items:center;gap:.75rem}
.testi-feature__attr .testi-avatar{width:42px;height:42px}
.testi-feature__attr .testi-name{font-size:.95rem}

/* ============ FINAL CTA ============ */
.cs-cta{
  max-width:860px;margin:5rem auto 0;padding:0 1.5rem;
  text-align:center;
}
.cs-cta-inner{
  background:linear-gradient(135deg,var(--surface2),var(--surface3));
  border:1px solid var(--border-light);
  border-radius:var(--radius-lg);
  padding:3rem 2rem;
  position:relative;overflow:hidden;
}
.cs-cta-inner::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,var(--gold-glow),transparent 65%);
  pointer-events:none;
}
.cs-cta-inner h2{
  position:relative;z-index:2;
  font-family:var(--display);
  font-size:clamp(1.5rem,3vw,2.1rem);
  font-weight:700;color:var(--white);margin-bottom:.85rem;line-height:1.2;
}
.cs-cta-inner h2 em{color:var(--gold);font-style:normal}
.cs-cta-inner p{
  position:relative;z-index:2;
  color:var(--muted);font-size:.95rem;line-height:1.65;
  max-width:520px;margin:0 auto 1.75rem;
}
.cs-cta-inner .cta-btn{position:relative;z-index:2}
.cs-cta-inner .calendly-inline-widget{
  position:relative;z-index:2;
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  max-width:760px;margin:0 auto;
}
.cs-cta-disclaimer{
  position:relative;z-index:2;
  font-size:.78rem !important;color:var(--muted);
  margin-top:1.25rem !important;max-width:none !important;
}

/* ============ RESOURCES GRID ============ */
.resources-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;
}
.resource-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:1.75rem 1.5rem;
  display:flex;flex-direction:column;
  transition:border-color .3s,transform .25s;
}
.resource-card:hover{border-color:var(--line-strong);transform:translateY(-3px)}
.resource-tag{
  display:inline-block;
  background:var(--gold-dim);
  border:1px solid var(--line-strong);
  color:var(--gold);
  font-size:.62rem;font-weight:600;
  text-transform:uppercase;letter-spacing:1.6px;
  padding:.3rem .7rem;border-radius:20px;
  margin-bottom:.85rem;align-self:flex-start;
}
.resource-tag.purple{background:var(--gold-dim);border-color:var(--line-strong);color:var(--gold-light)}
.resource-card h3{
  font-family:var(--display);
  font-size:1.05rem;font-weight:700;color:var(--white);
  margin-bottom:.5rem;line-height:1.25;
}
.resource-card p{
  color:var(--muted);font-size:.85rem;line-height:1.6;
  margin-bottom:1.25rem;flex:1;
}
.resource-actions{
  display:flex;gap:.6rem;flex-wrap:wrap;
}
.resource-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--body);font-weight:600;font-size:.78rem;
  padding:.55rem 1rem;border-radius:6px;
  transition:background .2s,transform .15s,border-color .2s;
  cursor:pointer;border:1px solid transparent;
}
.resource-btn.primary{
  background:var(--brand);color:#fff;
}
.resource-btn.primary:hover{background:var(--gold-light);transform:translateY(-1px)}
.resource-btn.ghost{
  background:transparent;color:var(--gold);
  border-color:var(--line-strong);
}
.resource-btn.ghost:hover{border-color:var(--gold);background:var(--line-strong)}
.resource-btn svg{flex-shrink:0}
@media(max-width:760px){.resources-grid{grid-template-columns:1fr}}

/* ============ FUNNEL ============ */
.funnel{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;align-items:stretch;max-width:1000px;margin:0 auto}
.funnel-step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem 1rem;text-align:center;position:relative}
.funnel-step:not(:last-child)::after{content:'›';position:absolute;right:-.7rem;top:50%;transform:translateY(-50%);color:var(--gold);font-size:1.4rem;z-index:2}
.funnel-step.hl{border-color:var(--gold);background:linear-gradient(135deg,var(--surface),var(--surface2))}
.funnel-num{font-family:var(--display);font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800;color:var(--gold);line-height:1;margin-bottom:.5rem}
.funnel-label{font-size:.74rem;color:var(--muted);line-height:1.4}
@media(max-width:780px){.funnel{grid-template-columns:1fr 1fr}.funnel-step:not(:last-child)::after{display:none}}

/* ============ BAR CHART ============ */
.bars{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:.8rem}
.bar-row{display:grid;grid-template-columns:150px 1fr;gap:1rem;align-items:center}
.bar-label{font-size:.82rem;color:var(--text);font-weight:600;text-align:right}
.bar-track{background:var(--surface);border:1px solid var(--border);border-radius:8px;height:34px;overflow:hidden}
.bar-fill{height:100%;display:flex;align-items:center;justify-content:flex-end;padding-right:.75rem;font-size:.78rem;font-weight:700;color:var(--muted);background:var(--border-light);min-width:60px;border-radius:7px}
.bar-fill.win{background:var(--gold);color:#0A0A0A}
.bar-note{max-width:780px;margin:1rem auto 0;font-size:.76rem;color:var(--muted);text-align:center}
@media(max-width:560px){.bar-row{grid-template-columns:1fr;gap:.3rem}.bar-label{text-align:left}}

/* ============ TABLES ============ */
.cs-table-wrap{max-width:900px;margin:0 auto;overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface)}
.cs-table{width:100%;border-collapse:collapse;font-size:.86rem}
.cs-table th{text-align:left;font-family:var(--display);font-size:.7rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);padding:.9rem 1.1rem;border-bottom:1px solid var(--border-light);white-space:nowrap}
.cs-table td{padding:.85rem 1.1rem;color:var(--muted);border-bottom:1px solid var(--border);vertical-align:top}
.cs-table tr:last-child td{border-bottom:none}
.cs-table td:first-child{color:var(--white);font-weight:600}
.cs-table td.res{color:var(--gold);font-weight:700;white-space:nowrap}
.cs-table td.win{color:var(--gold-light);font-weight:600}
.cs-table tr.hl td{background:var(--gold-dim)}

/* ============ NOTES ============ */
.cs-callout{max-width:780px;margin:1.75rem auto 0;background:var(--gold-dim);border:1px solid var(--line-strong);border-left:3px solid var(--gold);border-radius:var(--radius);padding:1.1rem 1.35rem;font-size:.9rem;line-height:1.65;color:var(--text)}
.cs-callout b{color:var(--gold)}
.cs-quote{max-width:780px;margin:2rem auto 0;text-align:center;font-family:var(--display);font-style:italic;font-size:1.15rem;line-height:1.55;color:var(--text)}
.cs-quote span{display:block;margin-top:.6rem;font-style:normal;font-size:.8rem;color:var(--muted)}
.cs-fine{max-width:780px;margin:1.5rem auto 0;text-align:center;font-size:.74rem;color:var(--muted);line-height:1.6}
.cs-result-inner.six{grid-template-columns:repeat(3,1fr)}
.cs-result-inner.six .cs-result-cell:nth-child(3n){border-right:none}
.cs-result-inner.six .cs-result-cell:nth-child(-n+3){border-bottom:1px solid var(--border);padding-bottom:1.25rem}
.cs-result-inner.six .cs-result-cell:nth-child(n+4){padding-top:1.25rem}
.cs-result-sub{font-size:.7rem;color:var(--muted);margin-top:.35rem}
@media(max-width:780px){
  .cs-result-inner.six{grid-template-columns:1fr 1fr}
  .cs-result-inner.six .cs-result-cell{border-bottom:1px solid var(--border);padding:1rem 0}
  .cs-result-inner.six .cs-result-cell:nth-child(odd){border-right:1px solid var(--border)}
  .cs-result-inner.six .cs-result-cell:nth-child(even){border-right:none}
  .cs-result-inner.six .cs-result-cell:nth-last-child(-n+2){border-bottom:none}
}