/* Studio: high-end agency deck. Paper, ink, hairlines, one accent; friendly emojis kept. Loaded after deck.css. */
@font-face { font-family: "NSSC"; src: url("../fonts/nssc-Regular.woff2") format("woff2"); font-weight: 300 400; font-display: swap; }
@font-face { font-family: "NSSC"; src: url("../fonts/nssc-Medium.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "NSSC"; src: url("../fonts/nssc-Bold.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }

:root {
  --bg: #f6f3ee; --card: #ffffff; --ink: #151412; --ink-2: #57524b; --ink-3: #9b958c; --line: #e3ddd3;
  --coral: #ff5a3c; --coral-soft: #f8ebe5; --mint: #e7f0ea; --mint-ink: #2f6a4b; --sun: #f6efdf; --sun-ink: #6d5216; --red-soft: #f5e7e3;
  --shadow: none;
  --pad: clamp(16px, 6vw, 104px);
  --sans: "Inter", "NSSC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}
body { font-family: var(--sans); background: var(--bg); color: var(--ink); font-size: 18px; font-weight: 400; letter-spacing: -.005em; }
html[data-lang="zh"] body { letter-spacing: .01em; }

/* top bar: quiet */
.top { top: 0; left: 0; right: 0; border-radius: 0; padding: 14px var(--pad); background: rgba(246, 243, 238, .82); box-shadow: none; border-bottom: 1px solid rgba(21, 20, 18, .06); }
.brand { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.btn { background: transparent; border: 1px solid var(--line); font-weight: 500; padding: 6px 12px; }
.lang { background: transparent; border: 1px solid var(--line); }
.lang button[aria-pressed="true"] { background: var(--ink); }

/* slide frame */
.s { padding: 108px var(--pad) 72px; }
.s .in { max-width: 1680px; }
.pg { font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--ink-3); right: var(--pad); bottom: 28px; }
.chip { background: none; box-shadow: none; padding: 0; border-radius: 0; font-size: 14px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 22px; gap: 8px; }
html[data-lang="zh"] .chip { letter-spacing: .2em; }
.chip::after { content: ""; width: 48px; height: 1px; background: currentColor; opacity: .4; margin-left: 10px; }
h2 { font-weight: 600; font-size: clamp(40px, 4.2vw, 78px); line-height: 1.04; letter-spacing: -.035em; max-width: 22ch; }
html[data-lang="zh"] h2 { font-weight: 700; line-height: 1.22; letter-spacing: .005em; max-width: 19em; font-size: clamp(36px, 3.7vw, 68px); }
h3 { font-weight: 600; letter-spacing: -.01em; }
.sub2 { color: var(--ink-2); font-size: 20px; }
.cap { color: var(--ink-3); font-size: 13px; }

/* surfaces: hairlines, no shadows */
.mc, .step, .sc, .pk, .svc, .ad, .quote, .lv, .gantt, .fact, .ret, .tile { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: none; }
.plan { background: var(--ink); color: #f6f3ee; border-radius: 14px; font-weight: 500; font-size: 18px; padding: 18px 24px; }
.verdict { color: var(--coral); font-weight: 600; font-size: 24px; letter-spacing: -.01em; }

/* cover + next: ink */
.hot { background: var(--ink); color: #f6f3ee; }
.hot .chip { color: #a39c92; background: none; }
.hot .pg { color: #6f6a62; }
.cover h1 { font-weight: 600; font-size: clamp(72px, 9vw, 168px); letter-spacing: -.05em; line-height: .98; max-width: 11ch; }
html[data-lang="zh"] .cover h1 { font-weight: 700; letter-spacing: .02em; line-height: 1.15; max-width: 9.5em; font-size: clamp(64px, 7.6vw, 140px); }
.cover .sub { font-weight: 400; color: #c9c2b8; opacity: 1; font-size: clamp(20px, 1.8vw, 28px); }
.pill { background: none; border: 1px solid #3d3a35; color: #e7e1d8; font-weight: 500; font-size: 15px; padding: 8px 14px; }
.cover-brand span { font-weight: 600; letter-spacing: .3em; font-size: clamp(28px, 2.6vw, 44px); color: #f6f3ee; }
.cover-brand i { color: #8d877e; letter-spacing: .4em; font-weight: 500; }
.cover-brand::before { content: ""; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--coral); margin: 0 0 18px auto; }
.stickers { display: none; }
.nb { background: none; border: 1px solid #3d3a35; border-radius: 14px; }
.nb b { font-weight: 600; letter-spacing: -.04em; color: #f6f3ee; }
.nb span { color: #a39c92; }
.hot .checks li { background: none; border: 0; border-top: 1px solid #3d3a35; border-radius: 0; color: #e7e1d8; padding: 16px 0; font-weight: 500; }
.thanks { font-weight: 500; color: #f6f3ee; font-size: 22px; }

/* one-liner */
.quote { padding: 34px 40px; }
.quote b { font-weight: 700; letter-spacing: -.02em; }
.answer { font-weight: 600; letter-spacing: -.02em; }
.pill.big { background: var(--card); border: 1px solid var(--line); color: var(--ink); box-shadow: none; font-weight: 500; }

/* lists */
.checks li { background: var(--card); border: 1px solid var(--line); box-shadow: none; border-radius: 12px; font-weight: 500; font-size: 18px; }
.checks li.warn { background: var(--sun); border-color: transparent; color: var(--sun-ink); }
.checks li.good { background: var(--mint); border-color: transparent; color: var(--mint-ink); }

/* images: bigger, no frames, thin gaps */
.photo, .shots img, .work img, .side img, .logo-slide img, .strip img, .bmi img, .wc img, .ph img { border-radius: 0; box-shadow: none; border: 0; }
.split { grid-template-columns: 1.35fr 1fr; gap: 40px; }
#today .photo { aspect-ratio: 4 / 3; }
.strip { gap: 4px; }
.strip img { border-radius: 0; }

/* real people */
.vs { gap: 4px; grid-template-columns: 1fr 1.6fr; }
.side { background: none; border-radius: 0; padding: 0; }
.side .lab { font-weight: 600; font-size: 16px; letter-spacing: .02em; }
.side.bad .lab { color: #b4412a; } .side.good .lab { color: var(--mint-ink); }
.side .g2, .side .g3 { gap: 4px; }
.side img { aspect-ratio: 3 / 4; }
.side figcaption { font-weight: 500; color: var(--ink-3); font-size: 13px; }
#real .plan { margin-top: 28px; }

/* money */
.mc > b { color: var(--ink); font-weight: 600; letter-spacing: -.045em; font-size: clamp(56px, 5vw, 96px); }
.mc .you { background: var(--bg); border-radius: 10px; font-weight: 500; }

/* benchmarks: editorial strips */
.bms { gap: 4px; }
.bm { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.bmi img { aspect-ratio: 4 / 3; }
.bmb { padding: 22px 24px 0 0; }
.bmh h3 { font-weight: 600; font-size: 24px; letter-spacing: -.02em; }
.bmh b { color: var(--coral); font-weight: 600; letter-spacing: -.03em; font-size: 30px; }
.bm p { font-size: 16px; }
.bm .mg { background: none; padding: 10px 0 0; margin-top: 10px; border-top: 1px solid var(--line); border-radius: 0; font-weight: 600; }

/* peers */
.shots { gap: 4px; }
.shots img { aspect-ratio: 4 / 3; }
.shots figcaption { font-weight: 500; color: var(--ink-3); font-size: 13px; }

/* how / safe */
.step .num { color: #ece6dd; font-weight: 700; }
.step .w { color: var(--coral); font-weight: 600; }
.sc p { font-weight: 500; }

/* diagnosis */
.pricebox { background: var(--ink); border-radius: 14px; }
.pricebox b { font-weight: 600; letter-spacing: -.045em; }

/* levers */
.lv { border-radius: 12px; }
.lv b { font-weight: 600; }
.lv .arrow { color: var(--coral); font-weight: 600; }

/* services + add-ons + packages */
.svh b, .adh b { color: var(--ink); font-weight: 600; }
.admoney { background: var(--mint); font-weight: 500; }
.pk.rec { outline: 0; border: 1.5px solid var(--ink); }
.badge { background: var(--ink); font-weight: 600; letter-spacing: .02em; }
.pr { font-weight: 600; letter-spacing: -.045em; color: var(--ink); }
.payb { font-weight: 600; background: var(--mint); }
.save { font-weight: 600; }

/* timeline */
.gt { height: 30px; }
.gb { top: 11px; bottom: 11px; border-radius: 999px; }
.gb.b { background: #d9cfc2; } .gb.c { background: var(--coral); }

/* our work: full-bleed bento */
.s.wk { padding: 0; align-items: stretch; }
.s.wk .in { max-width: none; width: 100%; min-height: 100vh; display: flex; flex-direction: column; }
.wk .in > .chip { margin-top: 104px; }
.wk .in > :not(.bento) { padding-left: var(--pad); padding-right: var(--pad); }
.wk h2 { font-size: clamp(32px, 3vw, 56px); max-width: 32ch; }
html[data-lang="zh"] .wk h2 { max-width: 26em; font-size: clamp(30px, 2.8vw, 52px); }
.wrow { margin-top: 16px; gap: 8px 18px; }
.wps { gap: 6px; }
.wp { display: inline-flex; align-items: center; background: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 8px; font-weight: 500; font-size: 15px; }
.wp .e { width: 1.5em; text-align: center; }
.wmg { margin: 0; font-weight: 600; font-size: 15px; color: var(--ink-2); }
.wk .bento { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); grid-auto-rows: unset; grid-auto-flow: dense; gap: 4px; margin-top: 28px; }
.wk .bento figure { position: relative; margin: 0; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; background: #e9e4dc; }
.wk .bento img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wk .pg { color: #fff; mix-blend-mode: difference; }
.c1r1 { grid-column: span 1; grid-row: span 1; } .c1r2 { grid-column: span 1; grid-row: span 2; }
.c2r1 { grid-column: span 2; grid-row: span 1; } .c2r2 { grid-column: span 2; grid-row: span 2; }
.c3r1 { grid-column: span 3; grid-row: span 1; } .c3r2 { grid-column: span 3; grid-row: span 2; }

/* logo wall: bleed right */
.logo-slide { gap: 56px; }
.logo-slide img { border-radius: 0; background: #121212; }

@media (max-width: 1000px) {
  .s { padding: 88px 16px 56px; }
  .s.wk { padding: 0; }
  .s.wk .in { min-height: 0; }
  .wk .in > .chip { margin-top: 88px; }
  .wk .in > :not(.bento) { padding-left: 16px; padding-right: 16px; }
  .wk .bento { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: 150px; }
  .c3r1, .c3r2, .c2r1, .c2r2 { grid-column: span 2; }
  .c3r2, .c2r2, .c1r2 { grid-row: span 2; }
  .split, .vs { grid-template-columns: 1fr; }
  .cover h1 { font-size: clamp(48px, 13vw, 84px); }
  html[data-lang="zh"] .cover h1 { font-size: clamp(44px, 12vw, 76px); }
  h2 { font-size: clamp(30px, 7.4vw, 44px); }
  html[data-lang="zh"] h2 { font-size: clamp(28px, 7vw, 40px); }
  .cover-brand::before { margin-left: 0; }
}

@media print {
  .s, .s.dense { height: 1078px !important; min-height: 0 !important; max-height: 1078px; overflow: hidden; break-after: page; break-inside: avoid; }
  .s.wk { height: 1078px !important; padding: 0 !important; }
  .s.wk .in { min-height: 0; height: 1078px; }
  .wk .in > .chip { margin-top: 88px; }
}
/* fit fixes */
.wk h2 { text-wrap: wrap; }
#today h2 { font-size: clamp(34px, 3.2vw, 58px); }
html[data-lang="zh"] #today h2 { font-size: clamp(32px, 3vw, 54px); max-width: 24em; }
#today .split { margin-top: 24px; align-items: start; }
#today .photo { aspect-ratio: 16 / 9; }
#today .strip img { aspect-ratio: 16 / 7; }
#today .checks li { padding: 10px 14px; }
#packages .pk ul { font-size: 13px; gap: 1px; }
#packages .pk { padding: 16px; }
#packages h2 { font-size: clamp(32px, 3vw, 54px); }
html[data-lang="en"] #today h2 { max-width: 34ch; }
.wk h2 { max-width: none; text-wrap: balance; }
html[data-lang="zh"] .wk h2 { max-width: none; }
/* logo wall bleeds to the right edge */
#work-3 { padding: 0 0 0 var(--pad); align-items: stretch; }
#work-3 .in { max-width: none; }
#work-3 .logo-slide { grid-template-columns: 1fr 1.15fr; gap: 64px; min-height: 100vh; }
#work-3 .logo-slide img { width: 100%; height: 100%; max-height: none; object-fit: contain; background: #121212; padding: 6vh 4vw; box-sizing: border-box; }
#work-3 .pg { color: #8d877e; }
@media (max-width: 1000px) {
  #work-3 { padding: 88px 0 0 0; }
  #work-3 .logo-slide { min-height: 0; gap: 20px; }
  #work-3 .logo-slide > div { padding: 0 16px; }
  #work-3 .logo-slide img { height: auto; padding: 16px; }
}
@media print { #work-3 .logo-slide { min-height: 1078px; height: 1078px; } }
@media (max-width: 1000px) {
  #work-3 .logo-slide { grid-template-columns: 1fr; }
  .ret { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .ret span { flex: none; }
}