/* Reference-led project showcase, isolated from the rest of the portfolio. */
.ref-work-section{padding:30px 0 60px;background:var(--paper);border:0}
.showcase-intro{margin:0 0 32px;max-width:760px}.showcase-intro .eyebrow{font-size:10px;margin-bottom:16px}.showcase-intro h2{font-size:clamp(31px,3.4vw,44px);margin-bottom:18px}.showcase-intro>p:last-child{font-size:16px;line-height:1.75;max-width:640px}
.project-showcase{--software-color:#188bf6;--software-text:#1169b5;--project-accent:var(--software-text);--canvas-dot:#c9d4c2;--connector-color:#9aa99b;--node-active:#edf5fb;--project-muted:var(--muted);border:1px solid var(--line);background:var(--paper);border-radius:16px;overflow:hidden}
.showcase-browser-bar{display:flex;align-items:center;background:var(--pale);border-bottom:1px solid var(--line);min-height:52px;padding:0 12px;gap:12px}
.showcase-window-dots{display:flex;gap:5px;flex-shrink:0;padding:0 2px}.showcase-window-dots i{width:8px;height:8px;border-radius:50%;background:#708375}
.project-showcase .workflow-tabs{border:0;min-width:0;flex:1;margin:0;gap:3px;padding:7px 0;scrollbar-width:thin;scrollbar-color:#708375 var(--pale)}
.project-showcase .workflow-tabs a{min-height:34px;display:flex;align-items:center;gap:8px;padding:8px 11px;white-space:nowrap;border:1px solid transparent;border-radius:30px;color:var(--muted);font:11px/1.4 'DM Sans',Arial,sans-serif;background:transparent}
.project-showcase .workflow-tabs a span{font:inherit}.project-showcase .workflow-tabs a>i{width:6px;height:6px;border-radius:50%;background:var(--software-color);flex-shrink:0}.project-showcase .workflow-tabs a[data-tool=n8n]>i{background:#ea4b71}
.project-showcase .workflow-tabs a:hover{background:var(--pale);color:var(--ink)}.project-showcase .workflow-tabs a[aria-selected=true]{background:var(--lime);border-color:#7f9d68;color:#15241f}
.project-showcase .workflow-tabs a:focus-visible{outline:2px solid var(--software-color);outline-offset:-2px}
.project-showcase .workflow-panel{margin:0;padding:0;border:0;border-radius:0;background:var(--paper);display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,1fr);min-height:615px;color:var(--ink)}
.project-showcase .workflow-panel[hidden]{display:none}.project-panel[data-tool=n8n]{--project-accent:var(--software-text);--software-color:#ea4b71;--software-text:#b52a50;--node-active:#fff1f3}
.project-visual{min-width:0;position:relative;display:flex;align-items:stretch;background-color:var(--pale);background-image:radial-gradient(var(--canvas-dot) .7px,transparent .7px);background-size:18px 18px;border-right:1px solid var(--line);overflow:hidden}
.project-summary{display:flex;flex-direction:column;min-width:0;padding:30px 26px 26px}
.project-category{font:10px/1.6 var(--mono);letter-spacing:.03em;color:var(--project-accent);margin-bottom:12px}
.project-summary h3{font:550 clamp(25px,2.2vw,32px)/1.15 'DM Sans',Arial,sans-serif;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.project-overview{font-size:14px;line-height:1.7;color:var(--muted);margin-top:17px}
.project-summary .software-row{margin:18px 0 20px;gap:6px}.project-summary .software-label{font-size:8px;color:var(--muted)}.project-summary .software-row ul{gap:8px 11px}.project-summary .software-row li{font-size:10px;color:var(--ink)}.project-summary .software-icon{width:25px;height:25px;border-color:#dce2e8;background:#fff}.project-summary .software-icon img{width:18px;height:18px}.project-summary .software-icon.n8n{width:42px}.project-summary .software-icon.n8n img{width:34px;height:16px}
.project-points{list-style:none;margin:0;padding:0}.project-points li{position:relative;padding-left:15px;font-size:12px;line-height:1.7;color:var(--muted);margin-bottom:10px}.project-points li::before{content:'–';position:absolute;left:0;color:var(--project-accent)}
.project-summary-footer{margin-top:auto;padding-top:30px}.project-summary .sample-caveat{font:9px/1.7 var(--mono);color:var(--muted);border:0;padding:0;margin:0 0 14px}
.project-summary .sample-detail-link{align-self:start;color:var(--ink);border-color:var(--muted);font-size:11px;display:inline-block;white-space:normal}.project-summary .sample-detail-link:hover{color:var(--ink);border-color:var(--project-accent)}
.project-visual .flow-player{position:relative;display:flex;flex-direction:column;min-width:0;flex:1;min-height:615px}
.project-visual .flow-stage{border:0;border-radius:0;position:relative;flex:1;background:transparent;color:var(--ink);overflow:visible}
.project-visual .ref-canvas{background-color:var(--pale);background-image:radial-gradient(var(--canvas-dot) 1px,transparent 1px);background-size:18px 18px}
.project-visual .flow-meter{position:absolute;bottom:0;left:0;width:100%;height:3px;pointer-events:none}
.project-visual .flow-controls{padding:0 18px 14px;min-height:0}.project-visual .flow-status{font:9px/1.5 var(--mono);color:var(--muted)}
.project-visual .ref-flow{display:grid;grid-template-columns:minmax(0,215px);justify-content:center;gap:32px;padding:30px 30px 24px;margin:0;list-style:none;min-height:570px;align-content:center}
.project-visual .ref-flow .flow-step{display:block;position:relative;min-height:70px;border:1px solid var(--line);background:var(--paper);border-radius:10px;padding:10px 12px;box-shadow:none;color:var(--ink)}
.project-visual .ref-flow .ref-entry{border-style:dashed}
.ref-node-type{display:block;font:8px/1.5 var(--mono);letter-spacing:.15em;color:var(--software-text);margin-bottom:5px}
.project-visual .ref-flow .flow-step strong{font:500 12px/1.4 'DM Sans',Arial,sans-serif;min-height:0;display:block;color:var(--ink)}
.project-visual .ref-flow .flow-step>small{display:block;font:10px/1.5 'DM Sans',Arial,sans-serif;color:var(--muted);margin-top:3px}
.project-visual .ref-flow .flow-connector{display:block;left:50%;top:100%;width:12px;height:33px;transform:translateX(-50%);opacity:1}
.project-visual .ref-flow .flow-connector path{stroke:var(--connector-color);stroke-width:1;fill:none}
.project-visual .flow-enhanced .ref-flow .flow-step.is-active{background:var(--node-active);border-color:var(--software-color);box-shadow:0 0 0 1px color-mix(in srgb,var(--software-color) 18%,transparent);color:var(--ink)}
.project-visual .flow-enhanced .ref-flow .flow-step.is-done{background:var(--node-active);border-color:var(--software-color)}
.project-visual .flow-enhanced .ref-flow .flow-step.is-done::after{content:'✓';position:absolute;right:-7px;top:-7px;width:17px;height:17px;display:grid;place-items:center;background:var(--software-color);color:#fff;border-radius:50%;font:11px/1 Arial,sans-serif}
.project-visual .flow-enhanced .ref-flow .flow-step.is-done .flow-connector path{stroke:var(--software-color)}
/* Retain the n8n node language within the same dark split-panel canvas. */
.project-visual .n8n-builder-bar,.project-visual .n8n-builder .flow-stage-label{display:none}
.project-visual .n8n-builder .n8n-scroll{background-color:var(--pale);background-image:radial-gradient(var(--canvas-dot) 1px,transparent 1px);background-size:18px 18px;display:flex;align-items:center;min-height:550px;scrollbar-color:#708375 var(--pale)}
.project-visual .n8n-builder .animated-flow{grid-template-columns:repeat(var(--node-count),minmax(75px,1fr));min-width:550px;gap:25px;padding:55px 25px 45px;width:100%}
.project-visual .n8n-builder .n8n-report-flow{grid-template-columns:repeat(7,minmax(68px,1fr));min-width:690px;gap:22px;padding-inline:22px}
.project-visual .n8n-node{width:54px;height:54px;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:none}
.project-visual .n8n-node>img{width:26px;height:26px}.project-visual .n8n-code{font-size:24px}
.project-visual .n8n-builder .flow-step strong{font-size:10px;color:var(--ink)}.project-visual .n8n-step-card>small{font-size:8px;color:var(--muted)}
.project-visual .n8n-step-card{min-height:105px;gap:10px}.project-visual .n8n-node-pair{gap:20px}.project-visual .n8n-node-pair .n8n-step-card{min-height:106px}
.project-visual .n8n-builder .n8n-wire{top:27px;left:calc(50% + 27px);width:calc(100% - 29px);height:12px}.project-visual .n8n-builder .n8n-report-flow .n8n-wire{width:calc(100% - 32px)}
.project-visual .n8n-builder .n8n-wire.dual,.project-visual .n8n-builder .n8n-wire.merge{top:27px;height:126px;transform:none}
.project-visual .n8n-builder .n8n-wire path{stroke:var(--connector-color)}
.project-visual .flow-enhanced .n8n-builder .is-active .n8n-node{border-color:var(--software-color);box-shadow:0 0 0 4px color-mix(in srgb,var(--software-color) 20%,transparent)}.project-visual .flow-enhanced .n8n-builder .is-done .n8n-wire path{stroke:var(--software-color)}
.project-visual .n8n-canvas-footer{background:transparent;border:0;color:var(--muted);padding:0 18px 15px;font-size:9px}
@media(max-width:1100px) and (min-width:761px){.project-showcase .workflow-panel{grid-template-columns:minmax(0,1.1fr) minmax(310px,1fr)}.project-summary{padding:26px 22px}.project-showcase .workflow-tabs a{padding:8px 9px;font-size:10px}}
@media(max-width:760px){
 .ref-work-section{padding:20px 0 40px}.showcase-intro{margin-bottom:24px}.showcase-intro>p:last-child{font-size:15px}
 .project-showcase{border-radius:12px}.showcase-browser-bar{padding:0 9px;gap:8px}.showcase-window-dots{gap:4px}.showcase-window-dots i{width:6px;height:6px}
 .project-showcase .workflow-tabs a{font-size:11px;min-height:36px;padding:8px 10px}
 .project-showcase .workflow-panel{grid-template-columns:minmax(0,1fr);min-height:0}.project-visual{border-right:0;border-bottom:1px solid var(--line)}
 .project-visual .flow-player{min-height:540px}.project-visual .ref-flow{grid-template-columns:minmax(0,215px);min-height:510px;gap:25px;padding:28px 24px 24px}.project-visual .ref-flow .flow-connector{height:26px}
 .project-visual .ref-flow .flow-step{min-height:66px}.project-summary{padding:25px 22px 26px}.project-summary h3{font-size:29px}.project-overview{font-size:14px}.project-points li{font-size:13px}.project-summary .software-row li{font-size:11px}.project-summary-footer{padding-top:22px}.project-summary .sample-caveat{font-size:10px}
 .project-visual .n8n-builder .n8n-scroll{min-height:360px}.project-visual:has(.n8n-builder) .flow-player{min-height:420px}.project-visual .n8n-builder .animated-flow{padding-block:45px}
 .project-visual .n8n-builder .n8n-report-flow{min-width:740px}
}
@media(prefers-reduced-motion:reduce){.project-visual .flow-step{transition:none}}

/* Four independent workflow examples inside the SaaS project. */
.saas-project-title{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saas-project-visual{flex-direction:column}
.saas-workflow-picker{background:var(--paper);border-bottom:1px solid var(--line);padding:14px 18px}
.saas-workflow-picker[hidden]{display:none}
.saas-workflow-picker>p{color:var(--muted);font:8px/1.5 var(--mono);letter-spacing:.09em;margin-bottom:9px}
.saas-workflow-picker>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.saas-workflow-picker button{font:11px/1.4 'DM Sans',Arial,sans-serif;min-height:37px;padding:7px 8px;cursor:pointer;border:1px solid var(--line);border-radius:5px;background:var(--paper);color:var(--ink)}
.saas-workflow-picker button:hover{background:var(--pale);color:var(--ink)}
.saas-workflow-picker button[aria-pressed=true]{border-color:var(--software-color);background:var(--node-active);color:var(--ink)}
.saas-workflow-picker button:focus-visible{outline:2px solid var(--software-color);outline-offset:2px}
.saas-workflows{display:flex;flex:1;flex-direction:column;min-width:0}
.saas-flow-panel{display:flex;flex:1;min-width:0}
.saas-flow-panel[hidden],.saas-summary[hidden]{display:none}
.saas-summary-stack{display:flex;min-width:0;flex-direction:column}
.saas-summary{flex:1}
.saas-project-visual .flow-player{min-height:570px}
.saas-project-visual .ref-flow{min-height:530px;gap:25px;grid-template-columns:minmax(0,270px)}
.saas-project-visual .ref-flow .flow-connector{height:26px}
.saas-project-visual .ref-flow .flow-step>small{font-size:9px}
@media(max-width:1100px){.saas-workflow-picker>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.saas-workflow-picker{padding:14px}.saas-project-visual .ref-flow{grid-template-columns:minmax(0,250px);padding-inline:22px}.saas-workflow-picker button{font-size:12px;min-height:40px}}

/* Platform accents sit within Carl's existing green and cream surfaces. */
.project-showcase .workflow-tabs a>i{background:#188bf6}
.project-showcase .workflow-tabs a[data-tool=n8n]>i{background:#ea4b71}
.project-showcase .workflow-tabs a[aria-selected=true]{color:#15241f}
.project-category{color:var(--software-text)}
.project-visual .n8n-node:has(img[src*="google-sheets"]){border-color:#34a853;background:#f1faf3}
.project-visual .n8n-node:has(img[src*="google-drive"]){border-color:#4285f4;background:#f1f6ff}
.project-visual .n8n-node:has(img[src*="gmail"]){border-color:#ea4335;background:#fff4f2}
.project-visual .n8n-node:has(.n8n-code){border-color:#ff9b26;background:#fff8ee}
.project-visual .flow-enhanced .n8n-builder .is-active .n8n-node{outline:2px solid var(--software-color);outline-offset:3px}
.project-visual .flow-enhanced .n8n-builder .is-done .n8n-node::after{background:var(--software-color);border-color:var(--pale)}
.project-visual .n8n-port{background:#fff}
.project-visual .flow-enhanced .ref-flow .flow-step.is-active{box-shadow:0 0 0 3px color-mix(in srgb,var(--software-color) 14%,transparent)}
.saas-workflow-picker button:hover{color:var(--ink)}
@media(prefers-color-scheme:dark){
 .project-showcase{--canvas-dot:#3e5241;--connector-color:#718574;--software-text:#78bdff;--node-active:#213b3b}
 .project-panel[data-tool=n8n]{--software-text:#ff99b1;--node-active:#3c2a30}
}

/* Shared story layouts: consistent edges, readable surfaces, and useful widths. */
.wrap.project-nav{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:var(--paper);backdrop-filter:none}
.project-nav a{display:grid;grid-template-columns:24px minmax(0,1fr) 14px;align-items:start;gap:10px;padding:18px 14px;line-height:1.55;border-top:1px solid var(--line)}
.project-nav a span{margin:0}.project-nav a .project-nav-label{font:inherit;color:inherit}
.project-nav a .project-nav-arrow{font:inherit;color:inherit}
.project-nav a.active span{color:inherit}
.portfolio-case .project-details{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px;padding:28px;background:var(--pale);border:1px solid var(--line);border-radius:6px}
.portfolio-case .project-details>div{min-width:0}
.portfolio-case .project-details h3{font-size:21px;line-height:1.25;margin-bottom:12px}
.portfolio-case .project-details p{color:var(--muted);line-height:1.8}
.portfolio-case .project-details>.evidence-panel{grid-column:1/-1;padding:22px 0 0;border-left:0;border-top:1px solid var(--line);background:transparent}
.portfolio-case .assistant-panel{grid-template-columns:minmax(0,1fr);gap:24px;background:var(--pale)}
.assistant-panel>div:first-child{max-width:750px}.assistant-panel .software-row{margin:0}
.portfolio-case .audit-example{border:1px solid var(--line);border-left:3px solid #71914f;border-radius:6px}
.source-examples summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:56px;padding:16px 0;border-top:1px solid var(--line);cursor:pointer}
.source-gallery{border:1px solid var(--line);border-radius:6px}
@media(max-width:1000px){.wrap.project-nav{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.portfolio-case .project-details{grid-template-columns:minmax(0,1fr);gap:24px}.portfolio-case .project-details>div+div{padding-top:24px;border-top:1px solid var(--line)}}
@media(max-width:760px){
 .wrap.project-nav{display:grid!important;grid-template-columns:minmax(0,1fr);overflow:visible;gap:0!important}
 .project-nav a{min-width:0;padding:15px 8px}.portfolio-case .project-details{padding:22px}
 .assistant-branches{grid-template-columns:minmax(0,1fr)}
}

.project-visual .n8n-code{color:#a64b00}

.source-examples summary>span{color:var(--muted)}