/* Case study 02: Men Matter & Co. The site's forest theme, with Men Matter & Co's own copper as the accent and their black
   behind their photographs, so the product shots sit on the ground they were made for. One limestone band (Our stake). */
.tbg_csm {--mmc-copper: #C08A5B; --mmc-black: #0B0B0A; --csm-ink: #F3EEE4; --csm-dim: rgba(243, 238, 228, 0.74); background-color: #0A1713; color: var(--csm-ink);}
.tbg_csm section {position: relative;}
.tbg_csm_label {margin: 0; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--f-gold, #D9BE86);}
.tbg_csm_label span {margin-right: 0.9rem; color: var(--mmc-copper);}
.tbg_csm_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_csm_h2 em {font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--f-gold, #D9BE86);}
.tbg_csm_h2_xl {font-size: clamp(3rem, 8vw, 8.5rem);}
.tbg_csm_body {max-width: 34rem; margin: 1.6rem 0 0; font-family: var(--sans); font-size: clamp(1.05rem, 1.2vw, 1.25rem); line-height: 1.65; color: var(--csm-dim);}

/* ===== Opening: their photograph on the right, on their black, fading into the forest ===== */
.tbg_csm_open {display: flex; align-items: flex-end; min-height: 100svh; padding: calc(var(--nav-h, 5rem) + 4rem) 0 clamp(3.5rem, 7vw, 6.5rem); overflow: hidden; background: var(--mmc-black);}
.tbg_csm_open_media {position: absolute; inset: 0 0 0 auto; width: min(58%, 60rem);}
.tbg_csm_open_media img {width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block;}
.tbg_csm_open_media::after {content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--mmc-black) 0%, rgba(11, 11, 10, 0.6) 30%, rgba(11, 11, 10, 0) 60%), linear-gradient(0deg, #0A1713 0%, rgba(10, 23, 19, 0) 38%);}
.tbg_csm_open::after {content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(0deg, #0A1713, rgba(10, 23, 19, 0)); pointer-events: none;}
.tbg_csm_open_text {position: relative; z-index: 1;}
.tbg_csm_badge {display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; margin: 0; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--csm-dim);}
.tbg_csm_badge span {padding: 0.45rem 0.85rem; border: 1px solid var(--mmc-copper); border-radius: 999px; color: var(--mmc-copper);}
.tbg_csm_title {max-width: 11em; margin: clamp(1.25rem, 2vw, 1.75rem) 0 0; font-family: var(--serif); font-weight: 400; font-size: clamp(3.2rem, 8.4vw, 9.5rem); line-height: 0.96; letter-spacing: -0.035em;}
.tbg_csm_lead {max-width: 36rem; margin: clamp(1.5rem, 2.5vw, 2.25rem) 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.25rem, 1.8vw, 1.75rem); line-height: 1.3; color: var(--csm-dim);}

/* ===== Our stake: limestone, rising over the opening ===== */
.tbg_csm_stake {z-index: 2; margin-top: calc(-1 * clamp(1rem, 2.2vw, 2.25rem)); padding: clamp(5rem, 9vw, 9rem) 0; border-radius: clamp(1rem, 2.2vw, 2.25rem) clamp(1rem, 2.2vw, 2.25rem) 0 0; background: linear-gradient(180deg, #F3EFE6 0%, #F0EBE1 60%, #EAE3D6 100%); color: #173B32;}
.tbg_csm_stake .tbg_csm_label {color: #74603F;}
.tbg_csm_stake .tbg_csm_h2 em {color: #74603F;}
.tbg_csm_stake .tbg_csm_body {color: rgba(23, 59, 50, 0.8);}
.tbg_csm_stake_grid {position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.5vw, 2.5rem); align-items: end;}
.tbg_csm_stake_text {grid-column: 1 / span 7;}
.tbg_csm_facts {grid-column: 9 / span 4; margin: 0;}
.tbg_csm_facts div {padding: 1rem 0; border-top: 1px solid rgba(23, 59, 50, 0.16);}
.tbg_csm_facts dt {font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: #74603F;}
.tbg_csm_facts dd {margin: 0.35rem 0 0; font-family: var(--serif); font-size: clamp(1.15rem, 1.4vw, 1.4rem); line-height: 1.3;}

/* ===== The brand: the range, on their black ===== */
.tbg_csm_brand {z-index: 3; margin-top: calc(-1 * clamp(1rem, 2.2vw, 2.25rem)); padding: clamp(5rem, 9vw, 9rem) 0; border-radius: clamp(1rem, 2.2vw, 2.25rem) clamp(1rem, 2.2vw, 2.25rem) 0 0; background: radial-gradient(60% 50% at 85% 0%, rgba(192, 138, 91, 0.12), transparent 70%), var(--mmc-black);}
.tbg_csm_brand .tbg_csm_h2 em {color: var(--mmc-copper);}
.tbg_csm_brand_intro {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 3rem); max-width: 72rem;}
.tbg_csm_products {display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.75rem, 1.4vw, 1.25rem); margin-top: clamp(3rem, 6vw, 5.5rem);}
.tbg_csm_product {margin: 0;}
.tbg_csm_product_img {aspect-ratio: 1122 / 1402; overflow: hidden; border-radius: 0.75rem; background-color: #141412;}
.tbg_csm_product_img img {width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);}
.tbg_csm_product:hover img {transform: scale(1.04);}
.tbg_csm_product figcaption {display: grid; gap: 0.2rem; margin-top: 0.9rem; font-family: var(--sans); font-size: 0.85rem; line-height: 1.45; color: rgba(243, 238, 228, 0.6);}
.tbg_csm_product figcaption span {font-size: 0.7rem; letter-spacing: 0.2em; color: var(--mmc-copper);}
.tbg_csm_product figcaption strong {font-family: var(--serif); font-weight: 400; font-size: 1.15rem; color: var(--csm-ink);}

/* ===== The purpose ===== */
.tbg_csm_purpose {padding: clamp(5rem, 9vw, 9rem) 0; background: linear-gradient(180deg, var(--mmc-black) 0%, #0E1F1A 30%, #173B32 100%);}
.tbg_csm_purpose_grid {position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.25rem, 2.5vw, 2.5rem); align-items: center;}
.tbg_csm_purpose_text {grid-column: 1 / span 6;}
.tbg_csm_statement {max-width: 18em; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; font-family: var(--serif); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1; font-size: clamp(1.6rem, 2.6vw, 2.6rem); line-height: 1.15; color: var(--mmc-copper);}
.tbg_csm_purpose_media {grid-column: 8 / span 5; display: grid; gap: 1.5rem; justify-items: center;}
.tbg_csm_guide {width: min(100%, 24rem); margin: 0; border-radius: 0.6rem; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); transform: rotate(-2deg);}
.tbg_csm_guide img {width: 100%; height: auto; display: block;}
.tbg_csm_partner {margin: 0; text-align: center;}
.tbg_csm_partner img {width: min(16rem, 70%); height: auto; opacity: 0.85;}
.tbg_csm_partner figcaption {margin-top: 0.5rem; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(243, 238, 228, 0.55);}

/* ===== In use ===== */
.tbg_csm_routine {padding: clamp(4rem, 7vw, 7rem) 0; background: #10251F;}
.tbg_csm_routine_row {max-width: 70rem; display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: clamp(0.75rem, 1.4vw, 1.25rem); align-items: end;}
.tbg_csm_routine_row figure {margin: 0;}
.tbg_csm_routine_row img {width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 0.75rem; display: block;}
.tbg_csm_routine_row figure:nth-child(2) img {aspect-ratio: 5 / 4;}
.tbg_csm_routine_row figcaption {margin-top: 0.8rem; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--f-gold, #D9BE86);}
.tbg_csm_routine_line {margin: clamp(3rem, 5vw, 4.5rem) auto 0; max-width: 22em; font-family: var(--serif); font-style: italic; font-size: clamp(1.8rem, 3.4vw, 3.4rem); line-height: 1.12; text-align: center;}

/* ===== The brand online ===== */
.tbg_csm_digital {padding: clamp(5rem, 9vw, 9rem) 0 clamp(4rem, 6vw, 6rem); background: #0A1713;}
.tbg_csm_visit {margin: 1.75rem 0 0;}
.tbg_csm_visit a {color: var(--f-gold, #D9BE86); font-family: var(--sans); font-weight: 600; letter-spacing: 0.08em; 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_csm_visit a:hover {background-size: 0 1px; background-position: 100% 100%; transition: background-size 0.5s ease;}
.tbg_csm_screens {display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 2vw, 2rem); margin-top: clamp(3rem, 6vw, 5.5rem);}
.tbg_csm_screen {grid-column: span 5; margin: 0;}
.tbg_csm_screen.is-wide {grid-column: span 7;}
.tbg_csm_screen_img {aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0.6rem; border: 1px solid rgba(243, 238, 228, 0.1); background-color: #111;}
.tbg_csm_screen_img img {width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; display: block;}
.tbg_csm_screen figcaption {display: flex; gap: 0.9rem; margin-top: 0.9rem; font-family: var(--sans); font-size: 0.85rem; color: rgba(243, 238, 228, 0.6);}
.tbg_csm_screen figcaption span {color: var(--mmc-copper); letter-spacing: 0.16em;}
.tbg_csm_credit {margin-top: clamp(2.5rem, 4vw, 3.5rem); font-family: var(--sans); font-size: 0.78rem; color: rgba(243, 238, 228, 0.45);}

/* ===== Closing call to action ===== */
.tbg_csm_cta {padding: clamp(6rem, 11vw, 11rem) 0; background: linear-gradient(180deg, #0A1713 0%, #07110E 100%);}
.tbg_csm_cta_inner {position: relative; z-index: 1;}
.tbg_csm_cta .tbg_csm_h2 {margin: 0;}
.tbg_csm_actions {display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; margin: 2.25rem 0 0;}

@media (max-width: 991px) {
  .tbg_csm_stake_text, .tbg_csm_facts, .tbg_csm_purpose_text, .tbg_csm_purpose_media {grid-column: 1 / -1;}
  .tbg_csm_facts {margin-top: 3rem;}
  .tbg_csm_purpose_media {margin-top: 3.5rem;}
  .tbg_csm_products {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .tbg_csm_screen, .tbg_csm_screen.is-wide {grid-column: 1 / -1;}
}
@media (max-width: 767px) {
  .tbg_csm_open {min-height: 92svh;}
  .tbg_csm_open_media {width: 100%;}
  .tbg_csm_open_media::after {background: linear-gradient(0deg, #0A1713 0%, rgba(10, 23, 19, 0.85) 40%, rgba(11, 11, 10, 0.25) 100%);}
  .tbg_csm_brand_intro {grid-template-columns: 1fr;}
  .tbg_csm_products {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .tbg_csm_routine_row {grid-template-columns: 1fr 1fr;}
  .tbg_csm_routine_row figure:nth-child(2) {grid-column: 1 / -1; order: -1;}
}