/* =====================================================
   Work page (case studies) — on top of styles-v2.css
   ===================================================== */

/* ---------- HERO ---------- */
.wk-hero { background: var(--vs-carmine-deep); color: var(--vs-cream); padding: var(--sp-7) 0 var(--sp-6); position: relative; overflow: hidden; }
.wk-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 0%, rgba(232,200,117,0.16) 0%, transparent 55%); pointer-events: none; }
.wk-hero__title { font-size: clamp(3.2rem, 8vw, 7rem); line-height: 0.9; letter-spacing: -0.04em; margin: var(--sp-2) 0 var(--sp-3); max-width: 1000px; }
.wk-hero__title em { font-style: italic; color: var(--vs-butter); }
.wk-hero__sub { max-width: 560px; font-size: 1.1rem; line-height: 1.6; opacity: 0.85; margin-bottom: var(--sp-4); }
.wk-hero__jump { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- AT A GLANCE ---------- */
.wk-glance { background: var(--vs-ink); color: var(--vs-cream); padding: var(--sp-5) 0; }
.wk-glance__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(245,238,222,0.12); border-bottom: 1px solid rgba(245,238,222,0.12); }
@media (max-width: 900px) { .wk-glance__grid { grid-template-columns: repeat(2, 1fr); } }
.wk-glance__item { padding: var(--sp-4) var(--sp-3); border-right: 1px solid rgba(245,238,222,0.12); }
.wk-glance__item:last-child { border-right: 0; }
@media (max-width: 900px) { .wk-glance__item:nth-child(2n) { border-right: 0; } .wk-glance__item:nth-child(-n+2) { border-bottom: 1px solid rgba(245,238,222,0.12); } }
.wk-glance__stat { font-family: var(--font-display); font-style: italic; font-size: clamp(2.2rem, 4vw, 3.4rem); color: var(--vs-butter); line-height: 1; letter-spacing: -0.03em; margin-bottom: 10px; }
.wk-glance__label { font-size: 0.9rem; opacity: 0.75; line-height: 1.4; }

/* ---------- CASE INDEX (sticky jump nav) ---------- */
.wk-index { background: var(--vs-cream); border-bottom: 1px solid rgba(20,10,12,0.1); position: sticky; top: 86px; z-index: 40; transition: transform 400ms var(--ease), opacity 300ms; }
.wk-index.is-hidden { transform: translateY(calc(-100% - 90px)); opacity: 0; pointer-events: none; }
.wk-index__inner { display: flex; gap: var(--sp-4); justify-content: center; padding: 18px 32px; overflow-x: auto; scrollbar-width: none; }
.wk-index__inner::-webkit-scrollbar { display: none; }
.wk-index a { flex-shrink: 0; font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--vs-ink); opacity: 0.5; position: relative; padding-bottom: 4px; transition: opacity 300ms, color 300ms; }
.wk-index a span { font-size: 0.8rem; color: var(--vs-carmine); margin-right: 6px; }
.wk-index a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--vs-carmine); transform: scaleX(0); transform-origin: left; transition: transform 400ms var(--ease); }
.wk-index a:hover, .wk-index a.is-active { opacity: 1; color: var(--vs-carmine); }
.wk-index a.is-active::after, .wk-index a:hover::after { transform: scaleX(1); }

/* ---------- SECTION DIVIDER (Organic / Ads) ---------- */
.wk-divider { padding: var(--sp-6) 0 var(--sp-4); text-align: center; }
.wk-divider__tag { display: inline-block; background: var(--vs-carmine); color: var(--vs-cream); padding: 8px 18px; border-radius: var(--r-pill); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; margin-bottom: var(--sp-3); }
.wk-divider h2 { max-width: 800px; margin: 0 auto var(--sp-2); }
.wk-divider h2 em { font-style: italic; color: var(--vs-carmine); }
.wk-divider p { max-width: 560px; margin: 0 auto; opacity: 0.75; }
.section--ink .wk-divider h2 em, .section--carmine-deep .wk-divider h2 em { color: var(--vs-butter); }
.section--ink .wk-divider__tag { background: var(--vs-butter); color: var(--vs-ink); }

/* ---------- CASE STUDY ---------- */
.wk-case { padding: var(--sp-6) 0; scroll-margin-top: 160px; }
.wk-case__head { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--sp-5); align-items: end; margin-bottom: var(--sp-5); }
@media (max-width: 900px) { .wk-case__head { grid-template-columns: 1fr; gap: var(--sp-3); } }
.wk-case__chip { display: inline-block; background: var(--vs-butter); color: var(--vs-ink); padding: 7px 14px; border-radius: var(--r-pill); font-family: var(--font-display); font-style: italic; font-size: 0.9rem; margin-bottom: var(--sp-3); }
.wk-case__title { font-size: clamp(3rem, 7vw, 6rem); line-height: 0.9; letter-spacing: -0.04em; }
.wk-case__title em { font-style: italic; color: var(--vs-carmine); }
.section--ink .wk-case__title em, .section--carmine-deep .wk-case__title em { color: var(--vs-butter); }
.wk-case__lead { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.25; opacity: 0.9; }

.wk-case__media { position: relative; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 21 / 9; margin-bottom: var(--sp-5); background: #0a0506 center/cover no-repeat; }
@media (max-width: 700px) { .wk-case__media { aspect-ratio: 4 / 5; } }
.wk-case__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1200ms var(--ease); }
.wk-case__media:hover img { transform: scale(1.03); }
.wk-case__media-strip { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin-bottom: var(--sp-5); }
.wk-case__media-strip > div { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/5; background: #0a0506 center/cover no-repeat; transition: transform 500ms var(--ease); }
.wk-case__media-strip > div:first-child { aspect-ratio: auto; }
.wk-case__media-strip > div:hover { transform: translateY(-4px); }
@media (max-width: 700px) { .wk-case__media-strip { grid-template-columns: 1fr 1fr; } .wk-case__media-strip > div:first-child { grid-column: span 2; aspect-ratio: 16/10; } }

.wk-case__body { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); margin-bottom: var(--sp-5); }
@media (max-width: 900px) { .wk-case__body { grid-template-columns: 1fr; gap: var(--sp-4); } }
.wk-case__body h4 { font-family: var(--font-body); font-style: normal; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: var(--vs-carmine); margin-bottom: 12px; }
.section--ink .wk-case__body h4, .section--carmine-deep .wk-case__body h4 { color: var(--vs-butter); }
.wk-case__body p { font-size: 1.05rem; line-height: 1.65; opacity: 0.88; }

/* Stat cards */
.wk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: var(--sp-5); }
@media (max-width: 900px) { .wk-stats { grid-template-columns: repeat(2, 1fr); } }
.wk-stat { border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-3); background: var(--vs-ink); color: var(--vs-cream); transition: transform 400ms var(--ease), background 400ms; position: relative; overflow: hidden; }
.wk-stat:hover { transform: translateY(-6px); background: var(--vs-carmine); }
.wk-stat__label { font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vs-butter); font-weight: 500; margin-bottom: var(--sp-2); }
.wk-stat__num { font-family: var(--font-display); font-style: italic; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1; letter-spacing: -0.03em; margin-bottom: 10px; }
.wk-stat__desc { font-size: 0.88rem; line-height: 1.45; opacity: 0.8; }
.section--ink .wk-stat { background: rgba(245,238,222,0.06); border: 1px solid rgba(245,238,222,0.12); }
.section--ink .wk-stat:hover { background: var(--vs-carmine); border-color: var(--vs-carmine); }
.section--carmine-deep .wk-stat { background: rgba(20,10,12,0.35); }
.section--carmine-deep .wk-stat:hover { background: var(--vs-ink); }

/* Callout quote */
.wk-callout { border-left: 3px solid var(--vs-carmine); padding: var(--sp-2) 0 var(--sp-2) var(--sp-4); margin-bottom: var(--sp-5); max-width: 860px; }
.section--ink .wk-callout, .section--carmine-deep .wk-callout { border-left-color: var(--vs-butter); }
.wk-callout h3 { margin-bottom: 12px; }
.wk-callout h3 em { font-style: italic; color: var(--vs-carmine); }
.section--ink .wk-callout h3 em, .section--carmine-deep .wk-callout h3 em { color: var(--vs-butter); }
.wk-callout p { font-size: 1.02rem; line-height: 1.65; opacity: 0.85; }

/* Before / After toggle */
.wk-ba { border-radius: var(--r-lg); overflow: hidden; border: 1.5px solid currentColor; max-width: 860px; }
.wk-ba__toggle { display: flex; border-bottom: 1.5px solid currentColor; }
.wk-ba__btn { flex: 1; padding: 16px; background: transparent; border: 0; color: inherit; font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; cursor: pointer; transition: background 300ms, color 300ms; }
.wk-ba__btn + .wk-ba__btn { border-left: 1.5px solid currentColor; }
.wk-ba__btn.is-active { background: var(--vs-carmine); color: var(--vs-cream); }
.section--ink .wk-ba__btn.is-active, .section--carmine-deep .wk-ba__btn.is-active { background: var(--vs-butter); color: var(--vs-ink); }
.wk-ba__panel { display: none; padding: var(--sp-4); font-family: var(--font-display); font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.35; animation: fadeIn 400ms var(--ease); }
.wk-ba__panel.is-active { display: block; }

/* Week-by-week tabs */
.wk-weeks { margin-bottom: var(--sp-5); }
.wk-weeks__nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--sp-3); }
.wk-weeks__btn { padding: 10px 20px; border-radius: var(--r-pill); border: 1.5px solid currentColor; background: transparent; color: inherit; font-family: var(--font-body); font-size: 0.88rem; font-weight: 500; cursor: pointer; opacity: 0.6; transition: all 300ms var(--ease); }
.wk-weeks__btn:hover { opacity: 1; }
.wk-weeks__btn.is-active { opacity: 1; background: var(--vs-butter); color: var(--vs-ink); border-color: var(--vs-butter); }
.section--cream .wk-weeks__btn.is-active { background: var(--vs-carmine); color: var(--vs-cream); border-color: var(--vs-carmine); }
.wk-week { display: none; grid-template-columns: 1fr 1.4fr; gap: var(--sp-4); align-items: center; padding: var(--sp-4); border-radius: var(--r-lg); background: rgba(20,10,12,0.3); animation: fadeIn 400ms var(--ease); }
.section--cream .wk-week { background: var(--vs-cream-deep); }
.wk-week.is-active { display: grid; }
@media (max-width: 800px) { .wk-week { grid-template-columns: 1fr; } }
.wk-week__tag { font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vs-butter); font-weight: 500; margin-bottom: 8px; }
.section--cream .wk-week__tag { color: var(--vs-carmine); }
.wk-week h3 { margin-bottom: 10px; }
.wk-week__note { font-size: 0.95rem; opacity: 0.78; line-height: 1.5; }
.wk-week__nums { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wk-week__num { padding: var(--sp-3); border-radius: var(--r); border: 1px solid rgba(245,238,222,0.15); }
.section--cream .wk-week__num { border-color: rgba(20,10,12,0.12); background: var(--vs-cream); }
.wk-week__num strong { display: block; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--vs-butter); margin-bottom: 6px; }
.section--cream .wk-week__num strong { color: var(--vs-carmine); }
.wk-week__num span { font-size: 0.82rem; opacity: 0.75; }

/* Growth staircase (organic Brew Thru) */
.wk-growth { display: flex; align-items: flex-end; gap: 14px; height: 320px; padding: var(--sp-3) 0; margin-bottom: var(--sp-5); max-width: 860px; }
.wk-growth__bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.wk-growth__fill { width: 100%; height: 0; background: linear-gradient(180deg, var(--vs-butter) 0%, var(--vs-carmine) 100%); border-radius: 12px 12px 4px 4px; transition: height 1400ms cubic-bezier(.22,1,.36,1); position: relative; }
.wk-growth.is-visible .wk-growth__fill { height: var(--h); }
.wk-growth__val { font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 2.4vw, 2rem); margin-bottom: 10px; opacity: 0; transition: opacity 600ms 900ms; }
.wk-growth.is-visible .wk-growth__val { opacity: 1; }
.wk-growth__label { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 12px; opacity: 0.6; }

/* Customer math calculator */
.wk-calc { border-radius: var(--r-lg); background: var(--vs-ink); color: var(--vs-cream); padding: var(--sp-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: center; }
@media (max-width: 900px) { .wk-calc { grid-template-columns: 1fr; padding: var(--sp-4); } }
.wk-calc h3 em { font-style: italic; color: var(--vs-butter); }
.wk-calc p { opacity: 0.78; line-height: 1.6; margin-top: 12px; }
.wk-calc__control { margin-bottom: var(--sp-3); }
.wk-calc__control label { display: flex; justify-content: space-between; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; margin-bottom: 10px; }
.wk-calc__control label strong { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; letter-spacing: 0; text-transform: none; color: var(--vs-butter); opacity: 1; }
.wk-calc input[type=range] { width: 100%; accent-color: var(--vs-butter); height: 4px; cursor: pointer; }
.wk-calc__out { border-top: 1px solid rgba(245,238,222,0.15); padding-top: var(--sp-3); margin-top: var(--sp-3); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.wk-calc__out div span { display: block; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.65; margin-bottom: 6px; }
.wk-calc__out div strong { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: clamp(2rem, 4vw, 3rem); line-height: 1; color: var(--vs-butter); }

/* Next-case footer link */
.wk-next { display: flex; justify-content: flex-end; margin-top: var(--sp-4); }
.wk-next a { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; display: inline-flex; gap: 10px; align-items: center; transition: gap 300ms; }
.wk-next a:hover { gap: 18px; }

/* Campaign switch (April / July) */
.wk-camp { margin-bottom: var(--sp-4); }
.wk-camp__toggle { display: inline-flex; gap: 6px; padding: 6px; border-radius: var(--r-pill); background: var(--vs-cream-deep); border: 1px solid rgba(20,10,12,0.1); }
.wk-camp__btn { border: 0; background: transparent; padding: 12px 26px; border-radius: var(--r-pill); font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--vs-ink); cursor: pointer; opacity: 0.6; transition: all 350ms var(--ease); display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; }
.wk-camp__btn span { font-family: var(--font-body); font-style: normal; font-size: 0.6rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; margin-bottom: 4px; color: var(--vs-carmine); }
.wk-camp__btn:hover { opacity: 1; }
.wk-camp__btn.is-active { background: var(--vs-carmine); color: var(--vs-cream); opacity: 1; }
.wk-camp__btn.is-active span { color: var(--vs-butter); }
.wk-camp__panel { display: none; animation: fadeIn 450ms var(--ease); }
.wk-camp__panel.is-active { display: block; }
@media (max-width: 600px) { .wk-camp__toggle { display: flex; } .wk-camp__btn { flex: 1; padding: 10px 14px; font-size: 1rem; } }

/* Hero right-side deck of result cards */
.wk-hero__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--sp-5); align-items: center; position: relative; }
@media (max-width: 960px) { .wk-hero__grid { grid-template-columns: 1fr; } }
.wk-hero__deck { position: relative; height: 480px; }
@media (max-width: 960px) { .wk-hero__deck { height: 380px; margin-top: var(--sp-3); } }
.wk-deck-card { position: absolute; width: 58%; aspect-ratio: 4/5; border-radius: var(--r-lg); background: #0a0506 center/cover no-repeat; box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55); border: 5px solid var(--vs-cream); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; color: var(--vs-cream); transition: transform 600ms var(--ease), z-index 0s; }
.wk-deck-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(20,10,12,0.85) 100%); }
.wk-deck-card > * { position: relative; }
.wk-deck-card__stat { font-family: var(--font-display); font-style: italic; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; color: var(--vs-butter); letter-spacing: -0.03em; }
.wk-deck-card__label { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; margin-top: 6px; opacity: 0.9; }
.wk-deck-card--1 { left: 0; top: 6%; transform: rotate(-9deg); z-index: 1; animation: deckFloat 7s ease-in-out infinite alternate; }
.wk-deck-card--2 { left: 16%; top: 0; transform: rotate(-3deg); z-index: 2; border-color: var(--vs-butter); }
.wk-deck-card--3 { left: 30%; top: 8%; transform: rotate(4deg); z-index: 3; }
.wk-deck-card--4 { left: 44%; top: 14%; transform: rotate(10deg); z-index: 4; border-color: var(--vs-blush); }
@keyframes deckFloat { to { transform: rotate(-9deg) translateY(-10px); } }
/* Fan out on hover (desktop) */
@media (hover: hover) {
  .wk-hero__deck:hover .wk-deck-card--1 { transform: rotate(-16deg) translate(-30px, 10px); }
  .wk-hero__deck:hover .wk-deck-card--2 { transform: rotate(-6deg) translate(-10px, -16px); }
  .wk-hero__deck:hover .wk-deck-card--3 { transform: rotate(6deg) translate(14px, -10px); }
  .wk-hero__deck:hover .wk-deck-card--4 { transform: rotate(16deg) translate(36px, 14px); }
  .wk-deck-card:hover { z-index: 10 !important; transform: rotate(0deg) translateY(-24px) scale(1.06) !important; }
}