/* ==========================================================================
   Case study
   The page stays in the Pingmuse system; the client's brand appears
   only where it is the subject: visuals, palette, type, mockups.
   ========================================================================== */
.p-head { padding-top: calc(var(--nav-h) + clamp(40px, 6vw, 80px)); padding-bottom: clamp(36px, 4vw, 56px); }
.p-back { display: flex; width: fit-content; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 40px; transition: color .25s; }
.p-back:hover { color: var(--ink); }
.arrow--back { width: 15px; height: 15px; transform: rotate(180deg); }
.p-head .h-display { margin: 16px 0 16px; }
.p-meta { margin: 48px 0 0; display: grid; grid-template-columns: 1.1fr .6fr 1fr 1.6fr; gap: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.p-meta dt { font-size: 13px; color: var(--faint); margin-bottom: 4px; }
.p-meta dd { margin: 0; color: var(--ink); font-size: 15px; }
@media (max-width: 760px) { .p-meta { grid-template-columns: 1fr 1fr; } }

.p-hero { aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; }
@media (max-width: 760px) { .p-hero { aspect-ratio: 4 / 3; } }

.p-sec { padding-block: clamp(72px, 9vw, 128px); }
.p-sec--soft { background: var(--soft); }
.p-sec__head { margin-bottom: clamp(32px, 4vw, 48px); max-width: 44em; }
.p-sec__head .h2 { margin-top: 14px; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.25; letter-spacing: -.025em; }

/* ---------- Overview ---------- */
.overview { display: grid; grid-template-columns: 1fr 3fr; gap: 32px; align-items: start; }
.overview > .label { margin-top: .55em; }
.overview__lead { margin: 0 0 48px; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.4; letter-spacing: -.025em; color: var(--ink); }
.overview__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.overview__cols p { margin: 10px 0 0; color: var(--muted); }
@media (max-width: 860px) { .overview, .overview__cols { grid-template-columns: 1fr; } }

.insight-wrap { padding-bottom: clamp(24px, 4vw, 48px); }
.insight { margin: 0; padding: clamp(32px, 5vw, 64px); border-radius: var(--r-lg); background: var(--soft); position: relative; }
.insight::before { content: ''; position: absolute; left: clamp(32px, 5vw, 64px); top: 0; width: 48px; height: 3px; background: var(--b1); border-radius: 0 0 3px 3px; }
.insight p { margin: 0; font-size: clamp(24px, 3vw, 40px); line-height: 1.25; letter-spacing: -.035em; font-weight: 500; color: var(--ink); max-width: 26em; }

/* ---------- Identity ---------- */
.mark { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.mark__main { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-lg); background: #fff; box-shadow: 0 0 0 1px var(--line); display: grid; place-items: center; overflow: hidden; }
.mark__logo { position: relative; z-index: 1; width: auto; max-width: 62%; max-height: 50%; transition: opacity .4s; }
.mark__grid { position: absolute; inset: 0; opacity: 0; transition: opacity .5s var(--ease);
  background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: calc(100% / 16) calc(100% / 10); background-position: -1px -1px; }
.mark__grid::after { content: ''; position: absolute; left: 50%; top: 50%; width: 52%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--b1) 55%, transparent); }
[data-grid="on"] .mark__grid { opacity: 1; }
[data-grid="on"] .mark__logo { opacity: .85; }
.mark__toggle { position: absolute; left: 16px; bottom: 16px; z-index: 2; height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; background: var(--soft); color: var(--ink); transition: background .2s; }
.mark__toggle:hover { background: var(--soft-2); }
.mark__vars { display: grid; gap: 16px; }
.mvar { border-radius: var(--r-lg); display: grid; place-items: center; padding: 12%; min-height: 160px; }
.mvar img, .mvar .wordmark { width: auto; max-width: 78%; max-height: 64px; }
.mvar .wordmark { color: #fff; font-size: 28px; }
@media (max-width: 860px) { .mark { grid-template-columns: 1fr; } .mark__vars { grid-template-columns: 1fr 1fr; } }

.rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rule { background: #fff; border-radius: var(--r); padding: 28px; box-shadow: 0 0 0 1px var(--line); display: grid; gap: 10px; }
.rule span { font-size: 14px; color: var(--faint); margin-bottom: 16px; }
.rule p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .rules { grid-template-columns: 1fr; } }

/* ---------- Palette ---------- */
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.swatches--3 { grid-template-columns: repeat(3, 1fr); }
.swatches--3 .swatch__chip { aspect-ratio: 16 / 9; }
.swatch { text-align: left; display: grid; gap: 4px; align-content: start; border-radius: var(--r); transition: transform .4s var(--ease); }
.swatch:hover { transform: translateY(-3px); }
.swatch__chip { aspect-ratio: 1 / 1.05; border-radius: var(--r); margin-bottom: 14px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); position: relative; }
.swatch.is-copied .swatch__chip::after { content: 'Copied'; position: absolute; left: 12px; top: 12px; font-size: 12px; background: #fff; color: var(--ink); padding: 4px 10px; border-radius: 999px; }
.swatch__name { font-weight: 500; color: var(--ink); }
.swatch__role { font-size: 14px; color: var(--muted); }
.swatch__code { font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .swatches { grid-template-columns: 1fr 1fr; } .swatch__chip { aspect-ratio: 16 / 10; } }

/* ---------- Typography ---------- */
.type { display: grid; grid-template-columns: 1fr 1.3fr; gap: 32px; align-items: center; background: #fff; border-radius: var(--r-lg); padding: clamp(28px, 4vw, 56px); box-shadow: 0 0 0 1px var(--line); }
.type__spec { font-family: var(--b-fd), var(--font); font-size: clamp(120px, 16vw, 220px); line-height: .9; letter-spacing: -.03em; color: var(--b1); font-weight: 600; }
.type__info { display: grid; gap: 18px; }
.type__row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.type__row span { font-size: 13px; color: var(--faint); }
.type__row strong { font-size: clamp(20px, 2vw, 26px); font-weight: 500; color: var(--ink); }
.type__abc { margin: 0; font-family: var(--b-fd), var(--font); font-size: 17px; line-height: 1.6; color: var(--ink); letter-spacing: .02em; word-break: break-all; }
.type__note { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 860px) { .type { grid-template-columns: 1fr; } }

/* ---------- Voice ---------- */
.voice { display: grid; gap: 24px; }
.voice__words { display: flex; flex-wrap: wrap; gap: 10px; }
.voice__words span { height: 48px; padding: 0 22px; display: inline-flex; align-items: center; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 18px; font-weight: 500; color: var(--ink); }
.voice__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vcard { background: #fff; border-radius: var(--r); padding: 28px; box-shadow: 0 0 0 1px var(--line); display: grid; gap: 10px; }
.vcard span { font-size: 13px; color: var(--faint); }
.vcard p { margin: 0; font-size: 20px; line-height: 1.4; color: var(--ink); letter-spacing: -.015em; }
.vcard--no p { color: var(--faint); text-decoration: line-through; text-decoration-thickness: 1px; }
@media (max-width: 760px) { .voice__cards { grid-template-columns: 1fr; } }

/* ---------- Gallery ---------- */
.gal { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 24px; }
.gal--3 { grid-template-columns: repeat(3, 1fr); }
.gal__item { margin: 0; display: grid; gap: 12px; align-content: start; }
.gal__item--full { grid-column: 1 / -1; }
.gal__pic { border-radius: var(--r); overflow: hidden; background: var(--soft); display: grid; place-items: center; }
.gal__pic img { width: 100%; }
.gal__art { aspect-ratio: 1; border-radius: var(--r); background: radial-gradient(90% 90% at 50% 25%, #fff, #EFEFEC 60%, #E4E4DF); display: grid; place-items: center; overflow: hidden; }
.gal__art img { width: 92%; }
.gal figcaption { font-size: 14px; color: var(--muted); }
.bframe { width: 100%; margin: 0 auto; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.bframe__bar { height: 34px; display: flex; align-items: center; gap: 6px; padding: 0 14px; background: #F4F4F2; border-bottom: 1px solid var(--line); }
.bframe__bar i { width: 10px; height: 10px; border-radius: 50%; background: #DCDCD8; }
.bframe img { width: 100%; }
.scrollshot { height: min(72vh, 680px); overflow: hidden; }
.scrollshot img { width: 100%; transition: transform 7s cubic-bezier(.45, 0, .55, 1); }
.scrollshot:hover img, .scrollshot.is-auto img { transform: translateY(calc(-100% + min(72vh, 680px))); }
@media (max-width: 760px) { .gal, .gal--3 { grid-template-columns: 1fr; } }

/* ---------- Results ---------- */
.results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.result { background: #fff; border-radius: var(--r); padding: 28px; box-shadow: 0 0 0 1px var(--line); display: grid; gap: 12px; align-content: space-between; min-height: 190px; }
.result b { font-size: clamp(36px, 4vw, 52px); font-weight: 500; letter-spacing: -.045em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.result span { color: var(--muted); font-size: 15px; max-width: 20em; }
.deliv { margin-top: 48px; display: flex; justify-content: space-between; align-items: end; gap: 32px; flex-wrap: wrap; }
.deliv .h3 { margin-bottom: 14px; }
.deliv__ctas { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 760px) { .results { grid-template-columns: 1fr; } .result { min-height: 0; } }

/* ---------- Next ---------- */
.next-wrap { padding-bottom: clamp(88px, 11vw, 140px); }
.next { display: grid; grid-template-columns: 1fr 1.2fr; border-radius: var(--r-lg); overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line); min-height: 320px; }
.next__text { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.next__text .h1 { margin-top: 14px; font-size: clamp(32px, 3.6vw, 48px); }
.next__media { margin: 8px 8px 8px 0; border-radius: calc(var(--r-lg) - 6px); overflow: hidden; min-height: 260px; }
.next__media .vis { transition: transform 1s var(--ease); }
.next:hover .next__media .vis { transform: scale(1.03); }
@media (max-width: 760px) { .next { grid-template-columns: 1fr; } .next__media { margin: 0 8px 8px; aspect-ratio: 4 / 3; } }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 130; opacity: 0; visibility: hidden; transform: translate(-50%, 12px); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px; transition: transform .45s var(--ease); }
.toast { transition: transform .45s var(--ease), opacity .3s, visibility .3s; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

/* ---------- Brand tint + chapter navigation ---------- */
.p-tint { position: absolute; inset: 0 0 auto 0; height: 760px; z-index: -1;
  background: radial-gradient(60% 70% at 85% 0%, color-mix(in srgb, var(--b1) 22%, transparent), transparent 70%),
              radial-gradient(50% 60% at 10% 10%, color-mix(in srgb, var(--b2) 16%, transparent), transparent 70%); }
.p-head .label::before { background: var(--b1); opacity: 1; }
.chapters { position: sticky; top: 12px; z-index: 30; display: flex; justify-content: center; margin: 28px 0 -16px; padding-inline: var(--gutter); pointer-events: none; transition: top .45s var(--ease); }
.nav:not(.is-hidden) ~ main .chapters { top: calc(var(--nav-h) + 8px); }
.chapters__track { pointer-events: auto; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 0 1px var(--line), 0 8px 24px -12px rgba(0, 0, 0, .14); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.chapters__track::-webkit-scrollbar { display: none; }
.chapters a { flex: none; height: 36px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 14px; color: var(--muted); transition: background .25s, color .25s; }
.chapters a:hover { color: var(--ink); }
.chapters a.is-active { background: var(--b1); color: var(--b-on1); }
.p-sec, #overview { scroll-margin-top: calc(var(--nav-h) + 72px); }
html { scroll-behavior: smooth; }
.gal__item--mobile { justify-items: center; align-content: center; background: var(--soft); border-radius: var(--r); padding: 32px 16px; }
.mframe { width: min(100%, 280px); border-radius: 36px; overflow: hidden; background: #111; padding: 9px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .35); }
.mframe img { width: 100%; border-radius: 28px; display: block; }
.gal__item--mobile figcaption { text-align: center; }

/* ---------- Logo (real files only) ---------- */
.logos { display: grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; }
.logos__main { grid-row: span 2; min-height: 360px; border-radius: var(--r-lg); background: #fff; box-shadow: 0 0 0 1px var(--line); display: grid; place-items: center; padding: 10%; }
.logos__tile { border-radius: var(--r-lg); display: grid; place-items: center; padding: 12%; min-height: 172px; box-shadow: 0 0 0 1px var(--line); }
.logos__img { width: auto; max-width: 78%; max-height: 120px; object-fit: contain; }
.logos__main .logos__img { max-height: 200px; max-width: 70%; }
@media (max-width: 760px) { .logos { grid-template-columns: 1fr; grid-template-rows: none; } .logos__main { grid-row: auto; min-height: 240px; } }

/* ---------- Blocks: what we built ---------- */
.blocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.blocks--3 { grid-template-columns: repeat(3, 1fr); }
.block { background: #fff; border-radius: var(--r); padding: 26px; box-shadow: 0 0 0 1px var(--line); display: grid; gap: 8px; align-content: start; }
.block__n { font-family: var(--mono); font-size: 12px; color: var(--b1); margin-bottom: 10px; }
.block p { margin: 0; color: var(--muted); font-size: 15px; }
@media (max-width: 860px) { .blocks, .blocks--3 { grid-template-columns: 1fr; } }