/* Brain Spanking Media, case study pages. Loaded after site.css. */
body.case{background:#050506}
.aura{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(80% 60% at 50% 0%,#0c0b10,#050506 70%)}
.aura i{position:absolute;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);opacity:.22;mix-blend-mode:screen;animation:drift 38s ease-in-out infinite alternate}
.aura i:nth-child(1){left:-15vmax;top:-20vmax;background:var(--c1,#12E0B0)}
.aura i:nth-child(2){right:-20vmax;top:10vh;background:var(--c2,#FF2ECC);animation-duration:46s;animation-delay:-12s}
.aura i:nth-child(3){left:20vw;bottom:-35vmax;background:var(--c3,#FF3600);animation-duration:52s;animation-delay:-24s;opacity:.14}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(8vw,6vh) scale(1.15)}100%{transform:translate(-6vw,10vh) scale(.95)}}
@media (prefers-reduced-motion:reduce){.aura i{animation:none}}
body.case main,body.case .ftr{position:relative;z-index:1}

/* hero */
.c-hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:8rem var(--gut) 3.4rem;position:relative}
.c-hero .eyebrow{margin-bottom:1.4rem}
.c-hero h1{font-family:var(--serif);font-size:clamp(3.4rem,11vw,11rem);line-height:.88;letter-spacing:-.04em}
.c-hero h1 em{font-style:italic;color:var(--bone-2)}
.c-hero .lede{font-family:var(--serif);font-size:clamp(1.4rem,2.6vw,2.3rem);line-height:1.2;max-width:28ch;margin-top:1.6rem;color:var(--bone-2)}
.c-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:3rem;border-top:1px solid var(--line-2)}
.c-meta div{padding:1.1rem 1rem 0 0}
.c-meta small{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mute);margin-bottom:.5em}
.c-meta span{font-size:.95rem;color:var(--bone)}
.c-back{position:absolute;top:6.2rem;left:var(--gut);font-family:var(--mono);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.c-back:hover{color:#fff}
.hl-word{display:inline-block;overflow:hidden;vertical-align:bottom}
.hl-word i{display:inline-block;font-style:inherit;transform:translateY(105%);animation:rise 1.3s var(--ease) forwards;animation-delay:calc(.35s + var(--i)*.08s)}
@keyframes rise{to{transform:none}}
@media (prefers-reduced-motion:reduce){.hl-word i{transform:none;animation:none}}

/* cover */
.c-cover{position:relative;height:88vh;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.c-cover img.full{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;object-position:top center;will-change:transform}
.c-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,6,.2),transparent 30%,transparent 70%,rgba(5,5,6,.9));pointer-events:none}
.wall{position:absolute;inset:-10% -5%;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;transform:rotate(-7deg)}
.wall .col{display:flex;flex-direction:column;gap:12px;animation:colup 60s linear infinite}
.wall .col:nth-child(even){animation-name:coldown;animation-duration:70s}
.wall img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:6px;box-shadow:0 20px 40px -12px #000}
@keyframes colup{to{transform:translateY(-50%)}}
@keyframes coldown{from{transform:translateY(-50%)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.wall .col{animation:none}}

/* stat band */
.c-stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);background:rgba(8,8,11,.6);backdrop-filter:blur(6px)}
.c-stats div{padding:2.2rem var(--gut) 2rem;border-left:1px solid var(--line)}
.c-stats div:first-child{border-left:0}
.c-stats b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5vw,4.6rem);letter-spacing:-.03em;line-height:1;background:linear-gradient(180deg,#fff 25%,#8f8f9c);-webkit-background-clip:text;background-clip:text;color:transparent}
.c-stats span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);margin-top:.8em}

/* chapters */
.ch{padding:clamp(5rem,12vh,9rem) 0;position:relative}
.ch-grid{display:grid;grid-template-columns:.8fr 1.4fr;gap:clamp(2rem,6vw,6rem);align-items:start}
.ch-num{position:sticky;top:7rem}
.ch-num .n{font-family:var(--serif);font-size:clamp(5rem,12vw,10rem);line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.18)}
.ch-num .eyebrow{margin-top:1rem}
.ch h2{font-family:var(--serif);font-size:clamp(2.2rem,4.6vw,4.2rem);letter-spacing:-.025em;line-height:1;margin-bottom:1.6rem}
.ch h2 em{font-style:italic;color:var(--bone-2)}
.ch p{color:var(--bone-2);font-size:clamp(1rem,1.2vw,1.12rem);max-width:60ch}
.ch p+p{margin-top:1.1rem}
.ch p b{color:#fff;font-weight:500}
.pull{font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,3rem);line-height:1.15;letter-spacing:-.015em;color:#fff;margin:3rem 0 0;padding-left:1.4rem;border-left:2px solid var(--bolt);max-width:26ch}

/* title study */
.titles{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.4rem}
.tcard{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:rgba(255,255,255,.02);transition:transform .7s var(--ease),border-color .4s}
.tcard:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.25)}
.tcard img{width:100%;aspect-ratio:16/9;object-fit:cover}
.tcard div{padding:1rem}
.tcard b{display:block;font-family:var(--serif);font-weight:400;font-size:1.15rem;line-height:1.2;color:#fff}
.tcard span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bolt);margin-top:.6rem}

/* TV meter */
.meter{margin-top:2.4rem;display:grid;gap:1.2rem}
.meter .row{display:grid;grid-template-columns:9rem 1fr 4rem;gap:1rem;align-items:center}
.meter small{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.meter .bar{height:10px;border-radius:10px;background:rgba(255,255,255,.06);overflow:hidden}
.meter .bar i{display:block;height:100%;width:0;border-radius:10px;background:linear-gradient(90deg,#12E0B0,#FF2ECC,#FF3600);transition:width 2s var(--ease)}
.meter.in .bar i{width:var(--w)}
.meter b{font-family:var(--serif);font-weight:400;font-size:1.6rem;text-align:right}

/* breakouts list */
.breaks{list-style:none;margin:2.4rem 0 0;padding:0;border-top:1px solid var(--line-2)}
.breaks li{display:grid;grid-template-columns:3rem 7rem 1fr auto;gap:1.2rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line);transition:padding .5s var(--ease),background .4s}
.breaks li:hover{padding-left:.6rem;background:rgba(255,255,255,.02)}
.breaks .i{font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--mute)}
.breaks img{width:7rem;aspect-ratio:16/9;object-fit:cover;border-radius:4px}
.breaks b{font-family:var(--serif);font-weight:400;font-size:clamp(1.05rem,1.6vw,1.4rem);color:#fff;line-height:1.2}
.breaks em{font-style:normal;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--bolt)}
.breaks button{all:unset;cursor:pointer;display:contents}

/* stacked gallery */
.stack{position:relative;margin-top:2.6rem}
.sframe{position:sticky;top:12vh;margin-bottom:6vh;border-radius:12px;overflow:hidden;border:1px solid var(--line-2);background:#000;box-shadow:0 40px 100px -30px #000;transform-origin:center top;will-change:transform}
.sframe img{width:100%;display:block}
.sframe figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(1rem,2.4vw,1.8rem);background:linear-gradient(0deg,rgba(5,5,6,.95),rgba(5,5,6,.6) 60%,transparent);display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}
.sframe figcaption b{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,3vw,2.6rem);color:#fff;letter-spacing:-.02em;line-height:1}
.sframe figcaption span{display:block;color:var(--bone-2);font-size:.95rem;max-width:52ch;margin-top:.5rem}
.sframe figcaption small{font-family:var(--mono);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.sframe .chrome{display:flex;gap:6px;align-items:center;padding:.6rem .9rem;background:#111116;border-bottom:1px solid var(--line)}
.sframe .chrome i{width:9px;height:9px;border-radius:50%;background:#2a2a32}
.sframe .chrome span{margin-left:.8rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--mute)}

/* spec grid */
.specs{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:2.4rem}
.specs div{background:rgba(6,6,8,.92);padding:1.4rem 1.4rem 1.5rem}
.specs small{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.24em;text-transform:uppercase;color:var(--c1,#12E0B0);margin-bottom:.6rem}
.specs p{font-size:.95rem!important}

/* quotes */
.cq{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2.4rem}
.cq figure{margin:0;border:1px solid var(--line);border-radius:8px;padding:1.4rem;background:rgba(255,255,255,.025)}
.cq blockquote{margin:0;font-family:var(--serif);font-size:1.2rem;line-height:1.3;color:#fff}
.cq blockquote::before{content:'\201C';color:var(--bolt)}
.cq figcaption{margin-top:1rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--mute)}

/* chart reuse */
.case .chart{margin-top:2.4rem}

/* next case */
.next{display:block;position:relative;min-height:70vh;overflow:hidden;border-top:1px solid var(--line)}
.next .bg{position:absolute;inset:0;background-size:cover;background-position:center top;filter:brightness(.35) saturate(.9);transform:scale(1.08);transition:transform 1.8s var(--ease),filter 1s}
.next:hover .bg{transform:scale(1.02);filter:brightness(.5) saturate(1.05)}
.next .in{position:relative;z-index:1;min-height:70vh;display:flex;flex-direction:column;justify-content:center;padding:6rem var(--gut)}
.next small{font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--bone-2)}
.next h2{font-family:var(--serif);font-size:clamp(3rem,10vw,9rem);letter-spacing:-.04em;line-height:.9;margin-top:1rem;transition:transform 1s var(--ease)}
.next:hover h2{transform:translateX(1.2rem)}
.next .go{margin-top:1.6rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.26em;text-transform:uppercase}

/* CTA */
.c-cta{padding:clamp(5rem,14vh,9rem) var(--gut);text-align:center}
.c-cta h2{font-family:var(--serif);font-size:clamp(2.4rem,6vw,5.4rem);letter-spacing:-.025em;line-height:1;max-width:18ch;margin:0 auto}
.c-cta h2 em{font-style:italic;color:var(--bone-2)}
.c-cta .ctas{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap;margin-top:2rem}

@media (max-width:900px){
  .ch-grid{grid-template-columns:1fr}
  .ch-num{position:relative;top:0}
  .titles,.cq{grid-template-columns:1fr}
  .c-meta,.c-stats{grid-template-columns:1fr 1fr}
  .c-stats div:nth-child(3){border-left:0}
  .specs{grid-template-columns:1fr}
  .breaks li{grid-template-columns:2rem 5rem 1fr;}
  .breaks em{grid-column:3}
  .breaks img{width:5rem}
  .meter .row{grid-template-columns:6rem 1fr 3.4rem}
  .wall{grid-template-columns:repeat(3,1fr)}
  .sframe figcaption{flex-direction:column;align-items:flex-start}
}
.stack{max-width:1080px;margin-left:auto;margin-right:auto}

/* contact page */
.contact-hero{min-height:62svh}
.contact-body{padding-bottom:clamp(4rem,10vh,7rem)}
.contact-grid{display:grid;grid-template-columns:1.5fr .9fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.contact-side{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden;position:sticky;top:6rem}
.cs-block{background:rgba(6,6,8,.9);padding:1.1rem 1.2rem}
.cs-block small{display:block;font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute);line-height:1.6}
.cs-block b{display:block;font-family:var(--serif);font-weight:400;font-size:1.3rem;color:#fff;margin:.25rem 0 .1rem}
.cs-block a{font-family:var(--mono);font-size:.72rem;color:var(--bolt);word-break:break-all}
.cs-block a:hover{color:#fff}
.cs-note{background:rgba(6,6,8,.9);padding:1.1rem 1.2rem;color:var(--mute);font-size:.85rem}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}.contact-side{position:relative;top:0}}