/* Dead Letter — Case Files (matches main site design system) */
:root {
  --ink: #101010; --ink-soft: #1c1b19; --paper: #f2ecdf; --paper-dim: #e7e0cf;
  --red: #c22f1e; --red-dark: #9e2415; --gold: #a67f2e;
  --line: rgba(16,16,16,.18); --line-light: rgba(242,236,223,.22); --max: 1020px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--paper); color: var(--ink); line-height: 1.6; overflow-x: hidden; }
::selection { background: var(--red); color: var(--paper); }
.grain::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); pointer-events: none; z-index: 1; }
section, footer, header { position: relative; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; position: relative; z-index: 2; }
h1, h2, h3 { font-family: 'Archivo Black', sans-serif; line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; }
.mono { font-family: 'Special Elite', monospace; }
.eyebrow { font-family: 'Special Elite', monospace; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; display: inline-block; }
.eyebrow.red { color: var(--red); }
.rd { color: var(--red); }
.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--red); color: var(--paper); font-family: 'Archivo Black', sans-serif; text-transform: uppercase; letter-spacing: .06em; font-size: 15px; padding: 16px 30px; text-decoration: none; border: 3px solid var(--red); transform: rotate(-1deg); transition: all .15s ease; }
.btn:hover { background: var(--red-dark); border-color: var(--red-dark); transform: rotate(0deg) translateY(-2px); }
.stamp-box { display: inline-block; border: 3px solid var(--red); color: var(--red); padding: 2px 14px; transform: rotate(-3deg); font-family: 'Special Elite', monospace; letter-spacing: .14em; text-transform: uppercase; }

nav.top { position: sticky; top: 0; z-index: 50; background: var(--ink); color: var(--paper); border-bottom: 1px solid var(--line-light); }
.nav-inner { max-width: var(--max); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.wordmark { font-family: 'Archivo Black', sans-serif; text-transform: uppercase; font-size: 18px; color: var(--paper); text-decoration: none; display: flex; align-items: center; gap: 10px; }
.wordmark .mark { width: 32px; height: 32px; border: 2.5px solid var(--red); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--red); font-size: 12px; transform: rotate(-12deg); font-family: 'Special Elite', monospace; }
.nav-links { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.nav-links a { color: var(--paper); text-decoration: none; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.nav-links a:hover { color: var(--red); }
.nav-cta { background: var(--red); padding: 9px 16px !important; font-family: 'Archivo Black', sans-serif; transform: rotate(-1deg); }
.nav-links a.nav-cta:hover { color: var(--paper); background: var(--red-dark); }

.case-head { background: var(--ink); color: var(--paper); padding: 90px 0 70px; }
.case-head .ledger-tag { font-family: 'Special Elite', monospace; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: rgba(242,236,223,.6); display: flex; gap: 12px; margin-bottom: 26px; flex-wrap: wrap; }
.case-head .ledger-tag .sep { color: var(--red); }
.case-head h1 { font-size: clamp(32px, 5.2vw, 58px); max-width: 880px; margin-bottom: 26px; }
.case-head .lede { font-size: 19px; color: rgba(242,236,223,.85); max-width: 700px; }
.case-head .wm { position: absolute; right: -20px; top: 20px; font-family: 'Archivo Black', sans-serif; font-size: 220px; line-height: 1; color: rgba(242,236,223,.05); pointer-events: none; }

.record { background: var(--ink); padding: 0 0 90px; }
.record-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px; }
.hstat { border: 3px solid var(--red); padding: 22px 24px; transform: rotate(-1.5deg); color: var(--paper); }
.hstat:nth-child(2) { transform: rotate(1.2deg); }
.hstat .v { font-family: 'Archivo Black', sans-serif; font-size: 38px; color: var(--red); line-height: 1; }
.hstat .k { font-family: 'Special Elite', monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(242,236,223,.7); margin-top: 8px; }

.autopsy { background: var(--paper); padding: 100px 0; }
.section-head { max-width: 760px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(26px, 3.8vw, 42px); margin-bottom: 14px; }
.section-head p, .bodycopy p { font-size: 17px; color: rgba(16,16,16,.8); margin-bottom: 16px; max-width: 720px; }
.callout { border: 2px solid var(--ink); background: var(--paper-dim); padding: 30px 32px; position: relative; max-width: 780px; box-shadow: 8px 8px 0 var(--ink); }
.callout .stamp { position: absolute; top: -16px; right: 22px; background: var(--paper); }
.callout p { font-size: 16.5px; color: rgba(16,16,16,.85); }

.route-sec { background: var(--paper); padding: 0 0 100px; }
.route-list { position: relative; max-width: 780px; }
.route-list::before { content: ""; position: absolute; left: 27px; top: 10px; bottom: 30px; border-left: 2px dashed var(--line); }
.stop { position: relative; padding: 0 0 40px 92px; }
.stop:last-child { padding-bottom: 0; }
.stop .dot { position: absolute; left: 0; top: -4px; width: 56px; height: 56px; border: 3px solid var(--red); border-radius: 50%; background: var(--paper); display: flex; align-items: center; justify-content: center; font-family: 'Archivo Black', sans-serif; color: var(--red); font-size: 16px; transform: rotate(-8deg); }
.stop .tag { font-family: 'Special Elite', monospace; font-size: 12px; color: var(--red); text-transform: uppercase; letter-spacing: .14em; display: block; margin-bottom: 6px; }
.stop h3 { font-size: 19px; margin-bottom: 8px; }
.stop p { font-size: 15px; color: rgba(16,16,16,.78); max-width: 580px; }

.turn { background: var(--ink); color: var(--paper); padding: 100px 0; }
.turn .section-head h2 { color: var(--paper); }
.turn .section-head p { color: rgba(242,236,223,.75); }
.ba-grid { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 24px; align-items: stretch; }
.ba-card { border: 2px solid rgba(242,236,223,.35); background: var(--ink-soft); }
.ba-card .ba-head { font-family: 'Special Elite', monospace; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; padding: 10px 18px; border-bottom: 1px solid rgba(242,236,223,.25); color: rgba(242,236,223,.65); }
.ba-card.after { border-color: var(--red); }
.ba-card.after .ba-head { background: var(--red); color: var(--paper); border-bottom-color: var(--red); }
.ba-row { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 14px 18px; border-bottom: 1px dashed rgba(242,236,223,.18); }
.ba-row:last-child { border-bottom: none; }
.ba-row .k { font-family: 'Special Elite', monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(242,236,223,.6); }
.ba-row .v { font-family: 'Archivo Black', sans-serif; font-size: 19px; }
.ba-card.after .ba-row .v { color: var(--red); filter: brightness(1.35); }
.ba-arrow { display: flex; align-items: center; justify-content: center; font-family: 'Archivo Black', sans-serif; font-size: 34px; color: var(--red); }

.chart-sec { background: var(--paper); padding: 100px 0; }
.chartbox { border: 2px solid var(--ink); background: var(--paper); padding: 34px; max-width: 780px; box-shadow: 8px 8px 0 var(--ink); position: relative; }
.chartbox .stamp { position: absolute; top: -16px; left: 22px; background: var(--paper); font-size: 12px; }
.chart-title { font-family: 'Special Elite', monospace; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(16,16,16,.6); margin-bottom: 26px; }
.bar-group { margin-bottom: 22px; }
.bar-label { font-family: 'Special Elite', monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(16,16,16,.6); margin-bottom: 6px; display: flex; justify-content: space-between; }
.bar-track { height: 34px; background: var(--paper-dim); border: 1px solid var(--line); position: relative; }
.bar-fill { height: 100%; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; font-family: 'Archivo Black', sans-serif; font-size: 15px; }
.bar-fill.after { background: var(--red); color: var(--paper); }
.bar-fill.before { background: repeating-linear-gradient(45deg, transparent 0 4px, rgba(166,127,46,.85) 4px 7px); border-right: 2px solid var(--gold); color: var(--ink); }
.bar-fill.before span { background: var(--paper); padding: 0 6px; }
.chart-note { margin-top: 14px; font-family: 'Special Elite', monospace; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(16,16,16,.55); }

.final { background: var(--ink); color: var(--paper); padding: 100px 0; text-align: center; }
.final h2 { font-size: clamp(30px, 4.6vw, 52px); margin: 24px 0 18px; }
.final p { font-size: 18px; color: rgba(242,236,223,.85); max-width: 560px; margin: 0 auto 34px; }
.assure { font-family: 'Special Elite', monospace; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; margin-top: 26px; color: rgba(242,236,223,.65); }
.assure .tick { color: var(--red); font-weight: 700; }

footer { background: var(--paper); border-top: 3px solid var(--ink); padding: 34px 0; }
.foot-inner { max-width: var(--max); margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: 'Special Elite', monospace; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(16,16,16,.55); }

/* index list */
.index-list { padding: 90px 0 110px; background: var(--paper); }
.case-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.case-card { background: var(--paper); border: 2px solid var(--ink); padding: 34px 28px 30px; position: relative; box-shadow: 8px 8px 0 var(--ink); display: flex; flex-direction: column; gap: 16px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform .15s ease; }
.case-card:hover { transform: translateY(-4px); }
.case-card .ledger { font-family: 'Special Elite', monospace; font-size: 12px; letter-spacing: .15em; text-transform: uppercase; color: rgba(16,16,16,.55); border-bottom: 1px dashed var(--line); padding-bottom: 12px; padding-right: 70px; position: relative; z-index: 2; }
.case-card .headline2 { font-family: 'Archivo Black', sans-serif; font-size: 20px; line-height: 1.25; text-transform: uppercase; position: relative; z-index: 2; }
.case-card p { font-size: 15px; color: rgba(16,16,16,.78); flex: 1; position: relative; z-index: 2; }
.case-card .wm { position: absolute; right: -14px; bottom: -34px; font-family: 'Archivo Black', sans-serif; font-size: 130px; line-height: 1; color: rgba(16,16,16,.055); pointer-events: none; z-index: 1; }
.case-card .go { font-family: 'Special Elite', monospace; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--red); border-bottom: 2px solid var(--red); align-self: flex-start; padding-bottom: 2px; position: relative; z-index: 2; }

@media (max-width: 860px) {
  .record-grid, .case-grid2 { grid-template-columns: 1fr; }
  .ba-grid { grid-template-columns: 1fr; }
  .ba-arrow { transform: rotate(90deg); padding: 4px 0; }
  .case-head .wm { display: none; }
}

/* ---- dossier header (distinct from homepage hero) ---- */
.dossier { background: var(--paper); padding: 60px 0 70px; border-bottom: 2px solid var(--ink); }
.folder-tab { display: inline-block; background: var(--ink); color: var(--paper); font-family: 'Special Elite', monospace; letter-spacing: .22em; font-size: 13px; padding: 12px 26px 9px; text-transform: uppercase; }
.dossier-box { border: 2px solid var(--ink); background: var(--paper-dim); box-shadow: 12px 12px 0 var(--ink); padding: 44px 42px 36px; position: relative; }
.dossier-box .clip { position: absolute; top: -14px; right: 34px; width: 100px; height: 30px; border: 3px solid var(--red); transform: rotate(4deg); background: var(--paper); font-family: 'Special Elite', monospace; font-size: 10.5px; letter-spacing: .18em; color: var(--red); display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
.d-client { font-family: 'Archivo Black', sans-serif; font-size: clamp(38px, 6vw, 68px); line-height: 1; text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 14px; }
.d-result { font-family: 'Special Elite', monospace; font-size: 19px; letter-spacing: .04em; color: var(--red); text-transform: uppercase; margin-bottom: 22px; }
.d-lede { font-size: 17.5px; color: rgba(16,16,16,.82); max-width: 720px; }
.d-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; border-top: 1px dashed var(--line); margin-top: 30px; padding-top: 22px; }
.d-meta .k { font-family: 'Special Elite', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(16,16,16,.55); margin-bottom: 4px; }
.d-meta .v { font-family: 'Archivo Black', sans-serif; font-size: 16px; text-transform: uppercase; }

/* ---- goals ---- */
.goals { background: var(--paper); padding: 0 0 100px; }
.goals-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--ink); border: 2px solid var(--ink); }
.goal { background: var(--paper); padding: 30px 26px; }
.goal .gtag { font-family: 'Special Elite', monospace; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--red); display: block; margin-bottom: 10px; }
.goal h3 { font-size: 17px; margin-bottom: 8px; }
.goal p { font-size: 14.5px; color: rgba(16,16,16,.75); }

/* ---- examples strip ---- */
.examples { background: var(--ink); color: var(--paper); padding: 90px 0; }
.examples .section-head h2 { color: var(--paper); }
.examples .section-head p { color: rgba(242,236,223,.7); }
.ex-scroll { display: flex; gap: 26px; overflow-x: auto; padding: 12px 4px 24px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.ex-scroll::-webkit-scrollbar { display: none; }
.ex-card { flex: 0 0 250px; height: 410px; background: var(--paper); border: 2px solid var(--ink-soft); box-shadow: 0 10px 26px rgba(0,0,0,.45); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; overscroll-behavior: contain; }
.ex-card::-webkit-scrollbar { display: none; }
.ex-card:nth-child(odd) { transform: rotate(-1.2deg); }
.ex-card:nth-child(even) { transform: rotate(1.2deg); }
.ex-card img { width: 100%; height: auto; display: block; }
.ex-ph { flex: 0 0 250px; height: 410px; border: 2px dashed rgba(242,236,223,.35); color: rgba(242,236,223,.55); display: flex; align-items: center; justify-content: center; text-align: center; font-family: 'Special Elite', monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 24px; }
.ex-ph:nth-child(odd) { transform: rotate(-1.2deg); }
.ex-ph:nth-child(even) { transform: rotate(1.2deg); }

/* ---- review ---- */
.review-sec { background: var(--paper); padding: 100px 0; }
.review-big { border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--ink); padding: 40px 42px; max-width: 840px; background: var(--paper-dim); position: relative; }
.review-big .stamp { position: absolute; top: -16px; left: 26px; background: var(--paper); font-size: 12px; }
.review-big .q { font-size: 16.5px; color: rgba(16,16,16,.85); margin-bottom: 24px; }
.review-big .q p { margin-bottom: 14px; }
.rev-who { display: flex; gap: 16px; align-items: center; border-top: 1px dashed var(--line); padding-top: 20px; }
.rev-who .headshot { width: 54px; height: 54px; border-radius: 50%; border: 2px solid var(--red); display: flex; align-items: center; justify-content: center; font-family: 'Archivo Black', sans-serif; font-size: 15px; color: var(--red); transform: rotate(-6deg); flex-shrink: 0; }
.rev-who .name { font-weight: 700; font-size: 15px; text-transform: uppercase; letter-spacing: .05em; }
.rev-who .role { font-size: 13.5px; color: rgba(16,16,16,.6); }
.rev-who .verify { margin-left: auto; font-family: 'Special Elite', monospace; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--red); text-decoration: none; border-bottom: 1px solid rgba(194,47,30,.5); padding-bottom: 2px; white-space: nowrap; }
.review-ph { border: 2px dashed var(--line); padding: 46px 40px; max-width: 840px; text-align: center; font-family: 'Special Elite', monospace; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(16,16,16,.5); }

/* ---- placeholder before-bar ---- */
.bar-fill.ph { background: transparent; border: 2px dashed rgba(16,16,16,.35); color: rgba(16,16,16,.6); }

@media (max-width: 860px) {
  .d-meta, .goals-grid { grid-template-columns: 1fr 1fr; }
  .rev-who { flex-wrap: wrap; }
}

.rev-who .headshot img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

/* ---- intake memo ---- */
.memo { border: 2px solid var(--ink); background: var(--paper-dim); background-image: repeating-linear-gradient(transparent 0 30px, rgba(16,16,16,.055) 30px 31px); box-shadow: 10px 10px 0 var(--ink); padding: 42px 42px 28px; position: relative; max-width: 860px; transform: rotate(-0.4deg); }
.memo .memo-tab { position: absolute; top: -16px; left: 26px; background: var(--paper); font-size: 12px; }
.memo p { font-size: 17px; line-height: 1.85; color: rgba(16,16,16,.85); }
.memo p::first-letter { font-family: 'Archivo Black', sans-serif; font-size: 46px; color: var(--red); float: left; line-height: .85; padding-right: 10px; padding-top: 4px; }
.memo-sig { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); font-family: 'Special Elite', monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(16,16,16,.55); text-align: right; }

/* ---- goal ticket upgrades ---- */
.goal { position: relative; padding: 30px 26px 26px; }
.goal .gnum { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; background: var(--red); color: var(--paper); font-family: 'Archivo Black', sans-serif; font-size: 15px; display: flex; align-items: center; justify-content: center; transform: rotate(6deg); }
.goal .gnum::before { content: ""; position: absolute; inset: 3px; border: 1.5px dashed rgba(242,236,223,.7); }
.goal .gicon { width: 26px; height: 26px; color: var(--red); margin-bottom: 12px; }
.goal .gicon svg { width: 100%; height: 100%; }

/* ---- louder card CTA ---- */
.case-card .go { display: inline-block; background: var(--red); color: var(--paper); border-bottom: none; font-family: 'Archivo Black', sans-serif; font-size: 13px; letter-spacing: .06em; padding: 12px 20px; transform: rotate(-1deg); align-self: flex-start; }
.case-card:hover .go { background: var(--red-dark); }