@font-face{font-family:"Newsreader";src:url("assets/fonts/newsreader-400.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Newsreader";src:url("assets/fonts/newsreader-700.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"Work Sans";src:url("assets/fonts/work-sans-400.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Work Sans";src:url("assets/fonts/work-sans-600.ttf") format("truetype");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"Work Sans";src:url("assets/fonts/work-sans-700.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap}

:root {
  color-scheme: light;
  --bg: #ffffff;
  --text: #111111;
  --muted: #666666;
  --line: #dedede;
  --accent: #5f50ff;
  --max: 1240px;
  --pad: clamp(1.25rem, 4vw, 4rem);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Work Sans", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; text-underline-offset: 0.22em; }
button { font: inherit; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
}

.nav {
  width: min(100%, var(--max));
  min-height: 72px;
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand { font-weight: 700; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
.nav-toggle { display: none; border: 0; background: transparent; padding: 0.5rem 0; cursor: pointer; }

main, .footer-inner {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding-inline: var(--pad);
}

.intro {
  min-height: 78vh;
  display: grid;
  align-content: center;
  padding-block: clamp(5rem, 13vw, 10rem);
  border-bottom: 1px solid var(--line);
}

.eyebrow, .meta-label {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 15ch; margin-bottom: 2rem; font-size: clamp(3rem, 7.4vw, 7rem); line-height: 0.94; letter-spacing: -0.055em; }
.intro-copy { max-width: 48rem; margin: 0; color: var(--muted); font-size: clamp(1.1rem, 2vw, 1.5rem); }
.intro-footer { display: grid; grid-template-columns: 2fr 1fr; gap: 2rem; align-items: end; margin-top: clamp(3rem, 8vw, 7rem); }
.intro-note { margin: 0; color: var(--muted); }

.section { padding-block: clamp(4.5rem, 9vw, 8rem); border-bottom: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: minmax(10rem, 1fr) 2fr; gap: 2rem; margin-bottom: clamp(2.5rem, 6vw, 5rem); }
.section-heading h2 { margin: 0; font-size: clamp(2rem, 4vw, 4rem); letter-spacing: -0.04em; }
.section-heading p { max-width: 42rem; margin: 0; color: var(--muted); }

.project-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.project-link { display: grid; grid-template-columns: 3rem 2fr 1fr auto; align-items: baseline; gap: 1.5rem; padding: 1.6rem 0; border-bottom: 1px solid var(--line); }
.project-link:hover { text-decoration: none; }
.project-link:hover .project-title, .project-link:focus-visible .project-title { text-decoration: underline; text-underline-offset: 0.16em; }
.project-title { font-size: clamp(1.45rem, 3vw, 2.5rem); letter-spacing: -0.03em; }
.project-index, .project-type, .project-status { color: var(--muted); }
.project-link:hover .project-index, .project-link:focus-visible .project-index { color: var(--accent); }

.shipped-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.shipped-card { padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; color: var(--text); text-align: left; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease; }
.shipped-card:hover, .shipped-card:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 50px rgba(23, 32, 59, 0.12); outline: none; }
.shipped-card--yeye { border-color: #262930; background: #1e202c; color: #f5f6f9; }
.shipped-preview { position: relative; display: flex; min-height: 360px; padding: clamp(1.5rem, 4vw, 3.5rem); overflow: hidden; }
.shipped-preview--snap { align-items: center; background: #f1f3f8; }
.shipped-preview--yeye { align-items: center; justify-content: center; gap: clamp(0.6rem, 1.8vw, 1.2rem); background: #0e0f12; }
.shipped-card-meta { display: flex; justify-content: space-between; gap: 1rem; padding: 1.4rem 1.5rem 0.4rem; color: #8d93ab; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.shipped-card > strong { display: block; padding: 0 1.5rem; font-family: "Newsreader", Georgia, serif; font-size: clamp(2rem, 4vw, 3.7rem); font-weight: 600; line-height: 1; }
.shipped-card-copy { display: block; min-height: 5.5rem; padding: 0.8rem 1.5rem 1.6rem; color: #666; }
.shipped-card--yeye .shipped-card-copy { color: #9196a6; }
.mini-browser { display: block; width: 100%; max-width: 470px; margin: auto; overflow: hidden; border: 1px solid #d6dbe8; border-radius: 13px; background: #fff; box-shadow: 0 14px 35px rgba(80, 97, 140, 0.12); }
.mini-toolbar { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; background: #f6f7fb; }
.mini-toolbar i { width: 7px; height: 7px; border-radius: 50%; background: #f0615c; }
.mini-toolbar i:nth-child(2) { background: #f5b84f; }.mini-toolbar i:nth-child(3) { background: #59b86e; }
.mini-toolbar b { width: 65%; height: 18px; margin-left: 8px; border: 1px solid #d6dbe8; border-radius: 10px; background: #fff; }
.mini-page { display: block; padding: 20px; background: #fff; }
.mini-copy { display: block; width: 60%; height: 24px; border-radius: 6px; background: linear-gradient(#d4dbed 0 7px, transparent 7px 12px, #e5ebf5 12px 18px, transparent 18px); }
.mini-selection { display: block; width: 72%; height: 110px; margin: 10px 0 18px; border: 2px dashed #5c82ff; border-radius: 8px; background: #e0e8f7; }
.mini-gallery-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; border-radius: 8px; background: #f6f7fb; }
.mini-gallery-row img { width: 100%; aspect-ratio: 1.35; object-fit: cover; border-radius: 4px; background: #fff; }
.mini-watch { display: grid; place-items: center; width: 28%; max-width: 150px; aspect-ratio: 0.83; border: 3px solid #ebebf2; border-radius: 28px; background: #000; box-shadow: 0 12px 25px rgba(0,0,0,.35); color: #000; }
.mini-watch > b { display: grid; place-items: center; width: 58%; aspect-ratio: 1; border-radius: 50%; background: #d7f230; font-size: clamp(0.7rem, 1.5vw, 1rem); }
.mini-watch--score, .mini-watch--result { align-content: center; gap: 8px; color: #fff; font-style: normal; }
.mini-watch--score small { padding: 2px 14px; border-radius: 4px; background: #4a4b63; }.mini-watch--score > b { width: auto; aspect-ratio: auto; background: none; font-size: 1.25rem; }.mini-watch--score em { color: #89889d; font-size: 0.55rem; font-style: normal; }
.mini-watch--result small { font-size: 0.58rem; }.mini-watch--result > b { width: auto; aspect-ratio: auto; background: none; color: #fff; font-size: clamp(1.5rem, 3vw, 2.4rem); }.mini-watch--result em { padding: 3px 16px; border-radius: 20px; background: #d7f230; color: #1e202c; font-size: 0.58rem; font-style: normal; }

.project-modal[hidden] { display: none; }
.project-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: clamp(0.75rem, 3vw, 2.5rem); }
.project-modal-backdrop { position: absolute; inset: 0; background: rgba(12, 14, 20, 0.72); backdrop-filter: blur(8px); }
.project-modal-panel { position: relative; width: min(1440px, 96vw); max-height: 92vh; overflow: auto; border-radius: 18px; box-shadow: 0 30px 90px rgba(0,0,0,.3); }
.project-modal-panel--snap { background: #f1f3f8; }.project-modal-panel--yeye { background: #1e202c; color: #f5f6f9; }
.project-modal-panel--snap .shipped-detail { grid-template-columns: minmax(500px, .95fr) minmax(520px, 1.05fr); gap: clamp(2rem, 4vw, 5rem); }
.project-modal-panel--snap .shipped-detail h2 { font-size: clamp(3rem, 3.7vw, 3.25rem); }
.modal-close { position: sticky; top: 1rem; z-index: 2; float: right; display: flex; align-items: center; gap: 0.6rem; margin: 1rem 1rem -3rem 0; padding: 0.65rem 0.8rem 0.65rem 1rem; border: 1px solid rgba(128,134,153,.28); border-radius: 999px; background: rgba(255,255,255,.92); color: #111; cursor: pointer; }
.modal-close span { font-size: 1.3rem; line-height: 1; }.project-modal-panel--yeye .modal-close { border-color: #3b3e49; background: rgba(20,22,28,.92); color: #fff; }
.shipped-detail { display: grid; grid-template-columns: minmax(390px, .92fr) minmax(520px, 1.08fr); gap: clamp(3rem, 6vw, 7rem); min-height: 860px; padding: clamp(3.5rem, 6vw, 6rem) clamp(2rem, 5vw, 5rem); }
.detail-eyebrow { margin: 0 0 3rem; color: #5c82ff; font-size: 0.82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.project-modal-panel--yeye .detail-eyebrow { color: #d6f230; }
.shipped-detail h2 { margin: 0; font-family: "Newsreader", Georgia, serif; font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 600; line-height: 1.04; letter-spacing: -.025em; }
.detail-meta { margin: 5.2rem 0 1.6rem; color: #8d93ab; font-size: 0.82rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.detail-intro { max-width: 37rem; font-size: 1.15rem; line-height: 1.5; }.project-modal-panel--yeye .detail-intro { color: #f5f6f9; }
.detail-features { list-style: none; margin: 3.2rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid #d6dbe8; }
.project-modal-panel--yeye .detail-features { border-color: #262930; }
.detail-features li { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.7rem; padding: 0.9rem 0; }
.detail-features li > span { padding-top: .25rem; color: #5c82ff; font-size: .8rem; font-weight: 700; }.project-modal-panel--yeye .detail-features li > span { color: #d6f230; }
.detail-features strong { font-size: 1.3rem; }.detail-features p { margin: .2rem 0 0; color: #8d93ab; font-size: .9rem; }
.experience-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; min-width: 15rem; margin-top: 2rem; padding: 0.9rem 1rem; border: 1px solid currentColor; border-radius: 999px; color: #5c82ff; font-weight: 700; }
.project-modal-panel--snap .experience-button { font-weight: 400; text-transform: uppercase; }
.experience-button:hover, .experience-button:focus-visible { background: #5c82ff; color: #fff; text-decoration: none; }.project-modal-panel--yeye .experience-button { color: #d6f230; }.project-modal-panel--yeye .experience-button:hover, .project-modal-panel--yeye .experience-button:focus-visible { background: #d6f230; color: #1e202c; }
.snap-demo { align-self: center; overflow: hidden; border: 1px solid #d6dbe8; border-radius: 20px; background: #fff; }
.browser-bar { display: flex; align-items: center; height: 58px; padding: 0 18px; background: #f6f7fb; }.traffic-lights { display: flex; gap: 7px; }.traffic-lights i { width: 10px; height: 10px; border-radius: 50%; background: #f0615c; }.traffic-lights i:nth-child(2){background:#f5b84f}.traffic-lights i:nth-child(3){background:#59b86e}
.address-bar { width: 68%; margin-left: 28px; padding: .35rem 1rem; border: 1px solid #d6dbe8; border-radius: 99px; background: #fff; color: #8d93ab; font-size: .72rem; }.browser-bar > b { margin-left: auto; font-family: Georgia,serif; font-size: 1.35rem; }
.article-demo, .gallery-demo { margin: 24px; border-radius: 14px; background: #f6f7fb; }.article-demo { padding: 28px; }.article-title-line,.article-copy-line { display:block; height:10px; margin-bottom:12px; border-radius:6px; background:#d4dbed}.article-title-line{width:36%;height:18px}.article-copy-line{width:52%;background:#e5ebf5}.article-copy-line--short{width:42%}
.selection-demo { width: 72%; min-height: 175px; margin-top: 18px; padding: 18px; border: 3px dashed #5c82ff; border-radius: 10px; background:#e0e8f7; }.selection-demo small { color:#5c82ff;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.selection-demo i{display:inline-block;width:40%;height:85px;margin-top:18px;border-radius:8px;background:#b8c7e5}.selection-demo span{display:inline-block;width:42%;height:58px;margin:18px 0 0 18px;vertical-align:top;background:linear-gradient(#d4dbed 0 14px,transparent 14px 28px,#e5ebf5 28px 37px,transparent 37px 48px,#e5ebf5 48px 57px)}
.gallery-demo { padding: 24px; }.gallery-demo header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.gallery-demo header strong{font-family:"Newsreader",Georgia,serif;font-size:1.5rem}.gallery-demo header span{color:#5c82ff;font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.gallery-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.gallery-cards figure{margin:0;padding:10px;border:1px solid #d6dbe8;border-radius:10px;background:#fff}.gallery-cards img{display:block;width:100%;aspect-ratio:1.7;object-fit:cover;border-radius:7px}.gallery-cards figcaption{display:grid;gap:4px;margin-top:10px;font-size:.68rem}.gallery-cards figcaption span{color:#8d93ab}
.yeye-demo { align-self: center; padding: 1.8rem; border: 1px solid #262930; border-radius: 20px; background: #0e0f12; }.yeye-demo > p { margin: 0 0 1.5rem; color: #d6f230; font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.watch-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.4rem 4.5rem;padding:1rem 2rem}.watch-grid figure{margin:0}.watch-grid figcaption{margin-bottom:.8rem;color:#9494a8;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.watch-screen{position:relative;width:184px;height:224px;overflow:hidden;border:3px solid #ebebf2;border-radius:34px;background:#000;color:#fff;box-shadow:0 14px 28px rgba(0,0,0,.45)}.watch-screen time{position:absolute;top:5px;right:9px;font-size:.76rem}.watch-screen--start{display:grid;place-items:center}.watch-screen--start b{display:grid;place-items:center;width:106px;height:106px;border-radius:50%;background:#d7f230;color:#000;font-style:italic}.watch-screen--live{display:grid;justify-items:center;align-content:center;gap:9px}.watch-screen--live>i{position:absolute;top:30px;width:100%;height:8px;background:linear-gradient(90deg,#d7f230 50%,#adacc5 50%)}.watch-screen--live small{padding:2px 25px;border-radius:5px;background:#4a4b63}.watch-screen--live b{display:flex;gap:16px}.watch-screen--live b span{display:grid;place-items:center;width:38px;height:38px;border-radius:6px;background:#fff;color:#000}.watch-screen--live em{color:#89889d;font-size:.78rem;font-style:normal}.watch-screen--live footer{display:flex;gap:34px;font-size:.7rem}.watch-screen--live footer span:first-child{color:#d7f230}.watch-screen--result{display:grid;justify-items:center;align-content:center;gap:8px}.watch-screen--result small{font-size:1rem}.watch-screen--result b{font-size:3.8rem;line-height:1}.watch-screen--result em{margin-top:10px;padding:6px 48px;border-radius:100px;background:#d7f230;color:#323344;font-style:normal}.watch-screen--data{display:flex;flex-direction:column;align-items:flex-start;padding:38px 12px 12px}.watch-screen--data small{color:#d7f230;font-size:.6rem}.watch-screen--data b{color:#d7f230;font-size:1.15rem}.watch-screen--data strong{font-size:1.1rem}.watch-screen--data strong i{font-size:.8rem;font-style:normal}.yeye-caption{display:block;margin:1.5rem 2rem 0;color:#9494a8;font-size:.8rem}
body.modal-open { overflow: hidden; }

.timeline { border-top: 1px solid var(--line); }
.timeline-item { display: grid; grid-template-columns: minmax(10rem, 1fr) 2fr; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.timeline-period { margin: 0; color: var(--muted); }
.timeline-item h3 { margin-bottom: 0.6rem; font-size: clamp(1.25rem, 2.2vw, 1.8rem); letter-spacing: -0.025em; }
.timeline-item div p { max-width: 48rem; margin: 0; color: var(--muted); }

.practice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; border-top: 1px solid var(--line); }
.practice-item { padding: 1.5rem 0; border-bottom: 1px solid var(--line); font-size: clamp(1.25rem, 2.5vw, 2rem); }

.about-copy { max-width: 56rem; font-size: clamp(1.5rem, 3.6vw, 3.25rem); line-height: 1.15; letter-spacing: -0.035em; }
.about-details { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(2rem, 8vw, 8rem); margin-top: clamp(3rem, 6vw, 5rem); color: var(--muted); }
.about-details p { margin: 0; }
.contact-links { display: flex; gap: 2rem; }
.text-link { display: inline-block; margin-top: 2rem; border-bottom: 1px solid currentColor; }

.site-footer { padding-block: 2rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); font-size: 0.875rem; }

.case-hero { padding-block: clamp(5rem, 10vw, 9rem); border-bottom: 1px solid var(--line); }
.case-hero h1 { max-width: 14ch; }
.case-summary { max-width: 50rem; color: var(--muted); font-size: clamp(1.15rem, 2.2vw, 1.6rem); }
.case-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: clamp(3rem, 7vw, 6rem); }
.case-meta p { margin: 0; }
.case-focus { padding-block: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--line); }
.case-focus ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; list-style: none; margin: 0; padding: 0; }
.case-focus li { display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.75rem; font-size: clamp(1rem, 1.7vw, 1.25rem); }
.case-focus li span { color: var(--accent); font-size: 0.75rem; font-weight: 700; padding-top: 0.35rem; }
.case-layout { display: grid; grid-template-columns: minmax(12rem, 0.55fr) minmax(0, 2fr); gap: clamp(3rem, 8vw, 8rem); }
.case-toc { position: sticky; top: 6.5rem; align-self: start; padding-block: 4rem; }
.case-toc ol { list-style: none; margin: 0; padding: 0; }
.case-toc li { border-top: 1px solid var(--line); }
.case-toc li:last-child { border-bottom: 1px solid var(--line); }
.case-toc a { display: grid; grid-template-columns: 2rem 1fr; gap: 0.4rem; padding: 0.72rem 0; color: var(--muted); font-size: 0.82rem; line-height: 1.25; }
.case-toc a span { color: var(--accent); font-weight: 700; }
.case-section { scroll-margin-top: 5rem; padding-block: clamp(4rem, 8vw, 7rem); border-bottom: 1px solid var(--line); }
.case-section h2 { margin: 0; font-size: clamp(2rem, 4vw, 4.25rem); line-height: 0.98; letter-spacing: -0.045em; }
.case-section-heading { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; }
.section-number { margin: 0; padding-top: 0.45rem; color: var(--accent); font-size: 0.8rem; font-weight: 700; }
.case-content { margin-left: 4rem; padding-top: clamp(2rem, 4vw, 3.5rem); }
.case-lead { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); color: #222; font-size: clamp(1.3rem, 2.25vw, 2rem); line-height: 1.3; letter-spacing: -0.025em; }
.case-subsections { border-top: 1px solid var(--line); }
.case-subsection { display: grid; grid-template-columns: minmax(9rem, 0.75fr) minmax(0, 1.5fr); gap: clamp(1.5rem, 5vw, 5rem); padding-block: 2rem; border-bottom: 1px solid var(--line); }
.case-subsection h3 { margin: 0; font-size: 1rem; line-height: 1.35; }
.case-subsection p { max-width: 42rem; margin: 0; color: var(--muted); font-size: 1.05rem; }
.case-subsection ul { margin: 1rem 0 0; padding-left: 1.2rem; color: var(--muted); }
.case-visual { margin: 0 0 clamp(3rem, 6vw, 5rem); }
.case-visual img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: #fafafa; }
.case-visual figcaption { margin-top: 0.8rem; color: var(--muted); font-size: 0.82rem; }
.case-flow { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0 0 clamp(3rem, 6vw, 5rem); padding: 0; border-block: 1px solid var(--line); }
.case-flow li { position: relative; flex: 1 1 8rem; padding: 1.3rem 1.5rem 1.3rem 0; font-weight: 700; }
.case-flow li:not(:last-child)::after { content: "→"; position: absolute; right: 0.5rem; color: var(--accent); }
.case-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0 0 clamp(3rem, 6vw, 5rem); background: var(--line); border: 1px solid var(--line); }
.case-metrics div { min-height: 10rem; padding: 1.5rem; background: var(--bg); }
.case-metrics dt { font-size: clamp(2rem, 4vw, 4rem); font-weight: 700; letter-spacing: -0.05em; }
.case-metrics dd { margin: 1rem 0 0; color: var(--muted); }
.evidence-note { display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; margin: 2rem 0 0; padding: 1.25rem; background: #f5f5f5; color: var(--muted); font-size: 0.88rem; }
.evidence-note strong { color: var(--text); }
.back-link { display: inline-block; margin-bottom: 2rem; color: var(--muted); }
.case-next { padding-block: clamp(4rem, 9vw, 8rem); }
.case-next a { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; padding-block: 1.5rem; border-block: 1px solid var(--line); }
.case-next a span:first-child { font-size: clamp(2rem, 5vw, 5rem); letter-spacing: -0.04em; }
.case-next a span:last-child { color: var(--muted); }

@media (max-width: 720px) {
  .nav { min-height: 64px; }
  .nav-toggle { display: block; }
  .nav-links { display: none; position: absolute; inset: 64px 0 auto; padding: 1.25rem var(--pad) 1.5rem; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; }
  .nav-links.is-open { display: flex; }
  .section-heading, .timeline-item { grid-template-columns: 1fr; }
  .intro-footer, .about-details { grid-template-columns: 1fr; }
  .project-link { grid-template-columns: 2.25rem 1fr auto; gap: 0.75rem; }
  .project-title { grid-column: 2; }
  .project-type { grid-column: 2; grid-row: 2; }
  .project-status { grid-column: 3; grid-row: 1 / span 2; }
  .project-index { grid-column: 1; grid-row: 1 / span 2; }
  .practice-grid, .case-meta, .case-focus ul, .case-metrics, .shipped-grid { grid-template-columns: 1fr; }
  .shipped-preview { min-height: 280px; }
  .project-modal { padding: 0; place-items: stretch; }
  .project-modal-panel { width: 100%; max-height: 100vh; overflow-x: hidden; border-radius: 0; }
  .modal-close { position: absolute; top: .75rem; right: .75rem; float: none; width: max-content; margin: 0; }
  .shipped-detail, .project-modal-panel--snap .shipped-detail { grid-template-columns: 1fr; min-height: 0; padding: 4.5rem 1.25rem 2rem; }
  .shipped-detail-copy, .snap-demo, .yeye-demo { min-width: 0; max-width: 100%; }
  .detail-meta { margin-top: 3rem; }
  .snap-demo, .yeye-demo { width: 100%; }
  .watch-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; padding: 0; }
  .watch-screen { width: 100%; height: auto; aspect-ratio: .82; border-radius: 22px; }
  .gallery-cards { gap: .5rem; }.gallery-cards figure { padding: 6px; }.gallery-cards figcaption { font-size: .55rem; }
  .case-meta { gap: 1.5rem; }
  .case-layout { grid-template-columns: 1fr; }
  .case-toc { display: none; }
  .case-section-heading { grid-template-columns: 2.25rem 1fr; }
  .case-content { margin-left: 0; }
  .case-subsection { grid-template-columns: 1fr; gap: 0.75rem; }
  .case-flow { display: block; }
  .case-flow li { padding-left: 0; }
  .case-flow li:not(:last-child)::after { content: "↓"; }
  .evidence-note { grid-template-columns: 1fr; gap: 0.35rem; }
  .case-next a { align-items: flex-end; }
  .footer-inner { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Homepage — Figma frame 676:18570 */
.home-page {
  --home-ink: #090a0e;
  --home-muted: #595e6b;
  --home-line: #c7c9d1;
  --home-accent: #eb1478;
  background: #fff;
  color: var(--home-ink);
}

.home-header,
.home-main,
.home-footer {
  width: min(100%, 1440px);
  margin-inline: auto;
  padding-inline: 200px;
}

.home-header { position: sticky; top: 0; z-index: 100; padding-top: 2.8rem; background: #fff; }
.home-nav { min-height: 2rem; display: flex; align-items: flex-start; justify-content: space-between; }
.home-brand { font-weight: 600; letter-spacing: -.02em; }
.home-nav-links { display: flex; align-items: flex-start; gap: clamp(2.5rem, 5vw, 6.25rem); }
.home-nav-links a { position: relative; padding-bottom: 1rem; }
.home-nav-links a:hover, .home-nav-links a:focus-visible { color: var(--home-accent); text-decoration: none; }
.home-nav-links .is-active { color: var(--home-accent); font-weight: 600; }
.home-nav-links .is-active::after { content: ""; position: absolute; left: 50%; bottom: .2rem; width: .4rem; height: .4rem; border-radius: 50%; background: currentColor; transform: translateX(-50%); }

.home-main { padding-top: 4.6rem; }
.home-hero { position: relative; display: grid; grid-template-columns: 1.2fr .86fr; min-height: 22rem; border-bottom: 1px solid var(--home-line); }
.home-hero h1 { max-width: none; margin: 0; font-family: "Newsreader", Georgia, serif; font-size: clamp(5.5rem, 8vw, 6rem); font-weight: 600; line-height: .92; letter-spacing: -.045em; }
.home-intro { justify-self: end; width: min(100%, 28.5rem); padding-top: 1rem; }
.home-intro p { margin: 0; font-size: 1.125rem; line-height: 1.45; }
.home-intro span { display: block; margin-top: 2.8rem; color: var(--home-muted); font-size: .9375rem; }
.hero-semicircle { position: absolute; left: 37%; bottom: 0; width: 14rem; height: 7rem; overflow: hidden; background: var(--home-accent); border-radius: 14rem 14rem 0 0; }

.home-section-header { display: flex; align-items: flex-start; justify-content: space-between; padding-top: 2.4rem; }
.home-section-header h2 { margin: 0; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.02em; }
.home-section-header p, .home-section-header > span { margin: .25rem 0 0; color: var(--home-muted); font-size: .875rem; }

.home-projects { margin-top: 1.1rem; }
.home-project { display: grid; grid-template-columns: 4rem minmax(22rem, 1.2fr) minmax(20rem, 26.7rem) 2.5rem; align-items: center; gap: clamp(1.5rem, 4vw, 4.8rem); min-height: 18.1rem; border-bottom: 1px solid var(--home-line); }
.home-project:hover, .home-project:focus-visible { text-decoration: none; }
.home-project-index { color: var(--home-muted); font-size: 1.125rem; }
.home-project-copy { display: grid; gap: .6rem; }
.home-project-copy strong { font-family: "Newsreader", Georgia, serif; font-size: clamp(2.7rem, 4vw, 2.875rem); line-height: 1; letter-spacing: -.025em; }
.home-project-copy small { color: var(--home-muted); font-size: 1.0625rem; }
.home-project img { display: block; width: 100%; height: 15rem; object-fit: cover; transition: transform 220ms ease; }
.home-project-arrow { justify-self: end; font-size: 1.8rem; transition: transform 220ms ease; }
.home-project:hover img, .home-project:focus-visible img { transform: scale(.985); }
.home-project:hover .home-project-arrow, .home-project:focus-visible .home-project-arrow { transform: translateX(.4rem); }

.home-play { padding-bottom: 2.6rem; border-bottom: 1px solid var(--home-line); }
.home-play-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; margin-top: 3.2rem; }
.home-play-project { display: grid; grid-template-columns: 2.25rem minmax(11rem, 1fr) minmax(10rem, 13.5rem); align-items: center; gap: .75rem; min-width: 0; min-height: 13.75rem; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.home-play-project + .home-play-project { padding-left: 0; border-left: 0; }
.home-play-project:hover, .home-play-project:focus-visible { outline: none; }
.home-play-index { align-self: start; padding-top: 1.2rem; color: var(--home-muted); font-size: .9375rem; }
.home-play-copy { display: grid; gap: .8rem; }
.home-play-copy strong { font-family: "Newsreader", Georgia, serif; font-size: 2.5rem; line-height: 1; letter-spacing: -.02em; }
.home-play-copy small { color: var(--home-muted); font-size: 1rem; line-height: 1.45; }
.home-play-project img { display: block; width: 100%; max-height: 10rem; object-fit: cover; transition: transform 220ms ease; }
.home-play-project:hover img, .home-play-project:focus-visible img { transform: translateY(-.25rem); }
.home-play-project:hover strong, .home-play-project:focus-visible strong { color: inherit; }

.home-footer { display: flex; justify-content: space-between; gap: 2rem; padding-top: 2.9rem; padding-bottom: 8rem; color: var(--home-muted); font-size: .9375rem; }

@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; gap: 4rem; padding-bottom: 11rem; }
  .home-intro { justify-self: start; }
  .hero-semicircle { left: 50%; width: 12rem; height: 6rem; transform: translateX(-50%); }
  .home-project { grid-template-columns: 3rem 1fr 2rem; gap: 1rem; padding-block: 2.5rem; }
  .home-project img { grid-column: 2 / -1; grid-row: 2; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .home-project-arrow { grid-column: 3; grid-row: 1; }
  .home-play-grid { grid-template-columns: 1fr; }
  .home-play-project { grid-template-columns: 3rem 1fr minmax(12rem, 16rem); padding-block: 2.25rem; border-bottom: 1px solid var(--home-line); }
  .home-play-project + .home-play-project { padding-left: 0; border-left: 0; border-bottom: 0; }
}

@media (max-width: 640px) {
  .home-header { padding-top: 1.25rem; }
  .home-nav .nav-toggle { display: block; }
  .home-nav-links { display: none; position: absolute; inset: 3.8rem 0 auto; padding: 1.25rem var(--pad) 1.5rem; background: #fff; border-bottom: 1px solid var(--home-line); flex-direction: column; gap: 1rem; }
  .home-nav-links.is-open { display: flex; }
  .home-nav-links .is-active::after { left: auto; right: -.8rem; top: .55rem; bottom: auto; }
  .home-main { padding-top: 3.5rem; }
  .home-hero h1 { font-size: clamp(4.6rem, 25vw, 6rem); }
  .home-intro p { font-size: 1rem; }
  .home-section-header { padding-top: 2rem; }
  .home-project { grid-template-columns: 2rem 1fr 1.5rem; min-height: 0; }
  .home-project-copy strong { font-size: 2.4rem; }
  .home-project-copy small { font-size: .9rem; }
  .home-play-grid { margin-top: 1.8rem; }
  .home-play-project { grid-template-columns: 2rem 1fr; gap: 1rem; }
  .home-play-project img { grid-column: 1 / -1; width: 100%; max-height: none; aspect-ratio: 16 / 9; object-fit: cover; }
  .home-play-copy strong { font-size: 2.25rem; }
  .home-footer { flex-direction: column; padding-bottom: 4rem; }
}

/* Orbit case study */
.orbit-case { --orbit-blue:#153ee7; --orbit-ink:#111; --orbit-muted:#777b84; --orbit-line:#d8d9de; max-width:none; padding:0; color:var(--orbit-ink); }
.orbit-case h1,.orbit-case h2,.orbit-case h3,.orbit-case p { margin-top:0; }
.orbit-hero,.orbit-section,.orbit-next { padding-inline:var(--pad); }
.orbit-hero { padding-top:clamp(3rem,7vw,7rem); }
.orbit-hero .back-link { margin-bottom:clamp(4rem,10vw,8rem); }
.orbit-label { color:var(--orbit-blue); font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.orbit-hero h1 { max-width:1100px; margin:1.4rem 0 2rem; font-family:"Newsreader",Georgia,serif; font-size:clamp(3.4rem,7vw,7.2rem); font-weight:600; line-height:.92; letter-spacing:-.045em; }
.orbit-intro,.orbit-section-intro { max-width:770px; color:var(--orbit-muted); font-size:clamp(1.05rem,1.7vw,1.45rem); line-height:1.55; }
.orbit-hero-image { display:block; width:100%; margin-top:clamp(3rem,7vw,6rem); background:#eef1ff; }
.orbit-meta { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin:0; padding:2rem 0 4.5rem; }
.orbit-meta div { border-top:1px solid var(--orbit-line); padding-top:1rem; }.orbit-meta dt{color:var(--orbit-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}.orbit-meta dd{margin:.5rem 0 0;font-size:1rem}
.orbit-section { padding-top:clamp(6rem,11vw,10rem); padding-bottom:clamp(6rem,11vw,10rem); border-top:1px solid var(--orbit-line); }
.orbit-section>header { display:grid; grid-template-columns:minmax(11rem,.42fr) 1fr; gap:3rem; align-items:start; }
.orbit-section h2 { max-width:900px; font-family:"Newsreader",Georgia,serif; font-size:clamp(3rem,6vw,6.2rem); font-weight:600; line-height:.95; letter-spacing:-.04em; }
.orbit-section-intro { margin:2.5rem 0 0 auto; width:min(66%,770px); }
.orbit-scope { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; margin:5rem 0 0; padding:0; list-style:none; background:var(--orbit-line); border:1px solid var(--orbit-line); }
.orbit-scope li { min-height:180px; padding:1.4rem; background:#fff; font-size:1.05rem; }.orbit-scope span{display:block;margin-bottom:4.5rem;color:var(--orbit-blue);font-size:.75rem}
.orbit-challenge { background:#f5f5f2; }
.orbit-rule-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:5rem; }
.orbit-rule-grid article { display:flex; flex-direction:column; min-height:520px; padding:2rem; background:#fff; }.orbit-rule-grid article>p:first-child{color:var(--orbit-blue);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.orbit-rule-grid h3{font-family:"Newsreader",Georgia,serif;font-size:2.25rem;line-height:1}.orbit-rule-grid small,.orbit-rule-grid strong{margin-top:2rem;color:var(--orbit-muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em}.orbit-rule-grid ul{padding-left:1.1rem;color:#50535a;line-height:1.7}.orbit-rule-grid article>p:last-child{margin-bottom:0;line-height:1.55}
.orbit-ai { padding-bottom:0; }.orbit-story{margin-top:clamp(6rem,12vw,11rem);padding-top:2rem;border-top:1px solid var(--orbit-line)}
.orbit-story-copy { max-width:980px; }.orbit-story h3{max-width:800px;margin:1.5rem 0;font-family:"Newsreader",Georgia,serif;font-size:clamp(2.8rem,5vw,5rem);font-weight:600;line-height:.98}.orbit-story-copy>p:not(.orbit-label){max-width:720px;color:var(--orbit-muted);font-size:1.15rem;line-height:1.6}
.orbit-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; margin-top:3rem; background:var(--orbit-line); border:1px solid var(--orbit-line); }.orbit-split>div{padding:1.5rem;background:#fff}.orbit-split strong{color:var(--orbit-blue);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}.orbit-split p,.orbit-split li{color:#555a63;line-height:1.55}
.orbit-image-pair { display:grid; grid-template-columns:2fr .7fr; align-items:end; gap:1rem; margin-top:3rem; padding:clamp(2rem,5vw,5rem); background:#eef0f7; }.orbit-image-pair img{display:block;width:100%;max-height:780px;object-fit:contain}
.orbit-story--dark { margin-inline:calc(var(--pad) * -1); padding:clamp(5rem,9vw,8rem) var(--pad); background:#101116; color:#fff; border:0; }.orbit-story--dark .orbit-story-copy>p{color:#aeb1ba}.orbit-story--dark>img{display:block;width:100%;margin-top:4rem}.orbit-process{display:flex;flex-wrap:wrap;gap:.5rem;margin:3rem 0;padding:0;list-style:none}.orbit-process li{padding:.7rem 1rem;border:1px solid #4b4e59;border-radius:999px;color:#dfe1e8}.orbit-process li:not(:last-child)::after{content:" →";margin-left:.75rem;color:#727783}.orbit-story blockquote,.orbit-posters blockquote{margin:3rem 0 0;font-family:"Newsreader",Georgia,serif;font-size:clamp(2rem,4vw,4rem);line-height:1.08}
.orbit-library { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:3rem; }.orbit-library img{width:100%;height:420px;object-fit:cover;object-position:top;background:#f2f3f7}
.orbit-posters { background:#f2f0ed; }.orbit-posters blockquote{max-width:960px;color:var(--orbit-blue)}.orbit-contributions{margin-top:4rem}.orbit-contributions ul{margin:1rem 0 0;padding-left:1.1rem}.orbit-poster-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:4rem}.orbit-poster-grid img{display:block;width:100%;background:#fff}
.orbit-fullbleed { display:block;width:100%;height:auto; }
.orbit-responsibility-table{margin-top:5rem;border-top:1px solid var(--orbit-line)}.orbit-responsibility-table>div{display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:1.2rem 0;border-bottom:1px solid var(--orbit-line)}.orbit-responsibility-table .head{color:var(--orbit-blue);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}.orbit-principle{max-width:900px;margin:5rem auto 0;font-family:"Newsreader",Georgia,serif;font-size:clamp(2rem,4vw,4rem);line-height:1.08;text-align:center}
.orbit-next a{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:2rem;padding:3rem 0;border-top:1px solid var(--orbit-line);text-decoration:none}.orbit-next strong{font-family:"Newsreader",Georgia,serif;font-size:2.5rem}
@media(max-width:800px){.orbit-section>header{grid-template-columns:1fr;gap:1.5rem}.orbit-section-intro{width:100%;margin-left:0}.orbit-scope,.orbit-rule-grid{grid-template-columns:1fr}.orbit-scope li{min-height:0}.orbit-scope span{margin-bottom:2rem}.orbit-rule-grid article{min-height:0}.orbit-meta{grid-template-columns:1fr}.orbit-image-pair{grid-template-columns:1fr}.orbit-split,.orbit-responsibility-table>div{grid-template-columns:1fr}.orbit-library,.orbit-poster-grid{grid-template-columns:1fr}.orbit-library img{height:auto}.orbit-process{display:grid}.orbit-story--dark{margin-inline:calc(var(--pad) * -1)}.orbit-next a{grid-template-columns:1fr auto}.orbit-next a span:first-child{grid-column:1/-1}}

/* Pixel-aligned Orbit implementation from Figma node 622:15812 */
.case-home-header { max-width:1440px; }
.orbit-exact { width:min(100%,1440px); max-width:none; margin:0 auto; padding:0; color:#0d0d12; background:#fff; }
.orbit-exact ~ .site-footer { display:none; }
.oe-section { padding-inline:120px; overflow:hidden; }
.oe-kicker,.oe-label { margin:0; font:700 14px/1.1 "Work Sans",sans-serif; }
.oe-kicker { letter-spacing:.08em; }
.oe-hero { height:956px; padding-top:72px; }
.oe-hero h1 { width:1040px; margin:24px 0 0; color:#0e0f14; font:700 60px/1.05 "Newsreader",Georgia,serif; letter-spacing:0; }
.oe-hero-copy { width:1040px; height:93px; margin:24px 0 0; color:#616675; font:400 24px/1.3 "Work Sans",sans-serif; }
.oe-hero-image { display:block; width:1040px; height:454px; margin-top:24px; object-fit:cover; }
.oe-meta { display:flex; gap:120px; margin:24px 0 0; font:400 16px/1.45 "Work Sans",sans-serif; }
.oe-meta span { white-space:nowrap; }.oe-meta b{font-weight:700}
.oe-context { height:608px; padding-top:68px; }
.oe-label { color:#0d0d12; }
.oe-section h2 { width:1120px; margin:29px 0 0; font:700 48px/1.08 "Work Sans",sans-serif; letter-spacing:0; }
.oe-copy { width:1040px; margin:20px 0 0; color:#595966; font:400 20px/1.45 "Work Sans",sans-serif; }
.oe-scope-grid { display:grid; grid-template-columns:repeat(5,224px); gap:20px; margin-top:26px; }
.oe-scope-grid article { height:152px; padding:22px 24px; border:1px solid #dbdbe3; border-radius:16px; background:#fff; }
.oe-scope-grid article.selected { border-color:#5247c7; background:#f6f5ff; }
.oe-scope-grid small { display:block; color:#5247c7; font:700 12px/1.1 "Work Sans",sans-serif; }
.oe-scope-grid strong { display:block; width:148px; margin-top:16px; font:700 23px/1.2 "Work Sans",sans-serif; }
.oe-challenge { height:2208px; padding-top:68px; box-shadow:0 -12px 36px rgba(30,30,60,.05); }
.oe-challenge .oe-copy { margin-top:20px; }
.oe-block-image { display:block; width:1040px; height:auto; margin-top:141px; }
.oe-block-image + .oe-block-image { margin-top:24px; }
.oe-ai { height:7365px; padding-top:68px; }
.oe-ai .oe-copy { margin-top:20px; }
.oe-story-stack { display:grid; gap:40px; width:1040px; margin-top:49px; }
.oe-story-stack img { display:block; width:1040px; height:auto; }
.oe-poster { width:1440px; height:2155px; overflow:hidden; }
.oe-poster img { display:block; width:1440px; height:2155px; object-fit:cover; }
.oe-fullbleed { display:block; width:1440px; height:900px; object-fit:cover; }
.oe-responsibility { height:1060px; padding-top:68px; }
.oe-responsibility .oe-copy { margin-top:20px; }
.oe-responsibility-table { display:block; width:1040px; height:572px; margin-top:17px; object-fit:contain; }
.oe-principle { display:flex; align-items:center; gap:32px; width:1040px; margin:24px 0 0; font:700 16px/1.3 "Work Sans",sans-serif; }.oe-principle b{flex:0 0 86px}.oe-principle span{flex:1}
@media(max-width:900px){
  .case-home-header{padding-inline:24px}.orbit-exact{overflow:hidden}.oe-section{height:auto!important;padding:48px 24px}.oe-hero h1,.oe-section h2,.oe-hero-copy,.oe-copy{width:100%;height:auto}.oe-hero h1{font-size:clamp(42px,10vw,60px)}.oe-section h2{font-size:clamp(36px,8vw,48px)}.oe-hero-copy{font-size:18px}.oe-hero-image{width:100%;height:auto}.oe-meta{flex-wrap:wrap;gap:12px 32px}.oe-scope-grid{grid-template-columns:1fr;gap:12px}.oe-scope-grid article{height:auto}.oe-block-image{width:100%;margin-top:48px}.oe-story-stack{width:100%;gap:24px}.oe-story-stack img{width:100%}.oe-poster,.oe-poster img,.oe-fullbleed{width:100%;height:auto}.oe-responsibility-table{width:100%;height:auto}.oe-principle{width:100%;align-items:flex-start;flex-direction:column;gap:8px}
}

/* Orbit semantic HTML remap */
.orbit-semantic{--os-ink:#0e0f14;--os-body:#616675;--os-muted:#9a9fb1;--os-brand:#5247c7;--os-soft:#f6f5ff;--os-surface:#f4f6fa;--os-border:#d6d9e3;width:min(100%,1440px);max-width:none;margin:0 auto;padding:0;color:var(--os-ink);background:#fff}.orbit-semantic~.site-footer{display:none}.os-section{padding:68px 120px;overflow:hidden}.os-kicker,.os-label,.os-card-label{margin:0;font:700 14px/1.1 "Work Sans",sans-serif}.os-hero{padding-top:72px;padding-bottom:72px}.os-hero h1{margin:24px 0 0;font:700 60px/1.05 "Newsreader",Georgia,serif}.os-hero-copy{margin:24px 0 0;color:var(--os-body);font-size:24px;line-height:1.3}.os-hero-image{display:block;width:100%;margin-top:24px}.os-meta{display:flex;gap:120px;margin-top:24px;font-size:16px}.os-meta b{margin-right:.3rem}.os-section h2{margin:29px 0 0;font-size:48px;line-height:1.08;letter-spacing:-.025em}.os-copy{margin:20px 0 0;color:var(--os-body);font-size:20px;line-height:1.45}.os-scope{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:26px}.os-scope article{min-height:152px;padding:22px 24px;border:1px solid var(--os-border);border-radius:16px}.os-scope article.is-accent{border-color:var(--os-brand);background:var(--os-soft)}.os-scope small,.os-card-label,.os-rule-card>div>small,.os-mobile-strategy small,.os-story small,.os-four-cards small{color:var(--os-brand);font-weight:700}.os-scope strong{display:block;margin-top:16px;font-size:23px;line-height:1.2}.os-challenge{padding-bottom:100px;box-shadow:0 -12px 36px rgba(30,30,60,.05)}.os-rule-card{display:grid;grid-template-columns:332px 1fr;gap:130px;margin-top:141px;padding:22px 24px 36px;border:1px solid var(--os-border);border-radius:16px}.os-rule-card h3{margin:16px 0 0;font-size:23px}.os-rule-card dl{margin:16px 0 0;font-size:15px;line-height:1.4}.os-rule-card dt{margin-top:16px;font-weight:400}.os-rule-card dd{margin:2px 0 0;font-weight:600}.os-capacity{display:grid;grid-template-columns:repeat(2,1fr);gap:47px 12px;padding-top:32px}.os-capacity>div{display:grid;min-height:109px;padding:17px 21px;border-radius:8px;background:#fafafb}.os-capacity b{font-size:14px}.os-capacity strong{font-size:24px}.os-capacity small{color:var(--os-muted);font-size:12px}.os-mobile-strategy{margin-top:24px;padding:26px 28px 28px;border:1px solid var(--os-border);border-radius:16px}.os-mobile-strategy h3{margin:10px 0 0;font-size:30px}.os-mobile-strategy>p:not(.os-card-label){margin:8px 0 0;color:var(--os-body)}.os-option-grid{display:grid;grid-template-columns:1fr 1.08fr;gap:22px;margin-top:40px}.os-option-grid>section{padding:18px 20px;border:1px solid var(--os-border);border-radius:14px;background:#fff}.os-option-grid>section.selected{border-color:var(--os-brand);background:var(--os-soft)}.os-option-grid h4{margin:8px 0 0;font-size:20px}.os-option-grid p{color:var(--os-body);font-size:14px}.os-phone-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;margin:28px auto;width:min(100%,490px)}.os-phone-pair img{display:block;width:100%;height:auto}.os-option-grid section>b,.os-inline-principle{font-size:12px}.os-inline-principle{display:block;margin-top:54px}.os-ai{padding-bottom:80px}.os-story{margin-top:40px;padding:28px 32px 32px;border:1px solid var(--os-border);border-radius:20px}.os-story-top{display:grid;grid-template-columns:390px 1fr;gap:38px}.os-story h3{margin:18px 0 0;font-size:30px;line-height:1.15}.os-story-top p:not(.os-card-label){color:var(--os-body);font-size:16px;line-height:1.45}.os-roles{margin:32px 0 0}.os-roles dt{margin-top:22px;color:var(--os-brand);font-size:11px;font-weight:700}.os-roles dd{margin:6px 0 0;color:var(--os-body);font-size:14px}.os-mapping{padding:16px 40px;border:1px solid var(--os-border);border-radius:14px;background:#fafafb}.os-mapping h4{margin:0 0 14px;font-size:14px}.os-mapping-head,.os-mapping>div:not(.os-mapping-head){display:grid;grid-template-columns:1fr 1.1fr 1.2fr;gap:20px}.os-mapping-head{padding-bottom:5px;color:var(--os-brand);font-size:10px}.os-mapping>div:not(.os-mapping-head){min-height:36px;align-items:center;font-size:12px}.os-mapping span{color:var(--os-body)}.os-responsive-evidence{display:grid;grid-template-columns:2.1fr 1fr;gap:22px;margin-top:40px;padding:24px;border:1px dashed rgba(82,71,199,.55);border-radius:14px;background:var(--os-soft)}.os-responsive-evidence figure{margin:0;padding:22px;border:1px solid var(--os-border);border-radius:10px;background:#fff;overflow:hidden}.os-responsive-evidence figcaption{margin-bottom:22px;color:var(--os-body);font-size:14px}.os-responsive-evidence figcaption span{font-weight:400}.os-responsive-evidence img{display:block;width:100%;max-height:620px;object-fit:contain}.os-story-principle{display:grid;gap:6px;margin-top:40px;padding:22px 20px;border:1px solid var(--os-brand);border-radius:14px;background:var(--os-soft)}.os-story-principle b{color:var(--os-brand);font-size:14px}.os-story-principle span{font-size:18px;font-weight:600}.os-process{display:flex;gap:16px;margin:0;padding:0;list-style:none}.os-process li{width:116px;height:112px;padding:14px;border:1px solid var(--os-border);border-radius:12px}.os-process li:last-child{border-color:var(--os-brand);background:var(--os-soft)}.os-process small{display:block;color:var(--os-ink)}.os-process b{display:block;margin-top:18px;color:var(--os-brand);font-size:12px;line-height:1.15}.os-judgment{margin-top:30px!important;color:var(--os-ink)!important;font-size:13px!important}.os-evidence,.os-library{margin:32px 0 0;padding:22px 24px;border:1px dashed rgba(82,71,199,.55);border-radius:14px;background:var(--os-soft)}.os-evidence figcaption,.os-library figcaption{margin-bottom:24px;color:var(--os-brand);font-size:12px;font-weight:700}.os-evidence>img{display:block;width:min(100%,927px);margin:auto}.os-three-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.os-three-cards section{min-height:348px;padding:18px;border:1px solid var(--os-border);border-radius:14px;background:#fafafb}.os-three-cards section.accent{border-color:var(--os-brand);background:var(--os-soft)}.os-three-cards p{color:var(--os-ink)!important;font-size:14px!important;font-weight:600}.os-system-value{display:grid;gap:12px;margin-top:34px!important;color:var(--os-ink)!important;font-weight:600}.os-system-value b{color:var(--os-brand);font-size:10px}.os-library>div{display:grid;grid-template-columns:313fr 407fr 347fr;gap:0}.os-library img{display:block;width:100%;height:821px;object-fit:cover;object-position:top}.os-illustration-library>img{display:block;width:100%}.os-posters{padding-left:112px;padding-right:112px}.os-four-cards{display:grid;grid-template-columns:272px 272px 272px 328px;gap:24px;margin-top:68px}.os-four-cards article{min-height:260px;padding:24px;border:1px solid var(--os-border);border-radius:16px;background:#fafafc}.os-four-cards article.accent{border-color:var(--os-brand);background:var(--os-soft)}.os-four-cards h3{margin:16px 0 0;font-size:23px;line-height:1.2}.os-four-cards p{font-size:15px;line-height:1.4}.os-posters blockquote{margin:44px 0 0;font-size:26px;font-weight:700}.os-poster-evidence{display:grid;grid-template-columns:1fr 1fr;gap:27px;margin:438px 8px 0;padding:60px 40px;border:1px dashed rgba(82,71,199,.55);border-radius:14px;background:var(--os-soft);position:relative}.os-poster-evidence figcaption{position:absolute;top:22px;left:24px;color:var(--os-brand);font-size:12px;font-weight:700}.os-poster-evidence img{display:block;width:100%;border-radius:20px}.os-contribution{display:grid;grid-template-columns:1fr 1fr;gap:88px;margin-top:45px;padding:32px;border:1px solid var(--os-border);border-radius:16px;background:#fafafc}.os-contribution b{color:var(--os-brand);font-size:14px}.os-contribution p{font-size:17px;line-height:1.4}.os-fullbleed{display:block;width:min(100%,1440px);margin:auto}.os-responsibility{margin-top:17px;padding:20px;border:1px solid var(--os-border);border-radius:18px}.os-responsibility>div{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;min-height:54px;padding:0 8px;border-radius:10px;font-size:15px}.os-responsibility>div:nth-child(odd){background:#fcfcfe}.os-responsibility .head{font-size:13px}.os-responsibility .final{border:1px solid var(--os-brand);background:var(--os-soft)}.os-responsibility span{color:var(--os-body)}.os-final-principle{display:flex;gap:32px;margin-top:24px;font-weight:700}.os-final-principle b{flex:0 0 86px}
@media(max-width:900px){.os-section{padding:48px 24px}.os-hero h1{font-size:clamp(42px,10vw,60px)}.os-hero-copy{font-size:18px}.os-meta{flex-wrap:wrap;gap:12px 28px}.os-section h2{font-size:clamp(36px,8vw,48px)}.os-scope,.os-option-grid,.os-story-top,.os-four-cards,.os-contribution{grid-template-columns:1fr}.os-rule-card{grid-template-columns:1fr;gap:28px;margin-top:60px}.os-capacity{grid-template-columns:1fr}.os-phone-pair{gap:10px}.os-process{display:grid;grid-template-columns:repeat(2,1fr)}.os-process li{width:auto}.os-responsive-evidence{grid-template-columns:1fr;padding:12px}.os-three-cards{grid-template-columns:1fr}.os-three-cards section{min-height:0}.os-library>div{grid-template-columns:1fr}.os-library img{height:auto}.os-posters{padding-inline:24px}.os-poster-evidence{grid-template-columns:1fr;margin-top:80px;padding:60px 16px 16px}.os-responsibility>div{grid-template-columns:1fr;gap:6px;padding:12px}.os-final-principle{flex-direction:column;gap:8px}}

/* Orbit desktop frame: direct measurements from Figma node 622:15812. */
@media(min-width:901px){
  .orbit-case-page .case-home-header,.orbit-case-page .site-footer{display:none}
  .orbit-case-page main{width:1440px;max-width:none;padding:0}
  .orbit-semantic{width:1440px;min-height:15252px;--os-border:#dbdbe3}
  .orbit-semantic .os-section{box-sizing:border-box;padding-left:200px;padding-right:200px}
  .os-hero{height:956px;padding-top:72px;padding-bottom:72px}
  .os-hero h1{width:1040px;max-width:none;letter-spacing:0}
  .os-hero-image{height:438px;object-fit:cover}
  .os-meta{margin-top:40px}
  .os-context{height:608px;padding-top:68px;padding-bottom:64px}
  .os-context .os-copy,.os-challenge>.os-copy,.os-ai>.os-copy{margin-top:28px}
  .os-context .os-scope{margin-top:32px}
  .os-scope strong{width:136px}
  .os-challenge{height:2108px;padding-top:68px;padding-bottom:0}
  .os-challenge{position:relative}
  .os-challenge-one-label{position:absolute;left:200px;top:368px;margin:0;color:#5247c7;font-size:12px;line-height:14px;font-weight:700}
  .os-challenge-one-title{position:absolute;left:200px;top:400px;margin:0;font-size:26px;line-height:30px;font-weight:700}
  .os-rule-card{grid-template-columns:332px 590px;gap:179px;width:1134px;height:420px;margin-top:141px}
  .os-rule-card h3{margin-top:19px}
  .os-rule-card dl{margin-top:12px}
  .os-rule-card dt{font-weight:600}
  .os-rule-card dd{color:#616675;font-weight:400}
  .os-capacity{display:grid;grid-template-columns:590px;gap:47px;padding-top:32px}
  .os-capacity img{display:block;width:auto;height:109px}
  .os-mobile-strategy{position:absolute;left:200px;top:916px;width:1134px;height:1192px;margin:0;padding:0;border:0;border-radius:0;background:#fff}
  .os-mobile-strategy>.os-card-label{position:absolute;left:0;top:0;font-size:12px;line-height:14px}
  .os-mobile-strategy>h3{position:absolute;left:0;top:38px;margin:0;font-size:30px;line-height:33px}
  .os-mobile-strategy>p:not(.os-card-label){position:absolute;left:0;top:95px;width:1120px;height:44px;margin:0;font-size:15px;line-height:21px}
  .os-option-grid{position:absolute;left:0;top:163px;display:grid;grid-template-columns:535px 575px;gap:24px;margin:0}
  .os-option-grid>section{height:803px}
  .os-option-grid>section{position:relative;padding:18px 20px}
  .os-option-grid h4{margin:8px 0 0;font-size:20px;line-height:23px}
  .os-option-grid section>p:first-of-type{position:static;width:auto;height:auto;margin:8px 0 0;font-size:15px;line-height:21px}
  .os-phone-pair{grid-template-columns:230px 229px;gap:18px;width:477px;margin:30px 0 0}
  .os-phone-pair img{width:100%;height:497px;object-fit:cover;border-radius:12px}
  .os-option-grid>.selected .os-phone-pair{grid-template-columns:230px 230px;gap:23px;width:483px;margin-left:38px;margin-top:35px}
  .os-option-grid section>b{position:absolute;left:31px;top:698px;color:#5247c7;font-size:14px;line-height:15px}
  .os-option-grid section>p:last-child{position:absolute;left:31px;top:718px;width:438px;height:auto;margin:0;color:#0e0f14;font-size:14px;line-height:19px;font-weight:600}
  .os-option-grid>.selected>b{left:39px;top:697px}
  .os-option-grid>.selected>p:last-child{left:39px;top:717px;width:393px;font-weight:700}
  .os-inline-principle{position:absolute;left:0;top:990px;display:block;width:928px;margin:0}
  .os-inline-principle b{display:block;color:#5247c7;font-size:16px;line-height:19px}
  .os-inline-principle span{display:block;margin-top:24px;font-size:16px;line-height:20px;font-weight:400}
  .os-ai{height:7365px;padding-top:68px;padding-bottom:0}
  .os-ai>.os-story:first-of-type{height:2240px;margin-top:78px}
  .os-ai>.os-story:nth-of-type(2){height:1308px;margin-top:40px}
  .os-ai>.os-story:nth-of-type(3){height:1480px;margin-top:40px}
  .os-ai>.os-story:nth-of-type(4){height:1735px;margin-top:40px}
  .os-posters{position:relative;height:2155px;padding:0}
  .os-posters>.os-label{position:absolute;left:112px;top:72px}
  .os-posters>h2{position:absolute;left:112px;top:116px;width:615px;margin:0}
  .os-posters>.os-copy{position:absolute;left:112px;top:260px;width:1216px;height:87px;margin:0}
  .os-four-cards{position:absolute;left:112px;top:420px;margin:0}
  .os-posters blockquote{position:absolute;left:112px;top:724px;width:961px;margin:0}
  .os-poster-concepts{position:absolute;left:112px;top:800px;display:grid;grid-template-columns:520px 664px;gap:32px}
  .os-poster-concepts>section{position:relative;height:355px;padding:24px;border:1px solid #d1ccf5;border-radius:16px;background:#fafafc}
  .os-poster-concepts b{color:#5247c7;font-size:12px;line-height:1;font-weight:700}
  .os-concept-screen{position:absolute;left:24px;top:68px;width:471px;height:250px;border:1px solid #d1ccf5;border-radius:10px;background:#fff}
  .os-concept-screen i{position:absolute;top:24px;width:34px;height:12px;border-radius:12px;background:#d1ccf5}
  .os-concept-screen i:nth-child(1){left:24px;background:#5247c7}.os-concept-screen i:nth-child(2){left:64px}.os-concept-screen i:nth-child(3){left:104px}
  .os-concept-screen span{position:absolute;left:24px;top:48px;width:423px;height:178px;border-radius:6px;background:#fafafc}
  .os-poster-concepts>.os-chosen-concept{border-color:#8ac79e;background:#f2faf5}
  .os-final-screen{position:absolute;left:24px;top:68px;width:616px;height:250px;border:1px solid #b8dbc2;border-radius:10px;background:#fff;overflow:hidden}
  .os-poster-area{position:absolute;left:24px;top:21px;width:360px;height:130px;border-radius:8px;background:#f7f7fa}
  .os-upload-area{position:absolute;right:24px;top:17px;width:192px;height:131px;border-radius:8px;background:#f7f7fa}
  .os-service-banner{position:absolute;left:24px;bottom:20px;width:568px;height:68px;border-radius:10px;background:#f6f5ff}
  .os-service-banner strong{position:absolute;left:20px;top:20px;font-size:18px}
  .os-service-banner em{position:absolute;right:20px;top:16px;padding:10px 19px;color:#fff;border-radius:8px;background:#5247c7;font-size:13px;font-style:normal;font-weight:700}
  .os-poster-evidence{position:absolute;left:200px;top:1199px;width:1212px;height:539px;margin:0;padding:83px 40px 62px;gap:27px}
  .os-poster-evidence img{height:394px;object-fit:cover}
  .os-contribution{position:absolute;left:112px;top:1783px;width:1216px;height:300px;margin:0;padding:32px}
  .os-fullbleed{width:1440px;height:900px;object-fit:cover}
  .os-section.os-responsibility{height:1060px;margin-top:0;padding:68px 120px 0;border:0;border-radius:0}
  .os-responsibility .os-copy{margin-top:28px}
  .os-responsibility>.os-responsibility-table{height:572px;margin-top:23px;padding:20px}
}

.os-responsibility-table{margin-top:17px;padding:20px;border:1px solid var(--os-border);border-radius:18px}
.os-responsibility-table>div{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center;min-height:54px;padding:0 8px;border-radius:10px;font-size:15px}
.os-responsibility-table>div:nth-child(odd){background:#fcfcfe}
.os-responsibility-table .head{font-size:13px}
.os-responsibility-table .final{border:1px solid var(--os-brand);background:var(--os-soft)}
.os-responsibility-table span{color:var(--os-body)}
@media(max-width:900px){.os-responsibility-table>div{grid-template-columns:1fr;gap:6px;padding:12px}}

/* Shared project navigation */
.case-home-header{--home-accent:#eb1478;position:sticky;top:0;z-index:100;max-width:none;padding:18px 200px;background:#fff;border-bottom:1px solid #e3e4e9}
.case-home-header .home-nav{max-width:1296px;margin:auto;align-items:center}
.orbit-case-page .case-home-header{display:block}

/* HoYoWave — Figma node 670:17442 */
.hoyo-case{--hy-ink:#0e0f14;--hy-body:#616675;--hy-line:#d6d9e3;--hy-blue:#596bff;width:min(100%,1440px);max-width:none;margin:auto;padding:0;color:var(--hy-ink);background:#fff;font-family:"Work Sans",sans-serif}
.hoyo-case~.site-footer{display:none}.hy-section{position:relative;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--hy-line);background:#fff}.hy-section p,.hy-section h1,.hy-section h2,.hy-section h3{margin:0}.hy-label,.hy-kicker{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.08em}.hy-kicker{font-size:14px;line-height:20px}.hy-section h2{font-size:48px;line-height:56px;letter-spacing:-.02em}.hy-lead{color:var(--hy-body);font-size:18px;line-height:26px}.hy-section img{display:block}.hy-principle,.hy-system-principle{display:flex;gap:52px;align-items:flex-start}.hy-principle b,.hy-system-principle b{color:var(--hy-blue);font-size:12px;line-height:16px;letter-spacing:.07em}.hy-principle span,.hy-system-principle span{font-size:16px;line-height:24px}
@media(min-width:901px){
  .hoyo-case{width:1440px;height:21840px}
  .hoyo-case .hy-hero{height:928px;padding:88px 120px}
  .hy-hero h1{position:absolute;left:200px;top:140px;width:1208px;max-width:none;font:700 60px/56px "Newsreader",serif;letter-spacing:0}
  .hy-hero-lead{position:absolute;left:200px;top:284px;width:1040px;height:62px;color:#595966;font-size:24px;line-height:31px}
  .hy-hero>img{position:absolute;left:200px;top:378px;width:1040px;height:438px;object-fit:cover}
  .hy-meta{position:absolute;left:200px;top:848px;display:flex;gap:120px;font-size:16px;line-height:23px}.hy-meta b{margin-right:5px}
  .hy-summary{height:840px}.hy-summary>.hy-label{position:absolute;left:200px;top:96px}.hy-summary>h2{position:absolute;left:200px;top:148px;width:1040px;height:120px}.hy-summary>.hy-lead{position:absolute;left:200px;top:284px;width:833px;font-size:24px;line-height:28px}
  .hy-summary-grid{position:absolute;left:200px;top:372px;display:grid;grid-template-columns:360px 420px 420px;width:1040px;border-top:1px solid #9a9fb1}.hy-summary-grid article{position:relative;height:372px;padding-top:42px}.hy-summary-grid article+article{padding-left:40px;border-left:1px solid var(--hy-line)}.hy-summary-grid small,.hy-summary-grid b{display:block;color:var(--hy-body);font-size:12px;line-height:16px;letter-spacing:.08em}.hy-summary-grid b{margin-top:26px}.hy-summary-grid h3{width:340px;margin-top:26px;font-size:24px;line-height:32px;letter-spacing:-.015em}.hy-summary-grid p{width:340px;margin-top:16px;color:var(--hy-body);font-size:18px;line-height:26px}
  .hy-research{height:2500px}.hy-research>.hy-label{position:absolute;left:200px;top:96px;font-size:14px;line-height:20px}.hy-research>h2{position:absolute;left:200px;top:148px;width:1147px;height:112px}.hy-research>.hy-lead{position:absolute;left:200px;top:292px;width:1174px;height:128px;font-size:22px;line-height:32px}.hy-research>h3{position:absolute;left:200px;top:452px;font-size:24px;line-height:32px}.hy-research-main{position:absolute;left:200px;top:516px;width:1040px;height:631.25px}.hy-research-quotes{position:absolute;left:200px;top:1179.25px;width:1040px;height:363px}.hy-research-principle{position:absolute;left:200px;top:1574.25px;width:1040px;height:144px}.hy-research-system{position:absolute;left:200px;top:1750.25px;width:1174px;height:557px}
  .hy-capture-loop{height:847px}.hy-capture-loop>.hy-label{position:absolute;left:200px;top:80px}.hy-capture-loop>h2{position:absolute;left:200px;top:123px;width:1040px;font-size:48px;line-height:56px}.hy-capture-loop>.hy-lead{position:absolute;left:200px;top:203px;width:1040px;height:64px;font-size:22px;line-height:32px}.hy-capture-loop>img{position:absolute;left:200px;top:291px;width:1040px;height:475px}
  .hy-capture-model{height:927px}.hy-capture-model>.hy-label{position:absolute;left:200px;top:70px;color:var(--hy-blue)}.hy-capture-model>h2{position:absolute;left:200px;top:112px;width:1120px;font-size:48px;line-height:56px}.hy-capture-model>.hy-lead{position:absolute;left:200px;top:178px;width:1120px;font-size:22px;line-height:26px}.hy-capture-cards{position:absolute;left:200px;top:280px;display:grid;grid-template-columns:360px 360px 360px;gap:36px}.hy-capture-cards article{position:relative;height:420px;padding:28px;border:0;border-radius:20px;background:#f4f6fa}.hy-capture-cards article.selected{border:2px solid var(--hy-blue);padding:26px}.hy-capture-cards small{display:block;color:var(--hy-body);font-size:12px;line-height:16px;font-weight:700}.hy-capture-cards .selected small{color:var(--hy-blue)}.hy-capture-cards h3{margin-top:10px;font-size:24px;line-height:32px}.hy-capture-cards h4{margin:10px 0 0;color:var(--hy-body);font-size:14px;line-height:20px}.hy-capture-cards .selected h4{color:var(--hy-blue)}.hy-capture-cards p{margin-top:10px;color:var(--hy-body);font-size:12px;line-height:14px}.hy-tool-preview{display:block;width:173px;height:130px;margin-top:13px;object-fit:cover}.hy-video-model{position:relative;width:304px;height:110px;margin-top:20px;border:1px solid var(--hy-line);border-radius:10px;color:var(--hy-body);font-size:10px;font-weight:600;letter-spacing:.06em}.hy-video-model>span{position:absolute;left:14px}.hy-video-model>span:nth-child(1){top:20px}.hy-video-model>span:nth-child(2){top:48px;left:37px}.hy-video-model>span:nth-child(3){top:75px}.hy-video-model strong{position:absolute;left:104px;top:20px;display:grid;place-items:center;width:88px;height:76px;border:2px solid var(--hy-blue);border-radius:8px;color:#fff;background:linear-gradient(var(--hy-blue),var(--hy-blue)) center 20px/24px 24px no-repeat;font-size:10px}.hy-video-model strong em{position:absolute;bottom:7px;color:var(--hy-blue);font-size:10px;font-style:normal}.hy-video-model i{position:absolute;right:12px;top:34px;padding:16px 8px;border:1px solid var(--hy-line);border-radius:8px;background:#fff;font-size:10px;font-style:normal}.hy-path{height:54px;margin-top:14px;padding:17px 20px;border-radius:11px;font-size:14px;line-height:20px;font-weight:700}.hy-path.light{margin-top:36px;background:#fff;color:var(--hy-ink)}.hy-path.dark{background:var(--hy-ink);color:#9a9fb1}.hy-card-note{position:absolute;left:28px;bottom:18px;display:flex;gap:12px;width:290px;font-size:12px;line-height:16px}.hy-card-note b{flex:0 0 auto;color:#8c3833}.hy-card-note span{color:var(--hy-ink)}.hy-capture-cards .selected .hy-card-note{left:26px}.hy-capture-cards .selected .hy-card-note b{color:var(--hy-blue)}.hy-capture-model>.hy-principle{position:absolute;left:200px;top:758px;width:1152px;gap:57px}.hy-capture-model>.hy-principle b{flex:0 0 167px;font-size:16px;line-height:19px}.hy-capture-model>.hy-principle span{width:928px;font-size:16px;line-height:26px}
  .hy-recording-choice{height:1883px;background:#f4f6fa}.hy-recording-choice>.hy-label{position:absolute;left:200px;top:80px;font-size:14px;line-height:20px}.hy-recording-choice>h2{position:absolute;left:200px;top:132px;width:1100px;height:112px}.hy-recording-choice>.hy-lead{position:absolute;left:200px;top:276px;width:1144px;font-size:20px;line-height:26px}.hy-criteria{position:absolute;left:200px;top:334px;width:1216px;height:86px}.hy-options{position:absolute;left:200px;top:452px;width:1215px;height:620px}.hy-recording-ui{position:absolute;left:200px;top:1104px;width:1215px;height:683px}
  .hy-input-rules{height:2009px}.hy-input-rules>.hy-label{position:absolute;left:200px;top:84px;font-size:14px;line-height:20px}.hy-input-rules>h2{position:absolute;left:200px;top:132px;width:1040px;height:112px}.hy-input-rules>.hy-lead{position:absolute;left:200px;top:272px;width:1040px;font-size:20px;line-height:29px}.hy-input-rules>img{position:absolute;left:200px;top:358px;width:1040px;height:1533px}
  .hy-transition{height:415px}.hy-transition>.hy-label{position:absolute;left:200px;top:96px;font-size:14px;line-height:20px}.hy-transition>h2{position:absolute;left:200px;top:148px;font-size:48px;line-height:60px}.hy-transition>.hy-lead{position:absolute;left:200px;top:240px;width:1040px;height:96px;font-size:22px;line-height:32px}
  .hy-message-model{height:1729px}.hy-message-model>.hy-label{position:absolute;left:200px;top:70px;color:var(--hy-blue)}.hy-message-model>h2{position:absolute;left:200px;top:108px;font-size:48px;line-height:56px}.hy-message-model>.hy-lead{position:absolute;left:200px;top:176px;width:1180px;font-size:22px;line-height:26px}.hy-message-table{position:absolute;left:200px;top:282px;width:1040px}.hy-message-table>div{display:grid;grid-template-columns:194px 260px 330px 330px;align-items:center;min-height:78px;padding:0 36px;border:1px solid var(--hy-line);border-radius:12px;margin-bottom:16px;font-size:14px;line-height:20px}.hy-message-table>.head{grid-template-columns:230px 260px 330px 330px;min-height:14px;padding:0;border:0;margin-bottom:16px;border-radius:0;color:var(--hy-body);font-size:12px;line-height:16px}.hy-message-table .shade{background:#f4f6fa}.hy-message-table>div:not(.head)>b{color:var(--hy-blue);font-size:14px}.hy-artifact-label{position:absolute;left:200px;top:813px;color:var(--hy-blue);font-size:16px;line-height:19px;font-weight:600;letter-spacing:.07em}.hy-artifact-image{position:absolute;left:200px;top:846px;width:1200px;height:647px;border-radius:12px;object-fit:cover;object-position:center}.hy-system-principle{position:absolute;left:200px;top:1569px;width:1242px}.hy-system-principle b{flex:0 0 170px;font-size:16px;line-height:19px}.hy-system-principle span{width:1020px;font-size:16px;font-weight:500}
  .hy-meeting-transition{height:1240px}.hy-meeting-transition>.hy-label{position:absolute;left:200px;top:96px;font-size:14px;line-height:20px}.hy-meeting-transition>h2{position:absolute;left:200px;top:148px;font-size:48px;line-height:60px}.hy-meeting-transition>.hy-lead{position:absolute;left:200px;top:240px;width:1040px;height:128px;font-size:22px;line-height:32px}.hy-meeting-transition>img{position:absolute;left:200px;top:400px;width:1214px;height:684px}
  .hy-context-model{height:2486px}.hy-context-model>.hy-label{position:absolute;left:200px;top:88px;font-size:14px;line-height:20px}.hy-context-model>h2{position:absolute;left:200px;top:126px;font-size:48px;line-height:56px}.hy-context-model>.hy-lead{position:absolute;left:200px;top:200px;width:1190px;font-size:20px;line-height:26px}.hy-model-pair{position:absolute;left:200px;top:330px;display:grid;grid-template-columns:584px 576px;gap:40px}.hy-model-pair img{width:100%;height:570px}.hy-model-evidence{position:absolute;left:128px;top:962px;width:1192px;height:1502px}.hy-qr{position:absolute;left:131px;top:2091px;width:296px;height:296px}
  .hy-attention{height:1487px}.hy-attention>.hy-label{position:absolute;left:200px;top:80px;font-size:14px;line-height:20px}.hy-attention>h2{position:absolute;left:200px;top:124px;font-size:48px;line-height:58px}.hy-attention>.hy-lead{position:absolute;left:200px;top:206px;width:1040px;font-size:20px;line-height:30px}.hy-invite-pair{position:absolute;left:200px;top:290px;display:grid;grid-template-columns:584px 584px;gap:32px}.hy-invite-pair img{width:584px;height:330px}.hy-boundary{position:absolute;left:200px;top:665px;color:var(--hy-blue);font-size:12px;font-weight:600}.hy-attention>h3{position:absolute;left:115px;top:692px;font-size:24px;line-height:32px}.hy-policy-pair{position:absolute;left:110px;top:746px;display:grid;grid-template-columns:584px 580px;gap:26px}.hy-policy-pair img{height:82px;width:100%}.hy-attention-evidence{position:absolute;left:105px;top:861px;width:1231px;height:490px}
  .hy-card-architecture{height:1605px}.hy-card-architecture>.hy-label{position:absolute;left:200px;top:80px;font-size:14px;line-height:20px}.hy-card-architecture>h2{position:absolute;left:200px;top:124px;width:1040px;height:112px}.hy-card-architecture>.hy-lead{position:absolute;left:200px;top:260px;width:1040px;height:102px;font-size:20px;line-height:34px}.hy-card-architecture>img{position:absolute;left:200px;top:386px;width:1197px;height:1030px}
  .hy-live-object{height:1824px}.hy-live-object>.hy-label{position:absolute;left:200px;top:80px;font-size:14px;line-height:20px}.hy-live-object>h2{position:absolute;left:200px;top:124px;font-size:48px;line-height:60px}.hy-live-object>.hy-lead{position:absolute;left:200px;top:203px;width:1040px;font-size:20px;line-height:32px}.hy-context-matrix{position:absolute;left:200px;top:297px;width:1040px;height:534px}.hy-state-line{position:absolute;left:200px;top:855px;width:1040px;height:132px}.hy-representations{position:absolute;left:200px;top:1058px;width:1040px}.hy-representation-row{position:relative;width:1040px}.hy-representation-row span{position:absolute;top:0;color:var(--hy-blue);font-size:16px;line-height:24px;font-weight:600;letter-spacing:.07em}.hy-representation-row span:nth-child(1){left:0}.hy-representation-row span:nth-child(2){left:404px}.hy-representation-row span:nth-child(3){left:808px}.hy-representation-row img{position:absolute;left:0;top:29px}.hy-representation-row--top{height:365px}.hy-representation-row--top img{width:1188px;height:243px}.hy-representation-row--bottom span:nth-child(2){left:415px}.hy-representation-row--bottom span:nth-child(3){left:763px}.hy-representation-row--bottom img{width:1028px;height:286px}
  .hy-outcome{height:1120px}.hy-outcome>.hy-label{position:absolute;left:200px;top:88px}.hy-outcome>h2{position:absolute;left:200px;top:132px;width:1120px;height:110px}.hy-outcome>.hy-lead{position:absolute;left:200px;top:270px;width:1100px;height:64px}.hy-facts{position:absolute;left:200px;top:350px;display:grid;grid-template-columns:270px 300px 300px 330px;width:1040px;border-top:1px solid var(--hy-line)}.hy-facts article{height:200px;padding-top:40px}.hy-facts article+article{padding-left:30px;border-left:1px solid var(--hy-line)}.hy-facts small{font-size:12px;font-weight:700}.hy-facts h3{margin-top:19px;font-size:24px;line-height:32px}.hy-facts p{margin-top:8px;width:260px;color:var(--hy-body);font-size:16px;line-height:24px}.hy-held-label{position:absolute;left:200px;top:590px;font-size:12px;font-weight:700;letter-spacing:.08em}.hy-held{position:absolute;left:200px;top:640px;display:grid;grid-template-columns:336px 306px 330px;gap:64px}.hy-held h3{font-size:24px;line-height:32px}.hy-held p{margin-top:36px;color:var(--hy-body);font-size:16px;line-height:24px}.hy-closing{position:absolute;left:200px;top:870px;width:1160px;font-size:24px;line-height:32px;font-weight:700}
}
@media(max-width:900px){.case-home-header{padding:14px 24px}.hoyo-case{width:100%}.hy-section{height:auto!important;padding:56px 24px!important}.hy-section>*{position:static!important;width:100%!important;height:auto!important}.hy-section h1,.hy-section h2{font-size:clamp(38px,9vw,48px)!important;line-height:1.08!important}.hy-hero h1{max-width:none;margin-top:24px;font-family:"Newsreader",serif}.hy-hero-lead,.hy-lead{margin-top:24px}.hy-section>img{margin-top:32px}.hy-meta{display:grid!important;gap:8px!important;margin-top:24px}.hy-summary-grid,.hy-capture-cards,.hy-model-pair,.hy-invite-pair,.hy-policy-pair,.hy-facts,.hy-held{display:grid!important;grid-template-columns:1fr!important;gap:20px!important;margin-top:40px}.hy-summary-grid article,.hy-facts article{height:auto!important;padding:24px 0!important;border-left:0!important;border-top:1px solid var(--hy-line)}.hy-message-table{overflow:auto;margin-top:32px}.hy-message-table>div{min-width:1100px}.hy-representations{margin-top:32px}.hy-representations img{width:100%!important;height:auto!important;margin:24px 0 0!important}}

/* Pinxiaoquan — Figma node 622:16596 */
.pin-case{--px-ink:#0e0f14;--px-body:#616675;--px-line:#d6d9e3;--px-brand:#5247c7;--px-surface:#f4f6fa;width:min(100%,1440px);max-width:none;margin:0 auto;padding:0;color:var(--px-ink);background:#fff;font-family:"Work Sans",sans-serif}.pin-case~.site-footer{display:none}.px-section{position:relative;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--px-line)}.px-section p,.px-section h1,.px-section h2,.px-section h3,.px-section h4{margin:0}.px-section h1{max-width:none;letter-spacing:0}.px-eyebrow{color:var(--px-brand);font-size:14px;line-height:20px;font-weight:700;letter-spacing:.08em}.px-section h2{font-size:48px;line-height:56px;font-weight:700;letter-spacing:-.02em}.px-body{font-size:18px;line-height:26px}.px-section>img{display:block}
@media(min-width:901px){
  .pin-case{width:1440px;height:11859px}
  .px-overview{height:1071px;background:#fff}.px-overview>.px-eyebrow{position:absolute;left:200px;top:72px}.px-overview>h1{position:absolute;left:200px;top:126px;width:1241px;height:120px;font:700 60px/60px "Newsreader",serif}.px-overview>.px-intro{position:absolute;left:200px;top:286px;width:1241px;height:96px;font-size:24px;line-height:32px}.px-overview>img{position:absolute;left:200px;top:422px;width:1040px;height:438px;object-fit:cover}.px-overview>.px-meta{position:absolute;left:200px;top:929px;width:821px;height:19px;font-size:16px;line-height:19px}
  .px-context{height:676px;background:var(--px-surface)}.px-context>.px-eyebrow{position:absolute;left:200px;top:72px}.px-context>h2{position:absolute;left:200px;top:116px;width:1040px;height:110px}.px-context>.px-body{position:absolute;left:200px;top:242px;width:1040px;height:156px}.px-business-goal{position:absolute;left:200px;top:479px;display:grid;gap:12px;width:915px;height:54px}.px-business-goal b{color:var(--px-brand);font-size:12px;line-height:16px;letter-spacing:.07em}.px-business-goal span{font-size:18px;line-height:26px}
  .px-goal{height:900px;background:#fff}.px-goal>.px-eyebrow{position:absolute;left:200px;top:72px}.px-goal>h2{position:absolute;left:200px;top:116px;width:760px;height:120px;font-size:52px;line-height:60px}.px-goal>.px-body{position:absolute;left:200px;top:246px;width:1040px;height:65px}.px-goal>img{position:absolute;left:200px;top:350px;width:1040px;height:464px}
  .px-models{height:2200px;background:#fff}.px-models>.px-eyebrow{position:absolute;left:200px;top:72px}.px-models>h2{position:absolute;left:200px;top:116px;width:1100px;height:112px}.px-models>.px-body{position:absolute;left:200px;top:236px;width:1040px;height:52px}.px-direction,.px-criteria{position:absolute;left:200px;width:1040px}.px-direction{height:470px}.px-direction-1{top:340px}.px-direction-2{top:842px}.px-direction-3{top:1344px}.px-criteria{top:1848px;height:248px}
  .px-generation{height:1216px;padding:0;background:#fff}.px-generation>.px-eyebrow{position:absolute;left:200px;top:52px;font-size:12px;line-height:16px;letter-spacing:0}.px-generation>h2{position:absolute;left:200px;top:76px;width:1040px;height:46px}.px-generation-intro{position:absolute;left:200px;top:130px;width:1180px;height:42px;color:var(--px-brand);font-size:14px;line-height:20px}.px-generation>img{position:absolute;left:200px;width:1040px}.px-generation-1{top:216px;height:212px}.px-generation-2{top:452px;height:420px}.px-generation-3{top:896px;height:272px}
  .px-learning{height:3164px;background:var(--px-surface)}.px-learning>.px-eyebrow{position:absolute;left:200px;top:72px}.px-learning>h2{position:absolute;left:200px;top:116px;width:900px;height:110px}.px-learning>.px-body{position:absolute;left:200px;top:246px;width:1040px;height:65px}.px-learning>img{position:absolute;left:200px;top:340px;width:1040px;height:2708px}
  .px-forward{height:1732px;background:#fff}.px-forward>.px-eyebrow{position:absolute;left:200px;top:72px}.px-forward>h2{position:absolute;left:200px;top:116px;width:960px;height:110px}.px-forward>.px-body{position:absolute;left:200px;top:246px;width:1040px;height:72px}.px-forward-flow{position:absolute;left:200px;top:350px;width:1040px;height:937px}.px-forward-base{position:absolute;inset:0;width:1040px;height:937px}.px-phone{position:absolute;top:140px;width:300px;height:654px}.px-phone-1{left:28px}.px-phone-2{left:458px}.px-phone-3{left:888px}.px-plus,.px-arrow{position:absolute;top:410px;color:var(--px-brand);font-size:48px;line-height:56px}.px-plus{left:378px}.px-arrow{left:788px}.px-forward-principle{position:absolute;left:200px;top:1330px;width:1040px;height:280px}
  .px-outcome{height:900px;background:#fff;padding:56px 200px 52px}.px-outcome::after{content:"";position:absolute;left:200px;top:529.5px;width:1040px;height:1px;background:var(--px-line)}.px-outcome>.px-eyebrow{position:absolute;left:200px;top:56px}.px-outcome>h2{position:absolute;left:200px;top:96px;width:1040px;height:104px}.px-metrics{position:absolute;left:200px;top:260px;display:grid;grid-template-columns:repeat(4,300px);width:1040px;height:244px}.px-metrics article{height:188px;padding:12px 24px 0 28px;border-left:1px solid var(--px-line)}.px-metrics article:first-child{padding-left:0;border-left:0}.px-metrics strong{display:block;height:68px;font-size:52px;line-height:60px}.px-metrics article:last-child strong{font-size:48px;line-height:56px}.px-metrics h3{margin-top:12px;font-size:14px;line-height:20px;font-weight:500}.px-metrics p{margin-top:12px;width:275px;color:var(--px-body);font-size:12px;line-height:16px}.px-scope{position:absolute;left:200px;top:556px;display:grid;grid-template-columns:300px repeat(3,268px);gap:32px;width:1040px;height:292px}.px-scope article{position:relative;padding-top:4px}.px-scope-intro{padding-top:0!important}.px-scope-intro>b{display:block;color:var(--px-brand);font-size:12px;line-height:16px}.px-scope-intro h3{margin-top:12px;width:288px;font-size:24px;line-height:32px}.px-scope-intro p{margin-top:12px;width:288px;color:var(--px-body);font-size:14px;line-height:20px}.px-scope h4{font-size:12px;line-height:16px}.px-scope article:not(.px-scope-intro)>p{margin-top:16px;width:252px;color:var(--px-body);font-size:14px;line-height:20px}.px-scope i{position:absolute;left:0;top:210px;width:42px;height:3px;border-radius:2px;background:var(--px-brand)}
}
@media(max-width:900px){.pin-case{width:100%;height:auto}.px-section{height:auto!important;padding:56px 24px!important}.px-section>*{position:static!important;width:100%!important;height:auto!important}.px-section h1,.px-section h2{margin-top:24px;font-size:clamp(38px,10vw,52px)!important;line-height:1.08!important}.px-intro,.px-body,.px-generation-intro{margin-top:24px}.px-section>img,.px-forward-flow,.px-business-goal,.px-metrics,.px-scope{margin-top:36px}.px-forward-flow{position:relative!important}.px-forward-base{position:static!important}.px-phone,.px-plus,.px-arrow{display:none}.px-metrics,.px-scope{display:grid!important;grid-template-columns:1fr!important;gap:24px!important}.px-metrics article,.px-scope article{height:auto!important;padding:24px 0!important;border-left:0!important;border-top:1px solid var(--px-line)}.px-scope i{display:none}}

/* Unified 200px desktop page gutters */
@media(min-width:901px){
  .home-header,.home-main,.home-footer{padding-inline:200px}
  .os-section{padding-left:200px;padding-right:200px}
  .hy-summary-grid{grid-template-columns:312px 364px 364px}.hy-summary-grid h3,.hy-summary-grid p{width:284px}
  .hy-capture-cards{grid-template-columns:322px 322px 322px;gap:37px}.hy-capture-cards article{width:322px}.hy-video-model{width:266px}.hy-card-note{width:252px}
  .hy-model-pair{grid-template-columns:500px 500px;gap:40px}.hy-invite-pair{grid-template-columns:504px 504px;gap:32px}.hy-invite-pair img{width:504px}.hy-policy-pair{grid-template-columns:507px 507px;gap:26px}
  .hy-message-table>div{grid-template-columns:158px 220px 300px 290px}.hy-message-table>.head{grid-template-columns:194px 220px 300px 290px}
  .hy-facts{grid-template-columns:repeat(4,260px)}.hy-facts article+article{padding-left:24px}.hy-held{grid-template-columns:300px 290px 322px;gap:64px}
  .px-overview>h1,.px-overview>.px-intro,.px-generation-intro{width:1040px}
  .px-goal>img,.px-direction,.px-criteria,.px-generation>img,.px-learning>img,.px-forward-base,.px-forward-principle{height:auto}
  .px-forward-flow{height:812px}.px-phone{top:121px;width:260px;height:auto}.px-phone-1{left:24px}.px-phone-2{left:397px}.px-phone-3{left:770px}.px-plus,.px-arrow{top:355px}.px-plus{left:328px}.px-arrow{left:683px}
  .px-metrics{grid-template-columns:repeat(4,260px)}.px-metrics article{padding-right:18px;padding-left:22px}.px-metrics p{width:222px}.px-scope{grid-template-columns:260px repeat(3,224px);gap:36px}.px-scope-intro h3,.px-scope-intro p{width:248px}.px-scope article:not(.px-scope-intro)>p,.px-scope h4{width:212px}
}

/* Project pages keep the original 120px desktop gutters. */
@media(min-width:901px){
  .case-home-header{padding-left:120px;padding-right:120px}

  .orbit-semantic .os-section{padding-left:120px;padding-right:120px}
  .orbit-semantic .os-section>*,
  .orbit-semantic .os-mobile-strategy,
  .orbit-semantic .os-poster-evidence{left:120px}
  .orbit-semantic .os-hero h1,
  .orbit-semantic .os-hero-image{width:1200px}

  .hoyo-case .hy-section>*{left:120px}
  .hoyo-case .hy-hero h1,
  .hoyo-case .hy-hero-lead,
  .hoyo-case .hy-hero>img,
  .hoyo-case .hy-summary-grid,
  .hoyo-case .hy-research-main,
  .hoyo-case .hy-research-quotes,
  .hoyo-case .hy-research-principle,
  .hoyo-case .hy-research-system,
  .hoyo-case .hy-capture-loop>h2,
  .hoyo-case .hy-capture-loop>.hy-lead,
  .hoyo-case .hy-capture-loop>img,
  .hoyo-case .hy-criteria,
  .hoyo-case .hy-options,
  .hoyo-case .hy-recording-ui,
  .hoyo-case .hy-input-rules>h2,
  .hoyo-case .hy-input-rules>.hy-lead,
  .hoyo-case .hy-input-rules>img,
  .hoyo-case .hy-message-table,
  .hoyo-case .hy-meeting-transition>.hy-lead,
  .hoyo-case .hy-meeting-transition>img,
  .hoyo-case .hy-context-matrix,
  .hoyo-case .hy-state-line,
  .hoyo-case .hy-representations,
  .hoyo-case .hy-facts{width:1200px}

  .pin-case .px-section>*{left:120px}
  .pin-case .px-overview>h1,
  .pin-case .px-overview>.px-intro,
  .pin-case .px-overview>img,
  .pin-case .px-context>h2,
  .pin-case .px-context>.px-body,
  .pin-case .px-goal>.px-body,
  .pin-case .px-goal>img,
  .pin-case .px-models>.px-body,
  .pin-case .px-direction,
  .pin-case .px-criteria,
  .pin-case .px-generation>h2,
  .pin-case .px-generation-intro,
  .pin-case .px-generation>img,
  .pin-case .px-learning>.px-body,
  .pin-case .px-learning>img,
  .pin-case .px-forward>.px-body,
  .pin-case .px-forward-flow,
  .pin-case .px-forward-base,
  .pin-case .px-forward-principle,
  .pin-case .px-outcome>h2,
  .pin-case .px-metrics,
  .pin-case .px-scope{width:1200px}
  .pin-case .px-outcome{padding-left:120px;padding-right:120px}
  .pin-case .px-outcome::after{left:120px;width:1200px}

  .hoyo-case .hy-summary-grid{grid-template-columns:360px 420px 420px}
.hoyo-case .hy-summary-grid{border-top:0}
  .hoyo-case .hy-summary-grid h3,
  .hoyo-case .hy-summary-grid p{width:340px}
  .hoyo-case .hy-capture-cards{grid-template-columns:360px 360px 360px;gap:36px}
  .hoyo-case .hy-capture-cards article{width:auto}
  .hoyo-case .hy-video-model{width:304px}
  .hoyo-case .hy-card-note{width:290px}
  .hoyo-case .hy-model-pair{grid-template-columns:584px 576px;gap:40px}
  .hoyo-case .hy-invite-pair{grid-template-columns:584px 584px;gap:32px}
  .hoyo-case .hy-invite-pair img{width:584px}
  .hoyo-case .hy-policy-pair{grid-template-columns:584px 580px;gap:26px}
  .hoyo-case .hy-message-table>div{grid-template-columns:194px 260px 330px 330px}
  .hoyo-case .hy-message-table>.head{grid-template-columns:230px 260px 330px 330px}
  .hoyo-case .hy-facts{grid-template-columns:270px 300px 300px 330px}
  .hoyo-case .hy-facts article+article{padding-left:30px}
  .hoyo-case .hy-held{grid-template-columns:336px 306px 330px;gap:64px}

  .pin-case .px-goal>img{height:464px}
  .pin-case .px-direction{height:470px}
  .pin-case .px-criteria{height:248px}
  .pin-case .px-generation-1{height:212px}.pin-case .px-generation-2{height:420px}.pin-case .px-generation-3{height:272px}
  .pin-case .px-learning>img{height:2708px}
  .pin-case .px-forward-base{height:937px}
  .pin-case .px-forward-principle{height:280px}
  .pin-case .px-forward-flow{height:937px}
  .pin-case .px-phone{top:140px;width:300px;height:654px}
  .pin-case .px-phone-1{left:28px}.pin-case .px-phone-2{left:458px}.pin-case .px-phone-3{left:888px}
  .pin-case .px-plus,.pin-case .px-arrow{top:410px}.pin-case .px-plus{left:378px}.pin-case .px-arrow{left:788px}
  .pin-case .px-metrics{grid-template-columns:repeat(4,300px)}
  .pin-case .px-metrics article{padding-right:24px;padding-left:28px}
  .pin-case .px-metrics p{width:275px}
  .pin-case .px-scope{grid-template-columns:300px repeat(3,268px);gap:32px}
  .pin-case .px-scope-intro h3,.pin-case .px-scope-intro p{width:288px}
  .pin-case .px-scope article:not(.px-scope-intro)>p,.pin-case .px-scope h4{width:252px}
}

/* Project navigation and Figma-synced corrections */
[data-case-study]{position:relative}
.case-back-arrow{position:absolute;z-index:30;left:max(24px,calc(50% - 648px));display:block;width:24px;height:24px;color:#596273;text-decoration:none}
.case-back-arrow svg{display:block;width:24px;height:24px}
.orbit-semantic>.case-back-arrow{top:68px}
.pin-case>.case-back-arrow{top:70px}
.hoyo-case>.case-back-arrow{top:86px}
.case-back-arrow:hover,.case-back-arrow:focus-visible{color:#0e0f14;outline:0}

@media(min-width:901px){
  .os-section.os-responsibility{height:960px;padding:68px 120px 0}
  .os-responsibility>.os-responsibility-table{position:relative;display:block;width:1200px;height:572px;margin-top:23px;padding:0;border:1px solid #dbdbe3;border-radius:18px;background:#fff}
  .os-responsibility-table>div{position:absolute;left:19px;display:grid;width:1176px;height:54px;min-height:0;padding:0 20px;grid-template-columns:520px 530px;column-gap:80px;align-items:center;border-radius:10px;background:#fff;font-size:15px;line-height:20px}
  .os-responsibility-table>.head{top:20px;left:39px;width:1136px;height:34px;padding:0;grid-template-columns:540px 540px;column-gap:60px;background:transparent;font-size:13px;line-height:16px}
  .os-responsibility-table>div:nth-child(2){top:77px}
  .os-responsibility-table>div:nth-child(3){top:144px;background:#fcfcfe}
  .os-responsibility-table>div:nth-child(4){top:211px}
  .os-responsibility-table>div:nth-child(5){top:278px;background:#fcfcfe}
  .os-responsibility-table>div:nth-child(6){top:345px}
  .os-responsibility-table>div:nth-child(7){top:412px;background:#fcfcfe}
  .os-responsibility-table>div:nth-child(8){top:479px}
  .os-responsibility-table>.final{border:1px solid #5247c7;background:#f6f5ff!important}

  .hy-card-architecture>img{height:auto}
  .hoyo-case .hy-facts{border-top:0}

  .pin-case .px-generation{height:1263px}
  .pin-case .px-generation-intro{top:148px;width:1180px;height:62px;color:#616675;font-size:24px;line-height:31px}
  .pin-case .px-generation-1{top:240px}
  .pin-case .px-generation-2{top:476px}
  .pin-case .px-generation-3{top:920px}
}

@media(max-width:900px){
  .orbit-semantic>.case-back-arrow,
  .pin-case>.case-back-arrow,
  .hoyo-case>.case-back-arrow{position:relative;top:auto;left:auto;margin:24px 0 -16px 24px}
}

/* About */
.about-page{
  --home-ink:#090a0e;
  --home-muted:#595e6b;
  --home-line:#c7c9d1;
  --home-accent:#eb1478;
  min-height:100vh;
  background:#fff;
  color:var(--home-ink);
}
.about-page .home-header{padding-inline:200px}
.about-main{width:min(100%,1440px);margin:0 auto;padding:48px 120px 24px}
.about-layout{display:grid;grid-template-columns:520px minmax(0,1fr);gap:76px;min-height:calc(100vh - 149px)}
.about-identity{position:relative;min-height:calc(100vh - 149px)}
.about-identity h1{max-width:none;margin:0;font-family:"Newsreader",Georgia,serif;font-size:144px;font-weight:600;line-height:.9;letter-spacing:-.055em}
.about-semicircle{position:absolute;left:90px;bottom:0;width:360px;height:180px;border-radius:360px 360px 0 0;background:var(--home-accent)}
.about-content{padding-top:6px}
.about-content h2{max-width:650px;margin:0;font-size:40px;font-weight:400;line-height:1.18;letter-spacing:-.035em}
.about-biography{max-width:650px;margin-top:32px;color:#616675;font-size:16px;line-height:1.5}
.about-biography p{margin:0}
.about-biography p+p{margin-top:20px}
.about-download{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:650px;min-height:60px;margin-top:32px;padding:0 28px;border:1px solid #090a0e;font-size:18px;font-weight:600}
.about-download span:last-child{font-size:32px;font-weight:400;line-height:1}
.about-download:hover,.about-download:focus-visible{color:#fff;background:#090a0e;text-decoration:none}

@media(max-width:900px){
  .about-page .home-header{padding-inline:24px}
  .about-main{padding:72px 24px 64px}
  .about-layout{grid-template-columns:1fr;gap:64px;min-height:0}
  .about-identity{min-height:400px}
  .about-identity h1{font-size:clamp(88px,22vw,132px)}
  .about-semicircle{left:50%;width:min(76vw,340px);height:min(38vw,170px);transform:translateX(-50%)}
  .about-content{padding-top:0}
  .about-content h2{font-size:clamp(32px,8vw,42px)}
  .about-biography{font-size:16px}
}

@media(max-width:640px){
  .about-main{padding-top:52px}
  .about-identity{min-height:300px}
  .about-download{min-height:60px;padding-inline:20px;font-size:17px}
}

/* Use the homepage navigation consistently across case-study pages. */
.case-home-header{
  width:min(100%,1440px);
  max-width:1440px;
  margin-inline:auto;
  padding:2.8rem 200px 0;
  border-bottom:0;
  background:#fff;
}
.case-home-header .home-nav{max-width:none;margin:0;align-items:flex-start}

@media(max-width:900px){
  .case-home-header{padding:1.25rem 24px 0}
}