/* Variant 3 only. Keep a mask as the animation owner, but allow its text to
   wrap within the actual content width. nowrap made German compounds wider
   than mobile cards and clipped the final line of the about heading. */
.editing-story main .page-word-mask{max-width:100%}
.editing-story main .page-word-rise{max-width:100%;white-space:normal;overflow-wrap:anywhere;hyphens:auto}
.editing-story .about h2{font-size:clamp(36px,4.5vw,70px)}
/* Touch-sized controls retain their existing labels and actions. */
.editing-story .top nav>a,.editing-story .top nav>button{min-height:44px;display:inline-flex;align-items:center}
.editing-story .close{min-width:44px;min-height:44px}
@media(max-width:760px){
 .editing-story .top nav{font-size:12px;gap:14px}
 .editing-story .top nav a:nth-child(2){display:none}
 .editing-story .story-bottom p,.editing-story .section-heading>p,
 .editing-story .process p,.editing-story .about p,
 .editing-story .split-detail ul,.editing-story dialog p{font-size:16px}
 .editing-story .split-detail .link{min-height:44px;font-size:14px}
 .editing-story .split-back{padding:26px}
 .editing-story .about h2{font-size:clamp(36px,9vw,50px)}
}

@media(min-width:761px) and (max-width:1099px){
 .editing-story .about{grid-template-columns:1fr;gap:25px}
 .editing-story .about>div{margin:0;max-width:550px}
 .editing-story .about h2{font-size:60px}
}

/* Full-height stage centers a compact, content-sized card group.
   Scroll travel remains short; the cards never stretch to fill a tall screen. */
.editing-story .split-enhanced .split-stage{height:calc(100svh - 80px)}
.editing-story .split-enhanced .split-track{height:calc(320svh - 80px)}
html.nercy-smooth-scroll{scroll-behavior:auto;scrollbar-gutter:stable}
html.nercy-scroll-locked{overflow:hidden}
.editing-story dialog{overscroll-behavior:contain}

.editing-story .split-enhanced .split-cards{height:min(560px,calc(100svh - 180px));flex:none}

/* Mobile: a native, reversible stack, independent of desktop's split panorama.
   A tall card sticks at its bottom after every line has passed through view. */
@media(max-width:1099px) and (prefers-reduced-motion:no-preference){
 .editing-story .split-mobile-stack .split-cards{display:flex;flex-direction:column;gap:clamp(64px,12svh,110px);isolation:isolate}
 .editing-story .split-mobile-stack .split-card{position:sticky;top:calc(min(32px,100svh - var(--mobile-card-height) - 56px) + var(--mobile-stack-index)*12px);min-height:var(--mobile-card-height);z-index:calc(1 + var(--mobile-stack-index));box-shadow:0 -8px 28px #28251f12;scroll-margin-top:32px}
 .editing-story .split-mobile-stack .split-back{position:relative}
}
/* Give the intro's highlighted words a little more breathing room. */
.editing-story .intro-keyword{padding-inline:max(12px,.25em);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.editing-story .intro-reading-copy .intro-block{max-width:calc(100% - 5px);overflow-wrap:anywhere}

/* Service CTAs stay in normal flow and share the card's bottom alignment. */
.editing-story .split-card{display:flex;flex-direction:column}
.editing-story .split-back,.editing-story .split-consult>div{display:flex;flex-direction:column;flex:1;min-width:0}
.editing-story .split-detail{display:flex;flex-direction:column;flex:1;min-width:0}
.editing-story .split-detail .scope{margin-bottom:20px}
.editing-story .split-detail>.link[data-contact],.editing-story .about>div>.link[data-contact]{margin-top:auto;width:100%;min-height:48px;flex-shrink:0;gap:16px;padding:12px 18px;border:1px solid #28251f;border-radius:999px;background:#28251f;color:#fffdf7;font-size:14px;font-weight:600;line-height:1.4;text-align:left;transition:background-color .2s,color .2s}
.editing-story .split-detail>.link[data-contact]:hover,.editing-story .about>div>.link[data-contact]:hover{background:#463f33;border-color:#463f33}
.editing-story .split-detail>.link[data-contact]:focus-visible,.editing-story .about>div>.link[data-contact]:focus-visible{outline:3px solid #c64a26;outline-offset:4px}

/* Align the personal introduction with the process copy above, rather than
   pushing its narrow measure against the right edge of the page. */
@media(min-width:1100px){
 .editing-story .about{column-gap:10%}
 .editing-story .about>div{margin-left:35px;margin-right:0}
}