/* ============================================================
   CASE STUDY — styles specific to the work-*.html project pages
   (loaded after base.css)
   ============================================================ */

.case-topbar{padding:calc(96px + var(--space-4)) 0 0;}
.back-link{ display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:var(--ink-soft); }
.back-link:hover{color:var(--accent);}

.case-hero{padding:var(--space-4) 0 var(--space-6);}
.case-hero-head{max-width:800px;margin-bottom:var(--space-5);}
.case-hero-head .eyebrow{margin-bottom:16px;}
.case-hero-head .h1{font-size:clamp(36px,5.6vw,68px);}
.case-hero-head p{margin-top:20px;font-size:18px;max-width:620px;}
.case-hero-visual{ border-radius:var(--radius-lg); overflow:hidden; height:min(78vh,680px); min-height:420px; position:relative; }
.case-hero-visual .thumb-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:6%;}

.case-overview{padding:var(--space-6) 0;background:var(--bg-alt);}
.overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.overview-col h4{font-family:var(--font-body);font-size:14px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;font-weight:600;}
.overview-col p{font-size:16px;}
.scope-list{display:flex;flex-direction:column;gap:8px;}
.scope-list span{font-size:16px;color:var(--ink-soft);position:relative;padding-left:16px;}
.scope-list span::before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--accent);}
@media (max-width:860px){.overview-grid{grid-template-columns:1fr;gap:32px;}}

.case-work{padding:var(--space-7) 0;}
.case-work-head{max-width:640px;margin-bottom:var(--space-6);}
.moment{margin-bottom:var(--space-6);}
.moment:last-child{margin-bottom:0;}
.moment-visual{border-radius:var(--radius-lg);overflow:hidden;position:relative;height:min(64vh,560px);min-height:340px;}
.moment-visual .thumb-inner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:7%;}
.moment-caption{margin-top:18px;font-size:15px;color:var(--ink-faint);max-width:480px;}
.moment-split{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.moment-split .moment-visual{height:min(50vh,440px);min-height:280px;}
@media (max-width:860px){.moment-split{grid-template-columns:1fr;}}

.case-thinking{padding:var(--space-7) 0;background:var(--dark-bg);color:var(--dark-text);}
.case-thinking .eyebrow{color:var(--dark-text-soft);}
.thinking-quote{font-family:var(--font-display);font-size:clamp(28px,3.8vw,50px);font-weight:800;letter-spacing:-0.03em;line-height:0.98;max-width:820px;margin-bottom:var(--space-4);}
.thinking-body{max-width:640px;display:flex;flex-direction:column;gap:18px;}
.thinking-body p{color:var(--dark-text-soft);font-size:17px;}

.case-outcome{padding:var(--space-7) 0;text-align:center;}
.outcome-statement{font-size:clamp(24px,3.2vw,38px);font-weight:700;letter-spacing:-0.015em;line-height:1.3;max-width:760px;margin:0 auto;}

.case-next{padding:0 0 var(--space-7);}
.case-next-link{display:block;border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--dur-md) var(--ease), box-shadow var(--dur-md) var(--ease);}
.case-next-link:hover{transform:translateY(-6px);box-shadow:0 50px 90px -40px rgba(11,12,13,0.32);}
.case-next-visual{height:min(56vh,480px);min-height:320px;position:relative;overflow:hidden;}
.case-next-visual .thumb-inner{transition:transform .7s var(--ease);}
.case-next-link:hover .thumb-inner{transform:scale(1.035);}
.case-next-info{display:flex;justify-content:space-between;align-items:center;padding:26px 4px 0;}
.case-next-info .next-label{font-size:13px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px;display:block;}
.case-next-info .next-title{font-family:var(--font-display);font-size:clamp(24px,3vw,40px);font-weight:900;letter-spacing:-0.03em;}
.case-next-arrow{width:52px;height:52px;border-radius:50%;border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background var(--dur-sm) var(--ease),border-color var(--dur-sm) var(--ease),box-shadow var(--dur-sm) var(--ease),color var(--dur-sm) var(--ease);}
/* white icon + accent glow on hover — same treatment as the "Start a
   project" button (.btn-primary:hover in base.css); the box-shadow value
   is kept identical to that rule so the two stay visually consistent. */
.case-next-link:hover .case-next-arrow{background:var(--accent);border-color:var(--accent);box-shadow:0 10px 24px -8px rgba(41,126,255,0.45);color:#fff;}
/* the icon's <path> carries stroke="currentColor" as a presentation
   attribute, so setting `stroke` on the parent <svg> has no effect — the
   path's own attribute wins over the inherited value. Driving it via
   `color` on the button (as .btn-primary does) resolves currentColor. */
.case-next-arrow svg{transition:transform var(--dur-sm) var(--ease);}
.case-next-link:hover .case-next-arrow svg{transform:translate(2px,-2px);}

/* .is-static — next-project card with no card-level hover treatment: no
   lift, shadow, image zoom or underline. The circular arrow is the one
   exception and keeps its full hover treatment (white icon, accent glow
   and nudge) from the base rules above. Scoped to the flagged cards so any
   other page is unaffected. */
.case-next-link.is-static,
.case-next-link.is-static:hover{transform:none;box-shadow:none;text-decoration:none;}
.case-next-link.is-static:hover .thumb-inner{transform:none;}
.case-next-link.is-static:hover .next-title,
.case-next-link.is-static:hover .next-label{text-decoration:none;}

.case-cta{padding:var(--space-6) 0 var(--space-7);}
.case-cta-panel{ background:var(--dark-bg);color:var(--dark-text);border-radius:var(--radius-lg); padding:var(--space-6) var(--gutter); text-align:center;
  background-image:radial-gradient(900px 400px at 50% 0%, rgba(41,126,255,0.22), transparent 60%); }
.case-cta-panel .h2{color:var(--dark-text);margin-bottom:20px;}
.case-cta-ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:28px;}
.case-availability{ display:inline-flex;align-items:center;gap:8px; padding:8px 16px;border:1px solid var(--dark-border);border-radius:var(--radius-pill);
  font-size:14px;font-weight:500;color:var(--dark-text); margin-top:24px;background:rgba(255,255,255,0.06); }

/* real product mockups — .media-frame / .case-media are defined in
   base.css so the homepage work cards share the exact same treatment. */
.moment-split .media-frame{height:auto;min-height:0;}

/* mock composition primitives — case study sizing (larger scale
   than the homepage gallery, see assets/css/home.css) */
.mock-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);border-radius:8px;padding:16px;width:100%;}
.mock-card.light{background:#fff;border-color:rgba(11,12,13,0.08);}
.mock-line{height:6px;border-radius:3px;background:rgba(255,255,255,0.18);margin-bottom:8px;}
.mock-line.light{background:rgba(11,12,13,0.1);}
.mock-line.short{width:40%;}
.mock-bars{display:flex;gap:5px;align-items:flex-end;height:60px;margin-top:10px;}
.mock-bars i{flex:1;background:var(--accent);border-radius:2px;}