/* ===== Case Studies (anonymized) ===== */
* { box-sizing: border-box; }

:root{
  --primary:#000777;
  --primary-dark:#000555;
  --accent:#ff7a00;
  --text-dark:#1e293b;
  --text-light:#64748b;
  --bg-light:#f8fafc;
  --white:#fff;
}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--text-dark);
  line-height:1.6;
  background:var(--white);
}

.container{ max-width:1200px; margin:0 auto; padding:0 20px; }

/* Hero */
.hero{
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#fff; padding:6rem 0; position:relative; overflow:hidden;
}
.hero::before{
  content:''; position:absolute; top:-120px; right:-220px; width:640px; height:640px;
  background:radial-gradient(circle,rgba(255,122,0,.14) 0%, transparent 70%);
  filter:blur(2px); animation:float 20s ease-in-out infinite;
}
@keyframes float{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-28px) rotate(160deg)} }
.hero-content{ position:relative; z-index:1; }
.hero-badge{
  display:inline-block; background:rgba(255,122,0,.14); border:1px solid rgba(255,122,0,.45);
  color:var(--accent); padding:.5rem 1rem; border-radius:999px; font-size:.875rem; font-weight:700; margin-bottom:1rem;
}
.hero h1{ font-size:clamp(2rem,4vw,3rem); font-weight:800; margin-bottom:.6rem; letter-spacing:-.02em; }
.hero p{ font-size:1.1rem; opacity:.96; max-width:760px; margin-bottom:1.2rem; }
.cta-buttons{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:.5rem; }
.btn{
  padding:.95rem 1.5rem; border-radius:10px; text-decoration:none; font-weight:700; display:inline-block;
  transition:transform .2s, box-shadow .2s, background .2s, color .2s, border-color .2s; cursor:pointer;
}
.btn-primary{ background:var(--accent); color:#fff; border:2px solid var(--accent); box-shadow:0 10px 24px rgba(255,122,0,.25); }
.btn-primary:hover{ background:#e66d00; border-color:#e66d00; transform:translateY(-2px); box-shadow:0 14px 36px rgba(255,122,0,.32); }
.btn-secondary{ background:transparent; color:#fff; border:2px solid rgba(255,255,255,.6); }
.btn-secondary:hover{ background:rgba(255,255,255,.12); border-color:#fff; transform:translateY(-2px); }

.hero-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.2rem;
  margin-top:2rem; padding-top:2rem; border-top:1px solid rgba(255,255,255,.22);
}
.stat{text-align:center;}
.stat-number{ font-size:2.1rem; font-weight:800; color:var(--accent); display:block; line-height:1.1; }
.stat-label{ font-size:.95rem; opacity:.92; }

/* Sections */
section{ padding:5rem 0; }
.section-header{ text-align:center; max-width:820px; margin:0 auto 2rem; }
.section-badge{
  display:inline-block; color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:1px; font-size:.8rem; margin-bottom:.5rem;
}
.section-header h2{ font-size:clamp(1.6rem,3.2vw,2.3rem); color:var(--primary); margin-bottom:.4rem; letter-spacing:-.02em; }
.section-header p{ color:var(--text-light); }

/* Filters */
.filters{
  background:var(--bg-light);
  padding:3rem 0 2.5rem;            /* add breathing room so pills aren't scrunched */
}
.filters .section-header{ margin-bottom:1.25rem; } /* space between header and pills */

.filter-row{
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem;                      /* spacing between pills */
  justify-content:center;           /* center on desktop */
  margin-top:1rem;
}

.pill{
  border:1px solid #e2e8f0;
  background:#fff;
  color:var(--text-dark);
  border-radius:999px;
  padding:0.6rem 1.2rem;            /* slightly larger, more tappable */
  font-size:0.95rem;
  font-weight:700;
  cursor:pointer;
  transition:background .2s, border-color .2s, transform .2s, color .2s;
  flex:0 0 auto;                    /* keep pill width to content by default */
}
.pill:hover{ transform:translateY(-2px); }
.pill.active{
  background:rgba(255,122,0,.12);
  border-color:var(--accent);
  color:var(--accent);
}

/* Grid */
.cases{ background:#fff; }
.cases-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:1.5rem; }

/* Card */
.case-card{
  background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:1.6rem;
  transition:transform .2s, box-shadow .2s, border-color .2s; position:relative; overflow:hidden;
}
.case-card:hover{ transform:translateY(-6px); border-color:#d7dee9; box-shadow:0 14px 44px rgba(2,6,23,.1); }
/* Case Card Badge Fix */
.case-badge {
  display: inline-block;
  position: relative;   /* remove absolute positioning */
  top: auto;
  right: auto;
  margin-bottom: 0.75rem; /* spacing below the badge */
  background: rgba(255, 122, 0, 0.12);
  color: #b45309;
  border: 1px solid rgba(255, 122, 0, 0.4);
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.case-card h3{ color:var(--accent); font-size:1.25rem; margin-bottom:.25rem; font-weight:800; }
.subtitle{ color:var(--text-light); margin-bottom:.8rem; }
.key-points{ list-style:none; margin:0 0 1rem; padding:0; }
.key-points li{ padding:.45rem 0; border-top:1px dashed #edf2f7; }
.key-points li:first-child{ border-top:none; }
.meta{ display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; font-size:.9rem; color:var(--text-light); margin:.2rem 0 1rem; }
blockquote{
  margin:0 0 1rem; padding:.9rem 1rem; background:var(--bg-light); border-left:4px solid var(--accent);
  border-radius:10px;
}
.card-actions .btn{ border-color:#e2e8f0; color:var(--primary); background:#fff; }
.card-actions .btn:hover{ background:rgba(0,7,119,.08); border-color:var(--primary); }

/* CTA */
.final-cta{ background:var(--bg-light); text-align:center; }
.cta-box{
  background:#fff; border-radius:20px; padding:clamp(2rem,4vw,4rem); box-shadow:0 22px 60px rgba(2,6,23,.1);
  max-width:860px; margin:0 auto; border:1px solid #e9eef7;
}
.cta-box h2{ color:var(--primary); font-size:clamp(1.6rem,3vw,2.4rem); margin-bottom:.6rem; letter-spacing:-.02em; }
.cta-box p{ color:var(--text-light); margin-bottom:1.2rem; }
.final-cta .btn-secondary{ border-color:var(--primary); color:var(--primary); }
.final-cta .btn-secondary:hover{ background:rgba(0,7,119,.08); }

.breadcrumb {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.breadcrumb a {
    color: var(--accent, #ff7a00);
    text-decoration: none;
}
/* Responsive */
@media (max-width:768px){
  .hero{ padding:4.5rem 0; }
  .hero h1{ font-size:2rem; }
  .hero-stats{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:600px){
  .filter-row{
    justify-content:flex-start;     /* align to left on small screens */
    gap:0.5rem;
  }
  .pill{
    flex:1 1 140px;                 /* pills wrap and get equal-ish widths */
    text-align:center;
  }
}

/* Accessibility helpers */
.pill:focus, .btn:focus{ outline:3px solid rgba(255,122,0,.5); outline-offset:2px; }