/* ================================================================
   Tuesdays — CASE STUDY (detail) page styles
   Shared tokens/nav/footer/buttons/close-banner live in shared.css.
   Related-case-studies row reuses .cs-card from case-studies.css —
   that file must be linked alongside this one.
   ================================================================ */

/* ---------- HERO ---------- */
.csd-hero{position:relative;overflow:hidden;background:var(--paper-2)}
.csd-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.csd-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,24,29,.12) 0%,rgba(22,24,29,.5) 55%,rgba(22,24,29,.88) 100%)}
.csd-hero-in{position:relative;z-index:1;padding-top:clamp(150px,18vw,200px);padding-bottom:clamp(48px,6vw,72px);color:#fff}
.csd-crumb{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:20px}
.csd-crumb a{color:rgba(255,255,255,.75);text-decoration:none}
.csd-crumb a:hover{color:#fff}
.csd-hero-in h1{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.2vw,3.4rem);line-height:1.08;letter-spacing:-.02em;max-width:18ch}
.csd-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:rgba(255,255,255,.8)}
.csd-meta span b{color:#fff;font-weight:500}

/* ---------- BACK LINK / ACTIONS ROW (appears at top, and again at end) ---------- */
.csd-actions{padding-top:36px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.csd-actions .arrowlink{font-size:.95rem}
.csd-download{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:11px 20px;border-radius:100px;border:1px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;transition:background .3s var(--ease),border-color .3s var(--ease)}
.csd-download svg{width:14px;height:14px;stroke:#fff;stroke-width:1.6;fill:none}
.csd-download:hover{background:var(--accent);border-color:var(--accent)}
.csd-actions-end{padding-top:36px;padding-bottom:clamp(40px,5vw,64px)}

/* ---------- INTRO / NARRATIVE BLOCKS ---------- */
.csd-lede{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.2vw,1.6rem);line-height:1.55;max-width:58ch;color:var(--ink);padding-left:24px;border-left:2px solid var(--accent)}

.csd-section{padding-top:clamp(48px,6vw,72px)}
.csd-section h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.015em;max-width:22ch}
.csd-section > p{margin-top:16px;max-width:62ch;color:var(--ink-soft);font-size:1.04rem;line-height:1.65}

/* alternating narrative block, same idea as Mediapods' pillar-top */
.csd-block{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-top:36px}
.csd-block.is-reverse .csd-block-img{order:2}
.csd-block-img{aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--paper-2)}
.csd-block-img img{width:100%;height:100%;object-fit:cover}
.csd-block-copy h3{font-family:var(--serif);font-weight:500;font-size:1.3rem}
.csd-block-copy p{margin-top:10px;color:var(--ink-soft);font-size:1rem;line-height:1.6}
@media(max-width:760px){.csd-block{grid-template-columns:1fr}.csd-block.is-reverse .csd-block-img{order:0}}

/* ---------- BRAND / STAT BLOCK (repeatable — 1 per sub-brand or client) ---------- */
.csd-brand{border-radius:24px;padding:clamp(28px,4vw,44px);margin-top:32px}
.csd-brand[data-tone="a"]{background:var(--cs-tone-a-tint)}
.csd-brand[data-tone="b"]{background:var(--cs-tone-b-tint)}
.csd-brand[data-tone="c"]{background:var(--cs-tone-c-tint)}
.csd-brand[data-tone="d"]{background:var(--cs-tone-d-tint)}
.csd-brand-head{display:flex;align-items:center;gap:16px;margin-bottom:28px}
.csd-brand-head img{height:32px;width:auto}
.csd-brand-head span{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}

.csd-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.csd-stat .v{font-family:var(--serif);font-weight:500;font-size:clamp(1.8rem,3.4vw,2.6rem);letter-spacing:-.02em;color:var(--ink)}
.csd-stat .l{margin-top:8px;font-size:.9rem;color:var(--ink-soft);line-height:1.4}
@media(max-width:680px){.csd-stats{grid-template-columns:1fr 1fr;gap:24px}}

.csd-moments{margin-top:28px;display:flex;flex-direction:column;gap:14px}
.csd-moment{display:flex;gap:14px;align-items:baseline;padding:14px 0;border-top:1px solid rgba(22,24,29,.1)}
.csd-moment .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto;margin-top:8px}
.csd-moment b{font-weight:600}
.csd-moment .stat{color:var(--accent);font-weight:600}

/* ---------- WHAT ACTUALLY WORKED — ordered but not numbered ---------- */
.csd-worked{margin-top:32px;display:flex;flex-direction:column}
.csd-worked-item{position:relative;padding:22px 0 22px 30px;border-left:2px solid var(--line)}
.csd-worked-item::before{content:'';position:absolute;left:-6px;top:26px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.csd-worked-item p{font-size:1.05rem;line-height:1.55;max-width:56ch}
.csd-worked-item:last-child{border-left-color:transparent}

/* ---------- WHO IT'S FOR ---------- */
.csd-audience{margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.csd-audience-item{display:flex;gap:16px;align-items:flex-start;padding:20px;border:1px solid var(--line);border-radius:16px}
.csd-audience-item .glyph{width:38px;height:38px;border-radius:50%;background:var(--accent-tint);flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.csd-audience-item .glyph svg{width:17px;height:17px;stroke:var(--accent);stroke-width:1.8;fill:none}
.csd-audience-item p{font-size:.98rem;line-height:1.45;color:var(--ink)}
@media(max-width:680px){.csd-audience{grid-template-columns:1fr}}

/* ---------- TESTIMONIALS ---------- */
.csd-quotes{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.csd-quotes.is-single{grid-template-columns:1fr;max-width:620px}
.csd-quote{background:var(--paper-2);border-radius:18px;padding:26px 24px;position:relative}
.csd-quote p{font-family:var(--serif);font-style:italic;font-size:1.08rem;line-height:1.5;color:var(--ink)}
.csd-quote cite{display:block;margin-top:14px;font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-faint)}
@media(max-width:860px){.csd-quotes{grid-template-columns:1fr}}

/* ---------- CLOSE / CTA — pastel, page-scoped (client dislikes the
   shared dark .close treatment; same approach as Mediapods' .mp-cta
   and Fluid Approach's .fluid-close) ---------- */
.csd-close{background:var(--cta-purple,#E9DCF1);color:var(--cta-ink,#3A2A4A);padding:clamp(48px,6vw,72px) 0}
.csd-close-inner{max-width:70%}
.csd-close-inner h2{font-family:var(--serif);font-weight:500;font-style:italic;font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.08;letter-spacing:-.02em;margin-top:18px}
.csd-close-inner p{margin-top:22px;font-size:1.06rem;line-height:1.6;opacity:.85}
.csd-close-inner .cta-row{margin-top:34px}
@media(max-width:760px){.csd-close-inner{max-width:100%}}

/* ---------- RELATED CASE STUDIES ---------- */
.csd-related{padding-top:clamp(60px,8vw,100px);padding-bottom:clamp(60px,8vw,100px)}
.csd-related-head{margin-bottom:36px}
.csd-related-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.015em}
.csd-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:960px){.csd-related-grid{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.csd-related-grid{grid-template-columns:1fr}}