/* Case Studies: overview (/case-studies) and project pages. Loaded only on those pages.
   Nimbus Roman / Nimbus Sans are the intended faces; their files are not in the brand kit yet,
   so the --serif / --sans fallbacks render until they are supplied. */
.tbg_cs_root {--cs-forest: #173B32; --cs-limestone: #F0EBE1; --cs-gold: #B9A47E; --cs-gold-deep: #74603F; --cs-charcoal: #252B27;}
/* Content width: the site's side margin, so text lines up with the nav */
.tbg_cs_wrap {width: 100%; margin: 0 auto; padding-left: var(--m, 1.5rem); padding-right: var(--m, 1.5rem); box-sizing: border-box;}

/* ===== Overview ===== */
.tbg_cso {background-color: var(--cs-limestone); color: var(--cs-forest); padding-bottom: clamp(5rem, 9vw, 9rem); overflow: hidden;}
.tbg_cso_intro {padding-top: calc(var(--nav-h, 5rem) + clamp(3.5rem, 8vw, 8rem));}
.tbg_cso_title {margin: clamp(1.5rem, 2.5vw, 2.25rem) 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(3.4rem, 10vw, 10.5rem); line-height: 0.95; letter-spacing: -0.035em;}
.tbg_cso_lead {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_cso_lead_main {grid-column: 1 / span 6; margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.45rem, 2.3vw, 2.3rem); line-height: 1.2; color: rgba(23, 59, 50, 0.86);}
.tbg_cso_lead_sub {grid-column: 8 / span 5; margin: 0.35rem 0 0; max-width: 32rem; font-family: var(--sans); font-size: clamp(1.05rem, 1.15vw, 1.2rem); line-height: 1.65; color: rgba(23, 59, 50, 0.78);}

/* Project grid: two cards per row on desktop and tablet, one on phones. Each card has two separate links: the main
   action's hit area stretches over the whole card (so the picture opens it too); the secondary link sits above it. */
.tbg_cso_projects {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(4rem, 7vw, 6rem) clamp(1.5rem, 3.5vw, 3.5rem); align-items: start; margin-top: clamp(4rem, 7vw, 7rem);}
.tbg_cso_card {position: relative; display: flex; flex-direction: column;}
.tbg_cso_text {padding-top: clamp(2.5rem, 3.5vw, 3rem);}
.tbg_cso_media {position: relative;}
/* A gentle 16:10 crop of the 4:3 website screens keeps a whole card within one screen on desktop; phones show 4:3 */
.tbg_cso_frame {position: relative; aspect-ratio: 16 / 10; overflow: hidden; background-color: #1d1d1b;}
.tbg_cso_scale {position: absolute; inset: 0; transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);}
.tbg_cso_photo {position: absolute; inset: 0; display: block;}
.tbg_cso_photo img {position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; object-position: 50% 45%; display: block;}
/* Detail: a second screen of the website, set into the lower-right corner of the main still */
.tbg_cso_detail {position: absolute; right: clamp(1rem, 1.8vw, 1.75rem); bottom: clamp(-2.25rem, -2.5vw, -1.25rem); width: clamp(7rem, 27%, 11rem); aspect-ratio: 4 / 3; overflow: hidden; border: clamp(0.35rem, 0.6vw, 0.6rem) solid var(--cs-limestone); background-color: #1d1d1b; box-shadow: 0 30px 60px -30px rgba(23, 59, 50, 0.45); transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);}
.tbg_cso_detail img {width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block;}
.tbg_cso_index {margin: 0 0 clamp(1rem, 1.6vw, 1.4rem); font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cs-gold-deep);}
.tbg_cso_name {margin: 0; font-family: var(--sans); font-weight: 400; font-size: clamp(0.85rem, 0.95vw, 1rem); letter-spacing: 0.28em; text-transform: uppercase;}
.tbg_cso_line {margin: 0.85rem 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 2.4vw, 2.5rem); line-height: 1.08; letter-spacing: -0.015em;}
.tbg_cso_tags {display: flex; flex-wrap: wrap; margin: clamp(1.1rem, 1.8vw, 1.5rem) 0 0; padding: 0; list-style: none; font-family: var(--sans); font-size: 0.84rem; line-height: 1.9; letter-spacing: 0.04em; color: rgba(23, 59, 50, 0.72);}
.tbg_cso_tags li + li::before {content: "/"; margin: 0 0.6rem; color: var(--cs-gold);}
.tbg_cso_actions {display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 1.75rem; margin-top: clamp(1.75rem, 2.5vw, 2.25rem);}
.tbg_cso_cta {position: static;}
.tbg_cso_cta::after {content: ""; position: absolute; inset: 0; z-index: 1;}
.tbg_cso_cta:focus-visible, .tbg_cso_site:focus-visible {outline: 2px solid var(--cs-gold); outline-offset: 4px;}
.tbg_cso_site {position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0 0.3rem; color: var(--cs-forest); font-family: var(--sans); font-size: 0.95rem; letter-spacing: 0.04em; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;}
.tbg_cso_site:hover {color: var(--cs-gold-deep); background-size: 0% 1px; background-position: 100% 100%;}
.tbg_cso_ext {display: inline-block; transition: transform 0.35s ease;}
.tbg_cso_site:hover .tbg_cso_ext, .tbg_cso_site:focus-visible .tbg_cso_ext {transform: translate(2px, -2px);}
/* Hover / focus on the main action: the photograph eases forward and the detail lifts */
@media (hover: hover) and (pointer: fine) {
  .tbg_cso_card:has(.tbg_cso_cta:hover) .tbg_cso_scale, .tbg_cso_card:has(.tbg_cso_cta:focus-visible) .tbg_cso_scale {transform: scale(1.045);}
  .tbg_cso_card:has(.tbg_cso_cta:hover) .tbg_cso_detail {transform: translate(0.5rem, -0.75rem);}
  .tbg_cso_card:has(.tbg_cso_cta:hover) .b-arrow {transform: translateX(4px);}
}
.tbg_cso_card:has(.tbg_cso_cta:active) .tbg_cso_scale {transform: scale(1.02); transition-duration: 0.25s;}

/* After the last project: a quiet tile, the size of a card's picture, saying more case studies are on the way */
.tbg_cso_soon_frame {display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 16 / 10; padding: clamp(1.5rem, 3vw, 2.75rem); border: 1px solid rgba(185, 164, 126, 0.6); box-sizing: border-box; background-image: linear-gradient(160deg, rgba(185, 164, 126, 0.14), rgba(185, 164, 126, 0) 60%);}
.tbg_cso_soon_title {max-width: 14em; margin: 0; font-family: var(--serif); font-size: clamp(1.6rem, 2.3vw, 2.4rem); line-height: 1.12; letter-spacing: -0.015em; color: var(--cs-forest);}
.tbg_cso_more_link {align-self: flex-start; margin-top: clamp(1.25rem, 2vw, 1.75rem); color: var(--cs-forest); font-family: var(--sans); font-size: 0.95rem; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 0.2rem;}
.tbg_cso_more_link:focus-visible {outline: 2px solid var(--cs-gold); outline-offset: 4px;}

@media (max-width: 991px) {
  .tbg_cso_lead_main {grid-column: 1 / -1;}
  .tbg_cso_lead_sub {grid-column: 1 / -1; margin-top: 1.5rem;}
}
@media (max-width: 767px) {
  .tbg_cso_projects {grid-template-columns: minmax(0, 1fr);}
  .tbg_cso_frame {aspect-ratio: 4 / 3;}
  .tbg_cso_title {font-size: clamp(3.1rem, 15vw, 5rem);}
  .tbg_cso_soon_frame {aspect-ratio: auto; padding: 1.75rem 1.5rem 1.6rem;}
}