/* Llamas Custom Guitars case study (llamas.js). Colours from case-studies.css (.tbg_cs_root). */
.tbg_csl {--csl-red: #C90306; --csl-paper: #FAF7F1; --csl-ink: #0E0F0E;}
/* Zero-specificity reset, so each figure's own spacing below still applies */
:where(.tbg_csl) figure {margin: 0;}
/* Desktop: a gutter on the right keeps content clear of the chapter index */
@media (min-width: 992px) {
  .tbg_csl .tbg_cs_wrap {padding-right: calc(var(--m, 1.5rem) + 4.5rem);}
}
.tbg_csl picture, .tbg_csl picture img {display: block;}

/* Shared type */
.tbg_csl_label {margin: 0; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cs-gold-deep);}
.tbg_csl_label span {margin-right: 0.9rem; color: var(--cs-gold);}
.tbg_csl_h2 {margin: 1rem 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2.6rem, 5vw, 5.6rem); line-height: 1.02; letter-spacing: -0.02em;}
.tbg_csl_h2_xl {font-size: clamp(3.2rem, 8vw, 9rem); line-height: 0.96;}
.tbg_csl_body {max-width: 31rem; margin: 1.75rem 0 0; font-family: var(--sans); font-size: clamp(1.08rem, 1.25vw, 1.3rem); line-height: 1.65; color: rgba(23, 59, 50, 0.82);}
.tbg_csl_caption {margin-top: 1rem; font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.06em; color: rgba(23, 59, 50, 0.6);}

/* Chapter index: right edge on desktop, a thin progress line on smaller screens */
.tbg_csl_progress {position: fixed; right: clamp(0.9rem, 1.6vw, 1.75rem); top: 50%; z-index: 3; transform: translateY(-50%); color: #F0EBE1; mix-blend-mode: difference;}
.tbg_csl_progress ol {margin: 0; padding: 0; list-style: none;}
.tbg_csl_progress li + li {margin-top: 0.55rem;}
.tbg_csl_progress a {display: flex; align-items: center; justify-content: flex-end; gap: 0.7rem; color: inherit; text-decoration: none; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase;}
.tbg_csl_progress_n {opacity: 0.45; transition: opacity 0.4s ease;}
.tbg_csl_progress_n::before {content: ""; display: inline-block; width: 0.9rem; height: 1px; margin-right: 0.55rem; vertical-align: middle; background-color: currentColor; transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);}
.tbg_csl_progress a {position: relative;}
/* The name sits outside the link's box, so the index itself is only as wide as its numbers */
.tbg_csl_progress_t {position: absolute; right: calc(100% + 0.7rem); top: 50%; opacity: 0; transform: translate(0.4rem, -50%); transition: opacity 0.4s ease, transform 0.4s ease; white-space: nowrap; pointer-events: none;}
.tbg_csl_progress a.is-active .tbg_csl_progress_n {opacity: 1;}
.tbg_csl_progress a.is-active .tbg_csl_progress_n::before {width: 1.8rem;}
/* Chapter names appear on hover or keyboard focus only, so the index never covers the content */
.tbg_csl_progress a:hover .tbg_csl_progress_t, .tbg_csl_progress a:focus-visible .tbg_csl_progress_t {opacity: 0.85; transform: translate(0, -50%);}
.tbg_csl_bar {display: none; position: fixed; left: 0; top: 0; z-index: 3; width: 100%; height: 2px; pointer-events: none;}
.tbg_csl_bar i {display: block; height: 100%; background-color: var(--cs-gold); transform: scaleX(var(--p, 0)); transform-origin: 0 50%;}
@media (max-width: 991px) {
  .tbg_csl_progress {display: none;}
  .tbg_csl_bar {display: block;}
}

/* ===== 01 Opening: held in place while 02 rises over it ===== */
.tbg_csl_pair {position: relative;}
.tbg_csl_open {position: sticky; top: 0; z-index: 0; display: flex; align-items: flex-end; height: 100svh; min-height: 34rem; overflow: hidden; background-color: var(--csl-ink); color: var(--cs-limestone);}
.tbg_csl_open_media {position: absolute; inset: 0;}
.tbg_csl_open_media picture, .tbg_csl_open_media img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 45%;}
/* Edge shading for legibility only; the instrument itself stays untouched */
.tbg_csl_open_shade {position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(14, 15, 14, 0.45) 0%, rgba(14, 15, 14, 0) 26%, rgba(14, 15, 14, 0) 48%, rgba(14, 15, 14, 0.86) 100%), linear-gradient(90deg, rgba(14, 15, 14, 0.62) 0%, rgba(14, 15, 14, 0) 55%);}
.tbg_csl_open_text {position: relative; z-index: 2; padding-bottom: clamp(5rem, 11vh, 8rem);}
.tbg_csl_eyebrow {margin: 0; font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--cs-gold);}
.tbg_csl_open_title {margin: 1.4rem 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(3rem, 7.6vw, 8.6rem); line-height: 0.98; letter-spacing: -0.03em;}
/* Each title line rises from its own mask; the clip reaches past the line box so accents and descenders show whole */
.tbg_csl_line {display: block; clip-path: inset(-0.24em -0.4em -0.26em -0.4em);}
.tbg_csl_line > span {display: inline-block;}
.tbg_csl_open_copy {max-width: 33rem; margin: 1.8rem 0 0; font-family: var(--sans); font-size: clamp(1.05rem, 1.2vw, 1.25rem); line-height: 1.6; color: rgba(240, 235, 225, 0.84);}
.tbg_csl_scroll {position: absolute; right: var(--m, 1.5rem); bottom: clamp(2rem, 5vh, 3.25rem); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; color: rgba(240, 235, 225, 0.8); text-decoration: none; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;}
.tbg_csl_scroll i {position: relative; width: 1px; height: 3.5rem; overflow: hidden; background-color: rgba(240, 235, 225, 0.25);}
.tbg_csl_scroll i::after {content: ""; position: absolute; left: 0; top: -40%; width: 100%; height: 40%; background-color: var(--cs-gold); animation: tbgCslScroll 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;}
@keyframes tbgCslScroll {0% {top: -40%;} 70%, 100% {top: 100%;}}

/* ===== 02 Founder: limestone curtain over the opening; portrait held while the text passes ===== */
.tbg_csl_founder {position: relative; z-index: 1; padding: clamp(6.5rem, 12vw, 11rem) 0 clamp(6rem, 11vw, 10rem); background-color: var(--cs-limestone); color: var(--cs-forest); box-shadow: 0 -2.5rem 5rem -1.5rem rgba(0, 0, 0, 0.4);}
.tbg_csl_founder_grid {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.5vw, 2.5rem);}
.tbg_csl_founder_media {grid-column: 1 / span 5;}
.tbg_csl_portrait {position: sticky; top: calc(var(--nav-h, 5rem) + 2rem); aspect-ratio: 4 / 5; max-height: calc(100svh - var(--nav-h, 5rem) - 4rem); overflow: hidden; background-color: #1d1d1b;}
.tbg_csl_portrait img {width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%;}
/* A screen of the Llamas website in place of the portrait, shown whole with its caption */
.tbg_csl_portrait.is-screen {aspect-ratio: auto; max-height: none; overflow: visible; background: none;}
.tbg_csl_portrait.is-screen img {display: block; height: auto; aspect-ratio: 4 / 3; background-color: var(--csl-ink);}
.tbg_csl_founder_text {grid-column: 7 / span 5; padding-top: clamp(1rem, 6vh, 4rem); padding-bottom: 10vh;}
.tbg_csl_founder .tbg_csl_body {margin-top: clamp(3rem, 18vh, 10rem);}
.tbg_csl_founder .tbg_csl_h2 + .tbg_csl_body {margin-top: clamp(2.5rem, 8vh, 4.5rem);}
.tbg_csl_body_lead {font-family: var(--serif); font-style: italic; font-size: clamp(1.4rem, 2vw, 2rem); line-height: 1.3; color: var(--cs-forest);}
.tbg_csl_turn {margin: clamp(3rem, 18vh, 10rem) 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 3.2vw, 3.3rem); line-height: 1.08; letter-spacing: -0.015em;}
.tbg_csl_turn::before {content: ""; display: block; width: 3rem; height: 1px; margin-bottom: 1.4rem; background-color: var(--cs-gold);}
@media (max-width: 991px) {
  .tbg_csl_founder_grid {display: block;}
  .tbg_csl_portrait {position: relative; top: auto; max-height: none;}
  .tbg_csl_founder_text {padding: clamp(3rem, 8vw, 4.5rem) 0 0;}
  .tbg_csl_founder .tbg_csl_body, .tbg_csl_founder .tbg_csl_h2 + .tbg_csl_body {margin-top: 1.75rem;}
  .tbg_csl_turn {margin-top: 2.75rem;}
}

/* ===== 03 Identity: emblem, wordmark and instrument assemble on one stage ===== */
.tbg_csl_identity {position: relative; background-color: var(--csl-paper); color: var(--cs-forest);}
.tbg_csl_identity_stage {padding: clamp(6rem, 11vw, 10rem) 0;}
.tbg_csl_identity_grid {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.5vw, 2.5rem); align-items: center;}
.tbg_csl_identity_text {grid-column: 1 / span 4;}
.tbg_csl_brand {grid-column: 5 / span 4; display: flex; flex-direction: column; align-items: center; text-align: center;}
.tbg_csl_emblem {--emblem: url(/assets/tbg/cases/llamas/llamas-emblem-mask.webp); width: min(80%, 20rem); aspect-ratio: 1200 / 775; background-color: var(--csl-red); -webkit-mask: var(--emblem) center / contain no-repeat; mask: var(--emblem) center / contain no-repeat;}
.tbg_csl_wordmark {display: block; width: min(100%, 25rem); height: auto; margin-top: clamp(2rem, 4vw, 3.25rem);}
.tbg_csl_identity_photo {grid-column: 10 / span 3; position: relative; aspect-ratio: 3 / 4; overflow: hidden; background-color: #1d1d1b;}
.tbg_csl_identity_photo picture, .tbg_csl_identity_photo img {width: 100%; height: 100%; object-fit: cover; object-position: 22% 60%;}
/* Desktop with motion: the stage holds while the scroll assembles it (llamas.js adds .is-pinned) */
.tbg_csl_identity.is-pinned {height: 230vh;}
.tbg_csl_identity.is-pinned .tbg_csl_identity_stage {position: sticky; top: 0; height: 100svh; display: flex; align-items: center; padding: var(--nav-h, 5rem) 0 2rem; box-sizing: border-box;}
.tbg_csl_identity.is-pinned .tbg_csl_identity_grid {width: 100%;}
@media (max-width: 991px) {
  .tbg_csl_identity_grid {display: block;}
  .tbg_csl_brand {margin-top: clamp(3.5rem, 10vw, 5rem);}
  .tbg_csl_identity_photo {margin-top: clamp(3.5rem, 10vw, 5rem); aspect-ratio: 4 / 5;}
}

/* ===== 04 Digital experience (ink): the recording grows into the screen, then genuine screens of the site ===== */
.tbg_csl_digital {background-color: var(--csl-ink); color: var(--cs-limestone);}
.tbg_csl_digital .tbg_csl_label {color: var(--cs-gold);}
.tbg_csl_digital .tbg_csl_body {color: rgba(240, 235, 225, 0.8);}
.tbg_csl_digital_head {padding-top: clamp(7rem, 12vw, 11rem);}
.tbg_csl_digital_intro {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.5vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 4.5rem);}
.tbg_csl_digital_intro > :first-child {grid-column: 1 / span 6;}
.tbg_csl_digital_intro > :last-child {grid-column: 8 / span 5;}
.tbg_csl_statement {margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.5rem, 2.4vw, 2.5rem); line-height: 1.22; color: var(--cs-limestone);}
.tbg_csl_digital_intro .tbg_csl_body {margin-top: 0;}
.tbg_csl_meta {margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(185, 164, 126, 0.4); font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cs-gold);}
.tbg_csl_reel {position: relative; margin-top: clamp(4rem, 8vw, 7rem);}
.tbg_csl_reel_stage {display: flex; flex-direction: column; align-items: center; padding: 0 var(--m, 1.5rem);}
.tbg_csl_reel_frame {position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background-color: #000; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);}
.tbg_csl_reel_frame video {display: block; width: 100%; height: 100%; object-fit: cover;}
.tbg_csl_reel_btn {position: absolute; right: 1rem; bottom: 1rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 2.75rem; padding: 0 1.1rem 0 0.9rem; border: 1px solid rgba(240, 235, 225, 0.45); border-radius: 999px; background-color: rgba(14, 15, 14, 0.55); color: var(--cs-limestone); font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0.08em; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color 0.3s ease, color 0.3s ease;}
.tbg_csl_reel_btn:hover, .tbg_csl_reel_btn:focus-visible {background-color: var(--cs-limestone); color: var(--csl-ink);}
/* Pause bars while playing, a play triangle while paused */
.tbg_csl_reel_icon {position: relative; width: 0.7rem; height: 0.8rem;}
.tbg_csl_reel_icon::before, .tbg_csl_reel_icon::after {content: ""; position: absolute; top: 0; width: 0.22rem; height: 100%; background-color: currentColor;}
.tbg_csl_reel_icon::before {left: 0.05rem;}
.tbg_csl_reel_icon::after {right: 0.05rem;}
.tbg_csl_reel_btn.is-paused .tbg_csl_reel_icon::before {left: 0.1rem; width: 0; height: 0; border-style: solid; border-width: 0.4rem 0 0.4rem 0.62rem; border-color: transparent transparent transparent currentColor; background: none;}
.tbg_csl_reel_btn.is-paused .tbg_csl_reel_icon::after {display: none;}
.tbg_csl_reel_cap {display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; width: 100%; margin: 1.25rem 0 0; font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.06em; color: rgba(240, 235, 225, 0.62);}
.tbg_csl_reel_link {color: var(--cs-limestone); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 0.15rem;}
.tbg_csl_reel_link:hover, .tbg_csl_reel_link:focus-visible {color: var(--cs-gold);}
/* Desktop with motion: the stage holds while the frame grows to fill it (llamas.js adds .is-pinned) */
.tbg_csl_reel.is-pinned {height: 190vh; margin-top: clamp(2rem, 4vw, 3rem);}
.tbg_csl_reel.is-pinned .tbg_csl_reel_stage {position: sticky; top: 0; height: 100svh; justify-content: center; padding-top: calc(var(--nav-h, 5rem) * 0.6); box-sizing: border-box;}
.tbg_csl_reel.is-pinned .tbg_csl_reel_frame {width: min(100%, calc((100svh - var(--nav-h, 5rem) - 5rem) * 4 / 3)); will-change: transform;}
.tbg_csl_reel.is-pinned .tbg_csl_reel_cap {width: min(100%, calc((100svh - var(--nav-h, 5rem) - 5rem) * 4 / 3));}
/* Screens: an editorial mosaic, wide and narrow alternating */
.tbg_csl_screens {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.5vw, 2.5rem); row-gap: clamp(3rem, 6vw, 5.5rem); padding-top: clamp(5rem, 9vw, 8rem);}
.tbg_csl_screen:nth-child(1) {grid-column: 1 / span 7;}
.tbg_csl_screen:nth-child(2) {grid-column: 9 / span 4; margin-top: clamp(4rem, 9vw, 9rem);}
.tbg_csl_screen:nth-child(3) {grid-column: 2 / span 5;}
.tbg_csl_screen:nth-child(4) {grid-column: 8 / span 5; margin-top: clamp(3rem, 7vw, 7rem);}
.tbg_csl_screen:nth-child(5) {grid-column: 3 / span 8;}
.tbg_csl_screen_img {aspect-ratio: 4 / 3; overflow: hidden; background-color: #000;}
.tbg_csl_screen_img img {display: block; width: 100%; height: 100%; object-fit: cover;}
.tbg_csl_screen figcaption {margin-top: 1rem; font-family: var(--sans); font-size: 0.9rem; color: rgba(240, 235, 225, 0.78);}
.tbg_csl_screen figcaption span {margin-right: 0.7rem; color: var(--cs-gold); font-variant-numeric: tabular-nums;}
.tbg_csl_credit {margin: 0; padding-top: clamp(4rem, 7vw, 6rem); padding-bottom: clamp(5rem, 9vw, 8rem); max-width: 46rem; font-family: var(--sans); font-size: 0.82rem; line-height: 1.6; color: rgba(240, 235, 225, 0.55);}
@media (max-width: 991px) {
  .tbg_csl_digital_intro {display: block;}
  .tbg_csl_digital_intro > :last-child {margin-top: 1.75rem;}
  .tbg_csl_reel_stage {padding: 0;}
  .tbg_csl_reel_cap {padding: 0 var(--m, 1.5rem);}
  .tbg_csl_screens {display: block;}
  .tbg_csl_screen + .tbg_csl_screen {margin-top: 3rem;}
}

/* ===== 06 The business (paper): a timeline of workstreams beside a held panel ===== */
.tbg_csl_biz {background-color: var(--csl-paper); color: var(--cs-forest);}
.tbg_csl_biz_head {padding-top: clamp(7rem, 12vw, 11rem);}
.tbg_csl_biz_head .tbg_csl_h2 > span {display: block;}
.tbg_csl_biz_intro {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.5vw, 2.5rem); margin-top: clamp(2.5rem, 5vw, 4rem);}
.tbg_csl_biz_intro > :first-child {grid-column: 1 / span 6; margin-top: 0;}
.tbg_csl_biz_intro > :last-child {grid-column: 8 / span 5; margin-top: 0.4rem;}
.tbg_csl_biz_grid {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.5vw, 2.5rem); margin-top: clamp(5rem, 9vw, 8rem);}
/* The held display: a landscape frame that shows each website screen whole (they are 4:3), sized to fit the window,
   with the counter beneath it rather than over the picture */
.tbg_csl_biz_visual {grid-column: 1 / span 6;}
.tbg_csl_biz_panel {position: sticky; top: calc(var(--nav-h, 5rem) + 2rem); width: min(100%, calc((100svh - var(--nav-h, 5rem) - 11rem) * 4 / 3));}
.tbg_csl_biz_frame {position: relative; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--csl-ink); box-shadow: 0 30px 70px -40px rgba(14, 15, 14, 0.6);}
.tbg_csl_biz_slide {position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease;}
.tbg_csl_biz_slide.is-active {opacity: 1;}
.tbg_csl_biz_slide img {display: block; width: 100%; height: 100%; object-fit: cover;}
.tbg_csl_biz_emblem {--emblem: url(/assets/tbg/cases/llamas/llamas-emblem-mask.webp); position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1200 / 775; transform: translate(-50%, -50%); background-color: var(--csl-red); -webkit-mask: var(--emblem) center / contain no-repeat; mask: var(--emblem) center / contain no-repeat;}
.tbg_csl_biz_count {display: flex; align-items: baseline; gap: 0.9rem; margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(185, 164, 126, 0.5);}
.tbg_csl_biz_num {font-family: var(--serif); font-size: clamp(2.8rem, 4.2vw, 4.6rem); line-height: 1; color: var(--cs-forest); font-variant-numeric: tabular-nums;}
.tbg_csl_biz_of {font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.2em; color: var(--cs-gold-deep);}
.tbg_csl_biz_list {position: relative; grid-column: 8 / span 5; margin: 0; padding: 0 0 0 2.75rem; list-style: none;}
.tbg_csl_biz_line {position: absolute; left: 0.45rem; top: 0.6rem; bottom: 0.6rem; width: 1px; background-color: rgba(185, 164, 126, 0.45);}
.tbg_csl_biz_line i {position: absolute; inset: 0; background-color: var(--cs-gold-deep); transform: scaleY(var(--fill, 1)); transform-origin: 50% 0;}
.tbg_csl_ws {position: relative; min-height: 46vh; padding-bottom: clamp(3rem, 6vw, 5rem);}
.tbg_csl_ws:last-child {min-height: 0; padding-bottom: 0;}
.tbg_csl_ws::before {content: ""; position: absolute; left: -2.75rem; top: 0.55rem; width: 0.9rem; height: 0.9rem; margin-left: 0.01rem; border: 1px solid var(--cs-gold-deep); border-radius: 50%; background-color: var(--csl-paper); transition: background-color 0.4s ease;}
.tbg_csl_ws.is-active::before {background-color: var(--cs-gold-deep);}
.tbg_csl_ws_n {font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.24em; color: var(--cs-gold-deep);}
.tbg_csl_ws h3 {margin: 0.6rem 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 2.8vw, 2.9rem); line-height: 1.08; letter-spacing: -0.01em; color: var(--cs-forest);}
.tbg_csl_ws p {max-width: 30rem; margin: 1rem 0 0; font-family: var(--sans); font-size: clamp(1.02rem, 1.15vw, 1.15rem); line-height: 1.65; color: rgba(23, 59, 50, 0.8);}
.tbg_csl_ws_shot {display: none;}
.tbg_csl_biz_close {margin: 0; padding-top: clamp(6rem, 11vw, 10rem); padding-bottom: clamp(7rem, 12vw, 11rem); max-width: 60rem; font-family: var(--serif); font-size: clamp(1.9rem, 3.4vw, 3.6rem); line-height: 1.12; letter-spacing: -0.015em;}
.tbg_csl_biz_close > span {display: block;}
.tbg_csl_biz_close > span + span {color: var(--cs-gold-deep);}
@media (max-width: 991px) {
  .tbg_csl_biz_intro, .tbg_csl_biz_grid {display: block;}
  .tbg_csl_biz_intro > :last-child {margin-top: 1.5rem;}
  .tbg_csl_biz_visual {display: none;}
  .tbg_csl_biz_list {padding-left: 2.25rem;}
  .tbg_csl_ws {min-height: 0;}
  .tbg_csl_ws::before {left: -2.25rem;}
  .tbg_csl_ws_shot {display: block; position: relative; margin-top: 1.5rem; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--csl-ink);}
  .tbg_csl_ws_shot img {display: block; width: 100%; height: 100%; object-fit: cover;}
}

/* ===== 02 In the maker's words (forest): rises over the opening. Portrait and words side by side; the portrait
   holds beside the words while they pass. Tablet keeps the pair; phones stack the portrait above the words. ===== */
.tbg_csl_words {position: relative; z-index: 1; padding: clamp(5.5rem, 9vw, 8.5rem) 0; background-color: var(--cs-forest); color: var(--cs-limestone); box-shadow: 0 -2.5rem 5rem -1.5rem rgba(0, 0, 0, 0.45);}
.tbg_csl_words .tbg_csl_label {color: var(--cs-gold);}
/* The founder then follows the words directly, so it no longer casts the curtain's shadow */
.tbg_csl_pair + .tbg_csl_founder {box-shadow: none;}
.tbg_csl_words_grid {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.5vw, 2.5rem); align-items: start;}
.tbg_csl_words_head {grid-column: 1 / -1; margin-bottom: clamp(2.25rem, 4vw, 3.5rem);}
.tbg_csl_words_media {grid-column: 1 / span 5; align-self: stretch;}
.tbg_csl_words_portrait {position: sticky; top: calc(var(--nav-h, 5rem) + 1.5rem); aspect-ratio: 4 / 5; max-height: calc(100svh - var(--nav-h, 5rem) - 3rem); overflow: hidden; background-color: #1d1d1b;}
.tbg_csl_words_portrait picture, .tbg_csl_words_portrait img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%;}
.tbg_csl_says {grid-column: 7 / span 6; max-width: 38rem; margin: 0;}
.tbg_csl_says_quote {margin: 0; padding: 0;}
.tbg_csl_says_mark {display: block; height: 0.4em; font-family: var(--serif); font-size: clamp(4.5rem, 6vw, 6.5rem); line-height: 0.85; color: var(--cs-gold);}
.tbg_csl_says_quote p {margin: 0; font-family: var(--serif); font-size: clamp(1.08rem, 1.2vw, 1.22rem); line-height: 1.65; color: rgba(240, 235, 225, 0.86);}
.tbg_csl_says_quote p + p {margin-top: 1.15em;}
.tbg_csl_says_quote .tbg_csl_says_lead {font-size: clamp(1.4rem, 1.95vw, 1.95rem); line-height: 1.34; letter-spacing: -0.01em; color: var(--cs-limestone); text-wrap: pretty;}
.tbg_csl_says_quote .tbg_csl_says_turn {margin-top: 1.3em; font-style: italic; font-size: clamp(1.2rem, 1.5vw, 1.5rem); line-height: 1.4; color: var(--cs-gold);}
.tbg_csl_says_by {display: block; margin-top: clamp(2rem, 3vw, 2.75rem);}
.tbg_csl_says_rule {display: block; width: 3rem; height: 1px; background-color: var(--cs-gold); transform-origin: 0 50%;}
.tbg_csl_says_name {display: block; margin-top: 1.1rem; font-family: var(--serif); font-size: clamp(1.35rem, 1.7vw, 1.65rem); line-height: 1.15;}
.tbg_csl_says_role {display: block; margin-top: 0.45rem; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--cs-gold);}
@media (max-width: 991px) {
  .tbg_csl_says {grid-column: 6 / span 7; padding-left: clamp(0.5rem, 2.5vw, 1.5rem);}
}
@media (max-width: 767px) {
  .tbg_csl_words_grid {display: block;}
  .tbg_csl_words_portrait {position: relative; top: auto; max-height: none; max-width: 30rem;}
  .tbg_csl_says {margin-top: 2.5rem;}
}

/* ===== 08 The next chapter (ink) and the closing call to action (paper) ===== */
.tbg_csl_next {background-color: var(--csl-ink); color: var(--cs-limestone); overflow: hidden;}
.tbg_csl_next .tbg_csl_label {color: var(--cs-gold);}
.tbg_csl_next .tbg_csl_body {color: rgba(240, 235, 225, 0.8);}
.tbg_csl_next_grid {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.5vw, 2.5rem); padding-top: clamp(7rem, 12vw, 11rem);}
.tbg_csl_next_text {grid-column: 1 / span 6;}
.tbg_csl_next_work {grid-column: 8 / span 5; align-self: end;}
.tbg_csl_next_title {margin: 0 0 1rem; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cs-gold);}
.tbg_csl_next_work ul {margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(185, 164, 126, 0.35);}
.tbg_csl_next_work li {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; padding: 0.95rem 0; border-bottom: 1px solid rgba(185, 164, 126, 0.35); font-family: var(--sans); font-size: 1rem;}
.tbg_csl_next_work em {font-style: normal; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cs-gold);}
/* Work that matches one of the services links to it */
.tbg_csl_next_work a {color: inherit; text-decoration: underline; text-decoration-color: rgba(185, 164, 126, 0.6); text-decoration-thickness: 1px; text-underline-offset: 0.25em; transition: color 0.3s ease, text-decoration-color 0.3s ease;}
.tbg_csl_next_work a:hover {color: var(--cs-gold); text-decoration-color: currentColor;}
.tbg_csl_next_work a:focus-visible {outline: 2px solid var(--cs-gold); outline-offset: 4px;}
.tbg_csl_next_close {position: relative; display: flex; flex-direction: column; align-items: center; padding: clamp(7rem, 13vw, 12rem) var(--m, 1.5rem) clamp(7rem, 12vw, 11rem); text-align: center;}
.tbg_csl_next_emblem {--emblem: url(/assets/tbg/cases/llamas/llamas-emblem-mask.webp); width: min(56vw, 30rem); aspect-ratio: 1200 / 775; background-color: var(--csl-red); -webkit-mask: var(--emblem) center / contain no-repeat; mask: var(--emblem) center / contain no-repeat;}
.tbg_csl_next_line {margin: clamp(3rem, 6vw, 5rem) 0 0; font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 5.4rem); line-height: 1.04; letter-spacing: -0.02em;}
.tbg_csl_next_line > span {display: block;}
.tbg_csl_next_line em {color: var(--cs-gold);}
.tbg_csl_cta {background-color: var(--cs-limestone); color: var(--cs-forest);}
.tbg_csl_cta_inner {padding-top: clamp(7rem, 12vw, 11rem); padding-bottom: clamp(7rem, 12vw, 11rem);}
.tbg_csl_cta .tbg_csl_h2 {margin-top: 0;}
.tbg_csl_cta_action {margin: clamp(2.25rem, 4vw, 3rem) 0 0;}
@media (max-width: 991px) {
  .tbg_csl_next_grid {display: block;}
  .tbg_csl_next_work {margin-top: 3.5rem;}
}

/* ===== 05 Craftsmanship (charcoal) ===== */
.tbg_csl_craft {background-color: var(--cs-charcoal); color: var(--cs-limestone); overflow: hidden;}
.tbg_csl_craft .tbg_csl_label {color: var(--cs-gold);}
.tbg_csl_craft .tbg_csl_body {color: rgba(240, 235, 225, 0.8);}
.tbg_csl_craft .tbg_csl_caption {color: rgba(240, 235, 225, 0.58);}
.tbg_csl_craft_head {padding-top: clamp(7rem, 12vw, 11rem);}
/* Fretboard: a full-width band that opens left to right */
.tbg_csl_band {position: relative; margin-top: clamp(4rem, 8vw, 7rem);}
.tbg_csl_band_img {position: relative; height: clamp(16rem, 40vw, 42rem); overflow: hidden; background-color: #1d1d1b;}
.tbg_csl_band_img picture, .tbg_csl_band_img img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 58%;}
/* Split: hardware large, a pickup detail and a short caption beside it */
.tbg_csl_split {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.5vw, 2.5rem); align-items: end; margin-top: clamp(6rem, 11vw, 10rem);}
.tbg_csl_split_main {grid-column: 1 / span 7; position: relative; aspect-ratio: 4 / 5; overflow: hidden; background-color: #1d1d1b;}
.tbg_csl_split_img {position: absolute; left: 0; top: -6%; width: 100%; height: 112%;}
.tbg_csl_split_img picture, .tbg_csl_split_img img {width: 100%; height: 100%; object-fit: cover; object-position: 26% 60%;}
.tbg_csl_split_side {grid-column: 9 / span 4;}
.tbg_csl_split_cap {margin: 0; font-family: var(--serif); font-size: clamp(1.6rem, 2.4vw, 2.5rem); line-height: 1.15;}
.tbg_csl_split_detail {width: 72%; aspect-ratio: 4 / 5; margin-top: clamp(2rem, 4vw, 3.5rem); overflow: hidden; background-color: #1d1d1b;}
.tbg_csl_split_detail img {width: 100%; height: 100%; object-fit: cover;}
/* Details: a sideways track, swipe on touch, drag or buttons with a mouse, arrow keys when focused */
.tbg_csl_gallery {position: relative; margin-top: clamp(6rem, 11vw, 10rem);}
.tbg_csl_gallery_head {display: flex; align-items: center; justify-content: space-between; gap: 1rem;}
.tbg_csl_gallery_title {margin: 0; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cs-gold);}
.tbg_csl_gallery_controls {display: flex; align-items: center; gap: 0.75rem;}
.tbg_csl_gallery_count {margin-right: 0.75rem; font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.08em; color: rgba(240, 235, 225, 0.7); font-variant-numeric: tabular-nums;}
.tbg_csl_gallery_btn {display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: 0; border: 1px solid rgba(240, 235, 225, 0.35); border-radius: 50%; background: none; color: var(--cs-limestone); transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, opacity 0.3s ease;}
.tbg_csl_gallery_btn svg {width: 1.05rem;}
.tbg_csl_gallery_btn:hover, .tbg_csl_gallery_btn:focus-visible {background-color: var(--cs-limestone); color: var(--cs-charcoal); border-color: var(--cs-limestone);}
.tbg_csl_gallery_btn[disabled] {opacity: 0.3;}
.tbg_csl_gallery_track {display: flex; gap: clamp(1rem, 2vw, 1.75rem); margin-top: 2rem; padding: 0 var(--m, 1.5rem) 0.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--m, 1.5rem); scrollbar-width: none; overscroll-behavior-x: contain;}
.tbg_csl_gallery_track::-webkit-scrollbar {display: none;}
.tbg_csl_gallery_track:focus-visible {outline: 2px solid var(--cs-gold); outline-offset: 4px;}
.tbg_csl_gallery_track.is-dragging {scroll-snap-type: none; user-select: none;}
.tbg_csl_detail {flex: 0 0 clamp(15rem, 27vw, 25rem); scroll-snap-align: start;}
.tbg_csl_detail_img {aspect-ratio: 4 / 5; overflow: hidden; background-color: #1d1d1b;}
.tbg_csl_detail_img img {width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none; -webkit-user-drag: none;}
.tbg_csl_detail:hover .tbg_csl_detail_img img {transform: scale(1.04);}
.tbg_csl_detail figcaption {margin-top: 1rem; font-family: var(--sans); font-size: 0.92rem; color: rgba(240, 235, 225, 0.8);}
.tbg_csl_detail figcaption span {margin-right: 0.7rem; color: var(--cs-gold); font-variant-numeric: tabular-nums;}
/* Closing band: the whole body, carrying the chapter's last line */
.tbg_csl_close {position: relative; margin-top: clamp(7rem, 12vw, 11rem); height: clamp(28rem, 86vh, 58rem); overflow: hidden; background-color: #1d1d1b;}
.tbg_csl_close_img {position: absolute; inset: 0;}
.tbg_csl_close_img picture, .tbg_csl_close_img img {width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%;}
.tbg_csl_close::after {content: ""; position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(37, 43, 39, 0) 45%, rgba(37, 43, 39, 0.9) 100%); pointer-events: none;}
.tbg_csl_close_text {position: absolute; left: 0; right: 0; bottom: clamp(2.5rem, 6vw, 5rem); z-index: 1; text-align: left;}
.tbg_csl_close_text p {max-width: 30ch; margin: 0; font-family: var(--serif); font-size: clamp(1.6rem, 2.8vw, 2.9rem); line-height: 1.2; color: var(--cs-limestone);}
@media (max-width: 991px) {
  .tbg_csl_split {display: block;}
  .tbg_csl_split_side {margin-top: 2.5rem;}
  .tbg_csl_split_detail {width: 58%;}
  .tbg_csl_detail {flex-basis: 74vw;}
  .tbg_csl_close {height: clamp(26rem, 78svh, 40rem);}
  .tbg_csl_close_img img {object-position: 56% 55%;}
}
@media (max-width: 767px) {
  /* Portrait crop on the horn, where the grain and green accent are */
  .tbg_csl_open_media img {object-position: 34% 50%;}
  .tbg_csl_open_title {font-size: clamp(2.7rem, 12.5vw, 4.4rem);}
  .tbg_csl_scroll {display: none;}
  .tbg_csl_band_img {height: 62vw;}
}
@media (prefers-reduced-motion: reduce) {
  .tbg_csl_scroll i::after {animation: none; top: 30%;}
}