.detail-page { background: #e9e7e4; }
.detail-page .site-header { background: rgba(8,6,4,.9); backdrop-filter: blur(12px); position: absolute; }
.detail-main { min-height: 100vh; }
.detail-hero { min-height: 560px; padding: 150px clamp(24px, 8vw, 140px) 90px; position: relative; display: flex; align-items: flex-end; overflow: hidden; color: #fff; background: #0c0907; }
.detail-hero:before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,5,3,.97) 0%, rgba(8,5,3,.76) 45%, rgba(8,5,3,.22) 100%), url("assets/sonic-coldbrew-hero.png") center/cover; }
.detail-hero:after { content: ""; position: absolute; width: 540px; height: 540px; right: -130px; bottom: -300px; border: 1px solid rgba(201,120,59,.22); border-radius: 50%; box-shadow: 0 0 0 90px rgba(201,120,59,.035), 0 0 0 180px rgba(201,120,59,.025); }
.detail-hero-content { position: relative; z-index: 1; width: 100%; max-width: 1050px; }
.detail-back { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 46px; color: rgba(255,255,255,.62); font-size: 12px; letter-spacing: .06em; }
.detail-back span { color: var(--orange); font-size: 18px; }
.detail-eyebrow { margin: 0 0 16px; color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.detail-hero h1 { margin: 0 0 22px; font-size: clamp(52px, 7vw, 104px); line-height: 1; letter-spacing: -.065em; font-weight: 600; }
.detail-hero h1 em { font-size: .58em; }
.detail-lead { margin: 0; max-width: 590px; color: rgba(255,255,255,.62); font-size: 16px; line-height: 1.85; }
.detail-scroll { position: absolute; z-index: 2; right: clamp(24px, 7vw, 112px); bottom: 72px; color: rgba(255,255,255,.58); font-size: 9px; letter-spacing: .2em; writing-mode: vertical-rl; }
.detail-scroll:after { content: ""; display: inline-block; width: 1px; height: 55px; margin-top: 14px; background: linear-gradient(var(--orange), transparent); }
.detail-content { padding: 96px 24px 120px; }
.detail-intro { max-width: 860px; margin: 0 auto 42px; display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.detail-intro p { margin: 0; color: var(--muted); font-size: 11px; letter-spacing: .16em; }
.detail-intro span { color: var(--muted); font-size: 12px; }
.detail-sheet { width: min(100%, 900px); margin: 0 auto; background: #fff; box-shadow: 0 25px 80px rgba(33,22,14,.12); overflow: hidden; }
.detail-sheet img { width: 100%; height: auto; margin: 0; }
.detail-cta { padding: 110px 24px; background: var(--brown); color: #fff; text-align: center; }
.detail-cta p { margin: 0 0 18px; color: var(--orange); font-size: 10px; letter-spacing: .2em; font-weight: 700; }
.detail-cta h2 { margin: 0 0 38px; font-size: clamp(35px, 5vw, 62px); letter-spacing: -.05em; }
.detail-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.detail-actions .button.secondary { border: 1px solid rgba(255,255,255,.3); color: #fff; }
.detail-page footer { min-height: 210px; }

@media (max-width: 640px) {
  .detail-hero { min-height: 530px; padding: 130px 24px 72px; }
  .detail-back { margin-bottom: 38px; }
  .detail-hero h1 { font-size: 49px; }
  .detail-lead { font-size: 14px; }
  .detail-scroll { display: none; }
  .detail-content { padding: 60px 0 78px; }
  .detail-intro { margin: 0 24px 28px; align-items: flex-start; flex-direction: column; gap: 8px; }
  .detail-sheet { box-shadow: none; }
  .detail-cta { padding: 80px 24px; }
  .detail-actions { flex-direction: column; align-items: stretch; }
  .detail-actions .button { width: 100%; }
}