@import url('/design-system-composition.css');
@import url('/design-system-documentation.css');
@import url('/design-system-results.css');
@import url('/design-system-cover.css');
/* Image spaces and small editorial additions; layout comes from Morfy's case.css. */
@font-face{font-family:CargoInter;src:url('/assets/design-system-foundations/inter-variable.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
.design-system-page .ds-foundations{--ds-accent:#6264ef;--ds-color-action-primary:var(--ds-accent);--ds-button-primary-background:var(--ds-color-action-primary);--ds-ink:#2d2d32;--ds-muted:#707075;--ds-line:#e6e6eb;min-width:0;max-width:1038px;margin-inline:auto;padding:32px;background:#f9f9f9;color:var(--ds-ink);font-family:CargoInter,Arial,sans-serif}
.ds-foundations *{box-sizing:border-box}
.ds-foundations-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}
/* Matches the audit title: 24 SVG units rendered at 1036 / 1120. */
.case-page .ds-foundations-heading h3{margin:0;font-family:Arial,sans-serif;font-size:22.2px;line-height:1.3;font-weight:400;letter-spacing:0;color:#292929}
.ds-foundations-grid{display:grid;grid-template-columns:1.12fr 1fr;gap:16px}
.ds-foundations-panel{min-width:0;padding:24px;border:1px solid var(--ds-line);border-radius:12px;background:white}
.ds-foundations h4{display:flex;align-items:center;gap:8px;margin:0 0 20px;font-size:14px;line-height:20px;font-weight:600;letter-spacing:0}
.ds-foundations h4>small{margin-left:auto;color:var(--ds-muted);font-size:10px;font-weight:500}
.ds-foundations-primary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border-radius:8px;background:var(--ds-accent);color:white}
.ds-foundations-primary small{display:block;font-size:10px;color:#e0e7ff}
.ds-foundations-primary strong{display:block;margin:4px 0 8px;font-size:24px;line-height:32px;font-weight:600}
.ds-foundations code{font-family:CargoInter,Arial,sans-serif;font-size:10px;font-weight:500}
.ds-foundations-primary-mark{display:flex;align-items:center;gap:5px}
.ds-foundations-primary-mark i{display:block;width:12px;height:36px;border-radius:4px;background:#e0e7ff}
.ds-foundations-primary-mark i:nth-child(2){height:52px;background:#a6b4fb}
.ds-foundations-primary-mark i:nth-child(3){height:68px;background:#828cf7}
.ds-foundations-ramp{display:flex;gap:6px;list-style:none;padding:0;margin:16px 0 0}
.ds-foundations-ramp li{min-width:0;flex:1;text-align:center;font-size:10px;font-weight:500}
.ds-foundations-swatch{display:block;height:32px;margin-bottom:7px;border-radius:4px;background:var(--swatch);border:1px solid #2d2d3208}
.ds-foundations-ramp small{display:block;margin-top:3px;font-size:8px;line-height:12px;color:var(--ds-muted)}
.ds-foundations-subheading{margin-top:20px;font-size:11px;font-weight:600}
.ds-foundations-subheading+.ds-foundations-ramp{margin-top:10px}
.ds-foundations-states{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.ds-foundations-states li{display:flex;align-items:center;gap:5px;padding:6px 8px;border-radius:4px;background:var(--state-bg);color:var(--ds-ink);font-size:9px;font-weight:500}
.ds-foundations-states li>span{width:6px;height:6px;border-radius:50%;background:var(--state)}
.ds-foundations-type{display:flex;flex-direction:column}
.ds-foundations-font{display:flex;gap:20px;align-items:center;padding-bottom:20px;flex-shrink:0}
.ds-foundations-font>strong{font-size:64px;line-height:64px;font-weight:700;letter-spacing:0}
.ds-foundations-font b{display:block;font-size:22px;line-height:28px;font-weight:700}
.ds-foundations-font div>span{display:block;margin-top:6px;color:var(--ds-muted);font-size:10px;line-height:16px}
.ds-foundations-type-samples{display:flex;flex-direction:column;flex:1}
.ds-foundations-type-samples>div{display:flex;flex:1;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--ds-line)}
.ds-foundations-type-samples>div:last-child{flex:0;padding-bottom:0}
.ds-foundations-type-samples>div>span{min-width:0;letter-spacing:0}
.ds-foundations-type-samples small{flex-shrink:0;font-size:8px;line-height:12px;text-align:right;color:var(--ds-muted)}
.ds-foundations-display{font-size:40px;line-height:40px;font-weight:600}
.ds-foundations-title{font-size:24px;line-height:32px;font-weight:700}
.ds-foundations-body{font-size:16px;line-height:24px;font-weight:500}
.ds-foundations-caption{font-size:12px;line-height:18px;font-weight:500}
.ds-foundations-spacing{display:flex;flex-direction:column}
.ds-foundations-space-scale{display:flex;flex:1;align-items:center;justify-content:space-between;gap:6px;list-style:none;padding:0;margin:0}
.ds-foundations-space-scale li{min-width:0;display:flex;flex:1;flex-direction:column;align-items:center}
.ds-foundations-space-sample{display:flex;align-items:center;justify-content:center;height:48px;margin-bottom:12px}
.ds-foundations-space-sample i{display:block;height:40px;width:var(--space);border-radius:2px;background:var(--ds-accent)}
.ds-foundations-space-scale b{font-size:12px;font-weight:600;line-height:20px}
.ds-foundations-space-scale small{margin-top:2px;font-size:8px;line-height:12px;color:var(--ds-muted)}
.ds-foundations-radius{display:flex;justify-content:space-between;gap:8px}
.ds-foundations-radius>span{display:flex;flex-direction:column;align-items:center;gap:8px;flex:0 0 36px}
.ds-foundations-radius i{display:block;width:36px;height:36px;border:1px solid #a6b4fb;background:#eef2ff}
.ds-foundations-radius small{font-size:9px;color:var(--ds-muted)}
.ds-foundations-elevation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.ds-foundations-elevation-item{display:flex;align-items:center;gap:12px;min-width:0}
.ds-foundations-elevation-item>div{min-width:0}
.ds-foundations-shadow-card{display:block;flex-shrink:0;width:48px;height:36px;border-radius:8px;background:white;box-shadow:0 1px 3px #0000001a,0 1px 2px #0000000f}
.ds-foundations-shadow-menu{box-shadow:0 2px 7px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.14)}
.ds-foundations-elevation b{display:block;font-size:11px;font-weight:600}
.ds-foundations-elevation small{display:block;margin-top:4px;font-size:9px;line-height:14px;color:var(--ds-muted)}
.ds-foundations-tokens{margin-top:16px;padding:24px;border:1px solid #c8d2fd;border-radius:12px;background:#eef2ff}
.ds-foundations-token-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}
.ds-foundations-token-heading h4{margin:0}
.ds-foundations-token-scroll{min-width:0;max-width:100%;margin-top:24px;overflow-x:auto;padding:2px;scrollbar-width:thin;scrollbar-color:#a6b4fb transparent}
.ds-foundations-token-scroll:focus-visible{outline:2px solid var(--ds-accent);outline-offset:4px;border-radius:4px}
.ds-foundations-token-flow{display:grid;grid-template-columns:minmax(0,1.15fr) 20px minmax(0,1.4fr) 20px minmax(0,1.6fr) 20px minmax(0,.8fr);align-items:start;gap:12px;min-width:860px}
.ds-foundations-token-step{display:flex;flex-direction:column;align-items:stretch;gap:12px;min-width:0;text-align:center}
.ds-foundations-token-flow code{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 12px;border:1px solid var(--ds-line);border-radius:6px;background:#fafafd;color:var(--ds-ink);font-size:13px;font-weight:600;line-height:20px;white-space:nowrap}
.ds-foundations-token-flow code i{display:block;flex-shrink:0;width:16px;height:16px;background:var(--ds-accent);border-radius:4px}
.ds-foundations-token-step>span:not(.ds-foundations-button){color:#5f5f64;font-size:11px;line-height:16px}
.ds-foundations-flow-arrow{display:flex;align-items:center;justify-content:center;height:44px;font-size:24px;line-height:1;color:var(--ds-ink)}
.ds-foundations-button{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:6px;padding:10px 16px;background:var(--ds-button-primary-background);color:white;font-size:13px;font-weight:600;line-height:20px}
@media(max-width:1050px){.ds-foundations-elevation-item{flex-direction:column;align-items:flex-start}}
@media(max-width:1050px) and (min-width:701px){
  .design-system-page .ds-foundations{padding:24px}
  .ds-foundations-panel{padding:20px}
  .ds-foundations-type-samples>div{flex-wrap:wrap;gap:6px}
  .ds-foundations-type-samples small{text-align:left}
}
@media(max-width:700px){
  .design-system-page .ds-foundations{padding:20px}
  .ds-foundations-grid{grid-template-columns:1fr}
  .ds-foundations-heading{align-items:flex-start;gap:12px}
  .case-page .ds-foundations-heading h3{font-size:20px;line-height:28px}
  .ds-foundations-panel{padding:20px}
  .ds-foundations-token-heading{align-items:flex-start;flex-direction:column;gap:6px}
}
@media(max-width:430px){
  .design-system-page .ds-foundations{padding:16px}
  .ds-foundations-panel,.ds-foundations-tokens{padding:16px}
  .ds-foundations-type-samples>div{flex-wrap:wrap;gap:6px}
  .ds-foundations-type-samples small{text-align:left}
  .ds-foundations-ramp{gap:4px}
  .ds-foundations-ramp small{font-size:7px}
  .ds-foundations-space-scale{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 8px}
}
.portfolio-site .ds-case-placeholder{display:grid;place-items:center;min-width:0;width:100%;aspect-ratio:16/9;margin:0;background:#fafaf9;border:var(--pf-line-width) solid var(--pf-line);padding:40px;text-align:center}
.portfolio-site .ds-case-placeholder figcaption{max-width:520px}
.portfolio-site .ds-placeholder-label{display:block;margin-bottom:16px;color:#8a827c;font-size:11px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase}
.portfolio-site .ds-case-placeholder p{margin:0;color:#655f5b;font-size:18px;line-height:1.5;text-wrap:balance}
.design-system-page .ds-case-hero-visual{--pf-hero-fill:radial-gradient(ellipse 48% 115% at 50% 42%,#fff 0%,#fff 40%,#fafdff 58%,#f1f5ff 78%,#e4ecff 100%)}
.design-system-page .ds-case-hero-image{padding:0 40px;border:0;background:transparent}
.design-system-page .ds-case-hero-image .ds-modular-cover{border:0}
.design-system-page .ds-case-hero-image .ds-modular-cover:before,.design-system-page .ds-case-hero-image .ds-modular-cover:after{content:none}
.design-system-page .ds-case-hero-image .ds-modular-cover>img{position:relative;left:50%;width:clamp(320px,68vw,640px);max-width:none;aspect-ratio:1;transform:translateX(-50%)}
.design-system-page .ds-case-hero-image .ds-case-placeholder{aspect-ratio:2.6/1;background:#ffffffb3}
.design-system-page .case-hero .case-lead{max-width:616px}
.design-system-page .case-lead+.case-lead{margin-top:16px}
.design-system-page :is(.case-lead,.case-context,.ds-result-deliverable-copy) strong{font-weight:500;color:var(--pf-ink)}
.design-system-page .pf-showcase-results dt{max-width:260px;min-height:2.8em}
.design-system-page.case-page .case-hero .pf-showcase-results{border-color:#dce4ff;background:#f6f8ff}
.design-system-page.case-page .case-hero .pf-showcase-results dd{color:#6264ef}
.design-system-page.case-page .case-hero .pf-showcase-results>div+div:before{background:#dce4ff}
.design-system-page .case-visuals .ds-case-placeholder{max-width:1038px;margin-inline:auto}
.design-system-page .ds-case-audit{max-width:1038px;margin-inline:auto;background:#f9f9f9}
.design-system-page .ds-case-audit img{display:block;width:100%;height:auto;border:0}
/* Logistics icon set: independent loop, hover and click layers. */
.design-system-page .ds-feedback-frame{display:grid;place-items:center;height:100%;min-height:250px;padding:28px 20px;background:#f9f9f9}
.ds-feedback-items{display:grid;grid-template-columns:repeat(3,minmax(0,86px));width:306px;max-width:100%;gap:24px;margin:0;padding:0;list-style:none}
.ds-feedback-item{display:block;width:86px;height:86px}
.design-system-page .ds-case-challenge .case-section-body{display:flex;flex-direction:column;justify-content:center}
.design-system-page .ds-feedback-frame img{position:static;display:block;width:auto;height:auto;max-width:none;border:0;object-fit:contain}
.design-system-page .ds-feedback-control{padding:0;appearance:none;cursor:pointer;transition:transform .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease}
.ds-feedback-burst,.ds-feedback-float{display:grid;place-items:center;transform-origin:center}
.ds-feedback-float{--feedback-y:-4px;--feedback-x:0px;--feedback-tilt:0deg;--feedback-scale:1;animation:ds-feedback-drift 7s ease-in-out infinite;animation-delay:calc(var(--feedback-order) * .7s);animation-play-state:paused}
.ds-feedback-frame.is-animating .ds-feedback-float{animation-play-state:running}
.ds-feedback-item:nth-child(2) .ds-feedback-float{--feedback-tilt:4deg;--feedback-y:-2px}
.ds-feedback-item:nth-child(3) .ds-feedback-float{--feedback-tilt:-3deg;--feedback-x:2px;--feedback-y:-2px}
.ds-feedback-item:nth-child(4) .ds-feedback-float{--feedback-x:5px;--feedback-y:0px}
.ds-feedback-item:nth-child(5) .ds-feedback-float{--feedback-scale:1.08;--feedback-y:0px}
.ds-feedback-item:nth-child(6) .ds-feedback-float{--feedback-y:-6px}
@keyframes ds-feedback-drift{0%,12%,42%,100%{transform:translate(0,0) rotate(0) scale(1)}25%{transform:translate(var(--feedback-x),var(--feedback-y)) rotate(var(--feedback-tilt)) scale(var(--feedback-scale))}}
@media(hover:hover) and (pointer:fine){.design-system-page .ds-feedback-control:hover{transform:translateY(-3px);background:#f4f3ff;border-color:#b9b7fb;box-shadow:0 6px 12px #6264ef12}}
.design-system-page .ds-feedback-control:focus-visible{outline:2px solid #6264ef;outline-offset:4px;background:#f4f3ff}
.design-system-page .ds-feedback-control:active{background:#eeedff;border-color:#9996f7}
@media(prefers-reduced-motion:reduce){.ds-feedback-float{animation:none}.design-system-page .ds-feedback-control{transition:none}.design-system-page .ds-feedback-control:hover{transform:none}}
@media(min-width:851px){
  .design-system-page .ds-case-challenge{align-items:stretch;row-gap:24px}
  .design-system-page .ds-case-challenge .case-section-copy{display:contents}
  .design-system-page .ds-case-challenge .case-section-header{grid-column:1;grid-row:1}
  .design-system-page .ds-case-challenge .case-section-body{grid-column:1;grid-row:2}
  .design-system-page .ds-case-challenge .case-visuals{grid-column:2;grid-row:2}
}
@media(max-width:400px){
  .ds-feedback-items{grid-template-columns:repeat(3,minmax(0,72px));width:248px;gap:16px}
  .ds-feedback-item{width:100%;height:auto;aspect-ratio:1}
  .case-page .ds-feedback-item .morfy-food-card{width:100%;height:100%}
  .design-system-page .ds-feedback-frame{padding:24px 12px}
}
.portfolio-home #work-design-system .pf-showcase-stage{position:relative;z-index:1;isolation:isolate;border-top:0;padding-top:0}
.portfolio-home #work-design-system .pf-section-intro{padding-bottom:40px}
.portfolio-home #work-design-system .ds-project-showcase>.ds-modular-cover{border:0}
.portfolio-home #work-design-system .ds-project-showcase>.ds-modular-cover:before,.portfolio-home #work-design-system .ds-project-showcase>.ds-modular-cover:after{content:none}
.portfolio-home #work-design-system .ds-project-showcase:before,.portfolio-home #work-design-system .ds-project-showcase:after{z-index:3;pointer-events:none}
.portfolio-home #work-design-system .pf-showcase-results{margin:0}
.portfolio-home #work-design-system .pf-showcase-results dd{border-color:#6264ef29;background:#f0f2ff;color:#5052c8}
.portfolio-home #work-design-system .pf-result-value-mobile{display:none}
@media(max-width:700px){
  .portfolio-home #work-design-system .pf-result-value-full{display:none}
  .portfolio-home #work-design-system .pf-result-value-mobile{display:inline}
  .design-system-page .pf-showcase-results{grid-template-columns:1fr}
  .design-system-page .pf-showcase-results>div{padding:24px}
  .design-system-page .pf-showcase-results>div+div:before{inset:0 24px auto;width:auto;height:var(--pf-line-width)}
  .design-system-page .pf-showcase-results dd{font-size:28px}
  .design-system-page .pf-showcase-results dt{min-height:0;max-width:260px}
  .portfolio-site .ds-case-placeholder{padding:24px;aspect-ratio:4/3}
  .portfolio-site .ds-case-placeholder p{font-size:15px}
  .design-system-page .ds-case-hero-image{padding:0 16px}
  .design-system-page .ds-case-hero-image .ds-modular-cover>img{width:clamp(320px,calc(68vw + 84px),560px)}
  .design-system-page .ds-case-hero-image .ds-case-placeholder{aspect-ratio:4/3}
  .portfolio-home #work-design-system .pf-section-intro{padding-bottom:24px}
}