/* CASE_STUDYX reference reconstruction. All copy stays in HTML; video behavior stays external in js/showcase-reference.js. */
body.case-reference-page { background: #fff; margin: 0; overflow-x: hidden; }
body.case-reference-page main { background: #000; margin: 0; min-height: 100vh; padding: 0; }
body.case-reference-page .left-side, body.case-reference-page .all-cases-link { z-index: 20; }
body.case-reference-page .reference-cases { background: #000; margin: 0; padding: 0; }
body.case-reference-page .reference-panel { background: #050505; height: min(31.25vw, 600px); min-height: 330px; overflow: hidden; position: relative; }
body.case-reference-page .reference-panel-image { height: 100%; overflow: hidden; position: relative; width: 100%; }
body.case-reference-page .reference-panel-image::after { background: linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.78) 25%, rgba(0,0,0,.15) 59%, rgba(0,0,0,.08) 100%); content: ''; inset: 0; pointer-events: none; position: absolute; }
body.case-reference-page .reference-panel-image img { display: block; height: 100%; object-fit: cover; object-position: center; width: 100%; }
body.case-reference-page .reference-copy { color: #fff; left: 5%; position: absolute; top: 14%; width: 43%; z-index: 2; }
body.case-reference-page .reference-kicker {
    color: #fff;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
body.case-reference-page .reference-copy h2 { color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: clamp(27px, 2.45vw, 47px); font-weight: 900; letter-spacing: -.055em; line-height: .86; margin: 0 0 6px; text-transform: uppercase; }
body.case-reference-page .reference-line { color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: clamp(13px, 1.16vw, 22px); font-weight: 700; letter-spacing: -.045em; line-height: .95; margin: 0 0 12px; text-transform: uppercase; }
body.case-reference-page .reference-line strong {
    color: #f3bf38;
    font-weight: 900;
    font-size: 20px;
}
body.case-reference-page .reference-study {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 9px;
    text-transform: uppercase;
}
body.case-reference-page .reference-description {
    color: rgba(255,255,255,.94);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
    margin: 0;
    max-width: 500px;
}
body.case-reference-page .reference-credit { color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: clamp(6px, .37vw, 8px); font-weight: 700; line-height: 1.1; margin: 12px 0 0; }
body.case-reference-page .reference-watch { align-items: center; background: transparent; border: 1px solid rgba(255,255,255,.95); border-radius: 50%; bottom: 10%; color: #fff; cursor: pointer; display: flex; flex-direction: column; height: clamp(46px, 4.4vw, 84px); justify-content: center; padding: 0; position: absolute; right: 5%; width: clamp(46px, 4.4vw, 84px); z-index: 3; }
body.case-reference-page .reference-watch::before { border-bottom: 6px solid transparent; border-left: 9px solid #fff; border-top: 6px solid transparent; content: ''; margin-bottom: 2px; }
body.case-reference-page .reference-watch span { font-family: Arial, Helvetica, sans-serif; font-size: clamp(6px, .42vw, 9px); font-weight: 900; line-height: 1; }
body.case-reference-page .reference-watch b { border-bottom: 1px solid #f3bf38; color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: clamp(7px, .52vw, 11px); font-weight: 900; line-height: 1.05; margin-top: 3px; text-transform: uppercase; }
body.case-reference-page .reference-watch em { color: #fff; font-family: Arial, Helvetica, sans-serif; font-size: clamp(5px, .34vw, 7px); font-style: normal; font-weight: 700; line-height: 1; margin-top: 2px; text-transform: uppercase; }
body.case-reference-page .video-modal { align-items: center; background: rgba(0,0,0,.92); display: none; height: 100vh; inset: 0; justify-content: center; position: fixed; width: 100%; z-index: 100; }
body.case-reference-page .video-modal.is-open { display: flex; }
body.case-reference-page .video-modal-inner { max-width: 1100px; padding: 30px; position: relative; width: 92%; }
body.case-reference-page .video-modal-inner video { display: block; max-height: 80vh; width: 100%; }
body.case-reference-page .video-modal-close { background: transparent; border: 0; color: #fff; cursor: pointer; font-size: 44px; line-height: 1; position: absolute; right: 0; top: -20px; }
@media (max-width: 700px) {
  body.case-reference-page .reference-panel { height: 56vw; min-height: 260px; }
  body.case-reference-page .reference-copy { top: 12%; width: 62%; }
  body.case-reference-page .reference-copy h2 { font-size: clamp(22px, 6vw, 36px); }
  body.case-reference-page .reference-line { font-size: clamp(10px, 2.4vw, 16px); }
  body.case-reference-page .reference-description { font-size: clamp(6px, 1.3vw, 8px); }
}

/* Override the shared theme flex layout: the reference artwork is a full-width vertical composition. */
body.case-reference-page main { display: block; width: 100%; }
body.case-reference-page .reference-cases { display: block; width: 100%; }
body.case-reference-page .reference-panel { width: 100%; }