/*
 * Page styles — work
 * Source: _design-source/HTML Layout/kosh-case-study.html
 * Shared header/footer styles live in ../components/.
 */
html{overflow-x:hidden;scroll-behavior:smooth;}

/* ── SHARED ── */
.eyebrow{color:var(--cr);margin-bottom:20px;}
.rv{opacity:0;transform:translateY(18px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.rv.in{opacity:1;transform:none;}
.d1{transition-delay:.1s;}.d2{transition-delay:.2s;}.d3{transition-delay:.3s;}.d4{transition-delay:.4s;}/* ══════════════════════════════════════
   HERO — white, editorial
   No mockup panel on this page.
   The headline IS the content.
   Stat strip shows the work at scale.
══════════════════════════════════════ */
.hero{background:var(--k-sky);padding:clamp(64px,8vw,112px) 0 0;}
.hero-hl{color:var(--ink);margin-bottom:40px;}
.hero-hl em{font-style:italic;}
.hero-sub{color:var(--mid);max-width:600px;margin-bottom:64px;}
.hero-sub strong{color:var(--ink);font-weight:400;}

/* Filter bar */
.filter-bar{display:flex;align-items:center;gap:0;border-top:1px solid var(--rul);border-bottom:1px solid var(--rul);overflow-x:auto;scrollbar-width:none;}
.filter-bar::-webkit-scrollbar{display:none;}
.filter-btn{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);padding:16px 24px;cursor:pointer;border-right:1px solid var(--rul);white-space:nowrap;transition:color .2s,background .2s;background:none;border-top:none;border-left:none;border-bottom:none;font-family:var(--sans);}
.filter-btn:first-child{padding-left:0;}
.filter-btn:hover{color:var(--ink);}
.filter-btn.active{color:var(--cr);}
.filter-btn.active::after{content:'';display:block;height:2px;background:var(--cr);margin-top:14px;margin-bottom:-17px;}

/* Stat strip */
.hero-stats{border-top:1px solid var(--rul);display:grid;grid-template-columns:repeat(4,1fr);margin-top:0;}
.hs-cell{padding:28px 0;border-right:1px solid var(--rul);}
.hs-cell:last-child{border-right:none;}
.hs-n{font-family:var(--serif);font-size:clamp(32px,4vw,56px);font-weight:300;color:var(--ink);line-height:1;display:block;margin-bottom:5px;}
.hs-n em{color:var(--cr);font-style:normal;}
.hs-l{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);}

/* ══════════════════════════════════════
   FEATURED CASE — full bleed dark
   One hero case study, full width.
   The most impressive result, set large.
══════════════════════════════════════ */
.featured{background:var(--dk);padding:80px 0;border-bottom:1px solid rgba(247,246,243,.07);}
.featured-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;}
.featured-label{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--text-on-dark-3);display:block;margin-bottom:20px;}
.featured-hl{color:#fff;margin-bottom:20px;}
.featured-hl em{color:var(--rs);}
.featured-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:32px;}
.featured-tag{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-dark-3);padding:5px 12px;border:1px solid rgba(247,246,243,.12);}
.featured-body{color:var(--text-on-dark-3);margin-bottom:32px;}
.featured-body strong{color:rgba(247,246,243,.8);font-weight:400;}
.featured-link{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--rs);padding-bottom:2px;border-bottom:1px solid rgba(196,147,138,.25);transition:gap .25s var(--ease),border-color .2s;}
.featured-link:hover{gap:16px;border-color:var(--rs);}
.featured-link svg{width:11px;height:11px;}
/* Result cells */
.featured-results{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(247,246,243,.07);border:1px solid rgba(247,246,243,.07);}
.fr-cell{padding:40px 36px;transition:background .3s;}
.fr-cell:hover{background:rgba(247,246,243,.04);}
.fr-n{font-family:var(--serif);font-size:clamp(44px,6vw,80px);font-weight:300;color:#fff;line-height:1;display:block;margin-bottom:8px;}
.fr-n em{color:var(--rs);font-style:normal;}
.fr-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-on-dark-3);display:block;margin-bottom:10px;}
.fr-desc{color:var(--text-on-dark-3);}

/* ══════════════════════════════════════
   CASE STUDY GRID
   Alternating layout:
   - Row A: 2/3 + 1/3
   - Row B: 1/3 + 2/3
   - Row C: full bleed single
   Each card: dark gradient background,
   category tag, headline, metrics,
   and an arrow CTA on hover.
══════════════════════════════════════ */
.cases-section{padding:0;background:var(--k-sky);}
.cases-section-label{padding:48px 72px 0;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--mid);border-top:1px solid var(--rul);}

/* Row layouts */
.case-row-ab{display:grid;gap:2px;background:var(--rul);}
.case-row-ab.layout-a{grid-template-columns:2fr 1fr;}
.case-row-ab.layout-b{grid-template-columns:1fr 2fr;}
.case-row-ab.layout-c{grid-template-columns:1fr 1fr 1fr;}
.case-full{background:var(--rul);}

/* Individual card */
.case-card{
  position:relative;overflow:hidden;
  min-height:400px;display:flex;align-items:flex-end;
  cursor:pointer;}
.case-card.tall{min-height:520px;}
.case-card.short{min-height:320px;}

/* Background gradients — each case gets a unique dark tone */
.bg-1{background:linear-gradient(145deg,#0f0d0c 0%,#1a1208 100%);}
.bg-2{background:linear-gradient(145deg,#0a0d14 0%,#0e1520 100%);}
.bg-3{background:linear-gradient(145deg,#0c100c 0%,#101a10 100%);}
.bg-4{background:linear-gradient(145deg,#10090c 0%,#180c14 100%);}
.bg-5{background:linear-gradient(145deg,#0e0c0a 0%,#1a1510 100%);}
.bg-6{background:linear-gradient(145deg,#090c12 0%,#0c1020 100%);}
.bg-7{background:linear-gradient(145deg,#100c08 0%,#1c1408 100%);}
.bg-8{background:linear-gradient(145deg,#0c0e10 0%,#101418 100%);}

/* Radial crimson glow from bottom-left */
.case-card::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 10% 90%,rgba(20,18,16,.04) 0%,transparent 55%),
             linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.2) 50%,transparent 100%);
  z-index:1;}
/* Hover: reveal more of the card */
.case-card::after{
  content:'';position:absolute;inset:0;
  background:rgba(20,18,16,.06);
  opacity:0;transition:opacity .35s;z-index:2;}
.case-card:hover::after{opacity:1;}

.case-inner{position:relative;z-index:3;padding:40px;width:100%;transform:translateY(8px);transition:transform .4s var(--ease);}
.case-card:hover .case-inner{transform:translateY(0);}

.case-market{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-on-dark-3);display:block;margin-bottom:8px;}
.case-title{font-family:var(--serif);font-size:clamp(20px,2.5vw,36px);font-weight:300;color:#fff;line-height:1.2;letter-spacing:-.015em;margin-bottom:12px;}
.case-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:16px;}
.case-tag{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-on-dark-3);padding:3px 9px;border:1px solid rgba(247,246,243,.1);}
.case-metrics{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:20px;}
.case-metric{display:flex;flex-direction:column;}
.case-metric-n{font-family:var(--serif);font-size:clamp(22px,3vw,36px);font-weight:300;color:#fff;line-height:1;}
.case-metric-n em{color:var(--rs);font-style:normal;}
.case-metric-l{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-on-dark-3);margin-top:3px;}
.case-card:hover .case-cta{opacity:1;transform:translateY(0);}
.case-card:hover .case-cta{color:var(--rs);}

/* ══════════════════════════════════════
   LIST VIEW — white editorial rows
   Alternative browsing format.
   Shows all cases as clean table rows.
══════════════════════════════════════ */
.list-section{padding:80px 0;border-top:1px solid var(--rul);}
.list-header{display:grid;grid-template-columns:1fr 160px 200px 120px;gap:40px;padding-bottom:12px;border-bottom:1px solid var(--rul);margin-bottom:0;}
.list-col{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);}
.list-rows{display:flex;flex-direction:column;}
.list-row{
  display:grid;grid-template-columns:1fr 160px 200px 120px;
  gap:40px;align-items:center;
  padding:22px 0;border-bottom:1px solid var(--rul);
  cursor:pointer;position:relative;
  transition:padding-left .25s var(--ease);}
.list-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--cr);transform:scaleY(0);transform-origin:top;transition:transform .35s var(--ease);}
.list-row:hover{padding-left:10px;}
.list-row:hover::before{transform:scaleY(1);}
.list-row-title{font-family:var(--serif);font-size:clamp(16px,1.8vw,22px);font-weight:300;color:var(--ink);letter-spacing:-.01em;line-height:1.2;}
.list-row-title:hover{color:var(--cr);}
.list-row-market{font-size:13px;color:var(--mid);}
.list-row-services{display:flex;flex-wrap:wrap;gap:4px;}
.list-row-tag{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid);padding:3px 8px;border:1px solid var(--rul);}
.list-row-result{font-family:var(--serif);font-size:20px;font-weight:300;color:var(--cr);line-height:1;}

/* ══════════════════════════════════════
   ACROSS INDUSTRIES — sand
   Shows breadth without listing
   every client. Sector chips.
══════════════════════════════════════ */
.industries-section{padding:80px 0;border-top:1px solid var(--rul);background:var(--snd);}
.ind-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.ind-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px;}
.ind-chip{font-size:12px;letter-spacing:.06em;color:var(--ink);padding:10px 20px;border:1px solid var(--rul);background:var(--k-sky);transition:background .2s,border-color .2s,color .2s;cursor:default;}
.ind-chip:hover{border-color:var(--cr);color:var(--cr);}

/* ══════════════════════════════════════
   NOTE ON ATTRIBUTION — dark
   The honest section. Most of this
   work is white-label. Named here
   with integrity rather than hidden.
══════════════════════════════════════ */
.note-section{padding:64px 0;border-top:1px solid rgba(247,246,243,.07);background:var(--dk);}
.note-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.note-hl{color:#fff;margin-bottom:16px;}
.note-hl em{color:var(--rs);}
.note-body{color:var(--text-on-dark-3);}
.note-body strong{color:rgba(247,246,243,.75);font-weight:400;}
.note-rule{height:1px;background:rgba(247,246,243,.1);margin:28px 0;}/* ── CTA ── */
.cta-section{padding:var(--section-y) 0;background:var(--k-sky);}
.cta-hl{color:var(--ink);margin-bottom:24px;}
.cta-hl em{font-style:italic;}
.cta-body{color:var(--mid);max-width:580px;margin-bottom:48px;}
.contact-strip{margin-top:64px;border-top:1px solid var(--rul);}
.cs-row{display:flex;align-items:center;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--rul);}
.cs-row:hover .cs-val{color:var(--cr);}
.cs-lbl{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--mid);}
.cs-val{font-size:15px;color:var(--ink);transition:color .2s;}

@media(max-width:960px){
    .hero-stats{grid-template-columns:1fr 1fr;}
  .featured-inner{grid-template-columns:1fr;}
  .featured-results{grid-template-columns:1fr 1fr;}
  .case-row-ab{grid-template-columns:1fr!important;}
  .case-full .case-row-ab{grid-template-columns:1fr!important;}
  .list-header{display:none;}
  .list-row{grid-template-columns:1fr;gap:8px;}
  .list-row-market,.list-row-services,.list-row-result{display:none;}
  .ind-inner{grid-template-columns:1fr;}
  .note-inner{grid-template-columns:1fr;}
  .cases-section-label{padding:32px 24px 0;}
}
@media(prefers-reduced-motion:reduce){}