.calc-symbol{padding:5px 7px 7px 5px;gap:0;grid-template-rows:1fr 1fr;line-height:1}
.calc-symbol span{display:grid;place-items:center;line-height:1}
.landing-progress{position:fixed;inset:0 0 auto;height:4px;background:#e5d2b51a;z-index:10000;pointer-events:none}
.landing-progress span{display:block;height:100%;background:#d2ac70;transform:scaleX(var(--page-progress,0));transform-origin:left}
.about{position:relative;isolation:isolate;overflow:hidden;background:#eeeee4}
.about>.wrap{position:relative;z-index:1}
.landing-horizon{position:absolute;inset:0;z-index:0;pointer-events:none;transform:translateY(var(--horizon-y,0px));background:radial-gradient(ellipse at 83% 100%,#c8a16635,transparent 65%)}
.landing-horizon-sun{position:absolute;width:560px;height:560px;right:-60px;bottom:-350px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#e8cf9545,#b6904d12 65%,transparent 70%);border:1px solid #b28a4433;box-shadow:0 -20px 100px #cfa85b18}
.landing-horizon:after{content:"";position:absolute;left:0;right:0;bottom:34px;height:1px;background:linear-gradient(90deg,transparent,#b38b4e66,transparent);box-shadow:0 0 25px #bd934e55}
.callback{position:relative;isolation:isolate;overflow:hidden}
.callback>.wrap{position:relative;z-index:1}
.callback-vial{position:absolute;right:-105px;bottom:-25px;width:290px;height:290px;object-fit:contain;pointer-events:none;opacity:.75;transform:rotate(12deg);filter:drop-shadow(0 10px 25px #e5d2b518)}
.callback-grid>div{padding-right:55px}
.motion-ready .callback-vial{opacity:0;transform:translate(50px,25px) rotate(22deg);transition:opacity 1s ease,transform 1.3s cubic-bezier(.2,.7,.2,1)}
.motion-ready.is-revealed .callback-vial{opacity:.75;transform:translate(0,0) rotate(12deg)}
@media(min-width:1500px){.callback-vial{right:0;width:320px;height:320px}}
@media(max-width:680px){.landing-horizon-sun{width:360px;height:360px;bottom:-220px;right:-140px}.callback-vial{position:relative;display:block;right:auto;bottom:auto;width:170px;height:170px;margin:0 auto -10px;opacity:1}.callback-grid>div{padding-right:26px}.motion-ready.is-revealed .callback-vial{opacity:1}}
@media(prefers-reduced-motion:reduce){.landing-horizon{transform:none}.motion-ready .callback-vial,.motion-ready.is-revealed .callback-vial{opacity:1;transform:rotate(8deg);transition:none}}

/* Contrast the four pathways with the light editorial sections around them. */
.pathways{background:#17191a;color:#f8f5ed;padding-block:52px 56px}
.path-grid{background:#1e2122;border-color:#e5d2b530}
.path.primary{background:#272a28}
.path+.path,.path:nth-child(n+3){border-color:#e5d2b530}
.path .num,.path.primary .num{color:#e5d2b5}
.path h3{color:#f8f5ed}
.path p,.path.primary p{color:#c8cac4}
.path .text-link,.path.primary .text-link{color:#e5d2b5;border-bottom-color:#b7986a}
.path .text-link:hover{color:#fff1d9;border-bottom-color:#fff1d9}
.path .text-link:focus-visible{outline-color:#e5d2b5}
@media(max-width:680px){.pathways{padding-block:38px 40px}}

/* Let the seam vial float in front of the next section. */
.landing-vial-bridge{z-index:2}
.pathways{z-index:1}
.landing-bridge-vial{z-index:1}

/* Keep the callback vial intact, behind the copy, with restrained contrast. */
.callback-vial{right:18px;bottom:24px;width:250px;height:250px;opacity:.2}
.motion-ready.is-revealed .callback-vial{opacity:.2}
@media(min-width:1500px){.callback-vial{right:24px;width:280px;height:280px}}
@media(max-width:680px){.callback-vial{position:absolute;right:-12px;bottom:20px;width:190px;height:190px;margin:0;opacity:.12}.motion-ready.is-revealed .callback-vial{opacity:.12}}
@media(prefers-reduced-motion:reduce){.motion-ready .callback-vial,.motion-ready.is-revealed .callback-vial{opacity:.2}}

.callback-grid>div{padding-right:0}