/* ===========================================================
   CASE STUDY — cinematic dark environment.
   Presentation modes: fullbleed / split / rail / stack / crop.
=========================================================== */

.cs{
  background: var(--fang-bg);
  color: var(--fang-ink);
  position: relative;
}

/* --- dramatic entry: black panel wipes up over the paper --- */
.cs-enter{
  background: var(--fang-bg);
  min-height: 46svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cs-enter{ min-height: 40svh; }
.cs-enter__mark{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: var(--fang-ink-35);
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-weight: 600;
}
/* vertical hairline drops in, then the horizontal rule sweeps */
.cs-enter__mark::after{
  content:'';
  width: 1px; height: 0;
  background: var(--crimson);
  transition: height 1.1s var(--ease-out) .15s;
}
.cs-enter.in .cs-enter__mark::after{ height: clamp(40px, 8vh, 90px); }
/* thin crimson hairline that draws across as the panel enters */
.cs-enter__rule{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--crimson);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.6s var(--ease-out) .2s;
}
.cs-enter.in .cs-enter__rule{ transform: scaleX(1); }

/* --- project masthead --- */
.cs-mast{ padding-block: clamp(56px, 9vh, 120px) clamp(30px, 5vh, 60px); }
.cs-mast__index{ color: var(--crimson); }
.cs-mast__title{
  font-family: var(--display);
  font-variation-settings: 'wdth' 118, 'wght' 660;
  font-size: var(--t-xxl);
  line-height: .86;
  letter-spacing: -.04em;
  text-transform: uppercase;
  margin-top: 14px;
}
.cs-mast__dek{
  margin-top: clamp(20px, 3vh, 34px);
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  line-height: 1.4;
  color: var(--fang-ink-60);
  max-width: 40ch;
  text-wrap: balance;
}

/* minimal metadata row */
.cs-meta{
  margin-top: clamp(34px, 6vh, 70px);
  border-top: 1px solid var(--fang-line);
  padding-top: 20px;
}
.cs-meta dt{
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 600;
  color: var(--fang-ink-35);
  margin-bottom: 8px;
}
.cs-meta dd{ margin: 0; font-size: var(--t-sm); color: var(--fang-ink); line-height: 1.45; }

/* --- narrative blocks (asymmetric, not boxed) --- */
.cs-note{ padding-block: clamp(40px, 7vh, 90px); }
.cs-note__label{
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: .13em;
  font-weight: 600;
  color: var(--crimson);
}
.cs-note__body{
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1.62;
  color: var(--fang-ink-60);
}
.cs-note__body strong{ color: var(--fang-ink); font-weight: 600; }
.cs-note__body p + p{ margin-top: 16px; }
.cs-note__body li{
  position: relative;
  padding-left: 24px;
  margin-top: 12px;
}
.cs-note__body li::before{
  content:'';
  position: absolute; left: 0; top: 12px;
  width: 12px; height: 1px; background: var(--crimson);
}

/* --- oversized pull statement between visual sections --- */
.cs-pull{
  padding-block: clamp(60px, 11vh, 150px);
  border-top: 1px solid var(--fang-line);
  border-bottom: 1px solid var(--fang-line);
}
.cs-pull p{
  font-family: var(--display);
  font-variation-settings: 'wdth' 112, 'wght' 560;
  font-size: var(--t-xl);
  line-height: 1.02;
  letter-spacing: -.03em;
  color: var(--fang-ink);
  max-width: 22ch;
  text-wrap: balance;
}
.cs-pull em{ font-style: normal; color: var(--crimson); }

/* -----------------------------------------------------------
   PRESENTATION MODE 1 — FULL BLEED
----------------------------------------------------------- */
.m-fullbleed{ margin-block: clamp(30px, 6vh, 80px); }
.m-fullbleed .ph{ --ph-ratio: 21/9; }
.m-fullbleed__cap{
  padding: 14px var(--pad) 0;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  color: var(--fang-ink-35);
  font-size: var(--t-xs);
}

/* -----------------------------------------------------------
   MODE 2 — SPLIT: image one side, margin annotation the other
----------------------------------------------------------- */
.m-split{
  padding-block: clamp(36px, 7vh, 90px);
  align-items: center;
}
.m-split__fig{ grid-column: 1 / 8; }
.m-split__note{ grid-column: 9 / 13; }
.m-split.rev .m-split__fig{ grid-column: 6 / 13; }
.m-split.rev .m-split__note{ grid-column: 1 / 5; }

@media (max-width: 760px){
  .m-split__fig, .m-split__note,
  .m-split.rev .m-split__fig, .m-split.rev .m-split__note{ grid-column: 1 / -1; }
  .m-split__note{ margin-top: 22px; }
}

/* annotation block — no card chrome, just rules */
.anno__name{
  font-family: var(--display);
  font-variation-settings: 'wdth' 110, 'wght' 620;
  font-size: var(--t-lg);
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--fang-ink);
  margin-bottom: 18px;
}
.anno dl{ margin: 0; border-top: 1px solid var(--fang-line); }
.anno dt{
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  color: var(--crimson);
  margin-top: 16px;
}
.anno dd{
  margin: 5px 0 16px;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--fang-ink-60);
  border-bottom: 1px solid var(--fang-line);
  padding-bottom: 16px;
}
.anno dd:last-child{ border-bottom: none; }

/* -----------------------------------------------------------
   SECONDARY RAIL — small flavor/variant thumbnails sitting
   under a hero execution (e.g. Active Effects' other flavors).
----------------------------------------------------------- */
.m-secondary-rail{
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.m-secondary-rail__item{ flex: 1; }
.m-secondary-rail__item .fig{ border: 1px solid var(--fang-line); }
.m-secondary-rail__item span{
  display: block;
  margin-top: 8px;
  font-size: var(--t-xs);
  color: var(--fang-ink-35);
}

/* stack captions under each paid-social still */
.m-stack__cap{
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: var(--t-xs);
}
.m-stack__cap b{ color: var(--fang-ink); font-weight: 600; }
.m-stack__cap span{ color: var(--fang-ink-35); text-align: right; }

/* -----------------------------------------------------------
   MODE 3 — HORIZONTAL CREATIVE RAIL
----------------------------------------------------------- */
.m-rail{ padding-block: clamp(36px, 6vh, 80px); }
.m-rail__head{
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
}
.m-rail__track{
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--pad);
  padding-bottom: 14px;
  padding-inline: var(--pad);
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--fang-line) transparent;
}
.m-rail__track > *{
  flex: 0 0 clamp(230px, 26vw, 340px);
  scroll-snap-align: start;
}
.m-rail__track::-webkit-scrollbar{ height: 3px; }
.m-rail__track::-webkit-scrollbar-thumb{ background: var(--fang-line); }

/* -----------------------------------------------------------
   MODE 4 — FLOATING MOBILE / SOCIAL CREATIVE STACK
   Vertical 9:16 pieces at varied offsets in generous space.
----------------------------------------------------------- */
.m-stack{ padding-block: clamp(50px, 9vh, 120px); }
.m-stack__grid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: clamp(12px, 2vw, 30px);
  align-items: start;
}
.m-stack__grid > *:nth-child(1){ transform: translateY(clamp(14px, 4vh, 54px)); }
.m-stack__grid > *:nth-child(3){ transform: translateY(clamp(20px, 6vh, 76px)); }
.m-stack__grid > *:nth-child(5){ transform: translateY(clamp(10px, 3vh, 38px)); }
.m-stack .ph{ --ph-ratio: 9/16; }

@media (max-width: 760px){
  .m-stack__grid{
    grid-auto-flow: column;
    grid-auto-columns: 62vw;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--pad);
    margin-inline: calc(var(--pad) * -1);
  }
  .m-stack__grid > *{ scroll-snap-align: center; }
  .m-stack__grid > *:nth-child(n){ transform: none; }
}

/* -----------------------------------------------------------
   MODE 5 — OVERSIZED CROP (extends past content width)
----------------------------------------------------------- */
.m-crop{ padding-block: clamp(40px, 7vh, 100px); }
.m-crop__fig{
  grid-column: 3 / 13;
  margin-right: calc(var(--pad) * -1);
}
.m-crop__fig .ph{ --ph-ratio: 16/10; }
.m-crop__side{
  grid-column: 1 / 3;
  align-self: end;
  padding-bottom: 8px;
}
@media (max-width: 760px){
  .m-crop__fig, .m-crop__side{ grid-column: 1 / -1; }
  .m-crop__fig{ margin-right: calc(var(--pad) * -1); margin-left: calc(var(--pad) * -1); }
  .m-crop__side{ margin-bottom: 16px; }
}

/* -----------------------------------------------------------
   CONVERSION — minimal rule-separated list, no cards
----------------------------------------------------------- */
.conv{ border-top: 1px solid var(--fang-line); }
.conv__row{
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  gap: var(--gap);
  padding-block: 22px;
  border-bottom: 1px solid var(--fang-line);
  transition: background-color .5s var(--ease-out);
}
.conv__row:hover{ background: var(--fang-bg-2); }
.conv__row h4{
  grid-column: 1 / 5;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--fang-ink);
}
.conv__row p{
  grid-column: 5 / 13;
  font-size: var(--t-sm);
  color: var(--fang-ink-60);
  line-height: 1.55;
}
@media (max-width: 760px){
  .conv__row h4, .conv__row p{ grid-column: 1 / -1; }
  .conv__row p{ margin-top: 6px; }
}

/* -----------------------------------------------------------
   ART-DIRECTION PASS — cinematic entry and image-forward pacing.
----------------------------------------------------------- */
.cs-enter{ min-height: 76svh; }
.cs-enter__mark{ gap: 26px; }
.cs-enter__mark::before{
  content: 'FANG\A ENERGY';
  white-space: pre;
  font-family: var(--display);
  font-variation-settings: 'wdth' 118, 'wght' 650;
  font-size: clamp(4.2rem, 14vw, 15rem);
  line-height: .74;
  letter-spacing: -.065em;
  color: var(--fang-ink);
  text-align: left;
  transform: translateY(28px);
  opacity: .1;
  transition: transform 1.2s var(--ease-out), opacity 1.2s var(--ease-out);
}
.cs-enter.in .cs-enter__mark::before{ transform: none; opacity: 1; }
.cs-mast__title{ font-size: clamp(4rem, 10vw, 10rem); }
.cs-note__body{ max-width: 52ch; line-height: 1.55; }
.cs-pull{
  min-height: 72svh;
  display: flex;
  align-items: center;
  padding-block: clamp(80px, 15vh, 220px);
}
.cs-pull p{
  font-size: clamp(3rem, 7.2vw, 8rem);
  line-height: .9;
  max-width: 15ch;
}
.m-fullbleed{ margin-block: clamp(42px, 9vh, 140px); }
.m-split{ padding-block: clamp(60px, 11vh, 160px); }
.m-split__fig{ grid-column: 1 / 9; }
.m-split__note{ grid-column: 10 / 13; }
.m-split.rev .m-split__fig{ grid-column: 5 / 13; }
.anno__name{ font-size: clamp(1.55rem, 2.3vw, 2.4rem); }
.m-secondary-rail{ margin-top: 18px; }
.m-stack__grid{ gap: clamp(12px, 2.8vw, 44px); }
.m-stack__grid > *:nth-child(1){ transform: translateY(clamp(28px, 7vh, 90px)); }
.m-stack__grid > *:nth-child(3){ transform: translateY(clamp(50px, 12vh, 160px)); }
.m-stack__grid > *:nth-child(5){ transform: translateY(clamp(24px, 6vh, 76px)); }

@media (max-width: 760px){
  .cs-enter{ min-height: 60svh; }
  .cs-enter__mark::before{ font-size: 22vw; }
  .cs-mast__title{ font-size: clamp(3.3rem, 16vw, 6rem); }
  .cs-pull{ min-height: 54svh; }
  .cs-pull p{ font-size: clamp(2.6rem, 13vw, 4.5rem); max-width: 11ch; }
}

/* Condensed FANG edit — large images, few words, no deck-like modules. */
.cs-mast{ padding-bottom: clamp(38px, 6vh, 76px); }
.cs-note--brief{ padding-top: 0; }
.cs-direction{
  padding-block: clamp(38px, 6vh, 76px) clamp(54px, 9vh, 116px);
  border-bottom: 1px solid var(--fang-line);
}
.cs-direction ol{ margin: 0; padding: 0; list-style: none; counter-reset: direction; }
.cs-direction li{
  counter-increment: direction;
  padding: 13px 0 13px 38px;
  border-top: 1px solid var(--fang-line);
  position: relative;
  color: var(--fang-ink-60);
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1.45;
}
.cs-direction li:last-child{ border-bottom: 1px solid var(--fang-line); }
.cs-direction li::before{
  content: '0' counter(direction);
  position: absolute; left: 0; top: 15px;
  color: var(--crimson);
  font-size: var(--t-meta);
  letter-spacing: .1em;
}
.m-product-lineup{
  padding-top: clamp(44px, 8vh, 108px);
  padding-bottom: clamp(64px, 11vh, 150px);
}
.m-product-lineup__head{
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-bottom: 18px;
  color: var(--fang-ink-35);
  font-size: var(--t-meta); text-transform: uppercase; letter-spacing: .13em;
}
.m-product-lineup__head span:first-child{ color: var(--crimson); }
.m-product-lineup__grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(8px, 1.5vw, 22px); }
.m-product-lineup figure{ margin: 0; }
.m-product-lineup .fig{ border: 1px solid var(--fang-line); background: #11100e; }
.m-product-lineup figcaption{ margin-top: 10px; color: var(--fang-ink-35); font-size: var(--t-xs); }
.m-visual__title{
  margin: 0 0 14px;
  font-family: var(--display); font-variation-settings: 'wdth' 110, 'wght' 620;
  font-size: clamp(1.7rem, 2.5vw, 2.7rem); line-height: .98; letter-spacing: -.035em;
  color: var(--fang-ink); text-transform: uppercase;
}
.m-visual__note{ color: var(--fang-ink-60); font-size: var(--t-sm); line-height: 1.55; max-width: 27ch; }
.cs-outcome{ border-top: 1px solid var(--fang-line); margin-top: clamp(24px, 5vh, 80px); }
.cs-end{ height: clamp(42px, 7vh, 96px); }

@media (max-width: 760px){
  .cs-direction{ padding-block: 34px 58px; }
  .cs-direction > *{ grid-column: 1 / -1; }
  .cs-direction ol{ margin-top: 22px; }
  .m-product-lineup{ padding-top: 36px; padding-bottom: 72px; }
  .m-product-lineup__grid{ gap: 6px; }
  .m-product-lineup figcaption{ font-size: .62rem; line-height: 1.3; }
  .m-product-lineup__head{ font-size: .62rem; }
}

/* Surgical pacing pass: the mast is now the only project introduction. */
.m-fullbleed{ margin-block: clamp(32px, 6vh, 88px); }
.m-split{ padding-block: clamp(48px, 8vh, 108px); }
.m-split__fig{ grid-column: 1 / 10; }
.m-split__note{ grid-column: 11 / 13; }
.m-split.rev .m-split__fig{
  grid-column: 1 / 10;
  margin-left: calc(var(--pad) * -1);
}
.m-split.rev .m-split__note{ grid-column: 1 / 3; }
.cs-pull{
  min-height: 56svh;
  padding-block: clamp(64px, 10vh, 136px);
}
.cs-pull p{ font-size: clamp(3rem, 7.8vw, 8.6rem); }

@media (max-width: 760px){
  .m-split__fig, .m-split__note,
  .m-split.rev .m-split__fig, .m-split.rev .m-split__note{ grid-column: 1 / -1; }
  .m-split.rev .m-split__fig{ margin-left: 0; }
  .m-split__note{ margin-top: 24px; }
  .cs-pull{ min-height: 44svh; }
}

/* Lore Entry expands into a flavor world: one system, three identities. */
.m-flavor-system{
  padding-top: clamp(38px, 7vh, 92px);
  padding-bottom: clamp(74px, 12vh, 168px);
}
.m-flavor-system__head{ align-items: end; margin-bottom: clamp(32px, 6vh, 82px); }
.m-flavor-system__dek{
  color: var(--fang-ink-60);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.38;
  max-width: 31ch;
}
.m-flavor-system__grid{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}
.m-flavor-system__item{ margin: 0; }
.m-flavor-system__item--blood{
  grid-column: 4 / 10;
  grid-row: 1;
  z-index: 1;
}
.m-flavor-system__item--yuzu{ grid-column: 10 / 13; grid-row: 1; margin-top: clamp(22px, 6vw, 100px); }
.m-flavor-system__item--berry{
  grid-column: 1 / 4;
  grid-row: 1;
  margin-top: clamp(42px, 11vw, 170px);
  margin-left: calc(var(--pad) * -1);
}
.m-flavor-system__item .fig{ background: var(--fang-bg-2); }
.m-flavor-system__item figcaption{
  margin-top: 10px;
  color: var(--fang-ink-35);
  font-size: var(--t-xs);
}

@media (max-width: 760px){
  .m-flavor-system{ padding-top: 42px; padding-bottom: 72px; }
  .m-flavor-system__head{ margin-bottom: 28px; }
  .m-flavor-system__head > *{ grid-column: 1 / -1; }
  .m-flavor-system__dek{ margin-top: 14px; font-size: 1rem; }
  .m-flavor-system__grid{
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--pad);
    padding-inline: var(--pad);
    margin-inline: calc(var(--pad) * -1);
    scrollbar-width: none;
  }
  .m-flavor-system__grid::-webkit-scrollbar{ display: none; }
  .m-flavor-system__item,
  .m-flavor-system__item--blood,
  .m-flavor-system__item--yuzu,
  .m-flavor-system__item--berry{
    flex: 0 0 74vw;
    margin-top: 0;
    margin-left: 0;
    margin-right: calc(26vw - (var(--pad) * 2));
    scroll-snap-align: start;
  }
}

/* Selected Social — native horizontal browsing, treated as campaign work rather than UI. */
.m-social-rail{
  padding-block: clamp(46px, 8vh, 116px) clamp(72px, 11vh, 154px);
  border-top: 1px solid var(--fang-line);
}
.m-social-rail__head{ align-items: end; margin-bottom: clamp(28px, 5vh, 64px); }
.m-social-rail__dek{
  color: var(--fang-ink-60);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.38;
  max-width: 28ch;
}
.m-social-rail__viewport{
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}
.m-social-rail__viewport:active{ cursor: grabbing; }
.m-social-rail__viewport::-webkit-scrollbar{ display: none; }
.m-social-rail__track{
  display: flex;
  gap: clamp(12px, 2vw, 30px);
  width: max-content;
  padding-inline: var(--pad);
  padding-right: calc(var(--pad) * 2);
}
.m-social-rail__item{
  flex: 0 0 clamp(300px, 27vw, 430px);
  margin: 0;
  overflow: hidden;
  scroll-snap-align: start;
  background: var(--fang-bg-2);
}
.m-social-rail__item .fig{ background: var(--fang-bg-2); }
.m-social-rail__item--fill .fig{
  height: 100%;
  aspect-ratio: auto !important;
}
.m-social-rail__item--fill .fig img{ object-position: center; }
@media (hover: hover) and (pointer: fine){
  .m-social-rail__item .fig img{ transition: transform .65s var(--ease-out); }
  .m-social-rail__item:hover .fig img{ transform: scale(1.025); }
}

@media (max-width: 760px){
  .m-social-rail{ padding-block: 48px 76px; }
  .m-social-rail__head > *{ grid-column: 1 / -1; }
  .m-social-rail__dek{ margin-top: 14px; font-size: 1rem; }
  .m-social-rail__track{ gap: 12px; padding-right: calc(var(--pad) * 2); }
.m-social-rail__item{ flex-basis: 74vw; }
}

/* Paid social and product creative are one marketing system, not separate galleries. */
.m-marketing{
  padding-top: clamp(58px, 10vh, 146px);
  border-bottom: 1px solid var(--fang-line);
}
.m-marketing__mast{ align-items: end; }
.m-marketing__title{
  font-family: var(--display);
  font-variation-settings: 'wdth' 118, 'wght' 650;
  font-size: clamp(3.5rem, 9vw, 9.5rem);
  line-height: .84;
  letter-spacing: -.055em;
  text-transform: uppercase;
}
.m-marketing__dek{
  margin-top: clamp(18px, 3vh, 32px);
  max-width: 35ch;
  color: var(--fang-ink-60);
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  line-height: 1.42;
}
.m-marketing__objective{ padding-top: clamp(48px, 8vh, 112px); }
.m-marketing__system{
  padding-block: clamp(30px, 5vh, 70px) clamp(38px, 7vh, 94px);
  border-bottom: 1px solid var(--fang-line);
}
.m-marketing__system ol{ margin: 0; }
.m-marketing__system li{
  display: grid;
  grid-template-columns: minmax(100px, 1fr) minmax(0, 2.4fr);
  gap: var(--gap);
  padding-block: 16px;
  border-top: 1px solid var(--fang-line);
}
.m-marketing__system li:last-child{ border-bottom: 1px solid var(--fang-line); }
.m-marketing__system li span,
.m-marketing__primary-note span,
.m-marketing__secondary-note span{
  color: var(--crimson);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.m-marketing__system li p{ color: var(--fang-ink-60); font-size: var(--t-sm); line-height: 1.5; }
.m-marketing__routes{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--gap);
  padding-top: 18px;
}
.m-marketing__routes div{ min-width: 0; }
.m-marketing__routes b,
.m-marketing__routes span{ display: block; }
.m-marketing__routes b{
  color: var(--fang-ink);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.m-marketing__routes span{ margin-top: 5px; color: var(--fang-ink-35); font-size: var(--t-xs); line-height: 1.32; }
.m-marketing__concepts{
  padding-block: clamp(58px, 11vh, 160px) clamp(38px, 7vh, 96px);
  align-items: end;
}
.m-marketing__concepts figure{ margin: 0; }
.m-marketing__primary{ grid-column: 2 / 8; grid-row: 1; }
.m-marketing__primary-note{ grid-column: 9 / 13; grid-row: 1; padding-bottom: clamp(20px, 5vw, 78px); }
.m-marketing__secondary{ grid-column: 7 / 12; grid-row: 2; margin-top: clamp(48px, 9vw, 144px) !important; }
.m-marketing__secondary-note{ grid-column: 2 / 6; grid-row: 2; align-self: center; margin-top: clamp(48px, 9vw, 144px); }
.m-marketing__primary-note b,
.m-marketing__secondary-note b{
  display: block;
  margin-top: 10px;
  color: var(--fang-ink);
  font-family: var(--display);
  font-variation-settings: 'wdth' 110, 'wght' 620;
  font-size: clamp(1.5rem, 2.4vw, 2.5rem);
  letter-spacing: -.035em;
  line-height: .96;
  text-transform: uppercase;
}
.m-marketing__primary-note p,
.m-marketing__secondary-note p{
  margin-top: 16px;
  max-width: 25ch;
  color: var(--fang-ink-60);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.m-marketing__benefit{ margin-block: 0 clamp(58px, 10vh, 144px); }
.m-marketing__benefit .fig{ background: var(--fang-bg-2); }
.m-marketing__benefit-cap{
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px var(--pad) 0;
  color: var(--fang-ink-35);
  font-size: var(--t-xs);
}
.m-marketing__benefit-cap span:last-child{ max-width: 47ch; }
.m-marketing .m-product-lineup{ padding-top: 0; }
.m-flavor-system--marketing{ border-top: 1px solid var(--fang-line); }

@media (max-width: 760px){
  .m-marketing{ padding-top: 58px; }
  .m-marketing__mast > *,
  .m-marketing__objective > *,
  .m-marketing__system > *{ grid-column: 1 / -1; }
  .m-marketing__title{ font-size: clamp(3.25rem, 16vw, 5.5rem); }
  .m-marketing__dek{ margin-top: 18px; }
  .m-marketing__mast .cs-note__label,
  .m-marketing__objective .cs-note__label,
  .m-marketing__system .cs-note__label{ margin-bottom: 20px; }
  .m-marketing__objective{ padding-top: 48px; }
  .m-marketing__system{ padding-block: 34px 46px; }
  .m-marketing__system li{ grid-template-columns: 1fr; gap: 8px; }
  .m-marketing__routes{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .m-marketing__concepts{ padding-block: 58px 52px; }
  .m-marketing__primary,
  .m-marketing__primary-note,
  .m-marketing__secondary,
  .m-marketing__secondary-note{ grid-column: 1 / -1; grid-row: auto; }
  .m-marketing__primary-note{ padding: 18px 0 0; }
  .m-marketing__secondary{ margin-top: 52px !important; }
  .m-marketing__secondary-note{ margin-top: 18px; }
  .m-marketing__benefit{ margin-bottom: 58px; }
  .m-marketing__benefit-cap{ display: block; padding-top: 12px; }
  .m-marketing__benefit-cap span:last-child{ display: block; margin-top: 6px; }
}

/* Product-led execution and audience archetypes remain inside the marketing narrative. */
.m-product-ad{
  padding-block: clamp(58px, 10vh, 146px);
  align-items: center;
}
.m-product-ad__note{ grid-column: 2 / 6; }
.m-product-ad__fig{ grid-column: 7 / 12; margin: 0; }
.m-product-ad__note span{
  display: block;
  color: var(--crimson);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.m-product-ad__note b{
  display: block;
  margin-top: 10px;
  color: var(--fang-ink);
  font-family: var(--display);
  font-variation-settings: 'wdth' 110, 'wght' 620;
  font-size: clamp(1.5rem, 2.4vw, 2.5rem);
  letter-spacing: -.035em;
  line-height: .96;
  text-transform: uppercase;
}
.m-product-ad__note p{
  margin-top: 16px;
  max-width: 25ch;
  color: var(--fang-ink-60);
  font-size: var(--t-sm);
  line-height: 1.55;
}
.m-audience{
  padding-top: clamp(58px, 10vh, 146px);
  border-top: 1px solid var(--fang-line);
}
.m-audience__head{ align-items: end; margin-bottom: clamp(32px, 6vh, 84px); }
.m-audience__dek{
  margin: 0;
  color: var(--fang-ink-60);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.38;
  max-width: 30ch;
}
.m-audience__stage{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap);
  align-items: end;
  padding: clamp(28px, 5vw, 72px) var(--pad) clamp(48px, 8vh, 118px);
  background: var(--fang-bg-2);
  border-top: 1px solid var(--fang-line);
  border-bottom: 1px solid var(--fang-line);
}
.m-audience__item{ margin: 0; }
.m-audience__item--gamer{ grid-column: 2 / 7; }
.m-audience__item--streamer{ grid-column: 7 / 10; }
.m-audience__item--hustler{ grid-column: 10 / 13; }
.m-audience__item .fig{ background: transparent; }
.m-audience__item--streamer{ transform: translateY(clamp(-10px, -2vw, -28px)); }
.m-audience__item--hustler{ transform: translateY(clamp(16px, 3vw, 42px)); }
.m-audience__item figcaption{ margin-top: 12px; }
.m-audience__item figcaption b,
.m-audience__item figcaption span{ display: block; }
.m-audience__item figcaption b{
  color: var(--fang-ink);
  font-size: var(--t-meta);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.m-audience__item figcaption span{ margin-top: 4px; color: var(--fang-ink-35); font-size: var(--t-xs); }

@media (max-width: 760px){
  .m-product-ad{ padding-block: 52px 66px; }
  .m-product-ad__note, .m-product-ad__fig{ grid-column: 1 / -1; }
  .m-product-ad__fig{ margin-top: 28px; }
  .m-audience{ padding-top: 58px; }
  .m-audience__head > *{ grid-column: 1 / -1; }
  .m-audience__dek{ margin-top: 16px; font-size: 1rem; }
  .m-audience__stage{
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    padding-inline: var(--pad);
    scrollbar-width: none;
  }
  .m-audience__stage::-webkit-scrollbar{ display: none; }
  .m-audience__item,
  .m-audience__item--gamer,
  .m-audience__item--streamer,
  .m-audience__item--hustler{
    flex: 0 0 78vw;
    transform: none;
    scroll-snap-align: start;
  }
}