:root {
  --shell: 1440px;
  --ink: #0c0c0e;
  --paper: #f3f2ee;
  --hero: #dedfda;
  --night: #09090a;
  --surface: #141416;
  --line-dark: rgba(255, 255, 255, 0.14);
  --line-light: rgba(12, 12, 14, 0.14);
  --muted-dark: rgba(255, 255, 255, 0.58);
  --muted-light: rgba(12, 12, 14, 0.58);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--night);
  color: #fff;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html, body { max-width: 100%; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; }
.shell { width: min(var(--shell), calc(100% - 80px)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.eyebrow { margin: 0 0 18px; font-size: 12px; line-height: 1; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-dark); }

/* Hero */
.hero { height: 100svh; min-height: 720px; position: relative; overflow: hidden; background: var(--hero); color: var(--ink); }
.nav { height: 88px; position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(12, 12, 14, .1); }
.brand { font-size: 17px; letter-spacing: -.02em; }
.brand span { font-weight: 800; }
.nav-links { display: flex; align-items: center; gap: 64px; }
.nav-links a { position: relative; padding: 8px 0; font-size: 14px; font-weight: 550; letter-spacing: .04em; opacity: .48; transition: opacity .25s ease; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: currentColor; transition: right .25s ease; }
.nav-links a:hover, .nav-links a.active { opacity: 1; }
.nav-links a:hover::after, .nav-links a.active::after { right: 0; }
.menu-button { display: none; background: none; border: 0; padding: 8px; color: var(--ink); font-weight: 700; letter-spacing: .08em; }
.hero-copy { height: calc(100% - 88px); position: relative; z-index: 3; display: flex; align-items: center; pointer-events: none; }
.intro { width: min(38vw, 620px); transform: translateY(-10px); }
.hero-eyebrow { color: rgba(12, 12, 14, .5); }
.intro h1 { margin: 0; font-size: clamp(56px, 4.8vw, 84px); line-height: 1.06; letter-spacing: -.055em; font-weight: 750; }
.role { margin: 24px 0 18px; font-size: clamp(19px, 1.4vw, 27px); line-height: 1.45; letter-spacing: -.025em; }
.summary { max-width: 590px; margin: 0; font-size: clamp(16px, 1.2vw, 21px); line-height: 1.75; color: rgba(12, 12, 14, .62); }
.hero-actions { display: flex; gap: 12px; margin-top: 38px; pointer-events: auto; }
.button { min-width: 130px; height: 48px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: space-between; gap: 22px; border: 1px solid rgba(12, 12, 14, .22); border-radius: 100px; font-size: 14px; font-weight: 600; transition: transform .25s ease, background .25s ease, color .25s ease; }
.button:hover { transform: translateY(-2px); }
.button-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.button-ghost:hover { background: rgba(255,255,255,.35); }
.hero-video { position: absolute; right: -2vw; top: 0; width: 66vw; height: 100%; overflow: hidden; z-index: 1; background: var(--hero); }
.hero-video video,
.hero-video canvas,
.hero-video .hero-cutout-fallback { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; transform: translateX(13%) scale(1.25); transform-origin: right bottom; pointer-events: none; }
.hero-video video { opacity: 0; }
.hero-video .hero-cutout-fallback { position: absolute; inset: 0; z-index: 0; opacity: 1; transition: opacity .18s ease; }
.hero-video canvas { display: none; position: absolute; inset: 0; }
.hero-video.cutout-pending video { opacity: 0; }
.hero-video.has-cutout video { opacity: 0; }
.hero-video.has-cutout canvas { z-index: 1; display: block; }
.hero-video.has-cutout .hero-cutout-fallback { opacity: 0; }
.hero-video.has-frame-sequence .hero-cutout-fallback { opacity: 1; }
.hero-video.has-frame-sequence video,
.hero-video.has-frame-sequence canvas { display: none; }

/* Shared section headers */
.section-head { display: grid; grid-template-columns: 1fr minmax(280px, 470px); align-items: end; gap: 60px; margin-bottom: 64px; }
.section-head h2, .colleague h2 { margin: 0; font-size: clamp(44px, 4vw, 68px); line-height: 1.08; letter-spacing: -.055em; font-weight: 700; }
.section-intro { margin: 0; font-size: 17px; line-height: 1.75; color: var(--muted-dark); }

/* Work */
.work { padding: 136px 0 120px; background: var(--night); }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 72px; }
.project-card { min-width: 0; padding-bottom: 26px; border-bottom: 1px solid var(--line-dark); }
.cover { position: relative; aspect-ratio: 708 / 398; overflow: hidden; border-radius: 16px; background: #1c1c1f; }
.cover::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.08); border-radius: inherit; pointer-events: none; }
.cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .35s ease; }
.project-index { position: absolute; top: 16px; left: 16px; z-index: 2; min-width: 38px; height: 28px; padding: 0 10px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 100px; background: rgba(8,8,9,.55); backdrop-filter: blur(10px); color: #fff; font-size: 11px; letter-spacing: .08em; }
.project-copy { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-top: 24px; }
.project-card h3 { margin: 0 0 9px; font-size: clamp(22px, 1.65vw, 30px); line-height: 1.3; letter-spacing: -.025em; font-weight: 600; }
.project-card p { max-width: 600px; margin: 0; font-size: 15px; line-height: 1.65; color: var(--muted-dark); }
.project-arrow { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-dark); border-radius: 50%; color: rgba(255,255,255,.7); transition: transform .3s ease, color .3s ease, border-color .3s ease; }
.project-card:hover .cover img { transform: scale(1.035); filter: brightness(1.06); }
.project-card:hover .project-arrow { transform: translate(3px,-3px); color: #fff; border-color: rgba(255,255,255,.4); }
.view-more { width: max-content; margin: 78px auto 0; padding: 14px 22px; display: flex; align-items: center; gap: 18px; border: 1px solid var(--line-dark); border-radius: 100px; color: rgba(255,255,255,.74); font-size: 14px; transition: background .25s ease, color .25s ease; }
.view-more:hover { background: #fff; color: var(--ink); }

/* Experience timeline */
.experience { padding: 128px 0 148px; background: var(--hero); color: var(--ink); }
.section-head-light .eyebrow { color: var(--muted-light); }
.section-head-light .section-intro { color: var(--muted-light); }
.timeline { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 84px; }
.timeline::before { content: ""; position: absolute; left: 8%; right: 8%; top: 46px; height: 1px; background: rgba(12,12,14,.2); }
.milestone { position: relative; display: grid; grid-template-rows: 28px 38px auto; min-width: 0; }
.milestone time { display: block; font-size: 12px; line-height: 1; font-weight: 650; letter-spacing: .08em; color: rgba(12,12,14,.55); }
.timeline-node { align-self: center; width: 13px; height: 13px; margin-left: 14px; border: 3px solid var(--hero); border-radius: 50%; background: #76767a; box-shadow: 0 0 0 1px #76767a; z-index: 1; }
.timeline-node.is-current { width: 16px; height: 16px; margin-left: 12px; background: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 6px rgba(12,12,14,.08); }
.milestone-card { min-height: 176px; padding: 22px; display: flex; flex-direction: column; align-items: flex-start; border: 1px solid var(--line-light); border-radius: 16px; background: rgba(255,255,255,.55); transition: transform .3s ease, background .3s ease, box-shadow .3s ease; }
.milestone:nth-child(even) .milestone-card { transform: translateY(28px); }
.milestone:nth-child(even):hover .milestone-card { transform: translateY(23px); }
.milestone:nth-child(odd):hover .milestone-card { transform: translateY(-5px); }
.milestone-card:hover { background: #fff; box-shadow: 0 18px 45px rgba(12,12,14,.08); }
.step { margin-bottom: auto; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: rgba(12,12,14,.35); }
.milestone strong { display: block; font-size: 20px; line-height: 1.25; letter-spacing: -.02em; white-space: nowrap; }
.milestone small { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--muted-light); }
.milestone .eico { color: #428bc8; font-size: 24px; }
.milestone .tencent { color: #3159c2; font-size: 22px; font-style: italic; }
.milestone .aftership { color: #f05e42; }

/* Collaboration */
.colleague { padding: 140px 0; background: #101011; }
.colleague-grid { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 100px; }
.colleague-copy .eyebrow { margin-bottom: 28px; }
.trait-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 48px; }
.trait-list span { padding: 10px 16px; border: 1px solid var(--line-dark); border-radius: 100px; font-size: 13px; color: rgba(255,255,255,.68); }
.portrait-card { min-height: 360px; padding: 34px; display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 30px; border: 1px solid var(--line-dark); border-radius: 24px; background: #171719; }
.portrait-wrap { width: 190px; height: 190px; overflow: hidden; border-radius: 50%; background: #e85757; }
.portrait-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; transform: scale(1.2); }
.portrait-card strong { font-size: 22px; }
.portrait-card p { margin: 14px 0 0; font-size: 15px; line-height: 1.75; color: var(--muted-dark); }

/* Contact */
.contact { padding: 112px 0 28px; background: #070708; }
.contact-inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; }
.contact-copy .eyebrow { margin-bottom: 30px; }
.contact-title { display: block; font-size: clamp(56px, 7vw, 112px); line-height: .95; font-weight: 850; letter-spacing: -.065em; }
.contact-title span { display: inline-block; margin-left: 8px; font-size: .42em; vertical-align: top; transition: transform .25s ease; }
.contact-title:hover span { transform: translate(5px,-5px); }
.email { display: block; width: max-content; margin-top: 58px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.5); font-size: 21px; color: rgba(255,255,255,.76); }
.qr-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.qr { width: 190px; height: 190px; display: block; object-fit: cover; border-radius: 12px; }
.qr-wrap span { font-size: 11px; letter-spacing: .12em; color: rgba(255,255,255,.45); }
.footer-meta { margin-top: 90px; padding-top: 22px; display: flex; justify-content: space-between; border-top: 1px solid var(--line-dark); font-size: 10px; letter-spacing: .13em; color: rgba(255,255,255,.36); }

/* Standalone page navigation */
.page-header { background: var(--night); }
.page-header-dark .nav { color: #fff; border-bottom-color: var(--line-dark); }
.page-header-dark .menu-button { color: #fff; }

/* About page */
.about-page { --about-bg: #c8c8d0; background: var(--paper); color: var(--ink); }
.about-hero { min-height: 820px; position: relative; overflow: hidden; background: var(--about-bg); color: var(--ink); }
.about-hero-inner { min-height: 732px; position: relative; z-index: 2; display: flex; align-items: center; }
.about-lead { width: min(45vw, 650px); padding-bottom: 10px; }
.about-lead h1 { margin: 0; font-size: clamp(58px, 5vw, 88px); line-height: 1.04; letter-spacing: -.06em; font-weight: 760; }
.about-summary { max-width: 620px; margin-top: 34px; }
.about-summary p { margin: 0 0 9px; font-size: clamp(16px, 1.15vw, 20px); line-height: 1.75; color: rgba(12,12,14,.66); }
.about-visual { position: absolute; z-index: 1; top: 88px; right: -2vw; bottom: 0; width: 64vw; overflow: hidden; background: var(--about-bg); pointer-events: none; }
.about-visual img,
.about-visual video,
.about-visual canvas { width: 100%; height: 100%; display: block; object-fit: contain; object-position: right bottom; transform: translateX(13%) scale(1.25); transform-origin: right bottom; }
.about-visual video { opacity: 0; pointer-events: none; }
.about-visual .hero-cutout-fallback { position: absolute; inset: 0; z-index: 0; opacity: 1; transition: opacity .18s ease; }
.about-visual canvas { display: none; position: absolute; inset: 0; pointer-events: none; }
.about-visual.cutout-pending video { opacity: 0; }
.about-visual.has-cutout video { opacity: 0; }
.about-visual.has-cutout canvas { z-index: 1; display: block; }
.about-visual.has-cutout .hero-cutout-fallback { opacity: 0; }
.about-visual.has-frame-sequence .hero-cutout-fallback { opacity: 1; }
.about-visual.has-frame-sequence video,
.about-visual.has-frame-sequence canvas { display: none; }
.about-content { background: var(--paper); color: var(--ink); }
.about-section { padding: 126px 0; border-top: 1px solid var(--line-light); }
.about-section-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 92px; align-items: start; }
.about-section-label h2, .profile-card h2 { margin: 0; font-size: clamp(42px, 3.5vw, 60px); line-height: 1.08; letter-spacing: -.05em; }
.about-section-label .eyebrow, .profile-card .eyebrow { color: var(--muted-light); }
.about-sticky-title { position: sticky; top: 42px; }
.label-note { margin: 28px 0 0; font-size: 15px; line-height: 1.75; color: var(--muted-light); }
.capability-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.capability-card { min-height: 310px; padding: 26px; display: flex; flex-direction: column; border: 1px solid var(--line-light); border-radius: 20px; background: rgba(255,255,255,.52); transition: transform .3s ease, background .3s ease, box-shadow .3s ease; }
.capability-card:hover { transform: translateY(-5px); background: #fff; box-shadow: 0 24px 50px rgba(12,12,14,.07); }
.capability-card > span { margin-bottom: auto; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: rgba(12,12,14,.36); }
.capability-card h3 { margin: 42px 0 14px; font-size: 25px; line-height: 1.25; letter-spacing: -.03em; }
.capability-card p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--muted-light); }

.resume-list { border-top: 1px solid var(--line-light); }
.resume-item { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 38px; padding: 56px 0 70px; border-bottom: 1px solid var(--line-light); }
.resume-meta { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; gap: 10px; }
.resume-meta time { font-size: 14px; font-weight: 700; letter-spacing: .03em; }
.resume-meta span { font-size: 10px; font-weight: 700; letter-spacing: .14em; color: rgba(12,12,14,.36); }
.resume-heading { grid-column: 2; display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px 18px; }
.resume-heading h3 { margin: 0; font-size: clamp(30px, 2.4vw, 42px); line-height: 1.1; letter-spacing: -.04em; }
.resume-heading p { margin: 0; font-size: 17px; color: var(--muted-light); }
.resume-projects { grid-column: 2; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; margin-top: 42px; }
.resume-projects div { min-width: 0; padding-top: 20px; border-top: 1px solid var(--line-light); }
.resume-projects strong, .resume-projects span { display: block; }
.resume-projects strong { font-size: 16px; line-height: 1.45; }
.resume-projects span { margin-top: 7px; font-size: 11px; letter-spacing: .04em; color: rgba(12,12,14,.4); }
.resume-projects p { margin: 15px 0 0; font-size: 13px; line-height: 1.75; color: var(--muted-light); }
.background-section { padding-top: 0; border-top: 0; }
.profile-cards { display: grid; grid-template-columns: .9fr 1.1fr; gap: 20px; }
.profile-card { min-height: 440px; padding: 40px; border: 1px solid var(--line-light); border-radius: 24px; background: rgba(255,255,255,.52); }
.education-card { display: flex; flex-direction: column; }
.profile-card-content { margin-top: auto; }
.profile-card-content strong { display: block; font-size: 28px; }
.profile-card-content p { margin: 10px 0 26px; font-size: 16px; color: var(--muted-light); }
.profile-card-content span { display: inline-flex; padding: 9px 13px; border: 1px solid var(--line-light); border-radius: 100px; font-size: 12px; }
.tools-card { background: var(--ink); color: #fff; border-color: var(--ink); }
.tools-card .eyebrow { color: var(--muted-dark); }
.tool-group { margin-top: 46px; display: grid; grid-template-columns: 82px 1fr; gap: 6px 16px; }
.tool-group + .tool-group { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line-dark); }
.tool-group strong { grid-row: 1 / span 3; font-size: 11px; letter-spacing: .14em; color: rgba(255,255,255,.48); }
.tool-group p, .tool-group span { margin: 0; font-size: 14px; line-height: 1.65; }
.tool-group span { color: var(--muted-dark); }
.toolkit-layout { min-width: 0; }
.toolkit-card { min-height: 390px; padding: 42px; border-radius: 24px; background: var(--ink); color: #fff; }
.toolkit-intro { padding-bottom: 34px; display: grid; grid-template-columns: 120px 1fr; gap: 24px; border-bottom: 1px solid var(--line-dark); }
.toolkit-intro span { padding-top: 4px; font-size: 9px; font-weight: 700; letter-spacing: .14em; color: rgba(255,255,255,.4); }
.toolkit-intro p { max-width: 610px; margin: 0; font-size: 18px; line-height: 1.65; letter-spacing: -.015em; color: rgba(255,255,255,.74); }
.education-note { margin-top: 14px; padding: 20px 4px; display: grid; grid-template-columns: 180px 1fr auto; align-items: center; gap: 24px; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.education-note > span { font-size: 9px; font-weight: 700; letter-spacing: .13em; color: rgba(12,12,14,.38); }
.education-note p { margin: 0; font-size: 14px; color: rgba(12,12,14,.62); }
.education-note p strong { color: var(--ink); }
.education-note small { font-size: 11px; color: rgba(12,12,14,.42); }
.product-tool-grid { grid-column: 2; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px; list-style: none; }
.product-tool-grid li { width: 58px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.product-tool-grid li > span:last-child { max-width: 64px; overflow: hidden; font-size: 10px; line-height: 1.2; text-align: center; text-overflow: ellipsis; white-space: nowrap; color: rgba(255,255,255,.6); }
.product-icon { width: 48px; height: 48px; display: grid; place-items: center; overflow: hidden; border-radius: 13px; background: #262629; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.product-icon img { width: 24px; height: 24px; display: block; filter: invert(1); }
.product-icon-glyph { font-size: 16px !important; line-height: 1 !important; font-weight: 760; letter-spacing: -.04em; color: #fff !important; }
.icon-cursor { background: #202124; }
.icon-claude { background: #d97757; }
.icon-chatgpt { background: #10a37f; }
.icon-codex { background: #36363a; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.icon-dream { background: linear-gradient(145deg, #6b5cff, #a546e8); }
.icon-lovart { background: linear-gradient(145deg, #ff6b88, #d947b6); }
.icon-figma { background: #6246d9; }
.icon-spline { background: linear-gradient(145deg, #1769ff, #7437ff); font-size: 20px !important; font-style: italic; }
.icon-adobe { background: #e43b3b; }

/* Work directory page */
.work-page { background: var(--night); color: #fff; }
.work-directory { padding: 92px 0 154px; background: var(--night); }
.work-directory-head { display: grid; grid-template-columns: 1fr minmax(360px, 520px); align-items: end; gap: 80px; margin-bottom: 92px; }
.work-directory-head h1 { margin: 0; font-size: clamp(58px, 6vw, 96px); line-height: .98; letter-spacing: -.06em; }
.directory-summary > p { margin: 0; font-size: 17px; line-height: 1.75; color: var(--muted-dark); }
.work-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.work-tags span { padding: 8px 12px; border: 1px solid var(--line-dark); border-radius: 100px; font-size: 10px; letter-spacing: .1em; color: rgba(255,255,255,.62); }
.directory-grid { row-gap: 78px; }
.work-page .project-card h2 { margin: 0 0 9px; font-size: clamp(24px, 1.7vw, 31px); line-height: 1.3; letter-spacing: -.025em; font-weight: 600; }
.work-page .project-card p { font-size: 16px; }
.more-project { grid-column: auto; }
.page-contact { border-top: 1px solid var(--line-dark); }

/* Annual report case study */
.project-link { display: block; }
.case-page { --case-red: #e1251b; --case-cream: #f2efe8; background: #0a0a0b; color: #fff; }
.case-header { min-height: 100svh; overflow: hidden; background: #0a0a0b; }
.case-header .nav { color: #fff; border-bottom-color: var(--line-dark); }
.case-header .menu-button { color: #fff; }
.case-hero { min-height: calc(100svh - 88px); padding: clamp(60px, 8vh, 110px) 0 72px; display: grid; grid-template-columns: minmax(330px, .76fr) minmax(520px, 1.24fr); align-items: center; gap: clamp(48px, 6vw, 110px); }
.case-hero-copy { position: relative; z-index: 2; }
.case-kicker { margin-bottom: 48px; display: flex; gap: 18px; font-size: 10px; font-weight: 700; letter-spacing: .16em; color: rgba(255,255,255,.48); }
.case-kicker span + span { padding-left: 18px; border-left: 1px solid var(--line-dark); }
.case-hero h1 { margin: 0; font-size: clamp(62px, 6vw, 110px); line-height: .94; letter-spacing: -.075em; font-weight: 780; }
.case-hero-copy > p { max-width: 560px; margin: 42px 0 0; font-size: clamp(16px, 1.15vw, 20px); line-height: 1.8; color: rgba(255,255,255,.64); }
.case-scroll { width: max-content; margin-top: 56px; display: flex; align-items: center; gap: 22px; font-size: 10px; font-weight: 700; letter-spacing: .15em; color: rgba(255,255,255,.48); }
.case-scroll span { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line-dark); border-radius: 50%; font-size: 13px; transition: transform .25s ease, color .25s ease; }
.case-scroll:hover span { transform: translateY(3px); color: #fff; }
.case-hero-cover { position: relative; margin: 0; aspect-ratio: 708 / 398; overflow: hidden; border-radius: 3px; background: #1a1a1c; }
.case-hero-cover::before { content: ""; position: absolute; z-index: 2; inset: 0; border: 1px solid rgba(255,255,255,.12); pointer-events: none; }
.case-hero-cover img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.025); }
.case-hero-cover > video { width: 100%; height: 100%; display: block; object-fit: cover; }
.case-hero-cover figcaption { position: absolute; z-index: 3; right: 18px; bottom: 16px; padding: 8px 10px; background: rgba(5,5,6,.72); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.case-overview { padding: 142px 0 154px; display: grid; grid-template-columns: minmax(280px, .78fr) 1.22fr; gap: clamp(60px, 8vw, 140px); border-bottom: 1px solid var(--line-dark); }
.case-section-label h2 { margin: 0; font-size: clamp(48px, 4.2vw, 72px); line-height: 1.03; letter-spacing: -.055em; }
.case-lead { max-width: 850px; margin: 0; font-size: clamp(25px, 2.2vw, 39px); line-height: 1.55; letter-spacing: -.035em; }
.case-facts { margin: 80px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 60px; }
.case-facts div { padding-top: 17px; border-top: 1px solid var(--line-dark); }
.case-facts dt { margin-bottom: 10px; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: rgba(255,255,255,.38); }
.case-facts dd { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.74); }
.case-art-section { padding-top: 152px; padding-bottom: 160px; }
.case-art-section-muted { width: 100%; background: #111113; }
.case-art-section-muted > .shell { padding-top: 152px; padding-bottom: 160px; }
.case-section-head { margin-bottom: 72px; display: grid; grid-template-columns: 1fr 1.45fr; align-items: start; gap: 80px; }
.case-section-head > p { margin: 8px 0 0; font-size: 10px; font-weight: 700; letter-spacing: .15em; color: rgba(255,255,255,.38); }
.case-section-head > div { display: grid; grid-template-columns: 46px 1fr; gap: 18px; }
.case-section-head span { padding-top: 9px; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--case-red); }
.case-section-head h2 { margin: 0; font-size: clamp(48px, 5vw, 82px); line-height: 1.02; letter-spacing: -.06em; font-weight: 720; }
.case-section-note { max-width: 780px; margin: -28px 0 72px auto; font-size: 17px; line-height: 1.8; color: rgba(255,255,255,.55); }
.case-artboard { margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: #111113; }
.case-artboard img { width: 100%; height: auto; display: block; }
.case-artboard-tight { border: 0; }
.case-artboard-spaced { margin-top: 28px; }
.case-red-section { padding: 154px 0 166px; background: var(--case-red); }
.case-section-head-light > p, .case-section-head-light span { color: rgba(255,255,255,.65); }
.case-principles { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-bottom: 84px; border-top: 1px solid rgba(255,255,255,.34); border-bottom: 1px solid rgba(255,255,255,.34); }
.case-principles article { min-height: 300px; padding: 28px 34px 36px; border-right: 1px solid rgba(255,255,255,.34); }
.case-principles article:first-child { padding-left: 0; }
.case-principles article:last-child { padding-right: 0; border-right: 0; }
.case-principles span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: rgba(255,255,255,.68); }
.case-principles h3 { margin: 94px 0 16px; font-size: clamp(27px, 2vw, 35px); line-height: 1.2; letter-spacing: -.035em; }
.case-principles p { margin: 0; font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.72); }
.case-video-frame { min-width: 0; overflow: hidden; background: #09090a; border: 1px solid rgba(255,255,255,.12); }
.case-video-feature { max-width: 1120px; margin-inline: auto; }
.case-video { width: 100%; height: auto; display: block; background: #09090a; }
.case-media-caption { min-height: 72px; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid rgba(255,255,255,.12); }
.case-media-caption span { font-size: 9px; font-weight: 700; letter-spacing: .14em; color: rgba(255,255,255,.38); }
.case-media-caption p { margin: 0; font-size: 13px; color: rgba(255,255,255,.72); }
.case-experiment-intro { max-width: 960px; margin: -30px 0 80px auto; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 60px; }
.case-experiment-intro p { margin: 0; font-size: 17px; line-height: 1.8; color: rgba(255,255,255,.55); }
.case-experiment-intro div { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.case-experiment-intro span { padding: 8px 10px; border: 1px solid var(--line-dark); border-radius: 100px; font-size: 9px; letter-spacing: .1em; color: rgba(255,255,255,.55); }
.case-motion-section { padding: 154px 0 166px; background: #25262a; }
.case-artboard-light { border-color: rgba(255,255,255,.16); background: #f0f0f2; }
.case-video-grid { max-width: 940px; margin: 28px auto 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; align-items: start; }
.case-video-grid .case-video { aspect-ratio: 750 / 1624; object-fit: contain; }
.case-share-video { max-width: 1120px; margin: 28px auto 0; }
.case-music-section { padding: 150px 0; background: var(--case-red); }
.case-music-grid { display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; gap: clamp(60px, 8vw, 150px); }
.case-music-copy h2 { margin: 0; font-size: clamp(58px, 6vw, 102px); line-height: .95; letter-spacing: -.065em; }
.case-music-copy > p:not(.eyebrow) { max-width: 480px; margin: 34px 0 0; font-size: 16px; line-height: 1.85; color: rgba(255,255,255,.72); }
.music-bars { height: 74px; margin-top: 56px; display: flex; align-items: flex-end; gap: 7px; }
.music-bars i { width: 4px; display: block; background: rgba(255,255,255,.8); animation: music-wave 1.45s ease-in-out infinite alternate; }
.music-bars i:nth-child(1), .music-bars i:nth-child(8) { height: 18px; }
.music-bars i:nth-child(2), .music-bars i:nth-child(6) { height: 42px; animation-delay: -.8s; }
.music-bars i:nth-child(3), .music-bars i:nth-child(7) { height: 30px; animation-delay: -.25s; }
.music-bars i:nth-child(4) { height: 68px; animation-delay: -.55s; }
.music-bars i:nth-child(5) { height: 52px; animation-delay: -1.05s; }
@keyframes music-wave { from { transform: scaleY(.38); transform-origin: bottom; opacity: .45; } to { transform: scaleY(1); transform-origin: bottom; opacity: 1; } }
.case-audio-visual { min-height: 430px; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255,255,255,.38); background: rgba(115,0,0,.12); }
.case-audio-meta, .case-audio-track { display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 9px; font-weight: 700; letter-spacing: .14em; color: rgba(255,255,255,.62); }
.case-audio-track { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.32); }
.case-audio-track strong { color: #fff; }
.case-soundwave { height: 180px; display: flex; align-items: center; justify-content: center; gap: clamp(4px, .75vw, 11px); }
.case-soundwave i { width: clamp(3px, .35vw, 5px); height: 82%; display: block; background: #fff; animation: music-wave 1.35s ease-in-out infinite alternate; }
.case-soundwave i:nth-child(3n) { height: 48%; animation-delay: -.32s; }
.case-soundwave i:nth-child(4n) { height: 24%; animation-delay: -.72s; }
.case-soundwave i:nth-child(5n) { height: 64%; animation-delay: -1.05s; }
.case-soundwave i:nth-child(7n) { height: 94%; animation-delay: -.18s; }
.case-result-section { padding-top: 156px; padding-bottom: 164px; }
.case-next { padding: 34px 0 120px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-dark); }
.case-next a { min-height: 120px; padding: 26px 0; display: flex; flex-direction: column; justify-content: space-between; transition: color .25s ease; }
.case-next a + a { padding-left: 40px; align-items: flex-end; border-left: 1px solid var(--line-dark); text-align: right; }
.case-next span { font-size: 9px; font-weight: 700; letter-spacing: .14em; color: rgba(255,255,255,.38); }
.case-next strong { font-size: clamp(22px, 2vw, 32px); letter-spacing: -.03em; }
.case-next a:hover { color: #ff473e; }

/* Commerce belt governance case */
.belt-page { --case-red: #ff2a21; --belt-red: #ff241b; --belt-panel: #151517; background: #080809; }
.belt-page .case-header { background: #080809; }
.belt-page .case-hero h1 { font-size: clamp(60px, 5.7vw, 102px); }
.belt-hero-cover { border-radius: 20px; }
.belt-hero-cover img { transform: none; }
.belt-section { padding-top: 150px; padding-bottom: 158px; }
.belt-background { border-top: 1px solid var(--line-dark); }
.belt-problem-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.belt-problem-grid article { aspect-ratio: 1; padding: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; text-align: center; background: #101012; transition: transform .3s ease, border-color .3s ease; }
.belt-problem-grid article:hover { transform: translateY(-5px); border-color: rgba(255,42,33,.75); }
.belt-problem-grid span { margin-bottom: auto; align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--belt-red); }
.belt-problem-grid h3 { margin: auto 0 12px; font-size: clamp(20px, 1.7vw, 28px); letter-spacing: -.03em; }
.belt-problem-grid p { max-width: 210px; margin: 0 auto auto; font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.52); }
.belt-slide-card { margin: 72px 0 0; overflow: hidden; border: 1px solid rgba(255,255,255,.16); background: #f5f5f4; }
.belt-slide-card img { width: 100%; height: auto; display: block; }
.belt-slide-card-dark { background: #101012; }
.belt-model-section { background: #151517; }
.belt-model { display: grid; grid-template-columns: repeat(4, minmax(0,1fr) 30px) minmax(0,1fr); align-items: center; gap: 14px; }
.belt-model > div { aspect-ratio: 1; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: #0c0c0d; text-align: center; }
.belt-model > div:nth-of-type(4) { border-color: var(--belt-red); background: var(--belt-red); }
.belt-model small { margin-bottom: auto; align-self: flex-start; font-size: 9px; letter-spacing: .1em; color: rgba(255,255,255,.38); }
.belt-model strong { font-size: clamp(17px, 1.5vw, 24px); letter-spacing: -.02em; }
.belt-model span { margin-top: 8px; font-size: 11px; color: rgba(255,255,255,.46); }
.belt-model i { color: rgba(255,255,255,.32); font-size: 17px; font-style: normal; text-align: center; }
.belt-structure-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
.belt-structure-card { padding: 28px; border: 1px solid var(--line-dark); background: #111113; }
.belt-card-meta { margin-bottom: 28px; display: flex; justify-content: space-between; gap: 20px; font-size: 9px; font-weight: 700; letter-spacing: .12em; color: rgba(255,255,255,.4); }
.belt-live-demo { min-height: 192px; padding: 25px 22px; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(125px, .7fr); align-items: center; gap: 26px; background: #ef332e; color: #fff; }
.belt-live-demo > div:first-child { min-width: 0; }
.belt-live-demo > div:last-child { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.5); text-align: center; }
.belt-live-demo strong { font-size: clamp(30px, 3vw, 48px); line-height: .95; letter-spacing: -.05em; }
.belt-live-demo strong em { margin-right: 4px; font-size: .5em; font-style: normal; }
.belt-live-demo strong sup { font-size: .52em; }
.belt-live-demo b { margin-left: 8px; padding: 6px 8px; border-radius: 6px; background: rgba(255,255,255,.2); font-size: 14px; }
.belt-live-demo del { margin-left: 8px; opacity: .6; }
.belt-live-demo p { margin: 11px 0 0; font-size: 15px; font-weight: 650; }
.belt-live-demo > div:last-child strong { display: block; font-size: 25px; line-height: 1.1; letter-spacing: -.02em; }
.belt-live-demo > div:last-child span { display: block; margin-top: 8px; font-size: 13px; }
.belt-benefit { padding: 7px 8px; background: rgba(120,0,0,.22); }
.belt-structure-card dl { margin: 28px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.belt-structure-card dl div { padding-top: 14px; border-top: 1px solid var(--line-dark); }
.belt-structure-card dt { font-size: 9px; font-weight: 700; letter-spacing: .1em; color: var(--belt-red); }
.belt-structure-card dd { margin: 7px 0 0; font-size: 12px; color: rgba(255,255,255,.55); }
.belt-color-section { background: #151517; }
.belt-color-layout { display: grid; grid-template-columns: .68fr 1.32fr; gap: 80px; align-items: start; }
.belt-color-copy > p { max-width: 420px; margin: 0; font-size: 18px; line-height: 1.8; color: rgba(255,255,255,.62); }
.belt-color-axis { height: 8px; margin-top: 68px; position: relative; border: 1px solid rgba(255,255,255,.2); }
.belt-color-axis span { position: absolute; left: 0; top: -1px; width: 42%; height: 8px; background: var(--belt-red); }
.belt-color-labels { margin-top: 14px; display: flex; justify-content: space-between; gap: 8px; font-size: 9px; letter-spacing: .08em; color: rgba(255,255,255,.36); }
.belt-swatches { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.belt-swatches article { min-height: 190px; padding: 20px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.12); background: #0d0d0f; }
.belt-swatches article::before { content: ""; height: 58px; margin: -20px -20px 22px; display: block; background: var(--swatch); }
.belt-swatches span { font-size: 13px; font-weight: 650; }
.belt-swatches strong { margin-top: 8px; font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: rgba(255,255,255,.46); }
.belt-swatches small { margin-top: auto; font-size: 11px; color: rgba(255,255,255,.38); }
.belt-component-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center; }
.belt-component-grid figure { margin: 0; padding: 34px; border: 1px solid var(--line-dark); background: #111113; }
.belt-component-grid figure img { width: 100%; height: auto; display: block; }
.belt-component-grid figcaption, .belt-tool-showcase figcaption, .belt-tool-full figcaption { margin-top: 20px; font-size: 9px; font-weight: 700; letter-spacing: .12em; color: rgba(255,255,255,.4); }
.belt-component-list { border-top: 1px solid var(--line-dark); }
.belt-component-list article { padding: 30px 0; display: grid; grid-template-columns: 42px 1fr; gap: 18px; border-bottom: 1px solid var(--line-dark); }
.belt-component-list article > span { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--belt-red); }
.belt-component-list h3 { margin: 0 0 9px; font-size: 22px; letter-spacing: -.025em; }
.belt-component-list p { margin: 0; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.5); }
.belt-ai-section { padding: 154px 0 166px; background: #0b111b; }
.belt-ai-intro { max-width: 980px; margin: -30px 0 74px auto; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 48px; }
.belt-ai-intro p { margin: 0; font-size: 17px; line-height: 1.8; color: rgba(255,255,255,.58); }
.belt-ai-intro div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.belt-ai-intro span { padding: 8px 10px; border: 1px solid rgba(111,154,226,.35); border-radius: 100px; font-size: 9px; letter-spacing: .08em; color: rgba(185,208,247,.7); }
.belt-tool-showcase { display: grid; grid-template-columns: 1fr 320px; gap: 28px; align-items: stretch; }
.belt-tool-showcase figure, .belt-tool-full { margin: 0; padding: 22px; border: 1px solid rgba(126,158,214,.25); background: #070b12; }
.belt-tool-showcase img { width: 100%; height: 100%; max-height: 760px; display: block; object-fit: contain; object-position: center top; }
.belt-tool-mobile img { max-width: 276px; margin-inline: auto; }
.belt-tool-full { margin-top: 28px; }
.belt-tool-full img { width: 100%; height: auto; display: block; }
.belt-sop { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.belt-sop article { min-height: 260px; padding: 28px 24px 32px; border-right: 1px solid var(--line-dark); }
.belt-sop article:last-child { border-right: 0; }
.belt-sop span { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--belt-red); }
.belt-sop h3 { margin: 76px 0 14px; font-size: 22px; letter-spacing: -.03em; }
.belt-sop p { margin: 0; font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.5); }
.belt-closing-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
.belt-closing-grid .belt-slide-card { margin: 0; }
.belt-impact { padding: 150px 0; background: var(--belt-red); }
.belt-impact-inner { display: grid; grid-template-columns: .6fr 1.2fr .8fr; align-items: end; gap: 60px; }
.belt-impact .eyebrow { align-self: start; color: rgba(255,255,255,.65); }
.belt-impact h2 { margin: 0; font-size: clamp(56px, 5.8vw, 96px); line-height: .98; letter-spacing: -.065em; }
.belt-impact p:last-child { margin: 0; font-size: 15px; line-height: 1.8; color: rgba(255,255,255,.72); }

/* Double 11 real-time dashboard case */
.double11-page { --case-red: #9a5cff; --d11-blue: #2779ff; --d11-purple: #8b36ff; --d11-pink: #ff2b9f; background: #070709; }
.double11-page .case-header { background: #070709; }
.double11-page .case-hero h1 { font-size: clamp(62px, 6vw, 108px); }
.d11-hero-cover { border-radius: 20px; box-shadow: 0 26px 90px rgba(75,36,196,.2); }
.d11-hero-cover img { transform: none; }
.d11-hero-cover video { object-position: center center; }
.double11-page .d11-figma-header {
  min-height: 0;
  background: #000;
}
.d11-figma-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 1920 / 986;
  overflow: hidden;
  background: #000;
}
.d11-figma-hero > video {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.d11-figma-title {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  pointer-events: none;
}
.d11-figma-title img {
  position: absolute;
  left: 50%;
  display: block;
  max-width: none;
  height: auto;
  object-fit: contain;
  transform: translateX(-50%);
}
.d11-figma-title .d11-figma-eyebrow {
  top: 28%;
  width: 6.93%;
}
.d11-figma-title .d11-figma-lockup {
  top: 35.7%;
  width: 57.84%;
}
@media (max-width: 800px) {
  .d11-figma-hero {
    min-height: 620px;
    height: 76svh;
    aspect-ratio: auto;
  }
  .d11-figma-hero > video { object-fit: cover; }
  .d11-figma-title .d11-figma-eyebrow {
    top: 30%;
    width: 12%;
  }
  .d11-figma-title .d11-figma-lockup {
    top: 37%;
    width: 88%;
  }
}
.d11-section { padding-top: 150px; padding-bottom: 158px; }
.d11-highlights { border-top: 1px solid var(--line-dark); }
.d11-highlight-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.d11-highlight-grid article { min-height: 360px; padding: 30px 34px 34px; display: flex; flex-direction: column; border-right: 1px solid var(--line-dark); }
.d11-highlight-grid article:last-child { border-right: 0; }
.d11-highlight-grid article > span { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--d11-pink); }
.d11-highlight-grid h3 { margin: 80px 0 14px; font-size: clamp(24px, 2vw, 34px); letter-spacing: -.035em; }
.d11-highlight-grid p { max-width: 340px; margin: 0; font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.5); }
.d11-highlight-grid strong { margin-top: auto; font-size: clamp(42px, 4vw, 68px); line-height: 1; letter-spacing: -.055em; color: #b784ff; }
.d11-highlight-grid small { margin-top: 8px; font-size: 10px; letter-spacing: .1em; color: rgba(255,255,255,.35); }
.d11-visual-section { background: #0d0717; }
.d11-visual-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
.d11-visual-grid figure, .d11-screen-grid figure, .d11-broadcast-grid figure { margin: 0; overflow: hidden; border: 1px solid rgba(132,84,255,.22); background: #09090d; }
.d11-visual-grid img, .d11-screen-grid img, .d11-broadcast-grid img { width: 100%; height: auto; display: block; }
.d11-visual-grid figcaption { min-height: 118px; padding: 22px; display: grid; grid-template-columns: 32px 1fr; gap: 6px 12px; border-top: 1px solid rgba(132,84,255,.22); }
.d11-visual-grid figcaption span { grid-row: 1 / span 2; font-size: 10px; font-weight: 700; color: var(--d11-pink); }
.d11-visual-grid figcaption strong { font-size: 18px; }
.d11-visual-grid figcaption small { font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.45); }
.d11-feature-video { max-width: 1180px; margin: 0 auto; border-color: rgba(132,84,255,.28); box-shadow: 0 30px 90px rgba(43,18,100,.22); }
.d11-screen-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
.d11-screen-grid figcaption { padding: 16px 18px; border-top: 1px solid rgba(132,84,255,.22); font-size: 11px; letter-spacing: .08em; color: rgba(255,255,255,.5); }
.d11-city-section { background: #140a25; }
.d11-city-layout { display: grid; grid-template-columns: .58fr 1.42fr; gap: 72px; align-items: center; }
.d11-city-copy > p { margin: 0; font-size: 18px; line-height: 1.85; color: rgba(255,255,255,.6); }
.d11-city-tags { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 8px; }
.d11-city-tags span { padding: 9px 12px; border: 1px solid rgba(170,125,255,.3); border-radius: 100px; font-size: 10px; letter-spacing: .05em; color: rgba(215,194,255,.7); }
.d11-city-video { border-color: rgba(170,125,255,.3); background: #05050a; }
.d11-province-section { background: #000; }
.d11-province-intro {
  max-width: 760px;
  margin: -28px 0 64px auto;
  font-size: 17px;
  line-height: 1.8;
  color: rgba(255,255,255,.58);
}
.d11-province-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 54px 24px;
}
.d11-province-grid figure { min-width: 0; margin: 0; }
.d11-province-grid img {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  object-fit: contain;
  object-position: center;
  background: #000;
}
.d11-province-grid figcaption {
  margin-top: 12px;
  color: rgba(255,255,255,.82);
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
}
@media (max-width: 1100px) {
  .d11-province-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .d11-province-intro { margin: -18px 0 42px; font-size: 14px; }
  .d11-province-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 16px; }
  .d11-province-grid figcaption { margin-top: 9px; font-size: 13px; }
}
.d11-workflow { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.d11-workflow article { min-height: 270px; padding: 28px 22px 32px; border-right: 1px solid var(--line-dark); }
.d11-workflow article:last-child { border-right: 0; }
.d11-workflow span { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: #a96fff; }
.d11-workflow h3 { margin: 76px 0 14px; font-size: 21px; letter-spacing: -.025em; }
.d11-workflow p { margin: 0; font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.48); }
.d11-ai-video { max-width: 1120px; margin: 56px auto 0; }
.d11-impact-section { background: #111113; }
.d11-impact-copy { max-width: 980px; margin: -28px 0 70px auto; display: grid; grid-template-columns: 1.2fr .8fr; gap: 70px; }
.d11-impact-copy > p { margin: 0; font-size: 18px; line-height: 1.85; color: rgba(255,255,255,.62); }
.d11-impact-copy ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); }
.d11-impact-copy li { padding: 12px 0; border-bottom: 1px solid var(--line-dark); font-size: 12px; color: rgba(255,255,255,.48); }
.d11-broadcast-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.d11-broadcast-grid figure { border-color: rgba(255,255,255,.14); }
.d11-result-section { padding-top: 154px; padding-bottom: 164px; }
.d11-result-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.d11-result-grid article { min-height: 220px; padding: 28px 22px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line-dark); }
.d11-result-grid article:last-child { border-right: 0; }
.d11-result-grid strong { font-size: clamp(45px, 4.5vw, 74px); line-height: 1; letter-spacing: -.065em; color: #a96fff; }
.d11-result-grid strong small { margin-left: 3px; font-size: .34em; }
.d11-result-grid span { font-size: 12px; color: rgba(255,255,255,.48); }

@media (max-width: 1100px) {
  .shell { width: min(900px, calc(100% - 64px)); }
  .hero-video { right: -3vw; width: 66vw; }
  .intro { width: 36vw; }
  .intro h1 { font-size: 52px; }
  .role { font-size: 19px; }
  .summary { font-size: 15px; line-height: 1.65; }
  .hero-actions { margin-top: 28px; }
  .project-grid { row-gap: 56px; }
  .timeline { gap: 8px; }
  .milestone-card { min-height: 164px; padding: 18px 14px; }
  .milestone strong { font-size: 16px; }
  .milestone .eico, .milestone .tencent { font-size: 19px; }
  .milestone small { font-size: 11px; }
  .colleague-grid { gap: 40px; }
  .portrait-card { grid-template-columns: 140px 1fr; min-height: 290px; padding: 26px; }
  .portrait-wrap { width: 140px; height: 140px; }
  .about-visual { width: 63vw; }
  .about-lead { width: 42vw; }
  .about-summary p { font-size: 15px; }
  .about-section-grid { grid-template-columns: 220px minmax(0, 1fr); gap: 48px; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card { min-height: 210px; }
  .resume-projects { grid-template-columns: 1fr; }
  .case-hero { grid-template-columns: .75fr 1.25fr; gap: 48px; }
  .case-hero h1 { font-size: 66px; }
  .case-overview { grid-template-columns: 220px 1fr; gap: 64px; }
  .case-section-head { grid-template-columns: .7fr 1.3fr; }
  .case-principles article { padding-inline: 24px; }
  .case-music-grid { gap: 60px; }
}

@media (max-width: 800px) {
  .shell { width: calc(100% - 40px); }
  .hero { min-height: 760px; }
  .nav { height: 68px; }
  .menu-button { display: block; }
  .nav-links { display: none; position: absolute; top: 58px; right: 0; padding: 20px; flex-direction: column; align-items: flex-end; gap: 16px; border: 1px solid rgba(12,12,14,.12); border-radius: 14px; background: rgba(238,238,241,.92); backdrop-filter: blur(16px); }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: 12px; }
  .hero-copy { height: auto; padding-top: 74px; display: block; }
  .intro { width: 100%; transform: none; }
  .hero-eyebrow { margin-bottom: 14px; font-size: 10px; }
  .intro h1 { font-size: 44px; }
  .role { margin: 14px 0 12px; font-size: 17px; }
  .summary { max-width: 92%; font-size: 14px; }
  .hero-actions { margin-top: 22px; }
  .button { min-width: 112px; height: 42px; padding: 0 16px; font-size: 12px; }
  .hero-video { right: 0; top: auto; bottom: 0; width: 100%; height: 43%; }
  .hero-video video,
  .hero-video canvas,
  .hero-video .hero-cutout-fallback { object-position: center bottom; transform: scale(1.08); transform-origin: center bottom; }
  .work, .experience, .colleague { padding: 88px 0; }
  .section-head { display: block; margin-bottom: 44px; }
  .section-head h2, .colleague h2 { font-size: 42px; }
  .section-intro { max-width: 500px; margin-top: 24px; font-size: 15px; }
  .project-grid { grid-template-columns: 1fr; row-gap: 48px; }
  .cover { border-radius: 12px; }
  .project-copy { padding-top: 18px; }
  .project-card h3 { font-size: 22px; }
  .project-arrow { width: 36px; height: 36px; }
  .view-more { margin-top: 54px; }
  .timeline { display: flex; flex-direction: column; gap: 28px; margin-top: 54px; padding-left: 34px; }
  .timeline::before { left: 7px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .milestone { display: block; }
  .milestone time { margin-bottom: 10px; }
  .timeline-node, .timeline-node.is-current { position: absolute; top: 1px; left: -34px; width: 15px; height: 15px; margin: 0; }
  .milestone-card, .milestone:nth-child(even) .milestone-card { min-height: 142px; padding: 20px; transform: none; }
  .milestone:nth-child(even):hover .milestone-card, .milestone:nth-child(odd):hover .milestone-card { transform: none; }
  .milestone strong { font-size: 20px; }
  .milestone .eico, .milestone .tencent { font-size: 22px; }
  .milestone small { font-size: 13px; }
  .colleague-grid { grid-template-columns: 1fr; gap: 52px; }
  .portrait-card { grid-template-columns: 120px 1fr; min-height: 0; padding: 22px; border-radius: 18px; }
  .portrait-wrap { width: 120px; height: 120px; }
  .contact { padding-top: 88px; }
  .contact-inner { align-items: flex-end; gap: 30px; }
  .contact-title { font-size: 46px; }
  .email { margin-top: 42px; font-size: 15px; }
  .qr { width: 110px; height: 110px; }
  .footer-meta { margin-top: 64px; }
  .page-header-dark .nav-links { background: rgba(20,20,22,.96); border-color: var(--line-dark); }
  .about-hero { min-height: 920px; }
  .about-hero-inner { min-height: 852px; padding-top: 64px; display: block; }
  .about-lead { width: 100%; }
  .about-lead h1 { font-size: 52px; }
  .about-summary { max-width: 620px; margin-top: 24px; }
  .about-summary p { max-width: 92%; font-size: 14px; }
  .about-visual { top: auto; right: 0; bottom: 0; width: 100%; height: 42%; }
  .about-visual img,
  .about-visual video,
  .about-visual canvas { object-position: center bottom; transform: scale(1.08); transform-origin: center bottom; }
  .about-section { padding: 88px 0; }
  .about-section-grid { display: block; }
  .about-section-label { margin-bottom: 44px; }
  .about-sticky-title { position: static; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability-card { min-height: 220px; }
  .resume-item { grid-template-columns: 1fr; padding: 42px 0 52px; }
  .resume-meta, .resume-heading, .resume-projects { grid-column: 1; grid-row: auto; }
  .resume-heading { margin-top: 24px; }
  .resume-projects { grid-template-columns: 1fr; margin-top: 32px; }
  .profile-cards { grid-template-columns: 1fr; }
  .profile-card { min-height: 390px; padding: 30px; }
  .toolkit-card { min-height: 0; padding: 32px; }
  .education-note { grid-template-columns: 1fr auto; }
  .education-note > span { grid-column: 1 / -1; }
  .work-directory { padding: 70px 0 100px; }
  .work-directory-head { display: block; margin-bottom: 58px; }
  .directory-summary { margin-top: 30px; }
  .directory-summary > p { max-width: 580px; font-size: 15px; }
  .work-page .project-card h2 { font-size: 23px; }
  .more-project { grid-column: auto; }
  .case-header { min-height: auto; }
  .case-header .nav-links { background: rgba(20,20,22,.96); border-color: var(--line-dark); }
  .case-hero { min-height: auto; padding: 72px 0 88px; display: flex; flex-direction: column; align-items: stretch; gap: 64px; }
  .case-kicker { margin-bottom: 32px; }
  .case-hero h1 { font-size: clamp(55px, 15vw, 82px); }
  .case-hero-copy > p { max-width: 630px; margin-top: 30px; font-size: 15px; }
  .case-scroll { margin-top: 36px; }
  .case-hero-cover { width: 100%; }
  .case-overview { padding: 92px 0; display: block; }
  .case-overview-content { margin-top: 54px; }
  .case-lead { font-size: 25px; }
  .case-facts { margin-top: 56px; gap: 28px 20px; }
  .case-art-section { padding-top: 94px; padding-bottom: 96px; }
  .case-art-section-muted > .shell { padding-top: 94px; padding-bottom: 96px; }
  .case-section-head { margin-bottom: 52px; display: block; }
  .case-section-head > p { margin: 0 0 24px; }
  .case-section-head > div { grid-template-columns: 34px 1fr; gap: 10px; }
  .case-section-head h2 { font-size: clamp(44px, 11vw, 64px); }
  .case-section-note { margin: -14px 0 46px 44px; font-size: 15px; }
  .case-red-section, .case-motion-section { padding: 96px 0; }
  .case-principles { grid-template-columns: 1fr; margin-bottom: 54px; }
  .case-principles article, .case-principles article:first-child, .case-principles article:last-child { min-height: 0; padding: 28px 0 34px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.34); }
  .case-principles article:last-child { border-bottom: 0; }
  .case-principles h3 { margin: 42px 0 14px; }
  .case-experiment-intro { margin: -14px 0 50px 44px; display: block; }
  .case-experiment-intro p { font-size: 15px; }
  .case-experiment-intro div { margin-top: 24px; justify-content: flex-start; }
  .case-video-grid { grid-template-columns: 1fr; gap: 22px; }
  .case-music-section { padding: 96px 0; }
  .case-music-grid { grid-template-columns: 1fr; gap: 58px; }
  .music-bars { margin-top: 34px; }
  .case-result-section { padding-top: 96px; padding-bottom: 102px; }
  .case-next { padding-bottom: 82px; }
}

@media (max-width: 520px) {
  .hero { height: 100svh; min-height: 720px; }
  .summary { max-width: 100%; }
  .hero-video { height: 40%; }
  .project-arrow { display: none; }
  .portrait-card { grid-template-columns: 1fr; }
  .portrait-wrap { width: 104px; height: 104px; }
  .contact-inner { align-items: flex-start; }
  .contact-copy .eyebrow { max-width: 200px; line-height: 1.5; }
  .contact-title { font-size: 38px; }
  .qr { width: 88px; height: 88px; }
  .qr-wrap span { display: none; }
  .about-hero { min-height: 880px; }
  .about-lead h1 { font-size: 46px; }
  .about-summary p { max-width: 100%; }
  .about-visual { height: 36%; }
  .about-section-label h2, .profile-card h2 { font-size: 40px; }
  .capability-card { min-height: 230px; }
  .resume-heading h3 { width: 100%; font-size: 32px; }
  .resume-heading p { font-size: 15px; line-height: 1.5; }
  .profile-card { min-height: 360px; padding: 24px; }
  .toolkit-card { padding: 24px; border-radius: 18px; }
  .toolkit-intro { grid-template-columns: 1fr; gap: 14px; }
  .toolkit-intro p { font-size: 16px; }
  .education-note { grid-template-columns: 1fr; gap: 8px; }
  .tool-group { grid-template-columns: 1fr; }
  .tool-group strong { grid-row: auto; margin-bottom: 5px; }
  .product-tool-grid { grid-column: 1; gap: 14px; }
  .work-directory-head h1 { font-size: 54px; }
  .case-hero { padding-top: 54px; gap: 50px; }
  .case-hero h1 { font-size: 52px; }
  .case-hero-copy > p { font-size: 14px; line-height: 1.7; }
  .case-kicker { gap: 12px; }
  .case-kicker span + span { padding-left: 12px; }
  .case-overview { padding: 76px 0; }
  .case-section-label h2 { font-size: 43px; }
  .case-overview-content { margin-top: 40px; }
  .case-lead { font-size: 21px; }
  .case-facts { grid-template-columns: 1fr; }
  .case-art-section, .case-art-section-muted > .shell, .case-red-section, .case-motion-section, .case-music-section { padding-top: 76px; padding-bottom: 78px; }
  .case-section-head h2 { font-size: 42px; }
  .case-section-note, .case-experiment-intro { margin-left: 0; }
  .case-media-caption { min-height: 62px; padding: 14px 16px; }
  .case-media-caption p { font-size: 11px; }
  .case-media-caption span { font-size: 8px; }
  .case-music-copy h2 { font-size: 58px; }
  .case-next { grid-template-columns: 1fr; }
  .case-next a + a { padding-left: 0; align-items: flex-start; border-left: 0; border-top: 1px solid var(--line-dark); text-align: left; }
}

@media (max-width: 1100px) {
  .belt-problem-grid { grid-template-columns: repeat(2, minmax(0,1fr)); max-width: 760px; margin-inline: auto; }
  .belt-model { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
  .belt-model i { display: none; }
  .belt-model > div { padding: 18px; }
  .belt-live-demo { grid-template-columns: 1fr 120px; gap: 16px; padding-inline: 16px; }
  .belt-live-demo > div:last-child { padding-left: 14px; }
  .belt-tool-showcase { grid-template-columns: 1fr 260px; }
  .belt-sop article { padding-inline: 17px; }
  .belt-impact-inner { grid-template-columns: .4fr 1fr .7fr; gap: 36px; }
}

@media (max-width: 800px) {
  .belt-section, .belt-ai-section { padding-top: 96px; padding-bottom: 98px; }
  .belt-problem-grid { gap: 16px; }
  .belt-slide-card { margin-top: 48px; }
  .belt-model { grid-template-columns: 1fr; }
  .belt-model > div { min-height: 154px; aspect-ratio: auto; border-radius: 18px; }
  .belt-structure-grid { grid-template-columns: 1fr; }
  .belt-color-layout { grid-template-columns: 1fr; gap: 54px; }
  .belt-color-copy > p { max-width: 620px; }
  .belt-color-axis { margin-top: 38px; }
  .belt-component-grid { grid-template-columns: 1fr; gap: 36px; }
  .belt-ai-intro { margin: -14px 0 48px 44px; display: block; }
  .belt-ai-intro div { margin-top: 24px; justify-content: flex-start; }
  .belt-tool-showcase { grid-template-columns: 1fr; }
  .belt-tool-mobile img { max-width: 360px; }
  .belt-sop { grid-template-columns: 1fr; }
  .belt-sop article { min-height: 0; padding: 28px 0 32px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .belt-sop article:last-child { border-bottom: 0; }
  .belt-sop h3 { margin-top: 36px; }
  .belt-closing-grid { grid-template-columns: 1fr; }
  .belt-impact { padding: 96px 0; }
  .belt-impact-inner { grid-template-columns: 1fr; align-items: start; gap: 34px; }
  .belt-impact p:last-child { max-width: 580px; }
}

@media (max-width: 520px) {
  .belt-page .case-hero h1 { font-size: 50px; }
  .belt-section, .belt-ai-section { padding-top: 76px; padding-bottom: 78px; }
  .belt-problem-grid { grid-template-columns: 1fr; }
  .belt-problem-grid article { min-height: 220px; aspect-ratio: auto; align-items: flex-start; border-radius: 22px; text-align: left; }
  .belt-problem-grid h3 { margin: auto 0 12px; }
  .belt-problem-grid p { max-width: none; margin: 0; }
  .belt-structure-card { padding: 16px; }
  .belt-live-demo { min-height: 0; grid-template-columns: 1fr; gap: 20px; }
  .belt-live-demo > div:last-child { padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,.5); border-left: 0; }
  .belt-live-demo strong { font-size: 38px; }
  .belt-live-demo p { font-size: 13px; }
  .belt-structure-card dl { gap: 7px; }
  .belt-structure-card dd { font-size: 10px; }
  .belt-swatches { grid-template-columns: 1fr; }
  .belt-component-grid figure { padding: 16px; }
  .belt-ai-intro { margin-left: 0; }
  .belt-tool-showcase figure, .belt-tool-full { padding: 10px; }
  .belt-impact h2 { font-size: 51px; }
}

@media (max-width: 1100px) {
  .d11-highlight-grid article { padding-inline: 24px; }
  .d11-city-layout { grid-template-columns: .5fr 1.5fr; gap: 42px; }
  .d11-workflow article { padding-inline: 16px; }
  .d11-workflow h3 { font-size: 18px; }
  .d11-result-grid article { padding-inline: 16px; }
}

@media (max-width: 800px) {
  .d11-section, .d11-result-section { padding-top: 96px; padding-bottom: 98px; }
  .d11-highlight-grid { grid-template-columns: 1fr; }
  .d11-highlight-grid article { min-height: 270px; padding: 28px 0 32px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .d11-highlight-grid article:last-child { border-bottom: 0; }
  .d11-highlight-grid h3 { margin-top: 42px; }
  .d11-visual-grid { gap: 18px; }
  .d11-screen-grid { grid-template-columns: 1fr; gap: 18px; }
  .d11-city-layout { grid-template-columns: 1fr; gap: 48px; }
  .d11-city-copy > p { max-width: 630px; }
  .d11-city-tags { margin-top: 30px; }
  .d11-workflow { grid-template-columns: 1fr; }
  .d11-workflow article { min-height: 0; padding: 28px 0 32px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .d11-workflow article:last-child { border-bottom: 0; }
  .d11-workflow h3 { margin-top: 34px; font-size: 21px; }
  .d11-impact-copy { margin: -14px 0 50px 44px; grid-template-columns: 1fr; gap: 34px; }
  .d11-result-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .d11-result-grid article { border-bottom: 1px solid var(--line-dark); }
  .d11-result-grid article:nth-child(2n) { border-right: 0; }
}

@media (max-width: 520px) {
  .double11-page .case-hero h1 { font-size: 52px; }
  .d11-section, .d11-result-section { padding-top: 76px; padding-bottom: 78px; }
  .d11-visual-grid { grid-template-columns: 1fr; }
  .d11-impact-copy { margin-left: 0; }
  .d11-broadcast-grid { grid-template-columns: 1fr; }
  .d11-result-grid { grid-template-columns: 1fr; }
  .d11-result-grid article, .d11-result-grid article:nth-child(2n) { min-height: 180px; border-right: 0; }
}

/* Alight AI lamp case study */
.lamp-page {
  --case-red: #ff623f;
  --lamp-green: #20a77f;
  --lamp-blue: #1b69ae;
  --lamp-orange: #ca4b16;
  background: #080a09;
}
.lamp-page .case-header { background: #07100e; }
.lamp-hero { grid-template-columns: minmax(330px, .68fr) minmax(560px, 1.32fr); }
.lamp-page .case-hero h1 { font-size: clamp(62px, 6vw, 104px); }
.lamp-hero-cover {
  aspect-ratio: 1920 / 1112;
  border: 1px solid rgba(68, 183, 151, .28);
  border-radius: 18px;
  background: #07100e;
}
.lamp-hero-cover img { object-fit: contain; transform: none; }
.lamp-hero-cover figcaption { background: rgba(3, 12, 10, .86); color: rgba(255,255,255,.72); }
.lamp-section { padding-top: 152px; padding-bottom: 160px; }
.lamp-section + .lamp-section { border-top: 1px solid var(--line-dark); }
.lamp-teacher-section { background: #181a19; }
.lamp-interface-section { background: #0d211c; }
.lamp-principles {
  margin-bottom: 72px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.lamp-principles article {
  min-height: 270px;
  padding: 28px 30px 34px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--line-dark);
}
.lamp-principles article:first-child { padding-left: 0; }
.lamp-principles article:last-child { padding-right: 0; border-right: 0; }
.lamp-principles span { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--case-red); }
.lamp-principles h3 { margin: auto 0 15px; font-size: clamp(25px, 2vw, 34px); letter-spacing: -.035em; }
.lamp-principles p { max-width: 350px; margin: 0; font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.5); }
.lamp-wide-board { margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: #000; }
.lamp-wide-board img { width: 100%; height: auto; display: block; }
.lamp-board-muted { background: #191a1a; }
.lamp-wide-board figcaption {
  min-height: 72px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.lamp-wide-board figcaption span { font-size: 9px; font-weight: 700; letter-spacing: .14em; color: var(--lamp-green); }
.lamp-wide-board figcaption p { margin: 0; font-size: 13px; color: rgba(255,255,255,.62); }
.lamp-interface-section .case-section-head span { color: #7ee0be; }
.lamp-interface-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.lamp-interface-grid figure { margin: 0; overflow: hidden; border: 1px solid rgba(111, 225, 188, .2); background: #071410; }
.lamp-interface-grid img { width: 100%; height: auto; display: block; }
.lamp-interface-grid figcaption { padding: 17px 19px; border-top: 1px solid rgba(111, 225, 188, .18); font-size: 11px; line-height: 1.6; letter-spacing: .04em; color: rgba(255,255,255,.56); }
.lamp-interface-feature { grid-column: 1 / -1; }
.lamp-solution-copy {
  max-width: 1060px;
  margin: -24px 0 70px auto;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 74px;
  align-items: start;
}
.lamp-solution-copy > p { margin: 0; font-size: 18px; line-height: 1.85; color: rgba(255,255,255,.6); }
.lamp-solution-copy ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); }
.lamp-solution-copy li { padding: 15px 0; display: grid; grid-template-columns: 96px 1fr; gap: 20px; border-bottom: 1px solid var(--line-dark); }
.lamp-solution-copy strong { font-size: 12px; color: #64d5ae; }
.lamp-solution-copy span { font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.46); }
.lamp-solution-board { background: #191a1a; }
.lamp-result-section { padding-top: 152px; padding-bottom: 164px; border-top: 1px solid var(--line-dark); }
.lamp-result-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.lamp-result-grid article { min-height: 230px; padding: 28px 24px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line-dark); }
.lamp-result-grid article:last-child { border-right: 0; }
.lamp-result-grid strong { font-size: clamp(46px, 5vw, 78px); line-height: 1; letter-spacing: -.06em; color: #61d7ae; }
.lamp-result-grid strong small { margin-left: 2px; font-size: .38em; }
.lamp-result-grid span { font-size: 12px; color: rgba(255,255,255,.48); }

@media (max-width: 1100px) {
  .lamp-hero { grid-template-columns: .65fr 1.35fr; gap: 42px; }
  .lamp-principles article { padding-inline: 22px; }
}

@media (max-width: 800px) {
  .lamp-hero { display: flex; }
  .lamp-section, .lamp-result-section { padding-top: 96px; padding-bottom: 98px; }
  .lamp-principles { grid-template-columns: 1fr; }
  .lamp-principles article, .lamp-principles article:first-child, .lamp-principles article:last-child { min-height: 0; padding: 28px 0 34px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .lamp-principles article:last-child { border-bottom: 0; }
  .lamp-principles h3 { margin-top: 42px; }
  .lamp-interface-grid { gap: 16px; }
  .lamp-solution-copy { margin: -12px 0 52px 44px; grid-template-columns: 1fr; gap: 34px; }
  .lamp-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lamp-result-grid article { border-bottom: 1px solid var(--line-dark); }
  .lamp-result-grid article:nth-child(2n) { border-right: 0; }
}

@media (max-width: 520px) {
  .lamp-page .case-hero h1 { font-size: 50px; }
  .lamp-section, .lamp-result-section { padding-top: 76px; padding-bottom: 78px; }
  .lamp-wide-board { overflow-x: auto; overscroll-behavior-inline: contain; }
  .lamp-system-section .lamp-wide-board img, .lamp-teacher-section .lamp-wide-board img, .lamp-catalog-board img { width: 820px; max-width: none; }
  .lamp-wide-board figcaption { position: sticky; left: 0; width: calc(100vw - 40px); }
  .lamp-interface-grid { grid-template-columns: 1fr; }
  .lamp-interface-feature { grid-column: auto; }
  .lamp-solution-copy { margin-left: 0; }
  .lamp-solution-copy li { grid-template-columns: 84px 1fr; gap: 14px; }
  .lamp-result-grid { grid-template-columns: 1fr; }
  .lamp-result-grid article, .lamp-result-grid article:nth-child(2n) { min-height: 170px; border-right: 0; }
}

/* Product Detail Brain case study */
.brain-page {
  --case-red: #a976ff;
  --brain-blue: #5d8fff;
  --brain-purple: #a976ff;
  --brain-pink: #ee71bf;
  --brain-teal: #55d7c7;
  background: #08090c;
}
.brain-page .case-header { background: #090a10; }
.brain-hero { grid-template-columns: minmax(330px, .7fr) minmax(560px, 1.3fr); }
.brain-page .case-hero h1 { font-size: clamp(68px, 6.5vw, 112px); }
.brain-hero-cover { aspect-ratio: 708 / 398; border: 1px solid rgba(104, 143, 255, .24); border-radius: 16px; }
.brain-hero-cover img { transform: none; }
.brain-hero-cover figcaption { background: rgba(7, 9, 16, .86); }
.brain-hero-actions { margin-top: 54px; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.brain-hero-actions .case-scroll { margin-top: 0; }
.brain-live-link {
  min-height: 46px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 24px;
  border: 1px solid rgba(168, 118, 255, .48);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(255,255,255,.82);
  transition: background-color .25s ease, border-color .25s ease;
}
.brain-live-link:hover { background: #272035; border-color: #a976ff; }
.brain-section { padding-top: 152px; padding-bottom: 160px; }
.brain-section + .brain-section { border-top: 1px solid var(--line-dark); }
.brain-demo-video { max-width: 1240px; margin-inline: auto; border-color: rgba(104,143,255,.28); background: #080b12; }
.brain-problem-section { background: #111217; }
.brain-problem-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.brain-problem-grid article { min-height: 310px; padding: 28px 26px 34px; display: flex; flex-direction: column; border-right: 1px solid var(--line-dark); }
.brain-problem-grid article:first-child { padding-left: 0; }
.brain-problem-grid article:last-child { padding-right: 0; border-right: 0; }
.brain-problem-grid span { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: #7fa3ff; }
.brain-problem-grid h3 { margin: auto 0 16px; font-size: clamp(23px, 1.8vw, 31px); letter-spacing: -.035em; }
.brain-problem-grid p { margin: 0; font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.48); }
.brain-architecture-board { margin: 0; overflow: hidden; border: 1px solid rgba(168,118,255,.24); background: #09080e; }
.brain-architecture-board img { width: 100%; height: auto; display: block; }
.brain-architecture-board figcaption, .brain-audit-board figcaption {
  min-height: 72px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.brain-architecture-board figcaption span, .brain-audit-board figcaption span { font-size: 9px; font-weight: 700; letter-spacing: .13em; color: #a976ff; }
.brain-architecture-board figcaption p, .brain-audit-board figcaption p { margin: 0; font-size: 13px; color: rgba(255,255,255,.58); }
.brain-chain-section { background: #100d1a; }
.brain-chain { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid rgba(171,123,255,.24); border-bottom: 1px solid rgba(171,123,255,.24); }
.brain-chain article { min-height: 410px; padding: 30px 25px; display: flex; flex-direction: column; border-right: 1px solid rgba(171,123,255,.24); }
.brain-chain article:last-child { border-right: 0; }
.brain-chain article > span { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: #b58aff; }
.brain-chain article:nth-child(1) > span { color: #67a1ff; }
.brain-chain article:nth-child(3) > span { color: #f17bc3; }
.brain-chain article:nth-child(4) > span { color: #5dd8c8; }
.brain-chain h3 { margin: 70px 0 22px; font-size: clamp(21px, 1.55vw, 27px); line-height: 1.3; letter-spacing: -.025em; }
.brain-chain ul { margin: 0; padding: 0; list-style: none; }
.brain-chain li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 12px; color: rgba(255,255,255,.48); }
.brain-chain strong { margin-top: auto; padding-top: 26px; font-size: 12px; letter-spacing: .08em; color: rgba(255,255,255,.7); }
.brain-platform-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; }
.brain-platform-grid article { min-height: 390px; padding: 30px; display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.12); background: #111217; }
.brain-platform-grid article > span { font-size: 10px; font-weight: 700; color: #8aaaff; }
.brain-platform-grid article:nth-child(2) > span { color: #b58aff; }
.brain-platform-grid article:nth-child(3) > span { color: #58d8c7; }
.brain-platform-grid h3 { margin: 70px 0 18px; font-size: clamp(26px, 2vw, 34px); letter-spacing: -.035em; }
.brain-platform-grid p { margin: 0; font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.5); }
.brain-platform-grid article > div { margin-top: auto; padding-top: 38px; display: flex; flex-wrap: wrap; gap: 7px; }
.brain-platform-grid i { padding: 7px 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 100px; font-style: normal; font-size: 9px; letter-spacing: .04em; color: rgba(255,255,255,.5); }
.brain-audit-section { background: #10151c; }
.brain-audit-intro { max-width: 1040px; margin: -26px 0 68px auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: end; }
.brain-audit-intro p { margin: 0; font-size: 17px; line-height: 1.85; color: rgba(255,255,255,.56); }
.brain-audit-intro div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.brain-audit-intro span { padding: 8px 11px; border: 1px solid rgba(93,143,255,.28); border-radius: 100px; font-size: 9px; letter-spacing: .06em; color: rgba(171,197,255,.68); }
.brain-audit-board { margin: 0; overflow: hidden; border: 1px solid rgba(93,143,255,.26); background: #0c1117; }
.brain-audit-board img { width: 100%; height: auto; display: block; }
.brain-audit-board figcaption span { color: #72a0ff; }
.brain-result-section { padding-top: 152px; padding-bottom: 164px; border-top: 1px solid var(--line-dark); }
.brain-result-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.brain-result-grid article { min-height: 230px; padding: 28px 24px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--line-dark); }
.brain-result-grid article:last-child { border-right: 0; }
.brain-result-grid strong { font-size: clamp(48px, 5vw, 78px); line-height: 1; letter-spacing: -.06em; color: #a976ff; }
.brain-result-grid article:nth-child(2) strong { color: #6e9dff; }
.brain-result-grid article:nth-child(3) strong { color: #ee71bf; }
.brain-result-grid article:nth-child(4) strong { color: #55d7c7; }
.brain-result-grid small { margin-left: 2px; font-size: .38em; }
.brain-result-grid span { font-size: 12px; color: rgba(255,255,255,.48); }
.brain-final-link { margin-top: 34px; padding: 30px 0; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-bottom: 1px solid var(--line-dark); }
.brain-final-link span { font-size: 9px; font-weight: 700; letter-spacing: .14em; color: rgba(255,255,255,.35); }
.brain-final-link strong { font-size: clamp(22px, 2.2vw, 34px); letter-spacing: -.03em; transition: color .25s ease; }
.brain-final-link:hover strong { color: #b78cff; }

@media (max-width: 1100px) {
  .brain-hero { grid-template-columns: .65fr 1.35fr; gap: 44px; }
  .brain-problem-grid article { padding-inline: 20px; }
  .brain-chain article { padding-inline: 18px; }
  .brain-chain h3 { font-size: 21px; }
}

@media (max-width: 800px) {
  .brain-hero { display: flex; }
  .brain-section, .brain-result-section { padding-top: 96px; padding-bottom: 98px; }
  .brain-problem-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .brain-problem-grid article { min-height: 260px; border-bottom: 1px solid var(--line-dark); }
  .brain-problem-grid article:nth-child(2) { border-right: 0; }
  .brain-chain { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .brain-chain article { min-height: 360px; border-bottom: 1px solid rgba(171,123,255,.24); }
  .brain-chain article:nth-child(2) { border-right: 0; }
  .brain-platform-grid { grid-template-columns: 1fr; }
  .brain-platform-grid article { min-height: 320px; }
  .brain-platform-grid h3 { margin-top: 48px; }
  .brain-audit-intro { margin: -14px 0 50px 44px; grid-template-columns: 1fr; gap: 28px; }
  .brain-audit-intro div { justify-content: flex-start; }
  .brain-result-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .brain-result-grid article { border-bottom: 1px solid var(--line-dark); }
  .brain-result-grid article:nth-child(2n) { border-right: 0; }
}

@media (max-width: 520px) {
  .brain-page .case-hero h1 { font-size: 52px; }
  .brain-hero-actions { margin-top: 36px; align-items: flex-start; flex-direction: column; gap: 24px; }
  .brain-section, .brain-result-section { padding-top: 76px; padding-bottom: 78px; }
  .brain-problem-grid { grid-template-columns: 1fr; }
  .brain-problem-grid article, .brain-problem-grid article:first-child, .brain-problem-grid article:last-child { min-height: 230px; padding: 26px 0 30px; border-right: 0; }
  .brain-architecture-board { overflow-x: auto; overscroll-behavior-inline: contain; }
  .brain-architecture-board img { width: 860px; max-width: none; }
  .brain-architecture-board figcaption { position: sticky; left: 0; width: calc(100vw - 40px); }
  .brain-chain { grid-template-columns: 1fr; }
  .brain-chain article { min-height: 340px; border-right: 0; }
  .brain-chain h3 { margin-top: 48px; }
  .brain-audit-intro { margin-left: 0; }
  .brain-result-grid { grid-template-columns: 1fr; }
  .brain-result-grid article, .brain-result-grid article:nth-child(2n) { min-height: 170px; border-right: 0; }
  .brain-final-link { align-items: flex-start; flex-direction: column; }
}

/* AfterShip 4.0 brand redesign */
.aftership-page {
  --case-red: #ff5b27;
  --aftership-orange: #ff5b27;
  background: #090909;
}
.aftership-page .case-header { background: #0a0a0a; }
.aftership-hero { grid-template-columns: minmax(330px, .68fr) minmax(560px, 1.32fr); }
.aftership-page .case-hero h1 { font-size: clamp(64px, 6.2vw, 108px); }
.aftership-hero-cover {
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255, 91, 39, .25);
  border-radius: 18px;
  box-shadow: 0 30px 100px rgba(255, 76, 20, .12);
}
.aftership-hero-cover img { object-fit: cover; transform: none; }
.aftership-hero-cover figcaption { background: rgba(22, 7, 2, .78); }
.aftership-section { padding-top: 152px; padding-bottom: 160px; }
.aftership-section + .aftership-section { border-top: 1px solid var(--line-dark); }
.aftership-intro-grid,
.aftership-language-copy {
  max-width: 1060px;
  margin: -26px 0 70px auto;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 72px;
  align-items: start;
}
.aftership-intro-grid > p,
.aftership-language-copy > p { margin: 0; font-size: 17px; line-height: 1.85; color: rgba(255,255,255,.6); }
.aftership-intro-grid ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); }
.aftership-intro-grid li { padding: 13px 0; border-bottom: 1px solid var(--line-dark); font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.48); }
.aftership-dark-section { background: #100d0c; }
.aftership-principles {
  margin-bottom: 72px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  border-top: 1px solid rgba(255,91,39,.28);
  border-bottom: 1px solid rgba(255,91,39,.28);
}
.aftership-principles article { min-height: 280px; padding: 28px 30px 34px; display: flex; flex-direction: column; border-right: 1px solid rgba(255,91,39,.28); }
.aftership-principles article:first-child { padding-left: 0; }
.aftership-principles article:last-child { padding-right: 0; border-right: 0; }
.aftership-principles span { font-size: 10px; font-weight: 700; letter-spacing: .14em; color: var(--aftership-orange); }
.aftership-principles h3 { margin: auto 0 16px; font-size: clamp(25px, 2vw, 34px); letter-spacing: -.035em; }
.aftership-principles p { max-width: 340px; margin: 0; font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.5); }
.aftership-board {
  max-width: 1240px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: #050505;
}
.aftership-board-light { background: #f4f3f1; }
.aftership-board img { width: 100%; height: auto; display: block; }
.aftership-board figcaption {
  min-height: 72px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgba(255,255,255,.12);
  background: #0c0c0c;
}
.aftership-board figcaption span { font-size: 9px; font-weight: 700; letter-spacing: .14em; color: var(--aftership-orange); }
.aftership-board figcaption p { margin: 0; font-size: 13px; color: rgba(255,255,255,.58); }
.aftership-system-section { background: #111213; }
.aftership-language-copy > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.aftership-language-copy span { padding: 9px 11px; border: 1px solid rgba(255,91,39,.3); border-radius: 100px; font-size: 9px; letter-spacing: .08em; color: rgba(255,153,119,.75); }
.aftership-result-section { padding: 150px 0 160px; background: var(--aftership-orange); }
.aftership-result-inner { display: grid; grid-template-columns: .58fr 1fr .75fr; gap: clamp(40px, 6vw, 100px); align-items: end; }
.aftership-result-inner .eyebrow { align-self: start; color: rgba(255,255,255,.7); }
.aftership-result-inner h2 { margin: 0; font-size: clamp(54px, 5.7vw, 96px); line-height: .96; letter-spacing: -.065em; }
.aftership-result-inner > p:last-child { margin: 0; font-size: 15px; line-height: 1.85; color: rgba(255,255,255,.76); }

/* AfterShip editorial case presentation */
.aftership-agency-page { background: #090909; color: #fff; }
.aftership-brand-hero {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-rows: 88px 1fr;
  background: #ff612f;
  color: #090909;
}
.aftership-brand-hero .nav { z-index: 4; border-bottom-color: rgba(10,10,10,.16); }
.aftership-brand-hero .menu-button { color: #090909; }
.aftership-brand-hero-media { position: absolute; inset: 0; overflow: hidden; }
.aftership-brand-hero-media video,
.aftership-brand-hero-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center center; }
.aftership-brand-hero-video { position: absolute; z-index: 1; inset: 0; }
.aftership-brand-hero-wordmark { position: absolute; z-index: 2; inset: 0; display: grid; place-content: center; justify-items: center; color: #fff; pointer-events: none; transform: translateY(4%); }
.aftership-brand-hero-wordmark img {
  display: block;
  width: min(61.5vw, 1180px);
  height: auto;
  aspect-ratio: 1181.09 / 285.33;
  object-fit: contain;
}
.aftership-brand-hero-wordmark span { margin-top: clamp(28px, 3vw, 52px); font-size: clamp(28px, 3.6vw, 62px); line-height: 1; letter-spacing: -.035em; font-weight: 680; font-style: italic; }
.aftership-brand-hero-meta {
  position: relative;
  z-index: 3;
  grid-row: 3;
  display: grid;
  grid-template-columns: .7fr 1fr auto;
  align-items: center;
  gap: 36px;
  border-top: 1px solid rgba(10,10,10,.16);
}
.aftership-brand-hero-meta span,
.aftership-brand-hero-meta a { font-size: 9px; font-weight: 750; letter-spacing: .14em; }
.aftership-brand-hero-meta p { margin: 0; font-size: 13px; line-height: 1.5; }
.as-intro { padding: 156px 0 170px; background: #f2f0ea; color: #0b0b0b; }
.as-intro-grid { display: grid; grid-template-columns: .42fr 1.58fr; gap: clamp(70px, 10vw, 170px); }
.as-project-meta .eyebrow { margin-bottom: 48px; color: rgba(10,10,10,.5); }
.as-project-meta dl { margin: 0; display: grid; gap: 32px; }
.as-project-meta dl div { padding-top: 16px; border-top: 1px solid rgba(10,10,10,.18); }
.as-project-meta dt { margin-bottom: 10px; font-size: 9px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; color: rgba(10,10,10,.42); }
.as-project-meta dd { margin: 0; font-size: 13px; line-height: 1.75; color: rgba(10,10,10,.7); }
.as-super-title { margin: 0; font-size: clamp(58px, 6.8vw, 116px); line-height: .98; letter-spacing: -.065em; font-weight: 720; }
.as-lead { max-width: 870px; margin: 64px 0 0; font-size: clamp(21px, 1.75vw, 30px); line-height: 1.62; letter-spacing: -.02em; color: rgba(10,10,10,.65); }
.as-context-grid { margin-top: 160px; display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(60px, 8vw, 130px); align-items: center; }
.as-context-copy > span { font-size: 9px; font-weight: 750; letter-spacing: .14em; color: #ff5b27; }
.as-context-copy h2 { margin: 32px 0 34px; font-size: clamp(44px, 4.4vw, 72px); line-height: 1.05; letter-spacing: -.055em; }
.as-context-copy > p { max-width: 540px; margin: 0; font-size: 16px; line-height: 1.9; color: rgba(10,10,10,.58); }
.as-context-tags { margin-top: 46px; display: flex; flex-wrap: wrap; gap: 8px; }
.as-context-tags span { padding: 9px 12px; border: 1px solid rgba(10,10,10,.18); border-radius: 100px; font-size: 10px; color: rgba(10,10,10,.62); }
.as-signage-figure { width: min(520px, 100%); margin: 0 0 0 auto; overflow: hidden; background: #4d9ded; }
.as-signage-figure img { width: 100%; height: auto; display: block; }
.as-brand-idea { padding: 150px 0 158px; background: #ff5b27; color: #090909; }
.as-section-index { display: flex; align-items: center; gap: 18px; }
.as-section-index span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 9px; font-weight: 750; }
.as-section-index p { margin: 0; font-size: 9px; font-weight: 750; letter-spacing: .14em; }
.as-brand-idea h2 { margin: 82px 0 118px; font-size: clamp(68px, 9vw, 152px); line-height: .85; letter-spacing: -.075em; font-weight: 760; }
.as-brand-idea h2 em { color: #fff; font-style: normal; }
.as-idea-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid rgba(10,10,10,.28); border-bottom: 1px solid rgba(10,10,10,.28); }
.as-idea-grid article { min-height: 250px; padding: 26px 32px 32px; display: flex; flex-direction: column; border-right: 1px solid rgba(10,10,10,.28); }
.as-idea-grid article:first-child { padding-left: 0; }
.as-idea-grid article:last-child { padding-right: 0; border-right: 0; }
.as-idea-grid article > span { font-size: 9px; font-weight: 750; letter-spacing: .13em; }
.as-idea-grid h3 { margin: auto 0 14px; font-size: clamp(24px, 2.2vw, 36px); letter-spacing: -.04em; }
.as-idea-grid p { max-width: 340px; margin: 0; font-size: 13px; line-height: 1.75; color: rgba(10,10,10,.62); }
.as-logo-story { padding: 160px 0 0; background: #f2f0ea; color: #0a0a0a; }
.as-editorial-head { margin-bottom: 96px; display: grid; grid-template-columns: .48fr 1.52fr; gap: clamp(70px, 9vw, 150px); align-items: start; }
.as-editorial-head > div:last-child { max-width: 940px; }
.as-editorial-head h2 { margin: 0; font-size: clamp(54px, 6vw, 98px); line-height: .95; letter-spacing: -.065em; }
.as-editorial-head > div:last-child > p { max-width: 700px; margin: 38px 0 0; font-size: 17px; line-height: 1.85; color: rgba(10,10,10,.56); }
.as-foundation-grid { margin-bottom: 110px; display: grid; grid-template-columns: 1.1fr .9fr; background: #0b0b0c; color: #fff; }
.as-foundation-grid figure { margin: 0; min-width: 0; }
.as-foundation-grid figure img { width: 100%; height: 100%; display: block; object-fit: cover; }
.as-mark-card { padding: clamp(48px, 7vw, 110px); display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 12px 28px; }
.as-mark-dot { grid-column: 1 / -1; width: 142px; height: 142px; margin-bottom: 46px; position: relative; display: block; border-radius: 50% 50% 50% 12%; background: #ff5b27; transform: rotate(45deg); }
.as-mark-dot i { position: absolute; inset: 43px; border: 10px solid #111; transform: rotate(45deg); }
.as-mark-card p,
.as-mark-card b,
.as-mark-card strong { margin: 0; font-size: clamp(18px, 1.65vw, 27px); line-height: 1.2; }
.as-mark-card p { color: rgba(255,255,255,.56); }
.as-mark-card b { font-weight: 400; color: #ff5b27; }
.as-mark-card strong { grid-column: 1 / -1; margin-top: 14px; font-size: clamp(38px, 4vw, 68px); letter-spacing: -.055em; }
.as-full-art { width: min(1560px, calc(100% - 80px)); margin: 0 auto; overflow: hidden; }
.as-full-art img { width: 100%; height: auto; display: block; }
.as-identity-system { padding: 168px 0 0; background: #090909; color: #fff; }
.as-editorial-head-dark > div:last-child > p { color: rgba(255,255,255,.56); }
.as-identity-system .as-section-index { color: #ff6a38; }
.as-system-gallery,
.as-touchpoint-gallery { width: min(1680px, calc(100% - 48px)); margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.as-system-gallery figure,
.as-touchpoint-gallery figure { margin: 0; min-width: 0; overflow: hidden; background: #161616; }
.as-system-gallery > section { margin: 0; min-width: 0; overflow: hidden; }
.as-system-gallery figure img { width: 100%; height: auto; display: block; object-fit: contain; }
.as-system-gallery .as-figma-original { aspect-ratio: 16 / 9; background: #e9e9e9; }
.as-system-gallery .as-figma-original img { width: 100%; height: 100%; object-fit: contain; }
.as-touchpoint-gallery figure img { width: 100%; height: 100%; display: block; object-fit: cover; }
.as-system-gallery .as-gallery-wide,
.as-touchpoint-gallery .as-gallery-wide { grid-column: 1 / -1; }
.as-native-logo-system,
.as-native-type-system { padding: clamp(36px, 5vw, 80px); background: #f4f3ef; color: #0a0a0a; }
.as-native-spec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.as-native-spec-head span { font-size: 9px; font-weight: 750; letter-spacing: .14em; color: #ff5b27; }
.as-native-spec-head p { max-width: 520px; margin: 0; font-size: 13px; line-height: 1.7; color: rgba(10,10,10,.52); }
.as-native-logo-lockups { margin-top: clamp(48px, 6vw, 92px); display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.as-native-logo-lockups > div { min-height: 260px; padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 12px; background: #fff; }
.as-native-logo-lockups > div:nth-child(2) { background: #121212; color: #fff; }
.as-native-logo-lockups > div:nth-child(3) { background: #ff5b27; color: #fff; }
.as-lockup-logo {
  display: block;
  width: min(78%, 420px);
  height: auto;
  aspect-ratio: 1181.09 / 285.33;
  object-fit: contain;
}
.as-lockup-logo-dark { filter: brightness(0); }
.as-native-logo-lockups span { margin-top: auto; padding-top: 42px; align-self: flex-start; font-size: 9px; letter-spacing: .12em; opacity: .48; }
.as-native-type-system { display: flex; flex-direction: column; }
.as-native-type-system > strong { margin-top: clamp(54px, 7vw, 110px); font-size: clamp(130px, 13vw, 220px); line-height: .72; letter-spacing: -.08em; }
.as-native-type-system h3 { margin: 38px 0 0; font-size: clamp(36px, 4vw, 68px); letter-spacing: -.055em; }
.as-native-type-system > div:last-child { margin-top: auto; padding-top: 54px; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.as-native-type-system > div:last-child span { font-size: 10px; color: rgba(10,10,10,.5); }
.as-expression { padding: 170px 0; background: #ff5b27; color: #090909; }
.as-expression-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(70px, 9vw, 150px); align-items: center; }
.as-expression-grid figure { margin: 0; overflow: hidden; }
.as-expression-grid figure img { width: 100%; height: auto; display: block; }
.as-expression-grid h2 { margin: 74px 0 38px; font-size: clamp(58px, 6.7vw, 110px); line-height: .9; letter-spacing: -.07em; }
.as-expression-grid > div > p { max-width: 570px; margin: 0; font-size: 16px; line-height: 1.85; color: rgba(10,10,10,.62); }
.as-expression-grid blockquote { margin: 70px 0 0; padding-top: 28px; border-top: 1px solid rgba(10,10,10,.25); font-size: clamp(21px, 2vw, 32px); line-height: 1.3; letter-spacing: -.03em; }
.as-touchpoints { padding: 168px 0 0; background: #f2f0ea; color: #0a0a0a; }
.as-touchpoint-gallery { width: min(1680px, calc(100% - 48px)); padding-bottom: 14px; }
.as-touchpoint-gallery figure { background: #0a0a0a; }
.as-design-system { padding: 168px 0; background: #f2f0ea; color: #0a0a0a; }
.as-ds-head { margin-bottom: 92px; display: grid; grid-template-columns: .48fr 1.52fr; gap: clamp(70px, 9vw, 150px); align-items: start; }
.as-ds-head > div:last-child { max-width: 960px; }
.as-ds-head h2 { margin: 0; font-size: clamp(58px, 6.6vw, 108px); line-height: .92; letter-spacing: -.07em; }
.as-ds-head > div:last-child > p { max-width: 760px; margin: 42px 0 0; font-size: 17px; line-height: 1.85; color: rgba(10,10,10,.58); }
.as-ds-content { display: grid; gap: 0; }
.as-ds-block { padding: 104px 0; border-top: 1px solid rgba(10,10,10,.16); }
.as-ds-block:last-child { padding-bottom: 0; }
.as-ds-block-head { display: grid; grid-template-columns: .48fr 1.52fr; gap: clamp(70px, 9vw, 150px); align-items: start; }
.as-ds-block-head > span { padding-top: 9px; font-size: 9px; font-weight: 750; letter-spacing: .14em; color: #ff5b27; }
.as-ds-block-head > div { max-width: 880px; }
.as-ds-block-head h3 { margin: 0; font-size: clamp(38px, 3.7vw, 62px); line-height: 1.03; letter-spacing: -.055em; }
.as-ds-block-head p { max-width: 760px; margin: 30px 0 0; font-size: 16px; line-height: 1.85; color: rgba(10,10,10,.58); }
.as-ds-problem-grid,
.as-ds-goals { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.as-ds-problem-grid article,
.as-ds-goals article { min-height: 230px; padding: 28px; display: flex; flex-direction: column; border-radius: 16px; background: #fff; }
.as-ds-problem-grid article > span,
.as-ds-goals article > span { font-size: 9px; font-weight: 750; letter-spacing: .13em; color: #ff5b27; }
.as-ds-problem-grid h4,
.as-ds-goals h4 { margin: auto 0 15px; font-size: clamp(22px, 2vw, 31px); line-height: 1.2; letter-spacing: -.035em; }
.as-ds-problem-grid p,
.as-ds-goals p { margin: 0; font-size: 13px; line-height: 1.75; color: rgba(10,10,10,.56); }
.as-ds-architecture { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.as-ds-architecture article { min-height: 300px; padding: 30px; display: flex; flex-direction: column; border-radius: 16px; background: #121212; color: #fff; }
.as-ds-architecture article:nth-child(2) { background: #ff5b27; color: #101010; }
.as-ds-architecture article > span { font-size: 9px; font-weight: 750; letter-spacing: .13em; opacity: .55; }
.as-ds-architecture h4 { margin: 28px 0 auto; font-size: clamp(28px, 2.6vw, 42px); line-height: 1.05; letter-spacing: -.045em; }
.as-ds-architecture article > div { display: flex; flex-wrap: wrap; gap: 7px; }
.as-ds-architecture i { padding: 8px 10px; border-radius: 100px; background: rgba(255,255,255,.1); font-size: 10px; font-style: normal; }
.as-ds-architecture article:nth-child(2) i { background: rgba(10,10,10,.1); }
.as-ds-token-flow,
.as-ds-workflow { margin: 64px 0 0; padding: 0; display: grid; list-style: none; }
.as-ds-token-flow { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.as-ds-token-flow li { min-height: 190px; padding: 24px; display: flex; flex-direction: column; border-radius: 14px; background: #fff; }
.as-ds-token-flow span,
.as-ds-workflow span { font-size: 9px; font-weight: 750; letter-spacing: .12em; color: #ff5b27; }
.as-ds-token-flow strong { margin-top: auto; font-size: 22px; letter-spacing: -.03em; }
.as-ds-token-flow p { margin: 12px 0 0; font-size: 12px; line-height: 1.65; color: rgba(10,10,10,.54); }
.as-ds-figure { margin: 54px 0 0; min-width: 0; border-radius: 16px; background: #fff; }
.as-ds-figure img { width: 100%; height: auto; max-width: 100%; display: block; object-fit: contain; border-radius: inherit; }
.as-ds-figure figcaption { padding: 16px 20px 18px; font-size: 10px; letter-spacing: .08em; color: rgba(10,10,10,.48); }
.as-ds-theme-figure { aspect-ratio: 1.765 / 1; overflow: hidden; }
.as-ds-theme-figure img { width: calc(100% + 4px); max-width: none; transform: translate(-2px, -8.6%); border-radius: 0; }
.as-ds-media-stack { display: grid; gap: 18px; }
.as-ds-web-inventory { margin-top: 64px; padding: clamp(28px, 3.8vw, 58px); border-radius: 16px; background: #fff; }
.as-ds-web-inventory-title { display: flex; align-items: baseline; gap: 12px; }
.as-ds-web-inventory-title span { font-size: 11px; font-weight: 800; letter-spacing: .12em; color: #ff5b27; }
.as-ds-web-inventory-title h4 { margin: 0; font-size: clamp(25px, 2.2vw, 36px); line-height: 1.15; letter-spacing: -.04em; }
.as-ds-web-progress { height: 42px; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); margin: 34px 0 8px; }
.as-ds-web-progress::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: #ff5b27; }
.as-ds-web-progress::after { content: ""; position: absolute; right: -1px; top: 3px; border-left: 8px solid #ff5b27; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.as-ds-web-progress span { position: relative; padding-top: 21px; font-size: 9px; font-weight: 750; letter-spacing: .08em; text-align: center; color: #ff5b27; }
.as-ds-web-progress span::before { content: ""; position: absolute; left: 0; top: 2px; width: 11px; height: 11px; border-radius: 50%; background: #ff5b27; }
.as-ds-web-columns { display: grid; grid-template-columns: 1.5fr 1.25fr 1fr .72fr; gap: clamp(28px, 3vw, 56px); align-items: start; }
.as-ds-web-column { min-width: 0; }
.as-ds-web-column > h4 { margin: 0 0 30px; font-size: clamp(21px, 1.7vw, 28px); letter-spacing: -.035em; }
.as-ds-web-groups { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.as-ds-web-column h5 { margin: 0 0 10px; font-size: 12px; line-height: 1.4; }
.as-ds-web-column h5:not(:first-child) { margin-top: 25px; }
.as-ds-web-column ul { margin: 0; padding: 0; display: grid; gap: 9px; list-style: none; }
.as-ds-web-column li { font-size: 11px; line-height: 1.45; color: rgba(10,10,10,.5); overflow-wrap: anywhere; }
.as-ds-goals article:first-child { background: #ff5b27; color: #111; }
.as-ds-goals article:first-child > span,
.as-ds-goals article:first-child p { color: rgba(10,10,10,.62); }
.as-ds-workflow { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.as-ds-workflow li { min-height: 150px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 14px; background: #fff; }
.as-ds-workflow strong { font-size: 14px; line-height: 1.5; }
.as-ds-delivery { overflow: hidden; background: #fff; }
.as-ds-delivery-grid { padding: 28px 28px 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.as-ds-delivery-panel { position: relative; aspect-ratio: 10 / 17; overflow: hidden; border-radius: 10px; background: #f3f3f3; }
.as-ds-delivery-panel > span { position: absolute; z-index: 2; top: 14px; left: 14px; padding: 7px 9px; border-radius: 100px; background: rgba(8,8,8,.82); color: #fff; font-size: 8px; font-weight: 750; letter-spacing: .12em; }
.as-ds-delivery-panel img { width: calc(300% + 6px); max-width: none; height: auto; border-radius: 0; }
.as-ds-delivery-panel:nth-child(2) img { transform: translateX(-33.333%); }
.as-ds-delivery-panel:nth-child(3) img { transform: translateX(-66.666%); }
.as-closing { padding: 156px 0 164px; background: #ff5b27; color: #090909; }
.as-closing p { margin: 0; font-size: 9px; font-weight: 750; letter-spacing: .14em; }
.as-closing h2 { margin: 66px 0 92px; font-size: clamp(72px, 9.3vw, 160px); line-height: .83; letter-spacing: -.08em; }
.as-closing > .shell > div { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); border-top: 1px solid rgba(10,10,10,.26); border-bottom: 1px solid rgba(10,10,10,.26); }
.as-closing span { min-height: 90px; padding: 22px; display: flex; align-items: center; justify-content: center; border-right: 1px solid rgba(10,10,10,.26); font-size: 12px; text-align: center; }
.as-closing span:first-child { padding-left: 0; }
.as-closing span:last-child { padding-right: 0; border-right: 0; }
.aftership-agency-page .case-next { color: #fff; }

@media (max-width: 1100px) {
  .as-intro-grid { grid-template-columns: .35fr 1.65fr; gap: 70px; }
  .as-context-grid { gap: 64px; }
  .as-editorial-head { grid-template-columns: .38fr 1.62fr; gap: 68px; }
  .as-foundation-grid { grid-template-columns: 1fr 1fr; }
  .as-expression-grid { gap: 68px; }
  .as-ds-web-progress { display: none; }
  .as-ds-web-columns { margin-top: 52px; grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 64px; }
}

@media (max-width: 800px) {
  .aftership-brand-hero { min-height: 760px; grid-template-rows: 68px 1fr; }
  .aftership-brand-hero-media { inset: 0; }
  .aftership-brand-hero-meta { grid-template-columns: 1fr auto; }
  .aftership-brand-hero-meta p { grid-column: 1 / -1; grid-row: 2; }
  .as-intro,
  .as-brand-idea,
  .as-expression,
  .as-closing { padding-top: 98px; padding-bottom: 104px; }
  .as-logo-story,
  .as-identity-system,
  .as-touchpoints,
  .as-design-system { padding-top: 104px; }
  .as-design-system { padding-bottom: 104px; }
  .as-intro-grid,
  .as-editorial-head,
  .as-ds-head,
  .as-ds-block-head { grid-template-columns: 1fr; gap: 42px; }
  .as-project-meta { max-width: 440px; }
  .as-project-meta dl { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .as-context-grid { margin-top: 104px; grid-template-columns: 1fr; }
  .as-context-copy { max-width: 650px; }
  .as-signage-figure { width: min(440px, 82vw); margin: 0 auto; }
  .as-brand-idea h2 { margin: 66px 0 78px; }
  .as-idea-grid { grid-template-columns: 1fr; }
  .as-idea-grid article,
  .as-idea-grid article:first-child,
  .as-idea-grid article:last-child { min-height: 210px; padding: 25px 0 28px; border-right: 0; border-bottom: 1px solid rgba(10,10,10,.28); }
  .as-idea-grid article:last-child { border-bottom: 0; }
  .as-editorial-head { margin-bottom: 62px; }
  .as-foundation-grid { margin-bottom: 72px; grid-template-columns: 1fr; }
  .as-foundation-grid figure { max-height: 720px; }
  .as-mark-card { min-height: 560px; }
  .as-full-art { width: calc(100% - 40px); }
  .as-system-gallery,
  .as-touchpoint-gallery { width: calc(100% - 24px); grid-template-columns: 1fr; gap: 10px; }
  .as-system-gallery .as-gallery-wide,
  .as-touchpoint-gallery .as-gallery-wide { grid-column: auto; }
  .as-native-logo-lockups { grid-template-columns: 1fr; }
  .as-native-logo-lockups > div { min-height: 220px; }
  .as-ds-block { padding: 78px 0; }
  .as-ds-problem-grid,
  .as-ds-goals,
  .as-ds-architecture { grid-template-columns: 1fr; }
  .as-ds-token-flow,
  .as-ds-workflow { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .as-ds-problem-grid article,
  .as-ds-goals article { min-height: 200px; }
  .as-ds-architecture article { min-height: 260px; }
  .as-ds-figure { margin-top: 42px; overflow: visible; }
  .as-ds-theme-figure,
  .as-ds-delivery { overflow: hidden; }
  .as-ds-delivery-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .as-ds-web-inventory { margin-top: 50px; }
  .as-ds-web-columns { grid-template-columns: 1fr; row-gap: 0; }
  .as-ds-web-column { padding: 32px 0; border-bottom: 1px solid rgba(10,10,10,.12); }
  .as-ds-web-column:last-child { border-bottom: 0; }
  .as-expression-grid { grid-template-columns: 1fr; }
  .as-expression-grid figure { max-width: 640px; }
  .as-closing > .shell > div { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .as-closing span { border-bottom: 1px solid rgba(10,10,10,.26); }
  .as-closing span:nth-child(2) { border-right: 0; }
}

@media (max-width: 520px) {
  .aftership-brand-hero { min-height: 700px; }
  .aftership-brand-hero .nav-links { background: rgba(255,245,238,.96); border-color: rgba(10,10,10,.14); }
  .aftership-brand-hero-media video,
  .aftership-brand-hero-media img { object-position: center center; }
  .aftership-brand-hero-wordmark img { width: min(76vw, 540px); }
  .aftership-brand-hero-wordmark span { margin-top: 24px; font-size: clamp(22px, 7vw, 34px); }
  .aftership-brand-hero-meta { gap: 8px 20px; }
  .aftership-brand-hero-meta p { max-width: 260px; font-size: 11px; }
  .as-intro,
  .as-brand-idea,
  .as-expression,
  .as-closing { padding-top: 78px; padding-bottom: 82px; }
  .as-logo-story,
  .as-identity-system,
  .as-touchpoints,
  .as-design-system { padding-top: 82px; }
  .as-design-system { padding-bottom: 82px; }
  .as-project-meta dl { grid-template-columns: 1fr; }
  .as-super-title { font-size: 48px; }
  .as-lead { margin-top: 42px; font-size: 19px; }
  .as-context-grid { margin-top: 78px; gap: 46px; }
  .as-context-copy h2 { font-size: 40px; }
  .as-brand-idea h2 { font-size: 58px; line-height: .88; }
  .as-editorial-head h2 { font-size: 48px; }
  .as-editorial-head > div:last-child > p { margin-top: 28px; font-size: 15px; }
  .as-ds-head { margin-bottom: 56px; gap: 42px; }
  .as-ds-head h2 { font-size: 50px; }
  .as-ds-head > div:last-child > p { margin-top: 30px; font-size: 15px; }
  .as-ds-block { padding: 62px 0; }
  .as-ds-block-head { gap: 22px; }
  .as-ds-block-head h3 { font-size: 36px; }
  .as-ds-block-head p { margin-top: 22px; font-size: 15px; }
  .as-ds-token-flow,
  .as-ds-workflow { grid-template-columns: 1fr; }
  .as-ds-token-flow li { min-height: 158px; }
  .as-ds-workflow li { min-height: 112px; }
  .as-ds-figure { margin-top: 34px; border-radius: 10px; }
  .as-ds-delivery-grid { padding: 16px 16px 0; grid-template-columns: 1fr; gap: 10px; }
  .as-ds-web-inventory { padding: 24px 20px; }
  .as-ds-web-inventory-title { align-items: flex-start; flex-direction: column; gap: 8px; }
  .as-ds-web-groups { grid-template-columns: 1fr; gap: 24px; }
  .as-native-spec-head { flex-direction: column; gap: 18px; }
  .as-mark-card { min-height: 450px; padding: 42px 28px; }
  .as-mark-dot { width: 108px; height: 108px; margin-bottom: 32px; }
  .as-mark-dot i { inset: 33px; border-width: 8px; }
  .as-expression-grid h2 { font-size: 53px; }
  .as-closing h2 { margin: 50px 0 62px; font-size: 62px; }
  .as-closing > .shell > div { grid-template-columns: 1fr; }
  .as-closing span,
  .as-closing span:nth-child(2) { min-height: 68px; padding: 16px 0; border-right: 0; }
}

/* More selected archive */
.more-case-page { --case-red: #3959ff; background: #050506; }
.more-case-header { min-height: auto; padding-bottom: 78px; background: #050506; }
.more-cover { padding-top: clamp(40px, 6vw, 86px); }
.more-cover figure { margin: 0; overflow: hidden; border: 1px solid rgba(87,112,255,.24); background: #000; }
.more-cover img { width: 100%; height: auto; display: block; }
.more-cover-meta { padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 30px; font-size: 9px; font-weight: 700; letter-spacing: .14em; color: rgba(255,255,255,.38); }
.more-cover-meta a { transition: color .25s ease; }
.more-cover-meta a:hover { color: #fff; }
.more-section { padding-top: 152px; padding-bottom: 160px; border-top: 1px solid var(--line-dark); }
.more-board { margin: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.12); background: #000; }
.more-board img { width: 100%; height: auto; display: block; }
.more-board figcaption {
  min-height: 70px;
  padding: 17px 21px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.more-board figcaption span { font-size: 9px; font-weight: 700; letter-spacing: .14em; color: #6e89ff; }
.more-board figcaption p { margin: 0; font-size: 13px; color: rgba(255,255,255,.54); }
.more-blue-section { background: #101630; }
.more-role-grid,
.more-sharing-copy {
  max-width: 1040px;
  margin: -26px 0 70px auto;
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 70px;
}
.more-role-grid > p,
.more-sharing-copy > p { margin: 0; font-size: 17px; line-height: 1.85; color: rgba(255,255,255,.6); }
.more-role-grid ol { margin: 0; padding: 0; list-style: none; counter-reset: more-role; border-top: 1px solid rgba(111,137,255,.28); }
.more-role-grid li { padding: 12px 0; border-bottom: 1px solid rgba(111,137,255,.28); counter-increment: more-role; font-size: 12px; color: rgba(255,255,255,.55); }
.more-role-grid li::before { content: "0" counter(more-role); margin-right: 14px; font-size: 9px; color: #7891ff; }
.more-sharing-copy > div { display: grid; grid-template-columns: auto 1fr; gap: 7px 16px; align-content: start; }
.more-sharing-copy strong { font-size: clamp(36px, 3.5vw, 56px); line-height: 1; letter-spacing: -.055em; color: #7690ff; }
.more-sharing-copy span { align-self: end; padding-bottom: 5px; font-size: 11px; color: rgba(255,255,255,.42); }
.more-archive-strip { padding: 152px 0 160px; border-top: 1px solid var(--line-dark); background: #111113; }
.more-archive-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.more-archive-grid article { min-height: 320px; padding: 28px 30px 34px; display: flex; flex-direction: column; border-right: 1px solid var(--line-dark); }
.more-archive-grid article:first-child { padding-left: 0; }
.more-archive-grid article:last-child { padding-right: 0; border-right: 0; }
.more-archive-grid span { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: #7790ff; }
.more-archive-grid h3 { margin: auto 0 16px; font-size: clamp(24px, 2vw, 33px); line-height: 1.2; letter-spacing: -.035em; }
.more-archive-grid p { margin: 0; font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.48); }

@media (max-width: 1100px) {
  .aftership-hero { grid-template-columns: .62fr 1.38fr; gap: 42px; }
  .aftership-principles article,
  .more-archive-grid article { padding-inline: 22px; }
}

@media (max-width: 800px) {
  .aftership-hero { display: flex; }
  .aftership-section,
  .more-section,
  .more-archive-strip { padding-top: 96px; padding-bottom: 98px; }
  .aftership-intro-grid,
  .aftership-language-copy,
  .more-role-grid,
  .more-sharing-copy { margin: -14px 0 50px 44px; grid-template-columns: 1fr; gap: 32px; }
  .aftership-language-copy > div { justify-content: flex-start; }
  .aftership-principles,
  .more-archive-grid { grid-template-columns: 1fr; }
  .aftership-principles article,
  .aftership-principles article:first-child,
  .aftership-principles article:last-child,
  .more-archive-grid article,
  .more-archive-grid article:first-child,
  .more-archive-grid article:last-child { min-height: 0; padding: 28px 0 34px; border-right: 0; border-bottom: 1px solid var(--line-dark); }
  .aftership-principles article:last-child,
  .more-archive-grid article:last-child { border-bottom: 0; }
  .aftership-principles h3,
  .more-archive-grid h3 { margin-top: 42px; }
  .aftership-result-section { padding: 96px 0; }
  .aftership-result-inner { grid-template-columns: 1fr; align-items: start; gap: 34px; }
  .aftership-result-inner > p:last-child { max-width: 600px; }
  .more-case-header { padding-bottom: 58px; }
  .more-cover { padding-top: 46px; }
}

@media (max-width: 520px) {
  .aftership-page .case-hero h1 { font-size: 50px; }
  .aftership-section,
  .more-section,
  .more-archive-strip { padding-top: 76px; padding-bottom: 78px; }
  .aftership-intro-grid,
  .aftership-language-copy,
  .more-role-grid,
  .more-sharing-copy { margin-left: 0; }
  .aftership-board figcaption,
  .more-board figcaption { align-items: flex-start; flex-direction: column; gap: 8px; }
  .aftership-result-section { padding: 78px 0; }
  .aftership-result-inner h2 { font-size: 52px; }
  .more-cover-meta { align-items: flex-start; flex-direction: column; gap: 10px; }
}

/* Minimal visual cleanup — remove framing that does not carry information */
:root {
  --line-dark: rgba(255, 255, 255, .09);
  --line-light: rgba(12, 12, 14, .09);
}
.nav,
.case-header .nav,
.aftership-brand-hero .nav { border-bottom: 0; }
.cover::after,
.case-hero-cover::before { display: none; }
.project-card,
.about-section,
.page-contact,
.footer-meta { border-color: transparent; }
.capability-card,
.profile-card { border: 0; }
.capability-card { background: rgba(255,255,255,.62); }
.resume-list { border-top: 0; }
.resume-projects div,
.toolkit-intro,
.tool-group + .tool-group,
.education-note { border-color: transparent; }
.education-note { padding-inline: 18px; border-radius: 12px; background: rgba(12,12,14,.035); }
.case-hero-cover,
.case-artboard,
.case-video-frame,
.brain-architecture-board,
.brain-audit-board,
.lamp-wide-board,
.lamp-interface-grid figure,
.d11-visual-grid figure,
.d11-screen-grid figure,
.d11-broadcast-grid figure,
.belt-slide-card,
.belt-structure-card,
.belt-component-grid figure,
.belt-tool-showcase figure,
.belt-tool-full,
.aftership-board,
.more-cover figure,
.more-board { border: 0; }
.case-media-caption,
.brain-architecture-board figcaption,
.brain-audit-board figcaption,
.lamp-wide-board figcaption,
.lamp-interface-grid figcaption,
.aftership-board figcaption,
.more-board figcaption { border-top: 0; }
.lamp-section + .lamp-section,
.brain-section + .brain-section,
.aftership-section + .aftership-section,
.brain-result-section,
.lamp-result-section,
.more-section,
.more-archive-strip { border-top: 0; }
.aftership-brand-hero-meta { border-top: 0; }
.nav-links a::after { display: none; }
.cover { border-radius: 6px; }
.project-index {
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  font-size: 10px;
  color: rgba(255,255,255,.72);
}
.project-arrow {
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  font-size: 18px;
}
.view-more { padding: 0; border: 0; border-radius: 0; }
.button { border: 0; }
.button-ghost { background: rgba(255,255,255,.24); }
.milestone-card {
  border: 0;
  border-radius: 6px;
  box-shadow: none;
}
.milestone-card:hover,
.capability-card:hover { box-shadow: none; }
.trait-list span { padding: 0; border: 0; border-radius: 0; }
.trait-list span + span::before { content: "·"; margin-right: 10px; color: rgba(255,255,255,.28); }
.portrait-card { border: 0; border-radius: 6px; }
.capability-card { border-radius: 8px; }
.toolkit-card { border-radius: 8px; }
.product-icon { border-radius: 9px; box-shadow: none; }
.work-tags span,
.case-experiment-intro span,
.belt-ai-intro span,
.d11-city-tags span,
.brain-platform-grid i,
.brain-audit-intro span,
.aftership-language-copy span,
.as-context-tags span { border: 0; background: rgba(255,255,255,.06); }
.as-context-tags span { background: rgba(12,12,14,.06); }
.case-scroll span { width: auto; height: auto; border: 0; border-radius: 0; }
.case-hero-cover,
.belt-hero-cover,
.d11-hero-cover,
.lamp-hero-cover,
.brain-hero-cover,
.aftership-hero-cover { border-radius: 4px; box-shadow: none; }
.d11-feature-video { box-shadow: none; }
.as-section-index span { width: auto; height: auto; border: 0; border-radius: 0; }
.qr-wrap { gap: 0; }
.qr {
  display: block;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  background: #fff;
}
.qr-wrap span { display: none; }

/* Homepage motion preview */
.project-hover-video {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.project-hover-title {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px;
  color: #fff;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 4px 18px rgba(0,0,0,.5);
  transition: opacity .28s ease, transform .28s ease;
  transform: translateY(8px);
}
.project-hover-title strong {
  font-size: clamp(21px, 2vw, 34px);
  font-weight: 700;
  letter-spacing: -.04em;
}
.d11-card-video {
  opacity: 1;
  transition: none;
}
.d11-title-layer {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  pointer-events: none;
}
.d11-title-layer img {
  position: absolute;
  left: 50%;
  display: block;
  max-width: none;
  height: auto;
  object-fit: contain;
  transform: translateX(-50%);
  transition: none;
  filter: none;
}
.d11-title-layer .d11-title-eyebrow {
  top: 28.6%;
  width: 7.6%;
}
.d11-title-layer .d11-title-lockup {
  top: 36.4%;
  width: 63.4%;
}
@media (hover: hover) {
  .project-card:hover .project-hover-video { opacity: 1; }
  .project-card:hover .project-hover-title { opacity: 1; transform: translateY(0); }
  .project-card:hover .d11-title-layer img { transform: translateX(-50%); filter: none; }
}

.cover .aftership-hover-logo {
  position: absolute;
  z-index: 3;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transform: none;
  filter: none;
  transition: opacity .24s ease;
}
.aftership-hover-cover .project-index { z-index: 4; }
@media (hover: hover) {
  .project-card:hover .cover img.aftership-hover-logo {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cover .aftership-hover-logo { transition: none; }
}

.cover img.belt-hover-belt {
  position: absolute;
  z-index: 2;
  top: 53%;
  left: 50%;
  width: 75%;
  height: auto;
  max-width: none;
  display: block;
  object-fit: contain;
  transform: translate(-50%, -50%);
  opacity: 1;
  pointer-events: none;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.45));
}
.belt-hover-cover .project-index { z-index: 4; }
.project-card:hover .cover img.belt-hover-belt { transform: translate(-50%, -50%); }

/* Desktop experience: one continuous axis and one shared card baseline */
@media (min-width: 801px) {
  .timeline::before { left: 10%; right: 10%; }
  .milestone { grid-template-rows: 28px 38px minmax(176px, 1fr); }
  .milestone time { text-align: center; }
  .timeline-node,
  .timeline-node.is-current { justify-self: center; margin-left: 0; }
  .milestone-card,
  .milestone:nth-child(even) .milestone-card,
  .milestone:nth-child(even):hover .milestone-card,
  .milestone:nth-child(odd):hover .milestone-card {
    height: 100%;
    transform: none;
  }
}

/* Annual report — editorial case layout based on the source artboard */
.annual-page {
  --case-red: #e2231a;
  background: #050505;
}
.annual-hero {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  background: #050505;
  color: #fff;
}
.annual-hero .nav {
  position: relative;
  z-index: 4;
  color: #fff;
}
.annual-hero .menu-button { color: #fff; }
.annual-hero-video {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}
.annual-hero-shade { display: none; }
.annual-hero-copy {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 23%;
  transform: translateX(-50%);
  text-align: center;
}
.annual-hero-copy > p {
  margin: 0 0 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  color: rgba(255,255,255,.72);
}
.annual-hero-copy h1 {
  margin: 0;
  font-size: clamp(68px, 7.4vw, 132px);
  line-height: .94;
  letter-spacing: -.075em;
  font-weight: 780;
  text-shadow: 0 2px 24px rgba(0,0,0,.22);
}
.annual-hero-meta {
  margin-top: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .12em;
  color: rgba(255,255,255,.66);
}
.annual-hero-meta a { color: #fff; }
.annual-page main { background: #050505; }
.annual-page .case-overview {
  padding-top: clamp(120px, 11vw, 190px);
  padding-bottom: clamp(120px, 11vw, 190px);
  border-bottom: 0;
}
.annual-page .case-section-label h2,
.annual-page .case-section-head h2 { font-weight: 660; }
.annual-page .case-lead { max-width: 920px; }
.annual-page .case-facts div { border-top-color: rgba(255,255,255,.13); }
.annual-page .case-art-section,
.annual-page .case-result-section { background: #050505; }
.annual-page .case-art-section-muted { background: #111; }
.annual-page .case-red-section { background: var(--case-red); }
.annual-page .case-motion-section { background: #151515; }
.annual-page .case-section-head { margin-bottom: clamp(52px, 5vw, 84px); }
.annual-page .case-section-head > div { grid-template-columns: 38px 1fr; }
.annual-page .case-artboard,
.annual-page .case-video-frame {
  max-width: 1320px;
  margin-inline: auto;
  border-radius: 6px;
  background: transparent;
}
.annual-page .case-artboard-spaced,
.annual-page .case-share-video { margin-top: 28px; }
.annual-page .case-artboard img { background: #050505; }
.annual-page .case-principles {
  gap: 14px;
  border: 0;
}
.annual-page .case-principles article,
.annual-page .case-principles article:first-child,
.annual-page .case-principles article:last-child {
  min-height: 270px;
  padding: 28px;
  border: 0;
  border-radius: 6px;
  background: rgba(255,255,255,.1);
}
.annual-page .case-principles h3 { margin-top: 82px; }
.annual-page .case-video-feature,
.annual-page .case-share-video { max-width: 1120px; }
.annual-page .case-media-caption { border-top: 0; background: #111; }
.annual-page .case-music-section { background: var(--case-red); }
.annual-page .case-audio-visual { border: 0; border-radius: 6px; background: rgba(80,0,0,.2); }
.annual-page .case-audio-track { border-top-color: rgba(255,255,255,.22); }
.annual-page .case-next { border-top-color: rgba(255,255,255,.12); }
.annual-page .page-contact { background: #050505; }

@media (max-width: 800px) {
  .annual-hero { min-height: 760px; }
  .annual-hero .nav-links {
    background: rgba(16,16,17,.94);
    border-color: rgba(255,255,255,.1);
  }
  .annual-hero-video { object-position: 54% center; }
  .annual-hero-copy { top: 22%; }
  .annual-hero-copy h1 { font-size: clamp(54px, 15vw, 82px); }
  .annual-hero-meta { margin-top: 24px; flex-direction: column; gap: 10px; }
  .annual-page .case-principles { gap: 10px; }
  .annual-page .case-principles article,
  .annual-page .case-principles article:first-child,
  .annual-page .case-principles article:last-child {
    min-height: 0;
    padding: 26px;
    border: 0;
  }
  .annual-page .case-principles h3 { margin-top: 40px; }
}

@media (max-width: 520px) {
  .annual-hero { min-height: 680px; }
  .annual-hero-copy { top: 20%; }
  .annual-hero-copy > p { font-size: 9px; }
  .annual-hero-copy h1 { font-size: 50px; }
}

/* ChatGPT-inspired global language: calm type, soft surfaces, rounded media */
:root {
  --site-bg: #f7f7f5;
  --site-soft: #ecece8;
  --site-mint: #e4eee6;
  --site-blue: #e4eaf3;
  --site-text: #111111;
  --site-muted: rgba(17,17,17,.58);
  --site-radius: 24px;
}
body {
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.shell { width: min(1440px, calc(100% - 96px)); }
.nav,
.case-header .nav,
.annual-hero .nav,
.aftership-brand-hero .nav {
  width: min(1400px, calc(100% - 32px));
  height: 64px;
  margin: 0;
  padding: 0 22px;
  position: fixed;
  z-index: 100;
  top: 16px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  color: var(--site-text);
  background: linear-gradient(135deg, rgba(255,255,255,.66), rgba(245,245,245,.38));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), inset 0 -1px 0 rgba(255,255,255,.22), 0 12px 38px rgba(0,0,0,.1);
  -webkit-backdrop-filter: blur(24px) saturate(1.45);
  backdrop-filter: blur(24px) saturate(1.45);
  transition: top .25s ease, background .25s ease, box-shadow .25s ease;
}
.page-scrolled .nav,
.page-scrolled .case-header .nav,
.page-scrolled .annual-hero .nav,
.page-scrolled .aftership-brand-hero .nav {
  top: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(245,245,245,.52));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(255,255,255,.28), 0 12px 40px rgba(0,0,0,.12);
}
.nav .brand,
.nav-links a { color: var(--site-text); }
.nav-links { gap: 42px; }
.nav-links a { font-size: 12px; font-weight: 650; letter-spacing: .02em; opacity: .52; }
.nav-links a:hover,
.nav-links a.active { opacity: 1; }
.menu-button,
.case-header .menu-button,
.annual-hero .menu-button { color: var(--site-text); }

.home-page { background: var(--site-bg); color: var(--site-text); }
.home-page .hero,
.home-page .hero-video,
.home-page .hero-video video { background: var(--hero); }
.home-page .work {
  padding-top: 160px;
  background: var(--site-bg);
  color: var(--site-text);
}
.home-page .work .eyebrow,
.home-page .work .section-intro,
.home-page .project-card p { color: var(--site-muted); }
.home-page .project-card h3 { color: var(--site-text); }
.project-grid { column-gap: 32px; row-gap: 88px; }
.project-card { padding-bottom: 0; }
.cover {
  border-radius: var(--site-radius);
  background: #e8e8e5;
  transition: transform .45s cubic-bezier(.2,.75,.2,1), box-shadow .45s ease;
}
.project-card:hover .cover {
  transform: translateY(-5px);
  box-shadow: 0 26px 70px rgba(0,0,0,.12);
}
.project-copy { padding-top: 22px; }
.project-arrow {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: currentColor;
  background: rgba(127,127,127,.12);
}
.home-page .project-arrow,
.work-page .project-arrow { color: var(--site-text); }
.view-more {
  padding: 13px 18px;
  border-radius: 999px;
  color: var(--site-text);
  background: #e8e8e4;
}
.view-more:hover { background: var(--site-text); color: #fff; }

.experience { background: var(--site-mint); }
.milestone-card { border-radius: 20px; background: rgba(255,255,255,.72); }
.milestone-card:hover { background: #fff; }
.colleague { background: var(--site-blue); color: var(--site-text); }
.colleague .eyebrow,
.colleague .portrait-card p { color: var(--site-muted); }
.colleague .trait-list span { color: var(--site-text); }
.colleague .trait-list span + span::before { color: rgba(17,17,17,.28); }
.portrait-card { border-radius: var(--site-radius); background: rgba(255,255,255,.72); }
.portrait-wrap { border-radius: 18px; }

.about-page,
.about-content,
.work-page,
.work-directory { background: var(--site-bg); color: var(--site-text); }
.about-page { --about-bg: var(--hero); }
.about-hero,
.about-visual,
.about-visual video { background: var(--about-bg); }
.about-section { padding-block: 150px; }
.capability-card,
.profile-card { border-radius: var(--site-radius); background: #fff; }
.capability-card:hover { transform: translateY(-4px); }
.resume-item { border-bottom-color: rgba(17,17,17,.1); }
.toolkit-card { border-radius: var(--site-radius); background: #171717; }
.work-directory { padding-top: 164px; }
.work-directory-head h1,
.work-page .project-card h2 { color: var(--site-text); }
.directory-summary > p,
.work-page .project-card p { color: var(--site-muted); }
.work-tags span {
  color: rgba(17,17,17,.65);
  background: #e9e9e5;
}

.button {
  border-radius: 999px;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
.button:hover { box-shadow: 0 10px 30px rgba(0,0,0,.12); }
.contact { border-top: 0; background: #111; }
.contact-title { letter-spacing: -.055em; }
.email { border-bottom-color: rgba(255,255,255,.32); }

.case-page .case-hero-cover,
.case-page .belt-hero-cover,
.case-page .d11-hero-cover,
.case-page .lamp-hero-cover,
.case-page .brain-hero-cover,
.case-page .aftership-hero-cover,
.case-page .case-artboard,
.case-page .case-video-frame,
.aftership-board,
.more-cover figure,
.more-board {
  border-radius: var(--site-radius);
}
.case-page .case-principles article,
.brain-platform-grid article,
.capability-card,
.toolkit-card { border-radius: var(--site-radius); }
.case-page .case-next a strong { transition: transform .25s ease; }
.case-page .case-next a:hover strong { transform: translateX(5px); }

/* Viewport motion mirrors the reference site's continuous scroll narrative. */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .72s cubic-bezier(.2,.7,.2,1), transform .72s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1100px) {
  .shell { width: min(920px, calc(100% - 64px)); }
}

@media (max-width: 800px) {
  .shell { width: calc(100% - 40px); }
  .nav,
  .case-header .nav,
  .annual-hero .nav,
  .aftership-brand-hero .nav {
    width: calc(100% - 24px);
    height: 56px;
    top: 10px;
    padding-inline: 16px;
  }
  .page-scrolled .nav,
  .page-scrolled .case-header .nav,
  .page-scrolled .annual-hero .nav,
  .page-scrolled .aftership-brand-hero .nav { top: 6px; }
  .nav-links,
  .annual-hero .nav-links,
  .case-header .nav-links,
  .page-header-dark .nav-links {
    top: 64px;
    right: 0;
    padding: 18px;
    border: 0;
    border-radius: 18px;
    color: var(--site-text);
    background: rgba(255,255,255,.96);
    box-shadow: 0 18px 46px rgba(0,0,0,.12);
  }
  .home-page .work { padding-top: 104px; }
  .project-grid { row-gap: 56px; }
  .cover,
  .case-page .case-hero-cover,
  .case-page .case-artboard,
  .case-page .case-video-frame { border-radius: 18px; }
  .about-section { padding-block: 96px; }
  .work-directory { padding-top: 120px; }
}

/* Annual report fidelity overrides — source artboard is a continuous black case flow. */
.annual-page,
.annual-case-flow { background: #000; }
.annual-page .annual-hero .nav {
  width: min(1440px, calc(100% - 80px));
  height: 76px;
  top: 0;
  padding: 0;
  border-radius: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.page-scrolled .annual-page .annual-hero .nav {
  top: 0;
  background: rgba(0,0,0,.58);
  box-shadow: none;
  backdrop-filter: blur(16px);
}
.annual-page .nav .brand,
.annual-page .nav-links a,
.annual-page .annual-hero .menu-button { color: #fff; }
.annual-page .annual-hero-copy { top: 24%; }
.annual-page .annual-hero-copy > p { margin-bottom: 18px; font-size: 16px; letter-spacing: .06em; }
.annual-page .annual-hero-copy h1 {
  font-size: clamp(58px, 5.2vw, 100px);
  line-height: 1;
  letter-spacing: -.055em;
}
.annual-overview {
  padding-top: 116px;
  padding-bottom: 122px;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: clamp(70px, 8vw, 150px);
  color: #fff;
}
.annual-overview h2 { margin: 0; font-size: clamp(40px, 3.2vw, 58px); line-height: 1; letter-spacing: -.045em; }
.annual-overview-lead { max-width: 980px; margin: 0; font-size: clamp(20px, 1.65vw, 30px); line-height: 1.62; letter-spacing: -.025em; color: rgba(255,255,255,.78); }
.annual-facts { margin: 64px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 24px; }
.annual-facts div { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.16); }
.annual-facts dt { margin-bottom: 9px; font-size: 10px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.38); }
.annual-facts dd { margin: 0; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.7); }
.annual-board-section { width: 100%; margin: 0; overflow: hidden; background: #000; }
.annual-page .case-artboard.annual-source-board,
.annual-page .case-video-frame.annual-wide-video {
  width: min(1920px, 100%);
  max-width: 1920px;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  background: #000;
}
.annual-source-board img { width: 100%; height: auto; display: block; }
.annual-live-grid {
  max-width: 920px;
  padding-top: 110px;
  padding-bottom: 130px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 28px;
}
.annual-page .annual-live-grid .case-video-frame {
  border: 0;
  border-radius: 16px;
  background: #0b0b0c;
}
.annual-live-grid .case-video { aspect-ratio: 750 / 1624; object-fit: contain; }
.annual-wide-video .case-video { width: 100%; height: auto; }
.annual-result { padding-bottom: 70px; }
.annual-page .case-next { background: #000; }

@media (max-width: 800px) {
  .annual-page .annual-hero .nav {
    width: calc(100% - 32px);
    height: 58px;
    padding: 0;
  }
  .annual-page .annual-hero .nav-links {
    top: 64px;
    color: #fff;
    background: rgba(16,16,17,.96);
  }
  .annual-page .annual-hero-copy { top: 22%; }
  .annual-page .annual-hero-copy > p { font-size: 11px; }
  .annual-page .annual-hero-copy h1 { font-size: clamp(44px, 12vw, 68px); }
  .annual-overview { padding-block: 88px; display: block; }
  .annual-overview > div + div { margin-top: 44px; }
  .annual-overview-lead { font-size: 21px; }
  .annual-facts { grid-template-columns: repeat(2, minmax(0,1fr)); margin-top: 44px; }
  .annual-live-grid { width: min(620px, calc(100% - 40px)); padding-block: 76px 88px; gap: 14px; }
  .annual-page .annual-live-grid .case-video-frame { border-radius: 10px; }
}

@media (max-width: 520px) {
  .annual-page .annual-hero-copy h1 { font-size: 40px; }
  .annual-facts { grid-template-columns: 1fr; }
}

/* Semantic Figma case pages — art direction follows the source while copy stays selectable. */
.source-case-page {
  background: #050505;
  color: #fff;
}
.source-case-page figure { margin: 0; }
.source-case-page .case-art-section,
.source-case-page .annual-video-section { padding-block: clamp(96px, 10vw, 164px); }
.source-case-page .case-art-section-muted > .shell { padding-block: 0; }
.source-case-page .case-section-note { max-width: 850px; }
.source-case-page .case-video-frame {
  overflow: hidden;
  border-radius: 10px;
  background: #111;
}
.source-case-page .case-video-frame figcaption {
  min-height: 58px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.56);
  background: #111;
}
.source-back-link {
  width: max-content;
  margin-top: 64px;
  padding-bottom: 5px;
  display: block;
  border-bottom: 1px solid rgba(255,255,255,.36);
  font-size: 13px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.72);
  transition: color .25s ease, transform .25s ease;
}
.source-back-link:hover { color: #fff; transform: translateX(4px); }

.annual-web-flow { background: #050505; }
.annual-story-section { background: #050505; }
.annual-style-cards { grid-template-columns: repeat(4, minmax(0,1fr)); }
.annual-video-section { background: #0d0d0e; }
.annual-phone-videos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
  align-items: start;
}
.annual-phone-videos .case-video-frame { border-radius: 18px; }
.annual-phone-videos .case-video {
  width: 100%;
  aspect-ratio: 329 / 712;
  object-fit: cover;
  background: #19191b;
}
.annual-split-media {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr);
  gap: 28px;
  align-items: stretch;
}
.annual-split-media .case-artboard,
.annual-split-media .case-video-frame { height: 100%; }
.annual-split-media .case-artboard img { width: 100%; height: 100%; object-fit: cover; }
.annual-split-media .case-video { width: 100%; height: calc(100% - 58px); object-fit: cover; }
.annual-ai-section { background: #151515; }
.annual-motion-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 24px;
}
.annual-motion-grid .case-video { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.annual-music-web { background: var(--case-red); }
.annual-music-layout {
  display: grid;
  grid-template-columns: minmax(260px,.65fr) minmax(0,1.35fr);
  gap: clamp(50px,7vw,110px);
  align-items: center;
}
.annual-music-layout h2 {
  margin: 0;
  font-size: clamp(60px,7vw,118px);
  line-height: .95;
  letter-spacing: -.06em;
}
.annual-music-layout > div > p:last-child {
  max-width: 460px;
  margin: 36px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: rgba(255,255,255,.72);
}
.annual-music-layout .case-video-frame { background: rgba(80,0,0,.18); }
.annual-music-layout .case-video { width: 100%; max-height: 720px; object-fit: contain; }
.annual-music-layout .case-video-frame figcaption { background: rgba(80,0,0,.18); }
.annual-result-web { padding-block: clamp(110px,12vw,190px); background: var(--case-red); }
.annual-result-web h2 {
  margin: 0 0 clamp(70px,8vw,120px);
  font-size: clamp(68px,8vw,136px);
  line-height: .92;
  letter-spacing: -.07em;
}
.annual-result-metrics {
  display: grid;
  grid-template-columns: 1.35fr repeat(4, minmax(0,1fr));
  border-top: 1px solid rgba(255,255,255,.28);
  border-bottom: 1px solid rgba(255,255,255,.28);
}
.annual-result-metrics article {
  min-height: 230px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid rgba(255,255,255,.28);
}
.annual-result-metrics article:first-child { padding-left: 0; }
.annual-result-metrics article:last-child { padding-right: 0; border-right: 0; }
.annual-result-metrics strong { font-size: clamp(42px,4vw,68px); letter-spacing: -.055em; }
.annual-result-metrics span { max-width: 160px; font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.68); }

.belt-web-hero { min-height: 100svh; }
.belt-web-hero .case-hero { min-height: 100svh; padding-top: 120px; }
.belt-particle-hero { position: relative; background: #020202; }
.belt-particle-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), transparent 45%);
  mix-blend-mode: screen;
  animation: belt-pulse 3.2s ease-in-out infinite alternate;
}
.belt-particle-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: belt-drift 7s ease-in-out infinite alternate;
}
@keyframes belt-pulse { from { opacity: .2; } to { opacity: 1; } }
@keyframes belt-drift { from { transform: scale(1.01); filter: brightness(.8); } to { transform: scale(1.045); filter: brightness(1.18); } }
.belt-web-flow { background: #080809; }
.belt-live-video,
.belt-tool-video { margin-top: 28px; }
.belt-live-video .case-video,
.belt-tool-video .case-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #080809;
}
.belt-ai-section .belt-tool-video { margin: 0 0 28px; }
.belt-ai-section .belt-tool-showcase { margin-top: 28px; }
.belt-web-flow .belt-slide-card { border-radius: 10px; }
.belt-web-flow .belt-slide-card img { max-height: none; }
.belt-web-flow .source-back-link { margin-top: 70px; }

@media (max-width: 1000px) {
  .annual-style-cards { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .annual-phone-videos { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .annual-result-metrics { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .annual-result-metrics article { border-bottom: 1px solid rgba(255,255,255,.28); }
  .annual-result-metrics article:nth-child(3) { border-right: 0; }
  .annual-result-metrics article:nth-last-child(-n+2) { border-bottom: 0; }
}

@media (max-width: 800px) {
  .source-case-page .case-art-section,
  .source-case-page .annual-video-section { padding-block: 88px; }
  .source-case-page .case-section-note { margin-left: 44px; }
  .annual-style-cards { grid-template-columns: 1fr; }
  .annual-split-media,
  .annual-motion-grid,
  .annual-music-layout { grid-template-columns: 1fr; }
  .annual-split-media .case-video { height: auto; aspect-ratio: 9 / 16; object-fit: cover; }
  .annual-motion-grid .case-video { aspect-ratio: 16 / 7; }
  .annual-result-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .annual-result-metrics article,
  .annual-result-metrics article:nth-child(3) { border-right: 1px solid rgba(255,255,255,.28); border-bottom: 1px solid rgba(255,255,255,.28); }
  .annual-result-metrics article:nth-child(even) { border-right: 0; }
  .annual-result-metrics article:last-child { border-bottom: 0; }
  .belt-web-hero .case-hero { min-height: auto; padding-top: 116px; }
}

@media (max-width: 520px) {
  .source-case-page .case-section-note { margin-left: 0; }
  .annual-phone-videos { grid-template-columns: 1fr; gap: 24px; }
  .annual-phone-videos .case-video-frame { max-width: 360px; margin-inline: auto; }
  .annual-result-metrics { grid-template-columns: 1fr; }
  .annual-result-metrics article,
  .annual-result-metrics article:nth-child(3),
  .annual-result-metrics article:nth-child(even) { min-height: 150px; padding-inline: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.28); }
  .annual-result-metrics article:last-child { border-bottom: 0; }
}

/* Source-first annual report and belt case layouts. */
.annual-page .case-section-head h2,
.belt-page .case-section-head h2 {
  max-width: 980px;
  font-size: clamp(42px, 4.25vw, 70px);
  line-height: 1.08;
}
.annual-hero-scroll {
  width: max-content;
  margin-top: 34px;
  padding: 10px 0 5px;
  display: block;
  border-bottom: 1px solid rgba(255,255,255,.48);
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(255,255,255,.8);
}
.annual-strategy-section .case-section-note { color: rgba(255,255,255,.76); }
.annual-value-map {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(190px,.66fr) minmax(0,1fr);
  gap: 22px;
  align-items: stretch;
}
.annual-value-side,
.annual-value-core {
  min-height: 330px;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: #101011;
}
.annual-value-side p {
  margin: 0 0 28px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--case-red);
}
.annual-value-side span {
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
  font-size: 16px;
  color: rgba(255,255,255,.76);
}
.annual-value-side span:last-child { border-bottom: 0; }
.annual-value-core {
  align-items: center;
  border-color: var(--case-red);
  text-align: center;
  background: var(--case-red);
}
.annual-value-core small { font-size: 12px; letter-spacing: .12em; color: rgba(255,255,255,.7); }
.annual-value-core strong { margin-top: 12px; font-size: clamp(28px,3vw,46px); letter-spacing: -.05em; }
.annual-journey,
.annual-process-row,
.belt-tool-flow {
  margin: 0;
  padding: 0;
  display: grid;
  list-style: none;
}
.annual-journey { grid-template-columns: repeat(7,minmax(0,1fr)); border: 1px solid rgba(255,255,255,.13); }
.annual-journey li,
.annual-process-row li,
.belt-tool-flow li {
  min-width: 0;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 52px;
  border-right: 1px solid rgba(255,255,255,.13);
}
.annual-journey li:last-child,
.annual-process-row li:last-child,
.belt-tool-flow li:last-child { border-right: 0; }
.annual-journey span,
.annual-process-row span,
.belt-tool-flow span { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--case-red); }
.annual-journey strong,
.annual-process-row strong,
.belt-tool-flow strong { font-size: 15px; line-height: 1.45; }
.annual-label-grid {
  display: grid;
  border-top: 1px solid rgba(255,255,255,.34);
  border-bottom: 1px solid rgba(255,255,255,.34);
}
.annual-label-grid-four { grid-template-columns: repeat(4,minmax(0,1fr)); }
.annual-label-grid article {
  min-height: 220px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid rgba(255,255,255,.34);
}
.annual-label-grid article:last-child { border-right: 0; }
.annual-label-grid span { font-size: 10px; letter-spacing: .12em; color: rgba(255,255,255,.65); }
.annual-label-grid h3 { margin: 0; font-size: clamp(25px,2.2vw,34px); }
.annual-process-row { grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 44px; border: 1px solid rgba(255,255,255,.13); }
.annual-process-row li { gap: 42px; }
.annual-process-five { grid-template-columns: repeat(5,minmax(0,1fr)); }
.annual-process-three { grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0; }
.annual-character-gallery {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 18px;
}
.annual-character-gallery figure { margin: 0; }
.annual-character-gallery figure > div {
  aspect-ratio: 3 / 4;
  padding: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  border-radius: 16px;
  background: #141416;
}
.annual-character-gallery img { width: 100%; height: 100%; display: block; object-fit: contain; }
.annual-character-gallery figcaption { padding: 16px 3px 0; font-size: 13px; color: rgba(255,255,255,.68); }
.annual-character-types { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 8px; }
.annual-character-types span { padding: 10px 13px; border-radius: 8px; font-size: 12px; color: rgba(255,255,255,.65); background: rgba(255,255,255,.07); }
.annual-source-visual {
  margin: 0 auto;
  overflow: hidden;
  background: #000;
}
.annual-source-visual img {
  width: 100%;
  height: auto;
  display: block;
}
.annual-source-value-map { max-width: 1100px; }
.annual-source-visual-styles { max-width: 880px; }
.annual-source-character-process,
.annual-source-storyline { max-width: 1200px; }
.annual-page .annual-web-flow { background: #000; }
.annual-page .annual-overview {
  padding-block: 112px 120px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 38px;
}
.annual-page .annual-overview > div + * { margin-top: 0; }
.annual-page .annual-overview-lead { max-width: 1180px; }
.annual-page .case-art-section,
.annual-page .annual-video-section,
.annual-page .case-red-section { padding-block: clamp(96px, 8vw, 128px); }
.annual-page .case-section-head {
  max-width: 1180px;
  margin: 0 0 34px;
  display: block;
}
.annual-page .case-section-head > p { margin: 0 0 18px; }
.annual-page .case-section-head > div { display: block; }
.annual-page .case-section-head > div > span { display: none; }
.annual-page .case-section-head h2 {
  max-width: 1060px;
  font-size: clamp(38px, 4vw, 62px);
  line-height: 1.08;
  letter-spacing: -.045em;
}
.annual-page .case-section-note {
  max-width: 1020px;
  margin: 0 0 58px;
  font-size: 16px;
  line-height: 1.8;
}
.annual-page .case-art-section { background: #000; }
.annual-page .case-art-section-muted { background: #101010; }
.annual-page .annual-story-section,
.annual-page .annual-strategy-section,
.annual-page .annual-video-section { background: #1b1b1b; }
.annual-page .annual-ai-section,
.annual-page .annual-music-web { background: #000; }
.annual-page .annual-strategy-section .case-section-note { color: rgba(255,255,255,.58); }
.annual-page .annual-result-web {
  background: radial-gradient(circle at 52% 115%, #320000 0, #130000 38%, #050000 65%, #000 84%);
}
.annual-page .annual-source-visual {
  width: 100%;
  max-width: 1200px;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
}
.annual-page .annual-source-visual img {
  width: auto;
  max-width: 100%;
  height: auto;
  flex: 0 0 auto;
}
.annual-page .annual-source-value-map,
.annual-page .annual-source-character-process,
.annual-page .annual-source-storyline { max-width: 1200px; }
.annual-page .annual-source-visual-styles { max-width: 1200px; }
.annual-page .annual-source-value-map,
.annual-page .annual-source-visual-styles { background: #1b1b1b; }
.annual-page .annual-source-character-process,
.annual-page .annual-source-storyline { background: #000; }
.annual-page .annual-phone-videos,
.annual-page .annual-motion-grid,
.annual-page .annual-operation-layout,
.annual-page .annual-result-primary,
.annual-page .annual-result-detail { max-width: 1200px; }
.annual-loading-video { width: min(520px,100%); margin-inline: auto; }
.annual-loading-video .case-video { width: 100%; max-height: 760px; object-fit: contain; }
.annual-migration-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 20px;
}
.annual-migration-grid article {
  min-height: 360px;
  padding: 34px;
  border-radius: 18px;
  background: #121214;
}
.annual-migration-grid article > span { font-size: 10px; letter-spacing: .12em; color: var(--case-red); }
.annual-migration-grid h3 { margin: 84px 0 32px; font-size: clamp(30px,3vw,48px); letter-spacing: -.04em; }
.annual-migration-grid ul,
.annual-operation-layout ul { margin: 0; padding: 0; list-style: none; }
.annual-migration-grid li { padding: 13px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; color: rgba(255,255,255,.58); }
.annual-wish-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.annual-wish-grid article { min-height: 210px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid rgba(255,255,255,.14); }
.annual-wish-grid article:last-child { border-right: 0; }
.annual-wish-grid span { font-size: 10px; color: var(--case-red); }
.annual-wish-grid h3 { margin: 0; font-size: clamp(19px,1.65vw,26px); }
.annual-motion-grid .case-video { aspect-ratio: auto; max-height: 720px; object-fit: contain; }
.annual-music-flow { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); gap: 30px; align-items: stretch; }
.annual-music-flow > div { display: flex; flex-direction: column; justify-content: space-between; }
.annual-music-styles { margin-top: 24px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.annual-music-styles span { padding: 16px 12px; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; text-align: center; font-size: 12px; }
.annual-music-flow .case-video { width: 100%; max-height: 680px; object-fit: contain; }
.annual-operation-layout {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(50px,7vw,100px);
  align-items: start;
}
.annual-operation-layout li { padding: 20px 0; border-top: 1px solid rgba(255,255,255,.13); font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.7); }
.annual-operation-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.annual-operation-metrics article { min-height: 190px; padding: 24px 20px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255,255,255,.13); border-right: 0; }
.annual-operation-metrics article:last-child { border-right: 1px solid rgba(255,255,255,.13); }
.annual-operation-metrics strong { font-size: clamp(30px,3vw,48px); letter-spacing: -.05em; }
.annual-operation-metrics span { font-size: 11px; color: rgba(255,255,255,.52); }
.annual-result-primary { grid-template-columns: repeat(3,minmax(0,1fr)); }
.annual-result-primary article { min-height: 210px; }
.annual-result-detail { margin-top: 84px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 70px; }
.annual-result-detail h3 { margin: 0 0 28px; font-size: 15px; }
.annual-result-detail dl { margin: 0; }
.annual-result-detail dl div { padding: 15px 0; display: grid; grid-template-columns: 130px 1fr; gap: 20px; border-top: 1px solid rgba(255,255,255,.24); }
.annual-result-detail dt { font-weight: 700; }
.annual-result-detail dd { margin: 0; color: rgba(255,255,255,.68); }
.annual-delivery-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid rgba(255,255,255,.24); }
.annual-delivery-metrics article { min-height: 150px; padding: 18px 14px; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid rgba(255,255,255,.24); }
.annual-delivery-metrics article:last-child { border-right: 0; }
.annual-delivery-metrics strong { font-size: 38px; }
.annual-delivery-metrics span { font-size: 12px; color: rgba(255,255,255,.68); }

.belt-problem-grid-source { grid-template-columns: repeat(2,minmax(0,1fr)); max-width: none; }
.belt-problem-grid-source article {
  min-height: 330px;
  aspect-ratio: auto;
  padding: 34px;
  align-items: flex-start;
  justify-content: flex-start;
  border-radius: 18px;
  text-align: left;
}
.belt-problem-grid-source article:hover { transform: none; }
.belt-problem-grid-source h3 { margin: 54px 0 28px; font-size: clamp(26px,2.4vw,38px); }
.belt-problem-grid-source ul { margin: 0; padding: 0; list-style: none; }
.belt-problem-grid-source li { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.58); }
.belt-problem-grid-source .belt-data-card { background: var(--belt-red); }
.belt-problem-grid-source .belt-data-card > span { color: rgba(255,255,255,.72); }
.belt-data-card dl { width: 100%; margin: auto 0 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.belt-data-card dl div { min-width: 0; padding: 18px 14px; border-top: 1px solid rgba(255,255,255,.35); border-right: 1px solid rgba(255,255,255,.35); }
.belt-data-card dl div:last-child { border-right: 0; }
.belt-data-card dt { min-height: 36px; font-size: 11px; color: rgba(255,255,255,.72); }
.belt-data-card dd { margin: 12px 0 0; font-size: clamp(25px,2.4vw,38px); font-weight: 700; letter-spacing: -.04em; }
.belt-page .belt-model { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.belt-page .belt-model i { display: none; }
.belt-page .belt-model > div {
  min-height: 220px;
  aspect-ratio: auto;
  padding: 24px;
  align-items: flex-start;
  border-radius: 16px;
  text-align: left;
}
.belt-page .belt-model > div:nth-of-type(4) { background: var(--belt-red); }
.belt-page .belt-model small { margin: 0 0 auto; }
.belt-page .belt-model span { max-width: 150px; font-size: 12px; line-height: 1.5; }
.belt-model-output { margin-top: 14px; display: grid; grid-template-columns: 4fr 1fr; gap: 12px; }
.belt-model-output span { padding: 14px 20px; border-radius: 8px; text-align: center; font-size: 12px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.65); }
.belt-structure-list { display: grid; gap: 28px; }
.belt-structure-list > article { padding: 30px; border-radius: 18px; background: #121214; }
.belt-structure-title { margin-bottom: 24px; display: flex; align-items: baseline; gap: 18px; }
.belt-structure-title span { font-size: 10px; color: var(--belt-red); }
.belt-structure-title h3 { margin: 0; font-size: 24px; }
.belt-demo {
  min-height: 134px;
  padding: 26px 30px;
  display: grid;
  grid-template-columns: 170px 1fr auto;
  grid-template-areas: "logo price action" "logo detail action" "slogan detail action";
  gap: 8px 26px;
  align-items: center;
  border-radius: 10px;
  color: #fff;
  background: linear-gradient(135deg,#d9251c,#ff5b32);
}
.belt-demo-logo { grid-area: logo; font-weight: 700; }
.belt-demo strong { grid-area: price; font-size: clamp(32px,4vw,62px); letter-spacing: -.06em; }
.belt-demo small { grid-area: detail; color: rgba(255,255,255,.72); }
.belt-demo b { grid-area: slogan; font-size: 13px; }
.belt-demo em { grid-area: action; padding: 14px 18px; border: 1px solid rgba(255,255,255,.46); border-radius: 8px; font-size: 12px; font-style: normal; }
.belt-demo-pc { min-height: 100px; grid-template-columns: 180px 1fr auto; grid-template-areas: "logo slogan action"; }
.belt-token-list { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.belt-token-list span { padding: 8px 10px; border-radius: 7px; font-size: 11px; color: rgba(255,255,255,.58); background: rgba(255,255,255,.07); }
.belt-section-subtitle { max-width: 820px; margin: -28px 0 34px auto; font-size: clamp(25px,2.4vw,38px); line-height: 1.3; }
.belt-competitor-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.belt-competitor-grid article { min-height: 190px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border-radius: 14px; background: linear-gradient(145deg,#d9211b,#ff742f); }
.belt-competitor-grid article:nth-child(2) { background: linear-gradient(145deg,#c91616,#a36c38); }
.belt-competitor-grid article:nth-child(3) { background: linear-gradient(145deg,#e62f1f,#f7b51b); }
.belt-competitor-grid span { font-size: 21px; font-weight: 700; }
.belt-competitor-grid p { margin: 0; max-width: 240px; font-size: 14px; line-height: 1.55; }
.belt-color-reasons { margin-top: 28px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid rgba(255,255,255,.13); }
.belt-color-reasons span { padding: 24px 18px; border-right: 1px solid rgba(255,255,255,.13); font-size: 13px; }
.belt-color-reasons span:last-child { border-right: 0; }
.belt-color-table { border-top: 1px solid rgba(255,255,255,.18); }
.belt-color-table > div { min-height: 68px; display: grid; grid-template-columns: 1fr 1.1fr 1.9fr; align-items: center; border-bottom: 1px solid rgba(255,255,255,.12); }
.belt-color-table > div > * { min-width: 0; margin: 0; padding: 18px 22px; font-size: 13px; }
.belt-color-table span { display: flex; align-items: center; gap: 12px; }
.belt-color-table i { width: 18px; height: 18px; display: inline-block; flex: 0 0 auto; border-radius: 50%; background: var(--color); }
.belt-color-table p { color: rgba(255,255,255,.54); }
.belt-color-table-head { color: rgba(255,255,255,.4); }
.belt-color-table-head span { font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.belt-component-source { max-width: 1120px; margin: 0 auto; padding: 28px; border-radius: 16px; background: #111113; }
.belt-component-source img { width: 100%; height: auto; display: block; }
.belt-component-labels { max-width: 1120px; margin-inline: auto; }
.belt-tool-flow { grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0 0 34px auto; border: 1px solid rgba(255,255,255,.13); }
.belt-tool-flow-three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.belt-tool-address { max-width: 850px; margin: -28px 0 34px auto; font-size: 13px; color: rgba(255,255,255,.48); }
.belt-tool-address span { color: rgba(255,255,255,.72); }
.belt-page .belt-tool-video { margin-top: 0; }
.belt-sop-source { grid-template-columns: repeat(4,minmax(0,1fr)); }
.belt-sop-source article { min-height: 620px; }
.belt-sop-source h3 { min-height: 64px; margin: 54px 0 12px; }
.belt-sop-source h4 { margin: 30px 0 10px; font-size: 11px; color: rgba(255,255,255,.42); }
.belt-sop-source ul { margin: 0; padding: 0; list-style: none; }
.belt-sop-source li { padding: 7px 0; font-size: 12px; line-height: 1.45; color: rgba(255,255,255,.58); }

@media (max-width: 1000px) {
  .annual-value-map { grid-template-columns: 1fr 1fr; }
  .annual-value-core { grid-column: 1 / -1; grid-row: 1; min-height: 180px; }
  .annual-journey { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .annual-journey li:nth-child(4) { border-right: 0; }
  .annual-journey li:nth-child(-n+4) { border-bottom: 1px solid rgba(255,255,255,.13); }
  .annual-process-five { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .annual-process-five li:nth-child(3) { border-right: 0; }
  .annual-process-five li:nth-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,.13); }
  .annual-character-gallery { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .annual-wish-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .annual-wish-grid article:nth-child(3) { border-right: 0; }
  .annual-wish-grid article:nth-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,.14); }
  .annual-music-flow { grid-template-columns: 1fr; }
  .belt-page .belt-model { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .belt-page .belt-model > div { min-height: 190px; }
  .belt-model-output { grid-template-columns: 1fr 1fr; }
  .belt-sop-source { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .belt-sop-source article { min-height: 570px; border-bottom: 1px solid var(--line-dark); }
}

@media (max-width: 800px) {
  .annual-value-map,
  .annual-migration-grid,
  .annual-operation-layout,
  .annual-result-detail { grid-template-columns: 1fr; }
  .annual-value-core { grid-column: auto; grid-row: auto; }
  .annual-journey,
  .annual-process-row,
  .annual-process-five,
  .annual-process-three { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .annual-journey li,
  .annual-process-row li { min-height: 140px; border-right: 1px solid rgba(255,255,255,.13); border-bottom: 1px solid rgba(255,255,255,.13); }
  .annual-journey li:nth-child(even),
  .annual-process-row li:nth-child(even) { border-right: 0; }
  .annual-label-grid-four { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .annual-label-grid article:nth-child(2) { border-right: 0; }
  .annual-label-grid article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.34); }
  .annual-wish-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .annual-wish-grid article:nth-child(3) { border-right: 1px solid rgba(255,255,255,.14); }
  .annual-wish-grid article:nth-child(even) { border-right: 0; }
  .annual-wish-grid article:nth-child(-n+4) { border-bottom: 1px solid rgba(255,255,255,.14); }
  .annual-result-primary { grid-template-columns: 1fr; }
  .annual-result-primary article { min-height: 150px; padding-inline: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.28); }
  .annual-result-detail { gap: 54px; }
  .belt-problem-grid-source { grid-template-columns: 1fr; max-width: none; }
  .belt-page .belt-model { grid-template-columns: 1fr; }
  .belt-page .belt-model > div { min-height: 150px; }
  .belt-demo,
  .belt-demo-pc { grid-template-columns: 1fr auto; grid-template-areas: "logo action" "price action" "detail action" "slogan action"; }
  .belt-competitor-grid { grid-template-columns: 1fr; }
  .belt-color-reasons { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .belt-color-reasons span:nth-child(even) { border-right: 0; }
  .belt-color-reasons span:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.13); }
  .belt-color-table { overflow-x: auto; }
  .belt-color-table > div { min-width: 720px; }
  .belt-tool-flow,
  .belt-tool-flow-three { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .belt-tool-flow li { border-bottom: 1px solid rgba(255,255,255,.13); }
  .belt-tool-flow li:nth-child(even) { border-right: 0; }
  .annual-source-visual {
    max-width: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .annual-source-value-map img,
  .annual-source-visual-styles img,
  .annual-source-character-process img { min-width: 680px; }
  .annual-source-storyline img { min-width: 640px; }
  .annual-page .annual-overview { padding-block: 84px 92px; gap: 28px; }
  .annual-page .case-section-head { margin-bottom: 26px; }
  .annual-page .case-section-note { margin: 0 0 42px; font-size: 15px; }
  .annual-page .annual-source-value-map img,
  .annual-page .annual-source-visual-styles img { width: 100%; min-width: 0; }
  .annual-page .annual-source-character-process img,
  .annual-page .annual-source-storyline img { width: auto; min-width: 720px; max-width: none; }
}

@media (max-width: 520px) {
  .annual-label-grid-four,
  .annual-character-gallery,
  .annual-journey,
  .annual-process-row,
  .annual-process-five,
  .annual-process-three,
  .annual-wish-grid,
  .annual-operation-metrics,
  .annual-delivery-metrics,
  .annual-music-styles { grid-template-columns: 1fr; }
  .annual-journey li,
  .annual-process-row li,
  .annual-label-grid article,
  .annual-wish-grid article { min-height: 120px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.13); }
  .annual-value-side,
  .annual-value-core { min-height: 250px; padding: 26px; }
  .annual-character-gallery figure > div { aspect-ratio: 4 / 5; }
  .annual-operation-metrics article { border-right: 1px solid rgba(255,255,255,.13); border-bottom: 0; }
  .annual-delivery-metrics article { min-height: 110px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.24); }
  .belt-problem-grid-source article { min-height: 310px; }
  .belt-data-card dl { grid-template-columns: 1fr; }
  .belt-data-card dl div { border-right: 0; }
  .belt-model-output,
  .belt-tool-flow,
  .belt-tool-flow-three,
  .belt-sop-source { grid-template-columns: 1fr; }
  .belt-structure-list > article { padding: 20px; }
  .belt-demo,
  .belt-demo-pc { padding: 22px; grid-template-columns: 1fr; grid-template-areas: "logo" "price" "detail" "slogan" "action"; }
  .belt-demo em { width: max-content; }
  .belt-color-reasons { grid-template-columns: 1fr; }
  .belt-color-reasons span { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.13); }
  .belt-component-source { padding: 12px; }
  .belt-sop-source article { min-height: 0; }
  .belt-sop-source h3 { min-height: 0; }
  .annual-page .case-art-section,
  .annual-page .annual-video-section,
  .annual-page .case-red-section { padding-block: 76px; }
  .annual-page .case-section-head h2 { font-size: 36px; }
  .annual-page .annual-source-character-process img,
  .annual-page .annual-source-storyline img { min-width: 660px; }
}

/* Legacy source-image pages retained for older exported cases. */
.figma-source-page {
  margin: 0;
  overflow-x: hidden;
  background: #000;
}
.figma-source-stage {
  position: relative;
  width: min(100%, 1920px);
  margin: 0 auto;
  overflow: hidden;
  background: #000;
  line-height: 0;
}
.figma-source-layout {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
.figma-source-nav {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 50%;
  width: min(1440px, calc(100% - 80px));
  height: 76px;
  transform: translateX(-50%);
  border: 0;
  color: #fff;
  background: transparent;
  line-height: normal;
}
.figma-source-nav .brand,
.figma-source-nav .nav-links a,
.figma-source-nav .menu-button { color: #fff; }
.page-scrolled .figma-source-nav {
  position: absolute;
  top: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.figma-source-video {
  position: absolute;
  z-index: 2;
  display: block;
  max-width: none;
  border: 0;
  background: #000;
  object-fit: cover;
}
.annual-source-hero {
  inset: 0 0 auto;
  width: 100%;
  height: 5.15%;
}
.annual-source-title {
  position: absolute;
  z-index: 4;
  top: 1.22%;
  left: 50%;
  width: 90%;
  transform: translateX(-50%);
  color: #fff;
  text-align: center;
  line-height: 1;
}
.annual-source-title p {
  margin: 0 0 clamp(10px, 1vw, 20px);
  font-size: clamp(13px, 1.4vw, 27px);
  font-weight: 400;
}
.annual-source-title h1 {
  margin: 0;
  font-size: clamp(34px, 5.8vw, 112px);
  line-height: 1;
  letter-spacing: -.05em;
}
.annual-source-story {
  top: 65.55%;
  left: 0;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.annual-source-wishes {
  z-index: 3;
  top: 65.56%;
  left: 5.35%;
  width: 13.85%;
  height: auto;
  border-radius: .7vw;
  object-fit: contain;
}
.annual-source-lion {
  z-index: 3;
  top: 78.85%;
  left: 38.1%;
  width: 10.2%;
  height: auto;
  border-radius: .55vw;
  object-fit: contain;
}
.belt-source-nav {
  top: .1%;
}

@media (max-width: 800px) {
  .figma-source-nav {
    top: 6px;
    width: calc(100% - 24px);
    height: 52px;
    padding-inline: 14px;
    border-radius: 999px;
    background: rgba(0,0,0,.34);
    backdrop-filter: blur(12px);
  }
  .figma-source-nav .nav-links {
    top: 58px;
    color: #111;
    background: rgba(255,255,255,.96);
  }
  .annual-source-title { top: 1.05%; }
  .annual-source-title p { margin-bottom: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Belt case: source-led layout with high-resolution complex information boards. */
.belt-page .belt-section,
.belt-page .belt-ai-section {
  padding-block: clamp(96px, 8vw, 128px);
}
.belt-page .belt-background,
.belt-page .belt-component-section,
.belt-page .belt-ai-section {
  background: #080809;
}
.belt-page .belt-model-section,
.belt-page .belt-color-section,
.belt-page .belt-section:nth-of-type(5),
.belt-page .belt-section:nth-of-type(8) {
  background: #141414;
}
.belt-page .case-section-head {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 44px;
  display: block;
}
.belt-page .case-section-head > p {
  margin: 0 0 18px;
}
.belt-page .case-section-head > div {
  display: block;
}
.belt-page .case-section-head > div > span {
  display: none;
}
.belt-page .case-section-head h2 {
  max-width: 1080px;
  font-size: clamp(38px, 4vw, 62px);
  line-height: 1.1;
  letter-spacing: -.045em;
}
.belt-source-visual {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  background: #000;
}
.belt-source-visual img {
  width: 100%;
  height: auto;
  display: block;
}
.belt-page .case-section-note,
.belt-page .belt-tool-address,
.belt-page .belt-tool-flow,
.belt-page .belt-tool-video {
  width: 100%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}
.belt-page .case-section-note {
  margin-bottom: 38px;
  font-size: 16px;
  line-height: 1.8;
}
.belt-page .belt-tool-address {
  margin-top: 0;
  margin-bottom: 28px;
}
.belt-page .belt-tool-flow {
  margin-bottom: 34px;
}
.belt-page .belt-tool-video,
.belt-page .belt-ai-section .belt-tool-video {
  margin-top: 0;
  margin-bottom: 0;
  border-color: rgba(255,255,255,.16);
  background: #050506;
}
.belt-page .belt-tool-video .case-video {
  display: block;
  background: #050506;
}
.belt-page .source-back-link {
  width: 100%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}

@media (max-width: 800px) {
  .belt-page .belt-section,
  .belt-page .belt-ai-section {
    padding-block: 76px;
  }
  .belt-page .case-section-head {
    margin-bottom: 28px;
  }
  .belt-page .case-section-head h2 {
    font-size: 36px;
  }
  .belt-source-visual {
    max-width: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .belt-source-visual img {
    width: 720px;
    min-width: 720px;
    max-width: none;
  }
  .belt-source-background img,
  .belt-source-model img,
  .belt-source-sop img {
    width: 680px;
    min-width: 680px;
  }
}

/* Annual report: independent source crops mapped to each experience step. */
.annual-journey-scroll {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
.annual-page .annual-journey-visual {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 16px;
  border: 0;
}
.annual-page .annual-journey-visual li {
  min-height: 0;
  padding: 0;
  align-items: center;
  gap: 10px;
  border: 0;
  text-align: center;
}
.annual-page .annual-journey-visual strong {
  min-height: 20px;
  font-size: 13px;
  line-height: 1.45;
}
.annual-page .annual-journey-visual span {
  font-size: 9px;
  line-height: 1;
  color: #ff3b35;
}
.annual-page .annual-journey-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: #070708;
}
.annual-process-experience {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(170px, 195px) minmax(170px, 195px) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 52px);
  align-items: end;
}
.annual-process-source,
.annual-process-loading {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  background: #09090a;
}
.annual-process-source img,
.annual-process-loading .case-video {
  width: 100%;
  aspect-ratio: 195 / 422;
  height: auto;
  display: block;
  object-fit: cover;
  background: #09090a;
}
.annual-process-source figcaption,
.annual-process-loading figcaption {
  min-height: 48px;
  padding: 16px 18px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.5);
  background: #09090a;
}
.annual-process-characters > p {
  margin: 0 0 16px;
  font-size: 12px;
  color: rgba(255,255,255,.58);
}
.annual-process-character-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 12px;
}
.annual-process-character-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 9px;
  background: #fff;
}

@media (max-width: 1000px) {
  .annual-process-experience {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .annual-process-characters {
    grid-column: 1 / -1;
  }
}

@media (max-width: 800px) {
  .annual-journey-scroll {
    overflow-x: auto;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
  }
  .annual-page .annual-journey-visual {
    width: max-content;
    grid-template-columns: repeat(7, 142px);
  }
  .annual-page .annual-journey-visual li {
    min-height: 0;
    border: 0;
  }
  .annual-process-character-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }
}

/* Belt case v2: semantic, responsive case-study layout. */
.belt-case-content {
  color: #f6f6f3;
  background: #090909;
}
.belt-case-index {
  position: sticky;
  z-index: 12;
  top: 0;
  border-bottom: 1px solid rgba(255,255,255,.09);
  background: rgba(9,9,9,.88);
  backdrop-filter: blur(18px);
}
.belt-case-index-track {
  min-height: 64px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
}
.belt-case-index a {
  min-width: 0;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255,255,255,.62);
  transition: color .2s ease, background .2s ease;
}
.belt-case-index a:hover {
  color: #fff;
  background: rgba(255,255,255,.05);
}
.belt-case-index a span {
  font-size: 9px;
  color: #ff4b43;
}
.belt-case-section {
  padding-block: clamp(96px, 8vw, 132px);
  scroll-margin-top: 64px;
  background: #111;
}
.belt-case-section-dark { background: #090909; }
.belt-section-heading {
  max-width: 960px;
  margin-bottom: clamp(48px, 5vw, 72px);
}
.belt-section-heading > p {
  margin: 0 0 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #ff554d;
}
.belt-section-heading h2 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(40px, 4.3vw, 68px);
  line-height: 1.08;
  letter-spacing: -.052em;
}
.belt-section-lead {
  max-width: 800px;
  margin-top: 26px;
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.8;
  color: rgba(255,255,255,.6);
}
.belt-challenge-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.belt-challenge-grid > article {
  min-width: 0;
  min-height: 330px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: #171717;
}
.belt-challenge-grid > article > span {
  font-size: 10px;
  letter-spacing: .1em;
  color: rgba(255,255,255,.38);
}
.belt-challenge-grid h3 {
  margin: 84px 0 30px;
  font-size: clamp(25px, 2vw, 34px);
  letter-spacing: -.035em;
}
.belt-challenge-grid ul {
  margin: auto 0 0;
  padding: 0;
  list-style: none;
}
.belt-challenge-grid li {
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.55);
}
.belt-challenge-grid .belt-challenge-result {
  background: #ef3e35;
}
.belt-challenge-result dl {
  margin: auto 0 0;
}
.belt-challenge-result dl div {
  padding: 17px 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(255,255,255,.28);
}
.belt-challenge-result dt {
  font-size: 12px;
  color: rgba(255,255,255,.76);
}
.belt-challenge-result dd {
  margin: 0;
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 700;
  letter-spacing: -.04em;
}
.belt-system-flow {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
}
.belt-system-flow li {
  min-width: 0;
  min-height: 240px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: #1a1a1a;
}
.belt-system-flow li:nth-child(4) { background: #ef3e35; }
.belt-system-flow span {
  font-size: 10px;
  color: rgba(255,255,255,.46);
}
.belt-system-flow strong {
  margin-top: auto;
  font-size: clamp(21px, 1.7vw, 28px);
  letter-spacing: -.03em;
}
.belt-system-flow p {
  min-height: 42px;
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.54);
}
.belt-system-flow li:nth-child(4) p { color: rgba(255,255,255,.78); }
.belt-system-output {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.belt-system-output article {
  min-width: 0;
  padding: 24px 26px;
  display: grid;
  grid-template-columns: 82px 180px 1fr;
  align-items: center;
  gap: 18px;
  border-radius: 14px;
  background: rgba(255,255,255,.055);
}
.belt-system-output span {
  font-size: 10px;
  color: #ff655e;
}
.belt-system-output strong { font-size: 17px; }
.belt-system-output p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.48);
}
.belt-format-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.belt-format-card {
  min-width: 0;
  padding: clamp(22px, 2.2vw, 32px);
  border-radius: 18px;
  background: #171717;
}
.belt-format-card-pc { grid-column: 1 / -1; }
.belt-format-card header span {
  font-size: 9px;
  letter-spacing: .12em;
  color: #ff5a52;
}
.belt-format-card h3 {
  margin: 10px 0 26px;
  font-size: clamp(22px, 1.9vw, 30px);
  letter-spacing: -.03em;
}
.belt-ui-preview {
  min-width: 0;
  min-height: 180px;
  padding: clamp(20px, 2.5vw, 34px);
  display: grid;
  grid-template-columns: minmax(90px, .8fr) minmax(150px, 1.2fr) auto;
  grid-template-areas: "brand price action" "brand detail action" "slogan detail action";
  gap: 6px 20px;
  align-items: center;
  overflow: hidden;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #d92720, #ff6b38);
}
.belt-ui-preview b { grid-area: brand; font-size: 14px; }
.belt-ui-preview strong { grid-area: price; font-size: clamp(34px, 4vw, 62px); letter-spacing: -.06em; }
.belt-ui-preview strong small { font-size: .46em; }
.belt-ui-preview strong sup { font-size: .48em; }
.belt-ui-preview p { grid-area: detail; margin: 0; font-size: 12px; color: rgba(255,255,255,.76); }
.belt-ui-preview em { grid-area: slogan; font-size: 12px; font-style: normal; }
.belt-preview-action {
  grid-area: action;
  padding: 12px 16px;
  display: block;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 8px;
  color: #fff;
  background: rgba(255,255,255,.08);
  font-size: 12px;
}
.belt-ui-preview-two { background: linear-gradient(135deg, #f14d2f, #ff9a3e); }
.belt-ui-preview-pc {
  min-height: 126px;
  grid-template-columns: minmax(120px, .55fr) minmax(220px, 1.45fr) auto;
  grid-template-areas: "brand slogan action";
  background: linear-gradient(100deg, #ce2621, #f85b31);
}
.belt-format-card > ul {
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
}
.belt-format-card > ul li {
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 11px;
  color: rgba(255,255,255,.56);
  background: rgba(255,255,255,.06);
}
.belt-platform-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.belt-platform-grid article {
  min-width: 0;
  padding: 0 24px 28px;
  overflow: hidden;
  border-radius: 16px;
  background: #1a1a1a;
}
.belt-platform-grid article::before {
  content: "";
  height: 10px;
  margin: 0 -24px 24px;
  display: block;
  background: var(--platform);
}
.belt-platform-grid span { font-size: 11px; color: rgba(255,255,255,.42); }
.belt-platform-grid strong { margin-top: 36px; display: block; font-size: 24px; }
.belt-platform-grid p { margin: 10px 0 0; font-size: 13px; line-height: 1.65; color: rgba(255,255,255,.5); }
.belt-color-rule-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.belt-color-rule-grid article {
  min-width: 0;
  min-height: 210px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: #1a1a1a;
}
.belt-color-rule-grid article::before {
  content: "";
  width: 100%;
  height: 38px;
  margin-bottom: 26px;
  display: block;
  border-radius: 8px;
  background: var(--token);
}
.belt-color-rule-grid span { font-size: 10px; color: rgba(255,255,255,.4); }
.belt-color-rule-grid strong { margin-top: auto; font-size: 16px; }
.belt-color-rule-grid p { margin: 8px 0 0; font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.48); }
.belt-accessibility-note {
  margin-top: 18px;
  padding: 24px 26px;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  border-radius: 14px;
  background: rgba(255,255,255,.055);
}
.belt-accessibility-note strong { font-size: 15px; }
.belt-accessibility-note p { margin: 0; font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.52); }
.belt-component-layout-new {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 18px;
}
.belt-component-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.belt-component-groups article {
  min-width: 0;
  min-height: 220px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: #181818;
}
.belt-component-groups span { font-size: 9px; color: #ff5a52; }
.belt-component-groups h3 { margin: auto 0 12px; font-size: 22px; }
.belt-component-groups p { margin: 0; font-size: 13px; line-height: 1.65; color: rgba(255,255,255,.5); }
.belt-component-preview-new {
  padding: clamp(22px, 3vw, 42px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  border-radius: 18px;
  background: #181818;
}
.belt-mini-belt {
  min-width: 0;
  min-height: 112px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: minmax(80px, .6fr) minmax(130px, 1fr) minmax(90px, .7fr) auto;
  align-items: center;
  gap: 16px;
  overflow: hidden;
  border-radius: 11px;
  background: linear-gradient(100deg, #db2923, #ff5f36);
}
.belt-mini-belt span { font-size: 11px; font-weight: 700; }
.belt-mini-belt strong { font-size: clamp(21px, 2.5vw, 34px); letter-spacing: -.04em; }
.belt-mini-belt em { font-size: 12px; font-style: normal; color: rgba(255,255,255,.75); }
.belt-mini-belt b { padding: 10px 12px; border: 1px solid rgba(255,255,255,.45); border-radius: 7px; font-size: 11px; text-align: center; }
.belt-mini-belt-orange { background: linear-gradient(100deg, #e45126, #f6a034); }
.belt-mini-belt-wide { grid-template-columns: minmax(100px, .6fr) minmax(220px, 1.6fr) auto; }
.belt-tool-case-new {
  padding: clamp(24px, 3.6vw, 52px);
  border-radius: 22px;
  background: #181818;
}
.belt-tool-case-new + .belt-tool-case-new { margin-top: 44px; }
.belt-tool-case-copy {
  max-width: 800px;
}
.belt-tool-case-copy > span { font-size: 9px; letter-spacing: .13em; color: #ff5b53; }
.belt-tool-case-copy h3 { margin: 12px 0 18px; font-size: clamp(30px, 3.1vw, 48px); letter-spacing: -.045em; }
.belt-tool-case-copy p { max-width: 680px; margin: 0; font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.54); }
.belt-tool-steps {
  margin: 36px 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
}
.belt-tool-steps-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.belt-tool-steps li {
  min-width: 0;
  min-height: 112px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: 11px;
  background: rgba(255,255,255,.055);
}
.belt-tool-steps span { font-size: 9px; color: #ff5b53; }
.belt-tool-steps strong { font-size: 13px; line-height: 1.45; }
.belt-tool-case-new .belt-tool-video {
  max-width: none;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
}
.belt-tool-case-new .belt-tool-video .case-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #080808;
}
.belt-tool-case-new .belt-tool-video figcaption {
  padding: 16px 18px;
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.46);
  background: #0c0c0c;
}
.belt-sop-flow-new {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  list-style: none;
}
.belt-sop-flow-new li {
  min-width: 0;
  min-height: 340px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: #181818;
}
.belt-sop-flow-new li > span { font-size: 9px; letter-spacing: .1em; color: #ff5a52; }
.belt-sop-flow-new h3 { margin: 72px 0 18px; font-size: 25px; letter-spacing: -.035em; }
.belt-sop-flow-new p { margin: 0; font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.52); }
.belt-sop-flow-new li > strong { margin-top: auto; font-size: 11px; color: rgba(255,255,255,.72); }
.belt-delivery-summary {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.belt-delivery-summary article {
  min-width: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 14px;
  background: rgba(255,255,255,.055);
}
.belt-delivery-summary span { font-size: 10px; color: #ff5a52; }
.belt-delivery-summary strong { font-size: 16px; line-height: 1.5; }
.belt-case-section .source-back-link {
  margin-top: 72px;
  display: inline-block;
}

@media (max-width: 1100px) {
  .belt-challenge-grid,
  .belt-color-rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .belt-system-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .belt-component-layout-new { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .belt-case-index { overflow-x: auto; }
  .belt-case-index-track {
    width: max-content;
    min-width: 100%;
    grid-template-columns: repeat(7, minmax(94px, 1fr));
  }
  .belt-case-section { padding-block: 82px; }
  .belt-section-heading { margin-bottom: 42px; }
  .belt-section-heading h2 { font-size: clamp(36px, 9vw, 52px); }
  .belt-challenge-grid,
  .belt-format-grid { grid-template-columns: 1fr; }
  .belt-format-card-pc { grid-column: auto; }
  .belt-platform-grid { grid-template-columns: 1fr; }
  .belt-system-output article { grid-template-columns: 68px 1fr; }
  .belt-system-output article p { grid-column: 2; }
  .belt-ui-preview {
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand action" "price action" "detail action" "slogan action";
  }
  .belt-ui-preview-pc { grid-template-areas: "brand action" "slogan action"; }
  .belt-accessibility-note { grid-template-columns: 1fr; gap: 12px; }
  .belt-tool-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .belt-sop-flow-new { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .belt-delivery-summary { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .belt-case-section { padding-block: 68px; }
  .belt-challenge-grid,
  .belt-system-flow,
  .belt-system-output,
  .belt-color-rule-grid,
  .belt-component-groups,
  .belt-tool-steps,
  .belt-tool-steps-three,
  .belt-sop-flow-new { grid-template-columns: 1fr; }
  .belt-challenge-grid > article { min-height: 280px; }
  .belt-system-flow li { min-height: 190px; }
  .belt-ui-preview { padding: 20px; }
  .belt-ui-preview strong { font-size: 38px; }
  .belt-mini-belt,
  .belt-mini-belt-wide {
    grid-template-columns: 1fr auto;
  }
  .belt-mini-belt em { grid-column: 1 / -1; }
  .belt-mini-belt b { grid-column: 2; grid-row: 1; }
  .belt-tool-case-new { border-radius: 16px; }
  .belt-sop-flow-new li { min-height: 280px; }
}

/* Annual report v12 — one shared editorial grid across every section. */
.annual-page {
  --annual-content: 1280px;
  --annual-gutter: clamp(24px, 4.5vw, 72px);
  --annual-section-space: clamp(96px, 8vw, 132px);
  --annual-grid-gap: clamp(18px, 2vw, 28px);
}

.annual-page .shell,
.annual-page .annual-hero .nav {
  width: min(var(--annual-content), calc(100% - (var(--annual-gutter) * 2)));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

.annual-page .annual-overview,
.annual-page .case-art-section,
.annual-page .annual-video-section,
.annual-page .case-red-section,
.annual-page .annual-result-web {
  box-sizing: border-box;
}

.annual-page .annual-hero-copy {
  width: min(var(--annual-content), calc(100% - (var(--annual-gutter) * 2)));
}

.annual-page .annual-web-flow .case-video-frame {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

.annual-page .annual-overview,
.annual-page .case-art-section,
.annual-page .annual-video-section,
.annual-page .case-red-section {
  padding-block: var(--annual-section-space);
}

.annual-page .annual-overview {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--annual-grid-gap);
  row-gap: 32px;
}

.annual-page .annual-overview > div {
  grid-column: 1 / span 4;
}

.annual-page .annual-overview-lead {
  grid-column: 5 / -1;
  width: 100%;
  max-width: 880px;
  margin: 0;
}

.annual-page .case-section-head,
.annual-page .case-section-note,
.annual-page .annual-source-visual,
.annual-page .annual-journey-scroll,
.annual-page .annual-phone-videos,
.annual-page .annual-process-experience,
.annual-page .annual-wish-grid,
.annual-page .annual-process-row,
.annual-page .annual-motion-grid,
.annual-page .annual-music-flow,
.annual-page .annual-operation-layout,
.annual-page .annual-result-primary,
.annual-page .annual-result-detail {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  box-sizing: border-box;
}

.annual-page .case-section-head {
  margin-bottom: 30px;
}

.annual-page .case-section-head > p {
  margin-bottom: 16px;
}

.annual-page .case-section-head h2 {
  max-width: 1040px;
  text-wrap: balance;
}

.annual-page .case-section-note {
  max-width: 900px;
  margin: 0 0 clamp(46px, 5vw, 66px);
  text-wrap: pretty;
}

.annual-page .annual-source-visual {
  display: block;
  overflow: hidden;
}

.annual-page .annual-source-visual img {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
}

.annual-page .annual-phone-videos {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--annual-grid-gap);
}

.annual-page .annual-phone-videos .case-video-frame,
.annual-page .annual-process-source,
.annual-page .annual-process-loading {
  width: 100%;
  max-width: none;
  margin: 0;
}

.annual-page .annual-journey-visual {
  gap: clamp(10px, 1.25vw, 18px);
}

.annual-page .annual-process-experience {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--annual-grid-gap);
  align-items: end;
}

.annual-page .annual-process-source,
.annual-page .annual-process-loading {
  grid-column: span 2;
}

.annual-page .annual-process-characters {
  grid-column: span 8;
  min-width: 0;
}

.annual-page .annual-motion-grid {
  gap: var(--annual-grid-gap);
}

.annual-page .annual-operation-layout {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--annual-grid-gap);
}

.annual-page .annual-operation-layout > ul {
  grid-column: 1 / span 5;
}

.annual-page .annual-operation-metrics {
  grid-column: 7 / -1;
}

.annual-page .annual-result-web {
  padding-block: clamp(110px, 10vw, 160px);
}

.annual-page .annual-result-web h2 {
  margin-bottom: clamp(60px, 7vw, 96px);
}

.annual-page .annual-result-detail {
  gap: var(--annual-grid-gap);
}

@media (max-width: 1040px) {
  .annual-page {
    --annual-content: 100%;
    --annual-gutter: clamp(24px, 5vw, 52px);
  }

  .annual-page .annual-overview > div {
    grid-column: 1 / span 5;
  }

  .annual-page .annual-overview-lead {
    grid-column: 6 / -1;
  }

  .annual-page .annual-phone-videos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .annual-page .annual-phone-videos .case-video-frame {
    max-width: 360px;
    justify-self: center;
  }

  .annual-page .annual-process-experience {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .annual-page .annual-process-source,
  .annual-page .annual-process-loading {
    grid-column: auto;
    max-width: 300px;
    justify-self: center;
  }

  .annual-page .annual-process-characters {
    grid-column: 1 / -1;
  }
}

@media (max-width: 800px) {
  .annual-page {
    --annual-gutter: 24px;
    --annual-section-space: 82px;
  }

  .annual-page .annual-overview {
    display: block;
  }

  .annual-page .annual-overview-lead {
    max-width: none;
    margin-top: 34px;
  }

  .annual-page .case-section-head {
    margin-bottom: 24px;
  }

  .annual-page .case-section-note {
    max-width: none;
    margin-bottom: 42px;
  }

  .annual-page .annual-source-visual {
    width: 100%;
    max-width: none;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .annual-page .annual-source-character-process img,
  .annual-page .annual-source-storyline img {
    width: auto;
    min-width: 720px;
    max-width: none;
  }

  .annual-page .annual-operation-layout {
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .annual-page .annual-operation-layout > ul,
  .annual-page .annual-operation-metrics {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .annual-page {
    --annual-gutter: 20px;
    --annual-section-space: 72px;
  }

  .annual-page .annual-phone-videos {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .annual-page .annual-phone-videos .case-video-frame {
    max-width: 360px;
    margin-inline: auto;
  }

  .annual-page .annual-process-experience {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
  }

  .annual-page .annual-process-source,
  .annual-page .annual-process-loading {
    max-width: none;
    justify-self: stretch;
  }

  .annual-page .annual-process-characters {
    grid-column: 1 / -1;
    margin-top: 18px;
  }

  .annual-page .annual-result-web {
    padding-block: 82px;
  }
}

/* JOOX 6.0 — responsive editorial case study. */
.joox-page {
  --joox-green: #00e65a;
  --joox-bg: #050706;
  --joox-surface: #101311;
  --joox-muted: rgba(241, 247, 242, .58);
  color: #f4f8f4;
  background: var(--joox-bg);
}

.joox-page .nav {
  color: #fff;
  border-color: rgba(255,255,255,.16);
  background: rgba(5,7,6,.72);
  box-shadow: 0 14px 44px rgba(0,0,0,.24);
}

.joox-page .nav .brand,
.joox-page .nav-links a,
.joox-page .menu-button { color: #fff; }
.joox-page main { background: var(--joox-bg); }

.joox-hero {
  min-height: 720px;
  overflow: hidden;
  color: #fff;
  background: #050706;
}

.joox-hero-layout {
  height: clamp(720px, 100svh, 980px);
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(430px, .9fr);
}

.joox-hero-media {
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #0b0d0c;
}

.joox-hero-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.joox-hero-copy {
  min-width: 0;
  padding: clamp(108px, 8vw, 142px) clamp(42px, 6vw, 112px) clamp(64px, 6vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.joox-logo {
  width: clamp(178px, 14vw, 228px);
  aspect-ratio: 1969 / 611;
  margin-bottom: clamp(28px, 3.2vh, 38px);
  overflow: hidden;
}

.joox-logo img { width: 100%; max-width: none; height: auto; display: block; }

.joox-hero-copy h1 {
  margin: 0;
  max-width: 560px;
  font-size: clamp(62px, 5.2vw, 96px);
  line-height: .95;
  letter-spacing: -.065em;
  font-weight: 780;
}

.joox-hero-copy > p:not(.eyebrow) {
  max-width: 540px;
  margin: 32px 0 0;
  font-size: clamp(16px, 1.15vw, 20px);
  line-height: 1.72;
  color: var(--joox-muted);
}

.joox-hero-meta {
  width: 100%;
  margin: 44px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.joox-hero-meta div { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); }
.joox-hero-meta dt { margin-bottom: 9px; font-size: 10px; letter-spacing: .12em; color: rgba(255,255,255,.35); }
.joox-hero-meta dd { margin: 0; font-size: 13px; line-height: 1.65; color: rgba(255,255,255,.68); }
.joox-scroll { margin-top: 42px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.4); font-size: 11px; letter-spacing: .13em; }

.joox-video-hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: 88px 1fr;
  background: #050706;
}
.joox-video-hero .nav { z-index: 4; }
.joox-vhero-media { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.joox-vhero-video {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}
.joox-vhero-scrim {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: radial-gradient(132% 100% at 50% 34%, rgba(5,7,6,0) 34%, rgba(5,7,6,.62) 100%);
}
.joox-vhero-wordmark {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: 0 24px;
  pointer-events: none;
}
.joox-vhero-logo { width: min(46vw, 540px); aspect-ratio: 1969 / 611; overflow: hidden; }
.joox-vhero-logo img { width: 100%; max-width: none; height: auto; display: block; }
.joox-vhero-tag {
  margin-top: clamp(20px, 2.8vw, 40px);
  font-size: clamp(22px, 3.2vw, 50px);
  line-height: 1;
  letter-spacing: -.03em;
  font-weight: 700;
  font-style: italic;
  color: #fff;
}
.joox-hero-scroll {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(26px, 4vh, 50px);
  transform: translateX(-50%);
  margin: 0;
  color: rgba(255,255,255,.82);
  border-bottom-color: rgba(255,255,255,.45);
}

.joox-overview-meta { margin: clamp(36px, 4vw, 52px) 0 0; display: grid; gap: 20px; }
.joox-overview-meta div { padding-top: 15px; border-top: 1px solid rgba(11,14,12,.18); }
.joox-overview-meta dt { margin-bottom: 8px; font-size: 10px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; color: rgba(11,14,12,.42); }
.joox-overview-meta dd { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(11,14,12,.72); }

.joox-overview,
.joox-challenge,
.joox-strategy,
.joox-platform,
.joox-player,
.joox-social,
.joox-brand-system,
.joox-brand-film,
.joox-design-system {
  padding-block: clamp(104px, 9vw, 156px);
}

.joox-overview { background: #f0f2ee; color: #0b0e0c; }

.joox-overview-grid {
  display: grid;
  grid-template-columns: minmax(280px, .7fr) minmax(0, 1.3fr);
  gap: clamp(64px, 9vw, 150px);
}

.joox-overview .eyebrow { color: rgba(11,14,12,.42); }

.joox-overview h2 {
  margin: 0;
  font-size: clamp(48px, 4.2vw, 72px);
  line-height: 1.06;
  letter-spacing: -.055em;
}

.joox-overview-copy > p {
  max-width: 890px;
  margin: 0;
  font-size: clamp(20px, 1.65vw, 29px);
  line-height: 1.65;
  letter-spacing: -.02em;
  color: rgba(11,14,12,.7);
}

.joox-history {
  margin: clamp(60px, 7vw, 96px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
  list-style: none;
}

.joox-history li { min-width: 0; padding-top: 16px; border-top: 2px solid rgba(11,14,12,.16); }
.joox-history time { display: block; font-size: 18px; font-weight: 700; }
.joox-history span { display: block; margin-top: 10px; font-size: 12px; line-height: 1.45; color: rgba(11,14,12,.52); }

.joox-section-dark { background: #090b0a; }

.joox-section-head {
  margin-bottom: clamp(58px, 6vw, 88px);
  display: grid;
  grid-template-columns: minmax(180px, .34fr) minmax(0, 1fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: start;
}

.joox-section-head > p {
  margin: 10px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--joox-green);
}

.joox-section-head h2 {
  max-width: 980px;
  margin: 0;
  font-size: clamp(48px, 4.5vw, 76px);
  line-height: 1.04;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.joox-section-head > div > p {
  max-width: 780px;
  margin: 28px 0 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--joox-muted);
}

.joox-section-head-dark > p { color: rgba(5,19,10,.55); }
.joox-section-head-dark > div > p { color: rgba(5,19,10,.62); }

.joox-challenge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.joox-challenge-grid article {
  min-height: 360px;
  padding: clamp(26px, 3vw, 42px);
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  background: #131614;
}

.joox-challenge-grid article > span,
.joox-strategy-grid article > span,
.joox-room-principles article > span { font-size: 10px; letter-spacing: .12em; color: var(--joox-green); }
.joox-challenge-grid h3 { margin: 74px 0 28px; font-size: clamp(29px, 2.6vw, 42px); letter-spacing: -.04em; }
.joox-challenge-grid ul { margin: auto 0 0; padding: 0; list-style: none; }
.joox-challenge-grid li { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.1); font-size: 14px; color: var(--joox-muted); }

.joox-strategy { color: #06130a; background: var(--joox-green); }

.joox-strategy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.joox-strategy-grid article {
  min-height: 330px;
  padding: clamp(24px, 2.7vw, 38px);
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: rgba(255,255,255,.34);
}

.joox-strategy-grid article > span { color: rgba(5,19,10,.42); }
.joox-strategy-grid h3 { margin: 72px 0 20px; font-size: clamp(31px, 2.8vw, 46px); letter-spacing: -.05em; }
.joox-strategy-grid p { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(5,19,10,.62); }
.joox-strategy-grid strong { margin-top: auto; padding-top: 24px; font-size: 13px; }

.joox-content-groups {
  margin-bottom: 38px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.joox-content-groups article { padding: 28px; border-radius: 16px; background: #131614; }
.joox-content-groups span { font-size: 10px; letter-spacing: .1em; color: var(--joox-green); }
.joox-content-groups h3 { margin: 52px 0 15px; font-size: 24px; letter-spacing: -.03em; }
.joox-content-groups p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--joox-muted); }

.joox-phone-grid {
  display: grid;
  align-items: start;
  gap: clamp(14px, 1.5vw, 22px);
}

.joox-phone-grid-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.joox-nav-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.joox-player-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.joox-phone-grid figure {
  min-width: 0;
  margin: 0;
  padding: 12px 12px 16px;
  border-radius: 17px;
  background: #111412;
}

.joox-phone-grid figure.is-before { background: #171918; }
.joox-phone-grid img { width: 100%; height: auto; display: block; border-radius: 10px; }
.joox-phone-grid figcaption { padding: 14px 3px 0; font-size: 10px; letter-spacing: .08em; color: rgba(255,255,255,.44); }

.joox-subsection-head {
  max-width: 820px;
  margin: clamp(96px, 10vw, 150px) 0 44px;
}

.joox-subsection-head span { font-size: 10px; letter-spacing: .14em; color: var(--joox-green); }
.joox-subsection-head h3 { margin: 16px 0 18px; font-size: clamp(34px, 3.3vw, 54px); line-height: 1.1; letter-spacing: -.045em; }
.joox-subsection-head p { max-width: 680px; margin: 0; font-size: 15px; line-height: 1.75; color: var(--joox-muted); }

.joox-player { background: #070908; }

.joox-wide-visual {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #020302;
}

.joox-wide-visual img { width: 100%; height: auto; display: block; }
.joox-player-structure { padding: clamp(20px, 4vw, 54px); }
.joox-board-visual { border-radius: 16px; }
.joox-color-copy { margin-top: clamp(110px, 12vw, 170px); }

.joox-room-layout {
  display: grid;
  grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr);
  gap: clamp(38px, 6vw, 90px);
  align-items: start;
}

.joox-room-principles { display: grid; gap: 10px; }
.joox-room-principles-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.5vw, 22px); }
.joox-room-principles article { min-height: 170px; padding: 24px; display: flex; flex-direction: column; border-radius: 16px; background: #131614; }
.joox-room-principles h3 { margin: 38px 0 10px; font-size: 24px; }
.joox-room-principles p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--joox-muted); }
.joox-room-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.joox-brand-system { background: #0d100e; }
.joox-system-stack { display: grid; gap: 28px; }
.joox-system-stack figcaption { padding: 20px 24px; display: flex; align-items: center; gap: 16px; font-size: 12px; color: rgba(255,255,255,.58); background: #151815; }
.joox-system-stack figcaption span { color: var(--joox-green); }

.joox-motion-feature {
  margin-top: clamp(78px, 8vw, 128px);
  display: grid;
  grid-template-columns: minmax(280px, .72fr) minmax(320px, 1.28fr);
  gap: clamp(44px, 8vw, 128px);
  align-items: center;
}
.joox-motion-copy { max-width: 560px; }
.joox-motion-copy > span { font-size: 10px; letter-spacing: .14em; color: var(--joox-green); }
.joox-motion-copy h3 { margin: 18px 0 22px; font-size: clamp(36px, 3.6vw, 58px); line-height: 1.08; letter-spacing: -.05em; }
.joox-motion-copy p { margin: 0; font-size: 15px; line-height: 1.8; color: var(--joox-muted); }
.joox-logo-motion-frame,
.joox-feature-film { margin: 0; overflow: hidden; border-radius: 22px; background: #020302; }
.joox-logo-motion-frame { width: min(100%, 560px); justify-self: end; }
.joox-inline-video { width: 100%; height: auto; display: block; background: #020302; }
.joox-logo-motion-video { aspect-ratio: 9 / 16; object-fit: cover; }
.joox-logo-motion-frame figcaption,
.joox-feature-film figcaption { padding: 18px 22px; font-size: 10px; letter-spacing: .1em; color: rgba(255,255,255,.46); background: #111412; }

.joox-brand-film { background: #050706; }
.joox-feature-film { width: 100%; }
.joox-feature-film .joox-inline-video { aspect-ratio: 16 / 9; object-fit: contain; }
.joox-design-system { color: #0b0e0c; background: #f0f2ee; }
.joox-design-system .joox-section-head > p { color: #009a3d; }
.joox-design-system .joox-section-head > div > p { color: rgba(11,14,12,.58); }
.joox-design-system-visual { padding: clamp(14px, 2.5vw, 34px); background: #0a0c0b; }

.joox-closing {
  padding-block: clamp(110px, 11vw, 180px);
  color: #06130a;
  background: var(--joox-green);
}

.joox-closing-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: clamp(60px, 10vw, 160px);
  align-items: end;
}

.joox-closing p { margin: 0 0 24px; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.joox-closing h2 { margin: 0; font-size: clamp(62px, 7vw, 118px); line-height: .92; letter-spacing: -.065em; }
.joox-closing-points { display: grid; }
.joox-closing-points span { padding: 19px 0; border-top: 1px solid rgba(5,19,10,.28); font-size: 15px; }
.joox-page .case-next { background: var(--joox-bg); }
.joox-page .page-contact { background: #050706; }

@media (max-width: 1100px) {
  .joox-hero-layout { grid-template-columns: minmax(0, 1fr) minmax(390px, .9fr); }
  .joox-hero-copy { padding-inline: 42px; }
  .joox-section-head { grid-template-columns: 180px minmax(0, 1fr); gap: 44px; }
  .joox-strategy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .joox-phone-grid-six { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; }
  .joox-player-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .joox-room-layout { grid-template-columns: 1fr; }
  .joox-room-principles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .joox-hero { min-height: 0; }
  .joox-hero .nav-links { color: #fff; background: rgba(8,10,9,.96); }
  .joox-video-hero { min-height: 82svh; grid-template-rows: 64px 1fr; }
  .joox-vhero-logo { width: min(72vw, 400px); }
  .joox-vhero-tag { font-size: clamp(20px, 6.4vw, 32px); }
  .joox-hero-layout { height: auto; min-height: 0; display: flex; flex-direction: column; }
  .joox-hero-media { min-height: 0; aspect-ratio: 1 / .82; }
  .joox-hero-copy { padding: 64px 24px 78px; }
  .joox-logo { width: clamp(168px, 48vw, 210px); margin-bottom: 30px; }
  .joox-hero-copy h1 { font-size: clamp(54px, 14.5vw, 76px); }
  .joox-hero-copy > p:not(.eyebrow) { margin-top: 28px; }
  .joox-hero-meta { margin-top: 38px; }
  .joox-scroll { margin-top: 38px; }
  .joox-overview-grid,
  .joox-section-head,
  .joox-closing-grid { grid-template-columns: 1fr; gap: 36px; }
  .joox-history { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .joox-challenge-grid,
  .joox-content-groups { grid-template-columns: 1fr; }
  .joox-challenge-grid article { min-height: 300px; }
  .joox-strategy-grid { grid-template-columns: 1fr; }
  .joox-strategy-grid article { min-height: 270px; }
  .joox-phone-grid-six,
  .joox-nav-grid,
  .joox-player-grid,
  .joox-room-grid {
    width: 100%;
    padding-bottom: 12px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 62vw);
    grid-template-columns: none;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .joox-phone-grid figure { scroll-snap-align: start; }
  .joox-room-principles { grid-template-columns: 1fr; }
  .joox-player-structure { padding: 8px; border-radius: 14px; }
  .joox-motion-feature { grid-template-columns: 1fr; gap: 36px; }
  .joox-logo-motion-frame { width: min(100%, 440px); justify-self: start; }
  .joox-logo-motion-frame,
  .joox-feature-film { border-radius: 16px; }
  .joox-board-visual { overflow-x: auto; }
  .joox-board-visual > img { width: auto; min-width: 880px; max-width: none; }
  .joox-design-system-visual { overflow-x: auto; }
  .joox-design-system-visual img { width: auto; min-width: 900px; max-width: none; }
}

@media (max-width: 520px) {
  .joox-hero-media { aspect-ratio: 1 / .65; }
  .joox-hero-copy { padding: 52px 20px 56px; }
  .joox-logo { width: 180px; margin-bottom: 24px; }
  .joox-hero-copy > p:not(.eyebrow) { margin-top: 22px; }
  .joox-hero-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .joox-hero-meta { margin-top: 30px; }
  .joox-hero-meta dd { font-size: 12px; }
  .joox-scroll { margin-top: 28px; }
  .joox-overview,
  .joox-challenge,
  .joox-strategy,
  .joox-platform,
  .joox-player,
  .joox-social,
  .joox-brand-system,
  .joox-brand-film,
  .joox-design-system { padding-block: 76px; }
  .joox-section-head { margin-bottom: 46px; }
  .joox-section-head h2 { font-size: 40px; }
  .joox-history { grid-template-columns: 1fr; }
  .joox-closing h2 { font-size: 58px; }
}

/* JOOX project preview — logo proportions mirror the approved cover art. */
.cover .project-hover-logo {
  position: absolute;
  z-index: 3;
  left: 48.45%;
  top: 51.25%;
  width: 34.2%;
  height: auto;
  max-width: none;
  display: block;
  object-fit: contain;
  opacity: 0;
  mix-blend-mode: screen;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.4));
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity .24s ease, transform .36s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}

.joox-hover-cover .project-index { z-index: 4; }

@media (hover: hover) {
  .project-card:hover .cover img.project-hover-logo {
    opacity: 1;
    filter: drop-shadow(0 6px 20px rgba(0,0,0,.4));
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cover .project-hover-logo { transition: none; }
}

/* Annual report v13 — source-faithful, responsive editorial case template. */
.annual-v13-page {
  --annual-v13-shell: 1280px;
  --annual-v13-gutter: clamp(24px, 4.4vw, 72px);
  --annual-v13-space: clamp(88px, 8vw, 132px);
  --annual-v13-gap: clamp(18px, 2vw, 30px);
  background: #070708;
  color: #f6f6f3;
}

.annual-v13-page .shell,
.annual-v13-shell {
  width: min(var(--annual-v13-shell), calc(100% - (var(--annual-v13-gutter) * 2)));
  max-width: none;
  margin-inline: auto;
}

.annual-v13-hero {
  position: relative;
  height: min(100svh, 900px);
  min-height: 680px;
  overflow: hidden;
  background: #051126;
}

.annual-v13-hero .nav {
  width: min(1400px, calc(100% - 32px));
  height: 64px;
  margin: 0;
  padding: 0 22px;
  position: fixed;
  z-index: 100;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  border: 0;
  border-radius: 999px;
  color: #111;
  background: rgba(255,255,255,.86);
  box-shadow: 0 8px 30px rgba(0,0,0,.08);
  backdrop-filter: blur(18px) saturate(1.2);
  transition: top .25s ease, background .25s ease, box-shadow .25s ease;
}

.annual-v13-hero .nav .brand,
.annual-v13-hero .nav-links a,
.annual-v13-hero .menu-button { color: #111; }

.page-scrolled .annual-v13-hero .nav {
  top: 8px;
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 34px rgba(0,0,0,.11);
}

.annual-v13-hero > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

.annual-v13-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1,8,24,.28) 0%, rgba(1,8,24,.03) 40%, rgba(1,5,16,.55) 100%);
}

.annual-v13-hero-copy {
  position: absolute;
  inset: 88px 0 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  font-family: "腾讯体 W3", "TencentSans W3", "Tencent Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  transform: translateY(calc(clamp(130px, 17vh, 190px) * -1));
}

.annual-v13-hero-copy p {
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
}

.annual-v13-hero-copy h1 {
  margin: 0;
  max-width: calc(100vw - 64px);
  font-size: clamp(50px, 6.3vw, 98px);
  line-height: 1;
  letter-spacing: -.065em;
  white-space: nowrap;
  font-family: "腾讯体 W7", "TencentSans W7", "Tencent Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 700;
  text-shadow: 0 8px 34px rgba(0,0,0,.35);
}

.annual-v13-main { background: #070708; }
.annual-v13-tone-dark { background: #070708; }
.annual-v13-tone-soft { background: #171718; }

.annual-v13-overview,
.annual-v13-section {
  padding-block: var(--annual-v13-space);
}

.annual-v13-overview-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--annual-v13-gap);
  align-items: start;
}

.annual-v13-overview-grid > div { grid-column: 1 / span 4; }
.annual-v13-overview-grid > p {
  grid-column: 5 / -1;
  max-width: 850px;
  margin: 0;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.82;
  color: rgba(255,255,255,.66);
}

.annual-v13-eyebrow,
.annual-v13-heading > p {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  color: rgba(255,255,255,.42);
}

.annual-v13-overview h2,
.annual-v13-heading h2,
.annual-v13-result h2 {
  margin: 0;
  font-size: clamp(36px, 4vw, 62px);
  line-height: 1.08;
  letter-spacing: -.055em;
}

.annual-v13-overview h2 { margin-top: 18px; }

.annual-v13-heading {
  display: grid;
  grid-template-columns: minmax(150px, 2fr) minmax(0, 10fr);
  gap: var(--annual-v13-gap);
  margin-bottom: clamp(48px, 5vw, 72px);
}

.annual-v13-heading > div { max-width: 920px; }
.annual-v13-heading > div > p {
  max-width: 820px;
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.78;
  color: rgba(255,255,255,.56);
}

.annual-v13-media {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #070708;
}

.annual-v13-media img {
  width: 100%;
  height: auto;
  display: block;
}

.annual-v13-value-map {
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}
.annual-v13-visual-layout {
  display: grid;
  grid-template-columns: minmax(230px, 3fr) minmax(0, 9fr);
  gap: clamp(36px, 5vw, 78px);
  align-items: center;
}
.annual-v13-visual-copy > p {
  margin: 0 0 28px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  color: rgba(255,255,255,.42);
}
.annual-v13-visual-copy h2 {
  margin: 0;
  font-size: clamp(36px, 4vw, 62px);
  line-height: 1.08;
  letter-spacing: -.055em;
}
.annual-v13-visual-copy > div > p {
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.78;
  color: rgba(255,255,255,.56);
}
.annual-v13-visual-styles { max-width: none; margin: 0; }
.annual-v13-wide-visual,
.annual-v13-storyline { border-radius: 0; }

.annual-v13-horizontal {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.28) transparent;
}

.annual-v13-journey {
  min-width: 960px;
  margin: 0;
  padding: 0 0 18px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  list-style: none;
}

.annual-v13-journey li { min-width: 0; }
.annual-v13-journey span {
  display: block;
  margin-bottom: 10px;
  font-size: 10px;
  letter-spacing: .14em;
  color: #ff4a4f;
}
.annual-v13-journey strong {
  display: block;
  min-height: 38px;
  font-size: 13px;
  font-weight: 600;
}
.annual-v13-journey img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
}

.annual-v13-phone-grid {
  display: grid;
  gap: var(--annual-v13-gap);
}
.annual-v13-phone-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.annual-v13-phone-grid-three {
  width: min(100%, 1040px);
  margin-inline: auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.annual-v13-phone-grid figure,
.annual-v13-motion-grid figure,
.annual-v13-music-grid figure,
.annual-v13-process-phone {
  min-width: 0;
  margin: 0;
}
.annual-v13-phone-grid video,
.annual-v13-process-phone video,
.annual-v13-process-phone img {
  width: 100%;
  display: block;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  border-radius: 18px;
  background: #050506;
}
.annual-v13-phone-clean .annual-v13-phone-crop {
  display: block;
  aspect-ratio: 9 / 19.5;
  overflow: hidden;
  border-radius: 18px;
  background: #050506;
}
.annual-v13-phone-clean .annual-v13-phone-crop video {
  width: 100%;
  height: 104%;
  display: block;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
}
.annual-v13-phone-grid figcaption,
.annual-v13-motion-grid figcaption,
.annual-v13-music-grid figcaption,
.annual-v13-process-phone figcaption {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.48);
}

.annual-v13-process {
  --annual-v13-process-media-height: clamp(360px, 31vw, 600px);
  --annual-v13-process-caption-space: 29px;
  display: grid;
  grid-template-columns: minmax(250px, .82fr) minmax(0, 2.65fr);
  gap: var(--annual-v13-gap);
  align-items: stretch;
}
.annual-v13-process-stage,
.annual-v13-character-panel {
  min-width: 0;
  padding: clamp(22px, 2.5vw, 34px);
  border-radius: 22px;
  background: #111113;
}
.annual-v13-process-stage {
  display: flex;
  flex-direction: column;
}
.annual-v13-process-stage-copy span,
.annual-v13-character-panel-head span {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #ff4a4f;
}
.annual-v13-process-stage-copy h3,
.annual-v13-character-panel-head h3 {
  margin: 12px 0 0;
  font-size: clamp(22px, 2vw, 30px);
  letter-spacing: -.035em;
}
.annual-v13-process-stage-copy p,
.annual-v13-character-panel-head > p {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.72;
  color: rgba(255,255,255,.52);
}
.annual-v13-process-stage .annual-v13-process-phone {
  width: clamp(166px, 14.3vw, 277px);
  margin: auto auto 0;
  padding-top: 30px;
}
.annual-v13-process-media {
  height: var(--annual-v13-process-media-height);
  min-height: var(--annual-v13-process-media-height);
  max-height: var(--annual-v13-process-media-height);
  box-sizing: border-box;
  flex: 0 0 var(--annual-v13-process-media-height);
}
.annual-v13-process-phone .annual-v13-process-media {
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: #050506;
}
.annual-v13-process-stage .annual-v13-process-phone video {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
}
.annual-v13-character-panel-head {
  margin-bottom: 28px;
  display: grid;
  grid-template-columns: minmax(220px, .9fr) minmax(260px, 1.1fr);
  gap: 28px;
  align-items: end;
}
.annual-v13-character-panel {
  display: flex;
  flex-direction: column;
}
.annual-v13-character-grid {
  margin-top: auto;
  margin-bottom: var(--annual-v13-process-caption-space);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.annual-v13-character-grid img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  border-radius: 0;
  background: transparent;
}

.annual-v13-share-video,
.annual-v13-motion-result {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #050506;
}
.annual-v13-share-video video,
.annual-v13-motion-result video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  background: #050506;
}
.annual-v13-share-video video { aspect-ratio: 1920 / 660; }
.annual-v13-share-video figcaption {
  padding: 18px 22px;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255,255,255,.48);
  background: #111113;
}

.annual-v13-share-content {
  display: grid;
  gap: clamp(72px, 8vw, 112px);
}
.annual-v13-share-preview {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(250px, 4fr) minmax(360px, 5fr);
  gap: clamp(40px, 6vw, 92px);
  align-items: center;
}
.annual-v13-share-preview-copy p,
.annual-v13-share-assets-head > p {
  margin: 0 0 24px;
  color: #ff5952;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
}
.annual-v13-share-preview-copy h3,
.annual-v13-share-assets-head h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.annual-v13-share-preview-copy span,
.annual-v13-share-assets-head span {
  display: block;
  max-width: 520px;
  margin-top: 22px;
  color: rgba(255,255,255,.48);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.8;
}
.annual-v13-share-video-viewport {
  position: relative;
  width: min(100%, 620px);
  aspect-ratio: 1 / 1;
  justify-self: end;
  overflow: hidden;
  border-radius: 20px;
  background: #050506;
}
.annual-v13-share-video-viewport video {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 200%;
  display: block;
  object-fit: cover;
  object-position: center top;
  background: #050506;
}
.annual-v13-share-assets {
  width: 100%;
}
.annual-v13-share-assets-head {
  display: block;
  margin-bottom: clamp(38px, 5vw, 64px);
}
.annual-v13-share-assets-head > p { margin: 0 0 24px; }
.annual-v13-share-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
}
.annual-v13-share-gallery article {
  min-width: 0;
}
.annual-v13-share-gallery h4 {
  margin: 0 0 34px;
  color: #fff;
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 500;
  line-height: 1.45;
}
.annual-v13-share-gallery figure {
  margin: 0 0 34px;
}
.annual-v13-share-gallery figure:last-child { margin-bottom: 0; }
.annual-v13-share-gallery figcaption {
  min-height: 24px;
  margin-bottom: 12px;
  color: rgba(255,255,255,.56);
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1.5;
}
.annual-v13-share-gallery img {
  width: 100%;
  aspect-ratio: 15 / 14;
  display: block;
  object-fit: cover;
  border-radius: 12px;
  background: #ba171b;
}

.annual-v13-extension-head {
  display: grid;
  grid-template-columns: minmax(220px, 3.5fr) minmax(0, 8.5fr);
  gap: var(--annual-v13-gap);
  align-items: start;
  margin-bottom: clamp(48px, 5vw, 72px);
}
.annual-v13-section-index {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  color: rgba(255,255,255,.42);
}
.annual-v13-extension-head > div {
  grid-column: 2;
  grid-row: 1;
  max-width: 720px;
}
.annual-v13-extension-head h2 {
  margin: 28px 0 0;
  font-size: clamp(36px, 4vw, 62px);
  line-height: 1.08;
  letter-spacing: -.055em;
}
.annual-v13-extension-head > div > p:not(.annual-v13-section-index) {
  max-width: 680px;
  margin: 22px 0 0;
  font-size: 15px;
  line-height: 1.78;
  color: rgba(255,255,255,.56);
}
.annual-v13-extension-video {
  grid-column: 1;
  grid-row: 1;
  width: min(100%, 330px);
  min-width: 0;
  margin: 0;
  justify-self: start;
  overflow: hidden;
  border-radius: 20px;
  background: #111113;
}
.annual-v13-extension-video video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #050506;
}
.annual-v13-extension-video figcaption {
  min-height: 52px;
  padding: 16px 18px;
  font-size: 12px;
  color: rgba(255,255,255,.48);
}
.annual-v13-extension-content {
  width: 100%;
}
.annual-v13-extension-content img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.annual-v13-steps {
  margin: 0 0 34px;
  padding: 0;
  display: grid;
  list-style: none;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  overflow: hidden;
}
.annual-v13-steps-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.annual-v13-steps li {
  min-height: 104px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid rgba(255,255,255,.1);
}
.annual-v13-steps li:last-child { border-right: 0; }
.annual-v13-steps span { font-size: 10px; color: #ff4a4f; }
.annual-v13-steps strong { font-size: 14px; font-weight: 600; }

.annual-v13-motion-result video {
  aspect-ratio: 1920 / 794;
}
.annual-v13-motion-result figcaption {
  padding: 22px 24px 24px;
  display: grid;
  grid-template-columns: 140px minmax(180px, .7fr) minmax(260px, 1.3fr);
  gap: 24px;
  align-items: start;
  background: #111113;
}
.annual-v13-motion-result figcaption span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #ff4a4f;
}
.annual-v13-motion-result figcaption strong { font-size: 18px; }
.annual-v13-motion-result figcaption p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,.5);
}

.annual-music-heading { margin-bottom: clamp(40px, 4.2vw, 64px); }

.annual-music-workflow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(72px, .25fr) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  margin-bottom: 42px;
}

.annual-music-workflow-step {
  min-width: 0;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

.annual-music-workflow-step img {
  width: 72px;
  height: 72px;
  display: block;
  object-fit: cover;
  border-radius: 18px;
}

.annual-music-workflow-step span {
  display: block;
  margin-bottom: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  color: #ff575b;
}

.annual-music-workflow-step strong {
  display: block;
  font-size: 18px;
  line-height: 1.35;
}

.annual-music-workflow-step p {
  margin: 7px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,.5);
}

.annual-music-workflow-line {
  position: relative;
  width: 100%;
  height: 1px;
  display: block;
  background: rgba(255,255,255,.34);
}

.annual-music-workflow-line::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 1px solid rgba(255,255,255,.66);
  border-right: 1px solid rgba(255,255,255,.66);
  transform: translateY(-50%) rotate(45deg);
}

.annual-music-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.annual-music-card {
  min-width: 0;
  min-height: 440px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  background: #262627;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}

.annual-music-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
}

.annual-music-card-head span {
  font-size: 10px;
  color: #ff575b;
}

.annual-music-card-head h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
}

.annual-music-card-head b {
  font-size: 9px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.44);
}

.annual-music-prompt {
  min-height: 92px;
  margin: 22px 0 20px;
  font-size: 12px;
  line-height: 1.68;
  color: rgba(255,255,255,.74);
}

.annual-music-card dl {
  margin: 0;
  display: grid;
  gap: 13px;
}

.annual-music-card dl div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
}

.annual-music-card dt {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .09em;
  color: #ff575b;
  white-space: nowrap;
}

.annual-music-card dd {
  margin: 0;
  font-size: 10px;
  line-height: 1.5;
  color: rgba(255,255,255,.46);
}

.annual-music-player {
  min-height: 48px;
  margin-top: auto;
  padding: 10px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border-radius: 12px;
  background: #111113;
}

.annual-music-player button {
  min-width: 50px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 100px;
  background: #f2f2ef;
  color: #111113;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}

.annual-music-player button[aria-pressed="true"] {
  background: #ff575b;
  color: #fff;
}

.annual-music-player > div { min-width: 0; }
.annual-music-player span {
  display: block;
  overflow: hidden;
  font-size: 9px;
  line-height: 1.25;
  color: rgba(255,255,255,.58);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.annual-music-player progress {
  width: 100%;
  height: 3px;
  display: block;
  margin-top: 7px;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
}

.annual-music-player progress::-webkit-progress-bar { background: rgba(255,255,255,.12); }
.annual-music-player progress::-webkit-progress-value { background: #ff575b; }
.annual-music-player progress::-moz-progress-bar { background: #ff575b; }
.annual-music-player time { font-size: 9px; color: rgba(255,255,255,.42); }

.annual-music-note {
  max-width: 760px;
  margin: 24px 0 0 auto;
  font-size: 11px;
  line-height: 1.65;
  color: rgba(255,255,255,.36);
  text-align: right;
}
.annual-v13-operation {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--annual-v13-gap);
  align-items: start;
}
.annual-v13-operation-copy {
  grid-column: 1 / span 3;
  padding: 28px;
  border-radius: 18px;
  background: #202022;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255,255,255,.62);
}
.annual-v13-operation-copy > strong { display: block; font-size: 18px; color: #f6f6f3; }
.annual-v13-operation-copy ul { margin: 24px 0 0; padding-left: 22px; }
.annual-v13-operation-copy li + li { margin-top: 12px; }
.annual-v13-operation-materials {
  grid-column: 4 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.annual-v13-operation-materials figure {
  min-width: 0;
  margin: 0;
  padding: 14px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: #111113;
}
.annual-v13-operation-materials figure.is-best { border-color: rgba(255,74,79,.62); }
.annual-v13-operation-materials img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
.annual-v13-operation-materials figcaption { padding: 18px 4px 4px; }
.annual-v13-operation-materials span { display: block; font-size: 10px; letter-spacing: .12em; color: rgba(255,255,255,.42); }
.annual-v13-operation-materials .is-best span { color: #ff6266; }
.annual-v13-operation-materials strong { display: block; margin-top: 10px; font-size: clamp(30px, 3vw, 44px); letter-spacing: -.045em; }
.annual-v13-operation-materials small { display: block; margin-top: 3px; font-size: 11px; color: rgba(255,255,255,.42); }
.annual-v13-operation-meter {
  margin-top: auto;
  padding: 18px 4px 4px;
}
.annual-v13-operation-meter > div {
  margin-bottom: 7px;
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: rgba(255,255,255,.3);
}
.annual-v13-operation-meter meter {
  width: 100%;
  height: 8px;
  display: block;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: #2a2a2c;
  accent-color: #ff4a4f;
}
.annual-v13-operation-meter meter::-webkit-meter-bar {
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: #2a2a2c;
}
.annual-v13-operation-meter meter::-webkit-meter-optimum-value {
  border-radius: 999px;
  background: #ff4a4f;
}
.annual-v13-operation-meter meter::-moz-meter-bar {
  border-radius: 999px;
  background: #ff4a4f;
}
.annual-v13-operation-chart {
  grid-column: 1 / -1;
  margin: 12px 0 0;
  padding: clamp(22px, 3vw, 38px);
  border-radius: 20px;
  background: #111113;
}
.annual-v13-operation-chart > figcaption { display: flex; align-items: baseline; gap: 18px; }
.annual-v13-operation-chart > figcaption span { font-size: 10px; letter-spacing: .14em; color: #ff4a4f; }
.annual-v13-operation-chart > figcaption strong { font-size: 18px; }
.annual-v13-operation-plot { margin-top: 30px; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
.annual-v13-operation-y { height: 190px; display: flex; flex-direction: column; justify-content: space-between; align-items: end; font-size: 9px; color: rgba(255,255,255,.32); }
.annual-v13-operation-chart-art { position: relative; height: 190px; overflow: hidden; }
.annual-v13-operation-chart-art img { position: absolute; inset-inline: 0; width: 100%; pointer-events: none; }
.annual-v13-operation-chart-art .axis,
.annual-v13-operation-chart-art .fill { inset-block: 0; height: 100%; }
.annual-v13-operation-chart-art .signal { top: 0; height: 49%; }
.annual-v13-operation-days {
  margin: 10px 0 0 48px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  list-style: none;
  text-align: center;
  font-size: 9px;
  color: rgba(255,255,255,.3);
}

.annual-v13-result {
  padding-block: clamp(110px, 10vw, 170px);
  background: #050506;
}
.annual-v13-result h2 { margin-top: 18px; }
.annual-v13-result-metrics {
  margin-top: clamp(58px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid rgba(255,255,255,.14);
}
.annual-v13-result-metrics article {
  min-height: 220px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-right: 1px solid rgba(255,255,255,.14);
}
.annual-v13-result-metrics article:last-child { border-right: 0; }
.annual-v13-result-metrics strong { font-size: clamp(34px, 4.5vw, 68px); letter-spacing: -.055em; }
.annual-v13-result-metrics span { margin-top: 12px; font-size: 13px; color: rgba(255,255,255,.48); }
.annual-v13-tools {
  margin-top: 34px;
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  border-radius: 16px;
  background: #141416;
}
.annual-v13-tools h3 { margin: 0; font-size: 18px; }
.annual-v13-tools-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.annual-v13-tools-grid article { min-width: 0; display: flex; gap: 12px; align-items: center; }
.annual-v13-tools-grid img { width: 48px; height: 48px; flex: 0 0 48px; display: block; object-fit: cover; border-radius: 10px; }
.annual-v13-tools-grid strong { display: block; font-size: 14px; }
.annual-v13-tools-grid span { display: block; margin-top: 5px; font-size: 10px; line-height: 1.45; color: rgba(255,255,255,.42); }
.annual-v13-delivery {
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.annual-v13-delivery > div { padding: 22px; border-radius: 14px; background: #141416; }
.annual-v13-delivery span { display: block; font-size: 11px; color: rgba(255,255,255,.42); }
.annual-v13-delivery strong { display: block; margin-top: 8px; font-size: 18px; }
.annual-v13-result > .annual-v13-shell > a {
  width: max-content;
  margin-top: 70px;
  padding-bottom: 5px;
  display: block;
  border-bottom: 1px solid rgba(255,255,255,.4);
  font-size: 14px;
  color: rgba(255,255,255,.7);
}

@media (max-width: 1040px) {
  .annual-v13-page { --annual-v13-gutter: clamp(24px, 5vw, 52px); }
  .annual-v13-phone-grid-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .annual-v13-phone-grid figure { width: min(100%, 360px); justify-self: center; }
  .annual-v13-process { grid-template-columns: 1fr; }
  .annual-v13-process-stage {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: 34px;
    align-items: center;
  }
  .annual-v13-process-stage .annual-v13-process-phone { grid-column: 1; grid-row: 1; margin: 0 auto; }
  .annual-v13-process-stage-copy { grid-column: 2; grid-row: 1; max-width: 520px; }
  .annual-v13-character-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .annual-v13-extension-head { grid-template-columns: minmax(180px, 2.6fr) minmax(0, 7.4fr); }
  .annual-v13-visual-layout { grid-template-columns: minmax(210px, 3.4fr) minmax(0, 8.6fr); gap: 34px; }
  .annual-v13-operation-copy { grid-column: 1 / span 3; }
  .annual-v13-operation-materials { grid-column: 4 / -1; }
  .annual-v13-tools { grid-template-columns: 1fr; }
  .annual-v13-share-gallery { gap: 24px; }
  .annual-music-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .annual-music-card { min-height: 420px; }
}

@media (max-width: 760px) {
  .annual-v13-page { --annual-v13-gutter: 24px; --annual-v13-space: 78px; }
  .annual-v13-hero { height: 82svh; min-height: 600px; }
  .annual-v13-hero-copy { inset: 72px 0 0; }
  .annual-v13-overview-grid,
  .annual-v13-heading,
  .annual-v13-extension-head { display: block; }
  .annual-v13-phone-grid-three { grid-template-columns: 1fr; }
  .annual-v13-visual-layout { grid-template-columns: 1fr; gap: 38px; }
  .annual-v13-overview-grid > p { margin-top: 34px; }
  .annual-v13-heading > p,
  .annual-v13-extension-head > p { margin-bottom: 18px; }
  .annual-v13-heading > div > p,
  .annual-v13-extension-head > div > p { max-width: none; }
  .annual-v13-media { border-radius: 14px; }
  .annual-v13-value-map { overflow: visible; }
  .annual-v13-value-map img { width: 100%; min-width: 0; max-width: 100%; }
  .annual-v13-wide-visual,
  .annual-v13-storyline { overflow-x: auto; border-radius: 0; }
  .annual-v13-wide-visual img { width: auto; min-width: 760px; max-width: none; }
  .annual-v13-storyline img { width: auto; min-width: 720px; max-width: none; }
  .annual-v13-steps-five { grid-template-columns: 1fr; }
  .annual-v13-steps li { min-height: 86px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .annual-v13-steps li:last-child { border-bottom: 0; }
  .annual-v13-share-video,
  .annual-v13-motion-result { border-radius: 16px; }
  .annual-v13-share-preview { grid-template-columns: 1fr; gap: 34px; }
  .annual-v13-share-video-viewport { width: min(100%, 520px); justify-self: start; }
  .annual-v13-share-assets-head { display: block; }
  .annual-v13-share-assets-head > p { margin-bottom: 18px; }
  .annual-v13-share-gallery {
    grid-template-columns: repeat(5, minmax(178px, 1fr));
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-snap-type: x proximity;
  }
  .annual-v13-share-gallery article { scroll-snap-align: start; }
  .annual-v13-motion-result figcaption { grid-template-columns: 1fr; gap: 10px; }
  .annual-v13-extension-video { width: min(100%, 330px); margin: 38px auto 0; justify-self: auto; }
  .annual-v13-extension-video video { height: auto; min-height: 0; aspect-ratio: 9 / 16; }
  .annual-music-workflow { grid-template-columns: 1fr; gap: 18px; }
  .annual-music-workflow-line { width: 1px; height: 34px; margin-left: 35px; }
  .annual-music-workflow-line::after { right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
  .annual-music-note { margin-left: 0; text-align: left; }
  .annual-v13-operation { grid-template-columns: 1fr; }
  .annual-v13-operation-copy,
  .annual-v13-operation-materials,
  .annual-v13-operation-chart { grid-column: auto; }
  .annual-v13-operation-materials { grid-template-columns: repeat(3, minmax(180px, 1fr)); overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
  .annual-v13-operation-materials figure { scroll-snap-align: start; }
  .annual-v13-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .annual-v13-result-metrics { grid-template-columns: 1fr; }
  .annual-v13-result-metrics article { min-height: 150px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .annual-v13-result-metrics article:last-child { border-bottom: 0; }
}

@media (max-width: 520px) {
  .annual-v13-page { --annual-v13-gutter: 20px; --annual-v13-space: 68px; }
  .annual-v13-hero { height: 74svh; min-height: 560px; }
  .annual-v13-hero-copy h1 {
    max-width: calc(100vw - 32px);
    font-size: clamp(24px, 6.6vw, 38px);
  }
  .annual-v13-phone-grid-four { grid-template-columns: 1fr; }
  .annual-v13-process { gap: 16px; }
  .annual-v13-process-stage { display: block; }
  .annual-v13-process-stage .annual-v13-process-phone { margin-top: 26px; }
  .annual-v13-character-panel-head { display: block; }
  .annual-v13-character-panel-head > p { max-width: none; }
  .annual-v13-character-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .annual-music-cards { grid-template-columns: 1fr; }
  .annual-music-card { min-height: 0; }
  .annual-music-prompt { min-height: 0; }
  .annual-music-player { margin-top: 26px; }
  .annual-v13-operation-chart { padding-inline: 16px; }
  .annual-v13-operation-y,
  .annual-v13-operation-chart-art { height: 150px; }
  .annual-v13-operation-days { margin-left: 48px; font-size: 8px; }
  .annual-v13-tools { padding: 22px; }
  .annual-v13-tools-grid { grid-template-columns: 1fr; }
  .annual-v13-delivery { grid-template-columns: 1fr; }
}

/* Work directory — one card template for every project. */
.work-page .directory-grid {
  align-items: stretch;
}

.work-page .directory-grid .project-card {
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
}

.work-page .directory-grid .cover {
  width: 100%;
  aspect-ratio: 708 / 398;
}

.work-page .directory-grid .project-copy {
  min-height: 118px;
  padding-top: 22px;
  display: flex;
  align-items: flex-start;
}

.work-page .directory-grid .project-copy > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.work-page .directory-grid .project-card h2 {
  margin: 0 0 9px;
  font-size: clamp(24px, 1.7vw, 31px);
  line-height: 1.3;
}

.work-page .directory-grid .project-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.65;
}

/* About toolkit — official product marks keep their native colour and shape. */
.product-icon.icon-dream,
.product-icon.icon-lovart,
.product-icon.icon-figma,
.product-icon.icon-spline {
  background: #232326;
}

.product-icon.icon-dream img,
.product-icon.icon-lovart img,
.product-icon.icon-figma img,
.product-icon.icon-spline img {
  filter: none;
  object-fit: contain;
}

.product-icon.icon-dream img,
.product-icon.icon-lovart img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-icon.icon-figma img { width: 30px; height: 30px; }
.product-icon.icon-spline img { width: 36px; height: 36px; }

/* Homepage testimonials — compact sticky notes with simulated avatars. */
.home-page .colleague-grid {
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(58px, 7vw, 112px);
}

.colleague-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.colleague-note {
  min-height: 250px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  color: #181817;
  box-shadow: 0 18px 45px rgba(36,58,92,.12);
  transform: rotate(-1.2deg);
  transition: transform .3s ease, box-shadow .3s ease;
}

.colleague-note:nth-child(2) {
  margin-top: 34px;
  transform: rotate(1.15deg);
}

.colleague-note:nth-child(3) {
  grid-column: 1 / -1;
  width: 72%;
  min-height: 220px;
  margin: -2px 2% 0 auto;
  transform: rotate(-.55deg);
}

.colleague-note:hover {
  transform: rotate(0) translateY(-4px);
  box-shadow: 0 24px 60px rgba(36,58,92,.16);
}

.colleague-note-yellow { background: #fff2ad; }
.colleague-note-pink { background: #ffd9de; }
.colleague-note-green { background: #dff4d8; }

.colleague-note header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.note-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .04em;
}

.note-avatar-blue { background: linear-gradient(145deg, #6c8dff, #4154a5); }
.note-avatar-orange { background: linear-gradient(145deg, #ff9a59, #d65c4a); }
.note-avatar-violet { background: linear-gradient(145deg, #b98cff, #6c50b8); }

.colleague-note header strong {
  display: block;
  font-size: 14px;
}

.colleague-note header small {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  color: rgba(24,24,23,.48);
}

.colleague-note > p {
  margin: auto 0 0;
  font-size: 15px;
  line-height: 1.72;
  color: rgba(24,24,23,.72);
}

@media (max-width: 900px) {
  .home-page .colleague-grid { grid-template-columns: 1fr; }
  .colleague-notes { max-width: 760px; }
}

@media (max-width: 580px) {
  .colleague-notes { grid-template-columns: 1fr; gap: 14px; }
  .colleague-note,
  .colleague-note:nth-child(2),
  .colleague-note:nth-child(3) {
    grid-column: auto;
    width: 100%;
    min-height: 210px;
    margin: 0;
    transform: none;
  }
}

/* About toolkit — light surface, aligned with the rest of the profile page. */
.about-page .toolkit-card {
  background: #e4e7e2;
  color: #171817;
}

.about-page .toolkit-intro,
.about-page .tool-group + .tool-group {
  border-color: rgba(23,24,23,.1);
}

.about-page .toolkit-intro span,
.about-page .tool-group strong {
  color: rgba(23,24,23,.46);
}

.about-page .toolkit-intro p {
  color: rgba(23,24,23,.72);
}

.about-page .tool-group p,
.about-page .tool-group span {
  color: rgba(23,24,23,.76);
}

.about-page .product-tool-grid li > span:last-child {
  color: rgba(23,24,23,.58);
}

.about-page .product-icon {
  box-shadow: inset 0 0 0 1px rgba(23,24,23,.08);
}

.resume-item-education .resume-projects {
  grid-template-columns: minmax(0, 1fr);
  max-width: 680px;
}

/* Belt tool features — responsive product UI instead of full-slide screenshots. */
.belt-tool-capabilities {
  margin-bottom: 44px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.belt-tool-capabilities > article {
  min-width: 0;
  min-height: 310px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: #181818;
}

.belt-tool-capabilities > article > span {
  margin-top: 22px;
  font-size: 9px;
  letter-spacing: .13em;
  color: #ff5b53;
}

.belt-tool-capabilities h3 {
  margin: auto 0 10px;
  font-size: 20px;
  letter-spacing: -.025em;
}

.belt-tool-capabilities p {
  margin: 0;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(255,255,255,.5);
}

.belt-tool-capability-visual {
  height: 108px;
  padding: 16px;
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  background: #0d1015;
}

.belt-tool-capability-config {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.belt-tool-capability-config span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #dd302d;
  box-shadow: 0 0 0 3px rgba(221,48,45,.16);
}
.belt-tool-capability-config span:nth-child(2) { background: #f4a62a; box-shadow: none; }
.belt-tool-capability-config span:nth-child(3) { background: #4468ee; box-shadow: none; }
.belt-tool-capability-config i {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 22px;
  height: 5px;
  border-radius: 5px;
  background: #2c313c;
}
.belt-tool-capability-config i::after {
  content: "";
  position: absolute;
  left: 58%;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #6e92ff;
  transform: translate(-50%, -50%);
}

.belt-tool-capability-preview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.belt-tool-capability-preview i {
  display: block;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(90deg, #d82927, #ed5848);
}
.belt-tool-capability-preview i:nth-child(2) { height: 24px; }
.belt-tool-capability-preview i:nth-child(3) { width: 78%; height: 15px; }

.belt-tool-capability-export {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  gap: 8px;
  align-items: center;
}
.belt-tool-capability-export b {
  grid-row: 1 / -1;
  font-size: 30px;
  font-weight: 500;
  color: #7da0ff;
}
.belt-tool-capability-export span {
  padding: 6px 8px;
  border-radius: 5px;
  background: #242a36;
  font-size: 9px;
  text-align: center;
  color: rgba(255,255,255,.66);
}

.belt-tool-capability-audit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: center;
}
.belt-tool-capability-audit i {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(77,185,116,.15);
  color: #56c983;
  font-size: 14px;
  font-style: normal;
}
.belt-tool-capability-audit i:last-child { background: rgba(245,162,50,.14); color: #f3ac48; }

.belt-tool-interface-gallery {
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: minmax(0, 2.6fr) minmax(230px, .8fr);
  gap: 16px;
  align-items: stretch;
}

.belt-tool-interface-gallery figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 15px;
  background: #0d1119;
}

.belt-tool-window-bar {
  min-height: 38px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #111722;
}
.belt-tool-window-bar > span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff6c63;
}
.belt-tool-window-bar > span:nth-child(2) { background: #f5be4f; }
.belt-tool-window-bar > span:nth-child(3) { background: #62c955; }
.belt-tool-window-bar small {
  margin-left: 6px;
  font-size: 9px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.38);
}

.belt-tool-interface-gallery img {
  width: 100%;
  min-height: 0;
  display: block;
  flex: 1;
  object-fit: contain;
  object-position: center top;
  background: #0b0f17;
}
.belt-tool-interface-desktop img { aspect-ratio: 1265 / 712; }
.belt-tool-interface-mobile img { height: 100%; max-height: 620px; }
.belt-tool-device-bar {
  width: 58px;
  height: 5px;
  margin: 11px auto 8px;
  flex: 0 0 auto;
  border-radius: 5px;
  background: #333b48;
}
.belt-tool-interface-gallery figcaption {
  padding: 14px 16px;
  font-size: 10px;
  line-height: 1.5;
  color: rgba(255,255,255,.45);
  background: #111722;
}

.belt-audit-board {
  margin-bottom: 28px;
  padding: clamp(18px, 2.6vw, 34px);
  border-radius: 16px;
  background: #0d1118;
}
.belt-audit-board > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.belt-audit-board > header span {
  display: block;
  margin-bottom: 8px;
  font-size: 9px;
  letter-spacing: .14em;
  color: #718dce;
}
.belt-audit-board > header strong { font-size: 20px; }
.belt-audit-board > header p { margin: 0; font-size: 12px; color: rgba(255,255,255,.48); }
.belt-audit-board > header p b { color: #fff; }
.belt-audit-preview {
  min-height: 106px;
  margin: 26px 0 18px;
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(74px,.5fr) minmax(140px,1fr) minmax(150px,1.2fr) minmax(130px,.9fr);
  align-items: center;
  gap: 20px;
  border-radius: 10px;
  background: linear-gradient(100deg, #d32825, #ed594c);
}
.belt-audit-preview span { font-size: 11px; font-weight: 700; }
.belt-audit-preview strong { font-size: clamp(24px,3vw,40px); letter-spacing: -.04em; }
.belt-audit-preview em { font-size: 12px; font-style: normal; color: rgba(255,255,255,.75); }
.belt-audit-preview > b { font-size: 15px; text-align: right; }
.belt-audit-checks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.belt-audit-checks article {
  min-width: 0;
  min-height: 128px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  border-radius: 9px;
  background: #171d27;
}
.belt-audit-checks span { font-size: 8px; letter-spacing: .1em; color: #58c67e; }
.belt-audit-checks .is-warning span { color: #f3aa44; }
.belt-audit-checks strong { margin: auto 0 7px; font-size: 13px; }
.belt-audit-checks p { margin: 0; font-size: 11px; color: rgba(255,255,255,.46); }

@media (max-width: 1100px) {
  .belt-tool-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .belt-tool-interface-gallery { grid-template-columns: 1fr; }
  .belt-tool-interface-mobile { width: min(100%, 380px); justify-self: center; }
  .belt-audit-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .belt-tool-capabilities { grid-template-columns: 1fr; }
  .belt-tool-capabilities > article { min-height: 280px; }
  .belt-audit-board > header { align-items: flex-start; flex-direction: column; gap: 12px; }
  .belt-audit-preview { grid-template-columns: 1fr auto; gap: 10px 14px; }
  .belt-audit-preview em { grid-column: 1 / -1; }
  .belt-audit-preview > b { grid-column: 2; grid-row: 1; }
  .belt-audit-checks { grid-template-columns: 1fr; }
}

/* Belt case v3 — follow the original Figma story order and hero composition. */
.belt-web-hero {
  min-height: 100svh;
  background: #050505;
}

.belt-web-hero .belt-figma-hero {
  min-height: 100svh;
  padding: clamp(146px, 17vh, 190px) 0 84px;
  position: relative;
  display: block;
  overflow: hidden;
}

.belt-figma-hero .case-hero-copy {
  width: min(760px, calc(100% - 48px));
  margin-inline: auto;
  position: relative;
  z-index: 3;
  text-align: center;
}

.belt-figma-hero .case-kicker {
  margin-bottom: 18px;
  justify-content: center;
}

.belt-page .belt-figma-hero h1 {
  font-size: clamp(38px, 4.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -.055em;
}

.belt-figma-hero .case-hero-copy > p {
  max-width: 720px;
  margin: 20px auto 0;
  font-size: clamp(14px, 1.1vw, 18px);
}

.belt-figma-hero .belt-hero-cover {
  position: absolute;
  z-index: 1;
  inset: 88px 0 0;
  width: 100%;
  height: calc(100% - 88px);
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  opacity: .78;
  background: #050505;
}

.belt-figma-hero .belt-hero-cover::before { display: none; }
.belt-figma-hero .belt-hero-cover img { object-fit: cover; object-position: center 56%; }

.belt-hero-mark {
  width: 64px;
  height: 64px;
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 48%;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: #ff5a1f;
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
  transform: translate(-50%, -50%);
}

.belt-hero-mark span { font-size: 25px; font-weight: 850; line-height: 1; }
.belt-hero-mark small { position: absolute; bottom: 6px; font-size: 6px; font-weight: 800; letter-spacing: .06em; }

.belt-hero-ribbon {
  width: min(820px, 62vw);
  min-height: 92px;
  padding: 18px 24px;
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: clamp(112px, 15vh, 158px);
  display: grid;
  grid-template-columns: minmax(90px, .7fr) minmax(160px, 1.2fr) minmax(150px, 1fr) minmax(130px, .9fr);
  grid-template-areas: "brand price detail slogan" "brand price benefit slogan";
  gap: 4px 22px;
  align-items: center;
  overflow: hidden;
  border-radius: 10px;
  background: linear-gradient(100deg, #ef251d 0%, #ff4b26 62%, #d71d17 100%);
  box-shadow: 0 24px 70px rgba(0,0,0,.38);
  transform: translateX(-50%);
}

.belt-hero-ribbon::after {
  content: "";
  width: 160px;
  height: 160px;
  position: absolute;
  right: 10%;
  top: -84px;
  border: 18px solid rgba(255,255,255,.09);
  border-radius: 50%;
}

.belt-hero-ribbon span { grid-area: brand; font-size: 13px; font-weight: 750; }
.belt-hero-ribbon strong { grid-area: price; font-size: clamp(34px, 3.2vw, 54px); letter-spacing: -.055em; }
.belt-hero-ribbon strong small { font-size: .44em; }
.belt-hero-ribbon strong sup { font-size: .45em; }
.belt-hero-ribbon em { grid-area: detail; font-size: 12px; font-style: normal; color: rgba(255,255,255,.82); }
.belt-hero-ribbon b { grid-area: benefit; font-size: 12px; }
.belt-hero-ribbon i { grid-area: slogan; position: relative; z-index: 1; font-size: 13px; font-style: normal; font-weight: 700; text-align: right; }

.belt-hero-scroll {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 38px;
  margin: 0;
  transform: translateX(-50%);
}

.belt-challenge-grid > article {
  aspect-ratio: 1;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;
  text-align: center;
  background: #050505;
}

.belt-challenge-grid > article > span { align-self: center; }
.belt-challenge-grid h3 { margin: 34px 0 22px; }
.belt-challenge-grid ul { width: 100%; margin: 0; }
.belt-challenge-grid .belt-challenge-result { background: #050505; }
.belt-challenge-result dl { width: 100%; margin: 22px 0 0; }
.belt-challenge-result dd { color: #ff4d45; }

.belt-system-flow { gap: clamp(24px, 3vw, 46px); }
.belt-system-flow li {
  aspect-ratio: 1;
  min-height: 0;
  position: relative;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  text-align: center;
  background: #171717;
}
.belt-system-flow li:nth-child(4) { background: #252525; }
.belt-system-flow li:not(:last-child)::after {
  content: "→";
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  color: rgba(255,255,255,.36);
  transform: translateY(-50%);
}
.belt-system-flow span { position: absolute; top: 24px; }
.belt-system-flow strong { margin: 0; }
.belt-system-flow p { min-height: 0; margin-top: 12px; }

.belt-color-tuner {
  margin-top: 48px;
  padding: clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: minmax(260px, 1.35fr) repeat(2, minmax(210px, 1fr));
  gap: clamp(24px, 3vw, 46px);
  align-items: end;
  border-radius: 18px;
  background: #080808;
}

.belt-color-tuner > div > span {
  font-size: 9px;
  letter-spacing: .14em;
  color: #ff5a52;
}
.belt-color-tuner h3 { margin: 12px 0 10px; font-size: clamp(24px, 2.4vw, 38px); letter-spacing: -.04em; }
.belt-color-tuner p { max-width: 520px; margin: 0; font-size: 13px; line-height: 1.7; color: rgba(255,255,255,.5); }
.belt-color-tuner label {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 18px;
  align-items: center;
}
.belt-color-tuner label > span { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.5); }
.belt-color-tuner output { font-size: 14px; font-variant-numeric: tabular-nums; color: #fff; }
.belt-color-tuner input[type="range"] {
  grid-column: 1 / -1;
  width: 100%;
  height: 24px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}
.belt-color-tuner input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,90,82,.9));
}
.belt-color-tuner input[type="range"]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -7px;
  appearance: none;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #ff554d;
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.belt-color-tuner input[type="range"]::-moz-range-track {
  height: 4px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,90,82,.9));
}
.belt-color-tuner input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #ff554d;
}

.belt-color-rule-grid[data-belt-color-grid] article::before {
  background: oklch(var(--belt-lightness) var(--belt-chroma) var(--hue));
  transition: background-color .12s linear;
}
.belt-color-rule-grid[data-belt-color-grid] .belt-color-neutral::before {
  background: oklch(var(--belt-lightness) calc(var(--belt-chroma) * .24) var(--hue));
}

.belt-case-index { top: 84px; }

.belt-component-layout-new { display: block; }
.belt-component-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.belt-component-preview-new { margin-top: 18px; }
.belt-component-preview-new .belt-mini-belt { min-height: 126px; }

@media (max-width: 1100px) {
  .belt-hero-ribbon { width: min(860px, calc(100% - 96px)); }
  .belt-challenge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .belt-system-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .belt-system-flow li:not(:last-child)::after { display: none; }
  .belt-color-tuner { grid-template-columns: 1fr 1fr; }
  .belt-color-tuner > div { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .belt-case-index { top: 70px; }
  .belt-web-hero .belt-figma-hero { min-height: 760px; padding-top: 132px; }
  .belt-figma-hero .belt-hero-cover { top: 72px; height: calc(100% - 72px); }
  .belt-hero-mark { top: 46%; }
  .belt-hero-ribbon {
    width: calc(100% - 48px);
    bottom: 104px;
    grid-template-columns: 1fr auto;
    grid-template-areas: "brand slogan" "price price" "detail benefit";
  }
  .belt-hero-ribbon i { text-align: right; }
  .belt-component-groups { grid-template-columns: 1fr; }
  .belt-color-tuner { grid-template-columns: 1fr; }
  .belt-color-tuner > div { grid-column: auto; }
}

@media (max-width: 560px) {
  .belt-web-hero .belt-figma-hero { min-height: 700px; }
  .belt-figma-hero .case-hero-copy { width: calc(100% - 24px); }
  .belt-page .belt-figma-hero h1 { font-size: clamp(35px, 11vw, 48px); }
  .belt-figma-hero .case-hero-copy > p { font-size: 13px; line-height: 1.65; }
  .belt-hero-mark { top: 45%; width: 54px; height: 54px; border-radius: 14px; }
  .belt-hero-ribbon { width: calc(100% - 40px); padding: 16px 18px; gap: 4px 12px; }
  .belt-hero-ribbon strong { font-size: 36px; }
  .belt-hero-ribbon em,
  .belt-hero-ribbon b,
  .belt-hero-ribbon i { font-size: 10px; }
  .belt-challenge-grid { grid-template-columns: 1fr; }
  .belt-challenge-grid > article { width: min(100%, 340px); justify-self: center; }
  .belt-system-flow { grid-template-columns: 1fr; }
  .belt-system-flow li { width: min(100%, 280px); justify-self: center; }
  .belt-component-preview-new { padding: 16px; }
  .belt-component-preview-new .belt-mini-belt { min-height: 112px; }
}
/* Belt case — faithful Figma source presentation */
.belt-source-page {
  margin: 0;
  min-width: 320px;
  background: #000;
  color: #fff;
}

.belt-source-page .belt-source-canvas,
.belt-source-page .belt-source-sheet {
  width: 100%;
  margin: 0;
  padding: 0;
}

.belt-source-page .belt-source-sheet {
  line-height: 0;
  overflow: hidden;
}

.belt-source-page .belt-source-sheet img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}