/* Distill Works design system, HUB pages (industries/blog/case-studies index). With ds-core. */

/* ---- industries hub (body.page-industries) ---- */
body.page-industries .hero{padding:60px 0 38px; text-align:center;}
body.page-industries .badge{display:inline-block; font-size:12.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--green); font-weight:600; margin-bottom:18px;}
body.page-industries .hero h1{font-size:clamp(34px,4.6vw,52px); line-height:1.08; max-width:20ch; margin:0 auto 18px;}
body.page-industries .hero h1 span{color:var(--green); font-style:italic;}
body.page-industries .hero > .wrap > p{font-size:18px; color:var(--ink-soft); max-width:54ch; margin:0 auto;}

body.page-industries .featured{padding:34px 0 8px;}
body.page-industries .bento-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
body.page-industries .bento-card{display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--hair); border-radius:8px; padding:26px 24px; background:var(--card); text-decoration:none; min-height:210px;}
body.page-industries .bento-card:hover{border-color:var(--green);}
body.page-industries .bento-card .ind-name{font-family:'Spectral',serif; font-size:20px; color:var(--ink); margin-bottom:8px;}
body.page-industries .bento-card .ind-stat{font-size:12.5px; color:var(--green); font-weight:600; margin-bottom:10px;}
body.page-industries .bento-card .ind-hook{font-size:14px; color:var(--ink-soft); margin-bottom:18px;}
body.page-industries .bento-card .ind-link{font-size:13.5px; font-weight:600; color:var(--green);}

body.page-industries .divider{text-align:center; margin:42px 0 30px; position:relative;}
body.page-industries .divider::before{content:""; position:absolute; left:0; right:0; top:50%; border-top:1px solid var(--hair);}
body.page-industries .divider span{position:relative; background:var(--paper); padding:0 18px; font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted);}

body.page-industries .compact{padding:0 0 24px;}
body.page-industries .compact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
body.page-industries .c-card{display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--hair); border-radius:6px; padding:15px 18px; background:var(--card); text-decoration:none;}
body.page-industries .c-card:hover{border-color:var(--green);}
body.page-industries .c-card-name{font-family:'Spectral',serif; font-size:15.5px; color:var(--ink);}
body.page-industries .c-card-hook{font-size:12.5px; color:var(--muted); margin-top:2px;}
body.page-industries .c-card-arrow{color:var(--green); flex:0 0 auto;}

body.page-industries .ind-features{border-top:1px solid var(--hair); padding:64px 0;}
body.page-industries .ind-features h2{font-size:clamp(24px,2.8vw,32px); text-align:center; margin-bottom:6px;}
body.page-industries .ind-features .sub{text-align:center; color:var(--muted); font-size:15px; margin-bottom:40px;}
body.page-industries .feat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
body.page-industries .feat-name{font-family:'Spectral',serif; font-size:17px; margin-bottom:6px;}
body.page-industries .feat-desc{font-size:14.5px; color:var(--ink-soft);}

body.page-industries .proof-strip{background:var(--paper2); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:60px 0; text-align:center;}
body.page-industries .proof-strip h2{font-size:clamp(23px,2.7vw,30px); margin-bottom:16px;}
body.page-industries .proof-strip-inner > p{font-size:16.5px; color:var(--ink-soft); max-width:72ch; margin:0 auto 34px;}
body.page-industries .proof-metrics{display:flex; justify-content:center; gap:60px; flex-wrap:wrap;}
body.page-industries .metric-number{display:block; font-family:'Spectral',serif; font-size:34px; color:var(--green); line-height:1;}
body.page-industries .metric-label{display:block; font-size:13px; color:var(--muted); margin:8px auto 0; max-width:18ch;}

body.page-industries .ind-cta{padding:64px 0; text-align:center;}
body.page-industries .ind-cta h2{font-size:clamp(24px,2.8vw,32px); margin-bottom:12px;}
body.page-industries .ind-cta > .wrap > p{font-size:16.5px; color:var(--ink-soft); max-width:52ch; margin:0 auto 26px;}
body.page-industries .ind-cta .cta-row{display:flex; gap:22px; justify-content:center; align-items:center; flex-wrap:wrap;}

@media (max-width:880px){
  body.page-industries .bento-grid,
  body.page-industries .feat-grid{grid-template-columns:1fr 1fr;}
  body.page-industries .compact-grid{grid-template-columns:1fr 1fr;}
  body.page-industries .proof-metrics{gap:32px;}
}
@media (max-width:560px){
  body.page-industries .bento-grid,
  body.page-industries .compact-grid,
  body.page-industries .feat-grid{grid-template-columns:1fr;}
}

/* ---- blog hub (body.page-blog) ---- */
body.page-blog .blog-hero{padding:60px 0 38px; text-align:center;}
body.page-blog .blog-hero h1{font-size:clamp(32px,4.2vw,48px); line-height:1.08; max-width:22ch; margin:0 auto 16px;}
body.page-blog .blog-hero p{font-size:17.5px; color:var(--ink-soft); max-width:66ch; margin:0 auto;}
body.page-blog .blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; padding:22px 0 64px;}
body.page-blog .blog-card{border:1px solid var(--hair); border-radius:8px; overflow:hidden; background:var(--card); transition:border-color .15s ease;}
body.page-blog .blog-card:hover{border-color:var(--green);}
body.page-blog .blog-card a{text-decoration:none; display:block; color:inherit;}
body.page-blog .blog-card-image{height:178px; background-size:cover; background-position:center; border-bottom:1px solid var(--hair);}
body.page-blog .blog-card-content{padding:20px 22px;}
body.page-blog .blog-card-pillar{display:inline-block; font-size:11.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--green); font-weight:600; margin-bottom:10px;}
body.page-blog .blog-card-title{font-family:'Spectral',serif; font-weight:500; font-size:18px; line-height:1.25; color:var(--ink); margin:0 0 10px;}
body.page-blog .blog-card-excerpt{font-size:14px; color:var(--ink-soft); line-height:1.5; margin:0 0 14px;}
body.page-blog .blog-card-date{font-size:12.5px; color:var(--muted);}
@media (max-width:880px){ body.page-blog .blog-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ body.page-blog .blog-grid{grid-template-columns:1fr;} }

/* ---- portfolio (body.page-portfolio) ---- */
body.page-portfolio .pf-hero{padding:60px 0 36px; text-align:center;}
body.page-portfolio .pf-hero .badge{display:inline-block; font-size:12.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--green); font-weight:600; margin-bottom:16px;}
body.page-portfolio .pf-hero h1{font-size:clamp(34px,4.6vw,52px); line-height:1.08; max-width:18ch; margin:0 auto 16px;}
body.page-portfolio .pf-hero p{font-size:18px; color:var(--ink-soft); max-width:58ch; margin:0 auto;}
body.page-portfolio .pf-grid{display:grid; grid-template-columns:1fr 1fr; gap:30px; padding:24px 0 56px;}
body.page-portfolio .pf-card{border:1px solid var(--hair); border-radius:8px; overflow:hidden; background:var(--card); text-decoration:none; display:block; transition:border-color .15s ease;}
body.page-portfolio .pf-card:hover{border-color:var(--green);}
body.page-portfolio .pf-bar{display:flex; align-items:center; gap:7px; padding:9px 13px; border-bottom:1px solid var(--hair); background:var(--paper2);}
body.page-portfolio .pf-bar i{width:7px; height:7px; border-radius:50%; background:var(--hair); display:block;}
body.page-portfolio .pf-bar span{font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); margin-left:6px;}
body.page-portfolio .pf-card img{display:block; width:100%; aspect-ratio:16/10; object-fit:cover; object-position:top center;}
body.page-portfolio .pf-meta{display:flex; justify-content:space-between; align-items:center; padding:16px 18px;}
body.page-portfolio .pf-meta b{font-family:'Spectral',serif; font-weight:500; font-size:17px; color:var(--ink);}
body.page-portfolio .pf-meta .cat{font-size:13px; color:var(--muted);}

body.page-portfolio .pf-results{background:var(--paper2); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:62px 0; text-align:center;}
body.page-portfolio .pf-results h2{font-size:clamp(24px,2.8vw,32px); margin-bottom:8px;}
body.page-portfolio .pf-results .sub{font-size:15.5px; color:var(--muted); max-width:60ch; margin:0 auto 38px;}
body.page-portfolio .pf-cases{display:flex; justify-content:center; gap:30px; flex-wrap:wrap;}
body.page-portfolio .pf-case{border:1px solid var(--hair); border-radius:8px; padding:30px 34px; background:var(--card); min-width:300px;}
body.page-portfolio .pf-case h3{font-size:20px; margin-bottom:4px;}
body.page-portfolio .pf-case .ind{font-size:13px; color:var(--muted); margin-bottom:22px;}
body.page-portfolio .pf-case-metrics{display:flex; gap:30px; justify-content:center;}
body.page-portfolio .pf-m .v{display:block; font-family:'Spectral',serif; font-size:28px; color:var(--green); line-height:1;}
body.page-portfolio .pf-m .l{display:block; font-size:12px; color:var(--muted); margin-top:6px;}

body.page-portfolio .pf-cta{padding:64px 0; text-align:center;}
body.page-portfolio .pf-cta h2{font-size:clamp(24px,2.8vw,32px); margin-bottom:12px;}
body.page-portfolio .pf-cta p{font-size:16.5px; color:var(--ink-soft); max-width:50ch; margin:0 auto 26px;}
body.page-portfolio .pf-cta .cta-row{display:flex; gap:22px; justify-content:center; align-items:center; flex-wrap:wrap;}

@media (max-width:760px){
  body.page-portfolio .pf-grid{grid-template-columns:1fr;}
  body.page-portfolio .pf-cases{gap:20px;}
}