/* A guided opening, with a single human sequence. */
.intro-invitation{position:absolute;z-index:8;top:calc(var(--nav-height) + 40px);left:50%;transform:translateX(-50%);width:min(280px,28vw);text-align:center;pointer-events:auto;color:#38313b}
.intro-invitation>p{font-family:var(--type-cn);font-size:15px;letter-spacing:.15em;margin:0 0 16px}
.intro-express{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:48px;padding:0 22px;border:1px solid #ffffff40;border-radius:999px;background:linear-gradient(135deg,#332b35,#161319);color:#fff;font-size:12px;letter-spacing:.06em;box-shadow:0 7px 20px #20132616,inset 0 1px 0 #ffffff30;transition:box-shadow .25s,transform .25s}
.intro-express:hover{transform:translateY(-2px);box-shadow:0 12px 25px #20132625}
.intro-express:disabled{cursor:default}
.intro-express__dot{width:5px;height:5px;border-radius:50%;background:#ede2ea;box-shadow:0 0 10px #ddbedc75}
html.is-guided-scroll{scroll-behavior:auto!important}
/* The whole capability card floats; hover gently settles it. */
.capability-portal{--portal-float-y:0px;transform:translate3d(0,var(--portal-float-y),0);transition:border-color .28s,box-shadow .3s;outline:2px solid transparent;outline-offset:-2px;will-change:transform}
.capability-portal:hover,.capability-portal:focus-within{transform:translate3d(0,var(--portal-float-y),0);border-color:var(--portal-color);outline-color:var(--portal-color);box-shadow:0 28px 60px #29223014}
/* The dialog is the final focused surface; the temporary rounded proxy grows from the clicked card. */
dialog[open]{animation:none}
.detail-dialog::backdrop,.modal-dialog::backdrop{background:rgb(25 20 29 / 0);backdrop-filter:blur(0px);transition:background .65s ease,backdrop-filter .65s ease}
.detail-dialog.is-focus-open::backdrop,.modal-dialog.is-focus-open::backdrop{background:rgb(25 20 29 / .35);backdrop-filter:blur(13px)}
dialog[data-focus-closing]{pointer-events:none}
.focus-morph-layer{z-index:2147483647!important;isolation:isolate;max-width:none!important;max-height:none!important;outline:0!important;scrollbar-width:none}
.focus-morph-layer::backdrop{background:transparent;backdrop-filter:none;pointer-events:none}
.focus-morph-layer *{pointer-events:none!important;animation-play-state:paused!important;transition:none!important}
.focus-morph-layer .portal-network{filter:none!important}
.portfolio-mode-switch .portfolio-skip{margin-left:6px;border-left:1px solid #ded9e3;border-radius:0 23px 23px 0;color:#77647a;padding-left:18px}
.portfolio-mode-switch .portfolio-skip:hover{background:#f4eff5;color:#3d3044}
#contact:focus-visible{outline:2px solid #987b94;outline-offset:-5px}
@media(max-width:1100px){.intro-invitation{top:calc(var(--nav-height) + 30px);width:260px}.capability-portal{will-change:auto}}
@media(max-width:768px){.intro-invitation{top:calc(var(--nav-height) + 24px);width:250px}.intro-invitation>p{font-size:14px;margin-bottom:14px}.intro-express{min-height:46px;font-size:11px;padding-inline:20px}.portfolio-mode-switch{max-width:calc(100vw - 40px);white-space:nowrap}.portfolio-mode-switch button{font-size:9px;padding:8px 10px}.portfolio-mode-switch .portfolio-skip{padding-left:11px;margin-left:2px}.nav__utility{gap:12px}.capability-portal{will-change:auto}}
html[data-reduced-motion=true] .intro-invitation{display:none}
html[data-reduced-motion=true] .capability-portal{transform:none!important;will-change:auto}
@media(prefers-reduced-motion:reduce){.capability-portal,.intro-express{transform:none!important;transition:none!important}.intro-invitation{display:none}dialog::backdrop{transition:none!important;backdrop-filter:none!important}}
/* Native focus changes stay immediate; deliberate navigation uses the cancellable guide. */
html{scroll-behavior:auto}

main>section[id],footer[id]{scroll-margin-top:64px}