.sp { --sp-ink:#172d2b; --sp-tint:color-mix(in srgb,var(--sp-accent) 10%,white); color:var(--sp-ink); background:#fff; font-size:16px; line-height:1.7; }
.sp-shell { max-width:1220px; margin:auto; padding:0 32px; }
.sp h1,.sp h2,.sp h3,.sp p,.sp figure { margin:0; }
.sp h1,.sp h2,.sp h3 { color:var(--sp-ink); }
.sp a { color:inherit; }
.sp-hero { background:var(--sp-tint); border-top:1px solid color-mix(in srgb,var(--sp-accent) 20%,white); }
.sp-back { display:inline-block; padding:24px 0; font-size:12px; text-decoration:none; }
.sp-back:hover { text-decoration:underline; }
.sp-hero-grid { display:grid; grid-template-columns:1.45fr 1fr; gap:64px; align-items:center; padding:25px 0 48px; }
.sp .sp-eyebrow { font-size:11px; font-weight:600; letter-spacing:.13em; line-height:1.6; }
.sp-eyebrow span { margin:0 12px; opacity:.4; }
.sp h1 { max-width:740px; margin:18px 0; font-size:clamp(36px,4.4vw,62px); font-weight:600; line-height:1.08; letter-spacing:-.05em; }
.sp .sp-subtitle { max-width:500px; margin-bottom:26px; font-size:22px; line-height:1.45; }
.sp .sp-badge { display:flex; align-items:center; gap:10px; margin:26px 0; font-size:13px; font-weight:500; }
.sp-badge span { display:grid; place-items:center; width:24px; height:24px; border:1px solid var(--sp-accent); border-radius:50%; }
.sp a.sp-button { display:inline-flex; align-items:center; gap:24px; margin-top:8px; padding:14px 20px; background:var(--sp-ink); color:#fff; font-size:13px; text-decoration:none; transition:transform .18s ease,background .18s ease; }
.sp-button span { font-size:22px; }
.sp a.sp-button:hover { transform:translateY(-3px); background:#294c48; }
.sp-visual { position:relative; min-width:0; color:var(--sp-on-accent); padding:18px; background:var(--sp-accent); aspect-ratio:1.12; display:flex; flex-direction:column; justify-content:space-between; animation:sp-enter .7s ease-out; }
.sp-visual-code { font-size:38px; line-height:1; font-weight:600; letter-spacing:-.04em; }
.sp-technical-art { display:block; width:100%; height:auto; margin-top:-8px; }
.sp-visual-label { font-size:9px; letter-spacing:.15em; font-weight:600; }
.sp-visual:has(.sp-photo) { background:transparent; padding:0; aspect-ratio:auto; }
.sp-photo { display:block; width:100%; height:auto; aspect-ratio:1.12; object-fit:cover; }
/* Home page showcase scene (home.css) filling the visual straight on the header background, motion running without hover. */
.sp-visual-scene { --sh-program:var(--sp-accent); padding:0; background:none; }
.sp-visual-scene .sh-program-scene { position:absolute; inset:0; width:100%; height:100%; }
.sp-visual-scene .sh-program-scene * { animation-play-state:running !important; }
.sp-visual-scene .sh-scene-vise3d .kerf-deep { stroke-opacity:.9; }
.sp-visual-scene .sh-scene-site { overflow:visible; transform:scale(1.15); }
/* At this size the load's jolt reads as the heap hopping out of the tray, so it rides still with the barrow. */
.sp-visual-scene .sh-scene-site .load { animation:none; }
/* The data pulses on the patch cable only show on hover on the home page; here the scene always runs. */
.sp-visual-scene .sh-scene-rack3d { overflow:visible; transform:scale(1.12); }
.sp-visual-scene .sh-scene-rack3d .data { opacity:1; }
/* The air-conditioning scene: the unit LED only lights on hover on the home page. */
.sp-visual-scene .sh-scene-ac3d { overflow:visible; transform:scale(1.08); }
.sp-visual-scene .sh-scene-ac3d .led { fill:#7dffa8; filter:drop-shadow(0 0 1.2px #7dffa8); }
/* The energy-efficient house: windows light up and energy flows only on hover on the home page. */
.sp-visual-scene .sh-scene-house3d { overflow:visible; transform:scale(1.15); }
.sp-visual-scene .sh-scene-house3d .window { fill:#ffd76a; }
.sp-visual-scene .sh-scene-house3d .energy { opacity:1; }
/* The assembly line: the green lamp glows only on hover on the home page. */
.sp-visual-scene .sh-scene-line3d { overflow:visible; transform:scale(1.1); }
.sp-visual-scene .sh-scene-line3d .lamp-green { filter:drop-shadow(0 0 1.5px #7dffa8); }
/* With a scene, the whole header (hero and the facts strip below it) takes the scene's gradient and grid in light text.
   The gradient runs left to right only, so the two stacked sections meet without a seam. */
.sp-hero:has(.sp-visual-scene), body:has(.sp-visual-scene) .sp-v2-facts .sp-hero { --sp-ink:#fff; position:relative; isolation:isolate; overflow:clip; border-top:0; color:#fff; background:linear-gradient(90deg, color-mix(in srgb, var(--sp-accent) 32%, #0c0a18) 0%, color-mix(in srgb, var(--sp-accent) 55%, #0c0a18) 55%, var(--sp-accent) 100%); }
.sp-hero:has(.sp-visual-scene)::before, body:has(.sp-visual-scene) .sp-v2-facts .sp-hero::before { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 22px 22px; -webkit-mask-image:linear-gradient(90deg, transparent 20%, #000 70%); mask-image:linear-gradient(90deg, transparent 20%, #000 70%); }
.sp-hero:has(.sp-visual-scene) .sp-subtitle { color:rgba(255,255,255,.82); }
.sp-hero:has(.sp-visual-scene) .sp-badge span { border-color:rgba(255,255,255,.5); }
.sp-hero:has(.sp-visual-scene) a.sp-button, .sp-hero:has(.sp-visual-scene) a.sp-button:hover { background:#fff; color:color-mix(in srgb, var(--sp-accent) 45%, #0c0a18); }
body:has(.sp-visual-scene) .sp-v2-facts .sp-facts, body:has(.sp-visual-scene) .sp-v2-facts .sp-facts > div { border-color:rgba(255,255,255,.18); }
body:has(.sp-visual-scene) .sp-v2-facts dt { color:rgba(255,255,255,.7); }
.sp figcaption { margin-top:10px; font-size:12px; }
.sp-facts { display:grid; grid-template-columns:.75fr .75fr 1.3fr 1.2fr; margin:0; padding:26px 0 32px; border-top:1px solid color-mix(in srgb,var(--sp-accent) 35%,white); }
.sp-facts > div { padding:0 28px; border-left:1px solid color-mix(in srgb,var(--sp-accent) 35%,white); }
.sp-facts > div:first-child { border-left:0; padding-left:0; }
.sp-facts dt { font-size:11px; font-weight:400; margin-bottom:10px; }
.sp-facts dd { margin:0; font-size:17px; font-weight:600; line-height:1.45; }
.sp h2 { font-size:34px; font-weight:500; line-height:1.2; letter-spacing:-.035em; margin-top:14px; }
.sp h3 { font-size:18px; font-weight:500; margin-bottom:16px; }
.sp-overview { display:grid; grid-template-columns:1fr 1.35fr; gap:85px; padding:72px 0; }
.sp-overview-copy p { color:#51615e; line-height:1.85; }
.sp-overview-copy p + p { margin-top:16px; }
.sp-overview-copy strong { color:var(--sp-ink); font-weight:600; }
.sp-skills { background:var(--sp-tint); }
.sp-skills-grid { display:grid; grid-template-columns:.85fr 1.3fr; gap:90px; padding:60px 0; }
.sp .sp-list { list-style:none; margin:0; padding:0; }
.sp-list li { position:relative; padding:14px 0 14px 25px; border-bottom:1px solid #dce4e1; line-height:1.65; font-size:15px; }
.sp-list li:first-child { padding-top:0; }
.sp-list li:last-child { border-bottom:0; padding-bottom:0; }
.sp-list li::before { content:''; position:absolute; top:24px; left:0; width:7px; height:7px; background:var(--sp-accent); }
.sp-list li:first-child::before { top:10px; }
.sp-outcomes { padding:12px 0; }
.sp-outcomes > section { display:grid; grid-template-columns:.85fr 1.3fr; gap:90px; padding:60px 0; }
.sp-outcomes h2 { margin-bottom:0; }

.sp-documents { display:grid; grid-template-columns:1fr 1.35fr; gap:85px; padding:50px 0; border-top:2px solid var(--sp-ink); scroll-margin-top:85px; }
.sp-documents > div > p:last-child { max-width:360px; font-size:14px; margin-top:22px; color:#51615e; }
.sp-document-list a { display:flex; gap:24px; align-items:center; justify-content:space-between; padding:20px 0; border-bottom:1px solid #dce4e1; text-decoration:none; transition:padding .2s ease; }
.sp-document-list a:first-child { padding-top:0; }
.sp-document-list a:last-child { padding-bottom:0; border-bottom:0; }
.sp-document-list a:hover { padding-left:10px; }
.sp-document-list small { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; color:#51615e; }
.sp-document-list strong { font-weight:500; font-size:16px; }
.sp-document-list a > span:last-child { font-size:24px; }
.sp-curriculum { border-top:1px solid #dce4e1; border-bottom:1px solid #dce4e1; margin:0 0 72px; }
.sp-curriculum summary { display:flex; align-items:center; justify-content:space-between; padding:26px 0; cursor:pointer; list-style:none; font-size:24px; font-weight:500; }
.sp-curriculum summary::-webkit-details-marker { display:none; }
.sp-curriculum summary small { display:block; font-size:10px; letter-spacing:.1em; color:#51615e; margin-bottom:5px; }
.sp-expand { font-size:30px; font-weight:400; transition:transform .2s ease; }
.sp-curriculum[open] .sp-expand { transform:rotate(45deg); }
.sp-table { overflow-x:auto; margin-bottom:24px; }
.sp-table table { width:100%; min-width:650px; border-collapse:collapse; font-size:13px; }
.sp-table td,.sp-table th { padding:12px; border:1px solid #dce4e1; }
.sp-table tr:nth-child(even) { background:var(--sp-tint); }
.sp a:focus-visible,.sp summary:focus-visible,.sp-table:focus-visible { outline:2px solid var(--sp-ink); outline-offset:5px; }
@keyframes sp-enter { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1000px) { .sp-hero-grid { gap:32px; } .sp-overview,.sp-skills-grid,.sp-outcomes > section,.sp-documents { gap:36px; } }
@media(max-width:700px) {
 .sp-shell { padding:0 22px; } .sp-back { padding:20px 0; } .sp-hero-grid { grid-template-columns:1fr; padding:14px 0 30px; gap:30px; }
 .sp h1 { font-size:42px; } .sp .sp-subtitle { font-size:19px; } .sp-visual { max-width:400px; width:100%; aspect-ratio:1.4; } .sp-technical-art { max-height:210px; }
 .sp-facts { grid-template-columns:1fr 1fr; gap:26px 16px; } .sp-facts > div { padding:0; border:0; } .sp-facts dd { font-size:15px; }
 .sp-overview,.sp-skills-grid,.sp-outcomes > section,.sp-documents { grid-template-columns:1fr; gap:28px; } .sp-overview,.sp-outcomes > section { padding:42px 0; }
 .sp-skills-grid { padding:42px 0; } .sp h2 { font-size:30px; } .sp-outcomes { padding:0; } .sp-documents { padding:36px 0; } .sp-curriculum { margin-bottom:42px; }
}
@media(prefers-reduced-motion:reduce) { .sp * { animation:none !important; transition:none !important; } }

/* Independent Odbor v2 blocks share the original layout and alignment. */
.sp-v2 { scroll-margin-top:85px; }
.sp-v2 + br { display:none; }
.sp-v2-facts .sp-hero { border-top:0; }
.sp-v2-awards .sp-skills-grid { padding-top:72px; }
.sp-v2-careers .sp-skills-grid { padding-bottom:72px; }
/* Alternate backgrounds so Čo získaš (white) and Kde sa uplatníš (tint) read as two blocks; the gallery after them turns white. */
.sp-v2-careers .sp-v2-list-section { background:var(--sp-tint); }
.sp-v2-careers .sp-skills-grid { padding-top:72px; }
.sp-v2-careers .sp-list li { border-bottom-color:color-mix(in srgb,var(--sp-accent) 22%,white); }
.sp-v2-gallery .sp-skills { background:#fff; }
.sp-v2 .sp-v2-next-step { max-width:360px; font-size:14px; margin-top:22px; color:#51615e; }
.sp-v2-documents h2 { max-width:280px; }
@media(max-width:700px) {
 .sp-v2-awards .sp-skills-grid,.sp-v2-careers .sp-skills-grid { padding:42px 0; }
}
/* Odbor v2 photo gallery: three photos, the rest in an expandable list. */
.sp-gallery { padding:60px 0; }
.sp-gallery header { margin-bottom:32px; }
.sp-gallery-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.sp-gallery-grid a { display:block; overflow:hidden; background:#fff; }
.sp-gallery-grid img { display:block; width:100%; height:250px; object-fit:cover; transition:transform .3s ease; }
.sp-gallery-grid a:hover img { transform:scale(1.035); }
.sp-gallery-more { margin-top:16px; }
.sp-gallery-more summary { display:flex; align-items:center; justify-content:space-between; padding:18px 0; margin-bottom:16px; border-bottom:1px solid color-mix(in srgb,var(--sp-accent) 35%,white); cursor:pointer; list-style:none; font-size:15px; font-weight:500; }
.sp-gallery-more summary::-webkit-details-marker { display:none; }
.sp-gallery-more summary small { margin-left:8px; font-size:12px; color:#51615e; }
.sp-gallery-more[open] .sp-expand { transform:rotate(45deg); }
@media(max-width:700px) {
 .sp-gallery { padding:42px 0; } .sp-gallery-grid { grid-template-columns:1fr 1fr; gap:10px; } .sp-gallery-grid img { height:150px; }
 .sp-gallery > .sp-gallery-grid a:first-child { grid-column:1 / -1; } .sp-gallery > .sp-gallery-grid a:first-child img { height:220px; }
}
/* Standard composer rows keep their controls without adding layout gutters. */
.sostar-program-page .sostar-v2-row { margin:0 !important; }
.sostar-program-page .sostar-v2-row > .vc_column_container > .vc_column-inner { padding:0; margin:0; }