/* Revision08: owner-approved crossroads compositions. All wording and controls are live HTML.
   Decorative windows reference the unchanged approved raster compositions. */
#crossroads{--crossroads-sprite:url('assets/crossroads-approved-mobile.avif');position:relative;isolation:isolate;overflow:hidden;background:#f8f8f6;color:#25223e;font-family:'Montserrat Hero',Arial,sans-serif;padding:54px 0 43px}
#crossroads .crossroads-inner{position:relative;z-index:1;width:100%;max-width:725px;margin-inline:auto}
#crossroads .crossroads-copy{position:relative;z-index:2}
#crossroads .section-title{font-family:inherit;font-size:22.5px;font-weight:800;line-height:1.23;letter-spacing:-.65px;color:#202036;text-align:center;text-wrap:initial;width:calc(100% - 28px);max-width:none;margin:0 auto}
#crossroads .crossroads-title-accent{color:#5031a5;background:#f0ebff;border-radius:1em;box-decoration-break:clone;-webkit-box-decoration-break:clone;padding:0 .13em}
#crossroads .crossroads-title-ink{color:#202036}
#crossroads .crossroads-intro,#crossroads .crossroads-body{width:85.7%;margin-inline:auto;font-family:inherit;text-align:left;color:#27223e}
#crossroads .crossroads-intro{font-size:17.8px;font-weight:700;line-height:1.28;letter-spacing:-.5px;margin-top:15px}
#crossroads .crossroads-body{font-size:19px;font-weight:400;line-height:1.275;letter-spacing:-.55px;margin-top:11px}
#crossroads .crossroads-scene,#crossroads .crossroads-point-art,#crossroads .crossroads-corner{background-image:var(--crossroads-sprite);background-repeat:no-repeat;background-size:var(--art-size);background-position:var(--art-position);aspect-ratio:var(--art-ratio);pointer-events:none}
#crossroads .crossroads-scene{width:100%;margin:2px auto 0;mask-image:linear-gradient(transparent,#000 4%,#000 94%,transparent)}
#crossroads .crossroads-label{position:relative;z-index:2;width:96%;margin:-1px auto 9px;font-size:20px;font-weight:800;line-height:1.23;letter-spacing:-.65px;text-align:center;color:#5031a5}
#crossroads .crossroads-points{display:grid;grid-template-columns:minmax(0,1fr);list-style:none;margin:0 auto;padding:5px 12px;width:93.6%;max-width:none;border:0;border-radius:16px;background:#efebff}
#crossroads .crossroads-point{position:relative;display:grid;grid-template-columns:112px minmax(0,1fr);gap:9px;align-items:center;min-width:0;padding:9px 0;margin:0}
#crossroads .crossroads-point+.crossroads-point{border-top:1px solid #d8cfff}
#crossroads .crossroads-point-art{width:100%;min-width:0;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
#crossroads .crossroads-point-copy{min-width:0;margin:0;padding:0;color:#29233f;font:400 18.4px/1.27 'Montserrat Hero',Arial,sans-serif;letter-spacing:-.4px}
#crossroads .crossroads-point-copy strong{font-weight:700;color:#5031a5}
#crossroads .section-action{position:relative;z-index:2;margin:17px auto 0;text-align:center;width:100%}
#crossroads .cta{display:inline-block;width:calc(100% - 72px);min-width:0;max-width:600px;min-height:62px;margin:0;padding:10px 18px;border:0;border-radius:18px;font-family:inherit;font-size:18px;font-weight:700;line-height:1.2;letter-spacing:-.35px;color:white;background:linear-gradient(110deg,#6338c6,#4d299f 53%,#5937b3);box-shadow:0 3px 0 #38216b,0 11px 24px rgba(70,40,132,.14);transition:transform .18s,box-shadow .18s,filter .18s;text-align:center;text-decoration:none}
#crossroads .cta:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 4px 0 #38216b,0 13px 26px rgba(70,40,132,.16)}
#crossroads .cta:active,#crossroads .cta.is-pressed{filter:brightness(.96);transform:translateY(2px);box-shadow:0 1px 0 #38216b,0 5px 12px rgba(70,40,132,.13)}
#crossroads .cta:focus-visible{outline:3px solid #5031a5;outline-offset:7px}
#crossroads .crossroads-corner{position:absolute;z-index:0;pointer-events:none}
#crossroads .crossroads-corner-tl{left:0;top:0;width:31.035%;max-width:225px;mask-image:linear-gradient(90deg,#000 65%,transparent),linear-gradient(#000 75%,transparent);mask-composite:intersect}
#crossroads .crossroads-corner-tr{right:0;top:0;width:36.552%;max-width:265px;clip-path:polygon(0 0,100% 0,100% 100%,77.359% 100%,77.359% 42.609%,0 42.609%);mask-image:linear-gradient(270deg,#000 75%,transparent),linear-gradient(#000 78%,transparent);mask-composite:intersect}
#crossroads .crossroads-corner-bl{left:0;bottom:0;width:24.828%;max-width:180px;clip-path:polygon(0 0,31.667% 0,31.667% 48.148%,100% 48.148%,100% 100%,0 100%);mask-image:linear-gradient(90deg,#000 60%,transparent),linear-gradient(0deg,#000 60%,transparent);mask-composite:intersect}
#crossroads .crossroads-corner-br{right:0;bottom:0;width:25.517%;max-width:185px;clip-path:polygon(69.19% 0,100% 0,100% 100%,0 100%,0 48.148%,69.19% 48.148%);mask-image:linear-gradient(270deg,#000 60%,transparent),linear-gradient(0deg,#000 60%,transparent);mask-composite:intersect}
#crossroads .crossroads-br-mobile,#crossroads .crossroads-br-desktop,#crossroads .crossroads-br-both{display:none}
@media(min-width:380px) and (max-width:599px){#crossroads .crossroads-br-mobile,#crossroads .crossroads-br-both{display:block}}
@media(max-width:379px){
 #crossroads{padding-top:47px}
 #crossroads .section-title{font-size:21px;letter-spacing:-.65px}
 #crossroads .crossroads-intro,#crossroads .crossroads-body{width:88%}
 #crossroads .crossroads-body{font-size:18px;line-height:1.32}
 #crossroads .crossroads-intro{font-size:17px;line-height:1.3}
 #crossroads .crossroads-label{font-size:19px;max-width:330px;line-height:1.2;margin-bottom:13px}
 #crossroads .crossroads-points{padding-inline:10px}
 #crossroads .crossroads-point{grid-template-columns:84px minmax(0,1fr);gap:7px;padding-block:15px}
 #crossroads .crossroads-point-copy{font-size:17px;line-height:1.32;letter-spacing:-.45px}
 #crossroads .cta{width:calc(100% - 54px);font-size:17px;min-height:61px}
}
@media(min-width:430px) and (max-width:599px){
 #crossroads .crossroads-inner{max-width:480px}
 #crossroads .crossroads-point{grid-template-columns:124px minmax(0,1fr);gap:12px}
 #crossroads .crossroads-point-copy{font-size:19px}
 #crossroads .crossroads-label{font-size:22px}
 #crossroads .section-title{font-size:25px}
}
@media(min-width:600px) and (max-width:1099px){
 #crossroads{padding-block:56px 48px}
 #crossroads .crossroads-inner{max-width:780px;width:94%}
 #crossroads .section-title{font-size:clamp(30px,4.3vw,42px);line-height:1.2;letter-spacing:-1px}
 #crossroads .crossroads-intro{font-size:21px;line-height:1.35;margin-top:24px}
 #crossroads .crossroads-body{font-size:21px;line-height:1.45;margin-top:18px}
 #crossroads .crossroads-scene{width:90%;max-width:610px}
 #crossroads .crossroads-label{font-size:29px;margin-top:5px;margin-bottom:16px}
 #crossroads .crossroads-points{max-width:650px;padding-inline:24px;border-radius:24px}
 #crossroads .crossroads-point{grid-template-columns:145px minmax(0,1fr);gap:24px;padding-block:22px}
 #crossroads .crossroads-point-copy{font-size:21px;line-height:1.42}
 #crossroads .cta{font-size:24px;min-height:65px;padding:18px 22px;max-width:540px;width:80%;border-radius:24px}
 #crossroads .section-action{margin-top:25px}
}
@media(min-width:1100px){
 #crossroads{--crossroads-sprite:url('assets/crossroads-approved-desktop.avif');padding:clamp(65px,5.5vw,88px) 0 clamp(55px,4.36vw,70px)}
 #crossroads .crossroads-inner{width:94.4%;max-width:1600px}
 #crossroads .crossroads-copy{width:62%;margin-left:1.25%}
 #crossroads .section-title{width:100%;margin:0;font-size:clamp(34px,3.07vw,51px);line-height:1.22;letter-spacing:-1.7px;text-align:left}
 #crossroads .crossroads-title-accent{padding:0 .1em}
 #crossroads .crossroads-intro,#crossroads .crossroads-body{width:100%;margin-inline:0}
 #crossroads .crossroads-intro{font-size:clamp(18px,1.51vw,25px);line-height:1.32;letter-spacing:-.5px;margin-top:clamp(18px,1.4vw,23px)}
 #crossroads .crossroads-body{font-size:clamp(18px,1.51vw,25px);line-height:1.41;letter-spacing:-.6px;margin-top:clamp(15px,1.18vw,20px)}
 #crossroads .crossroads-scene{position:absolute;top:calc(-1 * clamp(65px,5.5vw,88px));right:-2.966%;width:42.281%;margin:0;z-index:0;mask-image:linear-gradient(90deg,transparent,#000 4%),linear-gradient(#000 87%,transparent);mask-composite:intersect}
 #crossroads .crossroads-label{width:100%;font-size:clamp(30px,2.51vw,42px);line-height:1.23;letter-spacing:-1.1px;margin:clamp(31px,2.4vw,39px) auto clamp(16px,1.07vw,18px)}
 #crossroads .crossroads-points{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));padding:0;border-radius:22px;background:#f1edff}
 #crossroads .crossroads-point{grid-template-columns:39% minmax(0,1fr);gap:clamp(12px,1.12vw,18px);padding:clamp(12px,.9vw,15px) clamp(10px,.9vw,15px) clamp(12px,.9vw,15px) 0;min-height:clamp(190px,14.9vw,250px)}
 #crossroads .crossroads-point+.crossroads-point{border-top:0}
 #crossroads .crossroads-point+.crossroads-point:before{content:'';position:absolute;width:1px;left:0;top:10%;bottom:10%;background:#e5d3ac}
 #crossroads .crossroads-point-copy{font-size:clamp(17px,1.405vw,23.5px);line-height:1.32;letter-spacing:-.62px}
 #crossroads .crossroads-point-copy strong{color:#24213e}
 #crossroads .section-action{margin-top:clamp(24px,1.91vw,32px)}
 #crossroads .cta{width:37.3%;max-width:630px;font-size:clamp(22px,1.8vw,30px);line-height:1.25;min-height:clamp(62px,4.54vw,76px);padding:16px 18px;border-radius:28px;letter-spacing:-.65px;background:linear-gradient(110deg,#5b42b0,#4c3898 53%,#5946af)}
 #crossroads .crossroads-br-desktop,#crossroads .crossroads-br-both{display:block}
 #crossroads .crossroads-corner-tl{width:20.81%;max-width:350px;clip-path:none}
 #crossroads .crossroads-corner-tr{display:none}
 #crossroads .crossroads-corner-bl{width:28.37%;max-width:480px;clip-path:none}
 #crossroads .crossroads-corner-br{width:30.39%;max-width:510px;clip-path:none}
}
@media(prefers-reduced-motion:reduce){#crossroads .cta{transition:none}#crossroads .cta:hover{transform:none}}
#crossroads .crossroads-scene{--art-ratio:725/393;--art-size:100.00000000% auto;--art-position:0.00000000% 41.92459201%;}
#crossroads .crossroads-point-1 .crossroads-point-art{--art-ratio:232/197;--art-size:312.50000000% auto;--art-position:6.08519270% 61.32792701%;}
#crossroads .crossroads-point-2 .crossroads-point-art{--art-ratio:236/229;--art-size:307.20338983% auto;--art-position:6.13496933% 73.10664606%;}
#crossroads .crossroads-point-3 .crossroads-point-art{--art-ratio:237/277;--art-size:305.90717300% auto;--art-position:6.14754098% 87.95562599%;}
#crossroads .crossroads-corner-tl{--art-ratio:225/99;--art-size:322.22222222% auto;--art-position:0.00000000% 0.00000000%;}
#crossroads .crossroads-corner-tr{--art-ratio:265/230;--art-size:273.58490566% auto;--art-position:100.00000000% 0.00000000%;}
#crossroads .crossroads-corner-bl{--art-ratio:180/135;--art-size:402.77777778% auto;--art-position:0.00000000% 100.00000000%;}
#crossroads .crossroads-corner-br{--art-ratio:185/135;--art-size:391.89189189% auto;--art-position:100.00000000% 100.00000000%;}

@media(min-width:1100px){
#crossroads .crossroads-scene{--art-ratio:633/514;--art-size:250.55292259% auto;--art-position:100.00000000% 0.00000000%;}
#crossroads .crossroads-point-1 .crossroads-point-art{--art-ratio:184/208;--art-size:861.95652174% auto;--art-position:3.35235378% 77.16836735%;}
#crossroads .crossroads-point-2 .crossroads-point-art{--art-ratio:191/192;--art-size:830.36649215% auto;--art-position:39.28315412% 76.87500000%;}
#crossroads .crossroads-point-3 .crossroads-point-art{--art-ratio:201/211;--art-size:789.05472637% auto;--art-position:74.94584838% 77.08066581%;}
#crossroads .crossroads-corner-tl{--art-ratio:330/84;--art-size:480.60606061% auto;--art-position:0.00000000% 0.00000000%;}
#crossroads .crossroads-corner-bl{--art-ratio:450/172;--art-size:352.44444444% auto;--art-position:0.00000000% 100.00000000%;}
#crossroads .crossroads-corner-br{--art-ratio:482/170;--art-size:329.04564315% auto;--art-position:100.00000000% 100.00000000%;}
}
/* Approved-reference fit: keep mobile body at19px; tune only the longer intro and desktop display runs. */
@media(min-width:380px) and (max-width:599px){
 #crossroads .crossroads-intro{letter-spacing:-.8px}
 #crossroads .crossroads-body{margin-top:6px}
 #crossroads .crossroads-point{padding-block:6.8px}
 #crossroads .section-action{margin-top:14px}
}
@media(min-width:1100px){
 #crossroads .section-title{font-size:clamp(33px,2.915vw,48.5px);line-height:1.28;letter-spacing:-1.8px}
 #crossroads .crossroads-point-3 .crossroads-point-copy{width:111.111%;max-width:none;transform:scaleX(.9);transform-origin:left center}
}
/* Endpoint spacing and inset-media edge continuity. */
@media(min-width:380px) and (max-width:599px){#crossroads{padding-bottom:38px}#crossroads .crossroads-intro{letter-spacing:-.85px}}
@media(min-width:600px) and (max-width:1099px){#crossroads .crossroads-scene{mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 4%,#000 94%,transparent);mask-composite:intersect}}
@media(min-width:1100px){#crossroads{padding-bottom:clamp(49px,3.925vw,63px)}}
/* Approved seam adaptation: decoration only. Thirty pixels of quiet space on each
   side of the upper join; the lower blend also covers the next section's1px rule. */
#crossroads{overflow:visible;z-index:1}
#crossroads:before,#crossroads:after{content:'';position:absolute;left:0;width:100%;z-index:4;pointer-events:none}
#crossroads:before{top:-30px;height:60px;background:linear-gradient(180deg,rgba(248,248,246,0),#f8f8f6 48%,#f8f8f6 52%,rgba(248,248,246,0))}
#crossroads:after{bottom:-1px;height:39px;background:linear-gradient(180deg,rgba(246,241,231,0),#f6f1e7 92%,#f6f1e7)}
@media(max-width:1099px){
 #crossroads .crossroads-corner-tr{clip-path:none;mask-image:linear-gradient(#000 70%,transparent),linear-gradient(270deg,#000 75%,transparent),linear-gradient(#000 24%,transparent 42.609%),linear-gradient(90deg,transparent 77.359%,#000 93%);mask-composite:intersect,intersect,add}
 #crossroads .crossroads-corner-bl{clip-path:none;mask-image:linear-gradient(90deg,#000 60%,transparent),linear-gradient(90deg,#000 17%,transparent 31.667%),linear-gradient(0deg,#000 25%,transparent 51.852%);mask-composite:intersect,add}
 #crossroads .crossroads-corner-br{clip-path:none;mask-image:linear-gradient(270deg,#000 60%,transparent),linear-gradient(270deg,#000 17%,transparent 30.81%),linear-gradient(0deg,#000 25%,transparent 51.852%);mask-composite:intersect,add}
}
@media(min-width:1695px){#crossroads .crossroads-scene{mask-image:linear-gradient(90deg,transparent,#000 4%,#000 95%,transparent),linear-gradient(#000 87%,transparent);mask-composite:intersect}}
/* Feather the exposed top of the two lower safe windows, retaining the no-letter L mask. */
@media(max-width:1099px){
 #crossroads .crossroads-corner-bl{mask-image:linear-gradient(transparent,#000 18%),linear-gradient(90deg,#000 60%,transparent),linear-gradient(90deg,#000 17%,transparent 31.667%),linear-gradient(0deg,#000 25%,transparent 51.852%);mask-composite:intersect,intersect,add}
 #crossroads .crossroads-corner-br{mask-image:linear-gradient(transparent,#000 18%),linear-gradient(270deg,#000 60%,transparent),linear-gradient(270deg,#000 17%,transparent 30.81%),linear-gradient(0deg,#000 25%,transparent 51.852%);mask-composite:intersect,intersect,add}
}