/* NANDA polish layer (phases A, C). Loaded last; scoped to shared chrome and the Prepojenia cards. */
/* ---- A4: discreet round controls (pause / skip) next to the language pill ---- */
.story-controls{position:absolute;z-index:30;top:var(--ctl-top,22px);right:var(--ctl-right,120px);display:flex;gap:2px;align-items:center;pointer-events:none}
.round-ctl{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;min-height:44px;margin:0;padding:0;border:0;background:none;color:#ff8f3c;cursor:pointer;pointer-events:auto;text-decoration:none;-webkit-tap-highlight-color:transparent}
.round-ctl:before{content:'';position:absolute;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(255,138,50,.75);background:rgba(6,14,22,.62);box-shadow:0 0 12px rgba(255,122,30,.18);transition:border-color .2s,box-shadow .2s,background-color .2s}
.round-ctl svg{position:relative;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.round-ctl .ic-play{fill:currentColor;stroke-width:1.2}
.round-ctl .ic-play,.round-ctl[aria-pressed="true"] .ic-pause{display:none}.round-ctl[aria-pressed="true"] .ic-play{display:block}
.round-ctl:hover:before{border-color:#ffab6a;background:rgba(255,138,50,.16);box-shadow:0 0 16px rgba(255,122,30,.4)}
.round-ctl:focus-visible{outline:none}.round-ctl:focus-visible:before{outline:2px solid #ffd2a8;outline-offset:3px;border-color:#ffd2a8}
.story-navigation>#motion-toggle,.story-navigation>#story-skip{display:none}
/* ---- A5: white + vivid orange headline phrase ---- */
.story-copy h1 .hl{font-style:normal;color:#ff8a2a;text-shadow:0 0 24px rgba(255,122,30,.25)}
/* ---- A1/A2/A6: Prepojenia service cards ---- */
.capability-card{background:linear-gradient(135deg,#0a1b27,#071520);border:1px solid rgba(120,150,170,.32);border-radius:10px;box-shadow:0 10px 28px rgba(0,0,0,.35);transition:border-color .22s,box-shadow .22s;isolation:isolate;overflow:hidden;display:flex;flex-direction:column}
.capability-card:before{background:#ff8a2a;opacity:.7;display:block;overflow:visible}
.capability-card:after{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,rgba(255,138,50,.2),rgba(255,138,50,.04) 70%);opacity:0;transition:opacity .22s;pointer-events:none}
.capability-card.is-selected,.capability-card:focus-within{background:linear-gradient(135deg,#0a1b27,#071520);border-color:rgba(255,138,50,.85);box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 18px rgba(255,122,30,.22)}
.capability-card.is-selected:after,.capability-card:focus-within:after{opacity:1}
.capability-select svg{stroke:#ff8a2a;stroke-width:1.35}
.capability-card p{flex:1}
.capability-action{min-height:44px;margin-top:auto;padding-top:0;gap:10px;color:#f3d9c1;font-size:clamp(11px,.7vw,17px);border-top:1px solid rgba(120,150,170,.25)}
.capability-action .cap-go{flex:none;display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(255,138,50,.8);background:rgba(255,138,50,.14);color:#ff8a2a;transition:background-color .2s,color .2s,transform .2s}
.capability-action .cap-go svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.capability-action:hover .cap-go,.capability-action:focus-visible .cap-go{background:#ff8a2a;color:#1a0f08;transform:translateX(2px)}
.capability-card.is-selected .capability-action,.capability-card:focus-within .capability-action{color:#fff}
@media(prefers-reduced-motion:reduce){.capability-card,.capability-card:after,.round-ctl:before,.cap-go{transition:none!important}}
.capability-action .cap-go-t{font-size:inherit;color:inherit;min-width:0}
/* compact (phones / small tablets): descriptions give way to a single title + arrow row when height is short; the copy never moves under the header */
@media(max-width:1100px){
 .architecture-story.capabilities-active .story-copy{top:max(64px,calc(env(safe-area-inset-top,0px) + 60px));transform:translateY(calc(-1 * max(0px,var(--cap-copy-pan,0px))))}
 .capabilities-layer.is-compact .capabilities-cards{opacity:1;visibility:visible;transition:opacity .2s ease,visibility 0s linear 0s}
.capabilities-layer.is-compact .capabilities-cards[data-vis=off]{opacity:0;visibility:hidden;transition:opacity .2s ease,visibility 0s linear .2s}
 .architecture-story.capabilities-active .story-copy>*{opacity:var(--cap-copy-o,1)}
 .capabilities-layer.is-compact{clip-path:inset(0 0 calc(100% - var(--cap-clip,100%)) 0)}
}
@media(max-width:700px){.capability-select{font-size:13.5px}}
/* A10: the environment dimming behind Prepojenia is much lighter so City colours and brightness stay; text keeps its own shadow */
.capabilities-mode .capability-environment-dim{opacity:.28}
.capabilities-active .story-copy h1,.capabilities-active .story-line{text-shadow:0 2px 18px rgba(2,8,14,.85)}

/* Header spans the whole top band but only its links are interactive, so the round controls stay clickable beneath it. */
body:has(.architecture-story)>header{pointer-events:none!important}
body:has(.architecture-story)>header a,body:has(.architecture-story)>header button{pointer-events:auto}

/* ---- C: unified bottom chapter rail (icon + visible name, thin line, luminous active point) — all chapters, desktop + mobile ---- */
.architecture-story .story-navigation{position:absolute!important;z-index:3;left:50%!important;right:auto!important;transform:translateX(-50%);width:min(720px,calc(100% - 16px))!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;
 padding:2px 10px 0!important;gap:0!important;display:block!important;flex-wrap:nowrap!important;border-radius:14px;border:1px solid rgba(150,175,190,.16);background:rgba(5,14,21,.58)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#9fb3bd;font-size:11px}
.architecture-story .story-navigation>.story-progress,.architecture-story .story-navigation>#story-hint{display:none!important}
.architecture-story .story-navigation>nav{position:relative;display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:0!important;width:100%!important;flex:none!important;padding:0!important;flex-wrap:nowrap!important}
.architecture-story .story-navigation>nav::before,.architecture-story .story-navigation>nav::after{content:"";position:absolute;left:var(--rail-l,7%);bottom:7px;height:1px;pointer-events:none}
.architecture-story .story-navigation>nav::before{width:var(--rail-w,86%);background:rgba(160,185,200,.28)}
.architecture-story .story-navigation>nav::after{width:var(--rail-fill,0px);background:linear-gradient(90deg,rgba(255,143,60,.35),#ff8f3c);box-shadow:0 0 8px rgba(255,138,42,.6)}
.architecture-story .story-navigation>nav a{position:relative;display:flex!important;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;min-height:48px;min-width:0;padding:6px 1px 17px!important;border:0!important;border-radius:8px;background:none!important;color:#9fb3bd!important;font-size:11px!important;line-height:1.15;letter-spacing:0;text-align:center;white-space:nowrap;transition:color .25s}
.architecture-story .story-navigation>nav a svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.architecture-story .story-navigation>nav a::after{content:"";position:absolute;left:50%;bottom:4px;width:5px;height:5px;border-radius:50%;transform:translateX(-50%);background:#5d7380;transition:background .25s,box-shadow .25s,transform .25s}
.architecture-story .story-navigation>nav a:hover{color:#e6edf0!important}
.architecture-story .story-navigation>nav a[aria-current=step]{color:#ffd6b0!important}
.architecture-story .story-navigation>nav a[aria-current=step] svg{stroke:#ff9a45}
.architecture-story .story-navigation>nav a[aria-current=step]::after{background:#ff8f3c;box-shadow:0 0 0 2px rgba(255,143,60,.18),0 0 10px 3px rgba(255,138,42,.85);transform:translateX(-50%) scale(1.5)}
.architecture-story .story-navigation>nav a:focus-visible{outline:2px solid #ffb27a;outline-offset:-2px}
@media(max-width:700px){.architecture-story .story-navigation{width:calc(100% - 12px)!important;bottom:calc(6px + env(safe-area-inset-bottom,0px))!important;padding:2px 4px 0!important;border-radius:12px}
 .architecture-story .story-navigation>nav a{font-size:10px!important;letter-spacing:-.01em;gap:2px;padding:6px 0 16px!important}.architecture-story .story-navigation>nav a svg{width:17px;height:17px}}
/* 351–700px: natural-width columns (labels at 10px never collide), every item at least 44px wide */
@media(max-width:700px){.architecture-story .story-navigation>nav{grid-template-columns:repeat(6,auto);justify-content:space-between}.architecture-story .story-navigation>nav a{min-width:44px;padding-left:1px!important;padding-right:1px!important}}
/* <=350px (320 class): seven items cannot be 44px wide at once, so the rail scrolls; the active item is kept centred */
@media(prefers-reduced-motion:reduce){.architecture-story .story-navigation>nav a,.architecture-story .story-navigation>nav a::after{transition:none}}
/* Reserve real layout space for the rail (measured in experience.js as --rail-reserve) */
@media(max-width:700px){.architecture-story[data-chapter="2"] .story-copy{bottom:var(--rail-reserve,78px)!important}}
@media(max-width:700px){.architecture-story[data-chapter="6"] .story-copy,.architecture-story[data-chapter="0"] .story-copy{top:max(64px,calc(env(safe-area-inset-top,0px) + 60px))}}

/* ---- Fix round: desktop four-up row (is-row), tight cards without title/arrow collisions ---- */
.capabilities-layer.is-row .capabilities-cards{position:absolute;display:block;pointer-events:none}
.capabilities-layer.is-row .capability-card{position:absolute;transform:none;padding:6px 8px 11px 14px;min-height:0!important;box-sizing:border-box}
.capabilities-layer.is-row .capability-card:before{display:none}
.capabilities-layer.is-row .capability-card{filter:opacity(1);visibility:visible;transition:filter .2s ease,visibility 0s linear 0s,border-color .22s,box-shadow .22s}
.capabilities-layer.is-row .capability-card[data-vis=off]{filter:opacity(0);visibility:hidden;transition:filter .2s ease,visibility 0s linear .2s,border-color .22s,box-shadow .22s}
@media(prefers-reduced-motion:reduce){.capabilities-layer.is-compact .capabilities-cards,.capabilities-layer.is-row .capability-card{transition:none!important}}
.capabilities-layer.is-row .capability-card p{font-size:clamp(12.5px,.74vw,15px);line-height:1.4;margin:4px 0 8px;max-width:none}
.capabilities-layer.is-row .capability-select{font-size:clamp(15px,1.05vw,19px);min-height:40px}

/* ---- Through-city transition rig (transition.js) ---- */
.tr-bloom{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(circle at var(--fx,50%) var(--fy,55%),rgba(255,160,70,.85) 0,rgba(255,120,40,.35) 16%,rgba(255,110,30,0) 46%);will-change:opacity}
.tr-flows path{fill:none;stroke-linecap:round;stroke:#fff6e2;stroke-width:5.5;filter:drop-shadow(0 0 3px #ffa447) drop-shadow(0 0 9px #ff7a1a)}
.tr-flows .tr-avenue{stroke-width:8}
.tr-flows{opacity:0}
.recovery-frame,.cinematic-city{will-change:auto}

.capabilities-layer{opacity:var(--tr-cards,1)}


/* ---- Recomposed capability cards: [icon + title | 44px arrow] over the description. Nothing is hidden at any size ---- */
.capabilities-layer .capability-card{align-content:start;display:grid;grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"sel act" "desc desc";column-gap:6px;align-items:center;padding:4px 8px 11px 14px;min-height:0!important}
.capabilities-layer .capability-select{grid-area:sel;min-width:0;min-height:44px;padding:0}
.capabilities-layer .capability-select svg{display:block;flex:none;width:20px;height:22px;stroke:#ff8a2a;stroke-width:1.5}
.capabilities-layer .capability-select span{min-width:0;overflow-wrap:normal;word-break:normal;hyphens:manual}
.capabilities-layer .capability-card p{grid-area:desc;margin:0;padding:0 4px 0 0;max-width:none;display:block}
.capabilities-layer .capability-action{grid-area:act;border-top:0;min-height:44px;width:44px;padding:0;margin:0;justify-content:center}
.capabilities-layer .capability-action .cap-go-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.capabilities-layer .capability-card .capability-action .cap-go{width:30px;height:30px}
.capabilities-layer.is-row .capability-card p{font-size:clamp(12.5px,.74vw,15px);line-height:1.4}
@media(max-width:700px){
 .capabilities-layer .capability-card{grid-template-areas:"sel sel" "desc act";grid-template-columns:minmax(0,1fr) 40px;padding:2px 2px 4px 10px;column-gap:2px}
 .capabilities-layer .capability-select{font-size:12.5px;gap:6px;line-height:1.15;min-height:40px}
 .capabilities-layer .capability-select svg{width:16px;height:18px}
 .capabilities-layer .capability-card p{font-size:11.5px;line-height:1.3;align-self:center;padding-bottom:2px}
 .capabilities-layer .capability-action{width:44px;margin-right:-4px}
 .capabilities-layer .capability-card .capability-action .cap-go{width:28px;height:28px}
 .capabilities-cards{gap:8px!important}
}
@media(max-width:380px){.capabilities-layer .capability-select{font-size:12px;gap:5px}.capabilities-layer .capability-card p{font-size:11px}.capabilities-cards{gap:6px!important}}

/* ---- Supporting copy: white text with vivid-orange key phrases (real <em>, never whole paragraphs) ---- */
.story-line,.story-description{color:#f1f5f7}
.architecture-story.capabilities-active .story-line{color:#f1f5f7}
.story-line .hl,.story-description .hl{font-style:normal;font-weight:600;color:#ff8a2a;text-shadow:none}


/* ---- Narrow phones (<=350px): all seven icons + names, deliberate two-row rail (4 + 3), per-row line + luminous active point ---- */
@media(max-width:350px){
 .architecture-story .story-navigation>nav{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;justify-content:stretch;overflow:visible}
 .architecture-story .story-navigation>nav::before,.architecture-story .story-navigation>nav::after{display:none}
 .architecture-story .story-navigation>nav a{min-width:0;min-height:48px;grid-column:span 3;padding:5px 0 15px!important;font-size:10.5px!important}
 .architecture-story .story-navigation>nav a:nth-child(n+5){grid-column:span 4}
 .architecture-story .story-navigation>nav a::before{content:"";position:absolute;left:0;right:0;bottom:6.5px;height:1px;background:rgba(160,185,200,.28);pointer-events:none}
 .architecture-story .story-navigation>nav a:nth-child(1)::before,.architecture-story .story-navigation>nav a:nth-child(5)::before{left:50%}
 .architecture-story .story-navigation>nav a:nth-child(4)::before,.architecture-story .story-navigation>nav a:nth-child(7)::before{right:50%}
 .architecture-story .story-navigation>nav a.is-past::before{background:linear-gradient(90deg,rgba(255,143,60,.45),#ff8f3c);box-shadow:0 0 6px rgba(255,138,42,.5)}
 .architecture-story .story-navigation>nav a[aria-current=step]::before{background:linear-gradient(90deg,rgba(255,143,60,.45),#ff8f3c)}
 .architecture-story .story-navigation>nav a[aria-current=step]:nth-child(1)::before,.architecture-story .story-navigation>nav a[aria-current=step]:nth-child(5)::before{background:linear-gradient(90deg,#ff8f3c,#ff8f3c)}
}

/* ---- Short phones (320x568 class): City copy leaves the tower top free ---- */
@media(max-width:700px) and (max-height:620px){
 .architecture-story[data-chapter="0"] .story-copy{top:max(58px,calc(env(safe-area-inset-top,0px) + 54px))}
 .architecture-story[data-chapter="0"] .story-copy h1{font-size:27px;line-height:1.08;margin-bottom:7px}
 .architecture-story[data-chapter="0"] .story-kicker{margin-bottom:6px;font-size:10px}
 .architecture-story[data-chapter="0"] .story-line{font-size:11.5px;line-height:1.35;margin-bottom:4px}
 .architecture-story[data-chapter="0"] .story-description{font-size:11.5px;line-height:1.35;margin-bottom:8px}
 .architecture-story[data-chapter="0"] .story-copy .button,.architecture-story[data-chapter="0"] #story-cta{min-height:44px;padding-top:0;padding-bottom:0}
}

/* Incoming scene preview during a transition shows its approved plate only; its own UI layer builds in once the chapter is reached (keeps forward and reverse scrolling identical) */
.architecture-story .world .tr-preview .pa-ui,.architecture-story .world .tr-preview .cs-art,.architecture-story .world .tr-preview .ai-art{opacity:0!important;transition:opacity .35s ease!important}

/* Outgoing scene: its chapter-intro veil never darkens the scene while it is being travelled out of */
.architecture-story .world .tr-out .pa-veil,.architecture-story .world .tr-out .cs-veil,.architecture-story .world .tr-out .ai-veil{opacity:0!important}
.capabilities-layer.is-row .capability-select{font-size:clamp(13.5px,.96vw,18px);gap:7px;min-width:0;overflow-wrap:anywhere;hyphens:auto}
.capabilities-layer.is-row .capability-select svg{width:19px;height:21px}
.capabilities-layer.is-row .capability-card{grid-template-columns:minmax(0,1fr) 40px}

/* Match the opening identity in the closing chapter; retain compact phone controls. */
body:has(.architecture-story[data-chapter="6"])>header{position:fixed;top:0;opacity:1;visibility:visible}
@media(min-width:701px){
 body:has(.architecture-story)>header>nav{position:absolute;left:var(--nav-cx,50%);transform:translateX(-50%);margin-left:0;display:flex;align-items:center;justify-content:center;gap:28px;white-space:nowrap}
 body:has(.architecture-story)>header>nav .contact-link{display:inline-flex}
}
body:has(.architecture-story)>header,body:has(.architecture-story:not([data-chapter="0"]))>header{left:0;right:0;width:auto}

/* Mobile legibility and touch targets (WCAG 2.2 SC 2.5.8 / readable text). Kept last so it wins the cascade without touching the approved layouts. */
footer{font-size:12.5px}
.story-kicker,#story-cta{min-height:0}
.architecture-story #story-cta{min-height:44px}
.architecture-story[data-chapter="0"] .story-kicker{font-size:11px}
footer a:not(.wordmark),.hero-foot a{display:inline-flex;align-items:center;min-height:44px}
footer .wordmark{display:inline-flex;align-items:center;min-height:44px}
details>summary{min-height:44px;align-items:center}
.language-pill .language-switch,header .wordmark{position:relative!important;inset:auto!important}
.language-pill .language-switch:after,header .wordmark:after{content:'';position:absolute;inset:-6px}
@media(max-width:700px){
 .city-service-link{font-size:11px!important;line-height:1.15;text-shadow:0 1px 3px #000,0 0 6px rgba(0,0,0,.85)}
 .architecture-story .story-navigation>nav a{font-size:clamp(10px,2.9vw,11px)!important}
}