/* A visual stage rail and a single editorial detail area. */
.hybrid-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;margin-top:38px;align-items:start}
.hybrid-section .eyebrow{color:#2f7a52;margin-bottom:0}
.hybrid-section #workflows-title{font-size:clamp(38px,4.4vw,58px);line-height:1.12}
.hybrid-intro{font-size:17px;color:#475b48;margin-top:22px;max-width:34ch}
.hybrid-stages{display:none;margin-top:38px}
.hybrid-ready .hybrid-stages{display:block}
.hybrid-stop{position:relative}
.hybrid-stop:not(:last-of-type)::after{content:'';position:absolute;left:26px;top:63px;bottom:-10px;width:1px;background:#b3c6b4;pointer-events:none}
.hybrid-stop button{width:100%;display:grid;grid-template-columns:54px 25px 1fr;gap:17px;align-items:center;text-align:left;background:none;border:0;color:#243d2c;font:inherit;font-size:17px;padding:10px 0;cursor:pointer;position:relative}
.hybrid-icon{width:54px;height:54px;border-radius:50%;border:1px solid #c9cebd;background:#fdfbf5;display:grid;place-items:center;transition:background .2s,box-shadow .2s;z-index:1}
.hybrid-section svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hybrid-number{font-size:13px;color:#a47732}
.hybrid-stop button[aria-pressed=true]{color:#205f3f;font-weight:600}
.hybrid-stop button[aria-pressed=true] .hybrid-icon{background:#205f3f;border-color:#205f3f;color:#fff;box-shadow:0 0 0 4px #f6f3eb,0 0 0 6px #8fb99c}
.hybrid-stop button[aria-pressed=true] .hybrid-number{color:#205f3f}
.hybrid-stop button:hover .hybrid-icon{box-shadow:0 0 0 4px #dfe8d8}
.hybrid-stop button:focus-visible{outline:2px solid #2f7a52;outline-offset:5px;border-radius:4px}
.hybrid-detail{padding:14px 0 35px;margin-bottom:30px;border-bottom:1px solid #d5d9ca}
.hybrid-ready .hybrid-detail{border:0;margin:0;padding-bottom:0;min-height:620px}
.hybrid-detail[hidden]{display:none!important}
.hybrid-stage-name{color:#2f7a52;text-transform:uppercase;letter-spacing:.12em;font-size:14px;font-weight:600;margin-bottom:23px}
.hybrid-detail h3{font-family:'Fraunces',Georgia,serif;font-size:clamp(42px,5vw,67px);line-height:1.12;font-weight:400;letter-spacing:-.035em;max-width:17ch}
.hybrid-process{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;margin:50px 0 48px;gap:24px}
.hybrid-process li{position:relative;text-align:center;font-size:15px;line-height:1.4;color:#2b4230}
.hybrid-process li:not(:last-child)::after{content:'';position:absolute;top:43px;left:calc(50% + 46px);width:calc(100% - 68px);height:1px;background:#6c9273}
.hybrid-process-icon{width:88px;height:88px;border:1px solid #557e5c;border-radius:50%;display:grid;place-items:center;margin:0 auto 16px}
.hybrid-process-icon svg{width:39px;height:39px;stroke-width:1.2;color:#356445}
.hybrid-roles{display:grid;grid-template-columns:1fr 1fr;gap:27px}
.hybrid-roles>div+div{border-left:1px solid #c49b5e;padding-left:27px}
.hybrid-roles h4{text-transform:uppercase;font-size:13px;letter-spacing:.075em;font-weight:600;color:#2f7a52;margin:0 0 19px}
.hybrid-roles h4::after{content:'';display:block;width:23px;height:2px;background:#c49b5e;margin-top:13px}
.hybrid-roles p{font-size:17px;line-height:1.7;color:#3c503e}
@media(max-width:1050px){.hybrid-layout{gap:40px;grid-template-columns:.85fr 1.15fr}.hybrid-stop button{gap:12px}.hybrid-detail h3{font-size:50px}.hybrid-process{gap:12px}.hybrid-process-icon{width:72px;height:72px}.hybrid-process li:not(:last-child)::after{top:35px;left:calc(50% + 38px);width:calc(100% - 64px)}.hybrid-roles{gap:20px}.hybrid-roles>div+div{padding-left:20px}}
@media(max-width:780px){.hybrid-layout{display:block;margin-top:25px}.hybrid-section #workflows-title{font-size:43px}.hybrid-intro{max-width:40ch}.hybrid-stages{margin-top:30px}.hybrid-stop button{grid-template-columns:48px 26px 1fr;min-height:68px;font-size:16px;gap:14px}.hybrid-icon{width:48px;height:48px}.hybrid-stop:not(:last-of-type)::after{left:23px;top:59px;bottom:auto;height:19px}.hybrid-ready .hybrid-detail{min-height:0;margin:16px 0 25px;padding:25px 20px 28px;background:#fdfbf5;border-top:1px solid #d5ddce;border-bottom:1px solid #d5ddce}.hybrid-detail h3{font-size:37px;max-width:20ch}.hybrid-stage-name{font-size:12px;margin-bottom:13px}.hybrid-process{margin:30px 0;gap:14px}.hybrid-process-icon{width:66px;height:66px;margin-bottom:12px}.hybrid-process-icon svg{width:30px;height:30px}.hybrid-process li{font-size:13px}.hybrid-process li:not(:last-child)::after{top:32px;left:calc(50% + 35px);width:calc(100% - 56px)}.hybrid-roles{gap:20px}.hybrid-roles h4{font-size:12px;margin-bottom:14px}.hybrid-roles p{font-size:15px;line-height:1.6}.hybrid-detail-home:empty{display:none}}
@media(max-width:430px){.hybrid-ready .hybrid-detail{padding-inline:15px}.hybrid-detail h3{font-size:34px}.hybrid-roles{grid-template-columns:1fr;gap:24px}.hybrid-roles>div+div{border-left:0;padding-left:0}.hybrid-process{gap:10px}.hybrid-process-icon{width:58px;height:58px}.hybrid-process li:not(:last-child)::after{top:28px;left:calc(50% + 31px);width:calc(100% - 52px)}}
@media(prefers-reduced-motion:reduce){.hybrid-section *{transition:none!important}}

/* Keep the desktop journey within a comfortable single-screen reading area. */
@media(min-width:781px){
 .hybrid-section{padding-block:46px}
 .hybrid-layout{margin-top:22px;gap:60px}
 .hybrid-section #workflows-title{font-size:clamp(34px,3.2vw,44px)}
 .hybrid-intro{margin-top:12px;font-size:16px;line-height:1.5;max-width:40ch}
 .hybrid-stages{margin-top:20px}
 .hybrid-stop button{grid-template-columns:42px 25px 1fr;gap:14px;padding:4px 0;font-size:16px;min-height:50px}
 .hybrid-icon{width:42px;height:42px}
 .hybrid-stop:not(:last-of-type)::after{left:20px;top:45px;bottom:-5px}
 .hybrid-ready .hybrid-detail{min-height:0;padding-top:8px}
 .hybrid-stage-name{margin-bottom:16px;font-size:12px}
 .hybrid-detail h3{font-size:clamp(38px,3.6vw,50px);max-width:20ch}
 .hybrid-process{margin:28px 0;gap:18px}
 .hybrid-process-icon{width:66px;height:66px;margin-bottom:12px}
 .hybrid-process-icon svg{width:30px;height:30px}
 .hybrid-process li{font-size:14px}
 .hybrid-process li:not(:last-child)::after{top:32px;left:calc(50% + 35px);width:calc(100% - 52px)}
 .hybrid-roles h4{margin-bottom:12px}
 .hybrid-roles h4::after{margin-top:9px}
 .hybrid-roles p{font-size:16px;line-height:1.55}
}
