/* Case studies use the same fields, type and spacing as the original work section. */
.case-page {
  --case-field:#dfe5ee;
  --case-ink:#101723;
  --case-secondary:#46505c;
  --case-accent:#5841be;
  --case-deep:#1b2433;
  --case-light:#fafafa;
}

.case-page[data-case-category="AI"],
.case-page[data-case-category="Delivery"] {
  --case-field:#1b2433;
  --case-ink:#fafafa;
  --case-secondary:#b6c2d3;
  --case-accent:#b1cbf2;
  --case-deep:#c9d8ee;
  --case-light:#1b2433;
}

.case-page[data-case-category="Developer tools"],
.case-page[data-case-category="In the lab"] {
  --case-field:#1b2433;
  --case-ink:#fafafa;
  --case-secondary:#b6c2d3;
  --case-accent:#b1cbf2;
  --case-deep:#c9d8ee;
  --case-light:#1b2433;
}

.case-page[data-case-category="Mobile"],
.case-page[data-project-slug="neurohelper"] {
  --case-field:#e3e9f0;
  --case-ink:#1d2633;
  --case-secondary:#56616f;
}

.case-page[data-case-category="Web"],
.case-page[data-project-slug="homelabarr-mobile"] {
  --case-field:#dde9e7;
  --case-ink:#173b34;
  --case-secondary:#41665e;
}

.case-page main {padding-top:88px}
.case-page .shell {padding-inline:var(--pad)}
.case-page .case-hero {padding-top:38px; padding-bottom:55px; background:var(--case-field); color:var(--case-ink); --violet:var(--case-accent)}
.case-page .breadcrumb {display:flex; flex-wrap:wrap; gap:13px; font-size:15px; color:var(--case-secondary); margin-bottom:62px}
.case-page .breadcrumb a {text-decoration:underline; text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.case-page .breadcrumb a:hover {text-decoration-color:currentColor}
.case-page .case-heading {display:grid; grid-template-columns:1.5fr 1fr; gap:65px; align-items:end}
.case-page .project-name {font-size:16px; font-weight:560; margin-bottom:25px; letter-spacing:-.02em}
.case-page .case-hero h1 {font-size:clamp(43px,5.5vw,80px); line-height:1.03; letter-spacing:-.055em; font-stretch:95%; max-width:18ch}
.case-page .case-lead {padding-bottom:3px}
.case-page .case-lead>p {font-size:18px; letter-spacing:-.015em; line-height:1.6; max-width:39ch}
.case-page .case-lead .text-link {margin-top:25px; border-color:color-mix(in srgb,var(--case-ink) 45%,transparent)}
.case-page .case-lead .status {color:var(--case-secondary); margin-bottom:16px}
.case-page .case-facts {display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); margin-top:55px; border-left:1px solid color-mix(in srgb,var(--case-ink) 25%,transparent)}
.case-page .case-facts li {padding:24px 25px; border-block:1px solid color-mix(in srgb,var(--case-ink) 25%,transparent); border-right:1px solid color-mix(in srgb,var(--case-ink) 25%,transparent); min-width:0}
.case-page .case-facts li:first-child {background:var(--case-deep); color:var(--case-light)}
.case-page .case-facts strong {display:block; font-size:clamp(25px,3.7vw,54px); font-weight:560; letter-spacing:-.055em; line-height:1.05; overflow-wrap:anywhere; margin-bottom:15px}
.case-page .case-facts strong.fact-long {font-size:clamp(21px,2.2vw,32px); line-height:1.15; overflow-wrap:break-word}
.case-page .case-facts span {display:block; font-size:16px; font-weight:560; margin-bottom:10px}
.case-page .case-facts p {font-size:15px; color:var(--case-secondary); line-height:1.65; max-width:35ch}
.case-page .case-facts li:first-child p {color:inherit; opacity:.85}
.case-page .case-layout {display:grid; grid-template-columns:210px minmax(0,1fr); gap:70px; padding-top:65px; padding-bottom:80px}
.case-page .case-navigation {position:sticky; top:40px; align-self:start; display:grid; gap:3px; padding-top:7px; font-size:15px}
.case-page .case-navigation>p {margin-bottom:16px; font-weight:560}
.case-page .case-navigation a {color:var(--muted); width:fit-content; min-height:36px; display:flex; align-items:center; text-decoration:underline; text-decoration-color:transparent; transition:color .2s,text-decoration-color .2s}
.case-page .case-navigation a:hover,
.case-page .case-navigation a:focus-visible {color:var(--fg); text-decoration-color:var(--accent)}
.case-page .case-story {min-width:0}
.case-page .system-diagram {padding:28px; background:var(--case-field); color:var(--case-ink); margin:0 0 55px; --violet:var(--case-accent)}
.case-page .system-diagram figcaption {font-size:15px; font-weight:560; margin-bottom:29px}
.case-page .system-flow {display:flex; align-items:stretch; gap:30px; counter-reset:flow}
.case-page .system-flow li {flex:1; position:relative; min-width:0; counter-increment:flow}
.case-page .system-flow li:not(:last-child)::after {content:'→'; position:absolute; right:-21px; top:50%; font-size:20px; transform:translateY(-50%); color:var(--case-secondary)}
.case-page .flow-node {display:flex; flex-direction:column; gap:12px; padding:20px 15px; border:1px solid color-mix(in srgb,var(--case-ink) 30%,transparent); height:100%; background:color-mix(in srgb,var(--case-field) 86%,var(--case-ink) 14%)}
.case-page .flow-node::before {content:counter(flow,decimal-leading-zero); font-size:15px; letter-spacing:.06em; color:inherit; margin-bottom:12px}
.case-page .flow-node b {font-size:16px; font-weight:560; line-height:1.2; letter-spacing:-.025em; overflow-wrap:anywhere}
.case-page .flow-node>span {font-size:15px; color:inherit; line-height:1.65; overflow-wrap:anywhere}
.case-page .system-flow li:last-child .flow-node {background:var(--case-deep); color:var(--case-light); border-color:var(--case-deep)}
.case-page .system-flow li:last-child .flow-node::before,
.case-page .system-flow li:last-child .flow-node>span {color:inherit}
.case-page .case-section {display:grid; grid-template-columns:1fr; gap:23px; padding-block:38px; border-top:1px solid var(--line); scroll-margin-top:35px}
.case-page .case-section h2 {font-size:30px; letter-spacing:-.04em}
.case-page .case-prose {font-size:17px; line-height:1.8; max-width:70ch}
.case-page .case-prose p+p {margin-top:22px}
.case-page .screenshot-frame {display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:260px; aspect-ratio:2.4; margin:35px 0; border:1px dashed var(--line); background:var(--panel); padding:30px; text-align:center}
.case-page .screenshot-frame svg {width:39px; height:33px; fill:none; stroke:var(--muted); stroke-width:1}
.case-page .screenshot-frame figcaption {display:grid; gap:8px; margin-top:20px}
.case-page .screenshot-frame strong {font-size:16px; font-weight:560}
.case-page .screenshot-frame figcaption>span {font-size:15px; color:var(--muted)}
.case-page .real-output {border:1px solid #48484d; margin-bottom:45px; background:#101012; color:#fafafa; border-radius:5px}
.case-page .real-output>p {font-size:15px; padding:17px 24px; border-bottom:1px solid #353538; color:#b1cbf2}
.case-page .real-output pre {margin:0; padding:24px; font-size:15px; line-height:1.8; white-space:pre-wrap; overflow-wrap:anywhere}
.case-page .case-next {display:grid; grid-template-columns:1.4fr 1fr; gap:75px; padding-block:65px; background:var(--case-field); color:var(--case-ink); --violet:var(--case-accent)}
.case-page .case-next h2 {font-size:clamp(38px,4.5vw,64px); margin-block:22px 30px}
.case-page .case-next>div>p {font-size:16px; color:var(--case-secondary)}
.case-page .case-next .button {background:var(--case-ink); color:var(--case-field); border-color:var(--case-ink)}
.case-page .case-next .button:hover {background:transparent; color:var(--case-ink)}
.case-page .related {padding-top:4px}
.case-page .related h3 {font-size:16px; margin-bottom:25px}
.case-page .related a {display:flex; justify-content:space-between; gap:25px; padding-block:20px; border-top:1px solid color-mix(in srgb,var(--case-ink) 25%,transparent); font-size:14px}
.case-page .related a>span:last-child {transition:transform .25s}
.case-page .related a:hover>span:last-child {transform:translate(3px,-3px)}

@supports(animation-timeline:view()) {
  @media(prefers-reduced-motion:no-preference) {
    .case-page .flow-node {animation:case-flow-arrive linear both; animation-timeline:view(); animation-range:entry 0% entry 95%}
    .case-page .case-facts strong {animation:case-fact-arrive linear both; animation-timeline:view(); animation-range:entry 0% entry 100%}
  }
}
@keyframes case-flow-arrive {from{transform:translateY(16px)}to{transform:translateY(0)}}
@keyframes case-fact-arrive {from{transform:translateY(10px)}to{transform:translateY(0)}}

@media(min-width:1700px) {
  .case-page .shell {padding-inline:max(var(--pad),calc((100vw - 1600px)/2))}
}
@media(max-width:1100px) {
  .case-page .case-layout {grid-template-columns:160px minmax(0,1fr); gap:45px}
  .case-page .case-heading {gap:40px; grid-template-columns:1.2fr 1fr}
  .case-page .system-flow {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px}
  .case-page .system-flow li::after {display:none}
}
@media(max-width:800px) {
  .case-page main {padding-top:78px}
  .case-page .case-hero {padding-top:30px}
  .case-page .breadcrumb {margin-bottom:42px}
  .case-page .case-heading {grid-template-columns:1fr; gap:30px}
  .case-page .case-hero h1 {font-size:clamp(45px,7vw,65px); max-width:23ch}
  .case-page .case-lead {max-width:600px}
  .case-page .case-lead>p {font-size:17px; max-width:60ch}
  .case-page .case-facts {margin-top:35px; grid-template-columns:repeat(2,minmax(0,1fr))}
  .case-page .case-layout {grid-template-columns:1fr; gap:30px; padding-top:35px}
  .case-page .case-navigation {position:static; display:flex; flex-wrap:wrap; column-gap:22px; row-gap:3px; padding-bottom:20px; border-bottom:1px solid var(--line)}
  .case-page .case-navigation p {flex-basis:100%; margin-bottom:6px}
  .case-page .case-next {gap:40px}
}
@media(max-width:560px) {
  .case-page .case-hero {padding-top:27px; padding-bottom:35px}
  .case-page .breadcrumb {font-size:15px; gap:10px; margin-bottom:35px}
  .case-page .project-name {font-size:14px; margin-bottom:20px}
  .case-page .case-hero h1 {font-size:clamp(38px,10.8vw,55px); line-height:1.06; max-width:21ch}
  .case-page .case-heading {gap:25px}
  .case-page .case-lead>p {font-size:16px; line-height:1.65}
  .case-page .case-lead .status {font-size:15px; margin-bottom:15px}
  .case-page .case-lead .text-link {margin-top:20px; font-size:15px}
  .case-page .case-facts {margin-top:30px}
  .case-page .case-facts li {padding:20px 16px}
  .case-page .case-facts strong {font-size:29px; margin-bottom:13px}
  .case-page .case-facts strong.fact-long {font-size:21px; line-height:1.15}
  .case-page .case-facts span {font-size:15px}
  .case-page .case-facts p {font-size:15px; line-height:1.6}
  .case-page .case-layout {gap:25px; padding-bottom:45px}
  .case-page .case-navigation {font-size:15px; column-gap:18px}
  .case-page .case-navigation p {font-size:15px; margin-bottom:7px}
  .case-page .system-diagram {padding:23px 20px; margin-bottom:32px}
  .case-page .system-diagram figcaption {font-size:15px; margin-bottom:23px}
  .case-page .system-flow {grid-template-columns:1fr; gap:28px}
  .case-page .system-flow li:not(:last-child)::after {content:'↓'; display:block; top:auto; bottom:-28px; right:50%; transform:translateX(50%); font-size:20px}
  .case-page .flow-node {padding:20px}
  .case-page .flow-node::before {margin-bottom:4px}
  .case-page .case-section {padding-block:29px; gap:20px}
  .case-page .case-section h2 {font-size:27px}
  .case-page .case-prose {font-size:16px; line-height:1.8}
  .case-page .case-prose p+p {margin-top:20px}
  .case-page .screenshot-frame {min-height:225px; aspect-ratio:auto; padding:25px; margin-block:28px}
  .case-page .screenshot-frame figcaption>span {font-size:15px}
  .case-page .real-output>p {padding:16px 20px; font-size:15px}
  .case-page .real-output pre {padding:20px 16px; font-size:15px}
  .case-page .case-next {grid-template-columns:1fr; gap:45px; padding-block:45px}
  .case-page .case-next h2 {font-size:43px; margin-block:20px 27px}
}
.service-page .case-section h2{margin-bottom:28px}
.svc-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.svc-cards article{padding:28px 26px 30px;background:var(--bg)}
.svc-cards h3{font-size:clamp(20px,1.7vw,24px);font-weight:600;letter-spacing:-.025em;line-height:1.2;margin:0 0 12px}
.svc-cards p{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}
.svc-compact article{padding:22px 24px 24px}
.svc-compact h3{font-size:18px;margin-bottom:8px}
.svc-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;counter-reset:step}
.svc-steps li{counter-increment:step;padding-top:20px;border-top:2px solid var(--fg)}
.svc-steps li::before{content:counter(step,decimal-leading-zero);display:block;font-size:15px;font-weight:600;color:var(--muted);margin-bottom:14px}
.svc-steps h3{font-size:22px;font-weight:600;letter-spacing:-.025em;margin:0 0 10px}
.svc-steps p{margin:0;font-size:15px;line-height:1.6;color:var(--muted)}
.svc-proof{display:grid;gap:12px}
.svc-proof a{display:grid;grid-template-columns:minmax(180px,.8fr) 2fr;gap:8px 32px;align-items:baseline;padding:22px 24px;border:1px solid var(--line);text-decoration:none;color:inherit;transition:background .15s,border-color .15s}
.svc-proof a:hover{background:var(--panel);border-color:var(--fg)}
.svc-proof h3{font-size:20px;font-weight:600;letter-spacing:-.02em;margin:0}
.svc-proof p{margin:0;font-size:16px;line-height:1.55;color:var(--muted)}
.svc-faq{display:grid;gap:0;border-top:1px solid var(--line)}
.svc-faq article{display:grid;grid-template-columns:minmax(200px,.9fr) 2fr;gap:10px 32px;padding:24px 0;border-bottom:1px solid var(--line)}
.svc-faq h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.3}
.svc-faq p{margin:0;font-size:16px;line-height:1.6;color:var(--muted)}
@media(max-width:1100px){.svc-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.svc-cards,.svc-steps{grid-template-columns:1fr}.svc-proof a,.svc-faq article{grid-template-columns:1fr}}
.svc-cards article:last-child:nth-child(odd){grid-column:1/-1}