/* A local-only walkthrough: the same fictional project, artwork and mockup at every step. */
.client-flow{padding:88px 28px 68px;background:#f1f0e9;color:#183b30;scroll-margin-top:85px}
.client-flow__inner{max-width:1280px;margin:auto}.client-flow__heading{display:grid;grid-template-columns:1.15fr 1fr;gap:65px;align-items:end;margin-bottom:38px}
.flow-eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;color:#567467;margin:0 0 17px}.client-flow h2{font-size:clamp(28px,3vw,42px);letter-spacing:-.05em;line-height:1.3;margin:0;max-width:610px}
.client-flow__intro{font-size:15px;line-height:1.9;margin:0;color:#5a6b61;max-width:470px}
.flow-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:22px;border-bottom:1px solid #cdd3c8;gap:14px}
.flow-step{font-family:inherit;display:flex;align-items:center;gap:12px;padding:19px 7px 22px;color:#6c786d;background:none;border:0;border-bottom:3px solid transparent;text-align:left;cursor:pointer;transition:color .2s,border-color .2s}
.flow-step__number{font-size:25px;font-weight:500;letter-spacing:-.06em;color:#9ba593}.flow-step strong{display:block;font-size:17px;letter-spacing:-.03em}.flow-step small{display:block;font-size:11px;margin-top:5px;font-weight:400}.flow-step__arrow{margin-left:auto;font-size:23px;opacity:0}.flow-step[aria-pressed=true]{border-color:#174e3a;color:#164631}.flow-step[aria-pressed=true] .flow-step__number{color:#164631}.flow-step[aria-pressed=true] .flow-step__arrow{opacity:1}.flow-step:hover{color:#164631;border-color:#7e9a83}
.flow-browser{border:1px solid #d6d9cf;border-radius:17px;overflow:hidden;background:#fff;box-shadow:0 20px 50px #233b2710}
.flow-browser__chrome{display:flex;align-items:center;gap:16px;padding:13px 22px;background:#fbfcf9;border-bottom:1px solid #e3e7df;font-size:10px;color:#69766b}
.flow-browser__dots{display:flex;gap:5px}.flow-browser__dots i{width:7px;height:7px;border-radius:50%;background:#d7ddcf}.flow-browser__dots i:first-child{background:#dba394}.flow-browser__dots i:nth-child(2){background:#deca94}.flow-browser__address{letter-spacing:.08em}.flow-browser__address>span:first-child{margin:0 12px;opacity:.4}.flow-browser__demo{margin-left:auto;border:1px solid #dbe3d2;border-radius:5px;padding:3px 7px;color:#526348}
.flow-browser__project{display:flex;align-items:center;justify-content:space-between;padding:17px 24px;border-bottom:1px solid #e5e9e1;font-size:12px;gap:12px}.flow-browser__project>div{display:flex;align-items:center;gap:12px}.flow-project-icon{display:grid;place-items:center;width:31px;height:31px;border-radius:6px;background:#e8eddf;color:#39503a;font-family:Georgia,serif;font-size:12px}.flow-private{font-size:10px;color:#7b877a}
.flow-panel{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);min-height:425px}.flow-panel[hidden],.client-flow [hidden]{display:none!important}
.flow-visual{position:relative;min-width:0;min-height:425px;background:#e6e6db;overflow:hidden}.flow-visual>img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;display:block}.flow-visual img[data-flow-art=proof]{object-fit:contain;padding:25px 24px 36px;background:#e5e5db}.flow-visual__caption{position:absolute;bottom:14px;left:18px;font-size:10px;background:#fffffff0;border:1px solid #fff9;color:#4d5d49;border-radius:4px;padding:5px 10px;z-index:1}
.flow-explanation{padding:40px 36px;background:#fff;min-width:0;align-self:center}.flow-stage-label{font-size:10px;letter-spacing:.15em;color:#7f8f73;font-weight:700}.flow-explanation h3{font-size:27px;line-height:1.35;letter-spacing:-.04em;margin:13px 0 14px}.flow-explanation>p{font-size:13px;line-height:1.9;color:#697569;margin:0 0 22px}
.flow-view-switch{display:inline-flex;background:#f1f2eb;border-radius:9px;padding:4px;gap:5px;margin:2px 0 24px}.flow-view-switch button{background:none;border:0;border-radius:6px;padding:10px 18px;color:#61715b;font-family:inherit;font-weight:600;font-size:12px;cursor:pointer}.flow-view-switch button[aria-pressed=true]{background:#244d39;color:#fff;box-shadow:0 2px 4px #233b2720}
.flow-design-strip{border-top:1px solid #e6e9e0;padding-top:18px;display:flex;align-items:center;gap:14px}.flow-design-strip>img{width:47px;height:65px;object-fit:cover;border-radius:2px}.flow-design-strip b{display:block;font-size:11px;letter-spacing:.13em}.flow-design-strip>div>span:not(.flow-swatch){display:block;font-size:11px;color:#7c8676;margin-top:4px}.flow-swatch{display:flex;gap:5px;margin-top:9px}.flow-swatch i{width:13px;height:13px;border-radius:50%;background:#253b26}.flow-swatch i:nth-child(2){background:#e6e3d1}.flow-swatch i:nth-child(3){background:#ee7654}
.flow-visual--brief{display:grid;place-items:center;padding:26px;background:radial-gradient(ellipse at top left,#f4efd6,#dde6d8)}.flow-brief-card{width:min(100%,415px);background:#fff;border-radius:9px;padding:24px 28px;box-shadow:0 9px 30px #334b2220;transform:rotate(-1.2deg)}.flow-miniheading{font-size:12px;font-weight:700;letter-spacing:.03em;border-bottom:1px solid #e4e9dd;padding-bottom:14px}.flow-brief-card dl{margin:16px 0 22px}.flow-brief-card dt{font-size:10px;color:#88907f;margin-top:12px}.flow-brief-card dd{margin:4px 0 0;font-size:13px;font-weight:600;line-height:1.6}.flow-source-heading{font-size:11px;font-weight:600;display:flex;justify-content:space-between;margin-bottom:8px}.flow-source-heading>span{color:#899580}.flow-source{display:flex;gap:9px;align-items:center;border-top:1px solid #edf0e8;padding:9px 0;font-size:11px;color:#596a51}.flow-source>b{display:grid;place-items:center;width:25px;height:27px;background:#f5f1e3;color:#8c7246;border-radius:3px;font-size:9px}.flow-source>i{font-style:normal;margin-left:auto;color:#5b8d59}
.flow-note{display:flex;gap:12px;border-top:1px solid #e6e9e0;padding-top:20px;font-size:12px}.flow-note>span{font-size:25px;color:#8c9e58}.flow-note p{font-size:12px;line-height:1.8;color:#73806c;margin:6px 0 0}.flow-note strong{font-size:13px}
.flow-visual--feedback{display:grid;place-items:center;padding:22px 24px 36px;background:#dce1d6}.flow-proof-sheet{position:relative;width:255px;max-width:80%;box-shadow:0 8px 20px #1d391e26}.flow-proof-sheet>img{display:block;width:100%;height:auto}.flow-pin{position:absolute;left:23%;top:43%;width:31px;height:31px;border-radius:50% 50% 50% 3px;border:2px solid #fff;background:#e26942;box-shadow:0 2px 8px #52270f40;color:#fff;font-family:inherit;font-weight:700;font-size:12px;cursor:pointer}.flow-comment{border:1px solid #e0e4d7;border-left:3px solid #d88057;border-radius:8px;padding:16px;background:#fafbf7}.flow-comment>div{display:flex;align-items:center;gap:8px;font-size:11px}.flow-comment__number{display:grid;place-items:center;background:#e26942;color:#fff;border-radius:50%;width:20px;height:20px;font-size:10px}.flow-comment p{font-size:12px;line-height:1.8;margin:12px 0;color:#516044}.flow-comment small{font-size:10px;color:#8b7c59}.flow-explanation p.flow-hint{font-size:10px;line-height:1.8;color:#7b8574;margin:14px 0 0}.flow-comment:focus{outline:3px solid #c99659;outline-offset:3px}
.flow-approved{position:absolute;bottom:24px;left:24px;display:flex;align-items:center;gap:12px;border:1px solid #ffffffc9;background:#ffffffef;box-shadow:0 3px 20px #0001;border-radius:10px;padding:15px 20px}.flow-approved>span{background:#315e39;color:#fff;display:grid;place-items:center;width:29px;height:29px;border-radius:50%}.flow-approved strong{display:block;font-size:13px}.flow-approved small{display:block;font-size:10px;color:#77846c;margin-top:4px}
.flow-file{display:flex;align-items:center;gap:12px;border-top:1px solid #e7eade;padding:13px 0}.flow-file>b{display:grid;place-items:center;background:#eef0e6;color:#778b65;font-size:10px;width:31px;height:36px;border-radius:4px}.flow-file strong{display:block;font-size:12px}.flow-file small{display:block;font-size:10px;color:#819077;margin-top:4px}.flow-file>span{margin-left:auto;color:#749769}
.client-flow__footer{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-top:22px}.client-flow__footer>p{font-size:10px;line-height:1.7;color:#798573;max-width:600px;margin:0}.client-flow__footer>a{font-size:13px;font-weight:700;flex-shrink:0;border-bottom:1px solid #526c46;padding-bottom:6px}.client-flow__footer>a>span:last-child{margin-left:20px}.client-flow button:focus-visible,.client-flow a:focus-visible{outline:3px solid #b36c38;outline-offset:4px}
@media(max-width:1000px){.client-flow{padding:60px 22px}.client-flow__heading{gap:25px}.flow-panel{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.flow-explanation{padding:28px 24px}.flow-explanation h3{font-size:23px}.flow-step{gap:8px}.flow-step small{font-size:10px}.flow-step strong{font-size:14px}.flow-step__arrow{display:none}.flow-visual{min-height:435px}.flow-brief-card{padding:20px}.flow-visual--brief{padding:22px}}
@media(max-width:700px){.client-flow{padding:48px 16px 40px}.client-flow__heading{grid-template-columns:1fr;gap:18px;margin-bottom:22px}.client-flow h2{font-size:30px;max-width:340px}.flow-eyebrow{font-size:9px;margin-bottom:12px}.client-flow__intro{font-size:13px;line-height:1.85}.flow-steps{gap:8px;margin-bottom:17px}.flow-step{display:block;padding:10px 0 12px;text-align:left}.flow-step__number{font-size:16px;display:block;margin-bottom:8px}.flow-step strong{font-size:12px;line-height:1.4}.flow-step small{display:none}.flow-panel{display:flex;flex-direction:column;min-height:0}.flow-visual{min-height:0;height:285px;flex:none}.flow-visual--design{height:290px}.flow-visual--brief{height:auto;padding:24px 28px}.flow-visual--feedback{height:375px;padding:20px 24px 36px}.flow-proof-sheet{width:220px}.flow-explanation{padding:26px 24px;width:100%}.flow-explanation h3{font-size:23px}.flow-explanation>p{font-size:13px;margin-bottom:18px}.flow-design-strip{display:none}.flow-view-switch{margin-bottom:0}.flow-browser__chrome{padding:11px 14px;gap:12px;font-size:8px}.flow-browser__address>span{display:none}.flow-browser__demo{font-size:8px;padding:2px 5px}.flow-browser__project{padding:13px 15px;font-size:10px}.flow-private{display:none}.flow-approved{bottom:17px;left:17px;padding:12px 15px}.client-flow__footer{align-items:flex-start;flex-direction:column;gap:18px}.client-flow__footer>p{font-size:9px}.flow-brief-card{max-width:340px}}
@media(prefers-reduced-motion:reduce){.flow-step{transition:none}}
/* Keep the entire publication visible instead of cropping off the cover/spread. */
.flow-visual--design>img[data-flow-art=mockup],.flow-visual--delivery>img{object-fit:contain;background:#e9e7dc}