/* The Room process diagrams. Text stays selectable and reflows on mobile. */
.flow-diagram{margin:0;min-width:0;background:var(--cream);color:var(--navy-900);padding:28px 26px 24px;position:relative;isolation:isolate}
.graph-kicker{display:flex;justify-content:space-between;gap:16px;font-size:11px;font-weight:500;letter-spacing:.1em;margin-bottom:26px;text-transform:uppercase}
.graph-kicker b{letter-spacing:0;font-weight:500}
.graph-body{width:100%;max-width:620px;margin-inline:auto}
.graph-tier{display:flex;justify-content:center;gap:18px;position:relative}
.graph-node{min-width:0;flex:1;background:var(--cream);border:1.5px solid var(--navy-900);border-radius:14px;padding:14px 15px;box-shadow:3px 4px 0 var(--navy-900);position:relative;text-align:center;font-size:17px;line-height:1.25;font-weight:500;overflow-wrap:anywhere}
.graph-tier.single .graph-node{flex:0 1 80%}
.graph-node small{display:block;margin-top:6px;font-size:13px;line-height:1.4;font-weight:400}
.graph-node.blue{background:var(--blue);color:var(--cream)}
.graph-node.yellow{background:var(--yellow)}
.graph-node.lavender{background:var(--blue-100)}
.graph-node.manual{border-style:dashed;box-shadow:none;background:var(--cream)}
.graph-edge{height:28px;position:relative;width:100%;color:var(--navy)}
.graph-edge svg{height:100%;width:100%;max-width:none;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.7}
.graph-edge svg path{vector-effect:non-scaling-stroke}
.graph-edge::after{content:"";position:absolute;bottom:0;left:calc(50% - 4px);width:8px;height:8px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg)}
.graph-edge.split::after{display:none}
.graph-edge.split::before{content:"";position:absolute;bottom:0;left:calc(25% - 4px);width:8px;height:8px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg)}
.graph-edge.split span{position:absolute;bottom:0;left:calc(75% - 4px);width:8px;height:8px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;transform:rotate(45deg)}
.graph-edge.manual{color:#59618d}
.graph-edge.manual svg path{stroke-dasharray:4 4}
.flow-diagram figcaption{font-size:12px;line-height:1.5;margin-top:24px;color:var(--navy);max-width:62ch}
.work-card .flow-diagram{flex:none}
.work-card .graph-node{font-size:16px;padding:12px}
.work-card .graph-kicker{margin-bottom:20px}
.work-card .flow-diagram figcaption{margin-top:22px}
.work-card .graph-tier.single .graph-node{flex-basis:80%}
.work-card .graph-node small{font-size:12px}
.work-card .work-copy h3{max-width:20ch}
.graph-index .work-copy p{font-size:17px;line-height:1.55;max-width:44ch}
.graph-index .sec{padding-top:24px}
.graph-index .work-card{border:1px solid #f8f7eb26}
.project-preview .work-card .flow-diagram{min-height:399px}
.graph-index .flow-diagram{min-height:399px}
.graph-case .case-hero{padding-block:32px 64px}
.graph-case .breadcrumb{font-size:14px;margin-bottom:30px;display:flex;flex-wrap:wrap;gap:8px}
.case-intro{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:64px}
.graph-case .case-hero h1{font-size:clamp(40px,4.8vw,66px);max-width:17ch;line-height:1.04;margin:24px 0}
.graph-case .case-hero h1 span{color:var(--yellow)}
.case-hero .lead{font-size:19px;line-height:1.6;max-width:44ch}
.case-hero .flow-diagram{border-radius:28px;box-shadow:var(--shadow-deep)}
.case-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.case-tags li{font-size:12px;line-height:1.35;border:1px solid #f8f7eb60;border-radius:999px;padding:9px 12px}
.case-jumps{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.case-jumps .btn{font-size:14px;padding:14px 18px}
.graph-case .sec{padding-block:84px}
.case-section-heading{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:end;margin-bottom:40px}
.case-section-heading .eyebrow{margin-bottom:20px}
.case-section-heading h2{font-size:clamp(34px,4vw,54px);line-height:1.06;max-width:20ch}
.case-section-heading>p{font-size:18px;line-height:1.65;max-width:52ch}
.case-comparison{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.case-panel{min-width:0;border-radius:28px;background:var(--cream);color:var(--navy-900);overflow:hidden;box-shadow:var(--shadow-deep)}
.case-panel header{padding:26px 26px 0}
.case-panel header small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:10px}
.case-panel h3{font-size:27px;line-height:1.1;max-width:20ch}
.case-panel .panel-reason{padding:24px 26px 28px;font-size:16px;line-height:1.6;background:var(--blue-100)}
.case-panel .panel-reason strong{display:block;margin-bottom:6px;font-weight:500}
.case-panel .flow-diagram{padding-top:28px}
.case-panel .graph-node{font-size:16px}
.case-panel .flow-diagram figcaption{min-height:36px}
.case-decision{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center}
.case-decision>.flow-diagram{border-radius:28px;box-shadow:var(--shadow-deep)}
.case-decision h2{font-size:clamp(34px,4vw,54px);max-width:19ch;line-height:1.06;margin:18px 0 26px}
.case-reasons{display:grid;gap:24px;counter-reset:reason}
.case-reasons li{display:grid;grid-template-columns:34px 1fr;gap:14px;counter-increment:reason}
.case-reasons li::before{content:"0" counter(reason);font-size:13px;color:var(--yellow);padding-top:4px}
.case-reasons strong{font-size:19px;font-weight:500;display:block;margin-bottom:6px}
.case-reasons p{font-size:17px;line-height:1.6;max-width:46ch}
.case-takeaway{margin-top:48px;padding:28px 32px;border-radius:24px;background:var(--yellow);color:var(--navy-900);font-size:22px;line-height:1.45;max-width:100%;box-shadow:6px 7px 0 var(--navy-900)}
.case-takeaway strong{font-weight:500}
.case-note{font-size:13px;line-height:1.6;max-width:74ch;margin-top:30px;color:var(--blue-100)}
.case-end .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.case-end h2{font-size:clamp(34px,4.5vw,60px);max-width:22ch}
.case-end p{max-width:55ch}
.case-end .ctas{display:flex;flex-wrap:wrap;gap:20px}
.case-end .btn{font-size:16px}
@media(min-width:901px){.case-comparison .case-panel{height:100%;display:flex;flex-direction:column}.case-comparison .panel-reason{margin-top:auto}.case-comparison .flow-diagram{flex:1}}
@media(max-width:1000px){.case-intro,.case-section-heading,.case-decision{gap:36px}.graph-case .case-hero h1{font-size:clamp(40px,5.2vw,56px)}}
@media(max-width:900px){.case-intro,.case-section-heading,.case-decision{grid-template-columns:1fr}.case-intro>.flow-diagram{max-width:640px;width:100%}.graph-case .case-hero h1{max-width:20ch}.case-section-heading{gap:24px}.case-comparison{grid-template-columns:1fr;gap:28px}.case-panel .graph-body{max-width:540px}.graph-case .sec{padding-block:60px}.graph-case .case-hero{padding-bottom:58px}.case-decision{gap:36px}.case-decision>.flow-diagram{order:2}.graph-case .case-hero .lead{max-width:56ch}.case-end .btn{padding:18px 24px}}
@media(max-width:640px){.flow-diagram{padding:24px 20px}.graph-tier{gap:12px}.graph-node{font-size:15px;padding:12px 10px;border-radius:12px}.graph-node small{font-size:12px}.graph-tier.single .graph-node{flex-basis:88%}.work-card .graph-node{font-size:15px;padding:12px 8px}.work-card .graph-tier.single .graph-node{flex-basis:90%}.graph-kicker{font-size:10px;gap:8px;margin-bottom:22px}.project-preview .work-card .flow-diagram,.graph-index .flow-diagram{min-height:0}.case-panel header{padding:26px 22px 0}.case-panel .panel-reason{padding:22px}.case-panel .graph-node{font-size:15px}.graph-case .case-hero h1{font-size:clamp(37px,9.6vw,58px)}.case-jumps{gap:14px}.case-jumps .btn{font-size:13px;padding:13px 16px}.case-tags{gap:8px}.case-takeaway{padding:24px;font-size:19px}.graph-index .projects-hero{padding-bottom:32px}.case-reasons li{gap:10px;grid-template-columns:28px 1fr}}