/* Zulu Code — case study pages (loaded after styles.css) */

/* HERO */
.case-hero { position: relative; padding: clamp(8rem, 18vh, 11rem) 0 0; overflow: clip; isolation: isolate; }
.case-hero .hero-atmos { inset: -10% -20% 30%; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.85rem; color: var(--on-dark-3); margin-bottom: 2rem; }
.crumbs li + li::before { content: '/'; margin-right: 0.5rem; opacity: 0.5; }
.crumbs a { color: var(--on-dark-2); transition: color 0.3s ease; }
.crumbs a:hover { color: var(--white); }
.case-kind { display: flex; align-items: baseline; gap: 0.9rem; font-size: 0.85rem; color: var(--on-dark-3); margin-bottom: 1.25rem; }
.case-kind .section-index { color: var(--case, var(--teal-light)); white-space: nowrap; }
.case-title { font-family: var(--font-display); font-size: clamp(2.6rem, 5.6vw, 5.5rem); font-weight: 800; line-height: 0.94; letter-spacing: -0.045em; text-transform: lowercase; text-wrap: balance; }
.case-title .accent { color: var(--case, var(--teal-light)); }
.case-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.case-intro { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.65; color: var(--on-dark-2); max-width: 44ch; }
.case-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.case-actions .btn--primary { background: var(--case-btn, var(--magenta)); color: var(--case-btn-text, var(--white)); }
.case-actions .btn--primary:hover { filter: brightness(1.1); }
.case-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin-top: clamp(3rem, 6vw, 4.5rem); padding: 1.5rem 0; border-top: 1px solid var(--line-dark); }
.case-meta dt { font-size: 0.8rem; color: var(--on-dark-3); margin-bottom: 0.4rem; }
.case-meta dd { font-size: 0.95rem; line-height: 1.5; color: var(--white); }

/* Hero visual */
.case-visual { position: relative; margin-top: clamp(1rem, 3vw, 2rem); }
.case-visual::before { content: ''; position: absolute; inset: 10% 0 0; background: radial-gradient(50% 60% at 50% 100%, var(--case-glow, rgba(0,168,150,0.25)), transparent 70%); z-index: -1; }
.case-browser { width: min(100%, 1120px); margin: 0 auto; border-radius: 16px 16px 0 0; overflow: hidden; background: #1a1a1a; border: 1px solid rgba(255,255,255,0.12); border-bottom: 0; box-shadow: 0 -20px 80px -20px rgba(0,0,0,0.8); }
.case-browser .hv-bar { height: 34px; }
.case-browser img { width: 100%; height: auto; }
.case-phones { display: flex; justify-content: center; align-items: flex-start; gap: clamp(0.75rem, 3vw, 2.5rem); height: clamp(300px, 38vw, 520px); overflow: hidden; padding-top: 3%; }
.case-phone { width: clamp(150px, 24vw, 300px); padding: 8px; border-radius: 38px; background: #121212; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 40px 80px -20px rgba(0,0,0,0.8); }
.case-phone img { border-radius: 30px; width: 100%; height: auto; }
.case-phones .case-phone:nth-child(2) { margin-top: -3%; }
.case-phones .case-phone:nth-child(odd) { margin-top: 4%; }
.case-hero--phones { padding-bottom: 0; }

/* STATS */
.case-stats { background: var(--ink); padding: clamp(3rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--line-dark); position: relative; z-index: 1; }
.case-stats dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; }
.case-stats div { display: flex; flex-direction: column; }
.case-stats dd { order: 1; font-family: var(--font-display); font-size: clamp(2.25rem, 4.5vw, 3.75rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.case-stats dt { order: 2; margin-top: 0.6rem; font-size: 0.875rem; line-height: 1.45; color: var(--on-dark-3); max-width: 24ch; }

/* STORY BLOCKS */
.case-block { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(2rem, 6vw, 6rem); padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 1px solid var(--line-paper); }
.section--dark .case-block { border-color: var(--line-dark); }
.case-block:first-child { border-top: 0; padding-top: 0; }
.case-block-head { position: sticky; top: 100px; align-self: start; }
.case-block-head .section-index { display: block; margin-bottom: 0.9rem; }
.case-block-head h2 { font-family: var(--font-display); font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 800; line-height: 1; letter-spacing: -0.035em; text-transform: lowercase; }
.case-prose p { font-size: clamp(1.05rem, 1.35vw, 1.2rem); line-height: 1.7; color: var(--muted); max-width: 60ch; }
.case-prose p + p { margin-top: 1.1rem; }
.case-prose strong { color: var(--ink); font-weight: 600; }
.section--dark .case-prose p { color: var(--on-dark-2); }
.section--dark .case-prose strong { color: var(--white); }

.case-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.case-cols h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 1rem; }
.case-list { list-style: none; border-top: 1px solid var(--line-paper); }
.case-list li { padding: 0.85rem 0; border-bottom: 1px solid var(--line-paper); font-size: 0.975rem; line-height: 1.55; color: var(--muted); }
.case-list li strong { color: var(--ink); font-weight: 600; }

.case-notes { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; }
.case-notes li { padding-top: 1.25rem; border-top: 1px solid var(--line-dark); }
.case-notes h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; margin-bottom: 0.6rem; }
.case-notes p { font-size: 0.975rem; line-height: 1.65; color: var(--on-dark-2); }
.case-stack { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.5rem; }
.case-stack li { font-size: 0.85rem; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.16); color: var(--on-dark-2); }

/* GALLERY */
.case-gallery { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.25rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.case-shot { margin: 0; grid-column: span 12; }
.case-shot--half { grid-column: span 6; }
.case-shot--third { grid-column: span 4; }
.case-shot-frame { border-radius: 18px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--line-paper); }
.case-shot-frame img { width: 100%; height: auto; }
.case-shot--phone .case-shot-frame { background: var(--ink); padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 3rem) 0; display: flex; justify-content: center; }
.case-shot--phone .case-shot-frame img { width: min(100%, 300px); border-radius: 26px 26px 0 0; }
.case-shot--wide .case-shot-frame { background: var(--ink); padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 4vw, 3rem) 0; }
.case-shot--wide .case-shot-frame img { border-radius: 12px 12px 0 0; }
.case-shot figcaption { font-size: 0.875rem; color: var(--muted); line-height: 1.5; margin-top: 0.85rem; max-width: 60ch; }

/* NEXT + CTA */
.case-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; padding: clamp(2.5rem, 5vw, 3.5rem) 0; border-top: 1px solid var(--line-paper); border-bottom: 1px solid var(--line-paper); margin-bottom: clamp(3rem, 6vw, 5rem); position: relative; }
.case-next p { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.75rem; }
.case-next a.case-next-link { font-family: var(--font-display); font-size: clamp(2.4rem, 7vw, 6rem); font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; text-transform: lowercase; color: var(--ink); transition: color 0.3s ease; }
.case-next a.case-next-link::after { content: ''; position: absolute; inset: 0; }
.case-next:hover a.case-next-link { color: var(--magenta); }
.case-next .service-arrow { width: 72px; height: 72px; }
.case-next:hover .service-arrow { background: var(--ink); border-color: var(--ink); color: var(--white); transform: rotate(-45deg); }
.case-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; }
.case-cta h2 { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 4.25rem); font-weight: 800; letter-spacing: -0.04em; line-height: 0.95; text-transform: lowercase; max-width: 16ch; }
.case-cta p { margin-top: 1rem; font-size: 1.05rem; color: var(--muted); max-width: 44ch; }

@media (max-width: 960px) {
    .case-top { grid-template-columns: 1fr; }
    .case-meta, .case-stats dl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.75rem; }
    .case-block { grid-template-columns: 1fr; }
    .case-block-head { position: static; }
    .case-cta { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
    .case-cols, .case-notes { grid-template-columns: 1fr; }
    .case-shot--half, .case-shot--third { grid-column: span 12; }
    .case-phones .case-phone:nth-child(3) { display: none; }
    .case-phone { width: 44%; }
    .case-next .service-arrow { display: none; }
}

/* Tall captures are shown top-cropped so the gallery keeps its rhythm */
.case-shot--phone .case-shot-frame { height: clamp(380px, 38vw, 540px); align-items: flex-start; }
.case-shot--tablet .case-shot-frame { background: var(--ink); padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1.25rem, 4vw, 3rem) 0; height: clamp(420px, 48vw, 680px); display: flex; justify-content: center; align-items: flex-start; }
.case-shot--tablet .case-shot-frame img { width: min(100%, 620px); border-radius: 18px 18px 0 0; }