.page-opening-stage{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);column-gap:5vw;align-content:center;justify-content:initial}.page-opening-stage>.kicker,.page-opening-stage>h1,.page-opening-stage>.inner-intro,.page-opening-stage>.page-cue{grid-column:1}.page-opening-stage h1{font-size:clamp(50px,6.1vw,100px);line-height:1.02}.page-circle{--circle-tone:#d3ed62;grid-column:2;grid-row:1/5;align-self:center;position:relative;width:100%;aspect-ratio:1;transform:rotate(var(--circle-tilt,0deg));view-transition-name:journey-circle}.page-circle svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.circle-guide{stroke:#8acdc455;stroke-width:1;fill:none}.circle-progress{fill:none;stroke:var(--circle-tone);stroke-width:12;stroke-dasharray:1;stroke-dashoffset:var(--circle-progress,.9);transform:rotate(-90deg);transform-origin:200px 200px;stroke-linecap:round;transition:stroke .6s}.circle-dot{transform:rotate(var(--circle-angle,0deg));transform-origin:200px 200px}.circle-dot circle{fill:#eeeee5}.circle-face{position:absolute;inset:11%;border-radius:50%;background:var(--circle-tone);color:#123c40;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:20px;transition:background .6s;transform:rotate(calc(-1 * var(--circle-tilt,0deg)))}.circle-word{font:clamp(30px,3.8vw,62px)/1 Uni,Arial,sans-serif;max-width:95%;overflow-wrap:anywhere}.circle-position{font:9px Arial,sans-serif;text-transform:uppercase;letter-spacing:.1em}.circle-caption{font:12px Arial,sans-serif;max-width:80%;line-height:1.4}.inner-main .page-opening{min-height:125svh}.company-description{margin-top:30px!important}.page-circle{pointer-events:none}.paused .page-circle,.paused .circle-face,.paused .circle-dot{transform:none!important}.clipboard-home .contact{background:#c4d7c5}.clipboard-home .opening h2{font-size:clamp(40px,5.2vw,82px);line-height:1.08}.clipboard-home .opening h2 em{font-style:italic}
.next-page .line-link{view-transition-name:next-chapter-link}.next-page{position:relative}.next-page:after{content:'↗';position:absolute;right:0;top:50%;width:90px;height:90px;border:1px solid #8acdc455;border-radius:50%;display:grid;place-items:center;color:#d3ed62;font:35px Arial,sans-serif;pointer-events:none}.business-path .page-circle{--circle-tone:#8dc0df}
@media(max-width:800px){.page-opening-stage{display:flex;flex-direction:column;align-items:stretch;padding-top:125px}.page-opening-stage h1{font-size:14vw;margin:30px 0}.page-circle{order:4;width:190px;margin:35px 0 5px;align-self:flex-end}.page-cue{order:5;margin-top:25px}.circle-word{font-size:25px}.circle-position{font-size:6px}.circle-caption{font-size:9px}.circle-face{gap:10px}.inner-main .page-opening{min-height:0}.next-page:after{width:55px;height:55px;font-size:24px;top:35px}.clipboard-home .opening h2{font-size:10.3vw}}
@media(prefers-reduced-motion:reduce){.page-circle,.circle-face,.circle-dot{transform:none!important}.circle-progress,.circle-face{transition:none}}
.next-page:after{content:''}.motion-paused::view-transition-group(journey-circle){animation-duration:0s}@media(prefers-reduced-motion:reduce){::view-transition-group(journey-circle){animation-duration:0s}}
/* The opening stage hands over to a compact companion throughout the page. */
.journey-companion{position:fixed;right:28px;bottom:24px;width:142px;aspect-ratio:1;z-index:32;pointer-events:none;opacity:var(--companion-visible,0);transform:translateY(calc((1 - var(--companion-visible,0))*20px)) scale(calc(.85 + var(--companion-visible,0)*.15));transform-origin:bottom right;transition:opacity .18s}.journey-companion .page-circle{width:100%;height:100%;display:block;transform:none;view-transition-name:none;margin:0}.journey-companion .circle-word{font-size:19px;line-height:1.05;max-width:90%}.journey-companion .circle-position{font-size:6px;letter-spacing:.03em}.journey-companion .circle-caption{font-size:7px;max-width:84%}.journey-companion .circle-face{gap:7px;box-shadow:0 5px 30px #0002}.journey-companion .page-circle svg{filter:drop-shadow(0 1px 2px #102d3255)}.inner-page:has(.journey-companion) .site-footer{padding-bottom:150px}
@media(max-width:800px){.journey-companion{width:98px;right:12px;bottom:12px}.journey-companion .circle-word{font-size:13px}.journey-companion .circle-position{font-size:5px}.journey-companion .circle-caption{display:none}.journey-companion .circle-face{gap:5px}.inner-page:has(.journey-companion) .site-footer{padding-bottom:110px}.inner-main .content-row>div{padding-right:0}}
@media(prefers-reduced-motion:reduce){.journey-companion{transition:none;transform:none}}
.journey-companion .circle-face{transform:none}
a.journey-companion{pointer-events:auto;text-decoration:none;border-radius:50%;cursor:pointer;view-transition-name:journey-companion}a.journey-companion:focus-visible{outline:3px solid #eeeee5;outline-offset:4px;box-shadow:0 0 0 8px #123c40}a.journey-companion:hover .circle-face{box-shadow:0 0 0 4px #eeeee544,0 5px 30px #0002}a.journey-companion .circle-caption:after{content:' ↓';font-weight:bold}.company-kylee-black{background:#eeeee5}.company-kylee-black img{max-height:220px}.motion-paused::view-transition-group(journey-companion){animation-duration:0s}@media(prefers-reduced-motion:reduce){::view-transition-group(journey-companion){animation-duration:0s}}
a.journey-companion[href*=".html"] .circle-caption:after{content:' →'}

/* Inner-page stage: all layers use the same square, including mobile. */
.page-opening-stage>.page-circle{box-sizing:border-box;aspect-ratio:1/1;min-height:0;max-width:100%;isolation:isolate}
.page-opening-stage>.page-circle>svg{position:absolute;inset:0;margin:0;padding:0;width:100%;height:100%;display:block;transform:none}
.page-opening-stage .circle-progress,.page-opening-stage .circle-dot{transform-box:view-box;transform-origin:50% 50%}
.page-opening-stage>.page-circle>.circle-face{inset:11%;margin:0;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;text-align:center}
.page-opening-stage .circle-word{display:block;margin:0;width:100%;text-align:center}
@media(max-width:800px){.page-opening-stage>.page-circle{width:190px;height:190px;margin:35px auto 5px;align-self:center;flex:0 0 190px}.page-opening-stage>.page-circle>.circle-face{width:auto;height:auto;transform:none}}