/* Portfolio foundation tokens; design reference lives in design-system/tokens.json. */
:root {
  --dimension-1: 1px;
  --dimension-10: 10px;
  --dimension-100: 100px;
  --dimension-1000: 1000px;
  --dimension-11: 11px;
  --dimension-110: 110px;
  --dimension-1100: 1100px;
  --dimension-114: 114px;
  --dimension-115: 115px;
  --dimension-12: 12px;
  --dimension-120: 120px;
  --dimension-1200: 1200px;
  --dimension-125: 125px;
  --dimension-126: 126px;
  --dimension-1260: 1260px;
  --dimension-13: 13px;
  --dimension-130: 130px;
  --dimension-1300: 1300px;
  --dimension-1360: 1360px;
  --dimension-14: 14px;
  --dimension-1440: 1440px;
  --dimension-145: 145px;
  --dimension-15: 15px;
  --dimension-16: 16px;
  --dimension-160: 160px;
  --dimension-17: 17px;
  --dimension-18: 18px;
  --dimension-19: 19px;
  --dimension-195: 195px;
  --dimension-2: 2px;
  --dimension-20: 20px;
  --dimension-200: 200px;
  --dimension-21: 21px;
  --dimension-210: 210px;
  --dimension-215: 215px;
  --dimension-22: 22px;
  --dimension-225: 225px;
  --dimension-23: 23px;
  --dimension-230: 230px;
  --dimension-24: 24px;
  --dimension-245: 245px;
  --dimension-25: 25px;
  --dimension-26: 26px;
  --dimension-265: 265px;
  --dimension-27: 27px;
  --dimension-270: 270px;
  --dimension-28: 28px;
  --dimension-280: 280px;
  --dimension-3: 3px;
  --dimension-30: 30px;
  --dimension-300: 300px;
  --dimension-310: 310px;
  --dimension-32: 32px;
  --dimension-320: 320px;
  --dimension-325: 325px;
  --dimension-33: 33px;
  --dimension-34: 34px;
  --dimension-340: 340px;
  --dimension-35: 35px;
  --dimension-350: 350px;
  --dimension-36: 36px;
  --dimension-360: 360px;
  --dimension-37: 37px;
  --dimension-370: 370px;
  --dimension-38: 38px;
  --dimension-4: 4px;
  --dimension-40: 40px;
  --dimension-400: 400px;
  --dimension-410: 410px;
  --dimension-42: 42px;
  --dimension-420: 420px;
  --dimension-44: 44px;
  --dimension-45: 45px;
  --dimension-46: 46px;
  --dimension-460: 460px;
  --dimension-47: 47px;
  --dimension-48: 48px;
  --dimension-490: 490px;
  --dimension-5: 5px;
  --dimension-50: 50px;
  --dimension-520: 520px;
  --dimension-53: 53px;
  --dimension-54: 54px;
  --dimension-55: 55px;
  --dimension-550: 550px;
  --dimension-56: 56px;
  --dimension-560: 560px;
  --dimension-58: 58px;
  --dimension-580: 580px;
  --dimension-6: 6px;
  --dimension-60: 60px;
  --dimension-600: 600px;
  --dimension-610: 610px;
  --dimension-64: 64px;
  --dimension-640: 640px;
  --dimension-65: 65px;
  --dimension-650: 650px;
  --dimension-66: 66px;
  --dimension-660: 660px;
  --dimension-68: 68px;
  --dimension-680: 680px;
  --dimension-7: 7px;
  --dimension-70: 70px;
  --dimension-700: 700px;
  --dimension-710: 710px;
  --dimension-72: 72px;
  --dimension-720: 720px;
  --dimension-740: 740px;
  --dimension-75: 75px;
  --dimension-750: 750px;
  --dimension-76: 76px;
  --dimension-760: 760px;
  --dimension-78: 78px;
  --dimension-780: 780px;
  --dimension-8: 8px;
  --dimension-80: 80px;
  --dimension-800: 800px;
  --dimension-820: 820px;
  --dimension-85: 85px;
  --dimension-850: 850px;
  --dimension-86: 86px;
  --dimension-88: 88px;
  --dimension-9: 9px;
  --dimension-90: 90px;
  --dimension-92: 92px;
  --dimension-94: 94px;
  --dimension-95: 95px;
  --dimension-999: 999px;
  --duration--12s: .12s;
  --duration--22s: .22s;
  --duration--25s: .25s;
  --duration--28s: .28s;
  --duration--2s: .2s;
  --duration--35s: .35s;
  --duration--3s: .3s;
  --duration--45s: .45s;
  --duration--4s: .4s;
  --duration--5s: .5s;
  --duration--6s: .6s;
  --duration--75s: .75s;
  --duration--9s: .9s;
  --duration-3s: 3s;
  --font-size-10: 10px;
  --font-size-100: 100px;
  --font-size-104: 104px;
  --font-size-11: 11px;
  --font-size-110: 110px;
  --font-size-115: 115px;
  --font-size-12: 12px;
  --font-size-120: 120px;
  --font-size-124: 124px;
  --font-size-128: 128px;
  --font-size-13: 13px;
  --font-size-135: 135px;
  --font-size-14: 14px;
  --font-size-145: 145px;
  --font-size-15: 15px;
  --font-size-150: 150px;
  --font-size-16: 16px;
  --font-size-160: 160px;
  --font-size-17: 17px;
  --font-size-172: 172px;
  --font-size-175: 175px;
  --font-size-18: 18px;
  --font-size-19: 19px;
  --font-size-20: 20px;
  --font-size-22: 22px;
  --font-size-23: 23px;
  --font-size-24: 24px;
  --font-size-25: 25px;
  --font-size-26: 26px;
  --font-size-27: 27px;
  --font-size-28: 28px;
  --font-size-29: 29px;
  --font-size-30: 30px;
  --font-size-300: 300px;
  --font-size-31: 31px;
  --font-size-32: 32px;
  --font-size-33: 33px;
  --font-size-330: 330px;
  --font-size-34: 34px;
  --font-size-35: 35px;
  --font-size-36: 36px;
  --font-size-37: 37px;
  --font-size-38: 38px;
  --font-size-39: 39px;
  --font-size-40: 40px;
  --font-size-42: 42px;
  --font-size-44: 44px;
  --font-size-45: 45px;
  --font-size-46: 46px;
  --font-size-48: 48px;
  --font-size-49: 49px;
  --font-size-50: 50px;
  --font-size-51: 51px;
  --font-size-52: 52px;
  --font-size-54: 54px;
  --font-size-55: 55px;
  --font-size-56: 56px;
  --font-size-57: 57px;
  --font-size-58: 58px;
  --font-size-6: 6px;
  --font-size-60: 60px;
  --font-size-62: 62px;
  --font-size-65: 65px;
  --font-size-66: 66px;
  --font-size-7: 7px;
  --font-size-70: 70px;
  --font-size-72: 72px;
  --font-size-74: 74px;
  --font-size-75: 75px;
  --font-size-8: 8px;
  --font-size-80: 80px;
  --font-size-82: 82px;
  --font-size-84: 84px;
  --font-size-9: 9px;
  --font-size-90: 90px;
  --font-size-95: 95px;
  --font-size-98: 98px;
  --palette-141414: #141414;
  --palette-151d19: #151d19;
  --palette-171717: #171717;
  --palette-172017: #172017;
  --palette-1b1c1c: #1b1c1c;
  --palette-202020: #202020;
  --palette-203921: #203921;
  --palette-20392122: #20392122;
  --palette-20392133: #20392133;
  --palette-21352a: #21352a;
  --palette-222: #222;
  --palette-231f3f: #231f3f;
  --palette-232718: #232718;
  --palette-232925: #232925;
  --palette-252b49: #252b49;
  --palette-253221: #253221;
  --palette-254a32: #254a32;
  --palette-292321: #292321;
  --palette-302d28: #302d28;
  --palette-315638: #315638;
  --palette-31563844: #31563844;
  --palette-3e2f22: #3e2f22;
  --palette-41335e: #41335e;
  --palette-432819: #432819;
  --palette-43281922: #43281922;
  --palette-43281933: #43281933;
  --palette-5c8666: #5c8666;
  --palette-5ebd76: #5ebd76;
  --palette-635952: #635952;
  --palette-686459: #686459;
  --palette-6b5724: #6b5724;
  --palette-777: #777;
  --palette-7baaf7: #7baaf7;
  --palette-7f5d4c: #7f5d4c;
  --palette-9578c5: #9578c5;
  --palette-a68740: #a68740;
  --palette-ae7d3d: #ae7d3d;
  --palette-aeb9ac: #aeb9ac;
  --palette-b4c7fa: #b4c7fa;
  --palette-b8c4b7: #b8c4b7;
  --palette-b99c49: #b99c49;
  --palette-bd9278: #bd9278;
  --palette-bdc4b8: #bdc4b8;
  --palette-c29474: #c29474;
  --palette-c9c8fd: #c9c8fd;
  --palette-c9ed7c: #c9ed7c;
  --palette-ced9cc: #ced9cc;
  --palette-d1ed83: #d1ed83;
  --palette-d5c9b5: #d5c9b5;
  --palette-dbc476: #dbc476;
  --palette-dbe9c9: #dbe9c9;
  --palette-ddd6c9: #ddd6c9;
  --palette-e2dffd: #e2dffd;
  --palette-e6ede4: #e6ede4;
  --palette-e8deff: #e8deff;
  --palette-eec7aa: #eec7aa;
  --palette-efe9de: #efe9de;
  --palette-f0f5dc: #f0f5dc;
  --palette-f0f6e9: #f0f6e9;
  --palette-f1f8e9: #f1f8e9;
  --palette-f4f1b5: #f4f1b5;
  --palette-f4f6ef: #f4f6ef;
  --palette-f7ef77: #f7ef77;
  --palette-f7f7f4: #f7f7f4;
  --palette-f9faf5: #f9faf5;
  --palette-fce5d5: #fce5d5;
  --palette-fff: #fff;
  --palette-fff0a7: #fff0a7;
  --palette-fff0b5: #fff0b5;
  --palette-fff0d9: #fff0d9;
  --palette-fff8: #fff8;
  --palette-fff9: #fff9;
  --palette-fff9eb: #fff9eb;
  --palette-ffffff55: #ffffff55;
  --palette-ffffff88: #ffffff88;
  --color-background: #f8f7f4;
  --color-surface: #ffffff;
  --color-text: #1b1c1c;
  --color-text-muted: #6d706f;
  --color-border: #dcdcd6;
  --color-accent: #d6ef83;
  --color-panel: #eeede8;
  --color-focus: #7baaf7;
  --font-display: "Space Grotesk",sans-serif;
  --font-body: "DM Sans",sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-image: 8px;
  --radius-card: 12px;
  --radius-banner: 16px;
  --radius-pill: 999px;
  --border-width: 1px;
  --motion-fast: 150ms;
  --motion-standard: 250ms;
  --motion-reveal: 750ms;
  --motion-ease: cubic-bezier(.2,.7,.2,1);
  --text-caption: 12px;
  --text-small: 14px;
  --text-body: 16px;
  --text-lead: 18px;
  --heading-section: clamp(32px,4.4vw,51px);
  --heading-card: 19px;
  --line-body: 1.65;
  --line-heading: 1.08;
  --layout-wide: 1440px;
  --layout-study: 1260px;
  --layout-sidebar: 230px;
  --layout-gutter: 44px;
  --layout-card-gap: 24px;
  --layout-section-gap: 48px;
  --layout-card-padding: 24px;
  --layout-panel-padding: 32px;
  --bg: var(--color-background);
  --paper: var(--color-surface);
  --ink: var(--color-text);
  --muted: var(--color-text-muted);
  --stroke: var(--color-border);
  --accent: var(--color-accent);
  --soft: var(--color-panel);
  --display: var(--font-display);
  --body: var(--font-body);
  --line: var(--color-border);
}
:root { color-scheme: light; }
:root[data-theme="dark"] {
  --color-background: #141615;
  --color-surface: #1d201e;
  --color-text: #f2f1eb;
  --color-text-muted: #abaea8;
  --color-border: #3b3e39;
  --color-accent: #cee98a;
  --color-panel: #292c29;
}
:root[data-theme="dark"] { color-scheme: dark; }

/* Existing portfolio layouts and project artwork;
 values use shared tokens. */     * {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:var(--dimension-100)
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:var(--font-size-16);
  line-height:1.55;
  transition:background var(--duration--25s),color var(--duration--25s)
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit
}
::selection {
  background:var(--accent);
  color:var(--palette-171717)
}
a:focus-visible,button:focus-visible {
  outline:var(--dimension-3) solid var(--palette-7baaf7);
  outline-offset:var(--dimension-4)
}
 .shell {
  width:min(var(--dimension-1440),calc(100% - var(--dimension-88)));
  margin:auto
}
 nav.top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--dimension-22);
  padding:var(--dimension-28) 0;
  border-bottom:var(--dimension-1) solid var(--stroke);
  position:relative;
  z-index:4
}
.brand {
  display:flex;
  align-items:center;
  gap:var(--dimension-11);
  font:700 var(--font-size-18) var(--display);
  letter-spacing:-.07em
}
.brand-symbol {
  display:grid;
  place-items:center;
  background:var(--ink);
  color:var(--bg);
  width:var(--dimension-36);
  height:var(--dimension-36);
  border-radius:50%;
  font-size:var(--font-size-13);
  letter-spacing:-.06em
}
.navlinks {
  display:flex;
  align-items:center;
  gap:var(--dimension-34);
  font-size:var(--font-size-13);
  font-weight:700
}
.navlinks a:hover,.text-link:hover {
  text-decoration:underline;
  text-underline-offset:var(--dimension-5)
}
.theme-toggle {
  border:var(--dimension-1) solid var(--stroke);
  background:var(--paper);
  color:var(--ink);
  border-radius:var(--dimension-100);
  padding:var(--dimension-10) var(--dimension-16);
  display:flex;
  gap:var(--dimension-10);
  align-items:center;
  cursor:pointer;
  font-size:var(--font-size-13);
  font-weight:700
}
.theme-icon {
  font-size:var(--font-size-17)
}
.hero {
  padding:var(--dimension-115) 0 var(--dimension-94)
}
.eyebrow,.kicker {
  font:700 var(--font-size-12) var(--body);
  text-transform:uppercase;
  letter-spacing:.16em
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:var(--dimension-10)
}
.signal {
  width:var(--dimension-8);
  height:var(--dimension-8);
  background:var(--palette-5ebd76);
  border-radius:50%;
  box-shadow:0 0 0 var(--dimension-4) rgba(94,189,118,.15)
}
.hero h1 {
  font:600 clamp(var(--font-size-66),11.8vw,var(--font-size-172))/.92 var(--display);
  letter-spacing:-.095em;
  margin:var(--dimension-34) 0 var(--dimension-24);
  max-width:var(--dimension-1300)
}
.hero h1 em {
  font-weight:400;
  font-style:normal;
  color:var(--muted)
}
.hero h1 .underline {
  position:relative;
  white-space:nowrap
}
.hero h1 .underline:after {
  content:"";
  height:.07em;
  background:var(--accent);
  position:absolute;
  bottom:.03em;
  left:0;
  right:0;
  z-index:-1;
  transform:rotate(-1deg)
}
.hero-bottom {
  display:flex;
  justify-content:space-between;
  gap:var(--dimension-32);
  align-items:end
}
.hero-bottom p {
  max-width:var(--dimension-490);
  font-size:var(--font-size-19);
  line-height:1.55;
  margin:var(--dimension-15) 0 0;
  color:var(--muted)
}
.round-link {
  width:var(--dimension-76);
  height:var(--dimension-76);
  border:var(--dimension-1) solid var(--ink);
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:var(--font-size-36);
  transition:transform var(--duration--25s),background var(--duration--25s)
}
.round-link:hover {
  transform:rotate(35deg);
  background:var(--accent);
  color:var(--palette-141414)
}
.ticker {
  border-top:var(--dimension-1) solid var(--stroke);
  border-bottom:var(--dimension-1) solid var(--stroke);
  padding:var(--dimension-17) 0;
  font:600 var(--font-size-12) var(--display);
  letter-spacing:.15em;
  text-transform:uppercase;
  display:flex;
  justify-content:space-between;
  gap:var(--dimension-14);
  flex-wrap:wrap;
  color:var(--muted)
}
 .section-head {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--dimension-20);
  margin:var(--dimension-114) 0 var(--dimension-34)
}
.section-head h2 {
  font:600 clamp(var(--font-size-44),6vw,var(--font-size-82))/1 var(--display);
  letter-spacing:-.08em;
  margin:0
}
.section-head p {
  max-width:var(--dimension-340);
  color:var(--muted);
  margin:0;
  font-size:var(--font-size-14)
}
.count {
  font:600 var(--font-size-13) var(--display);
  vertical-align:top;
  letter-spacing:0;
  margin-left:var(--dimension-5);
  color:var(--muted)
}
 .projects {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--dimension-36)
}
.project-card {
  min-width:0
}
.project-card.featured {
  grid-column:1/-1
}
.project-art {
  height:clamp(var(--dimension-350),45vw,var(--dimension-580));
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:var(--dimension-4)
}
.project-card:not(.featured) .project-art {
  height:var(--dimension-410)
}
.project-card a:hover .project-art .art-inner {
  transform:scale(1.045) translateY(-4px)
}
.art-inner {
  transition:transform var(--duration--6s) cubic-bezier(.2,.8,.2,1);
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  place-items:center
}
.art-melo {
  background:var(--palette-c9c8fd);
  color:var(--palette-231f3f)
}
.art-capex {
  background:var(--palette-ced9cc);
  color:var(--palette-21352a)
}
.art-cooter {
  background:var(--palette-eec7aa);
  color:var(--palette-432819)
}
.art-label {
  position:absolute;
  top:var(--dimension-28);
  left:var(--dimension-30);
  font:700 var(--font-size-12) var(--display);
  letter-spacing:.16em;
  opacity:.7;
  z-index:2
}
.art-bottom {
  position:absolute;
  bottom:var(--dimension-27);
  right:var(--dimension-28);
  font:700 var(--font-size-12) var(--display);
  letter-spacing:.09em;
  z-index:2
}
.melo-word {
  font:700 clamp(var(--font-size-115),21vw,var(--font-size-330))/1 var(--display);
  letter-spacing:-.12em;
  transform:rotate(-8deg);
  text-shadow:var(--dimension-12) var(--dimension-12) 0 rgba(255,255,255,.5)
}
.melo-sticker {
  position:absolute;
  right:13%;
  top:13%;
  background:var(--palette-f7ef77);
  color:var(--palette-222);
  padding:var(--dimension-18) var(--dimension-20);
  border-radius:var(--dimension-100);
  font:700 var(--font-size-14) var(--display);
  transform:rotate(13deg)
}
.mock-browser {
  width:min(75%,var(--dimension-460));
  background:var(--palette-f9faf5);
  color:var(--palette-232925);
  border-radius:var(--dimension-13);
  box-shadow:var(--dimension-22) var(--dimension-28) 0 rgba(32,50,35,.13);
  transform:rotate(-6deg);
  padding:var(--dimension-14)
}
.mock-browser .dots {
  display:flex;
  gap:var(--dimension-5);
  margin-bottom:var(--dimension-12)
}
.dots i {
  width:var(--dimension-7);
  height:var(--dimension-7);
  border-radius:50%;
  background:var(--palette-bdc4b8)
}
.mock-body {
  border-radius:var(--dimension-7);
  background:var(--palette-e6ede4);
  padding:var(--dimension-25);
  min-height:var(--dimension-215)
}
.mock-body h4 {
  font:700 var(--font-size-48)/.95 var(--display);
  letter-spacing:-.07em;
  margin:0 0 var(--dimension-18)
}
.bar-graph {
  display:flex;
  align-items:end;
  gap:var(--dimension-9);
  height:var(--dimension-75)
}
.bar-graph i {
  display:block;
  background:var(--palette-5c8666);
  width:16%;
  border-radius:var(--dimension-4) var(--dimension-4) 0 0
}
.bar-graph i:nth-child(1) {
  height:40%
}
.bar-graph i:nth-child(2) {
  height:76%
}
.bar-graph i:nth-child(3) {
  height:56%
}
.bar-graph i:nth-child(4) {
  height:95%
}
.bar-graph i:nth-child(5) {
  height:70%
}
.money-circle {
  width:var(--dimension-280);
  height:var(--dimension-280);
  border:var(--dimension-36) solid var(--palette-7f5d4c);
  border-right-color:var(--palette-fff0d9);
  border-radius:50%;
  display:grid;
  place-items:center;
  transform:rotate(-25deg);
  box-shadow:var(--dimension-20) var(--dimension-20) 0 var(--palette-bd9278)
}
.money-circle span {
  font:700 var(--font-size-42) var(--display);
  transform:rotate(25deg)
}
.float-note {
  position:absolute;
  top:18%;
  right:10%;
  background:var(--palette-fff9eb);
  color:var(--palette-3e2f22);
  border-radius:var(--dimension-8);
  padding:var(--dimension-15) var(--dimension-20);
  transform:rotate(9deg);
  font:600 var(--font-size-14) var(--display);
  box-shadow:var(--dimension-6) var(--dimension-10) 0 var(--palette-c29474)
}
.project-meta {
  padding:var(--dimension-23) 0 var(--dimension-16);
  display:flex;
  justify-content:space-between;
  align-items:start;
  gap:var(--dimension-24)
}
.project-meta h3 {
  font:600 clamp(var(--font-size-27),3.4vw,var(--font-size-46))/1.04 var(--display);
  letter-spacing:-.065em;
  margin:0 0 var(--dimension-10)
}
.project-meta p {
  font-size:var(--font-size-15);
  max-width:var(--dimension-560);
  color:var(--muted);
  margin:0
}
.category {
  font:700 var(--font-size-11) var(--display);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
  white-space:nowrap
}
.arrow {
  font-size:var(--font-size-25);
  margin-left:var(--dimension-12)
}
 .about-section {
  margin:var(--dimension-160) 0 var(--dimension-120);
  padding:var(--dimension-60) 0;
  border-top:var(--dimension-1) solid var(--stroke);
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:var(--dimension-70)
}
.about-section h2 {
  font:600 clamp(var(--font-size-48),6vw,var(--font-size-84))/.98 var(--display);
  letter-spacing:-.08em;
  margin:var(--dimension-18) 0
}
.about-copy {
  font-size:clamp(var(--font-size-20),2.5vw,var(--font-size-32));
  letter-spacing:-.035em;
  line-height:1.38
}
.about-copy p {
  margin:0 0 var(--dimension-26)
}
.about-copy small {
  font-size:var(--font-size-15);
  color:var(--muted);
  line-height:1.65;
  display:block;
  max-width:var(--dimension-520)
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:var(--dimension-10);
  font-size:var(--font-size-14);
  font-weight:700;
  margin-top:var(--dimension-28)
}
.footer {
  background:var(--ink);
  color:var(--bg);
  padding:var(--dimension-85) 0 var(--dimension-30)
}
.footer-inner {
  width:min(var(--dimension-1440),calc(100% - var(--dimension-88)));
  margin:auto
}
.footer .kicker {
  color:var(--accent)
}
.footer h2 {
  font:600 clamp(var(--font-size-60),11vw,var(--font-size-145))/.96 var(--display);
  letter-spacing:-.09em;
  margin:var(--dimension-23) 0 var(--dimension-53)
}
.footer h2 a:hover {
  color:var(--accent)
}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:var(--dimension-25);
  flex-wrap:wrap;
  border-top:var(--dimension-1) solid var(--palette-777);
  padding-top:var(--dimension-22);
  font-size:var(--font-size-13)
}
.footer-links {
  display:flex;
  gap:var(--dimension-28)
}
 .case-hero {
  padding:var(--dimension-75) 0 var(--dimension-45)
}
.back {
  font-size:var(--font-size-14);
  font-weight:700;
  display:inline-block;
  margin-bottom:var(--dimension-60)
}
.case-hero h1 {
  font:600 clamp(var(--font-size-56),9vw,var(--font-size-124))/.96 var(--display);
  letter-spacing:-.085em;
  margin:var(--dimension-14) 0 var(--dimension-24);
  max-width:var(--dimension-1100)
}
.case-dek {
  font-size:clamp(var(--font-size-19),2.5vw,var(--font-size-27));
  max-width:var(--dimension-820);
  line-height:1.42;
  color:var(--muted)
}
.case-info {
  border-top:var(--dimension-1) solid var(--stroke);
  padding-top:var(--dimension-22);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--dimension-24);
  margin:var(--dimension-45) 0
}
.case-info dt {
  font:700 var(--font-size-11) var(--body);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted)
}
.case-info dd {
  font:600 var(--font-size-15) var(--display);
  margin:var(--dimension-9) 0 0
}
.case-cover {
  height:clamp(var(--dimension-400),57vw,var(--dimension-700));
  margin-bottom:var(--dimension-95)
}
.case-cover .art-inner {
  max-height:100%
}
.case-content {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:var(--dimension-70);
  border-top:var(--dimension-1) solid var(--stroke);
  padding:var(--dimension-35) 0 var(--dimension-65)
}
.case-content .kicker {
  padding-top:var(--dimension-8)
}
.case-content h2 {
  font:600 clamp(var(--font-size-32),4vw,var(--font-size-54))/1.08 var(--display);
  letter-spacing:-.055em;
  margin:0 0 var(--dimension-25)
}
.case-content p {
  font-size:var(--font-size-18);
  color:var(--muted);
  max-width:var(--dimension-750)
}
.case-content ul {
  color:var(--muted);
  font-size:var(--font-size-17);
  line-height:1.8
}
.case-note {
  padding:var(--dimension-26);
  background:var(--soft);
  font-size:var(--font-size-15)!important;
  border-left:var(--dimension-3) solid var(--accent)
}
.next-project {
  border-top:var(--dimension-1) solid var(--stroke);
  padding:var(--dimension-70) 0 var(--dimension-110)
}
.next-project span {
  color:var(--muted);
  font:700 var(--font-size-12) var(--body);
  letter-spacing:.14em
}
.next-project a {
  font:600 clamp(var(--font-size-54),8vw,var(--font-size-110))/1 var(--display);
  letter-spacing:-.08em;
  display:block;
  margin-top:var(--dimension-20)
}
.next-project a:hover {
  color:var(--muted)
}
 @media(max-width:850px) {
  .shell,.footer-inner {
    width:calc(100% - var(--dimension-38))
  }
nav.top {
    padding:var(--dimension-20) 0
  }
.navlinks {
    gap:var(--dimension-16)
  }
.navlinks a {
    font-size:var(--font-size-12)
  }
.hero {
    padding:var(--dimension-80) 0 var(--dimension-60)
  }
.hero h1 {
    font-size:clamp(var(--font-size-58),12vw,var(--font-size-100))
  }
.projects {
    grid-template-columns:1fr;
    gap:var(--dimension-30)
  }
.project-card.featured {
    grid-column:auto
  }
.project-card .project-art,.project-card:not(.featured) .project-art {
    height:clamp(var(--dimension-310),65vw,var(--dimension-520))
  }
.section-head {
    margin:var(--dimension-80) 0 var(--dimension-25)
  }
.about-section {
    grid-template-columns:1fr;
    gap:var(--dimension-5);
    margin:var(--dimension-100) 0 var(--dimension-70)
  }
.case-content {
    grid-template-columns:1fr;
    gap:var(--dimension-18)
  }
.case-cover {
    margin-bottom:var(--dimension-65)
  }

}
 @media(max-width:520px) {
  .navlinks a[href="#about"] {
    display:none
  }
.hero h1 {
    font-size:clamp(var(--font-size-49),12.5vw,var(--font-size-74))
  }
.hero-bottom p {
    font-size:var(--font-size-16)
  }
.round-link {
    width:var(--dimension-53);
    height:var(--dimension-53);
    font-size:var(--font-size-24);
    flex-shrink:0
  }
.ticker {
    font-size:var(--font-size-10)
  }
.section-head {
    align-items:start;
    flex-direction:column
  }
.project-meta {
    flex-direction:column;
    gap:var(--dimension-10)
  }
.project-meta h3 {
    font-size:var(--font-size-35)
  }
.melo-word {
    font-size:var(--font-size-110)
  }
.mock-browser {
    width:85%
  }
.case-hero {
    padding-top:var(--dimension-40)
  }
.case-hero h1 {
    font-size:clamp(var(--font-size-48),12vw,var(--font-size-72))
  }
.case-info {
    grid-template-columns:1fr 1fr
  }
.footer h2 {
    font-size:var(--font-size-65)
  }
.footer-links {
    gap:var(--dimension-15)
  }

}
 @media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition:none!important
  }

}
  /* Version 3 — interaction and hiring-focused refinements */ .scroll-progress {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:var(--dimension-3);
  z-index:100;
  pointer-events:none
}
.scroll-progress span {
  display:block;
  width:100%;
  height:100%;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:left;
  will-change:transform
}
 .hero-entrance {
  animation:heroEnter var(--duration--9s) cubic-bezier(.2,.7,.2,1) both
}
.hero-entrance.delayed {
  animation-delay:var(--duration--12s)
}
.hero-entrance.later {
  animation-delay:var(--duration--25s)
}
@keyframes heroEnter {
  from {
    opacity:0;
    transform:translateY(var(--dimension-28))
  }
to {
    opacity:1;
    transform:translateY(0)
  }

}
 .reveal {
  opacity:1;
  transform:none
}
.js-motion .reveal {
  opacity:0;
  transform:translateY(var(--dimension-25));
  transition:opacity var(--duration--75s) cubic-bezier(.2,.7,.2,1),transform var(--duration--75s) cubic-bezier(.2,.7,.2,1)
}
.js-motion .reveal.is-visible {
  opacity:1;
  transform:translateY(0)
}
 .hiring-strip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--dimension-28);
  padding:var(--dimension-30) var(--dimension-35);
  margin-top:var(--dimension-64);
  background:var(--paper);
  border:var(--dimension-1) solid var(--stroke);
  border-radius:var(--dimension-6)
}
.hiring-strip>div {
  display:flex;
  flex-direction:column;
  align-items:start;
  gap:var(--dimension-7)
}
.hiring-strip strong {
  font:600 clamp(var(--font-size-20),2.4vw,var(--font-size-31))/1.15 var(--display);
  letter-spacing:-.05em
}
.hiring-detail {
  color:var(--muted);
  font-size:var(--font-size-13)
}
.mini-pill {
  display:inline-flex;
  align-items:center;
  gap:var(--dimension-15);
  border:var(--dimension-1) solid var(--ink);
  border-radius:var(--dimension-60);
  padding:var(--dimension-13) var(--dimension-19);
  white-space:nowrap;
  font-size:var(--font-size-13);
  font-weight:700;
  transition:background var(--duration--25s),color var(--duration--25s),transform var(--duration--25s)
}
.mini-pill:hover {
  background:var(--accent);
  color:var(--palette-141414);
  transform:translateY(-3px)
}
 .strengths {
  padding-top:var(--dimension-5)
}
.strength-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--dimension-14)
}
.strength {
  border-top:var(--dimension-1) solid var(--ink);
  padding:var(--dimension-27) var(--dimension-17) var(--dimension-27) 0;
  transition:background var(--duration--3s),padding var(--duration--3s)
}
.strength:hover {
  background:var(--soft);
  padding-left:var(--dimension-17)
}
.strength-index {
  font-size:var(--font-size-11);
  letter-spacing:.12em;
  color:var(--muted);
  font-weight:700
}
.strength h3 {
  font:600 clamp(var(--font-size-25),2.5vw,var(--font-size-35))/1.08 var(--display);
  letter-spacing:-.06em;
  margin:var(--dimension-45) 0 var(--dimension-15)
}
.strength p {
  font-size:var(--font-size-15);
  color:var(--muted);
  max-width:var(--dimension-325)
}
 .project-art:after {
  content:'Explore case study';
  position:absolute;
  bottom:var(--dimension-22);
  left:var(--dimension-23);
  padding:var(--dimension-12) var(--dimension-17);
  border-radius:var(--dimension-50);
  background:var(--ink);
  color:var(--bg);
  font:700 var(--font-size-12) var(--body);
  transform:translateY(var(--dimension-12));
  opacity:0;
  transition:transform var(--duration--3s),opacity var(--duration--3s);
  pointer-events:none;
  z-index:5
}
.project-card a:hover .project-art:after,.project-card a:focus-visible .project-art:after {
  transform:translateY(0);
  opacity:1
}
.project-card a .arrow {
  display:inline-block;
  transition:transform var(--duration--28s)
}
.project-card a:hover .arrow {
  transform:translate(var(--dimension-4),-4px)
}
 .theme-toggle {
  transition:transform var(--duration--2s),background var(--duration--25s),box-shadow var(--duration--25s)
}
.theme-toggle:hover {
  transform:translateY(-2px);
  box-shadow:0 var(--dimension-5) 0 var(--soft)
}
.round-link {
  animation:gentleBob var(--duration-3s) ease-in-out infinite
}
@keyframes gentleBob {
  0%,100% {
    transform:translateY(0)
  }
50% {
    transform:translateY(var(--dimension-6))
  }

}
.round-link:hover {
  animation:none;
  transform:rotate(35deg)
}
 .case-jump {
  display:flex;
  align-items:center;
  gap:var(--dimension-18);
  flex-wrap:wrap;
  border-top:var(--dimension-1) solid var(--stroke);
  padding:var(--dimension-17) 0 var(--dimension-23);
  margin-bottom:var(--dimension-10)
}
.case-jump span {
  color:var(--muted);
  font-size:var(--font-size-12);
  font-weight:700;
  margin-right:auto
}
.case-jump a {
  font-size:var(--font-size-12);
  font-weight:700
}
.case-jump a:hover {
  color:var(--muted)
}
 @media(max-width:850px) {
  .strength-grid {
    grid-template-columns:1fr 1fr
  }
.hiring-strip {
    margin-top:var(--dimension-35)
  }

}
@media(max-width:600px) {
  .hiring-strip {
    flex-direction:column;
    align-items:flex-start;
    padding:var(--dimension-24)
  }
.strength-grid {
    grid-template-columns:1fr
  }
.strength h3 {
    margin-top:var(--dimension-25)
  }
.case-jump {
    gap:var(--dimension-12)
  }
.case-jump span {
    width:100%
  }

}
@media(prefers-reduced-motion:reduce) {
  .hero-entrance {
    animation:none!important
  }
.js-motion .reveal {
    opacity:1!important;
    transform:none!important;
    transition:none!important
  }
.round-link {
    animation:none!important
  }
.project-art:after {
    transition:none!important
  }

}
  /* v4: refined, warm neutral palette + restrained cursor micro-interaction */ :root {
  --accent-soft:rgba(166,193,71,.18);
  --cursor-line:rgba(58,65,43,.42)
}
 :root[data-theme="dark"] {
  --accent-soft:rgba(199,226,128,.13);
  --cursor-line:rgba(222,240,175,.55)
}
 .hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  --pointer-x:50%;
  --pointer-y:48%
}
 .hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle var(--dimension-225) at var(--pointer-x) var(--pointer-y),var(--accent-soft),transparent 75%);
  opacity:0;
  transition:opacity var(--duration--35s) ease
}
 .hero.is-pointer-active::before {
  opacity:1
}
 .hero-pointer {
  position:absolute;
  left:0;
  top:0;
  width:var(--dimension-56);
  height:var(--dimension-56);
  border:var(--dimension-1) solid var(--cursor-line);
  background:rgba(255,255,255,.10);
  border-radius:50%;
  pointer-events:none;
  z-index:3;
  opacity:0;
  transform:translate3d(-100px,-100px,0);
  transition:opacity var(--duration--22s) ease,width var(--duration--25s) ease,height var(--duration--25s) ease,border-color var(--duration--25s) ease;
  display:grid;
  place-items:center;
  will-change:transform
}
 .hero-pointer::before,.hero-pointer::after {
  content:"";
  position:absolute;
  background:var(--cursor-line)
}
 .hero-pointer::before {
  width:var(--dimension-10);
  height:var(--dimension-1)
}
.hero-pointer::after {
  width:var(--dimension-1);
  height:var(--dimension-10)
}
 .hero-pointer.is-visible {
  opacity:1
}
.hero-pointer.is-hovering {
  width:var(--dimension-76);
  height:var(--dimension-76);
  border-color:var(--ink)
}
 .hero .underline::after {
  transition:transform var(--duration--45s) cubic-bezier(.2,.8,.2,1),background var(--duration--3s)
}
.hero .underline:hover::after {
  transform:rotate(0deg) translateY(-3px)
}
 @media (hover:none),(pointer:coarse) {
  .hero-pointer {
    display:none!important
  }
.hero::before {
    display:none!important
  }

}
 @media (prefers-reduced-motion:reduce) {
  .hero-pointer,.hero::before {
    display:none!important
  }
.hero .underline::after {
    transition:none!important
  }

}
   /* V5 / Hiring-manager-first work section */ #work {
  scroll-margin-top:var(--dimension-36)
}
 #work .section-head {
  margin-bottom:var(--dimension-26)
}
 #work .section-head p {
  max-width:var(--dimension-420);
  font-size:var(--font-size-16);
  line-height:1.6
}
 .work-guide {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:var(--dimension-22);
  padding:var(--dimension-17) var(--dimension-21);
  margin-bottom:var(--dimension-28);
  border:var(--dimension-1) solid var(--stroke);
  background:var(--paper);
  border-radius:var(--dimension-9)
}
 .work-guide>div {
  display:flex;
  gap:var(--dimension-13);
  align-items:center;
  flex-wrap:wrap
}
.work-guide-icon {
  display:grid;
  place-items:center;
  background:var(--accent);
  color:var(--palette-232718);
  border-radius:50%;
  height:var(--dimension-28);
  width:var(--dimension-28);
  font-size:var(--font-size-17)
}
.work-guide strong {
  font-size:var(--font-size-14)
}
.work-guide div>span:last-child {
  font-size:var(--font-size-13);
  color:var(--muted)
}
.work-guide-hint {
  font:700 var(--font-size-11) var(--display);
  letter-spacing:.08em;
  white-space:nowrap;
  color:var(--muted)
}
 .projects {
  gap:var(--dimension-30);
  align-items:stretch
}
.project-card {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--paper);
  border:var(--dimension-1) solid var(--stroke);
  border-radius:var(--dimension-13);
  transition:box-shadow var(--duration--3s),transform var(--duration--3s),border-color var(--duration--3s)
}
.project-card:hover {
  transform:translateY(-4px);
  box-shadow:0 var(--dimension-16) var(--dimension-40) rgba(25,30,23,.08);
  border-color:var(--muted)
}
.project-visual-link {
  display:block;
  overflow:hidden
}
.project-art,.project-card:not(.featured) .project-art {
  border-radius:0
}
.project-card.featured .project-art {
  height:clamp(var(--dimension-360),45vw,var(--dimension-550))
}
.project-card .project-art:after {
  content:'View project';
  opacity:1;
  transform:none;
  background:var(--paper);
  color:var(--ink);
  bottom:var(--dimension-22);
  left:var(--dimension-22);
  border:var(--dimension-1) solid var(--stroke)
}
.project-visual-link:hover .project-art:after,.project-visual-link:focus-visible .project-art:after {
  background:var(--ink);
  color:var(--bg)
}
.project-visual-link:hover .art-inner,.project-visual-link:focus-visible .art-inner {
  transform:scale(1.04)
}
 .project-details {
  padding:var(--dimension-27) var(--dimension-30) var(--dimension-30);
  display:flex;
  flex:1;
  flex-direction:column
}
.project-details-top {
  display:flex;
  justify-content:space-between;
  gap:var(--dimension-12);
  align-items:center;
  flex-wrap:wrap
}
.project-num {
  font:700 var(--font-size-11) var(--display);
  letter-spacing:.1em;
  color:var(--muted)
}
.project-type {
  border:var(--dimension-1) solid var(--stroke);
  padding:var(--dimension-5) var(--dimension-11);
  border-radius:var(--dimension-40);
  font-size:var(--font-size-12);
  color:var(--muted)
}
.project-details h3 {
  font:600 clamp(var(--font-size-36),4vw,var(--font-size-54))/1.1 var(--display);
  letter-spacing:-.065em;
  margin:var(--dimension-19) 0 var(--dimension-9)
}
.project-challenge {
  font-size:var(--font-size-16);
  line-height:1.6;
  color:var(--muted);
  max-width:var(--dimension-640);
  margin:0 0 var(--dimension-20)
}
.project-focus {
  display:flex;
  flex-wrap:wrap;
  gap:var(--dimension-7);
  margin-bottom:var(--dimension-26)
}
.project-focus span {
  font-size:var(--font-size-12);
  line-height:1.3;
  border-radius:var(--dimension-4);
  background:var(--soft);
  padding:var(--dimension-8) var(--dimension-11)
}
.project-cta {
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--dimension-16);
  border-top:var(--dimension-1) solid var(--stroke);
  padding-top:var(--dimension-18);
  font:700 var(--font-size-14) var(--body);
  transition:color var(--duration--2s)
}
.project-cta span {
  font-size:var(--font-size-26);
  line-height:1;
  transition:transform var(--duration--2s)
}
.project-cta:hover {
  color:var(--muted)
}
.project-cta:hover span,.project-cta:focus-visible span {
  transform:translate(var(--dimension-4),-4px)
}
 @media(max-width:850px) {
  .projects {
    gap:var(--dimension-22)
  }
.project-details {
    padding:var(--dimension-24)
  }
.work-guide-hint {
    display:none
  }
.project-card:hover {
    transform:none
  }

}
 @media(max-width:520px) {
  .work-guide {
    padding:var(--dimension-16)
  }
.work-guide>div {
    align-items:flex-start;
    gap:var(--dimension-8)
  }
.work-guide div>span:last-child {
    flex-basis:100%
  }
.project-card:not(.featured) .project-art,.project-card.featured .project-art {
    height:var(--dimension-320)
  }
.project-details h3 {
    font-size:var(--font-size-40)
  }

}
 @media(prefers-reduced-motion:reduce) {
  .project-card,.project-cta span,.project-visual-link .art-inner {
    transition:none!important
  }

}
  /* V6: quieter editorial hierarchy */ .hero h1 {
  font-size:clamp(var(--font-size-56),9.5vw,var(--font-size-128));
  line-height:.98;
  letter-spacing:-.08em
}
.section-head h2 {
  font-size:clamp(var(--font-size-37),4.8vw,var(--font-size-62))
}
.project-details h3 {
  font-size:clamp(var(--font-size-28),3.3vw,var(--font-size-39));
  margin:var(--dimension-13) 0 var(--dimension-8)
}
.project-details {
  padding:var(--dimension-22) var(--dimension-25) var(--dimension-24)
}
.project-challenge {
  font-size:var(--font-size-15);
  margin-bottom:var(--dimension-16);
  line-height:1.55
}
.project-cta {
  font-size:var(--font-size-13)
}
.project-card .project-art:after {
  font-size:var(--font-size-12);
  bottom:var(--dimension-15);
  left:var(--dimension-15)
}
.work-guide {
  display:none
}
 /* Scannable recruiter-first case studies */ .cs-hero {
  padding:var(--dimension-65) 0 var(--dimension-55)
}
.cs-back {
  display:inline-block;
  font-size:var(--font-size-13);
  font-weight:700;
  color:var(--muted);
  margin-bottom:var(--dimension-60)
}
.cs-kicker {
  font-size:var(--font-size-12);
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700
}
.cs-hero h1 {
  font:600 clamp(var(--font-size-54),7.2vw,var(--font-size-104))/1.01 var(--display);
  letter-spacing:-.075em;
  margin:var(--dimension-17) 0 var(--dimension-23);
  max-width:var(--dimension-1100)
}
.cs-dek {
  max-width:var(--dimension-760);
  font-size:clamp(var(--font-size-18),2.2vw,var(--font-size-24));
  line-height:1.5;
  color:var(--muted);
  margin:0
}
.cs-facts {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--dimension-20);
  margin-top:var(--dimension-45);
  padding:var(--dimension-23) 0;
  border-top:var(--dimension-1) solid var(--stroke);
  border-bottom:var(--dimension-1) solid var(--stroke)
}
.cs-facts dt {
  font-size:var(--font-size-11);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted)
}
.cs-facts dd {
  font-size:var(--font-size-14);
  font-weight:600;
  margin:var(--dimension-7) 0 0
}
.cs-cover {
  height:clamp(var(--dimension-320),52vw,var(--dimension-660));
  overflow:hidden;
  margin-bottom:var(--dimension-70)
}
.cs-cover .project-art {
  height:100%;
  border-radius:var(--dimension-2)
}
.cs-layout {
  display:grid;
  grid-template-columns:var(--dimension-195) minmax(0,1fr);
  gap:var(--dimension-65);
  align-items:start
}
.cs-sidebar {
  position:sticky;
  top:var(--dimension-24);
  padding-bottom:var(--dimension-30)
}
.cs-sidebar p {
  font-size:var(--font-size-11);
  letter-spacing:.13em;
  color:var(--muted);
  font-weight:700
}
.cs-sidebar a {
  display:block;
  padding:var(--dimension-10) 0;
  color:var(--muted);
  font-size:var(--font-size-13);
  border-bottom:var(--dimension-1) solid var(--stroke)
}
.cs-sidebar a:hover,.cs-sidebar a:focus-visible {
  color:var(--ink)
}
.cs-content {
  min-width:0
}
.cs-summary {
  background:var(--soft);
  padding:var(--dimension-33) var(--dimension-40);
  border-radius:var(--dimension-4);
  margin-bottom:var(--dimension-66)
}
.cs-summary h2 {
  font:600 clamp(var(--font-size-28),3.7vw,var(--font-size-46))/1.1 var(--display);
  letter-spacing:-.055em;
  margin:var(--dimension-12) 0 var(--dimension-16)
}
.cs-summary p {
  color:var(--muted);
  font-size:var(--font-size-16);
  margin:0;
  line-height:1.65
}
.cs-split {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--dimension-24);
  margin-top:var(--dimension-25)
}
.cs-split>div {
  padding-top:var(--dimension-14);
  border-top:var(--dimension-1) solid var(--stroke)
}
.cs-split strong {
  font-size:var(--font-size-12)
}
.cs-split p {
  font-size:var(--font-size-14);
  margin-top:var(--dimension-8)
}
.cs-section {
  padding:var(--dimension-47) 0 var(--dimension-65);
  border-top:var(--dimension-1) solid var(--stroke);
  scroll-margin-top:var(--dimension-40)
}
.cs-section .cs-kicker {
  margin-bottom:var(--dimension-18)
}
.cs-section h2 {
  font:600 clamp(var(--font-size-32),4.4vw,var(--font-size-51))/1.08 var(--display);
  letter-spacing:-.06em;
  max-width:var(--dimension-800);
  margin:0 0 var(--dimension-20)
}
.cs-section>p {
  font-size:var(--font-size-17);
  line-height:1.7;
  color:var(--muted);
  max-width:var(--dimension-750)
}
.cs-questions {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--dimension-12);
  margin-top:var(--dimension-28)
}
.cs-questions article {
  border:var(--dimension-1) solid var(--stroke);
  padding:var(--dimension-23);
  border-radius:var(--dimension-4)
}
.cs-questions .num {
  font:700 var(--font-size-12) var(--display);
  color:var(--muted)
}
.cs-questions h3 {
  font:600 var(--font-size-19) var(--display);
  letter-spacing:-.025em;
  margin:var(--dimension-25) 0 var(--dimension-7)
}
.cs-questions p {
  font-size:var(--font-size-14);
  color:var(--muted);
  line-height:1.55
}
.cs-visual {
  margin-top:var(--dimension-30);
  min-height:var(--dimension-270);
  background:var(--soft);
  border:var(--dimension-1) dashed var(--stroke);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:var(--dimension-10);
  text-align:center;
  padding:var(--dimension-30);
  border-radius:var(--dimension-4)
}
.cs-visual b {
  font:600 var(--font-size-17) var(--display)
}
.cs-visual span {
  font-size:var(--font-size-13);
  color:var(--muted);
  max-width:var(--dimension-400)
}
.cs-callout {
  margin-top:var(--dimension-23);
  padding:var(--dimension-22) var(--dimension-25);
  background:var(--soft);
  border-left:var(--dimension-3) solid var(--accent);
  color:var(--muted);
  font-size:var(--font-size-14);
  line-height:1.6
}
.cs-next {
  padding:var(--dimension-65) 0 var(--dimension-110);
  margin-top:var(--dimension-70);
  border-top:var(--dimension-1) solid var(--stroke)
}
.cs-next small {
  font-size:var(--font-size-12);
  letter-spacing:.12em;
  color:var(--muted);
  font-weight:700
}
.cs-next a {
  display:block;
  font:600 clamp(var(--font-size-50),7vw,var(--font-size-98))/1.12 var(--display);
  letter-spacing:-.07em;
  margin-top:var(--dimension-15)
}
.cs-next a:hover {
  color:var(--muted)
}
 @media(max-width:850px) {
  .cs-layout {
    grid-template-columns:1fr;
    gap:var(--dimension-25)
  }
.cs-sidebar {
    position:relative;
    top:auto;
    display:flex;
    flex-wrap:wrap;
    gap:var(--dimension-8) var(--dimension-18);
    padding:0
  }
.cs-sidebar p {
    width:100%;
    margin:0
  }
.cs-sidebar a {
    font-size:var(--font-size-12);
    padding:var(--dimension-8) 0
  }
.cs-hero {
    padding-top:var(--dimension-35)
  }
.cs-back {
    margin-bottom:var(--dimension-35)
  }
.cs-facts {
    grid-template-columns:repeat(2,1fr)
  }
.cs-summary {
    margin-bottom:var(--dimension-40)
  }

}
 @media(max-width:550px) {
  .cs-summary {
    padding:var(--dimension-24)
  }
.cs-split,.cs-questions {
    grid-template-columns:1fr
  }
.cs-hero h1 {
    font-size:var(--font-size-48)
  }
.cs-section {
    padding:var(--dimension-35) 0 var(--dimension-48)
  }
.cs-facts {
    gap:var(--dimension-18)
  }

}
  /* Melo case study — editorial design */ .melo-case {
  max-width:var(--dimension-1260)
}
.melo-hero {
  padding:var(--dimension-72) 0 var(--dimension-92)
}
.melo-hero h1 {
  font-family:var(--display);
  font-size:clamp(var(--font-size-52),7.5vw,var(--font-size-110));
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.085em;
  max-width:var(--dimension-1100);
  margin:var(--dimension-35) 0
}
.melo-hero h1 em {
  font-style:normal;
  color:var(--muted)
}
.melo-dek {
  font-size:clamp(var(--font-size-18),2.2vw,var(--font-size-25));
  max-width:var(--dimension-800);
  line-height:1.48;
  color:var(--muted)
}
.melo-metadata {
  border-top:var(--dimension-1) solid var(--stroke);
  border-bottom:var(--dimension-1) solid var(--stroke);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--dimension-20);
  margin:var(--dimension-55) 0 var(--dimension-42);
  padding:var(--dimension-24) 0
}
.melo-metadata small {
  display:block;
  color:var(--muted);
  font-size:var(--font-size-10);
  font-weight:700;
  letter-spacing:.12em;
  margin-bottom:var(--dimension-10)
}
.melo-metadata b {
  display:block;
  font-size:var(--font-size-13);
  line-height:1.4
}
.melo-hero-screen {
  background:linear-gradient(135deg,var(--palette-b4c7fa),var(--palette-e2dffd));
  min-height:var(--dimension-460);
  padding:var(--dimension-40);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  color:var(--palette-252b49);
  border-radius:var(--dimension-5)
}
.melo-hero-screen span {
  font-size:var(--font-size-12);
  letter-spacing:.15em;
  font-weight:700
}
.melo-hero-screen strong {
  font-family:var(--display);
  font-size:clamp(var(--font-size-58),9vw,var(--font-size-110));
  line-height:.93;
  letter-spacing:-.08em
}
.melo-hero-screen a {
  background:var(--palette-252b49);
  color:white;
  padding:var(--dimension-13) var(--dimension-20);
  border-radius:var(--dimension-100);
  font-size:var(--font-size-13);
  font-weight:700
}
.melo-layout {
  display:grid;
  grid-template-columns:var(--dimension-230) minmax(0,1fr);
  gap:var(--dimension-65)
}
.melo-toc {
  align-self:start;
  position:sticky;
  top:var(--dimension-32);
  display:flex;
  flex-direction:column;
  gap:var(--dimension-13);
  padding-top:var(--dimension-32)
}
.melo-toc b {
  font-size:var(--font-size-10);
  letter-spacing:.14em;
  margin-bottom:var(--dimension-13)
}
.melo-toc a {
  font-size:var(--font-size-12);
  color:var(--muted)
}
.melo-toc a:hover {
  color:var(--ink);
  text-decoration:underline
}
.melo-toc .melo-outlink {
  margin-top:var(--dimension-18);
  color:var(--ink);
  font-weight:700
}
.melo-section {
  padding:var(--dimension-42) 0 var(--dimension-72);
  border-top:var(--dimension-1) solid var(--stroke);
  scroll-margin-top:var(--dimension-40)
}
.melo-section-label {
  font-size:var(--font-size-11);
  font-weight:700;
  letter-spacing:.13em;
  color:var(--muted);
  margin-bottom:var(--dimension-20)
}
.melo-section h2 {
  font:600 clamp(var(--font-size-35),4.4vw,var(--font-size-57))/1.07 var(--display);
  letter-spacing:-.07em;
  margin:0 0 var(--dimension-24);
  max-width:var(--dimension-740)
}
.melo-section-main>p {
  color:var(--muted);
  font-size:var(--font-size-17);
  max-width:var(--dimension-710);
  line-height:1.75
}
.melo-stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--dimension-12);
  margin:var(--dimension-40) 0 var(--dimension-18)
}
.melo-stats div {
  background:var(--soft);
  padding:var(--dimension-22) var(--dimension-18);
  min-height:var(--dimension-145)
}
.melo-stats b {
  display:block;
  font:600 clamp(var(--font-size-33),4vw,var(--font-size-56))/1 var(--display);
  letter-spacing:-.06em;
  margin-bottom:var(--dimension-16)
}
.melo-stats span {
  font-size:var(--font-size-12);
  color:var(--muted)
}
.melo-note {
  background:var(--soft);
  border-left:var(--dimension-3) solid var(--accent);
  padding:var(--dimension-18) var(--dimension-22);
  margin-top:var(--dimension-28);
  font-size:var(--font-size-13)!important;
  line-height:1.65!important;
  color:var(--muted)
}
.melo-points {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--dimension-30);
  margin:var(--dimension-38) 0
}
.melo-points>div {
  border-top:var(--dimension-1) solid var(--stroke);
  padding-top:var(--dimension-16)
}
.melo-points span {
  font-size:var(--font-size-11);
  font-weight:700;
  color:var(--muted)
}
.melo-points h3 {
  font:600 var(--font-size-23) var(--display);
  letter-spacing:-.04em;
  margin:var(--dimension-16) 0 var(--dimension-12)
}
.melo-points p {
  font-size:var(--font-size-14);
  color:var(--muted);
  line-height:1.65
}
.melo-screen-gallery {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--dimension-25);
  margin-top:var(--dimension-37)
}
.melo-screen-placeholder {
  background:var(--soft);
  padding:var(--dimension-20);
  border-radius:var(--dimension-4)
}
.melo-screen-hd {
  display:flex;
  justify-content:space-between;
  gap:var(--dimension-12);
  font-size:var(--font-size-11);
  font-weight:700;
  letter-spacing:.1em
}
.melo-screen-hd a {
  text-decoration:underline
}
.melo-screen-empty {
  margin-top:var(--dimension-17);
  min-height:var(--dimension-265);
  background:var(--paper);
  border:var(--dimension-1) dashed var(--stroke);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--dimension-12);
  text-align:center
}
.melo-screen-empty b {
  font:600 var(--font-size-35) var(--display);
  letter-spacing:-.06em
}
.melo-screen-empty span {
  font-size:var(--font-size-12);
  color:var(--muted)
}
.melo-screen-placeholder>p {
  font-size:var(--font-size-13);
  color:var(--muted);
  margin-bottom:0
}
@media(max-width:850px) {
  .melo-layout {
    grid-template-columns:1fr
  }
.melo-toc {
    position:static;
    flex-direction:row;
    flex-wrap:wrap;
    gap:var(--dimension-10);
    border-top:var(--dimension-1) solid var(--stroke);
    padding:var(--dimension-20) 0
  }
.melo-toc b {
    width:100%;
    margin:0
  }
.melo-metadata {
    grid-template-columns:repeat(2,1fr)
  }
.melo-stats {
    grid-template-columns:repeat(2,1fr)
  }

}
@media(max-width:520px) {
  .melo-hero {
    padding-top:var(--dimension-35)
  }
.melo-hero-screen {
    padding:var(--dimension-25);
    min-height:var(--dimension-310)
  }
.melo-hero-screen strong {
    font-size:var(--font-size-55)
  }
.melo-points {
    grid-template-columns:1fr
  }
.melo-section {
    padding-bottom:var(--dimension-46)
  }

}
   /* Melo case study extended sections */ .melo-subtext {
  font-size:var(--font-size-14);
  color:var(--muted);
  line-height:1.7;
  max-width:var(--dimension-720)
}
 .melo-divider {
  height:var(--dimension-1);
  background:var(--stroke);
  margin:var(--dimension-28) 0
}
 .melo-architecture {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--dimension-18);
  margin-top:var(--dimension-34)
}
 .melo-architecture .arch-card,.melo-wire-card,.melo-screen-detail,.melo-ds-block,.melo-settings-wrap {
  background:var(--soft);
  padding:var(--dimension-22);
  border-radius:var(--dimension-4)
}
 .melo-architecture h3,.melo-wire-card h3,.melo-screen-detail h3,.melo-ds-block h3,.melo-settings-wrap h3 {
  font:600 var(--font-size-22) var(--display);
  letter-spacing:-.04em;
  margin:0 0 var(--dimension-14)
}
 .melo-architecture p,.melo-wire-card p,.melo-screen-detail p,.melo-ds-block p,.melo-settings-wrap p {
  font-size:var(--font-size-14);
  color:var(--muted);
  line-height:1.68
}
 .melo-mini-list {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--dimension-8);
  margin-top:var(--dimension-18)
}
 .melo-mini-list span,.melo-chip-list span {
  display:inline-flex;
  align-items:center;
  min-height:var(--dimension-34);
  padding:var(--dimension-8) var(--dimension-12);
  border:var(--dimension-1) solid var(--stroke);
  border-radius:var(--dimension-999);
  font-size:var(--font-size-12);
  background:var(--paper)
}
 .melo-flow {
  margin-top:var(--dimension-28);
  background:var(--soft);
  padding:var(--dimension-22);
  border-radius:var(--dimension-4)
}
 .melo-flow-row {
  display:flex;
  flex-wrap:wrap;
  gap:var(--dimension-10);
  margin-top:var(--dimension-16)
}
 .melo-flow-row span {
  display:inline-flex;
  align-items:center;
  gap:var(--dimension-8);
  padding:var(--dimension-10) var(--dimension-14);
  background:var(--paper);
  border:var(--dimension-1) solid var(--stroke);
  border-radius:var(--dimension-999);
  font-size:var(--font-size-12)
}
 .melo-flow-row span::after {
  content:'→';
  color:var(--muted);
  margin-left:var(--dimension-2)
}
 .melo-flow-row span:last-child::after {
  display:none
}
 .melo-wire-grid,.melo-screen-grid,.melo-ds-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--dimension-20);
  margin-top:var(--dimension-30)
}
 .melo-wire-label,.melo-screen-tag,.melo-token-title {
  display:block;
  font-size:var(--font-size-11);
  font-weight:700;
  letter-spacing:.12em;
  color:var(--muted);
  margin-bottom:var(--dimension-10)
}
 .melo-wire-card .wire-box,.melo-ds-visual,.melo-settings-shot {
  margin-top:var(--dimension-16);
  min-height:var(--dimension-200);
  background:var(--paper);
  border:var(--dimension-1) dashed var(--stroke);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--dimension-20)
}
 .melo-wire-card .wire-box b,.melo-ds-visual b,.melo-settings-shot b {
  font:600 var(--font-size-28) var(--display);
  letter-spacing:-.05em
}
 .melo-wire-card .wire-box span,.melo-ds-visual span,.melo-settings-shot span {
  font-size:var(--font-size-12);
  color:var(--muted);
  margin-top:var(--dimension-10)
}
 .melo-screen-grid.three {
  grid-template-columns:repeat(3,1fr)
}
 .melo-chip-list {
  display:flex;
  flex-wrap:wrap;
  gap:var(--dimension-10);
  margin-top:var(--dimension-16)
}
 .melo-token-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--dimension-18);
  margin-top:var(--dimension-18)
}
 .melo-token-box {
  background:var(--paper);
  border:var(--dimension-1) solid var(--stroke);
  padding:var(--dimension-16);
  border-radius:var(--dimension-4)
}
 .melo-token-box h4 {
  font:600 var(--font-size-18) var(--display);
  margin:0 0 var(--dimension-10);
  letter-spacing:-.03em
}
 .melo-token-box p {
  margin:0;
  font-size:var(--font-size-13);
  color:var(--muted);
  line-height:1.6
}
 .melo-swatches {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--dimension-10);
  margin-top:var(--dimension-14)
}
 .melo-swatch {
  border:var(--dimension-1) solid var(--stroke);
  background:var(--paper)
}
 .melo-swatch i {
  display:block;
  height:var(--dimension-56)
}
 .melo-swatch span {
  display:block;
  padding:var(--dimension-9) var(--dimension-10);
  font-size:var(--font-size-11);
  line-height:1.4;
  color:var(--muted)
}
 .melo-type-list {
  display:grid;
  gap:var(--dimension-10);
  margin-top:var(--dimension-14)
}
 .melo-type-row {
  display:grid;
  grid-template-columns:var(--dimension-160) 1fr;
  gap:var(--dimension-15);
  align-items:start;
  padding:var(--dimension-12) 0;
  border-top:var(--dimension-1) solid var(--stroke)
}
 .melo-type-row:first-child {
  border-top:0;
  padding-top:0
}
 .melo-type-row b {
  font-size:var(--font-size-13)
}
 .melo-type-row span {
  font-size:var(--font-size-13);
  color:var(--muted);
  line-height:1.6
}
 .melo-component-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--dimension-14);
  margin-top:var(--dimension-16)
}
 .melo-component-card {
  background:var(--paper);
  border:var(--dimension-1) solid var(--stroke);
  padding:var(--dimension-16);
  border-radius:var(--dimension-4)
}
 .melo-component-card b {
  display:block;
  font:600 var(--font-size-17) var(--display);
  margin-bottom:var(--dimension-8)
}
 .melo-component-card p {
  margin:0;
  font-size:var(--font-size-13);
  color:var(--muted);
  line-height:1.6
}
 .melo-settings-layout {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:var(--dimension-20);
  margin-top:var(--dimension-25)
}
 .melo-bullets {
  display:grid;
  gap:var(--dimension-12);
  margin-top:var(--dimension-18)
}
 .melo-bullets div {
  padding-top:var(--dimension-12);
  border-top:var(--dimension-1) solid var(--stroke)
}
 .melo-bullets b {
  display:block;
  font-size:var(--font-size-14);
  margin-bottom:var(--dimension-6)
}
 .melo-bullets span {
  font-size:var(--font-size-13);
  color:var(--muted);
  line-height:1.6
}
 @media(max-width:850px) {
  .melo-architecture,.melo-wire-grid,.melo-screen-grid,.melo-ds-grid,.melo-screen-grid.three,.melo-token-grid,.melo-component-grid,.melo-settings-layout {
    grid-template-columns:1fr
  }
.melo-mini-list,.melo-swatches {
    grid-template-columns:repeat(2,1fr)
  }
.melo-type-row {
    grid-template-columns:1fr
  }

}
  /* V9: generous editorial spacing for case-study readability */ .melo-case {
  max-width:var(--dimension-1360)
}
 .melo-layout {
  grid-template-columns:var(--dimension-210) minmax(0,1fr);
  gap:clamp(var(--dimension-44),6vw,var(--dimension-100))
}
 .melo-story {
  min-width:0
}
 .melo-section {
  padding:clamp(var(--dimension-70),8vw,var(--dimension-126)) 0 clamp(var(--dimension-90),9vw,var(--dimension-145));
  scroll-margin-top:var(--dimension-60)
}
 .melo-section h2 {
  font-size:clamp(var(--font-size-34),4vw,var(--font-size-54));
  line-height:1.17;
  max-width:var(--dimension-700);
  margin-bottom:var(--dimension-30)
}
 .melo-section-main>p {
  max-width:var(--dimension-680);
  font-size:var(--font-size-16);
  line-height:1.85;
  margin:0 0 var(--dimension-28)
}
 .melo-section-label {
  margin-bottom:var(--dimension-26)
}
 .melo-architecture,.melo-wire-grid,.melo-screen-grid,.melo-ds-grid,.melo-settings-layout {
  gap:var(--dimension-28);
  margin-top:var(--dimension-44)
}
 .melo-architecture .arch-card,.melo-wire-card,.melo-screen-detail,.melo-ds-block,.melo-settings-wrap {
  padding:clamp(var(--dimension-26),3.5vw,var(--dimension-44))
}
 .melo-points {
  column-gap:var(--dimension-40);
  row-gap:var(--dimension-28);
  margin:var(--dimension-46) 0
}
 .melo-stats {
  gap:var(--dimension-18);
  margin:var(--dimension-46) 0 var(--dimension-26)
}
 .melo-flow {
  padding:clamp(var(--dimension-26),3vw,var(--dimension-42));
  margin-top:var(--dimension-36)
}
 .melo-feature {
  border-top:var(--dimension-1) solid var(--stroke);
  margin-top:clamp(var(--dimension-72),9vw,var(--dimension-125));
  padding-top:clamp(var(--dimension-54),6vw,var(--dimension-86));
  scroll-margin-top:var(--dimension-40)
}
 .melo-feature .melo-section-label {
  margin-bottom:var(--dimension-25)
}
 .melo-feature h2 {
  margin-bottom:var(--dimension-26)
}
 .melo-feature>p {
  max-width:var(--dimension-680)
}
 .melo-feature .melo-settings-layout {
  margin-top:var(--dimension-42)
}
 .melo-ds-block .melo-ds-visual,.melo-wire-card .wire-box {
  min-height:var(--dimension-270);
  margin-top:var(--dimension-28)
}
 .melo-screen-detail .melo-ds-visual {
  min-height:var(--dimension-245)
}
 .melo-note {
  margin-top:var(--dimension-38);
  padding:var(--dimension-25) var(--dimension-30)
}
 .melo-hero {
  padding-bottom:var(--dimension-125)
}
 @media(max-width:850px) {
  .melo-layout {
    grid-template-columns:1fr;
    gap:var(--dimension-30)
  }
.melo-section {
    padding:var(--dimension-65) 0 var(--dimension-85)
  }
.melo-hero {
    padding-bottom:var(--dimension-85)
  }

}
 @media(max-width:520px) {
  .melo-architecture .arch-card,.melo-wire-card,.melo-screen-detail,.melo-ds-block,.melo-settings-wrap {
    padding:var(--dimension-23)
  }
.melo-feature {
    margin-top:var(--dimension-75);
    padding-top:var(--dimension-55)
  }
.melo-section {
    padding:var(--dimension-55) 0 var(--dimension-78)
  }

}
  /* V10: all six product features share the same visual hierarchy inside Solution. */ #solution .melo-screen-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--dimension-28);
  margin-top:var(--dimension-48)
}
 #solution .melo-screen-detail {
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:clamp(var(--dimension-26),3vw,var(--dimension-40))
}
 #solution .melo-screen-detail h3 {
  font-size:clamp(var(--font-size-20),2vw,var(--font-size-26));
  line-height:1.18;
  min-height:2.4em
}
 #solution .melo-screen-detail .melo-ds-visual {
  min-height:var(--dimension-200);
  flex:none;
  margin-top:auto
}
 #solution .melo-feature-highlights {
  display:grid;
  gap:var(--dimension-5);
  border-top:var(--dimension-1) solid var(--stroke);
  padding-top:var(--dimension-12);
  margin-top:var(--dimension-12)
}
 #solution .melo-feature-highlights p {
  margin:0;
  font-size:var(--font-size-12);
  color:var(--muted);
  line-height:1.55
}
 #solution .melo-feature-highlights strong {
  color:var(--ink)
}
 @media(max-width:850px) {
  #solution .melo-screen-grid {
    grid-template-columns:1fr
  }
#solution .melo-screen-detail h3 {
    min-height:auto
  }

}
  /* V11: editorial single-column solution showcase */ #solution .melo-screen-grid {
  display:flex;
  flex-direction:column;
  gap:var(--dimension-64);
  margin-top:var(--dimension-64)
}
 #solution .melo-screen-detail {
  background:transparent;
  margin-top:0;
  padding:var(--dimension-32) 0 0;
  border-radius:0;
  border-top:var(--dimension-1) solid var(--stroke);
  min-width:0
}
 #solution .melo-screen-tag {
  display:block;
  margin-bottom:var(--dimension-24);
  letter-spacing:.13em
}
 #solution .melo-screen-detail h3 {
  font:600 clamp(var(--font-size-29),3.5vw,var(--font-size-45))/1.13 var(--display);
  letter-spacing:-.06em;
  max-width:var(--dimension-710);
  margin:0 0 var(--dimension-15)
}
 #solution .melo-screen-detail>p {
  font-size:clamp(var(--font-size-15),1.65vw,var(--font-size-18));
  line-height:1.75;
  max-width:var(--dimension-660);
  margin:0 0 var(--dimension-28);
  color:var(--muted)
}
 #solution .melo-ds-visual {
  width:100%;
  min-height:clamp(var(--dimension-370),48vw,var(--dimension-610));
  margin:var(--dimension-38) 0 var(--dimension-20);
  background:var(--soft);
  border:var(--dimension-1) dashed var(--stroke);
  border-radius:var(--dimension-5);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--dimension-14)
}
 #solution .melo-ds-visual b {
  font:600 clamp(var(--font-size-27),3vw,var(--font-size-42))/1.1 var(--display);
  letter-spacing:-.05em
}
 #solution .melo-ds-visual span {
  font-size:var(--font-size-13)
}
 .melo-case .melo-figma-link, #solution .melo-screen-detail > .melo-figma-link {
  margin-top:var(--dimension-14);
  margin-bottom:0;
  font-size:var(--font-size-12);
  line-height:1.6
}
 .melo-case .melo-figma-link a {
  font-size:var(--font-size-12);
  line-height:1.6;
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:var(--dimension-4);
  text-decoration-color:var(--accent);
  font-weight:500
}
 @media(max-width:700px) {
  #solution .melo-screen-grid {
    gap:var(--dimension-40);
    margin-top:var(--dimension-40)
  }
#solution .melo-screen-detail {
    padding-top:var(--dimension-24)
  }
#solution .melo-ds-visual {
    min-height:var(--dimension-310);
    margin-top:var(--dimension-25)
  }

}
  /* V12 — spacious editorial treatment for Wireframes and Design System */ .melo-case #wireframes .melo-wire-grid, .melo-case #system .melo-ds-grid, .melo-case #system .melo-token-grid, .melo-case #system .melo-component-grid, .melo-case #system .melo-screen-grid  {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--dimension-68);
  margin-top:var(--dimension-54)
}
 .melo-case #wireframes .melo-wire-card, .melo-case #system .melo-ds-block {
  width:100%;
  padding:clamp(var(--dimension-28),4vw,var(--dimension-58));
  border-radius:var(--dimension-5)
}
 .melo-case #wireframes .melo-wire-card h3, .melo-case #system .melo-ds-block h3 {
  font-size:clamp(var(--font-size-26),3vw,var(--font-size-38));
  line-height:1.16;
  max-width:var(--dimension-750);
  margin-bottom:var(--dimension-20)
}
 .melo-case #wireframes .melo-wire-card p, .melo-case #system .melo-ds-block>p {
  max-width:var(--dimension-780);
  font-size:var(--font-size-16);
  line-height:1.8
}
 .melo-case #wireframes .melo-wire-card .wire-box, .melo-case #system .melo-ds-visual {
  min-height:clamp(var(--dimension-310),42vw,var(--dimension-560));
  margin-top:var(--dimension-32);
  padding:var(--dimension-35)
}
 .melo-case #wireframes .melo-wire-card .wire-box b, .melo-case #system .melo-ds-visual b {
  font-size:clamp(var(--font-size-28),3.5vw,var(--font-size-48))
}
 .melo-case #system .melo-token-box, .melo-case #system .melo-component-card {
  padding:var(--dimension-30);
  min-height:var(--dimension-145)
}
 .melo-case #system .melo-token-box h4 {
  font-size:var(--font-size-23)
}
 .melo-case #system .melo-swatches {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--dimension-16);
  margin:var(--dimension-30) 0
}
 .melo-case #system .melo-swatch i {
  height:var(--dimension-110)
}
 .melo-case #system .melo-type-row {
  grid-template-columns:minmax(var(--dimension-130),.7fr) 2fr;
  padding:var(--dimension-25) 0;
  gap:var(--dimension-35)
}
 .melo-case #system .melo-component-grid {
  gap:var(--dimension-18)
}
 .melo-case #system .melo-component-card p {
  max-width:var(--dimension-700)
}
 .melo-case #wireframes .melo-wire-grid>*,.melo-case #system .melo-ds-grid>* {
  min-width:0
}
 @media(max-width:650px) {
  .melo-case #system .melo-swatches {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
.melo-case #system .melo-type-row {
    grid-template-columns:1fr;
    gap:var(--dimension-7)
  }
.melo-case #wireframes .melo-wire-grid,.melo-case #system .melo-ds-grid {
    gap:var(--dimension-32);
    margin-top:var(--dimension-32)
  }

}
   /* IA sitemap redesign */ .melo-sitemap {
  margin-top:var(--dimension-40);
  background:var(--soft);
  border-radius:var(--dimension-8);
  padding:clamp(var(--dimension-18),2.3vw,var(--dimension-28));
  overflow:visible
}
 .melo-sitemap-top {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--dimension-18);
  flex-wrap:wrap;
  padding-bottom:var(--dimension-16);
  position:relative
}
 .melo-map-root {
  background:var(--accent);
  color:var(--palette-171717);
  border-radius:var(--dimension-16);
  padding:var(--dimension-16) var(--dimension-28);
  font:600 clamp(var(--font-size-18),1.8vw,var(--font-size-24))/1.1 var(--display);
  box-shadow:none
}
 .melo-map-grid {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:var(--dimension-12);
  position:relative;
  padding-top:var(--dimension-26)
}
 .melo-map-grid:before {
  content:'';
  position:absolute;
  left:var(--dimension-12);
  right:var(--dimension-12);
  top:0;
  height:var(--dimension-2);
  background:var(--stroke)
}
 .melo-map-column {
  position:relative;
  padding-top:var(--dimension-24);
  min-width:0
}
 .melo-map-column:before {
  content:'';
  position:absolute;
  top:0;
  left:50%;
  width:var(--dimension-2);
  height:var(--dimension-24);
  background:var(--stroke);
  transform:translateX(-50%)
}
 .melo-map-head {
  background:var(--ink);
  color:var(--bg);
  border-radius:var(--dimension-14);
  text-align:center;
  padding:var(--dimension-12) var(--dimension-8);
  font:600 var(--font-size-13)/1.2 var(--display);
  margin-bottom:var(--dimension-12);
  box-shadow:none
}
 .melo-map-item {
  background:var(--paper);
  border:var(--dimension-1) solid var(--stroke);
  border-radius:var(--dimension-12);
  padding:var(--dimension-10) var(--dimension-8);
  font-size:var(--font-size-12);
  line-height:1.25;
  text-align:center;
  margin-bottom:var(--dimension-10);
  min-height:var(--dimension-48);
  display:flex;
  align-items:center;
  justify-content:center;
  word-break:break-word
}
 .melo-ia-notes {
  grid-template-columns:repeat(3,1fr)
}
 @media(max-width:1200px) {
  .melo-map-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--dimension-14)
  }
.melo-map-grid:before {
    display:none
  }
.melo-map-column {
    padding-top:0
  }
.melo-map-column:before {
    display:none
  }

}
 @media(max-width:850px) {
  .melo-ia-notes {
    grid-template-columns:1fr
  }
.melo-sitemap-top {
    justify-content:flex-start
  }
.melo-map-root {
    font-size:var(--font-size-20);
    padding:var(--dimension-15) var(--dimension-26)
  }
.melo-map-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

}
 @media(max-width:520px) {
  .melo-map-grid {
    grid-template-columns:1fr
  }
.melo-map-root {
    width:100%;
    text-align:center
  }

}
  .melo-image-frame {
  margin-top:var(--dimension-18);
  background:var(--paper);
  border:var(--dimension-1) solid var(--stroke);
  border-radius:var(--dimension-8);
  padding:var(--dimension-18);
  overflow:hidden
}
 .melo-image-frame img {
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--dimension-4)
}
 .melo-image-light {
  background:var(--palette-f7f7f4)
}
  /* V16: authentic Figma screens in Melo solution */ .melo-feature .melo-image-frame,.melo-screen-detail .melo-image-frame {
  width:100%;
  max-width:none;
  padding:clamp(var(--dimension-8),1.6vw,var(--dimension-18));
  background:var(--paper);
  border:var(--dimension-1) solid var(--stroke);
  border-radius:var(--dimension-8);
  overflow:hidden
}
 .melo-feature .melo-image-frame img,.melo-screen-detail .melo-image-frame img {
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  max-height:none;
  border-radius:var(--dimension-4)
}
   /* Shared interactive homepage project covers */ .interactive-cover {
  border-radius:var(--dimension-20);
  border:var(--dimension-1) solid rgba(35,31,63,.35);
  height:clamp(var(--dimension-320),39vw,var(--dimension-550));
  background-image:radial-gradient(ellipse at 25% 20%,var(--palette-ffffff55),transparent 65%);
  --mx:0;
  --my:0
}
 .interactive-cover:before {
  content:"";
  position:absolute;
  inset:50% 20% -30% -20%;
  border:var(--dimension-1) dashed currentColor;
  border-radius:50%;
  opacity:.2;
  transform:rotate(20deg);
  pointer-events:none
}
 .cover-layer {
  position:relative;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  transform:translate(calc(var(--mx)*var(--dimension-12)),calc(var(--my)*var(--dimension-8)));
  transition:transform var(--duration--2s) ease-out;
  z-index:1
}
 .cover-title {
  font:700 clamp(var(--font-size-100),23vw,var(--font-size-330))/1 var(--display);
  letter-spacing:-.09em;
  transform:rotate(-10deg);
  text-shadow:var(--dimension-10) var(--dimension-14) 0 var(--palette-ffffff88);
  transition:transform var(--duration--45s)
}
 .project-card:not(.featured) .cover-title {
  font-size:clamp(var(--font-size-80),12vw,var(--font-size-175))
}
 .cover-pill {
  position:absolute;
  right:10%;
  top:17%;
  background:var(--palette-f7ef77);
  color:var(--palette-222);
  border-radius:var(--dimension-100);
  padding:var(--dimension-16) var(--dimension-24);
  font-size:var(--font-size-14);
  font-weight:700;
  transform:rotate(12deg);
  transition:transform var(--duration--45s)
}
 .art-capex .cover-pill {
  background:var(--palette-f4f1b5)
}
.art-cooter .cover-pill {
  background:var(--palette-fce5d5)
}
 .cover-view {
  position:absolute;
  left:var(--dimension-28);
  bottom:var(--dimension-28);
  z-index:2;
  background:var(--palette-202020);
  color:white;
  border-radius:var(--dimension-100);
  padding:var(--dimension-12) var(--dimension-20);
  font-size:var(--font-size-13);
  font-weight:600;
  display:flex;
  gap:var(--dimension-12);
  align-items:center
}
 .cover-view span {
  display:inline-block;
  transition:transform var(--duration--3s)
}
 .cover-ui {
  position:absolute;
  right:-8%;
  top:9%;
  width:47%;
  height:90%;
  padding:var(--dimension-25);
  border:var(--dimension-1) solid currentColor;
  border-radius:var(--dimension-14);
  opacity:.14;
  transform:rotate(-20deg) translate(calc(var(--mx)*-8px),calc(var(--my)*-5px));
  transition:opacity var(--duration--4s),transform var(--duration--2s);
  pointer-events:none
}
 .cover-ui>span {
  font-size:var(--font-size-10);
  font-weight:700;
  letter-spacing:.1em
}
.cover-ui-chart {
  display:flex;
  align-items:end;
  height:40%;
  gap:var(--dimension-10);
  margin:var(--dimension-25) 0;
  border-bottom:var(--dimension-1) solid currentColor
}
.cover-ui-chart i {
  background:currentColor;
  width:18%;
  height:45%;
  border-radius:var(--dimension-5) var(--dimension-5) 0 0
}
.cover-ui-chart i:nth-child(2) {
  height:70%
}
.cover-ui-chart i:nth-child(3) {
  height:55%
}
.cover-ui-chart i:nth-child(4) {
  height:90%
}
.cover-ui-lines {
  height:35%;
  background:repeating-linear-gradient(0deg,transparent 0 var(--dimension-20),currentColor var(--dimension-21) var(--dimension-22),transparent var(--dimension-23) var(--dimension-40))
}
 .project-visual-link:hover .cover-title,.project-visual-link:focus-visible .cover-title {
  transform:rotate(-6deg) scale(1.025)
}
 .project-visual-link:hover .cover-pill,.project-visual-link:focus-visible .cover-pill {
  transform:rotate(6deg) translateY(-6px)
}
 .project-visual-link:hover .cover-view span,.project-visual-link:focus-visible .cover-view span {
  transform:translate(var(--dimension-3),-3px)
}
 .project-visual-link:hover .cover-ui {
  opacity:.23
}
 @media(max-width:520px) {
  .interactive-cover,.project-card:not(.featured) .interactive-cover {
    height:var(--dimension-300);
    border-radius:var(--dimension-14)
  }
.cover-title {
    font-size:clamp(var(--font-size-110),28vw,var(--font-size-150))
  }
.project-card:not(.featured) .cover-title {
    font-size:clamp(var(--font-size-90),24vw,var(--font-size-135))
  }
.cover-pill {
    font-size:var(--font-size-12);
    padding:var(--dimension-10) var(--dimension-16);
    right:7%;
    top:20%
  }
.cover-view {
    left:var(--dimension-20);
    bottom:var(--dimension-22);
    font-size:var(--font-size-12);
    padding:var(--dimension-10) var(--dimension-15)
  }
.interactive-cover .art-label {
    left:var(--dimension-20);
    top:var(--dimension-22);
    font-size:var(--font-size-9)
  }
.interactive-cover .art-bottom {
    right:var(--dimension-18);
    bottom:var(--dimension-25);
    font-size:var(--font-size-8)
  }

}
 @media(prefers-reduced-motion:reduce) {
  .interactive-cover * {
    transition:none!important
  }
.project-visual-link:hover .cover-title,.project-visual-link:focus-visible .cover-title {
    transform:rotate(-10deg)
  }
.project-visual-link:hover .cover-pill,.project-visual-link:focus-visible .cover-pill {
    transform:rotate(12deg)
  }
.project-visual-link:hover .cover-view span,.project-visual-link:focus-visible .cover-view span {
    transform:none
  }

}
  .project-card .interactive-cover:after {
  content:none
}
 .cooter-watch-cover {
  background:var(--palette-eec7aa);
  color:var(--palette-432819)
}
 .cooter-watch-cover:before {
  inset:10% -30% -45% 45%;
  border-style:solid;
  opacity:.18
}
 .watch-copy {
  position:absolute;
  left:8%;
  top:33%;
  display:flex;
  flex-direction:column;
  gap:var(--dimension-12);
  z-index:2
}
 .watch-eyebrow {
  font-size:var(--font-size-10);
  letter-spacing:.15em;
  font-weight:700
}
 .watch-name {
  font:700 clamp(var(--font-size-50),6.6vw,var(--font-size-95))/1 var(--display);
  letter-spacing:-.08em
}
 .watch-caption {
  font-size:var(--font-size-14);
  font-weight:500
}
 .watch-device {
  position:absolute;
  right:11%;
  top:19%;
  width:32%;
  height:65%;
  transform:rotate(12deg);
  background:var(--palette-292321);
  border:var(--dimension-5) solid var(--palette-635952);
  border-radius:var(--dimension-38);
  box-shadow:var(--dimension-14) var(--dimension-18) var(--dimension-30) var(--palette-43281933);
  transition:transform var(--duration--4s)
}
 .watch-device:before,.watch-device:after {
  content:"";
  position:absolute;
  background:var(--palette-686459);
  width:58%;
  height:var(--dimension-70);
  left:21%;
  z-index:-1;
  border-radius:var(--dimension-14)
}
 .watch-device:before {
  top:-57px
}
.watch-device:after {
  bottom:-57px
}
 .watch-face {
  height:100%;
  border-radius:var(--dimension-30);
  background:var(--palette-151d19);
  color:var(--palette-f4f6ef);
  padding:var(--dimension-15) var(--dimension-9);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--dimension-8);
  text-align:center
}
 .watch-time {
  font-size:var(--font-size-10);
  align-self:flex-end;
  color:var(--palette-aeb9ac)
}
.watch-face svg {
  width:70%;
  height:var(--dimension-60);
  color:var(--palette-c9ed7c)
}
.watch-face b {
  font-size:var(--font-size-13)
}
.watch-distance {
  font-size:var(--font-size-8);
  color:var(--palette-b8c4b7)
}
.watch-unlock {
  font-size:var(--font-size-10);
  background:var(--palette-c9ed7c);
  color:var(--palette-172017);
  padding:var(--dimension-8) var(--dimension-12);
  border-radius:var(--dimension-100)
}
 .project-visual-link:hover .watch-device,.project-visual-link:focus-visible .watch-device {
  transform:rotate(5deg) translateY(-6px)
}
 @media(max-width:520px) {
  .watch-device {
    width:32%;
    height:62%;
    right:9%;
    top:20%;
    border-width:var(--dimension-4);
    border-radius:var(--dimension-28)
  }
.watch-face {
    border-radius:var(--dimension-22);
    gap:var(--dimension-5);
    padding:var(--dimension-10) var(--dimension-6)
  }
.watch-name {
    font-size:var(--font-size-52)
  }
.watch-copy {
    left:7%;
    gap:var(--dimension-8)
  }
.watch-caption {
    font-size:var(--font-size-12)
  }
.watch-face b {
    font-size:var(--font-size-11)
  }
.watch-distance {
    font-size:var(--font-size-7)
  }
.watch-unlock {
    font-size:var(--font-size-8);
    padding:var(--dimension-6) var(--dimension-9)
  }
.watch-face svg {
    height:var(--dimension-48)
  }

}
 @media(prefers-reduced-motion:reduce) {
  .project-visual-link:hover .watch-device,.project-visual-link:focus-visible .watch-device {
    transform:rotate(12deg)
  }

}
  /* Match the shared project wordmark without obscuring the watch. */ .project-card:not(.featured) .cooter-watch-cover .watch-name {
  font:700 clamp(var(--font-size-60),8vw,var(--font-size-110))/1 var(--display);
  letter-spacing:-.09em;
  transform:rotate(-10deg);
  text-shadow:var(--dimension-8) var(--dimension-10) 0 var(--palette-ffffff88);
  white-space:nowrap
}
 .cooter-watch-cover .watch-copy {
  left:7%;
  top:33%;
  gap:var(--dimension-18)
}
 .project-visual-link:hover .cooter-watch-cover .watch-name,.project-visual-link:focus-visible .cooter-watch-cover .watch-name {
  transform:rotate(-6deg) scale(1.025)
}
 @media(max-width:520px) {
  .project-card:not(.featured) .cooter-watch-cover .watch-name {
    font-size:clamp(var(--font-size-55),16vw,var(--font-size-75))
  }
.cooter-watch-cover .watch-copy {
    gap:var(--dimension-12)
  }

}
 @media(prefers-reduced-motion:reduce) {
  .project-visual-link:hover .cooter-watch-cover .watch-name,.project-visual-link:focus-visible .cooter-watch-cover .watch-name {
    transform:rotate(-10deg)
  }

}
  /* Capex direction drawn from its architecture and floor-plan design. */ .art-capex.interactive-cover {
  background:var(--palette-ddd6c9);
  color:var(--palette-302d28);
  background-image:linear-gradient(135deg,var(--palette-efe9de),var(--palette-d5c9b5))
}
 .art-capex .cover-pill {
  background:var(--palette-ae7d3d);
  color:white
}
 .capex-plan {
  position:absolute;
  right:-5%;
  top:8%;
  width:60%;
  height:90%;
  opacity:.25;
  transform:rotate(-18deg) translate(calc(var(--mx)*-9px),calc(var(--my)*-6px));
  transition:transform var(--duration--25s),opacity var(--duration--4s)
}
 .capex-plan svg {
  width:100%;
  height:100%
}
 .project-visual-link:hover .capex-plan {
  opacity:.42
}
 .art-capex.interactive-cover:before {
  border-radius:0;
  inset:15%;
  transform:rotate(-18deg);
  border-style:solid;
  opacity:.12
}
  .art-brightspark {
  background:var(--palette-e8deff);
  color:var(--palette-41335e);
  background-image:radial-gradient(circle at 80% 25%,var(--palette-fff0b5),transparent 55%)
}
 .project-card:not(.featured) .spark-title {
  font-size:clamp(var(--font-size-65),9vw,var(--font-size-120));
  line-height:.85;
  position:absolute;
  left:10%;
  top:29%
}
 .art-brightspark .cover-pill {
  font-size:var(--font-size-11);
  right:6%;
  top:18%;
  padding:var(--dimension-12) var(--dimension-18);
  background:var(--palette-fff0a7)
}
 .spark-symbol {
  position:absolute;
  right:14%;
  top:40%;
  font-size:var(--font-size-135);
  color:var(--palette-9578c5);
  transform:rotate(12deg);
  transition:transform var(--duration--4s)
}
 .project-visual-link:hover .spark-symbol {
  transform:rotate(35deg) scale(1.08)
}
 @media(max-width:520px) {
  .project-card:not(.featured) .spark-title {
    font-size:var(--font-size-75)
  }
.spark-symbol {
    font-size:var(--font-size-100);
    right:12%
  }

}
 @media(prefers-reduced-motion:reduce) {
  .project-visual-link:hover .spark-symbol {
    transform:rotate(12deg)
  }

}
  /* Shared composition for Melo, Capex and Cooter homepage covers. */ .balanced-cover .watch-copy {
  left:7%;
  top:33%;
  gap:var(--dimension-18)
}
 .project-card .balanced-cover .watch-name {
  font:700 clamp(var(--font-size-60),8vw,var(--font-size-110))/1 var(--display);
  letter-spacing:-.09em;
  transform:rotate(-10deg);
  text-shadow:var(--dimension-8) var(--dimension-10) 0 var(--palette-ffffff88);
  white-space:nowrap
}
 .balanced-cover .cover-ui {
  right:7%;
  top:19%;
  width:35%;
  height:65%;
  opacity:.65;
  border-radius:var(--dimension-18);
  transform:rotate(12deg);
  background:var(--palette-fff9);
  box-shadow:var(--dimension-14) var(--dimension-18) var(--dimension-30) var(--palette-43281922);
  transition:transform var(--duration--4s)
}
 .balanced-cover .capex-plan {
  right:7%;
  top:19%;
  width:35%;
  height:65%;
  opacity:.65;
  padding:var(--dimension-12);
  border-radius:var(--dimension-18);
  background:var(--palette-fff9);
  box-shadow:var(--dimension-14) var(--dimension-18) var(--dimension-30) var(--palette-43281922);
  transform:rotate(12deg) translate(calc(var(--mx)*-9px),calc(var(--my)*-6px));
  transition:transform var(--duration--4s)
}
 .project-visual-link:hover .balanced-cover .cover-ui,.project-visual-link:hover .balanced-cover .capex-plan {
  transform:rotate(5deg) translateY(-6px)
}
 @media(max-width:520px) {
  .project-card .balanced-cover .watch-name {
    font-size:clamp(var(--font-size-55),16vw,var(--font-size-75))
  }
.balanced-cover .watch-copy {
    gap:var(--dimension-12)
  }
.balanced-cover .cover-ui,.balanced-cover .capex-plan {
    right:7%;
    width:34%
  }

}
 @media(prefers-reduced-motion:reduce) {
  .project-visual-link:hover .balanced-cover .cover-ui,.project-visual-link:hover .balanced-cover .capex-plan {
    transform:rotate(12deg)
  }

}
  .art-nvw {
  background:var(--palette-dbe9c9);
  color:var(--palette-203921);
  background-image:radial-gradient(circle at 80% 20%,var(--palette-f1f8e9),transparent 60%)
}
 .nvw-cover-screen {
  position:absolute;
  right:6%;
  top:19%;
  width:35%;
  height:65%;
  overflow:hidden;
  border-radius:var(--dimension-18);
  background:white;
  box-shadow:var(--dimension-14) var(--dimension-18) var(--dimension-30) var(--palette-20392133);
  transform:rotate(12deg);
  transition:transform var(--duration--4s)
}
 .nvw-cover-screen img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center
}
 .project-visual-link:hover .nvw-cover-screen {
  transform:rotate(5deg) translateY(-6px)
}
 .nvw-figure {
  margin:var(--dimension-32) 0
}
.nvw-figure img {
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--dimension-12);
  border:var(--dimension-1) solid var(--line);
  background:var(--palette-fff)
}
.nvw-figure figcaption {
  font-size:var(--font-size-12);
  line-height:1.6;
  margin-top:var(--dimension-12);
  color:var(--muted)
}
 .nvw-image-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--dimension-24)
}
.nvw-source-links {
  display:flex;
  gap:var(--dimension-24);
  flex-wrap:wrap;
  margin-top:var(--dimension-24)
}
.nvw-source-link {
  font-size:var(--font-size-12);
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:var(--dimension-4)
}
.nvw-steps {
  padding-left:var(--dimension-24);
  line-height:1.8
}
.nvw-steps li {
  margin:var(--dimension-12) 0
}
 @media(max-width:650px) {
  .nvw-image-grid {
    grid-template-columns:1fr
  }
.nvw-cover-screen {
    right:7%;
    width:34%
  }

}
 @media(prefers-reduced-motion:reduce) {
  .project-visual-link:hover .nvw-cover-screen {
    transform:rotate(12deg)
  }

}
  /* Keep the featured Melo wordmark large;
 unify all four supporting titles. */ .project-card:not(.featured) .interactive-cover .standard-cover-title {
  font:700 clamp(var(--font-size-60),8vw,var(--font-size-110))/1 var(--display);
  letter-spacing:-.09em;
  text-shadow:var(--dimension-8) var(--dimension-10) 0 var(--palette-ffffff88)
}
 @media(max-width:520px) {
  .project-card:not(.featured) .interactive-cover .standard-cover-title {
    font-size:clamp(var(--font-size-55),16vw,var(--font-size-75))
  }

}
  /* A consistent tilted project sticker on every homepage banner. */ .project-card:not(.featured) .interactive-cover .cover-pill {
  right:6%;
  top:15%;
  padding:var(--dimension-14) var(--dimension-20);
  font-size:var(--font-size-12);
  font-weight:700;
  transform:rotate(12deg);
  z-index:4;
  white-space:nowrap
}
 .art-cooter .cover-pill {
  background:var(--palette-d1ed83);
  color:var(--palette-253221)
}
 .art-nvw .cover-pill {
  background:var(--palette-254a32);
  color:var(--palette-f0f6e9)
}
 @media(max-width:520px) {
  .project-card:not(.featured) .interactive-cover .cover-pill {
    right:6%;
    top:17%;
    padding:var(--dimension-12) var(--dimension-16);
    font-size:var(--font-size-11)
  }

}
  /* NVW cover artwork: growth, super and reassurance. */ .nvw-finance-art {
  position:absolute;
  right:7%;
  top:24%;
  width:35%;
  height:60%;
  color:var(--palette-315638);
  transform:rotate(12deg) translate(calc(var(--mx)*-9px),calc(var(--my)*-6px));
  transition:transform var(--duration--4s)
}
 .nvw-growth-card {
  position:absolute;
  inset:0;
  background:var(--palette-f0f5dc);
  border:var(--dimension-2) solid var(--palette-31563844);
  border-radius:var(--dimension-18);
  padding:var(--dimension-20) var(--dimension-15);
  box-shadow:var(--dimension-14) var(--dimension-18) var(--dimension-30) var(--palette-20392122);
  display:flex;
  flex-direction:column;
  justify-content:space-between
}
 .nvw-growth-card svg {
  width:100%;
  height:72%
}
.nvw-art-kicker,.nvw-art-caption {
  font-size:var(--font-size-8);
  font-weight:700;
  letter-spacing:.14em
}
.nvw-art-caption {
  opacity:.65
}
 .nvw-coin {
  position:absolute;
  width:var(--dimension-65);
  height:var(--dimension-65);
  border-radius:50%;
  background:var(--palette-dbc476);
  border:var(--dimension-5) solid var(--palette-b99c49);
  color:var(--palette-6b5724);
  display:grid;
  place-items:center;
  font:700 var(--font-size-32)/1 var(--display);
  box-shadow:var(--dimension-5) var(--dimension-7) 0 var(--palette-a68740)
}
 .nvw-coin-back {
  bottom:-8%;
  right:12%;
  transform:rotate(-20deg)
}
.nvw-coin-front {
  bottom:-13%;
  right:-9%;
  transform:rotate(8deg)
}
 .nvw-trust-mark {
  position:absolute;
  top:33%;
  left:-15%;
  width:var(--dimension-58);
  height:var(--dimension-65);
  transform:rotate(-20deg);
  filter:drop-shadow(var(--dimension-4) var(--dimension-5) 0 var(--palette-fff8))
}
.nvw-trust-mark svg {
  width:100%;
  height:100%
}
 .project-visual-link:hover .nvw-finance-art,.project-visual-link:focus-visible .nvw-finance-art {
  transform:rotate(5deg) translateY(-6px)
}
 @media(max-width:520px) {
  .nvw-growth-card {
    padding:var(--dimension-14) var(--dimension-10)
  }
.nvw-art-kicker,.nvw-art-caption {
    font-size:var(--font-size-6)
  }
.nvw-coin {
    width:var(--dimension-48);
    height:var(--dimension-48);
    font-size:var(--font-size-24);
    border-width:var(--dimension-4)
  }
.nvw-trust-mark {
    width:var(--dimension-44);
    height:var(--dimension-50)
  }

}
 @media(prefers-reduced-motion:reduce) {
  .project-visual-link:hover .nvw-finance-art,.project-visual-link:focus-visible .nvw-finance-art {
    transform:rotate(12deg)
  }

}
  /* Quiet supporting project covers, with the featured Melo cover preserved. */ .project-card .simple-cover {
  background-image:none
}
 .project-card .simple-cover:before {
  content:none
}
 .project-card .simple-cover .cover-layer {
  transform:none;
  transition:none
}
 .project-card .simple-cover .cover-title {
  transform:none;
  text-shadow:none;
  letter-spacing:-.06em;
  transition:none
}
 .project-card .simple-cover .watch-copy {
  top:40%;
  gap:0
}
 .project-card .simple-cover .spark-title {
  left:7%;
  top:30%;
  line-height:1
}
 .project-card .simple-cover .capex-plan {
  opacity:.25;
  background:transparent;
  border-radius:0;
  box-shadow:none;
  transform:none;
  top:25%;
  height:50%;
  right:7%;
  transition:none
}
 .project-card .simple-cover .watch-device {
  transform:none;
  box-shadow:none;
  top:27%;
  height:46%;
  width:27%;
  right:9%;
  transition:none
}
 .project-card .simple-cover .watch-device:before,.project-card .simple-cover .watch-device:after {
  content:none
}
 .project-card .simple-cover .watch-time,.project-card .simple-cover .watch-face b,.project-card .simple-cover .watch-distance,.project-card .simple-cover .watch-unlock {
  display:none
}
 .project-card .simple-cover .watch-face svg {
  height:70%;
  width:75%
}
 .project-card .simple-cover .spark-symbol {
  font-size:var(--font-size-100);
  right:10%;
  top:39%;
  opacity:.35;
  transform:none;
  transition:none
}
 .project-card .simple-cover .nvw-finance-art {
  transform:none;
  top:29%;
  height:44%;
  right:7%;
  opacity:.45;
  transition:none
}
 .project-card .simple-cover .nvw-growth-card {
  background:transparent;
  border:0;
  box-shadow:none;
  padding:0;
  justify-content:center
}
 .project-card .simple-cover .nvw-growth-card svg {
  height:100%
}
 @media(max-width:520px) {
  .project-card .simple-cover .spark-symbol {
    font-size:var(--font-size-75)
  }
.project-card .simple-cover .watch-device {
    border-radius:var(--dimension-25)
  }
.project-card .simple-cover .watch-face {
    border-radius:var(--dimension-19)
  }

}
  /* Supporting covers use Melo's expressive wordmark and quiet background art. */
.project-card .melo-inspired-cover{container-type:inline-size}
.project-card:not(.featured) .melo-inspired-cover .poster-wordmark{position:relative;left:auto;top:auto;font:700 clamp(var(--font-size-75),25cqw,var(--font-size-175))/1 var(--display);letter-spacing:-.09em;transform:rotate(-10deg);text-shadow:var(--dimension-10) var(--dimension-14) 0 var(--palette-ffffff88);text-align:center;z-index:2}
.project-card .art-brightspark.melo-inspired-cover .poster-wordmark{font-size:clamp(var(--font-size-65),21cqw,var(--font-size-145));line-height:.85}
.project-card .melo-inspired-cover .cover-pill{right:9%;top:17%;font-size:var(--font-size-12);padding:var(--dimension-14) var(--dimension-20);z-index:3}
.project-card .melo-inspired-cover .capex-plan{right:-5%;top:8%;width:60%;height:90%;opacity:.2;padding:0;background:transparent;box-shadow:none;transform:rotate(-18deg)}
.project-card .melo-inspired-cover .watch-device{right:8%;top:18%;width:30%;height:65%;opacity:.18;box-shadow:none;transform:rotate(-20deg);pointer-events:none}
.project-card .melo-inspired-cover .watch-face svg{height:70%;width:75%}
.project-card .melo-inspired-cover .watch-face b,.project-card .melo-inspired-cover .watch-distance,.project-card .melo-inspired-cover .watch-unlock,.project-card .melo-inspired-cover .watch-time{display:none}
.project-card .melo-inspired-cover .spark-symbol{right:2%;top:20%;font-size:clamp(var(--font-size-160),50cqw,var(--font-size-300));opacity:.16;transform:rotate(-20deg)}
.project-card .melo-inspired-cover .nvw-finance-art{right:-7%;top:8%;width:60%;height:90%;opacity:.2;transform:rotate(-20deg)}
.project-card .melo-inspired-cover .nvw-growth-card{background:transparent;border:0;box-shadow:none;justify-content:center}
.project-card .melo-inspired-cover .nvw-growth-card svg{height:100%}
.project-card .melo-inspired-cover .nvw-art-kicker,.project-card .melo-inspired-cover .nvw-art-caption,.project-card .melo-inspired-cover .nvw-coin,.project-card .melo-inspired-cover .nvw-trust-mark{display:none}
.project-visual-link:hover .melo-inspired-cover .poster-wordmark,.project-visual-link:focus-visible .melo-inspired-cover .poster-wordmark{transform:rotate(-6deg) scale(1.025)}
@media(max-width:520px){.project-card .melo-inspired-cover .cover-pill{font-size:var(--font-size-11);padding:var(--dimension-12) var(--dimension-16)}}
@media(prefers-reduced-motion:reduce){.project-visual-link:hover .melo-inspired-cover .poster-wordmark,.project-visual-link:focus-visible .melo-inspired-cover .poster-wordmark{transform:rotate(-10deg)}}

/* Token architecture: three stages across, then one full-width modes note. */
.melo-case #system .melo-token-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dimension-20) var(--dimension-32);margin-top:var(--dimension-28)}
.melo-case #system .melo-token-grid .melo-token-box{position:relative;padding:var(--dimension-22);min-height:0;border:0;border-radius:var(--dimension-16);background:var(--paper);color:var(--ink)}
.melo-case #system .melo-token-grid .melo-token-box h4{font-size:var(--font-size-18);line-height:1.35;margin-bottom:var(--dimension-12)}
.melo-case #system .melo-token-grid .melo-token-box p{font-size:var(--font-size-13);line-height:1.7;color:var(--muted)}
.melo-case #system .melo-token-grid .melo-token-box:nth-child(2){background:var(--paper);border:var(--dimension-1) solid var(--stroke)}
.melo-case #system .melo-token-grid .melo-token-box:nth-child(3){background:var(--accent);color:var(--palette-1b1c1c)}
.melo-case #system .melo-token-grid .melo-token-box:nth-child(3) p{color:var(--palette-1b1c1c)}
.melo-case #system .melo-token-grid .melo-token-box:nth-child(-n+2):after{content:'→';position:absolute;right:-26px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:var(--font-size-20)}
.melo-case #system .melo-token-grid .melo-token-box:last-child{grid-column:1/-1;padding:var(--dimension-18) var(--dimension-22)}
.melo-case #system .melo-token-grid .melo-token-box:last-child h4{font-size:var(--font-size-14);margin-bottom:var(--dimension-6)}
@media(max-width:700px){.melo-case #system .melo-token-grid{grid-template-columns:1fr;gap:var(--dimension-16)}.melo-case #system .melo-token-grid .melo-token-box:nth-child(-n+2):after{content:none}}

.melo-case #system .melo-token-grid .melo-token-box:last-child{background:var(--paper);border:var(--dimension-1) solid var(--stroke)}

.melo-wireframe-image{margin:var(--dimension-28) 0 0}.melo-wireframe-image img{display:block;width:100%;height:auto;border:var(--dimension-1) solid var(--stroke);border-radius:var(--dimension-5);background:var(--palette-fff)}

.melo-case #system .melo-token-grid .melo-token-box:first-child{border:var(--dimension-1) solid var(--stroke)}

/* Core components: balanced two-column, two-row cards. */
.melo-case #system .melo-component-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--dimension-20);margin-top:var(--dimension-28);align-items:stretch}
.melo-case #system .melo-component-grid .melo-component-card{padding:var(--dimension-24);min-height:0;border:var(--dimension-1) solid var(--stroke);border-radius:var(--dimension-16);background:var(--paper)}
.melo-case #system .melo-component-grid .melo-component-card b{display:block;font:600 var(--font-size-18)/1.35 var(--display);margin-bottom:var(--dimension-12)}
.melo-case #system .melo-component-grid .melo-component-card p{margin:0;font-size:var(--font-size-14);line-height:1.7;color:var(--muted)}
@media(max-width:650px){.melo-case #system .melo-component-grid{grid-template-columns:1fr;gap:var(--dimension-16)}}

.melo-consistency-image{margin:0;min-width:0}.melo-consistency-image figcaption{font:600 var(--font-size-18)/1.4 var(--display);margin-bottom:var(--dimension-16)}.melo-consistency-image img{display:block;width:100%;height:auto;background:var(--palette-fff);border:var(--dimension-1) solid var(--stroke);border-radius:var(--dimension-5)}

/* Shared Melo spacing scale for sections, features and cards. */
.melo-case{--section-space:48px;--content-space:24px;--card-space:24px}
.melo-case .melo-section{padding:var(--section-space) 0;margin:0}
.melo-case .melo-section-label{margin-bottom:var(--content-space)}
.melo-case .melo-section h2{margin-top:0;margin-bottom:var(--content-space)}
.melo-case .melo-section-main>p{margin-bottom:var(--content-space)}
.melo-case .melo-feature{margin-top:var(--section-space);padding-top:var(--section-space)}
.melo-case .melo-hero{padding-bottom:var(--section-space)}
.melo-case #wireframes .melo-wire-grid,.melo-case #system .melo-ds-grid,.melo-case #system .melo-screen-grid{gap:var(--section-space);margin-top:var(--content-space)}
.melo-case #wireframes .melo-wire-card,.melo-case #system .melo-ds-block,.melo-case .melo-architecture .arch-card,.melo-case .melo-settings-wrap,.melo-case .melo-flow{padding:var(--card-space)}
.melo-case #solution .melo-screen-grid{gap:var(--section-space);margin-top:var(--content-space)}
.melo-case #solution .melo-screen-detail{padding-top:var(--content-space)}
.melo-case .melo-note{margin-top:var(--content-space);padding:var(--card-space)}
@media(max-width:700px){.melo-case{--section-space:32px;--content-space:20px;--card-space:20px}}

/* Shared interior case study banners. */
.study-banner{height:var(--dimension-400);position:relative;overflow:hidden;border-radius:var(--dimension-16);margin:var(--dimension-32) 0 0;padding:var(--dimension-32);background:var(--banner-bg);color:var(--banner-ink);isolation:isolate}
.study-banner-melo{--banner-bg:#d6d2ff;--banner-ink:#25203f}.study-banner-capex{--banner-bg:#e8dece;--banner-ink:#42372a}.study-banner-cooter{--banner-bg:#f7b178;--banner-ink:#442c22}.study-banner-brightspark{--banner-bg:#eee0fa;--banner-ink:#503567}.study-banner-nvw{--banner-bg:#deebc9;--banner-ink:#294632}
.study-banner-label{position:relative;z-index:2;font-size:var(--font-size-11);font-weight:700;letter-spacing:.13em}
.study-banner-copy{position:absolute;left:var(--dimension-32);bottom:var(--dimension-48);max-width:65%;z-index:2}.study-banner-copy strong{display:block;font:700 clamp(var(--font-size-38),5vw,var(--font-size-70))/1.05 var(--display);letter-spacing:-.06em}
.study-banner-link{display:inline-block;margin-top:var(--dimension-24);font-size:var(--font-size-12);font-weight:600;text-decoration:underline;text-underline-offset:var(--dimension-4)}
.study-banner-pill{position:absolute;right:var(--dimension-32);top:var(--dimension-70);padding:var(--dimension-14) var(--dimension-20);border-radius:var(--dimension-100);background:var(--banner-ink);color:var(--banner-bg);font-size:var(--font-size-12);font-weight:700;transform:rotate(8deg);z-index:2;transition:transform var(--duration--3s)}
.study-banner-art{position:absolute;right:-2%;bottom:-15%;width:48%;height:95%;opacity:.18;transform:rotate(-12deg);transition:transform var(--duration--5s),opacity var(--duration--5s)}.study-banner-art svg{width:100%;height:100%}
.study-banner:hover .study-banner-art{transform:rotate(-8deg) translateY(-6px);opacity:.25}.study-banner:hover .study-banner-pill{transform:rotate(4deg) translateY(-3px)}
@media(max-width:650px){.study-banner{height:var(--dimension-340);padding:var(--dimension-24)}.study-banner-copy{left:var(--dimension-24);bottom:var(--dimension-32);max-width:88%}.study-banner-copy strong{font-size:clamp(var(--font-size-34),8vw,var(--font-size-48))}.study-banner-pill{right:var(--dimension-24);top:var(--dimension-64);font-size:var(--font-size-11);padding:var(--dimension-12) var(--dimension-16)}.study-banner-art{width:65%;opacity:.12}.study-banner-label{font-size:var(--font-size-9)}}
@media(prefers-reduced-motion:reduce){.study-banner-art,.study-banner-pill{transition:none}.study-banner:hover .study-banner-art{transform:rotate(-12deg)}.study-banner:hover .study-banner-pill{transform:rotate(8deg)}}

/* Consistent project context cards and breathing room below banners. */
.study-banner + .cs-layout{margin-top:var(--dimension-48)}
.melo-case .melo-hero{padding-bottom:0}
.melo-case .melo-layout{margin-top:var(--dimension-48)}
.cs-content .study-context-card,.melo-case .melo-section.study-context-card{background:var(--soft);padding:var(--dimension-32);border:0;border-radius:var(--dimension-12);margin:0 0 var(--dimension-48)}
.study-context-card h2,.melo-case .study-context-card h2{font:600 clamp(var(--font-size-28),3.7vw,var(--font-size-46))/1.12 var(--display);letter-spacing:-.055em;max-width:none;margin:var(--dimension-16) 0 var(--dimension-24)}
.study-context-card>p,.melo-case .study-context-card .melo-section-main>p{max-width:none;font-size:var(--font-size-16);line-height:1.75;margin:0;color:var(--muted)}
.study-context-card .cs-split{margin-top:var(--dimension-24);gap:var(--dimension-24)}
@media(max-width:650px){.study-banner + .cs-layout,.melo-case .melo-layout{margin-top:var(--dimension-32)}.cs-content .study-context-card,.melo-case .melo-section.study-context-card{padding:var(--dimension-24);margin-bottom:var(--dimension-32)}.study-context-card .cs-split{grid-template-columns:1fr}}

/* Bright Spark: portfolio rhythm with original research artefacts. */
.brightspark-case .cs-summary{margin-bottom:var(--dimension-48)}
.brightspark-case .cs-section{padding:var(--dimension-48) 0}
.brightspark-case .cs-questions{gap:var(--dimension-24);margin-top:var(--dimension-24)}
.brightspark-case .cs-questions article{padding:var(--dimension-24);border-radius:var(--dimension-12);background:var(--paper)}
.brightspark-case .cs-questions h3{margin-top:var(--dimension-16)}
.brightspark-case .cs-section>h3{font:600 var(--font-size-24) var(--display);margin:var(--dimension-32) 0 var(--dimension-16)}
.bs-figure{margin:var(--dimension-24) 0}
.bs-figure img{display:block;width:100%;height:auto;border:var(--dimension-1) solid var(--stroke);border-radius:var(--dimension-12);background:var(--palette-fff)}
.bs-figure figcaption,.bs-sources p,.brightspark-case .bs-evidence{font-size:var(--font-size-12);line-height:1.6;color:var(--muted)}
.bs-figure figcaption{margin-top:var(--dimension-12)}
.bs-sources{margin-top:var(--dimension-24);padding-top:var(--dimension-24);border-top:var(--dimension-1) solid var(--stroke)}
@media(max-width:650px){.brightspark-case .cs-section{padding:var(--dimension-32) 0}.brightspark-case .cs-questions{gap:var(--dimension-20)}.brightspark-case .cs-summary{margin-bottom:var(--dimension-32)}}

.bs-survey-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--dimension-24);margin:var(--dimension-24) 0}
.bs-survey-stats article{padding:var(--dimension-24);border:var(--dimension-1) solid var(--stroke);border-radius:var(--dimension-12);background:var(--paper)}
.bs-survey-stats strong{font:600 clamp(var(--font-size-36),4vw,var(--font-size-48))/1.1 var(--display);letter-spacing:-.05em;color:var(--ink)}
.bs-survey-stats h3{font:600 var(--font-size-18) var(--display);margin:var(--dimension-16) 0 var(--dimension-8)}
.bs-survey-stats p{font-size:var(--font-size-14);line-height:1.6;color:var(--muted);margin:0}
.bs-sources>a{display:inline-block;margin:0 var(--dimension-24) var(--dimension-16) 0}
@media(max-width:550px){.bs-survey-stats{grid-template-columns:1fr;gap:var(--dimension-20)}}

.bs-ui-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--dimension-24);margin-top:var(--dimension-24)}
.bs-ui-card{margin:0;padding:var(--dimension-24);border:var(--dimension-1) solid var(--stroke);border-radius:var(--dimension-12);background:var(--paper);min-width:0}
.bs-ui-image-link{display:flex;justify-content:center;padding:var(--dimension-16);background:var(--soft);border-radius:var(--dimension-8)}
.bs-ui-card img{display:block;width:100%;max-width:var(--dimension-280);height:auto;border-radius:var(--dimension-8);transition:transform var(--duration--2s) ease}
.bs-ui-image-link:hover img{transform:translateY(-3px)}
.bs-ui-card h3{font:600 var(--font-size-20) var(--display);margin:var(--dimension-24) 0 var(--dimension-8)}
.bs-ui-card p{font-size:var(--font-size-14);line-height:1.6;color:var(--muted);margin:0 0 var(--dimension-16)}
@media(max-width:550px){.bs-ui-gallery{grid-template-columns:1fr;gap:var(--dimension-20)}.bs-ui-card{padding:var(--dimension-20)}}
@media(prefers-reduced-motion:reduce){.bs-ui-card img{transition:none}.bs-ui-image-link:hover img{transform:none}}

/* Shared case-study navigation source link. */
.cs-sidebar .melo-outlink{margin-top:var(--dimension-18);font-size:var(--font-size-12);font-weight:500;text-decoration:underline;text-underline-offset:var(--dimension-3)}

/* Bright Spark: nine original screens, three per desktop row. */
.bs-ui-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
.bs-ui-card{padding:var(--dimension-20)}
.bs-ui-card h3{font-size:var(--font-size-18)}
@media(max-width:1000px){.bs-ui-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:550px){.bs-ui-gallery{grid-template-columns:1fr}}

/* Bright Spark usability session photographs. */
.bs-testing-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--dimension-24);margin-top:var(--dimension-24)}
.bs-testing-gallery figure{margin:0;padding:var(--dimension-12);border:var(--dimension-1) solid var(--stroke);border-radius:var(--dimension-12);background:var(--paper);min-width:0}
.bs-testing-gallery a{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;background:var(--soft);border-radius:var(--dimension-8);overflow:hidden}
.bs-testing-gallery img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:550px){.bs-testing-gallery{grid-template-columns:1fr;gap:var(--dimension-20)}}

/* Original Song Tales screens in a two-by-two gallery. */
.bs-playful-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--dimension-24);margin:var(--dimension-24) 0}
.bs-playful-gallery figure{margin:0;padding:var(--dimension-12);border:var(--dimension-1) solid var(--stroke);border-radius:var(--dimension-12);background:var(--paper);min-width:0}
.bs-playful-gallery a{display:block}
.bs-playful-gallery img{display:block;width:100%;height:auto;border-radius:var(--dimension-8)}
@media(max-width:550px){.bs-playful-gallery{grid-template-columns:1fr;gap:var(--dimension-20)}}

/* Testing concepts: three original screens in one desktop row. */
.bs-comparison-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dimension-24);margin:var(--dimension-24) 0}
.bs-comparison-gallery figure{margin:0;padding:var(--dimension-16);border:var(--dimension-1) solid var(--stroke);border-radius:var(--dimension-12);background:var(--paper);min-width:0}
.bs-comparison-gallery a{display:block}
.bs-comparison-gallery img{display:block;width:100%;height:auto;border-radius:var(--dimension-8)}
.bs-comparison-gallery figcaption{font-size:var(--font-size-12);color:var(--muted);margin-top:var(--dimension-12)}
@media(max-width:550px){.bs-comparison-gallery{grid-template-columns:1fr;gap:var(--dimension-20)}}

.brightspark-case .bs-version-note{font-size:var(--font-size-12);line-height:1.6;color:var(--muted);margin:var(--dimension-12) 0 var(--dimension-24)}

/* Bright Spark solution: four original screens */
.bs-solution-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--dimension-16);margin:var(--dimension-24) 0}.bs-solution-gallery .bs-figure{margin:0;min-width:0}.bs-solution-gallery a{display:block}.bs-solution-gallery img{display:block;width:100%;height:auto;object-fit:contain}@media(max-width:700px){.bs-solution-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--dimension-12)}}

#ui-designs .bs-prototype-link{display:inline-block;margin-top:var(--dimension-24)}

/* Shared spacing across all five case studies */
.case-study{--study-section-space:48px;--study-card-space:24px;--study-content-space:24px;--study-banner-gap:32px}
.case-study .cs-hero,.case-study.melo-case .melo-hero{padding-top:var(--dimension-64);padding-bottom:0}
.case-study .cs-back{margin-bottom:var(--dimension-48)}
.case-study .cs-facts,.case-study .melo-metadata{margin:var(--dimension-32) 0 0;padding:var(--dimension-24) 0;gap:var(--dimension-24)}
.case-study .study-banner{margin:var(--study-banner-gap) 0 0;padding:var(--dimension-32)}
.case-study .cs-layout,.case-study.melo-case .melo-layout{margin-top:var(--study-section-space);gap:var(--dimension-48)}
.case-study .cs-content .cs-section,.case-study.melo-case .melo-section{padding:var(--study-section-space) 0;margin:0}
.case-study .cs-content .study-context-card,.case-study.melo-case .melo-section.study-context-card{padding:var(--study-card-space);margin:0 0 var(--study-section-space)}
.case-study .cs-section .cs-kicker,.case-study .melo-section-label{margin-bottom:var(--dimension-16)}
.case-study .cs-section h2,.case-study.melo-case .melo-section h2{margin:0 0 var(--study-content-space)}
.case-study .study-context-card h2,.case-study.melo-case .study-context-card h2{margin:var(--dimension-16) 0 var(--dimension-24)}
.case-study .cs-section>p,.case-study .melo-section-main>p{margin:0 0 var(--study-content-space)}
.case-study .cs-section>h3{margin:var(--dimension-32) 0 var(--dimension-16)}
.case-study .cs-questions,.case-study .cs-split{gap:var(--dimension-24);margin-top:var(--dimension-24)}
.case-study .cs-questions{margin-bottom:var(--dimension-24)}
.case-study .cs-questions article{padding:var(--study-card-space)}
.case-study .cs-questions h3{margin:var(--dimension-16) 0 var(--dimension-8)}
.case-study .cs-questions p{margin:0}
.case-study .bs-figure,.case-study .nvw-figure{margin:var(--dimension-24) 0}
.case-study .bs-solution-gallery .bs-figure{margin:0}
.case-study .cs-callout,.case-study .melo-note{margin-top:var(--dimension-24);padding:var(--study-card-space)}
.case-study .cs-next{margin-top:var(--dimension-48);padding:var(--dimension-48) 0 var(--dimension-64)}
@media(max-width:650px){
.case-study{--study-section-space:32px;--study-card-space:20px;--study-content-space:20px;--study-banner-gap:24px}
.case-study .cs-hero,.case-study.melo-case .melo-hero{padding-top:var(--dimension-32)}
.case-study .cs-back{margin-bottom:var(--dimension-32)}
.case-study .cs-facts,.case-study .melo-metadata{margin-top:var(--dimension-24);padding:var(--dimension-20) 0;gap:var(--dimension-20)}
.case-study .study-banner{padding:var(--dimension-24)}
.case-study .cs-layout,.case-study.melo-case .melo-layout{gap:var(--dimension-24)}
.case-study .cs-questions,.case-study .cs-split{gap:var(--dimension-20);margin-top:var(--dimension-20)}
.case-study .cs-next{margin-top:var(--dimension-32);padding:var(--dimension-32) 0 var(--dimension-48)}
}

/* Consistent styling applies only to small content cards. */
.case-study .cs-questions article,
.case-study.melo-case #system .melo-component-grid .melo-component-card,
.case-study.melo-case #system .melo-token-grid .melo-token-box{
 background:var(--paper);border:var(--dimension-1) solid var(--stroke);border-radius:var(--dimension-12);padding:var(--study-card-space);box-shadow:none
}
.case-study .cs-questions{gap:var(--dimension-24);align-items:stretch}
.case-study .cs-questions h3{font:600 var(--font-size-19) var(--display);letter-spacing:-.025em;margin:var(--dimension-16) 0 var(--dimension-8)}
.case-study .cs-questions p{font-size:var(--font-size-14);line-height:1.6;color:var(--muted);margin:0}
.case-study .cs-questions .num{font:700 var(--font-size-12) var(--display);color:var(--muted)}
@media(max-width:650px){.case-study .cs-questions{gap:var(--dimension-20)}}

/* Shared research findings across case studies. */
.case-study .research-findings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--dimension-24);margin:var(--dimension-24) 0;align-items:stretch}
.case-study .research-findings article{padding:var(--study-card-space);border:var(--dimension-1) solid var(--stroke);border-radius:var(--dimension-12);background:var(--paper)}
.case-study .research-findings strong{display:block;font:600 clamp(var(--font-size-30),4vw,var(--font-size-48))/1.1 var(--display);letter-spacing:-.05em;color:var(--ink);overflow-wrap:anywhere}
.case-study .research-findings h3{font:600 var(--font-size-18) var(--display);margin:var(--dimension-16) 0 var(--dimension-8)}
.case-study .research-findings p{font-size:var(--font-size-14);line-height:1.6;color:var(--muted);margin:0}
@media(max-width:550px){.case-study .research-findings{grid-template-columns:1fr;gap:var(--dimension-20)}}

/* Restore the larger overview card treatment. */
.case-study .cs-content .study-context-card,.case-study.melo-case .melo-section.study-context-card{background:var(--soft);border:0;border-radius:var(--dimension-12);padding:var(--dimension-32)}
@media(max-width:650px){.case-study .cs-content .study-context-card,.case-study.melo-case .melo-section.study-context-card{padding:var(--dimension-24)}}

/* Solution screens are grouped examples within one section. */
.case-study.melo-case #solution .melo-screen-grid{gap:var(--dimension-32);margin-top:var(--dimension-24)}
.case-study.melo-case #solution .melo-screen-detail{background:var(--soft);border:0;border-radius:var(--dimension-12);padding:var(--dimension-32);margin:0}
.case-study.melo-case #solution .melo-screen-detail h3{font:600 clamp(var(--font-size-24),2.6vw,var(--font-size-32))/1.2 var(--display);letter-spacing:-.04em;min-height:0;max-width:none;margin:var(--dimension-12) 0 var(--dimension-16)}
.case-study.melo-case #solution .melo-screen-detail>p{font-size:var(--font-size-16);line-height:1.65;max-width:none;margin:0 0 var(--dimension-24)}
.case-study.melo-case #solution .melo-screen-detail>.melo-figma-link{font-size:var(--font-size-12);margin:var(--dimension-16) 0 0}
@media(max-width:650px){.case-study.melo-case #solution .melo-screen-detail{padding:var(--dimension-20)}.case-study.melo-case #solution .melo-screen-grid{gap:var(--dimension-24)}}

.cooter-ds-panel{background:var(--soft);padding:var(--dimension-32);border-radius:var(--dimension-12);margin:var(--dimension-24) 0}.cooter-ds-panel>h3{font:600 var(--font-size-24) var(--display);margin:var(--dimension-16) 0 var(--dimension-24)}.cooter-swatches{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--dimension-20)}.cooter-swatches span{display:block;height:var(--dimension-64);border-radius:var(--dimension-10);border:var(--dimension-1) solid var(--stroke);margin-bottom:var(--dimension-10)}.cooter-swatches b,.cooter-swatches small{display:block;font-size:var(--font-size-12)}.cooter-swatches small{color:var(--muted);margin-top:var(--dimension-4)}.cooter-ds-panel>p{font-size:var(--font-size-14);color:var(--muted);line-height:1.65;margin-top:var(--dimension-24)}.cooter-ds-links{display:flex;flex-wrap:wrap;gap:var(--dimension-20);margin-top:var(--dimension-24)!important}@media(max-width:650px){.cooter-ds-panel{padding:var(--dimension-20)}.cooter-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Canonical shared portfolio components. Artwork retains its own palette. */ :root {
  --study-section-space:var(--layout-section-gap);
  --study-card-space:var(--layout-card-padding);
  --study-content-space:var(--space-6);
  --study-banner-gap:var(--space-8)
}
/* Grid items must size to their content for sticky navigation to travel. */
.melo-layout { align-items:start; }
.melo-layout > .cs-sidebar { align-self:start; position:sticky; top:var(--space-6); }
@media(max-width:850px) {
  .melo-layout > .cs-sidebar { position:relative; top:auto; }
}
/* Case-study design walkthroughs use the same large panel rhythm. */
.study-design-parts { display:grid; gap:var(--layout-card-gap); margin-top:var(--space-8); }
.study-design-part h3 { font:600 var(--heading-card)/1.3 var(--display); margin:var(--space-3) 0; }
.study-design-part figure { margin:var(--space-6) 0 0; }
.study-design-part .ds-image { width:100%; height:auto; border-radius:var(--radius-image); }
.study-design-prototype { margin-top:var(--space-8); }
.capex-mobile-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--layout-card-gap); margin-top:var(--space-8); align-items:start; }
@media(max-width:650px) { .capex-mobile-grid { grid-template-columns:1fr; } }
/* Journey maps reuse the shared panel, card and theme foundations. */
.journey-map { margin:var(--space-8) 0 0; }
.journey-map-intro h3 { margin:0 0 var(--space-3); font:600 var(--heading-card)/1.3 var(--display); }
/* A vertical sequence keeps all five stages visible at every screen width. */
.journey-map-body { margin-top:var(--space-6); }
.journey-map-stages { display:grid; gap:var(--space-5); list-style:none; padding:0; margin:0; }
.case-study .journey-stage { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:var(--space-6); padding:var(--layout-card-padding); }
.journey-stage:not(:last-child)::after { content:""; position:absolute; top:100%; left:var(--space-10); height:var(--space-5); border-left:var(--border-width) solid var(--stroke); }
.journey-stage-heading { display:flex; align-items:center; gap:var(--space-3); font:600 var(--text-small)/1.4 var(--body); }
.journey-stage-number { display:grid; place-items:center; flex-shrink:0; width:var(--space-8); height:var(--space-8); border-radius:var(--radius-pill); background:var(--accent); color:var(--palette-1b1c1c); }
.journey-stage h4 { font:600 var(--heading-card)/1.3 var(--display); margin:var(--space-4) 0 0; }
.journey-stage dl { margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4) var(--space-6); }
.journey-stage dl div { min-width:0; }
.journey-stage dl div:nth-child(4) { border-left:var(--border-width) solid var(--stroke); padding-left:var(--space-4); }
.journey-stage dl div:last-child { grid-column:1/-1; border-top:var(--border-width) solid var(--stroke); padding-top:var(--space-3); }
.journey-stage dt { font-size:var(--text-caption); font-weight:600; margin-bottom:var(--space-1); color:var(--ink); }
.journey-stage dd { margin:0; font-size:var(--text-small); line-height:var(--line-body); color:var(--muted); }
.journey-map figcaption { margin-top:var(--space-5); font-size:var(--text-caption); line-height:var(--line-body); color:var(--muted); }
@media(max-width:850px) {
  .case-study .journey-stage { grid-template-columns:1fr; }
}
@media(max-width:650px) {
  .journey-stage dl { grid-template-columns:1fr; }
  .journey-stage dl div:nth-child(4) { border-left:0; padding-left:0; }
}
 body {
  font-size:var(--text-body)
}
 .shell,.footer-inner {
  width:min(var(--layout-wide),calc(100% - 2 * var(--layout-gutter)))
}
 .case-study {
  max-width:var(--layout-study);
  --study-section-space:var(--layout-section-gap);
  --study-card-space:var(--layout-card-padding);
  --study-content-space:var(--space-6);
  --study-banner-gap:var(--space-8)
}
 .ds-card {
  background:var(--paper);
  border:var(--border-width) solid var(--stroke);
  border-radius:var(--radius-card);
  padding:var(--study-card-space,var(--layout-card-padding));
  min-width:0;
  box-shadow:none
}
 .case-study .ds-card {
  background:var(--paper);
  border:var(--border-width) solid var(--stroke);
  border-radius:var(--radius-card);
  padding:var(--study-card-space);
  box-shadow:none
}
 .ds-panel,.case-study .ds-panel {
  background:var(--soft);
  border:0;
  border-radius:var(--radius-card);
  padding:var(--layout-panel-padding)
}
 .ds-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--layout-card-gap)
}
 .case-study .cs-section h2,.case-study.melo-case .melo-section h2 {
  font:600 var(--heading-section)/var(--line-heading) var(--display);
  letter-spacing:-.06em
}
 .case-study .ds-card h3 {
  font:600 var(--heading-card)/1.3 var(--display);
  letter-spacing:-.025em;
  margin:var(--space-4) 0 var(--space-2)
}
 .case-study .ds-card p {
  font-size:var(--text-small);
  line-height:var(--line-body);
  color:var(--muted)
}
 .ds-link {
  transition:color var(--motion-standard),text-decoration-color var(--motion-standard);
  text-underline-offset:var(--space-1)
}
 .ds-control {
  min-height:44px;
  cursor:pointer
}
 a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid var(--color-focus);
  outline-offset:var(--space-1)
}
 .skip-link {
  position:fixed;
  left:var(--space-4);
  top:var(--space-4);
  z-index:1000;
  background:var(--ink);
  color:var(--bg);
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-image);
  transform:translateY(-200%)
}
 .skip-link:focus {
  transform:none
}
 .ds-image {
  display:block;
  max-width:100%;
  height:auto
}
 @media(max-width:850px) {
  :root {
    --layout-gutter:24px
  }
.case-study .cs-layout,.case-study.melo-case .melo-layout {
    grid-template-columns:1fr
  }

}
 @media(max-width:650px) {
  :root {
    --layout-gutter:20px;
    --layout-card-gap:20px;
    --layout-card-padding:20px;
    --layout-panel-padding:24px;
    --layout-section-gap:32px
  }
.case-study {
    --study-section-space:var(--layout-section-gap);
    --study-card-space:var(--layout-card-padding);
    --study-content-space:var(--space-5);
    --study-banner-gap:var(--space-6)
  }
.ds-grid {
    grid-template-columns:1fr
  }

}
 @media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
.js-motion .reveal {
    opacity:1;
    transform:none
  }

}

.capex-case #system .melo-ds-grid { grid-template-columns:minmax(0,1fr); gap:var(--layout-card-gap); }

/* Shared design-system storytelling across every project. */
.case-study .study-system-stack { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--layout-card-gap); margin-top:var(--space-8); }
.case-study .study-system-panel { min-width:0; padding:var(--layout-panel-padding); }
.case-study .study-system-panel>h3 { font:600 var(--heading-card)/1.25 var(--display); letter-spacing:-.04em; margin:var(--space-4) 0 var(--space-8); }
.case-study .study-system-swatches { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4); margin:var(--space-6) 0; }
.case-study .study-system-swatch { min-width:0; border:var(--border-width) solid var(--stroke); background:var(--paper); }
.case-study .study-system-swatch i { display:block; height:var(--dimension-110); }
.case-study .study-system-swatch span { display:block; padding:var(--space-3); color:var(--muted); font-size:var(--text-small); line-height:var(--line-body); overflow-wrap:anywhere; }
.case-study .study-system-type-row { display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,2fr); gap:var(--space-8); padding:var(--space-6) 0; border-bottom:var(--border-width) solid var(--stroke); font-size:var(--text-body); line-height:var(--line-body); }
.case-study .study-system-type-row span { color:var(--muted); }
.case-study .study-system-components { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--layout-card-gap); }
.case-study .study-system-components h4 { font:600 var(--heading-card)/1.3 var(--display); margin:0 0 var(--space-4); }
.case-study .study-system-components p { margin:var(--space-3) 0 0; }
.case-study .study-system-panel>p { margin-top:var(--space-6); }
@media(max-width:650px) {
 .case-study .study-system-swatches { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .case-study .study-system-type-row { grid-template-columns:1fr; gap:var(--space-2); }
 .case-study .study-system-components { grid-template-columns:1fr; }
}