/* ==============================================================
   /portfolio/ · overview + industry + client case-study styles
   ============================================================== */

/* PORTFOLIO HERO (overview + industry) ------------------------- */
.portfolio-hero-26 {
  position:relative; overflow:hidden;
  padding:var(--s-11) 0 var(--s-10);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(239,41,41,.06), transparent 60%),
    linear-gradient(180deg, var(--c-ink-900) 0%, var(--c-ink-1000) 100%);
  color:var(--c-white);
}
.portfolio-hero-inner { max-width:900px; }
.portfolio-eyebrow { font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.14em; color:var(--c-red-400); margin-bottom:var(--s-5); font-weight:600; }
.portfolio-title {
  font-family:var(--font-sans); font-size:var(--t-4xl); line-height:1.05; letter-spacing:-.035em; font-weight:800;
  color:var(--c-white); margin-bottom:var(--s-5);
}
.portfolio-title em { font-family:var(--font-serif); font-style:italic; font-weight:400; color:var(--c-red-400); letter-spacing:-.02em; }
@media (min-width:768px) { .portfolio-title { font-size:var(--t-5xl); } }
@media (min-width:1024px) { .portfolio-title { font-size:var(--t-6xl); } }
.portfolio-sub { font-size:var(--t-md); line-height:1.7; color:var(--c-ink-200); max-width:760px; }
@media (min-width:768px) { .portfolio-sub { font-size:var(--t-lg); } }

/* INDUSTRIES GRID --------------------------------------------- */
.portfolio-industries-26 {
  padding:var(--s-12) 0;
  background:var(--c-white);
}
.industries-grid-26 {
  display:grid; gap:var(--s-3);
  grid-template-columns:1fr;
}
@media (min-width:640px)  { .industries-grid-26 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px)  { .industries-grid-26 { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1200px) { .industries-grid-26 { grid-template-columns:repeat(4,1fr); } }

.industry-tile-26 {
  display:flex; flex-direction:column; justify-content:space-between;
  background:var(--c-white); border:1px solid var(--border-subtle); border-radius:var(--r-4);
  padding:var(--s-5); color:inherit; text-decoration:none; min-height:120px;
  transition:all var(--d-base) var(--ease-out); position:relative; overflow:hidden;
}
.industry-tile-26::before {
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--c-red-600); transform:scaleY(0); transform-origin:top;
  transition:transform var(--d-base) var(--ease-out);
}
.industry-tile-26:hover { border-color:var(--border-default); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.industry-tile-26:hover::before { transform:scaleY(1); }
.industry-name { font-size:var(--t-md); font-weight:700; color:var(--text-primary); letter-spacing:-.01em; line-height:1.3; margin-bottom:var(--s-2); }
.industry-count { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--text-muted); letter-spacing:.03em; }
.industry-count strong { color:var(--c-red-600); }
.industry-arrow { font-size:var(--t-sm); color:var(--c-red-600); font-weight:600; margin-top:var(--s-3); display:inline-flex; align-items:center; gap:var(--s-1); }

/* FEATURED CLIENTS GRID --------------------------------------- */
.portfolio-featured-26 {
  padding:var(--s-12) 0;
  background:var(--c-ink-25);
  border-top:1px solid var(--border-subtle);
}
.clients-grid-26 {
  display:grid; gap:var(--s-5);
  grid-template-columns:1fr;
}
@media (min-width:640px) { .clients-grid-26 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .clients-grid-26 { grid-template-columns:repeat(3,1fr); } }

.client-card-26 {
  display:flex; flex-direction:column;
  background:var(--c-white); border:1px solid var(--border-subtle); border-radius:var(--r-5);
  overflow:hidden; color:inherit; text-decoration:none;
  transition:all var(--d-base) var(--ease-out);
}
.client-card-26:hover { border-color:var(--c-red-600); transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.client-thumb-26 {
  aspect-ratio:16/10;
  background-size:cover; background-position:center;
  background-color:var(--c-ink-200);
  position:relative;
}
.client-thumb-26.no-image {
  background:linear-gradient(135deg, var(--c-ink-700), var(--c-ink-900) 60%, var(--c-red-900));
}
.client-thumb-26 .viral-badge {
  position:absolute; top:var(--s-3); right:var(--s-3);
  background:var(--c-red-600); color:var(--c-white);
  padding:4px 10px; border-radius:var(--r-full);
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.03em;
  box-shadow:var(--shadow-glow);
}
.client-body-26 { padding:var(--s-5); flex-grow:1; display:flex; flex-direction:column; }
.client-name-26 { font-size:var(--t-md); font-weight:700; color:var(--text-primary); letter-spacing:-.01em; margin-bottom:var(--s-2); }
.client-industry-26 { font-family:var(--font-mono); font-size:10px; color:var(--text-muted); letter-spacing:.08em; text-transform:uppercase; margin-bottom:var(--s-3); }
.client-tagline-26 { font-size:var(--t-sm); color:var(--text-secondary); line-height:1.55; margin-bottom:var(--s-4); flex-grow:1; }
.client-arrow-26 { font-size:var(--t-sm); color:var(--c-red-600); font-weight:600; display:inline-flex; align-items:center; gap:var(--s-1); transition:gap var(--d-fast); }
.client-card-26:hover .client-arrow-26 { gap:var(--s-2); }

/* INDUSTRY PAGE ----------------------------------------------- */
.portfolio-industry-grid-26 {
  padding:var(--s-12) 0;
  background:var(--c-white);
}
.industry-empty-26 {
  text-align:center; padding:var(--s-12) var(--s-4);
  font-size:var(--t-md); color:var(--text-muted);
}
.other-industries-26 {
  margin-top:var(--s-11); padding-top:var(--s-8);
  border-top:1px solid var(--border-subtle);
}
.other-industries-label {
  font-family:var(--font-mono); font-size:var(--t-xs); color:var(--text-muted);
  letter-spacing:.14em; text-transform:uppercase; text-align:center;
  margin-bottom:var(--s-5); font-weight:500;
}
.other-industries-list {
  display:flex; gap:var(--s-2); flex-wrap:wrap; justify-content:center;
}
.other-industries-list a {
  font-family:var(--font-mono); font-size:var(--t-sm); color:var(--text-primary);
  padding:var(--s-2) var(--s-4); border:1px solid var(--border-subtle); border-radius:var(--r-full);
  background:var(--c-white);
  transition:all var(--d-fast) var(--ease-out);
}
.other-industries-list a:hover { border-color:var(--c-red-600); color:var(--c-red-600); }

/* CLIENT CASE STUDY PAGE -------------------------------------- */
.client-hero-26 {
  position:relative; overflow:hidden;
  padding:var(--s-11) 0 var(--s-10);
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(239,41,41,.06), transparent 60%),
    linear-gradient(180deg, var(--c-ink-900) 0%, var(--c-ink-1000) 100%);
  color:var(--c-white);
}
.client-hero-26 .client-hero-bg {
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center; opacity:.22;
  filter:blur(2px);
}
.client-hero-26 .client-hero-overlay {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,15,30,.7) 0%, rgba(11,15,30,.92) 100%);
}
.client-hero-26 .container-26 { position:relative; z-index:2; }
.client-hero-inner { max-width:900px; }
.client-viral-tag {
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:.12em; font-weight:700;
  color:var(--c-red-400); padding:var(--s-1) var(--s-3);
  background:rgba(239,41,41,.08); border:1px solid rgba(239,41,41,.3); border-radius:var(--r-full);
  margin-bottom:var(--s-5);
}
.client-viral-tag .dot { width:6px; height:6px; background:var(--c-red-500); border-radius:50%; box-shadow:0 0 0 3px rgba(239,41,41,.2); }
.client-industry-meta { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-ink-300); letter-spacing:.12em; text-transform:uppercase; margin-bottom:var(--s-4); }
.client-title-26 {
  font-family:var(--font-sans); font-size:var(--t-4xl); line-height:1.05; letter-spacing:-.035em; font-weight:800;
  color:var(--c-white); margin-bottom:var(--s-4);
}
@media (min-width:768px) { .client-title-26 { font-size:var(--t-5xl); } }
@media (min-width:1024px) { .client-title-26 { font-size:var(--t-6xl); } }
.client-tagline-hero {
  font-size:var(--t-md); line-height:1.7; color:var(--c-ink-200); max-width:760px; margin-bottom:var(--s-6);
}
@media (min-width:768px) { .client-tagline-hero { font-size:var(--t-lg); } }
.client-site-link { display:inline-flex; align-items:center; gap:var(--s-2); font-family:var(--font-mono); font-size:var(--t-sm); color:var(--c-red-400); font-weight:600; letter-spacing:.02em; }
.client-site-link:hover { color:var(--c-white); }

/* SERVICES DELIVERED STRIP ------------------------------------ */
.client-services-26 {
  padding:var(--s-7) 0;
  background:var(--c-ink-800); color:var(--c-white);
  border-top:1px solid var(--c-ink-700);
  border-bottom:1px solid var(--c-ink-700);
}
.client-services-label { font-family:var(--font-mono); font-size:var(--t-xs); color:var(--c-ink-400); letter-spacing:.12em; text-transform:uppercase; margin-bottom:var(--s-3); font-weight:500; }
.client-services-list { display:flex; gap:var(--s-2); flex-wrap:wrap; }
.client-service-chip {
  display:inline-flex; align-items:center; gap:var(--s-2);
  padding:var(--s-2) var(--s-4); background:rgba(255,255,255,.05); border:1px solid var(--c-ink-700); border-radius:var(--r-full);
  color:var(--c-white); font-size:var(--t-sm); font-weight:500;
  transition:all var(--d-fast);
}
.client-service-chip:hover { background:var(--c-red-600); border-color:var(--c-red-600); }

/* VIRAL SECTION ----------------------------------------------- */
.client-viral-26 {
  padding:var(--s-12) 0;
  background:var(--c-ink-900); color:var(--c-white);
  position:relative; overflow:hidden;
}
.client-viral-26::before {
  content:""; position:absolute; inset:0; z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:32px 32px;
}
.client-viral-26 > * { position:relative; z-index:1; }
.client-viral-grid {
  display:grid; gap:var(--s-4);
  grid-template-columns:1fr;
}
@media (min-width:640px) { .client-viral-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .client-viral-grid { grid-template-columns:repeat(4,1fr); max-width:960px; } }

.viral-reel-tile {
  aspect-ratio:9/16; border-radius:var(--r-4); padding:var(--s-4);
  display:flex; flex-direction:column; justify-content:space-between;
  background:linear-gradient(135deg, var(--c-red-600), var(--c-red-800) 60%, var(--c-red-900));
  box-shadow:0 16px 48px rgba(239,41,41,.24);
  color:var(--c-white); text-decoration:none;
  transition:transform var(--d-base) var(--ease-out);
}
.viral-reel-tile:hover { transform:translateY(-4px); box-shadow:0 24px 60px rgba(239,41,41,.35); }
.viral-reel-badge {
  display:inline-flex; align-items:center; gap:var(--s-1);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; font-weight:700;
  padding:var(--s-1) var(--s-2); background:rgba(255,255,255,.15); border-radius:var(--r-1);
  width:fit-content;
}
.viral-reel-number { font-family:var(--font-mono); font-size:var(--t-3xl); font-weight:700; line-height:1; letter-spacing:-.025em; margin-bottom:4px; }
.viral-reel-label { font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.7); }

/* RELATED CLIENTS --------------------------------------------- */
.client-related-26 { padding:var(--s-12) 0; background:var(--c-ink-25); border-top:1px solid var(--border-subtle); }

/* CTA --------------------------------------------------------- */
.client-cta-26 {
  padding:var(--s-11) 0; background:var(--c-red-600); color:var(--c-white);
  text-align:center; position:relative; overflow:hidden;
}
.client-cta-inner { max-width:760px; margin:0 auto; position:relative; z-index:1; }
.client-cta-title {
  font-family:var(--font-sans); font-size:var(--t-3xl); font-weight:800; letter-spacing:-.03em;
  line-height:1.1; margin-bottom:var(--s-4); color:var(--c-white);
}
@media (min-width:768px) { .client-cta-title { font-size:var(--t-4xl); } }
.client-cta-title em { font-family:var(--font-serif); font-style:italic; font-weight:400; letter-spacing:-.02em; }
.client-cta-body { font-size:var(--t-md); color:rgba(255,255,255,.9); line-height:1.7; margin-bottom:var(--s-6); }
.client-cta-26 .btn-26 { background:var(--c-white); color:var(--c-red-600); border-color:var(--c-white); }
.client-cta-26 .btn-26:hover { background:var(--c-ink-25); transform:translateY(-1px); box-shadow:var(--shadow-lg); }