/* The section is its own viewport-sized scene, pinned while the two routes are drawn. */
.c2-connections{--c2-forward:1;--c2-reverse:1;--c2-reverse-reveal:1;--c2-match-stamp:0;--c2-super-stamp:1;--c2-match-copy:0;--c2-super-copy:1;--c2-reverse-y:0px;position:relative;height:260svh;background:#101c36;color:#fff;isolation:isolate}
.c2-sticky{position:sticky;top:0;display:flex;align-items:center;height:100svh;min-height:0;overflow:hidden;background:radial-gradient(circle at 50% 72%,#34335d 0,#1a2544 28%,#101c36 68%)}
.c2-sticky:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#ffffff04 1px,transparent 1px),linear-gradient(0deg,#ffffff04 1px,transparent 1px);background-size:68px 68px;mask-image:linear-gradient(180deg,transparent 10%,#000 45%,transparent 100%)}
.c2-ambient{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 36% 20% at 50% 67%,#c5baff32,transparent 76%),radial-gradient(ellipse 25% 32% at 80% 35%,#ffcfdd1c,transparent 83%),radial-gradient(ellipse 25% 32% at 20% 80%,#bce6ff14,transparent 83%);opacity:calc(.35 + .65 * var(--c2-reverse-reveal))}
.c2-shell{position:relative;z-index:1;width:min(100% - 80px,1280px);margin:auto;padding:26px 0 22px}
.c2-topline{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:11px;border-bottom:1px solid #ffffff43;color:#c5c3f5;font-size:10px;font-weight:800;letter-spacing:.19em}
.c2-topline-tail{color:#9fadcb;font-size:9px;letter-spacing:.14em}
.c2-topline-tail i{margin-left:8px;color:#e4dcff;font-size:14px;font-style:normal}
.c2-intro{display:flex;justify-content:space-between;align-items:end;gap:42px;padding-top:22px}
.c2-intro h2{flex:none;margin:0;font-size:clamp(4rem,6.5vw,6.8rem);font-weight:700;line-height:.96;letter-spacing:-.083em}
.c2-intro h2 em{color:#d5cffd;font-style:normal}
.c2-intro p{max-width:400px;margin:0 0 5px;color:#c2cbdf;font-size:clamp(13px,1.15vw,16px);line-height:1.6}

.c2-field{--c2-portrait:clamp(132px,min(13vw,20vh),180px);position:relative;height:clamp(410px,53vh,510px);margin-top:10px}
.c2-field:before{content:"";position:absolute;left:50%;top:3%;bottom:9%;width:1px;background:linear-gradient(transparent,#ffffff29 25%,#ffffff29 75%,transparent);transform:translateX(-50%)}
.c2-person{position:absolute;z-index:4;top:0;display:flex;align-items:center;gap:11px;color:#dce3f1;font-size:10px;font-weight:800;letter-spacing:.18em}
.c2-person-a{left:calc(16% - 84px)}
.c2-person-b{right:calc(16% - 84px)}
.c2-person-monogram{display:grid;place-items:center;width:31px;height:31px;border:1px solid #ffffff66;border-radius:50%;background:#ffffff14;color:#fff;font-size:12px;letter-spacing:0}
.c2-paths{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.c2-route-bed,.c2-route-glow,.c2-route{fill:none;stroke-linecap:round}
.c2-route-bed{stroke:#b4bee085;stroke-width:2;stroke-dasharray:2 10;opacity:.55}
.c2-route-bed-reverse{opacity:calc(.15 * var(--c2-reverse-reveal))}
.c2-route-glow{stroke-width:24;filter:url(#c2-line-glow)}
.c2-route-glow-forward,.c2-route-forward{stroke:url(#c2-forward-gradient)}
.c2-route-glow-reverse,.c2-route-reverse{stroke:url(#c2-reverse-gradient)}
.c2-route-glow-forward{opacity:calc(.65 * var(--c2-forward))}
.c2-route-glow-reverse{opacity:calc(.7 * var(--c2-reverse))}
.c2-route{stroke-width:5}
.c2-route-dot{fill:#fff;filter:drop-shadow(0 0 8px #dedaff)}
.c2-route-dot-forward{opacity:var(--c2-forward)}
.c2-route-dot-reverse{opacity:var(--c2-reverse)}
.c2-figure{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;width:var(--c2-portrait);text-align:center}
.c2-figure-top{top:calc(25% - var(--c2-portrait) / 2)}
.c2-figure-bottom{top:calc(71.15% - var(--c2-portrait) / 2);opacity:calc(.12 + .88 * var(--c2-reverse-reveal));transform:translateY(var(--c2-reverse-y))}
.c2-figure-a-extra,.c2-figure-a-wanted{left:calc(16% - var(--c2-portrait) / 2)}
.c2-figure-b-wanted,.c2-figure-b-extra{right:calc(16% - var(--c2-portrait) / 2)}
.c2-portrait{position:relative;width:var(--c2-portrait);height:var(--c2-portrait);overflow:hidden;border:1px solid #ffffff8a;border-radius:50%;background:#f4edee;box-shadow:0 0 0 8px #ffffff0e,0 22px 50px #040b25a6}
.c2-portrait:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 24px #101c3640;pointer-events:none}
.c2-sheet{display:block;width:100%;height:100%;background-image:url('/assets/woodland-figures-matte.webp');background-size:300% 200%;background-repeat:no-repeat}
.c2-tile-4{background-position:50% 100%}
.c2-tile-5{background-position:100% 100%}
.c2-figure-wanted .c2-portrait{border:1px dashed #e5e9ffad;background:#cad5ef66;box-shadow:0 0 0 8px #ffffff08}
.c2-figure-wanted .c2-sheet{filter:grayscale(1) brightness(1.35);opacity:.36}
.c2-figure-role{margin-top:12px;color:#f6d6e8;font-size:9px;font-weight:800;letter-spacing:.15em;line-height:1.2;white-space:nowrap}
.c2-figure-wanted .c2-figure-role{color:#bfd5fa}
.c2-figure strong{margin-top:4px;color:#e7ecf7;font-size:11px;font-weight:600;line-height:1.25;white-space:nowrap}
.c2-figure-wanted strong{color:#b8c6df}
.c2-stamps{position:absolute;z-index:5;top:50%;left:50%;width:154px;height:154px;transform:translate(-50%,-50%)}
.c2-stamp{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #ffffffc2;border-radius:50%;background:#202d50e8;box-shadow:0 0 0 7px #ffffff12,0 22px 55px #02091e9c;text-align:center;backdrop-filter:blur(16px)}
.c2-stamp-match{opacity:var(--c2-match-stamp);transform:scale(calc(.75 + .25 * var(--c2-match-stamp)))}
.c2-stamp-super{border-color:#eee6ff;background:radial-gradient(circle at 35% 25%,#745ca8,#393668 50%,#272e52);opacity:var(--c2-super-stamp);transform:rotate(calc(-16deg + 16deg * var(--c2-super-stamp))) scale(calc(.68 + .32 * var(--c2-super-stamp)));box-shadow:0 0 0 7px #e5dcff1d,0 0 65px #b3a8ff69,0 22px 55px #02091e9c}
.c2-stamp-symbol{display:grid;place-items:center;width:28px;height:28px;margin-bottom:7px;border:1px solid #ffffffb8;border-radius:50%;color:#f4d7ea;font-size:17px;line-height:1}
.c2-stamp strong{color:#fff;font-size:20px;font-weight:800;letter-spacing:.03em;line-height:1.05}
.c2-stamp-super strong{font-size:19px}
.c2-stamp small{margin-top:8px;color:#d9d6f5;font-size:8px;font-weight:800;letter-spacing:.15em;white-space:nowrap}

.c2-bottomline{display:flex;align-items:end;gap:28px;min-height:65px;border-top:1px solid #ffffff31;padding-top:12px}
.c2-stage-copy{position:relative;flex:1;min-height:43px}
.c2-stage-copy p{position:absolute;left:0;top:0;max-width:590px;margin:0;color:#d8dfec;font-size:13px;line-height:1.5}
.c2-stage-copy p span{display:block;margin-bottom:3px;color:#c3b9f5;font-size:9px;font-weight:800;letter-spacing:.17em}
.c2-copy-match{opacity:var(--c2-match-copy);transform:translateY(calc(6px * (1 - var(--c2-match-copy))))}
.c2-copy-super{opacity:var(--c2-super-copy);transform:translateY(calc(6px * (1 - var(--c2-super-copy))))}
.c2-progress{display:flex;gap:6px;align-self:center}
.c2-progress i{display:block;width:34px;height:3px;border-radius:99px;background:#ffffff3b}
.c2-progress i:before{content:"";display:block;width:100%;height:100%;background:#dbd3ff;transform:scaleX(var(--c2-forward));transform-origin:left}
.c2-progress i:last-child:before{transform:scaleX(var(--c2-reverse))}
.c2-scroll-cue{align-self:center;color:#9faccc;font-size:9px;font-weight:800;letter-spacing:.13em;white-space:nowrap}

@media(max-width:900px){
  .c2-shell{width:min(100% - 52px,1280px)}
  .c2-intro h2{font-size:clamp(3.5rem,7vw,5.6rem)}
  .c2-intro p{max-width:320px}
  .c2-field{--c2-portrait:clamp(120px,min(15vw,20vh),160px)}
  .c2-stamps{width:132px;height:132px}
  .c2-stamp strong{font-size:17px}
  .c2-stamp-super strong{font-size:16px}
}
@media(max-width:640px){
  .c2-connections{height:310svh}
  .c2-shell{width:min(100% - 36px,1280px);padding:18px 0 14px}
  .c2-topline{font-size:9px}
  .c2-topline-tail{display:none}
  .c2-intro{display:block;padding-top:18px}
  .c2-intro h2{font-size:clamp(3.1rem,11vw,4.6rem)}
  .c2-intro p{max-width:100%;margin-top:13px;font-size:12px;line-height:1.5}
  .c2-field{--c2-portrait:clamp(92px,27vw,116px);height:clamp(360px,48svh,430px);margin-top:14px}
  .c2-person{gap:6px;font-size:9px;letter-spacing:.06em}
  .c2-person-monogram{width:24px;height:24px;font-size:10px}
  .c2-person-a{left:0}
  .c2-person-b{right:0}
  .c2-figure-a-extra,.c2-figure-a-wanted{left:calc(16% - var(--c2-portrait) / 2)}
  .c2-figure-b-wanted,.c2-figure-b-extra{right:calc(16% - var(--c2-portrait) / 2)}
  .c2-portrait{box-shadow:0 0 0 5px #ffffff0e,0 12px 30px #040b258c}
  .c2-figure-role{margin-top:7px;font-size:9px;letter-spacing:.02em}
  .c2-figure strong{font-size:10px}
  .c2-stamps{width:102px;height:102px}
  .c2-stamp{box-shadow:0 0 0 5px #ffffff12,0 10px 30px #02091e9c}
  .c2-stamp-symbol{width:20px;height:20px;margin-bottom:4px;font-size:13px}
  .c2-stamp strong,.c2-stamp-super strong{font-size:13px}
  .c2-stamp small{margin-top:4px;font-size:8px;letter-spacing:.06em}
  .c2-bottomline{gap:10px;min-height:72px}
  .c2-stage-copy p{font-size:11px}
  .c2-progress{display:none}
  .c2-scroll-cue{display:none}
}
@media(prefers-reduced-motion:reduce){
  .c2-connections{height:auto}
  .c2-sticky{position:relative;height:auto;min-height:760px}
  .c2-shell{padding-top:40px;padding-bottom:40px}
  .c2-scroll-cue{display:none}
}
.c2-illustrative{color:#9faccc;font-size:9px;font-weight:800;letter-spacing:.13em;white-space:nowrap}
.c2-aftercare{position:relative;background:#101c36;color:#fff;padding:1px 0 68px}
.c2-aftercare .h-trade-note{margin-top:0}
@media(max-width:640px){.c2-illustrative{margin-left:auto;font-size:8px;letter-spacing:.06em}.c2-aftercare{padding-bottom:54px}}
@media(max-width:640px) and (min-height:821px){.c2-shell{padding-top:46px}}
@media(max-width:640px) and (min-height:701px) and (max-height:820px){
  .c2-sticky{align-items:flex-start}
  .c2-shell{padding:78px 0 14px}
  .c2-field{height:clamp(300px,42svh,350px)}
}
@media(max-width:640px) and (max-height:700px) and (prefers-reduced-motion:no-preference){
  .c2-sticky{align-items:flex-start}
  .c2-shell{padding:70px 0 12px}
}
@media(min-width:641px) and (max-width:900px) and (max-height:900px){
  .c2-sticky{align-items:flex-start}
  .c2-shell{padding:clamp(82px,10vh,100px) 0 12px}
  .c2-intro{padding-top:10px}
  .c2-intro h2{font-size:clamp(3.2rem,6.8vw,4rem)}
  .c2-field{--c2-portrait:clamp(100px,min(12vw,16vh),130px);height:clamp(305px,43vh,390px);margin-top:6px}
  .c2-bottomline{min-height:57px}
}
@media(min-width:901px) and (max-height:950px){
  .c2-sticky{align-items:flex-start}
  .c2-shell{padding:clamp(92px,13.5vh,110px) 0 10px}
  .c2-intro{padding-top:12px}
  .c2-intro h2{font-size:clamp(4rem,5.5vw,5.2rem)}
  .c2-field{--c2-portrait:clamp(105px,min(10vw,16vh),140px);height:clamp(315px,47vh,445px);margin-top:6px}
  .c2-bottomline{min-height:57px}
}

@media(max-width:640px) and (max-height:700px) and (prefers-reduced-motion:no-preference){
  .c2-shell{padding:70px 0 8px}
  .c2-topline{padding-bottom:5px;font-size:8px}
  .c2-intro{padding-top:8px}
  .c2-intro h2{font-size:clamp(2.3rem,10vw,2.8rem)}
  .c2-intro p{margin-top:6px;font-size:10px;line-height:1.3}
  .c2-field{--c2-portrait:clamp(80px,23vw,90px);height:clamp(230px,42svh,270px);margin-top:5px}
  .c2-person{font-size:7px}
  .c2-figure-top{top:calc(22% - var(--c2-portrait) / 2)}
  .c2-figure-bottom{top:calc(69% - var(--c2-portrait) / 2)}
  .c2-figure-role{margin-top:4px;font-size:8px}
  .c2-figure strong{margin-top:2px;font-size:9px}
  .c2-bottomline{min-height:45px;padding-top:6px}
  .c2-stage-copy{min-height:33px}
  .c2-stage-copy p{font-size:9px;line-height:1.3}
  .c2-stage-copy p span{margin-bottom:2px;font-size:7px}
}