/* Toko Manisan case study. Loaded only by this case; shared site styles stay intact. */
.toko-study { --study-space: clamp(48px, 5vw, 72px); }
.study-hero { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 40px 64px; padding-block: 48px 40px; align-items: center; }
.study-hero h1 { font-size: clamp(56px,6.5vw,94px); line-height: .93; letter-spacing: -.055em; }
.study-hero__intro { max-width: 52ch; margin-top: 28px; font-size: 17px; line-height: 1.75; }
.study-hero__result { display: flex; align-items: center; gap: 24px; margin-top: 28px; }
.study-hero__result strong { font: 800 clamp(48px,5.5vw,76px)/1 var(--font-display); letter-spacing: -.055em; background: var(--lime); padding: 8px 12px; }
.study-hero__result .mono { font-size: 12px; letter-spacing: .1em; }
.study-hero__visual { width: 100%; height: 520px; overflow: hidden; border-radius: 12px; }
.study-hero__visual img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.study-meta { grid-column: 1/-1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; border-top: 1px solid var(--black); padding-top: 20px; }
.study-meta dt { font: 700 12px/1.4 var(--font-label); text-transform: uppercase; letter-spacing: .16em; margin-bottom: 8px; }
.study-meta dd { font-size: 13px; line-height: 1.6; max-width: 28ch; }
.study-editorial { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 64px; align-items: start; }
.toko-study .section__title:where(:not(#case-cta-title)) { max-width: 19ch; font-size: clamp(32px,3.7vw,52px); line-height: 1.04; }
.study-prose { font-size: 16px; line-height: 1.8; max-width: 57ch; }
.study-prose p + p { margin-top: 16px; }
.study-challenge { background: var(--surface); padding-block: var(--study-space); }
.study-approach { padding-block: var(--study-space); }
.study-principles { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; margin-top: 32px; }
.study-principles li { border-top: 1px solid var(--black); padding-top: 16px; }
.study-principles .mono { display: block; margin-bottom: 20px; }
.study-principles h3 { font-size: clamp(21px,2vw,28px); line-height: 1.16; min-height: 2.4em; margin-bottom: 16px; }
.study-principles p { font-size: 15px; line-height: 1.75; }
.toko-study .study-formats { padding-block: var(--study-space); }
.toko-study .study-formats .section__title { color: var(--white); }
.study-formats .section__title span { color: var(--lime); }
.study-formats .study-prose { align-self: end; }
.toko-study .case-formats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; max-width: 940px; margin: 40px auto 0; align-items: start; }
.toko-study .case-format:nth-child(n) { grid-column: auto; margin: 0; align-self: start; }
.toko-study .case-formats .work-item__frame { aspect-ratio: 9/16; height: auto; border-radius: 12px; }
.toko-study .case-format__body { padding: 20px 0 0; }
.toko-study .case-format__title { font-size: clamp(21px,2vw,26px); line-height: 1.15; }
.toko-study .case-format__text { font-size: 14px; line-height: 1.75; margin-top: 12px; }
.study-results { padding-block: var(--study-space); }
.study-results .section__title span, .study-why .section__title span { background: var(--lime); padding-inline: .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.toko-study .case-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin-top: 40px; }
.toko-study .stat { display: flex; flex-direction: column; align-items: start; gap: 16px; padding-block: 24px 0; }
.toko-study .stat__num { font-size: clamp(48px,5.5vw,76px); }
.toko-study .stat__label { max-width: none; font-size: 13px; }
.study-ads { padding-block: var(--study-space); border-bottom: 1px solid var(--black); }
.campaign-results { margin: var(--study-space) auto 0; }
.campaign-results__viewport { overflow-x: auto; border-radius: 12px; }
.campaign-results__viewport:focus-visible { outline: 2px solid var(--black); outline-offset: 4px; }
.campaign-results__hint { display: none; }
.campaign-results img { display: block; width: 100%; height: auto; }
.campaign-results figcaption { max-width: 70ch; margin-top: 16px; font-size: 13px; line-height: 1.75; }
.toko-study .case-socials { margin-top: 24px; gap: 8px 24px; }
.toko-study .case-socials a { position: relative; opacity: .72; transition: opacity 200ms ease, transform 200ms ease; }
.toko-study .case-socials a::after { content: ''; position: absolute; right: 0; bottom: 7px; left: 24px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 200ms ease; }
.toko-study .case-socials a:hover, .toko-study .case-socials a:focus-visible { opacity: 1; text-decoration: none; transform: translateY(-1px); }
.toko-study .case-socials a:hover::after, .toko-study .case-socials a:focus-visible::after { transform: scaleX(1); }
.toko-study .study-why { background: var(--surface); padding-block: var(--study-space); }
.study-why__inner { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 64px; align-items: start; }
.study-why__photos { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: end; }
.study-why__photos img { width: 100%; object-fit: cover; border-radius: 8px; }
.study-why__photos img:first-child { aspect-ratio: 2/3; }
.study-why__photos img:last-child { aspect-ratio: 1; margin-bottom: 32px; }
.study-reasons { margin-top: 24px; }
.study-reasons > div { padding-block: 14px; border-top: 1px solid var(--black); }
.study-reasons dt { font-size: 16px; font-weight: 600; }
.study-reasons dd { font-size: 14px; line-height: 1.7; margin-top: 4px; max-width: 55ch; }
.study-conclusion { padding-block: var(--study-space); }
.study-conclusion .study-editorial { align-items: center; }
.toko-study .study-conclusion .section__title { font-size: clamp(38px,4.5vw,64px); max-width: 16ch; }
@media (max-width: 1100px) {
  .study-hero { column-gap: 32px; }
  .study-hero__visual { height: 480px; }
  .study-editorial, .study-why__inner { gap: 32px; }
  .study-principles { gap: 24px; }
  .study-why__photos { grid-template-columns: 1fr; max-width: 320px; }
  .study-why__photos img:first-child { max-height: 300px; }
  .study-why__photos img:last-child { max-height: 170px; margin: 0; }
}
@media (max-width: 760px) {
  .study-hero { grid-template-columns: 1fr; padding-top: 32px; gap: 28px; }
  .study-hero h1 { font-size: clamp(48px,12.5vw,76px); }
  .study-hero__intro { font-size: 16px; margin-top: 24px; }
  .study-hero__result { margin-top: 24px; gap: 16px; }
  .study-hero__result strong { font-size: clamp(44px,10vw,60px); }
  .study-hero__result .mono { font-size: 11px; }
  .study-hero__visual { height: 320px; }
  .study-meta { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .study-meta dd { font-size: 12px; }
  .study-editorial { grid-template-columns: 1fr; gap: 24px; }
  .study-prose { font-size: 15px; }
  .study-principles { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .study-principles li { display: grid; grid-template-columns: 24px minmax(0,1fr); gap: 0 16px; }
  .study-principles .mono { grid-row: 1/3; margin: 0; }
  .study-principles h3 { min-height: 0; margin-bottom: 12px; }
  .study-principles p { grid-column: 2; }
  .toko-study .case-formats { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
  .toko-study .case-format { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
  .toko-study .case-format__body { padding: 0; }
  .toko-study .case-format__title { font-size: 20px; overflow-wrap: normal; }
  .toko-study .case-format__text { font-size: 13px; line-height: 1.65; }
  .toko-study .case-stats { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
  .toko-study .stat { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; }
  .toko-study .stat__num { font-size: 48px; }
  .toko-study .stat__label { max-width: 14ch; font-size: 12px; }
  .campaign-results { margin-top: 28px; }
  .toko-study .case-socials { gap: 4px 20px; }
  .study-why__inner { grid-template-columns: 1fr; gap: 32px; }
  .study-why__photos { grid-template-columns: 1.2fr 1fr; max-width: none; }
  .study-why__photos img:first-child { max-height: none; }
  .study-why__photos img:last-child { max-height: none; margin-bottom: 24px; }
  .study-conclusion .study-editorial { gap: 24px; }
}
@media (max-width: 380px) {
  .toko-study .case-format { grid-template-columns: 1fr; }
  .toko-study .case-format .work-item__frame { width: 190px; margin-inline: auto; }
  .toko-study .case-format__body { max-width: 32ch; }
}

@media (max-width: 600px) {
  .campaign-results img { min-width: 600px; }
  .campaign-results__hint { display: inline; }
}